|
|
@@ -46,7 +46,7 @@
|
|
|
</div>
|
|
|
|
|
|
<!-- 下面的文字介绍 -->
|
|
|
- <div class="txtBox">
|
|
|
+ <div class="txtBox" v-if="myTitle !== '程哲碑'">
|
|
|
<div class="myTitle">{{ myTitle }}</div>
|
|
|
|
|
|
<div class="flooTxt" :class="{ flooTxtOne: oneTxt }">
|
|
|
@@ -59,6 +59,17 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+
|
|
|
+ <div class="Intro" v-if="myTitle === '程哲碑'">
|
|
|
+ <div class="titleLogo">
|
|
|
+ <img src="../assets/images/pc/titleLogo.png" alt="" />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="info" :key="index" v-for="(item, index) in introInfo">
|
|
|
+ <div class="label">{{ item.title }}</div>
|
|
|
+ <div class="content" v-html="item.text"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<!-- 查看图片 -->
|
|
|
<viewer class="viewerCla" ref="viewer" :images="lookPics">
|
|
|
@@ -132,6 +143,28 @@ export default {
|
|
|
|
|
|
// 只有标题和文字（没有视频，没有模型，没有图片）
|
|
|
oneTxt: false,
|
|
|
+ introInfo: [
|
|
|
+ {
|
|
|
+ title: "名称",
|
|
|
+ text: "程哲碑，又称“故赠代郡太守程哲碑”“程哲墓碑”“程氏一族墓碑”等",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "时代",
|
|
|
+ text: "东魏天平元年（公元534年）",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "材质",
|
|
|
+ text: "石灰岩，石色黝黑，石质坚硬",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "形制",
|
|
|
+ text: "额身一体圆拱形碑",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "尺寸",
|
|
|
+ text: "碑身：高120、宽67、厚23厘米<br/>佛龛：高50、宽39、深9厘米<br/>佛像：高47厘米",
|
|
|
+ },
|
|
|
+ ],
|
|
|
};
|
|
|
},
|
|
|
watch: {
|
|
|
@@ -337,7 +370,7 @@ export default {
|
|
|
position: relative;
|
|
|
border-radius: 6px;
|
|
|
overflow: hidden;
|
|
|
- width: 45%;
|
|
|
+ width: 50%;
|
|
|
height: 100%;
|
|
|
.oneTabNum {
|
|
|
z-index: 10;
|
|
|
@@ -455,6 +488,73 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+ .Intro {
|
|
|
+ width: 50%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 10px;
|
|
|
+ padding: 0 20px;
|
|
|
+ padding-top: 30px;
|
|
|
+ overflow-y: auto;
|
|
|
+
|
|
|
+ &::-webkit-scrollbar {
|
|
|
+ width: 0px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .titleLogo {
|
|
|
+ width: 120px;
|
|
|
+ height: 60px;
|
|
|
+
|
|
|
+ & > img {
|
|
|
+ height: 100%;
|
|
|
+ object-fit: contain;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .info {
|
|
|
+ width: 100%;
|
|
|
+ height: fit-content;
|
|
|
+ display: flex;
|
|
|
+ gap: 10px;
|
|
|
+ color: #fff;
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ margin-bottom: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .label {
|
|
|
+ position: relative;
|
|
|
+ height: fit-content;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ white-space: nowrap;
|
|
|
+ width: 40px;
|
|
|
+ text-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
|
|
|
+
|
|
|
+ &::after {
|
|
|
+ content: "";
|
|
|
+ width: 28px;
|
|
|
+ height: 4px;
|
|
|
+ position: absolute;
|
|
|
+ z-index: -1;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-57%, 147%);
|
|
|
+ background-color: rgba(124, 75, 54, 1);
|
|
|
+ box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .content {
|
|
|
+ width: calc(100% - 40px);
|
|
|
+ color: rgba(255, 255, 255, 1);
|
|
|
+ font-size: 16px;
|
|
|
+ text-align: justify;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
.flooTxtOne {
|
|
|
height: 600px;
|
|
|
}
|
|
|
@@ -518,6 +618,15 @@ export default {
|
|
|
font-size: 16px;
|
|
|
margin: 8px 0;
|
|
|
}
|
|
|
+ .logo {
|
|
|
+ margin-bottom: 20px;
|
|
|
+ padding: 0 30px;
|
|
|
+ transform: translateX(-50%) scale(0.6);
|
|
|
+ & > img {
|
|
|
+ width: 45px;
|
|
|
+ object-fit: contain;
|
|
|
+ }
|
|
|
+ }
|
|
|
.mainCon {
|
|
|
.contenBox {
|
|
|
.videoBox {
|
|
|
@@ -570,6 +679,20 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ .Intro {
|
|
|
+ padding-right: 0;
|
|
|
+ padding-top: 0;
|
|
|
+ .titleLogo {
|
|
|
+ height: 27px;
|
|
|
+ }
|
|
|
+ .label,
|
|
|
+ .content {
|
|
|
+ font-size: 12px !important;
|
|
|
+ }
|
|
|
+ .label::after {
|
|
|
+ transform: translate(-77%, 147%);
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
.flooTxtOne {
|
|
|
height: 100%;
|
lanxin
