Skip to content

E
exhibition_page
提交 37b97b74 authored 作者: 龙菲's avatar 龙菲
浏览文件
操作

增加夜郎国的疑问，优化界面

上级 6e01476c
隐藏空白字符变更
内嵌 并排
正在显示 包含 740 行增加 和 340 行删除
src/assets/imgs/boutique/ylgdyw/4_crs/bg.png 0 → 100644
浏览文件 @ 37b97b74
This image diff could not be displayed because it is too large. You can view the blob instead.
src/views/boutique/components/YLGDYW.vue
浏览文件 @ 37b97b74
......@@ -59,7 +59,6 @@
</div>
</div>
</div>
<div class="unit-content">
<div class="unit-text">
<div class="title">{{ currentUnit.title }}</div>
......@@ -68,36 +67,90 @@
</div>
</div>
<div class="unit-cr">
<div v-for="(v,i) in currentUnit.culturalRelic" :key="i">{{}}</div>
<!-- <div class="cr-container" v-for="(v, key) in currentUnit.culturalRelic" :key="key">
<div class="left-info">
<div class="source">
<span>·来源</span>
<span>{{ v }}</span>
</div>
<div class="years">
<span>·年代</span>
<span>{{ v }}</span>
<div :class="{ 'unit-cr-group': true, 'flex-end': key == 0 || key == 2, 'flex-start': key == 1 }"
v-for="(v, key) in currentUnit.culturalRelic" :key="key">
<div class="cr-container" @click="handleClickCr(v)">
<div class="left-info" v-if="key == 0">
<div class="source">
<span class="dot"></span>
<span>来源</span>
<span>{{ v.source }}</span>
</div>
<div class="years">
<span class="dot"></span>
<span>年代</span>
<span>{{ v.years }}</span>
</div>
<div class="name">
{{ v.name }}
</div>
</div>
<div class="name">
{{ v }}
</div>
</div>
<div class="right-cr-img">
<div class="img-container">
<img :src="require(`@/assets/imgs/boutique/ylgdyw/2_unit/${v}`)" alt="">
<div class="right-cr-img">
<div class="img-container">
<img :src="require(`@/assets/imgs/boutique/ylgdyw/2_unit/${v.imgName}`)" alt="">
</div>
<div class="left-line" v-if="key == 0">
<img src="@/assets/imgs/boutique/ylgdyw/2_unit/right-line.png" alt="">
</div>
<div class="right-line" v-if="key == 1">
<img src="@/assets/imgs/boutique/ylgdyw/2_unit/left-line.png" alt="">
</div>
</div>
<div class="right-line">
<img src="@/assets/imgs/boutique/ylgdyw/2_unit/right-line.png" alt="">
<div class="left-info" v-if="key == 1">
<div class="source">
<span class="dot"></span>
<span>来源</span>
<span>{{ v.source }}</span>
</div>
<div class="years">
<span class="dot"></span>
<span>年代</span>
<span>{{ v.years }}</span>
</div>
<div class="name">
{{ v.name }}
</div>
</div>
</div>
</div> -->
</div>
</div>
</div>
</div>
<div class="gap-bg">
<img src="@/assets/imgs/boutique/ylgdyw/3_museum/bg.png" alt="">
</div>
<div class="musuem">
<div class="bg">
<img src="@/assets/imgs/boutique/ylgdyw/4_crs/bg.png" alt="">
</div>
<div class="info">
<div class="musuem-title">
<img src="@/assets/imgs/boutique/ylgdyw/3_museum/title.png" alt="">
</div>
<div class="musuem-intro">
黔西南州博物馆位于兴义市桔山广场，共计10000余平方米，为正科级公益性文化事业单位，设有陈列展览部、社会教育部、文物保护部、征集保管部、安全保卫部、文创研发部等部室。馆藏文物4500余件（套），其中一级文物32件（套），二级文物15件（套），三级文物60件（套）。精品文物有抚琴俑、铜车马、摇钱树、连枝灯、提梁壶、一字格剑等。现有基本陈列《夜郎的疑问-贵州汉代历史文物展》免费对公众开放，展览文物400余件（套），共三个单元六个展厅，展览面积3300平方米，为西南地区面积最大、珍贵文物较多的汉代文物专题展之一。
</div>
</div>
<div class="cr-group">
<div class="title">
夜郎国的炫丽文化
</div>
<div class="cr-imgs-group">
<div class="cr-container" v-for="(item, index) in bottomCrList" :key="index" @click="handleClickCr(item)">
<div class="img-container">
<img :src="require(`@/assets/imgs/boutique/ylgdyw/4_crs/${item.imgName}`)" alt="" />
</div>
<div class="name">{{ item.name }}</div>
<div class="years">{{ item.years }}</div>
<div class="made">{{ item.made }}</div>
<div class="source">{{ item.source }}</div>
</div>
</div>
</div>
</div>
</div>
<div class="conclusion"></div>
......@@ -114,18 +167,20 @@ export default {
title: '道不通',
img: 1,
text: '特定的文化面貌总是诞生于特定的自然地理环境。在黔西南这片山水交映的土地上，天然洞穴密布，动植物资源丰富。考古发现表明，大约在 12000 年前，史前先民已选择在靠近水源的浅山洞穴里生活，他们将天然的砾石稍加打制变为生产工具，最常见的石器类型是砍砸器和刮削器。猫猫洞、观音洞遗址出土的石器，演绎着黔西南大地上最初的人类故事，也让我们看到了先民适应自然的不懈努力。虽然“道不相通”，却自有精彩。',
cr: [
culturalRelic: [
{
name: '猫猫洞遗址出土刮削器',
years: '旧石器时代晚期',
source: '1993年4月顶效镇猫猫洞出土',
imgName: 'cr-1.png'
imgName: 'cr-1.png',
crId: ''
},
{
name: '观音洞遗址出土砍砸器',
years: '旧石器时代晚期和新石器时代过度时期',
source: '1993年4月龙广观音洞出土',
imgName: 'cr-2.png'
imgName: 'cr-2.png',
crId: ''
},
]
},
......@@ -133,35 +188,43 @@ export default {
title: '汉广大',
img: 2,
text: '西汉武帝时期，汉中央王朝对夜郎等“西南夷”进行了大规模开发。先是派唐蒙出使夜郎，会见夜郎王多同，“约为置吏，以其子为令”，并以秦时略通的“五尺道”为基础，修通僰道（今四川宜宾）直抵夜郎的“南夷道”。夜郎归汉后，其地置牂牁郡，并入汉帝国，融入汉文化，出土的官印直接显示了汉廷的有效控制。以交乐、万屯等东汉墓地为代表的考古发现，直观反映了汉文化的大幅进入，黔西南与周边地区的交通往来也达到新的高度。',
// cr: [
// {
// name: '猫猫洞遗址出土刮削器',
// years: '旧石器时代晚期',
// source: '1993年4月顶效镇猫猫洞出土'
// },
// {
// name: '观音洞遗址出土砍砸器',
// years: '旧石器时代晚期和新石器时代过度时期',
// source: '1993年4月龙广观音洞出土'
// },
// ]
culturalRelic: [
{
name: '一字格剑',
years: '战国-西汉',
source: '1985年郑屯镇与龙广镇交界处出土',
imgName: 'cr-3.png',
crId: ''
},
{
name: '铜钟',
years: '战国-西汉',
source: '1984年万屯镇佐舍村出土',
imgName: 'cr-4.png',
crId: ''
},
]
},
{
title: '一州主',
img: 3,
text: '夜郎大约享有300多年的历史，相当于战国至西汉时期。司马迁在《史记》中，一方面记载了夜郎王是“一州主”，却妄与汉平分秋色。另一方面，又承认“西南夷君长以什数，夜郎最大”。看似矛盾的说法，给子孙后代留下了无尽的疑问。从这一时期历年出土的文物中，我们可以发现一些地域特色，尤其是与汉代风格不同的青铜器和玉器。它们应该成为探索夜郎真实历史的重要线索之一。同时，在贵州西部与云南、广西和贵州的交界处，也发现了一些明显来自汉族地区的物品，这表明文化在传播中趋于融合。',
// cr: [
// {
// name: '猫猫洞遗址出土刮削器',
// years: '旧石器时代晚期',
// source: '1993年4月顶效镇猫猫洞出土'
// },
// {
// name: '观音洞遗址出土砍砸器',
// years: '旧石器时代晚期和新石器时代过度时期',
// source: '1993年4月龙广观音洞出土'
// },
// ]
culturalRelic: [
{
name: '摇钱树',
years: '东汉',
source: '1987年雨樟镇交乐6号墓出土',
imgName: 'cr-5.png',
crId: '5b7d94b9e361404a94d25bc561ff284f',
},
{
name: '铜车马',
years: '东汉',
source: '1987年雨樟镇交乐6号墓出土',
imgName: 'cr-6.png',
crId: '3189ce3499564153897b648c19300b4f'
},
]
},
],
currentUnit: {
......@@ -173,21 +236,50 @@ export default {
name: '猫猫洞遗址出土刮削器',
years: '旧石器时代晚期',
source: '1993年4月顶效镇猫猫洞出土',
imgName: 'cr-1'
imgName: 'cr-1.png'
},
{
name: '观音洞遗址出土砍砸器',
years: '旧石器时代晚期和新石器时代过度时期',
source: '1993年4月龙广观音洞出土',
imgName: 'cr-2'
imgName: 'cr-2.png'
},
]
},
currentHoverItem: null
currentHoverItem: null,
bottomCrList: [
{
name: '环形钮铜铃',
years: '战国-西汉',
made: '青铜',
source: '1999年册亨岩架征集',
imgName: 'cr-1.png',
crId: ''
},
{
name: '羊角钮钟',
years: '战国-西汉',
made: '青铜',
source: '1987年安龙县大鱼塘（文昌宫旧址）出土',
imgName: 'cr-2.png',
crId: ''
},
{
name: '一字格剑',
years: '战国-西汉',
made: '青铜',
source: '1997年郑屯与鲁屯的交界处',
imgName: 'cr-3.png',
crId: ''
}
]
}
},
methods: {
handleClickNode(item) {
// debugger
console.log(item.culturalRelic);
this.currentUnit = item
},
handleEnterUnit(item) {
......@@ -196,6 +288,16 @@ export default {
handleMouseLeave() {
this.currentHoverItem = null
},
handleClickCr(item) {
if (item.crId) {
const newPage = this.$router.resolve({
path: "culturalRelic/" + item.crId,
});
window.open(newPage.href, "_blank");
} else {
this.$message.info('该文物当前尚未上架，看看别的吧~')
}
}
}
}
</script>
......@@ -211,7 +313,7 @@ $themeYellow: #E7CE45;
.face-and-intro {
width: 100%;
position: relative;
height: 200vh;
height: 738vh;
.bg {
width: 100%;
......@@ -356,6 +458,7 @@ $themeYellow: #E7CE45;
width: 100%;
/* height: 200px; */
z-index: 9;
// overflow-x: hidden;
.line {
width: 100%;
......@@ -379,7 +482,8 @@ $themeYellow: #E7CE45;
.inner-dot {
width: 35px;
height: 35px;
background: $themeYellow;
// background: $themeYellow;
background: #fff;
border-radius: 50%;
position: absolute;
left: 50%;
......@@ -390,7 +494,8 @@ $themeYellow: #E7CE45;
.outter-circle {
width: 55px;
height: 55px;
border: 3px dashed $themeYellow;
// border: 3px dashed $themeYellow;
border: 3px dashed #fff;
border-radius: 50%;
position: absolute;
left: 50%;
......@@ -410,35 +515,250 @@ $themeYellow: #E7CE45;
.active {
.inner-dot {
animation: repeatScaleInner infinite 3s;
background: $themeYellow !important;
}
.outter-circle {
animation: repeatScaleOutter infinite 3s;
border: 3px dashed $themeYellow !important;
}
}
.unit-content {
padding: 40px;
.unit-text {
width: 40%;
color: #fff;
.title {
font-size: 38px;
margin-bottom: 16px;
letter-spacing: 6px;
}
.content {
font-size: 18px;
line-height: 1.5;
}
}
.unit-cr {
.unit-cr-group {
margin-top: 100px;
.cr-container {
display: flex;
align-items: flex-start;
.left-info {
display: flex;
color: #fff;
.source,
.years,
.name {
writing-mode: vertical-lr;
font-size: 20px;
margin-left: 16px;
.dot {
width: 12px;
height: 12px;
background: #fff;
border-radius: 50%;
margin-bottom: 18px;
display: inline-block;
}
}
.name {
background-image: url('@/assets/imgs/boutique/ylgdyw/2_unit/text-border.png');
background-size: 100% 100%;
padding: 20px 10px;
font-size: 28px;
margin-left: 32px;
}
}
.right-cr-img {
// position: relative;
margin: 0 80px;
&:hover {
&>.img-container {
&>img {
transform: scale(1.1);
}
}
}
.img-container {
// width: 940px;
// height: 530px;
width: 30vw;
height: 500px;
cursor: pointer;
img {
height: 100%;
width: 100%;
object-fit: contain;
transition: all ease 0.3s;
}
}
.left-line {
position: absolute;
right: 0;
}
.right-line {
position: absolute;
left: 0;
}
}
}
}
.flex-end {
display: flex;
justify-content: flex-end;
}
.flex-start {
display: flex;
justify-content: flex-start;
}
}
}
}
/**第三部分开始（柱子背景和博物馆介绍） */
.gap-bg {
width: 100%;
position: absolute;
top: 360vh;
z-index: 0;
img {
width: 100%;
height: 100%;
display: block;
}
}
.unit-content {
padding: 40px;
.musuem {
width: 100%;
position: absolute;
top: 410vh;
z-index: 9;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #fff;
font-size: 20px;
.bg {
width: 100%;
img {
width: 100%;
}
}
.info {
position: absolute;
left: 0;
top: 100vh;
padding: 0 200px;
.unit-text {
width: 80%;
color: #fff;
.musuem-title {
margin-bottom: 78px;
display: flex;
justify-content: center;
height: 60px;
img {
height: 100%;
}
}
.musuem-intro {
line-height: 2;
text-indent: 40px;
}
}
.cr-group {
position: absolute;
left: 0;
top: 160vh;
width: 100%;
.title {
font-size: 38px;
margin-bottom: 16px;
letter-spacing: 6px;
font-size: 48px;
display: flex;
justify-content: center;
margin-bottom: 94px;
}
.content {
font-size: 18px;
line-height: 1.5;
.cr-imgs-group {
display: flex;
justify-content: space-around;
width: 100%;
}
.cr-container {
cursor: pointer;
&:hover {
img {
scale: 1.1;
}
}
.img-container {
width: 30vw;
// width: 760px;
// height: 930px;
img {
width: 100%;
height: 100%;
transition: all ease 0.3s;
}
}
.name {
font-size: 36px;
font-weight: 800;
color: #FFFFFF;
display: flex;
justify-content: center;
margin: 70px 0 42px;
}
.years,
.made,
.source {
font-size: 20px;
display: flex;
justify-content: center;
margin-bottom: 16px;
}
}
}
}
@keyframes repeatScaleInner {
0% {
transform: translate(-50%, 25%) scale(1);
......
src/views/boutique/data.js
浏览文件 @ 37b97b74
......@@ -2,42 +2,42 @@ export var crPics = [
[
{
name: "邓氏贵州鱼龙（模式标本）",
crId: "dac1984d5ca74f48b6183ff4525f180c",
crId: "b84f45c2a63144dca9c909080b5e9aa4",
index: "2",
url: "http://222.85.214.245:9603/files/culturalRelicImport/2022-09-28-4495f59768b14b0b843dbdab965ac34e/faceImage/1/low/2.%E9%82%93%E6%B0%8F%E8%B4%B5%E5%B7%9E%E9%B1%BC%E9%BE%99%EF%BC%88%E6%A8%A1%E5%BC%8F%E6%A0%87%E6%9C%AC%EF%BC%89.jpg",
url: "http://114.115.157.218:9604/files/culturalRelicImport/2022-11-10-4ee6bcf5688145b78f8a4ee377cc638a/贵州省地质博物馆文物1/faceImage/2邓氏贵州鱼龙/low/2邓氏贵州鱼龙.png",
},
{
name: "梁氏关岭鱼龙（怀孕）",
crId: "6737746fb5af4324b5f8c0017837c5d1",
crId: "f7cc9c7c014e4031baf7112e1bc3a7d4",
index: "1",
url: "http://222.85.214.245:9604/files/culturalRelicImport/2022-09-28-4495f59768b14b0b843dbdab965ac34e/faceImage/21/low/20.梁氏关岭鱼龙（怀孕）.jpg",
url: "http://114.115.157.218:9604/files/culturalRelicImport/2022-11-10-4ee6bcf5688145b78f8a4ee377cc638a/贵州省地质博物馆文物1/faceImage/22梁氏关岭鱼龙（怀孕）/low/22梁氏关岭鱼龙-怀孕.png"
},
{
name: "美丽瓦窑龙（模式标本）",
crId: "adabb46a077e48a98d57135f6c640d65",
crId: "9ce8a18374ef4ffeabe802eef6dd7382",
index: "3",
url: "http://222.85.214.245:9603/files/culturalRelicImport/2022-09-28-4495f59768b14b0b843dbdab965ac34e/faceImage/2/low/%E7%BE%8E%E4%B8%BD%E7%93%A6%E7%AA%91%E9%BE%99%EF%BC%88%E6%A8%A1%E5%BC%8F%E6%A0%87%E6%9C%AC%EF%BC%89.jpg",
url: "http://114.115.157.218:9604/files/culturalRelicImport/2022-11-10-4ee6bcf5688145b78f8a4ee377cc638a/贵州省地质博物馆文物1/faceImage/3美丽瓦窑龙/low/3美丽瓦窑龙.png"
},
],
[
{
name: "许氏创孔海百合",
crId: "fffa08c7843544b89abf1f053d2f10dc",
crId: "682fbd7e08cb45b99706ca0d4259b1ac",
index: "1",
url: "http://222.85.214.245:9603/files/culturalRelicImport/2022-09-28-4495f59768b14b0b843dbdab965ac34e/faceImage/9/low/8.%E8%AE%B8%E6%B0%8F%E5%88%9B%E5%AD%94%E6%B5%B7%E7%99%BE%E5%90%88%EF%BC%88106%E3%8E%A1%EF%BC%89.jpg",
url: "http://114.115.157.218:9604/files/culturalRelicImport/2022-11-10-4ee6bcf5688145b78f8a4ee377cc638a/贵州省地质博物馆文物1/faceImage/10许氏创孔海百合/low/10许氏创孔海百合.png",
},
{
name: "黄果树安顺龙",
crId: "675dc67d064440f4aa5e51548e9a3c24",
crId: "37c4811384f94f6aa062f4f761271f50",
index: "2",
url: "http://222.85.214.245:9603/files/culturalRelicImport/2022-09-28-4495f59768b14b0b843dbdab965ac34e/faceImage/25/low/24.%E9%BB%84%E6%9E%9C%E6%A0%91%E5%AE%89%E9%A1%BA%E9%BE%99.jpg",
url: "http://114.115.157.218:9604/files/culturalRelicImport/2022-11-10-4ee6bcf5688145b78f8a4ee377cc638a/贵州省地质博物馆文物1/faceImage/26黄果树安顺龙/low/26黄果树安顺龙.png",
},
{
name: "杨氏幻龙",
crId: "60749f07723842cf85e2493978c761f4",
crId: "1839cfacdcb346e4ad6d3ea73ed4f60e",
index: "3",
url: "http://222.85.214.245:9603/files/culturalRelicImport/2022-09-28-4495f59768b14b0b843dbdab965ac34e/faceImage/15/low/14.%E6%9D%A8%E6%B0%8F%E5%B9%BB%E9%BE%99.jpg",
url: "http://114.115.157.218:9604/files/culturalRelicImport/2022-11-10-4ee6bcf5688145b78f8a4ee377cc638a/贵州省地质博物馆文物1/faceImage/16杨氏幻龙/low/16杨氏幻龙.png",
},
],
......@@ -45,41 +45,41 @@ export var crPics = [
[
{
name: "兴义欧龙",
crId: "5b4536ede4494a8f97113b6712575c56",
crId: "bed4641bca86425f92f0b02d5f317f11",
index: "1",
url: "http://222.85.214.245:9604/files/culturalRelicImport/2022-09-28-4495f59768b14b0b843dbdab965ac34e/faceImage/14/low/13.兴义欧龙.jpg",
url: "http://114.115.157.218:9604/files/culturalRelicImport/2022-11-10-4ee6bcf5688145b78f8a4ee377cc638a/贵州省地质博物馆文物1/faceImage/15兴义欧龙/low/15兴义欧龙.png"
},
{
name: "盘县混鱼龙",
crId: "09690224efc440d5bc54d11d1a961625",
crId: "e9eff2eeb2bc41b3ac60fefe5f9aaff6",
index: "2",
url: "http://222.85.214.245:9604/files/culturalRelicImport/2022-09-28-4495f59768b14b0b843dbdab965ac34e/faceImage/32/low/30.盘县混鱼龙.jpg",
url: "http://114.115.157.218:9604/files/culturalRelicImport/2022-11-10-4ee6bcf5688145b78f8a4ee377cc638a/贵州省地质博物馆文物1/faceImage/33盘县混鱼龙/low/33盘县混鱼龙.png"
},
{
name: "东方恐头龙",
crId: "1f48d2c232b74f0ab0037f99a07a1c4d",
crId: "1a2062f74b9840dc9e0cb27f00bc6e25",
index: "3",
url: "http://222.85.214.245:9604/files/culturalRelicImport/2022-09-28-4495f59768b14b0b843dbdab965ac34e/faceImage/24/low/23.东方恐头龙.jpg",
url: "http://114.115.157.218:9604/files/culturalRelicImport/2022-11-10-4ee6bcf5688145b78f8a4ee377cc638a/贵州省地质博物馆文物1/faceImage/25东方恐头龙/low/25东方恐头龙.png"
},
],
[
{
name: "孙氏新铺龙（模式标本 副型）",
crId: "25d19df6dedc4df794026e134df6ff3e",
crId: "1a2062f74b9840dc9e0cb27f00bc6e25",
index: "1",
url: "http://222.85.214.245:9604/files/culturalRelicImport/2022-09-28-4495f59768b14b0b843dbdab965ac34e/faceImage/5/low/5.孙氏新铺龙（模式标本）.png",
url: "http://114.115.157.218:9604/files/culturalRelicImport/2022-11-10-4ee6bcf5688145b78f8a4ee377cc638a/贵州省地质博物馆文物1/faceImage/25东方恐头龙/low/25东方恐头龙.png",
},
{
name: "乌沙安顺龙",
crId: "2bfefcd0a262402297bd2b1c43766e8f",
crId: "5421ad9aa1fa459c84ff5e3796f53a97",
index: "2",
url: "http://222.85.214.245:9604/files/culturalRelicImport/2022-09-28-4495f59768b14b0b843dbdab965ac34e/faceImage/16/low/16.乌沙安顺龙.jpg",
url: "http://114.115.157.218:9604/files/culturalRelicImport/2022-11-10-4ee6bcf5688145b78f8a4ee377cc638a/贵州省地质博物馆文物1/faceImage/18乌沙安顺龙/low/18乌沙安顺龙.png",
},
{
name: "羊圈幻龙",
crId: "5bf5a31036f2446ba346dd5f1a47c028",
crId: "248fcf3ecf734f5da8bddbbaa1a92d52",
index: "3",
url: "http://222.85.214.245:9604/files/culturalRelicImport/2022-09-28-4495f59768b14b0b843dbdab965ac34e/faceImage/13/low/12.羊圈幻龙.jpg",
url: "http://114.115.157.218:9604/files/culturalRelicImport/2022-11-10-4ee6bcf5688145b78f8a4ee377cc638a/贵州省地质博物馆文物1/faceImage/14羊圈幻龙/low/14羊圈幻龙.png",
},
],
]
src/views/boutique/index.vue
浏览文件 @ 37b97b74
......@@ -33,7 +33,7 @@
长角苗民俗及文化遗产
</p>
<SMGZ v-else-if="activeTab == 'smgz'" />
<!-- <YLGDYW v-else-if="activeTab == 'ylgdyw'" /> -->
<YLGDYW v-else-if="activeTab == 'ylgdyw'" />
<div v-else class="img-container">
<img :src="
require(`@/assets/imgs/boutique/${activeTab}.jpg`) ||
......
src/views/culturalRelic/Detail.vue
浏览文件 @ 37b97b74
......@@ -9,48 +9,47 @@
<div class="inner">
<!-- 展览基本信息 -->
<div class="inner-left wow animate__animated animate__fadeInLeft">
<div>
<SlideImage
:imgList="CRDetail.imagesVo"
v-if="CRDetail.imagesVo && CRDetail.imagesVo.length > 0"
/>
<SlideImage
:imgList="[{ pressUrl: CRDetail.faceImagePressUrl }]"
v-else-if="CRDetail.faceImagePressUrl"
/>
</div>
<!-- <div>
<SlideImage :imgList="CRDetail.imagesVo" v-if="CRDetail.imagesVo && CRDetail.imagesVo.length > 0" />
<SlideImage :imgList="[{ pressUrl: CRDetail.faceImagePressUrl }]" v-else-if="CRDetail.faceImagePressUrl" />
</div> -->
<!-- <div>
<img :src="CRDetail.faceImagePressUrl" alt="" />
</div> -->
<swiper :options="swiperOption2" ref="crSwiper">
<swiper-slide v-for="(item, i) in imagesVo" :key="i">
<div class="img-container" @click="handelPreviewImages(imagesVo)">
<img :src="item.pressUrl" alt="" />
</div>
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
<div class="swiper-button-prev" slot="button-prev">
<i class="el-icon-arrow-left"></i>
</div>
<div class="swiper-button-next" slot="button-next">
<i class="el-icon-arrow-right"></i>
</div>
</swiper>
</div>
<div class="inner-right">
<!-- tabs -->
<ul>
<li
:class="{ active: nodeActive === 'intro' }"
@click="handleTabClick('intro')"
>
<li :class="{ active: nodeActive === 'intro' }" @click="handleTabClick('intro')">
<span>文物简介</span>
</li>
<template v-for="node in tabbarData">
<li
:key="node.domId"
:class="{ active: nodeActive === node.domId }"
@click="handleTabClick(node.domId)"
<li :key="node.domId" :class="{ active: nodeActive === node.domId }" @click="handleTabClick(node.domId)"
v-if="
node.domId !== 'intro' &&
CRDetail[`${node.domId}`] &&
CRDetail[`${node.domId}`].length > 0
"
>
">
<span>{{ node.name }}</span>
</li>
</template>
<li
:class="{ active: nodeActive === 'relateRelics' }"
@click="handleTabClick('relateRelics')"
>
<li :class="{ active: nodeActive === 'relateRelics' }" @click="handleTabClick('relateRelics')">
<span>相关文物</span>
</li>
</ul>
......@@ -94,7 +93,7 @@
质地</span
> -->
<span class="value">{{
CRDetail.textureTypeLabel || "暂无"
CRDetail.textureTypeLabel || "暂无"
}}</span>
</div>
<div class="body-item" v-if="CRDetail.detailSize">
......@@ -112,35 +111,21 @@
</div>
</div>
<!-- 文物简介 -->
<div
class="content-item display-detail_intro"
v-if="CRDetail.intro"
id="intro"
>
<div class="content-item display-detail_intro" v-if="CRDetail.intro" id="intro">
<div class="intro-content">
<div
class="intro-content-container"
v-html="CRDetail.intro"
></div>
<div class="intro-content-container" v-html="CRDetail.intro"></div>
</div>
</div>
<div class="bottom">
<div class="tools">
<ReaderOperations
:loveCount="CRDetail.loveCount"
:loveCountStatus="Boolean(CRDetail.loveCountStatus)"
:collectCount="CRDetail.collectCount"
:collectCountStatus="Boolean(CRDetail.collectCountStatus)"
:sourceId="CRDetail.crId"
:title="CRDetail.name"
:sourceType="'biz_cultural_relic'"
@reload="loadDetail"
/>
<ReaderOperations :loveCount="CRDetail.loveCount" :loveCountStatus="Boolean(CRDetail.loveCountStatus)"
:collectCount="CRDetail.collectCount" :collectCountStatus="Boolean(CRDetail.collectCountStatus)"
:sourceId="CRDetail.crId" :title="CRDetail.name" :sourceType="'biz_cultural_relic'"
@reload="loadDetail" />
</div>
<div class="showIcon" v-if="CRDetail.url3d" @click="handleTo3D">
<svg-icon icon-class="3d" class="icon"></svg-icon
>查看文物3D模型
<svg-icon icon-class="3d" class="icon"></svg-icon>查看文物3D模型
</div>
</div>
</div>
......@@ -162,60 +147,38 @@
/>
</div> -->
<!-- 文物视频 -->
<div
class="content-item display-detail_videos"
v-if="
CRDetail.videosVo &&
CRDetail.videosVo.length > 0 &&
nodeActive === 'videosVo'
"
id="videosVo"
>
<div class="content-item display-detail_videos" v-if="
CRDetail.videosVo &&
CRDetail.videosVo.length > 0 &&
nodeActive === 'videosVo'
" id="videosVo">
<div class="video-title">
<!-- <i class="el-icon-video-camera"></i> -->
相关视频
</div>
<div class="video-names">
<div
class="video-item"
v-for="(item, index) in CRDetail.videosVo"
:key="index"
@click="handleChangeCurrentVideo(item)"
>
<div
:class="[
'name',
currentVideo && item.fileId == currentVideo.fileId
? 'active'
: '',
]"
>
<div class="video-item" v-for="(item, index) in CRDetail.videosVo" :key="index"
@click="handleChangeCurrentVideo(item)">
<div :class="[
'name',
currentVideo && item.fileId == currentVideo.fileId
? 'active'
: '',
]">
{{ item.name.split(".")[0] }}
</div>
</div>
</div>
<video-player
v-if="currentVideo"
:src="$getFullUrl(currentVideo.url)"
class="video-box"
></video-player>
<video-player v-if="currentVideo" :src="$getFullUrl(currentVideo.url)" class="video-box"></video-player>
</div>
<!--相关文物 -->
<div
class="content-item display-detail_relate_rc"
ref="units"
id="relateRelics"
v-if="nodeActive === 'relateRelics'"
>
<div class="content-item display-detail_relate_rc" ref="units" id="relateRelics"
v-if="nodeActive === 'relateRelics'">
<div class="recommend-type">
<el-radio-group v-model="currentRcKey" size="small">
<el-radio :label="'type'" v-if="CRDetail.type">同类别</el-radio>
<el-radio :label="'years'" v-if="CRDetail.years"
>同年代</el-radio
>
<el-radio :label="'deptId'" v-if="CRDetail.deptId"
>同馆藏</el-radio
>
<el-radio :label="'years'" v-if="CRDetail.years">同年代</el-radio>
<el-radio :label="'deptId'" v-if="CRDetail.deptId">同馆藏</el-radio>
</el-radio-group>
</div>
<div class="recommend-obj">
......@@ -228,99 +191,42 @@
</div>
</div>
<el-empty
v-else
description="暂无相关推荐，去看看其他的吧~"
></el-empty>
<el-empty v-else description="暂无相关推荐，去看看其他的吧~"></el-empty>
</div>
</div>
<!-- 相关文献 -->
<div
class="content-item display-detail_lts"
id="literatureVo"
v-if="
CRDetail.literatureVo &&
CRDetail.literatureVo.length > 0 &&
nodeActive === 'literatureVo'
"
>
<!-- <div class="wrapper"> -->
<div class="custom_title wow animate__animated animate__fadeInUp">
<div class="desc">
<div class="divider"></div>
<img
src="@/assets/imgs/display/normal/title-desc.png"
class="modify"
alt=""
/>
</div>
<div class="center">
<svg-icon icon-class="wenxian"></svg-icon>
<span class="title">相关文献</span>
</div>
<div class="desc">
<img
src="@/assets/imgs/display/normal/title-desc.png"
class="modify"
alt=""
/>
<div class="divider"></div>
</div>
<div class="content-item display-detail_lts" id="literatureVo" v-if="
CRDetail.literatureVo &&
CRDetail.literatureVo.length > 0 &&
nodeActive === 'literatureVo'
">
<div class="title">
相关文献
</div>
<div class="lts-content wow animate__animated animate__fadeInUp">
<el-table
:data="CRDetail.literatureVo"
:header-cell-style="{
background: '#eeeeee',
color: '#333',
}"
:row-style="tableRowStyle"
>
<el-table-column
prop="name"
label="名称"
align="center"
></el-table-column>
<el-table-column
prop="authors"
label="作者"
align="center"
></el-table-column>
<el-table-column
prop="date"
label="出版时间"
align="center"
></el-table-column>
<el-table-column
align="center"
prop="source"
label="出版所在刊物"
></el-table-column>
<el-table-column label="阅读" align="center">
<template slot-scope="scope">
<div class="pdf-img" @click="handleViewLt(scope.row)">
<img src="@/assets/imgs/display/ch/pdf-icon.png" />
</div>
</template>
</el-table-column>
</el-table>
<div class="lts-content">
<el-scrollbar style="height: 100%">
<div class="lt-item" v-for="(item, index) in CRDetail.literatureVo" :key="index"
@click="handleViewLt(item)">
<span class="lt-order">[{{ index + 1 }}]</span>
<span class="lt-authors" v-if="item.authors">{{ item.authors }}.</span>
<span class="lt-name" v-if="item.name">{{ item.name }}.</span>
<span class="lt-source" v-if="item.source">{{ item.source }}.</span>
<span class="lt-date" v-if="item.date">{{ item.date }}</span>
</div>
</el-scrollbar>
</div>
</div>
</div>
</div>
</div>
<el-image-viewer
v-if="imgViewerVisible"
:on-close="closeImgViewer"
:url-list="imgList"
/>
<el-image-viewer v-if="imgViewerVisible" :on-close="closeImgViewer" :url-list="imgList" />
</div>
</template>
<script>
// import SearchBar from "@/components/SearchBar";
// import CustomTitle from "@/components/CustomTitle";
// import QRCode from "qrcodejs2";
import AudioPlayer from "@/components/AudioPlayer";
import Video from "@/components/Video";
import ReaderOperations from "@/components/ReaderOperations";
......@@ -329,6 +235,7 @@ import { previewFile } from "@/utils/index";
import videoPlayer from "@/components/VideoPlayer";
import SlideImage from "@/components/SlideImage/slider.vue";
import { isElementInViewport2 } from "@/utils/index";
import { swiper, swiperSlide } from "vue-awesome-swiper";
export default {
components: {
AudioPlayer,
......@@ -336,6 +243,7 @@ export default {
Video,
videoPlayer,
SlideImage,
swiper, swiperSlide,
"el-image-viewer": () =>
import("element-ui/packages/image/src/image-viewer"),
},
......@@ -374,6 +282,23 @@ export default {
],
// tabbarItems: ["文物简介", "相关视频", "相关文物", "相关文献"],
nodeActive: "intro",
swiperOption2: {
// effect: "coverflow",
fadeEffect: {
crossFade: true,
},
grabCursor: true,
// 显示分页
pagination: {
el: ".swiper-pagination",
clickable: true, //允许分页点击跳转
},
// 设置点击箭头
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
},
};
},
watch: {
......@@ -384,6 +309,23 @@ export default {
this.loadCrRecommend();
},
},
computed: {
imagesVo() {
if (Object.keys(this.CRDetail).length == 0) {
return
}
if (this.CRDetail.imagesVo.length > 0) {
return this.CRDetail.imagesVo
} else {
return [
{
pressUrl: this.CRDetail.faceImagePressUrl,
url: this.CRDetail.faceImageUrl,
}
]
}
}
},
async mounted() {
let crId = this.$route.params.crId;
this.loadDetail(crId);
......@@ -477,20 +419,16 @@ export default {
this.imgViewerVisible = false;
},
handelPreviewImages(items, hasImages) {
handelPreviewImages(items) {
this.imgViewerVisible = true;
if (hasImages) {
this.imgList = items.map((item) => this.$getFullUrl(item.url));
} else {
this.imgList = items.map((item) => this.$getFullUrl(item));
}
this.imgList = items.map((item) => this.$getFullUrl(item.url));
},
handleToDetail(crId) {
// const newPage = this.$router.resolve({
// path: `culturalReli/${crId}`,
// });
// window.open(newPage.href, "_blank");
this.$router.push(`culturalRelic/${crId}`);
const newPage = this.$router.resolve({
path: `culturalReli/${crId}`,
});
window.open(newPage.href, "_blank");
// this.$router.push(`culturalRelic/${crId}`);
},
// 点击音频
handleClickAudio() {
......@@ -503,22 +441,6 @@ export default {
}
},
// 关联文献的行样式调整
tableRowStyle({ row, rowIndex }) {
if (rowIndex % 2 == 0) {
return {
background: "#f9f9f9 !important",
};
} else {
return {
background: "#fff !important",
};
}
},
// 预览关联文献
handleViewLt(item) {
previewFile(item.files[0].url, item.files[0].name);
},
closeImgViewer() {
this.imgViewerVisible = false;
......@@ -561,6 +483,14 @@ export default {
handleTabClick(type) {
this.nodeActive = type;
},
// 预览关联文献
handleViewLt(item) {
if (item.files[0].url) {
previewFile(item.files[0].url, item.files[0].name);
} else {
this.$message.info('当前文献暂不支持在线浏览')
}
},
},
};
</script>
......@@ -572,6 +502,7 @@ export default {
display: flex;
justify-content: center;
}
.page-item {
cursor: pointer;
}
......@@ -579,8 +510,10 @@ export default {
<style lang="scss" scoped>
$node-w: 700px;
.content {
position: relative;
.bg {
position: absolute;
top: 0;
......@@ -589,11 +522,13 @@ $node-w: 700px;
width: 100%;
height: 100%;
overflow: hidden;
> img {
>img {
width: 100%;
overflow: h;
filter: opacity(0.2) brightness(0.6);
}
.mask {
position: absolute;
top: 0;
......@@ -603,56 +538,96 @@ $node-w: 700px;
background: rgb(32 44 48 / 80%);
}
}
.inner {
width: 100%;
display: flex;
.inner-left {
width: 50%;
height: 100vh;
position: relative;
> div {
width: 90%;
height: 60vh;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -70%);
height: calc(100vh - 100px);
// position: relative;
display: flex;
align-items: center;
.swiper-container {
height: 68vh;
.img-container {
height: 100%;
width: 100%;
img {
height: 100%;
width: 100%;
object-fit: contain;
}
}
}
.swiper-button-next,
.swiper-button-prev {
background-image: none;
border: 5px solid #fff;
width: 60px;
height: 60px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
> img {
max-width: 100%;
max-height: 100%;
}
color: #fff;
font-weight: bolder;
transform: translateY(-72px);
}
// >div {
// width: 90%;
// height: 60vh;
// position: absolute;
// top: 50%;
// left: 50%;
// transform: translate(-50%, -70%);
// display: flex;
// justify-content: center;
// align-items: center;
// >img {
// max-width: 100%;
// max-height: 100%;
// }
// }
}
.inner-left {
padding: 0 60px;
::v-deep .firstDiv {
position: unset;
transform: none;
}
}
.inner-right {
width: 50%;
height: 100vh;
height: calc(100vh - 100px);
position: relative;
ul {
line-height: 50px;
position: absolute;
right: 60px;
top: 30px;
top: 90px;
width: 30px;
> li {
>li {
border: 1px solid #ddd;
writing-mode: vertical-lr;
width: 100%;
padding-top: 25px;
height: 140px;
margin: -1px 0;
> span {
>span {
color: #fff;
padding: 11px 2px;
border-radius: 8px 0 8px 0;
......@@ -663,7 +638,8 @@ $node-w: 700px;
&.active {
cursor: pointer;
background-color: $themeColor;
> span {
>span {
background: #b5800a;
}
}
......@@ -672,34 +648,41 @@ $node-w: 700px;
.info-container-right {
width: $node-w;
padding-bottom: 40px;
padding-bottom: 80px;
.info-title {
display: flex;
justify-content: space-between;
padding-top: 60px;
padding-top: 90px;
padding-bottom: 10px;
> span {
align-items: center;
>span {
font-size: 48px;
font-family: "华文行楷";
font-weight: 600;
color: #fff;
}
.view-count {
> span {
>span {
margin-left: 10px;
color: #ddd;
}
> svg {
>svg {
color: #ddd;
}
}
}
.basic-info {
display: flex;
flex-wrap: wrap;
padding-bottom: 60px;
color: #c2cbd3;
> div {
>div {
flex-shrink: 0;
line-height: 24px;
padding: 0px 10px;
......@@ -711,11 +694,14 @@ $node-w: 700px;
}
}
}
#intro {
min-height: 300px;
.intro-content {
color: #ffb836;
}
.intro-content-container {
width: $node-w;
font-size: 16px;
......@@ -725,42 +711,53 @@ $node-w: 700px;
}
#relateRelics {
padding-top: 60px;
padding-top: 90px;
width: 800px;
.recommend-type {
display: flex;
justify-content: center;
margin-bottom: 40px;
}
.recommend-obj {
width: 100%;
overflow: hidden;
.recommend-obj-node {
display: flex;
flex-wrap: wrap;
> div {
width: 50%;
justify-content: center;
>div {
width: 40%;
padding: 20px;
}
}
.img-container {
width: 100%;
height: 260px;
display: flex;
justify-content: center;
&:hover {
cursor: pointer;
> img {
>img {
transform: scale(1.2);
}
}
> img {
>img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
transition: all 0.3s ease;
transform: scale(1);
}
}
.cr-name {
line-height: 32px;
text-align: center;
......@@ -770,17 +767,55 @@ $node-w: 700px;
}
}
}
#literatureVo {
padding-top: 90px;
width: 800px;
color: #fff;
.title {
font-size: 18px;
font-family: SourceHanSerifCN-Bold;
margin-bottom: 30px;
display: flex;
justify-content: center;
}
.lts-content {
height: 64vh;
overflow-y: auto;
overflow-x: hidden;
}
.lt-item {
border-bottom: 1px dashed #ccc;
padding: 10px 0;
cursor: pointer;
&>span {
padding: 0 4px;
}
}
}
}
}
::v-deep .el-scrollbar__wrap {
overflow-x: hidden;
}
::v-deep .reader-operations {
color: #b2b2b2;
font-weight: 600;
font-family: "幼圆";
svg {
color: #b2b2b2;
}
}
}
::v-deep .el-carousel__item--card {
width: 100%;
height: 100%;
......@@ -790,19 +825,24 @@ $node-w: 700px;
::v-deep .el-carousel {
height: 100%;
}
::v-deep .el-carousel__container {
height: 100%;
}
::v-deep .el-tree {
background: transparent;
.el-tree-node__content {
height: 50px;
:hover {
background: #fff;
color: $themeColor;
}
}
}
::v-deep .el-radio__input {
display: none;
}
......@@ -812,12 +852,30 @@ $node-w: 700px;
padding-left: 0;
font-family: SourceHanSerifCN-Bold;
}
::v-deep .el-radio__input.is-checked + .el-radio__label {
::v-deep .el-radio__input.is-checked+.el-radio__label {
color: #ffb836;
}
::v-deep .el-radio__input+.el-radio__label {
color: #fff;
}
//左侧图片轮播
:v-deep .swiper {
height: 66vh;
.swiper-container {
height: 100%;
.swiper-wrapper {
height: 100%;
}
}
}
// ::v-deep .el-radio-button:first-child .el-radio-button__inner{
// border-radius: 0;
// }
......@@ -828,14 +886,17 @@ $node-w: 700px;
0% {
transform: translateX(0);
}
100% {
transform: translateX(-1200px);
}
}
@keyframes filmMoveRight {
0% {
transform: translateX(0);
}
100% {
transform: translateX(1200px);
}
......@@ -845,6 +906,7 @@ $node-w: 700px;
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(360deg);
}
......@@ -854,6 +916,7 @@ $node-w: 700px;
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(360deg);
}
......@@ -861,6 +924,7 @@ $node-w: 700px;
.animation-play-paused {
animation-play-state: paused;
-webkit-animation-play-state: paused; /* Safari 和 Chrome */
-webkit-animation-play-state: paused;
/* Safari 和 Chrome */
}
</style>
src/views/display/components/NormalStyle.vue
浏览文件 @ 37b97b74
......@@ -239,10 +239,11 @@
</div>
</div>
<div class="lts-content">
<div class="lt-item" v-for="(item, index) in displayDetail.literatureVo" :key="index">
<div class="lt-item" v-for="(item, index) in displayDetail.literatureVo" :key="index"
@click="handleViewLt(item)">
<span class="lt-order">[{{ index + 1 }}]</span>
<span class="lt-authors" v-if="item.authors">{{ item.authors }}.</span>
<span class="lt-name" v-if="item.name" @click="handleViewLt(item)">{{ item.authors }}.</span>
<span class="lt-name" v-if="item.name">{{ item.name }}.</span>
<span class="lt-source" v-if="item.source">{{ item.source }}.</span>
<span class="lt-date" v-if="item.date">{{ item.date }}</span>
</div>
......@@ -440,7 +441,11 @@ export default {
// 预览关联文献
handleViewLt(item) {
previewFile(item.files[0].url, item.files[0].name);
if (item.files[0].url) {
previewFile(item.files[0].url, item.files[0].name);
} else {
this.$message.info('当前文献暂不支持在线浏览')
}
},
// 点击音频
......
src/views/display/components/NormalStyleUnit.vue
浏览文件 @ 37b97b74
......@@ -38,7 +38,7 @@
</SlideImageGroup>
<el-row v-if="unitValue.imagesVo.length > 0 && unitValue.imagesVo.length < 4" :gutter="10">
<el-col v-for="(item, index) in unitValue.imagesVo" :key="index"
:span="24 / unitValue.imagesVo.length">
:span="24 / unitValue.imagesVo.length" style="height:300px">
<img :src="item.pressUrl" alt=""
style="width: 100%; height: 100%; object-fit: contain;cursor: pointer;"
@click="handelPreviewImages(unitValue.imagesVo)" />
......
src/views/home/components/CulturalRelic.vue
浏览文件 @ 37b97b74
......@@ -163,7 +163,7 @@ $blue: $themeColor;
img {
width: 100%;
height: 100%;
object-fit: cover;
object-fit: contain;
transition: all 0.5s ease;
}
.no-pic {
......
src/views/museum/Detail.vue
浏览文件 @ 37b97b74
......@@ -27,24 +27,27 @@
{{ currentTab }}
</div>
<div class="text-content">
<div class="intro" v-html="museumDetail.intro" v-if="currentTab == '简介'">
</div>
<div class="ways" v-if="currentTab == '入园方式'">
<div>地址：<span>{{ museumDetail.address }}</span></div>
<div>开放时间：<span>{{ museumDetail.openPeriod }}</span></div>
<div>入园方式：<span>{{ museumDetail.entryMode }}</span></div>
</div>
<div class="contact" v-if="currentTab == '联系方式'">
<div class="qr-code" v-if="museumDetail.qrCodeVo.length > 0">
<img :src="museumDetail.qrCodeVo[0].url" alt="">
<el-scrollbar style="height:100%">
<div class="intro" v-html="museumDetail.intro" v-if="currentTab == '简介'">
</div>
<div class="ways" v-if="currentTab == '入园方式'">
<div>地址：<span>{{ museumDetail.address }}</span></div>
<div>开放时间：<span>{{ museumDetail.openPeriod }}</span></div>
<div>入园方式：<span>{{ museumDetail.entryMode }}</span></div>
</div>
<div class="phone" v-if="museumDetail.phone">
<i class="el-icon-phone"></i>
<span>{{ museumDetail.phone }}</span>
<div class="contact" v-if="currentTab == '联系方式'">
<div class="qr-code" v-if="museumDetail.qrCodeVo.length > 0">
<img :src="museumDetail.qrCodeVo[0].url" alt="">
</div>
<div class="phone" v-if="museumDetail.phone">
<i class="el-icon-phone"></i>
<span>{{ museumDetail.phone }}</span>
</div>
<div v-if="!museumDetail.phone">暂无联系方式</div>
</div>
<div v-if="!museumDetail.phone">暂无联系方式</div>
</div>
</el-scrollbar>
</div>
</div>
</div>
......@@ -114,10 +117,10 @@ export default {
handleClickTab(item) {
this.currentTab = item
},
handleMouseEnter(item){
handleMouseEnter(item) {
console.log(item);
},
handleMouseLeave(item){
handleMouseLeave(item) {
console.log(item);
}
},
......@@ -278,6 +281,14 @@ export default {
align-items: center;
}
.text-content {
overflow: auto;
}
::v-deep .el-scrollbar__wrap {
overflow-x: hidden;
}
.intro {
text-indent: 32px;
line-height: 2;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论