775 lines
19 KiB
Vue
775 lines
19 KiB
Vue
<template>
|
||
<view>
|
||
<view class="seach">
|
||
<view class="neibox"> 会员编号 </view>
|
||
<view class="seach_i">
|
||
<u--input class="these" v-model="queryParams.memberCode">
|
||
<template slot="suffix">
|
||
<view class="seatch_r">
|
||
<u-icon
|
||
@click="getDataList"
|
||
name="search"
|
||
size="22"
|
||
color="#fff"
|
||
></u-icon>
|
||
</view>
|
||
</template>
|
||
</u--input>
|
||
</view>
|
||
<view class="neibox" @click="popShow = true"> 筛选 </view>
|
||
</view>
|
||
<view class="mainbox">
|
||
<view class="main_top">
|
||
<view
|
||
class="top_flex"
|
||
v-for="(item, index) in avaerInfoList"
|
||
:key="index"
|
||
>
|
||
<img class="theimg" :src="item.value" alt="" />
|
||
<view class="fle2">{{ item.name }}</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="main_bottom">
|
||
<view
|
||
class="scoll_main"
|
||
ref="scrollMain"
|
||
@touchstart="handleTouchStart"
|
||
@touchmove="handleTouchMove"
|
||
@touchend="handleTouchEnd"
|
||
>
|
||
<TreeChart
|
||
:size="size"
|
||
:json="data"
|
||
:class="{ landscape: landscape.length }"
|
||
@click-node="clickNode"
|
||
/>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<u-popup
|
||
:show="popShow"
|
||
mode="right"
|
||
@close="popShow = false"
|
||
:closeOnClickOverlay="false"
|
||
>
|
||
<view class="rightPopup">
|
||
<view class="popup_top">
|
||
<view
|
||
@click="
|
||
() => {
|
||
getDataList(), (popShow = false)
|
||
}
|
||
"
|
||
>筛选</view
|
||
>
|
||
<view class="top_red" @click="popShow = false">{{ '返回' }}</view>
|
||
</view>
|
||
<view class="typesBox">
|
||
<view class="typeTitle" @click="listShow = true"> 结算期数 </view>
|
||
<view class="choiceBox">
|
||
<view class="inputbox" @click="listShow = true">
|
||
<view class="">
|
||
{{ settleName ? settleName : '请选择' }}
|
||
</view>
|
||
<u-icon name="arrow-right" size="24rpx" color="#090000"></u-icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="typesBox">
|
||
<view class="typeTitle"> 代数 </view>
|
||
<view class="choiceBox">
|
||
<u--input
|
||
v-model="queryParams.level"
|
||
style="
|
||
background-color: rgba(176, 196, 222, 0.45);
|
||
border-color: rgba(176, 196, 222, 0.45) !important;
|
||
"
|
||
placeholder="请输入"
|
||
border="surround"
|
||
shape="circle"
|
||
></u--input>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="popup_bottom">
|
||
<view class="bottom_btn thebtn1" @click="clearAll">清空筛选条件</view>
|
||
<view
|
||
class="bottom_btn thebtn2"
|
||
@click="
|
||
() => {
|
||
getDataList(), (popShow = false)
|
||
}
|
||
"
|
||
>{{ '确定' }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<u-picker
|
||
@cancel="listShow = false"
|
||
:show="listShow"
|
||
ref="uPicker"
|
||
:columns="memberSettlePeriodList"
|
||
@confirm="confirm"
|
||
keyName="settleDate"
|
||
></u-picker>
|
||
</u-popup>
|
||
<u-popup
|
||
:show="isPop"
|
||
closeable
|
||
mode="center"
|
||
round="10"
|
||
@close="isPop = false"
|
||
>
|
||
<view class="ispop_box">
|
||
<view class="Poster1">
|
||
<view class="pop_top">
|
||
<view class="pop_top">
|
||
<view>
|
||
<image
|
||
crossorigin="anonymous"
|
||
data-etype="image"
|
||
:data-enode="popMould.avatarUrl"
|
||
:src="'data:image/png;base64,' + popMould.avatarUrlBase64"
|
||
mode="aspectFit"
|
||
class="poster1"
|
||
></image>
|
||
</view>
|
||
<view>
|
||
<image
|
||
crossorigin="anonymous"
|
||
data-etype="image"
|
||
:data-enode="popMould.countryUrl2"
|
||
:src="'data:image/png;base64,' + popMould.countryUrl2Base64"
|
||
mode="aspectFit"
|
||
class="poster2"
|
||
></image>
|
||
</view>
|
||
</view>
|
||
<view class="top_right">
|
||
<image
|
||
crossorigin="anonymous"
|
||
data-etype="image"
|
||
:data-enode="popMould.settleCountryUrl2"
|
||
:src="
|
||
'data:image/png;base64,' + popMould.settleCountryUrl2Base64
|
||
"
|
||
mode="aspectFit"
|
||
class="poster2"
|
||
></image>
|
||
<view style="margin-top: 18rpx"> 结算国家 </view>
|
||
</view>
|
||
</view>
|
||
<view class="pop_center">
|
||
<view class="center_flex">
|
||
<view class="c1">会员编号</view>
|
||
<view class="c2">{{ popMould.memberCode }}</view>
|
||
</view>
|
||
<view class="center_flex">
|
||
<view class="c1">会员姓名</view>
|
||
<view class="c2">{{ popMould.name }}</view>
|
||
</view>
|
||
<view class="center_flex">
|
||
<view class="c1">支付时间</view>
|
||
<view class="c2">{{ popMould.payDate }}</view>
|
||
</view>
|
||
</view>
|
||
<view class="pop_bottom">
|
||
<view class="b_flex">
|
||
<view class="bt1">业绩</view>
|
||
<view class="bt1">左区</view>
|
||
<view class="bt1">右区</view>
|
||
</view>
|
||
<view class="b_flex">
|
||
<view class="bt2">真实新增</view>
|
||
<view class="bt2">{{ popMould.leftRealNewPv }}</view>
|
||
<view class="bt2">{{ popMould.rightRealNewPv }}</view>
|
||
</view>
|
||
<view class="b_flex">
|
||
<view class="bt2">首购新增</view>
|
||
<view class="bt2">{{ popMould.leftFirstPurchaseAdd }}</view>
|
||
<view class="bt2">{{ popMould.rightFirstPurchaseAdd }}</view>
|
||
</view>
|
||
<view class="b_flex">
|
||
<view class="bt2">复购新增</view>
|
||
<view class="bt2">{{ popMould.leftRepeatPurchaseSurplus }}</view>
|
||
<view class="bt2">{{ popMould.rightRepeatPurchaseSurplus }}</view>
|
||
</view>
|
||
<view class="b_flex">
|
||
<view class="bt2">真实累计</view>
|
||
<view class="bt2">{{ popMould.leftRealTotal }}</view>
|
||
<view class="bt2">{{ popMould.rightRealTotal }}</view>
|
||
</view>
|
||
<view class="b_flex">
|
||
<view class="bt2">首购累计</view>
|
||
<view class="bt2">{{ popMould.leftFirstTotal }}</view>
|
||
<view class="bt2">{{ popMould.rightFirstTotal }}</view>
|
||
</view>
|
||
<view class="b_flex">
|
||
<view class="bt2">复购累计</view>
|
||
<view class="bt2">{{ popMould.leftRepeatPurchaseTotal }}</view>
|
||
<view class="bt2">{{ popMould.rightRepeatPurchaseTotal }}</view>
|
||
</view>
|
||
<view class="b_flex">
|
||
<view class="bt2">首购结余</view>
|
||
<view class="bt2">{{ popMould.leftFirstSurplus }}</view>
|
||
<view class="bt2">{{ popMould.rightFirstSurplus }}</view>
|
||
</view>
|
||
<view class="b_flex">
|
||
<view class="bt2">复购结余</view>
|
||
<view class="bt2">{{ popMould.leftRepeatPurchaseSurplus }}</view>
|
||
<view class="bt2">{{ popMould.rightRepeatPurchaseSurplus }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="btn_box">
|
||
<view class="small-btn" @click="downImage('Poster1')">下载图片</view>
|
||
<view class="small-text-btn" @click="copyText()">复制文字</view>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
<Eposter
|
||
width="750"
|
||
height="1334"
|
||
:list="list"
|
||
backgroundColor="rgb(255, 255, 255)"
|
||
@on-success="onSuccess"
|
||
ref="Eposter"
|
||
>
|
||
</Eposter>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import html2canvas from 'html2canvas'
|
||
import TreeChart from '@/components/architectures/resettleSO.vue'
|
||
import Eposter from '@/components/architectures/Poster.vue'
|
||
|
||
import * as arc from '@/config/architecture.js'
|
||
export default {
|
||
components: {
|
||
TreeChart,
|
||
Eposter,
|
||
},
|
||
data() {
|
||
return {
|
||
avaerInfoList: [],
|
||
treeData: [],
|
||
queryParams: {
|
||
memberSettlePeriodId: '', //期数
|
||
memberCode: '', //会员编号
|
||
level: 6, //代数
|
||
type: 1,
|
||
},
|
||
memberSettlePeriodList: [], //期数
|
||
popShow: false,
|
||
listShow: false,
|
||
settleName: '',
|
||
data: {},
|
||
size: 0.3,
|
||
landscape: [],
|
||
popMould: {},
|
||
isPop: false,
|
||
touchStartPosition1: {
|
||
x: 0,
|
||
y: 0,
|
||
},
|
||
touchStartPosition2: {
|
||
x: 0,
|
||
y: 0,
|
||
},
|
||
initialDistance: 0,
|
||
list: [],
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.getAvarerInfo()
|
||
this.getDataList()
|
||
},
|
||
methods: {
|
||
//复制文字
|
||
copyText() {
|
||
let self = this
|
||
let md = self.popMould
|
||
let text = `会员编号：${md.memberCode} \n会员姓名：${md.name}支付时间：${md.payDate} \n业绩 左区 右区 \n真实新增 ${md.leftRealNewPv} ${md.rightRealNewPv} \n首购新增 ${md.leftFirstPurchaseAdd} ${md.rightFirstPurchaseAdd} \n复购新增 ${md.leftRepeatPurchaseSurplus} ${md.rightRepeatPurchaseSurplus} \n真实累计 ${md.leftRealTotal} ${md.rightRealTotal} \n首购累计 ${md.leftFirstTotal} ${md.rightFirstTotal} \n复购累计 ${md.leftRepeatPurchaseTotal} ${md.rightRepeatPurchaseTotal} \n首购结余 ${md.leftFirstSurplus} ${md.rightFirstSurplus} \n复购结余 ${md.leftRepeatPurchaseSurplus} ${md.rightRepeatPurchaseSurplus} \n`
|
||
uni.setClipboardData({
|
||
data: text,
|
||
success: function (res) {
|
||
uni.getClipboardData({
|
||
success: function (res) {
|
||
uni.showToast({
|
||
title: '复制成功',
|
||
})
|
||
},
|
||
})
|
||
},
|
||
})
|
||
},
|
||
//下载图片
|
||
downImage(elClass) {
|
||
this.$refs.Eposter.createForElRect(elClass, false)
|
||
},
|
||
downloadImg() {
|
||
let self = this
|
||
let element = document.querySelector('.Poster1')
|
||
uni.showLoading({
|
||
title: '图片保存中',
|
||
})
|
||
html2canvas(element)
|
||
.then(function (canvas) {
|
||
let dataURL = canvas.toDataURL('image/jpeg')
|
||
let link = document.createElement('a')
|
||
link.style.display = 'none'
|
||
link.href = dataURL
|
||
link.download = 'image.jpg'
|
||
document.body.appendChild(link)
|
||
link.click()
|
||
document.body.removeChild(link)
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: '保存成功',
|
||
duration: 2000,
|
||
})
|
||
uni.hideLoading()
|
||
})
|
||
.catch(function (error) {
|
||
uni.hideLoading()
|
||
uni.showModal({
|
||
title: '保存失败',
|
||
})
|
||
})
|
||
},
|
||
onSuccess(val) {
|
||
// console.log('🌈val',val)
|
||
this.posterImg = val
|
||
this.downloadImg(this.posterImg)
|
||
},
|
||
|
||
handleTouchStart(event) {
|
||
const touch1 = event.touches[0]
|
||
const touch2 = event.touches[1]
|
||
if (touch2) {
|
||
this.touchStartPosition1 = {
|
||
x: touch1.pageX,
|
||
y: touch1.pageY,
|
||
}
|
||
this.touchStartPosition2 = {
|
||
x: touch2.pageX,
|
||
y: touch2.pageY,
|
||
}
|
||
this.initialDistance = Math.hypot(
|
||
touch2.pageX - touch1.pageX,
|
||
touch2.pageY - touch1.pageY
|
||
)
|
||
}
|
||
},
|
||
handleTouchMove(event) {
|
||
const touch1 = event.touches[0]
|
||
const touch2 = event.touches[1]
|
||
if (touch2) {
|
||
const currentDistance = Math.hypot(
|
||
touch2.pageX - touch1.pageX,
|
||
touch2.pageY - touch1.pageY
|
||
)
|
||
const scale = currentDistance / this.initialDistance
|
||
this.size = this.size * scale
|
||
}
|
||
},
|
||
handleTouchEnd() {
|
||
this.touchStartPosition1 = {
|
||
x: 0,
|
||
y: 0,
|
||
}
|
||
this.touchStartPosition2 = {
|
||
x: 0,
|
||
y: 0,
|
||
}
|
||
this.initialDistance = 0
|
||
},
|
||
clickNode(e) {
|
||
let self = this
|
||
if (e) {
|
||
arc
|
||
.getUrlBase({
|
||
countryUrl2: e.countryUrl2,
|
||
settleCountryUrl2: e.settleCountryUrl2,
|
||
avatarUrl: e.avatarUrl,
|
||
})
|
||
.then(res => {
|
||
self.popMould = e
|
||
self.popMould.countryUrl2Base64 = res.countryUrl2Base64
|
||
self.popMould.settleCountryUrl2Base64 = res.settleCountryUrl2Base64
|
||
self.popMould.avatarUrlBase64 = res.avatarUrlBase64
|
||
self.isPop = true
|
||
})
|
||
}
|
||
},
|
||
confirm(e) {
|
||
this.queryParams.memberSettlePeriodId = e.value[0].pkId
|
||
this.settleName = e.value[0].settleDate
|
||
this.listShow = false
|
||
},
|
||
getAvarerInfo() {
|
||
arc.getAvarerInfo().then(res => {
|
||
this.avaerInfoList = res.data
|
||
})
|
||
arc.getMemberSettlePeriod().then(res => {
|
||
this.memberSettlePeriodList = [res.data]
|
||
})
|
||
},
|
||
getDataList() {
|
||
arc.getAzFramework(this.queryParams).then(res => {
|
||
this.data = res.data[0]
|
||
})
|
||
},
|
||
clearAll() {
|
||
this.popShow = false
|
||
this.settleName = ''
|
||
this.queryParams = {
|
||
memberSettlePeriodId: '', //期数
|
||
memberCode: '', //会员编号
|
||
level: '', //代数
|
||
}
|
||
this.getDataList()
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.ispop_box {
|
||
padding: 27rpx;
|
||
padding-top: 60rpx;
|
||
width: 670rpx;
|
||
font-size: 24rpx;
|
||
color: #333333;
|
||
|
||
.pop_top {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
.poster1 {
|
||
height: 88rpx;
|
||
width: 88rpx;
|
||
}
|
||
|
||
.poster2 {
|
||
width: 88rpx;
|
||
height: 54rpx;
|
||
border-radius: 10rpx;
|
||
margin-left: 20rpx;
|
||
}
|
||
|
||
.top_right {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
}
|
||
|
||
.pop_center {
|
||
.center_flex {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-top: 20rpx;
|
||
|
||
.c1 {
|
||
width: 20%;
|
||
}
|
||
|
||
.c2 {
|
||
width: 80%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background: #f3f3f3;
|
||
border: 2rpx solid #eeeeee;
|
||
border-radius: 8rpx;
|
||
padding: 10rpx 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
.pop_bottom {
|
||
margin: 20rpx 0;
|
||
border-top: 2rpx solid #eeeeee;
|
||
border-top: 2rpx solid #eeeeee;
|
||
|
||
.b_flex {
|
||
display: flex;
|
||
|
||
.bt1 {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin-top: 22rpx;
|
||
flex: 1;
|
||
}
|
||
|
||
.bt2 {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin-top: 22rpx;
|
||
flex: 1;
|
||
background: #f3f3f3;
|
||
border: 2rpx solid #eeeeee;
|
||
border-radius: 8rpx;
|
||
padding: 12rpx 0;
|
||
margin: 11rpx 18rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.btn_box {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.small-btn {
|
||
width: 312rpx;
|
||
height: 72rpx;
|
||
background: #005bac;
|
||
border-radius: 34rpx;
|
||
font-size: 28rpx;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.small-text-btn {
|
||
width: 312rpx;
|
||
height: 72rpx;
|
||
border: 1px solid #005bac;
|
||
border-radius: 34rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-size: 28rpx;
|
||
color: #005bac;
|
||
}
|
||
}
|
||
}
|
||
|
||
.operate-btnboxs {
|
||
padding: 29rpx 26rpx;
|
||
background-color: #ffffff;
|
||
|
||
.d-c-c {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.operate-btn {
|
||
width: 64rpx;
|
||
height: 64rpx;
|
||
margin: 5rpx;
|
||
// background: #F2F2F2;
|
||
border-radius: 5rpx;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
}
|
||
}
|
||
|
||
.rightPopup {
|
||
width: 645rpx;
|
||
height: 100%;
|
||
overflow: auto;
|
||
|
||
.popup_top {
|
||
padding: 25rpx;
|
||
background-color: rgba(176, 196, 222, 0.45);
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
font-size: 28rpx;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #333333;
|
||
|
||
.top_red {
|
||
color: #005bac;
|
||
}
|
||
}
|
||
|
||
.popup_bottom {
|
||
display: flex;
|
||
align-items: center;
|
||
position: absolute;
|
||
left: 0;
|
||
bottom: 0;
|
||
width: 100%;
|
||
|
||
.bottom_btn {
|
||
flex: 1;
|
||
padding: 20rpx 0;
|
||
text-align: center;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.thebtn1 {
|
||
background-color: rgba(176, 196, 222, 0.45);
|
||
color: #333333;
|
||
}
|
||
|
||
.thebtn2 {
|
||
background-color: #005bac;
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
|
||
.typesBox {
|
||
margin-top: 40rpx;
|
||
|
||
.typeTitle {
|
||
padding: 0 24rpx;
|
||
font-size: 30rpx;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: bold;
|
||
color: #333333;
|
||
}
|
||
|
||
.choiceBox {
|
||
padding: 0 12rpx;
|
||
display: flex;
|
||
margin-top: 17rpx;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
|
||
.inputbox {
|
||
font-size: 26rpx;
|
||
width: 100%;
|
||
padding: 20rpx 32rpx;
|
||
border-radius: 20rpx;
|
||
background-color: rgba(176, 196, 222, 0.45);
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.flex_btn {
|
||
background-color: rgba(176, 196, 222, 0.45);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 14rpx 48rpx;
|
||
border-radius: 26rpx;
|
||
font-size: 24rpx;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #333333;
|
||
margin: 17rpx 5rpx;
|
||
}
|
||
|
||
.timesbtn {
|
||
flex: 1;
|
||
}
|
||
|
||
.selectbtn {
|
||
background-color: #005bac;
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.seach {
|
||
background: #fff;
|
||
overflow: hidden;
|
||
padding: 20rpx 23rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
position: relative;
|
||
border-bottom: 2rpx solid #eee;
|
||
|
||
.these {
|
||
border: none;
|
||
padding: 10rpx 0 !important;
|
||
}
|
||
|
||
.seach_i {
|
||
padding: 0 20rpx;
|
||
border-radius: 34rpx;
|
||
background: #fff;
|
||
flex: 1;
|
||
background: #f5f6f8;
|
||
margin: 0 20rpx;
|
||
}
|
||
|
||
.neibox {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 26rpx;
|
||
font-family: PingFang SC;
|
||
font-weight: 400;
|
||
color: #999999;
|
||
}
|
||
|
||
.seatch_r {
|
||
background: #005bac;
|
||
border-radius: 50%;
|
||
padding: 8rpx;
|
||
}
|
||
}
|
||
|
||
.mainbox {
|
||
padding: 26rpx 22rpx;
|
||
|
||
.main_top {
|
||
background: #ffffff;
|
||
border-radius: 20rpx;
|
||
padding: 20rpx 4rpx;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
|
||
.top_flex {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
margin: 15rpx 20rpx;
|
||
// justify-content: center;
|
||
width: 98rpx;
|
||
|
||
.theimg {
|
||
width: 92rpx;
|
||
height: 92rpx;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.flex2 {
|
||
font-size: 26rpx;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #666666;
|
||
}
|
||
}
|
||
}
|
||
|
||
.main_bottom {
|
||
width: 100%;
|
||
height: calc(100vh - 600rpx);
|
||
margin-top: 25rpx;
|
||
background-color: #ffffff;
|
||
padding: 38rpx 0;
|
||
|
||
border-radius: 20rpx;
|
||
}
|
||
|
||
.scoll_main {
|
||
width: 700rpx;
|
||
height: calc(100vh - 600rpx);
|
||
overflow: auto;
|
||
|
||
// overflow: scroll;
|
||
// overflow-x: auto;
|
||
}
|
||
}
|
||
</style>
|