569 lines
17 KiB
Vue
569 lines
17 KiB
Vue
|
<template>
|
|||
|
<el-dialog
|
|||
|
title="修改质检报告"
|
|||
|
:visible.sync="editshow"
|
|||
|
width="1500px"
|
|||
|
top="5vh"
|
|||
|
append-to-body
|
|||
|
:close-on-click-modal="false"
|
|||
|
:before-close="handleClose"
|
|||
|
>
|
|||
|
<div class="main">
|
|||
|
<div style="margin-left:10px;background:#f1f2f6;height:30px;display:flex;align-items:center;color: #000;padding: 0 30px;">
|
|||
|
质检信息
|
|||
|
</div>
|
|||
|
<div>
|
|||
|
<el-row type="flex" style="display: flex;align-items: center;margin-top: 10px;padding: 0 30px;" justify="">
|
|||
|
<el-col :span="12">归属地区:浙江省温州市鹿城区</el-col>
|
|||
|
<el-col :span="12">服务标签:<el-tag style="margin-left:5px">七天包退</el-tag><el-tag style="margin-left:5px">一年质保</el-tag></el-col>
|
|||
|
</el-row>
|
|||
|
</div>
|
|||
|
<div v-show="attributeform['unmatch'] && attributeform['unmatch'].length !=0" class="tip">
|
|||
|
<span>质检报告异常:</span>
|
|||
|
<el-row :gutter="10">
|
|||
|
<!-- <el-col :span="12">质检报告异常:</el-col> -->
|
|||
|
<el-col v-for="(item,i) in attributeform['unmatch']" :key="i" :span="8">{{ item.attr_name }}/</el-col>
|
|||
|
</el-row>
|
|||
|
</div>
|
|||
|
<!-- 质检图片 -->
|
|||
|
<div style="margin-top:10px">
|
|||
|
<div style="margin-left:10px;background:#f1f2f6;height:30px;display:flex;align-items:center;color: #000;padding: 0 30px;">
|
|||
|
质检图片
|
|||
|
</div>
|
|||
|
<div style="display:flex;margin-top:10px">
|
|||
|
<el-image
|
|||
|
v-for="(item,i) in attributeform.all_img"
|
|||
|
:key="i"
|
|||
|
style="width: 100px; height: 100px;margin:10px"
|
|||
|
:src="item"
|
|||
|
:preview-src-list="attributeform.all_img"
|
|||
|
/>
|
|||
|
</div>
|
|||
|
</div>
|
|||
|
<!-- 质检信息 -->
|
|||
|
<div>
|
|||
|
<div style="margin-left:10px;background:#f1f2f6;height:30px;display:flex;align-items:center;color: #000;padding: 0 30px;">
|
|||
|
质检信息
|
|||
|
</div>
|
|||
|
<vxe-table
|
|||
|
ref="xTable"
|
|||
|
border
|
|||
|
resizable
|
|||
|
style="width: 100%;margin-top:10px"
|
|||
|
:data="tableData"
|
|||
|
:show-header="false"
|
|||
|
auto-resize
|
|||
|
:span-method="mergeRowMethod2"
|
|||
|
height="500"
|
|||
|
:checkbox-config="{labelField: 'Serial', highlight: false, range: true}"
|
|||
|
>
|
|||
|
<vxe-table-column
|
|||
|
v-for="(item,index) in tableLabel"
|
|||
|
:key="index"
|
|||
|
:field="item.param"
|
|||
|
:title="item.label"
|
|||
|
:align="item.align"
|
|||
|
:min-width="item.width"
|
|||
|
:width="item.width"
|
|||
|
>
|
|||
|
<template v-slot:default="{ row, rowIndex }">
|
|||
|
<span v-if="item.param == 'value' && row['child'].length>1">
|
|||
|
<div style="display:flex;align-items:center">
|
|||
|
<div v-for="(e,i) in row['child']" class="btnclass" style="margin:10px">
|
|||
|
<el-button v-if="row['attr_name'].indexOf('多选')!=-1" :disabled="attributeform.type==1 ?true :false" class="buttonDiv" plain round :type="row['value'].includes(e.attr_name) ? 'primary' :''" style="width: 100%;" @click="brandclick($event,e,row['attr_name'],row)">{{ e.attr_name }}</el-button>
|
|||
|
<el-button v-else-if="row['attr_name'].indexOf('多选')==-1" :disabled="attributeform.type==1 ?true :false" class="buttonDiv" plain round :type="row['value']==e.attr_name ? 'primary' :''" style="width: 100%;" @click="brandclick($event,e,row['attr_name'],row)">{{ e.attr_name }}</el-button>
|
|||
|
<!-- <span v-if="e.attr_name == '循环次数' && row['value']=='苹果电池循环次数'">
|
|||
|
<el-input v-model="row['value']" placeholder="请输入内容" clearable ></el-input>
|
|||
|
</span> -->
|
|||
|
</div>
|
|||
|
</div>
|
|||
|
</span>
|
|||
|
<span v-else-if="item.param == 'value' && row['child'].length==1">
|
|||
|
<el-input v-model="row['value']" placeholder="请输入内容" :disabled="attributeform.type==1 ?true :false" clearable />
|
|||
|
</span>
|
|||
|
<span v-else>
|
|||
|
{{ row[item.param] ? row[item.param] : '/' }}
|
|||
|
</span>
|
|||
|
</template>
|
|||
|
</vxe-table-column>
|
|||
|
</vxe-table>
|
|||
|
</div>
|
|||
|
</div>
|
|||
|
<span slot="footer" class="dialog-footer">
|
|||
|
<el-button @click="handleClose()">关闭</el-button>
|
|||
|
<el-button v-if="!attributeform.type" type="primary" @click="editinfo">确认</el-button>
|
|||
|
</span>
|
|||
|
</el-dialog>
|
|||
|
</template>
|
|||
|
|
|||
|
<script>
|
|||
|
import html2canvas from 'html2canvas' // 转图片打印需要先安装html2Canvas和print-js
|
|||
|
import printJS from 'print-js'
|
|||
|
import QRCode from 'qrcodejs2'
|
|||
|
import { save_xy_attribute } from '@/api/console' // 获取客户信息接口
|
|||
|
import { res_advanced_search } from '@/api/machineList' // 获取机器列表信息接口
|
|||
|
import { pre_print } from '@/api/machineList' // 获取列表信息接口
|
|||
|
import { op_order_details_code } from '@/api/Warehousing' // 获取二维码信息接口
|
|||
|
import { mapGetters } from 'vuex'
|
|||
|
export default {
|
|||
|
name: 'Warehousingprint',
|
|||
|
data() {
|
|||
|
return {
|
|||
|
gridOptions2: {
|
|||
|
border: false,
|
|||
|
showOverflow: false,
|
|||
|
height: 400,
|
|||
|
showHeader: false,
|
|||
|
columns: [],
|
|||
|
data: []
|
|||
|
},
|
|||
|
tableLabel: [
|
|||
|
{ label: '', param: 'title', align: 'center', width: 100, show: true },
|
|||
|
{ label: '', param: 'attr_name', align: 'center', width: 200, show: true },
|
|||
|
{ label: '', param: 'value', align: 'center', width: 1500, show: true }
|
|||
|
],
|
|||
|
tableData: [],
|
|||
|
warranty_query: 2,
|
|||
|
form: { cate_id: null, brand_id: null, model_id: null, rom_id: null, color_id: null },
|
|||
|
cate_options: [],
|
|||
|
brand_options: [],
|
|||
|
model_options: [],
|
|||
|
rom_options: [],
|
|||
|
customer_options: [],
|
|||
|
quote_user_options: [],
|
|||
|
grade_options: [],
|
|||
|
network_options: [],
|
|||
|
op_user_id_options: [],
|
|||
|
countries_options: [// 国别
|
|||
|
{ label: '中国', value: '中国' },
|
|||
|
{ label: '国行运营商', value: '国行运营商' },
|
|||
|
{ label: '国行全网通', value: '国行全网通' },
|
|||
|
{ label: '海外', value: '海外' },
|
|||
|
{ label: '美版', value: '美版' },
|
|||
|
{ label: '日本', value: '日本' },
|
|||
|
{ label: '韩版', value: '韩版' },
|
|||
|
{ label: '港澳台', value: '港澳台' },
|
|||
|
{ label: '新加坡', value: '新加坡' },
|
|||
|
{ label: '欧盟', value: '欧盟' },
|
|||
|
{ label: '国际版', value: '国际版' }],
|
|||
|
id_options: [
|
|||
|
{ label: '有', value: 1 },
|
|||
|
{ label: '无', value: 2 },
|
|||
|
{ label: '未知', value: 0 }]
|
|||
|
}
|
|||
|
},
|
|||
|
computed: {
|
|||
|
...mapGetters([
|
|||
|
'is_warranty_query', // 1查询,2不查询
|
|||
|
'user_id'
|
|||
|
]),
|
|||
|
date() {
|
|||
|
var date = new Date()
|
|||
|
return date.toLocaleDateString()
|
|||
|
},
|
|||
|
aaa() {
|
|||
|
const obj = JSON.parse(JSON.stringify(this.formLabelAlign))
|
|||
|
for (const key in obj) {
|
|||
|
this.input.map((res, index) => {
|
|||
|
if (res.enName == key) {
|
|||
|
if (Array.isArray(res.options)) {
|
|||
|
res.options.map(r => {
|
|||
|
if (obj[key] == r.value) {
|
|||
|
obj[key] = r.label
|
|||
|
}
|
|||
|
})
|
|||
|
}
|
|||
|
}
|
|||
|
})
|
|||
|
}
|
|||
|
// window.localStorage.setItem("setform",JSON.stringify(this.formLabelAlign));//存储
|
|||
|
return obj
|
|||
|
}
|
|||
|
},
|
|||
|
watch: {
|
|||
|
'is_warranty_query': {
|
|||
|
handler(val) {
|
|||
|
this.warranty_query = val
|
|||
|
}, deep: true, immediate: true
|
|||
|
}
|
|||
|
},
|
|||
|
created() {
|
|||
|
// console.log()
|
|||
|
// this.getcate()
|
|||
|
// if(localStorage.getItem("setform")){
|
|||
|
// let lastname = JSON.parse(localStorage.getItem("setform"));//读取
|
|||
|
// this.formLabelAlign = lastname
|
|||
|
// }
|
|||
|
console.log(this.tableLabel)
|
|||
|
console.log(this.tableData)
|
|||
|
},
|
|||
|
props: {
|
|||
|
editshow: {
|
|||
|
type: Boolean,
|
|||
|
default: () => {
|
|||
|
return false
|
|||
|
}
|
|||
|
},
|
|||
|
attributeform: {
|
|||
|
type: Object,
|
|||
|
default: () => {
|
|||
|
return {}
|
|||
|
}
|
|||
|
},
|
|||
|
id: {
|
|||
|
type: String,
|
|||
|
default: () => {
|
|||
|
return ''
|
|||
|
}
|
|||
|
},
|
|||
|
input: {
|
|||
|
type: Array,
|
|||
|
default: () => {
|
|||
|
return []
|
|||
|
}
|
|||
|
},
|
|||
|
formLabelAlign: {
|
|||
|
type: Object,
|
|||
|
default: () => {
|
|||
|
return {}
|
|||
|
}
|
|||
|
},
|
|||
|
jiqidata: {
|
|||
|
type: Array,
|
|||
|
default: () => {
|
|||
|
return []
|
|||
|
}
|
|||
|
}
|
|||
|
},
|
|||
|
methods: {
|
|||
|
// 通用行合并函数(将相同多列数据合并为一行)
|
|||
|
mergeRowMethod2({ row, _rowIndex, column, visibleData }) {
|
|||
|
const fields = ['title']
|
|||
|
const cellValue = row[column.property]
|
|||
|
if (cellValue && fields.includes(column.property)) {
|
|||
|
const prevRow = visibleData[_rowIndex - 1]
|
|||
|
let nextRow = visibleData[_rowIndex + 1]
|
|||
|
if (prevRow && prevRow[column.property] === cellValue) {
|
|||
|
return { rowspan: 0, colspan: 0 }
|
|||
|
} else {
|
|||
|
let countRowspan = 1
|
|||
|
while (nextRow && nextRow[column.property] === cellValue) {
|
|||
|
nextRow = visibleData[++countRowspan + _rowIndex]
|
|||
|
}
|
|||
|
if (countRowspan > 1) {
|
|||
|
return { rowspan: countRowspan, colspan: 1 }
|
|||
|
}
|
|||
|
}
|
|||
|
}
|
|||
|
},
|
|||
|
// 是否查询状态改变
|
|||
|
warrantychange(e) {
|
|||
|
user_warranty_query({ user_id: this.user_id, is_warranty_query: e }).then(res => {
|
|||
|
this.$message({ type: 'success', message: e == 1 ? '查询已开启' : '查询已关闭' })
|
|||
|
this.$store.dispatch('user/getInfo')
|
|||
|
})
|
|||
|
},
|
|||
|
getcate() {
|
|||
|
cate_brand_list_all().then(res => {
|
|||
|
this.cate_options = res.datas
|
|||
|
})
|
|||
|
res_advanced_search().then(e => {
|
|||
|
this.op_user_id_options = e.datas['op_user_id']
|
|||
|
this.quote_user_options = e.datas['quote_user_id']
|
|||
|
this.customer_options = e.datas['supplier_info']
|
|||
|
this.grade_options = e.datas['grade_list']
|
|||
|
this.network_options = e.datas['network']
|
|||
|
})
|
|||
|
},
|
|||
|
editinfo() {
|
|||
|
const attribute = {}
|
|||
|
this.tableData.map(e => {
|
|||
|
const t = {}
|
|||
|
t[e.attr_id] = e.value
|
|||
|
Object.assign(attribute, t)
|
|||
|
})
|
|||
|
save_xy_attribute({ id: this.attributeform.id, attribute: attribute }).then(res => {
|
|||
|
if (res.errcode == 0) {
|
|||
|
this.$parent.determine(this.attributeform)
|
|||
|
this.handleClose()
|
|||
|
}
|
|||
|
})
|
|||
|
},
|
|||
|
change(val, name) {
|
|||
|
if (name == 'cate_id') {
|
|||
|
this.form.brand_id = null
|
|||
|
this.form.model_id = null
|
|||
|
this.form.rom_id = null
|
|||
|
this.form.color_id = null
|
|||
|
if (val) {
|
|||
|
cate_brand_list_all({ cate_id: val }).then(res => {
|
|||
|
this.brand_options = res.datas
|
|||
|
})
|
|||
|
} else {
|
|||
|
this.brand_options = []
|
|||
|
this.rom_options = []
|
|||
|
this.color_options = []
|
|||
|
}
|
|||
|
} else if (name == 'brand_id') {
|
|||
|
this.form.model_id = null
|
|||
|
this.form.rom_id = null
|
|||
|
this.form.color_id = null
|
|||
|
if (val) {
|
|||
|
cate_brand_list_all({ cate_id: this.form.cate_id, brand_id: val }).then(res => {
|
|||
|
this.model_options = res.datas
|
|||
|
})
|
|||
|
} else {
|
|||
|
this.model_options = []
|
|||
|
this.rom_options = []
|
|||
|
this.color_options = []
|
|||
|
}
|
|||
|
} else {
|
|||
|
this.form.rom_id = null
|
|||
|
this.form.color_id = null
|
|||
|
if (val) {
|
|||
|
cate_brand_list_all({ cate_id: this.form.cate_id, brand_id: this.form.brand_id, model_id: val }).then(res => {
|
|||
|
this.rom_options = res.datas['rom_list']
|
|||
|
this.color_options = res.datas['color_list']
|
|||
|
})
|
|||
|
} else {
|
|||
|
this.rom_options = []
|
|||
|
this.color_options = []
|
|||
|
}
|
|||
|
}
|
|||
|
},
|
|||
|
romclick(e, v) {
|
|||
|
let target = e.target
|
|||
|
if (target.nodeName === 'SPAN') {
|
|||
|
target = e.target.parentNode
|
|||
|
}
|
|||
|
target.blur()
|
|||
|
this.form.rom_id = v.value
|
|||
|
},
|
|||
|
colorclick(e, v) {
|
|||
|
let target = e.target
|
|||
|
if (target.nodeName === 'SPAN') {
|
|||
|
target = e.target.parentNode
|
|||
|
}
|
|||
|
target.blur()
|
|||
|
this.form.color_id = v.value
|
|||
|
},
|
|||
|
toImg() { // 转图片打印
|
|||
|
window.pageYoffset = 0
|
|||
|
document.documentElement.scrollTop = 0
|
|||
|
document.body.scrollTop = 0
|
|||
|
html2canvas(this.$refs.printTest, {
|
|||
|
backgroundColor: false,
|
|||
|
useCORS: true,
|
|||
|
allowTaint: true
|
|||
|
}).then((canvas) => {
|
|||
|
const url = canvas.toDataURL()
|
|||
|
this.img = url
|
|||
|
printJS({
|
|||
|
printable: url,
|
|||
|
type: 'image',
|
|||
|
documentTitle: '打印'
|
|||
|
})
|
|||
|
// console.log(url)
|
|||
|
})
|
|||
|
},
|
|||
|
brandclick(e, v, name, r) {
|
|||
|
console.log(this.tableLabel)
|
|||
|
console.log(this.tableData)
|
|||
|
console.log(e, v, name, r)
|
|||
|
console.log(r['value'].includes(e.attr_name))
|
|||
|
if (name.indexOf('多选') != -1) {
|
|||
|
if (v.attr_name == '正常' || v.attr_name == '无') {
|
|||
|
r.value = [v.attr_name]
|
|||
|
} else {
|
|||
|
if (r.value.includes('无') || r.value.includes('正常')) {
|
|||
|
r.value = []
|
|||
|
r.value.push(v.attr_name)
|
|||
|
} else {
|
|||
|
if (r.value.includes(v.attr_name)) {
|
|||
|
r.value.splice(r.value.indexOf(r.value.includes(v.attr_name), 1))
|
|||
|
} else {
|
|||
|
r.value.push(v.attr_name)
|
|||
|
}
|
|||
|
}
|
|||
|
}
|
|||
|
} else {
|
|||
|
r.value = v.attr_name
|
|||
|
}
|
|||
|
let target = e.target
|
|||
|
if (target.nodeName === 'SPAN') {
|
|||
|
target = e.target.parentNode
|
|||
|
}
|
|||
|
target.blur()
|
|||
|
},
|
|||
|
handleClose() {
|
|||
|
this.$emit('update:editshow', false)
|
|||
|
},
|
|||
|
share() { // 转发
|
|||
|
op_order_details_code({ order_op_id: this.id }).then((res) => {
|
|||
|
this.$delete(this.formLabelAlign, 'phone_list')
|
|||
|
var list = JSON.stringify(this.formLabelAlign)
|
|||
|
var host = window.location.host
|
|||
|
var http = window.location.protocol
|
|||
|
// console.log(`${http}`+'//'+`${host}/#/share2?uuid=`+res.datas.uuid+'&formLabelAlign='+list)
|
|||
|
new QRCode(this.$refs.qrCodeUrl, {
|
|||
|
// text:'https://erpv2.aiguovip.com/#/share/share?uuid='+res.datas.uuid,
|
|||
|
text: `${http}` + '//' + `${host}/#/share2?uuid=` + this.id + '&formLabelAlign=' + list,
|
|||
|
width: 120,
|
|||
|
height: 110,
|
|||
|
colorDark: '#333333', // 二维码颜色
|
|||
|
colorLight: '#ffffff', // 二维码背景色
|
|||
|
correctLevel: QRCode.CorrectLevel.L // 容错率,L/M/H
|
|||
|
})
|
|||
|
})
|
|||
|
},
|
|||
|
// 隐藏二维码
|
|||
|
hide() {
|
|||
|
this.$nextTick(function() {
|
|||
|
this.$refs.qrCodeUrl.innerHTML = ''
|
|||
|
})
|
|||
|
}
|
|||
|
}
|
|||
|
}
|
|||
|
</script>
|
|||
|
|
|||
|
<style lang="less" scoped>
|
|||
|
// .btnclass ::v-deep .el-button--primary:focus{
|
|||
|
// margin-right: 12px;
|
|||
|
// border-radius: 2px;
|
|||
|
// box-shadow: 0 2px 4px 0 #f4f4f4;
|
|||
|
// color: #2794f8;
|
|||
|
// background: white;
|
|||
|
// }
|
|||
|
.btnclass ::v-deep .el-button--primary:hover{
|
|||
|
border-radius:20px;
|
|||
|
color: #2794f8;
|
|||
|
background: #d2e6fc;
|
|||
|
border-color:#b3d8ff ;
|
|||
|
}
|
|||
|
.btnclass ::v-deep .el-button{
|
|||
|
font-size: 2px;
|
|||
|
padding: 5px;
|
|||
|
min-width: 78px;
|
|||
|
}
|
|||
|
.main ::v-deep .vxe-body--column{
|
|||
|
padding: 5px 0 !important;
|
|||
|
}
|
|||
|
.body {
|
|||
|
display: flex;
|
|||
|
flex-direction: column;
|
|||
|
}
|
|||
|
.body-text {
|
|||
|
// display: flex;
|
|||
|
// flex-direction: column;
|
|||
|
margin-bottom: 15px;
|
|||
|
}
|
|||
|
.header {
|
|||
|
display: flex;
|
|||
|
align-items: center;
|
|||
|
justify-content: center;
|
|||
|
margin-bottom: 25px;
|
|||
|
}
|
|||
|
.text {
|
|||
|
font-size: 20px;
|
|||
|
font-weight: bold;
|
|||
|
}
|
|||
|
.text1 {
|
|||
|
font-size: 18px;
|
|||
|
// height: 20px;
|
|||
|
}
|
|||
|
.calculation {
|
|||
|
border: 1px solid #ebeef5;
|
|||
|
padding: 10px;
|
|||
|
font-size: 14px;
|
|||
|
span {
|
|||
|
padding: 0 10px;
|
|||
|
display: inline-block;
|
|||
|
}
|
|||
|
}
|
|||
|
table,td,th {
|
|||
|
border: 1px solid #d4d4d4;
|
|||
|
}
|
|||
|
|
|||
|
table {
|
|||
|
border-collapse: collapse;
|
|||
|
height: 100px;
|
|||
|
width: 100%;
|
|||
|
}
|
|||
|
|
|||
|
th {
|
|||
|
height: 65px;
|
|||
|
}
|
|||
|
.top{
|
|||
|
display: flex;
|
|||
|
background-color:#4ca48c;
|
|||
|
height:60px
|
|||
|
}
|
|||
|
.top-text{
|
|||
|
font-family: STHeiti;
|
|||
|
color: #fff;
|
|||
|
font-size: 26px;
|
|||
|
text-align: center;
|
|||
|
}
|
|||
|
.top-text1{
|
|||
|
font-family: STHeiti;
|
|||
|
color: #fff;
|
|||
|
font-size: 12px;
|
|||
|
}
|
|||
|
.fotter-top{
|
|||
|
display: flex;
|
|||
|
background-color:#4ca48c;
|
|||
|
height:60px;
|
|||
|
justify-content: space-between;
|
|||
|
align-items: center;
|
|||
|
padding: 0 30px;
|
|||
|
}
|
|||
|
.footer-Toptext{
|
|||
|
font-family: STHeiti;
|
|||
|
color: #fff;
|
|||
|
font-size: 24px;
|
|||
|
}
|
|||
|
.fotter-main{
|
|||
|
display: flex;
|
|||
|
// background-color:#fff;
|
|||
|
height:30px;
|
|||
|
justify-content: center;
|
|||
|
}
|
|||
|
.footer-maintext{
|
|||
|
font-family: STHeiti;
|
|||
|
color:#FFFFFF;
|
|||
|
font-size: 20px;
|
|||
|
}
|
|||
|
.el-col-6{
|
|||
|
width: 20%!important;
|
|||
|
}
|
|||
|
.branchWrap {
|
|||
|
margin: 0 -10px;
|
|||
|
height: 140px;
|
|||
|
}
|
|||
|
.branchWrap div {
|
|||
|
padding: 10px 10px;
|
|||
|
border-bottom: 1px solid #dfe6ec;
|
|||
|
height: 70px;
|
|||
|
line-height: 200%;
|
|||
|
}
|
|||
|
.branchWrap div:last-child {
|
|||
|
border: none;
|
|||
|
}
|
|||
|
.lineHeight28 {
|
|||
|
line-height: 30px;
|
|||
|
}
|
|||
|
.tip {
|
|||
|
margin-top:10px;
|
|||
|
width: 100%;
|
|||
|
max-height: 100px;
|
|||
|
overflow-y: scroll;
|
|||
|
border: 1px solid #ff633c;
|
|||
|
position: relative;
|
|||
|
background-color: #ff633c;
|
|||
|
color: #fff;
|
|||
|
border-radius: 4px;
|
|||
|
font-size: 16px ;
|
|||
|
padding: 0 10px;
|
|||
|
}
|
|||
|
</style>
|