Jelajahi Sumber

style(textbox): 优化字体选择下拉框样式

- 添加 font-select 类选择器样式定义
- 为选中项设置灰色背景突出显示
- 为选项容器添加 flex 布局和内边距
- 调整图片显示容器的样式结构
panqiuyao 5 hari lalu
induk
melakukan
ca843fc3b1

+ 5 - 1
frontend/src/styles/index.scss

@@ -31,4 +31,8 @@
     pointer-events:none;
     opacity: .6;
   }
-}
+}
+
+.font-select .el-select-dropdown__item.selected {
+  background: #e0e0e0 !important;
+}

+ 4 - 3
frontend/src/views/components/PictureEditor/mixin/edit/module/textbox.js

@@ -39,14 +39,15 @@ const textbox = () => {
                   class="mar-left-5"
                   placeholder="请选择"
                   @change="setFontFamily"
+                  popper-class="font-select"
                   size="small"
                 >
                   <el-option
                     v-for="item in options"
-                    :key="item.name"
-                    :label="item.name"
+                    :key="item.localFile"
+                    :label="item.localFile"
                     :value="item.name">
-                    <img :src="item.thumbnail" style="max-width: 80%; height: 24px;">
+                    <div class="flex left pad-5"><img :src="item.thumbnail" style="max-width: 80%; height: 24px;"></div>
                   </el-option>
                 </el-select>
               </div>