精品展首页调整

src/views/boutique/index.vue

 <template>
   <div class="boutique">
     <!-- <NavBar /> -->
-    <h1>精品展</h1>
+    <!-- <h1>精品展</h1> -->
     <!-- <Footer /> -->
+
+    <div class="boutique-header">
+      <img src="@/assets/imgs/banner.jpg" width="100%" />
+      <div class="boutique-title">
+        <p>多彩贵州 &nbsp;博物盛筵</p>
+        <span>—— 精品展</span>
+      </div>
+      <ul class="tabs">
+        <li v-for="node in tabs" :key="node.tab" @click="handleTabClick(node)">
+          <div :class="{ active: activeTab === node.tab }">
+            <span>{{ node.name }}</span>
+          </div>
+        </li>
+      </ul>
+    </div>
+
+    <div class="boutique-content">
+      <div class="focus-content">
+        <p>{{ content.title }}</p>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -12,15 +33,154 @@ import Footer from "@/components/Footer";
 export default {
   name: "Boutique",
   components: { NavBar, Footer },
+  data() {
+    return {
+      tabs: [
+        { tab: "sdcs", name: "四渡赤水" },
+        { tab: "smgz", name: "神秘贵州" },
+        { tab: "jyycc", name: "技艺与传承" },
+        { tab: "ylgdyw", name: "夜郎国的疑问" },
+        { tab: "xxx", name: "XXXXX" },
+      ],
+      activeTab: "sdcs",
+      // content: { title: "四渡赤水" }
+    };
+  },
+  computed: {
+    content() {
+      let obj = Object.create(null);
+
+      const { tabs, activeTab } = this;
+      let node = tabs.find((n) => n.tab === activeTab);
+
+      node && (obj.title = node.name);
+
+      return obj;
+    },
+  },
+  methods: {
+    handleTabClick(data) {
+      this.activeTab = data.tab;
+    },
+  },
 };
 </script>
 
-<style lang='scss' scoped>
-.boutique{
+<style lang="scss" scoped>
+.boutique {
+  // display: flex;
+  // justify-content: center;
+  // height: 100vh;
+  // align-items: center;
+  // background-color: #2069c4;
+  min-height: calc(100% - 300px);
+  .boutique-header {
+    position: relative;
+    // height: 620px;
+    overflow: hidden;
+    > img {
+      position: absolute;
+      width: 100%;
+      left: 0;
+      top: 0;
+      z-index: 0;
+    }
+  }
+  .boutique-title {
+    height: 500px;
+    position: relative;
+    overflow: hidden;
+    z-index: 1;
+
+    > p {
+      margin: 0;
+      font-size: 46px;
+      font-weight: 600;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      letter-spacing: 12px;
+    }
+    > span {
+      font-weight: 600;
+      font-family: "宋体";
+      font-size: 24px;
+      position: absolute;
+      top: 65%;
+      left: 60%;
+      color: #666;
+    }
+  }
+  ul.tabs {
+    display: flex;
+    justify-content: space-between;
+    position: relative;
+    z-index: 1;
+    padding: 10px 0;
+
+    > li {
+      flex: 1;
+      > div {
+        text-align: center;
+        > span {
+          font-size: 20px;
+          color: #333;
+          font-weight: 600;
+          font-family: "楷体";
+          &:hover {
+            cursor: pointer;
+            position: relative;
+            color: #003fa7;
+            &::after {
+              content: "";
+              position: absolute;
+              left: 0;
+              width: 100%;
+              bottom: -10px;
+              border-bottom: 3px solid #2069c4;
+              border-radius: 30px;
+            }
+          }
+        }
+
+        &.active {
+          > span {
+            position: relative;
+            color: #003fa7;
+            text-shadow: 6px 2px 2px #999;
+            &::after {
+              content: "";
+              position: absolute;
+              left: 0;
+              width: 100%;
+              bottom: -10px;
+              border-bottom: 3px solid #2069c4;
+              border-radius: 30px;
+            }
+          }
+        }
+      }
+    }
+  }
+  .boutique-content {
+    .focus-content {
+      padding: 20px;
+      margin: 20px;
+      box-shadow: 1px 12px 10px 1px #ddd;
+      margin-top: 0;
+      min-height: 600px;
       display: flex;
       justify-content: center;
-  height: 100vh;
       align-items: center;
-  background-color: #2069c4;
+      font-size: 30px;
+      font-weight: 600;
+          background: rgb(239 247 255);
+
+      > p {
+        margin: 0;
+      }
+    }
+  }
 }
 </style>

src/views/culturalRelic/index.vue

@@ -99,7 +99,7 @@
                     />
                   </div>
                   <div class="showIcon" v-if="item && item.url3d">
-                    <img src="@/assets/imgs/cr/3D.png" class="icon" />
+                    <img src="@/assets/imgs/cr/3d.png" class="icon" />
                     <div class="text" @click.stop="handleTo3D(item.url3d)">
                       点击查看3D链接
                     </div>