姚富强 / ProfessionalCourseManagementSystem · 提交

转到一个项目

作者 姚富强
提交 aad26b5d8bb0a2d6206931d791d32b015caa0314 1 个父辈 9513169c

baocun

内嵌 并排对比
正在显示 4 个修改的文件 包含 90 行增加 和 74 行删除
@@ -15,11 +15,6 @@ const router = createRouter({ @@ -15,11 +15,6 @@ const router = createRouter({
15 component: () => import('@/views/MyClass.vue') 15 component: () => import('@/views/MyClass.vue')
16 }, 16 },
17 { 17 {
18 - path: 'newclass',  
19 - name: 'newclass',  
20 - component: () => import('@/views/NewClass.vue')  
21 - },  
22 - {  
23 path: 'account', 18 path: 'account',
24 name: 'account', 19 name: 'account',
25 component: () => import('@/views/Account.vue') 20 component: () => import('@/views/Account.vue')
1 <script setup> 1 <script setup>
2 import { ref } from 'vue' 2 import { ref } from 'vue'
3 const active = ref(0) 3 const active = ref(0)
4 -const showCenter = ref(false); 4 +const showCenter = ref(false)
  5 +const value = ref('')
  6 +const text = ref('发送验证码')
5 const showPopup = () => { 7 const showPopup = () => {
6 console.log(111) 8 console.log(111)
7 - showCenter.value = true;  
8 -}; 9 + showCenter.value = true
  10 +}
9 </script> 11 </script>
10 <template> 12 <template>
11 <div class="right"> 13 <div class="right">
@@ -20,8 +22,8 @@ const showPopup = () => { @@ -20,8 +22,8 @@ const showPopup = () => {
20 <div class="lie"> 22 <div class="lie">
21 <div>性别</div> 23 <div>性别</div>
22 <div class="lin"> 24 <div class="lin">
23 - <input type="radio" name="value" value="男" checked="checked">男  
24 - <input type="radio" name="value" value="女">女 25 + <input type="radio" name="value" value="男" checked="checked" />男
  26 + <input type="radio" name="value" value="女" />女
25 </div> 27 </div>
26 </div> 28 </div>
27 <div class="lie"> 29 <div class="lie">
@@ -43,27 +45,51 @@ const showPopup = () => { @@ -43,27 +45,51 @@ const showPopup = () => {
43 <div class="list2">12320014</div> 45 <div class="list2">12320014</div>
44 </div> 46 </div>
45 <!-- 手机号登录 --> 47 <!-- 手机号登录 -->
46 - <div>  
47 - <van-popup v-model:show="showCenter" close-icon="close" round :style="{ padding: '64px' }">  
48 -  
49 -  
50 - </van-popup>> 48 + <div class="popup">
  49 + <van-popup
  50 + v-model:show="showCenter"
  51 + @click-close-icon="showCenter"
  52 + closeable="true"
  53 + close-icon-position="top-left"
  54 + close-icon="arrow-left"
  55 + round
  56 + :style="{ padding: '64px', width: '500px', height: '400px' }"
  57 + >
  58 + <div class="title">验证码登录</div>
  59 + <div class="code">
  60 + <van-cell-group inset>
  61 + <!-- 手机号 -->
  62 + <van-field v-model="value" placeholder="187159***14" />
  63 + <!-- 验证码 -->
  64 + <van-field
  65 + v-model="sms"
  66 + center
  67 + clearable
  68 + placeholder="验证码"
  69 + >
  70 + <template #button>
  71 + <van-button size="small" color="#6170c3" :text="text" round="true" @click="dbclick"></van-button>
  72 + </template>
  73 + </van-field>
  74 + <!-- 底部按钮 -->
  75 + <van-button size="large" color="#6170c3" round="true">确认修改</van-button>
  76 + </van-cell-group>
  77 + </div>
  78 + </van-popup>
51 </div> 79 </div>
52 </van-tab> 80 </van-tab>
53 <van-tab title="我的头像" class="box"> 81 <van-tab title="我的头像" class="box">
54 <div class="banner"> 82 <div class="banner">
55 <div class="zuo"> 83 <div class="zuo">
56 <div class="pic"> 84 <div class="pic">
57 - <img src="../static/touxiang.jpg" alt=""> 85 + <img src="../static/touxiang.jpg" alt="" />
58 </div> 86 </div>
59 <div class="button">保存头像</div> 87 <div class="button">保存头像</div>
60 </div> 88 </div>
61 <div class="you"> 89 <div class="you">
62 请选择大小小于2M的.jpg文件 90 请选择大小小于2M的.jpg文件
63 <div class="red">请上传本人照片!</div> 91 <div class="red">请上传本人照片!</div>
64 - <div class="button">  
65 - 上传头像  
66 - </div> 92 + <div class="button">上传头像</div>
67 </div> 93 </div>
68 </div> 94 </div>
69 </van-tab> 95 </van-tab>
@@ -75,9 +101,7 @@ const showPopup = () => { @@ -75,9 +101,7 @@ const showPopup = () => {
75 <div class="ban"> 101 <div class="ban">
76 <div class="old">新的密码：</div> 102 <div class="old">新的密码：</div>
77 <input type="password" @focus="onfocus" placeholder="请输入" /> 103 <input type="password" @focus="onfocus" placeholder="请输入" />
78 - <div class="toast">  
79 - *密码要求8-16位，至少包含数字，字母，字符两种元素！  
80 - </div> 104 + <div class="toast">*密码要求8-16位，至少包含数字，字母，字符两种元素！</div>
81 </div> 105 </div>
82 <div class="ban"> 106 <div class="ban">
83 <div class="old">确认新密码：</div> 107 <div class="old">确认新密码：</div>
@@ -117,6 +141,14 @@ const showPopup = () => { @@ -117,6 +141,14 @@ const showPopup = () => {
117 color: #bcbec8; 141 color: #bcbec8;
118 } 142 }
119 } 143 }
  144 + .code {
  145 + margin-top: 60px;
  146 + .van-cell{
  147 + margin-bottom: 20px;
  148 + border: 1px solid #cacaca;
  149 + border-radius: 18px;
  150 + }
  151 + }
120 152
121 .lie { 153 .lie {
122 display: flex; 154 display: flex;
@@ -181,7 +213,6 @@ const showPopup = () => { @@ -181,7 +213,6 @@ const showPopup = () => {
181 width: 100%; 213 width: 100%;
182 height: 100%; 214 height: 100%;
183 } 215 }
184 -  
185 } 216 }
186 217
187 .button { 218 .button {
@@ -240,7 +271,6 @@ const showPopup = () => { @@ -240,7 +271,6 @@ const showPopup = () => {
240 padding-bottom: 5px; 271 padding-bottom: 5px;
241 272
242 span { 273 span {
243 -  
244 img { 274 img {
245 width: 70px; 275 width: 70px;
246 height: 30px; 276 height: 30px;
@@ -273,4 +303,5 @@ const showPopup = () => { @@ -273,4 +303,5 @@ const showPopup = () => {
273 border-radius: 8px; 303 border-radius: 8px;
274 } 304 }
275 } 305 }
276 -}</style> 306 +}
  307 +</style>
1 <script setup> 1 <script setup>
2 import Head from '@/components/head.vue' 2 import Head from '@/components/head.vue'
3 -import {ref} from"vue"  
4 -const list = ref(["首页","课程","笔记","消息","云盘","通讯录","账号管理","班级管理"])  
5 -const navigator = () => {  
6 -  
7 -} 3 +import { ref } from 'vue'
  4 +const list = ref(['首页', '课程', '笔记', '消息', '云盘', '通讯录', '账号管理', '班级管理'])
  5 +const navigator = () => {}
8 </script> 6 </script>
9 7
10 <template> 8 <template>
@@ -33,45 +31,46 @@ const navigator = () => { @@ -33,45 +31,46 @@ const navigator = () => {
33 </template> 31 </template>
34 <style lang="scss"> 32 <style lang="scss">
35 .counter { 33 .counter {
  34 + background-color: #f2f2f2;
36 .banner { 35 .banner {
37 -display: flex;  
38 -  
39 - .left {  
40 - position: relative;  
41 - margin: 40px 40px 0;  
42 - width: 15%;  
43 - background-color: #6170c3;  
44 - color: #fff;  
45 - border-radius: 18px;  
46 - .pic {  
47 - margin: 0 auto;  
48 - padding-top: 50px;  
49 - width: 75px;  
50 - height: 75px;  
51 - img {  
52 - width: 100%;  
53 - height: 100%;  
54 - border-radius: 50%; 36 + display: flex;
  37 +
  38 + .left {
  39 + position: relative;
  40 + margin: 40px 40px 0;
  41 + width: 15%;
  42 + background-color: #6170c3;
  43 + color: #fff;
  44 + border-radius: 18px;
  45 + .pic {
  46 + margin: 0 auto;
  47 + padding-top: 50px;
  48 + width: 75px;
  49 + height: 75px;
  50 + img {
  51 + width: 100%;
  52 + height: 100%;
  53 + border-radius: 50%;
  54 + }
55 } 55 }
56 - }  
57 - .name {  
58 - margin-top: 10px;  
59 - text-align: center;  
60 - }  
61 - .cont {  
62 - margin-top: 20px;  
63 - .li {  
64 - line-height: 50px;  
65 - width: 100%;  
66 - height: 50px;  
67 - padding-left: 30px;  
68 - box-sizing: border-box; 56 + .name {
  57 + margin-top: 10px;
  58 + text-align: center;
  59 + }
  60 + .cont {
  61 + margin-top: 20px;
  62 + .li {
  63 + line-height: 50px;
  64 + width: 100%;
  65 + height: 50px;
  66 + padding-left: 30px;
  67 + box-sizing: border-box;
  68 + }
  69 + }
  70 + .one {
  71 + background-color: pink;
69 } 72 }
70 - }  
71 - .one {  
72 - background-color: pink;  
73 } 73 }
74 } 74 }
75 } 75 }
76 -}  
77 </style> 76 </style>
1 -<template>  
2 - <div class="about">  
3 - 我是新建课程页面  
4 - </div>  
5 - </template>  
6 -  
7 - <style>  
8 -  
9 - </style>