瀏覽代碼

登录调整右侧卡片大小 画画预览添加橡皮擦

natasha 6 天之前
父節點
當前提交
237c28a5c2

+ 1 - 0
src/icons/svg/eraser.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1780917136703" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3252" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><path d="M604.536246 736.222443l288.794439-282.693148-287.777557-270.999007-270.999007 283.201589z m-72.70705 71.181728L264.389275 539.455809 145.922542 660.973188l164.734856 164.734856a50.844091 50.844091 0 0 0 36.099305 14.744786h107.789474a101.688183 101.688183 0 0 0 71.181728-28.981132z m109.314796 35.082423h254.220457a50.844091 50.844091 0 0 1 0 101.688183H346.248262a152.532274 152.532274 0 0 1-107.789474-44.742801l-164.734856-164.734856a101.688183 101.688183 0 0 1 0-142.363456l457.596823-480.476663a101.688183 101.688183 0 0 1 143.380337-3.559086l287.269117 270.999007a101.688183 101.688183 0 0 1 4.067527 143.888778l-3.050646 3.050646z" fill="currentColor" p-id="3253"></path></svg>

+ 31 - 6
src/views/book/courseware/create/components/question/image_text/ImageText.vue

@@ -37,9 +37,18 @@
         <ResourcesOperate :data="data.mp3_list[0]"></ResourcesOperate>
       </div>
 
-      <el-radio-group v-model="isText" style="width: 100%; margin: 20px 0; text-align: center">
-        <el-radio-button :label="true">文字框</el-radio-button>
-        <el-radio-button :label="false">输入框</el-radio-button>
+      <p class="tips">操作提示:在图片上拖拽鼠标,创建文字框或答题框</p>
+      <el-radio-group v-model="isText" style="width: 100%; margin: 10px 0; text-align: center">
+        <el-radio-button :label="true"
+          ><el-tooltip class="item" effect="dark" content="添加图上文字" placement="bottom">
+            <div>文字框</div>
+          </el-tooltip></el-radio-button
+        >
+        <el-radio-button :label="false"
+          ><el-tooltip class="item" effect="dark" content="读者在此作答" placement="bottom">
+            <div>答题框</div>
+          </el-tooltip></el-radio-button
+        >
       </el-radio-group>
       <div
         v-if="data.image_list[0]"
@@ -76,7 +85,7 @@
           ></div>
           <div
             v-for="(itemh, indexh) in data.text_list"
-            :key="indexh"
+            :key="'text-' + indexh"
             :style="{
               position: 'absolute',
               top: `${itemh.y}`,
@@ -119,7 +128,7 @@
           </div>
           <div
             v-for="(itemh, indexhs) in data.input_list"
-            :key="indexhs"
+            :key="'input-' + indexhs"
             :style="{
               position: 'absolute',
               top: `${itemh.y}`,
@@ -157,7 +166,7 @@
                 fontSize: '12px',
                 padding: '0 3px',
               }"
-              >输入框</span
+              >答题框</span
             >
           </div>
         </div>
@@ -1015,4 +1024,20 @@ export default {
     }
   }
 }
+
+:deep .el-radio-button--small {
+  .el-radio-button__inner {
+    padding: 0;
+
+    > div {
+      padding: 8px 15px;
+    }
+  }
+}
+
+.tips {
+  margin: 10px 0 0;
+  font-size: 12px;
+  color: #e82d2d;
+}
 </style>

+ 18 - 2
src/views/book/courseware/preview/components/drawing/DrawingPreview.vue

@@ -52,6 +52,8 @@
         <el-color-picker v-model="lineColor" @change="changeColor" />
         <!-- 清除一笔 -->
         <img class="clean-btn" src="@/assets/drawing-back.png" @click="undo" />
+        <!-- 橡皮擦 -->
+        <SvgIcon icon-class="eraser" size="24" @click="eraser" :style="{ color: isEraser ? 'green' : '#000' }" />
         <!-- 清空画板 -->
         <img class="clean-btn" src="@/assets/icon-clean.png" @click="clear" />
         <img :src="penIndex == 0 ? thinpenActive : thinpen" class="pen-img" @click="selSize(0)" />
@@ -106,6 +108,7 @@ export default {
       imgSrc: '',
       signData: null,
       mobileHeight: 0,
+      isEraser: false, // 是否为橡皮擦模式
     };
   },
   created() {
@@ -116,10 +119,12 @@ export default {
     // 撤销
     undo() {
       this.$refs.signaturePad.undoSignature();
+      this.isEraser = false;
     },
     // 清除
     clear() {
       this.$refs.signaturePad.clearSignature();
+      this.isEraser = false;
     },
     // 保存
     save() {
@@ -148,9 +153,19 @@ export default {
     changeColor(val) {
       this.options = {
         penColor: val,
-        minWidth: this.weightList[this.penIndex],
-        maxWidth: this.weightList[this.penIndex],
+        minWidth: this.penIndex ? this.weightList[this.penIndex] : 1,
+        maxWidth: this.penIndex ? this.weightList[this.penIndex] : 1,
+      };
+    },
+    // 橡皮擦
+    eraser() {
+      this.penIndex = null;
+      this.options = {
+        penColor: '#DCDFE6',
+        minWidth: 3,
+        maxWidth: 3,
       };
+      this.isEraser = true;
     },
     // 调节画笔粗细大小
     selSize(index) {
@@ -160,6 +175,7 @@ export default {
         minWidth: this.weightList[this.penIndex],
         maxWidth: this.weightList[this.penIndex],
       };
+      this.isEraser = false;
     },
     initData() {
       if (!this.isJudgingRightWrong) {

+ 20 - 18
src/views/login/index.vue

@@ -108,7 +108,7 @@
       <div class="login-panel">
         <div class="login-card">
           <div class="lc-header">
-            <div class="lc-logo"><img src="@/assets/login/logo.png" alt="LOGO" /></div>
+            <!-- <div class="lc-logo"><img src="@/assets/login/logo.png" alt="LOGO" /></div> -->
             <h2>欢迎登录</h2>
             <p class="sub">登录您的账号</p>
           </div>
@@ -511,7 +511,7 @@ export default {
     flex-direction: column;
     align-items: center;
     width: 100%;
-    max-width: 620px;
+    max-width: 760px;
   }
 
   .brand-logo {
@@ -538,8 +538,8 @@ export default {
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 52px;
-    height: 52px;
+    width: 68px;
+    height: 68px;
   }
 
   .brand-logo .logo-icon img {
@@ -549,7 +549,7 @@ export default {
   }
 
   .brand-logo .logo-text {
-    font-size: 27px;
+    font-size: 30px;
     font-weight: 700;
     color: #1f2937;
     letter-spacing: 0.3px;
@@ -569,7 +569,7 @@ export default {
 
   .brand-position {
     margin-bottom: 4px;
-    font-size: 13px;
+    font-size: 15px;
     font-weight: 500;
     color: #64748b;
     letter-spacing: 0.8px;
@@ -578,7 +578,7 @@ export default {
 
   .brand-desc {
     margin-bottom: 40px;
-    font-size: 13px;
+    font-size: 15px;
     color: #64748b;
     animation: fadeDown 0.7s 0.08s cubic-bezier(0.22, 1, 0.36, 1) both;
   }
@@ -586,7 +586,7 @@ export default {
   .flow-zone {
     position: relative;
     width: 100%;
-    max-width: 580px;
+    max-width: 680px;
     margin-bottom: 38px;
     animation: fadeDown 0.7s 0.16s cubic-bezier(0.22, 1, 0.36, 1) both;
   }
@@ -595,7 +595,7 @@ export default {
     position: relative;
     display: flex;
     align-items: center;
-    height: 155px;
+    height: 190px;
     padding: 0 12px;
   }
 
@@ -751,7 +751,7 @@ export default {
 
   .flow-card {
     min-width: 76px;
-    padding: 8px 10px;
+    padding: 10px 12px;
     margin-top: 14px;
     text-align: center;
     cursor: default;
@@ -774,7 +774,7 @@ export default {
 
   .flow-card .fc-icon {
     display: block;
-    font-size: 18px;
+    font-size: 20px;
     transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
   }
 
@@ -783,8 +783,8 @@ export default {
   }
 
   .flow-card .fc-icon svg {
-    width: 18px;
-    height: 18px;
+    width: 22px;
+    height: 22px;
     stroke-linecap: round;
     stroke-linejoin: round;
     stroke-width: 1.8;
@@ -792,14 +792,14 @@ export default {
 
   .flow-card .fc-title {
     margin-bottom: 1px;
-    font-size: 11px;
+    font-size: 13px;
     font-weight: 600;
     color: #1f2937;
     white-space: nowrap;
   }
 
   .flow-card .fc-sub {
-    font-size: 9px;
+    font-size: 11px;
     color: #94a3b8;
     white-space: nowrap;
   }
@@ -808,7 +808,7 @@ export default {
     position: absolute;
     top: 44%;
     z-index: 2;
-    font-size: 12px;
+    font-size: 14px;
     color: rgba(45, 62, 143, 18%);
     pointer-events: none;
     transform: translateY(-50%);
@@ -944,7 +944,7 @@ export default {
   }
 
   .login-card .lc-header {
-    margin-bottom: 28px;
+    margin-bottom: 18px;
     text-align: center;
   }
 
@@ -966,6 +966,7 @@ export default {
   }
 
   .login-card h2 {
+    margin-top: 0;
     margin-bottom: 4px;
     font-size: 22px;
     font-weight: 700;
@@ -973,6 +974,7 @@ export default {
   }
 
   .login-card .sub {
+    margin: 10px;
     font-size: 13px;
     color: #94a3b8;
   }
@@ -982,7 +984,7 @@ export default {
     display: flex;
     gap: 0;
     padding: 3px;
-    margin-bottom: 22px;
+    margin-bottom: 16px;
     background: #f1f5f9;
     border-radius: 8px;
   }