作者 XJF

缺按钮

... ... @@ -10,6 +10,15 @@ const classList = ref([
{ url: '@/static/class.jpg', name: '交互动效设置' },
{ url: '@/static/class.jpg', name: '融媒体制作与策划' }
])
const showCenter = ref(false)
const value = ref('')
const text = ref('发送验证码')
const showPopup = () => {
console.log(111)
showCenter.value = true
}
</script>
<template>
<div class="counter">
... ... @@ -28,7 +37,7 @@ const classList = ref([
</div>
</div>
<div class="bod">
<div class="n">+新建课程</div>
<div class="n" @click="showPopup">+新建课程</div>
<div class="n">新建文件夹</div>
</div>
<div class="ban">
... ... @@ -39,6 +48,61 @@ const classList = ref([
<div class="title">{{ item.name }}</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>
</div>
</div>
<!-- 底部按钮 -->
<div class="e">
<button type="button" class="bt1">取消</button>
<button type="button" class="bt2">完成</button>
</div>
</van-popup>
</div>
</div>
</template>
... ... @@ -46,6 +110,66 @@ const classList = ref([
.counter {
width: 100%;
background-color: #f2f2f2;
.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;
.pic{
margin-left: 40px;
}
img{
height: 120px;
width: 200px;
}
}
input {
margin-left: 40px;
height: 30px;
width: 600px;
}
.title {
font-weight: 800;
// text-align: center;
padding-left: 40px;
font-size: 30px;
margin-top: 60px;
}
.fenge {
margin-top: 5px;
border: #cdcccc 1px solid;
}
}
.ban {
display: flex;
... ... @@ -53,13 +177,16 @@ const classList = ref([
justify-content: space-around;
margin-top: 20px;
width: 95%;
.item {
margin: 40px;
}
.title {
text-align: center;
margin-top: 10px;
}
img {
height: 125px;
width: 100%;
... ...