From 22851632650a9e3faed33fe276379e5ef4348327 Mon Sep 17 00:00:00 2001
From: zq <136432190602163.com>
Date: Tue, 6 Jan 2026 09:27:43 +0800
Subject: [PATCH] =?UTF-8?q?=E6=90=9C=E7=B4=A2=E8=BE=93=E5=85=A5url?=
 =?UTF-8?q?=E6=9B=B4=E6=94=B9=E4=B8=BA=E5=8A=A8=E6=80=81=E4=BC=A0=E5=8F=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/clientSet/searchInput.vue | 247 ++++++++++
 src/views/elementGroups.vue              | 752 +++++++++++++++++--------------
 src/views/super/paiban/college.vue       |  21 +-
 3 files changed, 667 insertions(+), 353 deletions(-)
 create mode 100644 src/components/clientSet/searchInput.vue

diff --git a/src/components/clientSet/searchInput.vue b/src/components/clientSet/searchInput.vue
new file mode 100644
index 0000000..72b70d8
--- /dev/null
+++ b/src/components/clientSet/searchInput.vue
@@ -0,0 +1,247 @@
+<template>
+    <el-autocomplete
+      class="school-auto-complete"
+      :value="value"
+      :fetch-suggestions="querySearchAsync"
+      :placeholder="placeholder"
+      :debounce="debounce"
+      :loading="loading"
+      @select="handleSelect"
+      @input="handleInput"
+      @clear="handleManualClear" 
+      :clearable="clearable"
+      :size="size"
+      :disabled="disabled"
+    >
+      <!-- 自定义下拉选项 -->
+      <template #default="{ item }">
+        <div class="flex-between school-option">
+          <span>{{ item.name }}</span>
+          <img 
+            v-if="showSelectedIcon && item.id === selectedSchoolId" 
+            src="@/assets/site/dropdown_chose_ic.svg" 
+            alt="selected"
+          />
+        </div>
+      </template>
+    </el-autocomplete>
+  </template>
+  
+  <script>
+  export default {
+    name: 'SchoolAutoComplete',
+    
+    props: {
+      url: {
+        type: String,
+        default: ''
+      },
+      // 双向绑定的值（学校名称）
+      value: {
+        type: String,
+        default: ''
+      },
+      // 选中的学校ID
+      selectedSchoolId: {
+        type: [String, Number],
+        default: null
+      },
+      // 占位符
+      placeholder: {
+        type: String,
+        default: '请输入学校名称'
+      },
+      // 防抖延迟时间
+      debounce: {
+        type: Number,
+        default: 300
+      },
+      // 是否显示清空按钮
+      clearable: {
+        type: Boolean,
+        default: true
+      },
+      // 输入框尺寸
+      size: {
+        type: String,
+        default: 'medium'
+      },
+      // 是否禁用
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+      // 是否显示选中图标
+      showSelectedIcon: {
+        type: Boolean,
+        default: true
+      }
+    },
+    
+    data() {
+      return {
+        loading: false,
+        timeout: null,
+        lastSearchKeyword: '',
+        schoolList: [],
+        // 新增：记录最后一次有效选择
+        lastValidSelection: null
+      }
+    },
+    
+    mounted() {
+      // 初始化时记录当前选择
+      if (this.selectedSchoolId && this.value) {
+        this.lastValidSelection = {
+          id: this.selectedSchoolId,
+          name: this.value
+        }
+      }
+    },
+    
+    beforeDestroy() {
+      clearTimeout(this.timeout)
+    },
+    
+    methods: {
+      /**
+       * 异步搜索学校
+       */
+      async querySearchAsync(queryString, callback) {
+        const keyword = queryString.trim()
+        
+        if (!keyword || keyword === this.lastSearchKeyword) {
+          callback([])
+          return
+        }
+        
+        this.lastSearchKeyword = keyword
+        this.loading = true
+        
+        clearTimeout(this.timeout)
+        this.timeout = setTimeout(async () => {
+          try {
+            const schools = await this.searchSchools(keyword)
+            this.schoolList = schools
+            callback(schools)
+          } catch (error) {
+            console.error('搜索学校失败:', error)
+            callback([])
+          } finally {
+            this.loading = false
+          }
+        }, this.debounce)
+      },
+      
+      /**
+       * 搜索学校API调用
+       */
+      async searchSchools(keyword) {
+        try {
+          const response = await this.$http('POST', this.url, {
+            keyword
+          })
+          
+          if (response.status && response.data) {
+            return response.data
+          }
+          return []
+        } catch (error) {
+          this.$message.error('搜索学校列表失败')
+          throw error
+        }
+      },
+      
+      /**
+       * 处理选择事件
+       */
+      handleSelect(item) {
+        console.log('选中学校:', item)
+        
+        // 更新记录
+        this.lastValidSelection = {
+          id: item.id,
+          name: item.name
+        }
+        
+        this.$emit('select', item)
+        this.$emit('update:selectedSchoolId', item.id)
+        this.$emit('input', item.name)
+        this.$emit('change', item)
+      },
+      
+      /**
+       * 处理输入事件 - 安全版本
+       */
+      handleInput(value) {
+        console.log('输入变化:', value, '当前选中:', this.selectedSchoolId)
+        
+        // 只更新显示的值
+        this.$emit('input', value)
+        
+        // 重要：这里不自动触发清空
+        // 清空只会在 handleManualClear 中触发
+      },
+      handleManualClear() {
+        console.log('用户手动清空')
+        this.clearSelection()
+      },
+      clearSelection() {
+        console.log('执行清空操作')
+        this.$emit('input', '')
+        this.$emit('update:selectedSchoolId', null)
+        this.$emit('clear')
+        this.lastSearchKeyword = ''
+        this.lastValidSelection = null
+      },
+      setSelectedSchool(school) {
+        if (school && school.id && school.name) {
+          this.lastValidSelection = {
+            id: school.id,
+            name: school.name
+          }
+          this.$emit('input', school.name)
+          this.$emit('update:selectedSchoolId', school.id)
+          this.$emit('select', school)
+        }
+      },
+      clear() {
+        this.clearSelection()
+      },
+      
+      async triggerSearch(keyword) {
+        return await this.searchSchools(keyword || this.value)
+      },
+      
+      /**
+       * 恢复上一次的有效选择
+       */
+      restoreLastSelection() {
+        if (this.lastValidSelection) {
+          this.setSelectedSchool(this.lastValidSelection)
+        }
+      }
+    }
+  }
+  </script>
+  <style lang="scss" scoped>
+  .school-auto-complete {
+    width: 100%;
+  }
+  
+  .school-option {
+    width: 100%;
+    span {
+      flex: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    
+    img {
+      width: 16px;
+      height: 16px;
+      margin-left: 8px;
+    }
+  }
+  </style>
\ No newline at end of file
diff --git a/src/views/elementGroups.vue b/src/views/elementGroups.vue
index 6cfa05e..5aa4823 100644
--- a/src/views/elementGroups.vue
+++ b/src/views/elementGroups.vue
@@ -1,100 +1,108 @@
 <template>
     <div class="main-content12">
         <div class="elementWrap">
-            <div id="example1" class="mb24 ele-item gap10">
-                <label for="">输入+下拉 组合框</label>
+            <section id="example1" class="demo-section column gap12">
+                <h2>输入+下拉 组合框</h2>
                 <domainBind label="域名设置" @handleEvent="handleEvent" />
-            </div>
-            <div id="example2" class="ele-item">
-                <label style="font-weight: 600;text-align: left;" for="">文案提示框</label>
-                <div class="column gap10">
-                    <PromptText text='这是一个提示框--文案随便写的啦' :type="1" />
-                    <PromptText text='这是一个提示框--文案随便写的啦' :type="2" />
-                    <PromptText text='这是一个提示框--文案随便写的啦' :type="3" />
-                    <PromptText text="前期准备事项" :type="1" class="beforeNotice">
-                        <template #next_desc>
-                            <p class="flex">
-                                <a href="https://e.360.cn/static/zhihui/login/?rdurl=https%3A%2F%2Fe.360.cn%2F" class="flex"
-                                    target="_blank">
-                                    <img src="@/assets/site/form_linkActive.svg" alt="">前往登陆</a>登录360智慧平台
-                            </p>
+            </section>
+            <section id="example2" class="demo-section column gap12">
+                <h2>文案提示框</h2>
+                <PromptText text='这是一个提示框--文案随便写的啦' :type="1" />
+                <PromptText text='这是一个提示框--文案随便写的啦' :type="2" />
+                <PromptText text='这是一个提示框--文案随便写的啦' :type="3" />
+                <PromptText text="前期准备事项" :type="1" class="beforeNotice">
+                    <template #next_desc>
+                        <p class="flex">
+                            <a href="https://e.360.cn/static/zhihui/login/?rdurl=https%3A%2F%2Fe.360.cn%2F" class="flex"
+                                target="_blank">
+                                <img src="@/assets/site/form_linkActive.svg" alt="">前往登陆</a>登录360智慧平台
+                        </p>
+                    </template>
+                    <template #desc>
+                        <p class="mt12 flex">
+                            1. <a href="https://e.360.cn/static/zhihui/login/?rdurl=https%3A%2F%2Fe.360.cn%2F"
+                                class="flex" target="_blank">
+                                <img src="@/assets/site/form_linkActive.svg" alt="">前往登陆</a>登录360智慧平台
+                        </p>
+                        <p class="mt10 flex">
+                            2. <a href="https://dianjing.e.360.cn/ocpc/list" class="flex" target="_blank">
+                                <img src="@/assets/site/form_linkActive.svg"
+                                    alt="">前往ocpc设置页</a>＞点击“添加OCPC投放包”按钮。注意转换类型只能选择“订单”，其他的根据表单提示填写。
+                        </p>
+                    </template>
+                </PromptText>
+            </section>
+
+            <section id="example3" class="demo-section">
+                <h2 for="">实时预览外层嵌套</h2>
+                <div class="ele-item">
+                    <!-- 默认 显示电脑端、手机端 -->
+                    <!--  :showMobile="false"  :showPc="false" -->
+                    <DevicePreview>
+                        <template #desktop>
+                            电脑端内容-内容自定义
                         </template>
-                        <template #desc>
-                            <p class="mt12 flex">
-                                1. <a href="https://e.360.cn/static/zhihui/login/?rdurl=https%3A%2F%2Fe.360.cn%2F" class="flex"
-                                    target="_blank">
-                                    <img src="@/assets/site/form_linkActive.svg" alt="">前往登陆</a>登录360智慧平台
-                            </p>
-                            <p class="mt10 flex">
-                                2. <a href="https://dianjing.e.360.cn/ocpc/list" class="flex" target="_blank">
-                                    <img src="@/assets/site/form_linkActive.svg"
-                                        alt="">前往ocpc设置页</a>＞点击“添加OCPC投放包”按钮。注意转换类型只能选择“订单”，其他的根据表单提示填写。
-                            </p>
+                        <template #mobile>
+                            内容自定义
+                            手机端端内容-- 手机端端内容
                         </template>
-                    </PromptText>
+                    </DevicePreview>
                 </div>
-            </div>
-            
-            <div class="ele-item" id="example3">
-                <label for="">实时预览外层嵌套</label>
-                <!-- 默认 显示电脑端、手机端 -->
-                <!--  :showMobile="false"  :showPc="false" -->
-                <DevicePreview>
-                    <template #desktop>
-                        电脑端内容-内容自定义
-                    </template>
-                    <template #mobile>
-                        内容自定义
-                        手机端端内容-- 手机端端内容
-                    </template>
-                </DevicePreview>
-            </div>
-            <div class="ele-item gap12" id="example4">
-                <label for="">不同状态：</label>
-                <div class="status-item divgreen"><span class="fontgreen">状态标签</span></div>
-                <div class="status-item divorange"><span class="fontorange">状态标签</span></div>
-                <div class="status-item divgray"><span class="fontgray">状态标签</span></div>
-                <div class="status-item divred"><span class="fontred">状态标签</span></div>
-                <div class="status-item divblue"><span class="fontblue">状态标签</span></div>
-            </div>
-            <div class="ele-item gap12" id="example5">
-                <label for="">卡片默认及选中样式</label>
-                <div class="wallet-item point " >
-                    <img src="@/assets/site/tem-active.svg" class="tem-active" alt="" v-if="false">
-                    <div class="wallet-name">这是默认</div>
-                    <div class="desc">小文案小文案小文案小文案小文案</div>        
+            </section>
+
+            <section id="example4" class="demo-section">
+                <h2>状态标签</h2>
+                <div class="ele-item gap12">
+                    <div class="status-item divgreen"><span class="fontgreen">状态标签</span></div>
+                    <div class="status-item divorange"><span class="fontorange">状态标签</span></div>
+                    <div class="status-item divgray"><span class="fontgray">状态标签</span></div>
+                    <div class="status-item divred"><span class="fontred">状态标签</span></div>
+                    <div class="status-item divblue"><span class="fontblue">状态标签</span></div>
                 </div>
-                <div class="wallet-item point wallet-item-active" >
-                    <img src="@/assets/site/tem-active.svg" class="tem-active" alt="">
-                    <div class="wallet-name">这是选中</div>
-                    <div class="desc">小文案小文案小文案小文案小文案</div>        
+            </section>
+            <section id="example4" class="demo-section">
+                <h2 for="">卡片默认及选中样式</h2>
+                <div class="ele-item gap12" id="example5">
+                    <div class="wallet-item point ">
+                        <img src="@/assets/site/tem-active.svg" class="tem-active" alt="" v-if="false">
+                        <div class="wallet-name">这是默认</div>
+                        <div class="desc">小文案小文案小文案小文案小文案</div>
+                    </div>
+                    <div class="wallet-item point wallet-item-active">
+                        <img src="@/assets/site/tem-active.svg" class="tem-active" alt="">
+                        <div class="wallet-name">这是选中</div>
+                        <div class="desc">小文案小文案小文案小文案小文案</div>
+                    </div>
                 </div>
-            </div>
+            </section>
+
 
             <!-- 以 ele-item 为类名的这种div、 label 、 h3 仅在此页面进行布局使用，复制时无需复制此元素 -->
             <el-form :model="form" :rules="rules" class="el-row demo-ruleForm" ref="formRef">
-                <div id="example6">
+                <section id="example6" class="demo-section">
+                    <h2 for="">copy固定内容</h2>
                     <div class="ele-item">
-                        <label for="">copy固定内容</label>
                         <!-- 复制固定文本 -->
                         <GuipButton size="big" v-clipboard="'渝过田晴'">复制渝过田晴</GuipButton>
-                        
+
                         <!-- 复制动态文本 -->
                         <GuipButton size="big" v-clipboard="content">点击复制: {{ content }}</GuipButton>
                     </div>
-                </div>
-                <div id="example7">
-                    <div class="ele-item">
-                        <label for="">手动点击copy</label>
+                </section>
+                <section id="example7" class="demo-section">
+                    <h2 for="">手动点击copy</h2>
+                    <div class="ele-item gap24">
                         <GuipInput v-model="form.input1">
                             <!-- 提示可以不添加 、图标可更换 -->
-                            <GuipToolTip content="点击复制到粘贴板"  slot="suffix">
+                            <GuipToolTip content="点击复制到粘贴板" slot="suffix">
                                 <img src="@/assets/menu/Totalprofit.svg" @click="handleClickCopy" />
                             </GuipToolTip>
                         </GuipInput>
+                        <GuipInput width="300px" placeholder="复制完毕后，粘贴试一下" v-model="form.input4" />
                     </div>
-                </div>
-                <div id="example8">
+                </section>
+                <section id="example8" class="demo-section">
+                    <h2>单选框</h2>
                     <div class="ele-item">
                         <label for="">单选框(对象格式)：</label>
                         <GuipRadio v-model="form.language" :options="languageOptions" label="选择语言" prop="language"
@@ -102,44 +110,60 @@
                     </div>
                     <div class="ele-item">
                         <label for="">单选框2（数组格式 + 自定义取值）：</label>
-                        <GuipRadio v-model="form.language" :options="languageOptions1" label="自定义属性" prop="language" selectedLabelKey="selectedLabel"
-                            @change="radioChange" :rules="rules.language" label-key="name" :disabledKeys="['1']"
-                            value-key="id" />
+                        <GuipRadio v-model="form.language" :options="languageOptions1" label="自定义属性" prop="language"
+                            selectedLabelKey="selectedLabel" @change="radioChange" :rules="rules.language"
+                            label-key="name" :disabledKeys="['1']" value-key="id" />
+                    </div>
+                    <div class="ele-item">
+                        <label for="">单选框：</label>
+                        <el-radio v-model="radio1" :label="1">选项一</el-radio>
+                        <el-radio v-model="radio1" :label="2">选项二</el-radio>
                     </div>
-                    <div class="shortLine">--------------------分割线------------------------------</div>
 
-                </div>
-                <div id="example9">
+                    <div class="ele-item">
+                        <label for="">单选框组：</label>
+                        <el-radio-group v-model="radio" @input="radioChange">
+                            <el-radio :label="3">备选项</el-radio>
+                            <el-radio :label="6">备选项</el-radio>
+                            <el-radio :label="9">备选项</el-radio>
+                        </el-radio-group>
+                    </div>
+                </section>
+                <section id="example9" class="demo-section">
+                    <h2>下拉选择框</h2>
                     <div class="ele-item">
                         <label for="">数组套对象类型下拉框：</label>
                         <!-- :extraItem="{label:'全部',value:'99999'}" 传入必须是 label、value； 组件内会自动改为自定义的 labelKey、valueKey-->
-                    <div class="flex">
-                        <GuipSelect width="150px" v-model="form.card" clearable label="卡片" :default-value="form.card" @change="selectChangeTest"
-                            prop="card" :options="options" valueKey="id1" labelKey="id2" :extraItem="{label:'全部',value:'99999'}"/>
+                        <div class="flex">
+                            <GuipSelect width="150px" v-model="form.card" clearable label="卡片"
+                                :default-value="form.card" @change="selectChangeTest" prop="card" :options="options"
+                                valueKey="id1" labelKey="id2" :extraItem="{ label: '全部', value: '99999' }" />
                             <p>j卢卡斯就到啦</p>
                             <GuipInput ref="GuipInput" v-model="form.input2" :maxlength="100" @change="handleInput"
-                            @blur="handleInput" prop="input2" @input="handleInput" @focus="handleInput" placeholder="这是自定义默认提示语" />
-                    </div>
+                                @blur="handleInput" prop="input2" @input="handleInput" @focus="handleInput"
+                                placeholder="这是自定义默认提示语" />
+                        </div>
                     </div>
                     <div class="ele-item">
                         <label for="">纯数组[1,2]下拉框：</label>
                         <GuipSelect width="150px" v-model="form.card" clearable label="卡片" @change="selectChangeTest"
-                            prop="card" :options="['麻辣烫','提拉米苏']" />
+                            prop="card" :options="['麻辣烫', '提拉米苏']" />
                     </div>
                     <div class="ele-item">
                         <label for="">对象格式下拉框：</label>
-                        <GuipSelect width="150px" v-model="form.card1" clearable label="卡片" :default-value="form.card" @change="selectChangeTest"
-                            prop="card" :options="languageOptions"/>
+                        <GuipSelect width="150px" v-model="form.card1" clearable label="卡片" :default-value="form.card"
+                            @change="selectChangeTest" prop="card" :options="languageOptions" />
                     </div>
-                </div>
-            
+                </section>
+
                 <el-button type="primary" @click="submitForm">Submit</el-button>
 
-                <div id="example10">
+                <section id="example10" class="demo-section">
                     <h3 for="">表格：(表头自定义、自定义渲染、固定列)</h3>
                     <GuipButton type="primary" @click="toggleAllSelection">全选按钮</GuipButton>
-                    <GuipTable :tableData="[{payment:0,name2:10008.9,price:200}]" ref="multipleTable" @selectChange="handleSelectionChange"
-                        :multiple="true" autoColumn="true" :loading="tableLoading">
+                    <GuipTable :tableData="[{ payment: 0, name2: 10008.9, price: 200 }]" ref="multipleTable"
+                        @selectChange="handleSelectionChange" :multiple="true" autoColumn="true"
+                        :loading="tableLoading">
                         <!-- <template slot="header"> -->
                         <el-table-column width="180" fixed="left" label="名称(固定左)"></el-table-column>
                         <el-table-column prop="created_at" label="时间" width="200">
@@ -175,18 +199,19 @@
                             </template>
 
                         </el-table-column>
-                        <el-table-column prop="name2" label="姓名" width="150" :formatter="$stateFormat"></el-table-column>
+                        <el-table-column prop="name2" label="姓名" width="150"
+                            :formatter="$stateFormat"></el-table-column>
                         <el-table-column prop="statu" label="价格" width="150">
                             <template slot-scope="scope">
-                                <GuipSwitch v-model="scope.row.statu" activeText="默认类型boolean" inactiveText="关闭" :active-value="1" :inactive-value="0"
-                                    @change="onSwitchChange1(scope.row)">
+                                <GuipSwitch v-model="scope.row.statu" activeText="默认类型boolean" inactiveText="关闭"
+                                    :active-value="1" :inactive-value="0" @change="onSwitchChange1(scope.row)">
                                 </GuipSwitch>
                             </template>
                         </el-table-column>
                         <el-table-column prop="price" label="价格" width="300">
                             <template slot-scope="scope">
-                                <GuipSelect width="200px"  v-model="scope.row.price"
-                                     :options="[{value:1,label:'哈哈'}]" defaultValue="选项1" />
+                                <GuipSelect width="200px" v-model="scope.row.price" :options="[{ value: 1, label: '哈哈' }]"
+                                    defaultValue="选项1" />
                             </template>
                         </el-table-column>
                         <el-table-column prop="address" label="地址1" width="150">
@@ -197,7 +222,7 @@
                         <el-table-column prop="address" label="地址2" width="250"> </el-table-column>
                         <el-table-column prop="address" label="地址3" width="150"> </el-table-column>
                         <el-table-column prop="address1" label="地址测试" width="100"></el-table-column>
-                      
+
                         <el-table-column label="操作(固定右)" width="200" fixed="right">
                             <template slot-scope="scope">
                                 <div class="flex">
@@ -216,35 +241,36 @@
                         <a href="/register">点击一下跳转参照页面</a>
                         <!-- 暂时废弃此版本 -->
                         <!-- <GuipTable :tableData="tableData4" :key="random()" ref="multipleTable"
-                            @selectChange="handleSelectionChange" :multiple="true" autoColumn="true" width="900px"
-                            :columns="columns" @confirm="onConfirm" @cancel="onCancel">
-                            <template #popover-content-name="{ row, column }">
-                                <div>
-                                    <GuipInput ref="GuipInput" width="252px" type="text"
-                                        v-model="row[`edit_${column.prop}`]" label="排序" :prop="column.label"
-                                        placeholder="这是" />
-                                </div>
-                            </template>
-                            <template #popover-content-age="{ row, column }">
-                                <GuipInput ref="GuipInput" width="252px" v-model="row[`edit_${column.prop}`]" type="text"
-                                    label="年龄" :prop="column.label" placeholder="这是" unit="岁">
-                                </GuipInput>
-                            </template>
-                            <template #popover-content-address="{ row, column }">
-                                <div>
-                                    <p>自定义内容：{{ column.label }}</p>
-                                    <el-select v-model="row[`edit_${column.prop}`]" placeholder="请选择">
-                                        <el-option label="北京市" value="北京市" />
-                                        <el-option label="上海市" value="上海市" />
-                                        <el-option label="广州市" value="广州市" />
-                                    </el-select>
-                                </div>
-                            </template>
-                        </GuipTable> -->
+                        @selectChange="handleSelectionChange" :multiple="true" autoColumn="true" width="900px"
+                        :columns="columns" @confirm="onConfirm" @cancel="onCancel">
+                        <template #popover-content-name="{ row, column }">
+                            <div>
+                                <GuipInput ref="GuipInput" width="252px" type="text"
+                                    v-model="row[`edit_${column.prop}`]" label="排序" :prop="column.label"
+                                    placeholder="这是" />
+                            </div>
+                        </template>
+                        <template #popover-content-age="{ row, column }">
+                            <GuipInput ref="GuipInput" width="252px" v-model="row[`edit_${column.prop}`]" type="text"
+                                label="年龄" :prop="column.label" placeholder="这是" unit="岁">
+                            </GuipInput>
+                        </template>
+                        <template #popover-content-address="{ row, column }">
+                            <div>
+                                <p>自定义内容：{{ column.label }}</p>
+                                <el-select v-model="row[`edit_${column.prop}`]" placeholder="请选择">
+                                    <el-option label="北京市" value="北京市" />
+                                    <el-option label="上海市" value="上海市" />
+                                    <el-option label="广州市" value="广州市" />
+                                </el-select>
+                            </div>
+                        </template>
+                    </GuipTable> -->
                     </div>
-                </div>
+                </section>
 
-                <div id="example11">
+                <section id="example11" class="demo-section">
+                    <h2>文本域相关</h2>
                     <div class="ele-item">
                         <label for="">文本域：固定行数</label>
                         <GuipTextarea :styleObject="{ width: '450px' }" placeholder="固定行数" :rows="2" />
@@ -258,39 +284,34 @@
                         <GuipTextarea label="详细介绍" column="column" prop="doctor_detail" width="400px" height="90px"
                             placeholder="请输入描述内容" desc="啊哈哈哈哈哈哈哈哈" show-word-limit />
                     </div>
-                    <div class="shortLine">--------------------分割线------------------------------</div>
-                </div>
-
-
-                <div class="ele-item" id="example12">
-                    <label for="">输入框：</label>
-                    <GuipInput ref="GuipInput" v-model="form.input1" width="200px" height="30px"
-                        placeholder="这是自定义默认提示语" />
-                
-                    <div style="width: 20px;height: 10px;"></div>
-
-                    <GuipInput ref="GuipInput" v-model="form.input2" :maxlength="100" @change="handleInput"
-                        @blur="handleInput" @input="handleInput" @focus="handleInput" placeholder="这是自定义默认提示语" />
+                </section>
+                <section id="example12" class="demo-section">
+                    <h2 for="">输入框：</h2>
+                    <div class="flex gap24">
+                        <GuipInput ref="GuipInput" v-model="form.input1" width="200px" height="30px"
+                            placeholder="这是自定义默认提示语" />
+                        <GuipInput ref="GuipInput" v-model="form.input2" :maxlength="100" @change="handleInput"
+                            @blur="handleInput" @input="handleInput" @focus="handleInput" placeholder="这是自定义默认提示语" />
 
-                    <div style="width: 20px;height: 10px;"></div>
+                        <GuipInput v-model="form.input3" width="400px">
+                            <span slot="prependshow">http:</span>
+                            <!-- <img slot="prefix" src="../assets/radio_checked.svg" alt=""> -->
+                            <!-- 输入框后面小图标 -事件自定义 -->
+                            <i slot="suffix" class="el-icon-close" @click="handleClear"></i>
+                            <!-- <img slot="suffix" src="../assets/radio_nochecked.svg" alt="" @click="handleClear"> -->
 
-                    <GuipInput v-model="form.input3" width="400px">
-                        <span slot="prependshow">http:</span>
-                        <!-- <img slot="prefix" src="../assets/radio_checked.svg" alt=""> -->
-                        <!-- 输入框后面小图标 -事件自定义 -->
-                        <i slot="suffix" class="el-icon-close" @click="handleClear"></i>
-                        <!-- <img slot="suffix" src="../assets/radio_nochecked.svg" alt="" @click="handleClear"> -->
+                            <!-- 这个 appendshow 宽度 居中方式 自定义添加类名修改-->
+                            <!-- <GuipButton slot="appendshow" size="mini">默认按钮</GuipButton> -->
 
-                        <!-- 这个 appendshow 宽度 居中方式 自定义添加类名修改-->
-                        <!-- <GuipButton slot="appendshow" size="mini">默认按钮</GuipButton> -->
+                            <!-- 这个 appendshow 宽度 居中方式 自定义添加类名修改-->
+                            <span slot="appendshow">.checkcopy.com</span>
+                        </GuipInput>
+                    </div>
 
-                        <!-- 这个 appendshow 宽度 居中方式 自定义添加类名修改-->
-                        <span slot="appendshow">.checkcopy.com</span>
-                    </GuipInput>
                     <!-- <el-input placeholder="oieuwroieuwi" style="width:400px;height:60px"></el-input> -->
-                </div>
-                <div class="ele-item gap12" id="example13">
-                    <label for="">带间隔的label:</label>
+                </section>
+                <section id="example13" class="demo-section">
+                    <h2 for="">带间隔的label:</h2>
                     <div class="column">
                         <div class="flex mb12">
                             <div class="flex-label">
@@ -300,35 +321,17 @@
                             <p class="desc">说明：类名是固定的</p>
                         </div>
                         <GuipInput ref="GuipInput" :column="true" v-model="form.input1" width="200px" height="30px"
-                            placeholder="label有间隔的" label="输入框"  :client-form-flex="true"/>
+                            placeholder="label有间隔的" label="输入框" :client-form-flex="true" />
                         <GuipSelect ref="GuipSelect" :column="true" v-model="form.input1" width="200px" height="30px"
-                            placeholder="label有间隔的" label="下拉框"  :client-form-flex="true"/>
-                        <GuipRadio v-model="form.language" :options="languageOptions1" label="单选" prop="language" selectedLabelKey="selectedLabel"
-                            @change="radioChange" label-key="name" :disabledKeys="['1']" :client-form-flex="true"
-                            value-key="id" />
-                    </div>
-                    <div class="shortLine">--------------------分割线------------------------------</div>
-                </div>
-                <div id="example13">
-                    <div class="ele-item">
-                        <label for="">单选框：</label>
-                        <el-radio v-model="radio1" :label="1">选项一</el-radio>
-                        <el-radio v-model="radio1" :label="2">选项二</el-radio>
+                            placeholder="label有间隔的" label="下拉框" :client-form-flex="true" />
+                        <GuipRadio v-model="form.language" :options="languageOptions1" label="单选" prop="language"
+                            selectedLabelKey="selectedLabel" @change="radioChange" label-key="name"
+                            :disabledKeys="['1']" :client-form-flex="true" value-key="id" />
                     </div>
-
+                </section>
+                <section id="example14" class="demo-section">
+                    <h2>按钮集合</h2>
                     <div class="ele-item">
-                        <label for="">单选框组：</label>
-                        <el-radio-group v-model="radio" @input="radioChange">
-                            <el-radio :label="3">备选项</el-radio>
-                            <el-radio :label="6">备选项</el-radio>
-                            <el-radio :label="9">备选项</el-radio>
-                        </el-radio-group>
-                    </div>
-                    <div class="shortLine">--------------------分割线------------------------------</div>
-
-                </div>
-                <div id="example14">
-                    <div class="ele-item" >
                         <label for="">按钮尺寸：</label>
                         <GuipButton size="superBig">加盟并进入后台</GuipButton>
                         <GuipButton size="big">准备完毕，验证自有域名</GuipButton>
@@ -386,61 +389,61 @@
                     </div>
                     <div class="ele-item">
                         <label for="">常用按钮组合</label>
-                        <GroupFormBtns cancelText="取消吧" confirmText="确定啦"/>
+                        <GroupFormBtns cancelText="取消吧" confirmText="确定啦" />
                     </div>
-                    
+
                     <!-- 暂时废弃 -->
                     <!-- <div class="ele-item">
-                        <label for="">常规按钮：</label>
-                        <GuipButton>默认按钮</GuipButton>
-                        <GuipButton type="mild" size="medium">轻度按钮</GuipButton>
-                        <GuipButton type="primary">按钮</GuipButton>
-                        <GuipButton type="reverseMild">按钮</GuipButton>
-                        <GuipButton type="primary" loading>按钮</GuipButton>
-                        <GuipButton type="success" :plain="plain">按钮</GuipButton>
-                        <GuipButton type="info" :plain="plain">按钮</GuipButton>
-                        <GuipButton type="warning" :plain="plain">按钮</GuipButton>
-                        <GuipButton type="danger" :plain="plain">按钮</GuipButton>
-                    </div>
-                    <div class="ele-item">
-                        <label for="">禁用按钮：</label>
-                        <GuipButton disabled>默认按钮</GuipButton>
-                        <GuipButton type="mild" disabled size="medium">轻度按钮</GuipButton>
-                        <GuipButton type="reverseMild" disabled>按钮</GuipButton>
-                        <GuipButton type="primary" size="medium" disabled>按钮</GuipButton>
-                        <GuipButton type="success" disabled>按钮</GuipButton>
-                        <GuipButton type="info" disabled>按钮</GuipButton>
-                        <GuipButton type="warning" disabled>按钮</GuipButton>
-                        <GuipButton type="danger" disabled>按钮</GuipButton>
-                    </div>
-                    <div class="ele-item">
-                        <label for="">三种尺寸按钮：</label>
-                        <GuipButton type="primary">默认按钮</GuipButton>
-                        <GuipButton type="primary" size="medium">中等按钮</GuipButton>
-                        <GuipButton type="primary" size="small">小的按钮</GuipButton>
-                        <GuipButton type="primary" size="mini">迷你按钮</GuipButton>
-                    </div> -->
+                    <label for="">常规按钮：</label>
+                    <GuipButton>默认按钮</GuipButton>
+                    <GuipButton type="mild" size="medium">轻度按钮</GuipButton>
+                    <GuipButton type="primary">按钮</GuipButton>
+                    <GuipButton type="reverseMild">按钮</GuipButton>
+                    <GuipButton type="primary" loading>按钮</GuipButton>
+                    <GuipButton type="success" :plain="plain">按钮</GuipButton>
+                    <GuipButton type="info" :plain="plain">按钮</GuipButton>
+                    <GuipButton type="warning" :plain="plain">按钮</GuipButton>
+                    <GuipButton type="danger" :plain="plain">按钮</GuipButton>
+                </div>
+                <div class="ele-item">
+                    <label for="">禁用按钮：</label>
+                    <GuipButton disabled>默认按钮</GuipButton>
+                    <GuipButton type="mild" disabled size="medium">轻度按钮</GuipButton>
+                    <GuipButton type="reverseMild" disabled>按钮</GuipButton>
+                    <GuipButton type="primary" size="medium" disabled>按钮</GuipButton>
+                    <GuipButton type="success" disabled>按钮</GuipButton>
+                    <GuipButton type="info" disabled>按钮</GuipButton>
+                    <GuipButton type="warning" disabled>按钮</GuipButton>
+                    <GuipButton type="danger" disabled>按钮</GuipButton>
+                </div>
+                <div class="ele-item">
+                    <label for="">三种尺寸按钮：</label>
+                    <GuipButton type="primary">默认按钮</GuipButton>
+                    <GuipButton type="primary" size="medium">中等按钮</GuipButton>
+                    <GuipButton type="primary" size="small">小的按钮</GuipButton>
+                    <GuipButton type="primary" size="mini">迷你按钮</GuipButton>
+                </div> -->
                     <div class="ele-item">
                         <label for="">自定义宽高按钮：</label>
                         <GuipButton type="primary" :btnstyle="btnstyleObj">宽高自定义</GuipButton>
                     </div>
-                    <div class="shortLine">--------------------分割线------------------------------</div>
-                </div>
-
+                </section>
+                <section id="example15" class="demo-section">
+                    <h2>提示</h2>
+                    <div class="ele-item">
+                        <GuipButton type="system" @click="openMessage('success')">成功提示</GuipButton>
+                        <GuipButton type="system" @click="openMessage('error')"> 失败提示</GuipButton>
+                        <GuipButton type="system" @click="openMessage('info')">警告提示</GuipButton>
+                    </div>
+                </section>
 
-                <div class="ele-item" id="example15">
-                    <label for="">提示：</label>
-                    <GuipButton type="system" @click="openMessage('success')">成功提示</GuipButton>
-                    <GuipButton type="system" @click="openMessage('error')"> 失败提示</GuipButton>
-                    <GuipButton type="system" @click="openMessage('info')">警告提示</GuipButton>
-                    <div class="shortLine">--------------------分割线------------------------------</div>
-                </div>
-                <div id="example15">
+                <section id="example16" class="demo-section">
+                    <h2>表单布局</h2>
                     <div style="width: 600px;">
                         <h3>表单左右布局（直接使用封装好的input）</h3>
                         <!-- 表单左右布局 -->
-                        <GuipInput ref="GuipInput" addClass="w510" v-model="form.username" label="Username" prop="username"
-                            :rules="usernameRules" placeholder="这是自定义默认提11示语" />
+                        <GuipInput ref="GuipInput" addClass="w510" v-model="form.username" label="Username"
+                            prop="username" :rules="usernameRules" placeholder="这是自定义默认提11示语" />
                     </div>
 
                     <div style="width: 800px;height: 150px;">
@@ -453,27 +456,27 @@
                         <!-- 可以添加独立类名 默认宽度继承父元素 100% -->
                         <GuipFormItem column="column" class="mb24" label="自定义左侧" :required="true">
                             <!-- 如果 左侧为纯文本 无特殊格式、样式 可以直接 使用label 属性；
-                            添加必输校验 直接使用 required 属性
-                            特殊的使用slot = formLeft 自定义内容；
-                            添加独立类名，修改样式 -->
+            添加必输校验 直接使用 required 属性
+            特殊的使用slot = formLeft 自定义内容；
+            添加独立类名，修改样式 -->
                             <!-- <b slot="formLeft">自定义左侧</b> -->
                             <span class="desc" slot="formRight"><a href="https://www.baidu.com/">跳转一下</a> 自定义右侧</span>
                             <!-- 自定义下方内容 -->
                             <!-- <GuipInput slot="formDom" ref="GuipInput" column="column" v-model="form.age" prop="age"
-                                placeholder="请输入" /> -->
-                                <GuipSelect slot="formDom" v-model="form.card" clearable @change="selectChangeTest"
-                                prop="card" :options="['麻辣烫','提拉米苏']" />
+                placeholder="请输入" /> -->
+                            <GuipSelect slot="formDom" v-model="form.card" clearable @change="selectChangeTest"
+                                prop="card" :options="['麻辣烫', '提拉米苏']" />
                         </GuipFormItem>
                     </div>
-                    <div class="shortLine">--------------------分割线------------------------------</div>
-                </div>
-                <div id="example17">
+                </section>
+
+                <section id="example17" class="demo-section">
+                    <h2>开关集合</h2>
                     <div class="ele-item">
-                        <label for="">开关L</label>
                         <!-- active-value 开启状态的值 -->
                         <!-- inactive-value 关闭状态的值 -->
-                        <GuipSwitch v-model="form.switchValue3" activeText="默认类型boolean" inactiveText="关闭" :active-value="true" :inactive-value="false"
-                            @change="onSwitchChange">
+                        <GuipSwitch v-model="form.switchValue3" activeText="默认类型boolean" inactiveText="关闭"
+                            :active-value="true" :inactive-value="false" @change="onSwitchChange">
                         </GuipSwitch>
                     </div>
                     <div class="ele-item">
@@ -493,11 +496,10 @@
                         </GuipSwitch>
                         <p>当前值switchValue2：{{ this.form.switchValue2 }}</p>
                     </div>
-                    <div class="shortLine">--------------------分割线------------------------------</div>
-                </div>
-                <div id="example18">
-
+                </section>
 
+                <section id="example18" class="demo-section">
+                    <h2>输入框与下拉框组合</h2>
                     <div class="flex ele-item">
                         <label for="">input、drop组合使用(默认使用)</label>
                         <GuipFormItem column="column" class="combo-formItem w510" label="域名设置" required="true">
@@ -556,7 +558,7 @@
                                 </template>
                                 <!-- 自定义下拉选项 选中条件-->
                                 <!-- 不添加这个 默认普通选中格式  单独取值 display-key
-                                            自定义渲染项 渲染的内容自定义 ，display-key 属性不再生效-->
+                        自定义渲染项 渲染的内容自定义 ，display-key 属性不再生效-->
                                 <template #item="{ item }">
                                     <div class="flex-between">
                                         <div class="left">
@@ -595,10 +597,10 @@
                             </template>
                         </CustomDropdown>
                     </div>
-                </div>
+                </section>
+
 
             </el-form>
-            <div class="shortLine">--------------------分割线------------------------------</div>
 
             <div style="" class="ele-item">
                 <label for="">日期选择器</label>
@@ -623,59 +625,78 @@
                     <el-button @click="save" type="primary">保存</el-button>
                 </div> -->
             </div>
-            <div class="flex ele-item gap10" style="flex-wrap: wrap;" id="example19">
-                <label for="">指定位置提示</label>
-                <GuipButton type="primary" ref="button1" :btnstyle="{ width: '300px' }" @click="openDialog3('button1','bottom')">下方弹出消息提示
-                </GuipButton>
-                <GuipButton type="primary" ref="button2" :btnstyle="{ width: '300px' }" @click="openDialog3('button2','top')">上方弹出消息提示
-                </GuipButton>
-                <GuipButton type="primary" ref="button3" :btnstyle="{ width: '300px' }" @click="openDialog4('button3','top')">一直显示消息提示
-                </GuipButton>
-                <GuipButton type="primary" :btnstyle="{ width: '300px' }" @click="openDialog6">主动隐藏消息提示
-                </GuipButton>
-                <GuipButton type="primary" ref="button5" :btnstyle="{ width: '300px' }" @click="openDialog5">动态更改提示文案
-                </GuipButton>
-            </div>
 
-            <div class="flex ele-item gap10" style="flex-wrap: wrap;" id="example20">
-                <label for="">弹出框内布局集合</label>
-                <GuipButton type="primary" :btnstyle="{ width: '300px' }" @click="openDialog">打开弹框（标题巨左、按钮居右）
-                </GuipButton>
-                <GuipButton type="primary" :btnstyle="{ width: '300px' }" @click="openDialog1">打开弹框（标题巨中、按钮居中）
-                </GuipButton>
-                <GuipButton type="primary" :btnstyle="{ width: '300px' }" @click="openDialog2">打开弹框-放弃原按钮，自定义
-                </GuipButton>
-            </div>
-            <div id="example21" class="flex ele-item gap10">
-                <label for="">展示加载</label>
-                <GuipButton type="primary" @click="openLoading" size="page">展示加载动画 2s</GuipButton>
-            </div>
+            <section id="example19" class="demo-section">
+                <h2>指定位置提示</h2>
+                <div class="flex ele-item gap10" style="flex-wrap: wrap;">
+                    <GuipButton type="primary" ref="button1" :btnstyle="{ width: '300px' }"
+                        @click="openDialog3('button1', 'bottom')">下方弹出消息提示
+                    </GuipButton>
+                    <GuipButton type="primary" ref="button2" :btnstyle="{ width: '300px' }"
+                        @click="openDialog3('button2', 'top')">
+                        上方弹出消息提示
+                    </GuipButton>
+                    <GuipButton type="primary" ref="button3" :btnstyle="{ width: '300px' }"
+                        @click="openDialog4('button3', 'top')">
+                        一直显示消息提示
+                    </GuipButton>
+                    <GuipButton type="primary" :btnstyle="{ width: '300px' }" @click="openDialog6">主动隐藏消息提示
+                    </GuipButton>
+                    <GuipButton type="primary" ref="button5" :btnstyle="{ width: '300px' }" @click="openDialog5">
+                        动态更改提示文案
+                    </GuipButton>
+                </div>
+            </section>
 
-            <div class="flex ele-item" id="example22">
-                <label for="">提示信息</label>
-                <GuipToolTip content="这是一个提示">
-                    <GuipButton type="primary" size="page">悬停查看提示</GuipButton>
-                </GuipToolTip>
-
-                <GuipToolTip placement="bottom" effect="light">
-                    <GuipButton type="primary" size="page">自定义提示内容</GuipButton>
-                    <template #content>
-                        <div style="max-width: 200px">
-                            <h4>自定义标题</h4>
-                            <p>这里可以放任何HTML内容</p>
-                            <el-button size="mini">甚至按钮</el-button>
-                        </div>
-                    </template>
-                </GuipToolTip>
-                <GuipToolTip placement="bottom" effect="light" content="点击进入编辑">
-                    <svg-icon :path="require('@/assets/register/tableEdit.svg')" :color="'#8A9099'"
-                        :hoverColor="'#006AFF'" />
-                </GuipToolTip>
-            </div>
+            <section id="example20" class="demo-section">
+                <h2>弹出框内布局集合</h2>
+                <div class="flex ele-item gap10" style="flex-wrap: wrap;">
+                    <GuipButton type="primary" :btnstyle="{ width: '300px' }" @click="openDialog">打开弹框（标题巨左、按钮居右）
+                    </GuipButton>
+                    <GuipButton type="primary" :btnstyle="{ width: '300px' }" @click="openDialog1">打开弹框（标题巨中、按钮居中）
+                    </GuipButton>
+                    <GuipButton type="primary" :btnstyle="{ width: '300px' }" @click="openDialog2">打开弹框-放弃原按钮，自定义
+                    </GuipButton>
+                </div>
+            </section>
 
-            <div class="flex ele-item" id="example50">
-                <a href="https://docs.qq.com/doc/DS3dUY1NvZWhQYmNO?_t=1763546944724&nlc=1">说明文档-持续更新中</a>
-            </div>
+            <section id="example21" class="demo-section">
+                <h2>展示加载</h2>
+                <div class="flex ele-item gap10">
+                    <GuipButton type="primary" @click="openLoading" size="page">展示加载动画 2s</GuipButton>
+                </div>
+            </section>
+
+            <section id="example22" class="demo-section">
+                <h2>提示信息</h2>
+                <div class="flex ele-item">
+                    <GuipToolTip content="这是一个提示">
+                        <GuipButton type="primary" size="page">悬停查看提示</GuipButton>
+                    </GuipToolTip>
+
+                    <GuipToolTip placement="bottom" effect="light">
+                        <GuipButton type="primary" size="page">自定义提示内容</GuipButton>
+                        <template #content>
+                            <div style="max-width: 200px">
+                                <h4>自定义标题</h4>
+                                <p>这里可以放任何HTML内容</p>
+                                <el-button size="mini">甚至按钮</el-button>
+                            </div>
+                        </template>
+                    </GuipToolTip>
+                    <GuipToolTip placement="bottom" effect="light" content="点击进入编辑">
+                        <svg-icon :path="require('@/assets/register/tableEdit.svg')" :color="'#8A9099'"
+                            :hoverColor="'#006AFF'" />
+                    </GuipToolTip>
+                </div>
+            </section>
+
+            <section id="example50" class="demo-section">
+                <h2>文档链接</h2>
+                <div class="flex ele-item">
+                    <a href="https://docs.qq.com/doc/DS3dUY1NvZWhQYmNO?_t=1763546944724&nlc=1">说明文档-持续更新中</a>
+                </div>
+            </section>
 
             <GuipDialog :dialogVisible="dialogVisible" title="自定义标题" :show-close-button="false"
                 :show-cancel-button="showCancelButton" @confirm="handleConfirm" @cancel="handleCancel"
@@ -685,15 +706,14 @@
                     <p>这是一个自定义内容的弹框。</p>
                 </div>
             </GuipDialog>
-            <GuipDialog type="center" :dialogVisible="dialogVisible1" title="自定义标题"
-                @close="handleClose" @dialogVisibleChange="dialogVisibleChange">
+            <GuipDialog type="center" :dialogVisible="dialogVisible1" title="自定义标题" @close="handleClose"
+                @dialogVisibleChange="dialogVisibleChange">
                 <!-- 自定义内容 -->
                 <div>
                     <p>这是一个自定义内容的弹框。</p>
                 </div>
             </GuipDialog>
-            <GuipDialog type="center" :dialogVisible="dialogVisible2" title="自定义标题、内容、按钮"
-            :showFooterButton="false"
+            <GuipDialog type="center" :dialogVisible="dialogVisible2" title="自定义标题、内容、按钮" :showFooterButton="false"
                 @close="handleClose" @dialogVisibleChange="dialogVisibleChange">
                 <!-- 自定义内容 -->
                 <div>
@@ -704,8 +724,8 @@
                     <!-- 样式自定义 -->
                     <div class="btns gap10 mt24" style="width:100%">
                         <GuipButton type="ignore">取消</GuipButton>
-                        <GuipButton :btnstyle="{width:'240px'}">⚡️咖啡不加糖喔</GuipButton>
-                   </div>
+                        <GuipButton :btnstyle="{ width: '240px' }">⚡️咖啡不加糖喔</GuipButton>
+                    </div>
                 </div>
             </GuipDialog>
         </div>
@@ -757,7 +777,7 @@ export default {
     },
     data() {
         return {
-            content:'测试一下',
+            content: '测试一下',
             domainOptions: [
                 {
                     value: '.chachongz.com',
@@ -828,16 +848,17 @@ export default {
             form: {
                 username: '',
                 language: '',
-                switchValue3:true,
+                switchValue3: true,
                 switchValue2: '0',
                 domain_set: '',
                 domainSuffix: '11',
                 domainSuffix1: '.chachongz.com',
                 card: '1',
                 card1: '20',
-                input1: '跨年的烟火,绽放天空',
+                input1: '跨年的烟火',
                 input2: '',
                 input3: '',
+                input4: '',
             },
             languageOptions1: [
                 { label: 'JavaScript', value: 'js', selectedLabel: '333提拉米苏33', id: 0, name: 0 },
@@ -907,7 +928,7 @@ export default {
                 address: '上海市普陀区金沙江路 1518 弄',
                 price: '20',
                 age: 20,
-                statu:1,
+                statu: 1,
                 // 在支持修改的项目中，需要主动保留一份原始数据
                 edit_name: '王小虎', edit_address: '上海市普陀区金沙江路 1518 弄'
             }, {
@@ -916,7 +937,7 @@ export default {
                 address: '上海市普陀区金沙江路 151811 弄',
                 price: '10',
                 age: 30,
-                statu:1,
+                statu: 1,
 
                 edit_name: '王小虎11', edit_address: '上海市普陀区金沙江路 151811 弄'
 
@@ -925,7 +946,7 @@ export default {
                 name: '王小虎',
                 address: '上海市普陀区金沙江路 1518 弄',
                 price: '200',
-                statu:0,
+                statu: 0,
             }, {
                 date: '2016-05-01',
                 name: '王小虎',
@@ -1092,8 +1113,8 @@ export default {
                 label1: '双皮奶hhhhhhhhh',
                 label: '北京烤鸭'
             }],
-            tooltip:null
-            
+            tooltip: null
+
         }
     },
     mounted() {
@@ -1115,18 +1136,18 @@ export default {
         }
     },
     methods: {
-        switchChange(value){
-            console.log(value,'====value');
-            console.log(this.switchValue1,'===uuuu');
+        switchChange(value) {
+            console.log(value, '====value');
+            console.log(this.switchValue1, '===uuuu');
         },
-        handleEvent(data){
-            console.log(data,'data')
+        handleEvent(data) {
+            console.log(data, 'data')
         },
-        handleOptions(options){
-            console.log(options,'options')
+        handleOptions(options) {
+            console.log(options, 'options')
         },
         // 手动copy内容
-        handleClickCopy(){
+        handleClickCopy() {
             this.$copy(this.form.input1, {
                 successMsg: '内容已复制到剪贴板',
                 errorMsg: '复制失败，请按Ctrl+C手动复制',
@@ -1224,27 +1245,45 @@ export default {
         getStagePurchase() {
             this.tableLoading = true
             const that = this
-            that.tableData = []
-            this.$http('POST', '/supernew/ajax_get_stage_purchase', {
-                type: 0,
-                cur_page: 1,
-                page_size: 5,
-            }, {
-                headers: {
-                    'AUTH': '3c901fa4a19a7ad9d01238890863d499'
-                }
-            }).then(response => {
-                this.tableLoading = false
-                this.$nextTick(() => {
-                    that.tableData = response.data.list
-                    // console.log(that.tableData,'---that.tableData');
-                    // that.type2name = response.data.type2name
-                    that.total = response.data.total
-                })
-            }).catch(error => {
-                this.tableLoading = false
-                console.error(error, 'error')
-            })
+            that.tableData = [
+                {
+                    id: 1,
+                    created_at: '张三模拟数据',
+                    age: 25,
+                    email: 'zhangsan@example.com'
+                },
+                {
+                    id: 2,
+                    created_at: '李四模拟数据',
+                    age: 30,
+                    email: 'lisi@example.com'
+                },
+                // ... 更多数据项
+            ]
+            that.total = 100 // 总条数，用于分页组件显示总页数
+            setTimeout(() => {
+                that.tableLoading = false
+            }, 1000)
+            // this.$http('POST', '/supernew/ajax_get_stage_purchase', {
+            //     type: 0,
+            //     cur_page: 1,
+            //     page_size: 5,
+            // }, {
+            //     headers: {
+            //         'AUTH': '3c901fa4a19a7ad9d01238890863d499'
+            //     }
+            // }).then(response => {
+            //     this.tableLoading = false
+            //     this.$nextTick(() => {
+            //         that.tableData = response.data.list
+            //         // console.log(that.tableData,'---that.tableData');
+            //         // that.type2name = response.data.type2name
+            //         that.total = response.data.total
+            //     })
+            // }).catch(error => {
+            //     this.tableLoading = false
+            //     console.error(error, 'error')
+            // })
         },
         btnClick() {
 
@@ -1266,7 +1305,7 @@ export default {
             return randomNumber
         },
         onSwitchChange(value) {
-            console.log('Switch/ 状态变化:',this.switchValue, value);
+            console.log('Switch/ 状态变化:', this.switchValue, value);
             // console.log('Switch 状态变化:',this.form.switchValue2,this.form.switchValue3, value);
         },
         onSwitchChange1(value) {
@@ -1281,7 +1320,7 @@ export default {
         openDialog1() {
             this.dialogVisible1 = true;
         },
-        
+
         openDialog2() {
             this.dialogVisible2 = true;
             // // 销毁tooltip
@@ -1290,22 +1329,22 @@ export default {
             // // 隐藏所有tooltip
             // this.$hideAllPositionMessages()
         },
-        openDialog6(){
+        openDialog6() {
             this.tooltip.hide()
         },
-        openDialog3(el,pos){
+        openDialog3(el, pos) {
             // type属性可更换
             this.$positionMessage({
-                duration:3000,
+                duration: 3000,
                 type: 'success',
                 message: '操作成功',
                 target: this.$refs[el], // 可以是DOM元素或选择器
                 position: pos // 或 'bottom'
             }) // 3秒后自动隐藏（可选）
-           
-            console.log(this.tooltip,'tooltip',el,pos);
+
+            console.log(this.tooltip, 'tooltip', el, pos);
         },
-        openDialog4(el){
+        openDialog4(el) {
             // 一直显示
             this.tooltip = this.$positionMessage({
                 type: 'info',
@@ -1314,7 +1353,7 @@ export default {
                 duration: 0 // 0表示一直显示
             })
         },
-        openDialog5(){
+        openDialog5() {
             this.tooltip.updateMessage('更新后的文本内容----')
         },
         // 确认按钮事件
@@ -1368,8 +1407,8 @@ export default {
         radioChange(data) {
             console.log(data, 'radio--data');
         },
-        selectChangeTest(val){
-            console.log(val,'select-----选中的',this.form.card,this.form.card1);
+        selectChangeTest(val) {
+            console.log(val, 'select-----选中的', this.form.card, this.form.card1);
         },
         handleClick(row) {
             console.log(row);
@@ -1451,7 +1490,7 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-.shortLine{
+.shortLine {
     width: 100%;
     margin: 20px 0;
     height: 18px;
@@ -1459,6 +1498,7 @@ export default {
     text-align: center;
     background-color: antiquewhite;
 }
+
 .elementWrap {
     /* width: 100%; */
     padding: 30px 40px;
@@ -1568,9 +1608,25 @@ export default {
         background: linear-gradient(290deg, #FF4143 4%, #FF768B 92%);
     }
 }
-.btns{
+
+.btns {
     display: flex;
     justify-content: flex-end;
     align-items: center;
 }
+
+.demo-section {
+    margin: 30px 0;
+    padding: 20px;
+    border: 1px solid #eee;
+    border-radius: 4px;
+
+    h2 {
+        text-align: left;
+        color: #333;
+        margin: 0;
+        padding-bottom: 10px;
+        border-bottom: 1px solid #f0f0f0;
+    }
+}
 </style>
\ No newline at end of file
diff --git a/src/views/super/paiban/college.vue b/src/views/super/paiban/college.vue
index 7fc40b1..d98a1db 100644
--- a/src/views/super/paiban/college.vue
+++ b/src/views/super/paiban/college.vue
@@ -5,9 +5,21 @@
                 <div class="flex-between">
                     <div class="flex filter-area">
                         <label for="">收录申请</label>
-                        <GuipSelect width="150px" clearable label="状态" :options="['麻辣烫','提拉米苏']" v-model="review_status" />
-                        <GuipSelect width="150px" clearable label="学历" :options="['麻辣烫','提拉米苏']" v-model="degree" />
-                        <GuipInput ref="GuipInput" label="学校" placeholder="输入学校名称" v-model="school" />
+                        <GuipSelect width="180px" clearable label="状态" :options="statusList" :extraItem="{ label: '不限', value: -1 }" v-model="review_status" @change="getList"/>
+                        <GuipSelect width="180px" clearable label="学历" :options="['麻辣烫','提拉米苏']" v-model="degree" @change="getList"/>
+
+                        <GuipFormItem label="学校">    
+                            <SchoolAutoComplete
+                                slot="formDom"
+                                v-model="schoolName"
+                                url="/supernew/ajax_get_paiban_schools"
+                                :selected-school-id="school"
+                                @select="handleSchoolSelect"
+                                @clear="handleSchoolClear"
+                                placeholder="请输入学校名称"
+                                style="width: 300px;"
+                            />                        
+                        </GuipFormItem>
                     </div>
                     <GuipButton>收录成功通知</GuipButton>
                 </div>
@@ -53,7 +65,6 @@
 import GuipButton from "@/components/GuipButton.vue";
 import GuipTable from "@/components/GuipTable.vue";
 import GuipSelect from "@/components/GuipSelect.vue";
-import GuipInput from "@/components/GuipInput.vue";
 import GuipDialog from "@/components/GuipDialog.vue";
 import GuipTextarea from "@/components/GuipTextarea.vue";
 
@@ -61,7 +72,7 @@ export default {
     components: {
         GuipTextarea,
         GuipDialog,
-        GuipInput, GuipSelect,
+        GuipSelect,
         GuipTable,
         GuipButton,