姚富强 / ProfessionalCourseManagementSystem · 提交

转到一个项目

作者 姚富强
提交 d60dcc83d442f377415a35777fb52d68e2c34fcf 2 个父辈 f8fbabb5 8637705b

合并分支 'dev' 到 'master' 

Dev



查看合并请求 !7
内嵌 并排对比
正在显示 6 个修改的文件 包含 179 行增加 和 67 行删除
1 <script setup> 1 <script setup>
2 -import { ref } from 'vue';  
3 - const active = ref(0); 2 +import { ref } from 'vue'
  3 +const active = ref(0)
  4 +
  5 +
4 </script> 6 </script>
5 <template> 7 <template>
6 - <div class="right">  
7 - <div class="biti">  
8 - 账号管理  
9 - </div>  
10 - <div class="container">  
11 - <van-tabs v-model:active="active">  
12 - <van-tab title="基本信息" class="box">基本信息</van-tab>  
13 - <van-tab title="我的头像" class="box">我的头像</van-tab>  
14 - <van-tab title="密码管理" class="box">密码管理</van-tab>  
15 -</van-tabs>  
16 -  
17 - </div> 8 + <div class="right">
  9 + <div class="biti">账号管理</div>
  10 + <div class="container">
  11 + <van-tabs v-model:active="active" line-width="0px">
  12 + <van-tab title="基本信息" class="box">基本信息</van-tab>
  13 + <van-tab title="我的头像" class="box">
  14 + <div class="banner">
  15 + <div class="zuo">
  16 + <div class="pic">
  17 + <img src="../static/touxiang.jpg" alt="">
  18 + </div>
  19 + <div class="button">保存头像</div>
  20 + </div>
  21 + <div class="you">
  22 + 请选择大小小于2M的.jpg文件
  23 + <div class="red">请上传本人照片!</div>
  24 + <div class="button">
  25 + 上传头像
  26 + </div>
  27 + </div>
  28 + </div>
  29 + </van-tab>
  30 + <van-tab title="密码管理" class="box">
  31 + <div class="ban">
  32 + <div class="old">旧密码：</div>
  33 + <input type="password" placeholder="请输入" />
  34 + </div>
  35 + <div class="ban">
  36 + <div class="old">新的密码：</div>
  37 + <input type="password" @focus="onfocus" placeholder="请输入" />
  38 + <div class="toast">
  39 + *密码要求8-16位，至少包含数字，字母，字符两种元素！
  40 + </div>
  41 + </div>
  42 + <div class="ban">
  43 + <div class="old">确认新密码：</div>
  44 + <input type="password" placeholder="请输入" />
  45 + </div>
  46 + <div class="ban">
  47 + <div class="old">
  48 + 验证码：<span><img src="@/static/code.png" alt="" /></span>
  49 + </div>
  50 + <input type="password" placeholder="请输入" />
  51 + </div>
  52 + <div class="btn" @click="onclick">保存</div>
  53 + </van-tab>
  54 + </van-tabs>
18 </div> 55 </div>
  56 + </div>
19 </template> 57 </template>
20 - 58 +
21 <style lang="scss"> 59 <style lang="scss">
22 - .right{  
23 - background-color: #e5e5e5;  
24 - height: 100%;  
25 - width: 100%;  
26 - margin-top: 50px;  
27 - .biti{ 60 +
  61 +.right {
  62 + background-color: #e5e5e5;
  63 + height: 535px;
  64 + width: 100%;
  65 + margin-top: 40px;
  66 + .biti {
28 font-weight: 800; 67 font-weight: 800;
29 font-size: 30px; 68 font-size: 30px;
30 - margin:30px 0px 20px 40px; 69 + margin: 30px 0px 20px 40px;
31 } 70 }
32 - .container{ 71 + .container {
33 display: flex; 72 display: flex;
34 flex-direction: row; 73 flex-direction: row;
35 margin: 40px; 74 margin: 40px;
36 - width: 50%;  
37 - .box{ 75 + // width: 100%;
  76 + .box {
38 width: 500px; 77 width: 500px;
  78 + .banner{
  79 + width: 640px;
  80 + display: flex;
  81 + justify-content: space-between;
  82 + .zuo {
  83 + .pic {
  84 + width: 300px;
  85 + height: 300px;
  86 + // background-color: pink;
  87 + img {
  88 + width: 100%;
  89 + height: 100%;
  90 + }
  91 +
  92 + }
  93 + .button {
  94 + margin-top: 30px;
  95 + padding: 3px 20px;
  96 + width: 70px;
  97 + height: 40px;
  98 + background-color: #fff;
  99 + text-align: center;
  100 + line-height: 40px;
  101 + border: 1px solid #5b5b5b;
  102 + border-radius: 8px;
  103 + }
  104 + }
  105 + .you {
  106 + padding: 10px;
  107 + width: 250px;
  108 + height: 120px;
  109 + background-color: #fffdea;
  110 + .red {
  111 + padding-top: 10px;
  112 + padding-right: 10px;
  113 + text-align: right;
  114 + color: #f00;
  115 + font-size: 14px;
  116 + }
  117 + .button {
  118 + margin-top: 30px;
  119 + padding: 3px 20px;
  120 + width: 50px;
  121 + height: 20px;
  122 + background-color: #fff;
  123 + text-align: center;
  124 + font-size: 10px;
  125 + line-height: 20px;
  126 + border: 1px solid #5b5b5b;
  127 + border-radius: 8px;
  128 + }
  129 + }
  130 + }
39 } 131 }
40 - .van-tab{ 132 + .van-tab {
41 background-color: #e5e5e5; 133 background-color: #e5e5e5;
42 } 134 }
43 - .van-tabs__wrap {  
44 - width: 60%;  
45 -}  
46 - }  
47 135
  136 + .ban {
  137 + margin-top: 15px;
  138 + width: 400px;
  139 + .old {
  140 + padding-bottom: 5px;
  141 + span{
  142 +
  143 + img{
  144 + width: 70px;
  145 + height: 30px;
  146 + }
  147 + }
  148 + }
  149 + .toast {
  150 + padding-top: 5px;
  151 + font-size: 12px;
  152 + color: rgb(255, 41, 41);
  153 + }
  154 + input{
  155 + width: 100%;
  156 + height: 30px;
  157 + border: none;
  158 + }
  159 + }
  160 + .btn {
  161 + margin-top: 35px;
  162 + padding: 3px 30px;
  163 + width: 50px;
  164 + height: 30px;
  165 + color: #fff;
  166 + text-align: center;
  167 + line-height: 30px;
  168 + background-color: #6170c3;
  169 + border-radius: 8px;
  170 + }
48 } 171 }
49 -</style>  
  172 +}
  173 +</style>
1 <script setup> 1 <script setup>
2 -import { ref } from 'vue';  
3 -import Head from '@/components/head.vue';  
4 -const list = ref(["任务", "章节", "讨论", "作业", "考试", "出勤", "记分册", "作业成绩", "知识点"])  
5 -const activeNames = ref(['1']); 2 +import { ref } from 'vue'
  3 +import Head from '@/components/head.vue'
  4 +const list = ref(['任务', '章节', '讨论', '作业', '考试', '出勤', '记分册', '作业成绩', '知识点'])
  5 +const activeNames = ref(['1'])
6 </script> 6 </script>
7 <template> 7 <template>
8 <div class="counter"> 8 <div class="counter">
9 -  
10 <Head></Head> 9 <Head></Head>
11 <div class="box"> 10 <div class="box">
12 <div class="left"> 11 <div class="left">
13 <div class="top"> 12 <div class="top">
14 - <img src="@/static/kecheng.png" alt=""> 13 + <img src="@/static/kecheng.png" alt="" />
15 XXXXXXXXX 14 XXXXXXXXX
16 </div> 15 </div>
17 <div class="bottom"> 16 <div class="bottom">
@@ -23,7 +22,7 @@ const activeNames = ref(['1']); @@ -23,7 +22,7 @@ const activeNames = ref(['1']);
23 <div class="box3">进行中</div> 22 <div class="box3">进行中</div>
24 <div class="box4">已结束</div> 23 <div class="box4">已结束</div>
25 <div class="box5"> 24 <div class="box5">
26 - <div class="end" v-for="item in 8"> 25 + <div class="end" v-for="item in 8" :key="item">
27 <div class="notice">通知</div> 26 <div class="notice">通知</div>
28 <div>签到</div> 27 <div>签到</div>
29 </div> 28 </div>
@@ -130,9 +129,9 @@ const activeNames = ref(['1']); @@ -130,9 +129,9 @@ const activeNames = ref(['1']);
130 border-radius: 8px; 129 border-radius: 8px;
131 } 130 }
132 } 131 }
  132 +
133 } 133 }
134 -  
135 } 134 }
136 } 135 }
137 } 136 }
138 -</style>  
  137 +</style>
@@ -2,6 +2,9 @@ @@ -2,6 +2,9 @@
2 import Head from '@/components/head.vue' 2 import Head from '@/components/head.vue'
3 import {ref} from"vue" 3 import {ref} from"vue"
4 const list = ref(["首页","课程","笔记","消息","云盘","通讯录","账号管理","班级管理"]) 4 const list = ref(["首页","课程","笔记","消息","云盘","通讯录","账号管理","班级管理"])
  5 +const navigator = () => {
  6 +
  7 +}
5 </script> 8 </script>
6 9
7 <template> 10 <template>
@@ -16,7 +19,7 @@ const list = ref(["首页","课程","笔记","消息","云盘","通讯录","账 @@ -16,7 +19,7 @@ const list = ref(["首页","课程","笔记","消息","云盘","通讯录","账
16 </div> 19 </div>
17 <div class="name">XXX</div> 20 <div class="name">XXX</div>
18 <div class="cont"> 21 <div class="cont">
19 - <div class="li" v-for="item in list" :key="item">{{ item }}</div> 22 + <div class="li" v-for="item in list" :key="item" @click="navigator">{{ item }}</div>
20 </div> 23 </div>
21 <div class="one"></div> 24 <div class="one"></div>
22 </div> 25 </div>
@@ -9,15 +9,15 @@ const onSubmit = (values) => { @@ -9,15 +9,15 @@ const onSubmit = (values) => {
9 </script> 9 </script>
10 <template> 10 <template>
11 <div class="counter"> 11 <div class="counter">
12 - <div style="height: 7%"></div> 12 + <div style="height: 6%"></div>
13 <div class="ban"> 13 <div class="ban">
14 <div class="left1"> 14 <div class="left1">
15 <h2>用户登录</h2> 15 <h2>用户登录</h2>
16 <div class="login"> 16 <div class="login">
17 <van-form @submit="onSubmit"> 17 <van-form @submit="onSubmit">
18 <van-cell-group inset> 18 <van-cell-group inset>
19 - <van-field v-model="username" name="用户名" label="用户名" placeholder="用户名"  
20 - :rules="[{ required: true, message: '请填写用户名' }]" /> 19 + <van-field v-model="username" name="教工号/学号" label="教工号/学号" placeholder="教工号/学号"
  20 + :rules="[{ required: true, message: '请填写教工号/学号' }]" />
21 <van-field v-model="password" type="password" name="密码" label="密码" placeholder="密码" 21 <van-field v-model="password" type="password" name="密码" label="密码" placeholder="密码"
22 :rules="[{ required: true, message: '请填写密码' }]" /> 22 :rules="[{ required: true, message: '请填写密码' }]" />
23 </van-cell-group> 23 </van-cell-group>
@@ -27,8 +27,8 @@ const onSubmit = (values) => { @@ -27,8 +27,8 @@ const onSubmit = (values) => {
27 </van-form> 27 </van-form>
28 </div> 28 </div>
29 <div class="msg"> 29 <div class="msg">
30 - <div class="left">新用户注册</div>  
31 - <div class="right">其他方式登录 ></div> 30 + <div class="left">手机验证码登录</div>
  31 + <div class="right">忘记密码</div>
32 </div> 32 </div>
33 <!-- <div class="bit">其他方式登录 ></div> --> 33 <!-- <div class="bit">其他方式登录 ></div> -->
34 <div class="footer"> 34 <div class="footer">
@@ -38,7 +38,7 @@ const onSubmit = (values) => { @@ -38,7 +38,7 @@ const onSubmit = (values) => {
38 <div class="right1"> 38 <div class="right1">
39 <div class="waiter">客服</div> 39 <div class="waiter">客服</div>
40 <img src="@/static/erweima.png" alt=""> 40 <img src="@/static/erweima.png" alt="">
41 - <div class="bit2">使用学习通APP扫码登录</div> 41 + <div class="bit2">使用小程序扫码登录</div>
42 </div> 42 </div>
43 </div> 43 </div>
44 </div> 44 </div>
@@ -54,7 +54,7 @@ const onSubmit = (values) => { @@ -54,7 +54,7 @@ const onSubmit = (values) => {
54 } 54 }
55 .ban { 55 .ban {
56 position: relative; 56 position: relative;
57 - margin: 7% auto; 57 + margin: 6% auto;
58 width: 800px; 58 width: 800px;
59 height: 500px; 59 height: 500px;
60 background-color: #fff; 60 background-color: #fff;
@@ -81,32 +81,18 @@ const onSubmit = (values) => { @@ -81,32 +81,18 @@ const onSubmit = (values) => {
81 .msg { 81 .msg {
82 padding-left: 45px; 82 padding-left: 45px;
83 display: flex; 83 display: flex;
84 - width: 65%; 84 + width: 58%;
85 justify-content: space-between; 85 justify-content: space-between;
86 align-items: center; 86 align-items: center;
87 -  
88 - .left {  
89 - color: #7888ff;  
90 - }  
91 - 87 + color: #7888ff;
92 .right { 88 .right {
93 color: darkgray; 89 color: darkgray;
94 - position: absolute;  
95 - left: 210px;  
96 } 90 }
97 } 91 }
98 - // .bit{  
99 - // color: darkgray;  
100 - // text-align: center;  
101 - // position: absolute;  
102 - // bottom: 100px;  
103 - // left:20% ;  
104 - // font-size: 12px;  
105 - // }  
106 .footer { 92 .footer {
107 position: absolute; 93 position: absolute;
108 - bottom: 50px;  
109 - left: 10%; 94 + bottom: 40px;
  95 + left: 7%;
110 text-align: center; 96 text-align: center;
111 font-size: 12px; 97 font-size: 12px;
112 98
@@ -138,7 +124,7 @@ const onSubmit = (values) => { @@ -138,7 +124,7 @@ const onSubmit = (values) => {
138 position: absolute; 124 position: absolute;
139 bottom: 100px; 125 bottom: 100px;
140 left:70% ; 126 left:70% ;
141 - font-size: 12px; 127 + font-size: 16px;
142 } 128 }
143 } 129 }
144 } 130 }