曲靖

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>