2

src/assets/scss/pages/yantai-index.scss

@@ -56,8 +56,44 @@
   .list {
     display: flex;
     justify-content: space-around;
-    width: 70%;
+    align-items: center;
+    width: 100%;
     margin: 0 auto;
+    .menu {
+      .menu-list {
+        position: absolute;
+        top: 115px;
+        width: 100%;
+        left: 0;
+
+        .menu-item {
+          position: relative;
+          left: 70px;
+          margin-bottom: 30px;
+          width: 150px;
+          height: 60px;
+          line-height: 60px;
+          color: #fff;
+          font-size: 20px;
+          background: linelinear-gradient(left, rgba(#00a, 0.5), rgba(#00a, 0));
+          border-radius: 60px;
+          text-align: center;
+          box-shadow: -3px 3px 5px 1px inset rgba(#fff, 0.3);
+
+          &:nth-child(2),
+          &:nth-child(6) {
+            margin-left: 15px;
+          }
+          &:nth-child(3),
+          &:nth-child(5) {
+            margin-left: 15px * 2;
+          }
+          &:nth-child(4) {
+            margin-left: 15px * 3;
+          }
+        }
+      }
+    }
 
     .item {
       position: relative;

src/views/pages/yantai-index.vue

@@ -2,12 +2,29 @@
   <div class="g-app">
     <div class="g-bd" v-if="true">
       <div class="m-top">
-        <img class="logo" src="@/assets/img/yantai/index/db.png" alt="" />
+        <img class="logo" src="@/assets/img/yantai/index/db.png" />
         <div class="name">烟台市智慧社区平台</div>
       </div>
 
       <div class="m-list">
         <div class="list">
+          <div class="menu">
+            <img class="menu-bg" src="@/assets/img/yantai/index/yuanhu-you.png" />
+            <div class="menu-list">
+              <div class="menu-item">基础信息</div>
+              <div class="menu-item">疫情防控</div>
+              <div class="menu-item">社区治理</div>
+              <div class="menu-item z-on">社区党建</div>
+              <div class="menu-item">社区服务</div>
+              <div class="menu-item">AI安防</div>
+              <div class="menu-item">其他</div>
+            </div>
+          </div>
+
+          <div class="arrow">
+            <img src="@/assets/img/yantai/index/zuo.png" />
+          </div>
+
           <div class="item" @click="handleClickItem(1)">
             <img
               class="logo"