首次提交大宝wap

jhzh

2024-03-23 0d29d9a2bf0d893a67f1263bb9525131a50a2128

 src/page/newUser/index.vue

@@ -1,726 +1,821 @@
<template>
  <div class="user_page">
    <div class="content">
      <div class="top_icon">
        <div class="right_icon">
          <div @click="goToTopUp()">
            <img src="@/assets/img/qianbao.png" alt />
          </div>
          <div @click="goOnline" style="justify-content: flex-end;">
   <div class="user_page">
      <div class="content">
         <div class="top_icon">
            <div class="left_icon">
               <div>
                  <img src="../../assets/img/img_log_home.png"
                     style="width: 40px;height: 40px;border-radius: 50px;" />
               </div>
               <div class="top_box">
                  <div class="top_box_top" style="font-weight: 600;">{{userInfo.realName}}</div>
                  <div class="top_box_top" style="margin-top: 2px;">ID:{{userInfo.id}}</div>
               </div>
            </div>
            <div class="right_icon">
               <div  style="justify-content: flex-end;" @click="goToTopUp()">
                  <img src="@/assets/img/shezhia.png" alt />
               </div>
               <!-- <div style="justify-content: flex-end;">
                  <a href="https://t.me/Mc1992023" target="_blank">
                     <img style="width: 0.5rem;height: 0.5rem;" src="@/assets/img/kefu.png" alt />
                  </a>
               </div> -->
               <!-- <div @click="goOnline" style="justify-content: flex-end;">
            <img style="width: 0.5rem;height: 0.5rem;" src="@/assets/img/kefu.png" alt />
          </div>
        </div>
      </div>
      <div class="users" @click="goWall()">
        <div class="left_tou">
          <div class="left_tx">
            <div>
              <img src="@/assets/img/eslogo.png" alt />
            </div>
          </div>
          <div class="right_name">
            <span>{{ userInfo.realName ? userInfo.realName : userInfo.phone }}</span>
          </div>
        </div>
        <div class="right_go">
          <img src="@/assets/img/youjiantou.png" alt />
        </div>
      </div>
      <div class="center_card">
        <div class="keyon">
          <span>{{ $t('hj49') }}</span>
        </div>
        <div class="num_price" v-if="userInfo.length == 0">
          ¥0
        </div>
        <div class="num_price" v-if="userInfo.length != 0">
          <p v-if="this.$store.state.settingForm.indexDisplay && !this.$store.state.settingForm.futuresDisplay"
            class="account">
            ¥{{ $store.state.hide ? '****' : Number($store.state.userInfo.userAmt +
                $store.state.userInfo.userIndexAmt).toFixed(2)
            }}11
          </p>
          <p v-else-if="!this.$store.state.settingForm.indexDisplay && this.$store.state.settingForm.futuresDisplay"
            class="account">
            ¥{{ $store.state.hide ? '****' : Number($store.state.userInfo.userAmt +
                $store.state.userInfo.userFuturesAmt).toFixed(2)
            }}22
          </p>
          <p v-else-if="!this.$store.state.settingForm.indexDisplay && !this.$store.state.settingForm.futuresDisplay"
            class="account">¥&nbsp;&nbsp;{{ $store.state.hide ? '****' :
                Number($store.state.userInfo.userAmt).toFixed(2)
            }}</p>
        </div>
        <div class="yk es">
          <div>
            <span>{{ $t('hj55') }}</span>
          </div>
          <div>
            <span>{{ $t('hj141') }}</span>
          </div>
          </div> -->
            </div>
         </div>
         <div class="users" @click="goWall()" style="display:none">
            <div class="left_tou">
               <div class="left_tx">
                  <div>
                     <img src="@/assets/img/eslogo.png" alt />
                  </div>
               </div>
               <div class="right_name">
                  <span>{{ userInfo.realName ? userInfo.realName : userInfo.phone }}</span>
               </div>
            </div>
            <div class="right_go">
               <img src="@/assets/img/youjiantou.png" alt />
            </div>
         </div>
         <div class="center_card">
            <div style="display: flex;flex-direction: column;">
               <div class="keyon">
                  <span>{{ $t('usertop') }}</span>
               </div>
               <div class="num_price" v-if="userInfo.length == 0">
                  ₹0
               </div>
            </div>

          <div>
            <span>{{ $t('hj48') }}</span>
          </div>
        </div>
        <div class="yk as">
          <div>
            <span class="orenge">¥ {{ userInfo.length != 0 ? $store.state.userInfo.allFreezAmt +
                $store.state.userInfo.djzj : 0
            }}</span>
          </div>
          <div v-if="userInfo.length == 0">
            <span v-if="!selectUserFlag">
              <span>{{ '¥ 0' }}</span>
            </span>
            <span v-else>
              <span>{{ '¥ 0' }}</span>
            </span>
          </div>
          <div v-if="userInfo.length != 0">
            <span v-if="!selectUserFlag">
              <span
                :class="$store.state.userInfo.allIndexProfitAndLose > 0 ? ' red' : $store.state.userInfo.allIndexProfitAndLose < 0 ? ' green' : ''">{{
                    '¥ ' + $store.state.userInfo.allIndexProfitAndLose
                }}</span>
            </span>
            <span v-else>
              <span
                :class="$store.state.userInfo.allProfitAndLose > 0 ? ' red' : $store.state.userInfo.allProfitAndLose < 0 ? ' green' : ''">{{
                    '¥ ' + $store.state.userInfo.allProfitAndLose
                }}</span>
            </span>
          </div>

          <div v-if="userInfo.length == 0">
            <span class="bzz" v-if="!selectUserFlag">{{ '¥ 0' }}</span>
            <span class="bzz" v-else>{{ '¥ 0' }}</span>
          </div>
          <div v-if="userInfo.length != 0">
            <span class="bzz" v-if="!selectUserFlag">{{ '¥ ' + $store.state.userInfo.userIndexAmt }}</span>
            <span class="bzz" v-else>{{ '¥ ' + $store.state.userInfo.userAmt }}</span>
          </div>
            <div class="num_price" v-if="userInfo.length != 0">
               <p class="account">{{regexNum($store.state.userInfo.totalAssets)}}</p>
            </div>

        </div>
        <div class="btns" @click="handleZh()" :class="selectUserFlag ? '' : 'active'">
          <span>{{ selectUserFlag ? $t('hj142') : $t('hj143') }}</span>
        </div>
      </div>
      <div class="jy" @click="goToSettings()">
        <div class="left_gn">
          <div class="l_icon">
            <img src="../../assets/img/xiugaimima.png" alt />
          </div>
          <div class="r_title">
            <span>{{ $t('hj144') }}</span>
          </div>
        </div>
        <div class="right_gos">
          <img src="../../assets/img/youjiantou.png" alt />
        </div>
      </div>
      <div class="jy" @click="handleGoToTransfer()">
        <div class="left_gn">
          <div class="l_icon">
            <img src="../../assets/img/huazhuan2.png" alt />
          </div>
          <div class="r_title">
            <span>{{ $t('hj145') }}</span>
          </div>
        </div>
        <div class="right_gos">
          <img src="../../assets/img/youjiantou.png" alt />
        </div>
      </div>
      <div class="jy" @click="handleGoToAuthentication()">
        <div class="left_gn">
          <div class="l_icon">
            <img src="../../assets/img/shiming.png" alt />
          </div>
          <div class="r_title">
            <span>{{ $t('hj146') }}</span>
          </div>
        </div>
        <div class="right_gos">
          <img src="../../assets/img/youjiantou.png" alt />
        </div>
      </div>
      <div class="jy" @click="handleGoToBankCard()">
        <div class="left_gn">
          <div class="l_icon">
            <img src="../../assets/img/shiming.png" alt />
          </div>
          <div class="r_title">
            <span>{{ $t('hj147') }}</span>
          </div>
        </div>
        <div class="right_gos">
          <img src="../../assets/img/youjiantou.png" alt />
        </div>
      </div>
      <div class="jy" @click="handleOutLoginClick()">
        <div class="left_gn">
          <div class="l_icon">
            <img src="../../assets/img/out2.png" alt />
          </div>
          <div class="r_title">
            <span>{{ $t('hj148') }}</span>
          </div>
        </div>
        <div class="right_gos">
          <img src="../../assets/img/youjiantou.png" alt />
        </div>
      </div>
    </div>
    <van-popup v-model="settingDialog" position="bottom" :style="{ height: '40%' }">
      <div class="setting_content">
        <div class="old_password">
          <div class="left_titles">
            <span>{{ $t('hj150') + ':' }}</span>
          </div>
          <div class="right_password_input">
            <input type="password" v-model="oldPassword" />
          </div>
        </div>
        <div class="old_password">
          <div class="left_titles">
            <span>{{ $t('hj151') + ':' }}</span>
          </div>
          <div class="right_password_input">
            <input type="password" v-model="newPassword" />
          </div>
        </div>
        <div class="old_password">
          <div class="left_titles">
            <span>{{ $t('hj152') + ':' }}</span>
          </div>
          <div class="right_password_input">
            <input type="password" v-model="cirNewPassword" />
          </div>
        </div>
        <div class="btn_setting" @click="changeLoginPsd()">
          <span>{{ $t('hj153') }}</span>
        </div>
      </div>
    </van-popup>
            <div class="title_box">
               <div class="title_box_left">{{$t('titxt')}}</div>
               <div class="title_box_right">{{$t('titxta')}}</div>
            </div>
            <div class="title_box" style="margin-top: 15px;">
               <div class="title_box_left" style="color: #000;">{{$store.state.userInfo.userAmtToUsdt}}</div>
               <div class="title_box_right" style="color: #000;">{{$store.state.userInfo.userIndexAmt}}</div>
            </div>
            <div class="box1_bottom">
               <div class="btn2" @click="gotoa(1)">{{$t('btn1')}}</div>
               <div class="btn1" @click="gotoa(2)">{{$t('btn2')}}</div>
               <div class="btn1" @click="gotoa(3)">{{$t('btn3')}}</div>
            </div>
         </div>
         <div class="cd_box">
            <div class="cd_box_top">
            <img src="../../../static/img/ydgq.png" style="width: 17px;height: 17px;border-radius: 50px;margin-right: 5px;"/>
            {{$t('hhhh')}}</div>
            <div class="cd_box_body">
               <div class="cd_box_body_letf">{{$t('kygp')}}</div>
               <div class="cd_box_body_right">
                  <div class="cd_box_body_right_top">₹ {{$store.state.userInfo.userAmt}}</div>
                  <div class="cd_box_body_right_bottom">≈ ${{$store.state.userInfo.userAmtToUsdt}}</div>
               </div>
            </div>
            <div class="cd_box_body">
               <div class="cd_box_body_letf">{{$t('djgp')}}</div>
               <div class="cd_box_body_right">
                  <div class="cd_box_body_right_top">₹ {{$store.state.userInfo.allFreezAmt}}</div>
                  <div class="cd_box_body_right_bottom">≈ ${{$store.state.userInfo.allFreezAmtToUsdt}}</div>
               </div>
            </div>
         </div>
         <div class="cd_box">
            <div class="cd_box_top">
            <img src="../../../static/img/usgq.png" style="width: 17px;height: 17px;border-radius: 50px;margin-right: 5px;"/>
            {{$t('hhaa')}}</div>
            <div class="cd_box_body">
               <div class="cd_box_body_letf">{{$t('uszh1')}}</div>
               <div class="cd_box_body_right">
                  <div class="cd_box_body_right_top">${{$store.state.userInfo.userIndexAmt}}</div>
               </div>
            </div>
            <div class="cd_box_body">
               <div class="cd_box_body_letf">{{$t('uszh2')}}</div>
               <div class="cd_box_body_right">
                  <div class="cd_box_body_right_top">${{$store.state.userInfo.usAllFreezAmt}}</div>
               </div>
            </div>
         </div>
			

  </div>



      </div>
      <div style="width: 100%;height: 100px;"></div>
      <van-popup v-model="settingDialog" position="bottom" :style="{ height: '40%' }">
         <div class="setting_content">
            <div class="old_password">
               <div class="left_titles">
                  <span>{{ $t('hj150') + ':' }}</span>
               </div>
               <div class="right_password_input">
                  <input type="password" v-model="oldPassword" />
               </div>
            </div>
            <div class="old_password">
               <div class="left_titles">
                  <span>{{ $t('hj151') + ':' }}</span>
               </div>
               <div class="right_password_input">
                  <input type="password" v-model="newPassword" />
               </div>
            </div>
            <div class="old_password">
               <div class="left_titles">
                  <span>{{ $t('hj152') + ':' }}</span>
               </div>
               <div class="right_password_input">
                  <input type="password" v-model="cirNewPassword" />
               </div>
            </div>
            <div class="btn_setting" @click="changeLoginPsd()">
               <span>{{ $t('hj153') }}</span>
            </div>
         </div>
      </van-popup>

   </div>
</template>

<script>
import * as api from "@/axios/api";
import { Toast } from "mint-ui";
import { isNull, pwdReg } from "@/utils/utils";
import { MessageBox } from 'mint-ui'
   import * as api from '@/axios/api'
   import {
      Toast,
      MessageBox
   } from 'mint-ui'
   import {
      isNull,
      pwdReg
   } from '@/utils/utils'

   export default {
      name: 'newUser',
      data() {
         return {
            name: '大狗子',
            selectUserFlag: true,
            settingDialog: false,
            oldPassword: '', // 旧密码
            newPassword: '', // 新密码
            cirNewPassword: '', // 确认新密码
            userInfo: [],
            onlineService: ''
         }
      },
      components: {},
      created() {
         this.getUserInfo()
         this.getInfoSite()
      },
      methods: {
         yebclick() {
            this.$router.push('/yeb')
         },
         regexNum(str) {
            console.log(str);
            str = str.toString()
            if (str.indexOf(".") == -1) {
               str = str + ".00"
            }

export default {
  name: "newUser",
  data() {
    return {
      name: "大狗子",
      selectUserFlag: true,
      settingDialog: false,
      oldPassword: "", // 旧密码
      newPassword: "", // 新密码
      cirNewPassword: "", //确认新密码
      userInfo: [],
      onlineService: "",
    };
  },
  components: {
  },
  created() {
    this.getUserInfo();
    this.getInfoSite();
  },
  methods: {
    goOnline() {
      if (navigator.vibrate) {
        // 支持
        navigator.vibrate([55]);
      }
      this.$router.push('/service');
    },
    async getInfoSite() {
      let data = await api.getInfoSite()
      if (data.status === 0) {
        this.onlineService = data.data.onlineService
      } else {
        Toast(data.msg)
      }
    },
    goWall() {
      if (this.userInfo.length == 0) {
        this.$store.commit('dialogVisible', true);
        return;
      }
      this.$router.push('/wallet')
    },
    handleZh() {
      this.selectUserFlag = !this.selectUserFlag;
            var newStr = str.split('.')
            var point = newStr[1]

      if (this.userInfo.length == 0) {
        this.$store.commit('dialogVisible', true);
        return;
      }
      if (navigator.vibrate) {
        // 支持
        navigator.vibrate([55]);
      }
    },
    async getUserInfo() {
      // 获取用户信息
      let data = await api.getUserInfo();
      if (data.status === 0) {
        // 判断是否登录
        this.$store.commit('dialogVisible', false);
        this.$store.state.userInfo = data.data;
        this.userInfo = data.data;
      } else {
        this.$store.commit('dialogVisible', true);
      }
    },
    goToTopUp() {
      if (this.userInfo.length == 0) {
        this.$store.commit('dialogVisible', true);
        return;
      }
      if (navigator.vibrate) {
        // 支持
        navigator.vibrate([55]);
      }
      this.$router.push("/wallet");
    },
    handleOutLoginClick() {
      // 退出登录
      MessageBox.confirm(this.$t('hj149') + '?',this.$t('hj165'), {
        confirmButtonText: this.$t('hj161'),
        cancelButtonText: this.$t('hj106'),
      }).then(() => {
        this.toRegister();
      }).catch(() => {
            if (point.length < 2) {
               point = point + "0"
            }
            var moneyPoint = newStr[0]
            if (moneyPoint.length <= 3) {
               return moneyPoint + "." + point
            } else {
               var mPoint = moneyPoint.substr(moneyPoint.length - 3, moneyPoint.length)
               var twoPoint = moneyPoint.substr(0, moneyPoint.length - 3)
               var endString = twoPoint.toString().replace(/(\d)(?=(\d{2})+(?!\d))/g, '$1,')
               return endString + "," + mPoint + '.' + point;

      });
    },
    goToSettings() {
      if (this.userInfo.length == 0) {
        this.$store.commit('dialogVisible', true);
        return;
      }
      // 每次打开dialog 清空密码数据
      this.settingDialog = !this.settingDialog;
      if (this.settingDialog) {
        this.oldPassword = "";
        this.newPassword = "";
        this.cirNewPassword = "";
      }
    },
    handleGoToTransfer() {
      if (this.userInfo.length == 0) {
        this.$store.commit('dialogVisible', true);
        return;
      }
      this.$router.push("/transfers");
    },
    handleGoToAuthentication() {
      if (this.userInfo.length == 0) {
        this.$store.commit('dialogVisible', true);
        return;
      }
      this.$router.push("/authentications");
    },
    handleGoToBankCard() {
      if (this.userInfo.length == 0) {
        this.$store.commit('dialogVisible', true);
        return;
      }
      this.$router.push("/bankCard");
    },
    async toRegister() {
      // 注销登陆
      window.localStorage.removeItem("USERTOKEN"); // 清空本地存储 USERTOKEN字段
      this.clearCookie();
      let data = await api.logout();
      if (data.status === 0) {
        // Toast(data.msg)
        this.$router.push("/login");
      } else {
        Toast(data.msg);
      }
      this.$router.push("/login");
    },
    async changeLoginPsd() {
      // 修改密码
      if (
        isNull(this.oldPassword) ||
        isNull(this.newPassword) ||
        isNull(this.cirNewPassword)
      ) {
        Toast(this.$t('hj154'));
        this.settingDialog = false;
      } else if (!pwdReg(this.newPassword)) {
        Toast(this.$t('hj19'));
        this.settingDialog = false;
      } else {
        // 修改密码
        if (this.newPassword === this.cirNewPassword) {
          let opts = {
            oldPwd: this.oldPassword,
            newPwd: this.newPassword
          };
          let data = await api.changePassword(opts);
          if (data.status === 0) {
            this.changeLoginPsdBox = false;
            Toast(data.msg);
            this.settingDialog = false;
          } else {
            Toast(data.msg);
            this.settingDialog = false;
          }
        } else {
          Toast(this.$t('hj155'));
          this.settingDialog = false;
        }
      }
      if (navigator.vibrate) {
        // 支持
        navigator.vibrate([55]);
      }
    }
  }
};
            }
         },
         goOnline() {
            if (navigator.vibrate) {
               // 支持
               navigator.vibrate([55])
            }
            this.$router.push('/service')
         },
         async getInfoSite() {
            let data = await api.getInfoSite()
            if (data.status === 0) {
               this.onlineService = data.data.onlineService
            } else {
               Toast(data.msg)
            }
         },
         goWall() {
            if (this.userInfo.length === 0) {
               this.$store.commit('dialogVisible', true)
               return
            }
            this.$router.push('/wallet')
         },
         gotoa(e){
            if (this.userInfo.length === 0) {
               this.$store.commit('dialogVisible', true)
               return
            }
            if(e==1){
               this.$router.push('/wallet')
            }else if(e==2){
               this.$router.push('/tixian')
            }else{
					
               this.$router.push('/transfers')
            }
				
         },
         subclick() {
            this.$router.push('/SubDK')
         },
         subaclick() {
            this.$router.push('/tixian')
         },
         handleZh() {
            this.selectUserFlag = !this.selectUserFlag

            if (this.userInfo.length === 0) {
               this.$store.commit('dialogVisible', true)
               return
            }
            if (navigator.vibrate) {
               // 支持
               navigator.vibrate([55])
            }
         },
         async getUserInfo() {
            // 获取用户信息
            let data = await api.getUserInfo()
            if (data.status === 0) {
               // 判断是否登录
               this.$store.commit('dialogVisible', false)
               this.$store.state.userInfo = data.data
               this.userInfo = data.data
            } else {
               this.$store.commit('dialogVisible', true)
            }
         },
         goToTopUp() {
            // if (this.userInfo.length === 0) {
            //    this.$store.commit('dialogVisible', true)
            //    return
            // }
            // if (navigator.vibrate) {
            //    // 支持
            //    navigator.vibrate([55])
            // }
            this.$router.push('/setting')
         },
         handleOutLoginClick() {
            // 退出登录
            MessageBox.confirm(this.$t('hj149') + '?', this.$t('hj165'), {
               confirmButtonText: this.$t('hj161'),
               cancelButtonText: this.$t('hj106')
            }).then(() => {
               this.toRegister()
            }).catch(() => {

            })
         },
         goToSettings() {
            if (this.userInfo.length === 0) {
               this.$store.commit('dialogVisible', true)
               return
            }
            // 每次打开dialog 清空密码数据
            this.settingDialog = !this.settingDialog
            if (this.settingDialog) {
               this.oldPassword = ''
               this.newPassword = ''
               this.cirNewPassword = ''
            }
         },
         handleGoToTransfer() {
            if (this.userInfo.length === 0) {
               this.$store.commit('dialogVisible', true)
               return
            }
            this.$router.push('/transfers')
         },
         handleGoToAuthentication() {
            if (this.userInfo.length === 0) {
               this.$store.commit('dialogVisible', true)
               return
            }
            this.$router.push('/authentications')
         },
         handleGoToAuthenticationaz() {
            if (this.userInfo.length === 0) {
               this.$store.commit('dialogVisible', true)
               return
            }
            this.$router.push('/download')
         },
         handleGoToBankCard() {
            if (this.userInfo.length === 0) {
               this.$store.commit('dialogVisible', true)
               return
            }
            this.$router.push('/bankCard')
         },
         async toRegister() {
            // 注销登陆
            window.localStorage.removeItem('USERTOKEN') // 清空本地存储 USERTOKEN字段
            this.clearCookie()
            let data = await api.logout()
            if (data.status === 0) {
               // Toast(data.msg)
               this.$router.push('/login')
            } else {
               Toast(data.msg)
            }
            this.$router.push('/login')
         },
         async changeLoginPsd() {
            // 修改密码
            if (
               isNull(this.oldPassword) ||
               isNull(this.newPassword) ||
               isNull(this.cirNewPassword)
            ) {
               Toast(this.$t('hj154'))
               this.settingDialog = false
            } else if (!pwdReg(this.newPassword)) {
               Toast(this.$t('hj19'))
               this.settingDialog = false
            } else {
               // 修改密码
               if (this.newPassword === this.cirNewPassword) {
                  let opts = {
                     oldPwd: this.oldPassword,
                     newPwd: this.newPassword
                  }
                  let data = await api.changePassword(opts)
                  if (data.status === 0) {
                     this.changeLoginPsdBox = false
                     Toast(data.msg)
                     this.settingDialog = false
                  } else {
                     Toast(data.msg)
                     this.settingDialog = false
                  }
               } else {
                  Toast(this.$t('hj155'))
                  this.settingDialog = false
               }
            }
            if (navigator.vibrate) {
               // 支持
               navigator.vibrate([55])
            }
         }
      },

   }
</script>

<style scoped lang="less">
.green {
  color: #028f52 !important;
}
   .top_box_top{
      color: #fff;
      font-size: 0.4rem;
   }
   .top_box{
      display: flex;
      flex-direction: column;
      justify-content: center;
      // align-items: center;
      margin-left: 15px;
   }
   .left_icon{
      display: flex;
   }
   .btn2 {
      font-size: 0.4rem;
      text-align: center;
      width: 120px;
      padding: 0.17074rem 0.222222rem;
      border-radius: 25px;
      background: #409eff;
      color: #fff;
   }

.red {
  color: #b60c0d !important;
}
   .btn1 {
      width: 120px;
      font-size: 0.4rem;
      text-align: center;
      padding: 0.17074rem 0.222222rem;
      border-radius: 25px;
      border: 1px solid #dcdfe9;
      color: #0d0d0d;
   }

.user_page {
  width: 100%;
  height: calc(100% - 1.3rem);
   .box1_bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-top: 27px;
      // padding-bottom: 10px;
   }

  .content {
    width: 100%;
    height: 100%;
    padding: 0 0.3rem;
   .title_box_left {
      width: 50%;
      font-size: 0.4rem;
   }

    .top_icon {
      width: 100%;
      height: 1.5rem;
      display: flex;
      justify-content: flex-end;
      align-items: center;
   .title_box_right {
      width: 50%;
      font-size: 0.4rem;
   }

      .right_icon {
        width: 17%;
        height: 50%;
        display: flex;
   .green {
      color: #028f52 !important;
   }

        >div {
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;
   .cd_box {
      display: flex;
      flex-direction: column;
      background: #fff;
      border: 0.5px solid #e5e5e5;
      border-radius: 8px;
      margin-top: 17px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .3);
   }
   .cd_box_body{
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-radius: 8px 8px 0 0;
      padding:18px 8px;
      font-size: 0.4rem;
      font-weight: 500;
   }
   .cd_box_top{
          display: flex;
          align-items: center;
          background: #f5f5f5;
          border-radius: 8px 8px 0 0;
          padding:18px 8px;
          font-size: 0.4rem;
          font-weight: 500;
   }

          img {
            width: 0.6rem;
            height: 0.6rem;
          }
        }
      }
    }
   .red {
      color: #b60c0d !important;
   }

    .users {
      width: 100%;
      height: 1.7949rem;
      background: #fff;
      border-radius: 0.15rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
   .top_box {
      display: flex;
   }

      .left_tou {
        width: 80%;
        height: 70%;
        display: flex;
   .title_box {
      display: flex;
      font-size: 10px;
      color: #9ea3ae;
   }

        .left_tx {
          width: 20%;
          height: 100%;
          margin-left: 0.3rem;
          display: flex;
          align-items: center;
          justify-content: center;
   .user_page {
      width: 100%;
      height: calc(100% - 1.3rem);
      background: linear-gradient(to bottom, #3160FD, #ffffff);

          >div {
            width: 1rem;
            height: 1rem;
            border-radius: 50%;
            overflow: hidden;
            background: rgb(211, 211, 211);
      .content {
         width: 100%;
         height: 100%;
         padding: 0 0.3rem;

            img {
              width: 100%;
              height: 100%;
            }
          }
        }
         .top_icon {
            width: 100%;
            height: 1.5rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            // padding: 20px 0;
            .right_icon {
               width: 17%;
               height: 50%;
               display: flex;

        .right_name {
          width: 80%;
          height: 100%;
          display: flex;
          align-items: center;
          font-size: 0.4415rem;
               >div {
                  width: 100%;
                  height: 100%;
                  display: flex;
                  justify-content: space-between;
                  align-items: center;

          span {
            font-weight: 600;
          }
        }
      }
                  img {
                     width: 0.6rem;
                     height: 0.6rem;
                  }
               }
            }
         }

      .right_go {
        width: 20%;
        height: 70%;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding-right: 0.2rem;
         .users {
            width: 100%;
            height: 1.7949rem;
            background: #fff;
            border-radius: 0.15rem;
            display: flex;
            align-items: center;
            justify-content: space-between;

        img {
          width: 0.6rem;
          height: 0.6rem;
        }
      }
    }
            .left_tou {
               width: 80%;
               height: 70%;
               display: flex;

    .center_card {
      width: 100%;
      // height: 5.3846rem;
      background-image: linear-gradient(to right bottom, #ffffff, #dfedfc);
      // background-image: linear-gradient(to right, #ffffff , #dfedfc);
      margin-top: 0.5rem;
      border-radius: 0.15rem;
      padding: 0.5rem 0.4rem;
               .left_tx {
                  width: 20%;
                  height: 100%;
                  margin-left: 0.3rem;
                  display: flex;
                  align-items: center;
                  justify-content: center;

      .keyon {
        width: 100%;
        font-size: 0.359rem;
        display: flex;
        align-items: center;
        color: #3d4144;
        font-weight: 600;
        justify-content: center;
        padding-bottom: 0.2rem;
                  >div {
                     width: 1rem;
                     height: 1rem;
                     border-radius: 50%;
                     overflow: hidden;
                     background: rgb(211, 211, 211);

        span {
          font-weight: 600;
          font-size: 0.6rem;
        }
      }
                     img {
                        width: 100%;
                        height: 100%;
                     }
                  }
               }

      .num_price {
        width: 100%;
        // height: 0.6667rem;
        margin-top: 0.1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.5528rem;
        padding-bottom: 0.3rem;
               .right_name {
                  width: 80%;
                  height: 100%;
                  display: flex;
                  align-items: center;
                  font-size: 0.4415rem;

        span {
          font-weight: 600;
        }
      }
                  span {
                     font-weight: 600;
                  }
               }
            }

      .account {
        font-size: 0.6rem;
        font-weight: 600;
      }
            .right_go {
               width: 20%;
               height: 70%;
               display: flex;
               justify-content: flex-end;
               align-items: center;
               padding-right: 0.2rem;

      .yk {
        width: 100%;
        height: 0.5rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
               img {
                  width: 0.6rem;
                  height: 0.6rem;
               }
            }
         }

        >div {
          width: 33%;
          height: 100%;
          color: #97989d;
          display: flex;
          align-items: center;
          justify-content: center;
        }
         .center_card {
            width: 100%;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .3);
            // height: 5.3846rem;
            background: #fff;
            // background-image: linear-gradient(to right bottom, #ffffff, #dfedfc);
            // background-image: linear-gradient(to right, #ffffff , #dfedfc);
            // margin-top: 0.5rem;
            border-radius: 0.15rem;
            padding: 0.5rem 0.4rem;

        .orenge {
          // color: rgb(216, 141, 1) !important;
        }
      }
            .keyon {
               width: 100%;
               font-size: 0.359rem;
               display: flex;
               align-items: center;
               color: #3d4144;
               // font-weight: 600;
               // justify-content: center;
               padding-bottom: 0.2rem;

      .yk.es {
        margin-top: 0.3rem;
      }
               span {
                  // font-weight: 600;
                  font-size: 0.4rem;
               }
            }

      .yk.as {
        font-size: 0.4033rem;
        margin-top: 0.1rem;
            .num_price {
               width: 100%;
               // height: 0.6667rem;
               margin-top: 0.1rem;
               display: flex;
               // align-items: center;
               // justify-content: center;
               // font-size: 0.5528rem;
               padding-bottom: 0.3rem;

        span {
          color: #000;
          font-weight: 600;
        }
               span {
                  font-weight: 600;
                  font-size: 0.4rem;
               }
            }

        .bzz {
          // color: #4ea364;
        }
      }
            .account {
               font-size: 0.6rem;
               font-weight: 600;
            }

      .btns {
        width: 100%;
        height: 1.2821rem;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 0.25rem;
        background: #2d6ae9;
        font-size: 0.4015rem;
        color: #fff;
        margin-top: 0.35rem;
            .yk {
               width: 100%;
               height: 0.5rem;
               display: flex;
               align-items: center;
               justify-content: space-between;

        span {
          font-weight: 600;
        }
      }
               >div {
                  width: 33%;
                  height: 100%;
                  color: #97989d;
                  display: flex;
                  align-items: center;
                  justify-content: center;
               }

      .active {
        background: #4ea364;
      }
    }
               .orenge {
                  // color: rgb(216, 141, 1) !important;
               }
            }

    .jy {
      width: 100%;
      height: 1.5rem;
      border-radius: 0.2rem;
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 0.3rem;
      margin-top: 0.3rem;
            .yk.es {
               margin-top: 0.3rem;
            }

      .left_gn {
        width: 40%;
        height: 60%;
        display: flex;
            .yk.as {
               font-size: 0.4033rem;
               margin-top: 0.1rem;

        .l_icon {
          width: 30%;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
               span {
                  color: #000;
                  font-weight: 600;
               }

          img {
            width: 0.5041rem;
            height: 0.5041rem;
          }
        }
               .bzz {
                  // color: #4ea364;
               }
            }

        .r_title {
          width: 70%;
          height: 100%;
          display: flex;
          align-items: center;
          font-size: 0.4046rem;
          color: #404040;
            .btns {
               width: 100%;
               height: 1.2821rem;
               display: flex;
               align-items: center;
               justify-content: center;
               border-radius: 0.25rem;
               background: #2d6ae9;
               font-size: 0.4015rem;
               color: #fff;
               margin-top: 0.35rem;

          span {
            font-weight: 600;
          }
        }
      }
               span {
                  font-weight: 600;
               }
            }

      .right_gos {
        width: 20%;
        height: 60%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
            .active {
               background: #4ea364;
            }
         }

        img {
          width: 0.6rem;
          height: 0.6rem;
        }
      }
    }
  }
}
         .jy {
            width: 100%;
            height: 1.5rem;
            border-radius: 0.2rem;
            background: #fff;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 0.3rem;
            margin-top: 0.3rem;

.setting_content {
  width: 100%;
  height: 5rem;
  padding: 0.3rem;
            .left_gn {
               // width: 40%;
               height: 60%;
               display: flex;

  .old_password {
    width: 100%;
    height: 1rem;
    background: rgb(243, 243, 243);
    border-radius: 0.15rem;
    display: flex;
    margin-top: 0.5rem;
               .l_icon {
                  // width: 30%;
                  height: 100%;
                  display: flex;
                  justify-content: center;
                  align-items: center;

    .left_titles {
      width: 25%;
      height: 100%;
      display: flex;
      align-items: center;
      padding-left: 0.2rem;
                  img {
                     width: 0.5041rem;
                     height: 0.5041rem;
                  }
               }

      // justify-content: flex-end;
      span {
        font-weight: 600;
      }
    }
               .r_title {
                  // width: 70%;
                  height: 100%;
                  display: flex;
                  align-items: center;
                  font-size: 0.4046rem;
                  color: #404040;
                  padding-left: 0.3rem;

    .right_password_input {
      width: 80%;
      height: 100%;
      display: flex;
      align-items: center;
                  span {
                     font-weight: 600;
                  }
               }
            }

      input {
        width: 100%;
        height: 100%;
        padding-left: 0.2rem;
      }
    }
  }
            .right_gos {
               // width: 20%;
               height: 60%;
               display: flex;
               align-items: center;
               justify-content: flex-end;

  .btn_setting {
    width: 100%;
    height: 1.3rem;
    border-radius: 0.15rem;
    background: #2d6ae9;
    color: #fff;
    font-size: 0.4615rem;
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
               img {
                  width: 0.6rem;
                  height: 0.6rem;
               }
            }
         }
      }
   }

    span {
      font-weight: 600;
    }
  }
}
   .setting_content {
      width: 100%;
      height: 5rem;
      padding: 0.3rem;

      .old_password {
         width: 100%;
         height: 1rem;
         background: rgb(243, 243, 243);
         border-radius: 0.15rem;
         display: flex;
         margin-top: 0.5rem;

         .left_titles {
            width: 25%;
            height: 100%;
            display: flex;
            align-items: center;
            padding-left: 0.2rem;

            // justify-content: flex-end;
            span {
               font-weight: 600;
            }
         }

         .right_password_input {
            width: 80%;
            height: 100%;
            display: flex;
            align-items: center;

            input {
               width: 100%;
               height: 100%;
               padding-left: 0.2rem;
            }
         }
      }

      .btn_setting {
         width: 100%;
         height: 1.3rem;
         border-radius: 0.15rem;
         background: #2d6ae9;
         color: #fff;
         font-size: 0.4615rem;
         margin-top: 0.5rem;
         display: flex;
         align-items: center;
         justify-content: center;

         span {
            font-weight: 600;
         }
      }
   }
</style>