Skip to content

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

布展和文物展页面内容实现

上级 756e3f8a
隐藏空白字符变更
内嵌 并排
正在显示 包含 1721 行增加 和 118 行删除
package.json
浏览文件 @ 039f5f8d
...@@ -40,8 +40,8 @@ ...@@ -40,8 +40,8 @@
"node": true "node": true
}, },
"extends": [ "extends": [
"plugin:vue/essential", "plugin:vue/essential"
"@vue/standard"
], ],
"parserOptions": { "parserOptions": {
"parser": "@babel/eslint-parser" "parser": "@babel/eslint-parser"
......
src/App.vue
浏览文件 @ 039f5f8d
<template> <template>
<div id="app"> <div id="app">
<nav> <NavBar />
<router-link to="/">Home</router-link> | <router-view />
<router-link to="/about">About</router-link> <Footer />
</nav>
<router-view/>
</div> </div>
</template> </template>
<script>
import NavBar from "@/components/NavBar";
import Footer from "@/components/Footer";
export default {
components: { NavBar, Footer },
};
</script>
<style lang="scss"> <style lang="scss">
#app { #app {
font-family: Avenir, Helvetica, Arial, sans-serif; font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
} }
html,
nav { body {
padding: 30px; margin: 0;
padding: 0;
a { background: #f7f7f7;
font-weight: bold;
color: #2c3e50;
&.router-link-exact-active {
color: #42b983;
}
}
} }
</style> </style>
src/components/CustomTitle/index.vue 0 → 100644
浏览文件 @ 039f5f8d
<!-- -->
<template>
<div class="custom-title">
{{ text }}
</div>
</template>
<script>
export default {
name: "CustomTitle",
props: {
text: {
type: String,
default: "标题",
},
},
data() {
return {};
},
mounted() {},
methods: {},
};
</script>
<style lang="scss" scoped>
.custom-title {
width: 100%;
padding: 8px;
font-size: 18px;
border-bottom: 1px solid rgba($color: #000000, $alpha: 0.3);
margin-bottom: 32px;
}
</style>
src/components/Footer/index.vue 0 → 100644
浏览文件 @ 039f5f8d
<!-- -->
<template>
<div class="footer">
<span>贵州省文化和旅游厅博物馆处版权所有</span>
<span>中国知网提供技术支持</span>
</div>
</template>
<script>
export default {
name: "Footer",
};
</script>
<style lang="scss" scoped>
.footer{
display: flex;
height: 100px;
padding: 0 24px;
justify-content: center;
align-items: center;
span{
margin-right: 16px;
}
}
</style>
src/components/HelloWorld.vue deleted 100644 → 0
浏览文件 @ 756e3f8a
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<p>
For a guide and recipes on how to configure / customize this project,<br>
check out the
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
</p>
<h3>Installed CLI Plugins</h3>
<ul>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
</ul>
<h3>Essential Links</h3>
<ul>
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
</ul>
<h3>Ecosystem</h3>
<ul>
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
</ul>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
src/components/NavBar/index.vue 0 → 100644
浏览文件 @ 039f5f8d
<template>
<div class="nav">
<div class="title">贵州省精品展览展示平台</div>
<div class="tabs" v-for="(item, index) in pages" :key="index">
<router-link :to="item.path">{{ item.name }}</router-link>
</div>
<div class="operation">
<span class="operation-item">登录</span>|
<router-link to="/personal" class="operation-item">个人中心</router-link>|
<span class="operation-item">退出</span>
</div>
</div>
</template>
<script>
export default {
name: "NavBar",
data() {
return {
pages: [
{
name: "首页",
path: "/",
},
{
name: "精品展",
path: "/boutique",
},
{
name: "虚拟展厅",
path: "/virtual",
},
{
name: "布展",
path: "/display",
},
{
name: "文物展",
path: "/culturalRelic",
},
],
};
},
};
</script>
<style lang="scss" scoped>
a{
color: #000;
text-decoration: none;
}
.nav{
display: flex;
height: 120px;
align-items: center;
justify-content: space-between;
// padding: 0 16%;
margin: auto;
width: 1200px;
.title{
font-size: 30px;
font-weight: bold;
}
.tabs{
display: flex;
margin-right: 5px;
}
.operation{
.operation-item{
margin-right: 8px;
cursor: pointer;
color: #000;
}
}
}
</style>
\ No newline at end of file
src/components/SearchBar/index.vue 0 → 100644
浏览文件 @ 039f5f8d
<!-- -->
<template>
<div class="search-bar">
<el-select v-model="select" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
<el-input
v-model="searchValue"
placeholder="请输入关键词"
class="center"
></el-input>
<el-button style="width:300px" round type="primary">检索</el-button>
</div>
</template>
<script>
export default {
name: "SearchBar",
props: {
options: {
type: Array,
default: () => [],
},
selectValue: {
type: String,
default: "",
},
keyword: {
type: String,
default: "",
},
},
data() {
return {};
},
computed: {
select() {
return this.selectValue;
},
searchValue() {
return this.keyword;
},
},
mounted() {},
methods: {},
};
</script>
<style lang="scss" scoped>
.search-bar {
width: 100%;
display: flex;
.center {
margin: 0 16px;
}
}
</style>
src/router/index.js
浏览文件 @ 039f5f8d
import Vue from 'vue' import Vue from 'vue'
import VueRouter from 'vue-router' import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue' import Home from '../views/home'
Vue.use(VueRouter) Vue.use(VueRouter)
const routes = [ const routes = [
// 首页
{ {
path: '/', path: '/',
name: 'home', name: 'home',
component: HomeView component: Home
}, },
// 精品展
{ {
path: '/about', path: '/boutique',
name: 'about', name: 'about',
// route level code-splitting component: () => import('@/views/boutique')
// this generates a separate chunk (about.[hash].js) for this route },
// which is lazy-loaded when the route is visited. // 虚拟展厅
component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue') {
} path: '/virtual',
name: 'virtual',
component: () => import('@/views/virtual')
},
// 布展
{
path: '/display',
name: 'display',
component: () => import('@/views/display')
},
// 布展详情页
{
path: '/display/:id',
name: 'displayDetail',
component: () => import('@/views/display/Detail.vue')
},
// 文物展
{
path: '/culturalRelic',
name: 'culturalRelic',
component: () => import('@/views/culturalRelic')
},
// 文物详情页
{
path: '/culturalRelic/:id',
name: 'culturalRelicDetail',
component: () => import('@/views/culturalRelic/Detail.vue')
},
// 个人中心
{
path: '/personal',
name: 'personal',
component: () => import('@/views/personal')
},
] ]
const router = new VueRouter({ const router = new VueRouter({
......
src/views/AboutView.vue deleted 100644 → 0
浏览文件 @ 756e3f8a
<template>
<div class="about">
<h1>This is an about page</h1>
</div>
</template>
src/views/HomeView.vue deleted 100644 → 0
浏览文件 @ 756e3f8a
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
export default {
name: 'HomeView',
components: {
HelloWorld
}
}
</script>
src/views/boutique/index.vue 0 → 100644
浏览文件 @ 039f5f8d
<template>
<div class="boutique">
<h1>精品展</h1>
</div>
</template>
<script>
export default {
name:'Boutique'
}
</script>
<style>
</style>
\ No newline at end of file
src/views/culturalRelic/Detail.vue 0 → 100644
浏览文件 @ 039f5f8d
<!-- -->
<template>
<div class="display-detail">
<div class="search">
<SearchBar
:options="options"
:selectValue="selectValue"
:keyword="keyword"
/>
</div>
<div class="wrapper">
<div class="detail-container">
<div class="slide">
<el-carousel indicator-position="outside">
<el-carousel-item v-for="item in relicInfo.imgs" :key="item">
<img
:src="require(`@/assets/imgs/${item}.png`)"
alt=""
srcset=""
width="100%"
/>
</el-carousel-item>
</el-carousel>
</div>
<div class="relic-info">
<div class="info-title">
<h4>{{ relicInfo.title }}</h4>
<div class="operation">
<el-button type="text">收藏</el-button>
<el-button type="text">点赞</el-button>
<el-button type="text">转发</el-button>
</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>
</div>
</div>
</div>
<div class="relate-book marginBottom32">
<CustomTitle text="相关文献" />
<div
class="book-item"
v-for="(item, index) in relateBooks"
:key="index"
>
<span>{{ item.name }}</span>
<span>{{ item.author }}</span>
<span>{{ item.source }}</span>
</div>
</div>
<div class="relate-cultual-relic marginBottom32">
<CustomTitle text="关联文物" />
<div class="display-group">
<div
class="display-item"
v-for="(item, index) in relateRelics"
:key="index"
>
<img
src="@/assets/imgs/display2.png"
width="100%"
:alt="item.title"
/>
<div class="display-desc">
<div class="desc-title">
<h4>{{ item.title }}</h4>
</div>
<div class="desc-time">
<span>{{ item.time }}</span>
</div>
<a class="desc-content" :alt="item.content">
{{ item.content }}
</a>
</div>
<!-- <div class="display-source">
<span>遵义文物局</span>
<el-button size="mini">进 入</el-button>
</div> -->
</div>
</div>
</div>
<div class="relate-video marginBottom32">
<CustomTitle text="关联视频" />
<div class="video-container">
<div class="video-box">
<video src=""></video>
</div>
<div class="info-box">
<h4 class="name">海龙屯藏品一块砖</h4>
<div class="source">明（1368-1644）</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import SearchBar from "@/components/SearchBar";
import CustomTitle from "@/components/CustomTitle";
export default {
components: { SearchBar, CustomTitle },
data() {
return {
options: [
{
value: "name",
label: "文物名称",
},
],
selectValue: "",
keyword: "",
relicInfo: {
imgs: ["display1", "display2", "relic"],
title: "明龙首镶宝石金带钩",
year: "明(1368~1644)",
type: "金银器",
level: "一级",
texture: "金;宝石",
size: "通长14.5厘米，通宽3厘米，边厚0.7厘米",
unit: "赫章县博物馆",
},
relateBooks: [
{ name: "带钩及其演变", author: "王莉", source: "文博.1996(01)" },
{ name: "古代带钩用途考实", author: "王仁湘", source: "文物.1982(10)" },
{
name: "金蝴蝶与金臂钏",
author: "陈娟;闫新法; 牛爱红",
source: "文明.2007(05)",
},
{
name: "带钩起源的服饰背景",
author: "马振凯;",
source: "齐鲁艺苑.2010(03)",
},
],
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。蜡染纹样分上下两个部分，上部分以飞翔的鹭鸟为主，其造型昂首展翅，屈肢及长长的尾羽，翔鹭间排布着和谐的几何纹样，作为陪衬，使图案组构丰满。其下为黄、蓝条形几组弦纹相间，使裙身的纹饰复杂中亦见简洁。下部分的纹饰图案似流云，流云间空隙以若干小点密布，两部份纹饰以黄蓝相间为底衬，且呈浓淡之分，显然是经过两次封蜡所出现的效果。冰纹均为纵向，细腻自然。再往下是完全不同的工艺手法所制作的三段纹饰，即在两段挑花中，夹一段刺绣，自上而下，是以黄蓝丝线挑的“万”字纹，与图象多变，似由树木、人物、走兽、环形图象等组构而成，并显黄蓝绿的刺绣图案，及以蓝色为主，间或呈黄色的挑花席纹。",
},
],
};
},
mounted() {},
methods: {},
};
</script>
<style lang="scss" scoped>
.search {
width: 1200px;
margin: auto;
margin-bottom: 32px;
}
.wrapper {
width: 1200px;
margin: auto;
.detail-container {
margin-bottom: 32px;
display: flex;
.slide {
width: 700px;
margin-right: 32px;
}
.relic-info {
.info-title {
display: flex;
align-items: center;
justify-content: space-between;
}
.info-body {
.body-item{
.label{
width: 160px;
margin-right: 16px;
}
}
}
}
.title-container {
display: flex;
justify-content: center;
position: relative;
.operation {
position: absolute;
right: 0;
display: flex;
align-items: center;
height: 100%;
}
}
.content {
text-indent: 32px;
}
}
.relate-book {
.book-item {
margin-bottom: 10px;
}
}
.relate-cultual-relic {
.display-group {
margin-top: 24px;
display: flex;
flex-flow: row wrap;
.display-item {
width: 282px;
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;
}
}
}
}
.relate-video {
.video-container {
display: flex;
flex-direction: column;
align-items: center;
.video-box {
display: flex;
justify-content: center;
border: 1px solid #000;
video {
width: 800px;
}
}
.info-box {
width: 800px;
display: flex;
justify-content: space-between;
}
}
}
}
.marginBottom32 {
margin-bottom: 32px;
}
</style>
src/views/culturalRelic/components/All.vue 0 → 100644
浏览文件 @ 039f5f8d
<!-- -->
<template>
<div class="display-group">
<div class="display-item" v-for="(item, index) in dataList" :key="index" @click="handleClick(item)">
<img src="@/assets/imgs/relic.png" width="100%" :alt="item.title" />
<div class="display-desc">
<div class="desc-title">
<h4>{{ item.title }}</h4>
</div>
<div class="desc-time">
<span>{{ item.time }}</span>
</div>
<a class="desc-content" :alt="item.content">
{{ item.content }}
</a>
</div>
<div class="display-source">
<span>遵义文物局</span>
<el-button size="mini">进 入</el-button>
</div>
</div>
</div>
</template>
<script>
export default {
name: "All",
data() {
return {
dataList: [
{
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。蜡染纹样分上下两个部分，上部分以飞翔的鹭鸟为主，其造型昂首展翅，屈肢及长长的尾羽，翔鹭间排布着和谐的几何纹样，作为陪衬，使图案组构丰满。其下为黄、蓝条形几组弦纹相间，使裙身的纹饰复杂中亦见简洁。下部分的纹饰图案似流云，流云间空隙以若干小点密布，两部份纹饰以黄蓝相间为底衬，且呈浓淡之分，显然是经过两次封蜡所出现的效果。冰纹均为纵向，细腻自然。再往下是完全不同的工艺手法所制作的三段纹饰，即在两段挑花中，夹一段刺绣，自上而下，是以黄蓝丝线挑的“万”字纹，与图象多变，似由树木、人物、走兽、环形图象等组构而成，并显黄蓝绿的刺绣图案，及以蓝色为主，间或呈黄色的挑花席纹。",
},
{
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。蜡染纹样分上下两个部分，上部分以飞翔的鹭鸟为主，其造型昂首展翅，屈肢及长长的尾羽，翔鹭间排布着和谐的几何纹样，作为陪衬，使图案组构丰满。其下为黄、蓝条形几组弦纹相间，使裙身的纹饰复杂中亦见简洁。下部分的纹饰图案似流云，流云间空隙以若干小点密布，两部份纹饰以黄蓝相间为底衬，且呈浓淡之分，显然是经过两次封蜡所出现的效果。冰纹均为纵向，细腻自然。再往下是完全不同的工艺手法所制作的三段纹饰，即在两段挑花中，夹一段刺绣，自上而下，是以黄蓝丝线挑的“万”字纹，与图象多变，似由树木、人物、走兽、环形图象等组构而成，并显黄蓝绿的刺绣图案，及以蓝色为主，间或呈黄色的挑花席纹。",
},
],
};
},
mounted() {},
methods: {
handleClick(item){
console.log(12);
this.$emit('handleClick',item)
}
},
};
</script>
<style lang="scss" scoped>
.display-group {
margin-top: 24px;
// padding: 0 16%;
display: flex;
flex-flow: row wrap;
.display-item {
width: 282px;
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>
src/views/culturalRelic/components/Area.vue 0 → 100644
浏览文件 @ 039f5f8d
<!-- -->
<template>
<div class="area">
<div class="area-bar">
<div class="label">所属区域：</div>
<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
<el-tab-pane
v-for="(item, index) in area"
:key="index"
:label="item.label"
:name="item.name"
>用户管理</el-tab-pane
>
</el-tabs>
</div>
<div class="display-group">
<div class="display-item" v-for="(item, index) in dataList" :key="index" @click="handleClick(item)">
<img src="@/assets/imgs/display2.png" width="100%" :alt="item.title" />
<div class="display-desc">
<div class="desc-title">
<h4>{{ item.title }}</h4>
</div>
<div class="desc-time">
<span>{{ item.time }}</span>
</div>
<a class="desc-content" :alt="item.content">
{{ item.content }}
</a>
</div>
<div class="display-source">
<span>遵义文物局</span>
<el-button size="mini">进 入</el-button>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "Area",
data() {
return {
area: [
{ label: "贵阳市", name: "1" },
{ label: "安顺市", name: "2" },
{ label: "黔南布依族苗族自治州", name: "3" },
{ label: "黔东南苗族侗族自治州", name: "4" },
{ label: "铜仁市", name: "5" },
{ label: "毕节市", name: "6" },
{ label: "六盘水市", name: "7" },
],
dataList: [
{
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。蜡染纹样分上下两个部分，上部分以飞翔的鹭鸟为主，其造型昂首展翅，屈肢及长长的尾羽，翔鹭间排布着和谐的几何纹样，作为陪衬，使图案组构丰满。其下为黄、蓝条形几组弦纹相间，使裙身的纹饰复杂中亦见简洁。下部分的纹饰图案似流云，流云间空隙以若干小点密布，两部份纹饰以黄蓝相间为底衬，且呈浓淡之分，显然是经过两次封蜡所出现的效果。冰纹均为纵向，细腻自然。再往下是完全不同的工艺手法所制作的三段纹饰，即在两段挑花中，夹一段刺绣，自上而下，是以黄蓝丝线挑的“万”字纹，与图象多变，似由树木、人物、走兽、环形图象等组构而成，并显黄蓝绿的刺绣图案，及以蓝色为主，间或呈黄色的挑花席纹。",
},
{
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。蜡染纹样分上下两个部分，上部分以飞翔的鹭鸟为主，其造型昂首展翅，屈肢及长长的尾羽，翔鹭间排布着和谐的几何纹样，作为陪衬，使图案组构丰满。其下为黄、蓝条形几组弦纹相间，使裙身的纹饰复杂中亦见简洁。下部分的纹饰图案似流云，流云间空隙以若干小点密布，两部份纹饰以黄蓝相间为底衬，且呈浓淡之分，显然是经过两次封蜡所出现的效果。冰纹均为纵向，细腻自然。再往下是完全不同的工艺手法所制作的三段纹饰，即在两段挑花中，夹一段刺绣，自上而下，是以黄蓝丝线挑的“万”字纹，与图象多变，似由树木、人物、走兽、环形图象等组构而成，并显黄蓝绿的刺绣图案，及以蓝色为主，间或呈黄色的挑花席纹。",
},
],
activeName: "",
};
},
mounted() {},
methods: {
handleClick(item){
this.$emit('handleClick',item)
}
},
};
</script>
<style lang="scss" scoped>
.area {
.area-bar {
height: 80px;
display: flex;
align-items: center;
flex: 1;
.label {
// border: 1px solid #000;
height: 100%;
display: flex;
// justify-content: center;
align-items: center;
// // padding: 0 16px;
// width: 100px;
}
.area-group {
display: flex;
height: 100%;
.area-item {
height: 100%;
border-right: 1px solid #000;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
display: flex;
align-items: center;
justify-content: center;
padding: 0 16px;
&:first-of-type {
border-left: 1px solid #000;
}
}
}
}
.display-group {
margin-top: 24px;
display: flex;
flex-flow: row wrap;
.display-item {
width: 282px;
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>
src/views/culturalRelic/components/ThreeDimension.vue 0 → 100644
浏览文件 @ 039f5f8d
<!-- -->
<template>
<div class="display-group">
<div
class="display-item"
v-for="(item, index) in dataList"
:key="index"
@click="handleClick(item)"
>
<img src="@/assets/imgs/relic.png" width="100%" :alt="item.title" />
<div class="display-desc">
<div class="desc-title">
<h4>{{ item.title }}</h4>
</div>
<div class="desc-time">
<span>{{ item.time }}</span>
</div>
<a class="desc-content" :alt="item.content">
{{ item.content }}
</a>
</div>
<div class="display-source">
<span>遵义文物局</span>
<el-button size="mini">进 入</el-button>
</div>
</div>
</div>
</template>
<script>
export default {
name: "ThreeDimension",
data() {
return {
dataList: [
{
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。蜡染纹样分上下两个部分，上部分以飞翔的鹭鸟为主，其造型昂首展翅，屈肢及长长的尾羽，翔鹭间排布着和谐的几何纹样，作为陪衬，使图案组构丰满。其下为黄、蓝条形几组弦纹相间，使裙身的纹饰复杂中亦见简洁。下部分的纹饰图案似流云，流云间空隙以若干小点密布，两部份纹饰以黄蓝相间为底衬，且呈浓淡之分，显然是经过两次封蜡所出现的效果。冰纹均为纵向，细腻自然。再往下是完全不同的工艺手法所制作的三段纹饰，即在两段挑花中，夹一段刺绣，自上而下，是以黄蓝丝线挑的“万”字纹，与图象多变，似由树木、人物、走兽、环形图象等组构而成，并显黄蓝绿的刺绣图案，及以蓝色为主，间或呈黄色的挑花席纹。",
},
{
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。蜡染纹样分上下两个部分，上部分以飞翔的鹭鸟为主，其造型昂首展翅，屈肢及长长的尾羽，翔鹭间排布着和谐的几何纹样，作为陪衬，使图案组构丰满。其下为黄、蓝条形几组弦纹相间，使裙身的纹饰复杂中亦见简洁。下部分的纹饰图案似流云，流云间空隙以若干小点密布，两部份纹饰以黄蓝相间为底衬，且呈浓淡之分，显然是经过两次封蜡所出现的效果。冰纹均为纵向，细腻自然。再往下是完全不同的工艺手法所制作的三段纹饰，即在两段挑花中，夹一段刺绣，自上而下，是以黄蓝丝线挑的“万”字纹，与图象多变，似由树木、人物、走兽、环形图象等组构而成，并显黄蓝绿的刺绣图案，及以蓝色为主，间或呈黄色的挑花席纹。",
},
],
};
},
mounted() {},
methods: {
handleClick(item) {
this.$emit("handleClick", item);
},
},
};
</script>
<style lang="scss" scoped>
.display-group {
margin-top: 24px;
// padding: 0 16%;
display: flex;
flex-flow: row wrap;
.display-item {
width: 282px;
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>
src/views/culturalRelic/index.vue 0 → 100644
浏览文件 @ 039f5f8d
<template>
<div class="display">
<div class="search">
<SearchBar
:options="options"
:selectValue="selectValue"
:keyword="keyword"
/>
<div class="types">
<el-button v-for="(item, index) in buttons" :key="index" type="text" @click.native="handleClickType(item.value)">{{
item.label
}}</el-button>
</div>
</div>
<ALL v-if="currentType === 'all'" @handleClick="handleClickCard" />
<Area v-if="currentType === 'area'" @handleClick="handleClickCard" />
<ThreeDimension
v-if="currentType === '3d'"
@handleClick="handleClickCard"
/>
<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 SearchBar from "@/components/SearchBar";
import ALL from "./components/All";
import Area from "./components/Area";
import ThreeDimension from "./components/ThreeDimension";
export default {
name: "CulturalRelic",
components: { SearchBar, ALL, Area, ThreeDimension },
data() {
return {
buttons: [
{
label: "所有",
value: "all",
},
{
label: "区域",
value: "area",
},
{
label: "3D",
value: "3d",
},
],
options: [
{
value: "name",
label: "文物名称",
},
],
selectValue: "",
keyword: "",
size: 12,
current: 1,
total: 1000,
currentType: "all",
};
},
methods: {
handleSizeChange(value) {
console.log("handleSizeChange", value);
},
handleCurrentChange(value) {
console.log("handleCurrentChange", value);
},
handleClickType(type) {
console.log("type", type);
this.currentType = type;
},
handleClickCard(value) {
console.log("接受到value", value);
this.$router.push({
path: "culturalRelic/1",
});
},
},
};
</script>
<style lang="scss" scoped>
$text-indent: 16px;
.display {
margin: auto;
width: 1200px;
.search {
// padding: 0 24%;
display: flex;
justify-content: space-between;
margin-bottom: 32px;
.types {
width: 160px;
margin-left: 16px;
}
}
.pagination {
margin-top: 24px;
display: flex;
justify-content: center;
}
}
</style>
\ No newline at end of file
src/views/display/Detail.vue 0 → 100644
浏览文件 @ 039f5f8d
<!-- -->
<template>
<div class="display-detail">
<div class="search">
<SearchBar
:options="options"
:selectValue="selectValue"
:keyword="keyword"
/>
</div>
<div class="wrapper">
<div class="detail-container">
<div class="title-container">
<h3 class="title">赫章可乐夜郎遗址展览</h3>
<div class="operation">
<el-button type="text">收藏</el-button>
<el-button type="text">点赞</el-button>
<el-button type="text">转发</el-button>
</div>
</div>
<div class="content">
可乐遗址位于贵州省赫章县可乐乡可乐河两岸的丘陵坡地上，是一处战国至汉时期（公元前475年至公元220年）的遗址。
遗址区包括遗址2处、墓葬群14处。遗址和墓葬群均有汉代遗址和战国时期的当地少数民族（即夜郎）遗址和墓葬两类。汉代城址，位于可乐河南岸，平面为“猪心形”，面积约6-7万平方米，有夯土城墙环绕。城内出土大量青铜戈、矛、钱币、瓦当、花纹砖等建材及陶、铜、铁等生产和生活用品。夜郎文化遗址距汉城约1公里，位于可乐河北岸，出土石器、铜器、陶器。汉墓一般规模较大，随葬少量金、银、玉等饰件及铜、铁、陶器等物。少数民族墓群除随葬少量陶、铜、铁、漆器外，其葬式极为特殊，其中的“套头葬”在国内罕见，反映出夜郎民族的埋葬特点。
可乐遗址对研究夜郎民族的政治、经济和文化都具有重要的历史价值和科学价值。
</div>
</div>
<div class="relate-book marginBottom32">
<CustomTitle text="相关文献" />
<div
class="book-item"
v-for="(item, index) in relateBooks"
:key="index"
>
<span>{{ item.name }}</span>
<span>{{ item.author }}</span>
<span>{{ item.source }}</span>
</div>
</div>
<div class="relate-cultual-relic marginBottom32">
<CustomTitle text="关联文物" />
<div class="display-group">
<div
class="display-item"
v-for="(item, index) in relateRelics"
:key="index"
>
<img
src="@/assets/imgs/display2.png"
width="100%"
:alt="item.title"
/>
<div class="display-desc">
<div class="desc-title">
<h4>{{ item.title }}</h4>
</div>
<div class="desc-time">
<span>{{ item.time }}</span>
</div>
<a class="desc-content" :alt="item.content">
{{ item.content }}
</a>
</div>
<!-- <div class="display-source">
<span>遵义文物局</span>
<el-button size="mini">进 入</el-button>
</div> -->
</div>
</div>
</div>
<div class="relate-video marginBottom32">
<CustomTitle text="关联视频" />
<div class="video-container">
<div class="video-box">
<video src=""></video>
</div>
<div class="info-box">
<h4 class="name">海龙屯藏品一块砖</h4>
<div class="source">明（1368-1644）</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import SearchBar from "@/components/SearchBar";
import CustomTitle from "@/components/CustomTitle";
export default {
components: { SearchBar, CustomTitle },
data() {
return {
options: [
{
value: "name",
label: "文物名称",
},
],
selectValue: "",
keyword: "",
relateBooks: [
{ name: "带钩及其演变", author: "王莉", source: "文博.1996(01)" },
{ name: "古代带钩用途考实", author: "王仁湘", source: "文物.1982(10)" },
{
name: "金蝴蝶与金臂钏",
author: "陈娟;闫新法; 牛爱红",
source: "文明.2007(05)",
},
{
name: "带钩起源的服饰背景",
author: "马振凯;",
source: "齐鲁艺苑.2010(03)",
},
],
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。蜡染纹样分上下两个部分，上部分以飞翔的鹭鸟为主，其造型昂首展翅，屈肢及长长的尾羽，翔鹭间排布着和谐的几何纹样，作为陪衬，使图案组构丰满。其下为黄、蓝条形几组弦纹相间，使裙身的纹饰复杂中亦见简洁。下部分的纹饰图案似流云，流云间空隙以若干小点密布，两部份纹饰以黄蓝相间为底衬，且呈浓淡之分，显然是经过两次封蜡所出现的效果。冰纹均为纵向，细腻自然。再往下是完全不同的工艺手法所制作的三段纹饰，即在两段挑花中，夹一段刺绣，自上而下，是以黄蓝丝线挑的“万”字纹，与图象多变，似由树木、人物、走兽、环形图象等组构而成，并显黄蓝绿的刺绣图案，及以蓝色为主，间或呈黄色的挑花席纹。",
},
],
};
},
mounted() {},
methods: {},
};
</script>
<style lang="scss" scoped>
.search {
width: 1200px;
margin: auto;
margin-bottom: 32px;
}
.wrapper {
width: 1200px;
margin: auto;
.detail-container {
margin-bottom: 32px;
.title-container {
display: flex;
justify-content: center;
position: relative;
.operation {
position: absolute;
right: 0;
display: flex;
align-items: center;
height: 100%;
}
}
.content {
text-indent: 32px;
}
}
.relate-book {
.book-item {
margin-bottom: 10px;
}
}
.relate-cultual-relic {
.display-group {
margin-top: 24px;
display: flex;
flex-flow: row wrap;
.display-item {
width: 282px;
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;
}
}
}
}
.relate-video {
.video-container {
display: flex;
flex-direction: column;
align-items: center;
.video-box {
display: flex;
justify-content: center;
border: 1px solid #000;
video {
width: 800px;
}
}
.info-box{
width: 800px;
display: flex;
justify-content: space-between;
}
}
}
}
.marginBottom32 {
margin-bottom: 32px;
}
</style>
src/views/display/index.vue 0 → 100644
浏览文件 @ 039f5f8d
<template>
<div class="display">
<div class="search">
<SearchBar
:options="options"
:selectValue="selectValue"
:keyword="keyword"
/>
</div>
<div class="display-group">
<el-row :gutter="16">
<el-col
:span="6"
v-for="(item, index) in exhibitions"
: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>
</el-col>
</el-row>
</div>
<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 SearchBar from "@/components/SearchBar";
export default {
name: "Display",
components: { SearchBar },
data() {
return {
options: [
{
value: "name",
label: "文物名称",
},
],
selectValue: "",
keyword: "",
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号展厅",
},
{
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号展厅",
},
],
size: 12,
current: 1,
total: 1000,
};
},
methods: {
handleSizeChange(value) {
console.log("handleSizeChange", value);
},
handleCurrentChange(value) {
console.log("handleCurrentChange", value);
},
handleClick() {
this.$router.push({
path: "display/1",
});
},
},
};
</script>
<style lang="scss" scoped>
.display {
margin: auto;
width: 1200px;
.search {
// padding: 0 24%;
}
.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;
display: flex;
justify-content: center;
}
}
</style>
\ No newline at end of file
src/views/home/index.vue 0 → 100644
浏览文件 @ 039f5f8d
<template>
<div class="home">
<h1>首页</h1>
</div>
</template>
<script>
export default {
name:'Home'
}
</script>
<style>
</style>
\ No newline at end of file
src/views/personal/index.vue 0 → 100644
浏览文件 @ 039f5f8d
<template>
<div class="personal">
<h1>个人中心</h1>
</div>
</template>
<script>
export default {
name:'Personal'
}
</script>
<style>
</style>
\ No newline at end of file
src/views/virtual/index.vue 0 → 100644
浏览文件 @ 039f5f8d
<template>
<div class="virtual">
<h1>虚拟展厅</h1>
</div>
</template>
<script>
export default {
name:'Virtual'
}
</script>
<style>
</style>
\ No newline at end of file
vue.config.js
浏览文件 @ 039f5f8d
...@@ -8,12 +8,12 @@ function resolve(dir) { ...@@ -8,12 +8,12 @@ function resolve(dir) {
} }
module.exports = defineConfig({ module.exports = defineConfig({
transpileDependencies: true, transpileDependencies: true,
lintOnSave: true, lintOnSave: false, //关闭eslint检查
//启动时自动打开网页
devServer: { devServer: {
host: 'localhost', host: 'localhost',
port: '8080', port: '8080',
open: true open: true,
hot:true
}, },
publicPath: './', publicPath: './',
chainWebpack: config => { chainWebpack: config => {
...@@ -38,4 +38,4 @@ module.exports = defineConfig({ ...@@ -38,4 +38,4 @@ module.exports = defineConfig({
return configuration return configuration
}, },
// TODO:接口代理 // TODO:接口代理
}) })
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论