我的

src/assets/svgs/login_icon_code.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>login_icon_mima</title>
+    <g id="第九空间" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g id="验证码登陆" transform="translate(-46.000000, -265.000000)" stroke="#FDFB60" stroke-width="1.2">
+            <g id="编组-11备份-11" transform="translate(46.000000, 253.000000)">
+                <g id="编组-7" transform="translate(0.000000, 12.000000)">
+                    <path d="M6.2121614,5.48050226 L12,3 L12,3 L17.7878386,5.48050226 C18.5232063,5.79565984 19,6.5187361 19,7.31879232 L19,12 C19,15.6399494 16.8307712,18.9296695 13.4851298,20.3635158 L12,21 L12,21 L10.5148702,20.3635158 C7.16922878,18.9296695 5,15.6399494 5,12 L5,7.31879232 C5,6.5187361 5.47679371,5.79565984 6.2121614,5.48050226 Z" id="矩形"></path>
+                    <polyline id="直线" points="9.21869985 10.9921433 10.7186999 13.2421433 15.2186999 10.2421433"></polyline>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/assets/svgs/login_icon_mima.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>login_icon_mima</title>
+    <g id="第九空间" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g id="账号密码登录" transform="translate(-46.000000, -265.000000)" stroke="#FDFB60" stroke-width="1.2">
+            <g id="编组-11备份-11" transform="translate(46.000000, 253.000000)">
+                <g id="编组-7" transform="translate(0.000000, 12.000000)">
+                    <g id="编组-4" transform="translate(4.500000, 3.000000)">
+                        <path d="M2,8 L13,8 C14.1045695,8 15,8.8954305 15,10 L15,16 C15,17.1045695 14.1045695,18 13,18 L2,18 C0.8954305,18 1.3527075e-16,17.1045695 0,16 L0,10 C-1.3527075e-16,8.8954305 0.8954305,8 2,8 Z" id="矩形"></path>
+                        <line x1="7.5" y1="11.5" x2="7.5" y2="14.5" id="直线"></line>
+                        <path d="M12,3 L12,3.5 C12,5.98528137 9.98528137,8 7.5,8 C5.01471863,8 3,5.98528137 3,3.5 C3,3 3,2.5 3,2 C3,2 3,1.66666667 3,1 L3,0" id="路径" transform="translate(7.500000, 4.000000) scale(1, -1) translate(-7.500000, -4.000000) "></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/assets/svgs/login_icon_zhanghao.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>login_icon_zhanghao</title>
+    <g id="第九空间" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g id="账号密码登录" transform="translate(-46.000000, -201.000000)" stroke="#FDFB60" stroke-width="1.2">
+            <g id="编组-11备份-11" transform="translate(46.000000, 189.000000)">
+                <g id="编组-6" transform="translate(0.000000, 12.000000)">
+                    <g id="编组-2" transform="translate(4.500000, 3.000000)">
+                        <path d="M2.5,0 L12.5,0 C13.6045695,-2.02906125e-16 14.5,0.8954305 14.5,2 L14.5,16 C14.5,17.1045695 13.6045695,18 12.5,18 L2.5,18 C1.3954305,18 0.5,17.1045695 0.5,16 L0.5,2 C0.5,0.8954305 1.3954305,2.02906125e-16 2.5,0 Z" id="矩形"></path>
+                        <path d="M2.5,0 L12.5,0 C13.6045695,-2.02906125e-16 14.5,0.8954305 14.5,2 L14.5,12 L14.5,12 L0.5,12 L0.5,2 C0.5,0.8954305 1.3954305,2.02906125e-16 2.5,0 Z" id="矩形"></path>
+                        <line x1="5.5" y1="15" x2="9.5" y2="15" id="直线"></line>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/router/index.js

@@ -31,6 +31,26 @@ const routes = [
       },
     ],
   },
+  {
+    path: "/login",
+    name: "userLogin",
+    component: () => import("../views/user/Login.vue"),
+  },
+  {
+    path: "/register",
+    name: "userRegister",
+    component: () => import("../views/user/Register.vue"),
+  },
+  {
+    path: "/forget",
+    name: "userForget",
+    component: () => import("../views/user/Forget.vue"),
+  },
+  {
+    path: "/verified",
+    name: "userVerified",
+    component: () => import("../views/user/Verified.vue"),
+  },
   {
     path: "/about",
     name: "About",

src/styles/app.less

@@ -6,6 +6,7 @@
   --van-cell-background-color: @bg;
   --van-text-color: #fff;
   --van-gray-6: #939599;
+  --van-gray-3: @bg3;
   --van-tabbar-item-active-color: #fff;
   --van-button-plain-background-color: transparent;
   --van-grid-item-content-background-color: transparent;
@@ -16,9 +17,18 @@
   --van-tabs-bottom-bar-color: @prim;
   --van-tab-active-text-color: @prim;
   --van-tab-disabled-text-color: #fff;
+  --van-cell-border-color: @bg3;
+  --van-cell-background-color: transparent;
+  --van-cell-group-background-color: transparent;
+  --van-font-size-lg: 14px;
 }
 
 body {
   font-size: 14px;
   color: var(--van-text-color);
 }
+
+input:-webkit-autofill {
+  box-shadow: 0 0 0px 1000px @bg inset;
+  -webkit-text-fill-color: #fff;
+}

src/views/Discover.vue

@@ -127,11 +127,11 @@ export default {
     };
   },
   beforeUnmount() {
-    console.log(this.stiky);
-    console.log(this.stiky.parentNode);
-    // this.$nextTick(() => {
-    //   document.body.removeChild(this.stiky);
-    // });
+    if (this.stiky.parentNode.nodeName == "BODY") {
+      this.$nextTick(() => {
+        document.body.removeChild(this.stiky);
+      });
+    }
   },
   mounted() {
     this.$nextTick(() => {
@@ -140,7 +140,6 @@ export default {
   },
   methods: {
     change(isFixed) {
-      console.log(this.stiky.parentNode);
       if (isFixed) {
         this.$nextTick(() => {
           document.body.appendChild(this.stiky);

src/views/Mine.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="mine">
     <div class="top">
       <van-image
         round
@@ -49,7 +49,7 @@
 
     <van-cell class="title" title="我的服务" :border="false" />
 
-    <van-cell-group>
+    <van-cell-group :border="false" class="menu">
       <van-cell title="钱包" is-link>
         <template #icon>
           <van-icon
@@ -58,6 +58,55 @@
           />
         </template>
       </van-cell>
+
+      <van-cell title="积分" is-link>
+        <template #icon>
+          <van-icon
+            :name="require('../assets/svgs/icon-jifen.svg')"
+            class="search-icon"
+          />
+        </template>
+      </van-cell>
+      <van-cell title="我赞过的" is-link>
+        <template #icon>
+          <van-icon
+            :name="require('../assets/svgs/icon-dianzan.svg')"
+            class="search-icon"
+          />
+        </template>
+      </van-cell>
+      <van-cell title="地址管理" is-link>
+        <template #icon>
+          <van-icon
+            :name="require('../assets/svgs/icon_dizhi.svg')"
+            class="search-icon"
+          />
+        </template>
+      </van-cell>
+      <van-cell title="了解更多" is-link>
+        <template #icon>
+          <van-icon
+            :name="require('../assets/svgs/icon_liaojiegengduo.svg')"
+            class="search-icon"
+          />
+        </template>
+      </van-cell>
+      <van-cell title="关于我们" is-link>
+        <template #icon>
+          <van-icon
+            :name="require('../assets/svgs/icon-guanyuwomen.svg')"
+            class="search-icon"
+          />
+        </template>
+      </van-cell>
+      <van-cell title="账号与安全" is-link>
+        <template #icon>
+          <van-icon
+            :name="require('../assets/svgs/icon-anquan.svg')"
+            class="search-icon"
+          />
+        </template>
+      </van-cell>
     </van-cell-group>
   </div>
 </template>
@@ -67,11 +116,15 @@ export default {};
 </script>
 
 <style lang="less" scoped>
+.mine {
+  padding-bottom: 98px;
+  background-color: @bg2;
+}
 .top {
   display: flex;
   align-items: center;
   padding: 26px 16px 30px;
-  border-bottom: 5px solid #202122;
+  border-bottom: 5px solid @bg3;
 
   .text {
     margin-left: 12px;
@@ -126,4 +179,32 @@ export default {};
     margin-top: 4px;
   }
 }
+
+/deep/.menu {
+  .van-cell {
+    padding: 22px 20px 24px;
+
+    &::after {
+      left: 52px;
+      right: 16px;
+    }
+  }
+
+  .van-cell__title {
+    span {
+      font-weight: bold;
+    }
+  }
+}
+
+.search-icon {
+  width: 24px;
+  height: 24px;
+  margin-right: 10px;
+  /deep/.van-icon__image {
+    width: 24px;
+    height: 24px;
+    display: block;
+  }
+}
 </style>

src/views/Store.vue

@@ -63,10 +63,12 @@ export default {
       this.stiky = this.$refs.top.$el.childNodes[0];
     });
   },
-  unmounted() {
-    this.$nextTick(() => {
-      document.body.removeChild(this.stiky);
-    });
+  beforeUnmount() {
+    if (this.stiky.parentNode.nodeName == "BODY") {
+      this.$nextTick(() => {
+        document.body.removeChild(this.stiky);
+      });
+    }
   },
   methods: {
     change(isFixed) {

src/views/user/Forget.vue

@@ -0,0 +1,186 @@
+<template>
+  <div class="login">
+    <div class="tabs">
+      <div class="tab active">设置新密码</div>
+    </div>
+
+    <van-form @submit="submit">
+      <van-field
+        type="tel"
+        name="用户名"
+        placeholder="请输入用户名"
+        v-model="form.phone"
+        :maxlength="11"
+        :rules="[{ required: true, message: '请填写用户名' }]"
+      >
+        <template #left-icon>
+          <img
+            :src="require('../../assets/svgs/login_icon_zhanghao.svg')"
+            class="icon"
+          />
+        </template>
+      </van-field>
+
+      <van-field
+        type="digit"
+        name="验证码"
+        placeholder="请输入验证码"
+        v-model="form.code"
+        :maxlength="4"
+        :rules="[{ required: true, message: '请输入验证码' }]"
+      >
+        <template #left-icon>
+          <img
+            :src="require('../../assets/svgs/login_icon_code.svg')"
+            class="icon"
+          />
+        </template>
+        <template #button>
+          <van-button class="sub-code" size="small" plain type="primary"
+            >发送验证码</van-button
+          >
+        </template>
+      </van-field>
+
+      <van-field
+        type="password"
+        name="密码"
+        placeholder="请输入密码"
+        v-model="form.password"
+        :rules="[{ required: true, message: '请填写密码' }]"
+      >
+        <template #left-icon>
+          <img
+            :src="require('../../assets/svgs/login_icon_mima.svg')"
+            class="icon"
+          />
+        </template>
+      </van-field>
+
+      <van-field
+        type="password"
+        name="密码"
+        placeholder="请再次输入密码"
+        v-model="form.password2"
+        :rules="[{ required: true, message: '请再次填写密码' }]"
+      >
+        <template #left-icon>
+          <img
+            :src="require('../../assets/svgs/login_icon_mima.svg')"
+            class="icon"
+          />
+        </template>
+      </van-field>
+
+      <div class="button">
+        <van-button
+          round
+          block
+          native-type="submit"
+          color="linear-gradient(to right, #FDFB60, #FF8F3E)"
+          class="sure"
+          @click="$router.push('/register')"
+          >立即注册</van-button
+        >
+        <van-button
+          class="del"
+          round
+          block
+          native-type="submit"
+          plain
+          @click="$router.push('/login')"
+          >想起密码，立即登陆</van-button
+        >
+      </div>
+    </van-form>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      active: "phone",
+      form: {
+        phone: "",
+        password: "",
+        password2: "",
+        code: "",
+      },
+    };
+  },
+  methods: {
+    submit() {
+      console.log("63772");
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.login {
+  padding: 40px 50px 100px;
+}
+
+.tabs {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  .tab {
+    font-size: 18px;
+    color: #c8c9cc;
+    line-height: 25px;
+
+    &.active {
+      font-size: 24px;
+      font-weight: bold;
+      color: #ffffff;
+      line-height: 33px;
+    }
+  }
+}
+
+.icon {
+  display: block;
+  margin-top: 12px;
+}
+/deep/ .van-form {
+  margin-top: 28px;
+  .van-cell {
+    padding: 0px 0;
+
+    .van-field__left-icon {
+      margin-right: 8px;
+    }
+  }
+
+  .van-cell + .van-cell {
+    margin-top: 20px;
+  }
+  .van-field__body {
+    height: 44px;
+    align-items: center;
+  }
+}
+.button {
+  margin-top: 60px;
+
+  .del {
+    margin-top: 20px;
+    border-color: #ffffff;
+  }
+
+  .sure {
+    color: @bg !important;
+  }
+
+  .van-button {
+    font-weight: bold;
+  }
+}
+
+.sub-code {
+  padding-right: 0;
+  border-width: 0;
+}
+</style>

src/views/user/Login.vue

@@ -0,0 +1,190 @@
+<template>
+  <div class="login">
+    <div class="tabs">
+      <div
+        class="tab"
+        :class="{ active: active === 'phone' }"
+        @click="active = 'phone'"
+      >
+        账号密码登陆
+      </div>
+      <div
+        class="tab"
+        :class="{ active: active === 'code' }"
+        @click="active = 'code'"
+      >
+        验证码登陆
+      </div>
+    </div>
+
+    <van-form @submit="submit">
+      <van-field
+        type="tel"
+        name="用户名"
+        placeholder="请输入用户名"
+        v-model="form.phone"
+        :rules="[{ required: true, message: '请填写用户名' }]"
+      >
+        <template #left-icon>
+          <img
+            :src="require('../../assets/svgs/login_icon_zhanghao.svg')"
+            class="icon"
+          />
+        </template>
+      </van-field>
+      <van-field
+        type="password"
+        name="密码"
+        placeholder="请输入密码"
+        v-model="form.password"
+        :rules="[{ required: true, message: '请填写密码' }]"
+        v-if="active === 'phone'"
+      >
+        <template #left-icon>
+          <img
+            :src="require('../../assets/svgs/login_icon_mima.svg')"
+            class="icon"
+          />
+        </template>
+      </van-field>
+
+      <van-field
+        type="code"
+        name="验证码"
+        placeholder="请输入验证码"
+        v-model="form.code"
+        v-else
+        :rules="[{ required: true, message: '请输入验证码' }]"
+      >
+        <template #left-icon>
+          <img
+            :src="require('../../assets/svgs/login_icon_code.svg')"
+            class="icon"
+          />
+        </template>
+        <template #button>
+          <van-button class="sub-code" size="small" plain type="primary"
+            >发送验证码</van-button
+          >
+        </template>
+      </van-field>
+      <div class="button">
+        <van-button plain class="forget">忘记密码？</van-button>
+
+        <van-button
+          round
+          block
+          native-type="submit"
+          color="linear-gradient(to right, #FDFB60, #FF8F3E)"
+          class="sure"
+          >登录</van-button
+        >
+        <van-button
+          class="del"
+          round
+          block
+          native-type="submit"
+          plain
+          @click="$router.push('/register')"
+          >暂无账号，立即注册</van-button
+        >
+      </div>
+    </van-form>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      active: "phone",
+      form: {
+        phone: "",
+        password: "",
+        code: "",
+      },
+    };
+  },
+  methods: {
+    submit() {
+      console.log("63772");
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.login {
+  padding: 40px 50px 100px;
+}
+
+.tabs {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  .tab {
+    font-size: 18px;
+    color: #c8c9cc;
+    line-height: 25px;
+
+    &.active {
+      font-size: 24px;
+      font-weight: bold;
+      color: #ffffff;
+      line-height: 33px;
+    }
+  }
+}
+
+.icon {
+  display: block;
+  margin-top: 12px;
+}
+/deep/ .van-form {
+  margin-top: 28px;
+  .van-cell {
+    padding: 0px 0;
+
+    .van-field__left-icon {
+      margin-right: 8px;
+    }
+  }
+
+  .van-cell + .van-cell {
+    margin-top: 20px;
+  }
+  .van-field__body {
+    height: 44px;
+    align-items: center;
+  }
+}
+.button {
+  margin-top: 60px;
+  position: relative;
+
+  .del {
+    margin-top: 20px;
+    border-color: #ffffff;
+  }
+
+  .sure {
+    color: @bg !important;
+  }
+
+  .van-button {
+    font-weight: bold;
+  }
+}
+
+.sub-code {
+  padding-right: 0;
+  border-width: 0;
+}
+
+.forget {
+  position: absolute;
+  font-weight: normal !important;
+  right: 0;
+  top: -65px;
+}
+</style>

src/views/user/Register.vue

@@ -0,0 +1,185 @@
+<template>
+  <div class="login">
+    <div class="tabs">
+      <div class="tab active">用户注册</div>
+    </div>
+
+    <van-form @submit="submit">
+      <van-field
+        type="tel"
+        name="用户名"
+        placeholder="请输入用户名"
+        v-model="form.phone"
+        :maxlength="11"
+        :rules="[{ required: true, message: '请填写用户名' }]"
+      >
+        <template #left-icon>
+          <img
+            :src="require('../../assets/svgs/login_icon_zhanghao.svg')"
+            class="icon"
+          />
+        </template>
+      </van-field>
+
+      <van-field
+        type="digit"
+        name="验证码"
+        placeholder="请输入验证码"
+        v-model="form.code"
+        :maxlength="4"
+        :rules="[{ required: true, message: '请输入验证码' }]"
+      >
+        <template #left-icon>
+          <img
+            :src="require('../../assets/svgs/login_icon_code.svg')"
+            class="icon"
+          />
+        </template>
+        <template #button>
+          <van-button class="sub-code" size="small" plain type="primary"
+            >发送验证码</van-button
+          >
+        </template>
+      </van-field>
+
+      <van-field
+        type="password"
+        name="密码"
+        placeholder="请输入密码"
+        v-model="form.password"
+        :rules="[{ required: true, message: '请填写密码' }]"
+      >
+        <template #left-icon>
+          <img
+            :src="require('../../assets/svgs/login_icon_mima.svg')"
+            class="icon"
+          />
+        </template>
+      </van-field>
+
+      <van-field
+        type="password"
+        name="密码"
+        placeholder="请再次输入密码"
+        v-model="form.password2"
+        :rules="[{ required: true, message: '请再次填写密码' }]"
+      >
+        <template #left-icon>
+          <img
+            :src="require('../../assets/svgs/login_icon_mima.svg')"
+            class="icon"
+          />
+        </template>
+      </van-field>
+
+      <div class="button">
+        <van-button
+          round
+          block
+          native-type="submit"
+          color="linear-gradient(to right, #FDFB60, #FF8F3E)"
+          class="sure"
+          >登录</van-button
+        >
+        <van-button
+          class="del"
+          round
+          block
+          native-type="submit"
+          plain
+          @click="$router.push('/login')"
+          >已有账号，立即登陆</van-button
+        >
+      </div>
+    </van-form>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      active: "phone",
+      form: {
+        phone: "",
+        password: "",
+        password2: "",
+        code: "",
+      },
+    };
+  },
+  methods: {
+    submit() {
+      console.log("63772");
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.login {
+  padding: 40px 50px 100px;
+}
+
+.tabs {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  .tab {
+    font-size: 18px;
+    color: #c8c9cc;
+    line-height: 25px;
+
+    &.active {
+      font-size: 24px;
+      font-weight: bold;
+      color: #ffffff;
+      line-height: 33px;
+    }
+  }
+}
+
+.icon {
+  display: block;
+  margin-top: 12px;
+}
+/deep/ .van-form {
+  margin-top: 28px;
+  .van-cell {
+    padding: 0px 0;
+
+    .van-field__left-icon {
+      margin-right: 8px;
+    }
+  }
+
+  .van-cell + .van-cell {
+    margin-top: 20px;
+  }
+  .van-field__body {
+    height: 44px;
+    align-items: center;
+  }
+}
+.button {
+  margin-top: 60px;
+
+  .del {
+    margin-top: 20px;
+    border-color: #ffffff;
+  }
+
+  .sure {
+    color: @bg !important;
+  }
+
+  .van-button {
+    font-weight: bold;
+  }
+}
+
+.sub-code {
+  padding-right: 0;
+  border-width: 0;
+}
+</style>

src/views/user/Verified.vue

@@ -0,0 +1,182 @@
+<template>
+  <div class="login">
+    <div class="tabs">
+      <div class="tab active">实名认证</div>
+    </div>
+
+    <van-form @submit="submit">
+      <van-field
+        type="tel"
+        label="姓名"
+        name="姓名"
+        placeholder="请输入您真实姓名"
+        v-model="form.name"
+        :rules="[{ required: true, message: '请输入您真实姓名' }]"
+      >
+      </van-field>
+
+      <van-field
+        type="tel"
+        label="手机号码"
+        name="手机号码"
+        placeholder="请输入您的手机号码"
+        v-model="form.phone"
+        :maxlength="11"
+        :rules="[{ required: true, message: '请输入您的手机号码' }]"
+      >
+      </van-field>
+
+      <van-field
+        type="digit"
+        label="电子邮箱"
+        name="电子邮箱"
+        placeholder="请输入电子邮箱"
+        v-model="form.mail"
+        :rules="[{ required: true, message: '请输入电子邮箱' }]"
+      >
+      </van-field>
+
+      <van-field
+        type="digit"
+        label="身份证号"
+        name="身份证号"
+        placeholder="请输入身份证号"
+        v-model="form.no"
+        :rules="[{ required: true, message: '请输入身份证号' }]"
+      >
+      </van-field>
+
+      <div class="img">
+        <div class="img-label">身份证照片<br />（正面照）</div>
+        <van-uploader :after-read="afterRead" />
+      </div>
+      <div class="img">
+        <div class="img-label">身份证照片<br />（反面照）</div>
+        <van-uploader :after-read="afterRead" />
+      </div>
+
+      <div class="button">
+        <van-button
+          round
+          block
+          native-type="submit"
+          color="linear-gradient(to right, #FDFB60, #FF8F3E)"
+          class="sure"
+        >
+          提交审核
+        </van-button>
+      </div>
+    </van-form>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      active: "phone",
+      form: {
+        name: "",
+        phone: "",
+        mail: "",
+        no: "",
+      },
+    };
+  },
+  methods: {
+    submit() {
+      console.log("63772");
+    },
+    afterRead(file) {
+      console.log(file);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.login {
+  padding: 10px 16px 100px;
+}
+
+.tabs {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  .tab {
+    font-size: 18px;
+    color: #c8c9cc;
+    line-height: 25px;
+
+    &.active {
+      font-size: 24px;
+      font-weight: bold;
+      color: #ffffff;
+      line-height: 33px;
+    }
+  }
+}
+
+.icon {
+  display: block;
+  margin-top: 12px;
+}
+/deep/ .van-form {
+  // margin-top: 28px;
+  .van-cell {
+    padding: 0px 0;
+
+    .van-field__left-icon {
+      margin-right: 8px;
+    }
+  }
+
+  .van-field__body {
+    height: 70px;
+    align-items: center;
+  }
+
+  .van-field__label {
+    font-size: 14px;
+    font-weight: bold;
+    color: #ffffff;
+    line-height: 24px;
+    margin-top: 25px;
+  }
+}
+.button {
+  margin-top: 60px;
+
+  .del {
+    margin-top: 20px;
+    border-color: #ffffff;
+  }
+
+  .sure {
+    color: @bg !important;
+  }
+
+  .van-button {
+    font-weight: bold;
+  }
+}
+
+.sub-code {
+  padding-right: 0;
+  border-width: 0;
+}
+
+.img {
+  display: flex;
+  padding: 20px 0 10px;
+
+  .img-label {
+    font-size: 14px;
+    font-weight: bold;
+    color: #ffffff;
+    line-height: 20px;
+    margin: 5px 12px 5px 0;
+    min-width: 86px;
+  }
+}
+</style>