Skip to content

E
exhibition_page
提交 4bffbcf8 authored 作者: longfei's avatar longfei
浏览文件
操作

个人中心页内容框架

上级 039f5f8d
隐藏空白字符变更
内嵌 并排
正在显示 包含 702 行增加 和 66 行删除
package-lock.json
浏览文件 @ 4bffbcf8
......@@ -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",
......
package.json
浏览文件 @ 4bffbcf8
......@@ -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"
......
src/components/CulturalRelicCard/index.vue 0 → 100644
浏览文件 @ 4bffbcf8
<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
src/components/DisplayCard/index.vue 0 → 100644
浏览文件 @ 4bffbcf8
<!-- 布展的列表项的卡片 -->
<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>
src/mock/mock.js 0 → 100644
浏览文件 @ 4bffbcf8
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号展厅",
},
]
src/views/culturalRelic/Detail.vue
浏览文件 @ 4bffbcf8
......@@ -32,30 +32,33 @@
</div>
</div>
<div class="info-body">
<div class="body-item">
<span class="label">年份</span>
<span class="value">{{ relicInfo.year }}</span>
</div>
<div class="body-item">
<span class="label">类别</span>
<span class="value">{{ relicInfo.type }}</span>
</div>
<div class="body-item">
<span class="label">级别</span>
<span class="value">{{ relicInfo.level }}</span>
</div>
<div class="body-item">
<span class="label">质地</span>
<span class="value">{{ relicInfo.texture }}</span>
</div>
<div class="body-item">
<span class="label">尺寸</span>
<span class="value">{{ relicInfo.size }}</span>
</div>
<div class="body-item">
<span class="label">馆藏单位</span>
<span class="value">{{ relicInfo.unit }}</span>
<div class="basic-info">
<div class="body-item">
<span class="label">年份</span>
<span class="value">{{ relicInfo.year }}</span>
</div>
<div class="body-item">
<span class="label">类别</span>
<span class="value">{{ relicInfo.type }}</span>
</div>
<div class="body-item">
<span class="label">级别</span>
<span class="value">{{ relicInfo.level }}</span>
</div>
<div class="body-item">
<span class="label">质地</span>
<span class="value">{{ relicInfo.texture }}</span>
</div>
<div class="body-item">
<span class="label">尺寸</span>
<span class="value">{{ relicInfo.size }}</span>
</div>
<div class="body-item">
<span class="label">馆藏单位</span>
<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,10 +235,18 @@ export default {
justify-content: space-between;
}
.info-body {
.body-item{
.label{
width: 160px;
margin-right: 16px;
display: flex;
justify-content: space-between;
align-items: flex-end;
.basic-info {
.body-item {
display: flex;
.label {
display: block;
width: 80px;
margin-right: 16px;
}
}
}
}
......
src/views/display/index.vue
浏览文件 @ 4bffbcf8
......@@ -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;
......
src/views/personal/components/Collection.vue 0 → 100644
浏览文件 @ 4bffbcf8
<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
src/views/personal/components/Footprint.vue 0 → 100644
浏览文件 @ 4bffbcf8
<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
src/views/personal/components/Info.vue 0 → 100644
浏览文件 @ 4bffbcf8
<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
src/views/personal/components/Like.vue 0 → 100644
浏览文件 @ 4bffbcf8
<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
src/views/personal/index.vue
浏览文件 @ 4bffbcf8
<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 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论