<template>
  <div class="safety-set">
    <div class="safety-title pf600 fs18 fc121212">安全验证</div>
    <div class="account-level">
      <div class="level-left">
        <img src="../../../assets/img/index/user/level.svg" alt="" />
      </div>
      <div class="level-right">
        <div class="pf600 fs14 fc121212">账户安全等级较低</div>
        <div class="pf600 fs12 fcA8A8A8">为了您的账户安全，建议至少开启2项安全验证</div>
      </div>
    </div>
    <div class="safety-verify">
      <div class="key">
        <div class="key-img">
          <div class="img-left">
            <img src="../../../assets/img/index/user/key.png" alt="" />
          </div>
          <div class="img-right">
            <img src="../../../assets/icon/index/right-arrow-gray.svg" alt="" />
          </div>
        </div>
        <div class="key-text pf500 fs14 fc333333">通行密钥</div>
        <div class="key-use pf500 fs12 fc999999">未启用</div>
      </div>
      <div class="google-verify">
        <div class="key-img">
          <div class="img-left">
            <img src="../../../assets/img/index/user/google.png" alt="" />
          </div>
          <div class="img-right">
            <img src="../../../assets/icon/index/right-arrow-gray.svg" alt="" />
          </div>
        </div>
        <div class="key-text pf500 fs14 fc333333">Google验证</div>
        <div class="key-use pf500 fs12 fc999999">未启用</div>
      </div>
    </div>
    <div class="safety-verify">
      <div class="key">
        <div class="key-img">
          <div class="img-left">
            <img src="../../../assets/img/index/user/phone.png" alt="" />
          </div>
          <div class="img-right">
            <img src="../../../assets/icon/index/right-arrow-gray.svg" alt="" />
          </div>
        </div>
        <div class="key-text pf500 fs14 fc333333">手机验证</div>
        <div class="key-use pf500 fs12 fc999999">190****1520</div>
      </div>
      <div class="google-verify">
        <div class="key-img">
          <div class="img-left">
            <img src="../../../assets/img/index/user/email.png" alt="" />
          </div>
          <div class="img-right">
            <img src="../../../assets/icon/index/right-arrow-gray.svg" alt="" />
          </div>
        </div>
        <div class="key-text pf500 fs14 fc333333">邮箱验证</div>
        <div class="key-use pf500 fs12 fc999999">36*****90@qq.com</div>
      </div>
    </div>
    <div class="pay-password">
      <div class="pf500 fs14 fc333333">支付密码</div>
      <div class="password-right pf500 fs14 fc999999">
        设置
        <img src="../../../assets/icon/index/right-arrow-gray.svg" alt="" />
      </div>
    </div>
    <div class="safety-text pf600 fs18 fc121212">高级安全设置</div>
    <div class="hidden-address">
      <div class="pf500 fs14 fc333333">隐藏钱包地址</div>
      <Switch v-model="hiddenAddress" :disabled="false"></Switch>
    </div>
    <div class="logout">
      <div class="pf500 fs14 fc333333">注销登录</div>
      <img src="../../../assets/icon/index/right-arrow-gray.svg" alt="" />
    </div>
    <div class="keep-login">
      <div class="pf500 fs14 fc333333">保持登录</div>
      <Switch v-model="keepLogin" :disabled="false"></Switch>
    </div>
    <div class="app-lock">
      <div class="pf500 fs14 fc333333">APP锁定</div>
      <div class="password-right pf500 fs14 fc999999">
        5分钟
        <img src="../../../assets/icon/index/right-arrow-gray.svg" alt="" />
      </div>
    </div>
  </div>
</template>
<script setup>
  import Switch from "../../../components/ui/Switch.vue";
  import { ref } from "vue";

  const hiddenAddress = ref(true);
  const keepLogin = ref(false);
</script>
<style lang="less" scoped>
  .safety-set {
    margin-top: 15px;
    width: 349rpx;

    .safety-title {
      height: 24px;
      line-height: 24px;
    }

    .account-level {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      margin-top: 14px;
      width: 349px;
      height: 44px;

      .level-left {
        width: 44px;
        height: 44px;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .level-right {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        margin-left: 16px;
        height: 44px;
        letter-spacing: 0.2px;
      }
    }

    .safety-verify {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      margin: 0 auto;
      margin-top: 14px;
      width: 327px;
      height: 106px;

      .key {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        width: 155px;
        height: 106px;
        border-radius: 12px;
        border: 1px solid #ebebeb;
        box-sizing: border-box;

        .key-img {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
          margin-top: 11px;
          width: 136px;
          height: 32px;

          .img-left {
            width: 32px;
            height: 32px;

            img {
              width: 100%;
              height: 100%;
            }
          }

          .img-right {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 20px;
            height: 20px;

            img {
              width: 5px;
              height: 10px;
            }
          }
        }

        .key-text {
          margin-top: 7px;
          width: 136px;
          height: 23px;
          line-height: 23px;
        }

        .key-use {
          margin-top: 1px;
          width: 136px;
          height: 20px;
          line-height: 20px;
        }
      }

      .google-verify {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        width: 155px;
        height: 106px;
        border-radius: 12px;
        border: 1px solid #ebebeb;
        box-sizing: border-box;

        .key-img {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
          margin-top: 11px;
          width: 136px;
          height: 32px;

          .img-left {
            width: 32px;
            height: 32px;

            img {
              width: 100%;
              height: 100%;
            }
          }

          .img-right {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 20px;
            height: 20px;

            img {
              width: 5px;
              height: 10px;
            }
          }
        }

        .key-text {
          margin-top: 7px;
          width: 136px;
          height: 23px;
          line-height: 23px;
        }

        .key-use {
          margin-top: 1px;
          width: 136px;
          height: 20px;
          line-height: 20px;
        }
      }
    }

    .pay-password {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      margin-top: 15px;
      width: 349px;
      height: 24px;

      .password-right {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        height: 24px;

        img {
          margin-left: 7.5px;
          margin-right: 7.5px;
        }
      }
    }

    .safety-text {
      margin-top: 14px;
      height: 24px;
      line-height: 24px;
    }

    .hidden-address {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      margin-top: 10px;
      width: 349px;
      height: 24px;
    }

    .logout {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      margin-top: 22px;
      width: 349px;
      height: 24px;

      img {
        margin-right: 7.5px;
        width: 5px;
        height: 10px;
      }
    }

    .keep-login {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      margin-top: 22px;
      width: 349px;
      height: 24px;
    }

    .app-lock {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      margin-top: 15px;
      width: 349px;
      height: 24px;

      .password-right {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        height: 24px;

        img {
          margin-left: 7.5px;
          margin-right: 7.5px;
        }
      }
    }
  }
</style>
