<script setup>
import { ref } from 'vue'
const active = ref(0)
const showCenter = ref(false);
const showPopup = () => {
  console.log(111)
  showCenter.value = true;
};
</script>
<template>
  <div class="right">
    <div class="biti">账号管理</div>
    <div class="container">
      <van-tabs v-model:active="active" line-width="0px">
        <van-tab title="基本信息" class="box">
          <div class="lie">
            <div>姓名</div>
            <div class="lin">XXX</div>
          </div>
          <div class="lie">
            <div>性别</div>
            <div class="lin">
              <input type="radio" name="value" value="男" checked="checked">男
              <input type="radio" name="value" value="女">女
            </div>
          </div>
          <div class="lie">
            <div>工号</div>
            <div class="lin">1111111</div>
          </div>
          <div class="lie">
            <div>手机号</div>
            <div class="lin1">111 1111 1111</div>
            <div class="b" @click="showPopup">修改</div>
          </div>
          <div class="lie">
            <div>单位</div>
            <div class="b2">+添加单位</div>
            <div class="b3">删除记录</div>
          </div>
          <div class="list" v-for="item in 3" :key="item">
            <div class="list1">天津电子职业信息技术学院</div>
            <div class="list2">12320014</div>
          </div>
          <!-- 手机号登录 -->
          <div>
            <van-popup v-model:show="showCenter" close-icon="close" round :style="{ padding: '64px' }">


            </van-popup>>
          </div>
        </van-tab>
        <van-tab title="我的头像" class="box">
          <div class="banner">
            <div class="zuo">
              <div class="pic">
                <img src="../static/touxiang.jpg" alt="">
              </div>
              <div class="button">保存头像</div>
            </div>
            <div class="you">
              请选择大小小于2M的.jpg文件
              <div class="red">请上传本人照片!</div>
              <div class="button">
                上传头像
              </div>
            </div>
          </div>
        </van-tab>
        <van-tab title="密码管理" class="box">
          <div class="ban">
            <div class="old">旧密码：</div>
            <input type="password" placeholder="请输入" />
          </div>
          <div class="ban">
            <div class="old">新的密码：</div>
            <input type="password" @focus="onfocus" placeholder="请输入" />
            <div class="toast">
              *密码要求8-16位，至少包含数字，字母，字符两种元素！
            </div>
          </div>
          <div class="ban">
            <div class="old">确认新密码：</div>
            <input type="password" placeholder="请输入" />
          </div>
          <div class="ban">
            <div class="old">
              验证码：<span><img src="@/static/code.png" alt="" /></span>
            </div>
            <input type="password" placeholder="请输入" />
          </div>
          <div class="btn" @click="onclick">保存</div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<style lang="scss">
.right {
  background-color: #e5e5e5;
  height: 535px;
  width: 100%;
  margin-top: 40px;

  .list {
    margin-top: 20px;
    border-bottom: #647476 1px dashed;
    border: opacity 0.4em;

    .list1 {
      color: black;
      margin-bottom: 10px;
    }

    .list2 {
      color: #bcbec8;
    }
  }

  .lie {
    display: flex;
    font-weight: 700;
    margin-top: 20px;

    input {
      margin-right: 15px;
    }

    .b {
      margin-left: 10px;
      color: #07a1f4;
    }

    .b2 {
      margin-left: 49px;
      color: #07a1f4;
    }

    .b3 {
      margin-left: 20px;
      color: #07a1f4;
    }

    .lin1 {
      margin-left: 34px;
    }

    .lin {
      margin-left: 50px;
    }
  }

  .biti {
    font-weight: 800;
    font-size: 30px;
    margin: 30px 0px 20px 40px;
  }

  .container {
    display: flex;
    flex-direction: row;
    margin: 40px;

    // width: 100%;
    .box {
      width: 500px;

      .banner {
        width: 640px;
        display: flex;
        justify-content: space-between;

        .zuo {
          .pic {
            width: 300px;
            height: 300px;

            // background-color: pink;
            img {
              width: 100%;
              height: 100%;
            }

          }

          .button {
            margin-top: 30px;
            padding: 3px 20px;
            width: 70px;
            height: 40px;
            background-color: #fff;
            text-align: center;
            line-height: 40px;
            border: 1px solid #5b5b5b;
            border-radius: 8px;
          }
        }

        .you {
          padding: 10px;
          width: 250px;
          height: 120px;
          background-color: #fffdea;
          border-radius: 3px;

          .red {
            padding-top: 10px;
            padding-right: 10px;
            text-align: right;
            color: #f00;
            font-size: 14px;
          }

          .button {
            margin-top: 30px;
            padding: 3px 20px;
            width: 50px;
            height: 20px;
            background-color: #fff;
            text-align: center;
            font-size: 10px;
            line-height: 20px;
            border: 1px solid #5b5b5b;
            border-radius: 8px;
          }
        }
      }
    }

    .van-tab {
      background-color: #e5e5e5;
    }

    .ban {
      margin-top: 15px;
      width: 400px;

      .old {
        padding-bottom: 5px;

        span {

          img {
            width: 70px;
            height: 30px;
          }
        }
      }

      .toast {
        padding-top: 5px;
        font-size: 12px;
        color: rgb(255, 41, 41);
      }

      input {
        width: 100%;
        height: 30px;
        border: none;
      }
    }

    .btn {
      margin-top: 35px;
      padding: 3px 30px;
      width: 50px;
      height: 30px;
      color: #fff;
      text-align: center;
      line-height: 30px;
      background-color: #6170c3;
      border-radius: 8px;
    }
  }
}</style>