diff --git a/src/router/index.js b/src/router/index.js
index 7c90cd6..34dd576 100755
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -642,6 +642,11 @@ router.beforeEach((to, from, next) => {
       store.commit('SET_SLIDER_MENU', 'rankMenuData');
     }
 
+    if (to.path == '/ui') { //匹配包含此路径的 侧边栏数据
+      store.commit('SET_CUSTOMIZE', true);
+      store.commit('SET_SLIDER_MENU', 'uiSliderData');
+    }
+
     if (to.path.includes('/super/paiban/')) { //匹配包含此路径的 侧边栏数据
       store.commit('SET_SIDEBAR', false);
     }
diff --git a/src/store/index.js b/src/store/index.js
index d7beab7..a448347 100755
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -24,6 +24,107 @@ export default new Vuex.Store({
     carryParam: true, //携带参数
     componentsName: '',
     currentMenuItem: null,
+    uiSliderData: [
+      {
+        name: 'UI组件库示例',
+        path: '/ui',
+        img: 'site/pay_trade.svg',
+        imgActive: require('@/assets/site/sitebase_active.svg'),
+        list: [{
+            name: '输入&下拉组合',
+            desc: 'example1',
+          },
+          {
+            name: '提示框',
+            desc: 'example2',
+          },
+          {
+            name: '实时预览外层',
+            desc: 'example3',
+          },
+          {
+            name: '状态标签',
+            desc: 'example4',
+          },
+          {
+            name: '卡片&选中样式',
+            desc: 'example5',
+          },
+          {
+            name: 'copy固定内容',
+            desc: 'example6',
+          },
+          {
+            name: '手动copy',
+            desc: 'example7',
+          },
+          {
+            name: '单选框{}+[]',
+            desc: 'example8',
+          },
+          {
+            name: '下拉框{}+[]',
+            desc: 'example9',
+          },
+          {
+            name: '表格',
+            desc: 'example10'
+          },
+          {
+            name: '文本域相关',
+            desc: 'example11'
+          },
+          {
+            name: '输入框相关',
+            desc: 'example12'
+          },
+          {
+            name: '间隔表单',
+            desc: 'example13'
+          },
+          {
+            name: '按钮',
+            desc: 'example14'
+          },
+          {
+            name: '提示(自消版)',
+            desc: 'example15'
+          },
+          {
+            name: '表单常见布局',
+            desc: 'example16'
+          },
+          {
+            name: '开关集合',
+            desc: 'example17'
+          },
+          {
+            name: 'input+drop',
+            desc: 'example18'
+          },
+          {
+            name: '自定义消息位置',
+            desc: 'example19'
+          },
+          {
+            name: '弹出框',
+            desc: 'example20'
+          },
+          {
+            name: '加载动画',
+            desc: 'example21'
+          },
+          {
+            name: 'tooltip提示',
+            desc: 'example22'
+          },
+          {
+            name: '说明文档',
+            desc: 'example50'
+          }
+        ]
+      }
+    ],//整理的组件或者样式页面
     slidermenu: [],
     // 第二种侧边栏--单项可跳转
     rankMenuData: [{
diff --git a/src/views/elementGroups.vue b/src/views/elementGroups.vue
index f4093a6..6cfa05e 100644
--- a/src/views/elementGroups.vue
+++ b/src/views/elementGroups.vue
@@ -1,33 +1,41 @@
 <template>
     <div class="main-content12">
         <div class="elementWrap">
-            <domainBind label="域名设置" @handleEvent="handleEvent" />
-            <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>
+            <div id="example1" class="mb24 ele-item gap10">
+                <label for="">输入+下拉 组合框</label>
+                <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>
+                        </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>
+                </div>
+            </div>
             
-            <div class="ele-item">
+            <div class="ele-item" id="example3">
                 <label for="">实时预览外层嵌套</label>
                 <!-- 默认 显示电脑端、手机端 -->
                 <!--  :showMobile="false"  :showPc="false" -->
@@ -41,7 +49,7 @@
                     </template>
                 </DevicePreview>
             </div>
-            <div class="ele-item gap12">
+            <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>
@@ -49,7 +57,7 @@
                 <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">
+            <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">
@@ -65,59 +73,69 @@
 
             <!-- 以 ele-item 为类名的这种div、 label 、 h3 仅在此页面进行布局使用，复制时无需复制此元素 -->
             <el-form :model="form" :rules="rules" class="el-row demo-ruleForm" ref="formRef">
-                <div class="ele-item">
-                    <label for="">copy固定内容</label>
-                    <!-- 复制固定文本 -->
-                    <GuipButton size="big" v-clipboard="'渝过田晴'">复制渝过田晴</GuipButton>
-                    
-                    <!-- 复制动态文本 -->
-                    <GuipButton size="big" v-clipboard="content">点击复制: {{ content }}</GuipButton>
-                </div>
-                <div class="ele-item">
-                    <label for="">手动点击copy</label>
-                    <GuipInput v-model="form.input1">
-                        <!-- 提示可以不添加 、图标可更换 -->
-                        <GuipToolTip content="点击复制到粘贴板"  slot="suffix">
-                            <img src="@/assets/menu/Totalprofit.svg" @click="handleClickCopy" />
-                        </GuipToolTip>
-                    </GuipInput>
-                </div>
-                <div class="ele-item">
-                    <label for="">单选框(对象格式)：</label>
-                    <GuipRadio v-model="form.language" :options="languageOptions" label="选择语言" prop="language"
-                        @change="radioChange" :rules="rules.language" />
+                <div id="example6">
+                    <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 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" />
+                <div id="example7">
+                    <div class="ele-item">
+                        <label for="">手动点击copy</label>
+                        <GuipInput v-model="form.input1">
+                            <!-- 提示可以不添加 、图标可更换 -->
+                            <GuipToolTip content="点击复制到粘贴板"  slot="suffix">
+                                <img src="@/assets/menu/Totalprofit.svg" @click="handleClickCopy" />
+                            </GuipToolTip>
+                        </GuipInput>
+                    </div>
                 </div>
+                <div id="example8">
+                    <div class="ele-item">
+                        <label for="">单选框(对象格式)：</label>
+                        <GuipRadio v-model="form.language" :options="languageOptions" label="选择语言" prop="language"
+                            @change="radioChange" :rules="rules.language" />
+                    </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" />
+                    </div>
+                    <div class="shortLine">--------------------分割线------------------------------</div>
 
-                <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'}"/>
-                        <p>j卢卡斯就到啦</p>
-                        <GuipInput ref="GuipInput" v-model="form.input2" :maxlength="100" @change="handleInput"
-                        @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="['麻辣烫','提拉米苏']" />
-                </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"/>
+                <div id="example9">
+                    <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'}"/>
+                            <p>j卢卡斯就到啦</p>
+                            <GuipInput ref="GuipInput" v-model="form.input2" :maxlength="100" @change="handleInput"
+                            @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="['麻辣烫','提拉米苏']" />
+                    </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"/>
+                    </div>
                 </div>
+            
                 <el-button type="primary" @click="submitForm">Submit</el-button>
 
-                <div>
+                <div id="example10">
                     <h3 for="">表格：(表头自定义、自定义渲染、固定列)</h3>
                     <GuipButton type="primary" @click="toggleAllSelection">全选按钮</GuipButton>
                     <GuipTable :tableData="[{payment:0,name2:10008.9,price:200}]" ref="multipleTable" @selectChange="handleSelectionChange"
@@ -193,54 +211,58 @@
                         :current-page="currentPage" :page-size=pageSize layout="prev, pager, next,jumper"
                         :total="total">
                     </el-pagination>
-                </div>
-                <div class="flex">
-                    <h3 for="">表格(带气泡框),内容自定义：</h3>
-                    <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> -->
+                    <div class="flex">
+                        <h3 for="">表格(带气泡框),内容自定义：</h3>
+                        <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> -->
+                    </div>
                 </div>
 
-                <div class="ele-item">
-                    <label for="">文本域：固定行数</label>
-                    <GuipTextarea :styleObject="{ width: '450px' }" placeholder="固定行数" :rows="2" />
-                </div>
-                <div class="ele-item">
-                    <label for="">文本域：自适应高度</label>
-                    <GuipTextarea :styleObject="{ width: '450px' }" placeholder="自适应高度" autosize />
-                </div>
-                <div class="ele-item">
-                    <label for="">文本域：自定义label、描述</label>
-                    <GuipTextarea label="详细介绍" column="column" prop="doctor_detail" width="400px" height="90px"
-                        placeholder="请输入描述内容" desc="啊哈哈哈哈哈哈哈哈" show-word-limit />
+                <div id="example11">
+                    <div class="ele-item">
+                        <label for="">文本域：固定行数</label>
+                        <GuipTextarea :styleObject="{ width: '450px' }" placeholder="固定行数" :rows="2" />
+                    </div>
+                    <div class="ele-item">
+                        <label for="">文本域：自适应高度</label>
+                        <GuipTextarea :styleObject="{ width: '450px' }" placeholder="自适应高度" autosize />
+                    </div>
+                    <div class="ele-item">
+                        <label for="">文本域：自定义label、描述</label>
+                        <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">
+
+                <div class="ele-item" id="example12">
                     <label for="">输入框：</label>
                     <GuipInput ref="GuipInput" v-model="form.input1" width="200px" height="30px"
                         placeholder="这是自定义默认提示语" />
@@ -267,7 +289,7 @@
                     </GuipInput>
                     <!-- <el-input placeholder="oieuwroieuwi" style="width:400px;height:60px"></el-input> -->
                 </div>
-                <div class="ele-item gap12">
+                <div class="ele-item gap12" id="example13">
                     <label for="">带间隔的label:</label>
                     <div class="column">
                         <div class="flex mb12">
@@ -285,220 +307,274 @@
                             @change="radioChange" label-key="name" :disabledKeys="['1']" :client-form-flex="true"
                             value-key="id" />
                     </div>
-                    
-                </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 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>
+                    </div>
 
-                <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="ele-item">
-                    <label for="">按钮尺寸：</label>
-                    <GuipButton size="superBig">加盟并进入后台</GuipButton>
-                    <GuipButton size="big">准备完毕，验证自有域名</GuipButton>
-                    <GuipButton size="page">下一步</GuipButton>
-                    <GuipButton size="primary">保存</GuipButton>
-                    <GuipButton size="table">新增站点</GuipButton>
-                    <GuipButton size="form">前往添加</GuipButton>
-                </div>
-                <div class="ele-item">
-                    <label for="">强按钮：</label>
-                    <!-- 默认 type= primary  normal 样式 -->
-                    <GuipButton>默认</GuipButton>
-                    <GuipButton loading>按钮</GuipButton>
-                    <GuipButton disabled>按钮</GuipButton>
-                </div>
-                <div class="ele-item">
-                    <label for="">ignore：</label>
-                    <GuipButton type="ignore">按钮</GuipButton>
-                    <GuipButton type="ignore" loading>按钮</GuipButton>
-                    <GuipButton type="ignore" disabled>按钮</GuipButton>
-                </div>
-                <div class="ele-item">
-                    <label for="">system：</label>
-                    <GuipButton type="system">按钮</GuipButton>
-                    <GuipButton type="system" loading>按钮</GuipButton>
-                    <GuipButton type="system" disabled>按钮</GuipButton>
-                </div>
-                <div class="ele-item">
-                    <label for="">often：</label>
-                    <GuipButton type="often">按钮</GuipButton>
-                    <GuipButton type="often" loading>按钮</GuipButton>
-                    <GuipButton type="often" disabled>按钮</GuipButton>
-                </div>
-                <div class="ele-item">
-                    <label for="">文字按钮：</label>
-                    <GuipButton type="text">强引导</GuipButton>
-                    <GuipButton type="grey">弱引导</GuipButton>
-                    <GuipButton type="warn">警示</GuipButton>
-                </div>
-                <div class="ele-item gap12">
-                    <label for="">独特按钮：可以自定义划过时 图标图片、文字颜色</label>
-                    <hover-button button-text="默认样式" :default-icon="require('../assets/upLoad_grey.svg')"
-                        :hover-icon="require('../assets/upLoad_active.svg')" default-text-color="#23242B"
-                        hover-text-color="#006AFF" @click="btnClick" />
-                    <!-- 宽高单独传递 、其余统一放置在 customStyle 中-->
-                    <hover-button button-text="自定义" :default-icon="require('@/assets/site/addIcon.svg')"
-                        :hover-icon="require('@/assets/upLoad_active.svg')" default-text-color="#626573"
-                        hover-text-color="#006AFF" width="110px" height="32px"
-                        :customStyle="{ fontSize: '12px', background: '#fff', borderRadius: '2px', borderColor: '#DFE2E6' }" />
+                    <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 class="ele-item">
-                    <label for="">独特按钮单独写样式：</label>
-                    <div class="btn1">创建首个网站</div>
-                </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> -->
-                <div class="ele-item">
-                    <label for="">自定义宽高按钮：</label>
-                    <GuipButton type="primary" :btnstyle="btnstyleObj">宽高自定义</GuipButton>
+                <div id="example14">
+                    <div class="ele-item" >
+                        <label for="">按钮尺寸：</label>
+                        <GuipButton size="superBig">加盟并进入后台</GuipButton>
+                        <GuipButton size="big">准备完毕，验证自有域名</GuipButton>
+                        <GuipButton size="page">下一步</GuipButton>
+                        <GuipButton size="primary">保存</GuipButton>
+                        <GuipButton size="table">新增站点</GuipButton>
+                        <GuipButton size="form">前往添加</GuipButton>
+                    </div>
+                    <div class="ele-item">
+                        <label for="">强按钮：</label>
+                        <!-- 默认 type= primary  normal 样式 -->
+                        <GuipButton>默认</GuipButton>
+                        <GuipButton loading>按钮</GuipButton>
+                        <GuipButton disabled>按钮</GuipButton>
+                    </div>
+                    <div class="ele-item">
+                        <label for="">ignore：</label>
+                        <GuipButton type="ignore">按钮</GuipButton>
+                        <GuipButton type="ignore" loading>按钮</GuipButton>
+                        <GuipButton type="ignore" disabled>按钮</GuipButton>
+                    </div>
+                    <div class="ele-item">
+                        <label for="">system：</label>
+                        <GuipButton type="system">按钮</GuipButton>
+                        <GuipButton type="system" loading>按钮</GuipButton>
+                        <GuipButton type="system" disabled>按钮</GuipButton>
+                    </div>
+                    <div class="ele-item">
+                        <label for="">often：</label>
+                        <GuipButton type="often">按钮</GuipButton>
+                        <GuipButton type="often" loading>按钮</GuipButton>
+                        <GuipButton type="often" disabled>按钮</GuipButton>
+                    </div>
+                    <div class="ele-item">
+                        <label for="">文字按钮：</label>
+                        <GuipButton type="text">强引导</GuipButton>
+                        <GuipButton type="grey">弱引导</GuipButton>
+                        <GuipButton type="warn">警示</GuipButton>
+                    </div>
+                    <div class="ele-item gap12">
+                        <label for="">独特按钮：可以自定义划过时 图标图片、文字颜色</label>
+                        <hover-button button-text="默认样式" :default-icon="require('../assets/upLoad_grey.svg')"
+                            :hover-icon="require('../assets/upLoad_active.svg')" default-text-color="#23242B"
+                            hover-text-color="#006AFF" @click="btnClick" />
+                        <!-- 宽高单独传递 、其余统一放置在 customStyle 中-->
+                        <hover-button button-text="自定义" :default-icon="require('@/assets/site/addIcon.svg')"
+                            :hover-icon="require('@/assets/upLoad_active.svg')" default-text-color="#626573"
+                            hover-text-color="#006AFF" width="110px" height="32px"
+                            :customStyle="{ fontSize: '12px', background: '#fff', borderRadius: '2px', borderColor: '#DFE2E6' }" />
+
+                    </div>
+                    <div class="ele-item">
+                        <label for="">独特按钮单独写样式：</label>
+                        <div class="btn1">创建首个网站</div>
+                    </div>
+                    <div class="ele-item">
+                        <label for="">常用按钮组合</label>
+                        <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> -->
+                    <div class="ele-item">
+                        <label for="">自定义宽高按钮：</label>
+                        <GuipButton type="primary" :btnstyle="btnstyleObj">宽高自定义</GuipButton>
+                    </div>
+                    <div class="shortLine">--------------------分割线------------------------------</div>
                 </div>
 
-                <div class="ele-item">
+
+                <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">
+                    <div style="width: 600px;">
+                        <h3>表单左右布局（直接使用封装好的input）</h3>
+                        <!-- 表单左右布局 -->
+                        <GuipInput ref="GuipInput" addClass="w510" v-model="form.username" label="Username" prop="username"
+                            :rules="usernameRules" placeholder="这是自定义默认提11示语" />
+                    </div>
 
-                <div style="width: 600px;">
-                    <h3>表单左右布局（直接使用封装好的input）</h3>
-                    <!-- 表单左右布局 -->
-                    <GuipInput ref="GuipInput" addClass="w510" v-model="form.username" label="Username" prop="username"
-                        :rules="usernameRules" placeholder="这是自定义默认提11示语" />
-                </div>
-
-                <div style="width: 800px;height: 150px;">
-                    <h3>表单上下布局 (宽度 510 388 用的最多 已有这2种宽度类名设置)</h3>
-                    <GuipInput ref="GuipInput" column="column" addClass="w510" required label="age" desc="这是是右侧文案"
-                        v-model="form.age" prop="age" placeholder="这是自定义默认提示语" />
+                    <div style="width: 800px;height: 150px;">
+                        <h3>表单上下布局 (宽度 510 388 用的最多 已有这2种宽度类名设置)</h3>
+                        <GuipInput ref="GuipInput" column="column" addClass="w510" required label="age" desc="这是是右侧文案"
+                            v-model="form.age" prop="age" placeholder="这是自定义默认提示语" />
+                    </div>
+                    <div style="width: 400px;height: 150px;">
+                        <h3>自定义 表单内容 </h3>
+                        <!-- 可以添加独立类名 默认宽度继承父元素 100% -->
+                        <GuipFormItem column="column" class="mb24" label="自定义左侧" :required="true">
+                            <!-- 如果 左侧为纯文本 无特殊格式、样式 可以直接 使用label 属性；
+                            添加必输校验 直接使用 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="['麻辣烫','提拉米苏']" />
+                        </GuipFormItem>
+                    </div>
+                    <div class="shortLine">--------------------分割线------------------------------</div>
                 </div>
-                <div style="width: 400px;height: 150px;">
-                    <h3>自定义 表单内容 </h3>
-                    <!-- 可以添加独立类名 默认宽度继承父元素 100% -->
-                    <GuipFormItem column="column" class="mb24" label="自定义左侧" :required="true">
-                        <!-- 如果 左侧为纯文本 无特殊格式、样式 可以直接 使用label 属性；
-                        添加必输校验 直接使用 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="['麻辣烫','提拉米苏']" />
-                    </GuipFormItem>
+                <div id="example17">
+                    <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>
+                    </div>
+                    <div class="ele-item">
+                        <label for="">开关L</label>
+                        <!-- 左侧不需要添加float 属性 -->
+                        <GuipSwitch v-model="switchValue" float="right" activeText="文案在右，默认左侧" inactiveText="关闭"
+                            @change="onSwitchChange">
+                        </GuipSwitch>
+                    </div>
+                    <div class="ele-item">
+                        <label for="">开关L</label>
+                        <GuipSwitch v-model="switchValue1" :active-value="1" :inactive-value="0" activeText="number"
+                            @change="onSwitchChange">
+                        </GuipSwitch>
+                        <GuipSwitch v-model="form.switchValue2" active-value="0" inactive-value="1" activeText="string"
+                            @change="onSwitchChange">
+                        </GuipSwitch>
+                        <p>当前值switchValue2：{{ this.form.switchValue2 }}</p>
+                    </div>
+                    <div class="shortLine">--------------------分割线------------------------------</div>
                 </div>
+                <div id="example18">
 
-                <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>
-                </div>
-                <div class="ele-item">
-                    <label for="">开关L</label>
-                    <!-- 左侧不需要添加float 属性 -->
-                    <GuipSwitch v-model="switchValue" float="right" activeText="文案在右，默认左侧" inactiveText="关闭"
-                        @change="onSwitchChange">
-                    </GuipSwitch>
-                </div>
-                <div class="ele-item">
-                    <label for="">开关L</label>
-                    <GuipSwitch v-model="switchValue1" :active-value="1" :inactive-value="0" activeText="number"
-                        @change="onSwitchChange">
-                    </GuipSwitch>
-                    <GuipSwitch v-model="form.switchValue2" active-value="0" inactive-value="1" activeText="string"
-                        @change="onSwitchChange">
-                    </GuipSwitch>
-                    <p>当前值switchValue2：{{ this.form.switchValue2 }}</p>
-                </div>
-                <div class="flex ele-item">
-                    <label for="">input、drop组合使用(默认使用)</label>
-                    <GuipFormItem column="column" class="combo-formItem w510" label="域名设置" required="true">
-                        <div slot="formDom" class="self-drop-wrap flex">
-                            <GuipInput style="width: 60%;" v-model="form.domain_set" placeholder="仅支持数字、字母">
-                            </GuipInput>
-                            <!-- 只用作选中内容展示 -->
-                            <div @click="toggleDrop" class="point flex appendDrop" style="width: 40%;">
-                                {{ currentDomainItem.name }}</div>
-                        </div>
-                        <!--触发 真实下拉操作 -->
-                        <!-- valueKey="id" displayKey="name" 不添加时，默认取值 value、label-->
-                        <CustomDropdown slot="formDom" ref="dropDomain" width="100%" v-model="form.domainSuffix1"
-                            :options="domainOptions" @change="changeSelectIp" placeholder="请选择">
-                            <template #normal>
-                                <div class="flex flex-between noraml-jump">
-                                    <div class="left">
-                                        <b>添加新域名</b>
-                                        <p class="one ft12">域名需要在阿里云完成ICP备案并解析到平台服务器</p>
-                                        <p class="ft12">如果暂时未准备好，可先选用平台免费域名，随时支持域名修改。 </p>
-                                    </div>
-                                    <div class="right">
-                                        <GuipButton size="form">前往绑定</GuipButton>
+
+                    <div class="flex ele-item">
+                        <label for="">input、drop组合使用(默认使用)</label>
+                        <GuipFormItem column="column" class="combo-formItem w510" label="域名设置" required="true">
+                            <div slot="formDom" class="self-drop-wrap flex">
+                                <GuipInput style="width: 60%;" v-model="form.domain_set" placeholder="仅支持数字、字母">
+                                </GuipInput>
+                                <!-- 只用作选中内容展示 -->
+                                <div @click="toggleDrop" class="point flex appendDrop" style="width: 40%;">
+                                    {{ currentDomainItem.name }}</div>
+                            </div>
+                            <!--触发 真实下拉操作 -->
+                            <!-- valueKey="id" displayKey="name" 不添加时，默认取值 value、label-->
+                            <CustomDropdown slot="formDom" ref="dropDomain" width="100%" v-model="form.domainSuffix1"
+                                :options="domainOptions" @change="changeSelectIp" placeholder="请选择">
+                                <template #normal>
+                                    <div class="flex flex-between noraml-jump">
+                                        <div class="left">
+                                            <b>添加新域名</b>
+                                            <p class="one ft12">域名需要在阿里云完成ICP备案并解析到平台服务器</p>
+                                            <p class="ft12">如果暂时未准备好，可先选用平台免费域名，随时支持域名修改。 </p>
+                                        </div>
+                                        <div class="right">
+                                            <GuipButton size="form">前往绑定</GuipButton>
+                                        </div>
                                     </div>
+                                </template>
+                            </CustomDropdown>
+                        </GuipFormItem>
+                    </div>
+                    <div class="flex ele-item">
+                        <label for="">input、drop组合使用(自定义下拉选择项)</label>
+                        <GuipFormItem column="column" class="combo-formItem w510" label="域名设置" required="true">
+                            <div slot="formDom" class="self-drop-wrap flex">
+                                <GuipInput style="width: 60%;" v-model="form.domain_set" placeholder="仅支持数字、字母">
+                                </GuipInput>
+                                <!-- 只用作选中内容展示 -->
+                                <div @click="toggleDrop1" class="point flex appendDrop" style="width: 40%;">
+                                    {{ currentDomainItem.name }}
                                 </div>
-                            </template>
-                        </CustomDropdown>
-                    </GuipFormItem>
-                </div>
-                <div class="flex ele-item">
-                    <label for="">input、drop组合使用(自定义下拉选择项)</label>
-                    <GuipFormItem column="column" class="combo-formItem w510" label="域名设置" required="true">
-                        <div slot="formDom" class="self-drop-wrap flex">
-                            <GuipInput style="width: 60%;" v-model="form.domain_set" placeholder="仅支持数字、字母">
-                            </GuipInput>
-                            <!-- 只用作选中内容展示 -->
-                            <div @click="toggleDrop1" class="point flex appendDrop" style="width: 40%;">
-                                {{ currentDomainItem.name }}
                             </div>
-                        </div>
-                        <!--触发 真实下拉操作 -->
-                        <!-- valueKey="id" displayKey="name" 不添加时，默认取值 value、label-->
-                        <CustomDropdown slot="formDom" ref="dropDomain1" width="100%" v-model="form.domainSuffix"
-                            :options="domainOptions" @change="changeSelectIp" valueKey="id" placeholder="请选择">
+                            <!--触发 真实下拉操作 -->
+                            <!-- valueKey="id" displayKey="name" 不添加时，默认取值 value、label-->
+                            <CustomDropdown slot="formDom" ref="dropDomain1" width="100%" v-model="form.domainSuffix"
+                                :options="domainOptions" @change="changeSelectIp" valueKey="id" placeholder="请选择">
+                                <template #normal>
+                                    <div class="flex flex-between noraml-jump">
+                                        <div class="left">
+                                            <b>添加新域名</b>
+                                            <p class="one ft12">域名需要在阿里云完成ICP备案并解析到平台服务器</p>
+                                            <p class="ft12">如果暂时未准备好，可先选用平台免费域名，随时支持域名修改。 </p>
+                                        </div>
+                                        <div class="right">
+                                            <GuipButton size="form">前往绑定</GuipButton>
+                                        </div>
+                                    </div>
+                                </template>
+                                <!-- 自定义下拉选项 选中条件-->
+                                <!-- 不添加这个 默认普通选中格式  单独取值 display-key
+                                            自定义渲染项 渲染的内容自定义 ，display-key 属性不再生效-->
+                                <template #item="{ item }">
+                                    <div class="flex-between">
+                                        <div class="left">
+                                            <p class="one">{{ item.label }}</p>
+                                        </div>
+                                        <div class="right">
+                                            <img v-if="form.domainSuffix == item.id"
+                                                src="@/assets/register/drop-selected.svg" alt="">
+                                        </div>
+                                    </div>
+                                </template>
+                            </CustomDropdown>
+                        </GuipFormItem>
+                    </div>
+                    <div class="flex ele-item">
+                        <label for="">单独实现自定义内容下拉选择</label>
+                        <CustomDropdown width="500px" v-model="form.domainSuffix" :options="domainOptions"
+                            @change="changeSelectIp" valueKey="id" placeholder="请选择">
                             <template #normal>
                                 <div class="flex flex-between noraml-jump">
                                     <div class="left">
@@ -511,54 +587,20 @@
                                     </div>
                                 </div>
                             </template>
-                            <!-- 自定义下拉选项 选中条件-->
-                            <!-- 不添加这个 默认普通选中格式  单独取值 display-key
-                                        自定义渲染项 渲染的内容自定义 ，display-key 属性不再生效-->
                             <template #item="{ item }">
                                 <div class="flex-between">
-                                    <div class="left">
-                                        <p class="one">{{ item.label }}</p>
-                                    </div>
-                                    <div class="right">
-                                        <img v-if="form.domainSuffix == item.id"
-                                            src="@/assets/register/drop-selected.svg" alt="">
-                                    </div>
+                                    <p>测试一下自定义内容{{ item.id }} + {{ item.label }}</p>
+                                    <p>易烊千玺/田栩宁</p>
                                 </div>
                             </template>
                         </CustomDropdown>
-                    </GuipFormItem>
-                </div>
-                <div class="flex ele-item">
-                    <label for="">单独实现自定义内容下拉选择</label>
-                    <CustomDropdown width="500px" v-model="form.domainSuffix" :options="domainOptions"
-                        @change="changeSelectIp" valueKey="id" placeholder="请选择">
-                        <template #normal>
-                            <div class="flex flex-between noraml-jump">
-                                <div class="left">
-                                    <b>添加新域名</b>
-                                    <p class="one ft12">域名需要在阿里云完成ICP备案并解析到平台服务器</p>
-                                    <p class="ft12">如果暂时未准备好，可先选用平台免费域名，随时支持域名修改。 </p>
-                                </div>
-                                <div class="right">
-                                    <GuipButton size="form">前往绑定</GuipButton>
-                                </div>
-                            </div>
-                        </template>
-                        <template #item="{ item }">
-                            <div class="flex-between">
-                                <p>测试一下自定义内容{{ item.id }} + {{ item.label }}</p>
-                                <p>易烊千玺/田栩宁</p>
-                            </div>
-                        </template>
-                    </CustomDropdown>
+                    </div>
                 </div>
 
-
             </el-form>
-            <div style="width: 100%;margin: 20px 0;height: 20px;background-color: antiquewhite;">
-                --------------------分割线0------------------------------</div>
+            <div class="shortLine">--------------------分割线------------------------------</div>
 
-            <div style="display: flex;" class="ele-item">
+            <div style="" class="ele-item">
                 <label for="">日期选择器</label>
                 <el-date-picker v-model="date1" type="daterange" range-separator="至" start-placeholder="开始日期"
                     end-placeholder="结束日期">
@@ -581,29 +623,35 @@
                     <el-button @click="save" type="primary">保存</el-button>
                 </div> -->
             </div>
-            <div class="flex ele-item gap10" style="flex-wrap: wrap;">
-                <label for="">一些功能集合</label>
+            <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" ref="button5" :btnstyle="{ width: '300px' }" @click="openDialog5">动态更改提示文案
-                </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>
 
-            <div class="flex ele-item">
+            <div class="flex ele-item" id="example22">
                 <label for="">提示信息</label>
                 <GuipToolTip content="这是一个提示">
                     <GuipButton type="primary" size="page">悬停查看提示</GuipButton>
@@ -625,6 +673,10 @@
                 </GuipToolTip>
             </div>
 
+            <div class="flex ele-item" id="example50">
+                <a href="https://docs.qq.com/doc/DS3dUY1NvZWhQYmNO?_t=1763546944724&nlc=1">说明文档-持续更新中</a>
+            </div>
+
             <GuipDialog :dialogVisible="dialogVisible" title="自定义标题" :show-close-button="false"
                 :show-cancel-button="showCancelButton" @confirm="handleConfirm" @cancel="handleCancel"
                 @close="handleClose" @dialogVisibleChange="dialogVisibleChange">
@@ -679,6 +731,7 @@ import SvgIcon from '@/components/SvgIcon.vue';
 import PromptText from "@/components/PromptText.vue";
 import DevicePreview from "@/components/PreviewTab.vue";
 import domainBind from "@/components/domainBind.vue";
+import GroupFormBtns from '@/components/GroupFormBtns.vue';
 
 
 export default {
@@ -699,7 +752,8 @@ export default {
         SvgIcon,
         GuipFormItem,
         DevicePreview,
-        CustomDropdown
+        CustomDropdown,
+        GroupFormBtns
     },
     data() {
         return {
@@ -1248,8 +1302,6 @@ export default {
                 target: this.$refs[el], // 可以是DOM元素或选择器
                 position: pos // 或 'bottom'
             }) // 3秒后自动隐藏（可选）
-
-
            
             console.log(this.tooltip,'tooltip',el,pos);
         },
@@ -1399,6 +1451,14 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
+.shortLine{
+    width: 100%;
+    margin: 20px 0;
+    height: 18px;
+    font-size: 12px;
+    text-align: center;
+    background-color: antiquewhite;
+}
 .elementWrap {
     /* width: 100%; */
     padding: 30px 40px;