搞搞搞

src/App.vue

@@ -123,9 +123,9 @@ html, body {
 // }
 
 // 滚动条，只设置某一项可能导致不生效。
-// ::-webkit-scrollbar { background: #dddecc; width: 6px; height: 6px; }
-// ::-webkit-scrollbar-thumb { background: #828a5b; border-radius: 3px; }
-// ::-webkit-scrollbar-corner { background: #dddecc; }
+&::-webkit-scrollbar { background: transparent; width: 6px; height: 0; }
+&::-webkit-scrollbar-thumb { background: #589498; opacity: 0.5; border-radius: 3px;}
+
 
 // vue组件过渡效果
 .fade-out-leave-active {

src/views/RelicSearch.vue

@@ -14,16 +14,52 @@
       >
     </div>
     <menu class="tab-bar">
-      <button>全部</button>
-      <button>行政区1</button>
-      <button>行政区2</button>
-      <button>行政区3</button>
-      <button>行政区4</button>
+      <button
+        :class="{
+          active: activeTabIdx === 0
+        }"
+        @click="activeTabIdx = 0"
+      >
+        全部
+      </button>
+      <button
+        :class="{
+          active: activeTabIdx === 1
+        }"
+        @click="activeTabIdx = 1"
+      >
+        行政区1
+      </button>
+      <button
+        :class="{
+          active: activeTabIdx === 2
+        }"
+        @click="activeTabIdx = 2"
+      >
+        行政区2
+      </button>
+      <button
+        :class="{
+          active: activeTabIdx === 3
+        }"
+        @click="activeTabIdx = 3"
+      >
+        行政区3
+      </button>
+      <button
+        :class="{
+          active: activeTabIdx === 4
+        }"
+        @click="activeTabIdx = 4"
+      >
+        行政区4
+      </button>
     </menu>
     <ul class="relic-list">
-      <div
+      <li
         v-for="item in relicList"
         :key="item.id"
+        class="relic-item"
       >
         <img
           :src="require(`@/assets/images/${item.photo}`)"
@@ -46,7 +82,7 @@
             draggable="false"
           >
         </button>
-      </div>
+      </li>
     </ul>
   </div>
 </template>
@@ -310,6 +346,9 @@ const relicList = ref([
     desc: '上看到附近可舒服都市妇科技术都是了解对方 时刻的风景 士大夫精神地方可是对方 ',
   },
 ])
+
+const activeTabIdx = ref(0)
+
 </script>
 
 <style lang="less" scoped>
@@ -358,5 +397,75 @@ const relicList = ref([
       height: 32px;
     }
   }
+  >menu.tab-bar{
+    flex: 0 0 auto;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 150px;
+    margin-bottom: 89px;
+    >button{
+      font-family: Source Han Sans CN, Source Han Sans CN;
+      font-weight: 400;
+      font-size: 24px;
+      color: rgba(255, 255, 255, 0.5);
+      line-height: 28px;
+      &.active{
+        font-weight: bold;
+        color: #fff;
+        border-bottom: 1px solid #fff;
+      }
+    }
+  }
+  >ul.relic-list{
+    flex: 1 0 1px;
+    max-width: 1650px;
+    overflow: auto;
+    margin-bottom: 50px;
+    >li.relic-item{
+      height: 65px;
+      display: inline-flex;
+      align-items: center;
+      margin-right: 97px;
+      margin-bottom: 40px;
+      >img{
+        width: 65px;
+        height: 65PX;
+        margin-right: 26px;
+        border-radius: 50%;
+        border: 3px solid #FFFFFF;
+      }
+      >.center{
+        width: 256px;
+        margin-right: 77px;
+        >.name{
+          font-family: Source Han Sans CN, Source Han Sans CN;
+          font-weight: bold;
+          font-size: 24px;
+          color: #FFFFFF;
+          line-height: 28px;
+          overflow: hidden;
+          white-space: pre;
+          text-overflow: ellipsis;
+          margin-bottom: 4px;
+        }
+        >.desc{
+          font-family: Source Han Sans CN, Source Han Sans CN;
+          font-weight: 400;
+          font-size: 16px;
+          color: #FFFFFF;
+          line-height: 19px;
+          overflow: hidden;
+          white-space: pre;
+          text-overflow: ellipsis;
+        }
+      }
+      >button.go{
+        width: 26px;
+        height: 22px;
+        margin-right: 1px;
+      }
+    }
+  }
 }
 </style>