整体首页
parent
2d49a12157
commit
bf04a98ddb
|
|
@ -92,8 +92,8 @@ export default {
|
|||
overflow: hidden;
|
||||
}
|
||||
.main {
|
||||
height: 100vh;
|
||||
overflow: auto;
|
||||
height: calc(100% - 50px);
|
||||
// overflow: auto;
|
||||
}
|
||||
::v-deep .el-card__body {
|
||||
height: 100%;
|
||||
|
|
|
|||
|
|
@ -235,7 +235,7 @@ s {
|
|||
::-webkit-scrollbar-thumb {
|
||||
/*滚动条里面小方块*/
|
||||
border-radius: 5px;
|
||||
-webkit-box-shadow: inset 0 0 5px #00ffff;
|
||||
// -webkit-box-shadow: inset 0 0 5px #00ffff;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
|
|
|
|||
|
|
@ -6,15 +6,15 @@
|
|||
</div>
|
||||
<ul class="menus">
|
||||
<li class="one-card" v-for="(item, i) in menus" :key="i" @click="go(item)">
|
||||
<div class="one-card-left" :class="'menu' + i" >{{ item.name }}</div>
|
||||
<div class="one-card-left" :class="'menu' + i">{{ item.name }}</div>
|
||||
<div class="one-card-right" :class="'color' + i">
|
||||
<div class="parm" v-for="one in item.parms" :key="one.name">
|
||||
<p>{{ one.name }}</p>
|
||||
<font>
|
||||
<span class="font24">{{ one.value }}</span>
|
||||
<span> {{ one.dw }}</span>
|
||||
</font>
|
||||
|
||||
<p>{{ one.name }}</p>
|
||||
<font>
|
||||
<span class="font24">{{ one.value }}</span>
|
||||
<span> {{ one.dw }}</span>
|
||||
</font>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
|
@ -25,86 +25,90 @@
|
|||
<script>
|
||||
import { onMounted, reactive, ref, toRefs, nextTick } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import {useStore} from 'vuex';
|
||||
import { useStore } from 'vuex';
|
||||
export default {
|
||||
name: 'home',
|
||||
setup() {
|
||||
const router = useRouter();
|
||||
const store = useStore();
|
||||
const state = reactive({
|
||||
menus: [{
|
||||
name: '处理&回用系统',
|
||||
url: 'page',
|
||||
parms: [{
|
||||
name: '节水量',
|
||||
value: '4',
|
||||
dw: 'm³'
|
||||
},{
|
||||
name: '节碳量',
|
||||
value: '0.67',
|
||||
dw: 'kg'
|
||||
menus: [
|
||||
{
|
||||
name: '屋顶绿化系统',
|
||||
url: 'green',
|
||||
parms: [{
|
||||
name: '径流系数',
|
||||
value: '0.6',
|
||||
dw: ''
|
||||
}, {
|
||||
name: '热岛减率',
|
||||
value: '21',
|
||||
dw: '%'
|
||||
}]
|
||||
},
|
||||
{
|
||||
name: '生物滞留&净化系统',
|
||||
url: 'biology',
|
||||
parms: [{
|
||||
name: '区域面积',
|
||||
value: '75',
|
||||
dw: '㎡'
|
||||
}, {
|
||||
name: '滞留系统液位',
|
||||
value: '323',
|
||||
dw: 'mm'
|
||||
}]
|
||||
}, {
|
||||
name: '透水铺装&入渗系统',
|
||||
url: 'shentou',
|
||||
parms: [{
|
||||
name: '热岛消减率',
|
||||
value: '19.6',
|
||||
dw: '%'
|
||||
}, {
|
||||
name: '孔隙率',
|
||||
value: '10',
|
||||
dw: '%'
|
||||
}]
|
||||
}, {
|
||||
name: '调蓄系统&溢流监测系统',
|
||||
url: 'chuxu',
|
||||
parms: [{
|
||||
name: '溢流量',
|
||||
value: '1.25',
|
||||
dw: 'L/s'
|
||||
}, {
|
||||
name: '氨氮',
|
||||
value: '12.5',
|
||||
dw: 'mg/L'
|
||||
},]
|
||||
},
|
||||
{
|
||||
name: '气象监测系统',
|
||||
url: 'weather',
|
||||
parms: [{
|
||||
name: '温度',
|
||||
value: '23',
|
||||
dw: '℃'
|
||||
}, {
|
||||
name: '空气湿度',
|
||||
value: '22',
|
||||
dw: '%'
|
||||
}]
|
||||
},
|
||||
{
|
||||
name: '处理&回用系统',
|
||||
url: 'page',
|
||||
parms: [{
|
||||
name: '节水量',
|
||||
value: '4',
|
||||
dw: 'm³'
|
||||
}, {
|
||||
name: '节碳量',
|
||||
value: '0.67',
|
||||
dw: 'kg'
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
name: '屋顶绿化系统',
|
||||
url: 'green',
|
||||
parms: [{
|
||||
name: '径流系数',
|
||||
value: '0.6',
|
||||
dw: ''
|
||||
},{
|
||||
name: '热岛减率',
|
||||
value: '21',
|
||||
dw: '%'
|
||||
}]
|
||||
}, {
|
||||
name: '生物滞留&净化系统',
|
||||
url: 'biology',
|
||||
parms: [{
|
||||
name: '区域面积',
|
||||
value: '75',
|
||||
dw: '㎡'
|
||||
},{
|
||||
name: '滞留系统液位',
|
||||
value: '323',
|
||||
dw: 'mm'
|
||||
}]
|
||||
}, {
|
||||
name: '透水铺装&入渗系统',
|
||||
url: 'shentou',
|
||||
parms: [{
|
||||
name: '热岛消减率',
|
||||
value: '19.6',
|
||||
dw: '%'
|
||||
},{
|
||||
name: '孔隙率',
|
||||
value: '10',
|
||||
dw: '%'
|
||||
}]
|
||||
}, {
|
||||
name: '调蓄系统&溢流监测系统',
|
||||
url: 'chuxu',
|
||||
parms: [{
|
||||
name: '溢流量',
|
||||
value: '1.25',
|
||||
dw: 'L/s'
|
||||
},{
|
||||
name: '氨氮',
|
||||
value: '12.5',
|
||||
dw: 'mg/L'
|
||||
},]
|
||||
}, {
|
||||
name: '气象监测系统',
|
||||
url: 'weather',
|
||||
parms: [{
|
||||
name: '温度',
|
||||
value: '23',
|
||||
dw: '℃'
|
||||
},{
|
||||
name: '空气湿度',
|
||||
value: '22',
|
||||
dw: '%'
|
||||
}]
|
||||
}]
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
|
|
@ -151,34 +155,37 @@ export default {
|
|||
position: absolute;
|
||||
cursor: pointer;
|
||||
}
|
||||
.hot0 {
|
||||
top: 0px;
|
||||
|
||||
.hot0 {
|
||||
top: 0px;
|
||||
left: 597px;
|
||||
}
|
||||
}
|
||||
|
||||
.hot1 {
|
||||
top: 133px;
|
||||
.hot1 {
|
||||
top: 133px;
|
||||
left: 1051px;
|
||||
}
|
||||
}
|
||||
|
||||
.hot4 {
|
||||
top: 524px;
|
||||
.hot4 {
|
||||
top: 524px;
|
||||
left: 301px;
|
||||
}
|
||||
.hot5 {
|
||||
top: 172px;
|
||||
left: 300px;
|
||||
}
|
||||
.hot2 {
|
||||
top: 580px;
|
||||
left: 1061px;
|
||||
}
|
||||
}
|
||||
|
||||
.hot3 {
|
||||
top: 757px;
|
||||
.hot5 {
|
||||
top: 172px;
|
||||
left: 300px;
|
||||
}
|
||||
|
||||
.hot2 {
|
||||
top: 580px;
|
||||
left: 1061px;
|
||||
}
|
||||
|
||||
.hot3 {
|
||||
top: 757px;
|
||||
left: 647px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.menus {
|
||||
float: right;
|
||||
width: 20%;
|
||||
|
|
@ -186,82 +193,102 @@ export default {
|
|||
flex-direction: column;
|
||||
// border: 1px solid rgb(27, 187, 21);
|
||||
justify-content: space-between;
|
||||
padding: 10px;
|
||||
|
||||
.one-card {
|
||||
width: 100%;
|
||||
height: 140px;
|
||||
// border: 1px solid red;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
box-shadow: 0 0 8px #99ACB0 inset;
|
||||
box-shadow: 0px 0px 5px rgba(154, 204, 235, 1);
|
||||
cursor: pointer;
|
||||
// color: #fff;
|
||||
.one-card-left {
|
||||
width: 80%;
|
||||
padding: 10px;
|
||||
font-weight: 800;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.menu0 {
|
||||
background: url(../assets/p1.png) center 40px no-repeat;
|
||||
background-size: 50% auto;
|
||||
}
|
||||
|
||||
.menu1 {
|
||||
background: url(../assets/p2.png) center 40px no-repeat;
|
||||
background-size: 50% auto;
|
||||
background-size: 50% auto;
|
||||
}
|
||||
|
||||
.menu2 {
|
||||
background: url(../assets/p3.png) center 40px no-repeat;
|
||||
background-size: 50% auto;
|
||||
background-size: 50% auto;
|
||||
}
|
||||
|
||||
.menu3 {
|
||||
background: url(../assets/p4.png) center 40px no-repeat;
|
||||
background-size: 50% auto;
|
||||
background-size: 50% auto;
|
||||
}
|
||||
|
||||
.menu4 {
|
||||
background: url(../assets/p5.png) center 40px no-repeat;
|
||||
background-size: 50% auto;
|
||||
}
|
||||
|
||||
.menu5 {
|
||||
background: url(../assets/p6.png) center 40px no-repeat;
|
||||
background-size: 50% auto;
|
||||
}
|
||||
|
||||
.color0 {
|
||||
background: linear-gradient(to right, rgb(171, 187, 187), #7BB7B7);
|
||||
// background: linear-gradient(to right, rgb(171, 187, 187), #7BB7B7);
|
||||
background: #92cd6f;
|
||||
}
|
||||
|
||||
.color1 {
|
||||
background: linear-gradient(to right, #e2eff1, #99ACB0);
|
||||
// background: linear-gradient(to right, #e2eff1, #99ACB0);
|
||||
background: #73b47c;
|
||||
}
|
||||
|
||||
.color2 {
|
||||
background: linear-gradient(to right, #b8e5f5, #6ED2F6);
|
||||
// background: linear-gradient(to right, #b8e5f5, #6ED2F6);
|
||||
background: #539c88;
|
||||
}
|
||||
|
||||
.color3 {
|
||||
background: linear-gradient(to right, #bfdad9, #A3D8D6);
|
||||
// background: linear-gradient(to right, #bfdad9, #A3D8D6);
|
||||
background: #2294a4;
|
||||
}
|
||||
|
||||
.color4 {
|
||||
background: linear-gradient(to right, #c3d4cb, #81CFA3);
|
||||
// background: linear-gradient(to right, #c3d4cb, #81CFA3);
|
||||
background: #21acc5;
|
||||
}
|
||||
|
||||
.color5 {
|
||||
background: linear-gradient(to right, #c3d4cb, #81CFA3);
|
||||
// background: linear-gradient(to right, #c3d4cb, #81CFA3);
|
||||
background: #2b79aa;
|
||||
}
|
||||
|
||||
.one-card-right {
|
||||
width: 40%;
|
||||
color: #3E9537;
|
||||
color: #fff;
|
||||
padding: 10px;
|
||||
|
||||
.parm {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
line-height: 30px;
|
||||
align-items: start;
|
||||
justify-content: space-around;
|
||||
|
||||
.font24 {
|
||||
font-size: 24px;
|
||||
color: #00646C;
|
||||
font-size: 800;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
}</style>
|
||||
Loading…
Reference in New Issue