在线课堂

src/mods/conv/AppLegalLearning/AppLegalLearning.vue

@@ -4,8 +4,8 @@
       <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>
-    <OnlineClass ref="OnlineClass" v-show="currIndex == 0"></OnlineClass>
+    <OnlineClass ref="OnlineClass" @toDetail="toDetail" v-show="currIndex == 0"></OnlineClass>
-    <GeneralLawExam ref="GeneralLawExam" @LinkToTest="LinkToTest" v-show="currIndex == 1"></GeneralLawExam>
+    <GeneralLawExam ref="GeneralLawExam" @toTest="toTest" v-show="currIndex == 1"></GeneralLawExam>
   </div>
 </template>
 
@@ -17,7 +17,7 @@ export default {
   appName: '法治学习',
   data() {
     return {
-      currIndex: 1,
+      currIndex: 0,
       tabs: [
         {
           name: '在线课堂',
@@ -46,8 +46,11 @@ export default {
     }
   },
   methods: {
-    LinkToTest() {
+    toTest() {
       uni.navigateTo({url: "./testForm"})
+    },
+    toDetail() {
+      uni.navigateTo({url: "./classDetail"})
     }
   }
 }

src/mods/conv/AppLegalLearning/classDetail.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="classDetail">
+    <div>
+      <img src="./img/bg.png" alt="">
+    </div>
+
+    <div class="title">
+      五一假期若出游如何严格做好疫情防控？具体要求来了！
+    </div>
+    <p class="study_num">23人已学习</p>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.classDetail {
+  .title {
+    font-weight: 500;
+    font-size: 46px;
+    color: #222222;
+    padding: 0 32px;
+    box-sizing: border-box;
+  }
+
+  .study_num {
+    font-weight: 400;
+    font-size: 30px;
+    color: #999999;
+    padding: 0 32px;
+    box-sizing: border-box;
+  }
+}
+</style>

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

@@ -42,8 +42,8 @@ export default {
     getList() {
       console.log('普法考试列表');
     },
-    toTest() {
+    handleToTest() {
-      this.$emit('LinkToTest')
+      this.$emit('toTest')
     }
   },
   onReachBottom() {
@@ -88,7 +88,7 @@ export default {
 
         .card_title {
           font-weight: 500;
-          font-size: 40px;
+          font-size: 36px;
           color: #333333;
           overflow: hidden; 
           text-overflow:ellipsis;

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

@@ -1,6 +1,22 @@
 <template>
   <div class="OnlineClass">
-    在线课堂
+    <div class="search_box">
+      <u-search placeholder="请输入需要搜索的课程" bg-color="#FFF" v-model="keyword" :show-action="false"></u-search>
+    </div>
+
+    <p class="all_class">全部课程</p>
+
+    <div class="card_list">
+      <div class="card" @click="handleToDetail">
+        <div class="card_left">
+          <img src="../img/success.png" alt="">
+        </div>
+        <div class="card_right">
+          <div class="title">课程名称课程名称课程名称课程名称课程名称课程名称课…</div>
+          <div class="num">47人已学习</div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -9,6 +25,7 @@ export default {
   data() {
     return {
       current: 1,
+      keyword: '',
     }
   },
   onLoad() {
@@ -18,6 +35,9 @@ export default {
   methods: {
     getList() {
       console.log('在线课堂列表');
+    },
+    handleToDetail() {
+      this.$emit('toDetail')
     }
   },
   onReachBottom() {
@@ -29,6 +49,63 @@ export default {
 
 <style lang="scss" socped>
 .OnlineClass {
+  .search_box {
+    margin: 24px 0;
+    padding: 0 32px;
+    box-sizing: border-box;
+  }
   
+  .all_class {
+    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;
+      background: #FFFFFF;
+      box-shadow: 0 0 8px 0 rgba(0,0,0,0.02);
+      border-radius: 16px;
+      display: flex;
+      padding: 24px;
+      box-sizing: border-box;
+      .card_left {
+        margin-right: 24px;
+        img {
+          width: 160px;
+          height: 160px;
+          border-radius: 8px;
+        }
+      }
+
+      .card_right {
+        .title {
+          font-weight: 500;
+          font-size: 34px;
+          color: #333333;
+          overflow: hidden; 
+          text-overflow: ellipsis;
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: 2;
+        }
+        .num {
+          margin-top: 28px;
+          font-weight: 400;
+          font-size: 26px;
+          color: #999999;
+        }
+      }
+      .col_blue {
+        color: #2D7DFF;
+      }
+    }
+  }
 }
 </style>

src/mods/conv/AppLegalLearning/testForm.vue

@@ -1,19 +1,29 @@
 <template>
   <div class="testForm">
-    答题
+    <u-navbar title="法治学习" :background="backgroundNavbar"></u-navbar>
+    <div class="type">
+      <div class="type_left">单选题</div>
+      <div><span class="col_blue">{{ activeIndex + 1 }}</span>/{{questionList.length}}</div>
+    </div>
       <div v-for="(item,index) in questionList" :key="index">
         <div v-if="activeIndex === index">
           <div>{{ item.subject }}</div>
-        <div @click="next">下一题</div>
+          
         </div>
       </div>
+    <div class="btn" @click="next" v-if="activeIndex < questionList.length - 1">下一题</div>
   </div>
 </template>
 
 <script>
 export default {
+  customNavigation: true,
   data() {
     return {
+      backgroundNavbar: {
+        // background: "url('./img/navbar.png') no-repeat",
+        backgroundSize: '100% 100%',
+      },
       activeIndex: 0,
       questionList: [
         {
@@ -55,7 +65,9 @@ export default {
     },
     next() {
       this.activeIndex ++;
-    }
+    },
+    touchStart() {},
+    touchEnd() {},
   },
   onReachBottom() {
     this.current ++;
@@ -65,6 +77,38 @@ export default {
 
 <style lang="scss" scoped>
 .testForm {
+  // background: url("./img/bg.png") no-repeat;
+
+  .type {
+    display: flex;
+    justify-content: space-between;
+    padding: 0 32px;
+    margin-top: 80px;
+    box-sizing: border-box;
+    font-size: 28px;
+    color: #333333;
+
+    .type_left {
+      font-weight: 600;
+    }
+
+    .col_blue {
+      color: #2D7DFF;
+    }
 
   }
+
+  .btn {
+    position: fixed;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    bottom: 0;
+    width: 320px;
+    height: 88px;
+    line-height: 88px;
+    text-align: center;
+    background: #2D7DFF;
+    border-radius: 44px;
+  }
+}
 </style>