1

zzzz

2024-04-07 74bcf0374dad94d352b68f10e2e3d6e0ebc2c9dc

 src/page/newUser/setting.vue

@@ -1,671 +1,657 @@
<template>
   <div class="content">
      <div class="top_back">
         <div class="left_back_icon" @click="$router.go(-1)">
            <img src="../../assets/img/zuojiantou.png" alt />
         </div>
         <div class="titles">
            <span>{{ $t('setting') }}</span>
         </div>
      </div>
      <div style="width: 100%;height: 10px;background-color: #f8f8f8;"></div>
  <div class="content">
    <div class="top_back">
      <div class="left_back_icon" @click="$router.go(-1)">
        <img src="../../assets/img/zuojiantou.png" alt />
      </div>
      <div class="titles">
        <span>{{ $t("setting") }}</span>
      </div>
    </div>
    <div style="width: 100%; height: 10px; background-color: #f8f8f8"></div>

    <div class="jy" @click="handleGoToBankCard()">
      <div class="left_gn">
        <div class="l_icon">
          <!-- <img src="../../assets/img/yeb.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="goToSettings()">
      <div class="left_gn">
        <div class="l_icon">
          <!-- <img src="../../assets/img/yeb.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="handleGoToBankCard()">
         <div class="left_gn">
            <div class="l_icon">
               <!-- <img src="../../assets/img/yeb.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="goToSettings()">
         <div class="left_gn">
            <div class="l_icon">
               <!-- <img src="../../assets/img/yeb.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="handleGoToAuthentication()">
      <div class="left_gn">
        <div class="l_icon">
          <!-- <img src="../../assets/img/yeb.png" alt /> -->
        </div>
        <div class="r_title">
          <span>{{ $t("hj146") }}</span>
        </div>
      </div>
      <div class="right_gos">
        <div class="right_gos_txt" v-if="userInfo.realName">
          {{ $t("ysmrz") }}
        </div>
        <img v-else src="../../assets/img/youjiantou.png" alt />
      </div>
    </div>

<!--       <div class="jy" @click="handleGoToTransfer()">
         <div class="left_gn">
            <div class="l_icon">
            </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/yeb.png" alt /> -->
            </div>
            <div class="r_title">
               <span>{{ $t('hj146') }}</span>
            </div>
         </div>
         <div class="right_gos">
            <div class="right_gos_txt" v-if="userInfo.realName">{{$t('ysmrz')}}</div>
            <img v-else src="../../assets/img/youjiantou.png" alt />
         </div>
      </div>
<!-- 
      <div class="jy" @click="subclick()">
         <div class="left_gn">
            <div class="l_icon">
            </div>
            <div class="r_title">
               <span>{{ $t('subdk') }}</span>
            </div>
         </div>
         <div class="right_gos">
            <img src="../../assets/img/youjiantou.png" alt />
         </div>
      </div>

      <div class="jy" @click="yebclick()">
         <div class="left_gn">
            <div class="l_icon">
            </div>
            <div class="r_title">
               <span>{{ $t('yeb') }}</span>
            </div>
         </div>
         <div class="right_gos">
            <img src="../../assets/img/youjiantou.png" alt />
         </div>
      </div> -->
      <div class="jy" @click="clicklang()">
         <div class="left_gn">
            <div class="l_icon">
            </div>
            <div class="r_title">
               <span>{{ $t('yy') }}</span>
            </div>
         </div>
         <div class="right_gos">
            <div style="margin-right: 10px;">{{language}}</div>
         </div>
      </div>
      <van-popup v-model="settingDialog" position="bottom" :style="{ height: '35%' }" @close="popClose">
         <div class="lang_box" v-for="(item,index) in actions" :key="index" @click="qkclick(item)">
            <div :class="$i18n.locale==item.lang?'lang_box_txt':'lang_box_txta'">{{item.text}}</div>
         </div>
      </van-popup>
      <van-popup v-model="pswDialog" 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="btn_s">
         <button class="btn_s_box" @click="handleOutLoginClick()">{{ $t('hj148') }}</button>
      </div>
   </div>
    <div class="jy" @click="clicklang()">
      <div class="left_gn">
        <div class="l_icon"></div>
        <div class="r_title">
          <span>{{ $t("yy") }}</span>
        </div>
      </div>
      <div class="right_gos">
        <div style="margin-right: 10px">{{ language }}</div>
      </div>
    </div>
    <van-popup v-model="settingDialog" position="bottom" :style="{ height: '35%' }" @close="popClose">
      <div class="lang_box" v-for="(item, index) in actions" :key="index" @click="qkclick(item)">
        <div :class="$i18n.locale == item.lang ? 'lang_box_txt' : 'lang_box_txta'">
          {{ item.text }}
        </div>
      </div>
    </van-popup>
    <van-popup v-model="pswDialog" 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="btn_s">
      <button class="btn_s_box" @click="handleOutLoginClick()">
        {{ $t("hj148") }}
      </button>
    </div>
  </div>
</template>

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

   export default {
      name: 'newUser',
      data() {
         return {
            name: '大狗子',
            pswDialog:false,
            selectUserFlag: true,
            settingDialog: false,
            oldPassword: '', // 旧密码
            newPassword: '', // 新密码
            cirNewPassword: '', // 确认新密码
            userInfo: [],
            onlineService: '',
            language:'',
            actions: [
              { text: 'English', icon: require('@/assets/ico/english.png'), lang: 'zh-CN' },
              { text: 'हिंदी', icon: require('@/assets/ico/india.png'), lang: 'en' },
              // { text: '繁体中文', icon: require('@/assets/ico/tw.png'), lang: 'tw' }
            ]
         }
      },
      components: {},
      created() {
         this.getUserInfo()
         this.language = window.localStorage.getItem('language')
         console.log(window.localStorage.getItem('language'));
         if(this.language == 'zh-CN'){
            this.language = 'English'
         }else{
            this.language = 'हिंदी'
         }
      },
      methods: {
         popClose(){
            this.settingDialog = false
         },
         qkclick(e){
            this.settingDialog = false
            window.localStorage.setItem('language', e.lang)
            this.$i18n.locale = e.lang
            this.language = e.text
         },
         clicklang(){
            this.settingDialog = true
         },
         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: "大狗子",
        pswDialog: false,
        selectUserFlag: true,
        settingDialog: false,
        oldPassword: "", // 旧密码
        newPassword: "", // 新密码
        cirNewPassword: "", // 确认新密码
        userInfo: [],
        onlineService: "",
        language: "",
        actions: [{
            text: "English",
            icon: require("@/assets/ico/english.png"),
            lang: "zh-CN",
          },
          {
            text: "हिंदी",
            icon: require("@/assets/ico/india.png"),
            lang: "en"
          },
          {
            text: "한국인",
            icon: require("@/assets/ico/india.png"),
            lang: "hy"
          },
          {
            text: "ภาษาไทย",
            icon: require("@/assets/ico/india.png"),
            lang: "ty",
          },
          {
            text: "日本語にほんご",
            icon: require("@/assets/ico/india.png"),
            lang: "ry",
          },

            var newStr = str.split('.')
            var point = newStr[1]
          {
            text: "繁体中文",
            icon: require("@/assets/ico/tw.png"),
            lang: "tw"
          },
        ],
      };
    },
    components: {},
    created() {
      this.getUserInfo();
      this.language = window.localStorage.getItem("language");
      console.log(window.localStorage.getItem("language"));
      if (this.language == "zh-CN") {
        this.language = "English";
      } else {
        this.language = "हिंदी";
      }
    },
    methods: {
      ...mapMutations(["undataToken"]),

            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;
      popClose() {
        this.settingDialog = false;
      },
      qkclick(e) {
        this.settingDialog = false;
        window.localStorage.setItem("language", e.lang);
        this.$i18n.locale = e.lang;
        this.language = e.text;
      },
      clicklang() {
        this.settingDialog = true;
      },
      yebclick() {
        this.$router.push("/yeb");
      },
      regexNum(str) {
        console.log(str);
        str = str.toString();
        if (str.indexOf(".") == -1) {
          str = str + ".00";
        }

            }
         },
         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==0){
               this.$router.push('/wallet')
            }else if(e==1){
               this.$router.push('/tixian')
            }else{
					
               this.$router.push('/transfers')
            }
				
         },
         subclick() {
            this.$router.push('/SubDK')
         },
         subaclick() {
            this.$router.push('/tixian')
         },
         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('/setting')
         },
         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;
        }
      },
      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() {
        this.$router.push("/wallet");
      },
      gotoa(e) {
        if (e == 0) {
          this.$router.push("/wallet");
        } else if (e == 1) {
          this.$router.push("/tixian");
        } else {
          this.$router.push("/transfers");
        }
      },
      subclick() {
        this.$router.push("/SubDK");
      },
      subaclick() {
        this.$router.push("/tixian");
      },
      handleZh() {
        this.selectUserFlag = !this.selectUserFlag;

            })
         },
         goToSettings() {
            if (this.userInfo.length === 0) {
               this.$store.commit('dialogVisible', true)
               return
            }
            // 每次打开dialog 清空密码数据
            this.pswDialog = !this.pswDialog
            if (this.pswDialog) {
               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])
            }
         }
      },
        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() {
        // 每次打开dialog 清空密码数据
        this.pswDialog = !this.pswDialog;
        if (this.pswDialog) {
          this.oldPassword = "";
          this.newPassword = "";
          this.cirNewPassword = "";
        }
      },
      handleGoToTransfer() {
        this.$router.push("/transfers");
      },
      handleGoToAuthentication() {
        this.$router.push("/authentications");
      },
      handleGoToAuthenticationaz() {
        this.$router.push("/download");
      },
      handleGoToBankCard() {
        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.undataToken(null);
          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;

   }
              this.pswDialog = false;
              this.settingDialog = false;
              Notify({
                type: "success",
                message: this.$t("密码修改成功")
              });
              this.toRegister()
            } 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">
   .right_gos_txt{
      margin-right: 15px;
   }
   .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;
       }
     }
   }
   .lang_box_txta{
      width: 100%;
      height: 100px;
      text-align: center;
      line-height: 100px;
      border-bottom: 1px solid #ecf5ff;
   }
   .lang_box_txt{
      width: 100%;
      height: 100px;
      text-align: center;
      line-height: 100px;
      border-bottom: 1px solid #ecf5ff;
      color: #2196F3;
   }
   .lang_box{
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
   }
   .btn_s_box{
      border: none;
      background: #409eff;
      color: #fff;
      height: 70px;
      width: 100%;
      line-height: 70px;
      font-size: 16px;
      text-align: center;
      border-radius: 15px;
      font-weight: 600;
      margin: 40px 20px 0 20px;
   }
   .btn_s{
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
   }
   .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;
      padding-top: 0.3rem;
      border-bottom: 1px solid #ecf5ff;
	
      .left_gn {
         // width: 40%;
         height: 60%;
         display: flex;
	
         .l_icon {
            // width: 30%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
	
            img {
               width: 0.5041rem;
               height: 0.5041rem;
            }
         }
	
         .r_title {
            // width: 70%;
            height: 100%;
            display: flex;
            align-items: center;
            font-size: 0.4046rem;
            color: #404040;
            padding-left: 0.4rem;
	
            span {
               font-weight: 600;
            }
         }
      }
	
      .right_gos {
         // width: 20%;
         height: 60%;
         display: flex;
         align-items: center;
         justify-content: flex-end;
	
         img {
            width: 0.6rem;
            height: 0.6rem;
         }
      }
   }
   body {
      background-color: #F8F8F8;
   }
  .right_gos_txt {
    margin-right: 15px;
  }

   .pages_logo_btn_right {
      margin-left: 20px;
      margin-top: 20px;
      display: inline-block;
      padding: 16px 40px;
      text-decoration: none;
      color: #fff;
      background: #f44336;
      border-radius: 40px;
   }
  .setting_content {
    width: 100%;
    height: 5rem;
    padding: 0.3rem;

   .pages_logo_btn_left {
      border-radius: 40px;
      margin-top: 20px;
      display: inline-block;
      padding: 16px 40px;
      text-decoration: none;
      color: #fff;
      background: #2196F3;
   }
    .old_password {
      width: 100%;
      height: 1rem;
      background: rgb(243, 243, 243);
      border-radius: 0.15rem;
      display: flex;
      margin-top: 0.5rem;

   .pages_logo_btn {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 100px;
   }
      .left_titles {
        width: 25%;
        height: 100%;
        display: flex;
        align-items: center;
        padding-left: 0.2rem;

   .pages_logo_img {
      width: 200px;
      height: 200px;
      border-radius: 20px;
   }
        // justify-content: flex-end;
        span {
          font-weight: 600;
        }
      }

   .pages_logo_txt {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 50px;
   }
      .right_password_input {
        width: 80%;
        height: 100%;
        display: flex;
        align-items: center;

   .pages_logo {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 100px;
   }
        input {
          width: 100%;
          height: 100%;
          padding-left: 0.2rem;
        }
      }
    }

   .content {
      width: 100%;
      height: 100%;
      // padding: 0 0.3rem;
    .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;

      .top_back {
         width: 100%;
         height: 2rem;
         display: flex;
         background-color: #fff;
         >div {
            width: 10%;
            height: 100%;
            display: flex;
            align-items: center;
         }
      span {
        font-weight: 600;
      }
    }
  }

         img {
            width: 0.6rem;
            height: 0.6rem;
            margin-left: 20px;
         }
  .lang_box_txta {
    width: 100%;
    height: 100px;
    text-align: center;
    line-height: 100px;
    border-bottom: 1px solid #ecf5ff;
  }

         .titles {
            width: 100%;
            height: 1.5rem;
            margin-top: 15px;
            // margin-left: 110px;
            display: flex;
            margin-right: 20px;
            justify-content: center;
            align-items: center;
  .lang_box_txt {
    width: 100%;
    height: 100px;
    text-align: center;
    line-height: 100px;
    border-bottom: 1px solid #ecf5ff;
    color: #2196f3;
  }

            span {
               font-weight: 600;
            }
         }
      }
  .lang_box {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }

   }
</style>
  .btn_s_box {
    border: none;
    background: #409eff;
    color: #fff;
    height: 70px;
    width: 100%;
    line-height: 70px;
    font-size: 16px;
    text-align: center;
    border-radius: 15px;
    font-weight: 600;
    margin: 40px 20px 0 20px;
  }

  .btn_s {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .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;
    padding-top: 0.3rem;
    border-bottom: 1px solid #ecf5ff;

    .left_gn {
      // width: 40%;
      height: 60%;
      display: flex;

      .l_icon {
        // width: 30%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

        img {
          width: 0.5041rem;
          height: 0.5041rem;
        }
      }

      .r_title {
        // width: 70%;
        height: 100%;
        display: flex;
        align-items: center;
        font-size: 0.4046rem;
        color: #404040;
        padding-left: 0.4rem;

        span {
          font-weight: 600;
        }
      }
    }

    .right_gos {
      // width: 20%;
      height: 60%;
      display: flex;
      align-items: center;
      justify-content: flex-end;

      img {
        width: 0.6rem;
        height: 0.6rem;
      }
    }
  }

  body {
    background-color: #f8f8f8;
  }

  .pages_logo_btn_right {
    margin-left: 20px;
    margin-top: 20px;
    display: inline-block;
    padding: 16px 40px;
    text-decoration: none;
    color: #fff;
    background: #f44336;
    border-radius: 40px;
  }

  .pages_logo_btn_left {
    border-radius: 40px;
    margin-top: 20px;
    display: inline-block;
    padding: 16px 40px;
    text-decoration: none;
    color: #fff;
    background: #2196f3;
  }

  .pages_logo_btn {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 100px;
  }

  .pages_logo_img {
    width: 200px;
    height: 200px;
    border-radius: 20px;
  }

  .pages_logo_txt {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
  }

  .pages_logo {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 100px;
  }

  .content {
    width: 100%;
    height: 100%;
    // padding: 0 0.3rem;

    .top_back {
      width: 100%;
      height: 2rem;
      display: flex;
      background-color: #fff;

      >div {
        width: 10%;
        height: 100%;
        display: flex;
        align-items: center;
      }

      img {
        width: 0.6rem;
        height: 0.6rem;
        margin-left: 20px;
      }

      .titles {
        width: 100%;
        height: 1.5rem;
        margin-top: 15px;
        // margin-left: 110px;
        display: flex;
        margin-right: 20px;
        justify-content: center;
        align-items: center;

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