【工业元宇宙】样式

src/views/Metaverse.vue

@@ -1,26 +1,137 @@
 <template>
-  <div class="history" />
+  <div class="metaverse-root">
+    <button
+      v-for="(item, index) in rawDataReactive['Sheet1']"
+      :key="item['序号']"
+      class="mock-star"
+      @click="onClickStar(index)"
+    >
+      {{ item['工业体系名称'] }}
+    </button>
+    <article v-if="isShowDesc">
+      <button
+        class="close"
+        @click="isShowDesc = false"
+      />
+      <h2>{{ desc.name }}</h2>
+      <img
+        class="splitter"
+        src="@/assets/images/splitter.png"
+        alt=""
+        draggable="false"
+      >
+      <!-- <img
+        class="banner"
+        src="@/assets/images/for-dev.jpg"
+        alt=""
+        draggable="false"
+      > -->
+      <div
+        class="txt"
+        v-html="desc.detail || ''"
+      />
+    </article>
+  </div>
 </template>
 
 <script>
-import { reactive, toRefs } from 'vue'
+import { reactive, toRefs, ref } from 'vue'
+import rawData from "@/assets/mock/metaverse.json"
 
 export default {
   name: 'MetaverseView',
   setup () {
-    const state = reactive({
-      count: 0,
-    })
+    const rawDataReactive = reactive(rawData)
+
+    const isShowDesc = ref(false)
+    const desc = reactive({})
+
+    function onClickStar(idx) {
+      desc.name = rawDataReactive['Sheet1'][idx]['工业体系名称']
+      desc.detail = rawDataReactive['Sheet1'][idx]['简介']
+      isShowDesc.value = true
+    }
 
     return {
-      ...toRefs(state),
+      rawDataReactive,
+      isShowDesc,
+      desc,
+      onClickStar,
     }
   }
 }
 </script>
 
 <style lang="less" scoped>
-.history {
-
+.metaverse-root {
+  >button.mock-star {
+    display: block;
+    color: #fff;
+    background: blue;
+    margin-bottom: 5px;
+  }
+  >article {
+    position: absolute;
+    top: calc((100% - 112px) / 2);
+    transform: translateY(-50%);
+    right: 0;
+    width: 653px;
+    backdrop-filter: blur(5px);
+    background-image: url(@/assets/images/general-article-bg.png);
+    background-size: 100% auto;
+    background-repeat: no-repeat;
+    background-position: left top;
+    padding: 32px 50px 50px 50px;
+    display: flex;
+    flex-direction: column;
+    >button.close {
+      position: absolute;
+      top: 30px;
+      right: 50px;
+      width: 32px;
+      height: 32px;
+      background-image: url(@/assets/images/icon-close.png);
+      background-size: cover;
+      background-repeat: no-repeat;
+      background-position: center center;
+    }
+    >h2 {
+      flex: 0 0 auto;
+      font-size: 24px;
+      font-family: Source Han Sans CN-Bold, Source Han Sans CN;
+      font-weight: bold;
+      color: #FFFFFF;
+      margin-bottom: 21px;
+    }
+    >img.splitter {
+      flex: 0 0 auto;
+      width: 100%;
+      margin-bottom: 37px;
+    }
+    >img.banner {
+      flex: 0 0 auto;
+      width: 100%;
+      height: 34.8%;
+      object-fit: contain;
+      margin-bottom: 20px;
+    }
+    >.txt {
+      flex: 0 0 auto;
+      max-height: calc(100vh - 112px - 300px);
+      font-size: 20px;
+      font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+      font-weight: 400;
+      color: rgba(255, 255, 255, 0.8);
+      line-height: 35px;
+      overflow: auto;
+      padding-right: 10px;
+      margin-right: -10px;
+      &::-webkit-scrollbar { background: transparent; width: 4px; } /*宽度是对垂直滚动条而言，高度是对水平滚动条而言*/
+      &::-webkit-scrollbar-thumb {
+        background: rgba(220, 231, 240, 0.2);
+        border-radius: 2px;
+      }
+    }
+  }
 }
 </style>