improvement: 开始考试也能滚动

src/components/circle-progress/index.vue

@@ -34,7 +34,6 @@
 /**
  * circleProgress 环形进度条
  * @description 展示操作或任务的当前进度，比如上传文件，是一个圆形的进度条。注意：此组件的percent值只能动态增加，不能动态减少。
- * @tutorial https://www.uviewui.com/components/circleProgress.html
  * @property {String Number} percent 圆环进度百分比值，为数值类型，0-100
  * @property {String} inactive-color 圆环的底色，默认为灰色(该值无法动态变更)（默认#ececec）
  * @property {String} active-color 圆环激活部分的颜色(该值无法动态变更)（默认#19be6b）
@@ -43,7 +42,7 @@
  * @property {String Number} duration 整个圆环执行一圈的时间，单位ms（默认呢1500）
  * @property {String} type 如设置，active-color值将会失效
  * @property {String} bg-color 整个组件背景颜色，默认为白色
- * @example <u-circle-progress active-color="#2979ff" :percent="80"></u-circle-progress>
+ * @example <circle-progress active-color="#2979ff" :percent="80"></circle-progress>
  */
 export default {
   name: 'circle-progress',
@@ -105,7 +104,7 @@ export default {
       // #endif
       widthPx: uni.upx2px(this.width), // 转成px后的整个组件的背景宽度
       borderWidthPx: uni.upx2px(this.borderWidth), // 转成px后的圆环的宽度
-      startAngle: Math.PI * 0.84, // canvas画圆的起始角度，默认为3点钟方向，定位到12点钟方向
+      startAngle: Math.PI * 0.84, // canvas画圆的起始角度，默认为3点钟方向，定位到8点钟方向
       progressContext: null, // 活动圆的canvas上下文
       newPercent: 0, // 当动态修改进度值的时候，保存进度值的变化前后值，用于比较用
       oldPercent: 0, // 当动态修改进度值的时候，保存进度值的变化前后值，用于比较用

src/components/pop-view/index.vue

@@ -125,9 +125,10 @@ export default {
   .line-view {
     background-color: #e8ebf3;
     height: 2rpx;
-    width: 100%;
+    width: calc(100% + 60rpx);
     margin-bottom: 40rpx;
     margin-top: 40rpx;
+    margin-left: -30rpx;
   }
 
   .pop-btn-view {

src/pages/learn/beginAnswer.vue

@@ -9,32 +9,34 @@
       title-bold
     ></u-navbar>
     <view class="content">
-      <view class="head-view">
-        <view class="image-view">
-          <image class="image" :src="info.image || defaultImage"> </image
-        ></view>
-        <view>{{ info.name }}</view>
-      </view>
-      <view class="line-view"></view>
-      <view class="list-view">
-        <view v-for="(value, key) in labels" :key="key" class="item-view">
-          <view class="left-view">{{ value }}</view>
-          <view>{{ info[key] }}</view>
+      <view class="body-view">
+        <view class="head-view">
+          <view class="image-view">
+            <image class="image" :src="info.image || defaultImage"> </image
+          ></view>
+          <view>{{ info.name }}</view>
         </view>
-      </view>
-      <view class="line-view"></view>
-      <view class="tip-view"
-        >温馨提示：模拟考试中不能修改答案，没做错1道题扣2分，合格标准为90分。</view
-      >
-      <view class="bottom-view">
-        <u-button
-          :customStyle="buttonStyle"
-          @click="handleClick"
-          type="primary"
-          shape="circle"
+        <view class="line-view"></view>
+        <view class="list-view">
+          <view v-for="(value, key) in labels" :key="key" class="item-view">
+            <view class="left-view">{{ value }}</view>
+            <view>{{ info[key] }}</view>
+          </view>
+        </view>
+        <view class="line-view"></view>
+        <view class="tip-view"
+          >温馨提示：模拟考试中不能修改答案，没做错1道题扣2分，合格标准为90分。</view
         >
-          开始模拟
-        </u-button>
+        <view class="bottom-view">
+          <u-button
+            :customStyle="buttonStyle"
+            @click="handleClick"
+            type="primary"
+            shape="circle"
+          >
+            开始模拟
+          </u-button>
+        </view>
       </view>
     </view>
   </view>
@@ -91,6 +93,12 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+  color: transparent;
+  display: none;
+}
 .begin-answer {
   display: flex;
   flex-direction: column;
@@ -101,66 +109,70 @@ export default {
   height: 100vh;
   .content {
     height: 100%;
-    margin: 70rpx 24rpx 44rpx 24rpx;
-    background-color: #ffffff;
-    border-radius: 12rpx 12rpx 0 0;
-    padding: 0 30rpx 60rpx 30rpx;
-    .head-view {
-      width: 100%;
-      display: flex;
-      align-items: center;
-      font-size: 32rpx;
-      font-weight: bold;
-      color: #191c27;
-      flex-direction: column;
-      margin-bottom: 40rpx;
-      .image-view {
-        margin-bottom: 20rpx;
+    overflow: auto;
+    padding-top: 100rpx;
+    .body-view {
+      margin: 0rpx 24rpx 44rpx 24rpx;
+      background-color: #ffffff;
+      border-radius: 12rpx;
+      padding: 0 30rpx 60rpx 30rpx;
+      .head-view {
+        width: 100%;
         display: flex;
-        justify-content: center;
         align-items: center;
-        padding: 4rpx;
-        width: 140rpx;
-        height: 140rpx;
-        background-color: #ffffff;
-        border-radius: 140rpx;
-        margin-top: -70rpx;
-        .image {
-          width: 136rpx;
-          height: 136rpx;
-          border-radius: 136rpx;
+        font-size: 32rpx;
+        font-weight: bold;
+        color: #191c27;
+        flex-direction: column;
+        margin-bottom: 40rpx;
+        .image-view {
+          margin-bottom: 20rpx;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          padding: 4rpx;
+          width: 140rpx;
+          height: 140rpx;
+          background-color: #ffffff;
+          border-radius: 140rpx;
+          margin-top: -70rpx;
+          .image {
+            width: 136rpx;
+            height: 136rpx;
+            border-radius: 136rpx;
+          }
         }
       }
-    }
-    .line-view {
-      background-color: #e8ebf3;
-      height: 2rpx;
-    }
-    .list-view {
-      padding: 20rpx 0;
-      .item-view {
-        margin: 30rpx 0;
-        display: flex;
-        justify-content: space-between;
-        align-items: flex-start;
-        color: #5a6073;
-        font-size: 28rpx;
-        text-align: right;
-        word-break: break-all;
-        .left-view {
-          text-align: left;
-          color: #9ea5bb;
-          margin-right: 30rpx;
-          flex-shrink: 0;
+      .line-view {
+        background-color: #e8ebf3;
+        height: 2rpx;
+      }
+      .list-view {
+        padding: 20rpx 0;
+        .item-view {
+          margin: 30rpx 0;
+          display: flex;
+          justify-content: space-between;
+          align-items: flex-start;
+          color: #5a6073;
+          font-size: 28rpx;
+          text-align: right;
+          word-break: break-all;
+          .left-view {
+            text-align: left;
+            color: #9ea5bb;
+            margin-right: 30rpx;
+            flex-shrink: 0;
+          }
         }
       }
-    }
-    .tip-view {
-      font-size: 26rpx;
-      color: #9ea5bb;
-      margin: 50rpx 0 210rpx 0;
-    }
-    .bottom-btn {
+      .tip-view {
+        font-size: 26rpx;
+        color: #9ea5bb;
+        margin: 50rpx 0 210rpx 0;
+      }
+      .bottom-btn {
+      }
     }
   }
 }