代码提交
This commit is contained in:
parent
9e95f5d9e5
commit
d143a2ce6a
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 328 B |
Binary file not shown.
|
After Width: | Height: | Size: 9.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 471 B |
Binary file not shown.
|
After Width: | Height: | Size: 220 B |
Binary file not shown.
|
After Width: | Height: | Size: 241 B |
Binary file not shown.
|
After Width: | Height: | Size: 229 B |
Binary file not shown.
|
After Width: | Height: | Size: 9.5 KiB |
|
|
@ -6,31 +6,84 @@
|
|||
<div class="business-hall">
|
||||
<div class="title">
|
||||
<!-- 45.4% -->
|
||||
<p class='titleText'text='营业厅时长' style="font-family: 'maleGod'">营业厅时长</p>
|
||||
<p class='titleText' text='营业厅时长' style="font-family:maleGod">营业厅时长</p>
|
||||
|
||||
</div>
|
||||
<!-- 两个小版块 -->
|
||||
<div class="hall-box">
|
||||
<div class="item">
|
||||
<p class="font">平均办理时长</p>
|
||||
<p class="hall-time" style="color:#2e81a2">49分钟33秒</p>
|
||||
<div class="item" v-for="(item, i) in hallList" :key="i">
|
||||
<p class="font">{{ item.font }}</p>
|
||||
<p :class="'hall-time' + i">{{ item.time }}</p>
|
||||
</div>
|
||||
<div class="item">
|
||||
<p class="font">平均等待时长</p>
|
||||
<p class="hall-time" style="color:#9c9060">05分钟33秒</p>
|
||||
</div>
|
||||
<!-- 图表内容样式 -->
|
||||
<div class="hall-line">
|
||||
<div class="hall-title">
|
||||
<div>
|
||||
<span style="font-family:'maleGod'" :text="s" v-for="(s, i) in hallTitle"
|
||||
:class="'span' + i">
|
||||
{{ s }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="hall-icon">
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart-title">
|
||||
<span v-for="(s, i) in hallLineList">
|
||||
{{ s }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- 图表样式 -->
|
||||
<div class="hall-chart" ref="hallChart">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- 客流量 -->
|
||||
<div class="passenger-flow">
|
||||
<div class="title">
|
||||
<p class='titleText'text='客流量' style="font-family: 'maleGod'">客流量</p>
|
||||
<p class='titleText' text='客流量' style="font-family:maleGod">客流量</p>
|
||||
</div>
|
||||
<!-- 客流量板块内容 -->
|
||||
<div class="flow-box">
|
||||
<div class="flow-left">
|
||||
<p class="flow-total">总客流量</p>
|
||||
<span class="flow-value">6587次</span>
|
||||
</div>
|
||||
<div class="flow-right">
|
||||
<ul>
|
||||
<li class="flow-item" v-for="(val, i) in flowList">
|
||||
<span :class="'up' + i"><i :class="'rect'+i"></i>{{ val.value }}</span>
|
||||
<span>{{ val.text }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- 图表切换 -->
|
||||
<div class="chart-title">
|
||||
<span v-for="(s, i) in hallLineList">
|
||||
{{ s }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flow-chart" ref="flowChart">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- 厅内统计 -->
|
||||
<div class='hall-statistics'>
|
||||
<div class="title">
|
||||
<p class='titleText'text='厅内统计' style="font-family: 'maleGod'">厅内统计</p>
|
||||
<p class='titleText' text='厅内统计' style="font-family:maleGod">厅内统计</p>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<div v-for="(o, i) in statList" :key="i" class="stat-item">
|
||||
<section :class="'img' + i"></section>
|
||||
<p>{{ o.name }}</p>
|
||||
<p class="stat-num">{{ o.num }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -39,17 +92,17 @@
|
|||
<!-- 缴费情况 -->
|
||||
<div class="payment">
|
||||
<div class="title">
|
||||
<p class='titleText'text='缴费情况' style="font-family: 'maleGod'">缴费情况</p>
|
||||
<p class='titleText' text='缴费情况' style="font-family:maleGod">缴费情况</p>
|
||||
</div>
|
||||
<div class="paymentContent">
|
||||
<div class="paymentList" v-for="(item,index) in paymentList">
|
||||
<div class="paymentList" v-for="(item, index) in paymentList">
|
||||
<div class="listOne">
|
||||
<img src="../assets/images/paymentYuan.png" style="width:18px;height:18px"/>
|
||||
<div>{{item.count}}</div>
|
||||
<img src="../assets/images/paymentYuan.png" style="width:18px;height:18px" />
|
||||
<div>{{ item.count }}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>{{item.name}}</div>
|
||||
<div>{{item.per}}</div>
|
||||
<div>{{ item.name }}</div>
|
||||
<div>{{ item.per }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -57,13 +110,13 @@
|
|||
<!-- 业务受理 -->
|
||||
<div class="business-acceptance">
|
||||
<div class="title">
|
||||
<p class='titleText'text='业务受理' style="font-family: 'maleGod'">业务受理</p>
|
||||
<p class='titleText' text='业务受理' style="font-family: maleGod">业务受理</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 服务情况 -->
|
||||
<div class="service">
|
||||
<div class="title">
|
||||
<p class='titleText'text='服务情况' style="font-family: 'maleGod'">服务情况</p>
|
||||
<p class='titleText' text='服务情况' style="font-family: maleGod">服务情况</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -72,32 +125,325 @@
|
|||
|
||||
<script>
|
||||
export default {
|
||||
name:'index',
|
||||
data(){
|
||||
return{
|
||||
paymentList:[
|
||||
{
|
||||
count:'9786笔',
|
||||
name:'环比',
|
||||
per:'88.33%',
|
||||
color:'rgb(29,150,213)'
|
||||
},
|
||||
{
|
||||
count:'144.53万元',
|
||||
name:'环比',
|
||||
per:'86.24%',
|
||||
color:'rgb(244,214,45)'
|
||||
name: 'index',
|
||||
data() {
|
||||
return {
|
||||
paymentList: [
|
||||
{
|
||||
count: '9786笔',
|
||||
name: '环比',
|
||||
per: '88.33%',
|
||||
color: 'rgb(29,150,213)'
|
||||
},
|
||||
{
|
||||
count: '144.53万元',
|
||||
name: '环比',
|
||||
per: '86.24%',
|
||||
color: 'rgb(244,214,45)'
|
||||
}
|
||||
],
|
||||
hallList: [
|
||||
{
|
||||
font: '平均办理时长',
|
||||
time: '49分钟33秒'
|
||||
},
|
||||
{
|
||||
font: '平均等待时长',
|
||||
time: '05分钟33秒'
|
||||
}
|
||||
],
|
||||
hallTitle: ['平均办理时长', '平均等待时长'],
|
||||
hallLineList: ['人员', '趋势', '排序', '排名'],
|
||||
flowList: [
|
||||
{
|
||||
text: '峰值',
|
||||
value: '115人次'
|
||||
},
|
||||
{
|
||||
text: '谷值',
|
||||
value: '1人次'
|
||||
},
|
||||
{
|
||||
text: '均值',
|
||||
value: '26人次'
|
||||
}
|
||||
],
|
||||
flowChartList: [{
|
||||
name: '峰值',
|
||||
data: [8, 12, 11, 12]
|
||||
}, {
|
||||
name: '谷值',
|
||||
data: [20, 24, 22, 24]
|
||||
}, {
|
||||
name: '均值',
|
||||
data: [32, 36, 33, 36]
|
||||
}],
|
||||
statList: [
|
||||
{
|
||||
name: '设备数(台)',
|
||||
num: 63,
|
||||
},
|
||||
{
|
||||
name: '员工(人)',
|
||||
num: 23
|
||||
}, {
|
||||
name: '电子工牌(个)',
|
||||
num: 63
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
|
||||
},
|
||||
mounted() {
|
||||
|
||||
this.drawHallChart()
|
||||
this.drawFlowChart()
|
||||
},
|
||||
methods: {
|
||||
// 客户临厅时长的图表
|
||||
drawHallChart() {
|
||||
let myChart = this.$echarts.getInstanceByDom(this.$refs.hallChart)
|
||||
if (myChart == null) {
|
||||
myChart = this.$echarts.init(this.$refs.hallChart)
|
||||
}
|
||||
let option = {
|
||||
grid: {
|
||||
top: "20%",
|
||||
left: "8%",
|
||||
right: "2%",
|
||||
bottom: "15%",
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#20668d',
|
||||
}
|
||||
},
|
||||
splitArea: {
|
||||
// show: true,
|
||||
color: '#f00',
|
||||
lineStyle: {
|
||||
color: '#f00',
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
},
|
||||
// margin: 10,
|
||||
},
|
||||
// 两边留白
|
||||
boundaryGap: true,
|
||||
data: ['周欢', '唐颖', '刘梦颖'],
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '分钟',
|
||||
nameTextStyle: {
|
||||
fontSize: 11,
|
||||
color: '#d8d4d7',
|
||||
padding: [10, 35, 0, 0],
|
||||
},
|
||||
|
||||
// min: 0,
|
||||
// max: 140,
|
||||
splitNumber: 4,
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgba(86,183,232,0.2)",
|
||||
type: 'dashed'
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
// margin: 20,
|
||||
textStyle: {
|
||||
color: '#d8d4d7'
|
||||
},
|
||||
formatter: '{value}',
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '销售费用',
|
||||
type: 'line',
|
||||
Symbol: 'circle',
|
||||
symbolSize: 7,
|
||||
// showAllSymbol: true,
|
||||
data: [30.13, 86.25, 29.45],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#f4e127',
|
||||
lineStyle: {
|
||||
color: '#f4e127',
|
||||
},
|
||||
label: {
|
||||
show: true, //开启显示
|
||||
color: '#d8d4d7',
|
||||
position: 'top', //在上方显示
|
||||
formatter: function (res) {
|
||||
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
],
|
||||
};
|
||||
myChart.setOption(option)
|
||||
window.addEventListener('resize', function () {
|
||||
myChart.resize();
|
||||
});
|
||||
},
|
||||
// 客流量的图表
|
||||
drawFlowChart() {
|
||||
|
||||
let myChart = this.$echarts.getInstanceByDom(this.$refs.flowChart)
|
||||
if (myChart == null) {
|
||||
myChart = this.$echarts.init(this.$refs.flowChart)
|
||||
}
|
||||
var color = ['#2270b9', '#3bbabc', '#4ab135']
|
||||
let option = {
|
||||
grid: {
|
||||
top: "20%",
|
||||
left: "8%",
|
||||
right: "2%",
|
||||
bottom: "15%",
|
||||
},
|
||||
legend: {
|
||||
data: this.flowList.map(ele => {
|
||||
return ele.text
|
||||
}),
|
||||
// icon: 'circle',
|
||||
|
||||
// symbolSize:4,
|
||||
textStyle: {
|
||||
align: 'right',
|
||||
color: '#fff'
|
||||
},
|
||||
top: '-2%',
|
||||
right: '2%',
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#20668d',
|
||||
}
|
||||
},
|
||||
splitArea: {
|
||||
// show: true,
|
||||
color: '#f00',
|
||||
lineStyle: {
|
||||
color: '#f00',
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
},
|
||||
// margin: 10,
|
||||
},
|
||||
// 两边留白
|
||||
boundaryGap: true,
|
||||
data: ['20230127', '20230128', '20230129', '20230130'],
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '分钟',
|
||||
nameTextStyle: {
|
||||
fontSize: 11,
|
||||
color: '#d8d4d7',
|
||||
padding: [10, 35, 0, 0],
|
||||
},
|
||||
|
||||
// min: 0,
|
||||
// max: 140,
|
||||
splitNumber: 4,
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgba(86,183,232,0.2)",
|
||||
type: 'dashed'
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
// margin: 20,
|
||||
textStyle: {
|
||||
color: '#d8d4d7'
|
||||
},
|
||||
formatter: '{value}',
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
],
|
||||
series: this.flowChartList.map((ele, index) => {
|
||||
return {
|
||||
name: ele.name,
|
||||
type: 'line',
|
||||
Symbol: 'circle',
|
||||
symbolSize: 7,
|
||||
// showAllSymbol: true,
|
||||
data: ele.data,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: color[index],
|
||||
lineStyle: {
|
||||
color: color[index],
|
||||
},
|
||||
label: {
|
||||
show: true, //开启显示
|
||||
color: '#d8d4d7',
|
||||
position: 'top', //在上方显示
|
||||
formatter: function (res) {
|
||||
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
}),
|
||||
};
|
||||
myChart.setOption(option)
|
||||
window.addEventListener('resize', function () {
|
||||
myChart.resize();
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -126,24 +472,115 @@ mounted(){
|
|||
margin-bottom: 5px;
|
||||
padding: 13px;
|
||||
box-sizing: border-box;
|
||||
.hall-box{
|
||||
|
||||
.hall-box {
|
||||
width: 100%;
|
||||
height: 18.6%;
|
||||
display: flex;
|
||||
margin-bottom: 10px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.hall-box .item{
|
||||
width: 45%;
|
||||
|
||||
.hall-chart {
|
||||
width: 100%;
|
||||
height: 47%;
|
||||
}
|
||||
|
||||
.hall-line {
|
||||
.hall-title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 8px;
|
||||
|
||||
.span0,
|
||||
.span1 {
|
||||
position: relative;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.hall-icon span {
|
||||
background-size: 100% 100%;
|
||||
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.hall-icon span:nth-child(1) {
|
||||
background-image: url(../assets/images/line-icon.png);
|
||||
width: 17px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
.hall-icon span:nth-child(2) {
|
||||
background-image: url(../assets/images/pie-icon.png);
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-left: 7px;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.chart-title {
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.chart-title span {
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
margin-left: 18px;
|
||||
}
|
||||
|
||||
.chart-title span:nth-child(1) {
|
||||
margin-left: 0;
|
||||
color: #1e96d5;
|
||||
border-bottom: 1px solid #1e96d5;
|
||||
// text-decoration: underline;
|
||||
}
|
||||
|
||||
.hall-line span::before {
|
||||
content: attr(text);
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
bottom: 0;
|
||||
color: rgb(163, 227, 245);
|
||||
-webkit-mask: linear-gradient(to top, rgba(163, 227, 245,0.7), transparent);
|
||||
}
|
||||
|
||||
|
||||
.hall-box .item {
|
||||
width: 48.5%;
|
||||
height: 100%;
|
||||
// background-color: aqua;
|
||||
background-image: url(../assets/images/hall-box.png);
|
||||
.font{
|
||||
padding: 8px 10px 8px;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
|
||||
.font {
|
||||
font-size: 12px;
|
||||
color: #a5a5af;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
.hall-time{
|
||||
|
||||
.hall-time1,
|
||||
.hall-time0 {
|
||||
font-family: 'maleGod';
|
||||
font-size: 21px;
|
||||
font-size: 25px;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
bottom: 5px;
|
||||
width: calc(100% - 16px);
|
||||
}
|
||||
|
||||
.hall-time1 {
|
||||
color: #dfcc4d !important;
|
||||
}
|
||||
|
||||
.hall-time0 {
|
||||
color: #4bbfde;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -162,37 +599,199 @@ mounted(){
|
|||
font-family: 'maleGod';
|
||||
align-items: center;
|
||||
letter-spacing: 1px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.titleText:before{
|
||||
content: attr(text);
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
color:rgb(163, 227, 245);
|
||||
-webkit-mask:linear-gradient(to top, rgb(163, 227, 245), transparent );
|
||||
}
|
||||
.left-content .business-hall{
|
||||
|
||||
.titleText:before {
|
||||
content: attr(text);
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
color: rgb(163, 227, 245);
|
||||
-webkit-mask: linear-gradient(to top, rgb(163, 227, 245), transparent);
|
||||
}
|
||||
|
||||
.left-content .business-hall {
|
||||
height: 38.2%;
|
||||
|
||||
}
|
||||
|
||||
.left-content .passenger-flow {
|
||||
height: 39.7%;
|
||||
|
||||
// 客流量图表
|
||||
.flow-chart {
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.flow-box {
|
||||
height: 25%;
|
||||
width: 100%;
|
||||
background-image: url(../assets/images/flow-box.png);
|
||||
background-size: 100% 100%;
|
||||
padding: 8px 15px 8px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
margin-bottom: 10px;
|
||||
|
||||
.flow-left {
|
||||
width: 44%;
|
||||
text-align: center;
|
||||
|
||||
.flow-total {
|
||||
color: #c0c0c4;
|
||||
font-size: 13px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.flow-value {
|
||||
display: inline-block;
|
||||
margin-top: 10px;
|
||||
font-family: maleGod;
|
||||
font-size: 25px;
|
||||
color: #4bbfde;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.flow-right {
|
||||
width: 56%;
|
||||
height: 100%;
|
||||
margin-bottom: 10px;
|
||||
|
||||
ul {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.flow-item {
|
||||
justify-content: space-between;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.up0 {
|
||||
color: #36904c;
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
.up1 {
|
||||
color: #3bbabc;
|
||||
}
|
||||
|
||||
.up2 {
|
||||
color: #1d62a3;
|
||||
}
|
||||
|
||||
.flow-item span:nth-child(1) {
|
||||
font-family: maleGod;
|
||||
font-size: 20px;
|
||||
// margin-top: 3px;
|
||||
i{
|
||||
width: 9px;
|
||||
height: 8px;
|
||||
background-size: 100% 100%;
|
||||
display: inline-block;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.rect0{
|
||||
background-image: url(../assets/images/rect-icon1.png);
|
||||
}
|
||||
.rect1{
|
||||
background-image: url(../assets/images/rect-icon2.png);
|
||||
}
|
||||
.rect2{
|
||||
background-image: url(../assets/images/rect-icon2.png);
|
||||
}
|
||||
}
|
||||
|
||||
.flow-item {
|
||||
height: 33%;
|
||||
}
|
||||
|
||||
.flow-item span {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.flow-item span:nth-child(2) {
|
||||
font-size: 13px;
|
||||
color: #c0c0c4;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.left-content .hall-statistics {
|
||||
height: 20.4%;
|
||||
|
||||
.stat {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
|
||||
.stat-item {
|
||||
width: 33%;
|
||||
.img2{
|
||||
background-image: url(../assets/images/people-icon.png)
|
||||
}
|
||||
.img1{
|
||||
background-image:url(../assets/images/paizi.png)
|
||||
}
|
||||
// display: flex;
|
||||
section {
|
||||
width: 83px;
|
||||
height: 76px;
|
||||
margin: 0 auto;
|
||||
background-image: url(../assets/images/stat-icon.png);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
p {
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.stat-num {
|
||||
font-family: 'maleGod';
|
||||
color: #4bbfde !important;
|
||||
font-size: 20px;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-height:980px) {
|
||||
.stat-num {
|
||||
font-size: 20px;
|
||||
font-family: 'maleGod';
|
||||
// display: inline-block;
|
||||
margin: 4px ;
|
||||
position: relative;
|
||||
// top: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.right-content .payment {
|
||||
height: 38.3%;
|
||||
.paymentContent{
|
||||
|
||||
.paymentContent {
|
||||
height: calc(100% - 30px);
|
||||
.paymentList{
|
||||
width:100% ;
|
||||
|
||||
.paymentList {
|
||||
width: 100%;
|
||||
height: 38px;
|
||||
background: url("../assets/images/payment.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
.listOne{
|
||||
|
||||
.listOne {
|
||||
height: 100%;
|
||||
width: 28%;
|
||||
display: flex;
|
||||
|
|
|
|||
Loading…
Reference in New Issue