chore: change css

src/assets/css/style.scss

@@ -15,14 +15,14 @@
   --color-item-bg: white;
   --color-item-hover: white;
   --color-item-active: rgb(75, 110, 175);
-  --color-main-active: rgb(12,140,233);
+  --color-main-active: rgb(12, 140, 233);
   --toolbar-width: 700rem;
   //--toolbar-width: 50vw;
 }
 
 html[data-theme='dark'] {
   //--color-main-bg: rgba(0, 5, 24, 1);
-  --color-main-bg: rgba(14,18,23, 1);
+  --color-main-bg: rgba(14, 18, 23, 1);
   //--color-main-bg: rgba(17,24,39, 1);
   --color-second-bg: rgb(60, 63, 65);
   --color-header-bg: rgb(60, 63, 65);
@@ -36,14 +36,16 @@ $anim-time: 0.3s;
   transition: background $anim-time, color $anim-time;
 }
 
+
+$font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
+'Helvetica Neue', sans-serif;
 html, body {
   padding: 0;
   margin: 0;
   width: 100%;
   height: 100%;
   color: $font-color;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
-  'Helvetica Neue', sans-serif;
+  font-family: $font-family;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
@@ -58,6 +60,29 @@ a {
   text-decoration: none;
 }
 
+.base-textarea {
+  flex: 1;
+  font-family: $font-family;
+  font-size: 18rem;
+  outline: none;
+  border: 1px solid transparent;
+  border-radius: 6rem;
+  padding:8rem 10rem;
+  transition: all .3s;
+  min-height: 20rem;
+  width: 100%;
+  box-sizing: border-box;
+
+  &:focus {
+    border: 1px solid var(--color-main-active);
+  }
+
+  &[readonly]{
+    cursor: not-allowed;
+    opacity: .7;
+  }
+}
+
 
 ::-webkit-scrollbar {
   width: 8rem;
@@ -87,7 +112,7 @@ footer {
   cursor: pointer;
 }
 
-.pointer{
+.pointer {
   cursor: pointer;
 }
 

src/components/Practice/AddArticle.vue

@@ -1272,25 +1272,25 @@ watch(() => article.translateType, () => {
           <div class="title">原文</div>
           <div class="item">
             <div class="label">标题：</div>
-            <el-input
+            <textarea
                 v-model="article.title"
-                :rows="2"
                 type="textarea"
+                class="base-textarea"
                 placeholder="请填写原文标题"
-                input-style="color:black;font-size:18rem;"
-            />
+            >
+            </textarea>
           </div>
-          <div class="item">
+          <div class="item basic">
             <div class="label">正文：</div>
-            <el-input
+            <textarea
                 v-model="article.article"
                 @input="updateSentenceTranslate"
-                :disabled="![100,0].includes(progress)"
-                :rows="23"
+                :readonly="![100,0].includes(progress)"
                 type="textarea"
+                class="base-textarea"
                 placeholder="请填写原文正文"
-                input-style="color:black;font-size:18rem;"
-            />
+            >
+            </textarea>
           </div>
         </div>
         <div class="row">
@@ -1303,15 +1303,15 @@ watch(() => article.translateType, () => {
                 <el-radio-button :label="1">本地翻译</el-radio-button>
               </el-radio-group>
             </div>
-            <el-input
+            <textarea
                 v-model="article.titleTranslate"
-                :rows="2"
                 type="textarea"
+                class="base-textarea"
                 placeholder="请填写翻译标题"
-                input-style="color:black;font-size:18rem;"
-            />
+            >
+            </textarea>
           </div>
-          <div class="item">
+          <div class="item basic">
             <div class="label">
               <span>正文：</span>
               <div class="translate-item" v-if="!article.translateType">
@@ -1339,27 +1339,27 @@ watch(() => article.translateType, () => {
 
               </div>
             </div>
-            <el-input
+            <textarea
                 v-if="article.translateType"
                 v-model="article.customTranslate"
-                :disabled="![100,0].includes(progress)"
+                :readonly="![100,0].includes(progress)"
                 @blur="onBlur"
                 @focus="onFocus"
-                :rows="23"
                 type="textarea"
+                class="base-textarea"
                 placeholder="请填写翻译正文"
-                input-style="color:black;font-size:18rem;"
-            />
-            <el-input
+            >
+            </textarea>
+            <textarea
                 v-else
                 v-model="article.networkTranslate"
                 @blur="onBlur"
                 @focus="onFocus"
-                :rows="23"
                 type="textarea"
+                class="base-textarea"
                 placeholder="等待网络翻译中..."
-                input-style="color:black;font-size:18rem;"
-            />
+            >
+            </textarea>
           </div>
         </div>
         <div class="row">
@@ -1414,16 +1414,23 @@ watch(() => article.translateType, () => {
     width: 100%;
     height: 100%;
     display: flex;
-    gap: $space * 2;
+    gap: $space;
   }
 
   .row {
+    flex: 1;
     width: 33%;
-    height: 100%;
+    //height: 100%;
     display: flex;
     flex-direction: column;
     //opacity: 0;
 
+    .basic {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+    }
+
     &:nth-child(2) {
       opacity: 1;
     }
@@ -1434,13 +1441,15 @@ watch(() => article.translateType, () => {
     }
 
     .item {
+      width: 100%;
       //margin-bottom: 10rem;
 
       .label {
-        height: 40rem;
+        height: 45rem;
         display: flex;
         justify-content: space-between;
         align-items: center;
+        font-size: 16rem;
       }
     }