139 lines
2.9 KiB
Plaintext
139 lines
2.9 KiB
Plaintext
<template>
|
||
<view class="index_wrap">
|
||
<text class="index_title">运行状态</text>
|
||
<view class="index_list">
|
||
<view
|
||
class="index_inline"
|
||
v-for="item in listData"
|
||
>
|
||
<view class="inline_item">
|
||
<text class="inline_item_text">{{item.circuitName}}</text>
|
||
<text class="inline_item_text">{{item.current}}</text>
|
||
</view>
|
||
<view class="inline_item">
|
||
<text class="inline_item_text">{{item.typeName}}</text>
|
||
<text :class="item.isTypeOpen?'inline_item_circle_open':'inline_item_circle_close'"></text>
|
||
<text class="inline_item_text">{{item.isTypeOpen?'开':'关'}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="index_footer">
|
||
<text class="footer_set" @click="handleToSet">设置</text>
|
||
<text class="footer_history" @click="handleToHistory">操作历史</text>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
export default {
|
||
name: 'main',
|
||
data() {
|
||
return {
|
||
listData:[
|
||
{circuitName:'1路电流：',current:'3.21A',typeName:'高压风冷：',isTypeOpen:false},
|
||
{circuitName:'2路电流：',current:'3.21A',typeName:'中压风冷：',isTypeOpen:true},
|
||
{circuitName:'3路电流：',current:'3.21A',typeName:'低压风冷：',isTypeOpen:false},
|
||
{circuitName:'4路电流：',current:'3.21A',typeName:'闭锁调压：',isTypeOpen:true}
|
||
]
|
||
};
|
||
},
|
||
//初始化
|
||
apiready(){
|
||
|
||
},
|
||
methods: {
|
||
//跳转到设置页面
|
||
handleToSet(){
|
||
api.openWin({
|
||
name: 'set',
|
||
url:'./main/set.stml'
|
||
})
|
||
},
|
||
//跳转到历史记录页
|
||
handleToHistory(){
|
||
api.openWin({
|
||
name: 'history',
|
||
url:'./main/history.stml'
|
||
})
|
||
},
|
||
}
|
||
};
|
||
</script>
|
||
<style>
|
||
.index_wrap{
|
||
width: 100%;
|
||
height: 100%;
|
||
box-sizing: border-box;
|
||
padding: 20px;
|
||
background-image: url("../image/login.png");
|
||
background-size: 120%;
|
||
background-repeat: no-repeat;
|
||
background-position: center;
|
||
}
|
||
.index_title{
|
||
width: 100%;
|
||
text-align: center;
|
||
font-size: 60px;
|
||
color: #ffffff;
|
||
font-weight: bold;
|
||
}
|
||
.index_list{
|
||
margin-top: 50px;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.index_inline{
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
margin: 10px 0;
|
||
}
|
||
.inline_item{
|
||
margin: 0 40px;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
}
|
||
.inline_item_text{
|
||
font-size: 40px;
|
||
font-weight: bold;
|
||
color: #ffffff;
|
||
margin: 0 10px;
|
||
}
|
||
.inline_item_circle_open{
|
||
width: 40px;
|
||
height: 40px;
|
||
background-color: #09be30;
|
||
border-radius: 50%;
|
||
margin: 0 10px;
|
||
}
|
||
.inline_item_circle_close{
|
||
width: 40px;
|
||
height: 40px;
|
||
background-color: #fd0101;
|
||
border-radius: 50%;
|
||
margin: 0 10px;
|
||
}
|
||
.index_footer{
|
||
width: 80%;
|
||
margin: 50px auto 0;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
}
|
||
.footer_set{
|
||
font-size: 40px;
|
||
font-weight: bold;
|
||
box-sizing: border-box;
|
||
padding: 10px 20px;
|
||
color: #ffffff;
|
||
}
|
||
.footer_history{
|
||
font-size: 40px;
|
||
font-weight: bold;
|
||
margin-left: 50px;
|
||
box-sizing: border-box;
|
||
padding: 10px 20px;
|
||
color: #ffffff;
|
||
}
|
||
</style>
|