From f77dad86de37e5ab0df6a6ce43f21e1ab408d389 Mon Sep 17 00:00:00 2001 From: hanbaoshan <hanbaoshan@aiotlink.com> Date: 星期六, 08 八月 2020 11:23:39 +0800 Subject: [PATCH] 调整布局 --- src/pages/gb28181/index/App.vue | 191 ++++++++++++++++++++++++++--------------------- 1 files changed, 107 insertions(+), 84 deletions(-) diff --git a/src/pages/gb28181/index/App.vue b/src/pages/gb28181/index/App.vue index d5db26f..10e2b47 100644 --- a/src/pages/gb28181/index/App.vue +++ b/src/pages/gb28181/index/App.vue @@ -1,93 +1,111 @@ <template> <div class="s-basic-setting"> - <!-- GB28181璁剧疆 --> - <el-form :model="gb28181" :rules="rules" label-width="130px" class="alarmSetting" ref="gb28181"> - <!-- <el-form-item label="鍥介檯鏈嶅姟鍣↖P" prop="ServerIp"> - <ip-input :ip="gb28181.ServerIp" @on-blur="gb28181.ServerIp = arguments[0]"></ip-input> - </el-form-item>--> + <el-menu + :default-openeds="openeds" + background-color="#fff" + text-color="#303133" + active-text-color="#409EFF" + style="height: 100%;" + class="menu-css" + @open="menuOpen" + @close="menuClose" + > + <el-submenu index="0"> + <template slot="title"> + <b class="tree-font">鍥介檯ID</b> + </template> + <el-menu-item-group class="item-group"> + <!-- GB28181璁剧疆 --> + <el-form :model="gb28181" :rules="rules" label-width="130px" class="alarmSetting" ref="gb28181"> + <!-- <el-form-item label="鍥介檯鏈嶅姟鍣↖P" prop="ServerIp"> + <ip-input :ip="gb28181.ServerIp" @on-blur="gb28181.ServerIp = arguments[0]"></ip-input> + </el-form-item>--> - <div style="text-align: left;margin-bottom: 22px;"> - <el-radio-group v-model="gb28181.idType"> - <el-radio :label="0">杈撳叆宸叉湁ID</el-radio> - <el-radio :label="1">鐢熸垚鏂扮殑ID</el-radio> - </el-radio-group> - </div> + <div style="text-align: left;margin-bottom: 22px;"> + <el-radio-group v-model="gb28181.idType"> + <el-radio :label="0">杈撳叆宸叉湁ID</el-radio> + <el-radio :label="1">鐢熸垚鏂扮殑ID</el-radio> + </el-radio-group> + </div> - <el-form-item label="鎵�鍦ㄥ湴"> - <el-select - v-model="locationCity.province" - @change="changeProvince" - size="small" - placeholder="璇烽�夋嫨鐪佷唤" - > - <el-option - v-for="item in locationCity.provinceOptions" - :key="item.id" - :label="item.name" - size="small" - :value="item.id" - ></el-option> - </el-select> - <el-select - class="ml10 mr10" - v-model="locationCity.city" - :disabled="!locationCity.province" - @change="changeCity" - size="small" - placeholder="璇烽�夋嫨鍩庡競" - > - <el-option - v-for="item in locationCity.cityOptions" - :key="item.id" - :label="item.name" - :value="item.id" - ></el-option> - </el-select> - <el-select - v-model="locationCity.county" - :disabled="!locationCity.city" - size="small" - placeholder="璇烽�夋嫨鍖哄幙" - > - <el-option - v-for="item in locationCity.countyOptions" - :key="item.id" - :label="item.name" - :value="item.id" - ></el-option> - </el-select> - <el-button - type="text" - style="position: absolute" - v-show="gb28181.idType === 1" - @click="newGBID" - >鐢熸垚ID</el-button> - </el-form-item> + <el-form-item label="鎵�鍦ㄥ湴"> + <el-select + v-model="locationCity.province" + @change="changeProvince" + size="small" + placeholder="璇烽�夋嫨鐪佷唤" + > + <el-option + v-for="item in locationCity.provinceOptions" + :key="item.id" + :label="item.name" + size="small" + :value="item.id" + ></el-option> + </el-select> + <el-select + class="ml10 mr10" + v-model="locationCity.city" + :disabled="!locationCity.province" + @change="changeCity" + size="small" + placeholder="璇烽�夋嫨鍩庡競" + > + <el-option + v-for="item in locationCity.cityOptions" + :key="item.id" + :label="item.name" + :value="item.id" + ></el-option> + </el-select> + <el-select + v-model="locationCity.county" + :disabled="!locationCity.city" + size="small" + placeholder="璇烽�夋嫨鍖哄幙" + > + <el-option + v-for="item in locationCity.countyOptions" + :key="item.id" + :label="item.name" + :value="item.id" + ></el-option> + </el-select> + <el-button + type="text" + style="position: absolute" + v-show="gb28181.idType === 1" + @click="newGBID" + >鐢熸垚ID</el-button> + </el-form-item> - <!-- <el-form-item label="鍥介檯鏈嶅姟鍣ㄧ鍙�" prop="GbServerPort"> - <el-input v-model.number="gb28181.ServerPort" placeholder="璇疯緭鍏�" size="small"></el-input> - </el-form-item>--> + <!-- <el-form-item label="鍥介檯鏈嶅姟鍣ㄧ鍙�" prop="GbServerPort"> + <el-input v-model.number="gb28181.ServerPort" placeholder="璇疯緭鍏�" size="small"></el-input> + </el-form-item>--> - <el-form-item label="鍥芥爣ID"> - <el-input v-model="gb28181.PublicId" placeholder="璇疯緭鍏�" size="small"></el-input> - </el-form-item> + <el-form-item label="鍥芥爣ID"> + <el-input v-model="gb28181.PublicId" placeholder="璇疯緭鍏�" size="small"></el-input> + </el-form-item> - <el-form-item label="鍥芥爣绔彛" prop="ServerPort"> - <el-input v-model.number="gb28181.GbServerPort" placeholder="璇疯緭鍏�" size="small"></el-input> - </el-form-item> + <el-form-item label="鍥芥爣绔彛" prop="ServerPort"> + <el-input v-model.number="gb28181.GbServerPort" placeholder="璇疯緭鍏�" size="small"></el-input> + </el-form-item> - <el-form-item label="寮�鍚壌鏉�"> - <el-switch v-model="gb28181.IsAuth"></el-switch> - </el-form-item> + <el-form-item label="寮�鍚壌鏉�"> + <el-switch v-model="gb28181.IsAuth"></el-switch> + </el-form-item> - <el-form-item label="閴存潈瀵嗙爜" v-show="gb28181.IsAuth"> - <el-input v-model="gb28181.Password" placeholder="璇疯緭鍏�" size="small"></el-input> - </el-form-item> + <el-form-item label="閴存潈瀵嗙爜" v-show="gb28181.IsAuth"> + <el-input v-model="gb28181.Password" placeholder="璇疯緭鍏�" size="small"></el-input> + </el-form-item> - <el-form-item> - <el-button type="primary" @click="submitGB28281" size="small">淇濆瓨</el-button> - </el-form-item> - </el-form> + <el-form-item > + <el-button type="primary" @click="submitGB28281" size="small">淇濆瓨</el-button> + </el-form-item> + </el-form> + </el-menu-item-group> + </el-submenu> + </el-menu> </div> </template> @@ -230,16 +248,20 @@ <style lang="scss"> .s-basic-setting { height: 100%; - padding: 0 30px; + padding: 30px; + box-sizing: border-box; .el-form { - margin-top: 30px; - // margin-left: -80px; .el-form-item { text-align: left; + &:last-of-type{ + width: 490px; + } .el-button { float: right; } - + .el-select{ + margin-right:10px; + } .el-form-item__content { text-align: left; input { @@ -258,6 +280,7 @@ text-align: left; } } + } .alarmSetting { .el-input { -- Gitblit v1.8.0