表格列宽调整显示宽度 课文工具栏下移

src/views/book/courseware/create/components/question/article/Article.vue

@@ -3,70 +3,6 @@
     <template #content>
       <!-- eslint-disable max-len -->
       <div v-loading="loading" class="article-wrapper">
-        <div class="table-rich-toolbar" v-if="articleAttrib">
-          <el-select
-            v-model="articleAttrib.font"
-            placeholder="请选择"
-            style="width: 130px"
-            @change="handleChangeStyles"
-          >
-            <el-option v-for="{ value, label } in fontFamilyList" :key="value" :label="label" :value="value" />
-          </el-select>
-          <el-select
-            v-model="articleAttrib.font_size"
-            placeholder="请选择"
-            style="width: 130px"
-            @change="data.unified_attrib.font_size = articleAttrib.font_size"
-          >
-            <el-option
-              v-for="(value, index) in 16"
-              :key="index"
-              :label="6 + value * 2 + 'pt'"
-              :value="6 + value * 2 + 'pt'"
-            />
-          </el-select>
-          <el-form :model="articleAttrib" inline>
-            <el-form-item label="文字颜色">
-              <el-color-picker v-model="articleAttrib.text_color" @change="handleChangeStyles" />
-            </el-form-item>
-          </el-form>
-          <span :class="[data.other_attrib.isUnderline ? 'active' : '']" @click="setActiveTextStyle('underline')">
-            <SvgIcon icon-class="underline" size="20" />
-          </span>
-          <span :class="[data.other_attrib.isBold ? 'active' : '']" @click="setActiveTextStyle('bold')">
-            <SvgIcon icon-class="font-bold" size="20" />
-          </span>
-          <!-- <span
-            :class="[data.other_attrib.isItalic ? 'active' : '']"
-            @click="data.other_attrib.isItalic = !data.other_attrib.isItalic"
-          >
-            <SvgIcon icon-class="font-italic" size="20" />
-          </span> -->
-          <span
-            :class="[data.other_attrib.isStrikethrough ? 'active' : '']"
-            @click="setActiveTextStyle('line-through')"
-          >
-            <SvgIcon icon-class="strikethrough" size="20" />
-          </span>
-          <span :class="[data.other_attrib.border === 'dotted' ? 'active' : '']">
-            <SvgIcon icon-class="borderDotted" title="下划虚线" size="16" @click="setActiveTextStyle('border')" />
-          </span>
-          <span :class="[articleAttrib.align === 'LEFT' ? 'active' : '']" @click="setActiveTextStyle('align', 'LEFT')">
-            <SvgIcon icon-class="align-left" size="20" />
-          </span>
-          <span
-            :class="[articleAttrib.align === 'MIDDLE' ? 'active' : '']"
-            @click="setActiveTextStyle('align', 'MIDDLE')"
-          >
-            <SvgIcon icon-class="align-center" size="20" />
-          </span>
-          <span
-            :class="[articleAttrib.align === 'RIGHT' ? 'active' : '']"
-            @click="setActiveTextStyle('align', 'RIGHT')"
-          >
-            <SvgIcon icon-class="align-right" size="20" />
-          </span>
-        </div>
         <el-input v-model="data.content" placeholder="输入" type="textarea" />
 
         <span class="tips">输入课文文本后，请先点击生成分词</span>
@@ -126,6 +62,73 @@
               <a @click="picArticle">上传视频</a>
             </div>
           </div>
+          <div class="table-rich-toolbar" v-if="articleAttrib">
+            <el-select
+              v-model="articleAttrib.font"
+              placeholder="请选择"
+              style="width: 130px"
+              @change="handleChangeStyles"
+            >
+              <el-option v-for="{ value, label } in fontFamilyList" :key="value" :label="label" :value="value" />
+            </el-select>
+            <el-select
+              v-model="articleAttrib.font_size"
+              placeholder="请选择"
+              style="width: 130px"
+              @change="data.unified_attrib.font_size = articleAttrib.font_size"
+            >
+              <el-option
+                v-for="(value, index) in 16"
+                :key="index"
+                :label="6 + value * 2 + 'pt'"
+                :value="6 + value * 2 + 'pt'"
+              />
+            </el-select>
+            <el-form :model="articleAttrib" inline>
+              <el-form-item label="文字颜色">
+                <el-color-picker v-model="articleAttrib.text_color" @change="handleChangeStyles" />
+              </el-form-item>
+            </el-form>
+            <span :class="[data.other_attrib.isUnderline ? 'active' : '']" @click="setActiveTextStyle('underline')">
+              <SvgIcon icon-class="underline" size="20" />
+            </span>
+            <span :class="[data.other_attrib.isBold ? 'active' : '']" @click="setActiveTextStyle('bold')">
+              <SvgIcon icon-class="font-bold" size="20" />
+            </span>
+            <!-- <span
+            :class="[data.other_attrib.isItalic ? 'active' : '']"
+            @click="data.other_attrib.isItalic = !data.other_attrib.isItalic"
+          >
+            <SvgIcon icon-class="font-italic" size="20" />
+          </span> -->
+            <span
+              :class="[data.other_attrib.isStrikethrough ? 'active' : '']"
+              @click="setActiveTextStyle('line-through')"
+            >
+              <SvgIcon icon-class="strikethrough" size="20" />
+            </span>
+            <span :class="[data.other_attrib.border === 'dotted' ? 'active' : '']">
+              <SvgIcon icon-class="borderDotted" title="下划虚线" size="16" @click="setActiveTextStyle('border')" />
+            </span>
+            <span
+              :class="[articleAttrib.align === 'LEFT' ? 'active' : '']"
+              @click="setActiveTextStyle('align', 'LEFT')"
+            >
+              <SvgIcon icon-class="align-left" size="20" />
+            </span>
+            <span
+              :class="[articleAttrib.align === 'MIDDLE' ? 'active' : '']"
+              @click="setActiveTextStyle('align', 'MIDDLE')"
+            >
+              <SvgIcon icon-class="align-center" size="20" />
+            </span>
+            <span
+              :class="[articleAttrib.align === 'RIGHT' ? 'active' : '']"
+              @click="setActiveTextStyle('align', 'RIGHT')"
+            >
+              <SvgIcon icon-class="align-right" size="20" />
+            </span>
+          </div>
         </template>
 
         <!-- <div v-if="data.content" class="btn-box">
@@ -151,6 +154,7 @@
           />
         </div> -->
       </div>
+
       <template v-if="data.detail.length > 0">
         <el-divider content-position="left"
           >预览效果<el-button
@@ -1656,7 +1660,6 @@ export default {
 .table-rich-toolbar {
   display: flex;
   gap: 5px;
-  padding: 5px 0;
 
   /* align-items: center; */
 

src/views/book/courseware/create/components/question/table/Table.vue

@@ -130,7 +130,7 @@
           <div v-for="(value, index) in data.col_width" :key="index" class="table-item table-items">
             <el-color-picker v-model="data.cols_bg_list[index]" />
             <el-input v-model="value.value">
-              <template slot="prepend">列宽：</template><template slot="append">%</template></el-input
+              <template slot="prepend">列宽</template><template slot="append">%</template></el-input
             >
           </div>
         </div>
@@ -708,4 +708,9 @@ export default {
   font-size: 12px;
   color: #999;
 }
+
+:deep .el-input-group--append .el-input__inner {
+  padding: 0;
+  text-align: center;
+}
 </style>