提交

src/pages/index.vue

@@ -32,6 +32,10 @@ let chooseCheck = $ref([]);
 let checked = $ref(false);
 let checkedIds = $ref([]);
 let noData = $ref(null);
+let limit = $ref(10);
+let total = $ref(0);
+let cur_page = $ref(1);
+let listData = $ref([]);
 function chooseAll() {
 
 }
@@ -96,19 +100,207 @@ function chooseAll() {
           </p>
         </div>
         <div class="w-150px text-left">考试计划名称</div>
-        <div class="w-200px">状态</div>
-        <div class="w-150px">考试形式</div>
-        <div class="w-150px">考试类型</div>
+        <div class="w-250px">状态</div>
+        <div class="w-130px">考试形式</div>
+        <div class="w-130px">考试类型</div>
         <div class="w-180px">考试时间</div>
-        <div>操作</div>
+        <div class="w-300px">操作</div>
       </div>
-      <div></div>
+      <div>
+        <div class="line">
+          <div class="up">
+            <div class="w-60px">
+              <p class="set-check single">
+                <input type="checkbox" id="1" :value="1" v-model="chooseCheck">
+                <label :for="1"></label>
+              </p>
+            </div>
+            <div class="w-150px text-left">考试计划名称</div>
+            <div class="w-250px">
+              <span class="inline-block align-middle">进行中</span>
+              <div class="inline-block align-middle ml-10px process-state">
+                <h3 class="state-line">
+                  <span style="width: 11%;"></span>
+                </h3>
+              </div>
+              <span class="ml-10px inline-block align-middle">11%</span>
+            </div>
+            <div class="w-130px text-left">线下考试</div>
+            <div class="w-130px text-left">联考</div>
+            <div class="w-180px text-left">2023.2.4~2023.2.17</div>
+            <div class="w-300px">
+              <button type="button" class="op-btn">编辑</button>
+              <button type="button" class="op-btn ml-10px">详情</button>
+              <div class="ml-10px relative op-btn cursor-pointer">
+                <span class="inline-block align-middle leading-28px">更多</span>
+                <div class="more-list">
+                  <ul>
+                    <li>阅卷任务</li>
+                    <li>扫描批阅进度</li>
+                    <li>考试分析</li>
+                    <li>删除</li>
+                  </ul>
+                </div>
+              </div>
+              <button type="button" class="ml-10px inline-block align-middle arrow-btn up"></button>
+            </div>
+          </div>
+          <div class="down pt-15px pl-35px">
+            <ul class="subject-list">
+              <li>
+                <div class="pt-10px">
+                  <div class="w-140px h-195px m-auto bg-red-500"></div>
+                  <div class="mt-5px">
+                    <div class="inline-block align-middle process-state">
+                      <h3 class="state-line">
+                        <span style="width: 11%;"></span>
+                      </h3>
+                    </div>
+                    <span class="ml-10px text-14px inline-block align-middle">11%</span>
+                  </div>
+                  <div class="mt-5px text-center">
+                    <button type="button" class="op-btn">查看</button>
+                  </div>
+                </div>
+              </li>
+              <li>
+                <div class="pt-10px">
+                  <div class="w-140px h-195px m-auto bg-red-500"></div>
+                  <div class="mt-5px">
+                    <div class="inline-block align-middle process-state">
+                      <h3 class="state-line">
+                        <span style="width: 11%;"></span>
+                      </h3>
+                    </div>
+                    <span class="ml-10px text-14px inline-block align-middle">11%</span>
+                  </div>
+                  <div class="mt-5px text-center">
+                    <button type="button" class="op-btn">查看</button>
+                  </div>
+                </div>
+              </li>
+              <li>
+                <div class="pt-10px">
+                  <div class="w-140px h-195px m-auto bg-red-500"></div>
+                  <div class="mt-5px">
+                    <div class="inline-block align-middle process-state">
+                      <h3 class="state-line">
+                        <span style="width: 11%;"></span>
+                      </h3>
+                    </div>
+                    <span class="ml-10px text-14px inline-block align-middle">11%</span>
+                  </div>
+                  <div class="mt-5px text-center">
+                    <button type="button" class="op-btn">查看</button>
+                  </div>
+                </div>
+              </li>
+              <li>
+                <div class="pt-10px">
+                  <div class="w-140px h-195px m-auto bg-red-500"></div>
+                  <div class="mt-5px">
+                    <div class="inline-block align-middle process-state">
+                      <h3 class="state-line">
+                        <span style="width: 11%;"></span>
+                      </h3>
+                    </div>
+                    <span class="ml-10px text-14px inline-block align-middle">11%</span>
+                  </div>
+                  <div class="mt-5px text-center">
+                    <button type="button" class="op-btn">查看</button>
+                  </div>
+                </div>
+              </li>
+              <li>
+                <div class="pt-10px">
+                  <div class="w-140px h-195px m-auto bg-red-500"></div>
+                  <div class="mt-5px">
+                    <div class="inline-block align-middle process-state">
+                      <h3 class="state-line">
+                        <span style="width: 11%;"></span>
+                      </h3>
+                    </div>
+                    <span class="ml-10px text-14px inline-block align-middle">11%</span>
+                  </div>
+                  <div class="mt-5px text-center">
+                    <button type="button" class="op-btn">查看</button>
+                  </div>
+                </div>
+              </li>
+              <li>
+                <div class="pt-10px">
+                  <div class="w-140px h-195px m-auto bg-red-500"></div>
+                  <div class="mt-5px">
+                    <div class="inline-block align-middle process-state">
+                      <h3 class="state-line">
+                        <span style="width: 11%;"></span>
+                      </h3>
+                    </div>
+                    <span class="ml-10px text-14px inline-block align-middle">11%</span>
+                  </div>
+                  <div class="mt-5px text-center">
+                    <button type="button" class="op-btn">查看</button>
+                  </div>
+                </div>
+              </li>
+            </ul>
+          </div>
+        </div>
+        <div class="line">
+          <div class="up">
+            <div class="w-60px">
+              <p class="set-check single">
+                <input type="checkbox" id="1" :value="1" v-model="chooseCheck">
+                <label :for="1"></label>
+              </p>
+            </div>
+            <div class="w-150px text-left">考试计划名称</div>
+            <div class="w-250px">
+              <span class="inline-block align-middle">进行中</span>
+              <div class="inline-block align-middle ml-10px process-state">
+                <h3 class="state-line">
+                  <span style="width: 11%;"></span>
+                </h3>
+              </div>
+              <span class="ml-10px inline-block align-middle">11%</span>
+            </div>
+            <div class="w-130px text-left">线下考试</div>
+            <div class="w-130px text-left">联考</div>
+            <div class="w-180px text-left">2023.2.4~2023.2.17</div>
+            <div class="w-300px">
+              <button type="button" class="op-btn">编辑</button>
+              <button type="button" class="op-btn ml-10px">详情</button>
+              <div class="ml-10px relative op-btn cursor-pointer">
+                <span class="inline-block align-middle leading-28px">更多</span>
+                <div class="more-list">
+                  <ul>
+                    <li>阅卷任务</li>
+                    <li>扫描批阅进度</li>
+                    <li>考试分析</li>
+                    <li>删除</li>
+                  </ul>
+                </div>
+              </div>
+              <button type="button" class="ml-10px inline-block align-middle arrow-btn down"></button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+    </div>
+    <div class="mt-20px page-new flex justify-end">
+      <el-pagination v-model:current-page="cur_page" v-model:page-size="limit" layout="prev, pager, next" :total="total" :background="true" @current-change="handleSelectionChange"></el-pagination>
     </div>
   </div>
 
 </template>
 <style lang="scss" scoped>
 $color: #003eee;
+.el-pagination.is-background .btn-next.is-active,
+.el-pagination.is-background .btn-prev.is-active,
+.el-pagination.is-background .el-pager li.is-active{
+  background-color: $color!important;
+}
 .add-btn {
   width: 129px;
   height: 36px;
@@ -143,17 +335,35 @@ $color: #003eee;
     line-height: 50px;
     color: #fff;
   }
-  .line{
-    
+
+  .line {
+    width: 100%;
+
+    &:nth-child(odd) {
+      >.up {
+        border-radius: 4px;
+        background: rgba(112, 175, 253, 0.1);
+      }
+    }
+
+    >.up {
+      display: flex;
+      align-items: center;
+      padding: 15px 0;
+      font-size: 15px;
+      color: #404040;
+    }
   }
 }
-.set-check{
+
+.set-check {
   position: relative;
   z-index: 40;
   width: 20px;
   height: 20px;
-  margin:15px auto 0;
-  label{
+  margin: 15px auto 0;
+
+  label {
     position: absolute;
     left: 0;
     width: 20px;
@@ -161,25 +371,30 @@ $color: #003eee;
     cursor: pointer;
     border-radius: 3px;
   }
-  input[type=checkbox]{
+
+  input[type=checkbox] {
     width: 20px;
     height: 20px;
     opacity: 0;
-    &:checked + label:after{
+
+    &:checked + label:after {
 
     }
   }
-  &.all{
-    label{
+
+  &.all {
+    label {
       border: 1px solid #fff;
     }
-    input[type=checkbox]{
-      &:checked + label{
+
+    input[type=checkbox] {
+      &:checked + label {
         border-color: #fff;
       }
-      &:checked + label:after{
+
+      &:checked + label:after {
         content: '';
-        width: 13px;
+        width: 14px;
         height: 8px;
         position: absolute;
         top: 3px;
@@ -195,22 +410,26 @@ $color: #003eee;
       }
     }
   }
-  &.single{
+
+  &.single {
     margin: 0 auto;
-    label{
+
+    label {
       border: 1px solid #aaa;
     }
-    input[type=checkbox]{
-      &:checked + label{
+
+    input[type=checkbox] {
+      &:checked + label {
         border-color: #003eee;
       }
-      &:checked + label:after{
+
+      &:checked + label:after {
         content: '';
-        width: 13px;
-        height: 6px;
+        width: 14px;
+        height: 8px;
         position: absolute;
         top: 3px;
-        left: 1px;
+        left: 2px;
         border: 2px solid #003eee;
         border-top: none;
         border-right: none;
@@ -222,4 +441,123 @@ $color: #003eee;
     }
   }
 }
+
+.process-state {
+  width: 140px;
+
+  .state-line {
+    width: 100%;
+    height: 5px;
+    background: #e2e2e2;
+    border-radius: 3px;
+
+    span {
+      display: block;
+      height: 5px;
+      background: #003eee;
+      border-radius: 3px;
+    }
+  }
+
+  .state-info {
+    position: absolute;
+    top: 8px;
+    left: 0;
+    width: 100%;
+    font-size: 13px;
+    color: #003eee;
+    text-align: center;
+  }
+}
+
+.op-btn {
+  display: inline-block;
+  vertical-align: middle;
+  padding: 0 15px;
+  height: 30px;
+  background: #fff;
+  border: 1px solid #003eee;
+  border-radius: 4px;
+  font-size: 14px;
+  color: #003eee;
+  text-align: center;
+
+  &:disabled {
+    background: #ccc;
+    border-color: #ccc;
+    color: #fff;
+    cursor: default;
+  }
+
+  .more-list {
+    display: none;
+    position: absolute;
+    left: 50%;
+    top: 30px;
+    margin-left: -50px;
+    z-index: 50;
+    width: 100px;
+    padding-top: 5px;
+
+    ul {
+      width: 100%;
+      background: #fff;
+      box-shadow: 0 0 5px rgba(0, 0, 0, .3);
+
+      li {
+        width: 100%;
+        height: 30px;
+        font-size: 14px;
+        color: #003eee;
+        text-align: center;
+        line-height: 30px;
+        cursor: pointer;
+
+        &.disabled {
+          background: #fff !important;
+          color: #ccc !important;
+          cursor: default !important;
+          pointer-events: none;
+        }
+
+        &:hover {
+          background: #F0F7FF;
+        }
+      }
+    }
+  }
+
+  &:hover {
+    .more-list {
+      display: block;
+    }
+  }
+}
+.arrow-btn{
+  width: 21px;
+  height: 13px;
+  &.up{
+    background: url("/images/arrow-up.png") center no-repeat;
+  }
+  &.down{
+    background: url("/images/arrow-down.png") center no-repeat;
+  }
+}
+.subject-list{
+  display: flex;
+  flex-wrap: wrap;
+  li{
+    width: 205px;
+    height: 280px;
+    margin: 0 27px 23px 0;
+    border: 2px solid $color;
+    border-radius: 10px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .subject-img{
+
+  }
+}
 </style>