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