提交 4bffbcf8 authored 作者: longfei's avatar longfei

个人中心页内容框架

上级 039f5f8d
......@@ -10,6 +10,7 @@
"dependencies": {
"core-js": "^3.8.3",
"element-ui": "^2.15.9",
"qrcodejs2": "^0.0.2",
"vue": "^2.6.14",
"vue-router": "^3.5.1",
"vuex": "^3.6.2"
......@@ -9082,6 +9083,11 @@
"node": ">=6"
}
},
"node_modules/qrcodejs2": {
"version": "0.0.2",
"resolved": "https://registry.npmmirror.com/qrcodejs2/-/qrcodejs2-0.0.2.tgz",
"integrity": "sha512-+Y4HA+cb6qUzdgvI3KML8GYpMFwB24dFwzMkS/yXq6hwtUGNUnZQdUnksrV1XGMc2mid5ROw5SAuY9XhI3ValA=="
},
"node_modules/qs": {
"version": "6.10.3",
"resolved": "https://registry.npmmirror.com/qs/-/qs-6.10.3.tgz",
......@@ -18536,6 +18542,11 @@
"integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==",
"dev": true
},
"qrcodejs2": {
"version": "0.0.2",
"resolved": "https://registry.npmmirror.com/qrcodejs2/-/qrcodejs2-0.0.2.tgz",
"integrity": "sha512-+Y4HA+cb6qUzdgvI3KML8GYpMFwB24dFwzMkS/yXq6hwtUGNUnZQdUnksrV1XGMc2mid5ROw5SAuY9XhI3ValA=="
},
"qs": {
"version": "6.10.3",
"resolved": "https://registry.npmmirror.com/qs/-/qs-6.10.3.tgz",
......
......@@ -12,6 +12,7 @@
"dependencies": {
"core-js": "^3.8.3",
"element-ui": "^2.15.9",
"qrcodejs2": "^0.0.2",
"vue": "^2.6.14",
"vue-router": "^3.5.1",
"vuex": "^3.6.2"
......@@ -41,7 +42,6 @@
},
"extends": [
"plugin:vue/essential"
],
"parserOptions": {
"parser": "@babel/eslint-parser"
......
<template>
<div class="display-item">
<img src="@/assets/imgs/display2.png" width="100%" :alt="title" />
<div class="display-desc">
<div class="desc-title">
<h4>{{ title }}</h4>
</div>
<div class="desc-time">
<span>{{ time }}</span>
</div>
<a class="desc-content" :alt="content">
{{ content }}
</a>
</div>
</div>
</template>
<script>
export default {
name: "CulturalRelicCard",
props: {
img: {
type: String,
default: "",
},
title: {
type: String,
default: "",
},
time: {
type: String,
default: "",
},
content: {
type: String,
default: "",
},
},
};
</script>
<style lang='scss' scoped>
.display-item {
width: 330px;
margin-bottom: 32px;
border-radius: 16px;
border: 1px solid rgba(0, 0, 0, 0.1);
padding: 0 0 32px 0;
background-color: #fff;
margin-right: 10px;
cursor: pointer;
img {
border-radius: 16px 16px 0 0;
}
.display-desc {
padding: 0 16px;
.desc-content {
text-indent: 16px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
}
}
.display-source {
margin-top: 8px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 16px;
}
}
</style>
\ No newline at end of file
<!-- 布展的列表项的卡片 -->
<template>
<div class="display-card">
<img src="@/assets/imgs/display1.png" width="100%" alt="" />
<div class="display-desc">
<div class="desc-title">
<h4>{{ title }}</h4>
</div>
<div class="desc-content">
{{ content }}
</div>
</div>
</div>
</template>
<script>
export default {
name: "DisplayCard",
props: {
// 布展图片,为在线链接,先只展示静态图片
img:{
type:String,
default:'',
},
// 布展标题
title: {
type: String,
default: "",
},
// 布展详情内容,可能包含时间、地点、介绍等
content: {
type: String,
default: '',
},
},
};
</script>
<style lang="scss" scoped>
.display-card{
width: 100%;
border-radius: 8px;
margin-bottom: 32px;
background-color: #fff;
cursor: pointer;
img{
border-radius: 8px 8px 0 0;
}
.display-desc {
padding: 0 16px 16px 16px;
.desc-content {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
</style>
export var relateRelics = [{
imgUrl: "",
title: "宋代鹭鸟纹彩色蜡染褶裙",
time: "宋(960~1279)",
content: "1987年平坝棺材洞出土的这件宋代鹭鸟纹彩色蜡染褶裙。裙腰为麻质,白色,长31CM;裙身为棉质土布,长62.5CM,宽51.2CM。蜡染纹样分上下两个部分,上部分以飞翔的鹭鸟为主,其造型昂首展翅,屈肢及长长的尾羽,翔鹭间排布着和谐的几何纹样,作为陪衬,使图案组构丰满。其下为黄、蓝条形几组弦纹相间,使裙身的纹饰复杂中亦见简洁。下部分的纹饰图案似流云,流云间空隙以若干小点密布,两部份纹饰以黄蓝相间为底衬,且呈浓淡之分,显然是经过两次封蜡所出现的效果。冰纹均为纵向,细腻自然。再往下是完全不同的工艺手法所制作的三段纹饰,即在两段挑花中,夹一段刺绣,自上而下,是以黄蓝丝线挑的“万”字纹,与图象多变,似由树木、人物、走兽、环形图象等组构而成,并显黄蓝绿的刺绣图案,及以蓝色为主,间或呈黄色的挑花席纹。",
},
{
imgUrl: "",
title: "宋代鹭鸟纹彩色蜡染褶裙",
time: "宋(960~1279)",
content: "1987年平坝棺材洞出土的这件宋代鹭鸟纹彩色蜡染褶裙。裙腰为麻质,白色,长31CM;裙身为棉质土布,长62.5CM,宽51.2CM。蜡染纹样分上下两个部分,上部分以飞翔的鹭鸟为主,其造型昂首展翅,屈肢及长长的尾羽,翔鹭间排布着和谐的几何纹样,作为陪衬,使图案组构丰满。其下为黄、蓝条形几组弦纹相间,使裙身的纹饰复杂中亦见简洁。下部分的纹饰图案似流云,流云间空隙以若干小点密布,两部份纹饰以黄蓝相间为底衬,且呈浓淡之分,显然是经过两次封蜡所出现的效果。冰纹均为纵向,细腻自然。再往下是完全不同的工艺手法所制作的三段纹饰,即在两段挑花中,夹一段刺绣,自上而下,是以黄蓝丝线挑的“万”字纹,与图象多变,似由树木、人物、走兽、环形图象等组构而成,并显黄蓝绿的刺绣图案,及以蓝色为主,间或呈黄色的挑花席纹。",
},
{
imgUrl: "",
title: "宋代鹭鸟纹彩色蜡染褶裙",
time: "宋(960~1279)",
content: "1987年平坝棺材洞出土的这件宋代鹭鸟纹彩色蜡染褶裙。裙腰为麻质,白色,长31CM;裙身为棉质土布,长62.5CM,宽51.2CM。蜡染纹样分上下两个部分,上部分以飞翔的鹭鸟为主,其造型昂首展翅,屈肢及长长的尾羽,翔鹭间排布着和谐的几何纹样,作为陪衬,使图案组构丰满。其下为黄、蓝条形几组弦纹相间,使裙身的纹饰复杂中亦见简洁。下部分的纹饰图案似流云,流云间空隙以若干小点密布,两部份纹饰以黄蓝相间为底衬,且呈浓淡之分,显然是经过两次封蜡所出现的效果。冰纹均为纵向,细腻自然。再往下是完全不同的工艺手法所制作的三段纹饰,即在两段挑花中,夹一段刺绣,自上而下,是以黄蓝丝线挑的“万”字纹,与图象多变,似由树木、人物、走兽、环形图象等组构而成,并显黄蓝绿的刺绣图案,及以蓝色为主,间或呈黄色的挑花席纹。",
},
{
imgUrl: "",
title: "宋代鹭鸟纹彩色蜡染褶裙",
time: "宋(960~1279)",
content: "1987年平坝棺材洞出土的这件宋代鹭鸟纹彩色蜡染褶裙。裙腰为麻质,白色,长31CM;裙身为棉质土布,长62.5CM,宽51.2CM。蜡染纹样分上下两个部分,上部分以飞翔的鹭鸟为主,其造型昂首展翅,屈肢及长长的尾羽,翔鹭间排布着和谐的几何纹样,作为陪衬,使图案组构丰满。其下为黄、蓝条形几组弦纹相间,使裙身的纹饰复杂中亦见简洁。下部分的纹饰图案似流云,流云间空隙以若干小点密布,两部份纹饰以黄蓝相间为底衬,且呈浓淡之分,显然是经过两次封蜡所出现的效果。冰纹均为纵向,细腻自然。再往下是完全不同的工艺手法所制作的三段纹饰,即在两段挑花中,夹一段刺绣,自上而下,是以黄蓝丝线挑的“万”字纹,与图象多变,似由树木、人物、走兽、环形图象等组构而成,并显黄蓝绿的刺绣图案,及以蓝色为主,间或呈黄色的挑花席纹。",
},
{
imgUrl: "",
title: "宋代鹭鸟纹彩色蜡染褶裙",
time: "宋(960~1279)",
content: "1987年平坝棺材洞出土的这件宋代鹭鸟纹彩色蜡染褶裙。裙腰为麻质,白色,长31CM;裙身为棉质土布,长62.5CM,宽51.2CM。蜡染纹样分上下两个部分,上部分以飞翔的鹭鸟为主,其造型昂首展翅,屈肢及长长的尾羽,翔鹭间排布着和谐的几何纹样,作为陪衬,使图案组构丰满。其下为黄、蓝条形几组弦纹相间,使裙身的纹饰复杂中亦见简洁。下部分的纹饰图案似流云,流云间空隙以若干小点密布,两部份纹饰以黄蓝相间为底衬,且呈浓淡之分,显然是经过两次封蜡所出现的效果。冰纹均为纵向,细腻自然。再往下是完全不同的工艺手法所制作的三段纹饰,即在两段挑花中,夹一段刺绣,自上而下,是以黄蓝丝线挑的“万”字纹,与图象多变,似由树木、人物、走兽、环形图象等组构而成,并显黄蓝绿的刺绣图案,及以蓝色为主,间或呈黄色的挑花席纹。",
},
]
export var exhibitions = [{
imgUrl: "",
title: "贵博新展 | 清平乐——《韩琦楷书信札》及宋代文人风韵展",
content: " 展出时间:2022年01月21日-2022年4月10日 展出地点:贵州省博物馆负一楼6号展厅",
},
{
imgUrl: "",
title: "贵博新展 | 清平乐——《韩琦楷书信札》及宋代文人风韵展",
content: " 展出时间:2022年01月21日-2022年4月10日 展出地点:贵州省博物馆负一楼6号展厅",
},
{
imgUrl: "",
title: "贵博新展 | 清平乐——《韩琦楷书信札》及宋代文人风韵展",
content: " 展出时间:2022年01月21日-2022年4月10日 展出地点:贵州省博物馆负一楼6号展厅",
},
{
imgUrl: "",
title: "贵博新展 | 清平乐——《韩琦楷书信札》及宋代文人风韵展",
content: " 展出时间:2022年01月21日-2022年4月10日 展出地点:贵州省博物馆负一楼6号展厅",
},
{
imgUrl: "",
title: "贵博新展 | 清平乐——《韩琦楷书信札》及宋代文人风韵展",
content: " 展出时间:2022年01月21日-2022年4月10日 展出地点:贵州省博物馆负一楼6号展厅",
},
{
imgUrl: "",
title: "贵博新展 | 清平乐——《韩琦楷书信札》及宋代文人风韵展",
content: " 展出时间:2022年01月21日-2022年4月10日 展出地点:贵州省博物馆负一楼6号展厅",
},
{
imgUrl: "",
title: "贵博新展 | 清平乐——《韩琦楷书信札》及宋代文人风韵展",
content: " 展出时间:2022年01月21日-2022年4月10日 展出地点:贵州省博物馆负一楼6号展厅",
},
]
......@@ -32,6 +32,7 @@
</div>
</div>
<div class="info-body">
<div class="basic-info">
<div class="body-item">
<span class="label">年份</span>
<span class="value">{{ relicInfo.year }}</span>
......@@ -57,6 +58,8 @@
<span class="value">{{ relicInfo.unit }}</span>
</div>
</div>
<div class="qrcode" ref="qrCodeUrl"></div>
</div>
</div>
</div>
......@@ -122,7 +125,7 @@
<script>
import SearchBar from "@/components/SearchBar";
import CustomTitle from "@/components/CustomTitle";
import QRCode from "qrcodejs2";
export default {
components: { SearchBar, CustomTitle },
data() {
......@@ -191,8 +194,21 @@ export default {
],
};
},
mounted() {},
methods: {},
mounted() {
this.creatQrCode();
},
methods: {
creatQrCode() {
var qrcode = new QRCode(this.$refs.qrCodeUrl, {
text: "http://www.gzmuseum.com/", // 需要转换为二维码的内容
width: 100,
height: 100,
colorDark: "#000000",
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.H,
});
},
},
};
</script>
......@@ -219,14 +235,22 @@ export default {
justify-content: space-between;
}
.info-body {
.body-item{
.label{
width: 160px;
display: flex;
justify-content: space-between;
align-items: flex-end;
.basic-info {
.body-item {
display: flex;
.label {
display: block;
width: 80px;
margin-right: 16px;
}
}
}
}
}
.title-container {
display: flex;
......
......@@ -15,17 +15,7 @@
:key="index"
@click.native="handleClick"
>
<div class="display-item">
<img src="@/assets/imgs/display1.png" width="100%" alt="" />
<div class="display-desc">
<div class="desc-title">
<h4>{{ item.title }}</h4>
</div>
<div class="desc-content">
{{ item.content }}
</div>
</div>
</div>
<DisplayCard :title="item.title" :content="item.content"/>
</el-col>
</el-row>
</div>
......@@ -47,9 +37,10 @@
<script>
import SearchBar from "@/components/SearchBar";
import DisplayCard from "@/components/DisplayCard";
export default {
name: "Display",
components: { SearchBar },
components: { SearchBar, DisplayCard },
data() {
return {
options: [
......@@ -165,24 +156,6 @@ export default {
.display-group {
margin-top: 24px;
// padding: 0 16%;
.display-item {
width: 100%;
border-radius: 8px;
margin-bottom: 32px;
cursor: pointer;
.display-desc {
.desc-title {
// white-space: nowrap;
// overflow: hidden;
// text-overflow: ellipsis;
}
.desc-content {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
}
.pagination {
margin-top: 24px;
......
<template>
<div class="like">
<el-tabs :tab-position="'top'">
<el-tab-pane label="文物">
<div class="display-group">
<div v-for="(item, index) in relateRelics" :key="index">
<CulturalRelicCard
:title="item.title"
:content="item.content"
:time="item.time"
/>
</div>
</div>
</el-tab-pane>
<el-tab-pane label="展览">
<el-row :gutter="16">
<el-col
:span="6"
v-for="(item, index) in exhibitions"
:key="index"
@click.native="handleClick"
>
<DisplayCard :title="item.title" :content="item.content" />
</el-col> </el-row
></el-tab-pane>
</el-tabs>
<div class="pagination">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="current"
:page-sizes="[12, 28, 40]"
:page-size="size"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
>
</el-pagination>
</div>
</div>
</template>
<script>
import DisplayCard from "@/components/DisplayCard";
import CulturalRelicCard from "@/components/CulturalRelicCard";
export default {
name: "Collection",
components: {
DisplayCard,
CulturalRelicCard,
},
props: {
relateRelics: {
type: Array,
default: () => [],
},
exhibitions: {
type: Array,
default: () => [],
},
size: {
type: Number,
default: 10,
},
current: {
type: Number,
default: 1,
},
total: {
type: Number,
default: 100,
},
},
methods:{
handleSizeChange(value) {
console.log("handleSizeChange", value);
this.$emit('handleSizeChange',value)
},
handleCurrentChange(value) {
console.log("handleCurrentChange", value);
this.$emit('handleCurrentChange',value)
},
}
};
</script>
<style lang="scss" scoped>
.like {
padding: 0 32px;
.display-group {
margin-top: 24px;
display: flex;
flex-flow: row wrap;
.display-item {
width: 330px;
margin-bottom: 32px;
border-radius: 16px;
border: 1px solid rgba(0, 0, 0, 0.1);
padding: 0 0 32px 0;
background-color: #fff;
margin-right: 10px;
cursor: pointer;
img {
border-radius: 16px 16px 0 0;
}
.display-desc {
padding: 0 16px;
.desc-content {
text-indent: 16px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
}
}
.display-source {
margin-top: 8px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 16px;
}
}
}
}
</style>
\ No newline at end of file
<template>
<div class="like">
<el-tabs :tab-position="'top'">
<el-tab-pane label="文物">
<div class="display-group">
<div v-for="(item, index) in relateRelics" :key="index">
<CulturalRelicCard
:title="item.title"
:content="item.content"
:time="item.time"
/>
</div>
</div>
</el-tab-pane>
<el-tab-pane label="展览">
<el-row :gutter="16">
<el-col
:span="6"
v-for="(item, index) in exhibitions"
:key="index"
@click.native="handleClick"
>
<DisplayCard :title="item.title" :content="item.content" />
</el-col> </el-row
></el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import DisplayCard from "@/components/DisplayCard";
import CulturalRelicCard from "@/components/CulturalRelicCard";
export default {
name: "Footprint",
components: {
DisplayCard,
CulturalRelicCard,
},
props: {
relateRelics: {
type: Array,
default: () => [],
},
exhibitions: {
type: Array,
default: () => [],
},
},
};
</script>
<style lang="scss" scoped>
.like {
padding: 0 32px;
.display-group {
margin-top: 24px;
display: flex;
flex-flow: row wrap;
}
}
</style>
\ No newline at end of file
<template>
<div class="personal-info">
<el-form ref="form" label-width="80px">
<el-form-item label="昵称"> 游客12345 </el-form-item>
<el-form-item label="邮箱"> 117282299@qq.com </el-form-item>
<el-form-item label="手机号"> 11728229911 </el-form-item>
<el-form-item>
<el-button @click="editInfo">修改个人信息</el-button>
<el-button @click="editPassword">修改密码</el-button>
</el-form-item>
</el-form>
<el-dialog title="修改个人信息" :visible.sync="dialogFormVisible" >
<el-form :model="infoData" v-if="isEditBasicInfo" :label-position="'right'">
<el-form-item label="昵称" >
<el-input v-model="infoData.name" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="邮箱" >
<el-input v-model="infoData.email" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="手机号" >
<el-input v-model="infoData.phone" autocomplete="off"></el-input>
</el-form-item>
</el-form>
<el-form :model="pwdData" v-else>
<el-form-item label="旧密码">
<el-input
v-model="pwdData.oldPwd"
autocomplete="off"
type="password"
></el-input>
</el-form-item>
<el-form-item label="新密码" >
<el-input
v-model="pwdData.newPwd"
autocomplete="off"
type="password"
></el-input>
</el-form-item>
<el-form-item label="重复密码" >
<el-input
v-model="pwdData.repeatPwd"
autocomplete="off"
type="password"
></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogFormVisible = false"
>确 定</el-button
>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
name: "Info",
data() {
return {
dialogFormVisible: false,
infoData: {
name: "",
email: "",
phone: "",
},
pwdData: {
oldPwd: "",
newPwd: "",
repeatPwd: "",
},
isEditBasicInfo: true,
};
},
methods: {
editInfo() {
this.dialogFormVisible = true;
this.isEditBasicInfo = true;
},
editPassword() {
this.dialogFormVisible = true;
this.isEditBasicInfo = false;
},
},
};
</script>
\ No newline at end of file
<template>
<div class="like">
<el-tabs :tab-position="'top'">
<el-tab-pane label="文物">
<div class="display-group">
<div v-for="(item, index) in relateRelics" :key="index">
<CulturalRelicCard
:title="item.title"
:content="item.content"
:time="item.time"
/>
</div>
</div>
</el-tab-pane>
<el-tab-pane label="展览">
<el-row :gutter="16">
<el-col
:span="6"
v-for="(item, index) in exhibitions"
:key="index"
@click.native="handleClick"
>
<DisplayCard :title="item.title" :content="item.content" />
</el-col> </el-row
></el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import DisplayCard from "@/components/DisplayCard";
import CulturalRelicCard from "@/components/CulturalRelicCard";
export default {
name: "Like",
components: {
DisplayCard,
CulturalRelicCard,
},
props: {
relateRelics: {
type: Array,
default: () => [],
},
exhibitions: {
type: Array,
default: () => [],
},
},
};
</script>
<style lang="scss" scoped>
.like {
padding: 0 32px;
.display-group {
margin-top: 24px;
display: flex;
flex-flow: row wrap;
.display-item {
width: 330px;
margin-bottom: 32px;
border-radius: 16px;
border: 1px solid rgba(0, 0, 0, 0.1);
padding: 0 0 32px 0;
background-color: #fff;
margin-right: 10px;
cursor: pointer;
img {
border-radius: 16px 16px 0 0;
}
.display-desc {
padding: 0 16px;
.desc-content {
text-indent: 16px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
}
}
.display-source {
margin-top: 8px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 16px;
}
}
}
}
</style>
\ No newline at end of file
<template>
<div class="personal">
<h1>个人中心</h1>
<el-tabs :tab-position="'left'" type="card">
<el-tab-pane label="我的点赞">
<Like
:exhibitions="exhibitions"
:relateRelics="relateRelics"
@handleSizeChange="handleSizeChange"
@handleCurrentChange="handleCurrentChange"
/>
</el-tab-pane>
<el-tab-pane label="我的收藏">
<Collection
:exhibitions="exhibitions"
:relateRelics="relateRelics"
@handleSizeChange="handleSizeChange"
@handleCurrentChange="handleCurrentChange"
/>
</el-tab-pane>
<el-tab-pane label="浏览记录">
<Footprint
:exhibitions="exhibitions"
:relateRelics="relateRelics"
@handleSizeChange="handleSizeChange"
@handleCurrentChange="handleCurrentChange"
/>
</el-tab-pane>
<el-tab-pane label="个人信息"><Info /></el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import { relateRelics, exhibitions } from "@/mock/mock";
import Like from "./components/Like.vue";
import Collection from "./components/Collection.vue";
import Footprint from "./components/Collection.vue";
import Info from "./components/Info.vue";
export default {
name:'Personal'
}
components: {
Like,
Collection,
Footprint,
Info,
},
name: "Personal",
data() {
return {
relateRelics: relateRelics,
exhibitions: exhibitions,
};
},
methods: {
handleSizeChange(value) {
console.log("handleSizeChange", value);
},
handleCurrentChange(value) {
console.log("handleCurrentChange", value);
},
},
};
</script>
<style>
<style lang='scss' scoped>
.personal {
width: 1200px;
margin: auto;
}
</style>
\ No newline at end of file
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论