From 907f617e40569933a5d19c03e93e84b10ab4b13f Mon Sep 17 00:00:00 2001
From: zq <136432190602163.com>
Date: Thu, 12 Jun 2025 15:39:36 +0800
Subject: [PATCH] =?UTF-8?q?ui=E9=A1=B5=E9=9D=A2=E8=BE=B9=E8=B7=9D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/style/theme/common.scss          |   3 +
 src/views/ConfigureServicePrices.vue |   6 +-
 src/views/elementGroups.vue          | 742 ++++++++++++++++++-----------------
 3 files changed, 378 insertions(+), 373 deletions(-)

diff --git a/src/style/theme/common.scss b/src/style/theme/common.scss
index 01734ca..83578d3 100644
--- a/src/style/theme/common.scss
+++ b/src/style/theme/common.scss
@@ -34,6 +34,9 @@ body {
     font-weight: normal;
     letter-spacing: 0.08em;
 }
+.main-content12{
+    padding: 12px;
+}
 // 变小手
 .point{
     cursor: pointer;
diff --git a/src/views/ConfigureServicePrices.vue b/src/views/ConfigureServicePrices.vue
index da3cc40..29c1ab2 100644
--- a/src/views/ConfigureServicePrices.vue
+++ b/src/views/ConfigureServicePrices.vue
@@ -44,7 +44,7 @@
                                         <div class="left-pay-item ">
                                             <div class="flex-between">
                                                 <span>微信收款</span>
-                                                <GuipSwitch v-model="form.weixinFlag" activeText="开启" inactiveText="关闭"
+                                                <GuipSwitch :modelValue="form.weixinFlag" activeText="开启" inactiveText="关闭"
                                                     @change="onSwitchChange">
                                                 </GuipSwitch>
                                             </div>
@@ -53,7 +53,7 @@
                                         <div class="left-pay-item ">
                                             <div class="flex-between">
                                                 <span>支付宝收款</span>
-                                                <GuipSwitch v-model="form.zhifubaoFlag" activeText="开启"
+                                                <GuipSwitch :modelValue="form.zhifubaoFlag" activeText="开启"
                                                     inactiveText="关闭" @change="onSwitchChange">
                                                 </GuipSwitch>
                                             </div>
@@ -91,7 +91,7 @@
                                         <div class="left-pay-item ">
                                             <div class="flex-between">
                                                 <span>淘宝收款</span>
-                                                <GuipSwitch v-model="form.weixinFlag" activeText="开启" inactiveText="关闭"
+                                                <GuipSwitch :modelValue="form.weixinFlag" activeText="开启" inactiveText="关闭"
                                                     @change="onSwitchChange">
                                                 </GuipSwitch>
                                             </div>
diff --git a/src/views/elementGroups.vue b/src/views/elementGroups.vue
index 3175aab..97512f6 100644
--- a/src/views/elementGroups.vue
+++ b/src/views/elementGroups.vue
@@ -1,388 +1,390 @@
 <template>
-    <div class="elementWrap">
-        <!-- 以 ele-item 为类名的这种div、 label 、 h3 仅在此页面进行布局使用，复制时无需复制此元素 -->
-        <el-form :model="form" :rules="rules" class="el-row demo-ruleForm" ref="formRef">
-
-            <div class="ele-item">
-                <label for="">单选框11：</label>
-                <GuipRadio v-model="form.language" :options="languageOptions" label="选择语言" prop="language"
-                    @change="radioChange" :rules="rules.language" />
-            </div>
-            <div class="ele-item">
-                <label for="">下拉框：</label>
-                <GuipSelect width="600px" v-model="form.card" label="卡片" prop="card" :options="options"
-                    defaultValue="选项1" />
-            </div>
-            <div>
-                <h3 for="">表格：(表头自定义、自定义渲染、固定列)</h3>
-                <GuipButton type="primary" @click="toggleAllSelection">全选按钮</GuipButton>
-
-                <el-form>
-                    <GuipTable :tableData="tableData" 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="type">
-                            <template slot="header">
-                                <GuipSelect class="custom-select" v-model="chktype" :options="type2filterOptions"
-                                    defaultValue="全部检测类型" @change="changeSelectType" />
-                            </template>
+     <div class="main-content12">
+        <div class="elementWrap">
+            <!-- 以 ele-item 为类名的这种div、 label 、 h3 仅在此页面进行布局使用，复制时无需复制此元素 -->
+            <el-form :model="form" :rules="rules" class="el-row demo-ruleForm" ref="formRef">
+
+                <div class="ele-item">
+                    <label for="">单选框11：</label>
+                    <GuipRadio v-model="form.language" :options="languageOptions" label="选择语言" prop="language"
+                        @change="radioChange" :rules="rules.language" />
+                </div>
+                <div class="ele-item">
+                    <label for="">下拉框：</label>
+                    <GuipSelect width="600px" v-model="form.card" label="卡片" prop="card" :options="options"
+                        defaultValue="选项1" />
+                </div>
+                <div>
+                    <h3 for="">表格：(表头自定义、自定义渲染、固定列)</h3>
+                    <GuipButton type="primary" @click="toggleAllSelection">全选按钮</GuipButton>
+
+                    <el-form>
+                        <GuipTable :tableData="tableData" 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="type">
+                                <template slot="header">
+                                    <GuipSelect class="custom-select" v-model="chktype" :options="type2filterOptions"
+                                        defaultValue="全部检测类型" @change="changeSelectType" />
+                                </template>
+
+                                <template slot-scope="scope">
+                                    {{ type2name[scope.row.type] }}
+                                </template>
+                            </el-table-column> -->
+
+                            <el-table-column prop="created_at" label="时间" width="200">
+                                <template slot-scope="scope">
+                                    <div class="flex cell_render">
+                                        <GuipToolTip content="文字居中">
+                                            <span :class="(scope.row.payment == '0' ? 'normal_payment' : 'self_payment')">{{
+                                                scope.row.payment
+                                                    ==
+                                                '0' ? '文字居中' : '文字居中' }}</span>
+                                        </GuipToolTip>
+                                        <GuipToolTip content="图标居中">
+                                            <svg-icon :size="16" :path="require('@/assets/register/tableEdit.svg')" :color="'#8A9099'"
+                                            :hoverColor="'#006AFF'" />
+                                        </GuipToolTip>
 
-                            <template slot-scope="scope">
-                                {{ type2name[scope.row.type] }}
-                            </template>
-                        </el-table-column> -->
-
-                        <el-table-column prop="created_at" label="时间" width="200">
-                            <template slot-scope="scope">
-                                <div class="flex cell_render">
-                                    <GuipToolTip content="文字居中">
-                                        <span :class="(scope.row.payment == '0' ? 'normal_payment' : 'self_payment')">{{
-                                            scope.row.payment
-                                                ==
-                                            '0' ? '文字居中' : '文字居中' }}</span>
-                                    </GuipToolTip>
-                                    <GuipToolTip content="图标居中">
-                                        <svg-icon :size="16" :path="require('@/assets/register/tableEdit.svg')" :color="'#8A9099'"
-                                        :hoverColor="'#006AFF'" />
-                                    </GuipToolTip>
-
-                                </div>
-                            </template>
-                        </el-table-column>
-                        <el-table-column prop="unit_num" label="数量" width="180">
-                            <template slot-scope="scope">
-                                <GuipToolTip content="单元格局中">
+                                    </div>
+                                </template>
+                            </el-table-column>
+                            <el-table-column prop="unit_num" label="数量" width="180">
+                                <template slot-scope="scope">
+                                    <GuipToolTip content="单元格局中">
+                                        <div class="flex">
+                                            <span :class="(scope.row.payment == '0' ? 'normal_payment' : 'self_payment')">{{
+                                                scope.row.payment
+                                                    ==
+                                                '0' ? '单元格局中' : '单元格局中' }}</span>
+                                                <svg-icon :size="16" :path="require('@/assets/register/tableEdit.svg')" :color="'#8A9099'"
+                                                :hoverColor="'#006AFF'" />
+                                        </div>
+
+                                        </GuipToolTip>
+                                </template>
+
+                            </el-table-column>
+                            <el-table-column prop="name2" label="姓名" width="150"></el-table-column>
+                            <el-table-column prop="price" label="价格" width="150">
+                                <!-- <template slot-scope="scope">
+                                <span @click="handlePriceClick(scope.row)">{{ scope.row.price }}</span>
+                            </template> -->
+                                <!-- 气泡弹出框  后期样式自定义-->
+                                <!-- <template slot-scope="scope">
+                                    <el-popover trigger="click" placement="top">
+                                        <input type="text">
+                                        <div slot="reference" class="name-wrapper">
+                                            <el-tag size="medium">{{ scope.row.price }}</el-tag>
+                                        </div>
+                                    </el-popover>
+                                </template> -->
+                            </el-table-column>
+                            <el-table-column prop="address" label="地址1" width="150"> </el-table-column>
+                            <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 prop="price2" label="价格" width="300">
+                                <template slot-scope="scope">
+                                    <GuipSelect width="200px" @change="changeSelect(scope.row)" v-model="form.card"
+                                        prop="card" :options="options" defaultValue="选项1" />
+                                </template>
+                            </el-table-column>
+                            <el-table-column label="操作(固定右)" width="200" fixed="right">
+                                <template slot-scope="scope">
                                     <div class="flex">
-                                        <span :class="(scope.row.payment == '0' ? 'normal_payment' : 'self_payment')">{{
-                                            scope.row.payment
-                                                ==
-                                            '0' ? '单元格局中' : '单元格局中' }}</span>
-                                             <svg-icon :size="16" :path="require('@/assets/register/tableEdit.svg')" :color="'#8A9099'"
-                                             :hoverColor="'#006AFF'" />
+                                        <el-button @click="handleClick(scope.row)" type="text">查看</el-button>
+                                        <el-button type="text">编辑</el-button>
                                     </div>
-
-                                    </GuipToolTip>
+                                </template>
+                            </el-table-column>
+                        </GuipTable>
+                        <el-pagination background @size-change='handleSizeChange' @current-change='handleCurrentChange'
+                            :current-page="currentPage" :page-size=pageSize layout="prev, pager, next,jumper"
+                            :total="total">
+                        </el-pagination>
+                    </el-form>
+                </div>
+
+                <div>
+                    <h3 for="">表格(带气泡框),内容自定义：</h3>
+                    <el-form>
+                        <GuipTable :tableData="tableData2" :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" v-model="row[`edit_${column.prop}`]" label="排序"
+                                        :prop="column.label" placeholder="这是" />
+                                </div>
                             </template>
-
-                        </el-table-column>
-                        <el-table-column prop="name2" label="姓名" width="150"></el-table-column>
-                        <el-table-column prop="price" label="价格" width="150">
-                            <!-- <template slot-scope="scope">
-                            <span @click="handlePriceClick(scope.row)">{{ scope.row.price }}</span>
-                        </template> -->
-                            <!-- 气泡弹出框  后期样式自定义-->
-                            <!-- <template slot-scope="scope">
-                                <el-popover trigger="click" placement="top">
-                                    <input type="text">
-                                    <div slot="reference" class="name-wrapper">
-                                        <el-tag size="medium">{{ scope.row.price }}</el-tag>
-                                    </div>
-                                </el-popover>
-                            </template> -->
-                        </el-table-column>
-                        <el-table-column prop="address" label="地址1" width="150"> </el-table-column>
-                        <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 prop="price2" label="价格" width="300">
-                            <template slot-scope="scope">
-                                <GuipSelect width="200px" @change="changeSelect(scope.row)" v-model="form.card"
-                                    prop="card" :options="options" defaultValue="选项1" />
+                            <template #popover-content-age="{ row, column }">
+                                <GuipInput ref="GuipInput" width="252px" v-model="row[`edit_${column.prop}`]" label="年龄"
+                                    :prop="column.label" placeholder="这是" unit="岁">
+                                </GuipInput>
                             </template>
-                        </el-table-column>
-                        <el-table-column label="操作(固定右)" width="200" fixed="right">
-                            <template slot-scope="scope">
-                                <div class="flex">
-                                    <el-button @click="handleClick(scope.row)" type="text">查看</el-button>
-                                    <el-button type="text">编辑</el-button>
+                            <!-- 自定义地址列的气泡框内容 -->
+                            <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>
-                        </el-table-column>
-                    </GuipTable>
-                    <el-pagination background @size-change='handleSizeChange' @current-change='handleCurrentChange'
-                        :current-page="currentPage" :page-size=pageSize layout="prev, pager, next,jumper"
-                        :total="total">
-                    </el-pagination>
-                </el-form>
-            </div>
-
-            <div>
-                <h3 for="">表格(带气泡框),内容自定义：</h3>
-                <el-form>
-                    <GuipTable :tableData="tableData2" :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" 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}`]" 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>
-
-                </el-form>
+                        </GuipTable>
+
+                    </el-form>
+                </div>
+
+                <div class="ele-item">
+                    <label for="">文本域：</label>
+                    <GuipTextarea disabled :styleObject="styleObject" />
+                </div>
+
+
+                <div class="ele-item">
+                    <label for="">输入框：</label>
+                    <GuipInput ref="GuipInput" width="200px" height="30px" disabled placeholder="这是自定义默认提示语" />
+
+                    <div style="width: 20px;height: 10px;"></div>
+
+                    <GuipInput ref="GuipInput" :styleObject="styleObject1" defaultValue="爱吃麻辣烫" :maxlength="100"
+                        @change="handleInput" @blur="handleInput" @input="handleInput" @focus="handleInput"
+                        placeholder="这是自定义默认提示语" />
+
+                    <div style="width: 20px;height: 10px;"></div>
+
+                    <GuipInput :defaultValue="defaultValue" @clear="handleClear" 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 宽度 居中方式 自定义添加类名修改-->
+                        <span slot="appendshow">.checkcopy.com</span>
+                    </GuipInput>
+                    <!-- <el-input placeholder="oieuwroieuwi" style="width:400px;height:60px"></el-input> -->
+                </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="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="">弱按钮：</label>
+                    <GuipButton type="ignore">按钮</GuipButton>
+                    <GuipButton type="ignore" loading>按钮</GuipButton>
+                    <GuipButton type="ignore" disabled>按钮</GuipButton>
+                </div>
+                <div class="ele-item">
+                    <label for="">中按钮：</label>
+                    <GuipButton type="system">按钮</GuipButton>
+                    <GuipButton type="system" loading>按钮</GuipButton>
+                    <GuipButton type="system" disabled>按钮</GuipButton>
+                </div>
+                <div class="ele-item">
+                    <label for="">文字按钮：</label>
+                    <GuipButton type="text" >强引导</GuipButton>
+                    <GuipButton type="grey" >弱引导</GuipButton>
+                </div>
+                <div class="ele-item">
+                    <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" />
+                </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>
+
+                <div class="ele-item">
+                    <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>
+
+                <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" label="age" desc="这是是右侧文案" v-model="form.age"
+                        prop="age" placeholder="这是自定义默认提示语" />
+                </div>
+
+                <div class="ele-item">
+                    <label for="">开关L</label>
+                    <GuipSwitch :modelValue="switchValue" activeText="开启" inactiveText="关闭" @change="onSwitchChange">
+                    </GuipSwitch>
+                </div>
+                <el-table
+        :data="tableData3"
+        :span-method="objectSpanMethod"
+        :border="true"
+        style="width: 100%; margin-top: 20px">
+        <el-table-column
+            prop="id"
+            label="ID"
+            width="180">
+        </el-table-column>
+        <el-table-column
+            prop="name"
+            label="姓名">
+        </el-table-column>
+        <el-table-column
+            prop="amount1"
+            label="数值 1（元）">
+        </el-table-column>
+        <el-table-column
+            prop="amount2"
+            label="数值 2（元）">
+        </el-table-column>
+        <el-table-column
+            prop="amount3"
+            label="数值 3（元）">
+        </el-table-column>
+        </el-table>
+                <el-button type="primary" @click="submitForm">Submit</el-button>
+
+            </el-form>
+            <div style="width: 100%;margin: 20px 0;height: 20px;background-color: antiquewhite;">
+                --------------------分割线0------------------------------</div>
+
+            <div style="display: flex;" class="ele-item">
+                <label for="">日期选择器</label>
+                <el-date-picker v-model="date1" type="daterange" range-separator="至" start-placeholder="开始日期"
+                    end-placeholder="结束日期">
+                </el-date-picker>
             </div>
 
-            <div class="ele-item">
-                <label for="">文本域：</label>
-                <GuipTextarea disabled :styleObject="styleObject" />
+            <div ref="ScaleBox" class="ScaleBox">
+                <!-- Form  组件-->
+                <!-- @headdenForm="headdenForm" -->
+                <!-- @changeSelect="changeSelect" -->
+                <!-- <GuipForm
+                    :fromItem="fromItem"
+                    :formNewList="formList"
+                    :detail="edit"
+                    :disabled="edit"
+                    ref="VabForm"
+                />
+                <div class="cardfooter" style="display: flex;">
+                    <el-button @click="cancellation">取消</el-button>
+                    <el-button @click="save" type="primary">保存</el-button>
+                </div> -->
             </div>
-
-
-            <div class="ele-item">
-                <label for="">输入框：</label>
-                <GuipInput ref="GuipInput" width="200px" height="30px" disabled placeholder="这是自定义默认提示语" />
-
-                <div style="width: 20px;height: 10px;"></div>
-
-                <GuipInput ref="GuipInput" :styleObject="styleObject1" defaultValue="爱吃麻辣烫" :maxlength="100"
-                    @change="handleInput" @blur="handleInput" @input="handleInput" @focus="handleInput"
-                    placeholder="这是自定义默认提示语" />
-
-                <div style="width: 20px;height: 10px;"></div>
-
-                <GuipInput :defaultValue="defaultValue" @clear="handleClear" 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 宽度 居中方式 自定义添加类名修改-->
-                    <span slot="appendshow">.checkcopy.com</span>
-                </GuipInput>
-                <!-- <el-input placeholder="oieuwroieuwi" style="width:400px;height:60px"></el-input> -->
+            <div class="flex ele-item">
+                <label for="">一些功能集合</label>
+                <GuipButton type="primary" @click="openDialog">打开弹框</GuipButton>
+                <GuipButton type="primary" @click="openLoading" size="page">展示加载动画 2s</GuipButton>
             </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="flex ele-item">
+                <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>
 
-            <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="">弱按钮：</label>
-                <GuipButton type="ignore">按钮</GuipButton>
-                <GuipButton type="ignore" loading>按钮</GuipButton>
-                <GuipButton type="ignore" disabled>按钮</GuipButton>
-            </div>
-            <div class="ele-item">
-                <label for="">中按钮：</label>
-                <GuipButton type="system">按钮</GuipButton>
-                <GuipButton type="system" loading>按钮</GuipButton>
-                <GuipButton type="system" disabled>按钮</GuipButton>
-            </div>
-            <div class="ele-item">
-                <label for="">文字按钮：</label>
-                <GuipButton type="text" >强引导</GuipButton>
-                <GuipButton type="grey" >弱引导</GuipButton>
-            </div>
-            <div class="ele-item">
-                <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" />
-            </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>
-
-            <div class="ele-item">
-                <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>
-
-            <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" label="age" desc="这是是右侧文案" v-model="form.age"
-                    prop="age" placeholder="这是自定义默认提示语" />
-            </div>
-
-            <div class="ele-item">
-                <label for="">开关L</label>
-                <GuipSwitch v-model="switchValue" activeText="开启" inactiveText="关闭" @change="onSwitchChange">
-                </GuipSwitch>
-            </div>
-            <el-table
-      :data="tableData3"
-      :span-method="objectSpanMethod"
-      :border="true"
-      style="width: 100%; margin-top: 20px">
-      <el-table-column
-        prop="id"
-        label="ID"
-        width="180">
-      </el-table-column>
-      <el-table-column
-        prop="name"
-        label="姓名">
-      </el-table-column>
-      <el-table-column
-        prop="amount1"
-        label="数值 1（元）">
-      </el-table-column>
-      <el-table-column
-        prop="amount2"
-        label="数值 2（元）">
-      </el-table-column>
-      <el-table-column
-        prop="amount3"
-        label="数值 3（元）">
-      </el-table-column>
-    </el-table>
-            <el-button type="primary" @click="submitForm">Submit</el-button>
-
-        </el-form>
-        <div style="width: 100%;margin: 20px 0;height: 20px;background-color: antiquewhite;">
-            --------------------分割线0------------------------------</div>
-
-        <div style="display: flex;" class="ele-item">
-            <label for="">日期选择器</label>
-            <el-date-picker v-model="date1" type="daterange" range-separator="至" start-placeholder="开始日期"
-                end-placeholder="结束日期">
-            </el-date-picker>
+            <GuipDialog :dialogVisible="dialogVisible" title="自定义标题" :show-close-button="false"
+                :show-cancel-button="showCancelButton" @confirm="handleConfirm" @cancel="handleCancel" @close="handleClose"
+                @dialogVisibleChange="dialogVisibleChange">
+                <!-- 自定义内容 -->
+                <div>
+                    <p>这是一个自定义内容的弹框。</p>
+                </div>
+            </GuipDialog>
         </div>
-
-        <div ref="ScaleBox" class="ScaleBox">
-            <!-- Form  组件-->
-            <!-- @headdenForm="headdenForm" -->
-            <!-- @changeSelect="changeSelect" -->
-            <!-- <GuipForm
-                :fromItem="fromItem"
-                :formNewList="formList"
-                :detail="edit"
-                :disabled="edit"
-                ref="VabForm"
-            />
-            <div class="cardfooter" style="display: flex;">
-                <el-button @click="cancellation">取消</el-button>
-                <el-button @click="save" type="primary">保存</el-button>
-            </div> -->
-        </div>
-        <div class="flex ele-item">
-            <label for="">一些功能集合</label>
-            <GuipButton type="primary" @click="openDialog">打开弹框</GuipButton>
-            <GuipButton type="primary" @click="openLoading" size="page">展示加载动画 2s</GuipButton>
-        </div>
-        <div class="flex ele-item">
-            <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>
-
-        <GuipDialog :dialogVisible="dialogVisible" title="自定义标题" :show-close-button="false"
-            :show-cancel-button="showCancelButton" @confirm="handleConfirm" @cancel="handleCancel" @close="handleClose"
-            @dialogVisibleChange="dialogVisibleChange">
-            <!-- 自定义内容 -->
-            <div>
-                <p>这是一个自定义内容的弹框。</p>
-            </div>
-        </GuipDialog>
     </div>
 </template>