作者 姚富强

合并分支 'dev' 到 'master'

Dev



查看合并请求 !7
<script setup>
import { ref } from 'vue';
const active = ref(0);
import { ref } from 'vue'
const active = ref(0)
</script>
<template>
<div class="right">
<div class="biti">
账号管理
</div>
<div class="container">
<van-tabs v-model:active="active">
<van-tab title="基本信息" class="box">基本信息</van-tab>
<van-tab title="我的头像" class="box">我的头像</van-tab>
<van-tab title="密码管理" class="box">密码管理</van-tab>
</van-tabs>
</div>
<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="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: 100%;
width: 100%;
margin-top: 50px;
.biti{
.right {
background-color: #e5e5e5;
height: 535px;
width: 100%;
margin-top: 40px;
.biti {
font-weight: 800;
font-size: 30px;
margin:30px 0px 20px 40px;
margin: 30px 0px 20px 40px;
}
.container{
.container {
display: flex;
flex-direction: row;
margin: 40px;
width: 50%;
.box{
// 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;
.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{
.van-tab {
background-color: #e5e5e5;
}
.van-tabs__wrap {
width: 60%;
}
}
.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>
\ No newline at end of file
}
</style>
... ...
<script setup>
import { ref } from 'vue';
import Head from '@/components/head.vue';
const list = ref(["任务", "章节", "讨论", "作业", "考试", "出勤", "记分册", "作业成绩", "知识点"])
const activeNames = ref(['1']);
import { ref } from 'vue'
import Head from '@/components/head.vue'
const list = ref(['任务', '章节', '讨论', '作业', '考试', '出勤', '记分册', '作业成绩', '知识点'])
const activeNames = ref(['1'])
</script>
<template>
<div class="counter">
<Head></Head>
<div class="box">
<div class="left">
<div class="top">
<img src="@/static/kecheng.png" alt="">
<img src="@/static/kecheng.png" alt="" />
XXXXXXXXX
</div>
<div class="bottom">
... ... @@ -23,7 +22,7 @@ const activeNames = ref(['1']);
<div class="box3">进行中</div>
<div class="box4">已结束</div>
<div class="box5">
<div class="end" v-for="item in 8">
<div class="end" v-for="item in 8" :key="item">
<div class="notice">通知</div>
<div>签到</div>
</div>
... ... @@ -130,9 +129,9 @@ const activeNames = ref(['1']);
border-radius: 8px;
}
}
}
}
}
}
</style>
\ No newline at end of file
</style>
... ...
... ... @@ -2,6 +2,9 @@
import Head from '@/components/head.vue'
import {ref} from"vue"
const list = ref(["首页","课程","笔记","消息","云盘","通讯录","账号管理","班级管理"])
const navigator = () => {
}
</script>
<template>
... ... @@ -16,7 +19,7 @@ const list = ref(["首页","课程","笔记","消息","云盘","通讯录","账
</div>
<div class="name">XXX</div>
<div class="cont">
<div class="li" v-for="item in list" :key="item">{{ item }}</div>
<div class="li" v-for="item in list" :key="item" @click="navigator">{{ item }}</div>
</div>
<div class="one"></div>
</div>
... ...
... ... @@ -9,15 +9,15 @@ const onSubmit = (values) => {
</script>
<template>
<div class="counter">
<div style="height: 7%"></div>
<div style="height: 6%"></div>
<div class="ban">
<div class="left1">
<h2>用户登录</h2>
<div class="login">
<van-form @submit="onSubmit">
<van-cell-group inset>
<van-field v-model="username" name="用户名" label="用户名" placeholder="用户名"
:rules="[{ required: true, message: '请填写用户名' }]" />
<van-field v-model="username" name="教工号/学号" label="教工号/学号" placeholder="教工号/学号"
:rules="[{ required: true, message: '请填写教工号/学号' }]" />
<van-field v-model="password" type="password" name="密码" label="密码" placeholder="密码"
:rules="[{ required: true, message: '请填写密码' }]" />
</van-cell-group>
... ... @@ -27,8 +27,8 @@ const onSubmit = (values) => {
</van-form>
</div>
<div class="msg">
<div class="left">新用户注册</div>
<div class="right">其他方式登录 ></div>
<div class="left">手机验证码登录</div>
<div class="right">忘记密码</div>
</div>
<!-- <div class="bit">其他方式登录 ></div> -->
<div class="footer">
... ... @@ -38,7 +38,7 @@ const onSubmit = (values) => {
<div class="right1">
<div class="waiter">客服</div>
<img src="@/static/erweima.png" alt="">
<div class="bit2">使用学习通APP扫码登录</div>
<div class="bit2">使用小程序扫码登录</div>
</div>
</div>
</div>
... ... @@ -54,7 +54,7 @@ const onSubmit = (values) => {
}
.ban {
position: relative;
margin: 7% auto;
margin: 6% auto;
width: 800px;
height: 500px;
background-color: #fff;
... ... @@ -81,32 +81,18 @@ const onSubmit = (values) => {
.msg {
padding-left: 45px;
display: flex;
width: 65%;
width: 58%;
justify-content: space-between;
align-items: center;
.left {
color: #7888ff;
}
color: #7888ff;
.right {
color: darkgray;
position: absolute;
left: 210px;
}
}
// .bit{
// color: darkgray;
// text-align: center;
// position: absolute;
// bottom: 100px;
// left:20% ;
// font-size: 12px;
// }
.footer {
position: absolute;
bottom: 50px;
left: 10%;
bottom: 40px;
left: 7%;
text-align: center;
font-size: 12px;
... ... @@ -138,7 +124,7 @@ const onSubmit = (values) => {
position: absolute;
bottom: 100px;
left:70% ;
font-size: 12px;
font-size: 16px;
}
}
}
... ...