|
|
|
@ -1,42 +1,102 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div>
|
|
|
|
|
<div class="tips">
|
|
|
|
|
<div class="tips" v-if="companyInfo === null">
|
|
|
|
|
<a-space size="large">
|
|
|
|
|
第一步:请完善企业信息后,提交至工作人员审核
|
|
|
|
|
<a-button type="primary" shape="round" size="default">添加小区</a-button>
|
|
|
|
|
<a-button type="primary" shape="round" size="default"
|
|
|
|
|
>关联企业信息</a-button
|
|
|
|
|
>
|
|
|
|
|
</a-space>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="tips" v-else-if="estateList===null">
|
|
|
|
|
<a-space size="large" >
|
|
|
|
|
第二步:请添加小区信息,用于绑定后续的功能
|
|
|
|
|
<a-button type="primary" shape="round" size="default"
|
|
|
|
|
>创建小区</a-button
|
|
|
|
|
>
|
|
|
|
|
</a-space>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="tips" v-else>
|
|
|
|
|
第三步:请在添加的小区中绑定购买的套餐 或 在购买功能时直接选择小区绑定
|
|
|
|
|
</div>
|
|
|
|
|
<div class="content">
|
|
|
|
|
<div class="top" v-if='companyInfo===null||[]'>
|
|
|
|
|
<div class="top" v-if="companyInfo === null">
|
|
|
|
|
<span style="margin-left: 30px">
|
|
|
|
|
<div class="top-a">你好,{{ username }}</div>
|
|
|
|
|
<div class="top-b">请尽快绑定企业信息,进行下一步</div>
|
|
|
|
|
</span>
|
|
|
|
|
<span>
|
|
|
|
|
<a-button type="primary" class="top-c" shape="round" size="default" @click="settled()">入驻企业申请</a-button>
|
|
|
|
|
<a-button
|
|
|
|
|
type="primary"
|
|
|
|
|
class="top-c"
|
|
|
|
|
shape="round"
|
|
|
|
|
size="default"
|
|
|
|
|
@click="settled()"
|
|
|
|
|
>入驻企业申请</a-button
|
|
|
|
|
>
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div v-else class="top">
|
|
|
|
|
<a-row>
|
|
|
|
|
<a-col class='com-name'>{{companyInfo.companyName}}</a-col>
|
|
|
|
|
<div v-else style="background: #fff">
|
|
|
|
|
<a-row style="padding-left:40px;vertical-align:middle;height:130px;padding: 20px;">
|
|
|
|
|
<a-col :span="3">
|
|
|
|
|
<!-- 头像没接口 -->
|
|
|
|
|
</a-col>
|
|
|
|
|
<a-col :span="16">
|
|
|
|
|
<a-col class="com-name">{{ companyInfo.companyName }}</a-col>
|
|
|
|
|
<a-col class="com-sta">{{
|
|
|
|
|
companyInfo.status === 1
|
|
|
|
|
? "待确认"
|
|
|
|
|
: companyInfo.status === 2
|
|
|
|
|
? "已通过"
|
|
|
|
|
: companyInfo.status === 3
|
|
|
|
|
? "已驳回"
|
|
|
|
|
: "已取消"
|
|
|
|
|
}}</a-col>
|
|
|
|
|
<a-col :span="3" class="com-conta"
|
|
|
|
|
><a-icon type="user" /> {{ companyInfo.contactsName }}</a-col
|
|
|
|
|
>
|
|
|
|
|
<a-col :span="6" class="com-conta"
|
|
|
|
|
><a-icon type="phone" /> {{ companyInfo.contactsTel }}</a-col
|
|
|
|
|
>
|
|
|
|
|
<a-col :span="10" class="com-conta"
|
|
|
|
|
><a-icon type="mail" /> {{
|
|
|
|
|
companyInfo.contactsEmail
|
|
|
|
|
}}</a-col
|
|
|
|
|
>
|
|
|
|
|
</a-col>
|
|
|
|
|
<a-col :span="5" style="line-height:130px;margin-top:-20px"
|
|
|
|
|
><a-button shape="round" size="default" @click="edit()"
|
|
|
|
|
>修改公司信息</a-button
|
|
|
|
|
></a-col
|
|
|
|
|
>
|
|
|
|
|
</a-row>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="content">
|
|
|
|
|
<a-row>
|
|
|
|
|
<a-col :span='18'>
|
|
|
|
|
<a-col :span="18">
|
|
|
|
|
<div class="card-a">
|
|
|
|
|
<div class="cardTitle">小区后台</div>
|
|
|
|
|
<div class="card-a-content">
|
|
|
|
|
<div v-if="estateList !== null">
|
|
|
|
|
<div style="color:#D53131" v-show="estateList===null">当前尚未添加小区信息</div>
|
|
|
|
|
<div style="color: #d53131" v-show="estateList === null">
|
|
|
|
|
当前尚未添加小区信息
|
|
|
|
|
</div>
|
|
|
|
|
<div class="cardBox">
|
|
|
|
|
<a-card hoverable style="width: 30%;margin:10px;" v-for="(item,index) in estateList" :key="index">
|
|
|
|
|
<a-card
|
|
|
|
|
hoverable
|
|
|
|
|
style="width: 30%; margin: 10px"
|
|
|
|
|
v-for="(item, index) in estateList"
|
|
|
|
|
:key="index"
|
|
|
|
|
>
|
|
|
|
|
<template slot="actions" class="ant-card-actions">
|
|
|
|
|
<span>绑定</span>
|
|
|
|
|
<span>详情</span>
|
|
|
|
|
</template>
|
|
|
|
|
<a-card-meta :title="item.name" :description="'小区地址:'+item.addressDetails">
|
|
|
|
|
<a-card-meta
|
|
|
|
|
:title="item.name"
|
|
|
|
|
:description="'小区地址:' + item.addressDetails"
|
|
|
|
|
>
|
|
|
|
|
</a-card-meta>
|
|
|
|
|
</a-card>
|
|
|
|
|
<a-card class="card-add">
|
|
|
|
@ -49,17 +109,43 @@
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</a-col>
|
|
|
|
|
<a-col :span='6'>
|
|
|
|
|
<a-col :span="6">
|
|
|
|
|
<div class="card-b">
|
|
|
|
|
<div class="cardTitle">订单列表</div>
|
|
|
|
|
<div class="cardBox" v-if="orderList !== null">
|
|
|
|
|
<a-card hoverable v-for="item,index in orderList" :key="index" :title="item.code" style="width: 80%;margin:auto;margin-top:20px">
|
|
|
|
|
<a-card
|
|
|
|
|
hoverable
|
|
|
|
|
v-for="(item, index) in orderList"
|
|
|
|
|
:key="index"
|
|
|
|
|
:title="item.code"
|
|
|
|
|
style="width: 80%; margin: auto; margin-top: 20px"
|
|
|
|
|
>
|
|
|
|
|
<span slot="extra" href="#">{{ item.status }}</span>
|
|
|
|
|
<span style="color:#00000073;font-size:14px;display:flex;justify-content:space-between;"><span>购买功能</span> <span style="color:#D53131;">{{'¥'+item.amount}}</span></span>
|
|
|
|
|
<span
|
|
|
|
|
style="
|
|
|
|
|
color: #00000073;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
"
|
|
|
|
|
><span>购买功能</span>
|
|
|
|
|
<span style="color: #d53131">{{
|
|
|
|
|
"¥" + item.amount
|
|
|
|
|
}}</span></span
|
|
|
|
|
>
|
|
|
|
|
<div class="functionBox">
|
|
|
|
|
<div class="functionList" v-for="ele,indexs in item.functionList" :key="indexs">{{ele}}</div>
|
|
|
|
|
<div
|
|
|
|
|
class="functionList"
|
|
|
|
|
v-for="(ele, indexs) in item.functionList"
|
|
|
|
|
:key="indexs"
|
|
|
|
|
>
|
|
|
|
|
{{ ele }}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="margin-top: 10px">
|
|
|
|
|
{{ item.time
|
|
|
|
|
}}<span style="color: #00000073; font-size: 14px">到期</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="margin-top:10px;">{{item.time}}<span style="color:#00000073;font-size:14px;">到期</span></div>
|
|
|
|
|
<template slot="actions" class="ant-card-actions">
|
|
|
|
|
<span>续费</span>
|
|
|
|
|
<span>解绑</span>
|
|
|
|
@ -77,15 +163,10 @@
|
|
|
|
|
<div class="card-b-content" v-else>
|
|
|
|
|
<div>当前无订单</div>
|
|
|
|
|
<div>请购买后台功能</div>
|
|
|
|
|
<a-card hoverable class="addOrder">
|
|
|
|
|
<div class="card-b-content-add" @click="newOrder">
|
|
|
|
|
点击新建订单
|
|
|
|
|
</div>
|
|
|
|
|
</a-card>
|
|
|
|
|
<a @click="newOrder"> 点击新建订单</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</a-col>
|
|
|
|
|
|
|
|
|
|
</a-row>
|
|
|
|
|
</div>
|
|
|
|
|
<a-modal
|
|
|
|
@ -100,20 +181,22 @@
|
|
|
|
|
ref="ruleForm"
|
|
|
|
|
:model="form"
|
|
|
|
|
:rules="rules"
|
|
|
|
|
label-col="inline"
|
|
|
|
|
layout="vertical"
|
|
|
|
|
>
|
|
|
|
|
<a-form-model-item label="小区全称">
|
|
|
|
|
<a-input style="60%"></a-input>
|
|
|
|
|
<a-form-model-item label="小区全称" prop='name'>
|
|
|
|
|
<a-input v-model="form.name" style="60%"></a-input>
|
|
|
|
|
</a-form-model-item>
|
|
|
|
|
<a-form-model-item label="小区地址">
|
|
|
|
|
<a-input style="60%"></a-input>
|
|
|
|
|
<a-form-model-item label="小区地址" prop='address'>
|
|
|
|
|
<allCity></allCity>
|
|
|
|
|
</a-form-model-item>
|
|
|
|
|
<a-form-model-item label="小区详细地址" prop='addressDetails'>
|
|
|
|
|
<a-input v-model="form.addressDetails" style="60%"></a-input>
|
|
|
|
|
</a-form-model-item>
|
|
|
|
|
<a-form-model-item label="小区图片">
|
|
|
|
|
<span>要求文件大小不超过5mb,支持jpg、png格式</span>
|
|
|
|
|
<a-row>
|
|
|
|
|
<a-col :span='12'>
|
|
|
|
|
<div class="uploadImg">+</div>
|
|
|
|
|
<a-col :span="12">
|
|
|
|
|
<commonUpload @handleChange='handleChange'></commonUpload>
|
|
|
|
|
</a-col>
|
|
|
|
|
</a-row>
|
|
|
|
|
</a-form-model-item>
|
|
|
|
@ -124,100 +207,78 @@
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import { consoleShow } from "@/api/basic/console";
|
|
|
|
|
import { consoleShow, communityInsert } from "@/api/basic/console";
|
|
|
|
|
import store from "@/store";
|
|
|
|
|
export default {
|
|
|
|
|
name: "Console",
|
|
|
|
|
computed: {
|
|
|
|
|
username() {
|
|
|
|
|
return store.state.Info.name //用户
|
|
|
|
|
}
|
|
|
|
|
return store.state.Info.name; //用户
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
form:{},
|
|
|
|
|
rules:{},
|
|
|
|
|
orderList:[
|
|
|
|
|
{
|
|
|
|
|
code:'N20212121212',
|
|
|
|
|
status:'付款成功',
|
|
|
|
|
time:'2023/3/3',
|
|
|
|
|
amount:'25000',
|
|
|
|
|
functionList:['基础功能','缴费管理','智慧商城','运营管理','设置']
|
|
|
|
|
},{
|
|
|
|
|
code:'N20212121212',
|
|
|
|
|
status:'付款成功',
|
|
|
|
|
time:'2023/3/3',
|
|
|
|
|
functionList:['基础功能','缴费管理','智慧商城','运营管理','设置']
|
|
|
|
|
},{
|
|
|
|
|
code:'N20212121212',
|
|
|
|
|
status:'付款成功',
|
|
|
|
|
time:'2023/3/3',
|
|
|
|
|
functionList:['基础功能','缴费管理','智慧商城','运营管理','设置']
|
|
|
|
|
form: {
|
|
|
|
|
name:'',
|
|
|
|
|
address:undefined,
|
|
|
|
|
addressDetails:'',
|
|
|
|
|
communityUrls:[]
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
estateList:[
|
|
|
|
|
{
|
|
|
|
|
name:'万科·滨江花园',
|
|
|
|
|
addressDetails:'江苏省盐城市建湖县沿河镇 11 单元 250 室',
|
|
|
|
|
status:'生效中'
|
|
|
|
|
},{
|
|
|
|
|
name:'万科·滨江花园',
|
|
|
|
|
address:'江苏省盐城市建湖县沿河镇 11 单元 250 室',
|
|
|
|
|
status:'生效中'
|
|
|
|
|
},{
|
|
|
|
|
name:'万科·滨江花园',
|
|
|
|
|
address:'江苏省盐城市建湖县沿河镇 11 单元 250 室',
|
|
|
|
|
status:'生效中'
|
|
|
|
|
},{
|
|
|
|
|
name:'万科·滨江花园',
|
|
|
|
|
address:'江苏省盐城市建湖县沿河镇 11 单元 250 室',
|
|
|
|
|
status:'生效中'
|
|
|
|
|
},{
|
|
|
|
|
name:'万科·滨江花园',
|
|
|
|
|
address:'江苏省盐城市建湖县沿河镇 11 单元 250 室',
|
|
|
|
|
status:'生效中'
|
|
|
|
|
rules: {
|
|
|
|
|
name:[{required: true,message: "请输入",trigger: "blur"}],
|
|
|
|
|
address:[{required: true,message: "请选择",trigger: "change"}],
|
|
|
|
|
addressDetails:[{required: true,message: "请输入",trigger: "blur"}],
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name:'万科·滨江花园',
|
|
|
|
|
address:'江苏省盐城市建湖县沿河镇 11 单元 250 室 11 单元 250 室 11 单元 250 室 11 单元 250 室 11 单元苏省盐城市建湖县沿河镇 11 单元 250 室 11 单元 250 室 11 单元 250 室苏省盐城市建湖县沿河镇 11 单元 250 室 11 单元 250 室 11 单元 250 室 11 单元 250 室 11 单元 11 单元 250 室 11 单元 250 室',
|
|
|
|
|
status:'生效中'
|
|
|
|
|
},{
|
|
|
|
|
name:'万科·滨江花园',
|
|
|
|
|
address:'江苏省盐城市建湖县沿河镇 11 建湖县沿河镇 11 单元 250建湖县沿河镇 11 建湖县沿河镇 11 单元 250建湖县沿河镇 11 单元 250建湖县沿河镇 11 单元 250建湖县沿河镇 11 单元 250建湖县沿河镇 11 单元 250建湖县沿河镇 11 单元 250建湖县沿河镇 11 单元 250建湖县沿河镇 11 单元 250单元 250建湖县沿河镇 11 单元 250建湖县沿河镇 11 单元 250单元 250 室',
|
|
|
|
|
status:'生效中'
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
orderList: [],
|
|
|
|
|
estateList: [],
|
|
|
|
|
visible: false,
|
|
|
|
|
confirmLoading: false,
|
|
|
|
|
companyInfo:{}
|
|
|
|
|
}
|
|
|
|
|
companyInfo: {},
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
// this.getData()
|
|
|
|
|
this.getData();
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
async getData() {
|
|
|
|
|
let res = await consoleShow()
|
|
|
|
|
let res = await consoleShow();
|
|
|
|
|
// consoleCompanyVo
|
|
|
|
|
this.estateList = res.data.consoleCommunityVoList
|
|
|
|
|
this.orderList = res.data.consoleOrderVoList
|
|
|
|
|
this.companyInfo = res.data.consoleCompanyVo
|
|
|
|
|
this.estateList = res.data.consoleCommunityVoList;
|
|
|
|
|
this.orderList = res.data.consoleOrderVoList;
|
|
|
|
|
this.companyInfo = res.data.consoleCompanyVo;
|
|
|
|
|
},
|
|
|
|
|
settled() {
|
|
|
|
|
this.$router.push({name:'settled'})
|
|
|
|
|
this.$router.push({ name: "settled" });
|
|
|
|
|
},
|
|
|
|
|
addVillage() {
|
|
|
|
|
this.visible=true
|
|
|
|
|
this.visible = true;
|
|
|
|
|
},
|
|
|
|
|
edit(){},
|
|
|
|
|
handleOk() {
|
|
|
|
|
this.$refs.ruleForm.validate(async (valid) => {
|
|
|
|
|
if (valid) {
|
|
|
|
|
let res = await communityInsert(this.form);
|
|
|
|
|
if (res.code === 200) {
|
|
|
|
|
this.$message.success(res.msg);
|
|
|
|
|
this.handleCancel()
|
|
|
|
|
} else {
|
|
|
|
|
this.$message.error(res.msg);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
handleOk(){},
|
|
|
|
|
handleCancel() {
|
|
|
|
|
this.visible = false
|
|
|
|
|
this.$refs.ruleForm.resetFields();
|
|
|
|
|
this.visible = false;
|
|
|
|
|
},
|
|
|
|
|
newOrder() {
|
|
|
|
|
this.$router.push({name:'newOrder'})
|
|
|
|
|
}
|
|
|
|
|
this.$router.push({ name: "newOrder" });
|
|
|
|
|
},
|
|
|
|
|
handleChange(data){
|
|
|
|
|
this.form.communityUrls = data[0].response.data
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
@ -247,12 +308,12 @@ export default {
|
|
|
|
|
height: 30px;
|
|
|
|
|
}
|
|
|
|
|
.top-b {
|
|
|
|
|
color:#000000A6 ;
|
|
|
|
|
color: #000000a6;
|
|
|
|
|
line-height: 20px;
|
|
|
|
|
height: 20px;
|
|
|
|
|
}
|
|
|
|
|
.top-c {
|
|
|
|
|
margin-right:30px
|
|
|
|
|
margin-right: 30px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.card-a {
|
|
|
|
@ -272,7 +333,7 @@ export default {
|
|
|
|
|
.card-add {
|
|
|
|
|
width: 30%;
|
|
|
|
|
margin: 10px;
|
|
|
|
|
border:1px dashed #9DB7DF;
|
|
|
|
|
border: 1px dashed #9db7df;
|
|
|
|
|
border-radius: 3%;
|
|
|
|
|
}
|
|
|
|
|
/deep/.ant-card-body {
|
|
|
|
@ -289,7 +350,7 @@ export default {
|
|
|
|
|
// margin-top: 50px;
|
|
|
|
|
}
|
|
|
|
|
.card-a-content-add {
|
|
|
|
|
color:#9DB7DF;
|
|
|
|
|
color: #9db7df;
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
text-align: center;
|
|
|
|
@ -309,17 +370,17 @@ export default {
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
/deep/.ant-card-head {
|
|
|
|
|
background: #205FBD1A;
|
|
|
|
|
background: #205fbd1a;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.cardBox {
|
|
|
|
|
// text-align: center;
|
|
|
|
|
/deep/.ant-card-head {
|
|
|
|
|
background: #205FBD1A;
|
|
|
|
|
background: #205fbd1a;
|
|
|
|
|
}
|
|
|
|
|
/deep/.ant-card-head-title {
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
color: #000000A6;
|
|
|
|
|
color: #000000a6;
|
|
|
|
|
}
|
|
|
|
|
.functionBox {
|
|
|
|
|
display: flex;
|
|
|
|
@ -327,8 +388,8 @@ export default {
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
width: 90%;
|
|
|
|
|
.functionList {
|
|
|
|
|
color: #1F519B;
|
|
|
|
|
border:1px solid #1F519B;
|
|
|
|
|
color: #1f519b;
|
|
|
|
|
border: 1px solid #1f519b;
|
|
|
|
|
border-radius: 5%;
|
|
|
|
|
margin: 2px;
|
|
|
|
|
padding: 2px;
|
|
|
|
@ -336,25 +397,17 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.addOrder {
|
|
|
|
|
border:1px dashed #9DB7DF;
|
|
|
|
|
border: 1px dashed #9db7df;
|
|
|
|
|
border-radius: 3%;
|
|
|
|
|
width: 80%;
|
|
|
|
|
height: 200px;
|
|
|
|
|
margin: auto;
|
|
|
|
|
margin-top: 20px;
|
|
|
|
|
.card-b-content-add{
|
|
|
|
|
color:#9DB7DF;
|
|
|
|
|
font-size:16px;
|
|
|
|
|
cursor:pointer;
|
|
|
|
|
text-align: center;
|
|
|
|
|
vertical-align: middle;
|
|
|
|
|
line-height: 72px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.uploadImg {
|
|
|
|
|
background: #0000000A;
|
|
|
|
|
background: #0000000a;
|
|
|
|
|
border: 2px solid #00000029;
|
|
|
|
|
color: #00000029;
|
|
|
|
|
width: 180px;
|
|
|
|
@ -364,4 +417,30 @@ export default {
|
|
|
|
|
font-size: 60px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
.card-b-content-add {
|
|
|
|
|
color: #9db7df;
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
text-align: center;
|
|
|
|
|
vertical-align: middle;
|
|
|
|
|
line-height: 72px;
|
|
|
|
|
}
|
|
|
|
|
.com-name {
|
|
|
|
|
font-size: 20px;
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
line-height: 26px;
|
|
|
|
|
color: #000000;
|
|
|
|
|
}
|
|
|
|
|
.com-sta {
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
line-height: 30px;
|
|
|
|
|
color: #5bc980;
|
|
|
|
|
}
|
|
|
|
|
.com-conta {
|
|
|
|
|
line-height: 30px;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
color: #000000;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|