Browse Source

fix:调整页面样式

master
白凤吉 2 weeks ago
parent
commit
3182b7ebd9
  1. 1
      src/components/home/HomeOperation.vue
  2. 122
      src/components/home/HomeSetting.vue

1
src/components/home/HomeOperation.vue

@ -197,7 +197,6 @@ const operationState = computed(() => {
.home-disinfect {
display: flex;
justify-content: center;
margin-top: 5vh;
}
.home-disinfect-btn {
width: 27vw;

122
src/components/home/HomeSetting.vue

@ -248,59 +248,53 @@ const deviceType = computed(() => {
<template>
<div class="home-start-opt">
<el-row class="row-bg" justify="space-around">
<el-col v-if="deviceType === deviceStore.deviceTypeMap.PipeDM" :span="6">
<div class="home-opt-flex">
<BtButton
button-text="压力控制"
text-size="1.3rem"
border-radius="5px"
width="7.5rem"
text-color="#1989fa"
height="3rem"
@click="onSetPressure"
/>
</div>
</el-col>
<el-col :span="6">
<div class="home-opt-ml">
<BtButton
button-text="查看图表"
text-size="1.3rem"
border-radius="5px"
:width="settingWidth"
height="3rem"
text-color="#1989fa"
:disabled="deviceState"
@click="onShowChart"
/>
</div>
</el-col>
<el-col :span="6">
<div class="home-opt-ml">
<BtButton
v-if="deviceState"
button-text="消毒设置"
text-size="1.3rem"
border-radius="5px"
:width="settingWidth"
text-color="#1989fa"
height="3rem"
@click="onDisinfectConfig('消毒设置')"
/>
<BtButton
v-else
button-text="运行参数"
text-size="1.3rem"
border-radius="5px"
:width="settingWidth"
text-color="#1989fa"
height="3rem"
@click="onDisinfectConfig('运行参数')"
/>
</div>
</el-col>
</el-row>
<div class="home-opt-flex">
<div v-if="deviceType === deviceStore.deviceTypeMap.PipeDM">
<BtButton
button-text="压力控制"
text-size="1.3rem"
border-radius="5px"
width="7.5rem"
text-color="#1989fa"
height="3rem"
@click="onSetPressure"
/>
</div>
<div class="home-opt-ml">
<BtButton
button-text="查看图表"
text-size="1.3rem"
border-radius="5px"
:width="settingWidth"
height="3rem"
text-color="#1989fa"
:disabled="deviceState"
@click="onShowChart"
/>
</div>
<div class="home-opt-ml">
<BtButton
v-if="deviceState"
button-text="消毒设置"
text-size="1.3rem"
border-radius="5px"
:width="settingWidth"
text-color="#1989fa"
height="3rem"
@click="onDisinfectConfig('消毒设置')"
/>
<BtButton
v-else
button-text="运行参数"
text-size="1.3rem"
border-radius="5px"
:width="settingWidth"
text-color="#1989fa"
height="3rem"
@click="onDisinfectConfig('运行参数')"
/>
</div>
</div>
</div>
<ft-dialog v-model="disinfectFormulaVisible" :title="disinfectFormulaTitle" width="80vw">
<div style="height: 80vh; overflow: auto">
@ -345,21 +339,17 @@ const deviceType = computed(() => {
<style lang="scss" scoped>
.home-start-opt {
margin: 0.5rem;
gap: 5px;
width: 100%;
.home-opt-flex {
display: flex;
grid-template-columns: 1fr 1fr 1fr;
.home-opt-ml {
margin-left: 5px;
}
}
}
.home-opt-flex {
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
}
.home-opt-ml {
margin-left: 0;
}
.config {
border: 1px solid red;
}
.config-btn {
//margin-top: -3rem
}
</style>
Loading…
Cancel
Save