Commit 58e314c8 authored by 王礼鸿 Baimax Wang's avatar 王礼鸿 Baimax Wang

样式统一以及优化

parent c36a9928
...@@ -34,7 +34,7 @@ ...@@ -34,7 +34,7 @@
margin-left: 1rem; margin-left: 1rem;
color: var(--lightblue-text-color); color: var(--lightblue-text-color);
font-size: 20px; font-size: 20px;
font-family: AlimamaShuHeiTi, serif; /*font-family: AlimamaShuHeiTi, serif;*/
font-weight: bold; font-weight: bold;
letter-spacing: 2px; letter-spacing: 2px;
} }
......
...@@ -137,10 +137,15 @@ input[type="button"]{ ...@@ -137,10 +137,15 @@ input[type="button"]{
border: none; border: none;
font-size: 12px; font-size: 12px;
border-radius: 25px; border-radius: 25px;
font-weight: bold;
padding: 0 10px; padding: 0 10px;
color: #00c8d6; color: #00c8d6;
background-color: #1234a1; background-color: #1234a1;
} }
input[type="button"]:hover{
color: #1234a1 !important;
background-color: #00c8d6 !important;
}
.selectedBtn{ .selectedBtn{
color: #1234a1 !important; color: #1234a1 !important;
background-color: #00c8d6 !important; background-color: #00c8d6 !important;
......
<template> <template>
<div class="turnover-detail"> <div class="turnover-detail">
<div class="card-board"> <div class="card-board">
<contrast-card v-for="data in currentData.head" style="height: 100%;width: 20%;" @click.native="selectLegend(data)"> <contrast-card v-for="data in currentData.head" style="height: 100%;width: 20%;" :class="{'selectCard': currentCard === data.title}" @click.native="selectLegend(data)">
<title-content-mark style="color: #369afa;float: left;width: 40%;font-size: 18px" :title-style="{'font-weight': 'bold'}" :title="data.title" :content="data.amount" isBold/> <title-content-mark style="color: #369afa;float: left;width: 40%;font-size: 18px" :title-style="{'font-weight': 'bold'}" :title="data.title" :content="data.amount" isBold/>
<div style="width: 60%; height: 100%; float:left; padding: 2% 2% 0 8%; line-height: 60px; display: flex; align-items: center;font-size: 16px;"> <div style="width: 60%; height: 100%; float:left; padding: 2% 2% 0 8%; line-height: 60px; display: flex; align-items: center;font-size: 16px;">
<table-column style="float: left;width: 25%;" :data="data.hb" name="title"/> <table-column style="float: left;width: 25%;" :data="data.hb" name="title"/>
...@@ -268,6 +268,7 @@ export default { ...@@ -268,6 +268,7 @@ export default {
chart: null, chart: null,
currentBtn: "day", currentBtn: "day",
currentLegend: '汽运(元)', currentLegend: '汽运(元)',
currentCard: '营业额',
chartOption:{ chartOption:{
legend: { legend: {
textStyle: { textStyle: {
...@@ -418,6 +419,8 @@ export default { ...@@ -418,6 +419,8 @@ export default {
}else { }else {
this.chartOption.series[3].data = []; this.chartOption.series[3].data = [];
} }
this.currentLegend = name;
this.currentCard = data.title;
this.chart.setOption(this.chartOption); this.chart.setOption(this.chartOption);
}, },
...@@ -468,11 +471,16 @@ input[type="button"]{ ...@@ -468,11 +471,16 @@ input[type="button"]{
margin: 0.5%; margin: 0.5%;
border: none; border: none;
font-size: 12px; font-size: 12px;
font-weight: bold;
border-radius: 25px; border-radius: 25px;
padding: 0 10px; padding: 0 10px;
color: #00c8d6; color: #00c8d6;
background-color: #1234a1; background-color: #1234a1;
} }
input[type="button"]:hover{
color: #1234a1 !important;
background-color: #00c8d6 !important;
}
.selectedBtn{ .selectedBtn{
color: #1234a1 !important; color: #1234a1 !important;
background-color: #00c8d6 !important; background-color: #00c8d6 !important;
...@@ -481,4 +489,7 @@ input[type="button"]{ ...@@ -481,4 +489,7 @@ input[type="button"]{
color: #00c8d6; color: #00c8d6;
background-color: #1234a1; background-color: #1234a1;
} }
.selectCard{
background-color: var(--card-background-select-color) !important;
}
</style> </style>
...@@ -76,6 +76,7 @@ export default { ...@@ -76,6 +76,7 @@ export default {
margin: 0.5%; margin: 0.5%;
border: none; border: none;
font-size: 12px; font-size: 12px;
font-weight: bold;
border-radius: 25px; border-radius: 25px;
padding: 0 10px; padding: 0 10px;
line-height: 100%; line-height: 100%;
...@@ -83,4 +84,8 @@ export default { ...@@ -83,4 +84,8 @@ export default {
background-color: #1234a1; background-color: #1234a1;
margin: auto; margin: auto;
} }
.btn:hover{
color: #1234a1 !important;
background-color: #00c8d6 !important;
}
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment