暂存

src/App.vue

@@ -74,72 +74,88 @@ html {
       }
     }
     .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;
+      padding:20px 20px 20px;
+      .van-dialog__footer{
+        display: block;
+        .van-dialog__cancel{
+          float: left;
+          width: calc(50% - 5px);
+          // border:1px 
           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;
+        .van-dialog__confirm{
+          float: right;
+          width: calc(50% - 5px);
           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;
         }
       }
+      // 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

@@ -32,8 +32,6 @@
 
 .van-dialog__confirm,
 .van-dialog__confirm:active {
-  /* color: rgb(255, 131, 39); */
-  /* color: #F4D022; */
   color: #282826;
 }
 
@@ -41,16 +39,8 @@
   background: linear-gradient(0deg, #F2C482, #A07947) !important;
 }
 
-/* 
-.van-dialog__confirm,
-.van-dialog__cancel {
-  width: 110px;
-  height: 36px;
-} */
 
 .van-nav-bar .van-icon {
-  /* color: rgb(255, 131, 39); */
-  /* color: #1A1A1A; */
   color: #DFBF87;
 
 }
@@ -59,27 +49,16 @@
   padding: 0 !important;
 }
 
-/* .van-icon-edit */
-/* .van-address-item__value{
-      padding: 0!important;
-  } */
-/* .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; */
   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;
 }
 
@@ -89,9 +68,6 @@
 }
 
 .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;
 
@@ -145,4 +121,33 @@
 .liveD .video-js .vjs-big-play-button {
   top: calc(50% - 20px);
   left: calc(50% - 43px);
-}
+}
+.login .van-cell  .van-field__control {
+    font-size: 16px !important;
+    color: #000;
+  }
+
+
+  ::-webkit-input-placeholder {
+    font-size: 14px;
+
+    font-weight: lighter;
+  }
+  /* Mozilla Firefox 4 to 18 */
+  :-moz-placeholder {
+    font-size: 14px;
+
+    font-weight: lighter;
+  }
+  /* Mozilla Firefox 19+ */
+  ::-moz-placeholder {
+    font-size: 14px;
+
+    font-weight: lighter;
+  }
+  /* Internet Explorer 10+ */
+  :-ms-input-placeholder {
+    font-size: 14px;
+
+    font-weight: lighter;
+  }

src/components/inputNumber.vue

@@ -22,7 +22,6 @@ export default {
   mounted() {},
   watch: {
     numb: function (val) {
-      console.log(val);
       this.num = val ? parseInt(val) : 0;
     },
   },
@@ -57,18 +56,14 @@ export default {
       this.leix();
       if (this.num > 0) {
         this.num--;
-        console.log(this.num);
         this.$emit("backNum", this.num);
       }
     },
     jia() {
       this.leix();
-      this.num++;
-
       this.num = parseInt(this.num);
-      console.log(this.num);
       if (this.num < this.max) {
-        console.log(this.num);
+        this.num++;
         this.$emit("backNum", this.num);
       }
     },

src/router/index.js

@@ -82,11 +82,16 @@ const routes = [
     },
     {
         path: '/referMenu',
-        component: () => import('@/views/referMenu/index.vue'),
+        component: () => import('@/views/referMenu/index'),
+        hidden: true
+    },
+    {
+        path: '/introduce',
+        component: () => import('@/views/introduce/index'),
         hidden: true
     },
 
-
+    
 ];
 console.log(process.env.BASE_URL);
 const router = new Router({

src/views/address/component/addrList.vue

@@ -20,19 +20,20 @@
           <div class="is_model" :class="{'checked':iconname==cardData[i].id}"
                @click.stop="modelcheck(cardData[i].id)">
 
-            <van-icon name="checked" size="14" v-show="iconname==cardData[i].id"/>
+            <!-- <van-icon name="checked" size="14" v-show="iconname==cardData[i].id"/>
             <van-icon name="passed" size="14" v-show="iconname!=cardData[i].id"/>
-            <span>设为默认</span>
+            <span>设为默认</span> -->
           </div>
           <div class="del" @click.stop="del(cardData[i].id)">
+              <!-- v-show="!cardData[i].isShow" -->
+
             <img
-              src="@/assets/images/delete/del.png"
-              v-show="!cardData[i].isShow"
+              src="@/assets/images/delete/del-active.png"
             />
-            <img
+            <!-- <img
               src="@/assets/images/delete/del-active.png"
               v-show="cardData[i].isShow"
-            />
+            /> -->
             <span>删除</span>
           </div>
           <div class="edit" @click.stop="handleEdit(cardData[i])">

src/views/address/index.vue

@@ -45,7 +45,7 @@
 import { Dialog } from "vant";
 import asyncRequest from "@/apis/address/index";
 import resToken from "@/mixins/resToken";
-import AddrList from "./component/addrList.vue";
+import AddrList from "./component/addrList";
 export default {
   mixins: [resToken],
   components: { AddrList },

src/views/address/view.vue

@@ -136,7 +136,7 @@ export default {
   width: 100%;
   height: 100%;
   box-sizing: border-box;
-  background: #fff;
+  background: rgb(230, 230, 220)!important;
   .van-address-edit__buttons {
     button {
       float: right;

src/views/introduce/index.vue

@@ -0,0 +1,139 @@
+<template>
+  <div class="introduce">
+    <div v-if="showList&&showList.length>0">
+      <img v-for="(img,index) in showList" :key="img+index" :src="img" alt="">
+    </div>
+    <!-- <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,
+      showList: [],
+      list: [
+        {
+          index: 1,
+          total: 5,
+        },
+        {
+          index: 2,
+          total: 3,
+        },
+        {
+          index: 3,
+          total: 5,
+        },
+        {
+          index: 4,
+          total: 3,
+        },
+        {
+          index: 5,
+          total: 5,
+        },
+        {
+          index: 6,
+          total: 7,
+        },
+        {
+          index: 7,
+          total: 6,
+        },
+      ],
+      loading: false,
+    };
+  },
+  async created() {
+    this.showList = [];
+    let index = this.$route.query.index;
+    this.getImgList(index ? index : 0);
+  },
+
+  methods: {
+    onClickLeft() {
+      window.history.back(-1);
+    },
+    getImgList(index) {
+      let total = 0;
+      let findi = this.list.findIndex((v) => v.index === Number(index) );
+      console.log(index,findi);
+      if (findi !== -1) {
+        total = this.list[findi].total;
+      }
+      for(let i=0;i<total;i++){
+        this.showList.push(require(`@/assets/images/introduce/${index}/${i+1}.0@2x.png`))
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.introduce {
+ background: #e6e6dc;
+ position: relative;
+ width: 100%;
+ height: 100%;
+ overflow-y: scroll;
+ img{
+   display: inline-block;
+   width: 100%;
+
+ }
+}
+
+//空地址时候的样式
+// .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>
+

src/views/login/index.vue

@@ -1,44 +1,49 @@
 <template>
   <div class="login">
+    <div class="login-bg">
+      <img :src="BG" alt="" />
+      <div class="footer">
+        <img :src="footer" alt="" />
+      </div>
+    </div>
     <div class="login-main">
       <div class="logo-header">
-        <div class="login-img">
-          <div class="login-tip">
-            <p class="logo-header-title">Hello！</p>
-            <p class="logo-header-tips">欢迎登录藏金·1745平台</p>
-          </div>
-        </div>
+        <p class="logo-header-title">Hello！</p>
+        <p class="logo-header-tips">欢迎登录藏金·1745平台</p>
       </div>
       <div class="loginBox">
-        <van-form validate-first class="login-form">
-              <van-row >
-                <van-col span="3"  class="input-tips">
-                  <div class="cardNo">
-                  </div>
-                </van-col>
-                <van-col span="6">
-                  <div class="myCard">CJ1745</div>
-                </van-col>
-                <van-col span="15" class="card-input">
-                  <van-field
-                      size="large"
-                      v-model="form.mobile"
-                      name="mobile"
-                      placeholder="XXXXXX"
-                      type="text"
-                      maxlength="6"
-                      :rules="[{ validator: asyncmobileValidator }]"
-                  >
-                  </van-field>
-                </van-col>
-              </van-row>
-            <van-row style="margin-top: 55px;">
-              <van-col span="3" class="input-tips" >
-                <div class="cardPwd">
-                </div>
-              </van-col>
-              <van-col :span="21">
-                  <van-field
+        <div class="loginBox-div">
+          <div class="loginBox-bg">
+            <img :src="loginBox" alt="" />
+          </div>
+          <van-form validate-first class="login-form">
+            <ul class="ul">
+              <li class="li-div">
+                <ul class="clear">
+                  <li><img :src="user" alt="" /></li>
+                  <li>
+                    <div class="zdyDiv">
+                      <span class="zdyName">CJ1745</span>
+                      <van-field
+                        size="large"
+                        v-model="form.mobile"
+                        name="mobile"
+                        placeholder="xxxxxx"
+                        type="text"
+                        maxlength="6"
+                        :rules="[{ validator: asyncmobileValidator }]"
+                      >
+                      </van-field>
+                    </div>
+                  </li>
+                </ul>
+              </li>
+              <li class="li-div">
+                <ul class="clear">
+                  <li><img :src="pwod" alt="" /></li>
+
+                  <li>
+                    <van-field
                       size="large"
                       v-model="form.code"
                       name="code"
@@ -47,31 +52,28 @@
                       :rules="[{ validator: asyncpwodValidator }]"
                       :type="!passwordStatus ? 'password' : 'text'"
                       @click-right-icon="showPassword"
-                  >
-                    <!--  :right-icon="!passwordStatus ? 'eye-o' : 'closed-eye'" -->
-                  </van-field>
-              </van-col>
-            </van-row>
-        </van-form>
-      </div>
-      <van-button
-        style="font-size: 16px; font-weight: 400"
-        class="login-form-button"
-        block
-        type="info"
-        :disabled="loadding"
-        :loadding="loadding"
-        loadding-text="加载中..."
-        native-type="submit"
-        @click="onSubmit()"
-      >
-        登&nbsp;录
-      </van-button>
-      <div class="footerP">
-        <div class="footer">
-          <img src="@/assets/img/footer.png" alt="" />
+                    ></van-field>
+                    <!-- :right-icon="!passwordStatus ? 'eye-o' : 'closed-eye'" -->
+                  </li>
+                </ul>
+              </li>
+            </ul>
+          </van-form>
         </div>
       </div>
+      <div class="login-form-button">
+        <van-button
+          block
+          type="info"
+          :disabled="loadding"
+          :loadding="loadding"
+          loadding-text="加载中..."
+          native-type="submit"
+          @click="onSubmit()"
+        >
+          登&nbsp;录
+        </van-button>
+      </div>
     </div>
   </div>
 </template>
@@ -84,14 +86,16 @@ export default {
   data() {
     return {
       passwordStatus: false, //默认隐藏密码
-      loginBG: require("@/assets/images/login/bg.png"),
-      user: require("@/assets/images/login/user.png"),
-      pwod: require("@/assets/images/login/pwod.png"),
-
+      BG: require("@/assets/img/login.png"),
+      user: require("@/assets/img/cardNo.png"),
+      pwod: require("@/assets/img/password.png"),
+      loginBox: require("@/assets/img/loginBox.png"),
+      footer: require("@/assets/img/footer.png"),
       loadding: false,
+
       form: {
-        mobile: "",
-        code: "",
+        mobile: "210003",
+        code: "ly5093",
       },
     };
   },
@@ -205,151 +209,154 @@ export default {
 
 <style lang="scss" scoped>
 .login {
-  //最外层的登陆盒子
-  width: 100%;
-  height: 100%;
+  box-sizing: border-box;
+  // .van-field__control{
+  //   font-size: 15px!important;
+  // }
+  .login-bg {
+    position: relative;
+    z-index: 1;
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    overflow: hidden;
+    background: #e6e6dc;
+    img {
+      display: inline-block;
+      box-sizing: border-box;
+      width: 100%;
+    }
+    .footer {
+      position: absolute;
+      box-sizing: border-box;
+
+      z-index: 2;
+      bottom: 0;
+      left: 0;
+      img {
+        display: inline-block;
+        width: 100%;
+        padding: 0 30px 30px 30px;
+      }
+    }
+  }
   .login-main {
-    width: 100%; //继承最外层login的宽高
+    position: absolute;
+    width: 100%;
     height: 100%;
-    background-color: #e6e6dc;
+    z-index: 9;
+    top: 0;
+    left: 0;
     .logo-header {
       //上半部分登陆盒子，用来展示一张图片
       width: 100%;
-      height: 35%;
-      .login-img {
-        width: 100%;
-        position: relative;
-        height: 100%;
-        background: url("../../assets/img/login.png") no-repeat center;
-        background-size: 100% 100%;
-      }
-      .login-tip{
-        position: absolute;
-        left:10%;
-        top:30%;
-      }
+      padding: 8vh 30px 30px 30px;
+
       .logo-header-title {
-        font-size: 25px;
-        font-family: DIN;
+        font-size: 30px;
+        // font-family: DIN;
         font-weight: bold;
         color: #daad70;
-        margin: 10px 0;
+        margin: 12px 0;
       }
       .logo-header-tips {
-        font-size: 14px;
-        font-family: Source Han Sans CN;
+        font-size: 15px;
         font-weight: 200;
         color: #daad70;
         margin: 10px 0;
       }
     }
     .loginBox {
-      width: 80%;
-      height: 180px;
-      margin: auto;
-      background: url("../../assets/img/loginBox.png") no-repeat center;
-      background-size: 100% 100%;
-      border-radius: 10px;
+      padding: 0 30px;
+      box-sizing: border-box;
       position: relative;
-      top:-6%;
-    }
-    .login-form.van-form {
-      width: 80%;
-      position: absolute;
-      top:calc(20% - 10px);
-      left: 5%;
-      .van-cell--large {
-        padding: 0;
-        input {
-        }
-        .van-field__label {
-          line-height: 42px;
-          text-align: center;
-          font-size: 15px;
+      .loginBox-bg {
+        position: relative;
+        width: 100%;
+        // height: 100px;
+        img {
+          width: 100%;
+          display: inline-block;
         }
       }
-    }
-    .input-tips{
-      position: relative;
-      top:5px;
-      div{
-        margin: auto;
+      .login-form {
+        position: absolute;
+        top: 0;
+        left: 30px;
+        width: calc(100% - 60px);
+        padding: 5.5vh 20px 0 14px;
+        box-sizing: border-box;
+        ul.ul {
+          width: 100%;
+          li.li-div {
+            width: 100%;
+            height: 55px;
+            padding: 0 0 0.5vh;
+            ul {
+              li {
+                float: left;
+                &:first-child {
+                  width: 40px;
+                  height: 48px;
+                  line-height: 50px;
+                  text-align: center;
+                  img {
+                    display: inline-block;
+                    height: 18px;
+                    margin: 14px 0 0 0;
+                  }
+                }
+                &:last-child {
+                  width: calc(100% - 40px);
+                }
+                .zdyDiv {
+                  float: left;
+                  width: 100%;
+                  .zdyName {
+                    width: 55px;
+                    line-height: 48px;
+                    float: left;
+                    color: #000;
+                    text-align: right;
+                    font-size: 16px;
+                  }
+                }
+                .van-cell {
+                  float: left;
+                  background: transparent;
+                  padding-left: 1px;
+                  .van-field__control {
+                    font-size: 15px !important;
+                  }
+                }
+              }
+            }
+            &:first-child {
+              ul {
+                li {
+                  &:last-child {
+                    .van-cell {
+                      width: calc(100% - 55px);
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
       }
     }
-    .van-button--small.van-button--plain {
-      border: 0;
-    }
-    .login-form-button.van-button,
-    .login-form-button.van-button--disabled {
-      border: 0;
-       margin: auto;
-      color: #333;
-      // background: #f4d022;
-      // width: 334px;
-      width: 90vw;
-      height: 45px;
-      background: linear-gradient(0deg, #a67e4b, #efc180);
+    .login-form-button {
+      padding: 10vh 30px 0 30px;
+      .van-button{
+     background: linear-gradient(0deg, #a67e4b, #efc180);
       border-radius: 8px;
-    }
-  }
-
-  .myCard {
-    font-family: Source Han Sans CN;
-    font-weight: 400;
-    color: #111111;
-    line-height: 25px;
-    text-align: center;
-  }
-  .cardNo {
-    width: 16px;
-    height: 16px;
-    background: url("../../assets/img/cardNo.png") no-repeat center;
-    background-size: 100% 100%;
-    line-height: 25px;
-  }
-  .cardPwd {
-    width: 16px;
-    height: 16px;
-    background: url("../../assets/img/password.png") no-repeat center;
-    background-size: 100% 100%;
-    line-height: 25px;
-  }
-  .footerP {
-    width: 100vw;
-    display: flex;
-    justify-content: center;
-    position: absolute;
-    left: 0;
-    bottom: 40px;
-  }
-  .footer {
-    width: 325.5px;
-    transform: scale(1.2);
-    img {
-      width: 100%;
-      // border-radius: 10px;
-    }
-  }
-  @media screen and (min-width: 320px) {
-    .footer {
-      width: 270.5px;
-      transform: scale(1);
-    }
-    .footerP {
-      bottom: 20px;
-    }
-  }
-
-  @media screen and (min-width: 414px) {
-    .footer {
-      transform: scale(1);
-    }
-  }
-  @media screen and (min-height: 810px) {
-    .cardNo,
-    .cardPwd {
-      top: 16px;
-      left: 19px;
+      overflow: hidden;
+      color: #111111;
+      border:0;
+      font-weight: bolder;;
+      }
+ 
     }
   }
 }

src/views/paddy/index.vue

@@ -11,11 +11,15 @@
           <img
             src="@/assets/images/home/swipper/swipper1.png"
             alt=""
-            style="width:100%;"
+            style="width: 100%"
           />
         </van-swipe-item>
         <van-swipe-item>
-          <img src="@/assets/images/home/swipper/swipper2.png" alt=""  style="width:100%;"/>
+          <img
+            src="@/assets/images/home/swipper/swipper2.png"
+            alt=""
+            style="width: 100%"
+          />
         </van-swipe-item>
         <template #indicator>
           <ul class="oUl">
@@ -38,147 +42,66 @@
       </van-swipe>
     </div>
     <div class="centerBtn">
-      <li @click="goto('/referMenu', '五常大米')">
+      <li @click="goto('/introduce', 1)">
         <img src="@/assets/images/home/centerUl/rice.png" alt="" />
         <p>五常大米</p>
       </li>
-      <li @click="goto('/referMenu', '金卡权益')">
+      <li @click="goto('/introduce', 2)">
         <img src="@/assets/images/home/centerUl/card.png" alt="" />
         <p>金卡权益</p>
       </li>
-      <li @click="goto('/referMenu', '品牌简介')">
+      <li @click="goto('/introduce', 3)">
         <img src="@/assets/images/home/centerUl/infro.png" alt="" />
         <p>品牌简介</p>
       </li>
     </div>
     <div class="detail">
       <p>产品展示</p>
-      <div class="baozhuangBox">
+      <ul class="baozhuangBox clear">
         <li @click="goto('/referMenu', '五常大米-实惠装')">
           <div class="riceBag">
-<!--            <p class="riceBag-title">实惠装</p>-->
             <img src="@/assets/images/home/detail/bag.png" alt="" />
+            <div class="fd">实惠装</div>
           </div>
         </li>
         <li @click="goto('/referMenu', '五常大米-礼盒装')">
           <div class="riceBag riceBox">
-<!--            <p class="riceBag-title">礼盒装</p>-->
             <img src="@/assets/images/home/detail/box.png" alt="" />
+            <div class="fd">礼盒装</div>
           </div>
-
         </li>
-      </div>
-
-      <!-- <img src="@/assets/images/home/paddy-title.png" alt="" /> -->
-      <!-- <img src="@/assets/images/home/paddy-detail.png" alt="" /> -->
+      </ul>
     </div>
     <div class="middle">
-      <p>产品优势</p>
-      <!-- 每个元素的两侧间隔相等 -->
-      <van-row type="flex" justify="space-between">
-        <van-col
-          span="12"
-          @click="goto('/live', '实时监控')"
-          style="padding-right: 5px"
-        >
-          <div class="card">
-            <div class="card-text">
-              <p class="first">实时监控</p>
-              <p class="second">全程溯源<br/>信赖保证</p>
-              <div class="lastP">
-                <p>查看更多</p>
-              </div>
-            </div>
-            <div class="camera">
-              <img src="@/assets/images/home/middle/camera.png" alt="" />
-            </div>
-          </div>
-        </van-col>
-        <van-col span="12"  style="padding-left: 5px">
-          <van-col span="24" >
-            <div class="cardTwo" @click="goto('/referMenu', '恒温保鲜')">
-              <div class="cardTwo-text">
-                <p class="first">恒温保鲜</p>
-                <p class="second">带壳归仓<br/>恒温仓储</p>
-              </div>
-              <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-top: 5px">
-            <div class="cardTwo cardThree" @click="goto('/referMenu', '现磨鲜米')">
-              <div class="cardTwo-text">
-                <p class="first">现磨鲜米</p>
-                <p class="second">现磨现发<br/>随享鲜香</p>
-              </div>
+      <p class="middle-title">产品优势</p>
 
-              <div class="freshRice keepAlive">
-                <img src="@/assets/images/home/middle/freshRice.png" alt="" />
+      <div class="middle-div clear">
+        <ul>
+          <li
+            v-for="(item, index) in list"
+            :key="item.title + index"
+            @click="goto(index === 0 ? '/live' : '/introduce', index + 3)"
+            :class="{ left: index === 0 || index === 3, he: index === 0 }"
+          >
+            <div class="first">
+              <div class="title">{{ item.title }}</div>
+              <div class="desc" v-for="test in item.desc" :key="test + index">
+                {{ test }}
+              </div>
+              <div class="lastP" v-if="index === 0">
+                <img :src="more" alt="" />
               </div>
             </div>
-          </van-col>
-        </van-col>
-      </van-row>
-      <van-row style="margin-top: 5px">
-        <van-col span="12" style="padding-right: 5px">
-          <div class="cardFour cardTwo" @click="goto('/referMenu', '自然耕种')">
-          <div class="cardTwo-text">
-            <p class="first">自然耕种</p>
-            <p class="second">农耕记忆<br/>山水乡愁</p>
-          </div>
-            <div class="normalGrow keepAlive">
-              <img src="@/assets/images/home/middle/normalGrow.png" alt="" />
+            <div class="second">
+              <img :src="item.img" alt="" />
             </div>
-          </div>
-        </van-col>
-        <van-col span="12" style="padding-left: 5px">
-          <div class="cardFive cardTwo" @click="goto('/referMenu', '生态有机')">
-           <div class="cardTwo-text">
-             <p class="first">生态有机</p>
-             <p class="second">黄金纬度<br/>黑金厚土</p>
-           </div>
-            <div class="organic keepAlive">
-              <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> -->
+          </li>
+        </ul>
+      </div>
     </div>
     <div class="bottom">
       <img src="@/assets/img/footer.png" alt="" />
     </div>
-    <!-- <div class="bottom">
-      <img src="@/assets/img/footer.png" alt="" />
-    </div> -->
   </div>
 </template>
 <script>
@@ -186,17 +109,45 @@ export default {
   data() {
     return {
       current: 0,
+      more: require("@/assets/images/home/more.png"),
+      list: [
+        {
+          title: "实时监控",
+          desc: ["全程溯源", "信赖保证"],
+          img: require("@/assets/images/home/middle/camera.png"),
+        },
+        {
+          title: "恒温保鲜",
+          desc: ["带壳归仓", "恒温仓储"],
+          img: require("@/assets/images/home/middle/keepAlive.png"),
+        },
+        {
+          title: "现磨鲜米",
+          desc: ["现磨现发", "随享鲜香"],
+          img: require("@/assets/images/home/middle/freshRice.png"),
+        },
+        {
+          title: "自然耕种",
+          desc: ["农耕记忆", "山水乡愁"],
+          img: require("@/assets/images/home/middle/normalGrow.png"),
+        },
+        {
+          title: "生态有机",
+          desc: ["黄金纬度", "黑金厚土"],
+          img: require("@/assets/images/home/middle/organic.png"),
+        },
+      ],
     };
   },
   methods: {
     onChange(index) {
       this.current = index;
     },
-    goto(url, name) {
+    goto(url, index) {
       window.vm.$router.push({
         path: url,
         query: {
-          type: name,
+          index: index,
         },
       });
     },
@@ -206,18 +157,21 @@ export default {
 <style lang="scss" scoped>
 .paddy {
   overflow: scroll;
-  background: url("../../assets/images/home/bgImg.png") no-repeat center!important;
-  background-size: 100% 100%!important;
+  background: url("../../assets/images/home/bgImg.png") no-repeat center !important;
+  background-size: 100% 100% !important;
+  padding: 0 16px !important;
+  width: 100% !important;
+  box-sizing: border-box !important;
   .top {
-    width: 90%;
-    margin:10px auto 0;
-    height: 150px;
-    img{
-      height: 150px;
-    };
+    width: 100%;
+    margin: 10px auto 0;
+    img {
+      display: inline-block;
+      width: 100%;
+    }
   }
   .bottom {
-    width: 90%;
+    width: 100%;
     margin: 20px auto 50px;
 
     img {
@@ -226,8 +180,6 @@ export default {
   }
   .oUl {
     position: absolute;
-    // top: 23vh;
-    // left: 48vw;\
     padding: 0 0 0 0;
     margin: -2vh 0 0 44vw;
   }
@@ -249,25 +201,23 @@ export default {
     margin-top: 2px;
   }
   .centerBtn {
-    width: 90%;
+    width: calc(100% + 32px);
     display: flex;
     justify-content: center;
-    margin: 30px auto;
+    margin: 25px auto 18px -16px;
     li {
       height: 100%;
       margin: 0 auto;
       list-style: none;
       text-align: center;
       img {
-        width: calc(100% - 60px);;
+        width: calc(100% - 60px);
       }
       p {
-        margin: 10px auto 0;
-        font-size: 1.2em;
-        font-family: Source Han Sans CN;
+        margin: 5px 0 15px 0;
         font-weight: 200;
         color: #dab082;
-        line-height: 3vh;
+        font-size: 17px;
         background: linear-gradient(
           -4deg,
           #b8925c 0%,
@@ -281,647 +231,306 @@ export default {
     }
   }
   .detail {
-    width: 90%;
-    margin:0 auto 40px;
-    .baozhuangBox {
-      display: flex;
-      justify-content: space-between;
-    }
+    width: 100%;
+    box-sizing: border-box;
+    padding: 0 0 0 0;
     p {
       font-size: 1.4em;
-      font-family: Source Han Sans CN;
       font-weight: 500;
       color: #daad70;
       line-height: 15px;
     }
-    li {
-      list-style: none;
-      width: 45%;
-      .riceBag {
-        display: inline-block;
-        //background: #613c0c;
-        text-align: center;
-        position: relative;
-        img {
+    .baozhuangBox {
+      width: 100%;
+      li {
+        width: calc(50% - 6px);
+        &:first-child {
+          float: left;
+        }
+        &:last-child {
+          float: right;
+        }
+        .riceBag {
+          position: relative;
           width: 100%;
+          img {
+            width: 100%;
+            position: relative;
+          }
+          .fd {
+            position: absolute;
+            top: 0;
+            left: 0;
+            z-index: 9;
+            border-bottom-right-radius: 10px;
+            font-weight: 150;
+            font-size: 12px;
+            height: 26px;
+            text-align: center;
+            line-height: 26px;
+            width: 55px;
+            color: #f1cda9;
+            background: #613c0c;
+          }
         }
       }
-      .riceBag:before {
-        content: "实惠装";
-        display: inline-block;
-        transform: scale(0.8);
-        width: 50px;
-        height: 20px;
-        line-height: 20px;
-        font-size: 0.5rem;
-        border-radius: 10px 0;
-        font-family: Source Han Sans CN;
-        font-weight: 150;
-        color: #f1cda9;
-        top:-2px;
-        left:-5px;
-        background: #613c0c;
-        position: absolute;
-      }
-      .riceBox:before {
-        content: "礼盒装";
-      }
-      //.riceBox {
-      //  width: 43px;
-      //  height: 14px;
-      //  background: #613c0c;
-      //  border-radius: 10px 0;
-      //  text-align: center;
-      //  position: absolute;
-      //
-      //  display: flex;
-      //  justify-content: center;
-      //  align-items: center;
-      //  .riceBox-title {
-      //    margin: 0;
-      //    // width: 26.5px;
-      //    transform: scale(0.8);
-      //    width: 36.5px;
-      //    height: 17.5px;
-      //    font-size: 0.75rem;
-      //    font-family: Source Han Sans CN;
-      //    font-weight: 150;
-      //    color: #f1cda9;
-      //  }
-      //}
     }
   }
   .middle {
-    width: 90%;
-    margin:auto;
-    p {
+    width: 100%;
+    margin: auto;
+    p.middle-title {
       font-size: 1.4em;
-      font-family: Source Han Sans CN;
       font-weight: 500;
       color: #daad70;
     }
-    img {
+    .middle-div {
       width: 100%;
-    }
-    .card {
-      width: 100%;
-      height: 185px;
-      background:linear-gradient(0deg, #A2794D, #BA9363, #CBA66F, #D7B27A, #E3C48A, #E3D097);
-      border-radius: 10px;
-      padding: 10px 0;
-      display: flex;
-      justify-content: center;
-      .card-text{
-        display: inline-block;
-        width:calc(100% - 16vw);
-        padding-top: 40px;
-        padding-left: 10px;
-      }
-      .first {
-        font-size: 1em;
-        font-family: Source Han Sans CN;
-        font-weight: 500;
-        color: #613c0c;
-        margin-left: calc(50% - 30px);
-      }
-      .second {
-        // margin: 1vh 0 0 6vw;
-        font-size: .8em;
-        font-family: Source Han Sans CN;
-        font-weight: 300;
-        color: #613c0c;
-        margin-left: calc(50% - 30px);
-      }
-      .lastP {
-        background: #0f0b06;
-        border-radius: 13px;
-        width: 50px;
-        text-align: center;
-        margin-left: calc(50% - 30px);
-        p {
-          margin:auto;
-          transform: scale(0.8);
-          line-height: 12px;
-          font-size: 0.5rem;
-          font-family: Source Han Sans CN;
-          font-weight: 300;
-          color: #c5a06b;
-          background: linear-gradient(0deg, #a57d50 0%, #e3d097 100%);
-          -webkit-background-clip: text;
-          -webkit-text-fill-color: transparent;
-        }
-      }
-    }
-    .camera {
-      width: 16vw;
-      display: inline-block;
-      text-align: center;
-      margin-right: 10px;
-      padding-top: 40px;
-      img{
-        display: inline-block;
-        width: 16vw;
-        min-width: 40px;
-      }
-      // margin: 4vh 0 0 12vh;
-    }
-    .cardTwo {
-      display: flex;
-      height: 100px;
-      background:linear-gradient(0deg, #A2794D, #BA9363, #CBA66F, #D7B27A, #E3C48A, #E3D097);
-      border-radius: 10px;
-      justify-content: space-around;
-      .cardTwo-text{
-        width: 60%;
-        padding-top: 10px;
-      }
-      .first {
-        font-size:1em;
-        font-family: Source Han Sans CN;
-        font-weight: 500;
-        color: #613c0c;
-        padding-left: 30%;
-      }
-      .second {
-        font-size: .8em;
-        font-family: Source Han Sans CN;
-        font-weight: 300;
-        color: #613c0c;
-        padding-left: 30%;
-      }
-      .keepAlive {
-        width: 40%;
-        height: 100px;
-        text-align: center;
-        margin: auto;
-        line-height: 100px;
-        img{
-          display: inline-block;
-          padding: 30px 0;
-        }
-      }
-    }
-
-    .cardThree {
-
-      // justify-content: center;
-      .first {
-
-      }
-      .second {
-      }
-    }
-    .freshRice {
-     img{
-       width: 100%;
-       display: inline-block;
-     }
-    }
-    .cardFour {
-      display: flex;
-      .first {
-      }
-      .second {
-      }
-      .normalGrow {
-        // margin: 4vh 0 0 12vh;
-      }
-    }
-    .cardFive {
-
-      .first {
+      ul {
+        width: 100%;
+        float: left;
+        li {
+          width: calc(50% - 6px);
+          float: right;
+          box-sizing: border-box;
+          border-radius: 8px;
+          overflow: hidden;
+          background: linear-gradient(
+            0deg,
+            #a2794d,
+            #ba9363,
+            #cba66f,
+            #d7b27a,
+            #e3c48a,
+            #e3d097
+          );
+          &.left {
+            float: left;
+          }
 
-      }
-      .second {
-
-      }
-      .organic {
-      }
-    }
-  }
-
-  //@media screen and (max-width: 414px) {
-  //  .middle .card {
-  //    .first {
-  //      // margin-top: 27px;
-  //      font-size: 18px;
-  //      left: 4vw;
-  //      top: 7vh;
-  //    }
-  //    .second {
-  //      font-size: 11px;
-  //    }
-  //    .lastP {
-  //      left: 18px;
-  //    }
-  //  }
-  //
-  //  .middle .cardTwo {
-  //    .first {
-  //      left: 44vw;
-  //      top: 15vh;
-  //    }
-  //    .second {
-  //      left: 44vw;
-  //      top: 8vh;
-  //    }
-  //    .keepAlive {
-  //      width: 11.5vw;
-  //      left: 70vw;
-  //      top: 5vh;
-  //    }
-  //  }
-  //
-  //  //
-  //  .middle .freshRice {
-  //    top: 1vh;
-  //    left: 24vw;
-  //  }
-  //  .middle .cardThree {
-  //    .first {
-  //      left: 3vw;
-  //      top: 3vh;
-  //    }
-  //    .second {
-  //      left: 3vw;
-  //      top: 5vh;
-  //    }
-  //  }
-  //  .middle .cardFour {
-  //    .first {
-  //      left: 4vw;
-  //      top: 3vh;
-  //    }
-  //    .second {
-  //      left: 4vw;
-  //      top: 5vh;
-  //    }
-  //    .normalGrow {
-  //      left: 24vw;
-  //      top: 2vh;
-  //    }
-  //  }
-  //  .middle .cardFive {
-  //    .first {
-  //      left: 2vw;
-  //      top: 19px;
-  //    }
-  //    .second {
-  //      left: -2vw;
-  //      top: 34px;
-  //    }
-  //    .organic {
-  //      left: 22vw;
-  //      top: 13px;
-  //    }
-  //  }
-  //}
-  @media screen and (max-width: 375px) {
-    .middle .card {
-      .first {
-        // margin-top: 27px;
-        font-size: 16px;
-        left: 4vw;
-        top: 9vh;
-      }
-      .second {
-        top: 12vh;
-        left: 4vw;
-      }
-      .lastP {
-        top: 17vh;
-        left: 5vw;
-        span {
-          font-size: 0.6rem;
+          .first {
+            float: left;
+            width: 48%;
+            height: 100%;
+            .title {
+              color: #613c0c;
+              font-weight: bolder;
+            }
+            .desc {
+              color: #613c0c;
+            }
+            .lastP {
+              background: #0f0b06;
+              text-align: center;
+              overflow: hidden;
+              border-radius: 10px;
+              padding: 2px 0 0 3px;
+              margin: 15px 0 0 0;
+              width: 46px;
+              height: 13px;
+              img {
+                display: inline-block;
+                width: 100%;
+                height: 100%;
+              }
+            }
+          }
+          .second {
+            width: 52%;
+            float: left;
+            img {
+              display: inline-block;
+              width: 100%;
+            }
+          }
         }
       }
     }
 
-    .middle .cardTwo {
-      .first {
-        font-size: .8em;
-      }
-      .second {
-        left: 44vw;
-        top: 9vh;
-      }
-      .keepAlive {
-        width:40px
+    @media screen and (min-width: 0px) {
+      .middle-div {
+        ul {
+          li {
+            height: 90px;
+            margin: 0 0 10px 0;
+            padding: 9px 15px;
+            &.he {
+              height: 190px;
+            }
+            .first {
+              padding: 4px 0 0 0;
+              .title {
+                font-size: 12px;
+                line-height: 28px;
+                height: 28px;
+                margin: 0 0 1px 0;
+              }
+              .desc {
+                font-size: 12px;
+                line-height: 16px;
+              }
+            }
+            &.he {
+              .first {
+                padding: 42px 0 0 0;
+              }
+              .second img {
+                width: 120%;
+                margin: 35px 0 0 0;
+              }
+            }
+            &:nth-child(4) {
+              .second img {
+                margin: 14px 0 0 7px;
+              }
+            }
+            &:nth-child(5) {
+              .second img {
+                margin: 12px 0 0 7px;
+              }
+            }
+          }
+        }
       }
     }
-    //
-    .middle .freshRice {
-      top: 1vh;
-      left: 24vw;
-    }
-    .middle .cardThree {
-      .first {
-        left: 3vw;
-        top: 3vh;
-      }
-      .second {
-        left: 3vw;
-        top: 5vh;
+    @media screen and (min-width: 359px) {
+      .middle-div {
+        ul {
+          li {
+            height: 105px;
+            margin: 0 0 10px 0;
+            padding: 9px 15px;
+            &.he {
+              height: 220px;
+            }
+            .first {
+              padding: 7px 0 0 0;
+              .title {
+                font-size: 15px;
+                line-height: 30px;
+                height: 30px;
+                margin: 0 0 5px 0;
+              }
+              .desc {
+                font-size: 13px;
+                line-height: 18px;
+              }
+            }
+            &.he {
+              .first {
+                padding: 42px 0 0 0;
+              }
+              .second img {
+                width: 120%;
+                margin: 35px 0 0 0;
+              }
+            }
+            &:nth-child(4) {
+              .second img {
+                margin: 14px 0 0 7px;
+              }
+            }
+            &:nth-child(5) {
+              .second img {
+                margin: 12px 0 0 7px;
+              }
+            }
+          }
+        }
       }
     }
-    .middle .cardFour {
-      .first {
-        left: 4vw;
-        top: 3vh;
-      }
-      .second {
-        left: 4vw;
-        top: 5vh;
-      }
-      .normalGrow {
-        left: 24vw;
-        top: 2vh;
+    @media screen and (min-width: 374px) {
+      .middle-div {
+        ul {
+          li {
+            height: 108px;
+            margin: 0 0 10px 0;
+            padding: 9px 15px;
+            &.he {
+              height: 226px;
+            }
+            .first {
+              padding: 8px 0 0 0;
+              .title {
+                font-size: 16px;
+                line-height: 30px;
+                height: 30px;
+                margin: 0 0 5px 0;
+              }
+              .desc {
+                font-size: 14px;
+                line-height: 18px;
+              }
+            }
+            &.he {
+              .first {
+                padding: 50px 0 0 0;
+              }
+              .second img {
+                width: 120%;
+                margin: 40px 0 0 0;
+              }
+            }
+            &:nth-child(4) {
+              .second img {
+                margin: 14px 0 0 7px;
+              }
+            }
+            &:nth-child(5) {
+              .second img {
+                margin: 12px 0 0 7px;
+              }
+            }
+          }
+        }
       }
     }
-    .middle .cardFive {
-      .first {
-        left: 2vw;
-        top: 19px;
-      }
-      .second {
-        left: -2vw;
-        top: 34px;
-      }
-      .organic {
-        left: 22vw;
-        top: 13px;
+    @media screen and (min-width: 413px) {
+      .middle-div {
+        ul {
+          li {
+            height: 120px;
+            margin: 0 0 10px 0;
+            padding: 9px 15px;
+            &.he {
+              height: 250px;
+            }
+            .first {
+              padding: 15px 0 0 0;
+              .title {
+                font-size: 18px;
+                line-height: 30px;
+                height: 30px;
+                margin: 0 0 5px 0;
+              }
+              .desc {
+                font-size: 16px;
+                line-height: 18px;
+              }
+            }
+            &.he {
+              .first {
+                padding: 70px 0 0 0;
+              }
+              .second img {
+                width: 120%;
+                margin: 50px 0 0 0;
+              }
+            }
+            &:nth-child(4) {
+              .second img {
+                margin: 14px 0 0 7px;
+              }
+            }
+            &:nth-child(5) {
+              .second img {
+                margin: 12px 0 0 7px;
+              }
+            }
+          }
+        }
       }
     }
   }
-  //@media screen and (max-width: 360px) {
-  //  .middle .card {
-  //    .first {
-  //      // margin-top: 27px;
-  //      font-size: 15px;
-  //      left: 14px;
-  //      top: 47px;
-  //    }
-  //    .second {
-  //      left: 14px;
-  //      top: 62px;
-  //    }
-  //    .lastP {
-  //      top: 17vh;
-  //      left: 5vw;
-  //      span {
-  //        font-size: 0.6rem;
-  //      }
-  //    }
-  //  }
-  //  .middle .cardTwo {
-  //    .first {
-  //      left: 157px;
-  //      top: 99px;
-  //    }
-  //    .second {
-  //      left: 157px;
-  //      top: 55px;
-  //    }
-  //    .keepAlive {
-  //      width: 13vw;
-  //      left: 243px;
-  //      top: 32px;
-  //    }
-  //  }
-  //  .middle .cardThree {
-  //    .first {
-  //      left: 3vw;
-  //      top: 3vh;
-  //    }
-  //    .second {
-  //      left: 3vw;
-  //      top: 5vh;
-  //    }
-  //  }
-  //  .middle .freshRice {
-  //    top: 1vh;
-  //    left: 23vw;
-  //  }
-  //  .middle .cardFour {
-  //    .first {
-  //      left: 4vw;
-  //      top: 3vh;
-  //    }
-  //    .second {
-  //      left: 4vw;
-  //      top: 5vh;
-  //    }
-  //    .normalGrow {
-  //      left: 24vw;
-  //      top: 2vh;
-  //    }
-  //  }
-  //  .middle .cardFive {
-  //    .first {
-  //      left: 2vw;
-  //      top: 16px;
-  //    }
-  //    .second {
-  //      left: -2vw;
-  //      top: 30px;
-  //    }
-  //    .organic {
-  //      left: 22vw;
-  //      top: 13px;
-  //    }
-  //  }
-  //}
-  //@media screen and (max-width: 320px) {
-  //  .productPack .box {
-  //    p {
-  //      margin: 7.5px 0 7px 4px;
-  //    }
-  //    span {
-  //      margin: 12.5px 0 0px 8px;
-  //    }
-  //  }
-  //  .middle .card {
-  //    .first {
-  //      font-size: 0.9rem;
-  //      left: 12px;
-  //      top: 9vh;
-  //    }
-  //    .second {
-  //      top: 64px;
-  //      left: 7px;
-  //      font-size: 0.7rem;
-  //      transform: scale(0.8);
-  //    }
-  //    .lastP {
-  //      top: 18vh;
-  //      left: 4vw;
-  //      span {
-  //        font-size: 0.6rem;
-  //      }
-  //    }
-  //  }
-  //
-  //  .middle .camera {
-  //    left: 22vw;
-  //    top: 8vh;
-  //  }
-  //
-  //  .middle .cardTwo {
-  //    .first {
-  //      left: 138px;
-  //      top: 90px;
-  //      font-size: 14px;
-  //    }
-  //    .second {
-  //      transform: scale(0.8);
-  //
-  //      left: 134px;
-  //      top: 51px;
-  //      font-size: 0.7rem;
-  //    }
-  //    .keepAlive {
-  //      width: 13vw;
-  //      left: 223px;
-  //      top: 32px;
-  //    }
-  //  }
-  //
-  //  .middle .keepAlive {
-  //    width: 11.5vw;
-  //    left: 70vw;
-  //    top: 6vh;
-  //  }
-  //  .middle .cardFour {
-  //    .first {
-  //      left: 4vw;
-  //      top: 3vh;
-  //    }
-  //    .second {
-  //      transform: scale(0.8);
-  //      left: 3vw;
-  //      top: 5vh;
-  //    }
-  //    .normalGrow {
-  //      left: 26vw;
-  //      top: 2vh;
-  //    }
-  //  }
-  //
-  //  //
-  //  .middle .freshRice {
-  //    top: 1vh;
-  //    left: 24vw;
-  //  }
-  //  .middle .cardThree {
-  //    .first {
-  //      font-size: 14px;
-  //      left: 3vw;
-  //      top: 3vh;
-  //    }
-  //    .second {
-  //      left: 2vw;
-  //      top: 5vh;
-  //      transform: scale(0.8);
-  //    }
-  //  }
-  //
-  //  .middle .cardFive {
-  //    .first {
-  //      left: 2vw;
-  //      top: 17px;
-  //    }
-  //    .second {
-  //      transform: scale(0.8);
-  //
-  //      left: -3vw;
-  //      top: 30px;
-  //    }
-  //    .organic {
-  //      left: 25vw;
-  //      top: 13px;
-  //    }
-  //  }
-  //
-  //}
-  //
-  //@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: 44vw;
-  //    top: 14vh;
-  //  }
-  //  .middle .cardTwo .keepAlive {
-  //    width: 11.5vw;
-  //    left: 70vw;
-  //    top: 4vh;
-  //  }
-  //  .middle .cardTwo .second {
-  //    left: 44vw;
-  //    top: 7vh;
-  //  }
-  //  //
-  //  .middle .freshRice {
-  //    top: 2vh;
-  //    left: 25vw;
-  //  }
-  //  .middle .cardThree .first {
-  //    left: 3vw;
-  //    top: 2vh;
-  //  }
-  //  .middle .cardThree .second {
-  //    left: 3vw;
-  //    top: 4vh;
-  //  }
-  //  .middle .cardFour {
-  //    .first {
-  //      left: 4vw;
-  //      top: 3vh;
-  //    }
-  //    .second {
-  //      left: 4vw;
-  //      top: 5vh;
-  //    }
-  //    .normalGrow {
-  //      left: 24vw;
-  //      top: 2vh;
-  //    }
-  //  }
-  //
-  //  .middle .cardFive {
-  //    .first {
-  //      left: 2vw;
-  //      top: 19px;
-  //    }
-  //    .second {
-  //      left: -2vw;
-  //      top: 34px;
-  //    }
-  //    .organic {
-  //      left: 24vw;
-  //      top: 21px;
-  //    }
-  //  }
-  //}
 }
 </style>

src/views/product/index.vue

@@ -1,89 +1,60 @@
 <template>
-  <div class="product">
-    <!-- <van-nav-bar title="产品" class="van-nav-bar-my-fixed" fixed /> -->
+  <div class="product" v-loading="loading">
     <div class="bgImg">
-<!--      <img src="@/assets/images/product/bgImg.png" alt="" />-->
-      <div class="title">
-        <p>藏金 · 1745产品</p>
-      </div>
+      <img class="bgImg-img" src="@/assets/images/product/bgImg.png" alt="" />
+
       <div class="tags">
         <img src="@/assets/images/product/tags.png" alt="" />
       </div>
     </div>
 
-    <div v-loading="loading">
-      <div class="product-baozhuang">
-        <div class="productPack">
-          <div class="packageBox">
-            <li @click="handleClick(0)">
-              <!-- <img :src="currIndex == '0' ? selectActive : select" alt="" /> -->
-              <div class="box" :class="{'selected':currIndex==0}">
-                <img src="@/assets/images/product/box.png" alt="" />
-                <p>藏金·1745-实惠装</p>
-                <span>可用库存:{{ canStockBag }}</span>
-              </div>
-            </li>
-            <li @click="handleClick(1)">
-              <div class="box" :class="{'selected':currIndex==1}">
-                <img src="@/assets/images/product/bag.png" alt="" />
-                <p>藏金·1745-礼盒装</p>
-                <span>可用库存:{{ canStockBox }}</span>
-              </div>
-            </li>
+    <div class="product-baozhuang">
+      <div class="product-title">
+        <span>藏金</span><span>.</span><span>1745产品</span>
+      </div>
+      <ul class="productPack clear">
+        <li
+          @click="changePitem(index)"
+          v-for="(item, index) in productList"
+          :key="item.id"
+        >
+          <div class="box" :class="{ selected: item.id == radioV }">
+            <img :src="item.img" alt="" />
+            <p>{{ item.name }}</p>
+            <span
+              >可用库存:{{ item.stock }}{{ item.unit }}/{{
+                item.weight
+              }}kg</span
+            >
           </div>
+        </li>
+      </ul>
 
-          <div v-if="ad && ad.id" @click="getaddress" class="item-ad clear">
-            <p class="item-ad__name">
-              <span>{{ ad.name }} </span><span class="tel">{{ ad.mobile }}</span>
-            </p>
-            <p class="item-ad__address">
-              <van-icon name="location-o" size="14"/> <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>
-          <div>
-            <van-button
-                type="info"
-                class="fr"
-                @click="placeOrder"
-            >确认下单</van-button>
-          </div>
+      <div v-if="ad && ad.id" @click="getaddress" class="item-ad clear">
+        <p class="item-ad__name">
+          <span>{{ ad.name }} </span><span class="tel">{{ ad.mobile }}</span>
+        </p>
+        <p class="item-ad__address">
+          <van-icon name="location-o" size="14" />
+          <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 class="product-kucun clear">
-        <ul>
-          <li
-            v-for="(pitem, index) in productList"
-            :key="pitem + index"
-            @click="changePitem(index)"
-          >
-            <div class="input-radio" :class="{ checked: radioV === pitem.id }">
-              <div class="radio-box">
-                <div class="radio-check"></div>
-              </div>
-            </div>
-
-            <img :src="pitem.img" alt="" />
-            <div>
-              <p>{{ pitem.name }}</p>
-              <p>
-                可用库存：{{ pitem.stock }}{{ pitem.unit }}/{{ pitem.weight }}kg
-              </p>
-            </div>
-          </li>
-        </ul>
-      </div> -->
+    </div>
+    <div class="product-footer clear">
+      <div class="fl">
+        <input-number :numb="num" :max="stock" @backNum="backNum" />
+      </div>
+      <div>
+        <van-button type="info" class="fr" @click="placeOrder"
+          >确认下单</van-button
+        >
+      </div>
     </div>
   </div>
 </template>
@@ -98,7 +69,8 @@ export default {
   data() {
     return {
       select: "/static/img/select.bed55bd9.png",
-      selectActive: "@/assets/images/product/select-active.png",
+      selectActive: 0,
+      // selectActive: "@/assets/images/product/select-active.png",
       currIndex: null,
       num: 0,
       total: 0,
@@ -110,7 +82,7 @@ export default {
       ad: null,
       canStockBox: "",
       canStockBag: "",
-      isce:''
+      isce: "",
     };
   },
   mounted() {
@@ -185,7 +157,7 @@ export default {
         list.forEach((v1) => {
           let item = {
             id: v1.id,
-            name: v1.id === "1" ? "藏金1745普通装" : "藏金1745礼盒",
+            name: v1.id === "1" ? "藏金·1745-实惠装" : "藏金·1745-礼盒装",
             img: require(`@/assets/images/product/unit${v1.id}.png`),
             stock: parseInt(v1.limit_num + ""),
             weight: v1.weight,
@@ -210,10 +182,7 @@ export default {
       }
     },
     backNum(e) {
-      console.log(e, "eeee");
-
       this.num = e;
-      console.log(this.num);
     },
     async placeOrder() {
       if (!this.loading) {
@@ -234,6 +203,7 @@ export default {
 
           Dialog.confirm({
             title: "确认下单？",
+            message: "同意后，将生成订单！",
           })
             .then(async () => {
               await this.placeHttpOrder();
@@ -283,191 +253,113 @@ export default {
         });
       });
     },
-    handleClick(e) {
-      this.currIndex = e;
-    },
   },
 };
 </script>
 
 <style lang="scss" scoped>
 .product {
-  background: #FCFCF0!important;
+  background: #fcfcf0 !important;
+  position: relative;
   .bgImg {
     width: 100%;
-    height: 50%;
-    background: url("../../assets/images/product/bgImg.png") no-repeat center;
-    background-size:100% 100%;
     position: relative;
-    img {
-      width: 100%;
-    }
-    .title {
-      width: 50%;
-      height: 100%;
-      display: inline-block;
-      font-size: 1.4em;
-      font-family: Source Han Sans CN;
-      font-weight: 500;
-      color: #daac70;
+    img.bgImg-img {
       position: relative;
-      p{
-        position: absolute;
-        top:50%;
-        left:5%;
-      }
+      width: 100%;
     }
     .tags {
-      width: 50%;
-      height:100%;
-      display: inline-block;
-      position: relative;
+      position: absolute;
+      right: 16px;
+      top: 0;
+      z-index: 3;
+      padding-top: 8vh;
       img {
-        position: absolute;
-        width: 50px;
-        right: 10%;
-        top: 10%;
+        float: right;
+        width: 26%;
       }
     }
+    // .bgImg-div {
+    //   width: 100%;
+    //   position: absolute;
+    //   top: 0;
+    //   left: 0;
+    //   z-index: 2;
+
+    //   // .title {
+    //   //   width: 50%;
+    //   //   height: 100%;
+    //   //   display: inline-block;
+    //   //   font-size: 1.4em;
+    //   //   font-weight: 500;
+    //   //   color: #daac70;
+    //   //   position: relative;
+    //   //   p {
+    //   //     position: absolute;
+    //   //     top: 50%;
+    //   //     left: 5%;
+    //   //   }
+    //   // }
+
+    // }
   }
 
   .product-baozhuang {
-    width:100%;
+    width: 100%;
+    padding: 0 16px;
+    box-sizing: border-box;
     position: absolute;
-     top:40%;
-     left:0;
+    top: 180px;
+    left: 0;
+    .product-title {
+      font-size: 20px;
+      font-weight: 500;
+      line-height: 50px;
+      color: #daac70;
+    }
   }
   .productPack {
-    width: 90%;
-    z-index: 100;
-    margin: 0 auto;
-    position: relative;
-    margin-bottom: 100px;
-  .packageBox{
-    display: flex;
-    justify-content: space-between;
-  }
+    width: 100%;
+    // .packageBox {
+    //   display: flex;
+    //   justify-content: space-between;
+    // }
 
     li {
       list-style: none;
-      width:calc(50% - 10px);
-      display: inline-block;
-      padding: 5px;
-      .box{
-        background: #E6E6DC;
+      float: left;
+      width: calc(50% - 5px);
+      // display: inline-block;
+      // padding: 5px;
+      &:last-child {
+        float: right;
+      }
+      .box {
+        background: #e6e6dc;
         border-radius: 13px;
-        padding: 5px;
+        padding: 5px 5px 10px 5px;
         img {
           width: 100%;
         }
         p {
           margin: 10px 0 5px 10px;
-          font-size:1.2em;
-          font-family: Source Han Sans CN;
+          font-size: 1.2em;
           font-weight: 600;
-          color: #1A1A1A;
+          color: #1a1a1a;
         }
         span {
           margin-left: 10px;
           font-size: 1em;
-          font-family: Source Han Sans CN;
           font-weight: 400;
-          color: #4D4D4D;
+          color: #4d4d4d;
         }
       }
-      .selected{
-        background: linear-gradient(0deg, #A57D4B, #EFC180, #EFC180);
+      .selected {
+        background: linear-gradient(0deg, #a57d4b, #efc180, #efc180);
       }
     }
-
   }
-  .product-kucun {
-    width: 100%;
-    padding: 0 0 30px 0;
-    ul {
-      float: left;
-      width: 100%;
-      li {
-        float: left;
-        width: 100%;
-        padding: 24px 0 0 0;
-        &:hover {
-          cursor: pointer;
-        }
-        .input-radio {
-          height: 80px;
-          width: 15px;
-          padding: 0;
-          float: left;
-          line-height: 80px;
-          margin: 0 8px 0 0;
-          padding: 0 1px;
-          .radio-box {
-            width: 15px;
-            height: 15px;
-            border-radius: 50%;
-            border: 1px solid #c0c0c0;
-            padding: 2px;
-            margin: 33px 0 0 0;
-            box-sizing: border-box;
-            .radio-check {
-              width: 9px;
-              height: 9px;
-              background: transparent;
-              box-sizing: border-box;
-              border-radius: 50%;
-            }
-          }
-          &.checked {
-            .radio-box {
-              border: 1px solid #f4d022;
-              .radio-check {
-                // background: #f4d022;
-                background: linear-gradient(0deg, #f2c482, #a07947);
-              }
-            }
-          }
-        }
 
-        input {
-          float: left;
-          height: 80px;
-          width: 17px;
-          padding: 0;
-          margin: 0 8px 0 0;
-        }
-        img {
-          float: left;
-          height: 84px;
-          width: 130px;
-          box-sizing: border-box;
-          padding: 0 5px;
-        }
-        p {
-          float: left;
-
-          width: calc(100% - 155px);
-          margin: 0;
-          box-sizing: border-box;
-          padding: 0 0 0 10px;
-          &:first-child {
-            margin-top: 8px;
-            font-size: 17px;
-            color: #333;
-            height: 38px;
-            line-height: 38px;
-            font-weight: bolder;
-          }
-          &:last-child {
-            height: 28px;
-            line-height: 28px;
-            font-size: 12px;
-            color: #666;
-          }
-        }
-      }
-    }
-  }
   .item-ad {
     background-color: #e6e6dc;
     color: #999999;
@@ -479,7 +371,6 @@ export default {
     border-radius: 8px;
     .item-ad__name {
       font-size: 1.2em;
-      font-family: Source Han Sans CN;
       font-weight: 600;
       color: #111111;
       margin: 5px 0;
@@ -488,11 +379,10 @@ export default {
     .item-ad__address {
       text-align: justify;
       font-size: 1.2em;
-      font-family: Source Han Sans CN;
-      color:#999999;
+      color: #999999;
       margin: 5px 0;
-      span{
-       margin-left: 5px;
+      span {
+        margin-left: 5px;
       }
     }
   }
@@ -513,7 +403,8 @@ export default {
     text-align: center;
     width: 180px;
     border-radius: 17px;
-    background: linear-gradient(0deg, #f2c482, #a07947);
+    border: 1px solid #bdbdbd;
+    // background: linear-gradient(0deg, #f2c482, #a07947);
     img {
       width: 13px;
       height: 13px;
@@ -524,7 +415,6 @@ export default {
       width: 47.5px;
       height: 11px;
       font-size: 12px;
-      font-family: Source Han Sans CN;
       font-weight: 400;
       color: #111111;
       line-height: 3px;
@@ -533,28 +423,25 @@ export default {
   .product-footer {
     position: fixed;
     width: 100%;
-    background: #E6E6DC;
+    background: #e6e6dc;
     left: 0;
     bottom: 50px;
     z-index: 3;
     .fl {
-
-        font-size: 1.4em;
-        padding: 10px;
-        font-family: DIN;
-        font-weight: 500;
-        color: #111111;
-
+      font-size: 1.4em;
+      padding: 10px;
+      font-weight: 500;
+      color: #111111;
     }
     button {
-      background: #E6E6DC;
-      color:#292929;
+      background: #e6e6dc;
+      color: #292929;
       padding: 0;
       border: 0px;
       line-height: 56px;
       height: 56px;
       width: 40vw;
-      border-left: 2px solid #FCFCF0;
+      border-left: 2px solid #fcfcf0;
       //background: linear-gradient(0deg, #9e7746, #f4c583);
       //color: #333;
       //border: 1px solid #9e7746;