Просмотр исходного кода

style: 统一加载动画和表单元素的橙色主题样式

- 为加载动画和文字添加橙色主题
- 为表单元素添加聚焦时的橙色边框
- 为课程名称按钮添加橙色背景和边框样式
lsc 19 часов назад
Родитель
Сommit
e970ee47c2

+ 8 - 0
src/App.vue

@@ -575,4 +575,12 @@ html::-webkit-scrollbar-thumb {
 .filter-item-option.selected{
   color: #ff9300;
 }
+
+.loadingColor .el-loading-spinner .path {
+  stroke: #FF9500 !important;  /* 橙色加载动画 */
+}
+
+.loadingColor .el-loading-spinner .el-loading-text {
+  color: #FF9500 !important;  /* 橙色文字 */
+}
 </style>

+ 15 - 4
src/components/pages/pptEasy/addCourse3.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="pb_content" style="background: #F0F2F5;" v-loading.fullscreen.lock="uploadWorkLoading">
+  <div class="pb_content loadingColor" style="background: #F0F2F5;" v-loading.fullscreen.lock="uploadWorkLoading">
     <confirm-dialog
       :visible.sync="confirmVisible"
       :title="confirmTitle"
@@ -446,7 +446,7 @@
               </div>
             </div>
           </div>
-          <div class="image-grid" v-loading="imageloading">
+          <div class="image-grid loadingColor" v-loading="imageloading">
             <div class="picNone" v-if="!imageList.length && !imageloading">
               {{ lang.ssEnterKeywordSearch }}
             </div>
@@ -682,7 +682,7 @@
       </span>
     </el-dialog>
     <el-dialog :title="lang.ssAddH5" :visible.sync="dialogVisible7" :append-to-body="true" width="500px"
-      :before-close="handleClose" class="dialog_diy lineCss" v-loading="isAddOrUpdateLineLoading">
+      :before-close="handleClose" class="dialog_diy lineCss loadingColor" v-loading="isAddOrUpdateLineLoading">
       <el-form>
         <el-form-item :label="lang.ssTitle" :label-width="formLabelWidth" v-show="false">
           <span>
@@ -878,7 +878,7 @@
               <div class="form-row">
                 <div class="form-item" style="flex: 1;">
                   <label class="form-label">{{ lang.ssCourseCover }}</label>
-                  <div class="cover-upload-area" v-loading="avatar_loading">
+                  <div class="cover-upload-area loadingColor" v-loading="avatar_loading">
                     <div class="cover-placeholder" v-if="!cover.length">
                       <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
                         <g id="Component 2">
@@ -3549,6 +3549,7 @@ export default {
 </script>
 
 <style scoped>
+
 .dialog_diy>>>.el-dialog__header {
   background: #3c3c3c !important;
   padding: 15px 20px;
@@ -5108,6 +5109,16 @@ export default {
   cursor: pointer;
   transition: color 0.3s;
   font-size: 18px;
+  background-color: #fff8f0;
+  border: 1px solid #f89a3d;
+  width: fit-content;
+  margin: 0 auto;
+  height: 40px;
+  line-height: 40px;
+  outline: 0;
+  padding: 0 15px;
+  border-radius: 4px;
+  box-sizing: border-box;
 }
 
 .course-name-text:hover {

+ 11 - 7
src/components/pages/pptEasy/dialog/appDialog.vue

@@ -13,26 +13,26 @@
           <div class="ac_h_bottom">
             <div class="ac_h_b_selectList">
               <div>
-                <el-select v-model="selectJuri" :placeholder="lang.ssSelectScope" @change="changeSelectType"
+                <el-select class="tagS" v-model="selectJuri" :placeholder="lang.ssSelectScope" @change="changeSelectType"
                   style="width: 120px;margin-right: 10px;">
-                  <el-option v-for="item in selectList" :key="item.index" :label="item.label"
+                  <el-option class="tagOption" v-for="item in selectList" :key="item.index" :label="item.label"
                     :value="item.index"></el-option>
                 </el-select>
-                <el-select v-model="selectLabel" :placeholder="lang.ssSelectType" @change="changeSelectType"
+                <el-select class="tagS" v-model="selectLabel" :placeholder="lang.ssSelectType" @change="changeSelectType"
                   style="width: 110px;margin-right: 10px;">
-                  <el-option v-for="item in labelSelect" :key="item.value" :label="item.label"
+                  <el-option class="tagOption" v-for="item in labelSelect" :key="item.value" :label="item.label"
                     :value="item.value"></el-option>
                 </el-select>
 
-                <el-select v-model="statusType" :placeholder="lang.ssSelectStatus" @change="changeSelectType"
+                <el-select class="tagS" v-model="statusType" :placeholder="lang.ssSelectStatus" @change="changeSelectType"
                   style="width: 110px;margin-right: 10px;">
-                  <el-option v-for="item in statusList" :key="item.value" :label="item.label"
+                  <el-option class="tagOption" v-for="item in statusList" :key="item.value" :label="item.label"
                     :value="item.value"></el-option>
                 </el-select>
               </div>
 
               <div>
-                <el-input v-model="searchText" style="width: 250px;margin-right: 10px;"
+                <el-input class="tagS" v-model="searchText" style="width: 250px;margin-right: 10px;"
                   :placeholder="lang.ssEnterAppName" @keyup.enter.native="getData">
                   <i slot="suffix" class="searchInputIcon el-icon-search" @click="getData"></i>
                 </el-input>
@@ -883,4 +883,8 @@ export default {
 .checkActive {
   border: 2px solid #FF9400
 }
+
+.tagS >>>.el-input__inner:focus {
+  border-color: #ef9e28;
+}
 </style>