Browse Source

fix:如果选择了配方,不应该再显示消毒等级下拉框,调整显示样式

master
白凤吉 2 weeks ago
parent
commit
0a44e36684
  1. 7
      src/components/home/HomeLogLevel.vue
  2. 2
      src/components/home/HomeSetting.vue
  3. 28
      src/views/home/index.vue

7
src/components/home/HomeLogLevel.vue

@ -12,6 +12,7 @@ const loglevel = ref(formulaStore.loglevel)
const isModalOpen = ref(false) const isModalOpen = ref(false)
const homeStore = useHomeStore() const homeStore = useHomeStore()
const showLogLevelInput = computed(() => formulaStore.selectedFormulaInfo === null)
watchEffect(() => { watchEffect(() => {
options.value = formulaStore.logLevelOptions options.value = formulaStore.logLevelOptions
@ -49,7 +50,7 @@ const operationState = computed(() => {
</script> </script>
<template> <template>
<div class="home-right-level">
<div v-if="showLogLevelInput" class="home-right-level">
消毒等级 消毒等级
<el-input <el-input
v-model="loglevel" v-model="loglevel"
@ -77,11 +78,13 @@ const operationState = computed(() => {
<style lang="scss" scoped> <style lang="scss" scoped>
$input-height: 3rem; $input-height: 3rem;
.page-wrapper {
position: relative;
}
.home-right-level { .home-right-level {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin-top: 24vh;
//font-family: Source Han Sans; //font-family: Source Han Sans;
font-size: 24px; font-size: 24px;
.input { .input {

2
src/components/home/HomeSetting.vue

@ -326,8 +326,6 @@ const settingWidth = computed(() => {
<style lang="scss" scoped> <style lang="scss" scoped>
.home-start-opt{ .home-start-opt{
position: absolute;
bottom: 0;
margin: 0.5rem; margin: 0.5rem;
gap: 5px; gap: 5px;
width: 100%; width: 100%;

28
src/views/home/index.vue

@ -188,13 +188,19 @@ const computedStyle = () => {
</div> </div>
<div class="home-grid-item home-right"> <div class="home-grid-item home-right">
<!-- 正在进行的配方 --> <!-- 正在进行的配方 -->
<HomeFormula />
<!-- 选择消毒的等级 -->
<HomeLogLevel />
<!-- 开始消毒停止消毒及状态区 -->
<HomeOperation />
<div class="top">
<HomeFormula />
</div>
<div class="middle">
<!-- 选择消毒的等级 -->
<HomeLogLevel />
<!-- 开始消毒停止消毒及状态区 -->
<HomeOperation />
</div>
<!-- 消毒设置 --> <!-- 消毒设置 -->
<HomeSetting />
<div class="bottom">
<HomeSetting />
</div>
</div> </div>
</div> </div>
<div v-else> <div v-else>
@ -270,11 +276,17 @@ $input-height: 3rem;
.home-right { .home-right {
background: linear-gradient(180deg, rgba(147, 203, 255, 1) -190%, #ffffff 24%); background: linear-gradient(180deg, rgba(147, 203, 255, 1) -190%, #ffffff 24%);
position: relative;
border-radius: 10px; border-radius: 10px;
box-shadow: 0 1px 5px 0 rgba(9, 39, 62, 0.15); box-shadow: 0 1px 5px 0 rgba(9, 39, 62, 0.15);
display: flex;
flex-direction: column;
justify-content: space-between;
}
.middle {
display: flex;
flex-direction: column;
gap: 16px;
} }
.el-button { .el-button {
background-color: #2892f3 !important; background-color: #2892f3 !important;
} }

Loading…
Cancel
Save