给领导

XJF
src/views/Account.vue
--- a/src/views/Account.vue
查看文件 @3e73029
+++ b/src/views/Account.vue
查看文件 @3e73029
 <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">基本信息</van-tab>
+        <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">
@@ -57,32 +97,85 @@ const active = ref(0)
 </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{
+
+      .banner {
         width: 640px;
         display: flex;
         justify-content: space-between;
+
         .zuo {
           .pic {
             width: 300px;
             height: 300px;
+
             // background-color: pink;
             img {
               width: 100%;
@@ -90,6 +183,7 @@ const active = ref(0)
             }
           }
+
           .button {
             margin-top: 30px;
             padding: 3px 20px;
@@ -102,11 +196,14 @@ const active = ref(0)
             border-radius: 8px;
           }
         }
+
         .you {
           padding: 10px;
           width: 250px;
           height: 120px;
           background-color: #fffdea;
+          border-radius: 3px;
+
           .red {
             padding-top: 10px;
             padding-right: 10px;
@@ -114,6 +211,7 @@ const active = ref(0)
             color: #f00;
             font-size: 14px;
           }
+
           .button {
             margin-top: 30px;
             padding: 3px 20px;
@@ -129,6 +227,7 @@ const active = ref(0)
         }
       }
     }
+
     .van-tab {
       background-color: #e5e5e5;
     }
@@ -136,27 +235,32 @@ const active = ref(0)
     .ban {
       margin-top: 15px;
       width: 400px;
+
       .old {
         padding-bottom: 5px;
-        span{
-          img{
+        span {
+
+          img {
             width: 70px;
             height: 30px;
           }
         }
       }
+
       .toast {
         padding-top: 5px;
         font-size: 12px;
         color: rgb(255, 41, 41);
       }
-      input{
+
+      input {
         width: 100%;
         height: 30px;
         border: none;
       }
     }
+
     .btn {
       margin-top: 35px;
       padding: 3px 30px;
@@ -169,5 +273,4 @@ const active = ref(0)
       border-radius: 8px;
     }
   }
-}
-</style>
+}</style>