曲靖

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/OnlineClass.vue
+++ b/src/project/qujing/AppLegalLearning/components/OnlineClass.vue
@@ -0,0 +1,111 @@
+<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>
+
+<script>
+export default {
+  data() {
+    return {
+      current: 1,
+      keyword: '',
+    }
+  },
+  onLoad() {
+    
+  },
+  
+  methods: {
+    getList() {
+      console.log('在线课堂列表');
+    },
+    handleToDetail() {
+      this.$emit('toDetail')
+    }
+  },
+  onReachBottom() {
+    this.current ++;
+    this.getList()
+  },
+}
+</script>
+
+<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>