修改h5样式

src/.env.development

@@ -1,5 +1,3 @@
-NODE_ENV = development
-
 # just a flag
 ENV = 'development'
 

src/.env.production

@@ -1,5 +1,3 @@
-NODE_ENV = production
-
 # just a flag
 ENV = 'production'
 

src/.env.staging

@@ -1,4 +1,4 @@
-NODE_ENV = staging
+NODE_ENV = production
 
 # just a flag
 ENV = 'staging'

src/App.vue

@@ -14,7 +14,6 @@ export default {};
   height: 100%;
   width: 100%;
   top: 0;
-  
   left: 0;
   padding: 0;
   margin: 0;
@@ -32,11 +31,11 @@ html {
         position: absolute;
         z-index: 1;
         width: 100%;
-        height: 85px;
+        height: 140px;
         margin: 0 0;
         padding:0;
         box-sizing: border-box;
-        background: linear-gradient(0deg,  #fafafa 0%  ,#f3d028 100% );
+        background: linear-gradient(0deg,  #FFF 30%  ,#f3d028 100% );
       }
       .layout,
       .address,
@@ -59,8 +58,7 @@ html {
           height: auto;
         }
         .van-tabbar--fixed{
-          z-index:99999;
-
+          z-index: 999999;
         }
       }
     }

src/apis/live/index.js

@@ -0,0 +1,8 @@
+// 直播
+import http from '@/apis/axios'
+const api = 'home/'
+export default {
+  // 预览视频
+  list : (data, params) => http(api + 'obtainlist', data, 'post', params),
+
+}

src/config/env.staging.js

@@ -1,7 +1,7 @@
 // 测试环境
 module.exports = {
   title: '五常稻田',
-  baseApi: 'http://fc.test241.wanyuhengtong.com/',
+  baseApi: 'http://five.sit.wanyuhengtong.com/',
   fileURL: `https://api2.edusit.zretchome.com`,
   appId: 'wx5ac3a2c2d72b6f26',
   ding:{

src/views/address/index.vue

@@ -138,22 +138,22 @@ export default {
       if (!this.loading) {
         console.log(this.chosenAddressId);
         if (this.parmValue.page === 1) {
-          this.list = [];
+          this.list = [];//如果没有在加载中且当前页数是1，清空list列表，防止造成上次的地址残留
         }
-        let res = await asyncRequest.list(this.parmValue);
+        let res = await asyncRequest.list(this.parmValue);//请求接口
         if (res && res.code == 0 && res.data) {
-          let arr = res.data.list;
-          arr.map((v1) => {
-            let codeName =
+          let arr = res.data.list;//正确请求到数据，保存到新增数组
+          arr.map((v1) => {//遍历获取数据
+            let codeName =//判断当前城市名是不是和数据中的城市名相等
               v1.city_name === v1.provice_name
                 ? v1.provice_name
                 : v1.provice_name + v1.city_name;
-            v1.name = v1.contector;
+            v1.name = v1.contector;//
             v1.tel = v1.mobile;
             v1.address = codeName + v1.area_name + v1.addr;
             return v1;
           });
-          this.list.push(...arr);
+          this.list.push(...arr);//把arr数组解构放到list列表渲染
           if (this.chosenAddressId === "" && this.list.length > 0) {
             this.chosenAddressId = this.list[0].id;
           }
@@ -183,7 +183,7 @@ export default {
   .van-tag--danger {
     background: rgb(255, 131, 39);
   }
-
+  
   .van-address-item .van-radio__icon--checked .van-icon {
     background-color: rgb(255, 131, 39);
     border-color: rgb(255, 131, 39);
@@ -202,4 +202,14 @@ export default {
     width: 100%;
   }
 }
+.van-nav-bar-my-fixed /deep/ .van-nav-bar__title.van-ellipsis{
+    width: 71px;
+    height: 34px;
+    font-size: 36px;
+    font-family: Source Han Sans CN;
+    font-weight: 500;
+    color: #1A1A1A;
+    line-height: 6px;
+}
+
 </style>

src/views/live/index.vue

@@ -1,13 +1,280 @@
 <template>
-  <div>live</div>
+  <div class="order" style="padding-top: 84px">
+    <div class="order-title">
+      <van-nav-bar
+        title="直播"
+        class="van-nav-bar-my-fixed"
+        left-arrow
+        @click-left="onClickLeft"
+      />
+      <!-- 点击后回退一层页面 -->
+      <!-- <van-tabs
+        class="vant-tabs-main"
+        v-model="parmValue.status"
+        swipeable
+        color="#FF8327"
+        line-height="2px"
+        title-active-color="#FF8327"
+       @click="onLoad(1)" >
+      渲染列表项
+        <van-tab
+          v-for="item in tabList"
+          :key="item.code"
+          :title="item.name"
+          :name="item.code"
+        >
+        </van-tab>
+      </van-tabs> -->
+    </div>
+    <van-list
+      v-if="list && list.length > 0"
+      class="videoList"
+      v-model="loading"
+      :finished="finished"
+      finished-text="没有更多了"
+      @load="onLoad(1)">
+    <!-- <h1 class="live">最近直播</h1> -->
+      <van-cell v-for="item in list" :key="item"  class="videoItem">
+        <img :src="item.video_img" alt="">
+        <span class="videoName">{{item.video_name}}</span>
+        <span class="videoDesc">{{item.video_sn}}</span>
+
+      </van-cell>
+    </van-list>
+    <van-empty v-else description="暂无视频！" />
+    <!-- <button @click="onLoad">btn</button>测试接口按钮 -->
+  </div>
 </template>
 
 <script>
+import { 
+  // Tab, Tabs,
+   List, cell } from "vant";
+import asyncRequest from "@/apis/live/index";
+import resToken from "@/mixins/resToken";
 export default {
+  mixins: [resToken],
+  components: {
+    "van-cell": cell,
+    "van-list": List,
+    // "van-tab": Tab,
+    // "van-tabs": Tabs,
+  },
+  async created() {//在组件被创建的时候就加载
+    await this.onLoad(1);
+  },
+   data() {
+    return {
+      list: [],//用来放接口获得的数据，来渲染页面
+      loading: false,//是否在加载
+      finished: false,//是否加载完成
+      total:0,//页码数
+      parmValue:{//使用preview接口的入参
+        page: 1, // 页码
+        size: 10, // 每页显示条数
+      },
 
-}
+      videoUrl:[
+        {name:"五常大米专属粮仓",desc:"时刻纯正好鲜米",url:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F13982043636%2F641&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634478420&t=e03a65a1166f8a961f87efeebbb4f0e9"},
+        {name:"武昌大米专属粮仓",desc:"食客纯正好鲜米",url:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F13982043410%2F641&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634478445&t=d3c4109497df131559434f1d6881d91a"},
+        {name:"五昌大米专属粮仓",desc:"食客纯正好鲜米",url:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F13982043740%2F641&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634478462&t=4f13dd0c6f48e0d1557d4826364d18cb"},
+        {name:"武常大米专属粮仓",desc:"食客纯正好鲜米",url:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F13982043411%2F641&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634478490&t=40b86abdb8efa37012ea930c4a51dba6"},
+        {name:"武常大米专属粮仓",desc:"食客纯正好鲜米",url:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F13982043411%2F641&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634478490&t=40b86abdb8efa37012ea930c4a51dba6"},
+        {name:"武常大米专属粮仓",desc:"食客纯正好鲜米",url:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F13982043411%2F641&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634478490&t=40b86abdb8efa37012ea930c4a51dba6"},
+        {name:"武常大米专属粮仓",desc:"食客纯正好鲜米",url:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F13982043411%2F641&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634478490&t=40b86abdb8efa37012ea930c4a51dba6"},
+        {name:"武常大米专属粮仓",desc:"食客纯正好鲜米",url:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F13982043411%2F641&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634478490&t=40b86abdb8efa37012ea930c4a51dba6"},
+        {name:"武常大米专属粮仓",desc:"食客纯正好鲜米",url:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F13982043411%2F641&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634478490&t=40b86abdb8efa37012ea930c4a51dba6"},
+        {name:"武常大米专属粮仓",desc:"食客纯正好鲜米",url:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F13982043411%2F641&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634478490&t=40b86abdb8efa37012ea930c4a51dba6"},
+        {name:"武常大米专属粮仓",desc:"食客纯正好鲜米",url:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F13982043411%2F641&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634478490&t=40b86abdb8efa37012ea930c4a51dba6"},
+        {name:"武常大米专属粮仓",desc:"食客纯正好鲜米",url:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F13982043411%2F641&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634478490&t=40b86abdb8efa37012ea930c4a51dba6"},
+        {name:"武常大米专属粮仓",desc:"食客纯正好鲜米",url:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F13982043411%2F641&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634478490&t=40b86abdb8efa37012ea930c4a51dba6"},
+        {name:"武常大米专属粮仓",desc:"食客纯正好鲜米",url:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F13982043411%2F641&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634478490&t=40b86abdb8efa37012ea930c4a51dba6"},
+        {name:"武常大米专属粮仓",desc:"食客纯正好鲜米",url:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F13982043411%2F641&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634478490&t=40b86abdb8efa37012ea930c4a51dba6"},
+        {name:"武常大米专属粮仓",desc:"食客纯正好鲜米",url:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F13982043411%2F641&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634478490&t=40b86abdb8efa37012ea930c4a51dba6"},
+        {name:"武常大米专属粮仓",desc:"食客纯正好鲜米",url:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F13982043411%2F641&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634478490&t=40b86abdb8efa37012ea930c4a51dba6"},
+        {name:"武常大米专属粮仓",desc:"食客纯正好鲜米",url:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F13982043411%2F641&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634478490&t=40b86abdb8efa37012ea930c4a51dba6"},
+        {name:"武常大米专属粮仓",desc:"食客纯正好鲜米",url:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F13982043411%2F641&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634478490&t=40b86abdb8efa37012ea930c4a51dba6"},
+        {name:"武常大米专属粮仓",desc:"食客纯正好鲜米",url:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F13982043411%2F641&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634478490&t=40b86abdb8efa37012ea930c4a51dba6"},
+        {name:"武常大米专属粮仓",desc:"食客纯正好鲜米",url:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F13982043411%2F641&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634478490&t=40b86abdb8efa37012ea930c4a51dba6"},
+        {name:"武常大米专属粮仓",desc:"食客纯正好鲜米",url:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F13982043411%2F641&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634478490&t=40b86abdb8efa37012ea930c4a51dba6"},
+        {name:"武常大米专属粮仓",desc:"食客纯正好鲜米",url:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F13982043411%2F641&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634478490&t=40b86abdb8efa37012ea930c4a51dba6"},
+        {name:"武常大米专属粮仓",desc:"食客纯正好鲜米",url:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F13982043411%2F641&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634478490&t=40b86abdb8efa37012ea930c4a51dba6"},
+        {name:"武常大米专属粮仓",desc:"食客纯正好鲜米",url:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F13982043411%2F641&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634478490&t=40b86abdb8efa37012ea930c4a51dba6"},
+        {name:"武常大米专属粮仓",desc:"食客纯正好鲜米",url:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F13982043411%2F641&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634478490&t=40b86abdb8efa37012ea930c4a51dba6"},
+
+        
+      ],
+    };
+  },
+  methods:{//判断当时传递的页码是不是1，
+    async onLoad(e) {
+      console.log(e);
+      if(e) {
+        this.parmValue.page = 1;//重置页码数
+      }else {
+        this.parmValue.page++;//如果页码数不是1，页码++
+      };
+      if(!this.loading){//加载结束
+          if(this.parmValue.page === 1){//判断当前页码是不是1
+            this.list = [];//当前页码是1且未加载，那么代表初始化数据
+          }
+      }
+      let res = await asyncRequest.list(this.parmValue);//视频预览接口
+      console.log(res,"视频预览接口");
+      // this.loading = false;//加载状态结束
+      if (res && res.code == 0 && res.data) {//
+          let arr = res.data.list;//缓存接口返回是数据
+          this.list.push(...arr);//
+          this.total = res.data.count;
+          if (
+            this.list.length > 0 &&
+            this.total > 0 &&
+            this.total === this.list.length
+          ) {
+            this.finished = true;
+          }
+          if (this.total === 0) {
+            this.finished = true;
+          }
+        } 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--;
+          }
+        }
+    }
+  },
+  // methods: {
+  //   onLoad() {
+  //     setTimeout(() => {
+  //       for (let i = 0; i < 10; i++) {
+  //         console.log(this.list.length + 1);
+  //         let item={
+  //           img:this.videoUrl[i].url,
+  //           name:this.videoUrl[i].name,
+  //           desc:this.videoUrl[i].desc,
+  //         }
+  //         // console.log(item);
+  //         this.list.push(item);
+  //         console.log(this.list);
+  //       }
+  //       // 加载状态结束
+  //       this.loading = false;
+  //       // 数据全部加载完成
+  //       if (this.list.length >= 40) {
+  //         this.finished = true;
+  //       }
+  //     }, 1000);
+  //   },
+  // },
+};
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+.videoItem{
+  width: 340px;
+  height: 100%;
+  z-index: -5;
+  padding: 10px;
+  margin: 20px;
+  position: relative;
+  background-color: #fff;
+  img{
+    width: 320px;
+    height: 150px;
+    z-index: -5;
+    border-radius: 30px;
+    display: block;
+  }
+  .videoName{
+    width: 100%;
+    height: 30px;
+    font-size: 20px;
+    font-family: Source Han Sans CN;
+    font-weight: 600;
+    color: #1A1A1A;
+    line-height: 30px;
+    display: block;
+    margin-top: 2px;
+  }
+  .videoDesc{
+    width: 100%;
+    height: 20px;
+    font-size: 14px;
+    font-family: Source Han Sans CN;
+    font-weight: 400;
+    color: #999999;
+    line-height: 23px;
+    display: block;
+  }
+}
+.live{
+  width: 142px;
+  height: 40px;
+  font-size: 25px;
+  font-family: Source Han Sans CN;
+  font-weight: 800;
+  color: #1A1A1A;
+  line-height: 40px;
+  margin-left: 20px;
+}
+.order {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  padding-top: 108px;
+  box-sizing: border-box;
+  overflow-y: scroll;
+  background: #fff;
+  .order-title {
+    position: fixed;
+    padding: 0;
+    width: 100%;
+    margin: 0;
+    top: 0;
+    left: 0;
+    z-index: 3;
+    border: 0;
+    height: 84px;
+    .vant-tabs-main{
+      padding: 40px 0 0 0;
+
+    }
+    z-index: -5;
+    // &::after {
+    //   display: block;
+    .van-hairline--bottom::after {
+      display: none;
+    }
+    // .van-tabs {
+    //   margin-top: -8px;
+    // }
+    // border-bottom: 1px solid #ebedf0;
+    // }
+  }
+  .list-ul-main {
+    // padding: 16px;//外部列表和边框的内间距
 
-</style>
+    .list-ul {
+      width: 100%;//撑满父容器
+      background: linear-gradient(28deg, #ff8327, #ffbd73);
+      margin: 0 0 12px 0;//项
+      box-sizing: border-box;
+      border-radius: 10px;
+      li {
+        width: 100%;
+        float: left;
+        font-size: 14px;
+        line-height: 30px;
+        // color: #ffffff;
+        box-sizing: border-box;
+      }
+      &:last-child {
+        margin: 0 0 2px 0;
+      }
+    }
+  }
+}
+</style>

src/views/login/index.vue

@@ -1,11 +1,12 @@
 <template>
   <div class="login">
     <div class="bg">
-      <img :src="loginBG" alt="" />
+      <!-- <img :src="loginBG" alt="" /> -->
     </div>
     <div class="login-main">
       <div class="logo-header">
         <p class="logo-header-title">登录</p>
+        <p class="logo-header-tips">登陆享受更多精彩</p>
       </div>
       <van-form validate-first class="login-form">
         <ul class="clear">
@@ -35,7 +36,9 @@
               name="code"
               placeholder="请输入密码"
               :rules="[{ validator: asyncpwodValidator }]"
-              type="password"
+              :type="!passwordStatus ? 'password' : 'text'"
+              right-icon="eye"
+              @click-right-icon="showPassword"
             >
             </van-field>
           </li>
@@ -65,6 +68,7 @@ export default {
   mixins: [resToken],
   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"),
@@ -177,52 +181,95 @@ export default {
         resolve(type ? "ok" : "error");
       });
     },
+    showPassword(){//展示/隐藏密码
+      console.log("显示/隐藏密码");
+      console.log(this.passwordStatus);
+      this.passwordStatus = !this.passwordStatus;
+    }
   },
 };
 </script>
 
 <style lang="scss" scoped>
-.login {
-  background: #f7f6f5;
+.login {//最外层的登陆盒子
+  // background: #ffd490;
   position: relative;
   width: 100%;
   height: 100%;
-  .bg {
+  .bg {//背景图的盒子
     position: relative;
     width: 100%;
     height: 100%;
-    img {
+    img {//背景图
       display: inline-block;
       width: 100%;
       height: 100%;
+      background-color: darkcyan;
     }
   }
-  .login-main {
+  .login-main {//详情登陆页面
     position: absolute;
     top: 0;
     left: 0;
-    width: 100%;
+    width: 100%;//继承最外层login的宽高
     height: 100%;
-
-    .logo-header {
+    background-color: #fff;
+    .logo-header {//上半部分登陆盒子，用来展示一张图片
       // padding: 50% 0 10% 0;
-      .logo-header-title {
+      width: 100%;
+      height: 209px;
+      background-image: url("~@/img/login.png");
+      background-repeat: no-repeat;
+      background-position: -145px -1px;
+      position: relative;
+      top: -12px;
+      .logo-header-title {//登陆字体的盒子
         // height: 28vh;
         // line-height: 33vh;
-        text-align: center;
-        font-size: 30px;
-        color: #000000;
-        // font-weight: bold;
-        padding: 20vh 0 28px 0;
+        // text-align: center;
+        // font-size: 30px;
+        // color: #000000;
+        margin: 0px;
+        font-weight: bold;
+        padding: 91px 256px 99px 37px;
+        //蓝湖样式复制
+        width: 81px;
+        height: 37px;
+        font-size: 20px;
+        font-family: MF ShangHei (Noncommercial);
+        font-weight: bold;
+        color: #FFFFFF;
+        line-height: 20px;
+      }
+      .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-family: Source Han Sans CN;
+        font-weight: 150;
+        color: #FFFFFF;
+        line-height: 3px;
       }
     }
-    .login-form.van-form {
-      padding: 0 18%;
+    .login-form.van-form {//登陆框
+      padding: 10% 18%;
+      background-color: #fff;
+      border-top-left-radius: 40px;
+      border-top-right-radius: 40px;
+      position: relative;
+      top: -50px;
+      left: 0;
       ul {
         border-radius: 20px;
         overflow: hidden;
         background: #ffffff;
         margin: 0 0 28px 0;
+        border-bottom: 1px solid #F0F0F0;
         li {
           float: left;
           &.label {
@@ -270,8 +317,10 @@ export default {
     .login-form-button.van-button,
     .login-form-button.van-button--disabled {
       border: 0;
-      margin: 18vh 0 0 0;
-      background: linear-gradient(0deg, #ff6600 0%, #ffd490 100%);
+      margin: 9vh 0 0 0;
+      
+      background: #F4D022;
+      // background: linear-gradient(0deg, #ff6600 0%, #ffd490 100%);
       border-radius: 34px;
     }
   }

src/views/my/index.vue

@@ -26,42 +26,70 @@
           </li>
         </ul>
       </div>
+      <div class="top">
+        <ul class="vip-box">
+          <li class="vip-bg">
+            <img :src="this.vip_text" alt="">
+          </li>
+        </ul>
+          <!-- 我的页面下待收，待发、售后盒子 -->
+          
+          <ul class="cell-vip">
+            <li v-for="(item,index) in cellVip" :key="item.n + index"
+              class="vip-item">
+              <img class="cell-my-img" :src="item.i" alt="" />
+              <span class="vip-title">{{ item.n }}</span>
+            </li>
+          </ul>
+      </div>
+      
+
+      <div class="bottom">
+        <h1 class="common">常用功能</h1>
+        <div class="cell-list">
+          <van-cell
+            is-link
+            v-for="(item, index) in cellList"
+            :key="item.n + index"
+            @click="goto(item.r)">
+            <template #title>
+              <img class="cell-my-img" :src="item.i" alt="" />
+              <span class="custom-title">{{ item.n }}</span>
+            </template>
+          </van-cell>
+        </div>
+        <div class="my-btn-main">
+          <van-button
+            class="my-button"
+            block
+            type="info"
+            @click.native="logout()">
+            退出登录
+          </van-button>
+        </div>
+      </div>
 
-      <div class="cell-list">
+      <!-- <div class="cell-list">
         <van-cell
           is-link
           v-for="(item, index) in cellList"
           :key="item.n + index"
-          @click="goto(item.r)"
-        >
+          @click="goto(item.r)">
           <template #title>
             <img class="cell-my-img" :src="item.i" alt="" />
             <span class="custom-title">{{ item.n }}</span>
           </template>
         </van-cell>
-        <!-- <van-cell is-link to="order">
-          <template #title>
-            <img class="cell-my-img" :src="order" alt="" />
-            <span class="custom-title">我的订单</span>
-          </template>
-        </van-cell>
-        <van-cell is-link to="aboutUs">
-          <template #title>
-            <img class="cell-my-img" :src="we" alt="" />
-            <span class="custom-title">联系我们</span>
-          </template>
-        </van-cell> -->
       </div>
       <div class="my-btn-main">
         <van-button
           class="my-button"
           block
           type="info"
-          @click.native="logout()"
-        >
+          @click.native="logout()">
           退出登录
         </van-button>
-      </div>
+      </div> -->
     </div>
   </div>
 </template>
@@ -73,13 +101,19 @@ export default {
   mixins: [resToken],
   data() {
     return {
-      header: require("@/assets/images/my/header.png"),
+      header: require("@/assets/images/my/header.png"),//用户头像
       userData: null,
-      ad: require("@/assets/images/my/ad.png"),
-      order: require("@/assets/images/my/order.png"),
-      we: require("@/assets/images/my/we.png"),
+      ad: require("@/assets/images/my/ad.png"),//地理定位
+      order: require("@/assets/images/my/order.png"),//用户订单
+      unshipped:require("@/assets/images/my/unshipped.png"),//待发货
+      shipped:require("@/assets/images/my/shipped.png"),//待收货
+      service:require("@/assets/images/my/service.png"),//客户服务
+      vip_bg:require("@/assets/images/my/vip_bg.png"),//vip盒子背景图
+      vip_text:require("@/assets/images/my/vip_text.png"),//vip
+      saleAfter:require("@/assets/images/my/saleAfter.png"),//售后服务
       loading: false,
       cellList: [],
+      cellVip:[],
     };
   },
   async created() {
@@ -96,11 +130,29 @@ export default {
       },
       {
         r: "/aboutUs",
-        i: this.we,
+        i: this.service,
         n: "联系我们",
       },
     ];
     // await this.getUserInfor();
+    this.cellVip = [
+      {
+        r: "/address",
+        i: this.unshipped,
+        n: "待发货",
+      },
+      {
+        r: "/order",
+        i: this.shipped,
+        n: "待收货",
+      },
+      {
+        r: "/aboutUs",
+        i: this.saleAfter,
+        n: "售后",
+      },
+      
+    ];
   },
   mounted() {
     this.getStock();
@@ -140,13 +192,13 @@ export default {
     width: 100%;
 
     .mine-resume-main {
-  background: transparent;
+      // background: transparent;
+      // background-color: red;
+      // background: linear-gradient(180deg, #F3CF23 0%, #FFFFFF 100%);
       padding: 0 0 10px 0;
       ul {
         padding: 16px;
         background: transparent;
-        // background: #ffffff;
-
         li {
           float: left;
           &:first-child {
@@ -179,13 +231,114 @@ export default {
         }
       }
     }
-    .cell-list {
+    /**vip开通框 */
+    .vip-box{
+      width: 100%;
+      height: 50px;
+      position: relative;
+      .vip-bg{
+        border-top-left-radius: 25px;
+        border-top-right-radius: 25px;
+        width: 305px;
+        height: 49px;
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        background-color: #292F46 ;
+        img{
+          width: 44px;
+          height: 19px;
+          display: block;
+          position: absolute;
+          left: 26px;
+          top: 18px;
+        }
+      }
+      .vip-text{
+        width: 100px;
+        img{
+          width: 100%;
+        }
+      }
+    }
+   /**vip服务区域样式 */
+
+    .cell-vip {
+      width: 305px;
+      top: 25px;
+      display: flex;
+      position: relative;
+      left: 50%;
+      transform: translateX(-50%);
       .cell-my-img {
+        display: block;
+        width: 25px;
+        height: 24px;
+      }
+      .vip-item{
+        // margin-left: 25px;
+        height: 50px;
+        display: block;
+        flex: 1 1 auto;
+        text-align: center;
+        font-size: 12px;
+        color: #4D4D4D;
+        line-height: 6px;
+        font-family: Source Han Sans CN;
+        padding-left:16px ;
+        position: relative;
+        img{
+          width: 30px;
+          height: 28px;
+          display: block;
+          position: absolute;
+          left: 50%;
+          transform: translateX(-50%);
+        }
+        span{
+          height: 28px;
+          display: block;
+          position: absolute;
+          top: 80%;
+          left: 50%;
+          transform: translateX(-50%);
+        }
+      }
+    }
+    .my-btn-main {
+      width: 100%;
+      margin: 18vh 0 0 0;
+      padding: 0 16px;
+      box-sizing: border-box;
+      .my-button {
+        box-sizing: border-box;
         display: inline-block;
-        width: 16px;
-        height: 18px;
-        vertical-align: middle;
-        margin: 0 6px 4px 0;
+        border-radius: 20px;
+        background: #dbdbdb;
+        border: 0;
+      }
+    }
+/**地址栏收获样式 */
+    .cell-list {
+      display: flex;
+      background-color: #fff;
+      .van-cell__title{
+        width: 200px;
+        position: relative;
+        left: 0;
+        top: 0;
+        text-align: center;
+      }
+      .cell-my-img {
+        display: block;
+        width: 22px;
+        height: 27px;
+        margin: 0 5vh 4px 6vh;
+      }
+      .custom-title{
+        height: 27px;
+        // margin: 0 6px 4px 15px;
+        margin-left: 5px;
       }
     }
     .my-btn-main {
@@ -203,4 +356,35 @@ export default {
     }
   }
 }
+.van-icon.van-icon-arrow.van-cell__right-icon{
+  display: none;
+}
+.common{
+  margin: 10px;
+  width: 110px;
+  height: 26px;
+  font-size: 14px;
+  font-family: Source Han Sans CN;
+  font-weight: 600;
+  color: #333333;
+  line-height: 26px;
+  position: relative;
+  top: 0;
+  left: 0;
+  padding: 8px 609px 18px 15px;
+}
+.top{
+  width: 100%;
+  height:140px;
+  position: relative;
+  top: 0;
+
+}
+.bottom{
+  width: 100%;
+  position: relative;
+  left: 0;
+  box-sizing: border-box;
+  background-color: #FFF;
+}
 </style>

src/views/order/orderRes.vue

@@ -492,4 +492,5 @@ input[type="search"]::-webkit-search-cancel-button {
     }
   }
 }
+
 </style>