概述总览 样式完成

src/views/General.vue

@@ -63,6 +63,44 @@
         </div>
       </li>
     </ul>
+    <article v-show="isShowDesc">
+      <button
+        class="close"
+        @click="isShowDesc = false"
+      />
+      <h2>了圣诞节分厘卡士大夫就</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">
+        放假啦空手道分厘卡即使对方了上了飞机离开士大夫立刻
+        放假啦空手道分厘卡即使对方了上了飞机离开士大夫立刻
+        放假啦空手道分厘卡即使对方了上了飞机离开士大夫立刻
+        放假啦空手道分厘卡即使对方了上了飞机离开士大夫立刻
+        放假啦空手道分厘卡即使对方了上了飞机离开士大夫立刻
+        放假啦空手道分厘卡即使对方了上了飞机离开士大夫立刻
+        放假啦空手道分厘卡即使对方了上了飞机离开士大夫立刻
+        放假啦空手道分厘卡即使对方了上了飞机离开士大夫立刻
+        放假啦空手道分厘卡即使对方了上了飞机离开士大夫立刻
+        放假啦空手道分厘卡即使对方了上了飞机离开士大夫立刻
+        放假啦空手道分厘卡即使对方了上了飞机离开士大夫立刻
+        放假啦空手道分厘卡即使对方了上了飞机离开士大夫立刻
+        放假啦空手道分厘卡即使对方了上了飞机离开士大夫立刻
+        放假啦空手道分厘卡即使对方了上了飞机离开士大夫立刻
+        放假啦空手道分厘卡即使对方了上了飞机离开士大夫立刻
+        放假啦空手道分厘卡即使对方了上了飞机离开士大夫立刻
+        放假啦空手道分厘卡即使对方了上了飞机离开士大夫立刻
+      </div>
+    </article>
   </div>
 </template>
 
@@ -168,10 +206,13 @@ export default {
     })
     const activeCorpId = ref(null)
 
+    const isShowDesc = ref(true)
+
     return {
       filterKeyword,
       corpListMap,
       activeCorpId,
+      isShowDesc,
     }
   },
   data() {
@@ -400,5 +441,66 @@ export default {
       }
     }
   }
+  >article {
+    position: absolute;
+    top: 74px;
+    right: 0;
+    width: 653px;
+    height: calc(100% - 74px - 112px - 50px);
+    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: 1 0 1px;
+      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: 23px;
+      overflow: auto;
+      padding-right: 10px;
+      &::-webkit-scrollbar { background: transparent; width: 4px; } /*宽度是对垂直滚动条而言，高度是对水平滚动条而言*/
+      &::-webkit-scrollbar-thumb {
+        background: rgba(220, 231, 240, 0.2);
+        border-radius: 2px;
+      }
+    }
+  }
 }
 </style>