H5我的界面

src/App.vue

@@ -31,11 +31,11 @@ html {
         position: absolute;
         z-index: 1;
         width: 100%;
-        height: 140px;
+        height: 84px;
         margin: 0 0;
         padding:0;
         box-sizing: border-box;
-        background: linear-gradient(0deg,  #FFF 30%  ,#f3d028 100% );
+        background: linear-gradient(0deg,  #fafafa 0%  ,#f3d028 100% );
       }
       .layout,
       .address,

src/views/address/index.vue

@@ -12,6 +12,7 @@
     <van-address-list
       v-model="chosenAddressId"
       :list="list"
+      default-tag-text="默认"
       :disabled-list="[]"
       @add="onAdd"
       @select="onSelect"
@@ -24,6 +25,7 @@
     >
       点击加载更多！
     </div>
+
     <!-- v-if="list && list.length > 0" -->
     <!-- <van-empty v-else description="暂无地址！" /> -->
   </div>
@@ -47,6 +49,13 @@ export default {
         size: 10, // 每页显示条数
       },
       loading: false,
+      // disabledList: [
+      //   {
+      //     name:this.list.name,
+      //     tel:this.list.mobile,
+      //     address:this.list.address
+      //   },
+      // ]
     };
   },
   async created() {
@@ -148,12 +157,14 @@ export default {
               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);//把arr数组解构放到list列表渲染
+          console.log(this.list);
+          this.list[1].isDefault = true;
           if (this.chosenAddressId === "" && this.list.length > 0) {
             this.chosenAddressId = this.list[0].id;
           }
@@ -202,14 +213,89 @@ export default {
     width: 100%;
   }
 }
+//页面中 “我的地址”的样式
 .van-nav-bar-my-fixed /deep/ .van-nav-bar__title.van-ellipsis{
-    width: 71px;
-    height: 34px;
-    font-size: 36px;
+    width: 72px;
+    height: 17px;
+    font-size: 18px;
     font-family: Source Han Sans CN;
     font-weight: 500;
     color: #1A1A1A;
-    line-height: 6px;
+    line-height: 16px;
+}
+//隐藏地址选项中前面的勾选按钮
+ .van-address-list /deep/ .van-radio__icon.van-radio__icon--round{
+  display: none;
+}
+//收货人及手机号信息
+.van-address-list /deep/ .van-address-item__name{
+  width: 100%;
+  height: 15px;
+  font-size: 15px;
+  font-family: Source Han Sans CN;
+  font-weight: 500;
+  color: #333333;
+  line-height: 6px;
+}
+//地址栏字体样式
+.van-address-list /deep/ .van-address-item__address{
+  width: 247px;
+  height: 13px;
+  font-size: 13px;
+  font-family: Source Han Sans CN;
+  font-weight: 400;
+  color: #999999;
+  line-height: 13px;
+}
+//地址栏收货人+手机号样式
+.van-address-list /deep/ .van-address-item__name{
+  width: 100%;
+  height: 22px;
+  font-size: 15px;
+  font-family: DIN;
+  font-weight: 500;
+  color: #333333;
+  line-height: 12px;
+}
+//修改地址的图标
+.van-address-list /deep/ .van-icon.van-icon-edit.van-address-item__edit::before{
+  width: 15px;
+  height: 15px;
+}
+//每个地址栏选项之间的间隔
+.van-address-item{
+  margin: 10px 0;
+}
+//整体的地址栏选项框的位置
+.van-radio-group{
+  margin-top: 30px;
+}
+//默认提示
+.van-tag.van-tag--round.van-tag--danger.van-address-item__tag{
+  width: 32px;
+  height: 15px;
+  background: #F4D022;
+  border-radius: 15px;
+  text-align: center;
+  font-size: 10px;
+  font-family: Source Han Sans CN;
+  font-weight: 400;
+  color: #333333;
+  line-height: 15px;
+  padding: 2px 6px;
+  display: block;
+  text-align: center;
+  margin-left: 20px;
+}
+//新增地址按钮
+.van-button.van-button--danger.van-button--normal.van-button--block.van-button--round.van-address-list__add{
+  width: 80%;
+  background: #F4D022;
+  border-radius: 30px;
+  position: relative;
+  left: 50%;
+  bottom: 144px;
+  transform: translateX(-50%);
 }
 
 </style>

src/views/address/view.vue

@@ -11,6 +11,7 @@
       :show-search-result="false"
       :search-result="[]"
       :area-columns-placeholder="['请选择', '请选择', '请选择']"
+      default-tag-text="默认"
       @save="onSave"
     />
   </div>
@@ -35,6 +36,7 @@ export default {
         areaCode: "",
       },
       loading: false,
+      isDefault:false,
     };
   },
   async created() {
@@ -140,4 +142,5 @@ export default {
     clear: both;
   }
 }
+
 </style>

src/views/login/index.vue

@@ -5,6 +5,9 @@
     </div>
     <div class="login-main">
       <div class="logo-header">
+        <div class="login-img">
+          <img src="@/assets/img/login.png" alt="">
+        </div>
         <p class="logo-header-title">登录</p>
         <p class="logo-header-tips">登陆享受更多精彩</p>
       </div>
@@ -217,18 +220,23 @@ export default {
     .logo-header {//上半部分登陆盒子，用来展示一张图片
       // padding: 50% 0 10% 0;
       width: 100%;
-      height: 209px;
-      background-image: url("~@/img/login.png");
-      background-repeat: no-repeat;
-      background-position: -145px -1px;
+      height: 309px;
+      .login-img{
+        width: 100%;
+        position: absolute;
+        left: 0;
+        top: 0;
+        img{
+          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;
         margin: 0px;
         font-weight: bold;
         padding: 91px 256px 99px 37px;
@@ -240,6 +248,7 @@ export default {
         font-weight: bold;
         color: #FFFFFF;
         line-height: 20px;
+        position: absolute;
       }
       .logo-header-tips{//登陆文字下提示内容
         position: absolute;
@@ -262,7 +271,7 @@ export default {
       border-top-left-radius: 40px;
       border-top-right-radius: 40px;
       position: relative;
-      top: -50px;
+      top: -145px;
       left: 0;
       ul {
         border-radius: 20px;

src/views/my/index.vue

@@ -239,7 +239,7 @@ export default {
       .vip-bg{
         border-top-left-radius: 25px;
         border-top-right-radius: 25px;
-        width: 305px;
+        width: 80%;
         height: 49px;
         position: absolute;
         left: 50%;
@@ -308,7 +308,7 @@ export default {
     .my-btn-main {
       width: 100%;
       margin: 18vh 0 0 0;
-      padding: 0 16px;
+      // padding: 0 16px;
       box-sizing: border-box;
       .my-button {
         box-sizing: border-box;
@@ -328,6 +328,9 @@ export default {
         left: 0;
         top: 0;
         text-align: center;
+        img{
+          margin: 0 44px;
+        }
       }
       .cell-my-img {
         display: block;
@@ -340,6 +343,8 @@ export default {
         // margin: 0 6px 4px 15px;
         margin-left: 5px;
       }
+      
+      
     }
     .my-btn-main {
       width: 100%;
@@ -387,4 +392,7 @@ export default {
   box-sizing: border-box;
   background-color: #FFF;
 }
+.custom-title{
+  font-size: 12px;
+}
 </style>