improvement: 开始考试也能滚动

3961650c · Facius · 55c5616a · 3961650c · 3961650c · 3961650c
Commit 3961650c authored Jul 16, 2021 by Facius
Hide whitespace changes
Inline Side-by-side

Showing with 94 additions and 82 deletions

index.vue src/components/circle-progress/index.vue +2 -3

index.vue src/components/pop-view/index.vue +2 -1

beginAnswer.vue src/pages/learn/beginAnswer.vue +90 -78

No files found.
--- a/src/components/circle-progress/index.vue
+++ b/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, // 当动态修改进度值的时候，保存进度值的变化前后值，用于比较用

--- a/src/components/pop-view/index.vue
+++ b/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 {

--- a/src/pages/learn/beginAnswer.vue
+++ b/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 {
+      }
    }
  }
 }