Z: Dot: 侧边栏主页/优惠券: Layout done.

ybf_wx/src/router/index.js

@@ -10,6 +10,11 @@ const routes = [
     name: 'home',
     component: Home
   },
+  {
+    path: '/discount',
+    name: 'Discount',
+    component: ()=>import('@/views/sideNav/discount/index')
+  },
   // {
   //   path: '/about',
   //   name: 'about',

ybf_wx/src/views/home.vue

 <template>
   <div>
-
+    <button @click="disClick">discount</button>
   </div>
 </template>
 
 <script>
-  export default {
-    name: 'home'
+export default {
+  name: "home",
+
+  methods: {
+    disClick() {
+      this.$router.push("Discount");
     }
+  }
+};
 </script>
 
 <style scoped>
-
 </style>

ybf_wx/src/views/sideNav/discount/index.vue

+<template>
+  <div class="main">
+    <!-- <div class="tops"></div> -->
+    <div class="contents">
+      <div v-for="(item, index) of test.list.main" :key="index">
+        <div class="content">
+          <div class="content-imgs">
+            <img class="imgs-img" :src="item.imgUrl" alt />
+          </div>
+          <div class="content-infos">
+            <div class="infos-mains">
+              <div class="mains">
+                <div class="main-usedPercent">核销率{{item.usedPercent}}%</div>
+                <div class="main-money">{{item.money}}元代金券</div>
+              </div>
+              <div class="buttons">
+                <button class="button-send" @click="testButtonClick">推送</button>
+              </div>
+            </div>
+            <div class="infos-tips">
+              <div class="tip-shareMan">最后分享：{{item.shareMan}}</div>
+              <div class="tip-commision">佣金：¥ {{item.commision}}</div>
+            </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: "discountIndex",
+  data() {
+    return {
+      test: {
+        list: {
+          main: [
+            {
+              imgUrl: "https://ezhq.xyz/img/main/logo_sona.jpg",
+              usedPercent: "10",
+              money: "100",
+              shareMan: "Alice",
+              commision: "11"
+            },
+            {
+              imgUrl: "https://pbs.twimg.com/media/D01HBOkU0AMLWGU?format=jpg&name=medium",
+              usedPercent: "20",
+              money: "200",
+              shareMan: "Bob",
+              commision: "22"
+            },
+            {
+              imgUrl: "https://pbs.twimg.com/media/EMTspXRU0AIpV9e?format=jpg&name=medium",
+              usedPercent: "30",
+              money: "300",
+              shareMan: "Clid",
+              commision: "33"
+            },
+            {
+              imgUrl: "https://pbs.twimg.com/media/EMTqzHcVAAIQD6n?format=jpg&name=medium",
+              usedPercent: "40",
+              money: "400",
+              shareMan: "Doke",
+              commision: "44"
+            }
+          ]
+        }
+      },
+      dis: {}
+    };
+  },
+  methods:{
+    testButtonClick(){},
+    buttonMainMarketingClick(){
+      // this.$router.push("home")
+    },
+  }
+};
+</script>
+
+<style scoped>
+.main {
+  background-color: white;
+  width: 100%;
+  height: 100%;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: start;
+}
+.tops {
+  border: 2px solid lightblue;
+  width: 100%;
+  height: 100px;
+}
+.contents {
+  /* border: 2px solid lightpink; */
+  width: 100%;
+  height: 100%;
+  padding: 16px;
+  padding-bottom: 40px;
+}
+.content {
+  border: 0px solid orange;
+  height: 100px;
+  width: 100%;
+  padding: 4px 0px;
+  margin-bottom: 16px;
+
+  border-radius: 4px;
+  box-shadow: 0px 2px 4px 0px rgb(187, 187, 187);
+
+  display: flex;
+  flex-direction: row;
+  justify-content: start;
+}
+.content-imgs {
+  /* border: 1px solid pink; */
+  width: 20%;
+  height: 100%;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: start;
+  align-items: center;
+}
+.imgs-img {
+  width: 50px;
+  height: 50px;
+  margin-top: 10px;
+  border-radius: 50%;
+  object-fit: cover;
+}
+.content-infos {
+  /* border: 1px solid orange; */
+  width: 80%;
+  height: 100%;
+}
+.infos-mains {
+  height: 70%;
+  width: 100%;
+  /* border: 1px solid green; */
+
+  display: flex;
+  flex-direction: row;
+  justify-content: start;
+}
+.mains {
+  /* border: 1px solid red; */
+  width: 70%;
+  height: 100%;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+}
+.main-usedPercent {
+  font-size: 14px;
+  color: grey;
+}
+.main-money {
+  /* border: 1px solid lightgreen; */
+  font-size: 24px;
+}
+.buttons {
+  /* border: 1px solid darkorange; */
+  /* background-color: bisque; */
+  width: 30%;
+  height: 100%;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.button-send{
+  border: 0px solid blue;
+  height: 40px;
+  width: 60px;
+  border-radius: 4px;
+  background-color: rgba(68, 93, 251, 1);
+  color: white;
+  
+  font-size: 16px;
+
+}
+
+.infos-tips {
+  height: 30%;
+  width: 100%;
+  /* border: 1px solid red; */
+  border-top: 1px dashed gray;
+  padding-top: 6px;
+
+  display: flex;
+  flex-direction: row;
+  justify-content: start;
+  align-items: center;
+}
+
+.tip-shareMan{
+  /* border: 1px solid orange; */
+  width: 70%;
+  height: 100%;
+
+  font-size: 14px;
+  line-height: 16px;
+  color: rgb(150, 150, 150);
+}
+.tip-commision{
+  /* border: 1px solid green; */
+  width: 30%;
+  height: 100%;
+
+  font-size: 14px;
+  line-height: 16px;
+  color: rgb(150, 150, 150);
+}
+
+.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>