姚富强 / ProfessionalCourseManagementSystem · 提交

转到一个项目

作者 姚富强
提交 b686909e73a3888cd3c53fe02f2c45c484d48f29 1 个父辈 59c56455

总结

内嵌 并排对比
正在显示 6 个修改的文件 包含 233 行增加 和 114 行删除
:root {
width: 100%;
height: 100vh;
--bg-color: #f2f2f2; //默认背景颜色
background-color: #f2f2f2; //默认背景颜色
height: 100vh; /* 高度为视口高度 */
width: 100vw; /* 宽度为视口宽度 */
position: fixed; /* 固定位置 */
top: 0; /* 顶部对齐 */
left: 0; /* 左侧对齐 */
z-index: -1; /* 置于其他元素下方 */
}
... ...
... ... @@ -24,16 +24,28 @@ const activeNames = ref(['1'])
<van-collapse-item title="进行中" name="1">
<div class="box5">
<div class="end" v-for="item in 8" :key="item">
<div class="notice">通知</div>
<div class="let">
<div class="notice">通知</div>
<div>签到</div>
</div>
<div class="rit">
结束时间：2024-1-20 16：22
</div>
</div>
</div>
</van-collapse-item>
<van-collapse-item title="已结束" name="2">
<div class="box5">
<div class="end" v-for="item in 8" :key="item">
<div class="notice">通知</div>
<div class="let">
<div class="notices">通知</div>
<div>签到</div>
</div>
<div class="rit">
结束时间：2024-1-20 16：22
</div>
</div>
</div>
</van-collapse-item>
... ... @@ -54,14 +66,18 @@ const activeNames = ref(['1'])
<style lang="scss" scoped>
.counter {
background-color: #e5e5e5;
width: 100%;
height: 100%;
.box {
width: 100%;
height: 613px;
margin-top: 20px;
display: flex;
.left {
margin-left: 30px;
width: 20%;
height: 100%;
.top {
display: flex;
... ... @@ -98,8 +114,9 @@ const activeNames = ref(['1'])
.right {
width: 70%;
height: 86%;
background-color: #f2f2f2;
overflow: hidden;
.two {
padding-left: 20px;
font-weight: 700;
... ... @@ -124,21 +141,20 @@ const activeNames = ref(['1'])
}
.box5 {
height: 300px;
height: 355px;
overflow-y: scroll;
.end {
background-color: #ffffff;
display: flex;
justify-content: space-between;
padding-left: 20px;
height: 60px;
line-height: 60px;
border-bottom: #dadada 1px solid;
.notice {
/* padding-right: 20px;
align-items: center;
justify-items: center; */
.let {
display: flex;
.notice {
margin: 10px;
color: white;
background-color: #169bd5;
... ... @@ -149,6 +165,23 @@ const activeNames = ref(['1'])
font-size: 14px;
border-radius: 8px;
}
.notices {
margin: 10px;
color: white;
background-color: #c4c9cc;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
font-size: 14px;
border-radius: 8px;
}
}
.rit {
padding-right: 35px;
}
}
}
}
... ...
... ... @@ -50,7 +50,7 @@ const text = ref('发送验证码')
.code {
margin-top: 60px;
.van-cell {
margin-bottom: 20px;
margin-bottom: 40px;
border: 1px solid #cacaca;
border-radius: 18px;
}
... ...
<script setup>
import Head from '@/components/head.vue'
import { ref } from 'vue'
import router from '@/router/index';
import router from '@/router/index'
const list = ref([
{ path: '/home', name: '首页' },
{ path: '/', name: '课程' },
{ path: '/note', name: '笔记' },
{ path: '/news', name: '消息' },
{ path: '/disk', name: '云盘' },
{ path: '/address', name: '通讯录' },
{ path: '/account', name: '账号管理' },
{ path: '/manage', name: '班级管理' }
{ id: 1, path: '/home', name: '首页' },
{ id: 2, path: '/', name: '课程' },
{ id: 3, path: '/note', name: '笔记' },
{ id: 4, path: '/news', name: '消息' },
{ id: 5, path: '/disk', name: '云盘' },
{ id: 6, path: '/address', name: '通讯录' },
{ id: 7, path: '/account', name: '账号管理' },
{ id: 8, path: '/manage', name: '班级管理' }
])
const navigator = (path) => {
console.log(path);
const activeIndex = ref(1)
const navigator = (path, id) => {
router.push(path)
console.log(id)
activeIndex.value = id
}
</script>
... ... @@ -31,7 +32,14 @@ const navigator = (path) => {
</div>
<div class="name">XXX</div>
<div class="cont">
<div class="li" v-for="item in list" :key="item" @click="navigator(item.path)">{{ item.name }}</div>
<div
v-for="(item, index) in list"
:key="item"
@click="navigator(item.path, index)"
:class="{ 'active': activeIndex === index, 'li': true }"
>
{{ item.name }}
</div>
</div>
<div class="one"></div>
</div>
... ... @@ -45,7 +53,9 @@ const navigator = (path) => {
</template>
<style lang="scss" scoped>
.counter {
background-color: #f2f2f2;
width: 100%;
height: 100%;
.banner {
display: flex;
... ... @@ -80,9 +90,6 @@ const navigator = (path) => {
padding-left: 30px;
box-sizing: border-box;
}
.li:hover {
background-color: #4d5cb6;
}
.active {
background-color: #4d5cb6;
}
... ...
... ... @@ -47,8 +47,7 @@ const onSubmit = (values) => {
<style lang="scss" scoped>
.counter {
width: 100%;
height: 100vh;
background-color: #f2f2f2;
height: 100%;
.left1{
width: 60%;
}
... ...
<script setup>
import router from '@/router/index'
import { ref } from 'vue'
const classList = ref([
{ url: '@/static/set.png', name: '形式与政策' },
... ... @@ -12,113 +13,187 @@ const classList = ref([
])
const showCenter = ref(false)
const value = ref('')
const text = ref('发送验证码')
const showPopup = () => {
console.log(111)
showCenter.value = true
}
// 跳转课程详情
const dbClick = () => {
router.push('/detail')
}
</script>
<template>
<div class="counter">
<div class="box">
<div class="hed">
<div class="leftt">我的课程</div>
<div class="rightt">
<div class="noe">
<div class="pic"><img src="@/static/set.png" alt="" />设置</div>
</div>
<div class="noe">
<div class="pic"><img src="@/static/ewm.png" alt="" />二维码</div>
</div>
<div class="noe">
<div class="pic"><img src="@/static/fx.png" alt="" />转发</div>
<div class="leftt">我的课程</div>
<div class="rightt">
<div class="noe">
<div class="pic"><img src="@/static/set.png" alt="" />设置</div>
</div>
<div class="noe">
<div class="pic"><img src="@/static/ewm.png" alt="" />二维码</div>
</div>
<div class="noe">
<div class="pic"><img src="@/static/fx.png" alt="" />转发</div>
</div>
</div>
</div>
</div>
<div class="bod">
<div class="n" @click="showPopup">+新建课程</div>
<div class="n">新建文件夹</div>
</div>
<div class="ban">
<div class="item" v-for="item in classList" :key="item">
<div class="class">
<img src="@/static/class.jpg" alt="" />
</div>
<div class="title">{{ item.name }}</div>
<div class="bod">
<div class="n" @click="showPopup">+新建课程</div>
<div class="n">新建文件夹</div>
</div>
</div>
<!-- 新建课程 -->
<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: '100px auto', width: '1000px', height: '600px' }">
<div class="box">
<div class="title">新建课程</div>
<div class="fenge"></div>
<div class="h">
<div>课程名称</div>
<input type="text">
</div>
<div class="h">
<div>课程教师</div>
<input type="text">
</div>
<div class="h">
<div class="w">所属单位</div>
<select>
<option value="1">计算机与软件技术系</option>
<option value="2">机电技术系</option>
<option value="3">经济与管理系</option>
<option value="4">数字艺术系</option>
</select>
<div class="q">选择学期</div>
<select>
<option value="1">2023-2024（1）</option>
<option value="2">2023-2024（2）</option>
<option value="3">2024-2025（1）</option>
<option value="4">2024-2025（2）</option>
</select>
</div>
<div class="h">
<div class="w">课程类型</div>
<select>
<option value="1">考试课</option>
<option value="2">考查课</option>
</select>
</div>
<div class="h">
<div>课程封面</div>
<div class="pic">
<img src="@/static/class.jpg" alt="">
<div class="ban">
<div class="item" v-for="item in classList" :key="item" @click="dbClick">
<div class="class">
<img src="@/static/class.jpg" alt="" />
</div>
<div class="title">{{ item.name }}</div>
</div>
</div>
<!-- 底部按钮 -->
<div class="e">
<button type="button" class="bt1">取消</button>
<button type="button" class="bt2">完成</button>
</div>
</van-popup>
</div>
<!-- 新建课程 -->
<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: '100px auto', width: '1000px', height: '600px' }"
>
<div class="box">
<div class="titlel">新建课程</div>
<div class="h">
<div>课程名称</div>
<input type="text" />
</div>
<div class="h">
<div>课程教师</div>
<input type="text" />
</div>
<div class="h">
<div class="w">所属单位</div>
<select>
<option value="1">计算机与软件技术系</option>
<option value="2">机电技术系</option>
<option value="3">经济与管理系</option>
<option value="4">数字艺术系</option>
</select>
<div class="q">选择学期</div>
<select>
<option value="1">2023-2024（1）</option>
<option value="2">2023-2024（2）</option>
<option value="3">2024-2025（1）</option>
<option value="4">2024-2025（2）</option>
</select>
</div>
<div class="h">
<div class="w">课程类型</div>
<select>
<option value="1">考试课</option>
<option value="2">考查课</option>
</select>
</div>
<div class="detail">
<div>课程封面</div>
<div class="pic">
<img src="@/static/class.jpg" alt="" />
</div>
</div>
<!-- 底部按钮 -->
<div class="dom">
<van-button plain color="#6170c3" round >取消</van-button>
<van-button color="#6170c3" round >完成</van-button>
</div>
</div>
</van-popup>
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
.counter {
width: 100%;
background-color: #f2f2f2;
height: 100%;
.box {
button,
select {
text-transform: none;
width: 150px;
}
.e {
display: flex;
margin-left: 400px;
.bt2 {
margin-left: 60px;
color: #6170c3;
}
.bt1 {
margin-left: 400px;
color: white;
}
}
.q {
margin-left: 50px;
margin-right: 40px;
}
.w {
margin-right: 40px;
}
.h {
margin-top: 20px;
padding-left: 40px;
display: flex;
height: 30px;
line-height: 30px;
}
.detail {
margin-top: 20px;
padding-left: 40px;
.pic {
height: 120px;
width: 200px;
margin: 20px 0 0 70px;
}
img {
height: 100%;
width: 100%;
}
}
.dom {
margin-right: 70px;
float: right;
width: 40%;
display: flex;
justify-content: space-around;
}
input {
margin-left: 40px;
height: 30px;
width: 600px;
}
.titlel {
font-weight: 800;
padding: 50px 0 10px 50px;
font-size: 18px;
border-bottom: 2px solid #f2f2f2;
}
.fenge {
margin-top: 5px;
border: #cdcccc 1px solid;
}
}
.ban {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
margin-top: 20px;
width: 95%;
width: 90%;
.item {
margin: 30px 0;
}
... ...