806 lines
16 KiB
Vue
806 lines
16 KiB
Vue
<template>
|
|
<view class="qingjia-apply">
|
|
<uni-nav-bar @clickLeft="goBack()" class="nav-bar" height="110rpx" leftWidth="200rpx" leftText="入厂项目"
|
|
leftIcon="left" border backgroundColor="#2cade8" color="#fff" fixed statusBar shadow></uni-nav-bar>
|
|
<view class="apply-info">
|
|
<view class="form-content ">
|
|
<view class="form-item border-bottom">
|
|
<view class="form-left">
|
|
<text class="star">*</text>
|
|
<text class="form-left-text">名称</text>
|
|
</view>
|
|
<view class="form-right">
|
|
<input type="text" v-model="formData.name" maxlength="50" placeholder="请输入项目名称" />
|
|
</view>
|
|
</view>
|
|
<view class="form-item border-bottom">
|
|
<view class="form-left">
|
|
<text class="star">*</text>
|
|
<text class="form-left-text">项目类型</text>
|
|
</view>
|
|
<view class="form-right">
|
|
<uni-data-select v-model="formData.type" :localdata="range" label="项目类型">
|
|
</uni-data-select>
|
|
</view>
|
|
</view>
|
|
<view class="form-item border-bottom">
|
|
<view class="form-left">
|
|
<text class="star">*</text>
|
|
<text class="form-left-text">合同编号</text>
|
|
</view>
|
|
<view class="form-right">
|
|
<input type="text" v-model="formData.contract_number" maxlength="50" placeholder="请输入" />
|
|
</view>
|
|
</view>
|
|
<view class="form-item border-bottom">
|
|
<view class="form-left">
|
|
<text class="star">*</text>
|
|
<text class="form-left-text">进厂时间</text>
|
|
</view>
|
|
<view class="form-right form-date">
|
|
<uni-datetime-picker
|
|
v-model="datetimerange"
|
|
type="datetimerange"
|
|
rangeSeparator="至"
|
|
:hide-second="true"
|
|
/>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="form-item border-bottom">
|
|
<view class="form-left">
|
|
<!-- <text class="star">*</text> -->
|
|
<text class="form-left-text">所属部门</text>
|
|
</view>
|
|
<view class="form-right">
|
|
<ba-tree-picker ref="dept_ter_Picker" :multiple='false' @select-change="select_dept_ter_Change" title="请选择属地部门"
|
|
:localdata="depRange" valueKey="id" textKey="name" childrenKey="children" />
|
|
<view @click="showDeptTerPicker" style="position: relative;display: flex;">
|
|
<text type="text">{{dept_ter_name}}</text>
|
|
<uni-icons style="position: absolute; right: 0;" @click="showDeptTerPicker" type="arrowright" color="#999999"/>
|
|
</view>
|
|
<!-- <uni-data-picker placeholder="请选择所属部门" popup-title="请选择所属部门" :localdata="depRange" v-model="formData.belong_dept">
|
|
</uni-data-picker> -->
|
|
</view>
|
|
</view>
|
|
|
|
<view class="form-item border-bottom" v-if="vuex_user.type=='employee'">
|
|
<view class="form-left">
|
|
<text class="star">*</text>
|
|
<text class="form-left-text">相关方</text>
|
|
</view>
|
|
<view class="form-right">
|
|
<uni-data-select v-model="formData.rparty" :localdata="rpmRange" label="相关方">
|
|
</uni-data-select>
|
|
</view>
|
|
</view>
|
|
<view class="btn">
|
|
<button type="primary" class="save-btn" @click="saveSubmit">下一步</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import getStartAndEnd from '../../../utils/getTime.js';
|
|
import nonNullCheck from '../../../utils/nonNullCheck.js';
|
|
import baTreePicker from "../../comm/ba-tree-picker/ba-tree-picker.vue";
|
|
export default {
|
|
name: "rpjCreate",
|
|
components: {
|
|
baTreePicker
|
|
},
|
|
data() {
|
|
return {
|
|
formData: {
|
|
name: '', //项目名称
|
|
type: '', //项目类型
|
|
contract_number: '', //合同编号
|
|
come_time: '', //进场时间
|
|
leave_time: '', //离场时间
|
|
belong_dept: null, //所属部门
|
|
rparty: null, //相关方
|
|
},
|
|
dept_ter_name:'请选择所属部门',
|
|
showBtns:false,
|
|
datetimerange: [],
|
|
depRange: [],
|
|
rpmRange: [],
|
|
rpj:null,
|
|
range: [{
|
|
value: 10,
|
|
text: "建筑施工"
|
|
},
|
|
{
|
|
value: 20,
|
|
text: "设备设施检维修"
|
|
},
|
|
{
|
|
value: 30,
|
|
text: "保安保洁服务"
|
|
},
|
|
{
|
|
value: 40,
|
|
text: "其他"
|
|
},
|
|
],
|
|
}
|
|
},
|
|
watch: {
|
|
datetimerange(newval) {
|
|
this.formData.come_time = this.datetimerange[0]
|
|
this.formData.leave_time = this.datetimerange[1]
|
|
},
|
|
},
|
|
onLoad(params) {
|
|
debugger;
|
|
if(params.rpj){
|
|
this.rpj = params.rpj;
|
|
this.type = params.type;
|
|
this.getRpjDetail();
|
|
if(params.type==='edit'){
|
|
this.showBtns = true;
|
|
}else{
|
|
this.showBtns = false;
|
|
}
|
|
}else{
|
|
this.datetimerange = getStartAndEnd()
|
|
this.showBtns = true;
|
|
}
|
|
},
|
|
onShow() {
|
|
this.getdept();
|
|
this.getRpartyList();
|
|
},
|
|
methods: {
|
|
showDeptTerPicker(){
|
|
this.$refs.dept_ter_Picker._show();
|
|
},
|
|
select_dept_ter_Change(ids, names){
|
|
this.formData.dept_ter = ids[0];
|
|
this.dept_ter_name = names;
|
|
},
|
|
//获取dept
|
|
getdept() {
|
|
let that = this;
|
|
that.$u.api.deptList({
|
|
page: 0
|
|
}).then(res => {
|
|
that.depRange = that.redata(res);
|
|
|
|
console.log(that.depRange)
|
|
})
|
|
},
|
|
getRpjDetail(){
|
|
let that = this;
|
|
that.$u.api.rpjItem(that.rpj).then((res) => {
|
|
that.formData.name = res.name; //
|
|
that.formData.type = res.type; //
|
|
that.formData.contract_number = res.contract_number; //
|
|
that.formData.come_time = res.come_time; //
|
|
that.formData.leave_time = res.leave_time; //
|
|
that.formData.belong_dept = res.belong_dept; //
|
|
that.formData.rparty = res.rparty; //
|
|
that.datetimerange = [res.come_time, res.leave_time]
|
|
console.log(res);
|
|
debugger;
|
|
});
|
|
},
|
|
//获取dept
|
|
getRpartyList() {
|
|
let that = this;
|
|
this.$u.api.rpartyList({
|
|
page: 0
|
|
}).then(res => {
|
|
let rpmList = [];
|
|
let obj = {};
|
|
res.forEach(item => {
|
|
obj = {
|
|
value: null,
|
|
text: ''
|
|
};
|
|
obj.value = item.id;
|
|
obj.text = item.name;
|
|
rpmList.push(obj);
|
|
})
|
|
this.rpmRange = rpmList
|
|
})
|
|
},
|
|
saveSubmit(type) {
|
|
let that = this;
|
|
if (!that.paramsCheck()) {
|
|
return;
|
|
} else {
|
|
debugger;
|
|
if (that.rpj) {
|
|
that.$u.api.rpjUpdate(that.rpj, that.formData).then(res => {
|
|
if (res.err_msg) {
|
|
} else {
|
|
let params = `?rpj=${that.rpj}&rparty=${that.formData.rparty}&rpjName=${that.formData.name}`;
|
|
uni.navigateTo({
|
|
url: '/pages/workSpace/rpj/rpjFiles' + params
|
|
})
|
|
}
|
|
})
|
|
} else {
|
|
that.$u.api.rpjCreate(that.formData).then(res => {
|
|
debugger;
|
|
if (res.err_msg) {} else {
|
|
that.rpj = res.id;
|
|
let params = `?rpj=${res.id}&rparty=${that.formData.rparty}&rpjName=${that.formData.name}`;
|
|
uni.navigateTo({
|
|
url: '/pages/workSpace/rpj/rpjFiles' + params
|
|
})
|
|
}
|
|
})
|
|
}
|
|
}
|
|
|
|
},
|
|
/* 参数验证 */
|
|
paramsCheck() {
|
|
let that= this;
|
|
debugger;
|
|
console.log(that.formData)
|
|
if (!nonNullCheck(this.formData.name)) {
|
|
uni.showToast({
|
|
title: '请输入项目名称',
|
|
icon: "none"
|
|
})
|
|
return false;
|
|
}
|
|
if (!nonNullCheck(this.formData.type)) {
|
|
uni.showToast({
|
|
title: '请选择项目类型',
|
|
icon: "none"
|
|
})
|
|
return false;
|
|
}
|
|
|
|
if (!nonNullCheck(this.formData.contract_number)) {
|
|
uni.showToast({
|
|
title: '请填写合同编号',
|
|
icon: "none"
|
|
})
|
|
return false;
|
|
}
|
|
if (!nonNullCheck(this.formData.come_time)) {
|
|
uni.showToast({
|
|
title: '请选择进场时间',
|
|
icon: "none"
|
|
})
|
|
return false;
|
|
}
|
|
if (!nonNullCheck(this.formData.leave_time)) {
|
|
uni.showToast({
|
|
title: '请选择离场时间',
|
|
icon: "none"
|
|
})
|
|
return false;
|
|
}
|
|
if (this.formData.come_time>=this.formData.leave_time){
|
|
uni.showToast({
|
|
title: '时间选择范围错误',
|
|
icon: "none"
|
|
})
|
|
return false;
|
|
}
|
|
|
|
// if (!nonNullCheck(this.formData.belong_dept)) {
|
|
// uni.showToast({
|
|
// title: '请选择所属部门',
|
|
// icon: "none"
|
|
// })
|
|
// return false;
|
|
// }
|
|
|
|
// if (!nonNullCheck(this.formData.rparty)) {
|
|
// uni.showToast({
|
|
// title: '请选择相关方',
|
|
// icon: "none"
|
|
// })
|
|
// return false;
|
|
// }
|
|
return true;
|
|
},
|
|
redata(postList) {
|
|
let posts = [];
|
|
postList.forEach((item) => {
|
|
let obj = new Object();
|
|
obj = {
|
|
...item
|
|
};
|
|
obj.value = item.id;
|
|
obj.text = item.name;
|
|
obj.parentId = item.parent;
|
|
posts.push(obj);
|
|
});
|
|
let obj = posts.reduce((res, v) => ((res[v.id] = v), res), {}); //Object
|
|
let arr = [];
|
|
for (let item of posts) {
|
|
if (item.parentId == null) {
|
|
arr.push(item);
|
|
continue;
|
|
}
|
|
let parent = obj[item.parentId];
|
|
parent.children = parent.children ? parent.children : [];
|
|
parent.children.push(item);
|
|
}
|
|
console.log(arr);
|
|
return arr;
|
|
},
|
|
goBack() {
|
|
uni.navigateBack({
|
|
delta: 1
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.qingjia-apply {
|
|
background-color: #f3fbff;
|
|
padding-bottom: 227rpx;
|
|
}
|
|
|
|
/* >>>.uni-status-bar {
|
|
height: 0 !important;
|
|
} */
|
|
|
|
>>>.uni-navbar-btn-text text {
|
|
font-size: 32rpx !important;
|
|
}
|
|
|
|
.apply-info {
|
|
width: 720rpx;
|
|
margin: 0 auto;
|
|
background-color: #FFFFFF;
|
|
border-radius: 10rpx;
|
|
padding: 25rpx 32rpx;
|
|
box-sizing: border-box;
|
|
margin-top: 24rpx;
|
|
}
|
|
|
|
.border-bottom {
|
|
border-bottom: 1rpx solid #eeeeee;
|
|
}
|
|
|
|
.star {
|
|
color: red;
|
|
}
|
|
|
|
.top-title-text {
|
|
padding-left: 24rpx;
|
|
position: relative;
|
|
font-family: PingFang-SC-Medium;
|
|
font-size: 34rpx;
|
|
line-height: 72rpx;
|
|
color: #383838;
|
|
}
|
|
|
|
.top-title-text::before {
|
|
content: "";
|
|
width: 6rpx;
|
|
height: 29rpx;
|
|
background-image: linear-gradient(90deg, #164cc3 0%, #2c6fd9 100%);
|
|
border-radius: 3rpx;
|
|
display: block;
|
|
position: absolute;
|
|
left: -4rpx;
|
|
top: 22rpx;
|
|
}
|
|
|
|
.form-item {
|
|
/* display: flex; */
|
|
font-family: PingFang-SC-Medium;
|
|
font-size: 30rpx;
|
|
/* line-height: 97rpx; */
|
|
height: 200rpx;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
}
|
|
|
|
.form-left-text {
|
|
color: #212121;
|
|
margin-bottom: 33rpx;
|
|
}
|
|
|
|
.form-left {
|
|
/* min-width: 160rpx; */
|
|
width: 100%;
|
|
}
|
|
|
|
.form-right {
|
|
margin-left: 20rpx;
|
|
flex: 1;
|
|
color: #414141;
|
|
}
|
|
|
|
.form-right input {
|
|
/* height: 100%; */
|
|
/* height: 60rpx; */
|
|
font-size: 30rpx;
|
|
}
|
|
|
|
.form-date>>>.uni-date__x-input {
|
|
height: 97rpx;
|
|
font-size: 30rpx;
|
|
}
|
|
|
|
.form-date>>>.uni-icons {
|
|
display: none;
|
|
}
|
|
|
|
.qingjia-apply>>>uni-input {
|
|
/* height: 100%; */
|
|
font-size: 30rpx;
|
|
}
|
|
|
|
.apply-reason-text {
|
|
width: 653rpx;
|
|
height: 179rpx;
|
|
background-color: #f6f8fc;
|
|
border: solid 1rpx #e5e5e5;
|
|
margin-top: 21rpx;
|
|
padding: 14rpx 24rpx;
|
|
font-size: 26rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.apply_require {
|
|
margin-top: 0rpx !important;
|
|
}
|
|
|
|
.file-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: flex-start;
|
|
padding-top: 13rpx;
|
|
}
|
|
|
|
.file-wrap {
|
|
|
|
margin-top: 20rpx;
|
|
margin-right: 20rpx;
|
|
}
|
|
|
|
.file-item {
|
|
width: 155rpx;
|
|
height: 155rpx;
|
|
border: solid 1rpx #e5e5e5;
|
|
text-align: center;
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
position: relative;
|
|
|
|
}
|
|
|
|
.file-content {
|
|
width: 100%;
|
|
}
|
|
|
|
.file-item .file-icon {
|
|
width: 37rpx;
|
|
height: 37rpx;
|
|
|
|
}
|
|
|
|
.file-item .file-name {
|
|
font-family: PingFang-SC-Regular;
|
|
font-size: 20rpx;
|
|
line-height: 17rpx;
|
|
color: #313131;
|
|
margin-top: 11rpx;
|
|
padding: 10rpx;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.file-item>>>.uni-icons {
|
|
width: 26rpx;
|
|
height: 26rpx;
|
|
position: absolute;
|
|
right: -8rpx;
|
|
top: -22rpx;
|
|
/*
|
|
background-color: #d81e06;
|
|
border-radius: 50%;
|
|
font-size: 20rpx !important;
|
|
padding: 5rpx;
|
|
*/
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.form-right {
|
|
flex: 1;
|
|
color: #414141;
|
|
}
|
|
|
|
/*部门*/
|
|
uni-data-picker {
|
|
width: 100%;
|
|
border: none !important;
|
|
}
|
|
|
|
.my-data-picker>>>.input-value-border {
|
|
border: none !important;
|
|
}
|
|
|
|
>>>.input-value {
|
|
font-size: 30rpx !important;
|
|
;
|
|
}
|
|
|
|
.my-data-picker uni-data-picker {
|
|
width: 100% !important;
|
|
}
|
|
|
|
.my-data-picker {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-left: -10rpx;
|
|
}
|
|
|
|
/* 主体 */
|
|
>>>.uni-navbar__header,
|
|
>>>.uni-status-bar {
|
|
background-image: linear-gradient(90deg, #164cc3 0%, #2c6fd9 100%), linear-gradient(#e60012, #e60012) !important;
|
|
}
|
|
|
|
hongtouwenjian-top {
|
|
box-sizing: border-box;
|
|
padding-top: 24rpx;
|
|
padding-right: 15rpx;
|
|
padding-bottom: 20rpx;
|
|
padding-left: 15rpx;
|
|
}
|
|
|
|
.hongtouwenjian-top-c {
|
|
background-color: #ffffff;
|
|
border-radius: 10rpx;
|
|
padding-left: 30rpx;
|
|
padding-right: 30rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.hongtouwenjian-top-c-title {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 85rpx;
|
|
border-bottom: 1px solid #eeeeee;
|
|
}
|
|
|
|
.hongtouwenjian-top-c-title-mark {
|
|
width: 6rpx;
|
|
height: 29rpx;
|
|
background-image: linear-gradient(90deg, #164cc3 0%, #2c6fd9 100%), linear-gradient(#f3fbff, #f3fbff);
|
|
background-blend-mode: normal, normal;
|
|
border-radius: 3rpx;
|
|
}
|
|
|
|
.hongtouwenjian-top-c-title-txt {
|
|
font-size: 34rpx;
|
|
color: #383838;
|
|
}
|
|
|
|
.hongtouwenjian-top-c-item {
|
|
/* display: flex; */
|
|
align-items: center;
|
|
/* height: 100rpx; */
|
|
border-bottom: 1px solid #EEEEEE;
|
|
box-sizing: border-box;
|
|
padding-left: 3rpx;
|
|
padding-right: 12rpx;
|
|
width: 100%;
|
|
line-height: 97rpx;
|
|
}
|
|
|
|
.hongtouwenjian-top-c-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.hongtouwenjian-top-c-item-left {
|
|
display: flex;
|
|
align-items: center;
|
|
width: 164rpx;
|
|
}
|
|
|
|
.hongtouwenjian-top-c-item-left-mark {
|
|
font-size: 30rpx;
|
|
color: #f00808;
|
|
}
|
|
|
|
.hongtouwenjian-top-c-item-left-txt {
|
|
font-size: 30rpx;
|
|
color: #212121;
|
|
}
|
|
|
|
.hongtouwenjian-top-c-item-middle {
|
|
margin-left: 20rpx;
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
height: 100%;
|
|
}
|
|
|
|
.hongtouwenjian-top-c-item-middle-txt {
|
|
font-size: 30rpx;
|
|
color: #414141;
|
|
}
|
|
|
|
.hongtouwenjian-top-c-item-middle-input {
|
|
padding: 0;
|
|
margin: 0;
|
|
outline: none;
|
|
border: none;
|
|
background-color: transparent;
|
|
width: 100%;
|
|
/* height: 100%; */
|
|
height: 60rpx;
|
|
font-size: 30rpx;
|
|
color: #414141;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.hongtouwenjian-top-c-item-right {
|
|
width: 22rpx;
|
|
height: 25rpx;
|
|
}
|
|
|
|
.hongtouwenjian-addbtn {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
box-sizing: border-box;
|
|
padding-right: 19rpx;
|
|
}
|
|
|
|
.hongtouwenjian-addbtn-w {
|
|
padding: 0;
|
|
margin: 0;
|
|
outline: none;
|
|
background-color: transparent;
|
|
width: 90rpx;
|
|
height: 46rpx;
|
|
line-height: 46rpx;
|
|
text-align: center;
|
|
background-color: #0075ff;
|
|
border-radius: 10rpx;
|
|
font-size: 26rpx;
|
|
color: #f3fbff;
|
|
}
|
|
|
|
/* 物品列表 */
|
|
.fixed-assets-listBig {
|
|
width: 100%;
|
|
padding: 0 20rpx;
|
|
box-sizing: border-box;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.fixed-assets-list {
|
|
width: 100%;
|
|
background-color: #FFFFFF;
|
|
padding: 0 20rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.fixed-assets-list .apply-info {
|
|
padding-top: 0rpx;
|
|
}
|
|
|
|
.fixed-assets-list .top {
|
|
height: 108rpx;
|
|
line-height: 108rpx;
|
|
border-bottom: 1rpx solid #eeeeee;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.fixed-assets-list .top-left-text {
|
|
flex: 1;
|
|
display: -webkit-box;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 1;
|
|
font-size: 30rpx;
|
|
color: #212121;
|
|
}
|
|
|
|
.fixed-assets-list .top-right image {
|
|
width: 26rpx;
|
|
height: 28rpx;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.fixed-assets-list .top-right view {
|
|
height: auto;
|
|
padding-left: 10rpx;
|
|
font-size: 26rpx;
|
|
color: #8b8b8b;
|
|
}
|
|
|
|
/* .fixed-assets-list .bottomBig{
|
|
width: 100%;
|
|
} */
|
|
.fixed-assets-list .bottom {
|
|
/* display: flex;
|
|
justify-content: space-between;
|
|
align-items: center; */
|
|
padding-top: 25rpx;
|
|
font-size: 28rpx;
|
|
color: #616161;
|
|
line-height: 72rpx;
|
|
}
|
|
|
|
.fixed-assets-list .bottom-left+.bottom-right {
|
|
width: 50%;
|
|
}
|
|
|
|
/* 文件上传进度样式*/
|
|
.u-progress-content {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.u-progress-dot {
|
|
width: 10rpx;
|
|
height: 10rpx;
|
|
border-radius: 50%;
|
|
background-color: #fb9126;
|
|
}
|
|
|
|
.u-progress-info {
|
|
font-size: 24rpx;
|
|
padding-left: 10rpx;
|
|
letter-spacing: 2rpx
|
|
}
|
|
|
|
.is-hidden {
|
|
visibility: hidden;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.title {
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
margin: 20px 0 5px 0;
|
|
}
|
|
|
|
.data-pickerview {
|
|
height: 400px;
|
|
border: 1px #e5e5e5 solid;
|
|
}
|
|
|
|
.popper__arrow {
|
|
top: -6px;
|
|
left: 50%;
|
|
margin-right: 3px;
|
|
border-top-width: 0;
|
|
border-bottom-color: #EBEEF5;
|
|
}
|
|
|
|
.popper__arrow {
|
|
top: -6px;
|
|
left: 50%;
|
|
margin-right: 3px;
|
|
border-top-width: 0;
|
|
border-bottom-color: #EBEEF5;
|
|
}
|
|
</style>
|