曲靖

2023-01-31 16:34:09 +08:00
parent 3a56a8c6cc
commit a8d35407ae
10 changed files with 63 additions and 45 deletions
--- a/src/project/qujing/AppLegalLearning/components/GeneralLawExam.vue
+++ b/src/project/qujing/AppLegalLearning/components/GeneralLawExam.vue
@@ -0,0 +1,140 @@
+<template>
+  <div class="GeneralLawExam">
+    <div class="search_box">
+      <u-search placeholder="请输入需要搜索的考试" bg-color="#FFF" v-model="keyword" :show-action="false"></u-search>
+    </div>
+
+    <p class="all_test">全部考试</p>
+
+    <div class="card_list">
+      <div class="card">
+        <div class="card_top">
+          <div class="card_title">曲靖规则基本考试</div>
+          <div class="card_count">
+            共<span class="col_blue">10</span>题，预计<span class="col_blue">10</span>分钟
+          </div>
+          <div class="card_statistics">
+            <span>264</span>人通过/<span>283</span>人参与
+          </div>
+          <div class="result">
+            <img src="../img/success.png" alt="">
+          </div>
+          <div class="grade">98</div>
+        </div>
+        <div class="card_bottom col_blue" @click="toTest()">参加考试</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      keyword: '',
+      current: 1,
+    }
+  },
+  onLoad() {
+    
+  },
+  methods: {
+    getList() {
+      console.log('普法考试列表');
+    },
+    handleToTest() {
+      this.$emit('toTest')
+    }
+  },
+  onReachBottom() {
+    this.current++;
+    this.getList()
+  },
+}
+</script>
+
+<style lang="scss" socped>
+.GeneralLawExam {
+  .search_box {
+    margin: 24px 0;
+    padding: 0 32px;
+    box-sizing: border-box;
+  }
+  
+  .all_test {
+    font-size: 28px;
+    color: #333333;
+    font-weight: 600;
+    padding: 0 32px;
+    box-sizing: border-box;
+  }
+
+  .card_list {
+    padding: 8px 32px;
+    box-sizing: border-box;
+
+    .card {
+      margin-top: 24px;
+      .card_top,
+      .card_bottom {
+        padding: 24px;
+        box-sizing: border-box;
+        background: #FCFCFC;
+      }
+      
+      .card_top {
+        position: relative;
+        border-radius: 16px 16px 0 0;
+
+        .card_title {
+          font-weight: 500;
+          font-size: 36px;
+          color: #333333;
+          overflow: hidden; 
+          text-overflow:ellipsis;
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: 2;
+        }
+
+        .card_count,
+        .card_statistics {
+          font-weight: 400;
+          font-size: 26px;
+          color: #999999;
+          margin-top: 16px;
+        }
+
+        .result {
+          position: absolute;
+          right: 0;
+          top: 0;
+          img {
+            width: 200px;
+            height: 200px;
+          }
+        }
+
+        .grade {
+          position: absolute;
+          right: 75px;
+          top: 60px;
+          font-weight: 500;
+          font-size: 40px;
+          color: #0FC484;
+        }
+
+      }
+
+      .card_bottom {
+        border-top: 1px solid #EEEEEE;
+        border-radius: 0 0 16px 16px;
+        text-align: center; 
+      }
+      .col_blue {
+        color: #2D7DFF;
+      }
+    }
+  }
+}
+</style>