init

pages.json

@@ -25,7 +25,8 @@
     {
       "path": "pages/my/my",
       "style": {
-        "navigationBarTitleText": "我的"
+        "navigationBarTitleText": "我的",
+        "navigationStyle": "custom"
       }
     },
     {

pages/my/my.vue

@@ -1,82 +1,98 @@
 <template>
   <view class="container my-container" v-if="haveData">
-    <view class="my-top-info">
-      <image :src="userInfo.Headimgurl" class="avatar" v-if="isLogin && userInfo.Headimgurl"></image>
-      <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/default_avatar.png" class="avatar" v-else></image>
-      <view class="right-section">
-        <template v-if="isLogin">
-          <view class="info-item space-item text_oneLine" v-if="userInfo.Mobile || userInfo.Email">
-            <view class="item-label" decode="true">{{ userInfo.Mobile ? "手机号" : "邮&nbsp;&nbsp;&nbsp;箱" }}</view>
-            ：{{ userInfo.Mobile || userInfo.Email }}
-          </view>
-          <view class="info-item space-item text_oneLine"> <view class="item-label" decode="true">姓&nbsp;&nbsp;&nbsp;名</view>：{{ userInfo.RealName || "暂无" }} </view>
-          <view class="info-item text_oneLine"> <view class="item-label" decode="true">公&nbsp;&nbsp;&nbsp;司</view>：{{ userInfo.CompanyName || "暂无" }} </view>
-        </template>
-        <button class="no-log" v-else @click="loginHandle">{{ login_txt }}</button>
+    <view class="nav-bar-wrap" :style="{ height: navBarStyle.height, paddingTop: navBarStyle.paddingTop, paddingBottom: navBarStyle.paddingBottom }">
+      <view class="content">
+        <van-icon custom-class="search-icon" name="arrow-left" size="24px" @click="goSearch" />
+        <view class="text">我的</view>
       </view>
     </view>
-    <view class="auth-cont">
-      <image src="https://hzstatic.hzinsights.com/cygx/czbk/auth_bg.png" class="auth_bg"></image>
-      <view class="auth-info">
-        <template v-if="isLogin">
-          <text class="info-label">我的权限：</text>
-          <scroll-view scroll-x="true" scroll-with-animation class="auth-ul" v-if="userInfo.HasPermission === 0">
-            <text class="auth-li" v-for="item in authList" :key="item">{{ item }}</text>
-          </scroll-view>
-          <block v-else>
-            <text class="no-auth">{{ userInfo.HasPermission === 3 ? "权限申请已提交，请等待审核" : "暂未开通行业权限" }}</text>
-            <button class="auth-btn" @click="applyAuth" v-if="userInfo.HasPermission != 3">申请开通</button>
-          </block>
-        </template>
-        <text class="notlog-tip" v-else>让好的研究不再是奢侈品</text>
+    <view class="my-background">
+      <view class="my-notice" v-if="myNotice">
+        添加到我的小程序，做您手边的弘则研究素材库
+        <van-icon @click="myNotice = false" class="my-icon" name="cross" />
       </view>
     </view>
-    <view class="my-bot-cont">
-      <view class="list-item border_bottom" @click="itemClickHandle('外呼')">
-        <text>外呼号码</text>
-        <view class="my-bot-box">
-          <text v-if="userInfo.OutboundCountryCode && userInfo.OutboundMobile" style="margin-right: 40rpx; font-size: 28rpx">{{ userInfo.OutboundCountryCode }}-{{ userInfo.OutboundMobile }}</text>
-          <text v-else style="margin-right: 40rpx; font-size: 28rpx">未设置</text>
-          <u-icon name="arrow-right" color="#BDBDBD" size="34"></u-icon>
+    <view class="my-info">
+      <view class="my-top-info">
+        <view class="info">
+          <view class="info-img">
+            <button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
+              <image class="avatar" v-if="isLogin && userInfo.Headimgurl" :src="userInfo.Headimgurl"></image>
+              <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/logo.png" class="avatar" v-else></image>
+            </button>
+          </view>
+          <view class="info-list">
+            <text class="name">{{ userInfo.RealName || "暂无" }}</text>
+            <text class="mobile">{{ userInfo.Mobile || userInfo.Email }}</text>
+            <text class="company-name">{{ userInfo.CompanyName || "暂无" }}</text>
+          </view>
+        </view>
+        <view class="auth-info">
+          <template v-if="isLogin">
+            <scroll-view scroll-x="true" scroll-with-animation class="auth-ul" v-if="userInfo.HasPermission !== 0">
+              <text class="auth-li" v-for="item in authList" :key="item">{{ item }}</text>
+            </scroll-view>
+            <block v-else>
+              <button class="auth-btn" @click="applyAuth" v-if="userInfo.HasPermission != 3">申请开通权限</button>
+            </block>
+          </template>
+          <text v-else class="no-auth">暂无品种权限信息</text>
+        </view>
+        <view class="info-item">
+          <view class="item">
+            <text class="item-number">10</text>
+            <text class="item-text">活动日程</text>
+          </view>
+          <view class="item item-label">
+            <text class="item-number">10</text>
+            <text class="item-text">收藏</text>
+          </view>
+          <view class="item">
+            <text class="item-number">10</text>
+            <text class="item-text">足迹</text>
+          </view>
         </view>
       </view>
+      <!-- <view class="info-bot">
+        <view class="my-bot-cont">
+          <view class="list-item border_bottom" @click="itemClickHandle('提问')">
+            <text>我的提问</text>
+            <u-icon name="arrow-right" color="#BDBDBD" size="34"></u-icon>
+          </view>
+        </view>
+      </view> -->
     </view>
-    <view class="my-bot-cont">
-      <view class="list-item border_bottom" @click="itemClickHandle('提问')">
-        <text>我的提问</text>
-        <u-icon name="arrow-right" color="#BDBDBD" size="34"></u-icon>
-      </view>
-      <view class="list-item border_bottom" v-for="type in typeArr" :key="type" @click="itemClickHandle(type)">
-        <text>{{ type }}</text>
-        <u-icon name="arrow-right" color="#BDBDBD" size="34"></u-icon>
-      </view>
-    </view>
-   <freeCharge class="free-charge" :isShowFreeBtn="isShowFree"/>
   </view>
 </template>
 
 <script>
 import { Mine, checkToken, User } from "@/config/api.js";
-import freeCharge  from '@/components/freeCharge'
+import freeCharge from "@/components/freeCharge";
 let app = getApp();
 export default {
   components: {
-    freeCharge
+    freeCharge,
   },
   data() {
     return {
       isLogin: false, //是否绑定且授权
       login_txt: "",
       haveData: null, //显示页面
-      typeArr: ["我的收藏", "访谈申请", "浏览历史", "优化建议"],
+      typeArr: ["我的收藏", "访谈申请", "浏览历史", "我的提问"],
       typeObj: new Map([
-        ["我的收藏", "myCollection"],
+        ["外呼号码", "editOutbound"],
         ["访谈申请", "applyInterview"],
         ["浏览历史", "browseHistory"],
-        ["优化建议", "advice"],
+        ["我的提问", "myAskPage"],
       ]),
       userInfo: {},
       authList: [],
+      navBarStyle: {
+        height: 60 + "px",
+        paddingTop: 40 + "px",
+        paddingBottom: "4px",
+      },
+      myNotice: true,
     };
   },
   async onShow() {
@@ -91,7 +107,22 @@ export default {
       this.isLogin = false;
     }
   },
+  onLoad() {
+    this.initNavBar();
+  },
   methods: {
+    onChooseAvatar(e) {
+      this.userInfo.Headimgurl = e.detail.avatarUrl;
+    },
+    //导航条的高度
+    initNavBar() {
+      let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
+      this.navBarStyle = {
+        height: menuButtonInfo.height + menuButtonInfo.top + 8 + "px",
+        paddingTop: menuButtonInfo.top - 4 + "px",
+        paddingBottom: "4px",
+      };
+    },
     /* 检查状态 */
     /* 获取用户信息 */
     getUser() {
@@ -170,121 +201,183 @@ export default {
 };
 </script>
 
+<style lang="scss">
+.nav-bar-wrap {
+  color: #fff;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 999;
+  .content {
+    position: relative;
+    height: 100%;
+    .search-icon {
+      position: absolute;
+      left: 34rpx;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+  }
+}
+</style>
 <style lang="scss" scoped>
 .my-container {
-  background-color: #fff;
-  .my-top-info {
-    padding: 30rpx 34rpx;
-    display: flex;
-    align-items: center;
-    .avatar {
-      width: 168rpx;
-      height: 168rpx;
-      border-radius: 50%;
-      margin-right: 45rpx;
-      border: 1rpx solid #ccc;
-    }
-    .right-section {
-      font-size: 34rpx;
-      .info-item {
-        width: 450rpx;
-        .item-label {
-          // text-align: justify;
-          // text-align-last: justify;
-          display: inline-block;
-          // width: 110rpx;
-        }
-        &.space-item {
-          margin-bottom: 10rpx;
-        }
-      }
-      .no-log {
-        padding: 0 20rpx;
-        height: 56rpx;
-        line-height: 52rpx;
-        background-color: #fff;
-        color: #3385ff;
-        font-size: 24rpx;
-        border: 2rpx solid #3385ff;
+  background: #f9f9f9;
+  position: relative;
+  .nav-bar-wrap {
+    .content {
+      .text {
+        text-align: center;
+        width: 50vw;
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        font-weight: bold;
+        font-size: 16px;
       }
     }
   }
-  .auth-cont {
-    width: 682rpx;
-    height: 153rpx;
-    margin: 38rpx auto;
-    padding: 24rpx 36rpx;
-    position: relative;
-    color: #4a4a4a;
-    .auth_bg {
-      width: 682rpx;
-      height: 153rpx;
-      position: absolute;
-      left: 0;
-      top: 0;
-    }
-    .auth-info {
+  .my-background {
+    height: 480rpx;
+    width: 100%;
+    background: url("https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/my_bg.jpg") no-repeat;
+    background-size: 100% 100%;
+    padding-top: 206rpx;
+    .my-notice {
+      height: 55rpx;
+      width: 690rpx;
+      margin: 0 auto;
+      background: rgba(255, 255, 255, 0.5);
+      border-radius: 8px 8px 8px 8px;
+      line-height: 55rpx;
+      text-align: center;
+      color: #ffffff;
       position: relative;
-      .notlog-tip {
-        font-size: 30rpx;
-        color: #333333;
-        line-height: 105rpx;
-        text-align: center;
-      }
-      .info-label {
-        font-size: 34rpx;
-      }
-      .auth-ul {
-        width: 100%;
-        white-space: nowrap;
-        margin-top: 15rpx;
-        color: #333;
-        .auth-li {
-          display: inline-block;
-          padding: 6rpx 20rpx;
-          border: 1rpx solid #333333;
-          border-radius: 4rpx;
-          font-size: 24rpx;
-          margin-right: 20rpx;
-          &:last-child {
-            margin-right: 0;
-          }
-        }
-      }
-      .no-auth {
-        font-size: 28rpx;
-        margin-top: 20rpx;
-      }
-      .auth-btn {
-        width: 139rpx;
-        height: 56rpx;
-        background: rgba(255, 255, 255, 0.1);
-        color: #3385ff;
-        font-size: 24rpx;
+      .my-icon {
         position: absolute;
-        right: 0;
+        right: 20rpx;
         top: 50%;
         transform: translateY(-50%);
-        line-height: 56rpx;
-        border: 2rpx solid #3385ff;
+        font-weight: bold;
+        font-size: 16px;
       }
     }
   }
-  .my-bot-cont {
-    .my-bot-box {
-      display: flex;
-    }
-    .list-item {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      font-size: 34rpx;
-      color: #4a4a4a;
-      padding: 33rpx 34rpx;
-      .icon-area {
-        width: 100rpx;
+  .my-info {
+    position: absolute;
+    top: 301rpx;
+    left: 50%;
+    transform: translateX(-50%);
+    .my-top-info {
+      width: 690rpx;
+      margin: 0 auto;
+      height: 436rpx;
+      background: url("https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/my_log.png") no-repeat;
+      background-color: #ffffff;
+      background-position: right top;
+      background-size: 267rpx 274rpx;
+      box-sizing: border-box;
+      box-shadow: 0px 0rpx 7rpx 1rpx #f0f3f5;
+      border-radius: 8rpx;
+      .info {
+        padding: 61rpx 0 0 30rpx;
+        display: flex;
+        .info-img {
+          width: 126rpx;
+          height: 126rpx;
+          background: #c4c4c4;
+          border-radius: 50%;
+          overflow: hidden;
+          .avatar-wrapper {
+            width: 126rpx;
+            height: 126rpx;
+          }
+          .avatar {
+            width: 126rpx;
+            height: 126rpx;
+            border-radius: 50%;
+          }
+        }
+        .info-list {
+          margin-left: 32rpx;
+          font-size: 24rpx;
+          font-weight: 400;
+          color: #666666;
+          .name {
+            font-size: 30rpx;
+            color: #000000;
+            line-height: 35rpx;
+            font-weight: 500;
+          }
+          .mobile {
+            padding: 13rpx 0 8rpx;
+          }
+        }
+      }
+      .auth-info {
+        width: 100%;
+        overflow: hidden;
+        margin-top: 36rpx;
+        .auth-ul {
+          white-space: nowrap;
+          padding: 0 30rpx;
+          color: #3385ff;
+          .auth-li {
+            display: inline-block;
+            padding: 1rpx 20rpx;
+            border: 1rpx solid #3385ff;
+            border-radius: 4rpx;
+            font-size: 24rpx;
+            margin-right: 20rpx;
+            background: #edf4ff;
+            &:last-child {
+              margin-right: 50rpx;
+            }
+          }
+        }
+        .no-auth {
+          text-align: center;
+          font-size: 28rpx;
+          margin-top: 20rpx;
+        }
+        .auth-btn {
+          width: 181rpx;
+          height: 49rpx;
+          margin: 0 auto;
+          color: #3385ff;
+          font-size: 24rpx;
+          line-height: 47rpx;
+          border: 2rpx solid #3385ff;
+        }
+      }
+      .info-item {
+        display: flex;
+        padding-left: 30rpx;
+        margin: 36rpx auto 0;
+        .item {
+          width: 208rpx;
+          height: 76rpx;
+          display: flex;
+          flex-direction: column;
+          justify-content: space-between;
+          text-align: center;
+          .item-number {
+            font-size: 40rpx;
+            font-weight: 500;
+          }
+        }
+        .item-label {
+          border-right: 1rpx solid #ececec;
+          border-left: 1rpx solid #ececec;
+        }
       }
     }
+
+    // .info-bot {
+
+    // }
   }
 }
 </style>

pages/my/my1.vue

@@ -0,0 +1,290 @@
+<template>
+  <view class="container my-container" v-if="haveData">
+    <view class="my-top-info">
+      <image :src="userInfo.Headimgurl" class="avatar" v-if="isLogin && userInfo.Headimgurl"></image>
+      <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/default_avatar.png" class="avatar" v-else></image>
+      <view class="right-section">
+        <template v-if="isLogin">
+          <view class="info-item space-item text_oneLine" v-if="userInfo.Mobile || userInfo.Email">
+            <view class="item-label" decode="true">{{ userInfo.Mobile ? "手机号" : "邮&nbsp;&nbsp;&nbsp;箱" }}</view>
+            ：{{ userInfo.Mobile || userInfo.Email }}
+          </view>
+          <view class="info-item space-item text_oneLine"> <view class="item-label" decode="true">姓&nbsp;&nbsp;&nbsp;名</view>：{{ userInfo.RealName || "暂无" }} </view>
+          <view class="info-item text_oneLine"> <view class="item-label" decode="true">公&nbsp;&nbsp;&nbsp;司</view>：{{ userInfo.CompanyName || "暂无" }} </view>
+        </template>
+        <button class="no-log" v-else @click="loginHandle">{{ login_txt }}</button>
+      </view>
+    </view>
+    <view class="auth-cont">
+      <image src="https://hzstatic.hzinsights.com/cygx/czbk/auth_bg.png" class="auth_bg"></image>
+      <view class="auth-info">
+        <template v-if="isLogin">
+          <text class="info-label">我的权限：</text>
+          <scroll-view scroll-x="true" scroll-with-animation class="auth-ul" v-if="userInfo.HasPermission === 0">
+            <text class="auth-li" v-for="item in authList" :key="item">{{ item }}</text>
+          </scroll-view>
+          <block v-else>
+            <text class="no-auth">{{ userInfo.HasPermission === 3 ? "权限申请已提交，请等待审核" : "暂未开通行业权限" }}</text>
+            <button class="auth-btn" @click="applyAuth" v-if="userInfo.HasPermission != 3">申请开通</button>
+          </block>
+        </template>
+        <text class="notlog-tip" v-else>让好的研究不再是奢侈品</text>
+      </view>
+    </view>
+    <view class="my-bot-cont">
+      <view class="list-item border_bottom" @click="itemClickHandle('外呼')">
+        <text>外呼号码</text>
+        <view class="my-bot-box">
+          <text v-if="userInfo.OutboundCountryCode && userInfo.OutboundMobile" style="margin-right: 40rpx; font-size: 28rpx">{{ userInfo.OutboundCountryCode }}-{{ userInfo.OutboundMobile }}</text>
+          <text v-else style="margin-right: 40rpx; font-size: 28rpx">未设置</text>
+          <u-icon name="arrow-right" color="#BDBDBD" size="34"></u-icon>
+        </view>
+      </view>
+    </view>
+    <view class="my-bot-cont">
+      <view class="list-item border_bottom" @click="itemClickHandle('提问')">
+        <text>我的提问</text>
+        <u-icon name="arrow-right" color="#BDBDBD" size="34"></u-icon>
+      </view>
+      <view class="list-item border_bottom" v-for="type in typeArr" :key="type" @click="itemClickHandle(type)">
+        <text>{{ type }}</text>
+        <u-icon name="arrow-right" color="#BDBDBD" size="34"></u-icon>
+      </view>
+    </view>
+   <freeCharge class="free-charge" :isShowFreeBtn="isShowFree"/>
+  </view>
+</template>
+
+<script>
+import { Mine, checkToken, User } from "@/config/api.js";
+import freeCharge  from '@/components/freeCharge'
+let app = getApp();
+export default {
+  components: {
+    freeCharge
+  },
+  data() {
+    return {
+      isLogin: false, //是否绑定且授权
+      login_txt: "",
+      haveData: null, //显示页面
+      typeArr: ["我的收藏", "访谈申请", "浏览历史", "优化建议"],
+      typeObj: new Map([
+        ["我的收藏", "myCollection"],
+        ["访谈申请", "applyInterview"],
+        ["浏览历史", "browseHistory"],
+        ["优化建议", "advice"],
+      ]),
+      userInfo: {},
+      authList: [],
+    };
+  },
+  async onShow() {
+    await this.$store.dispatch("checkHandle", "noGO");
+    this.haveData = true;
+    if (!this.$store.state.isAuth && !this.$store.state.isBind) {
+      //已授权已绑定
+      this.isLogin = true;
+      this.getUser();
+    } else {
+      this.login_txt = this.$store.state.isAuth ? "点击登录" : "绑定联系方式";
+      this.isLogin = false;
+    }
+  },
+  methods: {
+    /* 检查状态 */
+    /* 获取用户信息 */
+    getUser() {
+      Mine.getInfo().then((res) => {
+        if (res.Ret === 200) {
+          this.authList = res.Data.PermissionName && res.Data.PermissionName.split(",");
+          this.userInfo = res.Data;
+          res.Data.Mobile && this.$db.set("mobile", res.Data.Mobile);
+        }
+      });
+    },
+    /* 点击登录 检验是否绑定或是否授权*/
+    loginHandle() {
+      /* 先授权再绑定 */
+      if (this.$store.state.isAuth) {
+        uni.navigateTo({
+          url: "/pageMy/authGuide/authGuide",
+        });
+      } else {
+        this.$store.state.isBind &&
+          uni.navigateTo({
+            url: "/pageMy/login/login",
+          });
+      }
+    },
+    /* 申请开通权限 */
+    applyAuth() {
+      /* 查看是否是潜在用户 */
+      this.userInfo.HasPermission === 1
+        ? User.applyTry({
+            ApplyMethod: 3,
+          }).then((res) => {
+            if (res.Ret === 200) {
+              uni.navigateTo({
+                url: "/pageMy/applyResult/applyResult",
+              });
+            }
+          })
+        : this.userInfo.HasPermission === 2
+        ? uni.navigateTo({
+            url: "/pageMy/applyTrial/applyTrial",
+          })
+        : this.userInfo.HasPermission === 3
+        ? uni.showModal({
+            title: "",
+            content: "您已经提交过申请了，请耐心等待",
+            showCancel: false,
+            confirmColor: "#365595",
+            success: function (res) {},
+          })
+        : "";
+    },
+    /* 路径跳转 */
+    itemClickHandle(type) {
+      /* 是否登录 */
+      if (this.isLogin) {
+        if (type == "外呼") {
+          uni.navigateTo({
+            url: "/activityPages/editOutbound/editOutbound?title=设置外呼号码&identification=我的",
+          });
+        } else if (type == "提问") {
+          uni.navigateTo({
+            url: "/reportPages/myAskPage/myAskPage",
+          });
+        } else {
+          let path = this.typeObj.get(type);
+          uni.navigateTo({
+            url: `/pageMy/${path}/${path}`,
+          });
+        }
+      } else {
+        this.loginHandle();
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.my-container {
+  background-color: #fff;
+  .my-top-info {
+    padding: 30rpx 34rpx;
+    display: flex;
+    align-items: center;
+    .avatar {
+      width: 168rpx;
+      height: 168rpx;
+      border-radius: 50%;
+      margin-right: 45rpx;
+      border: 1rpx solid #ccc;
+    }
+    .right-section {
+      font-size: 34rpx;
+      .info-item {
+        width: 450rpx;
+        .item-label {
+          // text-align: justify;
+          // text-align-last: justify;
+          display: inline-block;
+          // width: 110rpx;
+        }
+        &.space-item {
+          margin-bottom: 10rpx;
+        }
+      }
+      .no-log {
+        padding: 0 20rpx;
+        height: 56rpx;
+        line-height: 52rpx;
+        background-color: #fff;
+        color: #3385ff;
+        font-size: 24rpx;
+        border: 2rpx solid #3385ff;
+      }
+    }
+  }
+  .auth-cont {
+    width: 682rpx;
+    height: 153rpx;
+    margin: 38rpx auto;
+    padding: 24rpx 36rpx;
+    position: relative;
+    color: #4a4a4a;
+    .auth_bg {
+      width: 682rpx;
+      height: 153rpx;
+      position: absolute;
+      left: 0;
+      top: 0;
+    }
+    .auth-info {
+      position: relative;
+      .notlog-tip {
+        font-size: 30rpx;
+        color: #333333;
+        line-height: 105rpx;
+        text-align: center;
+      }
+      .info-label {
+        font-size: 34rpx;
+      }
+      .auth-ul {
+        width: 100%;
+        white-space: nowrap;
+        margin-top: 15rpx;
+        color: #333;
+        .auth-li {
+          display: inline-block;
+          padding: 6rpx 20rpx;
+          border: 1rpx solid #333333;
+          border-radius: 4rpx;
+          font-size: 24rpx;
+          margin-right: 20rpx;
+          &:last-child {
+            margin-right: 0;
+          }
+        }
+      }
+      .no-auth {
+        font-size: 28rpx;
+        margin-top: 20rpx;
+      }
+      .auth-btn {
+        width: 139rpx;
+        height: 56rpx;
+        background: rgba(255, 255, 255, 0.1);
+        color: #3385ff;
+        font-size: 24rpx;
+        position: absolute;
+        right: 0;
+        top: 50%;
+        transform: translateY(-50%);
+        line-height: 56rpx;
+        border: 2rpx solid #3385ff;
+      }
+    }
+  }
+  .my-bot-cont {
+    .my-bot-box {
+      display: flex;
+    }
+    .list-item {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      font-size: 34rpx;
+      color: #4a4a4a;
+      padding: 33rpx 34rpx;
+      .icon-area {
+        width: 100rpx;
+      }
+    }
+  }
+}
+</style>