五常h5

src/App.vue

@@ -23,6 +23,7 @@ html {
   @include layout-dev;
   body {
     @include layout-dev;
+
     #app {
       @include layout-dev;
       font-size: 12px;
@@ -62,14 +63,83 @@ html {
         }
         .van-nav-bar-my-fixed {
           .van-nav-bar__content {
-            background: linear-gradient(0deg, #fafafa 0%, #f3d028 100%);
+            // background: linear-gradient(0deg, #fafafa 0%, #f3d028 100%);
+            background-color: #111;
           }
         }
         .van-tabbar--fixed {
           z-index: 999999;
+          background-color: #111111;
+        }
+      }
+    }
+    .van-dialog {
+      width: 270px;
+      height: 150px;
+      .van-dialog__header {
+        content: "温馨提示";
+      }
+      .van-hairline--top.van-dialog__footer {
+        // border: 1px solid red;
+        margin: 0 auto;
+        width: 228px;
+        position: relative;
+        left: 0;
+        top: 0;
+        .van-button.van-button--default.van-button--large.van-dialog__cancel {
+          box-sizing: border-box;
+          margin-right: 4px;
+          width: 110px;
+          height: 36px;
+          padding: 0 0;
+          background: #e6e6dc;
+          border-radius: 8px;
+          .van-button__content {
+            span {
+              width: 24px;
+              height: 11px;
+              font-size: 12px;
+              font-family: Source Han Sans CN;
+              font-weight: 400;
+              color: #282826;
+              line-height: 11px;
+            }
+          }
+        }
+        .van-button.van-button--default.van-button--large.van-dialog__confirm.van-hairline--left {
+          box-sizing: border-box;
+          margin-left: 4px;
+          width: 110px;
+          height: 36px;
+          padding: 0 0;
+          background: #e6e6dc;
+          border-radius: 8px;
+          .van-button__content {
+            span {
+              width: 24px;
+              height: 11px;
+              font-size: 12px;
+              font-family: Source Han Sans CN;
+              font-weight: 400;
+              color: #282826;
+              line-height: 11px;
+            }
+          }
+        }
+      }
+      .van-dialog__content {
+        .van-dialog__message.van-dialog__message--has-title {
+          margin: 0 auto;
+          content: "您确定要删除该地址吗？";
+          width: 140px;
+          height: 12.5px;
+          font-size: 12px;
+          font-family: Source Han Sans CN;
+          font-weight: 400;
+          color: #999999;
+          line-height: 13px;
         }
       }
-        
     }
   }
 }

src/assets/css/index.css

@@ -1,104 +1,148 @@
-.van-nav-bar.van-nav-bar-my-fixed{
-    position: fixed!important;
-    width: 100%;
+.van-nav-bar.van-nav-bar-my-fixed {
+  position: fixed !important;
+  width: 100%;
 }
-.tl{
-    text-align: left;
+
+.tl {
+  text-align: left;
 }
-.tr{
-    text-align: right;
+
+.tr {
+  text-align: right;
 }
-.tc{
-    text-align: center;
+
+.tc {
+  text-align: center;
 }
-.fl{
-    float: left;
+
+.fl {
+  float: left;
 }
-.fr{
-    float: right;
+
+.fr {
+  float: right;
 }
+
 .clear::after,
 .clear::before {
-  content: ""!important;
-  display: block!important;
-  clear: both!important;
+  content: "" !important;
+  display: block !important;
+  clear: both !important;
 }
-.van-dialog__confirm, .van-dialog__confirm:active {
-    /* color: rgb(255, 131, 39); */
-    color: #F4D022;
+
+.van-dialog__confirm,
+.van-dialog__confirm:active {
+  /* color: rgb(255, 131, 39); */
+  /* color: #F4D022; */
+  color: #282826;
 }
 
-.van-nav-bar .van-icon{
-    /* color: rgb(255, 131, 39); */
-    color: #1A1A1A;
+.van-button.van-button--default.van-button--large.van-dialog__confirm.van-hairline--left {
+  background: linear-gradient(0deg, #F2C482, #A07947) !important;
 }
 
-.van-cell.van-address-edit-detail  .van-cell {
-      padding: 0!important;
-  }
-  /* .van-icon-edit */
-  /* .van-address-item__value{
+/* 
+.van-dialog__confirm,
+.van-dialog__cancel {
+  width: 110px;
+  height: 36px;
+} */
+
+.van-nav-bar .van-icon {
+  /* color: rgb(255, 131, 39); */
+  /* color: #1A1A1A; */
+  color: #DFBF87;
+
+}
+
+.van-cell.van-address-edit-detail .van-cell {
+  padding: 0 !important;
+}
+
+/* .van-icon-edit */
+/* .van-address-item__value{
       padding: 0!important;
   } */
-  /* .van-icon.van-icon-edit.van-address-item__edit:before{
+/* .van-icon.van-icon-edit.van-address-item__edit:before{
     content: '\E6A6'!important;
   } */
-  .van-address-item .van-radio__label{
-    margin-left: 18px!important;
-  }
- 
-  .van-address-edit .van-address-edit__buttons .van-button.van-button--danger {
-    /* background: linear-gradient(0deg, #ff6600 0%, #ffd490 100%)!important; */
-    background-color: #F4D022;
-    border: 0!important;
-  }
-
-  .van-nav-bar__right .van-nav-bar__text{
-    /* color: rgb(255, 131, 39)!important; */
-    color: #1A1A1A;
-  }
-  .van-tabbar-item.van-tabbar-item--active{
-    color:#F4D022;
-  }
-  .van-address-item .van-radio__icon--checked .van-icon{
-      /* background: rgb(255, 131, 39)!important; */
-      /* border-color: rgb(255, 131, 39)!important; */
-      background-color: #F4D022;
-      border-color: #F4D022;
-
-  }
-  .van-address-list {
-    height: auto!important;
-    padding:12px 12px !important;
-  }
-  .oDetail .van-cell,.aboutUs .van-cell{
-      display: block;
-  }
- .oDetail .van-cell .van-cell__title,.aboutUs .van-cell .van-cell__title{
-      width: 80px!important;
-   float: left;
-  }
-  .oDetail .van-cell::after,
-  .oDetail .van-cell::before, .aboutUs .van-cell::after,
-  .aboutUs .van-cell::before {
-  content: ""!important;
-  display: block!important;
-  clear: both!important;
-}
-  .oDetail .van-cell .van-cell__value,.aboutUs .van-cell .van-cell__value{
-      width: calc(100% - 80px)!important;
-      float: right!important;
-  }
-  .oDetail .van-cell .van-cell__right-icon,.aboutUs  .van-cell .van-cell__right-icon{
-    float: right!important;
-  }
-  .el-loading-spinner .path {
- 
-    stroke: rgb(255, 131, 39)!important;}
-    .van-nav-bar{
-      background: transparent;
-    }
-      .liveD .video-js .vjs-big-play-button {
-        top: calc(50% - 20px);
-        left: calc(50% - 43px);
-        }
+.van-address-item .van-radio__label {
+  margin-left: 18px !important;
+}
+
+.van-address-edit .van-address-edit__buttons .van-button.van-button--danger {
+  /* background: linear-gradient(0deg, #ff6600 0%, #ffd490 100%)!important; */
+  /* background-color: #F4D022; */
+  background: linear-gradient(0deg, #F2C482, #A07947);
+  border: 0 !important;
+}
+
+.van-nav-bar__right .van-nav-bar__text {
+  /* color: rgb(255, 131, 39)!important; */
+  /* color: #1A1A1A; */
+  color: #DAAD70;
+}
+
+.van-tabbar-item.van-tabbar-item--active {
+  color: #F4D022;
+  background: #111;
+}
+
+.van-address-item .van-radio__icon--checked .van-icon {
+  /* background: rgb(255, 131, 39)!important; */
+  /* border-color: rgb(255, 131, 39)!important; */
+  /* background-color: #F4D022; */
+  background: linear-gradient(0deg, #9e7746, #f4c583);
+  border-color: #F4D022;
+
+}
+
+.van-address-list {
+  height: auto !important;
+  padding: 12px 12px !important;
+}
+
+.oDetail .van-cell,
+.aboutUs .van-cell {
+  display: block;
+}
+
+.oDetail .van-cell .van-cell__title,
+.aboutUs .van-cell .van-cell__title {
+  width: 80px !important;
+  float: left;
+}
+
+.oDetail .van-cell::after,
+.oDetail .van-cell::before,
+.aboutUs .van-cell::after,
+.aboutUs .van-cell::before {
+  content: "" !important;
+  display: block !important;
+  clear: both !important;
+}
+
+.oDetail .van-cell .van-cell__value,
+.aboutUs .van-cell .van-cell__value {
+  width: calc(100% - 80px) !important;
+  float: right !important;
+}
+
+.oDetail .van-cell .van-cell__right-icon,
+.aboutUs .van-cell .van-cell__right-icon {
+  float: right !important;
+}
+
+.el-loading-spinner .path {
+
+  stroke: rgb(255, 131, 39) !important;
+}
+
+.van-nav-bar {
+  background: transparent;
+}
+
+.liveD .video-js .vjs-big-play-button {
+  top: calc(50% - 20px);
+  left: calc(50% - 43px);
+}

src/components/inputNumber.vue

@@ -20,9 +20,9 @@ export default {
   },
   async created() {},
   mounted() {},
-    watch: {
+  watch: {
     numb: function (val) {
-      this.num= val ? parseInt(val) : 0
+      this.num = val ? parseInt(val) : 0;
     },
   },
   methods: {
@@ -61,7 +61,9 @@ export default {
     },
     jia() {
       this.leix();
+      this.num++;
       this.num = parseInt(this.num);
+
       if (this.num < this.max) {
         this.num++;
         this.$emit("backNum", this.num);

src/layout/index.vue

@@ -22,7 +22,6 @@
         </template>
       </van-tabbar-item>
     </van-tabbar>
-
   </div>
 </template>
 
@@ -47,26 +46,26 @@ export default {
         //底部导航配置
         {
           to: "/home/paddy",
-          title: "稻田",
+          title: "藏金·1745",
           icon: {
-            active: require("@/assets/images/home/rice-active.png"),
-            inactive: require("@/assets/images/home/rice.png"),
+            active: require("@/assets/images/home/1745-active.png"),
+            inactive: require("@/assets/images/home/bottomBtn1.png"),
           },
         },
         {
           to: "/home/product",
-          title: "产品",
+          title: "兑换中心",
           icon: {
             active: require("@/assets/images/home/product-active.png"),
-            inactive: require("@/assets/images/home/product.png"),
+            inactive: require("@/assets/images/home/bottomBtn2.png"),
           },
         },
         {
           to: "/home/my",
-          title: "我的",
+          title: "个人中心",
           icon: {
-            active: require("@/assets/images/home/my-active.png"),
-            inactive: require("@/assets/images/home/my.png"),
+            active: require("@/assets/images/home/personal-active.png"),
+            inactive: require("@/assets/images/home/bottomBtn3.png"),
           },
         },
       ],
@@ -83,13 +82,18 @@ export default {
   padding: 0;
   margin: 0;
   box-sizing: border-box;
+  overflow: scroll;
 }
 .layout {
   @include layout-dev;
 }
- .van-hairline--top-bottom.van-tabbar.van-tabbar--fixed /deep/ .van-tabbar-item.van-tabbar-item--active{
-    color:#F4D022;
-  }
+.van-hairline--top-bottom.van-tabbar.van-tabbar--fixed
+  /deep/
+  .van-tabbar-item.van-tabbar-item--active {
+  color: #f4d022;
+  background: #000;
+}
+
 // @import "~@/styles/mixin.scss";
 // @import "~@/styles/variables.scss";
 

src/router/index.js

@@ -80,6 +80,11 @@ const routes = [
         component: () => import('@/views/aboutUs/index'),
         hidden: true
     },
+    {
+        path: '/referMenu',
+        component: () => import('@/views/referMenu/index.vue'),
+        hidden: true
+    },
 
 
 ];

src/views/address/component/addrList.vue

@@ -0,0 +1,226 @@
+<template>
+  <div class="addrList" >
+    <div
+      class="addressList"
+      v-for="(n, i) in cardData.length"
+      :key="i"
+      @click="handleSelect(cardData[i])"
+    >
+      <div class="addressDetai">
+        <div class="addrTitle">
+          <span>{{ cardData[i].name }}</span>
+          <span>{{ cardData[i].mobile }}</span>
+          <p>
+            {{
+              `${cardData[i].city_name} ${cardData[i].area_name} ${cardData[i].address}`
+            }}
+          </p>
+        </div>
+        <div class="handle">
+          <div class="del" @click.stop="del(cardData[i].id)">
+            <img
+              src="@/assets/images/delete/del.png"
+              v-show="!cardData[i].isShow"
+            />
+            <img
+              src="@/assets/images/delete/del-active.png"
+              v-show="cardData[i].isShow"
+            />
+            <span>删除</span>
+          </div>
+          <div class="edit" @click="selected">
+            <img src="@/assets/images/delete/select.png" />
+
+            <span>编辑</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import asyncRequest from "@/apis/address/index";
+import { Dialog, Toast } from "vant";
+
+export default {
+  name: "addrList",
+  props: ["list", "disabledList", "newTime"],
+  //    @add="onAdd"
+  //       @select="onSelect"
+  //       @edit="onEdit"
+  data() {
+    return {
+      id: "",
+      sum: 0,
+      isShow: false,
+      //   newTime: "",
+      cardData: [],
+      parmValue: {
+        page: 1, // 页码
+        size: 10, // 每页显示条数
+      },
+    };
+  },
+  watch: {
+    newTime: function (val) {
+      if (val) {
+        this.searchList();
+      }
+    },
+  },
+  created() {
+    // this.cardData = this.list;
+    this.list.forEach((element) => {
+      let obj = {
+        name: element.name,
+        mobile: element.mobile,
+        city_name: element.city_name,
+        area_name: element.area_name,
+        address: element.address,
+        id: element.id,
+        isShow: false,
+      };
+      this.cardData.push(obj);
+    });
+  },
+  methods: {
+    handleSelect(e) {
+      this.$emit("select", e);
+    },
+    // getNewTime() {
+    //   this.newTime = new Date().valueOf();
+    // },
+    selected() {},
+    async delAddr(id) {
+      this.loading = true;
+      let res = await asyncRequest.del({ id: id });
+      this.loading = false;
+      if (res && res.code == 0) {
+        Toast.success("地址删除成功！");
+        this.$emit("refresh");
+
+        // await this.searchList();
+      } else if (res && res.code >= 100 && res.code <= 104) {
+        await this.logout();
+      } else {
+        Toast.fail(res.msg);
+      }
+    },
+    del(e) {
+      let aDom = document.getElementsByClassName("del")[0];
+      aDom.cancelBubble = true;
+      this.cardData.map((ele) => {
+        if (ele.id === e) {
+          ele.isShow = true;
+        } else {
+          ele.isShow = false;
+        }
+      });
+      Dialog.confirm({
+        title: "温馨提示？",
+        message: "确认删除该地址？",
+      })
+        .then(async () => {
+          await this.delAddr(e);
+        })
+        .catch(() => {
+          // on cancel
+        });
+    },
+    async searchList() {
+      if (this.parmValue.page === 1) {
+        this.list = []; //如果没有在加载中且当前页数是1，清空list列表，防止造成上次的地址残留
+      }
+      let res = await asyncRequest.list(this.parmValue); //请求接口
+      if (res && res.code == 0 && res.data) {
+        this.cardData = [];
+        let arr = res.data.list == [] ? [] : res.data.list;
+        arr.forEach((element) => {
+          let obj = {
+            name: element.contector,
+            mobile: element.mobile,
+            city_name: element.city_name,
+            area_name: element.area_name,
+            address: element.addr,
+            id: element.id,
+            isShow: false,
+          };
+          this.cardData.push(obj);
+        });
+      } else if (res && res.code >= 100 && res.code <= 104) {
+        await this.logout();
+      } else {
+        this.show_title(res.msg);
+        if (this.parmValue.page !== 1) {
+          this.parmValue.page--;
+        }
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.addrList {
+  width: 100vw;
+  height: 50vh;
+  //   border: 1px solid red;
+  .addressList {
+    width: 90vw;
+    margin: 16.5px auto;
+    background-color: #fcfcf0;
+    background: #fcfcf0;
+    border-radius: 8px;
+    .addressDetai {
+      padding: 25px 0 0 0;
+      .addrTitle {
+        width: 80vw;
+        margin: 0 auto;
+        span:first-child {
+          padding-right: 15px;
+        }
+        span {
+          height: 13px;
+          font-size: 14px;
+          font-family: Source Han Sans CN;
+          font-weight: 500;
+          color: #4d4d4d;
+          line-height: 13px;
+        }
+        p {
+          height: 12px;
+          font-size: 12px;
+          font-family: Source Han Sans CN;
+          font-weight: 400;
+          color: #999999;
+          line-height: 12px;
+          margin-top: 6px;
+        }
+      }
+      .handle {
+        z-index: 99999;
+        width: 80vw;
+        margin: 0 auto;
+        height: 20px;
+        padding: 0 0 10px 0;
+        .edit,
+        .del {
+          margin: 2px 5px;
+          float: right;
+          display: inline-block;
+          img {
+            width: 12px;
+            height: 14px;
+            vertical-align: -2px;
+          }
+          span {
+            display: inline-block;
+            padding: 0 0 0 2px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/views/address/index.vue

@@ -1,22 +1,29 @@
 <template>
-  <div class="address" style="padding-top: 46px">
+  <div class="address" style="padding-top: 46px; background: #e6e6dc">
     <van-nav-bar
       title="我的地址"
       class="van-nav-bar-my-fixed"
       left-arrow
       @click-left="onClickLeft"
-      :right-text="isRes === '1' || total === 0 ? '' : '删除'"
+      :right-text="isRes === '1' || total === 0 ? '' : ''"
       @click-right="onClickRight"
       fixed
     />
-    <van-address-list
+    <addr-list
+      v-if="newTime !== ''"
+      :newTime="newTime"
       v-model="chosenAddressId"
       :list="list"
-      :disabled-list="[]"
+      :disabledList="[]"
+      @refresh="handleRefresh"
       @add="onAdd"
       @select="onSelect"
       @edit="onEdit"
     />
+    <van-address-list :disabled-list="[]" @add="onAdd" @edit="onEdit" />
+    <!-- <div class="edit">编辑</div>
+    <div class="del">删除</div>
+    <div class="normal">设为默认</div> -->
     <div class="addr-null" v-show="isShowAddrNull">
       <img src="@/assets/images/home/addr-null.png" alt="" />
       <div class="addr-null-title">暂无地址~</div>
@@ -38,10 +45,14 @@
 import { Dialog } from "vant";
 import asyncRequest from "@/apis/address/index";
 import resToken from "@/mixins/resToken";
+import AddrList from "./component/addrList.vue";
 export default {
   mixins: [resToken],
+  components: { AddrList },
   data() {
+    AddrList;
     return {
+      newTime: "",
       isShowAddrNull: true,
       delId: "",
       chosenAddressId: "",
@@ -61,12 +72,18 @@ export default {
     } else {
       this.isRes = "0";
     }
-    console.log(this.isRes);
   },
   mounted() {
     this.searchList();
   },
   methods: {
+    async handleRefresh() {
+      await this.searchList();
+    },
+    getNewTime() {
+      this.newTime = new Date().valueOf();
+    },
+
     onClickLeft() {
       window.history.back(-1);
     },
@@ -78,11 +95,11 @@ export default {
         }
 
         Dialog.confirm({
-          title: "确认删除？",
+          title: "温馨提示？",
           message: "确认删除该地址？",
         })
           .then(async () => {
-            await this.delAddr(this.delId);
+            // await this.delAddr(this.delId);
           })
           .catch(() => {
             // on cancel
@@ -115,6 +132,7 @@ export default {
     },
 
     onSelect(item) {
+      // window.history.back(-1);
       if (this.isRes === "1") {
         this.$store.dispatch("user/set_ad", item).then((res) => {
           window.history.back(-1);
@@ -160,6 +178,8 @@ export default {
             return v1;
           });
           this.list.push(...arr); //把arr数组解构放到list列表渲染
+          this.getNewTime();
+
           if (this.list.length != 0) {
             this.isShowAddrNull = false;
           } else {
@@ -194,6 +214,7 @@ export default {
   height: 100%;
   padding: 48px 0 0 0;
   box-sizing: border-box;
+  background-color: red;
   .van-tag--danger {
     background: rgb(255, 131, 39);
   }
@@ -204,7 +225,8 @@ export default {
   }
   .van-address-list__bottom {
     button.van-button--danger {
-      background: linear-gradient(-180deg, #fcce56, rgb(255, 131, 39), #f9680f);
+      // background: linear-gradient(-180deg, #fcce56, rgb(255, 131, 39), #f9680f);
+      background-color: #e6e6dc;
       border: 0;
     }
   }
@@ -223,7 +245,9 @@ export default {
   font-size: 18px;
   font-family: Source Han Sans CN;
   font-weight: 500;
-  color: #1a1a1a;
+  // color: #1a1a1a;
+  color: #daad70;
+
   line-height: 16px;
 }
 // //隐藏地址选项中前面的勾选按钮
@@ -291,7 +315,9 @@ export default {
 //新增地址按钮
 .van-button.van-button--danger.van-button--normal.van-button--block.van-button--round.van-address-list__add {
   width: 100%;
-  background: #f4d022;
+  // background: #f4d022;
+
+  background: linear-gradient(0deg, #f2c482, #a07947);
   border-radius: 30px;
 }
 //新建地址按钮
@@ -300,7 +326,9 @@ export default {
   height: 17px;
   font-size: 18px;
   font-weight: 500;
-  color: #1a1a1a;
+  // color: #1a1a1a;
+  color: #daad70;
+
   line-height: 26px;
 }
 //空地址时候的样式

src/views/address/view.vue

@@ -1,6 +1,12 @@
 <template>
   <div class="addressView" style="padding-top: 46px">
-    <van-nav-bar class="van-nav-bar-my-fixed" :title="title" fixed left-arrow @click-left="onClickLeft" />
+    <van-nav-bar
+      class="van-nav-bar-my-fixed"
+      :title="title"
+      fixed
+      left-arrow
+      @click-left="onClickLeft"
+    />
     <van-address-edit
       v-loading="loading"
       :area-list="areaList"
@@ -36,7 +42,7 @@ export default {
         areaCode: "",
       },
       loading: false,
-      isDefault:false,
+      isDefault: false,
     };
   },
   async created() {
@@ -142,11 +148,8 @@ export default {
     clear: both;
   }
   //新增地址栏和顶部的间距
-  .van-address-edit{
-      // margin-top: 15px;
-    }
-
+  .van-address-edit {
+    // margin-top: 15px;
+  }
 }
-
-
 </style>

src/views/live/index.vue

@@ -67,7 +67,6 @@ export default {
         this.parmValue.page = 1; //重置页码数
       } else {
         this.parmValue.page++; //如果页码数不是1，页码++
-        console.log(this.parmValue);
       }
       if (!this.loading) {
         //加载结束
@@ -180,7 +179,8 @@ export default {
         margin: 10px 0 5px 0;
         width: 100%;
         line-height: 20px;
-        color: #1a1a1a;
+        // color: #1a1a1a;
+        color: #daad70;
       }
       .videoDesc {
         display: block;

src/views/login/index.vue

@@ -8,22 +8,31 @@
         <div class="login-img">
           <img src="@/assets/img/login.png" alt="" />
         </div>
-        <p class="logo-header-title">登录</p>
-        <p class="logo-header-tips">登录享受更多精彩</p>
+        <p class="logo-header-title">Hello</p>
+        <p class="logo-header-tips">欢迎登录藏金·1745平台</p>
       </div>
       <van-form validate-first class="login-form">
-        <ul class="clear">
-          <li class="label">
+        <div class="loginBox">
+          <img src="@/assets/img/loginBox.png" alt="" />
+        </div>
+        <ul class="clear oUl" style="width: 83vw">
+          <!-- <li class="label">
             卡号:
-            <!-- <img :src="user" alt="" /> -->
-          </li>
+           
+          </li> -->
           <li class="van-field-input">
-            <van-row>
+            <van-row style="width: 83vw">
+              <van-col span="3" style="width: 14px">
+                <div class="cardNo">
+                  <img src="@/assets/img/cardNo.png" alt="" />
+                </div>
+              </van-col>
               <van-col span="5" style="width: 42px">
                 <div class="myCard">CJ1745</div>
               </van-col>
-              <van-col span="19" style="width: calc(100% - 42px)">
+              <van-col span="16" style="width: calc(100% - 86px)">
                 <van-field
+                  style="margin: 0 0 0 30px; background: transParent"
                   size="large"
                   v-model="form.mobile"
                   name="mobile"
@@ -37,25 +46,34 @@
             </van-row>
           </li>
         </ul>
-        <ul class="clear">
-          <li class="label">
+        <ul class="clear" style="width: 83vw; border-radius: 10px">
+          <!-- <li class="label">
             密码:
-            <!-- <img :src="pwod" alt="" /> -->
-          </li>
-          <li class="van-field-input">
-            <van-field
-              size="large"
-              v-model="form.code"
-              name="code"
-              maxlength="6"
-              placeholder="请输入密码"
-              :rules="[{ validator: asyncpwodValidator }]"
-              :type="!passwordStatus ? 'password' : 'text'"
-              :right-icon="!passwordStatus ? 'eye-o' : 'closed-eye'"
-              @click-right-icon="showPassword"
-            >
-            </van-field>
-          </li>
+            <img src="@/assets/img/password.png" alt="" />
+          </li> -->
+          <van-row style="width: 84vw">
+            <van-col span="3" style="width: 14px">
+              <div class="cardPwd">
+                <img src="@/assets/img/password.png" alt="" />
+              </div>
+            </van-col>
+            <van-col :span="21" style="width: calc(100% - 50px)">
+              <li class="van-field-input">
+                <van-field
+                  style="background: transparent; margin: 0 0 0 28px"
+                  size="large"
+                  v-model="form.code"
+                  name="code"
+                  maxlength="6"
+                  placeholder="请输入密码"
+                  :rules="[{ validator: asyncpwodValidator }]"
+                  :type="!passwordStatus ? 'password' : 'text'"
+                  :right-icon="!passwordStatus ? 'eye-o' : 'closed-eye'"
+                  @click-right-icon="showPassword"
+                >
+                </van-field>
+              </li> </van-col
+          ></van-row>
         </ul>
 
         <van-button
@@ -71,6 +89,11 @@
           登&nbsp;录
         </van-button>
       </van-form>
+      <div class="footerP">
+        <div class="footer">
+          <img src="@/assets/img/footer.png" alt="" />
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -86,6 +109,7 @@ export default {
       loginBG: require("@/assets/images/login/bg.png"),
       user: require("@/assets/images/login/user.png"),
       pwod: require("@/assets/images/login/pwod.png"),
+
       loadding: false,
       form: {
         mobile: "",
@@ -226,12 +250,13 @@ export default {
     left: 0;
     width: 100%; //继承最外层login的宽高
     height: 100%;
-    background-color: #fff;
+    // background-color: #fff;
+    background-color: #e6e6dc;
     .logo-header {
       //上半部分登陆盒子，用来展示一张图片
       // padding: 50% 0 10% 0;
       width: 100%;
-      height: 309px;
+      height: 355px;
       .login-img {
         width: 100%;
         position: absolute;
@@ -239,54 +264,93 @@ export default {
         top: 0;
         img {
           width: 100%;
-          height: 209px;
+          // height: 209px;
+          height: 232px; //新版
         }
       }
       position: relative;
       top: -12px;
       .logo-header-title {
         //登陆字体的盒子
-        margin: 0px;
-        font-weight: bold;
-        padding: 91px 256px 99px 37px;
-        width: 81px;
-        height: 37px;
-        font-size: 20px;
-        font-weight: bold;
-        color: #ffffff;
-        line-height: 20px;
+        // margin: 0px 0 0 0;
+        // font-weight: bold;
+        padding: 0px 211px 0px 55px;
+        // width: 81px;
+        // height: 37px;
+        // font-size: 20px;
+        // font-weight: bold;
+        // color: #ffffff;
+        // line-height: 20px;
         position: absolute;
+        // 新版
+        width: 62.5px;
+        height: 18.5px;
+        font-size: 25px;
+        font-family: DIN;
+        font-weight: bold;
+        color: #daad70;
+        line-height: 159.5px;
       }
       .logo-header-tips {
         //登陆文字下提示内容
         position: absolute;
-        left: 0;
-        top: 0;
-        padding-top: 0;
-        padding: 118px 242px 79px 37px;
-        width: 97px;
-        height: 12px;
-        font-size: 12px;
-        font-weight: 150;
-        color: #ffffff;
-        line-height: 3px;
+        // left: 0;
+        // top: 0;
+        // padding-top: 0;
+        padding: 40px 211px 0px 55px;
+        // width: 97px;
+        // height: 12px;
+        // font-size: 12px;
+        // font-weight: 150;
+        // color: #ffffff;
+        // line-height: 3px;
+        // 新版
+        width: 136.5px;
+        height: 12.5px;
+        font-size: 13px;
+        font-family: Source Han Sans CN;
+        font-weight: 200;
+        color: #daad70;
+        line-height: 159.5px;
+      }
+    }
+    .loginBox {
+      width: 84vw;
+      background: rgba(0, 0, 0, 0);
+      // border: 1px solid red;
+      border-radius: 10px;
+      position: absolute;
+      margin: 0 30.5px 0 28.5px;
+
+      top: -59px;
+      // z-index: 99999;
+      img {
+        width: 100%;
       }
     }
     .login-form.van-form {
       //登陆框
-      padding: 10% 18%;
-      background-color: #fff;
-      border-top-left-radius: 20px;
-      border-top-right-radius: 20px;
+      // padding: 10% 18%;
+      // background-color: #fff;
+      // background-color: #e6e6dc; //新版
+
+      background: #e6e6dc;
+      // border-top-left-radius: 20px;
+      // border-top-right-radius: 20px;
       position: relative;
-      top: -145px;
+      // top: -145px;
+      top: -135.5px; //新版
       left: 0;
+      // border: 1px solid green;
       ul {
+        position: relative;
+        left: 0;
+        top: 0;
         // border-radius: 20px;
         overflow: hidden;
-        background: #ffffff;
-        margin: 0 0 28px 0;
-        border-bottom: 1px solid #f0f0f0;
+        margin: 0 0 11.5px 30px;
+        // border-bottom: 1px solid #f0f0f0;
+        z-index: 9999;
         li {
           float: left;
           &.label {
@@ -296,8 +360,10 @@ export default {
             font-weight: bolder;
           }
           &.van-field-input {
+            float: left;
             box-sizing: border-box;
             width: 100%;
+            margin: 0 0 0 0;
             .van-cell {
               height: 42px;
               line-height: 42px;
@@ -325,16 +391,88 @@ export default {
     .login-form-button.van-button,
     .login-form-button.van-button--disabled {
       border: 0;
-      margin: 9vh 0 0 0;
+      margin: 98px auto 10px auto;
       color: #333;
-
-      background: #f4d022;
+      // background: #f4d022;
+      background: linear-gradient(0deg, #f2c482, #a07947);
       border-radius: 34px;
+      // width: 334px;
+      width: 90vw;
+      height: 45px;
+      background: linear-gradient(0deg, #a67e4b, #efc180);
+      border-radius: 8px;
+    }
+  }
+
+  .myCard {
+    position: relative;
+    padding: 0 0 0 26px;
+    height: 42px;
+    line-height: 42px;
+    z-index: 99999;
+    width: 45px;
+    height: 41px;
+    font-size: 13px;
+    font-family: Source Han Sans CN;
+    font-weight: 400;
+    color: #111111;
+    line-height: 41px;
+  }
+  .cardNo {
+    width: 14px;
+    height: 11px;
+    vertical-align: 10px;
+    padding: 15.5px 0 0 21px;
+    position: relative;
+    img {
+      width: 14px;
+      height: 11px;
+    }
+  }
+  .cardPwd {
+    width: 14px;
+    height: 11px;
+    vertical-align: 10px;
+    padding: 15.5px 0 0 21px;
+    position: relative;
+    img {
+      width: 12px;
+      height: 14px;
+    }
+  }
+  .footerP {
+    width: 100vw;
+    display: flex;
+    justify-content: center;
+    position: absolute;
+    left: 0;
+    bottom: 20px;
+  }
+  .footer {
+    width: 90vw;
+    height: 57.5px;
+
+    img {
+      width: 100%;
+      height: 57.5px;
+
+      // border-radius: 10px;
+    }
+  }
+  @media screen and (min-width: 320px) {
+    .login-main .login-form.van-form ul {
+      top: -25px;
+    }
+  }
+  @media screen and (min-width: 414px) {
+    .login-main .login-form.van-form ul {
+      top: -10px;
+    }
+  }
+  @media screen and (min-height: 812px) {
+    .login-main .login-form.van-form ul {
+      top: -18px;
     }
   }
-}
-.myCard {
-  height: 42px;
-  line-height: 42px;
 }
 </style>

src/views/my/index.vue

@@ -1,44 +1,41 @@
 <template>
   <div class="my">
-    <van-nav-bar title="我的" class="van-nav-bar-my-fixed" fixed />
+    <!-- <van-nav-bar title="我的" class="van-nav-bar-my-fixed" fixed /> -->
     <!-- right-text="登出"
        -->
     <div class="mine-resume">
-      <div class="mine-resume-main">
-        <ul class="clear">
-          <li v-if="userData === null">
-            <p class="title"><span>登录</span></p>
-          </li>
-          <li v-else>
-            <p class="title">
-              <span>您好,{{ userData.nickname }}</span>
-            </p>
-            <p>
-              <span>有效期至{{ userData.expiretime }}</span>
-            </p>
-          </li>
-          <li>
-            <img :src="header" alt="" />
-          </li>
-        </ul>
+      <div class="bgImg">
+        <img src="@/assets/images/my/personal/bgImg.png" alt="" />
       </div>
-      <div class="top">
-        <div class="vip-box clear">
-          <img :src="vip_text" alt="" />
-          <div class="open-btn" @click="showT(2)">
-            立即开通
-            <!-- <span></span> -->
-          </div>
+      <div class="my-info">
+        <img src="@/assets/images/my/personal/my-info.png" alt="" />
+        <div class="mine-resume-main">
+          <ul class="clear headerBox">
+            <div class="headerImg">
+              <img :src="header" alt="" />
+              <div class="header-info">
+                <p>欢迎您!</p>
+                <span>尊敬的金卡用户</span>
+              </div>
+            </div>
+            <div class="headerDesc">
+              <li v-if="userData === null">
+                <p class="title"><span>登录</span></p>
+              </li>
+              <li v-else class="usable">
+                <span>有效期至{{ userData.expiretime }}</span>
+              </li>
+              <li class="header-username">
+                <span>NO:{{ username }}</span>
+              </li>
+            </div>
+          </ul>
         </div>
+      </div>
 
-        <!-- <ul class="vip-box">
-          <li class="vip-bg">
-            
-          </li>
-        </ul> -->
-
+      <div class="top">
         <!-- 我的页面下待收，待发、售后盒子 -->
-
+        <p>我的订单</p>
         <ul class="cell-vip">
           <li
             v-for="(item, index) in cellVip"
@@ -53,14 +50,14 @@
       </div>
 
       <div class="bottom">
-        <h1 class="common">常用功能</h1>
+        <p class="common">常用功能</p>
         <div class="cell-list">
           <div
             class="box-detaile"
             is-link
             v-for="(item, index) in cellList"
             :key="item.name + index"
-            @click="goto(item.anchor)"
+            @click="goto(item.anchor, item.name)"
           >
             <div class="detaile-box">
               <div class="cell-my-img">
@@ -73,14 +70,18 @@
           </div>
         </div>
         <div class="my-btn-main">
-          <van-button
+          <!-- <van-button
             class="my-button"
             block
             type="info"
             @click.native="logout()"
           >
             退出登录
-          </van-button>
+          </van-button> -->
+          <div class="footer">
+            <img src="@/assets/images/my/footer.png" />
+          </div>
+          <div style="height: 50px"></div>
         </div>
       </div>
     </div>
@@ -97,9 +98,9 @@ export default {
     return {
       header: require("@/assets/images/my/header.png"), //用户头像
       userData: null,
-      active: require("@/assets/images/home/live-active.png"),
+      active: require("@/assets/images/my/menu.png"),
       ad: require("@/assets/images/my/ad.png"), //地理定位
-      order: require("@/assets/images/my/order.png"), //用户订单
+      order: require("@/assets/images/my/my-order.png"), //用户订单
       unshipped: require("@/assets/images/my/unshipped.png"), //待发货
       shipped: require("@/assets/images/my/shipped.png"), //待收货
       service: require("@/assets/images/my/service.png"), //客户服务
@@ -109,15 +110,13 @@ export default {
       loading: false,
       cellList: [],
       cellVip: [],
+      canStockBag: "",
+      canStockBox: "",
+      username: "",
     };
   },
   async created() {
     this.cellList = [
-       {
-        anchor: "/live",
-        id: this.active,
-        name: "我的直播",
-      },
       {
         anchor: "/address",
         id: this.ad,
@@ -126,8 +125,14 @@ export default {
       {
         anchor: "/order",
         id: this.order,
-        name: "我的订单",
+        name: "历史订单",
+      },
+      {
+        anchor: "/referMenu",
+        id: this.active,
+        name: "推荐菜谱",
       },
+
       {
         anchor: "/aboutUs",
         id: this.service,
@@ -147,19 +152,23 @@ export default {
         name: "待收货",
       },
       {
-        anchor: "/aboutUs",
+        anchor: "/referMenu",
         id: this.saleAfter,
         name: "售后",
       },
     ];
   },
+
   mounted() {
     this.getStock();
   },
   methods: {
-    goto(url) {
+    goto(url, name) {
       window.vm.$router.push({
         path: url,
+        query: {
+          type: name,
+        },
       });
     },
 
@@ -168,6 +177,7 @@ export default {
         let res = await asyncRequest.detail({});
         if (res && res.code == 0) {
           this.userData = res.data;
+          this.username = res.data.username;
         } else if (res && res.code >= 100 && res.code <= 104) {
           await this.logout();
         } else {
@@ -177,10 +187,17 @@ export default {
     },
 
     showT(index) {
+      console.log(index);
       if (index === 2) {
-        Dialog.alert({
-          message: "敬请期待!",
-        }).then(async () => {});
+        // Dialog.alert({
+        //   message: "敬请期待!",
+        // }).then(async () => {});
+        window.vm.$router.push({
+          path: "/referMenu",
+          query: {
+            type: "售后",
+          },
+        });
       } else {
         window.vm.$router.push({
           path: "/order",
@@ -204,44 +221,127 @@ export default {
     position: relative;
     box-sizing: border-box;
     width: 100%;
+    background: #e6e6dc;
+
     .mine-resume-main {
       // background:linear-gradient(0deg, rgba(255,255,255,.1) 0%, #fff 80%);;
-      background-color: #fff;
-      padding: 0  0;
+      // background-color: #fff;
+      padding: 0 0;
+      // margin: -19vh 0 0 0;
+      left: 10px;
+      top: 20px;
+      position: absolute;
+
       ul {
-        padding: 16px;
         background: transparent;
         li {
           float: left;
           &:first-child {
             width: calc(100% - 60px);
             p {
+              width: 188px;
               padding: 0 16px 0 0;
               margin: 0;
-              color: #1a1a1a;
+              color: #daad70;
+
+              // color: #1a1a1a;
               font-size: 12px;
               line-height: 16px;
               color: #999999;
               &.title {
-                color: #1a1a1a;
+                color: #daad70;
+
+                // color: #1a1a1a;
                 font-weight: bolder;
                 font-size: 16px;
-                height: 30px;
+                height: 100px;
                 line-height: 21px;
                 padding: 0 16px 0 0;
               }
             }
           }
           &:last-child {
-            width: 60px;
+            // width: 60px;
             text-align: center;
-            img {
-              display: inline-block;
-              width: 60px;
-            }
+            margin: 0 0 0 0;
           }
         }
       }
+      .headerBox {
+        width: 80vw;
+        margin: 0px auto;
+      }
+      .headerImg {
+        width: 47.5px;
+        height: 47.5px;
+        border-radius: 50%;
+        // position: absolute;
+        // left: 35px;
+        // top: 20px;
+        img {
+          width: 100%;
+          border-radius: 50%;
+        }
+        .header-info {
+          width: 86px;
+          height: 29.5px;
+          float: left;
+          margin: -43px 0 0 60px;
+          // position: absolute;
+          // left: 55px;
+          // top: 7px;
+          p {
+            margin: 0;
+            // width: 74px;
+            height: 15px;
+            font-size: 15px;
+            font-family: Source Han Sans CN;
+            font-weight: 500;
+            color: #5c3501;
+            line-height: 15px;
+            opacity: 0.8;
+          }
+          span {
+            color: #5c3501;
+          }
+        }
+      }
+      .headerDesc {
+        width: 90vw;
+        overflow: hidden;
+        display: flex;
+        height: 19px;
+        margin: 0 0 0 -10px;
+        .usable {
+          // width: 188px;
+          // height: 19px;
+          margin: 0 5px 0 0;
+          width: 52vw;
+          font-size: 0.5rem;
+          font-family: Source Han Sans CN;
+          font-weight: 400;
+          color: #5c3501;
+          line-height: 10px;
+          height: 13px;
+          // position: absolute;
+          overflow: hidden;
+          left: 30px;
+          top: 110px;
+        }
+        .header-username {
+          margin: 0 0px 0 10px;
+
+          font-size: 0.5rem;
+          font-family: Source Han Sans CN;
+          font-weight: 500;
+          color: #5c3501;
+          line-height: 10px;
+          height: 10px;
+          // position: absolute;
+          left: 235px;
+          top: 110px;
+        }
+      }
     }
     /**vip开通框 */
     .vip-box {
@@ -273,24 +373,91 @@ export default {
         }
       }
     }
+
+    .my-btn-main {
+      width: 321.5px;
+      margin: 40px auto 0;
+      box-sizing: border-box;
+      // .my-button {
+      //   box-sizing: border-box;
+      //   display: inline-block;
+      //   border-radius: 20px;
+      //   background: #dbdbdb;
+      //   border: 0;
+      // }
+      .footer {
+        width: 321.5px;
+        height: 95px;
+        img {
+          width: 100%;
+        }
+      }
+    }
+    //  <!-- 我的页面下待收，待发、售后盒子 -->
+    .top {
+      width: 100%;
+      padding: 0 20px;
+      box-sizing: border-box;
+      background: #e6e6dc;
+      margin: 0vh 0 0 0;
+      // height:140px;
+      p {
+        width: 64.5px;
+        height: 15px;
+        font-size: 16px;
+        font-family: Source Han Sans CN;
+        font-weight: 400;
+        color: #242424;
+        line-height: 13px;
+      }
+      .vip-box {
+        height: 70px;
+        background-color: #292f46;
+        border-radius: 15px;
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+        padding: 13px 13px;
+        box-sizing: border-box;
+        img {
+          display: inline-block;
+          height: 23px;
+        }
+        .open-btn {
+          background: linear-gradient(90deg, #dfa460 0%, #f0d0a1 100%);
+          border-radius: 10px;
+          float: right;
+          color: #fff;
+          line-height: 18px;
+          padding: 3px 8px;
+        }
+      }
+    }
     /**vip服务区域样式 */
     .cell-vip {
-      padding: 20px 0px;
+      // width: 331px;
+      width: 90vw;
+      height: 81px;
+      background: #fcfcf0;
+      border-radius: 16px;
+      padding: 10px 0px 20px 0;
       height: 50px;
       display: flex;
+      margin: 0 0 0 0px;
       .cell-my-img {
         display: block;
-        width: 25px;
-        height: 24px;
+        width: 45px;
+        height: 45px;
       }
       .vip-title {
         display: inline-block;
-        padding-top: 10px;
-        height: 20px;
+        height: 10px;
         line-height: 20px;
+        font-family: Source Han Sans CN;
+        font-weight: 400;
+        color: #8a8a8a;
       }
       .vip-item {
-        height: 60px;
+        height: 45px;
         display: inline-block;
         flex: 1;
         text-align: center;
@@ -299,32 +466,53 @@ export default {
         line-height: 6px;
         text-align: center;
         img {
-          width: 30px;
-          height: 28px;
+          width: 45px;
+          height: 45px;
           display: inline-block;
         }
         span {
-          height: 28px;
+          height: 16px;
           display: block;
         }
       }
     }
-    .my-btn-main {
-      width: 100%;
-      box-sizing: border-box;
-      .my-button {
-        box-sizing: border-box;
-        display: inline-block;
-        border-radius: 20px;
-        background: #dbdbdb;
-        border: 0;
-      }
+  }
+
+  .common {
+    margin: 10px;
+    width: 110px;
+    height: 26px;
+    font-size: 14px;
+    font-weight: 600;
+    color: #333333;
+    line-height: 26px;
+    position: relative;
+    top: 0;
+    left: 0;
+    padding: 8px 0px 8px 15px;
+  }
+
+  .bottom {
+    width: 100%;
+    box-sizing: border-box;
+    background: #e6e6dc;
+    margin: 0 0 0 0;
+    p {
+      margin: 0;
     }
     /**地址栏收获样式 */
     .cell-list {
+      width: 90vw;
+      height: 81px;
+      background: #fcfcf0;
+      border-radius: 16px;
+      padding: 10px 0px;
+      height: 50px;
+      display: -webkit-box;
+      display: -ms-flexbox;
       display: flex;
-      padding: 0 10px;
-      background-color: #fff;
+      // margin: 0 auto;
+      margin: 0 0 0 16px;
       .van-cell__title {
         width: 200px;
         position: relative;
@@ -332,95 +520,76 @@ export default {
         top: 0;
         text-align: center;
         img {
-          margin: 0 44px;
+          margin: 0 40px;
         }
       }
-    }
-    .my-btn-main {
-      width: 100%;
-      margin: 45px 0 0 0;
-      padding: 0 16px;
-      box-sizing: border-box;
-      .my-button {
-        box-sizing: border-box;
-        display: inline-block;
-        border-radius: 20px;
-        background: #dbdbdb;
-        border: 0;
+      .box-detaile {
+        flex: 1;
+        text-align: center;
+        .detaile-box {
+          width: 20vw;
+          margin: 0 auto;
+          text-align: center;
+          .cell-my-img {
+            height: 25px;
+
+            width: 100%;
+            overflow: hidden;
+            img {
+              display: inline-block;
+              height: 25px;
+              width: auto;
+              margin: 0 auto;
+            }
+          }
+          .custom-title {
+            margin-top: 8px;
+          }
+        }
       }
     }
   }
-}
-.common {
-  margin: 10px;
-  width: 110px;
-  height: 26px;
-  font-size: 14px;
-  font-weight: 600;
-  color: #333333;
-  line-height: 26px;
-  position: relative;
-  top: 0;
-  left: 0;
-  padding: 8px 0px 8px 15px;
-}
-.top {
-  width: 100%;
-  padding: 0 34.5px;
-  box-sizing: border-box;
-  background-color: #fff;
-  // height:140px;
-  .vip-box {
-    height: 70px;
-    background-color: #292f46;
-    border-radius: 15px;
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-    padding: 13px 13px;
-    box-sizing: border-box;
+
+  //常用功能下的按钮
+
+  // 改
+  .bgImg {
+    width: 100%;
+    height: 246px;
+    position: absolute;
+    top: 0px;
     img {
-      display: inline-block;
-      height: 23px;
-    }
-    .open-btn {
-      background: linear-gradient(90deg, #dfa460 0%, #f0d0a1 100%);
-      border-radius: 10px;
-      float: right;
-      color: #fff;
-      line-height: 18px;
-      padding: 3px 8px;
+      width: 100%;
     }
   }
-}
-.bottom {
-  width: 100%;
-  position: relative;
-  left: 0;
-  box-sizing: border-box;
-  background-color: #fff;
-}
+  .my-info {
+    width: 90vw;
+    // float: left;
+    position: relative;
+    left: 0;
+    top: 0;
+    margin: 15vh auto 0;
+    img {
+      position: relative;
 
-//常用功能下的按钮
-.box-detaile {
-  flex: 1;
-  text-align: center;
-  .detaile-box {
-    width: 90px;
-    margin: 0 auto;
-    text-align: center;
-    .cell-my-img {
-      height: 25px;
       width: 100%;
-      overflow: hidden;
-      img {
-        display: inline-block;
-        height: 25px;
-        width: auto;
-        margin: 0 auto;
-      }
     }
-    .custom-title {
-      margin-top: 8px;
+  }
+  @media screen and (min-width: 320px) {
+    .mine-resume .mine-resume-main .headerDesc {
+      margin-top: 27px;
+    }
+  }
+  @media screen and (min-width: 375px) {
+    .mine-resume .mine-resume-main .headerDesc {
+      margin-top: 53px;
+      margin: 53px 0 0 5px;
+    }
+  }
+  @media screen and (min-width: 414px) {
+    .mine-resume .mine-resume-main .headerDesc {
+      margin-top: 53px;
+      margin: 66px 0 0 5px;
     }
   }
 }

src/views/paddy/index.vue

@@ -1,55 +1,833 @@
 <template>
-  <div class="paddy" style="background: #fff">
+  <div class="paddy">
+    <div class="bgImg">
+      <img src="@/assets/images/home/bgImg.png" alt="" />
+    </div>
+
     <div class="top">
-      <img src="@/assets/images/home/paddy.png" alt="" />
+      <!-- <img src="@/assets/images/home/paddy.png" alt="" /> -->
+      <van-swipe
+        class="my-swipe"
+        :autoplay="3000"
+        indicator-color="#DAAD71"
+        @change="onChange"
+      >
+        <van-swipe-item style="width: 100vw">
+          <img
+            src="@/assets/images/home/swipper/swipper1.png"
+            alt=""
+            style="width: 100%"
+          />
+        </van-swipe-item>
+        <van-swipe-item>
+          <img src="@/assets/images/home/swipper/swipper2.png" alt="" />
+        </van-swipe-item>
+        <template #indicator>
+          <ul class="oUl">
+            <li
+              :class="
+                current == 0
+                  ? 'custom-indicator indicator-active'
+                  : 'custom-indicator'
+              "
+            ></li>
+            <li
+              :class="
+                current == 1
+                  ? 'custom-indicator indicator-active'
+                  : 'custom-indicator'
+              "
+            ></li>
+          </ul>
+        </template>
+      </van-swipe>
+    </div>
+    <div class="centerBtn">
+      <li @click="goto('/referMenu', '五常大米')">
+        <img src="@/assets/images/home/centerUl/rice.png" alt="" />
+        <p>五常大米</p>
+      </li>
+      <li @click="goto('/referMenu', '金卡权益')">
+        <img src="@/assets/images/home/centerUl/card.png" alt="" />
+        <p>金卡权益</p>
+      </li>
+      <li @click="goto('/referMenu', '品牌简介')">
+        <img src="@/assets/images/home/centerUl/infro.png" alt="" />
+        <p>品牌简介</p>
+      </li>
     </div>
     <div class="detail">
-      <img src="@/assets/images/home/paddy-title.png" alt="" />
-      <img src="@/assets/images/home/paddy-detail.png" alt="" />
+      <p>产品展示</p>
+
+      <li>
+        <img src="@/assets/images/home/detail/bag.png" alt="" />
+      </li>
+      <li>
+        <img src="@/assets/images/home/detail/box.png" alt="" />
+      </li>
+      <!-- <img src="@/assets/images/home/paddy-title.png" alt="" /> -->
+      <!-- <img src="@/assets/images/home/paddy-detail.png" alt="" /> -->
     </div>
     <div class="middle">
-      <img src="@/assets/images/home/paddy-middle.png" alt="" />
+      <p>产品优势</p>
+      <!-- 每个元素的两侧间隔相等 -->
+      <van-row type="flex" justify="center">
+        <van-col
+          span="12"
+          style="padding: 2px 0px 0px 0"
+          @click="goto('/referMenu', '实时监控')"
+        >
+          <div class="card">
+            <img
+              src="@/assets/images/home/middle/cardOne.png"
+              alt=""
+              style="width: 40vw"
+            />
+            <p class="first">实时监控</p>
+            <p class="second">全程溯源信赖保证</p>
+            <div class="lastP">
+              <span>查看更多</span>
+            </div>
+          </div>
+          <div class="camera">
+            <img src="@/assets/images/home/middle/camera.png" alt="" />
+          </div>
+        </van-col>
+        <van-col span="12" style="padding: 0px 0 0px 0px">
+          <van-col span="24" style="padding: 0 0 5px 0">
+            <div class="cardTwo" @click="goto('/referMenu', '恒温保鲜')">
+              <img
+                src="@/assets/images/home/middle/cardTwo.png"
+                alt=""
+                style="width: 41vw"
+              />
+              <p class="first">恒温保鲜</p>
+              <p class="second">带壳归仓恒温仓储</p>
+              <div class="keepAlive">
+                <img src="@/assets/images/home/middle/keepAlive.png" alt="" />
+              </div>
+            </div>
+
+            <!-- <img src="@/assets/images/home/middle/keepAlive.png" alt="" /> -->
+          </van-col>
+          <van-col span="24" style="padding: 0 0 0px 0">
+            <div class="cardThree" @click="goto('/referMenu', '现磨鲜米')">
+              <img
+                src="@/assets/images/home/middle/cardTwo.png"
+                alt=""
+                style="width: 41vw"
+              />
+              <p class="first">现磨鲜米</p>
+              <p class="second">现磨现发随享鲜香</p>
+              <div class="freshRice">
+                <img src="@/assets/images/home/middle/freshRice.png" alt="" />
+              </div>
+            </div>
+          </van-col>
+        </van-col>
+        <van-col span="12" style="padding: 5px 0px 0px 0">
+          <div class="cardFour" @click="goto('/referMenu', '自然耕种')">
+            <img
+              src="@/assets/images/home/middle/cardTwo.png"
+              alt=""
+              style="width: 40vw"
+            />
+            <p class="first">自然耕种</p>
+            <p class="second">农耕记忆山水乡愁</p>
+            <div class="normalGrow">
+              <img src="@/assets/images/home/middle/normalGrow.png" alt="" />
+            </div>
+          </div>
+        </van-col>
+        <van-col span="12" style="padding: 5px 0 0px 0px">
+          <div class="cardFive" @click="goto('/referMenu', '生态有机')">
+            <img
+              src="@/assets/images/home/middle/cardTwo.png"
+              alt=""
+              style="width: 41vw"
+            />
+            <p class="first">生态有机</p>
+            <p class="second">黄金纬度黑金厚土</p>
+            <div class="organic">
+              <img src="@/assets/images/home/middle/organic.png" alt="" />
+            </div>
+          </div>
+
+          <!-- <img src="@/assets/images/home/middle/keepAlive.png" alt="" /> -->
+        </van-col>
+      </van-row>
+
+      <!-- <van-row type="flex" justify="center" style="margin: 5px 0 0 0">
+        <van-col span="12">
+          <div class="cardFour" @click="goto('/referMenu', '自然耕种')">
+            <img
+              src="@/assets/images/home/middle/cardTwo.png"
+              alt=""
+              style="width: 40vw"
+            />
+            <p class="first">自然耕种</p>
+            <p class="second">农耕记忆 山水乡愁</p>
+          </div>
+          <div class="normalGrow">
+          </div>
+        </van-col>
+        <van-col span="12" style="padding: 0 0 0 5px">
+          <div class="cardFive" @click="goto('/referMenu', '生态有机')">
+            <img src="@/assets/images/home/middle/cardTwo.png" alt="" />
+            <p class="first">生态有机</p>
+            <p class="second">黄金纬度 黑金厚土</p>
+          </div>
+          <div class="organic">
+          </div>
+        </van-col>
+      </van-row> -->
     </div>
     <div class="bottom">
-      <img src="@/assets/images/home/paddy-bottom.png" alt="" />
+      <img src="@/assets/img/footer.png" alt="" />
     </div>
+    <!-- <div class="bottom">
+      <img src="@/assets/img/footer.png" alt="" />
+    </div> -->
   </div>
 </template>
 <script>
+export default {
+  data() {
+    return {
+      current: 0,
+    };
+  },
+  methods: {
+    onChange(index) {
+      this.current = index;
+    },
+    goto(url, name) {
+      window.vm.$router.push({
+        path: url,
+        query: {
+          type: name,
+        },
+      });
+    },
+  },
+};
 </script>
 <style lang="scss" scoped>
 .paddy {
   overflow: scroll;
-  .top {
+  position: relative;
+  .bgImg {
     width: 100%;
-    margin: 0 auto;
+    position: absolute;
+    left: 0;
+    top: 0;
+    // height: 948px;
     img {
       width: 100%;
     }
   }
-  .detail {
-    width: 90%;
-    margin: 0 auto;
+  .top {
+    width: 100vw;
+    height: 26.5vh;
+    margin: 34.5px auto 0 auto;
     img {
       width: 100%;
-      padding-bottom: 20px;
     }
   }
-  .middle {
-    width: 90%;
+  .bottom {
+    width: 90vw;
+    height: 108px;
+    overflow: hidden;
     margin: 0 auto;
-    padding-bottom: 20px;
+    z-index: 99999;
+    position: relative;
+    left: 0;
+    // display: flex;
+    // position: relative;
+    bottom: 0;
     img {
-      width: 100%;
+      width: 90vw;
     }
   }
-  .bottom {
-    width: 100%;
-    overflow: hidden;
-    margin: 0 auto;
+  .oUl {
+    position: absolute;
+    // top: 23vh;
+    // left: 48vw;\
+    padding: 0 0 0 0;
+    margin: -2vh 0 0 48vw;
+  }
+  .custom-indicator {
+    right: 155px;
+    bottom: 7.5px;
+    float: left;
+    margin: 1px 3px;
+    width: 6px;
+    height: 6px;
+    background: #7c6d5b;
+    border-radius: 50%;
+  }
+  .indicator-active {
+    background: #daad71;
+    border-radius: 2px;
+    width: 16px;
+    height: 4px;
+    margin-top: 2px;
+  }
+  .centerBtn {
+    z-index: 99;
+    width: 300px;
+    height: 65px;
+    position: relative;
+    // top: 209px;
+    margin: 2vh auto 0 auto;
+    li {
+      width: 60px;
+      height: 100%;
+      margin: 0 20px;
+      float: left;
+      list-style: none;
+      text-align: center;
+      img {
+        width: 45px;
+        height: 45px;
+      }
+      p {
+        margin: 0 auto;
+        width: 48px;
+        height: 12px;
+
+        font-size: 12px;
+        font-family: Source Han Sans CN;
+        font-weight: 200;
+        color: #dab082;
+        line-height: 13px;
+
+        background: linear-gradient(
+          -4deg,
+          #b8925c 0%,
+          #936e40 28.80859375%,
+          #f6c684 65.8203125%,
+          #936e40 100%
+        );
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+      }
+    }
+  }
+  .detail {
+    width: 90vw;
+    height: 150px;
+    margin: 3vh auto 0;
+    position: relative;
+    // display: flex;
+    // justify-content: center;
+    p {
+      width: 125px;
+      height: 15.5px;
+      font-size: 16px;
+      font-family: Source Han Sans CN;
+      font-weight: 500;
+      color: #daad70;
+      line-height: 15px;
+      margin: 0px 0 10px 5px;
+    }
+    li {
+      float: left;
+      list-style: none;
+      width: 42vw;
+      height: 105px;
+      margin: 0 0 0 9px;
+      img {
+        width: 100%;
+      }
+    }
+  }
+  .middle {
+    width: 90vw;
+    margin: 3vh auto 15px;
+    position: relative;
+    p {
+      margin: 0 0 10px 5px;
+      width: 126px;
+      height: 15.5px;
+      font-size: 16px;
+      font-family: Source Han Sans CN;
+      font-weight: 500;
+      color: #daad70;
+      line-height: 15px;
+    }
     img {
       width: 100%;
     }
+    .card {
+      width: 45vw;
+      // position: absolute;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      .first {
+        position: absolute;
+        width: 78.5px;
+        height: 14px;
+        font-size: 15px;
+        font-family: Source Han Sans CN;
+        font-weight: 500;
+        color: #613c0c;
+        line-height: 3px;
+        left: 3vw;
+        top: 10vh;
+      }
+      .second {
+        // margin: -21vh 0 0 5vw;
+        position: absolute;
+        top: 9vh;
+        left: 4vw;
+        // margin: 1vh 0 0 6vw;
+        width: 59px;
+        height: 24px;
+        font-size: 11px;
+        font-family: Source Han Sans CN;
+        font-weight: 300;
+        color: #613c0c;
+        line-height: 12px;
+      }
+      .lastP {
+        width: 52px;
+        height: 17px;
+        background: #0f0b06;
+        border-radius: 13px;
+        position: absolute;
+        top: 15vh;
+        left: 4vw;
+        span {
+          width: 28px;
+          height: 6.5px;
+          font-size: 7px;
+          font-family: Source Han Sans CN;
+          font-weight: 300;
+          color: #c5a06b;
+          line-height: 16px;
+          background: linear-gradient(0deg, #a57d50 0%, #e3d097 100%);
+          -webkit-background-clip: text;
+          -webkit-text-fill-color: transparent;
+        }
+      }
+    }
+    .camera {
+      width: 20vw;
+      position: absolute;
+      left: 22vw;
+      top: 6vh;
+      // margin: 4vh 0 0 12vh;
+    }
+    .cardTwo {
+      width: 40vw;
+      display: flex;
+      justify-content: center;
+      // align-items: center;
+      .first {
+        position: absolute;
+        left: 47vw;
+        top: 16vh;
+        margin: -9vh 0 0 5vw;
+        width: 60px;
+        height: 14.5px;
+        font-size: 15px;
+        font-family: Source Han Sans CN;
+        font-weight: 500;
+        color: #613c0c;
+        line-height: 3px;
+      }
+      .second {
+        position: absolute;
+        left: 47vw;
+        top: 9vh;
+        margin: 0 0 0 5vw;
+        width: 59px;
+        height: 24px;
+        font-size: 11px;
+        font-family: Source Han Sans CN;
+        font-weight: 300;
+        color: #613c0c;
+        line-height: 15px;
+      }
+      img {
+        width: 100%;
+      }
+      .keepAlive {
+        width: 14vw;
+        position: absolute;
+        left: 70vw;
+        top: 5vh;
+      }
+    }
+
+    .cardThree {
+      width: 40vw;
+      display: flex;
+      justify-content: center;
+      .first {
+        position: absolute;
+        left: 50vw;
+        top: 14vh;
+        width: 60px;
+        height: 14.5px;
+        font-size: 15px;
+        font-family: Source Han Sans CN;
+        font-weight: 500;
+        color: #613c0c;
+        line-height: 3px;
+      }
+      .second {
+        position: absolute;
+        left: 50vw;
+        top: 16vh;
+
+        width: 59px;
+        height: 24px;
+        font-size: 11px;
+        font-family: Source Han Sans CN;
+        font-weight: 300;
+        color: #613c0c;
+        line-height: 15px;
+      }
+    }
+    .freshRice {
+      width: 14vw;
+      position: absolute;
+      top: 13vh;
+      left: 71vw;
+    }
+    .cardFour {
+      width: 45vw;
+      // position: absolute;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      .first {
+        position: absolute;
+        width: 78.5px;
+        height: 14px;
+        font-size: 15px;
+        font-family: Source Han Sans CN;
+        font-weight: 500;
+        color: #613c0c;
+        line-height: 3px;
+        left: 3vw;
+        top: 10vh;
+      }
+      .second {
+        // margin: -21vh 0 0 5vw;
+        position: absolute;
+        top: 9vh;
+        left: 4vw;
+        // margin: 1vh 0 0 6vw;
+        width: 59px;
+        height: 24px;
+        font-size: 11px;
+        font-family: Source Han Sans CN;
+        font-weight: 300;
+        color: #613c0c;
+        line-height: 12px;
+      }
+      .normalGrow {
+        width: 14vw;
+        position: absolute;
+        left: 26vw;
+        top: 31vh;
+        // margin: 4vh 0 0 12vh;
+      }
+    }
+    .cardFive {
+      width: 40vw;
+      display: flex;
+      justify-content: center;
+      // align-items: center;
+      .first {
+        position: absolute;
+
+        left: 45vw;
+        top: 40vh;
+
+        margin: -9vh 0 0 5vw;
+        width: 60px;
+        height: 14.5px;
+        font-size: 15px;
+        font-family: Source Han Sans CN;
+        font-weight: 500;
+        color: #613c0c;
+        line-height: 3px;
+      }
+      .second {
+        position: absolute;
+        left: 45vw;
+        top: 33vh;
+        margin: 0 0 0 5vw;
+        width: 59px;
+        height: 24px;
+        font-size: 11px;
+        font-family: Source Han Sans CN;
+        font-weight: 300;
+        color: #613c0c;
+        line-height: 15px;
+      }
+      img {
+        width: 100%;
+      }
+      .organic {
+        width: 14vw;
+        position: absolute;
+        left: 70vw;
+        top: 31vh;
+      }
+    }
+  }
+
+  @media screen and (min-width: 320px) {
+    .productPack .box p {
+      margin: 7.5px 0 7px 4px;
+    }
+    .productPack .box span {
+      margin: 12.5px 0 0px 8px;
+    }
+    .middle .card .first {
+      font-size: 14px;
+      left: 3vw;
+      top: 9vh;
+    }
+    .middle .camera {
+      left: 22vw;
+      top: 8vh;
+    }
+    .middle .card .second {
+      top: 12vh;
+      left: 3vw;
+      font-size: 12px;
+    }
+    .middle .card .lastP {
+      top: 18vh;
+      left: 4vw;
+      span {
+        font-size: 12px;
+      }
+    }
+    .middle .cardTwo .first {
+      left: 45vw;
+      top: 16vh;
+      font-size: 14px;
+    }
+    .middle .keepAlive {
+      width: 11.5vw;
+      left: 70vw;
+      top: 6vh;
+    }
+    .middle .cardTwo .second {
+      left: 45vw;
+      top: 9vh;
+    }
+    .middle .cardFour .first {
+      left: 4vw;
+      top: 32vh;
+    }
+    .middle .cardFour .second {
+      top: 34vh;
+      left: 4vw;
+    }
+
+    //
+    .middle .freshRice {
+      top: 18vh;
+      left: 70vw;
+    }
+    .middle .cardThree .first {
+      left: 48vw;
+      top: 19vh;
+    }
+    .middle .cardThree .second {
+      left: 48vw;
+      top: 21vh;
+    }
+    .middle .cardFive .first {
+      top: 41vh;
+    }
+    .middle .cardFive .second {
+      top: 34vh;
+    }
+  }
+  @media screen and (min-width: 375px) {
+    .middle .card .first {
+      // margin-top: 27px;
+      font-size: 16px;
+      left: 4vw;
+      top: 9vh;
+    }
+    .middle .card .second {
+      top: 12vh;
+      left: 4vw;
+    }
+    .middle .card .lastP {
+      top: 17vh;
+      left: 5vw;
+      span {
+        font-size: 12px;
+      }
+    }
+    .middle .cardTwo {
+      .first {
+        left: 47vw;
+        top: 16vh;
+      }
+      .second {
+        left: 47vw;
+        top: 9vh;
+      }
+      .keepAlive {
+        width: 12vw;
+        left: 70vw;
+        top: 5vh;
+      }
+    }
+    //
+    .middle .freshRice {
+      top: 17vh;
+      left: 70vw;
+    }
+    .middle .cardThree {
+      .first {
+        left: 50vw;
+        top: 19vh;
+      }
+      .second {
+        left: 50vw;
+        top: 21vh;
+      }
+    }
+    .middle .cardFour {
+      .first {
+        left: 4vw;
+        top: 31vh;
+      }
+      .second {
+        top: 33vh;
+        left: 4vw;
+      }
+      .normalGrow {
+        left: 26vw;
+        top: 30vh;
+      }
+    }
+    .middle .cardFive {
+      .first {
+        top: 40vh;
+      }
+      .second {
+        top: 33vh;
+      }
+    }
+  }
+  @media screen and (min-width: 414px) {
+    .middle .card .first {
+      // margin-top: 27px;
+      font-size: 18px;
+      left: 4vw;
+      top: 9vh;
+    }
+    .middle .cardTwo .first {
+      left: 47vw;
+      top: 15vh;
+    }
+    .middle .keepAlive {
+      width: 11.5vw;
+      left: 70vw;
+      top: 5vh;
+    }
+    .middle .cardTwo .second {
+      left: 47vw;
+      top: 8vh;
+    }
+    //
+    .middle .freshRice {
+      top: 16vh;
+      left: 70vw;
+    }
+    .middle .cardThree .first {
+      left: 50vw;
+      top: 18vh;
+    }
+    .middle .cardThree .second {
+      left: 50vw;
+      top: 20vh;
+    }
+  }
+  @media screen and (min-height: 812px) {
+    .middle .card .first {
+      // margin-top: 27px;
+      font-size: 16px;
+      left: 4vw;
+      top: 7vh;
+    }
+    .middle .card .second {
+      top: 9vh;
+      left: 4vw;
+    }
+    .middle .camera {
+      left: 22vw;
+      top: 6vh;
+    }
+    .middle .card .lastP {
+      top: 13vh;
+      left: 5vw;
+      span {
+        font-size: 12px;
+      }
+    }
+    .middle .cardTwo .first {
+      left: 47vw;
+      top: 14vh;
+    }
+    .middle .cardTwo .keepAlive {
+      width: 11.5vw;
+      left: 70vw;
+      top: 4vh;
+    }
+    .middle .cardTwo .second {
+      left: 47vw;
+      top: 7vh;
+    }
+    //
+    .middle .freshRice {
+      top: 14vh;
+      left: 70vw;
+    }
+    .middle .cardThree .first {
+      left: 50vw;
+      top: 15vh;
+    }
+    .middle .cardThree .second {
+      left: 50vw;
+      top: 17vh;
+    }
+    .middle .cardFour .first {
+      left: 4vw;
+      top: 26vh;
+    }
+    .middle .cardFour .second {
+      top: 28vh;
+      left: 4vw;
+    }
+    .middle .cardFour .normalGrow {
+      left: 26vw;
+      top: 25vh;
+    }
+    .middle .cardFive .first {
+      top: 35vh;
+    }
+    .middle .cardFive .second {
+      top: 28vh;
+    }
+    .middle .cardFive .organic {
+      top: 25vh;
+    }
   }
 }
 </style>

src/views/product/index.vue

@@ -1,8 +1,89 @@
 <template>
   <div class="product" style="padding-top: 46px">
-    <van-nav-bar title="产品" class="van-nav-bar-my-fixed" fixed />
+    <!-- <van-nav-bar title="产品" class="van-nav-bar-my-fixed" fixed /> -->
+    <div class="bgImg">
+      <img src="@/assets/images/product/bgImg.png" alt="" />
+      <div class="title">
+        <p>藏金·1745产品</p>
+      </div>
+      <div class="tags">
+        <img src="@/assets/images/product/tags.png" alt="" />
+      </div>
+    </div>
     <div v-loading="loading" class="clear">
-      <div class="product-kucun clear">
+      <div class="product-baozhuang">
+        <div class="productPack">
+          <li @click="handleClick(0)" style="float: left">
+            <!-- <img :src="currIndex == '0' ? selectActive : select" alt="" /> -->
+            <img
+              src="@/assets/images/product/select.png"
+              alt=""
+              v-if="currIndex != '0'"
+            />
+            <img
+              src="@/assets/images/product/select-active.png"
+              alt=""
+              v-if="currIndex == '0'"
+            />
+            <div class="box">
+              <img src="@/assets/images/product/box.png" alt="" />
+              <p>藏金·1745-实惠装</p>
+              <span>可用库存:{{ canStockBag }}</span>
+            </div>
+          </li>
+          <li @click="handleClick(1)" style="float: right">
+            <img
+              src="@/assets/images/product/select.png"
+              alt=""
+              v-if="currIndex != '1'"
+            />
+            <img
+              src="@/assets/images/product/select-active.png"
+              alt=""
+              v-if="currIndex == '1'"
+            />
+            <div class="bag">
+              <img
+                src="@/assets/images/product/bag.png"
+                alt=""
+                style="padding: 0 7px"
+              />
+              <p>藏金·1745-礼盒装</p>
+              <span>可用库存:{{ canStockBox }}</span>
+            </div>
+          </li>
+          <div v-if="ad && ad.id" @click="getaddress" class="item-ad clear">
+            <p class="item-ad__name">
+              <span>{{ ad.name }}</span
+              ><span class="fr tel">{{ ad.mobile }}</span>
+            </p>
+
+            <p class="item-ad__address">
+              <span>{{ ad.address }}</span>
+            </p>
+          </div>
+          <div class="kongParents" v-else>
+            <div @click="getaddress" class="kong clear">
+              <img src="@/assets/images/product/add.png" alt="" />
+              <span>添加地址</span>
+            </div>
+          </div>
+        </div>
+        <div class="product-footer clear">
+          <div class="fl">
+            <input-number :numb="num" :max="stock" @backNum="backNum" />
+          </div>
+          <van-button
+            type="info"
+            class="fr"
+            style="width: 30%"
+            @click="placeOrder"
+            >确认下单</van-button
+          >
+        </div>
+      </div>
+
+      <!-- <div class="product-kucun clear">
         <ul>
           <li
             v-for="(pitem, index) in productList"
@@ -24,30 +105,7 @@
             </div>
           </li>
         </ul>
-      </div>
-      <div v-if="ad && ad.id" @click="getaddress" class="item-ad clear">
-        <p class="item-ad__name">
-          <span>{{ ad.name }}</span
-          ><span class="fr">{{ ad.tel }}</span>
-        </p>
-
-        <p class="item-ad__address">
-          <span>{{ ad.address }}</span>
-        </p>
-      </div>
-      <div v-else @click="getaddress" class="kong clear">添加地址</div>
-      <div class="product-footer clear">
-        <div class="fl">
-          <input-number :numb="num" :max="stock" @backNum="backNum" />
-        </div>
-        <van-button
-          type="info"
-          class="fr"
-          style="width: 30%"
-          @click="placeOrder"
-          >确认下单</van-button
-        >
-      </div>
+      </div> -->
     </div>
   </div>
 </template>
@@ -61,6 +119,9 @@ export default {
   mixins: [resToken],
   data() {
     return {
+      select: "@/assets/images/product/select.png",
+      selectActive: "@/assets/images/product/select-active.png",
+      currIndex: null,
       num: 0,
       total: 0,
       radioV: "",
@@ -69,6 +130,8 @@ export default {
       productList: [],
       stock: 0,
       ad: null,
+      canStockBox: "",
+      canStockBag: "",
     };
   },
   mounted() {
@@ -111,6 +174,9 @@ export default {
           if (!(limit && limit.length > 0)) {
             limit = [];
           }
+          this.canStockBag = res.data.limit[0].weight;
+          this.canStockBox = res.data.limit[1].weight;
+
           this.distributeGoods(limit);
           // await this.getUnitist(limit);
           this.total = parseInt(stock + "");
@@ -142,7 +208,7 @@ export default {
             id: v1.id,
             name: v1.id === "1" ? "藏金1745普通装" : "藏金1745礼盒",
             img: require(`@/assets/images/product/unit${v1.id}.png`),
-            stock: parseInt(v1.limit_num+""),
+            stock: parseInt(v1.limit_num + ""),
             weight: v1.weight,
             unit: v1.name,
           };
@@ -163,7 +229,6 @@ export default {
       } else {
         this.$store.dispatch("user/set_ad", {}).then((res) => {});
       }
-      console.log(11);
     },
     backNum(e) {
       this.num = e;
@@ -236,14 +301,140 @@ export default {
         });
       });
     },
+    handleClick(e) {
+      this.currIndex = e;
+    },
   },
 };
 </script>
 
 <style lang="scss" scoped>
 .product {
-  padding-left: 16px !important;
-  padding-right: 16px !important;
+  // padding-left: 16px !important;
+  // padding-right: 16px !important;
+  position: relative;
+  top: 0;
+  left: 0;
+  .bgImg {
+    width: 100%;
+    height: 296.5px;
+    overflow: hidden;
+    margin: -46px 0 0 0;
+    img {
+      width: 100%;
+    }
+    .title {
+      position: absolute;
+      top: 164px;
+      left: 20px;
+      width: 110px;
+      height: 15.5px;
+      font-size: 16px;
+      font-family: Source Han Sans CN;
+      font-weight: 500;
+      color: #daac70;
+      line-height: 13px;
+    }
+    .tags {
+      width: 47px;
+      height: 94px;
+      position: absolute;
+      right: 7vw;
+      top: 07vh;
+      img {
+        width: 100%;
+      }
+    }
+  }
+  .product-baozhuang {
+    width: 100vw;
+    margin: -10vh 0 0 0;
+  }
+  .productPack {
+    width: calc(100vw - 30px);
+    height: calc(100vh - 335.5px);
+    z-index: 99999;
+    margin: 0 auto;
+    position: relative;
+
+    top: -1vh;
+    li {
+      float: left;
+      list-style: none;
+      width: 43vw;
+      img {
+        // width: 100%;
+        width: 43vw;
+      }
+      .box,
+      .bag {
+        width: 43vw;
+        height: 110px;
+      }
+    }
+    li:first-child {
+      margin: 0 5px 0 5px;
+    }
+
+    .box {
+      position: absolute;
+      left: 11px;
+      top: 0;
+      padding-top: 5px;
+      img {
+        width: 39vw;
+      }
+      p {
+        margin: 12.5px 0 7px 10px;
+        width: 122.5px;
+        height: 13.5px;
+        font-size: 14px;
+        font-family: Source Han Sans CN;
+        font-weight: 400;
+        color: #111111;
+        line-height: 13px;
+      }
+      span {
+        margin: 12.5px 0 0px 10px;
+        width: 47px;
+        height: 10.5px;
+        font-size: 11px;
+        font-family: Source Han Sans CN;
+        font-weight: 400;
+        color: #666666;
+        line-height: 3px;
+      }
+    }
+    .bag {
+      position: absolute;
+      top: 0;
+      right: 0;
+      padding-top: 5px;
+      img {
+        width: 39vw;
+      }
+      p {
+        margin: 12.5px 0 7px 10px;
+        width: 122.5px;
+        height: 13.5px;
+        font-size: 14px;
+        font-family: Source Han Sans CN;
+        font-weight: 400;
+        color: #111111;
+        line-height: 13px;
+      }
+      span {
+        margin: 12.5px 0 0px 10px;
+        width: 47px;
+        height: 10.5px;
+        font-size: 11px;
+        font-family: Source Han Sans CN;
+        font-weight: 400;
+        color: #666666;
+        line-height: 3px;
+      }
+    }
+  }
   .product-kucun {
     width: 100%;
     padding: 0 0 30px 0;
@@ -285,7 +476,8 @@ export default {
             .radio-box {
               border: 1px solid #f4d022;
               .radio-check {
-                background: #f4d022;
+                // background: #f4d022;
+                background: linear-gradient(0deg, #f2c482, #a07947);
               }
             }
           }
@@ -331,38 +523,77 @@ export default {
     }
   }
   .item-ad {
-    position: relative;
-    color: #323233;
+    top: 205px;
+    position: absolute;
+    background-color: #e6e6dc;
+    // color: #daad70;
+    color: #999999;
     font-size: 13px;
     line-height: 18px;
     padding: 10px 16px;
     border-radius: 12px;
     box-sizing: border-box;
     width: 100%;
-    border: 1px solid #e0e0e0;
+    height: 80px;
+    opacity: 1;
+    border-radius: 8px;
     .item-ad__name {
+      width: 150px;
+      height: 14px;
       font-size: 15px;
+      font-family: Source Han Sans CN;
+      font-weight: 400;
+      color: #111111;
+      line-height: 13px;
+      margin: 10px 0;
     }
+
     .item-ad__address {
       text-align: justify;
     }
   }
+  .kongParents {
+    width: calc(100vw - 30px);
+    position: absolute;
+    top: 199.5px;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: center;
+  }
   .kong {
-    position: relative;
-
-    height: 40px;
+    top: 199.5px;
+    left: 76px;
+    height: 34px;
     line-height: 40px;
-    width: 100%;
-    background: #f2f2f2;
-    border-radius: 42px;
     color: #333;
     text-align: center;
+    width: 180px;
+    border-radius: 17px;
+
+    background: linear-gradient(0deg, #f2c482, #a07947);
+    img {
+      width: 13px;
+      height: 13px;
+      vertical-align: -2px;
+    }
+    span {
+      padding: 0 0 0 4px;
+      width: 47.5px;
+      height: 11px;
+      font-size: 12px;
+      font-family: Source Han Sans CN;
+      font-weight: 400;
+      color: #111111;
+      line-height: 3px;
+    }
   }
   .product-footer {
     position: absolute;
-    background: #f7f7f7;
-    bottom: 50px;
+    width: 375px;
+    height: 44px;
+    background: #e6e6dc;
     left: 0;
+    bottom: 50px;
     z-index: 3;
     width: 100%;
     height: 44px;
@@ -370,13 +601,51 @@ export default {
       padding: 5px 0 0 16px;
     }
     button {
-      background: #f4d022;
+      background: linear-gradient(0deg, #9e7746, #f4c583);
       color: #333;
-      border: 1px solid #f4d022;
+      border: 1px solid #9e7746;
       border-radius: 10px;
       overflow: hidden;
       margin: 0 16px 0 0;
     }
   }
+
+  @media screen and (max-width: 320px) {
+    .item-ad {
+      width: 90vw;
+      top: 160px;
+      font-size: 12px;
+      height: 70px;
+      p {
+        margin: 0;
+      }
+    }
+    .kongParents {
+      top: 174px;
+    }
+    .product-baozhuang {
+      margin: -15vh 0 0 0;
+    }
+    .productPack {
+      .box {
+        p {
+          margin: 8.5px 0 7px 6px;
+        }
+        span {
+          margin: 12.5px 0 0px 6px;
+        }
+      }
+      .bag {
+        p {
+          margin: 8.5px 0 7px 10px;
+        }
+      }
+    }
+  }
+  @media screen and (max-width: 375px) {
+    .product-baozhuang {
+      margin: -80px 0 0 0;
+    }
+  }
 }
 </style>

src/views/referMenu/index.vue

@@ -0,0 +1,105 @@
+<template>
+  <div class="address" style="padding-top: 46px; background: #e6e6dc">
+    <van-nav-bar
+      :title="title"
+      class="van-nav-bar-my-fixed"
+      left-arrow
+      @click-left="onClickLeft"
+      @click-right="onClickRight"
+      fixed
+    />
+      <!-- :right-text="isRes === '1' || total === 0 ? '' : '删除'" -->
+
+
+    <div class="addr-null">
+      <img src="@/assets/images/referMenu/referMenu.png" alt="" />
+      <div class="addr-null-title">
+        <p>敬请期待</p>
+      </div>
+      <p style="margin: 0" class="p1">程序大大正努力开发中~</p>
+    </div>
+  </div>
+</template>
+
+<script>
+import resToken from "@/mixins/resToken";
+export default {
+  mixins: [resToken],
+  data() {
+    return {
+      title: null,
+      loading: false,
+    };
+  },
+  async created() {
+    if (this.$route && this.$route.query && this.$route.query.id) {
+      this.isRes = "1";
+    } else {
+      this.isRes = "0";
+    }
+  },
+  mounted() {
+    this.title = this.$route.query.type;
+  },
+  methods: {
+    onClickLeft() {
+      window.history.back(-1);
+    },
+    onClickRight() {
+      if (!this.loading) {
+        if (this.delId === "") {
+          this.show_title("请选择地址！");
+          return;
+        }
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+
+//空地址时候的样式
+.addr-null {
+  width: 230px;
+  height: 227.5px;
+  box-sizing: border-box;
+  position: fixed;
+  left: 50%;
+  top: 150px;
+  transform: translateX(-50%);
+  text-align: center;
+  font-size: 12px;
+  font-weight: 400;
+  color: #959595;
+  // line-height: 7px;
+  img {
+    width: 230px;
+    height: 227.5px;
+  }
+  .addr-null-title {
+    display: flex;
+    justify-content: center;
+    p {
+      margin: 0 0 10px 0;
+      width: 68.5px;
+      height: 16px;
+      font-size: 17px;
+      font-family: Source Han Sans CN;
+      font-weight: 500;
+      color: #1a1a1a;
+      line-height: 20px;
+    }
+    .p1 {
+      width: 262px;
+      height: 23px;
+      font-size: 25px;
+      font-family: Source Han Sans CN;
+      font-weight: 400;
+      color: #999999;
+      line-height: 44px;
+    }
+  }
+}
+</style>
+