法治学习

src/mods/conv/AppLegalLearning/AppLegalLearning.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="AppLegalLearning">
+    <div class="tabs_box">
+      <u-tabs :list="tabs" font-size="32" bg-color="#f3f5f7" inactive-color="#999999"
+     :active-item-style="{color: '#222222'}" :is-scroll="true" :current="currIndex" @change="(i) => (currIndex = i)"> </u-tabs>
+    </div>
+    <AppOnlineClass ref="OnlineClass" v-show="currIndex == 0"></AppOnlineClass>
+    <AppGeneralLawExam ref="GeneralLawExam" v-show="currIndex == 1"></AppGeneralLawExam>
+  </div>
+</template>
+
+<script>
+import AppOnlineClass from './components/AppOnlineClass.vue'
+import AppGeneralLawExam from './components/AppGeneralLawExam.vue'
+export default {
+  name: 'AppLegalLearning',
+  appName: '法治学习',
+  data() {
+    return {
+      currIndex: 1,
+      tabs: [
+        {
+          name: '在线课堂',
+        },
+        {
+          name: '普法考试',
+        }
+      ],
+    }
+  },
+  onShow() {
+  },
+  components: {
+    AppOnlineClass,
+    AppGeneralLawExam
+  },
+  watch: {
+    currIndex: {
+      handler(v) {
+        if(v == 0) {
+          this.$refs.OnlineClass.getList();
+        } else if(v == 1) {
+          this.$refs.GeneralLawExam.getList();
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" socped>
+.AppGeneralLawExam {
+  .tabs_box {
+    height: 100px;
+    line-height: 100px;
+  }
+}
+</style>

src/mods/conv/AppLegalLearning/components/AppGeneralLawExam.vue

@@ -0,0 +1,137 @@
+<template>
+  <div class="AppGeneralLawExam">
+    <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">参加考试</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      keyword: '',
+      current: 1,
+    }
+  },
+  onLoad() {
+    
+  },
+  methods: {
+    getList() {
+      console.log('111');
+    }
+  },
+  // onReachBottom() {
+  //   this.current++;
+  //   this.getList()
+  // },
+}
+</script>
+
+<style lang="scss" socped>
+.AppGeneralLawExam {
+  .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: 40px;
+          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>

src/mods/conv/AppLegalLearning/components/AppOnlineClass.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="AppOnlineClass">
+    在线课堂
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      current: 1,
+    }
+  },
+  onLoad() {
+    
+  },
+  
+  methods: {
+    getList() {
+      console.log('222');
+    }
+  },
+  // onReachBottom() {
+  //   this.current ++;
+  //   this.getList()
+  // },
+}
+</script>
+
+<style lang="scss" socped>
+.AppOnlineClass {
+  
+}
+</style>

src/mods/conv/AppLegalLearning/components/question.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="question">
+    
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      
+    }
+  },
+  onLoad() {
+    
+  },
+  
+  methods: {
+    
+  },
+  onReachBottom() {
+
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.question {
+
+}
+</style>