激活码

src/api/home.js

@@ -1378,4 +1378,59 @@ export default {
       data
     })
   },
+  // 激活码使用
+  activateCode(data) {
+    return request.request({
+      url: '/codeno/activate',
+      method: "post",
+      headers: {
+        'Accept-Language': localStorage.getItem('language') || 'zh-cn',
+      },
+      data
+    })
+  },
+  // 激活码列表
+  activateCodeList(data) {
+    return request.request({
+      url: '/codeno/list',
+      method: "post",
+      headers: {
+        'Accept-Language': localStorage.getItem('language') || 'zh-cn',
+      },
+      data
+    })
+  },
+  // 生成激活码
+  activateCodeGenerate(data) {
+    return request.request({
+      url: '/codeno/generate',
+      method: "post",
+      headers: {
+        'Accept-Language': localStorage.getItem('language') || 'zh-cn',
+      },
+      data
+    })
+  },
+  // 剩余激活数量
+  activateCodeRemaining(data) {
+    return request.request({
+      url: '/codeno/remaining',
+      method: "post",
+      headers: {
+        'Accept-Language': localStorage.getItem('language') || 'zh-cn',
+      },
+      data
+    })
+  },
+  // 社区统计
+  getCommunityCount(data) {
+    return request.request({
+      url: '/codeno/count',
+      method: "post",
+      headers: {
+        'Accept-Language': localStorage.getItem('language') || 'zh-cn',
+      },
+      data
+    })
+  },
 }

src/language/en.json

@@ -495,5 +495,21 @@
   "lang494": "Daily output",
   "lang495": "Storage of tea rights",
   "lang496": "Please enter the name of the tea rights",
-  "lang497": "TeaC·EcologyDevelop"
+  "lang497": "TeaC·EcologyDevelop",
+  "lang498": "Activate Upgrade",
+  "lang499": "Generate Activation Code",
+  "lang500": "Activate",
+  "lang501": "Please enter the activation code",
+  "lang502": "Activate Now",
+  "lang503": "Community Manager",
+  "lang504": "Ecosystem Manager",
+  "lang505": "Super Manager",
+  "lang506": "Registration Time",
+  "lang507": "Number of Remaining Codes:",
+  "lang508": "Generate Now",
+  "lang509": "To be used:",
+  "lang510": "Used:",
+  "lang511": "(*Click on the invitation code to copy)",
+  "lang512": "Activation Successful",
+  "lang513": "'God of Wealth Brings Joy' Gift Pack"
 }

src/language/zh.json

@@ -496,7 +496,29 @@
   "lang495": "存储茶权",
   "lang496": "请输入茶权名称",
   "lang497": "TeaC·生态发展",
-  "lang498": "",
-  "lang499": "",
-  "lang500": ""
+  "lang498": "激活升级",
+  "lang499": "生成激活码",
+  "lang500": "激活",
+  "lang501": "请输入激活码",
+  "lang502": "立即激活",
+  "lang503": "社区主理人",
+  "lang504": "生态主理人",
+  "lang505": "超级主理人",
+  "lang506": "注册时间",
+  "lang507": "剩余生成数：",
+  "lang508": "立即生成",
+  "lang509": "待使用：",
+  "lang510": "已使用：",
+  "lang511": "(*点击邀请码可复制)",
+  "lang512": "激活成功",
+  "lang513": "“财神送喜”礼包",
+  "lang514": "",
+  "lang515": "",
+  "lang516": "",
+  "lang517": "",
+  "lang518": "",
+  "lang519": "",
+  "lang520": "",
+  "lang521": "",
+  "lang522": ""
 }

src/router/index.js

@@ -36,6 +36,7 @@ import share from '../views/mine/share.vue';  //分享奖励
 import language from '../views/mine/language.vue';  //分享奖励
 import GoodsDetail from '../views/trade/detail.vue'; //详情
 import myTeaFriends from '../views/mine/myTeaFriends.vue';  //我的资产
+import createCode from '../views/mine/createCode.vue';  //生成激活码
 import setting from '../views/mine/setting.vue';  //设置
 // import TransferDetail from '../views/mine/TransferDetail.vue'; //寄售详情
 import recharge from '../views/mine/recharge.vue'; //充值
@@ -468,6 +469,14 @@ const routes = [
           requiresAuth: true
         }
       },
+      {
+        path: 'createCode',
+        name: 'createCode',
+        component: createCode,
+        meta: {
+          requiresAuth: true
+        }
+      },
     ],
   },
 ];

src/views/mine/createCode.vue

@@ -0,0 +1,395 @@
+<template>
+  <div class="product-detail-page">
+    <!-- 顶部返回按钮 -->
+    <div class="head">
+      <img @click="back" src="@/assets/images/back.png" class="arrow_img" />
+      <span>{{ $t('lang499') }}</span>
+    </div>
+    <div class="box">
+      <div class="box_item">
+        <div class="flex">
+          <img :src="userInfo.avatar" alt="" class="pic" />
+
+          <div class="right">
+            <div class="name_box">
+              <div class="name">UID：{{ userInfo.nickname }}</div>
+              <div class="name">{{ $t('lang35') }}{{ userInfo.address.slice(0, 6) + '****' + userInfo.address.slice(userInfo.address.length - 6, userInfo.address.length) || '' }}</div>
+              <div class="time">{{ $t('lang506') }}：{{ dateFormatFn(userInfo.create_time)  || '' }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="level_box">
+        <div v-for="(item, index) in levels" :key="index" :class="['level_item', { level_item_act: index == levelIndex }]" @click="changeCode(item, index)">
+          <span>{{ item.name }}</span>
+          <span>{{ $t('lang507') }}{{ item.value }}</span>
+        </div>
+      </div>
+      <div class="create_btn" @click="generate">{{ $t('lang508') }}</div>
+      <div class="bottom">
+        <div class="tip">{{ $t('lang509') }}</div>
+        <div class="code_box">
+          <div class="code_box_name">
+            {{ levels[levelIndex].name }}
+          </div>
+          <div class="code_item" v-if="normal.length > 0">
+            <div class="code copys" v-for="(item, index) in normal" :key="index" @click="copy" :data-clipboard-text="item.code_no">
+              {{ item.code_no }}
+            </div>
+          </div>
+          <div class="no_code" v-else>
+            {{ $t('lang60') }}
+          </div>
+        </div>
+        <div class="tip1">{{ $t('lang511') }}</div>
+      </div>
+      <div class="bottom">
+        <div class="tip">{{ $t('lang510') }}</div>
+        <div class="code_box">
+          <div class="code_box_name">
+            {{ levels[levelIndex].name }}
+          </div>
+          <div class="code_item" v-if="used.length > 0">
+            <div class="code" v-for="(item, index) in used" :key="index">
+              {{ item.code_no }}
+            </div>
+          </div>
+          <div class="no_code" v-else>
+            {{ $t('lang60') }}
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <van-overlay :show="loading">
+      <div class="wrapper" @click.stop>
+        <van-loading type="spinner" class="loading" />
+      </div>
+    </van-overlay>
+  </div>
+</template>
+<script>
+import { homeApi } from '@/api/index';
+import Clipboard from 'clipboard';
+import { dateFormat, typemat } from '@/utils/formatTool.js';
+export default {
+  data() {
+    return {
+      loading: false,
+      userInfo: {
+        address: '',
+      },
+      levels: [
+        {
+          name: this.$t('lang513'),
+          value: 0,
+          index: 0,
+        },
+        {
+          name: this.$t('lang503'),
+          value: 0,
+          index: 1,
+        },
+        {
+          name: this.$t('lang504'),
+          value: 0,
+          index: 2,
+        },
+        {
+          name: this.$t('lang505'),
+          value: 0,
+          index: 3,
+        },
+      ],
+      levelIndex: 0,
+      normal: [],
+      used: [],
+    };
+  },
+  mounted() {
+    this.getUserInfo();
+    this.getActivateCodeList();
+    this.getActivateCodeRemaining();
+  },
+  methods: {
+    back() {
+      this.$router.back();
+    },
+    getUserInfo() {
+      homeApi.getUserInfo({}).then(res => {
+        if (res.code == 200) {
+          this.userInfo = res.data;
+          console.log(this.userInfo);
+        } else {
+        }
+      });
+    },
+    // 激活码列表
+    getActivateCodeList() {
+      // level(0:V1 1:V2 2:V3 3:V4)
+      homeApi
+        .activateCodeList({
+          level: this.levels[this.levelIndex].index,
+        })
+        .then(res => {
+          if (res.code == 200) {
+            this.normal = res.data.normal;
+            this.used = res.data.used;
+          } else {
+          }
+        });
+    },
+    // 剩余激活数量
+    getActivateCodeRemaining() {
+      homeApi.activateCodeRemaining({}).then(res => {
+        if (res.code == 200) {
+          this.levels[0].value = res.data.level_v1;
+          this.levels[1].value = res.data.level_v2;
+          this.levels[2].value = res.data.level_v3;
+          this.levels[3].value = res.data.level_v4;
+        } else {
+        }
+      });
+    },
+    generate() {
+      homeApi.activateCodeGenerate({ level: this.levels[this.levelIndex].index }).then(res => {
+        if (res.code == 200) {
+          this.$toast(this.$t('lang152'));
+          this.getActivateCodeList();
+          this.getActivateCodeRemaining();
+        } else {
+        }
+      });
+    },
+    navigatorTo(name, id) {
+      if (name == 'service') {
+        console.log(this.$i18n.locale);
+        if (this.$i18n.locale == 'zh-cn') {
+          this.$router.push({ name, query: { id: this.configInfo.zh_serve_agree } });
+        } else if (this.$i18n.locale == 'en') {
+          this.$router.push({ name, query: { id: this.configInfo.en_serve_agree } });
+        }
+      } else {
+        this.$router.push({ name, query: { id: id } });
+      }
+    },
+    changeCode(item, index) {
+      this.levelIndex = index;
+      this.getActivateCodeList();
+    },
+    copy() {
+      // if (this.userinfo.address) {
+      var clipboard = new Clipboard('.copys');
+      clipboard.on('success', e => {
+        this.$toast(this.$t('lang45'));
+        clipboard.destroy(); // 释放内存
+      });
+      clipboard.on('error', e => {
+        this.$toast(this.$t('lang46'));
+        clipboard.destroy(); // 释放内存
+      });
+      // }
+    },
+    dateFormatFn(date) {
+      return dateFormat(new Date(date * 1000), 'yyyy-MM-dd hh:mm:ss');
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.head {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: rgba(#000, 0.8);
+  letter-spacing: 1.5px;
+  font-weight: 550;
+  background: #fff;
+  padding: 14px 0;
+  z-index: 99;
+  .arrow_img {
+    position: absolute;
+    left: 20px;
+    width: 10px;
+    height: 16px;
+    // transform: translate(0, -50%);
+  }
+}
+.box {
+  width: 100%;
+  height: 100vh;
+  color: #000;
+  font-size: 13px;
+  padding: 10px 16px;
+  margin: 60px 0;
+  box-sizing: border-box;
+  background-color: #fff;
+  .grey {
+    color: #535353;
+  }
+  .black {
+    color: #000;
+  }
+  .grey-8 {
+    color: #535353;
+  }
+
+  &_item {
+    font-size: 12px;
+    letter-spacing: 1px;
+    padding: 10px 0;
+    margin-bottom: 10px;
+    border-bottom: 1px solid #dadada;
+    background-color: #fff;
+    .pic {
+      width: 70px;
+      height: 70px;
+      border-radius: 8px;
+    }
+
+    .right {
+      padding-left: 14px;
+      .name_box {
+        color: #808080;
+        font-size: 11px;
+        line-height: 200%;
+
+        .name {
+          color: #000;
+          font-size: 13px;
+        }
+      }
+      .qiu {
+        padding-top: 8px;
+        &_price {
+          font-size: 17px;
+          font-weight: 600;
+          margin-left: -2px;
+          margin-top: -3px;
+        }
+      }
+    }
+  }
+  .level_box {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    margin-top: 10px;
+    .level_item {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      text-align: center;
+      width: 48.5%;
+      padding: 8px 0;
+      margin-bottom: 10px;
+      border-radius: 6px;
+      background-color: #f5f5f5;
+      span:first-child {
+        font-size: 13px;
+        margin-bottom: 5px;
+      }
+      span:last-child {
+        font-size: 12px;
+        color: #292929;
+      }
+    }
+    .level_item_act {
+      color: #fff;
+      background-color: #1dc297;
+
+      span:last-child {
+        color: #f1f1f1;
+      }
+    }
+  }
+
+  .create_btn {
+    color: #fff;
+    text-align: center;
+    padding: 8px 0;
+    border-radius: 20px;
+    margin-top: 12px;
+    background-color: #1dc297;
+  }
+  .bottom {
+    margin-top: 16px;
+
+    .tip {
+      font-size: 12px;
+      color: #5a5a5a;
+      padding: 6px 0 10px;
+    }
+    .tip1 {
+      font-size: 11px;
+      color: #747474;
+      padding: 6px 0 8px;
+    }
+
+    .code_box {
+      padding: 10px;
+      border-radius: 6px;
+      background-color: #ebebeb;
+
+      &_name {
+        font-size: 12px;
+        color: #5e5e5e;
+        margin-bottom: 10px;
+      }
+
+      .code_item {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr); /* 一行 3 列，每列平分宽度 */
+        gap: 10px; /* 元素之间的间距，可根据需要调整 */
+        margin: 0px 0 6px;
+        .code {
+          // width: 30%;
+          color: #292929;
+          text-align: center;
+          font-size: 12px;
+          padding: 4px 0;
+          // margin: 10px 0 0;
+          border-radius: 6px;
+          background-color: #fff;
+        }
+        .copys {
+          color: #fff;
+          background-color: #1DC297
+        }
+      }
+      .no_code {
+        font-size: 12px;
+        color: #5e5e5e;
+        text-align: center;
+        margin: 10px 0;
+      }
+    }
+  }
+}
+.flex {
+  display: flex;
+  align-items: center;
+}
+.sb {
+  justify-content: space-between;
+}
+
+/deep/.van-button--disabled {
+  opacity: 0.6;
+}
+.wrapper {
+  // display: flex;
+  // justify-content: center;
+  .loading {
+    position: absolute;
+    left: 46%;
+    top: 46%;
+  }
+}
+</style>
+      
+      

src/views/mine/myTeaFriends.vue

@@ -2,55 +2,80 @@
   <div class="assets" @scroll="handleScroll">
     <div class="head">
       <img @click="back" src="@/assets/images/back.png" class="arrow_img" />
-      <span>{{ $t('lang40') }}</span>
+      <span>{{ $t('lang252') }}</span>
     </div>
     <div class="pd">
       <div class="">
         <div class="total_box">
-          <div>
-            <span class="text">{{ $t('lang94') }}({{ $t('lang95') }})</span>
-          </div>
-          <div class="total">
-            <span>{{ total || 0 }}</span>
+          <div class="total_box_item" v-for="(item, index) in tabList" :key="index" @click="changeTab(item, index)">
+            <div :class="[tabIndex == item.index ? 'total total_active' : 'total']">
+              <img :src="tabIndex == item.index ? item.icon_active : item.icon" alt="" />
+            </div>
+            <div>
+              <span class="text">{{ item.text }}</span>
+            </div>
           </div>
         </div>
 
-        <div class="bare" v-if="total <= 0">
-          <span>{{ $t('lang60') }}</span>
-        </div>
-        <div v-else>
-          <div class="list">
-            <div v-for="(item, index) in list" :key="index" class="li">
-              <div class="box">
-                <div class="box_item">
-                  <span class="mobile">{{ item.phone || item.nickname }}</span>
-                  <div class="f-row">
-                    <span
-                      :class="[
-                        item.address_level == 1
-                          ? 'address level1'
-                          : item.address_level == 2
-                          ? 'address level2'
-                          : item.address_level == 3
-                          ? 'address level3'
-                          : item.address_level == 4
-                          ? 'address level4'
-                          : item.address_level >= 5
-                          ? 'address level5'
-                          : 'address',
-                      ]"
-                    >
-                      {{ $t('lang35') }} {{ item.address.slice(0, 6) + '****' + item.address.slice(item.address.length - 6, item.address.length) }}
-                    </span>
-                    <img src="@/assets/images/trade/copy.png" alt="" class="copys" @click="copy(item.address)" :data-clipboard-text="item.address" />
-                  </div>
+        <template v-if="tabIndex == 0">
+          <div class="sort-box">
+            <div class="sort-item" v-for="(item, index) in sortList" :key="index">
+              <span>{{ item.key }}</span>
+              <span>（{{ item.value }}）</span>
+            </div>
+          </div>
+          <div class="bare" v-if="total <= 0">
+            <span>{{ $t('lang60') }}</span>
+          </div>
+          <div v-else>
+            <div class="list">
+              <div v-for="(item, index) in list" :key="index" class="li">
+                <div class="box">
+                  <div class="box_item">
+                    <span class="mobile">{{ item.phone || item.nickname }}</span>
+                    <div class="f-row">
+                      <span
+                        :class="[
+                          item.address_level == 1
+                            ? 'address level1'
+                            : item.address_level == 2
+                            ? 'address level2'
+                            : item.address_level == 3
+                            ? 'address level3'
+                            : item.address_level == 4
+                            ? 'address level4'
+                            : item.address_level >= 5
+                            ? 'address level5'
+                            : 'address',
+                        ]"
+                      >
+                        {{ $t('lang35') }} {{ item.address.slice(0, 6) + '****' + item.address.slice(item.address.length - 6, item.address.length) }}
+                      </span>
+                      <img src="@/assets/images/trade/copy.png" alt="" class="copys" @click="copy(item.address)" :data-clipboard-text="item.address" />
+                    </div>
 
-                  <span class="key">{{ $t('lang96') }}{{ dateFormatFn(item.create_time) }}</span>
+                    <span class="key">{{ $t('lang96') }}{{ dateFormatFn(item.create_time) }}</span>
+                  </div>
                 </div>
               </div>
             </div>
           </div>
-        </div>
+        </template>
+        <template v-if="tabIndex == 1">
+          <van-popup v-model="activationShow" round style="width: 80%" @close="closeActive">
+            <div class="bind_box">
+              <van-icon name="cross" class="close" size="20" @click="closeActive" />
+              <div class="title">{{ $t('lang500') }}</div>
+              <div class="sub-title">{{ $t('lang501') }}</div>
+              <div class="address_field">
+                <van-field v-model="activationCode" type="text" input-align="center" class="input1" />
+              </div>
+              <div class="bind_button" @click="activeSubmit">
+                <span>{{ $t('lang502') }}</span>
+              </div>
+            </div>
+          </van-popup>
+        </template>
       </div>
     </div>
   </div>
@@ -74,10 +99,56 @@ export default {
         one: 0,
         two: 0,
       },
+      tabList: [
+        {
+          icon: require('@/assets/images/icon_1_1.png'),
+          icon_active: require('@/assets/images/icon_1.png'),
+          text: this.$t('lang252'),
+          index: 0,
+        },
+        {
+          icon: require('@/assets/images/icon_2_1.png'),
+          icon_active: require('@/assets/images/icon_2.png'),
+          text: this.$t('lang498'),
+          index: 1,
+        },
+        {
+          icon: require('@/assets/images/icon_3_1.png'),
+          icon_active: require('@/assets/images/icon_3.png'),
+          text: this.$t('lang499'),
+          index: 2,
+        },
+      ],
+      tabIndex: 0,
+      sortList: [
+        {
+          key: this.$t('lang201'),
+          value: 0,
+          index: 0,
+        },
+        {
+          key: this.$t('lang503'),
+          value: 0,
+          index: 1,
+        },
+        {
+          key: this.$t('lang504'),
+          value: 0,
+          index: 2,
+        },
+        {
+          key: this.$t('lang505'),
+          value: 0,
+          index: 3,
+        },
+      ],
+      activationShow: true,
+      activationCode: '',
     };
   },
   mounted() {
     this.getChaList();
+    this.getCommunityCount();
     this.direct_super = JSON.parse(localStorage.getItem('userinfo')).direct_super;
   },
   methods: {
@@ -115,11 +186,24 @@ export default {
         }
       }
     },
+    getCommunityCount() {
+      homeApi.getCommunityCount({}).then(res => {
+        if (res.code == 200) {
+          res.data.forEach(element => {
+            element.level == 1 ? (this.sortList[1].value = element.num) : '';
+            element.level == 2 ? (this.sortList[2].value = element.num) : '';
+            element.level == 3 ? (this.sortList[3].value = element.num) : '';
+          });
+        } else {
+        }
+      });
+    },
     getChaList() {
       homeApi.getChaList({ page: this.page }).then(res => {
         if (res.code == 200) {
           // this.list = res.data.data.data;
           this.total = res.data.total;
+          this.sortList[0].value = this.total;
           if (this.list.length >= res.data.data.total) {
             this.page = -1; // 重置为 -1，表示没有更多数据
           } else {
@@ -146,8 +230,28 @@ export default {
     changeNav(item, index) {
       this.navIndex = index;
     },
-    dateFormatFn(date) {
-      return dateFormat(new Date(date * 1000), 'yyyy-MM-dd hh:mm:ss');
+    changeTab(item, index) {
+      this.tabIndex = index;
+      if (this.tabIndex == 1) {
+        this.activationShow = true;
+      } else if (this.tabIndex == 2) {
+        this.$router.push({ name: 'createCode' });
+      }
+    },
+    closeActive() {
+      this.activationShow = false;
+      this.tabIndex = 0;
+    },
+    activeSubmit() {
+      if (!this.activationCode) {
+        return;
+      }
+      homeApi.activateCode({ code_no: this.activationCode }).then(res => {
+        if (res.code == 200) {
+          this.activationCode = '';
+          this.$toast(this.$t('lang512'));
+        }
+      });
     },
   },
 };
@@ -233,8 +337,7 @@ export default {
     position: relative;
     display: flex;
     align-items: center;
-    flex-direction: column;
-    justify-content: center;
+    justify-content: space-between;
     // position: relative;
     font-size: 12px;
     color: #fff;
@@ -246,14 +349,42 @@ export default {
     margin: 10px;
     background: linear-gradient(to right, #1ab986, #25d7bb);
 
+    &_item {
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+      width: 30%;
+
+      .text {
+        display: inline-block;
+        color: rgba(#fff, 1);
+        font-size: 15px;
+        font-weight: 600;
+        width: 100px;
+        text-align: center;
+        overflow: hidden; //超出的文本隐藏
+        text-overflow: ellipsis; //溢出用省略号显示
+        white-space: nowrap; //溢出不换行
+      }
+    }
+
     .total {
-      font-size: 28px;
-      text-align: center;
-      padding-top: 10px;
+      width: 50px;
+      height: 50px;
+      padding: 10px;
+      margin-bottom: 10px;
+      border-radius: 50%;
+      border: 2px solid #fff;
+
+      img {
+        width: 100%;
+        height: 100%;
+      }
     }
-    .text {
-      color: rgba(#fff, 0.8);
+    .total_active {
+      background-color: #fff;
     }
+
     .buy {
       position: absolute;
       right: 14px;
@@ -273,6 +404,31 @@ export default {
     }
   }
 
+  .sort-box {
+    color: #000;
+    font-size: 13px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-bottom: 10px;
+    margin: 16px 10px 0;
+    border-bottom: 1px solid #f0f0f0;
+
+    .sort-item {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-direction: column;
+      text-align: center;
+      span:first-child {
+        max-width: 100px;
+        overflow: hidden; //超出的文本隐藏
+        text-overflow: ellipsis; //溢出用省略号显示
+        white-space: nowrap; //溢出不换行
+      }
+    }
+  }
+
   .bare {
     text-align: center;
     font-size: 14px;
@@ -291,7 +447,7 @@ export default {
       // justify-content: space-between;
       font-size: 14px;
       color: rgba(51, 51, 51, 1);
-      padding: 18px 0 0;
+      padding: 0 0 18px;
 
       .box {
         padding-bottom: 18px;
@@ -337,7 +493,7 @@ export default {
             background-color: #000;
           }
           .level4 {
-            color: #00A733 !important;
+            color: #00a733 !important;
             border-radius: 10px;
             padding: 2px 6px;
             background-color: #000;
@@ -357,5 +513,49 @@ export default {
     height: 14px;
     margin-left: 4px;
   }
+
+  .bind_box {
+    font-size: 15px;
+    text-align: center;
+    color: #000;
+    .close {
+      position: absolute;
+      right: 20px;
+      top: 20px;
+    }
+    .title {
+      padding: 20px 20px 26px;
+    }
+    .sub-title {
+      color: #b3b3b3;
+      letter-spacing: 0.5px;
+    }
+    .address_field {
+      padding: 10px 0;
+      margin: 0 30px 16px;
+    }
+    .input1 {
+      height: 35px;
+      line-height: 35px;
+      text-align: center;
+      border-radius: 10px;
+      background-color: #ebebeb;
+    }
+    .bind_button {
+      color: #fff;
+      text-align: center;
+      font-size: 14px;
+      letter-spacing: 1px;
+      border: none;
+      padding: 6px 0;
+      margin: 0px 30px 20px;
+      border-radius: 30px;
+      background-color: #1dc297;
+      // border-top: 1px solid #cccccc9d;
+    }
+  }
+  ::v-deep .van-overlay {
+    background-color: rgba(#000, 0.2);
+  }
 }
 </style>