|
|
|
|
@ -1,6 +1,6 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div>
|
|
|
|
|
<a-card :bodyStyle="tstyle" :bordered="false">
|
|
|
|
|
<div class="service">
|
|
|
|
|
<!-- <a-card :bodyStyle="tstyle" :bordered="false">
|
|
|
|
|
<div class="title"><i class="iconfont icon-fuwu"></i><span>服务项目</span></div>
|
|
|
|
|
<a-spin :spinning="seriveLoading">
|
|
|
|
|
<div class="content">
|
|
|
|
|
@ -32,24 +32,115 @@
|
|
|
|
|
<p v-if="serive.actRemark">备注：{{ serive.actRemark }}</p>
|
|
|
|
|
<p v-if="serive.actVal">显示天数：{{ serive.actVal }}</p>
|
|
|
|
|
</template>
|
|
|
|
|
<div v-if="!serive.isBr" class="goods-box">
|
|
|
|
|
<div class="goods-content" :class="{ active: serive.isYield }" @click="saveGoodsStatus(serive)">
|
|
|
|
|
<a-icon v-if="serive.isYield" class="serve-icon" type="check-circle" theme="filled" />
|
|
|
|
|
<div v-else class="round"></div>
|
|
|
|
|
<div class="showName">{{ serive.showName }}</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="box-line" v-if="changeGoods && !serive.isEnd" :class="{ active: serive.isYield }"></div>
|
|
|
|
|
<div class="box-edit" @click.stop="FnOpenEdit(serive)"><a-icon type="edit" /></div>
|
|
|
|
|
</div>
|
|
|
|
|
</a-tooltip>
|
|
|
|
|
<div v-if="!serive.isBr" class="goods-box">
|
|
|
|
|
<div class="goods-content" :class="{ active: serive.isYield }" @click="saveGoodsStatus(serive)">
|
|
|
|
|
<a-icon v-if="serive.isYield" class="serve-icon" type="check-circle" theme="filled" />
|
|
|
|
|
<div v-else class="round"></div>
|
|
|
|
|
<div class="showName">{{ serive.showName }}</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="box-line" v-if="changeGoods && !serive.isEnd" :class="{ active: serive.isYield }"></div>
|
|
|
|
|
<div class="box-edit" @click.stop="FnOpenEdit(serive)"><a-icon type="edit" /></div>
|
|
|
|
|
</div>
|
|
|
|
|
</a-tooltip>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</a-spin>
|
|
|
|
|
</a-card> -->
|
|
|
|
|
<a-spin :spinning="flowLoad">
|
|
|
|
|
<div class="list-box">
|
|
|
|
|
<div class="list-box-title">
|
|
|
|
|
<span>提单号：{{ flowData.blNo }}</span>
|
|
|
|
|
<span style="display: flex;align-items: center;">
|
|
|
|
|
<img src="./u1041.svg" alt=""> 起运港:{{ flowData.routingInfoList ? flowData.routingInfoList[0].loading : '-' }}
|
|
|
|
|
<a-icon style="margin: 0 15px;" type="swap-right" />
|
|
|
|
|
<img src="./u1041.svg" alt=""> 目的港：{{ flowData.routingInfoList ? flowData.routingInfoList[0].discharging : '-' }}</span>
|
|
|
|
|
<span style="cursor: pointer;color: blue;" @click="handleDetail">详情<a-icon
|
|
|
|
|
type="appstore"
|
|
|
|
|
theme="filled" /></span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="list-box-content">
|
|
|
|
|
<div class="content-left">
|
|
|
|
|
<div>{{ flowData.carrier }}</div>
|
|
|
|
|
<div>订阅港区：CNTAO</div>
|
|
|
|
|
<div>船名：{{ flowData.vslNameEn }}</div>
|
|
|
|
|
<div>航次：{{ flowData.voy }}</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="content-right">
|
|
|
|
|
<div
|
|
|
|
|
class="conent-item"
|
|
|
|
|
:class="{ 'active': item.active, 'isEnd': item.isEnd }"
|
|
|
|
|
v-for="(item, index) in timeData"
|
|
|
|
|
:key="index">
|
|
|
|
|
<div class="line" v-if="index !== 0"></div>
|
|
|
|
|
<div class="cont-box">
|
|
|
|
|
<div class="item-top">{{ item.name }}</div>
|
|
|
|
|
<a-icon class="icon" type="check-circle" theme="filled" />
|
|
|
|
|
<div class="item-bottom">{{ item.text }}</div>
|
|
|
|
|
<div class="item-time">{{ item.time }}</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</a-spin>
|
|
|
|
|
</a-card>
|
|
|
|
|
<div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="main-box" v-if="showFlag">
|
|
|
|
|
<div class="box-left">
|
|
|
|
|
<div
|
|
|
|
|
class="box-tab"
|
|
|
|
|
@click="handleClick(index)"
|
|
|
|
|
:class="{ 'isActive': item.isActive }"
|
|
|
|
|
v-for="(item, index) in flowData.containerInfoList"
|
|
|
|
|
:key="index">
|
|
|
|
|
<div style="font-size: 15px;font-weight: bold;color: black">{{ item.containerNo }}</div>
|
|
|
|
|
<div style="font-size: 12px;color: #666;margin: 5px 0;">{{ item.size }}</div>
|
|
|
|
|
<div style="font-size: 12px;color: green;">开船:{{ item.currentNodeTime }}</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="box-right">
|
|
|
|
|
<div>
|
|
|
|
|
<!-- <a-row>
|
|
|
|
|
<a-col :span="6">铅封号：M/CN50000001</a-col>
|
|
|
|
|
<a-col :span="6">VGM：M/CN50000001</a-col>
|
|
|
|
|
<a-col :span="6">VGM接收时间：-</a-col>
|
|
|
|
|
<a-col :span="6">配载：Y</a-col>
|
|
|
|
|
</a-row>
|
|
|
|
|
<a-table
|
|
|
|
|
style="margin: 15px 0;margin-bottom: 30px;"
|
|
|
|
|
:pagination="false"
|
|
|
|
|
bordered
|
|
|
|
|
size="small"
|
|
|
|
|
:data-source="data">
|
|
|
|
|
<a-table-column key="name" title="报关单号" data-index="name"></a-table-column>
|
|
|
|
|
<a-table-column key="name1" title="件数" data-index="name1"></a-table-column>
|
|
|
|
|
<a-table-column key="name2" title="毛重" data-index="name2"></a-table-column>
|
|
|
|
|
<a-table-column key="name3" title="体积" data-index="name3"></a-table-column>
|
|
|
|
|
<a-table-column key="name4" title="船公司操作" data-index="name4"></a-table-column>
|
|
|
|
|
</a-table> -->
|
|
|
|
|
</div>
|
|
|
|
|
<div class="box-right-title">
|
|
|
|
|
<span style="width: 150px">动态</span>
|
|
|
|
|
<span style="width: 200px">时间</span>
|
|
|
|
|
<span style="width: 200px;margin-right: 30px;">地点</span>
|
|
|
|
|
<span style="width: 200px">船名航次</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="box-item" :class="{ 'isActive': item.isActive }" v-for="(item, index) in timeList" :key="index">
|
|
|
|
|
<div class="box-time">
|
|
|
|
|
<div class="time-line" :style="{ background: index == 0 ? 'none' : '' }"></div>
|
|
|
|
|
<div class="time-circular"></div>
|
|
|
|
|
<div class="time-line" :style="{ background: index == timeList.length - 1 ? 'none' : '' }"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="display: flex;align-items: center;padding: 15px 0;">
|
|
|
|
|
<div style="width: 150px;">{{ item.statusDescription }}</div>
|
|
|
|
|
<div style="width: 200px;">{{ item.statusTime }} <span class="tag">实</span> </div>
|
|
|
|
|
<div style="width: 200px;word-wrap: break-word;margin-right: 30px;">{{ item.statusPlace }}</div>
|
|
|
|
|
<div style="width: 200px;">{{ item.voy ? item.voy : '-' }}/{{ item.vslName ? item.vslName : '-' }}</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</a-spin>
|
|
|
|
|
|
|
|
|
|
<a-modal v-model="GoodsStatusVisible" width="600px" title="编辑" @ok="GoodsStatusHandleOk">
|
|
|
|
|
<a-spin :spinning="goodStatusLoading">
|
|
|
|
|
<a-form :form="StatusVisibleForm">
|
|
|
|
|
@ -88,7 +179,8 @@ import {
|
|
|
|
|
CancelServiceProjectIfram,
|
|
|
|
|
SaveServiceProjectIfram,
|
|
|
|
|
SaveServiceStatusIfram,
|
|
|
|
|
CancelServiceStatusIfram
|
|
|
|
|
CancelServiceStatusIfram,
|
|
|
|
|
GetTraceFlowInfo
|
|
|
|
|
} from '@/api/modular/main/BookingLedger'
|
|
|
|
|
export default {
|
|
|
|
|
data() {
|
|
|
|
|
@ -96,12 +188,48 @@ export default {
|
|
|
|
|
seriveLoading: false,
|
|
|
|
|
bookingServiceItem: [],
|
|
|
|
|
changeGoods: true,
|
|
|
|
|
flowLoad: true,
|
|
|
|
|
showFlag: false,
|
|
|
|
|
flowData: {},
|
|
|
|
|
GoodsStatusVisible: false,
|
|
|
|
|
GoodsStatusEditData: {},
|
|
|
|
|
StatusVisibleForm: this.$form.createForm(this),
|
|
|
|
|
goodStatusLoading: false,
|
|
|
|
|
booGoodsStatusItem: [],
|
|
|
|
|
delayTime: 500,
|
|
|
|
|
timeData: [
|
|
|
|
|
|
|
|
|
|
],
|
|
|
|
|
boxList: [
|
|
|
|
|
{
|
|
|
|
|
name: 'SLEU0000001',
|
|
|
|
|
type: '20GP',
|
|
|
|
|
text: '开航,2024-02-20 14:00',
|
|
|
|
|
isActive: true
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: 'SLEU0000002',
|
|
|
|
|
type: '20GP',
|
|
|
|
|
text: '开航,2024-02-20 14:00',
|
|
|
|
|
isActive: false
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: 'SLEU0000003',
|
|
|
|
|
type: '20GP',
|
|
|
|
|
text: '开航,2024-02-20 14:00',
|
|
|
|
|
isActive: false
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
timeList: [
|
|
|
|
|
|
|
|
|
|
],
|
|
|
|
|
data: [{
|
|
|
|
|
name: '测试111',
|
|
|
|
|
name1: '测试111',
|
|
|
|
|
name2: '测试111',
|
|
|
|
|
name3: '测试111',
|
|
|
|
|
name4: '测试111'
|
|
|
|
|
}],
|
|
|
|
|
time: null,
|
|
|
|
|
labelCol: {
|
|
|
|
|
xs: { span: 24 },
|
|
|
|
|
@ -128,9 +256,10 @@ export default {
|
|
|
|
|
},
|
|
|
|
|
created() {
|
|
|
|
|
// console.log(this.$route)
|
|
|
|
|
// this.USER_KEY = this.$route.query.USER_KEY
|
|
|
|
|
// this.businessId = this.$route.query.businessId
|
|
|
|
|
// this.USER_SECRET = this.$route.query.USER_SECRET
|
|
|
|
|
this.USER_KEY = this.$route.query.USER_KEY
|
|
|
|
|
this.businessId = this.$route.query.businessId
|
|
|
|
|
this.USER_SECRET = this.$route.query.USER_SECRET
|
|
|
|
|
this.getFlowInfo()
|
|
|
|
|
// this.getServiceItemList(1)
|
|
|
|
|
// this.getStatusServiceList(1)
|
|
|
|
|
},
|
|
|
|
|
@ -142,8 +271,8 @@ export default {
|
|
|
|
|
this.USER_KEY = this.$route.query.USER_KEY
|
|
|
|
|
this.businessId = this.$route.query.businessId
|
|
|
|
|
this.USER_SECRET = this.$route.query.USER_SECRET
|
|
|
|
|
this.getServiceItemList(1)
|
|
|
|
|
this.getStatusServiceList(1)
|
|
|
|
|
// this.getServiceItemList(1)
|
|
|
|
|
// this.getStatusServiceList(1)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
@ -204,6 +333,38 @@ export default {
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
handleDetail() {
|
|
|
|
|
this.showFlag = true
|
|
|
|
|
this.timeList = this.flowData.containerInfoList[0].containerStatusInfoList
|
|
|
|
|
this.$$forceUpdate()
|
|
|
|
|
},
|
|
|
|
|
handleClick(index) {
|
|
|
|
|
this.boxList.forEach(item => {
|
|
|
|
|
item.isActive = false
|
|
|
|
|
})
|
|
|
|
|
this.boxList[index].isActive = true
|
|
|
|
|
this.timeList = this.flowData.containerInfoList[index].containerStatusInfoList
|
|
|
|
|
this.$$forceUpdate()
|
|
|
|
|
},
|
|
|
|
|
getFlowInfo() {
|
|
|
|
|
const data = {
|
|
|
|
|
billNo: '237065744',
|
|
|
|
|
carrier: 'MSK',
|
|
|
|
|
ctnNo: '',
|
|
|
|
|
isAllCtn: true,
|
|
|
|
|
USER_KEY: '731e2d42af0f4209a8edccfcae20d7c4',
|
|
|
|
|
USER_SECRET: 'c513dff9ac617fd064ada5f3ccdbd6a1bde59e7c7ffe29e9dc225c49a0904a1535f7bf3d97bc2ff4'
|
|
|
|
|
}
|
|
|
|
|
this.flowLoad = true
|
|
|
|
|
GetTraceFlowInfo(data).then(res => {
|
|
|
|
|
if (res.success) {
|
|
|
|
|
this.flowData = res.data.resultData
|
|
|
|
|
} else {
|
|
|
|
|
this.$message.error(res.message)
|
|
|
|
|
}
|
|
|
|
|
this.flowLoad = false
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
GoodsStatusHandleOk() {
|
|
|
|
|
const {
|
|
|
|
|
StatusVisibleForm: { validateFields }
|
|
|
|
|
@ -490,3 +651,232 @@ export default {
|
|
|
|
|
border: 1px dashed #d5cbcb;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
<style lang="less" scoped>
|
|
|
|
|
.tag{
|
|
|
|
|
display: inline-block;
|
|
|
|
|
margin-left: 10px;
|
|
|
|
|
color: rgb(26, 184, 26);
|
|
|
|
|
text-align: center;
|
|
|
|
|
line-height: 20px;
|
|
|
|
|
background: rgb(227,252,248);
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
height: 20px;
|
|
|
|
|
width: 20px;
|
|
|
|
|
}
|
|
|
|
|
.service {
|
|
|
|
|
background: rgb(234, 242, 255);
|
|
|
|
|
padding-top: 50px;
|
|
|
|
|
min-height: 100vh;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.list-box {
|
|
|
|
|
background: white;
|
|
|
|
|
width: 1300px;
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
color: #17181a;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
|
|
|
|
|
.list-box-title {
|
|
|
|
|
padding: 10px;
|
|
|
|
|
font-size: 13px;
|
|
|
|
|
border-bottom: 1px solid rgb(168, 177, 192);
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
|
|
|
|
img {
|
|
|
|
|
margin-right: 5px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.list-box-content {
|
|
|
|
|
padding: 10px;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
padding-bottom: 70px;
|
|
|
|
|
|
|
|
|
|
.content-left {
|
|
|
|
|
margin-right: 70px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.content-right {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-content: center;
|
|
|
|
|
|
|
|
|
|
.cont-box {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.conent-item {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
|
|
&.active {
|
|
|
|
|
.item-top {
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
color: black;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.icon {
|
|
|
|
|
color: rgb(66, 102, 246);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.item-bottom {
|
|
|
|
|
color: black;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.line {
|
|
|
|
|
background: rgb(66, 102, 246);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&.isEnd {
|
|
|
|
|
.item-top {
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
color: rgb(255, 141, 26);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.item-time {
|
|
|
|
|
color: rgb(255, 141, 26);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.icon {
|
|
|
|
|
color: rgb(255, 141, 26);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.item-bottom {
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
color: rgb(255, 141, 26);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.line {
|
|
|
|
|
color: rgb(66, 102, 246);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.item-time {
|
|
|
|
|
word-wrap: break-word;
|
|
|
|
|
width: 80px;
|
|
|
|
|
position: absolute;
|
|
|
|
|
bottom: -48px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.item-top {
|
|
|
|
|
color: #c0bebe;
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.icon {
|
|
|
|
|
height: 20px;
|
|
|
|
|
width: 20px;
|
|
|
|
|
color: #c0bebe;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.item-bottom {
|
|
|
|
|
color: #c0bebe;
|
|
|
|
|
margin-top: 10px;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.line {
|
|
|
|
|
width: 50px;
|
|
|
|
|
height: 2px;
|
|
|
|
|
background: #c0bebe;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.main-box {
|
|
|
|
|
background: white;
|
|
|
|
|
width: 1300px;
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
margin-top: 50px;
|
|
|
|
|
display: flex;
|
|
|
|
|
|
|
|
|
|
.box-left {
|
|
|
|
|
width: 20%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.box-tab {
|
|
|
|
|
background: rgb(217, 222, 252);
|
|
|
|
|
border-left: 2px solid rgb(255, 87, 51);
|
|
|
|
|
margin-bottom: 3px;
|
|
|
|
|
padding: 15px 0;
|
|
|
|
|
padding-left: 10px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
|
|
|
|
&.isActive {
|
|
|
|
|
background: white;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.box-right {
|
|
|
|
|
padding-top: 20px;
|
|
|
|
|
margin-left: 70px;
|
|
|
|
|
width: 80%;
|
|
|
|
|
padding-right: 150px;
|
|
|
|
|
color: #17181a;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
padding-bottom: 30px;
|
|
|
|
|
|
|
|
|
|
.box-right-title {
|
|
|
|
|
text-align: left;
|
|
|
|
|
padding-left: 25px;
|
|
|
|
|
padding-bottom: 8px;
|
|
|
|
|
border-bottom: 1px solid rgb(235, 238, 245);
|
|
|
|
|
|
|
|
|
|
span {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.box-item {
|
|
|
|
|
border-bottom: 1px solid rgb(235, 238, 245);
|
|
|
|
|
display: flex;
|
|
|
|
|
color: #737780;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
|
|
|
|
|
&.isActive {
|
|
|
|
|
color: #17181a;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
|
|
|
|
|
.time-line {
|
|
|
|
|
background: rgb(66, 102, 246);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.time-circular {
|
|
|
|
|
border: 3px solid rgb(66, 102, 246);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.box-time {
|
|
|
|
|
width: 20px;
|
|
|
|
|
display: flex;
|
|
|
|
|
margin-right: 5px;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.time-line {
|
|
|
|
|
width: 2px;
|
|
|
|
|
height: calc(50% - 5px);
|
|
|
|
|
background: rgb(201, 203, 209);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.time-circular {
|
|
|
|
|
width: 10px;
|
|
|
|
|
height: 10px;
|
|
|
|
|
border: 3px solid rgb(201, 203, 209);
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
