姚富强 / ProfessionalCourseManagementSystem · 提交

转到一个项目

作者 姚富强
提交 865ea26df4bade1e93ab02a62f6e8defb7bd1214 2 个父辈 96258342 b686909e

合并分支 'ddd' 到 'master' 

总结



查看合并请求 !18
内嵌 并排对比
正在显示 6 个修改的文件 包含 233 行增加 和 114 行删除
1 :root { 1 :root {
2 - width: 100%;  
3 - height: 100vh;  
4 - --bg-color: #f2f2f2; //默认背景颜色 2 + background-color: #f2f2f2; //默认背景颜色
  3 + height: 100vh; /* 高度为视口高度 */
  4 + width: 100vw; /* 宽度为视口宽度 */
  5 + position: fixed; /* 固定位置 */
  6 + top: 0; /* 顶部对齐 */
  7 + left: 0; /* 左侧对齐 */
  8 + z-index: -1; /* 置于其他元素下方 */
  9 +
5 } 10 }
@@ -24,16 +24,28 @@ const activeNames = ref(['1']) @@ -24,16 +24,28 @@ const activeNames = ref(['1'])
24 <van-collapse-item title="进行中" name="1"> 24 <van-collapse-item title="进行中" name="1">
25 <div class="box5"> 25 <div class="box5">
26 <div class="end" v-for="item in 8" :key="item"> 26 <div class="end" v-for="item in 8" :key="item">
27 - <div class="notice">通知</div> 27 + <div class="let">
  28 + <div class="notice">通知</div>
28 <div>签到</div> 29 <div>签到</div>
  30 + </div>
  31 + <div class="rit">
  32 + 结束时间：2024-1-20 16：22
  33 + </div>
  34 +
29 </div> 35 </div>
30 </div> 36 </div>
31 </van-collapse-item> 37 </van-collapse-item>
32 <van-collapse-item title="已结束" name="2"> 38 <van-collapse-item title="已结束" name="2">
33 <div class="box5"> 39 <div class="box5">
34 <div class="end" v-for="item in 8" :key="item"> 40 <div class="end" v-for="item in 8" :key="item">
35 - <div class="notice">通知</div> 41 + <div class="let">
  42 + <div class="notices">通知</div>
36 <div>签到</div> 43 <div>签到</div>
  44 + </div>
  45 + <div class="rit">
  46 + 结束时间：2024-1-20 16：22
  47 + </div>
  48 +
37 </div> 49 </div>
38 </div> 50 </div>
39 </van-collapse-item> 51 </van-collapse-item>
@@ -54,14 +66,18 @@ const activeNames = ref(['1']) @@ -54,14 +66,18 @@ const activeNames = ref(['1'])
54 66
55 <style lang="scss" scoped> 67 <style lang="scss" scoped>
56 .counter { 68 .counter {
57 - background-color: #e5e5e5; 69 + width: 100%;
  70 + height: 100%;
58 .box { 71 .box {
  72 + width: 100%;
  73 + height: 613px;
59 margin-top: 20px; 74 margin-top: 20px;
60 display: flex; 75 display: flex;
61 76
62 .left { 77 .left {
63 margin-left: 30px; 78 margin-left: 30px;
64 width: 20%; 79 width: 20%;
  80 + height: 100%;
65 81
66 .top { 82 .top {
67 display: flex; 83 display: flex;
@@ -98,8 +114,9 @@ const activeNames = ref(['1']) @@ -98,8 +114,9 @@ const activeNames = ref(['1'])
98 114
99 .right { 115 .right {
100 width: 70%; 116 width: 70%;
  117 + height: 86%;
101 background-color: #f2f2f2; 118 background-color: #f2f2f2;
102 - 119 + overflow: hidden;
103 .two { 120 .two {
104 padding-left: 20px; 121 padding-left: 20px;
105 font-weight: 700; 122 font-weight: 700;
@@ -124,21 +141,20 @@ const activeNames = ref(['1']) @@ -124,21 +141,20 @@ const activeNames = ref(['1'])
124 } 141 }
125 142
126 .box5 { 143 .box5 {
127 - height: 300px; 144 + height: 355px;
128 overflow-y: scroll; 145 overflow-y: scroll;
129 146
130 .end { 147 .end {
131 background-color: #ffffff; 148 background-color: #ffffff;
132 display: flex; 149 display: flex;
  150 + justify-content: space-between;
133 padding-left: 20px; 151 padding-left: 20px;
134 height: 60px; 152 height: 60px;
135 line-height: 60px; 153 line-height: 60px;
136 border-bottom: #dadada 1px solid; 154 border-bottom: #dadada 1px solid;
137 -  
138 - .notice {  
139 - /* padding-right: 20px;  
140 - align-items: center;  
141 - justify-items: center; */ 155 + .let {
  156 + display: flex;
  157 + .notice {
142 margin: 10px; 158 margin: 10px;
143 color: white; 159 color: white;
144 background-color: #169bd5; 160 background-color: #169bd5;
@@ -149,6 +165,23 @@ const activeNames = ref(['1']) @@ -149,6 +165,23 @@ const activeNames = ref(['1'])
149 font-size: 14px; 165 font-size: 14px;
150 border-radius: 8px; 166 border-radius: 8px;
151 } 167 }
  168 + .notices {
  169 + margin: 10px;
  170 + color: white;
  171 + background-color: #c4c9cc;
  172 + width: 40px;
  173 + height: 40px;
  174 + line-height: 40px;
  175 + text-align: center;
  176 + font-size: 14px;
  177 + border-radius: 8px;
  178 + }
  179 + }
  180 + .rit {
  181 + padding-right: 35px;
  182 + }
  183 +
  184 +
152 } 185 }
153 } 186 }
154 } 187 }
@@ -50,7 +50,7 @@ const text = ref('发送验证码') @@ -50,7 +50,7 @@ const text = ref('发送验证码')
50 .code { 50 .code {
51 margin-top: 60px; 51 margin-top: 60px;
52 .van-cell { 52 .van-cell {
53 - margin-bottom: 20px; 53 + margin-bottom: 40px;
54 border: 1px solid #cacaca; 54 border: 1px solid #cacaca;
55 border-radius: 18px; 55 border-radius: 18px;
56 } 56 }
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' 3 import { ref } from 'vue'
4 -import router from '@/router/index'; 4 +import router from '@/router/index'
5 const list = ref([ 5 const list = ref([
6 - { path: '/home', name: '首页' },  
7 - { path: '/', name: '课程' },  
8 - { path: '/note', name: '笔记' },  
9 - { path: '/news', name: '消息' },  
10 - { path: '/disk', name: '云盘' },  
11 - { path: '/address', name: '通讯录' },  
12 - { path: '/account', name: '账号管理' },  
13 - { path: '/manage', name: '班级管理' } 6 + { id: 1, path: '/home', name: '首页' },
  7 + { id: 2, path: '/', name: '课程' },
  8 + { id: 3, path: '/note', name: '笔记' },
  9 + { id: 4, path: '/news', name: '消息' },
  10 + { id: 5, path: '/disk', name: '云盘' },
  11 + { id: 6, path: '/address', name: '通讯录' },
  12 + { id: 7, path: '/account', name: '账号管理' },
  13 + { id: 8, path: '/manage', name: '班级管理' }
14 ]) 14 ])
15 -const navigator = (path) => {  
16 - console.log(path); 15 +const activeIndex = ref(1)
  16 +const navigator = (path, id) => {
17 router.push(path) 17 router.push(path)
18 - 18 + console.log(id)
  19 + activeIndex.value = id
19 } 20 }
20 </script> 21 </script>
21 22
@@ -31,7 +32,14 @@ const navigator = (path) => { @@ -31,7 +32,14 @@ const navigator = (path) => {
31 </div> 32 </div>
32 <div class="name">XXX</div> 33 <div class="name">XXX</div>
33 <div class="cont"> 34 <div class="cont">
34 - <div class="li" v-for="item in list" :key="item" @click="navigator(item.path)">{{ item.name }}</div> 35 + <div
  36 + v-for="(item, index) in list"
  37 + :key="item"
  38 + @click="navigator(item.path, index)"
  39 + :class="{ 'active': activeIndex === index, 'li': true }"
  40 + >
  41 + {{ item.name }}
  42 + </div>
35 </div> 43 </div>
36 <div class="one"></div> 44 <div class="one"></div>
37 </div> 45 </div>
@@ -45,7 +53,9 @@ const navigator = (path) => { @@ -45,7 +53,9 @@ const navigator = (path) => {
45 </template> 53 </template>
46 <style lang="scss" scoped> 54 <style lang="scss" scoped>
47 .counter { 55 .counter {
48 - background-color: #f2f2f2; 56 + width: 100%;
  57 + height: 100%;
  58 +
49 .banner { 59 .banner {
50 display: flex; 60 display: flex;
51 61
@@ -80,9 +90,6 @@ const navigator = (path) => { @@ -80,9 +90,6 @@ const navigator = (path) => {
80 padding-left: 30px; 90 padding-left: 30px;
81 box-sizing: border-box; 91 box-sizing: border-box;
82 } 92 }
83 - .li:hover {  
84 - background-color: #4d5cb6;  
85 - }  
86 .active { 93 .active {
87 background-color: #4d5cb6; 94 background-color: #4d5cb6;
88 } 95 }
@@ -47,8 +47,7 @@ const onSubmit = (values) => { @@ -47,8 +47,7 @@ const onSubmit = (values) => {
47 <style lang="scss" scoped> 47 <style lang="scss" scoped>
48 .counter { 48 .counter {
49 width: 100%; 49 width: 100%;
50 - height: 100vh;  
51 - background-color: #f2f2f2; 50 + height: 100%;
52 .left1{ 51 .left1{
53 width: 60%; 52 width: 60%;
54 } 53 }
1 <script setup> 1 <script setup>
  2 +import router from '@/router/index'
2 import { ref } from 'vue' 3 import { ref } from 'vue'
3 const classList = ref([ 4 const classList = ref([
4 { url: '@/static/set.png', name: '形式与政策' }, 5 { url: '@/static/set.png', name: '形式与政策' },
@@ -12,113 +13,187 @@ const classList = ref([ @@ -12,113 +13,187 @@ const classList = ref([
12 ]) 13 ])
13 14
14 const showCenter = ref(false) 15 const showCenter = ref(false)
15 -const value = ref('')  
16 -const text = ref('发送验证码')  
17 const showPopup = () => { 16 const showPopup = () => {
18 - console.log(111)  
19 showCenter.value = true 17 showCenter.value = true
20 } 18 }
21 - 19 +// 跳转课程详情
  20 +const dbClick = () => {
  21 + router.push('/detail')
  22 +}
22 </script> 23 </script>
23 <template> 24 <template>
24 <div class="counter"> 25 <div class="counter">
25 <div class="box"> 26 <div class="box">
26 <div class="hed"> 27 <div class="hed">
27 - <div class="leftt">我的课程</div>  
28 - <div class="rightt">  
29 - <div class="noe">  
30 - <div class="pic"><img src="@/static/set.png" alt="" />设置</div>  
31 - </div>  
32 - <div class="noe">  
33 - <div class="pic"><img src="@/static/ewm.png" alt="" />二维码</div>  
34 - </div>  
35 - <div class="noe">  
36 - <div class="pic"><img src="@/static/fx.png" alt="" />转发</div> 28 + <div class="leftt">我的课程</div>
  29 + <div class="rightt">
  30 + <div class="noe">
  31 + <div class="pic"><img src="@/static/set.png" alt="" />设置</div>
  32 + </div>
  33 + <div class="noe">
  34 + <div class="pic"><img src="@/static/ewm.png" alt="" />二维码</div>
  35 + </div>
  36 + <div class="noe">
  37 + <div class="pic"><img src="@/static/fx.png" alt="" />转发</div>
  38 + </div>
37 </div> 39 </div>
38 </div> 40 </div>
39 - </div>  
40 - <div class="bod">  
41 - <div class="n" @click="showPopup">+新建课程</div>  
42 - <div class="n">新建文件夹</div>  
43 - </div>  
44 - <div class="ban">  
45 - <div class="item" v-for="item in classList" :key="item">  
46 - <div class="class">  
47 - <img src="@/static/class.jpg" alt="" />  
48 - </div>  
49 - <div class="title">{{ item.name }}</div> 41 + <div class="bod">
  42 + <div class="n" @click="showPopup">+新建课程</div>
  43 + <div class="n">新建文件夹</div>
50 </div> 44 </div>
51 - </div>  
52 - <!-- 新建课程 -->  
53 - <div class="popup">  
54 - <van-popup v-model:show="showCenter" @click-close-icon="showCenter" closeable="true" close-icon-position="top-left"  
55 - close-icon="arrow-left" round :style="{ padding: '100px auto', width: '1000px', height: '600px' }">  
56 -  
57 - <div class="box">  
58 - <div class="title">新建课程</div>  
59 - <div class="fenge"></div>  
60 - <div class="h">  
61 - <div>课程名称</div>  
62 - <input type="text">  
63 - </div>  
64 - <div class="h">  
65 - <div>课程教师</div>  
66 - <input type="text">  
67 - </div>  
68 - <div class="h">  
69 - <div class="w">所属单位</div>  
70 - <select>  
71 - <option value="1">计算机与软件技术系</option>  
72 - <option value="2">机电技术系</option>  
73 - <option value="3">经济与管理系</option>  
74 - <option value="4">数字艺术系</option>  
75 - </select>  
76 - <div class="q">选择学期</div>  
77 - <select>  
78 - <option value="1">2023-2024（1）</option>  
79 - <option value="2">2023-2024（2）</option>  
80 - <option value="3">2024-2025（1）</option>  
81 - <option value="4">2024-2025（2）</option>  
82 - </select>  
83 -  
84 - </div>  
85 - <div class="h">  
86 - <div class="w">课程类型</div>  
87 - <select>  
88 - <option value="1">考试课</option>  
89 - <option value="2">考查课</option>  
90 - </select>  
91 -  
92 - </div>  
93 - <div class="h">  
94 - <div>课程封面</div>  
95 - <div class="pic">  
96 - <img src="@/static/class.jpg" alt=""> 45 + <div class="ban">
  46 + <div class="item" v-for="item in classList" :key="item" @click="dbClick">
  47 + <div class="class">
  48 + <img src="@/static/class.jpg" alt="" />
97 </div> 49 </div>
  50 + <div class="title">{{ item.name }}</div>
98 </div> 51 </div>
99 - </div>  
100 - <!-- 底部按钮 -->  
101 - <div class="e">  
102 - <button type="button" class="bt1">取消</button>  
103 - <button type="button" class="bt2">完成</button>  
104 - </div>  
105 - </van-popup> 52 + </div>
  53 + <!-- 新建课程 -->
  54 + <div class="popup">
  55 + <van-popup
  56 + v-model:show="showCenter"
  57 + @click-close-icon="showCenter"
  58 + closeable="true"
  59 + close-icon-position="top-left"
  60 + close-icon="arrow-left"
  61 + round
  62 + :style="{ padding: '100px auto', width: '1000px', height: '600px' }"
  63 + >
  64 + <div class="box">
  65 + <div class="titlel">新建课程</div>
  66 + <div class="h">
  67 + <div>课程名称</div>
  68 + <input type="text" />
  69 + </div>
  70 + <div class="h">
  71 + <div>课程教师</div>
  72 + <input type="text" />
  73 + </div>
  74 + <div class="h">
  75 + <div class="w">所属单位</div>
  76 + <select>
  77 + <option value="1">计算机与软件技术系</option>
  78 + <option value="2">机电技术系</option>
  79 + <option value="3">经济与管理系</option>
  80 + <option value="4">数字艺术系</option>
  81 + </select>
  82 + <div class="q">选择学期</div>
  83 + <select>
  84 + <option value="1">2023-2024（1）</option>
  85 + <option value="2">2023-2024（2）</option>
  86 + <option value="3">2024-2025（1）</option>
  87 + <option value="4">2024-2025（2）</option>
  88 + </select>
  89 + </div>
  90 + <div class="h">
  91 + <div class="w">课程类型</div>
  92 + <select>
  93 + <option value="1">考试课</option>
  94 + <option value="2">考查课</option>
  95 + </select>
  96 + </div>
  97 + <div class="detail">
  98 + <div>课程封面</div>
  99 + <div class="pic">
  100 + <img src="@/static/class.jpg" alt="" />
  101 + </div>
  102 + </div>
  103 + <!-- 底部按钮 -->
  104 + <div class="dom">
  105 + <van-button plain color="#6170c3" round >取消</van-button>
  106 + <van-button color="#6170c3" round >完成</van-button>
  107 + </div>
  108 + </div>
  109 + </van-popup>
  110 + </div>
106 </div> 111 </div>
107 </div> 112 </div>
108 </template> 113 </template>
109 114
110 <style lang="scss" scoped> 115 <style lang="scss" scoped>
111 .counter { 116 .counter {
112 -  
113 width: 100%; 117 width: 100%;
114 - background-color: #f2f2f2; 118 + height: 100%;
  119 + .box {
  120 + button,
  121 + select {
  122 + text-transform: none;
  123 + width: 150px;
  124 + }
  125 + .e {
  126 + display: flex;
  127 + margin-left: 400px;
  128 + .bt2 {
  129 + margin-left: 60px;
  130 + color: #6170c3;
  131 + }
  132 + .bt1 {
  133 + margin-left: 400px;
  134 + color: white;
  135 + }
  136 + }
  137 + .q {
  138 + margin-left: 50px;
  139 + margin-right: 40px;
  140 + }
  141 + .w {
  142 + margin-right: 40px;
  143 + }
  144 + .h {
  145 + margin-top: 20px;
  146 + padding-left: 40px;
  147 + display: flex;
  148 + height: 30px;
  149 + line-height: 30px;
  150 + }
  151 + .detail {
  152 + margin-top: 20px;
  153 + padding-left: 40px;
  154 + .pic {
  155 + height: 120px;
  156 + width: 200px;
  157 + margin: 20px 0 0 70px;
  158 + }
  159 + img {
  160 + height: 100%;
  161 + width: 100%;
  162 + }
  163 + }
  164 + .dom {
  165 + margin-right: 70px;
  166 + float: right;
  167 + width: 40%;
  168 + display: flex;
  169 + justify-content: space-around;
  170 + }
  171 +
  172 + input {
  173 + margin-left: 40px;
  174 + height: 30px;
  175 + width: 600px;
  176 + }
  177 +
  178 + .titlel {
  179 + font-weight: 800;
  180 + padding: 50px 0 10px 50px;
  181 + font-size: 18px;
  182 + border-bottom: 2px solid #f2f2f2;
  183 + }
  184 +
  185 + .fenge {
  186 + margin-top: 5px;
  187 + border: #cdcccc 1px solid;
  188 + }
  189 + }
115 190
116 .ban { 191 .ban {
117 display: flex; 192 display: flex;
118 flex-wrap: wrap; 193 flex-wrap: wrap;
119 justify-content: space-around; 194 justify-content: space-around;
120 margin-top: 20px; 195 margin-top: 20px;
121 - width: 95%; 196 + width: 90%;
122 .item { 197 .item {
123 margin: 30px 0; 198 margin: 30px 0;
124 } 199 }