提交 197b59d5 authored 作者: 冯小芳's avatar 冯小芳

深色版修改

上级 3bde422c
差异被折叠。
......@@ -35,19 +35,25 @@
<div class="xbox-content user_line">
<div class="Progress">
<p>{{ citys.municipal }}</p>
<div class="percent">{{ citys.municipalnum }}%</div>
<el-progress
type="circle"
:percentage="citys.municipalnum"
:width="iswidth"
:show-text="false"
></el-progress>
</div>
<div class="Progress">
<p>{{ citys.county }}</p>
<div class="yellow">{{ citys.countynum }}%</div>
<el-progress
type="circle"
:percentage="citys.countynum"
color="#634cf0"
color="#fac858"
:width="iswidth"
:show-text="false"
></el-progress>
</div>
</div>
......@@ -80,44 +86,43 @@ export default defineComponent({
MapTitle,
},
setup() {},
computed: {
computed: {
...mapState({
curDataType: (state) => state.curDataType,
}),
industryCardItems() {
return Mock[this.curDataType].industryCardItems;
},
city() {
city() {
return Mock[this.curDataType].city;
},
},
},
data() {
return {
iswidth: 72,
iswidth: 82,
};
},
});
</script>
<style lang="scss" scoped>
::v-deep .Progress .el-progress__text {
position: relative;
top: -20px;
left: 65px;
font-size: 18px;
color: #4198ff;
}
::v-deep .Progress .el-progress__text span {
font-size: 20px
}
// ::v-deep .Progress .el-progress__text {
// position: relative;
// top: -20px;
// left: 75px;
// font-size: 18px;
// color: #4198ff;
// }
// ::v-deep .Progress .el-progress__text span {
// font-size: 20px;
// }
.card-item {
background: #fff;
background-color: #0d417140;
border: 1px solid #125ba3;
border-radius: 5px;
padding: 15px 20px;
overflow: hidden;
cursor: pointer;
transition: all 0.2s;
box-shadow: 2px 2px 10px #eee;
flex: 1;
height: 100%;
box-sizing: border-box;
......@@ -134,7 +139,7 @@ export default defineComponent({
.xbox-content {
height: 150px;
box-sizing: border-box;
background-color: #f8f9fb;
background-color: #0e4785;
border-radius: 4px;
display: flex;
justify-content: space-around;
......@@ -145,13 +150,26 @@ export default defineComponent({
text-align: center;
position: relative;
p {
color: #666666;
color: #fff;
position: absolute;
top: 10px;
right: 23%;
right: 20%;
font-size: 14px;
}
.percent {
color: #4198ff;
position: absolute;
top: 40px;
right: 18%;
font-size: 16px;
}
.yellow {
color: #fac858;
position: absolute;
top: 40px;
right: 18%;
font-size: 16px;
}
}
}
.user_line {
......
......@@ -114,10 +114,37 @@ export default defineComponent({
yAxis: {
type: "value",
name: "数量(次)",
nameTextStyle: {
color: "#fff",
},
axisLabel: {
show: true,
color: "#fff",
},
splitLine: {
show: true,
lineStyle: {
color: "#125ba3",
type: "dotted",
},
},
},
xAxis: {
type: "category",
data: xAxisCity,
axisLabel: {
show: true,
color: "#ffffff",
},
axisLine: {
show: true,
lineStyle: {
color: "#125ba3",
},
},
axisTick: {
show: false,
},
},
series: [seriesBar],
};
......@@ -203,8 +230,8 @@ export default defineComponent({
height: 50px;
line-height: 50px;
border-radius: 4px;
color: #666666;
background: rgba(248, 249, 251, 1);
color: #fff;
background: #0e4785;
display: flex;
justify-content: space-between;
padding: 0 10px 0 14px;
......@@ -212,12 +239,12 @@ export default defineComponent({
margin-top: 10px;
}
.frequency {
color: #19ecff;
font-size: 20px;
color: rgba(65, 152, 255, 1);
font-weight: 500;
}
.second {
color: #666666;
color: #fff;
font-size: 12px;
font-weight: normal;
}
......
......@@ -89,6 +89,19 @@ export default defineComponent({
xAxis: {
type: "category",
data: xAxisValue,
axisLabel: {
show: true,
color: "#ffffff",
},
axisLine: {
show: true,
lineStyle: {
color: "#125ba3",
},
},
axisTick: {
show: false,
},
},
series: [
{
......@@ -98,8 +111,9 @@ export default defineComponent({
},
label: {
show: true,
color: "#00dbf6",
position: "top",
// formatter: "{c} 分",
formatter: "{c} 分",
},
barWidth: 20,
data: this.seriesData,
......@@ -148,7 +162,7 @@ export default defineComponent({
box-sizing: border-box;
.text {
color: #4198ff;
color: #fff;
margin: 10px 0;
font-size: 16px;
}
......
......@@ -115,10 +115,37 @@ export default defineComponent({
yAxis: {
type: "value",
name: "数量(次)",
nameTextStyle: {
color: "#fff",
},
axisLabel: {
show: true,
color: "#fff",
},
splitLine: {
show: true,
lineStyle: {
color: "#125ba3",
type: "dotted",
},
},
},
xAxis: {
type: "category",
data: xAxisCity,
axisLabel: {
show: true,
color: "#ffffff",
},
axisLine: {
show: true,
lineStyle: {
color: "#125ba3",
},
},
axisTick: {
show: false,
},
},
series: [seriesBar],
};
......@@ -171,10 +198,10 @@ export default defineComponent({
flex: 1;
padding: 8px 15px;
margin-right: 15px;
background: #f8f9fb;
background: #0e4785;
border-radius: 5px;
font-size: 14px;
color: #333;
color: #fff;
display: flex;
align-items: center;
justify-content: space-between;
......@@ -183,13 +210,13 @@ export default defineComponent({
}
.value-des {
font-size: 12px;
color: #999;
color: #fff;
display: flex;
align-items: center;
span {
font-size: 20px;
margin-right: 5px;
color: #4198ff;
color: #19ecff;
}
}
}
......
......@@ -98,13 +98,13 @@ export default defineComponent({
padding: [0, -100, 0, -100],
rich: {
name1: {
color: "rgba(36, 36, 36, 1)",
color: "#fff",
fontSize: 13,
align: "center",
padding: [-5, -0, 0, -90],
},
name0: {
color: "rgba(36, 36, 36, 1)",
color: "#fff",
fontSize: 13,
align: "center",
},
......@@ -113,14 +113,14 @@ export default defineComponent({
fontWeight: 500,
fontSize: 22,
padding: [-5, -30, 0, -66],
color: "#1D91F5",
color: PieColor[`level_${index + 1}`],
align: "center",
},
percent0: {
fontFamily: "DIN",
fontWeight: 500,
fontSize: 22,
color: "#1D91F5",
color: PieColor[`level_${index + 1}`],
align: "center",
},
small: {
......@@ -129,9 +129,11 @@ export default defineComponent({
},
text1: {
padding: [-5, 30, 0, 8],
color: "#fff",
},
text0: {
padding: [-5, 0, 0, 8],
color: "#fff",
},
cir0: {
fontSize: 15,
......@@ -240,10 +242,10 @@ export default defineComponent({
flex: 1;
padding: 8px 15px;
margin-right: 15px;
background: #f8f9fb;
background: #0e4785;
border-radius: 5px;
font-size: 14px;
color: #333;
color: #fff;
display: flex;
align-items: center;
justify-content: space-between;
......@@ -253,11 +255,11 @@ export default defineComponent({
.value-des {
// margin-top: 10px;
font-size: 12px;
color: #999;
color: #fff;
span {
font-size: 20px;
margin-right: 5px;
color: #4198ff;
color: #19ecff;
}
}
}
......
......@@ -29,7 +29,7 @@
</el-col>
<el-col :span="12">
<div class="card-item">
<MapTitle text="领跑技术(产品)情况" />
<MapTitle text="国防科技工业产值规模分布" />
<div class="echarts-search">
<div class="card-items">
......@@ -170,10 +170,37 @@ export default defineComponent({
yAxis: {
type: "value",
name: "数量(个)",
nameTextStyle: {
color: "#fff",
},
axisLabel: {
show: true,
color: "#fff",
},
splitLine: {
show: true,
lineStyle: {
color: "#125ba3",
type: "dotted",
},
},
},
xAxis: {
type: "category",
data: xAxisCity,
axisLabel: {
show: true,
color: "#ffffff",
},
axisLine: {
show: true,
lineStyle: {
color: "#125ba3",
},
},
axisTick: {
show: false,
},
},
series: [...seriesBar],
};
......@@ -207,13 +234,14 @@ export default defineComponent({
}
.card-item {
background: #fff;
background-color: #0d417140;
border: 1px solid #125ba3;
border-radius: 5px;
padding: 15px 20px;
overflow: hidden;
cursor: pointer;
transition: all 0.2s;
box-shadow: 2px 2px 10px #eee;
// box-shadow: 2px 2px 10px #eee;
flex: 1;
height: 100%;
box-sizing: border-box;
......@@ -234,10 +262,10 @@ export default defineComponent({
flex: 1;
padding: 8px 15px;
margin-right: 15px;
background: #f8f9fb;
background: #0d488d;
border-radius: 5px;
font-size: 14px;
color: #333;
color: #fff;
display: flex;
align-items: center;
justify-content: space-between;
......@@ -246,13 +274,13 @@ export default defineComponent({
}
.value-des {
font-size: 12px;
color: #999;
color: #fff;
display: flex;
align-items: center;
span {
font-size: 20px;
margin-right: 5px;
color: #4198ff;
color: #19ecff;
}
}
}
......@@ -262,6 +290,7 @@ export default defineComponent({
.map-warpper {
box-sizing: border-box;
.economic-construct {
flex: 1;
}
......
......@@ -126,10 +126,37 @@ export default defineComponent({
yAxis: {
type: "value",
name: "金额(亿元)",
nameTextStyle: {
color: "#fff",
},
axisLabel: {
show: true,
color: "#fff",
},
splitLine: {
show: true,
lineStyle: {
color: "#125ba3",
type: "dotted",
},
},
},
xAxis: {
type: "category",
data: xAxisCity,
axisLabel: {
show: true,
color: "#ffffff",
},
axisLine: {
show: true,
lineStyle: {
color: "#125ba3",
},
},
axisTick: {
show: false,
},
},
series: [...seriesBar],
};
......@@ -209,8 +236,8 @@ export default defineComponent({
height: 50px;
line-height: 50px;
border-radius: 4px;
color: #666666;
background: rgba(248, 249, 251, 1);
color: #fff;
background: #0e4785;
display: flex;
justify-content: space-between;
padding: 0 10px 0 10px;
......@@ -218,7 +245,7 @@ export default defineComponent({
margin-top: 10px;
}
.frequency {
color: rgba(65, 152, 255, 1);
color: #19ecff;
font-weight: 500;
font-size: 20px;
display: flex;
......@@ -226,7 +253,7 @@ export default defineComponent({
}
.second {
margin-left: 5px;
color: #666666;
color: #fff;
font-size: 12px;
font-weight: normal;
}
......
......@@ -93,16 +93,31 @@ export default defineComponent({
xAxis: {
type: "category",
data: xAxisValue,
axisLabel: {
show: true,
color: "#ffffff",
},
axisLine: {
show: true,
lineStyle: {
color: "#125ba3",
},
},
axisTick: {
show: false,
},
},
series: [
{
type: "bar",
itemStyle: {
color: "#4198ff",
color: "#419afe",
},
label: {
show: true,
color: "#00dbf6",
position: "top",
formatter: "{c}分",
},
barWidth: 20,
data: this.seriesData,
......@@ -159,7 +174,7 @@ export default defineComponent({
box-sizing: border-box;
.text {
color: #4198ff;
color: #fff;
margin: 10px 0;
font-size: 16px;
}
......
......@@ -3,7 +3,7 @@
<MapTitle text="全省军民协同创新平台情况" />
<div class="echarts-search">
<div class="card-items">
<!-- <div class="card-items">
<div class="item">
<span>协同创新平台</span>
<div class="value-des">
......@@ -11,7 +11,7 @@
>
</div>
</div>
</div>
</div> -->
<div class="title2X">历年军民协同创新平台情况</div>
</div>
......@@ -113,10 +113,37 @@ export default defineComponent({
name: "数量(个)",
min: 0,
max: 250,
nameTextStyle: {
color: "#fff",
},
axisLabel: {
show: true,
color: "#fff",
},
splitLine: {
show: true,
lineStyle: {
color: "#125ba3",
type: "dotted",
},
},
},
xAxis: {
type: "category",
data: xAxisCity,
axisLabel: {
show: true,
color: "#ffffff",
},
axisLine: {
show: true,
lineStyle: {
color: "#125ba3",
},
},
axisTick: {
show: false,
},
},
series: [...seriesBar],
};
......@@ -189,12 +216,12 @@ export default defineComponent({
.title2X {
margin-top: 15px;
font-size: 16px;
color: #4198ff;
color: #fff;
}
.target-bar {
flex: 1;
height: calc(100% - 120px);
height: calc(100% - 70px);
box-sizing: border-box;
margin-top: 10px;
}
......
......@@ -198,7 +198,7 @@ export default defineComponent({
padding: 10px 15px;
margin-right: 15px;
background: #f8f9fb;
background: #0d488d;
border-radius: 5px;
font-size: 14px;
color: #333;
......@@ -206,14 +206,17 @@ export default defineComponent({
&:last-of-type {
margin-right: 0;
}
span {
color: #fff;
}
.value-des {
margin-top: 10px;
font-size: 12px;
color: #999;
color: #fff;
span {
font-size: 20px;
margin-right: 5px;
color: #4198ff;
color: #19ecff;
}
}
}
......@@ -232,7 +235,7 @@ export default defineComponent({
border-radius: 5px;
.el-row {
font-size: 14px;
color: #333;
color: #fff;
}
.pie-value {
margin-top: 5px;
......@@ -241,11 +244,11 @@ export default defineComponent({
color: #999;
display: flex;
align-items: center;
color: #4198ff;
color: #19ecff;
font-size: 20px;
span {
font-size: 12px;
color: rgba(153, 153, 153, 1);
color: #fff;
}
}
.square {
......
......@@ -11,7 +11,7 @@
<TotalContrac />
</el-col>
<el-col :span="11" :offset="1">
<Activity />
<Activity />
</el-col>
</el-row>
</el-col>
......@@ -55,7 +55,7 @@ export default defineComponent({
Facility,
},
setup() {},
computed: {
computed: {
...mapState({
curDataType: (state) => state.curDataType,
}),
......@@ -65,23 +65,21 @@ export default defineComponent({
extendCardItems() {
return Mock[this.curDataType].extendCardItems;
},
},
},
data() {
return {
};
return {};
},
});
</script>
<style lang="scss" scoped>
.card-item {
background: #fff;
background-color: #0d417140;
border: 1px solid #125ba3;
border-radius: 5px;
padding: 16px;
overflow: hidden;
cursor: pointer;
transition: all 0.2s;
box-shadow: 2px 2px 10px #eee;
flex: 1;
height: 100%;
box-sizing: border-box;
......
......@@ -3,7 +3,7 @@
<div class="meeting">
<div>合同成交总额</div>
<div class="frequency">
{{ seriesData[0].value.reduce((total, num) => total + num) || "--" }}
{{ seriesData[0].value.reduce((total, num) => total + num) || "--" }}
<span class="second">万元</span>
</div>
</div>
......@@ -71,14 +71,12 @@ export default defineComponent({
return {
type: "line",
lineStyle: {
type: "dashed",
type: "dotted",
color: "#3aba67",
},
itemStyle: {
color: "#4198ff",
color: "#fff",
},
itemStyle: {
color: "#3aba67",
},
barWidth: 20,
data: item.value.map((item) => {
......@@ -93,7 +91,10 @@ export default defineComponent({
return {
tooltip: {
trigger: "axis",
axisPointer: {
type: "line",
color: "#3aba67",
},
formatter: (params) => {
let html = ``;
......@@ -118,12 +119,39 @@ export default defineComponent({
yAxis: {
type: "value",
name: "金额(万元)",
splitNumber: 4
splitNumber: 4,
nameTextStyle: {
color: "#fff",
},
axisLabel: {
show: true,
color: "#fff",
},
splitLine: {
show: true,
lineStyle: {
color: "#125ba3",
type: "dotted",
},
},
// min: 10000
},
xAxis: {
type: "category",
data: xAxisCity,
axisLabel: {
show: true,
color: "#ffffff",
},
axisLine: {
show: true,
lineStyle: {
color: "#125ba3",
},
},
axisTick: {
show: false,
},
},
series: [...seriesBar],
};
......@@ -202,21 +230,21 @@ export default defineComponent({
height: 50px;
line-height: 50px;
border-radius: 4px;
color: #666666;
background: rgba(248, 249, 251, 1);
color: #fff;
background: #0d488d;
display: flex;
justify-content: space-between;
padding: 0 10px 0 10px;
box-sizing: border-box;
margin-top: 10px;
.frequency {
color: rgba(65, 152, 255, 1);
color: #19ecff;
font-weight: 500;
font-size: 20px;
}
.second {
color: #999;
font-size: 14px
color: #fff;
font-size: 14px;
}
}
.text {
......
......@@ -58,6 +58,8 @@ export default defineComponent({
label: {
show: true,
position: "right",
color: "#00dbf6",
formatter: "{c}台",
},
barWidth: 18,
data: item.value.map((barItem, barIndex) => {
......@@ -98,15 +100,46 @@ export default defineComponent({
{
type: "category",
data: xAxisValue,
axisLine: {
show: true,
lineStyle: {
color: "#125ba3",
},
},
axisLabel: {
show: true,
color: "#ffffff",
},
axisTick: {
show: false,
},
},
],
xAxis: [
{
type: "value",
max:1000,
max: 1000,
name: "数量(台)",
axisLine: {
nameTextStyle: {
color: "#fff",
},
axisLine: {
show: true,
lineStyle: {
color: "#125ba3",
},
},
axisLabel: {
show: true,
color: "#ffffff",
},
axisTick: {
show: false,
},
splitLine: {
show: false,
},
},
],
......
......@@ -73,7 +73,7 @@ export default defineComponent({
type: "bar",
itemStyle: {
color: "#634cf0",
color: "#4198ff",
},
barWidth: 20,
......@@ -116,10 +116,37 @@ export default defineComponent({
yAxis: {
type: "value",
name: "数量(个)",
nameTextStyle: {
color: "#fff",
},
axisLabel: {
show: true,
color: "#fff",
},
splitLine: {
show: true,
lineStyle: {
color: "#125ba3",
type: "dotted",
},
},
},
xAxis: {
type: "category",
data: xAxisCity,
axisLabel: {
show: true,
color: "#ffffff",
},
axisLine: {
show: true,
lineStyle: {
color: "#125ba3",
},
},
axisTick: {
show: false,
},
},
series: [...seriesBar],
};
......@@ -197,20 +224,20 @@ export default defineComponent({
height: 50px;
line-height: 50px;
border-radius: 4px;
color: #666666;
background: rgba(248, 249, 251, 1);
color: #fff;
background: #0d488d;
display: flex;
justify-content: space-between;
padding: 0 10px 0 10px;
box-sizing: border-box;
margin-top: 10px;
.frequency {
color: rgba(65, 152, 255, 1);
color: #19ecff;
font-weight: 500;
font-size: 20px;
}
.second {
color: #999;
color: #fff;
font-size: 14px;
}
}
......
......@@ -94,6 +94,19 @@ export default defineComponent({
xAxis: {
type: "category",
data: xAxisValue,
axisLabel: {
show: true,
color: "#ffffff",
},
axisLine: {
show: true,
lineStyle: {
color: "#125ba3",
},
},
axisTick: {
show: false,
},
},
series: [
{
......@@ -104,8 +117,9 @@ export default defineComponent({
barWidth: 20,
label: {
show: true,
color: "#00dbf6",
position: "top",
// formatter: "{c}亿元"
formatter: "{c}分",
},
data: this.seriesData,
},
......@@ -165,7 +179,7 @@ export default defineComponent({
.echarts-search {
padding-left: 10px;
.title {
color: #4198ff;
color: #fff;
margin: 10px 0;
font-size: 16px;
}
......
......@@ -100,7 +100,7 @@ export default defineComponent({
optionBar() {
const seriesBar = {
type: "pie",
radius: ["40%", "70%"],
radius: ["30%", "60%"],
itemStyle: {
borderRadius: 0,
},
......@@ -242,20 +242,20 @@ export default defineComponent({
height: 50px;
line-height: 50px;
border-radius: 4px;
color: #666666;
background: rgba(248, 249, 251, 1);
color: #fff;
background: #0d488d;
display: flex;
justify-content: space-between;
padding: 0 10px 0 10px;
box-sizing: border-box;
margin-top: 10px;
.frequency {
color: rgba(65, 152, 255, 1);
color: #19ecff;
font-weight: 500;
font-size: 20px;
}
.second {
color: #999;
color: #fff;
font-size: 14px;
}
}
......@@ -279,7 +279,7 @@ export default defineComponent({
box-sizing: border-box;
.el-row {
font-size: 14px;
color: #333;
color: #fff;
}
.pie-value {
padding-left: 20px;
......@@ -291,7 +291,7 @@ export default defineComponent({
span {
margin-left: 5px;
font-size: 12px;
color: rgba(153, 153, 153, 1);
color: #fff;
}
}
.square {
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论