|
|
|
|
<template>
|
|
|
|
|
<div class="elementWrap">
|
|
|
|
|
<!-- 以 ele-item 为类名的这种div、 label 、 h3 仅在此页面进行布局使用，复制时无需复制此元素 -->
|
|
|
|
|
|
|
|
|
|
<div class="ele-item">
|
|
|
|
|
<label for="">下拉框：</label>
|
|
|
|
|
<GuipSelect msg="Welcome to Your Vue.js App" :options="options"/>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="ele-item">
|
|
|
|
|
<label for="">表格：</label>
|
|
|
|
|
<GuipTable msg="Welcome to Your Vue.js App" :tableData="tableData">
|
|
|
|
|
<el-table-column
|
|
|
|
|
prop="date"
|
|
|
|
|
label="日期"
|
|
|
|
|
width="180">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column
|
|
|
|
|
prop="name"
|
|
|
|
|
label="姓名"
|
|
|
|
|
width="180">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column
|
|
|
|
|
prop="address"
|
|
|
|
|
label="地址">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column
|
|
|
|
|
prop="address1"
|
|
|
|
|
label="地址测试">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
</GuipTable>
|
|
|
|
|
</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 >默认按钮</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>
|
|
|
|
|
<GuipButton type="primary" :btnstyle="btnstyleObj1">随便写的</GuipButton>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="ele-item">
|
|
|
|
|
<label for="">表单校验:</label>
|
|
|
|
|
<el-form :model="form" :rules="rules" ref="myForm">
|
|
|
|
|
<el-form-item label="用户名" prop="username">
|
|
|
|
|
<el-input v-model="form.username"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<div style="display: flex;">
|
|
|
|
|
<el-button type="primary" @click="submitForm">提交</el-button>
|
|
|
|
|
<el-button @click="triggerError">触发错误</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
</el-form>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div style="width: 300px;height: 100px;">
|
|
|
|
|
<h3>表单左右布局</h3>
|
|
|
|
|
<!-- 表单左右布局 -->
|
|
|
|
|
<GuipFormItem
|
|
|
|
|
label="标题"
|
|
|
|
|
:required="true"
|
|
|
|
|
>
|
|
|
|
|
<GuipInput
|
|
|
|
|
slot="formDom"
|
|
|
|
|
ref="GuipInput"
|
|
|
|
|
width="280px"
|
|
|
|
|
height="32px"
|
|
|
|
|
placeholder="这是自定义默认提示语"/>
|
|
|
|
|
</GuipFormItem>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div style="width: 300px;height: 150px;">
|
|
|
|
|
<h3>表单上下布局</h3>
|
|
|
|
|
<GuipFormItem
|
|
|
|
|
label="标题"
|
|
|
|
|
:required="true"
|
|
|
|
|
column="column"
|
|
|
|
|
>
|
|
|
|
|
<GuipInput
|
|
|
|
|
slot="formDom"
|
|
|
|
|
ref="GuipInput"
|
|
|
|
|
width="100%"
|
|
|
|
|
height="38px"
|
|
|
|
|
placeholder="这是自定义默认提示语"/>
|
|
|
|
|
</GuipFormItem>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div style="width: 300px;height: 150px;">
|
|
|
|
|
<h3>表单上下布局(带右侧文案)</h3>
|
|
|
|
|
<GuipFormItem
|
|
|
|
|
label="标题"
|
|
|
|
|
:required="true"
|
|
|
|
|
column="column"
|
|
|
|
|
addClass="w510"
|
|
|
|
|
>
|
|
|
|
|
<span class="rightdesc" slot="formRight">这是右侧文案</span>
|
|
|
|
|
<GuipInput
|
|
|
|
|
slot="formDom"
|
|
|
|
|
ref="GuipInput"
|
|
|
|
|
width="100%"
|
|
|
|
|
height="38px"
|
|
|
|
|
placeholder="这是自定义默认提示语"/>
|
|
|
|
|
</GuipFormItem>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div style="width: 300px;height: 150px;">
|
|
|
|
|
<h3>获取手机验证码</h3>
|
|
|
|
|
<GuipFormItem
|
|
|
|
|
column="column"
|
|
|
|
|
addClass="w388"
|
|
|
|
|
>
|
|
|
|
|
<!-- 这个 form-top-icon 类名已经有样式，除此布局外需要自定义添加样式 -->
|
|
|
|
|
<div slot="formLeft" class="form-top-icon">
|
|
|
|
|
<img src="../assets/phone-fill.svg" alt="">
|
|
|
|
|
<span>手机号码</span>
|
|
|
|
|
</div>
|
|
|
|
|
<PhoneCode slot="formDom"></PhoneCode>
|
|
|
|
|
</GuipFormItem>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div style="display: flex;">
|
|
|
|
|
<!-- <GuipButton type="primary" @click="showModal">弹框</GuipButton>
|
|
|
|
|
<GuipButton type="primary" @click="showMessage">轻提示</GuipButton>
|
|
|
|
|
<GuipButton type="primary" @click="getFormdata">提交</GuipButton> -->
|
|
|
|
|
</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">
|
|
|
|
|
<el-button @click="cancellation">取消</el-button>
|
|
|
|
|
<el-button @click="save" type="primary">保存</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
|
|
|
|
import { rules } from "../assets/vabForm";
|
|
|
|
|
// @ is an alias to /src
|
|
|
|
|
import GuipFormItem from '@/components/GuipFormItem.vue';
|
|
|
|
|
import GuipForm from '@/components/GuipForm.vue';
|
|
|
|
|
import PhoneCode from '@/components/PhoneCode.vue';
|
|
|
|
|
import GuipButton from '@/components/GuipButton.vue';
|
|
|
|
|
// import GuipConfirm from '@/components/GuipConfirm.vue';
|
|
|
|
|
import GuipInput from '@/components/GuipInput.vue';
|
|
|
|
|
// import GuipModal from '@/components/GuipModal.vue';
|
|
|
|
|
import GuipSelect from '@/components/GuipSelect.vue';
|
|
|
|
|
import GuipTable from '@/components/GuipTable.vue';
|
|
|
|
|
import GuipTextarea from '@/components/GuipTextarea.vue'
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
name: 'HomeView',
|
|
|
|
|
components: {
|
|
|
|
|
GuipTextarea,
|
|
|
|
|
GuipTable,
|
|
|
|
|
GuipForm,
|
|
|
|
|
// GuipRadio,
|
|
|
|
|
GuipFormItem,
|
|
|
|
|
PhoneCode,
|
|
|
|
|
GuipButton,
|
|
|
|
|
// GuipConfirm,
|
|
|
|
|
GuipInput,
|
|
|
|
|
// GuipModal,
|
|
|
|
|
GuipSelect
|
|
|
|
|
},
|
|
|
|
|
data(){
|
|
|
|
|
return {
|
|
|
|
|
form: {
|
|
|
|
|
username: ''
|
|
|
|
|
},
|
|
|
|
|
rules: {
|
|
|
|
|
username: [
|
|
|
|
|
{ required: true, message: '请输入用户名', trigger: 'blur' }
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
msg: "测试",
|
|
|
|
|
title: "相关附件",
|
|
|
|
|
edit: false,
|
|
|
|
|
action: true,
|
|
|
|
|
header: false,
|
|
|
|
|
width: 1920,
|
|
|
|
|
height: 1080,
|
|
|
|
|
dataList: [
|
|
|
|
|
{ name: "张三", age: 19, id: 1 },
|
|
|
|
|
{ name: "李四", age: 20, id: 2 },
|
|
|
|
|
],
|
|
|
|
|
formList: [],
|
|
|
|
|
// 模拟数据 详细 测试
|
|
|
|
|
fromItem: {
|
|
|
|
|
id: "Shanghai",
|
|
|
|
|
id1: "选项4",
|
|
|
|
|
name: "用户名",
|
|
|
|
|
radioId: "2",
|
|
|
|
|
checkboxId: ["上海", "北京"],
|
|
|
|
|
textareaIner: "textarea",
|
|
|
|
|
dateTime: "2023-09-12 00:00:00",
|
|
|
|
|
uploadList: [
|
|
|
|
|
{
|
|
|
|
|
name: "小梨猫.jpg",
|
|
|
|
|
size: 160517,
|
|
|
|
|
uid: 1695291434025,
|
|
|
|
|
url: "https://ts1.cn.mm.bing.net/th?id=OIP-C.Zte3ljd4g6kqrWWyg-8fhAHaEo&w=316&h=197&c=8&rs=1&qlt=90&o=6&dpr=1.5&pid=3.1&rm=2",
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
optionss: [
|
|
|
|
|
{
|
|
|
|
|
value: "选项1",
|
|
|
|
|
label: "黄金糕",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
value: "选项2",
|
|
|
|
|
label: "双皮奶",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
value: "选项3",
|
|
|
|
|
label: "蚵仔煎",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
value: "选项4",
|
|
|
|
|
label: "龙须面",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
value: "选项5",
|
|
|
|
|
label: "北京烤鸭",
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
cities: [
|
|
|
|
|
{
|
|
|
|
|
value: "Beijing",
|
|
|
|
|
label: "北京",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
value: "Shanghai",
|
|
|
|
|
label: "上海",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
value: "Nanjing",
|
|
|
|
|
label: "南京",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
value: "Chengdu",
|
|
|
|
|
label: "成都",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
value: "Shenzhen",
|
|
|
|
|
label: "深圳",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
value: "Guangzhou",
|
|
|
|
|
label: "广州",
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
input:'hahhahah',
|
|
|
|
|
defaultValue:'asdasda',
|
|
|
|
|
radio:3,
|
|
|
|
|
radio1:5,
|
|
|
|
|
btnstyleObj:{
|
|
|
|
|
width: '247px',
|
|
|
|
|
height: '44px',
|
|
|
|
|
background: '#F2F7FF',
|
|
|
|
|
borderRadius: '2px',
|
|
|
|
|
fontSize:'14px',
|
|
|
|
|
letterSpacing: '0.08em',
|
|
|
|
|
color: '#006AFF !important'
|
|
|
|
|
},
|
|
|
|
|
btnstyleObj1:{
|
|
|
|
|
width: '180px',
|
|
|
|
|
height: '40px',
|
|
|
|
|
},
|
|
|
|
|
styleObject:{
|
|
|
|
|
width:'200px',
|
|
|
|
|
height:'40px'
|
|
|
|
|
},
|
|
|
|
|
styleObject1:{
|
|
|
|
|
width:'300px',
|
|
|
|
|
height:'50px'
|
|
|
|
|
},
|
|
|
|
|
plain:false,
|
|
|
|
|
tableData: [{
|
|
|
|
|
date: '2016-05-03',
|
|
|
|
|
name: '王小虎',
|
|
|
|
|
address: '上海市普陀区金沙江路 1518 弄'
|
|
|
|
|
}, {
|
|
|
|
|
date: '2016-05-02',
|
|
|
|
|
name: '王小虎',
|
|
|
|
|
address: '上海市普陀区金沙江路 1518 弄'
|
|
|
|
|
}, {
|
|
|
|
|
date: '2016-05-04',
|
|
|
|
|
name: '王小虎',
|
|
|
|
|
address: '上海市普陀区金沙江路 1518 弄'
|
|
|
|
|
}, {
|
|
|
|
|
date: '2016-05-01',
|
|
|
|
|
name: '王小虎',
|
|
|
|
|
address: '上海市普陀区金沙江路 1518 弄'
|
|
|
|
|
}, {
|
|
|
|
|
date: '2016-05-08',
|
|
|
|
|
name: '王小虎',
|
|
|
|
|
address: '上海市普陀区金沙江路 1518 弄'
|
|
|
|
|
}, {
|
|
|
|
|
date: '2016-05-06',
|
|
|
|
|
name: '王小虎',
|
|
|
|
|
address: '上海市普陀区金沙江路 1518 弄'
|
|
|
|
|
}, {
|
|
|
|
|
date: '2016-05-07',
|
|
|
|
|
name: '王小虎',
|
|
|
|
|
address: '上海市普陀区金沙江路 1518 弄'
|
|
|
|
|
}],
|
|
|
|
|
options: [{
|
|
|
|
|
value: '选项1',
|
|
|
|
|
label: '黄金糕'
|
|
|
|
|
}, {
|
|
|
|
|
value: '选项2',
|
|
|
|
|
label: '双皮奶'
|
|
|
|
|
}, {
|
|
|
|
|
value: '选项3',
|
|
|
|
|
label: '蚵仔煎'
|
|
|
|
|
}, {
|
|
|
|
|
value: '选项4',
|
|
|
|
|
label: '龙须面'
|
|
|
|
|
}, {
|
|
|
|
|
value: '选项5',
|
|
|
|
|
label: '北京烤鸭'
|
|
|
|
|
}],
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
methods:{
|
|
|
|
|
submitForm() {
|
|
|
|
|
this.$refs.myForm.validate((valid) => {
|
|
|
|
|
if (valid) {
|
|
|
|
|
alert('提交成功!');
|
|
|
|
|
} else {
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
triggerError() {
|
|
|
|
|
this.$refs.myForm.validateField('username', (error) => {
|
|
|
|
|
if (error) {
|
|
|
|
|
console.log('错误信息:', error);
|
|
|
|
|
} else {
|
|
|
|
|
console.log('无错误');
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
// 监听单选框组变化
|
|
|
|
|
radioChange() {
|
|
|
|
|
// console.log(this.radio,'=====');
|
|
|
|
|
},
|
|
|
|
|
getFormdata(){
|
|
|
|
|
console.log(this.$refs.GuipInput.value);
|
|
|
|
|
},
|
|
|
|
|
handleInput(value){
|
|
|
|
|
console.log(value,'value===输入框输入得知');
|
|
|
|
|
},
|
|
|
|
|
handleClear(value){
|
|
|
|
|
this.defaultValue = '这是我清除后给的文案'
|
|
|
|
|
// this.handleInput('')
|
|
|
|
|
console.log(value,'value===qinghcu');
|
|
|
|
|
},
|
|
|
|
|
getList() {
|
|
|
|
|
const dataList = rules();
|
|
|
|
|
dataList.forEach((item) => {
|
|
|
|
|
if (item.field === "id") {
|
|
|
|
|
item.options = this.cities;
|
|
|
|
|
}
|
|
|
|
|
if (item.field === "id1") {
|
|
|
|
|
item.options = this.optionss;
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
this.formList = dataList;
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
this.getList();
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
.elementWrap{
|
|
|
|
|
/* width: 100%; */
|
|
|
|
|
padding: 30px 40px;
|
|
|
|
|
.ele-item{
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: flex-start;
|
|
|
|
|
margin-bottom: 30px;
|
|
|
|
|
label{
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
width: 100px;
|
|
|
|
|
margin-right: 10px;
|
|
|
|
|
text-align: left;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
