曲靖

src/project/qujing/AppLegalLearning/AppLegalLearning.vue

@@ -0,0 +1,66 @@
+<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>
+    <OnlineClass ref="OnlineClass" @toDetail="toDetail" v-show="currIndex == 0"></OnlineClass>
+    <GeneralLawExam ref="GeneralLawExam" @toTest="toTest" v-show="currIndex == 1"></GeneralLawExam>
+  </div>
+</template>
+
+<script>
+import OnlineClass from './components/OnlineClass.vue'
+import GeneralLawExam from './components/GeneralLawExam.vue'
+export default {
+  name: 'AppLegalLearning',
+  appName: '法治学习',
+  data() {
+    return {
+      currIndex: 0,
+      tabs: [
+        {
+          name: '在线课堂',
+        },
+        {
+          name: '普法考试',
+        }
+      ],
+    }
+  },
+  onShow() {
+  },
+  components: {
+    OnlineClass,
+    GeneralLawExam
+  },
+  watch: {
+    currIndex: {
+      handler(v) {
+        if(v == 0) {
+          this.$refs.OnlineClass.getList();
+        } else if(v == 1) {
+          this.$refs.GeneralLawExam.getList();
+        }
+      }
+    }
+  },
+  methods: {
+    toTest() {
+      uni.navigateTo({url: "./testForm"})
+    },
+    toDetail() {
+      uni.navigateTo({url: "./classDetail"})
+    }
+  }
+}
+</script>
+
+<style lang="scss" socped>
+.AppGeneralLawExam {
+  .tabs_box {
+    height: 100px;
+    line-height: 100px;
+  }
+}
+</style>

src/project/qujing/AppLegalLearning/classDetail.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="classDetail">
+    <div>
+      <img src="./img/bg.png" alt="">
+    </div>
+
+    <div class="title">
+      五一假期若出游如何严格做好疫情防控？具体要求来了！
+    </div>
+    <p class="study_num">23人已学习</p>
+
+    <p class="content">
+      7月13日，从“曲靖这十年”系列新闻发布会（法治建设专场）
+获悉，党的十八大以来，曲靖市深入学习贯彻习近平新时代中国特色社会主义思想，坚持以习近平法治思想为根本遵循和行动指南，坚持依法治市、依法执政、依法行政共同推进，法治曲靖、法治政府、法治社会一体建设，统筹推动科学立法、严格执法、公正司法、全民守法，人民群众法治获得感、满意度明显提升，法治曲靖建设蹄疾步稳、铿锵有力，为全市经济社会高质量跨越式发展提供了坚实法治保障。
+中共曲靖市委政法委副书记刘洁介绍，过去十年，曲靖市坚持“固根本、明方向”，全面加强党对法治建设的领导；坚持“立良法、促善治”，持续夯实法治建设根基；坚持“严执法、
+促规范”，稳步推进法治政府建设；坚持“强制约、促公正”，充分彰显社会公平正义；坚持“广普法、重实效”，遵法守法
+观念入脑入心。刘洁称，2019年机构改革后，曲靖市委全面依法治市委员会办公室在市司法局设立，在市委市政府的领导下，曲靖全市司法行政系统围绕“一个统筹、四大职能”，
+制定完善法治曲靖建设3个“1+3”体系，开创了法治建设工作新局面。当前，曲靖以健全行政执法“一方案三清单”为统领，完善制度体系建设，全面推行重大行政决策目录化管理，
+创新推进基层合法性审查全覆盖，行政执法人员全部纳入云南执法人员网上管理系统进行管理，行政复议案件统一由市、县两级人民政府管辖，行政复议体制改革落地落实，政府
+行政行为质量稳步提高，2022年上半年市级法院行政案件行政机关负责人出庭应诉率达100%。刘洁指出，全民守法是法治社会的基础工程。曲靖紧跟新时代，在针对性和实效性上下功夫，不断提升全市公民法治意识和法治素养，使法治成为社会共识和基本准则。曲靖按照“覆盖城乡、功能完善、便捷高效、群众满意”的目标，深化公共法律服务体系建设，推动实现市县乡村四级公共法律服务实体平台全覆盖。
+    </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 {
+    margin-top: 16px;
+    font-weight: 400;
+    font-size: 30px;
+    color: #999999;
+    padding: 0 32px;
+    box-sizing: border-box;
+  }
+
+  .content {
+    margin-top: 48px;
+    padding: 0 32px;
+    box-sizing: border-box;
+  }
+}
+</style>

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>

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>

src/project/qujing/AppLegalLearning/testForm.vue

@@ -0,0 +1,114 @@
+<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>
+      </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: [
+        {
+          index: 0,
+          subject: "第1题",
+          answer: "答案",
+          jiexi: '解析'
+        },
+        {
+          index: 1,
+          subject: "第2题",
+          answer: "答案",
+          jiexi: '解析'
+        },
+        {
+          index: 2,
+          subject: "第3题",
+          answer: "答案",
+          jiexi: '解析'
+        },
+        {
+          index: 3,
+          subject: "第4题",
+          answer: "答案",
+          jiexi: '解析'
+        },
+        {
+          index: 4,
+          subject: "第5题",
+          answer: "答案",
+          jiexi: '解析'
+        }
+      ]
+    }
+  },
+  methods: {
+    getList() {
+      console.log('题目列表');
+    },
+    next() {
+      this.activeIndex ++;
+    },
+    touchStart() {},
+    touchEnd() {},
+  },
+  onReachBottom() {
+    this.current ++;
+  },
+}
+</script>
+
+<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>