<template>
|
<div class="body" :style="{height:mainHeight+'px'}">
|
<div class="main">
|
|
<el-card class="box-card">
|
<div slot="header" class="clearfix">
|
<el-date-picker
|
v-model="selectDate"
|
type="daterange"
|
style="width: 300px;"
|
format="yyyy-MM-dd"
|
value-format="yyyy-MM-dd"
|
range-separator="~"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
:clearable="false"
|
:picker-options="pickerOptions"
|
@change="dateRangeChange"
|
/>
|
</div>
|
<el-row :gutter="20">
|
<el-col :span="6">
|
<div class="cardBody">
|
<div class="cardTitle">
|
生产订单数
|
</div>
|
<div class="cardValue">
|
<countTo :start-val="0" :end-val="topValue.SumA" :duration="3000" />
|
</div>
|
<div class="cardDate">
|
{{ selectDate[0] }}~{{ selectDate[1] }}
|
</div>
|
<div class="cardIcon">
|
<svg-icon icon-class="icon1" class="svg_class" />
|
</div>
|
</div>
|
</el-col>
|
<el-col :span="6">
|
<div class="cardBody">
|
<div class="cardTitle">
|
生产工单数
|
</div>
|
<div class="cardValue">
|
<countTo :start-val="0" :end-val="topValue.SumB" :duration="3000" />
|
</div>
|
<div class="cardDate">
|
{{ selectDate[0] }}~{{ selectDate[1] }}
|
</div>
|
<div class="cardIcon">
|
<svg-icon icon-class="icon5" class="svg_class" />
|
</div>
|
</div>
|
</el-col>
|
<el-col :span="6">
|
<div class="cardBody">
|
<div class="cardTitle">
|
工序间在制总数
|
</div>
|
<div class="cardValue">
|
<countTo :start-val="0" :end-val="topValue.SumC" :duration="3000" />
|
</div>
|
<div class="cardDate">
|
{{ selectDate[0] }}~{{ selectDate[1] }}
|
</div>
|
<div class="cardIcon">
|
<svg-icon icon-class="icon3" class="svg_class" />
|
</div>
|
</div>
|
</el-col>
|
<el-col :span="6">
|
<div class="cardBody">
|
<div class="cardTitle">
|
不良品数
|
</div>
|
<div class="cardValue">
|
<countTo :start-val="0" :end-val="topValue.SumD" :duration="3000" />
|
</div>
|
<div class="cardDate">
|
{{ selectDate[0] }}~{{ selectDate[1] }}
|
</div>
|
<div class="cardIcon">
|
<svg-icon icon-class="icon4" class="svg_class" />
|
</div>
|
</div>
|
</el-col>
|
</el-row>
|
</el-card>
|
|
<el-row :gutter="10">
|
<el-col :span="15">
|
<el-card class="box-card" style="height: 500px;">
|
<div slot="header" class="clearfix">
|
工序详情
|
</div>
|
|
<el-table
|
:data="tableData"
|
height="360"
|
style="width: 100%"
|
>
|
<!-- :header-row-style="{fontWeight:600,color:'#000'}"-->
|
<el-table-column
|
label="序号"
|
align="center"
|
type="index"
|
/>
|
<el-table-column
|
prop="wkshp_name"
|
label="工序名称"
|
align="center"
|
/>
|
<el-table-column
|
prop="plan_qty"
|
label="任务数量"
|
align="center"
|
>
|
<template slot-scope="{row}">
|
<span
|
style="cursor: pointer;color: rgba(0,0,255,0.5);font-weight: bolder"
|
@click="tableRowClick(row,'W')"
|
>{{ row.plan_qty }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="good_qty"
|
label="合格数量"
|
align="center"
|
>
|
<template slot-scope="{row}">
|
<span
|
style="cursor: pointer;color: rgb(66,185,131);font-weight: bolder"
|
@click="tableRowClick(row,'T')"
|
>{{ row.good_qty }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="progress"
|
align="center"
|
label="进度"
|
>
|
<template slot-scope="{row}">
|
<el-progress :percentage="row.progress" />
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-card>
|
</el-col>
|
<el-col :span="9">
|
<el-card class="box-card" style="height: 500px;">
|
<div slot="header" class="clearfix">
|
工序不良Top10
|
</div>
|
<div id="echarts1" class="flex_c_c" style="width: 100%;height:420px;" />
|
</el-card>
|
</el-col>
|
</el-row>
|
|
<el-row>
|
<el-col :span="24">
|
<el-card class="box-card" style="height: 500px;">
|
<div slot="header" class="clearfix">
|
销售信息
|
</div>
|
<div v-if="activeName==='W'" class="tabBlock">
|
<div class="tabText">
|
<el-tag type="success" size="">总任务数:</el-tag>
|
{{ totalValue.taskCount }}
|
</div>
|
<div class="tabText">
|
<el-tag type="success" size="">总出库数:</el-tag>
|
{{ totalValue.outCount }}
|
</div>
|
<div class="tabText">
|
<el-tag type="danger" size="">总未出库数:</el-tag>
|
{{ totalValue.noOutCount }}
|
</div>
|
<div class="tabText">
|
<el-tag type="primary" size="">总达成率:</el-tag>
|
{{ totalValue.progress }}%
|
</div>
|
</div>
|
<div class="tabBlock2">
|
<el-date-picker
|
v-model="saleOrderSelectDate"
|
type="daterange"
|
style="width: 300px;z-index: 2;"
|
format="yyyy-MM-dd"
|
value-format="yyyy-MM-dd"
|
range-separator="~"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
:clearable="false"
|
:picker-options="pickerOptions"
|
@change="getHomeIndexCenterSaOrderSearch"
|
/>
|
</div>
|
<el-tabs
|
v-model="activeName"
|
style="height: 420px;width: 100%;"
|
type="card"
|
@tab-click="getHomeIndexCenterSaOrderSearch"
|
>
|
<el-tab-pane label="销售订单" name="W">
|
<el-table
|
:data="saleOrderTableData"
|
style="width: 100%;"
|
row-key="id"
|
height="360"
|
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
|
>
|
<!-- default-expand-all-->
|
<!-- <el-table-column-->
|
<!-- label="序号"-->
|
<!-- align="center"-->
|
<!-- type="index"-->
|
<!-- />-->
|
|
<el-table-column
|
prop="wocode"
|
label="销售单号"
|
align="center"
|
/>
|
<el-table-column
|
prop="customername"
|
label="客户"
|
align="center"
|
/>
|
<el-table-column
|
prop="madedate"
|
label="制单日期"
|
align="center"
|
/>
|
<el-table-column
|
prop="partname"
|
label="产品名称"
|
align="center"
|
/>
|
<el-table-column
|
prop="partspec"
|
label="规格型号"
|
align="center"
|
/>
|
<el-table-column
|
prop="quantity"
|
label="任务数量"
|
align="center"
|
/>
|
<el-table-column
|
prop="saleOutQuantity"
|
label="出库数量"
|
align="center"
|
>
|
<template slot-scope="{row}">
|
{{ row.saleOutQuantity ? row.saleOutQuantity : 0 }}
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="progress"
|
label="达成率"
|
align="center"
|
>
|
<template slot-scope="{row}">
|
<el-progress :percentage="row.progress" />
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="deliveryDate"
|
label="销售日期"
|
align="center"
|
/>
|
</el-table>
|
</el-tab-pane>
|
<el-tab-pane label="物料信息" name="P">
|
<div id="echarts2" class="flex_c_c" style="width: 100%;height:420px;" />
|
</el-tab-pane>
|
</el-tabs>
|
</el-card>
|
</el-col>
|
</el-row>
|
|
<el-row>
|
<el-col :span="24">
|
<el-card class="box-card" style="height: 500px;">
|
<div slot="header" class="clearfix">
|
库存信息
|
</div>
|
|
<el-tabs
|
style="height: 420px;width: 100%;"
|
type="card"
|
@tab-click="getHomeIndexBottomSearch"
|
>
|
<el-tab-pane label="毛坯" name="">
|
<div id="echarts3" class="flex_c_c" style="width: 100%;height:420px;" />
|
|
</el-tab-pane>
|
<el-tab-pane label="产成品" name="">
|
<div id="echarts4" class="flex_c_c" style="width: 100%;height:420px;" />
|
</el-tab-pane>
|
</el-tabs>
|
</el-card>
|
</el-col>
|
</el-row>
|
|
<el-dialog
|
title="物料明细"
|
:visible.sync="dialogVisible"
|
width="800"
|
:close-on-click-modal="false"
|
top="15vh"
|
@closed="handleClose"
|
>
|
<el-table
|
:data="dialogTableData"
|
style="width: 100%"
|
height="500"
|
>
|
<!-- :header-row-style="{fontWeight:600,color:'#000'}"-->
|
<el-table-column
|
label="序号"
|
align="center"
|
type="index"
|
/>
|
<el-table-column
|
prop="partname"
|
label="物料名称"
|
align="center"
|
/>
|
<el-table-column
|
prop="partspec"
|
label="规格型号"
|
align="center"
|
>
|
<template slot-scope="{row}">
|
{{ row.partspec ? row.partspec : '/' }}
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="sumqty"
|
label="任务数量"
|
align="center"
|
/>
|
<el-table-column
|
prop="good_qty"
|
label="合格数量"
|
align="center"
|
/>
|
</el-table>
|
|
<span slot="footer" class="dialog-footer">
|
<div class="footerButton">
|
<el-button @click="dialogVisible=false">返 回</el-button>
|
</div>
|
</span>
|
</el-dialog>
|
|
<el-dialog
|
title="不良明细"
|
:visible.sync="dialogVisible2"
|
width="800"
|
:close-on-click-modal="false"
|
top="15vh"
|
@closed="handleClose2"
|
>
|
<el-table
|
:data="dialogTableData2"
|
style="width: 100%"
|
height="500"
|
>
|
<!-- :header-row-style="{fontWeight:600,color:'#000'}"-->
|
<el-table-column
|
label="序号"
|
align="center"
|
type="index"
|
/>
|
<el-table-column
|
prop="wo_code"
|
label="工单号"
|
align="center"
|
/>
|
<el-table-column
|
prop="partnumber"
|
label="产品编码"
|
align="center"
|
/>
|
<el-table-column
|
prop="partname"
|
label="产品名称"
|
align="center"
|
/>
|
<el-table-column
|
prop="defect_qty"
|
label="不良数量"
|
align="center"
|
/>
|
</el-table>
|
|
<span slot="footer" class="dialog-footer">
|
<div class="footerButton">
|
<el-button @click="dialogVisible2=false">返 回</el-button>
|
</div>
|
</span>
|
</el-dialog>
|
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { echarts2, echarts3, loadEcharts } from '@/utils/myEcharts'
|
import countTo from 'vue-count-to'
|
import { handleDatetime } from '@/utils/global'
|
import * as echarts from 'echarts'
|
import {
|
HomeIndexBottomSearch,
|
HomeIndexCenterLeftSearch,
|
HomeIndexCenterLeftSubSearch, HomeIndexCenterRightSearch,
|
HomeIndexCenterSaOrderSearch,
|
HomeIndexTopSearch
|
} from '@/api/HomeIndex'
|
import arrayToTree from 'array-to-tree'
|
|
export default {
|
name: 'Index',
|
components: { countTo },
|
data() {
|
return {
|
mainHeight: 0,
|
topValue: {},
|
|
selectDate: [new Date().getFullYear() + '-' + (new Date().getMonth() + 1).toString().padStart(2, '0') + '-01', handleDatetime(new Date())],
|
saleOrderSelectDate: [new Date().getFullYear() + '-' + (new Date().getMonth() + 1).toString().padStart(2, '0') + '-01', handleDatetime(new Date())],
|
pickerOptions: {
|
firstDayOfWeek: 1
|
// shortcuts: [
|
// {
|
// text: '近一周',
|
// onClick(picker) {
|
// picker.$emit('pick', [handleDatetime(new Date().setTime(new Date().getTime() - 3600 * 1000 * 24 * 6)), handleDatetime(new Date())])
|
// }
|
// },
|
// {
|
// text: '上一周',
|
// onClick(picker) {
|
// picker.$emit('pick', [handleDatetime(new Date().setTime(new Date().getTime() - 3600 * 1000 * 24 * 13)), handleDatetime(new Date().setTime(new Date().getTime() - 3600 * 1000 * 24 * 7))])
|
// }
|
// },
|
// {
|
// text: '本月',
|
// onClick(picker) {
|
// picker.$emit('pick', [new Date().getFullYear() + '-' + (new Date().getMonth() + 1).toString().padStart(2, '0') + '-01', handleDatetime(new Date())])
|
// }
|
// }
|
// ]
|
},
|
tableData: [],
|
activeName: 'W', // 订单(W) 物料(P)
|
saleOrderTableData: [],
|
dialogVisible: false,
|
dialogTableData: [],
|
totalValue: {
|
taskCount: 0,
|
outCount: 0,
|
noOutCount: 0,
|
progress: 0
|
}, // 销售信息总什么数
|
dialogVisible2: false,
|
dialogTableData2: []
|
}
|
},
|
activated() {
|
window.addEventListener('resize', this.getHeight)
|
this.getHeight()
|
},
|
created() {
|
|
},
|
mounted() {
|
window.addEventListener('resize', this.getHeight)
|
this.getHeight()
|
|
this.getHomeIndexTopSearch()
|
this.getHomeIndexCenterLeftSearch()
|
this.getHomeIndexCenterSaOrderSearch()
|
|
this.getHomeIndexBottomSearch()
|
},
|
methods: {
|
// 获取头部四个值
|
async getHomeIndexTopSearch() {
|
const { data: res } = await HomeIndexTopSearch({ searchdate: this.selectDate.join('~') })
|
this.topValue = res[0]
|
},
|
// 获取工单实时进度
|
async getHomeIndexCenterLeftSearch() {
|
const { data: res } = await HomeIndexCenterLeftSearch({ searchdate: this.selectDate.join('~') })
|
res.CenterLeft.forEach(i => {
|
i.progress = parseFloat((i.good_qty * 100 / i.plan_qty).toFixed(2))
|
})
|
this.tableData = res.CenterLeft
|
this.handleEcharts(res.CenterRight)
|
},
|
// 行点击
|
async tableRowClick(row, type) {
|
if (type === 'T' && parseFloat(row.good_qty) === 0) {
|
return
|
}
|
const data = {
|
stepcode: row.wkshp_code,
|
type,
|
searchdate: this.selectDate.join('~')
|
}
|
const { data: res } = await HomeIndexCenterLeftSubSearch(data)
|
this.dialogTableData = res
|
this.dialogVisible = true
|
},
|
handleClose() {
|
this.dialogTableData = []
|
},
|
// 销售信息
|
async getHomeIndexCenterSaOrderSearch() {
|
const data = {
|
type: this.activeName,
|
searchdate: this.saleOrderSelectDate.join('~')
|
}
|
const { data: res } = await HomeIndexCenterSaOrderSearch(data)
|
if (this.activeName === 'W') {
|
res.forEach(i => {
|
i.id = i.id ? i.id : -1
|
i.madedate = i.madedate ? i.madedate.substring(0, 11) : ''
|
i.deliveryDate = i.deliveryDate ? i.deliveryDate.substring(0, 11) : ''
|
})
|
this.saleOrderTableData = arrayToTree(res, {
|
parentProperty: 'parentid',
|
customID: 'id',
|
childrenProperty: 'children'
|
})
|
this.saleOrderTableData.forEach(i => {
|
i.quantity = 0
|
i.saleOutQuantity = 0
|
i.partspec = ''
|
if (i.children && i.children.length > 0) {
|
i.children.forEach(j => {
|
i.quantity += j.quantity
|
i.saleOutQuantity += j.saleOutQuantity
|
j.partspec = j.partspec ? j.partspec : '/'
|
j.progress = parseFloat((j.saleOutQuantity * 100 / j.quantity).toFixed(2))
|
})
|
}
|
i.progress = parseFloat((i.saleOutQuantity * 100 / i.quantity).toFixed(2))
|
})
|
this.totalValue.taskCount = this.saleOrderTableData.map(i => i.quantity).reduce((acc, current) => acc + current, 0)
|
this.totalValue.outCount = this.saleOrderTableData.map(i => i.saleOutQuantity).reduce((acc, current) => acc + current, 0)
|
this.totalValue.noOutCount = this.totalValue.taskCount - this.totalValue.outCount
|
this.totalValue.progress = this.totalValue.taskCount === 0 ? 0 : parseFloat((this.totalValue.outCount * 100 / this.totalValue.taskCount).toFixed(2))
|
} else {
|
loadEcharts('echarts2', echarts2(res))
|
}
|
},
|
format(percentage) {
|
return ''
|
// return percentage === 100 ? '' : `${percentage}%`
|
},
|
// 日期选择器值改变
|
dateRangeChange(val) {
|
this.getHomeIndexTopSearch()
|
this.getHomeIndexCenterLeftSearch()
|
},
|
// 获取页面高度
|
getHeight() {
|
this.$nextTick(() => {
|
this.mainHeight = window.innerHeight - 120
|
})
|
},
|
// 工序不良率排名
|
handleEcharts(data) {
|
const that = this
|
const myChart = echarts.init(document.getElementById('echarts1'))
|
// let data = [
|
// { defect_name: 'xxx1', defect_qty: (Math.random() * 10).toFixed(0) },
|
// ]
|
data = data.filter(i => i.defect_qty !== 0)
|
const opt = {
|
index: 0
|
}
|
const color = ['#FC619D', '#FF904D', '#48BFE3']
|
data = data.sort((a, b) => {
|
return b.defect_qty - a.defect_qty
|
})
|
const option = {
|
title: {
|
show: !data.length,
|
text: '暂无数据',
|
textStyle: {
|
color: '#ccc',
|
fontSize: 16
|
},
|
left: 'center',
|
top: 'center'
|
},
|
grid: {
|
top: '2%',
|
bottom: -15,
|
right: 30,
|
left: -50,
|
containLabel: true
|
},
|
xAxis: {
|
show: false
|
},
|
yAxis: [
|
{
|
// triggerEvent: true, // 避免鼠标经过成为手指头
|
inverse: true,
|
data: data.map(i => i.defect_name),
|
axisLine: {
|
show: false
|
},
|
splitLine: {
|
show: false
|
},
|
axisTick: {
|
show: false
|
},
|
axisLabel: {
|
show: true,
|
interval: 0,
|
color: '#666',
|
// color: '#000',
|
align: 'left',
|
margin: 80,
|
fontSize: 13,
|
formatter: function(value, index) {
|
if (opt.index === 0 && index < 3) {
|
return '{idx' + index + '|' + (1 + index) + '} {title|' + value + '}'
|
} else if (opt.index !== 0 && (index + opt.index) < 9) {
|
return '{idx|0' + (1 + index + opt.index) + '} {title|' + value + '}'
|
} else {
|
return '{idx|' + (1 + index + opt.index) + '} {title|' + value + '}'
|
}
|
},
|
rich: {
|
idx0: {
|
color: '#FB375E',
|
backgroundColor: '#FFE8EC',
|
borderRadius: 100,
|
padding: [5, 8]
|
},
|
idx1: {
|
color: '#FF9023',
|
backgroundColor: '#FFEACF',
|
borderRadius: 100,
|
padding: [5, 8]
|
},
|
idx2: {
|
color: '#01B599',
|
backgroundColor: '#E1F7F3',
|
borderRadius: 100,
|
padding: [5, 8]
|
},
|
idx: {
|
color: '#333',
|
borderRadius: 100,
|
padding: [5, 8]
|
},
|
title: {
|
width: 165
|
}
|
}
|
}
|
},
|
{
|
// triggerEvent: true, // 避免鼠标经过成为手指头
|
show: true,
|
inverse: true,
|
data: data.map(i => i.defect_name),
|
axisLine: {
|
show: false
|
},
|
splitLine: {
|
show: false
|
},
|
axisTick: {
|
show: false
|
},
|
axisLabel: {
|
interval: 0,
|
color: '#666',
|
align: 'left',
|
margin: 20,
|
fontSize: 13,
|
formatter: function(value, index) {
|
return '数量：' + data[index].defect_qty + ' PCS'
|
}
|
}
|
}
|
],
|
series: [
|
{
|
// cursor: 'default', // 避免鼠标经过成为手指头
|
name: '条',
|
type: 'bar',
|
yAxisIndex: 0,
|
data: data.map(i => i.defect_qty),
|
barWidth: 10,
|
itemStyle: {
|
color: (val) => {
|
if (val.dataIndex < 3 && opt.index === 0) {
|
return color[val.dataIndex]
|
} else {
|
return '#1990FF'
|
}
|
},
|
barBorderRadius: 30
|
}
|
}
|
]
|
}
|
|
// 使用刚指定的配置项和数据显示图表。
|
myChart.clear()
|
myChart.setOption(option, true)
|
|
myChart.on('click', function(params) {
|
// console.log(params.dataIndex, data)
|
const D = {
|
searchdate: that.selectDate.join('~'),
|
defect_code: data[params.dataIndex].defect_code
|
}
|
HomeIndexCenterRightSearch(D).then(res => {
|
that.dialogTableData2 = res.data
|
that.dialogVisible2 = true
|
})
|
})
|
},
|
handleClose2() {
|
this.dialogTableData2 = []
|
},
|
//
|
async getHomeIndexBottomSearch(val) {
|
const { data: res } = await HomeIndexBottomSearch()
|
if (val && val.label === '产成品') {
|
loadEcharts('echarts4', echarts3(res.BottomTwo))
|
} else {
|
loadEcharts('echarts3', echarts3(res.BottomOne))
|
}
|
}
|
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.body {
|
padding: 0;
|
}
|
|
.main {
|
//margin-top: 10px;
|
//padding: 30px 10px 0 20px;
|
//background-color: #eaecef;
|
background-color: #fff;
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
overflow-y: auto;
|
overflow-x: hidden;
|
padding: 0 10px;
|
}
|
|
.box-card {
|
margin-top: 10px;
|
}
|
|
.clearfix {
|
font-weight: 600;
|
}
|
|
.cardBody {
|
border-radius: 20px;
|
border: 1px solid #eee;
|
padding: 12px 30px;
|
//padding: 12px;
|
//height: 15vh;
|
height: 100%;
|
position: relative;
|
}
|
|
.cardTitle {
|
font-size: 14px;
|
}
|
|
.cardValue {
|
font-size: 25px;
|
font-weight: 700;
|
//margin: 10px;
|
margin-top: 20px;
|
}
|
|
.cardDate {
|
font-size: 12px;
|
margin-top: 20px;
|
color: #9e9d9d;
|
}
|
|
.cardIcon {
|
font-size: 80px;
|
position: absolute;
|
top: 0;
|
right: 30px;
|
}
|
|
::v-deep .el-card__header {
|
padding: 10px 20px;
|
}
|
|
::v-deep .el-select__caret {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
|
::v-deep .el-range__icon {
|
line-height: 28px !important;
|
}
|
|
::v-deep .el-range-separator {
|
line-height: 28px !important;
|
}
|
|
::v-deep .el-range-input {
|
font-size: 14px;
|
}
|
|
::v-deep .el-range-separator {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
|
::v-deep .el-progress {
|
display: flex;
|
align-items: center;
|
}
|
|
::v-deep .el-progress__text {
|
width: 50px;
|
}
|
|
.tabBlock {
|
position: absolute;
|
top: 73px;
|
left: 215px;
|
display: flex;
|
}
|
|
.tabBlock2 {
|
position: absolute;
|
top: 73px;
|
right: 20px;
|
display: flex;
|
}
|
|
.tabText {
|
margin-left: 15px;
|
margin-top: 2px;
|
font-weight: 600;
|
}
|
|
::v-deep .el-table__body-wrapper {
|
background: transparent;
|
}
|
</style>
|
