Z: Dot: main page is done.

ybf_wx/src/views/home.vue

 <template>
-  <div>
+  <!-- <div>
     <button @click="disClick">discount</button>
     <button @click="mainSaleClick">mainSale</button>
+  </div>-->
+  <div class="main">
+    <!-- <div class="tops"></div> -->
+    <div class="lists">
+      <div v-for="(item, index) of list.main" :key="index">
+        <div class="list" @click="listClick(item.redirect)">
+          <img class="list-logo" :src="item.logoUrl" alt />
+          <div class="list-infos">
+            <div class="list-info-title">{{item.name}}</div>
+            <div class="list-info-dsc">{{item.dsc}}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="menus">
+      <div class="menu" @click="buttonMainMarketingClick">精准营销</div>
+      <div class="menu activeMenu">一对一营销侧边栏</div>
+    </div>
   </div>
 </template>
 
 <script>
 export default {
   name: "home",
+  data() {
+    return {
+      list: {
+        main: [
+          {
+            name: "顾客画像",
+            dsc:
+              "亿百分会员画像，通过一方消费者数据结合三方数据为营业员展示顾客特点",
+            redirect: "Discount",
+            logoUrl: "/mainSale/test-city.png"
+          },
+          {
+            name: "优惠券推送",
+            dsc:
+              "亿百分会员画像，通过一方消费者数据结合三方数据为营业员展示顾客特点",
+            redirect: "Discount",
+            logoUrl: "/mainSale/test-city.png"
+          },
+          {
+            name: "爆品推送",
+            dsc:
+              "亿百分会员画像，通过一方消费者数据结合三方数据为营业员展示顾客特点",
+            redirect: "Discount",
+            logoUrl: "/mainSale/test-city.png"
+          }
+        ]
+      }
+    };
+  },
 
   methods: {
-    disClick() {
-      this.$router.push("Discount");
+    // disClick() {
+    //   this.$router.push("Discount");
+    // },
+    // mainSaleClick() {
+    //   this.$router.push("MainSale");
+    // },
+
+    listClick(inData) {
+      this.$router.push(inData);
     },
-    mainSaleClick() {
+
+    buttonMainMarketingClick() {
       this.$router.push("MainSale");
     }
   }
@@ -21,11 +77,106 @@ export default {
 </script>
 
 <style scoped>
-  button{
-    border: 1px solid gray;
-    margin: 2px;
-    border-radius: 4px;
-    padding: 4px;
+/* button {
+  border: 1px solid gray;
+  margin: 2px;
+  border-radius: 4px;
+  padding: 4px;
+} */
 
-  }
+.main {
+  background-color: white;
+  width: 100%;
+  height: 100%;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: start;
+}
+.lists {
+  /* border: 2px solid red; */
+  height: auto;
+  min-height: 100%;
+  padding: 4px 12px;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+}
+.list {
+  height: 140px;
+  /* border: 2px solid orange; */
+  box-shadow: 0px 2px 4px 0px rgb(187, 187, 187);
+  margin: 6px 0px;
+  padding: 0px 12px;
+  border-radius: 6px;
+
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+}
+.list-logo {
+  /* border: 1px solid red; */
+  width: 100px;
+  height: 100px;
+  border-radius: 6px;
+}
+.list-infos {
+  /* border: 1px solid orange; */
+  width: 100%;
+  height: 100px;
+  margin-left: 12px;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+}
+.list-info-title {
+  width: 100%;
+  height: 18px;
+
+  font-size: 16px;
+  font-weight: bold;
+  line-height: 18px;
+}
+.list-info-dsc {
+  margin-top: 6px;
+  width: 100%;
+  height: 16px;
+
+  font-size: 12px;
+  font-weight: normal;
+  line-height: 18px;
+}
+
+.menus {
+  border-top: 1px solid rgb(194, 194, 194);
+
+  position: fixed;
+  bottom: 0px;
+  left: 0px;
+  width: 100%;
+  height: 50px;
+  background-color: white;
+
+  display: flex;
+  flex-direction: row;
+  justify-content: start;
+  align-items: center;
+}
+.menu {
+  /* border: 1px solid red; */
+  height: 50px;
+  /* width: 120px; */
+  width: 50%;
+  line-height: 50px;
+  text-align: center;
+  font-size: 14px;
+  color: black;
+}
+.activeMenu {
+  color: lightcoral;
+}
 </style>