pc端展厅列表样式修改

web/src/views/gui/compomemt/mapNav.vue

@@ -10,10 +10,14 @@
         v-for="item in data"
         :key="item.id"
       >
-        <div class="rowtxt" v-html="item.name"></div>
-        <img :src="require(`@/assets/img/${item.url}.png`)" alt="" />
+        <div class="rowtxt">
+          <div class="one">{{ item.name }}</div>
+          <div class="tow" v-if="item.num">{{ item.num }}</div>
+          <div class="three" v-html="item.txt" v-if="item.txt"></div>
+        </div>
+        <img :src="require(`@/assets/img/${item.url}.jpg`)" alt="" />
         <p class="bs">·</p>
-        <p v-html="item.name"></p>
+        <p>{{item.name+(item.num?item.num:'')}}</p>
         <!-- 背景遮造 -->
         <div class="smak" @click="cutScene(item.url)">
           <div>点击<br />浏览</div>
@@ -39,14 +43,22 @@ export default {
     //这里存放数据
     return {
       data: [
-        { name: "前言", url: "1185" },
+        { name: "序厅", url: "1185" },
         {
-          name: "<span>第一单元</span><br/>三大文明的发现地和革命地",
+          name: "吴忠溯源",
+          num: "（一）",
+          txt: "远古印记<br/>魏晋南北朝时期",
           url: "1186",
         },
-        { name: "<span>第二单元</span><br/>战国秦长城西端起首地", url: "1187" },
         {
-          name: "<span>第三单元</span><br/>丝绸之路南线的枢纽和重镇",
+          name: "吴忠溯源",
+          num: "（二）",
+          txt: "隋唐时期<br/>元明清时期",
+          url: "1187",
+        },
+        {
+          name: "红色吴忠展厅",
+          txt:'革命战争时期',
           url: "1188",
         },
       ],
@@ -119,24 +131,38 @@ export default {
       width: 230px;
       height: 620px;
       .rowtxt {
-        font-weight: 700;
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
         color: #774926;
-        font-size: 22px;
-        letter-spacing: 4px;
-        writing-mode: vertical-lr;
         position: absolute;
         top: 55px;
         left: 50%;
         transform: translateX(-50%);
-        /deep/span {
-          padding-top: 2px;
+        .one {
+          font-size: 22px;
+          font-weight: 700;
+          letter-spacing: 4px;
+          writing-mode: vertical-lr;
+        }
+        .tow{
+          font-weight: 700;
           font-size: 18px;
         }
+        .three{
+          margin-top: 25px;
+          font-size: 16px;
+          letter-spacing: 4px;
+          writing-mode: vertical-lr;
+        }
       }
       &:nth-of-type(1) .rowtxt {
-        font-size: 24px;
         top: 150px;
-        letter-spacing: 40px;
+        .one {
+          font-size: 24px;
+          letter-spacing: 40px;
+        }
       }
 
       & > img {
@@ -144,7 +170,7 @@ export default {
         height: 100%;
         object-fit: cover;
       }
-      .bs{
+      .bs {
         font-size: 80px;
         margin: 10px 0;
       }
@@ -179,9 +205,9 @@ export default {
         }
       }
       &:hover {
-          & > p{
-            color: #3f1e05;
-          }
+        & > p {
+          color: #3f1e05;
+        }
         .smak {
           opacity: 1;
         }
@@ -189,7 +215,7 @@ export default {
     }
     .noneAc {
       pointer-events: none;
-      opacity: .5;
+      opacity: 0.5;
     }
   }
   .close {