2025.2.10 详情页

kcui/src/view/TWInfoXq.vue

@@ -1,7 +1,8 @@
 <template>
   <div style="width: 100%;height: 100%;">
-    <img style="width: 100%;height: 100%;position: absolute;z-index:-1;" src="../assets/img/twbg1.jpg">
-    <headInfo style="position: absolute;z-index: 100"></headInfo>
+    <img style="width: 100%;height: 100%;position: absolute;z-index:-1;" src="../assets/img/twbg.png">
+    <headInfo></headInfo>
+
     <div class="content">
       <div class="leftContent">
         <div class="leftBox1">
@@ -12,21 +13,22 @@
         </div>
         <div class="leftBox2">
           <div class="muluBox">
-            <img src="../assets/img/leftBox.png" style="width: 100%;object-fit: contain;z-index: 1;position: absolute;">
             <div class="muluList">
               <div v-for="item in mulu" :key="item">
-                <div class="oneMulu" v-if="page!=item" @click="goInfo(item.info)">
-                  <div style="width: 80%;text-align: center;">{{ item.name }}</div>
-                  <img src="../assets/img/jiantou.png"
-                       style="width: 0.9vw;height:0.9vw;object-fit: contain;float: right;margin-top: 13%;">
-                </div>
-                <div class="oneMuluXuan" v-else>
+                <div class="oneMuluXuan" v-if="item.name === '图文资源'">
                   <img src="../assets/img/twCircle.png"
                        style="width: 0.9vw;height:0.9vw;object-fit: contain;float: right;margin-top: 7%;">
                   <div style="width: 55%;text-align: center;">
                     {{ item.name }}</div>
+                  <img src="../assets/img/jiantouchoose.png"
+                       style="width: 0.9vw;height:0.9vw;object-fit: contain;float: right;margin-top: 7%;">
+                  <img src="../assets/img/muluchoose.png"
+                       style="width: 19vw;height: 6vw;position: absolute;bottom: -3vw;left: -3.5vw;z-index: -1;"/>
+                </div>
+                <div class="oneMulu" v-else @click="goInfo(item.info)">
+                  <div style="width: 80%;text-align: center;">{{ item.name }}</div>
                   <img src="../assets/img/jiantou.png"
-                       style="width: 0.9vw;height:0.9vw;object-fit: contain;float: right;margin-top: 8%;">
+                       style="width: 0.9vw;height:0.9vw;object-fit: contain;float: right;margin-top: 13%;">
                 </div>
               </div>
             </div>
@@ -35,7 +37,11 @@
       </div>
       <div class="rightContent">
         <div class="contentInfo">
-          <div class="contentTitle">{{contentInfo.title}}</div>
+          <div class="contentTitle">
+<!--            <div class="back-button" @click="goBack">-->
+<!--              <img src="../assets/img/jiantouchoose.png" alt="返回">-->
+<!--            </div>-->
+            {{contentInfo.title}}</div>
           <div class="contentText" v-html="contentInfo.content"></div>
         </div>
       </div>
@@ -113,25 +119,22 @@ export default {
   width: 14%;
   height: 100%;
   float: left;
-  margin-top: 4.4%;
-
 }
 
 .leftBox1 {
   width: 100%;
   height: 10%;
-  margin-top: 12%;
+  margin-top: 5%;
   color: #7cdeff;
 }
 
 .leftBox2 {
   width: 100%;
   height: 90%;
-
 }
 
 .muluBox {
-  margin: 3% 14%;
+  margin: 0 14%;
   height: 92%;
   width: 72%;
   position: relative;
@@ -155,24 +158,26 @@ export default {
   height: 2.5vw;
   line-height: 2.5vw;
   font-size: 0.9vw;
-
-  border-bottom: 1px solid #0d3455;
+  border-bottom: 1px solid rgba(112, 192, 227, 0.47);
   margin-left: 10%;
   color: #d1d3d7;
   display: flex;
   flex-direction: row;
+
 }
 
 .oneMuluXuan {
-  background-image: url("../assets/img/xuan.png");
+
   width: 90%;
   height: 2.5vw;
-  line-height: 2.5vw;
+  line-height: 2.1vw;
   font-size: 0.9vw;
   color: #13ffff;
   display: flex;
   flex-direction: row;
   padding-left: 10%;
+  position: relative;
+
 }
 
 
@@ -183,36 +188,59 @@ export default {
   position: relative;
 }
 
-
 .contentInfo{
   width: 100%;
   height: 96%;
-  background-color: rgba(20, 119, 208, 0.82);
   position: absolute;
   z-index: 101;
-  margin-top: 7%;
+  margin-top: 2%;
   border-radius: 1vw;
 }
+
 .contentTitle{
   width: 100%;
-  height: 8%;
-
+  height: 5%;
+  margin-top: 0.5%;
   font-size: 1.5vw;
-  color: #ffffff;
+  color: #03f7f7;
   text-align: center;
   letter-spacing: 5px;
   line-height: 3vw;
-
-
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
 }
+
 .contentText{
-  width: 96%;
-  height: 89%;
-  margin-top: 1%;
-  font-size: 1vw;
-  margin-left: 2%;
+  width: 86%;
+  height: 86%;
+  font-size: 1.2vw;
+  text-indent: 2em;
+  font-weight: lighter;
+  letter-spacing: 0.15vw;
+  line-height: 2.25;
+  margin: 2% 0 2% 0;
+  padding: 0 5% 0 8%;
   overflow-y: scroll;
   color: #ffffff;
+}
+
+.contentText::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+.contentText::-webkit-scrollbar-thumb {
+  background-color: #03f7f7;
+  border-radius: 10px;
+}
+
+.contentText::-webkit-scrollbar-track {
+  background: transparent;
+}
 
+.contentText::-webkit-scrollbar-button {
+  display: none;
 }
 </style>