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 @@ ...@@ -59,7 +59,6 @@
</div> </div>
</div> </div>
</div> </div>
<div class="unit-content"> <div class="unit-content">
<div class="unit-text"> <div class="unit-text">
<div class="title">{{ currentUnit.title }}</div> <div class="title">{{ currentUnit.title }}</div>
...@@ -68,36 +67,90 @@ ...@@ -68,36 +67,90 @@
</div> </div>
</div> </div>
<div class="unit-cr"> <div class="unit-cr">
<div v-for="(v,i) in currentUnit.culturalRelic" :key="i">{{}}</div> <div :class="{ 'unit-cr-group': true, 'flex-end': key == 0 || key == 2, 'flex-start': key == 1 }"
<!-- <div class="cr-container" v-for="(v, key) in currentUnit.culturalRelic" :key="key"> v-for="(v, key) in currentUnit.culturalRelic" :key="key">
<div class="left-info"> <div class="cr-container" @click="handleClickCr(v)">
<div class="source"> <div class="left-info" v-if="key == 0">
<span>·来源</span> <div class="source">
<span>{{ v }}</span> <span class="dot"></span>
</div> <span>来源</span>
<div class="years"> <span>{{ v.source }}</span>
<span>·年代</span> </div>
<span>{{ v }}</span> <div class="years">
<span class="dot"></span>
<span>年代</span>
<span>{{ v.years }}</span>
</div>
<div class="name">
{{ v.name }}
</div>
</div> </div>
<div class="name"> <div class="right-cr-img">
{{ v }} <div class="img-container">
</div> <img :src="require(`@/assets/imgs/boutique/ylgdyw/2_unit/${v.imgName}`)" alt="">
</div> </div>
<div class="right-cr-img"> <div class="left-line" v-if="key == 0">
<div class="img-container"> <img src="@/assets/imgs/boutique/ylgdyw/2_unit/right-line.png" alt="">
<img :src="require(`@/assets/imgs/boutique/ylgdyw/2_unit/${v}`)" 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>
<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>
</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>
<div class="conclusion"></div> <div class="conclusion"></div>
...@@ -114,18 +167,20 @@ export default { ...@@ -114,18 +167,20 @@ export default {
title: '道不通', title: '道不通',
img: 1, img: 1,
text: '特定的文化面貌总是诞生于特定的自然地理环境。在黔西南这片山水交映的土地上，天然洞穴密布，动植物资源丰富。考古发现表明，大约在 12000 年前，史前先民已选择在靠近水源的浅山洞穴里生活，他们将天然的砾石稍加打制变为生产工具，最常见的石器类型是砍砸器和刮削器。猫猫洞、观音洞遗址出土的石器，演绎着黔西南大地上最初的人类故事，也让我们看到了先民适应自然的不懈努力。虽然“道不相通”，却自有精彩。', text: '特定的文化面貌总是诞生于特定的自然地理环境。在黔西南这片山水交映的土地上，天然洞穴密布，动植物资源丰富。考古发现表明，大约在 12000 年前，史前先民已选择在靠近水源的浅山洞穴里生活，他们将天然的砾石稍加打制变为生产工具，最常见的石器类型是砍砸器和刮削器。猫猫洞、观音洞遗址出土的石器，演绎着黔西南大地上最初的人类故事，也让我们看到了先民适应自然的不懈努力。虽然“道不相通”，却自有精彩。',
cr: [ culturalRelic: [
{ {
name: '猫猫洞遗址出土刮削器', name: '猫猫洞遗址出土刮削器',
years: '旧石器时代晚期', years: '旧石器时代晚期',
source: '1993年4月顶效镇猫猫洞出土', source: '1993年4月顶效镇猫猫洞出土',
imgName: 'cr-1.png' imgName: 'cr-1.png',
crId: ''
}, },
{ {
name: '观音洞遗址出土砍砸器', name: '观音洞遗址出土砍砸器',
years: '旧石器时代晚期和新石器时代过度时期', years: '旧石器时代晚期和新石器时代过度时期',
source: '1993年4月龙广观音洞出土', source: '1993年4月龙广观音洞出土',
imgName: 'cr-2.png' imgName: 'cr-2.png',
crId: ''
}, },
] ]
}, },
...@@ -133,35 +188,43 @@ export default { ...@@ -133,35 +188,43 @@ export default {
title: '汉广大', title: '汉广大',
img: 2, img: 2,
text: '西汉武帝时期，汉中央王朝对夜郎等“西南夷”进行了大规模开发。先是派唐蒙出使夜郎，会见夜郎王多同，“约为置吏，以其子为令”，并以秦时略通的“五尺道”为基础，修通僰道（今四川宜宾）直抵夜郎的“南夷道”。夜郎归汉后，其地置牂牁郡，并入汉帝国，融入汉文化，出土的官印直接显示了汉廷的有效控制。以交乐、万屯等东汉墓地为代表的考古发现，直观反映了汉文化的大幅进入，黔西南与周边地区的交通往来也达到新的高度。', text: '西汉武帝时期，汉中央王朝对夜郎等“西南夷”进行了大规模开发。先是派唐蒙出使夜郎，会见夜郎王多同，“约为置吏，以其子为令”，并以秦时略通的“五尺道”为基础，修通僰道（今四川宜宾）直抵夜郎的“南夷道”。夜郎归汉后，其地置牂牁郡，并入汉帝国，融入汉文化，出土的官印直接显示了汉廷的有效控制。以交乐、万屯等东汉墓地为代表的考古发现，直观反映了汉文化的大幅进入，黔西南与周边地区的交通往来也达到新的高度。',
// cr: [ culturalRelic: [
// { {
// name: '猫猫洞遗址出土刮削器', name: '一字格剑',
// years: '旧石器时代晚期', years: '战国-西汉',
// source: '1993年4月顶效镇猫猫洞出土' source: '1985年郑屯镇与龙广镇交界处出土',
// }, imgName: 'cr-3.png',
// { crId: ''
// name: '观音洞遗址出土砍砸器', },
// years: '旧石器时代晚期和新石器时代过度时期', {
// source: '1993年4月龙广观音洞出土' name: '铜钟',
// }, years: '战国-西汉',
// ] source: '1984年万屯镇佐舍村出土',
imgName: 'cr-4.png',
crId: ''
},
]
}, },
{ {
title: '一州主', title: '一州主',
img: 3, img: 3,
text: '夜郎大约享有300多年的历史，相当于战国至西汉时期。司马迁在《史记》中，一方面记载了夜郎王是“一州主”，却妄与汉平分秋色。另一方面，又承认“西南夷君长以什数，夜郎最大”。看似矛盾的说法，给子孙后代留下了无尽的疑问。从这一时期历年出土的文物中，我们可以发现一些地域特色，尤其是与汉代风格不同的青铜器和玉器。它们应该成为探索夜郎真实历史的重要线索之一。同时，在贵州西部与云南、广西和贵州的交界处，也发现了一些明显来自汉族地区的物品，这表明文化在传播中趋于融合。', text: '夜郎大约享有300多年的历史，相当于战国至西汉时期。司马迁在《史记》中，一方面记载了夜郎王是“一州主”，却妄与汉平分秋色。另一方面，又承认“西南夷君长以什数，夜郎最大”。看似矛盾的说法，给子孙后代留下了无尽的疑问。从这一时期历年出土的文物中，我们可以发现一些地域特色，尤其是与汉代风格不同的青铜器和玉器。它们应该成为探索夜郎真实历史的重要线索之一。同时，在贵州西部与云南、广西和贵州的交界处，也发现了一些明显来自汉族地区的物品，这表明文化在传播中趋于融合。',
// cr: [ culturalRelic: [
// { {
// name: '猫猫洞遗址出土刮削器', name: '摇钱树',
// years: '旧石器时代晚期', years: '东汉',
// source: '1993年4月顶效镇猫猫洞出土' source: '1987年雨樟镇交乐6号墓出土',
// }, imgName: 'cr-5.png',
// { crId: '5b7d94b9e361404a94d25bc561ff284f',
// name: '观音洞遗址出土砍砸器', },
// years: '旧石器时代晚期和新石器时代过度时期', {
// source: '1993年4月龙广观音洞出土' name: '铜车马',
// }, years: '东汉',
// ] source: '1987年雨樟镇交乐6号墓出土',
imgName: 'cr-6.png',
crId: '3189ce3499564153897b648c19300b4f'
},
]
}, },
], ],
currentUnit: { currentUnit: {
...@@ -173,21 +236,50 @@ export default { ...@@ -173,21 +236,50 @@ export default {
name: '猫猫洞遗址出土刮削器', name: '猫猫洞遗址出土刮削器',
years: '旧石器时代晚期', years: '旧石器时代晚期',
source: '1993年4月顶效镇猫猫洞出土', source: '1993年4月顶效镇猫猫洞出土',
imgName: 'cr-1' imgName: 'cr-1.png'
}, },
{ {
name: '观音洞遗址出土砍砸器', name: '观音洞遗址出土砍砸器',
years: '旧石器时代晚期和新石器时代过度时期', years: '旧石器时代晚期和新石器时代过度时期',
source: '1993年4月龙广观音洞出土', 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: { methods: {
handleClickNode(item) { handleClickNode(item) {
// debugger
console.log(item.culturalRelic);
this.currentUnit = item this.currentUnit = item
}, },
handleEnterUnit(item) { handleEnterUnit(item) {
...@@ -196,6 +288,16 @@ export default { ...@@ -196,6 +288,16 @@ export default {
handleMouseLeave() { handleMouseLeave() {
this.currentHoverItem = null 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> </script>
...@@ -211,7 +313,7 @@ $themeYellow: #E7CE45; ...@@ -211,7 +313,7 @@ $themeYellow: #E7CE45;
.face-and-intro { .face-and-intro {
width: 100%; width: 100%;
position: relative; position: relative;
height: 200vh; height: 738vh;
.bg { .bg {
width: 100%; width: 100%;
...@@ -356,6 +458,7 @@ $themeYellow: #E7CE45; ...@@ -356,6 +458,7 @@ $themeYellow: #E7CE45;
width: 100%; width: 100%;
/* height: 200px; */ /* height: 200px; */
z-index: 9; z-index: 9;
// overflow-x: hidden;
.line { .line {
width: 100%; width: 100%;
...@@ -379,7 +482,8 @@ $themeYellow: #E7CE45; ...@@ -379,7 +482,8 @@ $themeYellow: #E7CE45;
.inner-dot { .inner-dot {
width: 35px; width: 35px;
height: 35px; height: 35px;
background: $themeYellow; // background: $themeYellow;
background: #fff;
border-radius: 50%; border-radius: 50%;
position: absolute; position: absolute;
left: 50%; left: 50%;
...@@ -390,7 +494,8 @@ $themeYellow: #E7CE45; ...@@ -390,7 +494,8 @@ $themeYellow: #E7CE45;
.outter-circle { .outter-circle {
width: 55px; width: 55px;
height: 55px; height: 55px;
border: 3px dashed $themeYellow; // border: 3px dashed $themeYellow;
border: 3px dashed #fff;
border-radius: 50%; border-radius: 50%;
position: absolute; position: absolute;
left: 50%; left: 50%;
...@@ -410,35 +515,250 @@ $themeYellow: #E7CE45; ...@@ -410,35 +515,250 @@ $themeYellow: #E7CE45;
.active { .active {
.inner-dot { .inner-dot {
animation: repeatScaleInner infinite 3s; animation: repeatScaleInner infinite 3s;
background: $themeYellow !important;
} }
.outter-circle { .outter-circle {
animation: repeatScaleOutter infinite 3s; 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 { .musuem {
padding: 40px; 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 { .musuem-title {
width: 80%; margin-bottom: 78px;
color: #fff; 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 { .title {
font-size: 38px; font-size: 48px;
margin-bottom: 16px; display: flex;
letter-spacing: 6px; justify-content: center;
margin-bottom: 94px;
} }
.content { .cr-imgs-group {
font-size: 18px; display: flex;
line-height: 1.5; 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 { @keyframes repeatScaleInner {
0% { 0% {
transform: translate(-50%, 25%) scale(1); transform: translate(-50%, 25%) scale(1);
......
src/views/boutique/data.js
浏览文件 @ 37b97b74
...@@ -2,42 +2,42 @@ export var crPics = [ ...@@ -2,42 +2,42 @@ export var crPics = [
[ [
{ {
name: "邓氏贵州鱼龙（模式标本）", name: "邓氏贵州鱼龙（模式标本）",
crId: "dac1984d5ca74f48b6183ff4525f180c", crId: "b84f45c2a63144dca9c909080b5e9aa4",
index: "2", 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: "梁氏关岭鱼龙（怀孕）", name: "梁氏关岭鱼龙（怀孕）",
crId: "6737746fb5af4324b5f8c0017837c5d1", crId: "f7cc9c7c014e4031baf7112e1bc3a7d4",
index: "1", 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: "美丽瓦窑龙（模式标本）", name: "美丽瓦窑龙（模式标本）",
crId: "adabb46a077e48a98d57135f6c640d65", crId: "9ce8a18374ef4ffeabe802eef6dd7382",
index: "3", 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: "许氏创孔海百合", name: "许氏创孔海百合",
crId: "fffa08c7843544b89abf1f053d2f10dc", crId: "682fbd7e08cb45b99706ca0d4259b1ac",
index: "1", 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: "黄果树安顺龙", name: "黄果树安顺龙",
crId: "675dc67d064440f4aa5e51548e9a3c24", crId: "37c4811384f94f6aa062f4f761271f50",
index: "2", 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: "杨氏幻龙", name: "杨氏幻龙",
crId: "60749f07723842cf85e2493978c761f4", crId: "1839cfacdcb346e4ad6d3ea73ed4f60e",
index: "3", 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 = [ ...@@ -45,41 +45,41 @@ export var crPics = [
[ [
{ {
name: "兴义欧龙", name: "兴义欧龙",
crId: "5b4536ede4494a8f97113b6712575c56", crId: "bed4641bca86425f92f0b02d5f317f11",
index: "1", 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: "盘县混鱼龙", name: "盘县混鱼龙",
crId: "09690224efc440d5bc54d11d1a961625", crId: "e9eff2eeb2bc41b3ac60fefe5f9aaff6",
index: "2", 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: "东方恐头龙", name: "东方恐头龙",
crId: "1f48d2c232b74f0ab0037f99a07a1c4d", crId: "1a2062f74b9840dc9e0cb27f00bc6e25",
index: "3", 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: "孙氏新铺龙（模式标本 副型）", name: "孙氏新铺龙（模式标本 副型）",
crId: "25d19df6dedc4df794026e134df6ff3e", crId: "1a2062f74b9840dc9e0cb27f00bc6e25",
index: "1", 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: "乌沙安顺龙", name: "乌沙安顺龙",
crId: "2bfefcd0a262402297bd2b1c43766e8f", crId: "5421ad9aa1fa459c84ff5e3796f53a97",
index: "2", 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: "羊圈幻龙", name: "羊圈幻龙",
crId: "5bf5a31036f2446ba346dd5f1a47c028", crId: "248fcf3ecf734f5da8bddbbaa1a92d52",
index: "3", 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 @@ ...@@ -33,7 +33,7 @@
长角苗民俗及文化遗产 长角苗民俗及文化遗产
</p> </p>
<SMGZ v-else-if="activeTab == 'smgz'" /> <SMGZ v-else-if="activeTab == 'smgz'" />
<!-- <YLGDYW v-else-if="activeTab == 'ylgdyw'" /> --> <YLGDYW v-else-if="activeTab == 'ylgdyw'" />
<div v-else class="img-container"> <div v-else class="img-container">
<img :src=" <img :src="
require(`@/assets/imgs/boutique/${activeTab}.jpg`) || require(`@/assets/imgs/boutique/${activeTab}.jpg`) ||
......
src/views/culturalRelic/Detail.vue
浏览文件 @ 37b97b74
...@@ -9,48 +9,47 @@ ...@@ -9,48 +9,47 @@
<div class="inner"> <div class="inner">
<!-- 展览基本信息 --> <!-- 展览基本信息 -->
<div class="inner-left wow animate__animated animate__fadeInLeft"> <div class="inner-left wow animate__animated animate__fadeInLeft">
<div> <!-- <div>
<SlideImage <SlideImage :imgList="CRDetail.imagesVo" v-if="CRDetail.imagesVo && CRDetail.imagesVo.length > 0" />
:imgList="CRDetail.imagesVo" <SlideImage :imgList="[{ pressUrl: CRDetail.faceImagePressUrl }]" v-else-if="CRDetail.faceImagePressUrl" />
v-if="CRDetail.imagesVo && CRDetail.imagesVo.length > 0" </div> -->
/>
<SlideImage
:imgList="[{ pressUrl: CRDetail.faceImagePressUrl }]"
v-else-if="CRDetail.faceImagePressUrl"
/>
</div>
<!-- <div> <!-- <div>
<img :src="CRDetail.faceImagePressUrl" alt="" /> <img :src="CRDetail.faceImagePressUrl" alt="" />
</div> --> </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>
<div class="inner-right"> <div class="inner-right">
<!-- tabs --> <!-- tabs -->
<ul> <ul>
<li <li :class="{ active: nodeActive === 'intro' }" @click="handleTabClick('intro')">
:class="{ active: nodeActive === 'intro' }"
@click="handleTabClick('intro')"
>
<span>文物简介</span> <span>文物简介</span>
</li> </li>
<template v-for="node in tabbarData"> <template v-for="node in tabbarData">
<li <li :key="node.domId" :class="{ active: nodeActive === node.domId }" @click="handleTabClick(node.domId)"
:key="node.domId"
:class="{ active: nodeActive === node.domId }"
@click="handleTabClick(node.domId)"
v-if=" v-if="
node.domId !== 'intro' && node.domId !== 'intro' &&
CRDetail[`${node.domId}`] && CRDetail[`${node.domId}`] &&
CRDetail[`${node.domId}`].length > 0 CRDetail[`${node.domId}`].length > 0
" ">
>
<span>{{ node.name }}</span> <span>{{ node.name }}</span>
</li> </li>
</template> </template>
<li <li :class="{ active: nodeActive === 'relateRelics' }" @click="handleTabClick('relateRelics')">
:class="{ active: nodeActive === 'relateRelics' }"
@click="handleTabClick('relateRelics')"
>
<span>相关文物</span> <span>相关文物</span>
</li> </li>
</ul> </ul>
...@@ -94,7 +93,7 @@ ...@@ -94,7 +93,7 @@
质地</span 质地</span
> --> > -->
<span class="value">{{ <span class="value">{{
CRDetail.textureTypeLabel || "暂无" CRDetail.textureTypeLabel || "暂无"
}}</span> }}</span>
</div> </div>
<div class="body-item" v-if="CRDetail.detailSize"> <div class="body-item" v-if="CRDetail.detailSize">
...@@ -112,35 +111,21 @@ ...@@ -112,35 +111,21 @@
</div> </div>
</div> </div>
<!-- 文物简介 --> <!-- 文物简介 -->
<div <div class="content-item display-detail_intro" v-if="CRDetail.intro" id="intro">
class="content-item display-detail_intro"
v-if="CRDetail.intro"
id="intro"
>
<div class="intro-content"> <div class="intro-content">
<div <div class="intro-content-container" v-html="CRDetail.intro"></div>
class="intro-content-container"
v-html="CRDetail.intro"
></div>
</div> </div>
</div> </div>
<div class="bottom"> <div class="bottom">
<div class="tools"> <div class="tools">
<ReaderOperations <ReaderOperations :loveCount="CRDetail.loveCount" :loveCountStatus="Boolean(CRDetail.loveCountStatus)"
:loveCount="CRDetail.loveCount" :collectCount="CRDetail.collectCount" :collectCountStatus="Boolean(CRDetail.collectCountStatus)"
:loveCountStatus="Boolean(CRDetail.loveCountStatus)" :sourceId="CRDetail.crId" :title="CRDetail.name" :sourceType="'biz_cultural_relic'"
:collectCount="CRDetail.collectCount" @reload="loadDetail" />
:collectCountStatus="Boolean(CRDetail.collectCountStatus)"
:sourceId="CRDetail.crId"
:title="CRDetail.name"
:sourceType="'biz_cultural_relic'"
@reload="loadDetail"
/>
</div> </div>
<div class="showIcon" v-if="CRDetail.url3d" @click="handleTo3D"> <div class="showIcon" v-if="CRDetail.url3d" @click="handleTo3D">
<svg-icon icon-class="3d" class="icon"></svg-icon <svg-icon icon-class="3d" class="icon"></svg-icon>查看文物3D模型
>查看文物3D模型
</div> </div>
</div> </div>
</div> </div>
...@@ -162,60 +147,38 @@ ...@@ -162,60 +147,38 @@
/> />
</div> --> </div> -->
<!-- 文物视频 --> <!-- 文物视频 -->
<div <div class="content-item display-detail_videos" v-if="
class="content-item display-detail_videos" CRDetail.videosVo &&
v-if=" CRDetail.videosVo.length > 0 &&
CRDetail.videosVo && nodeActive === 'videosVo'
CRDetail.videosVo.length > 0 && " id="videosVo">
nodeActive === 'videosVo'
"
id="videosVo"
>
<div class="video-title"> <div class="video-title">
<!-- <i class="el-icon-video-camera"></i> --> <!-- <i class="el-icon-video-camera"></i> -->
相关视频 相关视频
</div> </div>
<div class="video-names"> <div class="video-names">
<div <div class="video-item" v-for="(item, index) in CRDetail.videosVo" :key="index"
class="video-item" @click="handleChangeCurrentVideo(item)">
v-for="(item, index) in CRDetail.videosVo" <div :class="[
:key="index" 'name',
@click="handleChangeCurrentVideo(item)" currentVideo && item.fileId == currentVideo.fileId
> ? 'active'
<div : '',
:class="[ ]">
'name',
currentVideo && item.fileId == currentVideo.fileId
? 'active'
: '',
]"
>
{{ item.name.split(".")[0] }} {{ item.name.split(".")[0] }}
</div> </div>
</div> </div>
</div> </div>
<video-player <video-player v-if="currentVideo" :src="$getFullUrl(currentVideo.url)" class="video-box"></video-player>
v-if="currentVideo"
:src="$getFullUrl(currentVideo.url)"
class="video-box"
></video-player>
</div> </div>
<!--相关文物 --> <!--相关文物 -->
<div <div class="content-item display-detail_relate_rc" ref="units" id="relateRelics"
class="content-item display-detail_relate_rc" v-if="nodeActive === 'relateRelics'">
ref="units"
id="relateRelics"
v-if="nodeActive === 'relateRelics'"
>
<div class="recommend-type"> <div class="recommend-type">
<el-radio-group v-model="currentRcKey" size="small"> <el-radio-group v-model="currentRcKey" size="small">
<el-radio :label="'type'" v-if="CRDetail.type">同类别</el-radio> <el-radio :label="'type'" v-if="CRDetail.type">同类别</el-radio>
<el-radio :label="'years'" v-if="CRDetail.years" <el-radio :label="'years'" v-if="CRDetail.years">同年代</el-radio>
>同年代</el-radio <el-radio :label="'deptId'" v-if="CRDetail.deptId">同馆藏</el-radio>
>
<el-radio :label="'deptId'" v-if="CRDetail.deptId"
>同馆藏</el-radio
>
</el-radio-group> </el-radio-group>
</div> </div>
<div class="recommend-obj"> <div class="recommend-obj">
...@@ -228,99 +191,42 @@ ...@@ -228,99 +191,42 @@
</div> </div>
</div> </div>
<el-empty <el-empty v-else description="暂无相关推荐，去看看其他的吧~"></el-empty>
v-else
description="暂无相关推荐，去看看其他的吧~"
></el-empty>
</div> </div>
</div> </div>
<!-- 相关文献 --> <!-- 相关文献 -->
<div <div class="content-item display-detail_lts" id="literatureVo" v-if="
class="content-item display-detail_lts" CRDetail.literatureVo &&
id="literatureVo" CRDetail.literatureVo.length > 0 &&
v-if=" nodeActive === 'literatureVo'
CRDetail.literatureVo && ">
CRDetail.literatureVo.length > 0 && <div class="title">
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> </div>
<div class="lts-content wow animate__animated animate__fadeInUp">
<el-table <div class="lts-content">
:data="CRDetail.literatureVo" <el-scrollbar style="height: 100%">
:header-cell-style="{ <div class="lt-item" v-for="(item, index) in CRDetail.literatureVo" :key="index"
background: '#eeeeee', @click="handleViewLt(item)">
color: '#333', <span class="lt-order">[{{ index + 1 }}]</span>
}" <span class="lt-authors" v-if="item.authors">{{ item.authors }}.</span>
:row-style="tableRowStyle" <span class="lt-name" v-if="item.name">{{ item.name }}.</span>
> <span class="lt-source" v-if="item.source">{{ item.source }}.</span>
<el-table-column <span class="lt-date" v-if="item.date">{{ item.date }}</span>
prop="name" </div>
label="名称"
align="center" </el-scrollbar>
></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> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<el-image-viewer <el-image-viewer v-if="imgViewerVisible" :on-close="closeImgViewer" :url-list="imgList" />
v-if="imgViewerVisible"
:on-close="closeImgViewer"
:url-list="imgList"
/>
</div> </div>
</template> </template>
<script> <script>
// import SearchBar from "@/components/SearchBar";
// import CustomTitle from "@/components/CustomTitle";
// import QRCode from "qrcodejs2";
import AudioPlayer from "@/components/AudioPlayer"; import AudioPlayer from "@/components/AudioPlayer";
import Video from "@/components/Video"; import Video from "@/components/Video";
import ReaderOperations from "@/components/ReaderOperations"; import ReaderOperations from "@/components/ReaderOperations";
...@@ -329,6 +235,7 @@ import { previewFile } from "@/utils/index"; ...@@ -329,6 +235,7 @@ import { previewFile } from "@/utils/index";
import videoPlayer from "@/components/VideoPlayer"; import videoPlayer from "@/components/VideoPlayer";
import SlideImage from "@/components/SlideImage/slider.vue"; import SlideImage from "@/components/SlideImage/slider.vue";
import { isElementInViewport2 } from "@/utils/index"; import { isElementInViewport2 } from "@/utils/index";
import { swiper, swiperSlide } from "vue-awesome-swiper";
export default { export default {
components: { components: {
AudioPlayer, AudioPlayer,
...@@ -336,6 +243,7 @@ export default { ...@@ -336,6 +243,7 @@ export default {
Video, Video,
videoPlayer, videoPlayer,
SlideImage, SlideImage,
swiper, swiperSlide,
"el-image-viewer": () => "el-image-viewer": () =>
import("element-ui/packages/image/src/image-viewer"), import("element-ui/packages/image/src/image-viewer"),
}, },
...@@ -374,6 +282,23 @@ export default { ...@@ -374,6 +282,23 @@ export default {
], ],
// tabbarItems: ["文物简介", "相关视频", "相关文物", "相关文献"], // tabbarItems: ["文物简介", "相关视频", "相关文物", "相关文献"],
nodeActive: "intro", 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: { watch: {
...@@ -384,6 +309,23 @@ export default { ...@@ -384,6 +309,23 @@ export default {
this.loadCrRecommend(); 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() { async mounted() {
let crId = this.$route.params.crId; let crId = this.$route.params.crId;
this.loadDetail(crId); this.loadDetail(crId);
...@@ -477,20 +419,16 @@ export default { ...@@ -477,20 +419,16 @@ export default {
this.imgViewerVisible = false; this.imgViewerVisible = false;
}, },
handelPreviewImages(items, hasImages) { handelPreviewImages(items) {
this.imgViewerVisible = true; this.imgViewerVisible = true;
if (hasImages) { this.imgList = items.map((item) => this.$getFullUrl(item.url));
this.imgList = items.map((item) => this.$getFullUrl(item.url));
} else {
this.imgList = items.map((item) => this.$getFullUrl(item));
}
}, },
handleToDetail(crId) { handleToDetail(crId) {
// const newPage = this.$router.resolve({ const newPage = this.$router.resolve({
// path: `culturalReli/${crId}`, path: `culturalReli/${crId}`,
// }); });
// window.open(newPage.href, "_blank"); window.open(newPage.href, "_blank");
this.$router.push(`culturalRelic/${crId}`); // this.$router.push(`culturalRelic/${crId}`);
}, },
// 点击音频 // 点击音频
handleClickAudio() { handleClickAudio() {
...@@ -503,22 +441,6 @@ export default { ...@@ -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() { closeImgViewer() {
this.imgViewerVisible = false; this.imgViewerVisible = false;
...@@ -561,6 +483,14 @@ export default { ...@@ -561,6 +483,14 @@ export default {
handleTabClick(type) { handleTabClick(type) {
this.nodeActive = 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> </script>
...@@ -572,6 +502,7 @@ export default { ...@@ -572,6 +502,7 @@ export default {
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
.page-item { .page-item {
cursor: pointer; cursor: pointer;
} }
...@@ -579,8 +510,10 @@ export default { ...@@ -579,8 +510,10 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
$node-w: 700px; $node-w: 700px;
.content { .content {
position: relative; position: relative;
.bg { .bg {
position: absolute; position: absolute;
top: 0; top: 0;
...@@ -589,11 +522,13 @@ $node-w: 700px; ...@@ -589,11 +522,13 @@ $node-w: 700px;
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
> img {
>img {
width: 100%; width: 100%;
overflow: h; overflow: h;
filter: opacity(0.2) brightness(0.6); filter: opacity(0.2) brightness(0.6);
} }
.mask { .mask {
position: absolute; position: absolute;
top: 0; top: 0;
...@@ -603,56 +538,96 @@ $node-w: 700px; ...@@ -603,56 +538,96 @@ $node-w: 700px;
background: rgb(32 44 48 / 80%); background: rgb(32 44 48 / 80%);
} }
} }
.inner { .inner {
width: 100%; width: 100%;
display: flex; display: flex;
.inner-left { .inner-left {
width: 50%; width: 50%;
height: 100vh; height: calc(100vh - 100px);
position: relative; // position: relative;
> div { display: flex;
width: 90%; align-items: center;
height: 60vh;
position: absolute; .swiper-container {
top: 50%; height: 68vh;
left: 50%;
transform: translate(-50%, -70%); .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; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
> img { color: #fff;
max-width: 100%; font-weight: bolder;
max-height: 100%; 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 { .inner-left {
padding: 0 60px; padding: 0 60px;
::v-deep .firstDiv { ::v-deep .firstDiv {
position: unset; position: unset;
transform: none; transform: none;
} }
} }
.inner-right { .inner-right {
width: 50%; width: 50%;
height: 100vh; height: calc(100vh - 100px);
position: relative; position: relative;
ul { ul {
line-height: 50px; line-height: 50px;
position: absolute; position: absolute;
right: 60px; right: 60px;
top: 30px; top: 90px;
width: 30px; width: 30px;
> li {
>li {
border: 1px solid #ddd; border: 1px solid #ddd;
writing-mode: vertical-lr; writing-mode: vertical-lr;
width: 100%; width: 100%;
padding-top: 25px; padding-top: 25px;
height: 140px; height: 140px;
margin: -1px 0; margin: -1px 0;
> span {
>span {
color: #fff; color: #fff;
padding: 11px 2px; padding: 11px 2px;
border-radius: 8px 0 8px 0; border-radius: 8px 0 8px 0;
...@@ -663,7 +638,8 @@ $node-w: 700px; ...@@ -663,7 +638,8 @@ $node-w: 700px;
&.active { &.active {
cursor: pointer; cursor: pointer;
background-color: $themeColor; background-color: $themeColor;
> span {
>span {
background: #b5800a; background: #b5800a;
} }
} }
...@@ -672,34 +648,41 @@ $node-w: 700px; ...@@ -672,34 +648,41 @@ $node-w: 700px;
.info-container-right { .info-container-right {
width: $node-w; width: $node-w;
padding-bottom: 40px; padding-bottom: 80px;
.info-title { .info-title {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding-top: 60px; padding-top: 90px;
padding-bottom: 10px; padding-bottom: 10px;
> span { align-items: center;
>span {
font-size: 48px; font-size: 48px;
font-family: "华文行楷"; font-family: "华文行楷";
font-weight: 600; font-weight: 600;
color: #fff; color: #fff;
} }
.view-count { .view-count {
> span { >span {
margin-left: 10px; margin-left: 10px;
color: #ddd; color: #ddd;
} }
> svg {
>svg {
color: #ddd; color: #ddd;
} }
} }
} }
.basic-info { .basic-info {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
padding-bottom: 60px; padding-bottom: 60px;
color: #c2cbd3; color: #c2cbd3;
> div {
>div {
flex-shrink: 0; flex-shrink: 0;
line-height: 24px; line-height: 24px;
padding: 0px 10px; padding: 0px 10px;
...@@ -711,11 +694,14 @@ $node-w: 700px; ...@@ -711,11 +694,14 @@ $node-w: 700px;
} }
} }
} }
#intro { #intro {
min-height: 300px; min-height: 300px;
.intro-content { .intro-content {
color: #ffb836; color: #ffb836;
} }
.intro-content-container { .intro-content-container {
width: $node-w; width: $node-w;
font-size: 16px; font-size: 16px;
...@@ -725,42 +711,53 @@ $node-w: 700px; ...@@ -725,42 +711,53 @@ $node-w: 700px;
} }
#relateRelics { #relateRelics {
padding-top: 60px; padding-top: 90px;
width: 800px; width: 800px;
.recommend-type { .recommend-type {
display: flex; display: flex;
justify-content: center; justify-content: center;
margin-bottom: 40px; margin-bottom: 40px;
} }
.recommend-obj { .recommend-obj {
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
.recommend-obj-node { .recommend-obj-node {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
> div { justify-content: center;
width: 50%;
>div {
width: 40%;
padding: 20px; padding: 20px;
} }
} }
.img-container { .img-container {
width: 100%; width: 100%;
height: 260px; height: 260px;
display: flex; display: flex;
justify-content: center; justify-content: center;
&:hover { &:hover {
cursor: pointer; cursor: pointer;
> img {
>img {
transform: scale(1.2); transform: scale(1.2);
} }
} }
> img {
>img {
max-width: 100%; max-width: 100%;
max-height: 100%; max-height: 100%;
object-fit: contain;
transition: all 0.3s ease; transition: all 0.3s ease;
transform: scale(1); transform: scale(1);
} }
} }
.cr-name { .cr-name {
line-height: 32px; line-height: 32px;
text-align: center; text-align: center;
...@@ -770,17 +767,55 @@ $node-w: 700px; ...@@ -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 { ::v-deep .reader-operations {
color: #b2b2b2; color: #b2b2b2;
font-weight: 600; font-weight: 600;
font-family: "幼圆"; font-family: "幼圆";
svg { svg {
color: #b2b2b2; color: #b2b2b2;
} }
} }
} }
::v-deep .el-carousel__item--card { ::v-deep .el-carousel__item--card {
width: 100%; width: 100%;
height: 100%; height: 100%;
...@@ -790,19 +825,24 @@ $node-w: 700px; ...@@ -790,19 +825,24 @@ $node-w: 700px;
::v-deep .el-carousel { ::v-deep .el-carousel {
height: 100%; height: 100%;
} }
::v-deep .el-carousel__container { ::v-deep .el-carousel__container {
height: 100%; height: 100%;
} }
::v-deep .el-tree { ::v-deep .el-tree {
background: transparent; background: transparent;
.el-tree-node__content { .el-tree-node__content {
height: 50px; height: 50px;
:hover { :hover {
background: #fff; background: #fff;
color: $themeColor; color: $themeColor;
} }
} }
} }
::v-deep .el-radio__input { ::v-deep .el-radio__input {
display: none; display: none;
} }
...@@ -812,12 +852,30 @@ $node-w: 700px; ...@@ -812,12 +852,30 @@ $node-w: 700px;
padding-left: 0; padding-left: 0;
font-family: SourceHanSerifCN-Bold; 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; color: #ffb836;
} }
::v-deep .el-radio__input+.el-radio__label { ::v-deep .el-radio__input+.el-radio__label {
color: #fff; 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{ // ::v-deep .el-radio-button:first-child .el-radio-button__inner{
// border-radius: 0; // border-radius: 0;
// } // }
...@@ -828,14 +886,17 @@ $node-w: 700px; ...@@ -828,14 +886,17 @@ $node-w: 700px;
0% { 0% {
transform: translateX(0); transform: translateX(0);
} }
100% { 100% {
transform: translateX(-1200px); transform: translateX(-1200px);
} }
} }
@keyframes filmMoveRight { @keyframes filmMoveRight {
0% { 0% {
transform: translateX(0); transform: translateX(0);
} }
100% { 100% {
transform: translateX(1200px); transform: translateX(1200px);
} }
...@@ -845,6 +906,7 @@ $node-w: 700px; ...@@ -845,6 +906,7 @@ $node-w: 700px;
0% { 0% {
transform: rotateZ(0deg); transform: rotateZ(0deg);
} }
100% { 100% {
transform: rotateZ(360deg); transform: rotateZ(360deg);
} }
...@@ -854,6 +916,7 @@ $node-w: 700px; ...@@ -854,6 +916,7 @@ $node-w: 700px;
0% { 0% {
transform: rotateZ(0deg); transform: rotateZ(0deg);
} }
100% { 100% {
transform: rotateZ(360deg); transform: rotateZ(360deg);
} }
...@@ -861,6 +924,7 @@ $node-w: 700px; ...@@ -861,6 +924,7 @@ $node-w: 700px;
.animation-play-paused { .animation-play-paused {
animation-play-state: paused; animation-play-state: paused;
-webkit-animation-play-state: paused; /* Safari 和 Chrome */ -webkit-animation-play-state: paused;
/* Safari 和 Chrome */
} }
</style> </style>
src/views/display/components/NormalStyle.vue
浏览文件 @ 37b97b74
...@@ -239,10 +239,11 @@ ...@@ -239,10 +239,11 @@
</div> </div>
</div> </div>
<div class="lts-content"> <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-order">[{{ index + 1 }}]</span>
<span class="lt-authors" v-if="item.authors">{{ item.authors }}.</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-source" v-if="item.source">{{ item.source }}.</span>
<span class="lt-date" v-if="item.date">{{ item.date }}</span> <span class="lt-date" v-if="item.date">{{ item.date }}</span>
</div> </div>
...@@ -440,7 +441,11 @@ export default { ...@@ -440,7 +441,11 @@ export default {
// 预览关联文献 // 预览关联文献
handleViewLt(item) { 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 @@ ...@@ -38,7 +38,7 @@
</SlideImageGroup> </SlideImageGroup>
<el-row v-if="unitValue.imagesVo.length > 0 && unitValue.imagesVo.length < 4" :gutter="10"> <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" <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="" <img :src="item.pressUrl" alt=""
style="width: 100%; height: 100%; object-fit: contain;cursor: pointer;" style="width: 100%; height: 100%; object-fit: contain;cursor: pointer;"
@click="handelPreviewImages(unitValue.imagesVo)" /> @click="handelPreviewImages(unitValue.imagesVo)" />
......
src/views/home/components/CulturalRelic.vue
浏览文件 @ 37b97b74
...@@ -163,7 +163,7 @@ $blue: $themeColor; ...@@ -163,7 +163,7 @@ $blue: $themeColor;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: contain;
transition: all 0.5s ease; transition: all 0.5s ease;
} }
.no-pic { .no-pic {
......
src/views/museum/Detail.vue
浏览文件 @ 37b97b74
...@@ -27,24 +27,27 @@ ...@@ -27,24 +27,27 @@
{{ currentTab }} {{ currentTab }}
</div> </div>
<div class="text-content"> <div class="text-content">
<div class="intro" v-html="museumDetail.intro" v-if="currentTab == '简介'"> <el-scrollbar style="height:100%">
<div class="intro" v-html="museumDetail.intro" v-if="currentTab == '简介'">
</div>
<div class="ways" v-if="currentTab == '入园方式'"> </div>
<div>地址：<span>{{ museumDetail.address }}</span></div> <div class="ways" v-if="currentTab == '入园方式'">
<div>开放时间：<span>{{ museumDetail.openPeriod }}</span></div> <div>地址：<span>{{ museumDetail.address }}</span></div>
<div>入园方式：<span>{{ museumDetail.entryMode }}</span></div> <div>开放时间：<span>{{ museumDetail.openPeriod }}</span></div>
</div> <div>入园方式：<span>{{ museumDetail.entryMode }}</span></div>
<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>
<div class="phone" v-if="museumDetail.phone"> <div class="contact" v-if="currentTab == '联系方式'">
<i class="el-icon-phone"></i> <div class="qr-code" v-if="museumDetail.qrCodeVo.length > 0">
<span>{{ museumDetail.phone }}</span> <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>
<div v-if="!museumDetail.phone">暂无联系方式</div> </el-scrollbar>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -114,10 +117,10 @@ export default { ...@@ -114,10 +117,10 @@ export default {
handleClickTab(item) { handleClickTab(item) {
this.currentTab = item this.currentTab = item
}, },
handleMouseEnter(item){ handleMouseEnter(item) {
console.log(item); console.log(item);
}, },
handleMouseLeave(item){ handleMouseLeave(item) {
console.log(item); console.log(item);
} }
}, },
...@@ -278,6 +281,14 @@ export default { ...@@ -278,6 +281,14 @@ export default {
align-items: center; align-items: center;
} }
.text-content {
overflow: auto;
}
::v-deep .el-scrollbar__wrap {
overflow-x: hidden;
}
.intro { .intro {
text-indent: 32px; text-indent: 32px;
line-height: 2; line-height: 2;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论