<script setup lang="ts">
|
import { ref, computed } from "vue";
|
import { useRouter } from "vue-router";
|
|
const router = useRouter();
|
|
const goBack = () => {
|
router.back(); // 或者使用 router.go(-1);
|
};
|
</script>
|
|
<template>
|
<div class="app">
|
<div class="title-box">
|
<van-nav-bar
|
title="仪器维护"
|
left-text="返回"
|
left-arrow
|
@click-left="goBack"
|
>
|
<template #right>
|
<span class="text-xl ml-1 text-red-500 font-bold"
|
>设备状态-[故障未定义]</span
|
>
|
</template>
|
</van-nav-bar>
|
</div>
|
<van-divider />
|
|
<div class="section-one">提示：读取水分仪固件版本号失败！</div>
|
<van-divider />
|
<div class="section-two">
|
<div class="w-[120px]">
|
<van-button icon="replay" size="large" type="primary"
|
>仪器复位</van-button
|
>
|
</div>
|
|
<div class="w-[120px]">
|
<van-button icon="info-o" size="large" type="primary"
|
>固件版本</van-button
|
>
|
</div>
|
</div>
|
<van-divider />
|
<div class="section-three">
|
<div class="item">
|
<div class="w-[120px]">
|
<van-button icon="coupon-o" size="large" type="primary"
|
>上阀门开</van-button
|
>
|
</div>
|
<div class="w-[120px]">
|
<van-button icon="coupon-o" size="large" type="primary"
|
>下阀门开</van-button
|
>
|
</div>
|
<div class="w-[120px]">
|
<van-button icon="coupon-o" size="large" type="primary"
|
>双阀门开</van-button
|
>
|
</div>
|
<div class="w-[120px]">
|
<van-button disabled icon="coupon-o" size="large" type="primary"
|
>振动开</van-button
|
>
|
</div>
|
</div>
|
<div class="item">
|
<div class="w-[120px]">
|
<van-button disabled icon="coupon-o" size="large" type="primary"
|
>上阀门关</van-button
|
>
|
</div>
|
<div class="w-[120px]">
|
<van-button disabled icon="coupon-o" size="large" type="primary"
|
>下阀门关</van-button
|
>
|
</div>
|
<div class="w-[120px]">
|
<van-button disabled icon="coupon-o" size="large" type="primary"
|
>双阀门关</van-button
|
>
|
</div>
|
<div class="w-[120px]">
|
<van-button icon="coupon-o" size="large" type="primary"
|
>振动关</van-button
|
>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<style scoped lang="less">
|
.app {
|
width: 100vw;
|
display: flex;
|
flex-direction: column;
|
|
.title-box {
|
height: 60px;
|
align-items: center;
|
background: white;
|
margin: 10px 10px 0 10px;
|
border-radius: 10px 10px 0 0;
|
overflow: hidden;
|
}
|
|
.section-one {
|
height: 80px;
|
margin: 0 10px;
|
background: white;
|
display: flex;
|
justify-content: space-evenly;
|
align-items: center;
|
font-size: 26px;
|
}
|
|
.section-two {
|
height: 120px;
|
margin: 0 10px;
|
border-radius: 0 0 10px 10px;
|
background: white;
|
display: flex;
|
justify-content: space-evenly;
|
align-items: center;
|
}
|
|
.section-three {
|
height: 265px;
|
margin: 0 10px;
|
border-radius: 0 0 10px 10px;
|
background: white;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-evenly;
|
align-items: center;
|
|
.item {
|
width: 100%;
|
display: flex;
|
justify-content: space-evenly;
|
}
|
}
|
}
|
|
:deep(.van-nav-bar__text) {
|
font-size: 20px;
|
}
|
</style>
|
