搞搞搞

src/views/TreasureDetail.vue

@@ -7,6 +7,26 @@
       />
     </Teleport>
 
+    <button class="back">
+      <img
+        class=""
+        src="@/assets/images/icon_back.png"
+        alt=""
+        draggable="false"
+      >
+    </button>
+    <h1>风云四号模型</h1>
+    <div class="tab-bar">
+      <button class="model">
+        <span>模型</span>
+      </button>
+      <button class="video">
+        <span>视频</span>
+      </button>
+      <button class="image">
+        <span>图片</span>
+      </button>
+    </div>
     <menu>
       <button @click="isShowShare = true">
         <img
@@ -49,6 +69,55 @@ export default {
   height: 100%;
   overflow: auto;
   position: relative;
+  >button.back {
+    position: absolute;
+    top: 51px;
+    left: 67px;
+    width: 40px;
+    height: 40px;
+    >img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+  >h1 {
+    position: absolute;
+    top: 36px;
+    left: 50%;
+    transform: translateX(-50%);
+    font-size: 36px;
+    font-family: Source Han Sans CN-Bold, Source Han Sans CN;
+    font-weight: bold;
+    color: #FFFFFF;
+  }
+  >.tab-bar {
+    position: absolute;
+    top: 108px;
+    left: 50%;
+    transform: translateX(-50%);
+    >button {
+      margin-right: 50px;
+      width: 80px;
+      height: 36px;
+      background: rgba(255,255,255,0.2);
+      border-radius: 18px;
+      border: 1px solid #fff;
+      font-size: 16px;
+      font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+      font-weight: 400;
+      color: #fff;
+      opacity: 0.7;
+      &:last-of-type {
+        margin-right: initial;
+      }
+      &.active {
+        background: rgba(255,255,255,0.2);
+        border: 1px solid #DBC386;
+        color: #DBC386;
+        opacity: initial;
+      }
+    }
+  }
   >menu {
     position: absolute;
     right: 44px;