From 8a698c3f2175f5bc97a103502cbc49bfdafc038c Mon Sep 17 00:00:00 2001
From: zq <136432190602163.com>
Date: Fri, 26 Dec 2025 18:38:28 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BB=84=E4=BB=B6=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 examples/src/App.vue                 |   2 +-
 packages/GroupFormBtns/src/index.vue |  13 +-
 packages/GuipInput/src/index.vue     | 188 ++++----
 packages/GuipRadio/src/index.vue     |  82 +++-
 packages/GuipSelect/src/index.vue    | 116 +++--
 packages/assets/uploadIcon.svg       |   1 +
 packages/assets/uploadIcon_light.svg |   1 +
 packages/styles/common.scss          | 801 ++++++++++++++++++++++++++---------
 8 files changed, 877 insertions(+), 327 deletions(-)
 create mode 100644 packages/assets/uploadIcon.svg
 create mode 100644 packages/assets/uploadIcon_light.svg

diff --git a/examples/src/App.vue b/examples/src/App.vue
index d076b93..2b91165 100644
--- a/examples/src/App.vue
+++ b/examples/src/App.vue
@@ -4,7 +4,7 @@
       <!-- 当前示例项目未配置路由相关信息--暂时注释 -->
       <!-- <Breadcrumb /> -->
 
-      <section class="demo-section">
+      <section class="demo-section column gap12">
         <h2>页面提示框集合</h2>
         <PromptText text='这是一个提示框' :type="1" />
         <PromptText text='这是一个提示框' :type="2" />
diff --git a/packages/GroupFormBtns/src/index.vue b/packages/GroupFormBtns/src/index.vue
index f7ab489..103b7db 100644
--- a/packages/GroupFormBtns/src/index.vue
+++ b/packages/GroupFormBtns/src/index.vue
@@ -1,9 +1,7 @@
-
-
 <template>
-    <div class="btns-wrap flex">
-        <GuipButton type="ignore" @click="cancelClick">取消</GuipButton>
-        <GuipButton type="primary" @click="confirmClick">保存</GuipButton>
+    <div class="btns-wrap flex" :class="flex == 'start' ? 'flex-start' :''">
+        <GuipButton type="ignore" @click="cancelClick">{{cancelText || '取消'}}</GuipButton>
+        <GuipButton type="primary" @click="confirmClick">{{confirmText ||'保存'}}</GuipButton>
     </div>
 </template>
 <script>
@@ -11,7 +9,7 @@ import GuipButton from '../../GuipButton/src/index.vue';
 
 export default {
     name: 'GroupFormBtns',
-    props: [''],
+    props: ['cancelText','confirmText','flex'],
     components: {
         GuipButton
     },
@@ -35,4 +33,7 @@ export default {
     margin-top: 24px;
     justify-content: flex-end;
 }
+.flex-start{
+    justify-content: flex-start;
+}
 </style>
\ No newline at end of file
diff --git a/packages/GuipInput/src/index.vue b/packages/GuipInput/src/index.vue
index 4370349..afca619 100644
--- a/packages/GuipInput/src/index.vue
+++ b/packages/GuipInput/src/index.vue
@@ -1,44 +1,104 @@
 <template>
-  <el-form-item :style="{ ...styleObject }" :required="required"
-    :class="[{ 'column': column }, { 'w510': addClass == 'w510' }, { 'w388': addClass == 'w388' }, 'form-item']" :label="label"
-    :prop="prop" :rules="rules">
+  <el-form-item 
+    :style="{ ...styleObject}" 
+    :required="required"
+    :class="[
+      { 'column': column }, 
+      { 'w510': addClass == 'w510' }, 
+      { 'w388': addClass == 'w388' }, 
+      { 'client-form-flex': clientFormFlex }, 
+      'form-item'
+    ]" 
+    :label="clientFormFlex ? '' : label" 
+    :prop="prop" 
+    :rules="rules"
+  >
     <p v-if="desc" class="desc_right">{{ desc }}</p>
-    <el-input :type="type" v-bind="$attrs" :placeholder="placeholder1" :disabled="disabled" :maxlength="maxlength1"
-      :style="{ width: width, height: height }" :value="inputValue" :minLength="minLength1" :show-word-limit="showWordLimit"
-      @input="$emit('input', $event)" @keydown="handleKeydown" @change="$emit('change', $event)"
-      @blur="$emit('blur', inputValue)" @focus="$emit('focus', inputValue)" class="guip-input">
-      <!-- 自定义前面小图标 -->
-      <template v-slot:prepend>
-        <slot name="prependshow"></slot>
-      </template>
-      <template v-slot:prefix>
-        <slot name="prefix"></slot>
-      </template>
-      <!-- 清除小图标 -->
-      <template v-slot:suffix>
-        <slot name="suffix"></slot>
-      </template>
-      <template v-slot:append>
-        <slot name="appendshow"></slot>
-      </template>
-
-      <!-- :error="errorMessage" show-message -->
-
-      <!-- <i slot="suffix" v-if="empty" class="el-icon-close" @click="handleClear">h</i> -->
-      <!-- <el-button slot="append" v-if="hasBtn"  type="primary" @click="$emit('enter',value)">搜索</el-button> -->
-    </el-input>
-    <!-- 单位 -->
-    <span class="guip-input-unit" v-if="unit">{{ unit }}</span>
+    
+    <!-- 统一的输入框渲染 -->
+    <div :class="clientFormFlex ? 'client-form-flex-wrapper' : ''" style="width:100%">
+      <!-- 特殊样式布局的标签 -->
+      <div v-if="clientFormFlex" class="flex-label">
+        <div class="label-text">{{ clientFormLabel || label }}</div>
+        <span class="colon">：</span>
+      </div>
+      
+      <!-- 输入框容器 -->
+      <div :class="clientFormFlex ? 'flex-input' : ''">
+        <el-input
+          ref="inputRef"
+          :type="type"
+          v-bind="$attrs"
+          :placeholder="placeholder1"
+          :disabled="disabled"
+          :maxlength="maxlength1"
+          :style="{ width: width, height: height }"
+          :value="inputValue"
+          :minLength="minLength1"
+          :show-word-limit="showWordLimit"
+          @input="$emit('input', $event)"
+          @keydown="handleKeydown"
+          @change="$emit('change', $event)"
+          @blur="$emit('blur', inputValue)"
+          @focus="$emit('focus', inputValue)"
+        >
+          <template v-slot:prepend>
+            <slot name="prependshow"></slot>
+          </template>
+          <template v-slot:prefix>
+            <slot name="prefix"></slot>
+          </template>
+          <template v-slot:suffix>
+            <slot name="suffix"></slot>
+          </template>
+          <template v-slot:append>
+            <slot name="appendshow"></slot>
+          </template>
+        </el-input>
+        <!-- 单位 -->
+        <span class="unit" v-if="unit">{{ unit }}</span>
+      </div>
+    </div>
   </el-form-item>
-
 </template>
-
 <script>
 export default {
   name: 'GuipInput',
-  props: ['value', 'styleObject', 'disabled', 'defaultValue', 'placeholder','required',
-    'maxlength', 'minLength', 'clear', 'width', 'height', 'showWordLimit',
-    'label', 'type', 'prop', 'rules', 'column', 'addClass', 'desc', 'unit'],
+  props: {
+    value: [String, Number],
+    styleObject: Object,
+    disabled: Boolean,
+    defaultValue: [String, Number],
+    placeholder: String,
+    required: Boolean,
+    maxlength: [String, Number],
+    minLength: [String, Number],
+    clear: Boolean,
+    width: String,
+    height: String,
+    showWordLimit: Boolean,
+    label: String,
+    type: {
+      type: String,
+      default: 'text'
+    },
+    prop: String,
+    rules: [Object, Array],
+    column: Boolean,
+    addClass: String,
+    desc: String,
+    unit: String,
+    // 新增：控制特殊样式
+    clientFormFlex: {
+      type: Boolean,
+      default: false
+    },
+    // 新增：特殊样式时的自定义标签文本（可选）
+    clientFormLabel: {
+      type: String,
+      default: ''
+    }
+  },
   data() {
     return {
       inputValue: this.value || this.defaultValue,
@@ -51,35 +111,23 @@ export default {
       placeholder1: ''
     }
   },
-  watch: { // 监听外部传来的 value prop 的变化，以便同步到内部状态 inputValue 上（可选）
-    // defaultValue(newVal) {
-    //   console.log(newVal,'newVal');
-    //   this.inputValue = newVal;
-    // },
+  watch: {
     value(newVal) {
       this.inputValue = newVal;
     },
     defaultValue(newVal) {
-      // 如果没有value但有defaultValue变化时更新
       if (!this.value && newVal !== this.inputValue) {
         this.inputValue = newVal;
       }
     }
   },
   created() {
-    // 默认值赋值
-    // if (this.defaultValue != null) {
-    //   this.inputValue = this.defaultValue;
-    // }
-    // 默认提示语
     if (this.placeholder) {
       this.placeholder1 = this.placeholder;
     }
-    // 默认提示语
     if (this.maxlength) {
       this.maxlength1 = this.maxlength;
     }
-    // 默认提示语
     if (this.minLength) {
       this.minLength1 = this.minLength;
     }
@@ -94,46 +142,24 @@ export default {
         item.onmouseout = function () {
           item.classList.remove("hoverclass")
         }
-        // item.addEventListener('mouseover',function(){
-        //   console.log('滑过');
-        //   item.classList.add("hoverclass")
-        // })
-        // item.addEventListener('mouseoout',function(){
-        //   console.log('滑出');
-        //   item.classList.remove("hoverclass")
-        // })
-        // item.addEventListener('mouseoenter',function(){
-        //   console.log('滑---');
-        //   item.classList.add("hoverclass")
-        // })
-        // item.addEventListener('mouseoleave',function(){
-        //   console.log('滑出');
-        //   item.classList.remove("hoverclass")
-        // })
       })
-      // console.log(el,'====9999');
-      // if(els&& this.styleObject){
-      //   for(var key in this.styleObject){
-      //     els.style[key] = this.styleObject[key]
-      //   }
-      // }
     })
   },
   methods: {
-    // input 事件
-    // changeInput(event){
-    //   this.$emit('input', event);
-    // }
-    // handleClear(){
-    //   console.log('清除---');
-    //   this.$emit('clear', '清楚逻辑')
-    // }
     handleKeydown(e) {
       console.log(e);
-      // if (e.key === '1') {
-      e.preventDefault(); // 阻止默认行为
-      // }
+      e.preventDefault();
     },
   }
 }
-</script>
\ No newline at end of file
+</script>
+
+<style lang="scss" scoped>
+.unit {
+  position: absolute;
+  right: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+  pointer-events: none;
+}
+</style>
\ No newline at end of file
diff --git a/packages/GuipRadio/src/index.vue b/packages/GuipRadio/src/index.vue
index 1e00dbc..009ae9f 100644
--- a/packages/GuipRadio/src/index.vue
+++ b/packages/GuipRadio/src/index.vue
@@ -1,18 +1,48 @@
 <template>
-  <el-form-item :class="[{ 'column': column }, 'form-item']" :label="label" :prop="prop" :rules="rules"
-    :required="required">
-    <el-radio-group v-model="selectedValue" v-bind="$attrs" @change="handleChange">
-      <el-radio v-for="(optionValue, optionKey) in normalizedOptions" :key="optionKey"
-        :label="getValue(optionValue)" :disabled="isDisabled(optionValue[valueKey])">
-        {{ getLabel(optionValue) }}
-      </el-radio>
-    </el-radio-group>
+  <el-form-item 
+    :class="[
+      { 'column': column }, 
+      { 'client-form-flex': clientFormFlex }, 
+      'form-item'
+    ]" 
+    :label="clientFormFlex ? '' : label" 
+    :prop="prop" 
+    :rules="rules" 
+    :required="required"
+  >
+    <!-- 统一的单选组渲染 -->
+    <div :class="clientFormFlex ? 'client-form-flex-wrapper' : ''" style="width:100%">
+      <!-- 特殊样式布局的标签 -->
+      <div v-if="clientFormFlex" class="flex-label">
+        <div class="label-text">{{ clientFormLabel || label }}</div>
+        <span class="colon">：</span>
+      </div>
+      
+      <!-- 单选组容器 -->
+      <div :class="clientFormFlex ? 'flex-input' : ''">
+        <el-radio-group 
+          v-model="selectedValue" 
+          v-bind="$attrs" 
+          @change="handleChange"
+          class="radio-group-wrapper"
+        >
+          <el-radio 
+            v-for="(optionValue, optionKey) in normalizedOptions" 
+            :key="optionKey"
+            :label="getValue(optionValue)" 
+            :disabled="isDisabled(optionValue[valueKey])"
+          >
+            {{ getLabel(optionValue) }}
+          </el-radio>
+        </el-radio-group>
+      </div>
+    </div>
   </el-form-item>
 </template>
 
 <script>
 export default {
-  name: 'GuipRadio',
+  name: 'MyRadioGroup',
   props: {
     // 是否是纵向排列
     column: {
@@ -33,7 +63,6 @@ export default {
     // 3.null
     // 4.‘’
     options: {
-      // type: [Array, Object],
       default: () => null,
       validator: (value) => {
         // 自定义验证器，允许 null、数组或非空对象
@@ -82,13 +111,23 @@ export default {
     disabledKeys: {
       type: Array,
       default: () => []
+    },
+    // 新增：控制特殊样式
+    clientFormFlex: {
+      type: Boolean,
+      default: false
+    },
+    // 新增：特殊样式时的自定义标签文本（可选）
+    clientFormLabel: {
+      type: String,
+      default: ''
     }
   },
   computed: {
     // 统一处理数组和对象格式
     normalizedOptions() {
-       // 处理null或undefined、‘’情况
-       if (this.options == null || !this.options) {
+      // 处理null或undefined、‘’情况
+      if (this.options == null || !this.options) {
         return [];
       }
       
@@ -129,12 +168,10 @@ export default {
     },
     getLabel(option) {
       if (this.formatter) return this.formatter(option);
-
       // 处理对象格式的选项
       if (typeof option === 'object' && 'key' in option && 'value' in option) {
         return option.value;
       }
-
       // 当前选项是否选中
       const isSelected = this.getValue(option) === this.selectedValue;
       
@@ -142,7 +179,6 @@ export default {
       if (isSelected && option[this.selectedLabelKey]) {
         return option[this.selectedLabelKey];
       }
-
       // 明确检查 labelKey 是否存在
       if (typeof option === 'object' && this.labelKey in option) {
         return option[this.labelKey];
@@ -154,7 +190,6 @@ export default {
       if (typeof option === 'object' && 'key' in option && 'value' in option) {
         return option.key;
       }
-
       // 明确检查 valueKey 是否存在
       if (typeof option === 'object' && this.valueKey in option) {
         return option[this.valueKey];
@@ -169,9 +204,18 @@ export default {
 };
 </script>
 
-<style scoped>
-/* 自定义样式 */
-.el-radio-group {
+<style scoped lang="scss">
+/* 原有样式 */
+.radio-group-wrapper {
   margin: 10px 0;
+  display: flex;
+  justify-content: flex-start;
+  gap: 20px 24px;
+  flex-wrap: wrap;
+  
+  // 当在特殊样式布局中时，可能需要调整样式
+  .client-form-flex & {
+    flex: 1;
+  }
 }
 </style>
\ No newline at end of file
diff --git a/packages/GuipSelect/src/index.vue b/packages/GuipSelect/src/index.vue
index e43a309..01ac97f 100644
--- a/packages/GuipSelect/src/index.vue
+++ b/packages/GuipSelect/src/index.vue
@@ -1,14 +1,49 @@
 <template>
-  <el-form-item :style="{ ...style, height: height, ...styleObject }" :required="required"
-    :class="[{ 'column': column }, { 'w510': addClass == 'w510' }, { 'w388': addClass == 'w388' }, 'form-item']"
-    :label="label" :prop="prop" :rules="rules">
+  <el-form-item 
+    :style="{ ...style, height: height, ...styleObject }" 
+    :required="required"
+    :class="[
+      { 'column': column }, 
+      { 'w510': addClass == 'w510' }, 
+      { 'w388': addClass == 'w388' }, 
+      { 'client-form-flex': clientFormFlex }, 
+      'form-item'
+    ]"
+    :label="clientFormFlex ? '' : label" 
+    :prop="prop" 
+    :rules="rules"
+  >
     <p v-if="desc" class="desc_right">{{ desc }}</p>
-    <el-select :style="{ width: width }" :placeholder="placeholder1" @change="handleChange" v-model="selectedValue"
-      v-bind="$attrs">
-      <el-option v-for="item in processedOptions" :key="getItemValue(item)" :label="getItemLabel(item)"
-        :disabled="item.disabled" :value="getItemValue(item)">
-      </el-option>
-    </el-select>
+    
+    <!-- 统一的选择框渲染 -->
+    <div :class="clientFormFlex ? 'client-form-flex-wrapper' : ''" style="width:100%">
+      <!-- 特殊样式布局的标签 -->
+      <div v-if="clientFormFlex" class="flex-label">
+        <div class="label-text">{{ clientFormLabel || label }}</div>
+        <span class="colon">：</span>
+      </div>
+      
+      <!-- 选择框容器 -->
+      <div :class="clientFormFlex ? 'flex-input' : ''">
+        <el-select 
+          ref="selectRef"
+          :style="{ width: width }" 
+          :placeholder="placeholder1" 
+          @change="handleChange" 
+          v-model="selectedValue"
+          v-bind="$attrs"
+        >
+          <el-option 
+            v-for="item in processedOptions" 
+            :key="getItemValue(item)" 
+            :label="getItemLabel(item)"
+            :disabled="item.disabled" 
+            :value="getItemValue(item)"
+          >
+          </el-option>
+        </el-select>
+      </div>
+    </div>
   </el-form-item>
 </template>
 
@@ -18,7 +53,7 @@ export default {
   props: {
     value: [String, Number, Array],
     options: {
-      type: [Array,Object],
+      type: [Array, Object],
       default: () => []
     },
     // 新增配置字段
@@ -30,7 +65,7 @@ export default {
       type: String,
       default: 'label'
     },
-     // 新增动态添加项的配置
+    // 新增动态添加项的配置
     extraItem: {
       type: Object,
       default: null
@@ -48,7 +83,17 @@ export default {
     rules: [Object, Array],
     column: Boolean,
     addClass: String,
-    desc: String
+    desc: String,
+    // 新增：控制特殊样式
+    clientFormFlex: {
+      type: Boolean,
+      default: false
+    },
+    // 新增：特殊样式时的自定义标签文本（可选）
+    clientFormLabel: {
+      type: String,
+      default: ''
+    }
   },
   data() {
     return {
@@ -61,9 +106,10 @@ export default {
     processedOptions() {
       // 处理options为空的情况
       let options = this.options || [];
-      // 如果是 [1,12,22] 格式
-      if (Array.isArray(options) && options.every(item => typeof item !== 'object')) {
-        return options.map((item, index) => ({
+      
+      // 如果是 [1,12,22] 格式的简单数组
+      if (Array.isArray(options) && options.length > 0 && options.every(item => typeof item !== 'object')) {
+        options = options.map((item,index) => ({
           [this.valueKey]: index,
           [this.labelKey]: item
         }));
@@ -76,10 +122,15 @@ export default {
           [this.labelKey]: options[key]
         }));
       }
-
+      
+      // 确保 options 是数组
+      if (!Array.isArray(options)) {
+        options = [];
+      }
+      
       // 当extraItem存在且不是空对象时，添加到options数组开头
       if (this.extraItem && Object.keys(this.extraItem).length > 0) {
-        return [
+        options = [
           {
             [this.labelKey]: this.extraItem.label || '',
             [this.valueKey]: this.extraItem.value || '',
@@ -88,6 +139,7 @@ export default {
           ...options
         ];
       }
+      
       return options;
     }
   },
@@ -109,21 +161,15 @@ export default {
     if (this.value !== undefined && this.value !== null) {
       this.selectedValue = this.value
     }
+    
     // 默认提示语
     if (this.placeholder) {
       this.placeholder1 = this.placeholder
     }
-    this.$nextTick(() => {
-      let els = document.querySelectorAll('.el-input');
-      els.forEach(item => {
-        item.onmouseover = function () {
-          item.classList.add("hoverclass")
-        }
-        item.onmouseout = function () {
-          item.classList.remove("hoverclass")
-        }
     
-      })
+    // 鼠标悬停效果
+    this.$nextTick(() => {
+      this.addHoverEffect();
     })
   },
   methods: {
@@ -131,13 +177,29 @@ export default {
     getItemValue(item) {
       return item[this.valueKey]
     },
+    
     // 获取label值
     getItemLabel(item) {
       return item[this.labelKey]
     },
+    
+    // 处理选择变化
     handleChange(value) {
       this.$emit('input', value)
       this.$emit('change', value)
+    },
+    
+    // 添加悬停效果
+    addHoverEffect() {
+      const els = document.querySelectorAll('.el-input');
+      els.forEach(item => {
+        item.onmouseover = function () {
+          item.classList.add("hoverclass")
+        }
+        item.onmouseout = function () {
+          item.classList.remove("hoverclass")
+        }
+      })
     }
   }
 }
diff --git a/packages/assets/uploadIcon.svg b/packages/assets/uploadIcon.svg
new file mode 100644
index 0000000..eb1fb8e
--- /dev/null
+++ b/packages/assets/uploadIcon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="20" height="16" viewBox="0 0 20 16"><defs><clipPath id="master_svg0_166_43602"><rect x="0" y="0" width="20" height="16" rx="0"/></clipPath></defs><g clip-path="url(#master_svg0_166_43602)"><g transform="matrix(1,0,0,-1,0,30.6875)"><g><path d="M4.5,15.34375Q2.59375,15.40625,1.3125,16.65625Q0.0625,17.9375,0,19.84375Q0.03125,21.34375,0.84375,22.46875Q1.65625,23.59375,3,24.09375Q3,24.21875,3,24.34375Q3.0625,26.46875,4.46875,27.87495Q5.875,29.28125,8,29.34375Q9.40625,29.31255,10.5312,28.65625Q11.6562,27.96875,12.3438,26.84375Q13.0625,27.34375,14,27.34375Q15.2812,27.31255,16.125,26.46875Q16.9688,25.62495,17,24.34375Q17,23.78125,16.8125,23.25Q18.1875,22.96875,19.0938,21.875Q19.9688,20.8125,20,19.34375Q19.9688,17.65625,18.8438,16.5Q17.6875,15.375,16,15.34375L4.5,15.34375ZM6.96875,22.125Q6.53125,21.59375,6.96875,21.0625Q7.5,20.625,8.03125,21.0625L9.25,22.28125L9.25,18.09375Q9.3125,17.40625,10,17.34375Q10.6875,17.40625,10.75,18.09375L10.75,22.28125L11.9688,21.0625Q12.5,20.625,13.0312,21.0625Q13.4688,21.59375,13.0312,22.125L10.5312,24.625Q10,25.0625,9.46875,24.625L6.96875,22.125Z" fill="#626573" fill-opacity="1"/></g></g></g></svg>
\ No newline at end of file
diff --git a/packages/assets/uploadIcon_light.svg b/packages/assets/uploadIcon_light.svg
new file mode 100644
index 0000000..bc6c369
--- /dev/null
+++ b/packages/assets/uploadIcon_light.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="20" height="16" viewBox="0 0 20 16"><defs><clipPath id="master_svg0_401_004793/89_47570"><rect x="0" y="0" width="20" height="16" rx="0"/></clipPath></defs><g clip-path="url(#master_svg0_401_004793/89_47570)"><g transform="matrix(1,0,0,-1,0,30.6875)"><g><path d="M4.5,15.34375Q2.59375,15.40625,1.3125,16.65625Q0.0625,17.9375,0,19.84375Q0.03125,21.34375,0.84375,22.46875Q1.65625,23.59375,3,24.09375Q3,24.21875,3,24.34375Q3.0625,26.46875,4.46875,27.87495Q5.875,29.28125,8,29.34375Q9.40625,29.31255,10.5312,28.65625Q11.6562,27.96875,12.3438,26.84375Q13.0625,27.34375,14,27.34375Q15.2812,27.31255,16.125,26.46875Q16.9688,25.62495,17,24.34375Q17,23.78125,16.8125,23.25Q18.1875,22.96875,19.0938,21.875Q19.9688,20.8125,20,19.34375Q19.9688,17.65625,18.8438,16.5Q17.6875,15.375,16,15.34375L4.5,15.34375ZM6.96875,22.125Q6.53125,21.59375,6.96875,21.0625Q7.5,20.625,8.03125,21.0625L9.25,22.28125L9.25,18.09375Q9.3125,17.40625,10,17.34375Q10.6875,17.40625,10.75,18.09375L10.75,22.28125L11.9688,21.0625Q12.5,20.625,13.0312,21.0625Q13.4688,21.59375,13.0312,22.125L10.5312,24.625Q10,25.0625,9.46875,24.625L6.96875,22.125Z" fill="#006AFF" fill-opacity="1"/></g></g></g></svg>
\ No newline at end of file
diff --git a/packages/styles/common.scss b/packages/styles/common.scss
index eff6859..7db504b 100644
--- a/packages/styles/common.scss
+++ b/packages/styles/common.scss
@@ -1,8 +1,14 @@
 html {
-    scroll-behavior: smooth; /* 使整个页面的滚动平滑 */
+    scroll-behavior: smooth;
+    /* 使整个页面的滚动平滑 */
+}
+:root {
+    --font-chinese: "Microsoft YaHei", "Microsoft YaHei UI", -apple-system, 
+      BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", 
+      "Helvetica Neue", Helvetica, Arial, sans-serif;
   }
 body {
-    font-family: Microsoft YaHei UI;
+    font-family: var(--font-chinese) !important;
     font-size: 14px;
     margin: 0;
     width: 100vw;
@@ -13,15 +19,21 @@ body {
         padding: 0;
     }
 }
+
+.homeFont {
+    font-size: 14px;
+}
+
 .short-width {
     width: calc((100% - 12px) / 2);
 }
-.pagePadding{
+
+.pagePadding {
     padding: 12px;
     box-sizing: border-box;
 }
-.pageTitle{
-    font-family: Microsoft YaHei UI;
+
+.pageTitle {
     font-size: 16px;
     font-weight: bold;
     line-height: normal;
@@ -30,8 +42,8 @@ body {
     text-align: left;
     // padding: 24px 0;
 }
-.littleTitle{
-    font-family: Microsoft YaHei UI;
+
+.littleTitle {
     font-size: 14px;
     font-weight: bold;
     line-height: normal;
@@ -39,108 +51,108 @@ body {
     color: #1E2226;
     text-align: left;
 }
-/* 隐藏全局滚动条 */
-/* 全局隐藏滚动条但排除el-table */
-// *:not(.el-table)::-webkit-scrollbar {
-//     display: none;
-//   }
-  
-//   body {
-//     scrollbar-width: none;
-//     -ms-overflow-style: none;
-//   }
-// .element {
-//     overflow: hidden; /* 通用方法 */
-//     scrollbar-width: none; /* Firefox */
-// }
- 
-/* 对于WebKit浏览器 */
-// .element::-webkit-scrollbar {
-//     display: none; /* Chrome, Safari, Edge */
-// }
 
-// .el-table__body-wrapper::-webkit-scrollbar {
-//     display: block !important;
-//     width: 6px;
-//     height: 6px;
-//   }
-//   .el-table__body-wrapper::-webkit-scrollbar-thumb {
-//     background: #c1c1c1;
-//     border-radius: 3px;
-//   }
-  
-.common_title{
+.common_title {
     font-weight: bold;
     letter-spacing: 0.08em;
     color: #1E2226;
     font-size: 14px;
 }
-.common_text{
+
+.common_text {
     font-size: 14px;
     color: #6B7280;
     font-weight: normal;
     letter-spacing: 0.08em;
 }
-.main-content12{
+
+.main-content12 {
     padding: 12px;
 }
+
 // 变小手
-.point{
+.point {
     cursor: pointer;
 }
+
 // 文字滑过变色
 .hoverCommon {
     cursor: pointer;
     transition: all .3s;
-    &:hover {
-      transition: all .3s;
-      color: #006AFF !important;
+
+    & > *:hover {
+        transition: all .3s;
+        color: #006AFF !important;
     }
-  }
-.gap10{
+}
+
+.gap10 {
     display: flex;
     gap: 10px;
 }
-.gap8{
+
+.gap8 {
     display: flex;
     gap: 8px;
 }
-.gap12{
+
+.gap12 {
     display: flex;
     gap: 12px;
 }
-.mt16{
+
+.gap20{
+    display: flex;
+    gap: 20px;
+}
+.gap24{
+    display: flex;
+    gap: 24px;
+}
+
+
+.mt16 {
     margin-top: 16px;
 }
-.mt32{
+
+.mt32 {
     margin-top: 32px;
 }
-.mb32{
+
+.mb32 {
     margin-bottom: 32px;
 }
-.hide{
+
+.hide {
     display: none !important;
 }
-.column{
+
+.column {
     display: flex;
     flex-direction: column;
 }
-.mb24{
+
+.mb24 {
     margin-bottom: 24px !important;
 }
-.mb12{
+
+.mb12 {
     margin-bottom: 12px !important;
 }
-.mt24{
+
+.mt24 {
     margin-top: 24px;
 }
-.mt12{
+
+.mt12 {
     margin-top: 12px;
 }
-.mt10{
+
+.mt10 {
     margin-top: 10px;
 }
-.ceshi{
+
+.ceshi {
     transition: all .5s;
     box-sizing: border-box;
     /* main/main_stardard */
@@ -148,14 +160,15 @@ body {
     /* 蓝色阴影_常规 */
     box-shadow: 0px 4px 16px 0px rgba(17, 55, 143, 0.12);
 }
+
 ::v-deep .el-radio__original {
-  display: none !important;
+    display: none !important;
 }
 
-.el-radio:focus:not(.is-focus):not(:active):not(.is-disabled)
-  .el-radio__inner {
-  box-shadow: none !important;
+.el-radio:focus:not(.is-focus):not(:active):not(.is-disabled) .el-radio__inner {
+    box-shadow: none !important;
 }
+
 .el-tabs__item.is-active {
     letter-spacing: 0.08em;
     /* main/main_stardard */
@@ -177,6 +190,7 @@ body {
     color: #626573;
     justify-content: center;
     transition: all .3s;
+
     // img{
     //     margin-right: 12px;
     // }
@@ -193,6 +207,7 @@ body {
 
     &:hover {
         transition: all .3s;
+
         div {
             background-image: url(../assets/addIcon_light.svg);
         }
@@ -201,22 +216,37 @@ body {
         color: #006AFF;
     }
 }
+
+.el-table__body-wrapper::-webkit-scrollbar {
+    display: block !important;
+    width: 6px;
+    height: 6px;
+  }
+  .el-table__body-wrapper::-webkit-scrollbar-thumb {
+    background: #c1c1c1;
+    border-radius: 3px;
+    transition: all .3s;
+    &:hover{
+        background: #6B7280;
+    }
+  }
+
 @keyframes fadeInOut {
     0% {
-      opacity: 0;
+        opacity: 0;
     }
+
     50% {
-      opacity: 1;
+        opacity: 1;
     }
+
     100% {
-      opacity: 0;
+        opacity: 0;
     }
-  }
-  
-.ellipsis{
-    
 }
 
+.ellipsis {}
+
 .el-container {
     height: 100%;
 
@@ -241,18 +271,22 @@ body {
     width: 84.75%;
     margin: 0 auto;
 }
+
 .min-flex-right {
     min-width: 1020px;
     // max-width: 1556px;
     width: 84.75%;
     margin: 0 auto;
-    .flex-common{
+
+    .flex-common {
+
         .flex-left,
         .flex-right {
             // min-width: 440px;
             max-width: 590px;
             flex: 1;
         }
+
         .flex-line {
             margin: 0 33px;
         }
@@ -269,33 +303,41 @@ body {
     /* text/text_4 */
     color: #8A9099;
 }
+
 // 颜色选择器
-.el-color-picker__trigger{
+.el-color-picker__trigger {
     padding: 0;
     border: none;
+
     // border: 1px solid #DFE2E6;
-    .el-color-picker__color{
+    .el-color-picker__color {
         border-color: #DFE2E6;
         border-radius: 4px;
     }
-    .el-color-picker__icon{
+
+    .el-color-picker__icon {
         display: none !important;
     }
-    .el-color-picker__color-inner{
+
+    .el-color-picker__color-inner {
         border-radius: 4px;
     }
 }
-.borderNone{
+
+.borderNone {
     border: none !important;
 }
+// 非论易排项目的样式
 .flex-common {
     padding: 32px 36px;
     background-color: #fff;
     border-radius: 4px;
+
     h3 {
         text-align: left;
         margin: 0 0 32px 0;
-        span{
+
+        span {
             margin-left: 12px;
             font-size: 14px;
             font-weight: normal;
@@ -321,14 +363,15 @@ body {
         max-width: 590px;
         flex: 1;
     }
-    .flex-left-desc{
+
+    .flex-left-desc {
         /* body/body 2_regular */
-        font-family: Microsoft YaHei UI;
+        
         font-size: 14px;
         font-weight: normal;
         line-height: normal;
         letter-spacing: 0.08em;
-        font-variation-settings: "opsz" auto;
+        font-variation-settings: "opsz"auto;
         /* text/text_1 */
         color: #1E2226;
         text-align: left;
@@ -364,7 +407,7 @@ body {
     border-radius: 2px;
     width: 96px;
     height: 38px;
-    font-family: Microsoft YaHei UI;
+    
     font-size: 14px;
     letter-spacing: 0.08em;
     display: flex;
@@ -374,43 +417,53 @@ body {
     background: #006AFF;
     color: #fff;
     transition: all .3s;
-    span{
+
+    span {
         display: flex;
         align-items: center;
     }
-    img{
+
+    img {
         margin-right: 6px;
     }
-    &:active{
+
+    &:active {
         opacity: 0.7;
     }
 }
-.el-button--superBig{
+
+.el-button--superBig {
     width: 388px;
     height: 46px;
     border-radius: 4px;
 }
-.el-button--big{
+
+.el-button--big {
     width: 247px;
     height: 46px;
     border-radius: 4px;
 }
-.el-button--page{
+
+.el-button--page {
     width: 144px;
     height: 46px;
     border-radius: 2px;
 }
-.el-button--table{
+
+.el-button--table {
     width: 90px;
     height: 32px;
     border-radius: 2px;
 }
-.el-button--form{
+
+.el-button--form {
     width: 88px;
     height: 33px;
     border-radius: 2px;
 }
-.el-button--primary,.el-button--normal{
+
+.el-button--primary,
+.el-button--normal {
     background: #006AFF;
     border: 1px solid #006AFF;
 }
@@ -419,43 +472,73 @@ body {
     color: #006AFF;
     background: #FFFFFF;
     border: 1px solid #006AFF;
-    &:hover{
+
+    &:hover {
         color: #006AFF;
         background: #F2F7FF;
         border: 1px solid #006AFF;
     }
 }
 
-.el-button--text,.el-button--grey {
+.el-button--often {
+    color: #006AFF;
+    background: #F2F7FF;
+    border: 1px solid transparent;
+
+    // &:hover {
+    //     color: #006AFF;
+    //     background: #F2F7FF;
+    //     border: 1px solid #006AFF;
+    // }
+}
+
+.el-button--text,
+.el-button--grey,
+.el-button--warn {
     padding: 0;
     color: #006AFF;
     width: auto !important;
     height: auto !important;
     border: none !important;
     background: transparent !important;
-    &:hover{
+
+    &:hover {
         color: #3388FF;
     }
 }
+
 .el-button--grey {
     color: #8A9099;
-    &:hover{
+
+    &:hover {
         color: #006AFF;
         opacity: 1;
     }
 }
-.el-button--ignore{
+
+.el-button--warn {
+    color: #FF4D4F;
+
+    &:hover {
+        color: #006AFF;
+        opacity: 1;
+    }
+}
+
+.el-button--ignore {
     color: #626573;
     background: #FFFFFF;
     border: 1px solid #DFE2E6;
-    &:hover{
+
+    &:hover {
         background: #FFFFFF;
         color: #006AFF;
         border: 1px solid #006AFF;
     }
 }
-.el-button--medium.is-disabled .el-button--ignore.is-disabled{
-    background: #F2F3F5 ;
+
+.el-button--medium.is-disabled .el-button--ignore.is-disabled {
+    background: #F2F3F5;
     border: 1px solid #F2F3F5;
     color: #626573;
 }
@@ -466,7 +549,6 @@ body {
 //     border: 1px solid #006AFF;
 //     color: #006AFF;
 // }
-
 // .el-button--primary,
 // .el-button--success,
 // .el-button--info,
@@ -474,45 +556,37 @@ body {
 // .el-button--danger {
 //     color: #fff !important;
 // }
-
 // .el-button--medium {
 //     //中等按钮
 //     width: 97px;
 //     height: 33px;
 //     font-size: 14px;
 //     line-height: 14px;
-
 //     span {
 //         height: 14px;
 //     }
-
 // }
-
 // .el-button--small {
 //     //小的按钮
 //     width: 80px;
 //     height: 32px;
 //     font-size: 12px;
 // }
-
 // .el-button--mini {
 //     //迷你按钮
 //     width: 80px;
 //     height: 28px;
 //     font-size: 12px;
 // }
-
 // .el-button--reverseMild {
 //     background: #E8F0FE;
 //     color: #006AFF;
 //     border: none;
 // }
-
 // .el-button--reverseMild:hover {
 //     border-color: #F2F7FF !important;
 //     background-color: #F2F7FF !important;
 // }
-
 // .el-button--reverseMild.is-disabled,
 // .el-button--reverseMild.is-disabled:hover {
 //     color: #006AFF;
@@ -520,14 +594,12 @@ body {
 //     background-color: #E8F0FE;
 //     opacity: .7;
 // }
-
 // .el-button--mild.is-disabled,
 // .el-button--mild.is-disabled:hover {
 //     color: #006AFF;
 //     opacity: .7;
 //     border-color: #006AFF;
 // }
-
 /* button==== end */
 
 // radio ---start
@@ -547,12 +619,11 @@ body {
 }
 
 // radio ---end
-
 // input ---start   
 .el-input {
     border-radius: 2px;
     border: 1px solid transparent;
-    font-family: Microsoft YaHei UI;
+    
 }
 
 .el-input:focus-within {
@@ -601,7 +672,7 @@ body {
 .el-input__inner::placeholder {
     color: #BABDC2;
     letter-spacing: 0.08em;
-    font-family: Microsoft YaHei UI;
+    
 }
 
 .el-input--prefix .el-input__inner {
@@ -626,16 +697,16 @@ body {
 
 // input ---end
 
-
 // select start
 .el-select {
     width: 100%;
     transition: all .5s;
 }
+
 // 应用在表格表头上的下拉开框 统一类名修改 字体效果
-.tableHeaderSelect ::v-deep .el-input__inner{
+.tableHeaderSelect ::v-deep .el-input__inner {
     font-weight: normal;
-    font-family: Microsoft YaHei UI;
+    
 }
 
 .el-select:hover .el-input__inner {
@@ -657,12 +728,12 @@ body {
 }
 
 // select end
-
 // textarea start
 .el-textarea__inner {
     padding: 10px 12px;
     border-radius: 2px;
     height: 100% !important;
+    
 }
 
 .el-textarea__inner:hover {
@@ -676,7 +747,6 @@ body {
 
 // textarea end
 
-
 .el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap>.el-form-item__label:before,
 .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before {
     content: '';
@@ -744,6 +814,8 @@ body {
     flex: 1;
     line-height: normal;
     position: relative;
+    display: flex;
+    justify-content: flex-start;
 
     .desc_right {
         position: absolute;
@@ -807,86 +879,142 @@ body {
         color: #1E2226;
     }
 }
-.nowrap{
+
+.nowrap {
     white-space: nowrap !important;
     overflow: hidden !important;
     text-overflow: ellipsis !important;
 }
-.tableHeaderSelect{
+
+.tableHeaderSelect {
     height: 18px !important;
 }
+
 /* 小屏幕下调整 */
-@media screen and (max-width: 1440px) {
-.el-table th.el-table__cell > .cell{
-    white-space: nowrap !important;
-  }
-  .cell-content {
-    display: inline-block;
-    max-width:60%;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-  .el-table .guip-svg-icon-wrapper{
-    width: 12px !important;
-    height: 12px !important;
-  }
-}
-@media screen and (min-width: 1321px) and (max-width: 1440px){
-.el-table{
-    th,td{
+@media screen and (min-width: 1281px) and (max-width: 1620px) {
+    .homeFont {
         font-size: 13px !important;
     }
 }
-// body{
-//     font-size: 13px !important;
-// }
-.tableHeaderSelect .el-input__inner{
-    font-size: 13px !important;
+
+@media screen and (max-width: 1280px) {
+    .homeFont {
+        font-size: 12px !important;
+    }
 }
-.el-link{
-    font-size: 13px !important;
+
+
+@media screen and (max-width: 1440px) {
+    .el-table th.el-table__cell>.cell {
+        white-space: nowrap !important;
+    }
+
+    .cell-content {
+        display: inline-block;
+        max-width: 60%;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .el-table .svg-icon-wrapper {
+        width: 12px !important;
+        height: 12px !important;
+    }
 }
 
+@media screen and (min-width: 1321px) and (max-width: 1440px) {
+    .el-table {
+
+        th,
+        td {
+            font-size: 13px !important;
+        }
+        .status-item{
+            font-size: 13px !important;
+        }
+    }
+
+    // body{
+    //     font-size: 13px !important;
+    // }
+    .tableHeaderSelect .el-input__inner {
+        font-size: 13px !important;
+    }
+
+    .el-link {
+        font-size: 13px !important;
+    }
+    .el-table__row{
+        font-size: 13px !important;
+    }
+    .el-button{
+        font-size: inherit;
+    }
 
 }
-@media screen and (max-width: 1320px){
-// body{
-//     font-size: 12px !important;
-// }
-.el-table{
-    th,td{
+
+@media screen and (max-width: 1320px) {
+
+    // body{
+    //     font-size: 12px !important;
+    // }
+    .el-table {
+
+        th,
+        td {
+            font-size: 12px !important;
+        }
+        .status-item{
+            font-size: 12px !important;
+        }
+    }
+
+    .tableHeaderSelect .el-input__inner {
         font-size: 12px !important;
     }
-}
-.tableHeaderSelect .el-input__inner{
-    font-size: 12px !important;
-}
-.el-link{
-    font-size: 13px !important;
-}
+
+    .el-link {
+        font-size: 12px !important;
+    }
+    .el-table__row{
+        font-size: 12px !important;
+    }
+    .el-button{
+        font-size: inherit;
+    }
 
 }
+
 @media screen and (min-width: 1440px) {
-.el-table{
-    th,td{
-        font-size: 14px !important;
+    .el-table {
+
+        th,
+        td {
+            font-size: 14px !important;
+        }
+        .status-item{
+            font-size: 14px !important;
+        }
+    }
+
+    .cell-content {
+        white-space: normal;
+        max-width: none;
+    }
+
+    .svg-icon-wrapper {
+        // width: 12px !important;
+        // height: 12px !important;
     }
-}
-.cell-content {
-    white-space: normal;
-    max-width: none;
-}
-.guip-svg-icon-wrapper{
-    // width: 12px !important;
-    // height: 12px !important;
-  }
 }
 
 // table start
-.el-table{
-    min-height: 218px;
-    th,td{
+.el-table {
+    min-height: 200px;
+
+    th,
+    td {
         font-size: 14px;
         font-weight: normal;
         letter-spacing: 0.08em;
@@ -895,14 +1023,16 @@ body {
         padding: 8px 10px !important;
         box-sizing: border-box !important;
     }
-    td{
-    }
-    .tableColumn{
+
+    td {}
+
+    .tableColumn {
         display: flex;
         flex-direction: column;
         justify-content: flex-start;
     }
 }
+
 .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
     background-color: #F6F7FA;
 }
@@ -921,19 +1051,18 @@ body {
 //     height: auto !important;
 //     background: transparent !important;
 // }
-.el-table th.el-table__cell > .cell{
+.el-table th.el-table__cell>.cell {
     padding-left: 0 !important;
     padding-right: 0 !important;
     display: flex;
     align-items: center;
 }
+
 .el-table th.el-table__cell {
     background: #F6F7FA;
     padding: 10px 0;
 }
-.el-table__header th{
-    background: #F6F7FA;
-}
+
 .el-table th.el-table__cell>.cell {
     padding-left: 16px;
     padding-right: 16px;
@@ -947,24 +1076,26 @@ body {
     padding-left: 0px;
     padding-right: 0px;
 }
+
 .el-table .el-form-item {
     margin-bottom: 0;
 }
 
 // 表格行内小图标 默认隐藏
-.el-table .guip-svg-icon-wrapper{
+.el-table .svg-icon-wrapper {
     display: none !important;
     margin-left: 8px;
 }
-  //划过时 显示
-.el-table__row:hover{
-    .guip-svg-icon-wrapper{
+
+//划过时 显示
+.el-table__row:hover {
+    .svg-icon-wrapper {
         margin-left: 8px;
         display: block !important;
     }
 }
-// table end
 
+// table end
 .el-pagination {
     margin-top: 16px;
     display: flex;
@@ -1005,27 +1136,31 @@ body {
     .dialog-footer-center {
         width: 100%;
         justify-content: space-between;
+
         button {
             width: 247px;
             height: 44px;
         }
     }
+
     .dialog-footer-normal {
         width: 100%;
         justify-content: flex-end !important;
+
         button {
-            width: 96px;
+            width: auto;
             height: 38px;
         }
     }
 }
+
 .center {
-    .el-dialog .el-dialog__header{
+    .el-dialog .el-dialog__header {
         text-align: center;
+    }
 }
-}
-// dialog--end
 
+// dialog--end
 // switch --start
 // .el-switch__core{
 //     background-color: #00C261;
@@ -1034,11 +1169,11 @@ body {
 //     background-color: #BABDC2;
 // }
 // switch --end
-
 // 弹出气泡框
 .el-popover {
     padding: 32px;
 }
+
 ::v-deep .custom-popover {
     position: fixed !important;
     // max-height: 290px;
@@ -1047,6 +1182,7 @@ body {
     margin-left: 0 !important;
     transform: none !important;
 }
+
 ::v-deep .custom-popover1 {
     position: fixed !important;
     max-height: 290px;
@@ -1065,11 +1201,13 @@ body {
     display: flex;
     align-items: center;
 }
-.flex-end{
+
+.flex-end {
     align-items: flex-end !important;
 }
+
 // 公共圆角类名
-.br4{
+.br4 {
     border-radius: 4px;
 }
 
@@ -1083,7 +1221,7 @@ body {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    font-family: Microsoft YaHei UI;
+    
 
     .left b {
         display: block;
@@ -1105,4 +1243,281 @@ body {
         color: #1E2226;
         margin-bottom: 4px;
     }
-}
\ No newline at end of file
+}
+
+
+.before_h_title{
+  font-size: 14px;
+  font-weight: bold;
+  line-height: normal;
+  letter-spacing: normal;
+  color: #333333;
+  display: flex;
+  align-items: center;
+  text-align: left;
+  &::before{
+    content: '';
+    background: #3F62F6;
+    display: inline-block;
+    margin-right: 9px;
+    width: 6px;
+    height: 16px;
+    border-radius: 12px;
+
+  }
+  .desc{
+    font-size: 12px;
+    font-weight: normal;
+    color: #626573;
+    margin-left: 8px;
+  }
+}
+
+
+// 上传按钮样式
+.qqCode-wrap {
+    display: grid;
+    justify-items: start;
+}
+
+.avatar-desc {
+    margin-top: 8px;
+    font-family: Inter;
+    font-size: 12px;
+    font-weight: normal;
+    line-height: 20px;
+    letter-spacing: normal;
+    font-variation-settings: "wght" 400;
+    color: var(--el-color-text-regular);
+}
+.avatar-uploader{
+    .upload-button {
+        border-radius: 4px;
+        background: #F2F3F5;
+        box-sizing: border-box;
+        border: 1px solid #BABDC2;
+    }
+    .bgImg{
+        width: 20px;
+        height: 16px;
+        margin-right: 6px;
+        background-image: url(../assets/uploadIcon.svg);
+    }
+    &:hover{
+        .bgImg{
+            background-image: url(../assets/uploadIcon_light.svg);
+        }
+    }
+}
+
+
+// 页面底部操作按钮样式 单个的
+.save-button{
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    background: #fff;
+    box-shadow: 0 4px 16px 0 rgba(17, 55, 143, 0.12);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 16px 0;
+    z-index: 9;
+  }
+
+// 论易排版样式 会覆盖原有样式
+.client_flex-common{
+    padding: 24px 32px;
+}
+
+.client-form-flex {
+    // 隐藏原有的el-form-item标签
+    ::v-deep .el-form-item__label {
+      display: none;
+    }
+    
+    ::v-deep .el-form-item__content {
+      margin-left: 0 !important;
+      display: flex;
+      align-items: center;
+    }
+    
+    .client-form-flex-wrapper {
+      display: flex;
+      align-items: center;
+      width: 100%;
+      
+      .flex-input {
+        flex: 1;
+        position: relative;
+        display: flex;
+        justify-content: flex-start;
+        
+        ::v-deep .el-select {
+          width: 100%;
+        }
+        ::v-deep .el-input {
+            width: 100%;
+        }
+
+        ::v-deep .el-radio-group {
+            margin: 0; /* 移除原有margin */
+            display: flex;
+            flex-wrap: wrap;
+            gap: 20px 24px;
+            width: 100%;
+        }
+      }
+    }
+  }
+// 行  距： 这种表现样式 目前应用的有input select radio
+  .flex-label {
+    display: flex;
+    align-items: center;
+    margin-right: 12px;
+    height: 32px;
+    flex-shrink: 0;
+    
+    .label-text {
+      display: block;
+      color: #333;
+      width: 56px;
+      text-align: justify;
+      text-align-last: justify;
+      line-height: 1;
+    }
+    
+    .colon {
+      margin-left: 4px;
+      line-height: 1;
+    }
+  }
+
+//  不同状态颜色 / 小标签 -- 待测试其余使用的页面是否生效
+.status-item {
+    height: 22px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 2px 10px;
+    border-radius: 4px;
+    font-size: 14px;
+    font-weight: normal;
+    line-height: 22px;
+    text-align: center;
+    letter-spacing: 0.08em;
+    box-sizing: border-box;
+}
+
+.divgreen {
+    background: rgba(239, 255, 224, 0.5);
+    border: 1px solid rgba(0, 194, 97, 0.6);
+}
+
+.fontgreen {
+    color: #0DAF49;
+}
+
+.divblue {
+    background: #F2F7FF;
+    border: 1px solid #BFDAFF;
+}
+
+.fontblue {
+    color: #006AFF;
+}
+
+.divred {
+    background: #FFF1F0;
+    border: 1px solid #FFA39E;
+}
+
+.fontred {
+    color: #FF4D4F;
+}
+
+.divgray {
+    background: #F6F7FA;
+    border: 1px solid #DFE2E6;
+}
+
+.fontgray {
+    color: #626573;
+}
+
+.divorange {
+    background: #FFFBF2;
+    border: 1px solid rgba(251, 131, 45, 0.38);
+}
+
+.fontorange {
+    color: #FB832D;
+}
+
+.divpurple {
+    background: #F9F2FF;
+    border: 1px solid rgba(126, 118, 253, 0.28);
+}
+
+.fontpurple {
+    color: #6258FF;
+}
+
+// end
+
+// 卡片选择及默认样式 start
+.wallet-item{
+    display: flex;
+    flex-direction: column;
+    text-align: left;
+    padding: 16px 14px;
+    width: 282px;
+    height: 96px;
+    letter-spacing: 0.08em;
+    border-radius: 8px;
+    background: rgba(255, 255, 255, 0.47);
+    box-sizing: border-box;
+    border: 1px solid #DFE2E6;
+    .desc{
+        font-size: 12px;
+        color: #626573;
+        letter-spacing: 0.08em;
+    }
+
+    .wallet-name{
+    color: #1E2226;
+    font-size: 14px;
+    font-weight: bold;
+    margin-bottom: 12px;
+    }
+    .wallet-num{
+        font-size: 12px;
+        color: #626573;
+        padding: 0 2px;
+        display: flex;
+        align-items: baseline;
+    }
+    .wallet-price{
+    font-size: 22px;
+    font-weight: bold;
+    color: #626573;
+    }
+}
+
+.wallet-item-active{
+    position: relative;
+    background: #F2F7FF;
+    border-color: #006AFF;
+    .tem-active{
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 30px;
+    height: 30px;
+    }
+    .wallet-name{
+    color: #006AFF;
+    }
+}
+// 卡片选择及默认样式 end
\ No newline at end of file