考试结果

src/project/qujing/AppLegalLearning/components/GeneralLawExam.vue

@@ -24,19 +24,22 @@
         <div class="card_bottom col_blue" @click="handleToTest()">参加考试</div>
       </div>
     </div>
-    <u-popup v-model="show" mode="bottom" border-radius="32">
+
-			<div class="send_box">
+    <u-popup v-model="showAuth" mode="bottom" border-radius="32">
-        <div class="text">
+			<div class="auth_box">
-          <textarea
+        <div class="auth_title">居民信息认证</div>
-              @blur="height = 0"
+        
-              placeholder-style="color: #999;font-size: 16px;"
+        <div class="auth_form">
-              v-model="content"
+          <div class="form_name">姓名</div>
-              :cursor-spacing="40"
+          <input class="form_value" type="text" placeholder="请输入姓名" v-model="value1"/>
-              placeholder="我来说两句..."
+          <div class="form_name">身份证号</div>
-              @keyboardheightchange="keyboard">
+          <input class="form_value" type="idcard" placeholder="请输入18位身份证号" v-model="value2"/>
-          </textarea>
+        </div>
+
+        <div class="auth_btn">
+          <div class="cancel">取消</div>
+          <div class="submit">确定</div>
         </div>
-        <div class="send_btn">发送</div>
       </div>
 		</u-popup>
   </div>
@@ -46,6 +49,7 @@
 export default {
   data() {
     return {
+      showAuth: false,
       keyword: '',
       current: 1,
     }
@@ -151,5 +155,59 @@ export default {
       }
     }
   }
+
+  .auth_box {
+    padding: 32px;
+    box-sizing: border-box;
+
+    .auth_title {
+      font-weight: 600;
+      font-size: 34px;
+      color: #333333;
+      text-align: center;
+    }
+    .auth_form {
+      margin-top: 30px;
+
+      .form_name {
+        font-weight: 500;
+        font-size: 28px;
+        color: #333333;
+        margin-bottom: 16px;
+      }
+
+      input {
+        height: 96px;
+        background: #F4F5FA;
+        border-radius: 16px;
+        margin-bottom: 32px;
+        padding-left: 24px;
+      }
+    }
+
+    .auth_btn {
+      display: flex;
+      justify-content: space-between;
+      height: 100px;
+      padding: 10px 0;
+      box-sizing: border-box;
+      .cancel {
+        background: #F2F2F2;
+        color: #2D7DFF;
+      }
+      .submit {
+        background: #2D7DFF;
+        color: #FFF;
+      }
+      .cancel,
+      .submit {
+        width: 48%;
+        height: 80px;
+        line-height: 80px;
+        text-align: center;
+        border-radius: 16px;
+      }
+    }
+  }
 }
 </style>

src/project/qujing/AppLegalLearning/result.vue

@@ -0,0 +1,139 @@
+<template>
+  <div class="result">
+    <u-navbar title="考试结果" :background="backgroundNavbar"></u-navbar>
+
+    <div class="grade">100</div>
+    <div class="tips">
+      <div>考试分数</div>
+      <div>超过<span>99%</span>的人</div>
+    </div>
+
+    <div class="card_list">
+      <div class="pass">
+        <div>结果</div>
+        <div class="col_pass">通过</div>
+      </div>
+      <div class="time">
+        <div>用时</div>
+        <div class="col_333">1小时32分</div>
+      </div>
+      <div class="pass_num">
+        <div>对题数</div>
+        <div class="col_333">10</div>
+      </div>
+      <div class="nopass_num">
+        <div>对题数</div>
+        <div class="col_333">1</div>
+      </div>
+    </div>
+
+    <div class="btn" @click="back">返回</div>
+  </div>
+</template>
+
+<script>
+export default {
+  customNavigation: true,
+  data() {
+    return {
+      backgroundNavbar: {
+        // background: "url('./img/navbar.png') no-repeat",
+        // backgroundSize: '100% 100%',
+      },
+      
+    }
+  },
+  methods: {
+
+  },
+  onShow() {
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.result {
+  padding: 32px;
+  box-sizing: border-box;
+  .grade {
+    height: 112px;
+    font-size: 96px;
+    color: #2D7DFF;
+    line-height: 112px;
+    font-weight: 600;
+    padding-left: 16px;
+    box-sizing: border-box;
+  }
+
+  .tips {
+    display: flex;
+    justify-content: space-between;
+    font-size: 26px;
+    color: #999999;
+    padding-left: 16px;
+    box-sizing: border-box;
+    div {
+      & > span {
+        color: #2D7DFF;
+      }
+    }
+  }
+
+  .card_list {
+    margin-top: 48px;
+    display: flex;
+    flex-wrap: wrap;
+
+    .pass,
+    .time,
+    .pass_num,
+    .nopass_num {
+      width: 47%;
+      height: 172px;
+      background: #FFFFFF;
+      box-shadow: 0 0 8px 0 rgba(0,0,0,0.02);
+      border-radius: 16px;
+      padding: 24px;
+      box-sizing: border-box;
+
+      & > div:first-child {
+        font-weight: 400;
+        font-size: 26rpx;
+        color: #999999;
+        margin-bottom: 16px;
+      }
+
+      & > div:last-child {
+        font-weight: 500;
+        font-size: 50rpx;
+      }
+
+      .col_pass {
+        color: #3BBC37;
+      }
+
+      .col_333 {
+        color: #333333;
+      }
+    }
+    .pass,
+    .pass_num {
+      margin: 0 30px 32px 0;
+    }
+  }
+
+  .btn {
+    position: fixed;
+    bottom: 0;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 320px;
+    height: 88px;
+    line-height: 88px;
+    background: #2D7DFF;
+    border-radius: 44px;
+    text-align: center;
+    color: #FFFFFF;
+  }
+}
+</style>

src/project/qujing/AppLegalLearning/testForm.vue

@@ -1,12 +1,13 @@
 <template>
   <div class="testForm">
     <u-navbar title="法治学习" :background="backgroundNavbar"></u-navbar>
+    <div @touchstart="touchStart" @touchend="touchEnd">
       <div class="type">
         <div class="type_left">单选题</div>
         <div><span class="col_blue">{{ activeIndex + 1 }}</span>/{{questionList.length}}</div>
       </div>
       <div class="topic">
-      <div v-for="(item,index) in questionList" :key="index">
+        <div v-for="(item,index) in questionList" :key="index" >
           <div v-if="activeIndex === index">
             <div>{{ item.subject }}</div>
             <div>
@@ -15,7 +16,9 @@
           </div>
         </div>
       </div>
-    <div class="btn" @click="next" v-if="activeIndex < questionList.length - 1">下一题</div>
+    </div>
+    <!-- <div class="btn" @click="next" v-if="activeIndex < questionList.length - 1">下一题</div> -->
+    <div class="btn" @click="confirm">确定</div>
   </div>
 </template>
 
@@ -25,10 +28,10 @@ export default {
   data() {
     return {
       backgroundNavbar: {
-        background: "url('./img/navbar.png') no-repeat",
+        // background: "url('./img/navbar.png') no-repeat",
-        backgroundSize: '100% 100%',
+        // backgroundSize: '100% 100%',
       },
-      activeIndex: 0,
+      
       options: ['A','B','C','D','E','F','G','H','I','J','K','L','M'],
       questionList: [
         {
@@ -61,7 +64,11 @@ export default {
           answer: "答案",
           jiexi: '解析'
         }
-      ]
+      ],
+      startX: 0, // 滑动开始x轴位置
+      moveX: 0, // 滑动的x轴距离
+      activeIndex: 0, // 当前第几题
+      newIndex: 0, // 滑动到第几题
     }
   },
   methods: {
@@ -71,8 +78,29 @@ export default {
     next() {
       this.activeIndex ++;
     },
-    touchStart() {},
+    touchStart(e) {
-    touchEnd() {},
+      this.startX = e.changedTouches[0].pageX
+      console.log('开始触摸：', this.startX);
+    },
+    touchEnd(e, index) { // 手指离开屏幕时触发
+      // 获取滑动距离
+      const moveX = e.changedTouches[0].pageX - this.startX
+      // 判断滑动方向
+      if (moveX < -100 && index < this.topic.length-1) {
+        // 【下一题】 判断大幅度左滑且不是最后一题
+          this.newIndex=this.newIndex+1
+          this.activeIndex= this.activeIndex+1
+          console.log('第'+this.index+'题');
+      }
+      else if (moveX > 100 && index!= 0) { 
+          // 【上一题】 判断大幅度右滑且不是第一题
+          this.newIndex=this.newIndex-1
+          this.activeIndex=this.activeIndex-1
+      }
+    },
+    confirm() {
+      uni.navigateTo({url: './result'})
+    },
   },
   onReachBottom() {
     this.current ++;