Skip to content

C
cxsfjx_project_echarts
提交 0ffe87cb authored 作者: 胡园辉's avatar 胡园辉
浏览文件
操作

fix(服务强兴军页面)样式修改

上级 02c37964
显示空白字符变更
内嵌 并排
正在显示 包含 339 行增加 和 60 行删除
src/layout/head.vue
浏览文件 @ 0ffe87cb
<template>
<div class="app-head-warpper">
<div class="header-bg"></div>
<!-- 一级导航栏 -->
<!-- <el-row :gutter="20" class="app-header" type="flex" align="cneter">
<el-col :span="6" class="title">创新示范绩效评价</el-col>
......@@ -22,11 +23,7 @@
<div class="container">
<!-- 二级导航栏 -->
<el-row
v-if="(secodndList || []).length > 0"
class="second-nav"
:gutter="20"
>
<el-row v-if="(secodndList || []).length > 0" class="second-nav" :gutter="20">
<el-col v-for="(item, index) in secodndList" :key="index" :span="4">
<el-card
shadow="hover"
......@@ -34,8 +31,7 @@
'second-active-nav': index === secondIndex,
}"
@click="secondHandle(item, index)"
>{{ item.name }}</el-card
>
>{{ item.name }}</el-card>
</el-col>
</el-row>
......@@ -43,8 +39,9 @@
<el-row v-if="curRouteHistoy.length > 0" class="proceed-record">
<el-col class="nav-history" :span="17">
<el-row class="pointer" @click="$router.go(-1)" align="middle">
<el-icon><ArrowLeftBold /></el-icon>
返回
<el-icon>
<ArrowLeftBold />
</el-icon>返回
<el-divider direction="vertical"></el-divider>
</el-row>
......@@ -68,8 +65,7 @@
:class="{
'lignht-color': index === curRouteHistoy.length - 1,
}"
>{{ item.label }}</span
>
>{{ item.label }}</span>
</div>
</el-col>
</el-col>
......@@ -85,8 +81,7 @@
disabed: item.disabed,
}"
@click="yearHandle(item, index)"
>{{ item.label }}</span
>
>{{ item.label }}</span>
</div>
</el-col>
</el-row>
......@@ -96,7 +91,7 @@
<script lang="ts">
import { defineComponent } from "vue";
import { getNavList } from "./service";
import NavList from "./navList.json"
import NavList from "./navList.json";
import { ArrowLeftBold, CaretRight } from "@element-plus/icons";
const ENV_PARAMS = import.meta.env; // 这是Vite官方指导获取环境变量的方式
......@@ -210,14 +205,41 @@ export default defineComponent({
<style lang="scss" scoped>
.pointer {
cursor: pointer;
margin-left: 10px;
color: #d4f7ff;
&:hover {
color: #4198ff;
}
}
.nav-history::after {
content: "";
width: 11px;
height: 42px;
position: absolute;
left: 0px;
background-color: rgba(25, 125, 237, 50%);
}
.nav-history::before {
content: "";
width: 11px;
height: 42px;
position: absolute;
// left: 0px;
right: 0px;
background-color: rgba(25, 125, 237, 50%);
}
.app-head-warpper {
background: #f5f9fb;
// background: #f5f9fb;
box-sizing: border-box;
.header-bg {
height: 84px;
width: 100%;
// border: 1px solid;
background-image: url(../assets/img/header_bg.png);
background-repeat: no-repeat;
background-size: 100% 100%;
margin-bottom: 5px;
}
.container {
// padding: 0 20px;
box-sizing: border-box;
......@@ -288,18 +310,19 @@ export default defineComponent({
.nav-history {
padding-left: 10px;
width: 100%;
background: rgba(25, 125, 237, 10%);
background: rgba(25, 125, 237, 20%);
display: flex;
align-items: center;
height: 40px;
border-radius: 5px;
overflow: hidden;
position: relative;
// box-shadow: 2px 2px 10px #eee;
.nav-history-item {
display: flex;
height: 100%;
.proceed-item {
color: #999;
color: #d4f7ff;
display: flex;
align-items: center;
cursor: pointer;
......@@ -322,8 +345,8 @@ export default defineComponent({
overflow: hidden;
flex: 1;
height: 40px;
background: #fff;
box-shadow: 2px 2px 10px #eee;
background: rgba(25, 125, 237, 20%);
border: 1px solid #125caf;
.years {
display: flex;
align-items: center;
......@@ -331,6 +354,8 @@ export default defineComponent({
height: 40px;
flex: 1;
overflow: hidden;
span {
width: 100%;
display: flex;
......@@ -338,9 +363,10 @@ export default defineComponent({
padding: 0 12px;
font-size: 14px;
height: inherit;
color: #949494;
color: #d4f7ff;
justify-content: center;
cursor: pointer;
border-right: 1px solid #125caf;
}
.active {
background-color: #4198ff;
......
src/views/dataCenter/army/index.vue
浏览文件 @ 0ffe87cb
......@@ -88,6 +88,7 @@ export default defineComponent({
flex: 1;
height: 100%;
box-sizing: border-box;
border: 1px solid #10529a;
}
.map-warpper {
......
src/views/dataCenter/army/model/EconomicConstruct/index.vue
浏览文件 @ 0ffe87cb
......@@ -169,7 +169,11 @@ export default defineComponent({
return html;
},
},
legend: {},
legend: {
textStyle:{
color:"#fff"
}
},
grid: {
top: "20%",
left: "5%",
......@@ -181,11 +185,30 @@ export default defineComponent({
{
type: "value",
name: "金额(亿元)",
splitLine: {
lineStyle: {
// 使用深浅的间隔色
type: 'dashed',
color: ["#0087ED"],
},
},
axisLine: {
lineStyle: {
color: "#d4f7ff",
// width: 1, //这里是为了突出显示加上的
},
},
},
{
type: "value",
name: "进度%",
min: 0,
axisLine: {
lineStyle: {
color: "#d4f7ff",
// width: 1, //这里是为了突出显示加上的
},
},
// max: 100,
splitLine: {
show: false,
......@@ -195,6 +218,12 @@ export default defineComponent({
xAxis: {
type: "category",
data: xAxisValue,
axisLine: {
lineStyle: {
color: "#d4f7ff",
// width: 1, //这里是为了突出显示加上的
},
},
},
series: [seriesBar, seriesLine],
};
......@@ -292,7 +321,7 @@ export default defineComponent({
ptionCirRight() {
const value = this.provinceData?.process || 0;
return {
backgroundColor: "#fff",
// backgroundColor: "#197ded",
title: [
{
text: `建设进度`,
......@@ -302,7 +331,7 @@ export default defineComponent({
textStyle: {
fontSize: "16",
fontWeight: "400",
color: "#333",
color: "#d4f7ff",
textAlign: "center",
},
subtext: `${value * 100}%`,
......@@ -353,7 +382,7 @@ export default defineComponent({
z: 2,
showBackground: true,
backgroundStyle: {
color: "#e3e3e3",
color: "#0d4787",
},
data: [value * 100],
coordinateSystem: "polar",
......@@ -468,7 +497,7 @@ export default defineComponent({
height: 150px;
box-sizing: border-box;
.card-text {
color: #4198ff;
color: #ffffff;
margin: 8px 0;
}
.card-item {
......@@ -485,7 +514,7 @@ export default defineComponent({
}
.title {
font-weight: bold;
color: #333;
color: #d4f7ff;
font-size: 14px;
position: relative;
&::before {
......@@ -505,11 +534,11 @@ export default defineComponent({
display: flex;
align-items: center;
font-size: 14px;
color: #999;
color: #d4f7ff;
span {
font-size: 20px;
margin-right: 5px;
color: #4198ff;
color: #19ecff;
}
}
}
......@@ -531,7 +560,7 @@ export default defineComponent({
}
.bar-title {
color: #4198ff;
color: #ffffff;
margin-bottom: 10px;
}
.economic-construct {
......
src/views/dataCenter/army/model/Munitions/index.vue
浏览文件 @ 0ffe87cb
......@@ -146,7 +146,11 @@ export default defineComponent({
return html;
},
},
legend: {},
legend: {
textStyle:{
color:"#d4f7ff"
}
},
grid: {
top: "10%",
left: "0%",
......@@ -160,17 +164,49 @@ export default defineComponent({
name: "收入(亿元)",
min: 0,
max: 200,
splitLine: {
lineStyle: {
// 使用深浅的间隔色
type: 'dashed',
color: ["#0087ED"],
},
},
axisLine: {
lineStyle: {
color: "#d4f7ff",
// width: 1, //这里是为了突出显示加上的
},
},
},
{
type: "value",
name: "增长率%",
min: 0,
max: 100,
splitLine: {
lineStyle: {
// 使用深浅的间隔色
type: 'dashed',
color: ["#0087ED"],
},
},
axisLine: {
lineStyle: {
color: "#d4f7ff",
// width: 1, //这里是为了突出显示加上的
},
},
},
],
xAxis: {
type: "category",
data: xAxisCountry,
axisLine: {
lineStyle: {
color: "#d4f7ff",
// width: 1, //这里是为了突出显示加上的
},
},
},
series: [...seriesBarList, ...seriesLineList],
};
......@@ -237,7 +273,11 @@ export default defineComponent({
return html;
},
},
legend: {},
legend: {
textStyle:{
color:"#d4f7ff"
}
},
grid: {
top: "10%",
left: "5%",
......@@ -251,17 +291,49 @@ export default defineComponent({
name: "规模(亿元)",
min: 0,
max: 50,
splitLine: {
lineStyle: {
// 使用深浅的间隔色
type: 'dashed',
color: ["#0087ED"],
},
},
axisLine: {
lineStyle: {
color: "#d4f7ff",
// width: 1, //这里是为了突出显示加上的
},
},
},
{
type: "value",
name: "增长率(%)",
min: -50,
max: 170,
axisLine: {
lineStyle: {
color: "#d4f7ff",
// width: 1, //这里是为了突出显示加上的
},
},
splitLine: {
lineStyle: {
// 使用深浅的间隔色
type: 'dashed',
color: ["#0087ED"],
},
},
},
],
xAxis: {
type: "category",
data: xAxisCity,
axisLine: {
lineStyle: {
color: "#d4f7ff",
// width: 1, //这里是为了突出显示加上的
},
},
},
series: [seriesBar, seriesLine],
};
......@@ -361,6 +433,6 @@ export default defineComponent({
.title2X {
margin-top: 15px;
font-size: 14px;
color: #4198ff;
color: #ffffff;
}
</style>
src/views/dataCenter/army/model/Person/index.vue
浏览文件 @ 0ffe87cb
......@@ -141,7 +141,11 @@ export default defineComponent({
return html;
},
},
legend: {},
legend: {
textStyle:{
color:"#d4f7ff"
}
},
grid: {
top: "12%",
left: "0%",
......@@ -155,17 +159,49 @@ export default defineComponent({
name: "入伍人数",
min: 0,
max: 700,
axisLine: {
lineStyle: {
color: "#d4f7ff",
// width: 1, //这里是为了突出显示加上的
},
},
splitLine: {
lineStyle: {
// 使用深浅的间隔色
type: 'dashed',
color: ["#0087ED"],
},
},
},
{
type: "value",
name: "入伍率(%)",
min: 0,
max: 1,
axisLine: {
lineStyle: {
color: "#d4f7ff",
// width: 1, //这里是为了突出显示加上的
},
},
splitLine: {
lineStyle: {
// 使用深浅的间隔色
type: 'dashed',
color: ["#0087ED"],
},
},
},
],
xAxis: {
type: "category",
data: xAxisCity,
axisLine: {
lineStyle: {
color: "#d4f7ff",
// width: 1, //这里是为了突出显示加上的
},
},
},
series: [...seriesBar, ...seriesLine],
};
......@@ -257,10 +293,10 @@ export default defineComponent({
flex: 1;
padding: 8px 15px;
margin-right: 15px;
background: #f8f9fb;
background: #0d4479;
border-radius: 5px;
font-size: 14px;
color: #333;
color: #d4f7ff;
display: flex;
align-items: center;
justify-content: space-between;
......@@ -269,19 +305,19 @@ export default defineComponent({
}
.value-des {
font-size: 12px;
color: #999;
color: #d4f7ff;
display: flex;
align-items: center;
span {
font-size: 20px;
margin-right: 5px;
color: #4198ff;
color: #19ecff;
}
}
}
}
.text {
color: #4198ff;
color: #ffffff;
margin-top: 10px;
font-size: 14px;
}
......
src/views/dataCenter/army/model/Science/index.vue
浏览文件 @ 0ffe87cb
......@@ -104,6 +104,7 @@ export default defineComponent({
label: {
show: true,
position: "top",
color:"#19ecff",
},
areaStyle: {
opacity: 0.8,
......@@ -153,6 +154,12 @@ export default defineComponent({
xAxis: {
type: "category",
data: xAxisValue,
axisLine: {
lineStyle: {
color: "#d4f7ff",
// width: 1, //这里是为了突出显示加上的
},
},
},
series: [seriesLine],
};
......@@ -222,31 +229,31 @@ export default defineComponent({
height: 150px;
box-sizing: border-box;
.card-item {
color: #333;
color: #d4f7ff;
padding: 8px 15px;
box-sizing: border-box;
background: #f8f9fb;
background: rgba(25, 125, 237, 0.2);
border-radius: 5px;
margin-bottom: 8px;
&:last-of-type {
margin-bottom: 0;
}
div {
color: #4198ff;
color: #19ecff;
font-size: 20px;
display: flex;
align-items: center;
span {
margin-left: 10px;
font-size: 14px;
color: #999;
color: #d4f7ff;
}
}
}
.increase-rate {
.title {
color: #4198ff;
color: #ffffff;
margin-bottom: 5px;
}
......@@ -256,24 +263,24 @@ export default defineComponent({
display: flex;
align-items: center;
font-size: 12px;
color: #666;
color: #ffffff;
justify-content: space-between;
}
.rate-list-head {
background: #ddeaf8;
background: #0f4f92;
}
.el-scrollbar {
background: #f8f9fb;
background: #0d4479;
}
.rate-value {
color: #4198ff;
color: #d4f7ff;
}
}
}
}
.science-title {
color: #4198ff;
color: #ffffff;
}
.incom-distribution {
flex: 1;
......
src/views/dataCenter/army/model/StrongArmy/index.vue
浏览文件 @ 0ffe87cb
......@@ -85,6 +85,12 @@ export default defineComponent({
xAxis: {
type: "category",
data: xAxisValue,
axisLine: {
lineStyle: {
color: "#d4f7ff",
// width: 1, //这里是为了突出显示加上的
},
},
},
series: [
{
......@@ -95,6 +101,7 @@ export default defineComponent({
label: {
show: true,
position: "top",
color:"#19ecff",
},
barWidth: 20,
data: this.seriesData,
......@@ -141,7 +148,7 @@ export default defineComponent({
.echarts-search {
padding-left: 10px;
.title {
color: #4198ff;
color: #ffffff;
margin: 12px 0;
font-size: 14px;
}
......
src/views/dataCenter/index.vue
浏览文件 @ 0ffe87cb
......@@ -24,7 +24,7 @@ export default defineComponent({
min-width: 1920px;
flex: 1;
box-sizing: border-box;
padding: 20px;
padding: 0px 20px 20px 20px;
background-image: url(../../assets/img/content_bg.png);
background-repeat: no-repeat;
background-size: 100% 100%;
......
src/views/dataCenter/industrial/index.vue
浏览文件 @ 0ffe87cb
......@@ -82,13 +82,14 @@ export default defineComponent({
</script>
<style lang="scss" scoped>
.card-item {
background: #fff;
background-color: rgba(25, 125, 237, 0.1);
border-radius: 5px;
padding: 16px;
overflow: hidden;
cursor: pointer;
transition: all 0.2s;
box-shadow: 2px 2px 10px #eee;
// box-shadow: 2px 2px 10px #eee;
border: 1px solid #10529a;
flex: 1;
height: 100%;
box-sizing: border-box;
......
src/views/dataCenter/map/index.vue
浏览文件 @ 0ffe87cb
......@@ -94,7 +94,7 @@ export default defineComponent({
cursor: pointer;
transition: all 0.2s;
box-shadow: 2px 2px 10px #04223d10;
border: 1px solid #10529a;
// &:hover {
// // transform: translateY(-5px);
// transition: all 0.2s;
......
src/views/dataCenter/map/model/Income/index.vue
浏览文件 @ 0ffe87cb
......@@ -102,6 +102,9 @@ export default defineComponent({
},
legend: {
right: "2%",
textStyle:{
color:"#d4f7ff"
}
},
grid: {
left: "2%",
......@@ -115,12 +118,38 @@ export default defineComponent({
name: "亿元",
min: 0,
max: 200,
splitLine: {
lineStyle: {
// 使用深浅的间隔色
type: 'dashed',
color: ["#0087ED"],
},
},
axisLine: {
lineStyle: {
color: "#d4f7ff",
// width: 1, //这里是为了突出显示加上的
},
},
},
{
type: "value",
name: "增长率%",
min: 0,
max: 100,
splitLine: {
lineStyle: {
// 使用深浅的间隔色
type: 'dashed',
color: ["#0087ED"],
},
},
axisLine: {
lineStyle: {
color: "#d4f7ff",
// width: 1, //这里是为了突出显示加上的
},
},
splitLine: {
show: false,
},
......@@ -129,6 +158,12 @@ export default defineComponent({
xAxis: {
type: "category",
data: xAxisValue,
axisLine: {
lineStyle: {
color: "#d4f7ff",
// width: 1, //这里是为了突出显示加上的
},
},
},
series: [...seriesBarList, ...seriesLineList],
};
......
src/views/dataCenter/map/model/InvestmentProgress/index.vue
浏览文件 @ 0ffe87cb
......@@ -119,22 +119,58 @@ export default defineComponent({
},
legend: {
right: "2%",
textStyle:{
color:"#d4f7ff"
}
},
yAxis: [
{
type: "value",
name: "金额(亿元)",
axisLine: {
lineStyle: {
color: "#d4f7ff",
// width: 1, //这里是为了突出显示加上的
},
},
splitLine: {
lineStyle: {
type: 'dashed',
// 使用深浅的间隔色
color: ["#0087ED"],
},
},
},
{
type: "value",
name: "项目进度%",
min: 0,
splitLine: {
lineStyle: {
// 使用深浅的间隔色
type: 'dashed',
color: ["#0087ED"],
},
},
axisLine: {
lineStyle: {
color: "#d4f7ff",
// width: 1, //这里是为了突出显示加上的
},
},
// max: 100,
},
],
xAxis: {
type: "category",
data: xAxisValue,
axisLine: {
lineStyle: {
color: "#d4f7ff",
// width: 1, //这里是为了突出显示加上的
},
},
},
series: [...seriesBarList, ...seriesLineList],
};
......
src/views/dataCenter/map/model/Performance/index.vue
浏览文件 @ 0ffe87cb
<template>
<MapTitle
text="全省军民融合创新示范绩效评价情况"
:detailsHandle="detailsHandle"
/>
<MapTitle text="全省军民融合创新示范绩效评价情况" :detailsHandle="detailsHandle" />
<div id="performanceBar" class="performance-bar"></div>
</template>
<script lang="ts">
......@@ -107,7 +104,11 @@ export default defineComponent({
return html;
},
},
legend: {},
legend: {
textStyle:{
color:"#fff"
}
},
grid: {
left: "0%",
right: "0%",
......@@ -118,11 +119,31 @@ export default defineComponent({
type: "value",
min: 0,
max: 100,
axisLine: {
lineStyle: {
color: "#d4f7ff",
},
},
splitLine: {
lineStyle: {
// 使用深浅的间隔色
type: 'dashed',
color: ["#0087ED"],
},
},
},
xAxis: {
type: "category",
data: xAxisValue,
axisLine: {
lineStyle: {
color: "#d4f7ff",
// width: 1, //这里是为了突出显示加上的
},
},
},
series: seriesList,
};
},
......
src/views/dataCenter/map/model/RankList/index.vue
浏览文件 @ 0ffe87cb
......@@ -75,10 +75,17 @@ export default defineComponent({
font-weight: bold;
font-size: 14px;
}
/* .el-scrollbar__wrap {
background: #0e4780 !important;
} */
.el-table__body tr:hover>td {
background-color: #134087 !important;
}
.el-table tr {
background: #0e4780 !important;
}
.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf{
.el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
border-bottom: 1px dashed #197ded;
}
.el-table .cell {
......@@ -88,6 +95,7 @@ export default defineComponent({
<style lang="scss" scoped>
.el-scrollbar {
margin-top: 10px;
// background: red;
}
.tab-other-index {
text-align: center;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论