优化字体显示

pages/YNEduApp/exam/examination.vue

@@ -2,7 +2,9 @@
   <view :style="{ fontSize: fontSize + 'px' }">
     <u-navbar leftIcon="" title="考试" :placeholder="true">
       <view class="u-nav-slot" slot="right">
-        <u-number-box v-model="fontSize" @change="changeFont" button-size="36"></u-number-box>
+        <u-tag text="小" :type="fontSize == 19 ? 'primary' : 'info'" @click="changeFont(19)" style="margin-right: 8px" ></u-tag>
+        <u-tag text="中" :type="fontSize == 21 ? 'primary' : 'info'" @click="changeFont(21)" style="margin-right: 8px"></u-tag>
+        <u-tag text="大" :type="fontSize == 23 ? 'primary' : 'info'" @click="changeFont(23)"></u-tag>
       </view>
     </u-navbar>
     <div class="content" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd">
@@ -113,6 +115,7 @@
       </div>
 
       <!-- 底部按钮 -->
+      <div style="height: 75px"></div>
       <div class="bottom-btn">
         <div class="btn" v-show="currentIndex != 0">
           <u-button shape="circle" text="上一题" @click="currentIndex--" />
@@ -201,7 +204,7 @@ export default {
       startY: 0, // 起始触摸点Y坐标
       endX: 0, // 结束触摸点X坐标
       endY: 0, // 结束触摸点Y坐标
-      fontSize: 20,
+      fontSize: 19,
       timeData: {}
     }
   },
@@ -247,9 +250,9 @@ export default {
   //   this.handleConfirmSubmit()
   // },
   methods: {
-    changeFont(e) {
-      console.log('🚀 ~ changeFont ~ e:', e)
-      this.fontSize = e.value
+    changeFont(size) {
+      console.log('🚀 ~ changeFont ~ size:', size)
+      this.fontSize = size
     },
     // 获取列表
     async getList() {
@@ -673,6 +676,11 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.u-nav-slot {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
 .content {
   width: 100vw;
   height: 90vh;
@@ -765,7 +773,6 @@ export default {
   .options {
     margin-top: 10px;
     margin-bottom: 30px;
-    max-height: 330px;
     overflow: auto;
     .option-wrapper {
       max-height: 200px;

pages/YNEduApp/prac/exercises.vue

@@ -2,7 +2,9 @@
   <view class="wrapper" :style="{ fontSize: fontSize + 'px' }">
     <u-navbar leftIcon="" title="" :placeholder="true">
       <view class="u-nav-slot" slot="right">
-        <u-number-box v-model="fontSize" @change="changeFont" button-size="36"></u-number-box>
+        <u-tag text="小" :type="fontSize == 19 ? 'primary' : 'info'" @click="changeFont(19)" style="margin-right: 8px" ></u-tag>
+        <u-tag text="中" :type="fontSize == 21 ? 'primary' : 'info'" @click="changeFont(21)" style="margin-right: 8px"></u-tag>
+        <u-tag text="大" :type="fontSize == 23 ? 'primary' : 'info'" @click="changeFont(23)"></u-tag>
       </view>
     </u-navbar>
     <div class="top-time">已用时间 {{ usedTime }}</div>
@@ -277,7 +279,7 @@ export default {
       startY: 0, // 起始触摸点Y坐标
       endX: 0, // 结束触摸点X坐标
       endY: 0, // 结束触摸点Y坐标
-      fontSize: 20
+      fontSize: 19
     }
   },
   onLoad(opt) {
@@ -301,9 +303,9 @@ export default {
     this.handleClose()
   },
   methods: {
-    changeFont(e) {
-      console.log('🚀 ~ changeFont ~ e:', e)
-      this.fontSize = e.value
+    changeFont(size) {
+      console.log('🚀 ~ changeFont ~ size:', size)
+      this.fontSize = size
     },
     // 获取题目-上方数量
     getPracticeItData() {
@@ -913,6 +915,11 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.u-nav-slot {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
 .wrapper {
   height: 100vh;
   /* background: url('/static/images/question-bg.png') no-repeat; */