style:申请业务规则配置

@@ -10,7 +10,7 @@
         <i class="el-icon-full-screen" v-else @click="handleFullscreen" />
         <i class="el-icon-full-screen" v-else @click="handleFullscreen" />
       </div>
       </div>
     </div>
     </div>
-    <div class="dialogBox-content" :style="{ height: scrollerHeight ? scrollerHeight : 'auto' }" :key="key">
+    <div class="dialogBox-content" :style="{ minHeight: scrollerHeight ? scrollerHeight : 'auto' }" :key="key">
       <slot></slot>
       <slot></slot>
     </div>
     </div>
     <div slot="footer" class="dialog_footer" v-if="isButton">
     <div slot="footer" class="dialog_footer" v-if="isButton">

 <template>
 <template>
   <dialogBox title="申请业务规则配置" @submitForm="submitForm" @closeDialog="closeDialog" v-model="value">
   <dialogBox title="申请业务规则配置" @submitForm="submitForm" @closeDialog="closeDialog" v-model="value">
+    <ul class="edit-title-list">
+      <li v-for="(item, index) in titleList" @click="handleTitleSelct(item)" :key="index"
+        :class="{ active: item.select }">{{
+            item.name
+        }}</li>
+    </ul>
     <div class="sqywgz-edit">
     <div class="sqywgz-edit">
       <ul class="sqywgz-edit-left">
       <ul class="sqywgz-edit-left">
         <li v-for="(item, index) in leftList" :key="index" :class="{ active: index == n }" @click="hanldeItem(index)">{{
         <li v-for="(item, index) in leftList" :key="index" :class="{ active: index == n }" @click="hanldeItem(index)">{{
@@ -131,6 +137,21 @@ export default {
   },
   },
   data () {
   data () {
     return {
     return {
+      titleList: [
+        {
+          name: '第一次登记',
+          select: true
+        },
+        {
+          name: '转移登记'
+        },
+        {
+          name: '变更登记'
+        },
+        {
+          name: '注销登记'
+        }
+      ],
       imgUploadUrl: fileController.uploadUrl(),
       imgUploadUrl: fileController.uploadUrl(),
       n: 0,
       n: 0,
       leftList: [
       leftList: [
@@ -213,6 +234,15 @@ export default {
     };
     };
   },
   },
   methods: {
   methods: {
+    handleTitleSelct (obj) {
+      this.titleList.forEach(item => {
+        if (item.select) {
+          item.select = false
+        }
+      })
+      this.n = 0
+      this.$set(obj, 'select', true)
+    },
     getValue (val) {
     getValue (val) {
       console.log(val);
       console.log(val);
     },
     },
@@ -270,6 +300,29 @@ export default {
 <style scoped lang="scss">
 <style scoped lang="scss">
 @import "~@/styles/mixin.scss";
 @import "~@/styles/mixin.scss";
 
 
+.active {
+  background: $light-blue  !important;
+  color: #fff;
+}
+
+.edit-title-list {
+  @include flex;
+
+  li {
+    flex: 1;
+    @include flex-center;
+    border: 1px solid $borderColor;
+    line-height: 36px;
+    margin-bottom: 10px;
+    cursor: pointer;
+    transition: all 0.3s;
+
+    &:hover {
+      @extend .active;
+    }
+  }
+}
+
 .sqywgz-edit {
 .sqywgz-edit {
   @include flex;
   @include flex;
   width: 100%;
   width: 100%;
@@ -277,10 +330,7 @@ export default {
   &-left {
   &-left {
     width: 26px;
     width: 26px;
 
 
-    .active {
-      background: $light-blue;
-      color: #fff;
-    }
+
 
 
     li {
     li {
       @include flex-center;
       @include flex-center;
@@ -288,6 +338,7 @@ export default {
       border-bottom-right-radius: 5px;
       border-bottom-right-radius: 5px;
       padding: 15px;
       padding: 15px;
       cursor: pointer;
       cursor: pointer;
+      transition: all 0.3s;
 
 
       &:hover {
       &:hover {
         @extend .active;
         @extend .active;