封面信息页面、input\radio\select增加特殊新样式

src/components/GroupFormBtns.vue

@@ -1,9 +1,7 @@
-
-
 <template>
-    <div class="btns-wrap flex">
+    <div class="btns-wrap flex" :class="flex == 'start' ? 'flex-start' :''">
-        <GuipButton type="ignore" @click="cancelClick">取消</GuipButton>
+        <GuipButton type="ignore" @click="cancelClick">{{cancelText || '取消'}}</GuipButton>
-        <GuipButton type="primary" @click="confirmClick">保存</GuipButton>
+        <GuipButton type="primary" @click="confirmClick">{{confirmText ||'保存'}}</GuipButton>
     </div>
 </template>
 <script>
@@ -11,7 +9,7 @@ import GuipButton from '@/components/GuipButton.vue';
 
 export default {
     name: '',
-    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>

src/components/GuipInput.vue

@@ -1,44 +1,102 @@
 <template>
   <el-form-item :style="{ ...styleObject}" :required="required"
-    :class="[{ 'column': column }, { 'w510': addClass == 'w510' }, { 'w388': addClass == 'w388' }, 'form-item']" :label="label"
+    :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>
+    
+    <!-- 特殊样式布局 -->
+    <div v-if="clientFormFlex" class="client-form-flex-wrapper">
+      <div class="flex-label">
+        <div class="label-text">{{ clientFormLabel || label }}</div>  <!-- 支持自定义标签文本 -->
+        <span class="colon">：</span>
+      </div>
+      <div class="flex-input">
         <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)" >
-      <!-- 自定义前面小图标 -->
           <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>
     
-      <!-- :error="errorMessage" show-message -->
+    <!-- 原有输入框结构 -->
-
+    <template v-else>
-      <!-- <i slot="suffix" v-if="empty" class="el-icon-close" @click="handleClear">h</i> -->
+      <el-input :type="type" v-bind="$attrs" :placeholder="placeholder1" :disabled="disabled" :maxlength="maxlength1"
-      <!-- <el-button slot="append" v-if="hasBtn"  type="primary" @click="$emit('enter',value)">搜索</el-button> -->
+        :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>
+    </template>
   </el-form-item>
-
 </template>
 
 <script>
 export default {
   name: 'GuipInput',
-  props: ['value', 'styleObject', 'disabled', 'defaultValue', 'placeholder','required',
+  props: {
-    'maxlength', 'minLength', 'clear', 'width', 'height', 'showWordLimit',
+    value: [String, Number],
-    'label', 'type', 'prop', 'rules', 'column', 'addClass', 'desc', 'unit'],
+    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 +109,23 @@ export default {
       placeholder1: ''
     }
   },
-  watch: { // 监听外部传来的 value prop 的变化，以便同步到内部状态 inputValue 上（可选）
+  watch: {
-    // defaultValue(newVal) {
-    //   console.log(newVal,'newVal');
-    //   this.inputValue = newVal;
-    // },
     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,76 +140,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>
+
 <style lang="scss" scoped>
 .unit {
   position: absolute;
   right: 12px;
-  /* 根据需要调整位置 */
   top: 50%;
   transform: translateY(-50%);
   pointer-events: none;
-  /* 防止单位文本影响输入框的点击事件 */
 }
-// .custom-form-item {
-//   ::v-deep .el-form-item__content {
-//     display: flex;
-//     flex-direction: column;
-//     align-items: flex-start;
-//   }
-
-//   .input-wrapper {
-//     position: relative;
-//     width: 100%;
-//   }
-
-//   ::v-deep .el-form-item__error {
-//     position: relative;
-//     margin-top: 4px;
-//     padding-top: 0;
-//     line-height: 1;
-//   }
-// }
 </style>

src/components/GuipRadio.vue

@@ -1,12 +1,33 @@
 <template>
-  <el-form-item :class="[{ 'column': column }, 'form-item']" :label="label" :prop="prop" :rules="rules"
+  <el-form-item :class="[{ 'column': column }, { 'client-form-flex': clientFormFlex }, 'form-item']" 
-    :required="required">
+    :label="clientFormFlex ? '' : label" 
+    :prop="prop" :rules="rules" :required="required">
+    
+    <!-- 特殊样式布局 -->
+    <div v-if="clientFormFlex" class="client-form-flex-wrapper">
+      <div class="flex-label">
+        <div class="label-text">{{ clientFormLabel || label }}</div>
+        <span class="colon">：</span>
+      </div>
+      <div class="flex-input">
+        <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>
+      </div>
+    </div>
+    
+    <!-- 原有结构 -->
+    <template v-else>
       <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>
+    </template>
   </el-form-item>
 </template>
 
@@ -82,6 +103,16 @@ export default {
     disabledKeys: {
       type: Array,
       default: () => []
+    },
+    // 新增：控制特殊样式
+    clientFormFlex: {
+      type: Boolean,
+      default: false
+    },
+    // 新增：特殊样式时的自定义标签文本（可选）
+    clientFormLabel: {
+      type: String,
+      default: ''
     }
   },
   computed: {
@@ -169,8 +200,8 @@ export default {
 };
 </script>
 
-<style scoped>
+<style scoped lang="scss">
-/* 自定义样式 */
+/* 原有样式 */
 .el-radio-group {
   margin: 10px 0;
   display: flex;
@@ -178,30 +209,5 @@ export default {
   gap: 20px 24px;
   flex-wrap: wrap;
 }
-.custom-form-item {
-  ::v-deep .el-form-item__content {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    min-height: auto;  /* 允许高度自由扩展 */
-  }
-
-  /* 错误提示样式调整 */
-  ::v-deep .el-form-item__error {
-    position: relative;  /* 改为相对定位 */
-    margin-top: 4px;    /* 与单选框组保持间距 */
-    padding-top: 0;
-    line-height: 1.5;
-    white-space: normal; /* 允许错误信息换行 */
-  }
 
-  /* 单选框组布局调整 */
-  .el-radio-group {
-    margin: 10px 0;
-    display: flex;
-    flex-wrap: wrap;
-    gap: 20px 24px;
-    width: 100%;  /* 确保宽度填满 */
-  }
-}
 </style>

src/components/GuipSelect.vue

@@ -1,14 +1,34 @@
 <template>
   <el-form-item :style="{ ...style, height: height, ...styleObject }" :required="required"
-    :class="[{ 'column': column }, { 'w510': addClass == 'w510' }, { 'w388': addClass == 'w388' }, 'form-item']"
+    :class="[{ 'column': column }, { 'w510': addClass == 'w510' }, { 'w388': addClass == 'w388' }, { 'client-form-flex': clientFormFlex }, 'form-item']"
-    :label="label" :prop="prop" :rules="rules">
+    :label="clientFormFlex ? '' : label" :prop="prop" :rules="rules">
     <p v-if="desc" class="desc_right">{{ desc }}</p>
+    
+    <!-- 特殊样式布局 -->
+    <div v-if="clientFormFlex" class="client-form-flex-wrapper">
+      <div class="flex-label">
+        <div class="label-text">{{ clientFormLabel || label }}</div>
+        <span class="colon">：</span>
+      </div>
+      <div class="flex-input">
         <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>
+    </div>
+    
+    <!-- 原有结构 -->
+    <template v-else>
+      <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>
+    </template>
   </el-form-item>
 </template>
 
@@ -48,7 +68,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 {

src/components/SetLeftMenu.vue

@@ -261,7 +261,7 @@ export default {
 <style scoped lang="scss">
 .sidebar {
   min-width: 158px;
-  padding: 21px;
+  padding: 21px 21px 60px;
   box-sizing: border-box;
   background: #FFFFFF;
   box-shadow: 0px 0px 11px 2px rgba(147, 147, 147, 0.11);

src/router/index.js

@@ -24,7 +24,7 @@ const blackHeaderRightList = [
 ];
 const blackFooterList = [
   '/', '/franchise','/agreement', '/customizeDoc','/agent/siteAdd', '/agent/payInfoSetting','/agent/siteServiceEdit','/agent/siteAddFinally','/agent/siteServiceAdd',
-  '/agent/siteTemplate','/agent/siteAddChooseService'
+  '/agent/siteTemplate','/agent/siteAddChooseService','/clientSet/coverInfoPage'
 ];
 
 const routes = [{

src/style/theme/common.scss

@@ -315,6 +315,7 @@ body {
 .borderNone {
     border: none !important;
 }
+// 非论易排项目的样式
 
 .flex-common {
     padding: 32px 36px;
@@ -795,6 +796,8 @@ body {
     flex: 1;
     line-height: normal;
     position: relative;
+    display: flex;
+    justify-content: flex-start;
 
     .desc_right {
         position: absolute;
@@ -1195,7 +1198,6 @@ body {
     justify-content: space-between;
     align-items: center;
     font-family: Microsoft YaHei UI;
-
     .left b {
         display: block;
         text-align: left;
@@ -1217,3 +1219,147 @@ body {
         margin-bottom: 4px;
     }
 }
+
+
+.before_h_title{
+  font-family: Microsoft YaHei UI;
+  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;
+
+  }
+}
+
+
+// 上传按钮样式
+
+.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/site/uploadIcon.svg);
+    }
+    &:hover{
+        .bgImg{
+            background-image: url(@/assets/site/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-label {
+        display: flex;
+        align-items: center;
+        margin-right: 12px;
+        height: 32px;
+        flex-shrink: 0;
+        
+        .label-text {
+          display: block;
+          width: 56px;
+          text-align: justify;
+          text-align-last: justify;
+          line-height: 1;
+        }
+        
+        .colon {
+          margin-left: 4px;
+          line-height: 1;
+        }
+      }
+      
+      .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%;
+        }
+      }
+    }
+  }

src/views/clientSet/coverInfoPage.vue

@@ -1,4 +1,127 @@
-
 <template>
-    <div>aksdhkjas</div>
+    <div class="main-content12 coverInfoPage">
+        <h3 class="pageTitle">封面信息</h3>
+        <div class="client_flex-common flex-common" id="">
+            <div class="before_h_title mb24">基本信息</div>
+            <el-form :model="coverInfo">
+                <GuipInput v-model="coverInfo.name" :client-form-flex="true" label="所属学校" width="356px" />
+                <GuipRadio :options="collegeList" v-model="coverInfo.name" :client-form-flex="true" label="学院" />
+                <GuipInput v-model="coverInfo.name" label="学院名称" :client-form-flex="true" width="356px" />
+                <GuipRadio :options="qualificationList" v-model="coverInfo.name" label="学历" :client-form-flex="true" />
+                <GroupFormBtns cancelText="重置" @cancel="cancelClick('siteForm')" flex="start"
+                    @confirm="submitDoctorBaseInfo" />
+            </el-form>
+        </div>
+        <div class="client_flex-common flex-common mt12" id="">
+            <div class="before_h_title mb24">封面样式</div>
+            <div class="flex mt12">
+                <img v-if="coverStyle" :src="coverStyle.qrcode_path" class="kefuImg mr-12">
+                <div class="qqCode-wrap">
+                    <el-upload class="avatar-uploader mt12" accept=".jpg" :on-change="handleQQkfChange" action="#"
+                        :multiple="false" :limit="Number(1)" ref="avatorUpload" :auto-upload="false">
+                        <GuipButton class="upload-button" type="ignore" :btnstyle="{ width: '118px' }">
+                            <div class="bgImg"></div>
+                            <span>上传图片</span>
+                        </GuipButton>
+                    </el-upload>
+                    <p class="avatar-desc">支持 jpg、png 格式，大小不超过 2MB </p>
+                </div>
+            </div>
+            
+            <GroupFormBtns cancelText="重置" @cancel="cancelClick('siteForm')" flex="start"
+                @confirm="submitDoctorBaseInfo" />
+        </div>
+        <div class="save-button flex">
+            <GuipButton type="primary" :btnstyle="{width:'144px',height:'46px'}" @click="submitFun">收录完成</GuipButton>
+        </div>
+    </div>
 </template>
+<script>
+import GuipInput from '@/components/GuipInput.vue';
+import GroupFormBtns from '@/components/GroupFormBtns.vue';
+import GuipRadio from '@/components/GuipRadio.vue';
+import GuipButton from '@/components/GuipButton.vue';
+// import GuipSelect from '@/components/GuipSelect.vue';
+
+export default {
+    name: 'CoverInfoPage',
+    components: {
+        GroupFormBtns,
+        GuipInput,
+        GuipRadio,
+        GuipButton,
+        // GuipSelect
+    },
+    data() {
+        return {
+            coverStyle: {
+                url: '',
+                qrcode_path: ''
+            },
+            coverInfo: {
+                name: ''
+            },
+            rules: {
+                name: [
+                    { required: true, message: '请输入姓名', trigger: 'blur' }
+                ]
+            },
+            collegeList: [// 学院列表
+                {
+                    label: '通用',
+                    value: 1
+                },
+                {
+                    label: '专用',
+                    value: 2
+                }
+            ],
+            qualificationList: [// 学历列表
+                {
+                    label: '专科',
+                    value: 1
+                },
+                {
+                    label: '本科',
+                    value: 2
+                },
+                {
+                    label: '硕士',
+                    value: 3
+                },
+                {
+                    label: '博士',
+                    value: 4
+                },
+                {
+                    label: '继续教育',
+                    value: 5
+                },
+            ]
+
+        };
+    },
+    methods: {
+        cancelClick(formName) {
+            this.$emit('cancel', formName);
+        },
+        submitDoctorBaseInfo() {
+            this.$emit('confirm');
+        },
+        handleQQkfChange(file, fileList) {
+            console.log(file, fileList)
+            // let fileObj = file.raw
+            // this.formData.set('qq_qrcode', fileObj)
+        },
+        submitFun() {
+        }
+    },
+    mounted() {
+    },
+
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>

src/views/clientSet/mainTextPage.vue

@@ -1 +1,6 @@
 
+<template>
+    <div class="mainTextPage">
+        
+    </div>
+</template>