Skip to content

bdc / bdcdj-web

Go to a project
Toggle navigation
Toggle navigation pinning
b22eeb16 by 任超
Options

style:申请业务

1 parent 493ba200
Inline Side-by-side
Showing 2 changed files with 120 additions and 68 deletions
1 .ywsq { 1 .ywsq {
2 display: flex; 2 display: flex;
3 height: 100%;
3 4
4 /deep/.el-collapse-item__header { 5 /deep/.el-collapse-item__header {
5 padding-left: 20px; 6 padding-left: 20px;
6 font-weight: 700; 7 font-weight: 700;
7 font-size: 16px; 8 font-size: 16px;
9 border: 1px solid $borderColor;
10 border-top: none;
11 }
12
13 .active {
14 background-color: $light-blue !important;
15 color: $menuText !important;
8 } 16 }
9 17
10 .ywsq-left { 18 .ywsq-left {
11 width: 25%; 19 width: 260px;
20 background-color: #fff;
21 height: 100%;
22 box-sizing: border-box;
23 padding: 10px;
24
25 p {
26 width: 100%;
27 line-height: 36px;
28 border: 1px solid $borderColor;
29 font-weight: 700;
30 padding: 5px 0 5px 10px;
31 background-color: #fff;
32 margin-bottom: 5px;
33 box-sizing: border-box;
34 cursor: pointer;
35 border-radius: 3px;
36
37 &:hover {
38 border: 1px solid $light-blue;
39 color: $light-blue;
40 }
41 }
12 42
13 .box-card { 43 .box-card {
14 margin-bottom: 20px; 44 margin-bottom: 20px;
...@@ -29,10 +59,7 @@ ...@@ -29,10 +59,7 @@
29 .item-list { 59 .item-list {
30 padding: 0 20px 0 20px; 60 padding: 0 20px 0 20px;
31 61
32 .active { 62
33 background-color: $light-blue;
34 color: $menuText;
35 }
36 63
37 li { 64 li {
38 cursor: pointer; 65 cursor: pointer;
...@@ -46,16 +73,19 @@ ...@@ -46,16 +73,19 @@
46 transition: all 0.3s; 73 transition: all 0.3s;
47 74
48 &:hover { 75 &:hover {
49 background-color: $light-blue; 76 border: 1px solid $light-blue;
50 color: $menuText; 77 color: $light-blue;
51 } 78 }
52 } 79 }
53 } 80 }
54 } 81 }
55 82
56 .ywsq-right { 83 .ywsq-right {
57 width: calc(75% - 10px); 84 width: calc(100% - 270px);
58 margin-left: 10px; 85 margin-left: 10px;
86 height: 100%;
87 display: flex;
88 flex-direction: column;
59 89
60 .right-type { 90 .right-type {
61 margin-bottom: 20px; 91 margin-bottom: 20px;
...@@ -69,31 +99,33 @@ ...@@ -69,31 +99,33 @@
69 99
70 } 100 }
71 101
72 .cactive {
73 background-color: $green;
74 color: $menuText;
75 }
76
77 .type-content { 102 .type-content {
78 @include flex; 103 @include flex;
79 justify-content: space-between; 104 justify-content: space-between;
80 padding: 0 20px; 105 padding: 0 20px;
81 margin: 50px 0; 106 margin: 20px 0;
82 107
83 li { 108 li {
84 width: 23.5%; 109 width: 23.5%;
85 height: 50px;
86 line-height: 50px; 110 line-height: 50px;
87 border: 1px solid $borderColor; 111 border: 1px solid $borderColor;
88 border-radius: 5px; 112 border-radius: 5px;
89 box-sizing: border-box; 113 box-sizing: border-box;
90 padding-left: 10px; 114 padding-left: 10px;
91 cursor: pointer;
92 transition: all 0.3s; 115 transition: all 0.3s;
116 cursor: pointer;
117
118 &:hover {
119 border: 1px solid $light-blue;
120 color: $light-blue;
121 }
93 } 122 }
94 } 123 }
95 124
96 .right-situation { 125 .right-situation {
126 flex: 1;
127 height: 100%;
128
97 ul { 129 ul {
98 padding: 20px; 130 padding: 20px;
99 @include flex; 131 @include flex;
...@@ -108,12 +140,16 @@ ...@@ -108,12 +140,16 @@
108 @include flex; 140 @include flex;
109 justify-content: space-between; 141 justify-content: space-between;
110 margin-left: 20px; 142 margin-left: 20px;
143 cursor: pointer;
111 144
112 p { 145 p {
113 @include flex-center; 146 @include flex-center;
114 } 147 }
115 148
116 149 &:hover {
150 border: 1px solid $light-blue;
151 color: $light-blue;
152 }
117 153
118 p:nth-child(1) { 154 p:nth-child(1) {
119 flex: 1; 155 flex: 1;
...@@ -134,5 +170,11 @@ ...@@ -134,5 +170,11 @@
134 } 170 }
135 } 171 }
136 } 172 }
173
174 .submit-button {
175 padding: 15px 0;
176 text-align: center;
177 background-color: #fff;
178 }
137 } 179 }
138 } 180 }
...\ No newline at end of file ...\ No newline at end of file
......
1 <template> 1 <template>
2 <div class="ywsq"> 2 <div class="ywsq">
3 <div class="ywsq-left"> 3 <div class="ywsq-left">
4 <el-collapse v-model="activeNames" accordion> 4 <p v-for="(item, index) in leftList" @click="handleleftTitle(index)" :key="index"
5 <el-collapse-item :title="item.title" :name="index + 1" v-for="(item, index) in leftList" :key="index"> 5 :class="{ 'active': n == index }">{{ item }}</p>
6 <el-collapse disabled v-model="activeNames">
7 <el-collapse-item title="业务申请" name="1">
6 <ul class="item-list"> 8 <ul class="item-list">
7 <li v-for="(obj, key) in item.list" :key="key" @click="handleList(item.list, obj)" 9 <li v-for="(obj, key) in list" :key="key" @click="handleList(list, obj)" :class="obj.check ? 'active' : ''">
8 :class="obj.check ? 'active' : ''">{{ obj.name }}</li> 10 {{ obj.name }}</li>
9 </ul> 11 </ul>
10 </el-collapse-item> 12 </el-collapse-item>
11 </el-collapse> 13 </el-collapse>
...@@ -13,25 +15,43 @@ ...@@ -13,25 +15,43 @@
13 15
14 <!-- right --> 16 <!-- right -->
15 <div class="ywsq-right"> 17 <div class="ywsq-right">
16 <div class="right-type el-card box-card is-always-shadow"> 18 <div class="right-type el-card box-card is-always-shadow" v-if="n == -1">
17 <div class="right-title">登记类型</div> 19 <div class="right-title">登记类型</div>
18 <ul class="type-content"> 20 <ul class="type-content">
19 <li :class="item.select ? 'cactive' : ''" @click="handleTypeSelect(item)" v-for="(item, index) in typeList" 21 <li :class="item.select ? 'active' : ''" @click="handleTypeSelect(item)" v-for="(item, index) in typeList"
20 :key="index">{{ item.name }}</li> 22 :key="index">{{ item.name }}</li>
21 </ul> 23 </ul>
22 </div> 24 </div>
23 <div class="right-situation el-card box-card is-always-shadow"> 25 <div class="right-situation el-card box-card is-always-shadow">
24 <div class="right-title">业务列表</div> 26 <div v-if="n >= 0">
25 <ul> 27 <div class="right-title">业务列表</div>
26 <li v-for="(item, index) in busList" :key="index"> 28 <ul>
27 <p> 29 <li v-for="(item, index) in busList" :key="index">
28 {{ item.name }} 30 <p>
29 </p> 31 {{ item.name }}
30 <p :class="item.select ? 'cactive' : ''" @click="handleCollection(item)"> 32 </p>
31 <i class="el-icon-star-off" :class="item.select ? 'cactive' : ''"></i> 33 <p :class="item.select ? 'active' : ''" @click="handleCollection(item)">
32 </p> 34 <i class="el-icon-star-off" :class="item.select ? 'active' : ''"></i>
33 </li> 35 </p>
34 </ul> 36 </li>
37 </ul>
38 </div>
39 <div v-if="n == -1">
40 <div class="right-title">登记情形</div>
41 <ul>
42 <li v-for="(item, index) in busList" :key="index">
43 <p>
44 {{ item.name }}
45 </p>
46 <p :class="item.select ? 'active' : ''" @click="handleCollection(item)">
47 <i class="el-icon-star-off" :class="item.select ? 'active' : ''"></i>
48 </p>
49 </li>
50 </ul>
51 </div>
52 </div>
53 <div class="submit-button">
54 <el-button type="primary">选择不动产信息</el-button>
35 </div> 55 </div>
36 </div> 56 </div>
37 </div> 57 </div>
...@@ -40,46 +60,29 @@ ...@@ -40,46 +60,29 @@
40 export default { 60 export default {
41 data () { 61 data () {
42 return { 62 return {
43 activeNames: [1], 63 n: -1,
64 activeNames: ['1'],
44 leftList: [ 65 leftList: [
66 '常办业务', '一并申请', '补申请',
67 ],
68 list: [
69 {
70 name: '国有建设用地使用权',
71 },
45 { 72 {
46 title: '常办业务', 73 name: '国有建设用地使用权/房屋所有权',
47 list: [
48 {
49 name: '国有建设用地使用权',
50 }
51 ]
52 }, 74 },
53 { 75 {
54 title: '一并申请', 76 name: '宅基地使用权',
55 list: [
56 {
57 name: '国有建设用地使用权',
58 }
59 ]
60 }, 77 },
61 { 78 {
62 title: '业务申请', 79 name: '宅基地使用权/房屋所有权',
63 list: [ 80 },
64 { 81 {
65 name: '国有建设用地使用权', 82 name: '集体建设用地使用权',
66 }, 83 },
67 { 84 {
68 name: '国有建设用地使用权/房屋所有权', 85 name: '集体建设用地使用权/房屋所有权',
69 },
70 {
71 name: '宅基地使用权',
72 },
73 {
74 name: '宅基地使用权/房屋所有权',
75 },
76 {
77 name: '集体建设用地使用权',
78 },
79 {
80 name: '集体建设用地使用权/房屋所有权',
81 }
82 ]
83 } 86 }
84 ], 87 ],
85 typeList: [ 88 typeList: [
...@@ -130,10 +133,17 @@ export default { ...@@ -130,10 +133,17 @@ export default {
130 } 133 }
131 }, 134 },
132 methods: { 135 methods: {
136 handleleftTitle (index) {
137 this.n = index
138 this.list.forEach(item => {
139 if (item.check) item.check = false
140 })
141 },
133 handleList (list, obj) { 142 handleList (list, obj) {
134 list.forEach(item => { 143 list.forEach(item => {
135 if (item.check) item.check = false 144 if (item.check) item.check = false
136 }) 145 })
146 this.n = -1
137 this.$set(obj, 'check', true) 147 this.$set(obj, 'check', true)
138 }, 148 },
139 handleCollection (item) { 149 handleCollection (item) {
......