baocun

@@ -15,11 +15,6 @@ const router = createRouter({
           component: () => import('@/views/MyClass.vue')
         },
         {
-          path: 'newclass',
-          name: 'newclass',
-          component: () => import('@/views/NewClass.vue')
-        },
-        {
           path: 'account',
           name: 'account',
           component: () => import('@/views/Account.vue')

 <script setup>
 import { ref } from 'vue'
 const active = ref(0)
-const showCenter = ref(false);
+const showCenter = ref(false)
+const value = ref('')
+const text = ref('发送验证码')
 const showPopup = () => {
   console.log(111)
-  showCenter.value = true;
-};
+  showCenter.value = true
+}
 </script>
 <template>
   <div class="right">
@@ -20,8 +22,8 @@ const showPopup = () => {
           <div class="lie">
             <div>性别</div>
             <div class="lin">
-              <input type="radio" name="value" value="男" checked="checked">男
-              <input type="radio" name="value" value="女">女
+              <input type="radio" name="value" value="男" checked="checked" />男
+              <input type="radio" name="value" value="女" />女
             </div>
           </div>
           <div class="lie">
@@ -43,27 +45,51 @@ const showPopup = () => {
             <div class="list2">12320014</div>
           </div>
           <!-- 手机号登录 -->
-          <div>
-            <van-popup v-model:show="showCenter" close-icon="close" round :style="{ padding: '64px' }">
-
-
-            </van-popup>>
+          <div class="popup">
+            <van-popup
+              v-model:show="showCenter"
+              @click-close-icon="showCenter"
+              closeable="true"
+              close-icon-position="top-left"
+              close-icon="arrow-left"
+              round
+              :style="{ padding: '64px', width: '500px', height: '400px' }"
+            >
+              <div class="title">验证码登录</div>
+              <div class="code">
+                <van-cell-group inset>
+                  <!-- 手机号 -->
+                  <van-field v-model="value"  placeholder="187159***14" />
+                  <!-- 验证码 -->
+                  <van-field
+                    v-model="sms"
+                    center
+                    clearable
+                    placeholder="验证码"
+                  >
+                    <template #button>
+                      <van-button size="small" color="#6170c3" :text="text" round="true" @click="dbclick"></van-button>
+                    </template>
+                  </van-field>
+                  <!-- 底部按钮 -->
+                  <van-button size="large" color="#6170c3" round="true">确认修改</van-button>
+                </van-cell-group>
+              </div>
+            </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="">
+                <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 class="button">上传头像</div>
             </div>
           </div>
         </van-tab>
@@ -75,9 +101,7 @@ const showPopup = () => {
           <div class="ban">
             <div class="old">新的密码：</div>
             <input type="password" @focus="onfocus" placeholder="请输入" />
-            <div class="toast">
-              *密码要求8-16位，至少包含数字，字母，字符两种元素！
-            </div>
+            <div class="toast">*密码要求8-16位，至少包含数字，字母，字符两种元素！</div>
           </div>
           <div class="ban">
             <div class="old">确认新密码：</div>
@@ -117,6 +141,14 @@ const showPopup = () => {
       color: #bcbec8;
     }
   }
+  .code {
+    margin-top: 60px;
+    .van-cell{
+      margin-bottom: 20px;
+      border: 1px solid #cacaca;
+      border-radius: 18px;
+    }
+  }
 
   .lie {
     display: flex;
@@ -181,7 +213,6 @@ const showPopup = () => {
               width: 100%;
               height: 100%;
             }
-
           }
 
           .button {
@@ -240,7 +271,6 @@ const showPopup = () => {
         padding-bottom: 5px;
 
         span {
-
           img {
             width: 70px;
             height: 30px;
@@ -273,4 +303,5 @@ const showPopup = () => {
       border-radius: 8px;
     }
   }
-}</style>
+}
+</style>

 <script setup>
 import Head from '@/components/head.vue'
-import {ref} from"vue"
-const list = ref(["首页","课程","笔记","消息","云盘","通讯录","账号管理","班级管理"])
-const navigator = () => {
-  
-}
+import { ref } from 'vue'
+const list = ref(['首页', '课程', '笔记', '消息', '云盘', '通讯录', '账号管理', '班级管理'])
+const navigator = () => {}
 </script>
 
 <template>
@@ -33,8 +31,9 @@ const navigator = () => {
 </template>
 <style lang="scss">
 .counter {
+  background-color: #f2f2f2;
   .banner {
-display: flex;
+    display: flex;
 
     .left {
       position: relative;
@@ -72,6 +71,6 @@ display: flex;
         background-color: pink;
       }
     }
-}
+  }
 }
 </style>

-<template>
-    <div class="about">
-      我是新建课程页面
-    </div>
-  </template>
-  
-  <style>
-  
-  </style>
\ No newline at end of file