Commit 4822f61a authored by liuzhaoh's avatar liuzhaoh

登录小屏样式调整

parent 7207252a
...@@ -5,116 +5,125 @@ ...@@ -5,116 +5,125 @@
</div> </div>
<h1 class="title">sensor设置信息</h1> <h1 class="title">sensor设置信息</h1>
<div class="grid-container"> <div class="content-box">
<!-- 左侧参数设置 --> <div class="grid-container">
<div class="setting-group"> <!-- 左侧参数设置 -->
<div class="setting-row" v-for="item in leftInfoEnum" :key="item.label"> <div class="setting-group">
<span class="label" :class="{'layout_2': item.type2 === 'checkbox'}"> <div
<el-checkbox class="setting-row"
style="margin-right: 10px" v-for="item in leftInfoEnum"
v-if="item.type2 === 'checkbox'" :key="item.label"
v-model="infoObj[item.propKey2]"
></el-checkbox>
{{ item.label }}
</span>
<el-input
v-if="item.type === 'input'"
v-model="infoObj[item.propKey]"
></el-input>
<el-select
v-model="infoObj[item.propKey]"
v-if="item.type === 'select'"
> >
<el-option <span
v-for="option in item.options" class="label"
:key="option.code" :class="{ layout_2: item.type2 === 'checkbox' }"
:label="option.name" >
:value="option.code" <el-checkbox
></el-option> style="margin-right: 10px"
</el-select> v-if="item.type2 === 'checkbox'"
v-model="infoObj[item.propKey2]"
></el-checkbox>
{{ item.label }}
</span>
<el-input
v-if="item.type === 'input'"
v-model="infoObj[item.propKey]"
></el-input>
<el-select
v-model="infoObj[item.propKey]"
v-if="item.type === 'select'"
>
<el-option
v-for="option in item.options"
:key="option.code"
:label="option.name"
:value="option.code"
></el-option>
</el-select>
</div>
</div> </div>
</div>
<!-- 右侧参数设置 --> <!-- 右侧参数设置 -->
<div class="setting-group"> <div class="setting-group">
<div <div
class="setting-row" class="setting-row"
v-for="item in rightInfoEnum" v-for="item in rightInfoEnum"
:key="item.label" :key="item.label"
> >
<span class="label">{{ item.label }}</span> <span class="label">{{ item.label }}</span>
<el-input <el-input
v-if="item.type === 'input'" v-if="item.type === 'input'"
v-model="infoObj[item.propKey]" v-model="infoObj[item.propKey]"
></el-input> ></el-input>
</div>
</div> </div>
</div> </div>
</div>
<!-- 复选框区域 -->
<div class="checkbox-group">
<label class="custom-checkbox">
<input type="checkbox" v-model="infoObj.onlineBackblow" /> 在线反吹
</label>
<label class="custom-checkbox">
<input type="checkbox" v-model="infoObj.fastBlow" /> 快/慢
</label>
<label class="custom-checkbox">
<input type="checkbox" v-model="infoObj.d01Alarm" /> DO1报警
</label>
<label class="custom-checkbox">
<input type="checkbox" v-model="infoObj.d13Alarm" /> DI3有效
</label>
</div>
<!-- 仓室顺序 --> <!-- 复选框区域 -->
<h4 style="margin-bottom: 10px">仓室顺序</h4> <div class="checkbox-group">
<el-input <label class="custom-checkbox">
type="textarea" <input type="checkbox" v-model="infoObj.onlineBackblow" /> 在线反吹
:rows="4" </label>
v-model="infoObj.compartSort" <label class="custom-checkbox">
></el-input> <input type="checkbox" v-model="infoObj.fastBlow" /> 快/慢
</label>
<!-- 复选框区域 --> <label class="custom-checkbox">
<div class="checkbox-group mgr10"> <input type="checkbox" v-model="infoObj.d01Alarm" /> DO1报警
<label class="custom-checkbox"> </label>
<input type="checkbox" v-model="infoObj.diInput" /> DI接入Y/N <label class="custom-checkbox">
</label> <input type="checkbox" v-model="infoObj.d13Alarm" /> DI3有效
<label class="custom-checkbox"> </label>
<input type="checkbox" v-model="infoObj.showEarlyWarn" /> 显示预警
</label>
<div class="setting-row">
<span class="device-label">关联设备</span>
<el-select v-model="infoObj.relateDevicesNum" placeholder="请选择">
<el-option
v-for="(item, index) in 21"
:key="item"
:value="index"
:label="index"
></el-option>
</el-select>
</div> </div>
</div>
<!-- 复选框区域 --> <!-- 仓室顺序 -->
<div class="checkbox-group mgr10"> <h4 style="margin-bottom: 10px">仓室顺序</h4>
<div class="select-input"> <el-input
type="textarea"
:rows="4"
v-model="infoObj.compartSort"
></el-input>
<!-- 复选框区域 -->
<div class="checkbox-group mgr10">
<label class="custom-checkbox"> <label class="custom-checkbox">
<input <input type="checkbox" v-model="infoObj.diInput" /> DI接入Y/N
type="checkbox"
checked
v-model="infoObj.hasLiftValveCommunicationIp"
/>
脉冲阀设备Y/N 通信IP
</label> </label>
<div style="margin-left: 10px">
<el-input v-model="infoObj.liftValveCommunicationIp"></el-input>
</div>
</div>
<div>
<label class="custom-checkbox"> <label class="custom-checkbox">
<input type="checkbox" /> 室内脉冲轮流喷吹 <input type="checkbox" v-model="infoObj.showEarlyWarn" /> 显示预警
</label> </label>
<div class="setting-row">
<span class="device-label">关联设备</span>
<el-select v-model="infoObj.relateDevicesNum" placeholder="请选择">
<el-option
v-for="(item, index) in 21"
:key="item"
:value="index"
:label="index"
></el-option>
</el-select>
</div>
</div>
<!-- 复选框区域 -->
<div class="checkbox-group mgr10">
<div class="select-input">
<label class="custom-checkbox">
<input
type="checkbox"
checked
v-model="infoObj.hasLiftValveCommunicationIp"
/>
脉冲阀设备Y/N 通信IP
</label>
<div style="margin-left: 10px">
<el-input v-model="infoObj.liftValveCommunicationIp"></el-input>
</div>
</div>
<div>
<label class="custom-checkbox">
<input type="checkbox" v-model="infoObj.indoorPulseBlow"/> 室内脉冲轮流喷吹
</label>
</div>
</div> </div>
</div> </div>
...@@ -355,18 +364,28 @@ body { ...@@ -355,18 +364,28 @@ body {
.container { .container {
position: absolute; position: absolute;
top: 40%; top: 10%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translateX(-50%);
max-width: 650px; max-height: 80vh;
max-width: 60vw;
margin: 0 auto; margin: 0 auto;
background: white; background: white;
border-radius: 12px; border-radius: 12px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
padding: 0.8rem 1.2rem 1.2rem; padding: 0.8rem 1.2rem 1.2rem;
z-index: 100; z-index: 100;
// overflow-y: auto;
.content-box {
overflow: auto;
height: 55vh;
}
.content-box::-webkit-scrollbar {
width: 1px;
}
} }
.title { .title {
color: #3b82f6; color: #3b82f6;
font-size: 1.8rem; font-size: 1.8rem;
......
...@@ -1225,8 +1225,9 @@ $light_gray: #eee; ...@@ -1225,8 +1225,9 @@ $light_gray: #eee;
box-shadow: 0px 15px 30px 0px rgba(0, 85, 183, 0.15); box-shadow: 0px 15px 30px 0px rgba(0, 85, 183, 0.15);
padding: 40px; padding: 40px;
position: absolute; position: absolute;
right: 14vw; right:10%;
top: 22%; top: 15%;
// transform: translateY(-50%);
border-radius: 20px; border-radius: 20px;
.el-checkbox-group label { .el-checkbox-group label {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment