Skip to content

C
country-energy-ecological-construction
Commit 4655be12 authored by 范加坤's avatar 范加坤
Browse files
Options

样式调整

parent 1a5069d3
Hide whitespace changes
Inline Side-by-side
Showing with 116 additions and 82 deletions
src/components/Lengend/Lengend.vue
View file @ 4655be12
......@@ -24,43 +24,43 @@
<script>
export default {
data() {
return {};
return {}
},
props: {
title: {
type: String,
type: String
},
colors: {
type: Array,
type: Array
},
range: {
type: Array,
},
type: Array
}
},
computed: {
getCode() {
return function (index) {
if (index === 0) {
return "<";
return '<'
}
if (index === this.colors.length - 1) {
return ">";
return '>'
}
return "-";
};
},
},
};
return '-'
}
}
}
}
</script>
<style lang="less" scoped>
.legend {
position: absolute;
right: 1vh;
bottom: 1vh;
padding: 10px;
background-color: rgba(1, 1, 1, 0.3);
display: flex;
flex-direction: column;
justify-content: flex-start;
border-radius: 3px;
.title {
width: 100%;
......@@ -73,19 +73,17 @@ export default {
.item {
display: flex;
align-items: center;
margin-bottom: .3vh;
.circle {
border-radius: 2px;
width: 17px;
height: 10px;
margin-right: 0.5vh;
width: 30px;
height: 15px;
margin-right: 14px;
}
label {
color: @main-color;
font-size: 1.2vh;
}
}
.item + .item {
margin-top: 0.3vh;
}
}
</style>
src/components/Map/Map.vue
View file @ 4655be12
......@@ -106,7 +106,7 @@ export default {
layout: {
"text-font": ["open-sans"],
"text-field": "{PXZQMC}",
"text-size": 17,
"text-size": 16,
"text-max-width": 5,
},
// maxzoom: 7,
......
src/pages/biogasManureEcoAgriculture/index.vue
View file @ 4655be12
......@@ -78,7 +78,11 @@
:title="statusValue.value + '(万吨)'"
>
<div style="width: 100%; height: 23vh">
<Echart ref="echart3" :options="bottom_option" @barClick="echartBarClick"/>
<Echart
ref="echart3"
:options="bottom_option"
@barClick="echartBarClick"
/>
</div>
</PartWrap>
</div>
......@@ -168,7 +172,7 @@ export default {
grid: { bottom: '10%' },
series: [
{
barWidth: 40,
// barWidth: 40,
data: [],
type: 'bar',
itemStyle: {
......@@ -215,12 +219,13 @@ export default {
[135.087387, 53.561602]
],
{
padding: { bottom: 500, top: 20, left: 200, right: 200 }
padding: { bottom: 500, top: 120, left: 200, right: 200 }
}
)
},
async echartBarClick(e) {
console.log(e)
console.log(this.cityConfig)
this.thisCity = this.cityConfig.find(item => {
return item.name == e.name
})
......@@ -248,9 +253,7 @@ export default {
[73.487345, 17.397329],
[135.087387, 53.561602]
],
{
padding: { bottom: 500, top: 20, left: 100, right: 400 }
}
{ padding: { bottom: 500, top: 120, left: 200, right: 200 } }
)
}
},
......@@ -281,7 +284,7 @@ export default {
a.push(this.getColorOfProvince(Number(item[this.statusValue.key])))
})
console.log(a)
a.push('#ccc')
a.push('rgba(0,0,0,0)')
this.$refs.map.setBackground(a)
},
getColorOfProvince(count) {
......@@ -367,18 +370,18 @@ export default {
z-index: 100;
.left-part-item {
height: 5vh;
margin-bottom: 2vh;
margin-bottom: 1vh;
}
}
.bottom-part {
z-index: 99;
width: 97vw;
width: 98vw;
display: flex;
justify-content: space-between;
position: absolute;
height: 27vh;
bottom: 2vh;
left: 2vh;
bottom: 1vh;
left: 1vw;
z-index: 21;
display: flex;
.bottom-part-table {
......@@ -395,13 +398,12 @@ export default {
.legend-part {
position: absolute;
z-index: 11;
left: 300px;
bottom: 33vh;
right: 1vw;
bottom: 29vh;
}
.status-control {
position: absolute;
right: 2vw;
right: 1vw;
top: 12vh;
z-index: 99;
}
......
src/pages/methaneUpgrade/index.vue
View file @ 4655be12
......@@ -83,7 +83,7 @@
<Lengend class="legend-part" :colors="colors" :range="colorLabel" />
<div class="right-part">
<PartWrap class="right-part-echart" :title="'年末累计(处)'">
<div style="width: 13vw; height: 38vh">
<div style="width: 12vw; height: 38vh">
<Echart
ref="echart3"
:options="echart1_option"
......@@ -92,7 +92,7 @@
</div>
</PartWrap>
<PartWrap class="right-part-echart" :title="'总池容(万立方米)'">
<div style="width: 13vw; height: 38vh">
<div style="width: 12vw; height: 38vh">
<Echart
ref="echart3"
:options="echart2_option"
......@@ -101,7 +101,7 @@
</div>
</PartWrap>
<PartWrap class="right-part-echart" :title="'供气户数(万户)'">
<div style="width: 13vw; height: 38vh">
<div style="width: 12vw; height: 38vh">
<Echart
ref="echart3"
:options="echart3_option"
......@@ -110,7 +110,7 @@
</div>
</PartWrap>
<PartWrap class="right-part-echart" :title="'装机容量(千瓦)'">
<div style="width: 13vw; height: 38vh">
<div style="width: 12vw; height: 38vh">
<Echart
ref="echart3"
:options="echart4_option"
......@@ -457,7 +457,7 @@ export default {
[135.087387, 53.561602]
],
{
padding: { bottom: 500, top: 20, left: 100, right: 400 }
padding: { bottom: 500, top: 120, left: 80, right: 470 }
}
)
},
......@@ -491,7 +491,7 @@ export default {
[135.087387, 53.561602]
],
{
padding: { bottom: 500, top: 20, left: 100, right: 400 }
padding: { bottom: 500, top: 120, left: 80, right: 450 }
}
)
}
......@@ -543,7 +543,7 @@ export default {
a.push(this.getColorOfProvince(Number(item[this.statusValue1.key])))
})
console.log(a)
a.push('#ccc')
a.push('rgba(0,0,0,0)')
this.$refs.map.setBackground(a)
},
getColorOfProvince(count) {
......@@ -745,32 +745,30 @@ export default {
}
.left-part {
z-index: 99;
// display: flex;
// flex-direction: column;
height: 55vh;
// width: 250px;
position: absolute;
top: 11vh;
left: 1vw;
z-index: 100;
.date-widget {
position: absolute;
left: 280px;
position: relative;
// right: calc(-100% - 1vw);
margin-bottom: 3vh;
}
.left-part-item {
height: 5vh;
margin-bottom: 2vh;
margin-bottom: 1vh;
}
}
.bottom-part {
z-index: 99;
width: 70vw;
width: 71vw;
display: flex;
justify-content: space-between;
position: absolute;
height: 27vh;
bottom: 2vh;
left: 2vh;
bottom: 1vh;
left: 1vw;
z-index: 21;
display: flex;
.bottom-part-table {
......@@ -788,31 +786,32 @@ export default {
position: absolute;
z-index: 11;
left: 300px;
bottom: 33vh;
bottom: 29vh;
}
.right-part {
margin-right: 1vw;
z-index: 99;
position: absolute;
right: 0;
top: 12vh;
bottom: 1vh;
display: flex;
width: 28vw;
width: 26vw;
flex-wrap: wrap;
justify-content: space-around;
.right-part-echart {
margin-bottom: 1vh;
margin-top: 1vh;
}
}
.status-control {
position: absolute;
right: 29vw;
top: 12vh;
right: 28vw;
top: 13vh;
z-index: 99;
}
.status-control1 {
position: absolute;
right: 29vw;
bottom: 33vh;
right: 28vw;
bottom: 29vh;
z-index: 99;
}
}
......
src/router/index.js
View file @ 4655be12
......@@ -5,6 +5,7 @@ import Home from "../views/Home.vue";
Vue.use(VueRouter);
const routes = [
{ path: "/", redirect: "/methane_upgrade" },
{
path: "/",
name: "Home",
......
src/views/Home.vue
View file @ 4655be12
......@@ -7,23 +7,41 @@
<h3>农村农业生态建设</h3>
</div>
<div class="menu">
<div class="a-menu" @click="$router.push('/methane_upgrade')">
沼气
<div
:class="[
'a-menu',
$route.path == '/methane_upgrade' ? 'active' : ''
]"
@click="$router.push('/methane_upgrade')"
>
农村沼气转型升级
</div>
<div class="a-menu" @click="$router.push('/biomass_energy_warm')">
生物
<div
:class="[
'a-menu',
$route.path == '/biomass_energy_warm' ? 'active' : ''
]"
@click="$router.push('/biomass_energy_warm')"
>
生物质能清洁取暖
</div>
<div
class="a-menu"
:class="[
'a-menu',
$route.path == '/biogas_manure_eco_agriculture' ? 'active' : ''
]"
@click="$router.push('/biogas_manure_eco_agriculture')"
>
沼肥
沼肥生态农业
</div>
<div
class="a-menu"
:class="[
'a-menu',
$route.path == '/renewable_energy_village' ? 'active' : ''
]"
@click="$router.push('/renewable_energy_village')"
>
示范村
可再生能源示范村
</div>
</div>
</div>
......@@ -40,16 +58,16 @@
<script>
export default {
name: "Home",
name: 'Home',
data() {
return {
// baseUrl: process.env.BASE_URL
};
}
},
components: {
// HelloWorld,
},
};
}
}
</script>
<style scoped lang="less">
......@@ -91,26 +109,42 @@ export default {
}
h3 {
font-size: 4.7vh;
line-height: 10vh;
line-height: 8vh;
font-weight: 700;
letter-spacing: 0.1vh;
color: @main-color;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
}
.menu {
display: flex;
align-items: center;
margin-right: 40px;
.a-menu {
width: 50px;
height: 50px;
background-color: @main-color;
margin-right: 20px;
border-radius: 50%;
line-height: 50px;
// width: 50px;
height: 8vh;
// background-color: @main-color;
// margin-right: 20px;
// border-radius: 50%;
line-height: 7vh;
font-size: 2vh;
font-weight: 600;
padding: 10px;
box-sizing: border-box;
text-align: center;
color: aliceblue;
color: @main-color;
&:hover {
// background-color: rgb(206, 206, 206);
}
}
.active {
color: #fff;
background: linear-gradient(
to bottom,
rgba(0, 100, 200, 0.4),
rgba(0, 200, 100, 0)
);
}
}
}
......
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