姚富强 / ProfessionalCourseManagementSystem · 提交

转到一个项目

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

baocun

内嵌 并排对比
正在显示 4 个修改的文件 包含 90 行增加 和 74 行删除
... ... @@ -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,45 +31,46 @@ const navigator = () => {
</template>
<style lang="scss">
.counter {
background-color: #f2f2f2;
.banner {
display: flex;
.left {
position: relative;
margin: 40px 40px 0;
width: 15%;
background-color: #6170c3;
color: #fff;
border-radius: 18px;
.pic {
margin: 0 auto;
padding-top: 50px;
width: 75px;
height: 75px;
img {
width: 100%;
height: 100%;
border-radius: 50%;
display: flex;
.left {
position: relative;
margin: 40px 40px 0;
width: 15%;
background-color: #6170c3;
color: #fff;
border-radius: 18px;
.pic {
margin: 0 auto;
padding-top: 50px;
width: 75px;
height: 75px;
img {
width: 100%;
height: 100%;
border-radius: 50%;
}
}
}
.name {
margin-top: 10px;
text-align: center;
}
.cont {
margin-top: 20px;
.li {
line-height: 50px;
width: 100%;
height: 50px;
padding-left: 30px;
box-sizing: border-box;
.name {
margin-top: 10px;
text-align: center;
}
.cont {
margin-top: 20px;
.li {
line-height: 50px;
width: 100%;
height: 50px;
padding-left: 30px;
box-sizing: border-box;
}
}
.one {
background-color: pink;
}
}
.one {
background-color: pink;
}
}
}
}
</style>
... ...
<template>
<div class="about">
我是新建课程页面
</div>
</template>
<style>
</style>
\ No newline at end of file