缺按钮

@@ -10,6 +10,15 @@ const classList = ref([
   { url: '@/static/class.jpg', name: '交互动效设置' },
   { url: '@/static/class.jpg', name: '交互动效设置' },
   { 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>
 </script>
 <template>
 <template>
   <div class="counter">
   <div class="counter">
@@ -28,7 +37,7 @@ const classList = ref([
       </div>
       </div>
     </div>
     </div>
     <div class="bod">
     <div class="bod">
-      <div class="n">+新建课程</div>
+      <div class="n" @click="showPopup">+新建课程</div>
       <div class="n">新建文件夹</div>
       <div class="n">新建文件夹</div>
     </div>
     </div>
     <div class="ban">
     <div class="ban">
@@ -39,6 +48,61 @@ const classList = ref([
         <div class="title">{{ item.name }}</div>
         <div class="title">{{ item.name }}</div>
       </div>
       </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>
   </div>
 </template>
 </template>
 
 
@@ -46,6 +110,66 @@ const classList = ref([
 .counter {
 .counter {
   width: 100%;
   width: 100%;
   background-color: #f2f2f2;
   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 {
   .ban {
     display: flex;
     display: flex;
@@ -53,13 +177,16 @@ const classList = ref([
     justify-content: space-around;
     justify-content: space-around;
     margin-top: 20px;
     margin-top: 20px;
     width: 95%;
     width: 95%;
+
     .item {
     .item {
       margin: 40px;
       margin: 40px;
     }
     }
+
     .title {
     .title {
       text-align: center;
       text-align: center;
       margin-top: 10px;
       margin-top: 10px;
     }
     }
+
     img {
     img {
       height: 125px;
       height: 125px;
       width: 100%;
       width: 100%;