01

src/views/General.vue

@@ -141,24 +141,13 @@
             人物
           </div>
           <!-- G4RenList -->
-          <div
-            v-for="item in G4RenList"
-            :key="item.id"
-            class="G1RenBox"
-          >
-            <img
-              v-if="item.thumb"
-              :src="`${prefix}/${item.thumb}`"
-              alt=""
-            >
-            <img
-              v-else
-              :src="require('@/assets/images/imgErr.png')"
-              alt=""
+          <div class="G1RenBoxMain">
+            <div
+              v-for="item in G4RenList"
+              :key="item.id"
+              class="G1RenBox"
             >
-            <div class="G1RenBoxTxt">
-              <h3>{{ item.name }}</h3>
-              <p>&emsp;&emsp;{{ item.description }}</p>
+              {{ item.name }}
             </div>
           </div>
         </div>
@@ -865,37 +854,69 @@ export default {
       }
 
       .G1MainBox3 {
-        .G1RenBox {
-          margin-top: 20px;
-          align-items: flex-start;
-          display: flex;
+        color: rgba(255, 255, 255, 0.8);
+        .G1RenBoxMain{
+          max-height: 150px;
+          overflow-y: auto;
+          &::-webkit-scrollbar {
+          background: transparent;
+          width: calc(4 / 1080 * 83vh);
+        }
+
+        /*宽度是对垂直滚动条而言，高度是对水平滚动条而言*/
+        &::-webkit-scrollbar-thumb {
+          background: rgba(220, 231, 240, 0.2);
+          border-radius: 2px;
+        }
+          .G1RenBox {
+          position: relative;
+          padding-left: 30px;
+          cursor: pointer;
+          font-size: 16px;
+          height: 30px;
+          line-height: 30px;
+
+          &::before {
+            opacity: .5;
+            content: '';
+            position: absolute;
+            top: 50%;
+            left: 8px;
+            transform: translateY(-50%);
+            width: 10px;
+            height: 10px;
+            background-color: #FFE59F;
+            border-radius: 50%;
+          }
+
+          &::after {
+            content: '';
+            opacity: 0;
+            position: absolute;
+            top: 50%;
+            left: 4px;
+            transform: translateY(-50%);
+            width: 16px;
+            height: 16px;
+            border: 1px dashed #FFE59F;
+            border-radius: 50%;
 
-          &>img {
-            width: 105px;
-            object-fit: contain;
           }
 
-          .G1RenBoxTxt {
-            width: calc(100% - 125px);
-            margin-left: 20px;
-            color: #fff;
+          &:hover {
+            color: #FFE59F;
 
-            &>h3 {
-              font-size: 20px;
-              font-weight: 700;
-              margin-bottom: 15px;
+            &::before {
+              opacity: 1;
             }
 
-            &>p {
-              font-size: 20px;
-              font-family: Source Han Sans CN-Light, Source Han Sans CN;
-              font-weight: 400;
-              color: rgba(255, 255, 255, 0.8);
-              line-height: 1.5;
-              white-space: pre-wrap;
+            &::after {
+              opacity: 1;
             }
           }
         }
+        }
+
       }
     }