Skip to content

bdc / bdcdj-web

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

feat:首页开发完成

1 parent 116338f0
Inline Side-by-side
Showing 2 changed files with 105 additions and 28 deletions
...@@ -35,6 +35,7 @@ ...@@ -35,6 +35,7 @@
35 } 35 }
36 36
37 li { 37 li {
38 cursor: pointer;
38 line-height: 36px; 39 line-height: 36px;
39 background-color: rgb(235, 235, 235); 40 background-color: rgb(235, 235, 235);
40 margin-top: 10px; 41 margin-top: 10px;
...@@ -42,6 +43,7 @@ ...@@ -42,6 +43,7 @@
42 border-radius: 2px; 43 border-radius: 2px;
43 box-sizing: border-box; 44 box-sizing: border-box;
44 border: 1px solid rgb(235, 235, 235); 45 border: 1px solid rgb(235, 235, 235);
46 transition: all 0.3s;
45 47
46 &:hover { 48 &:hover {
47 background-color: $light-blue; 49 background-color: $light-blue;
...@@ -52,8 +54,12 @@ ...@@ -52,8 +54,12 @@
52 } 54 }
53 55
54 .ywsq-right { 56 .ywsq-right {
55 width: calc(75% - 20px); 57 width: calc(75% - 10px);
56 margin-left: 20px; 58 margin-left: 10px;
59
60 .right-type {
61 margin-bottom: 20px;
62 }
57 63
58 .right-title { 64 .right-title {
59 font-size: 18px; 65 font-size: 18px;
...@@ -61,9 +67,70 @@ ...@@ -61,9 +67,70 @@
61 padding: 20px; 67 padding: 20px;
62 border-bottom: 1px solid $borderColor; 68 border-bottom: 1px solid $borderColor;
63 69
64 .type-content { 70 }
71
72 .cactive {
73 background-color: $green;
74 color: $menuText;
75 }
76
77 .type-content {
78 @include flex;
79 justify-content: space-between;
80 padding: 0 20px;
81 margin: 50px 0;
82
83 li {
84 width: 23.5%;
85 height: 50px;
86 line-height: 50px;
87 border: 1px solid $borderColor;
88 border-radius: 5px;
89 box-sizing: border-box;
90 padding-left: 10px;
91 cursor: pointer;
92 transition: all 0.3s;
93 }
94 }
95
96 .right-situation {
97 ul {
65 padding: 20px; 98 padding: 20px;
66 @include flex; 99 @include flex;
100 flex-wrap: wrap;
101 margin-left: -20px;
102
103 li {
104 width: 31%;
105 height: 50px;
106 border: 1px solid $borderColor;
107 @include flex;
108 justify-content: space-between;
109 margin-left: 20px;
110
111 p {
112 @include flex-center;
113 }
114
115
116
117 p:nth-child(1) {
118 flex: 1;
119 width: 100%;
120 padding: 3px;
121 }
122
123 p:nth-child(2) {
124 width: 50px;
125 height: 50px;
126 border-left: 1px solid $borderColor;
127 cursor: pointer;
128 }
129
130 i {
131 font-size: 24px;
132 }
133 }
67 } 134 }
68 } 135 }
69 } 136 }
......
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
5 <el-collapse-item :title="item.title" :name="index + 1" v-for="(item, index) in leftList" :key="index"> 5 <el-collapse-item :title="item.title" :name="index + 1" v-for="(item, index) in leftList" :key="index">
6 <ul class="item-list"> 6 <ul class="item-list">
7 <li v-for="(obj, key) in item.list" :key="key" @click="handleList(item.list, obj)" 7 <li v-for="(obj, key) in item.list" :key="key" @click="handleList(item.list, obj)"
8 :class="obj.select ? 'active' : ''">{{ obj.name }}</li> 8 :class="obj.check ? 'active' : ''">{{ obj.name }}</li>
9 </ul> 9 </ul>
10 </el-collapse-item> 10 </el-collapse-item>
11 </el-collapse> 11 </el-collapse>
...@@ -16,15 +16,20 @@ ...@@ -16,15 +16,20 @@
16 <div class="right-type el-card box-card is-always-shadow"> 16 <div class="right-type el-card box-card is-always-shadow">
17 <div class="right-title">登记类型</div> 17 <div class="right-title">登记类型</div>
18 <ul class="type-content"> 18 <ul class="type-content">
19 <li v-for="(item, index) in typeList" :key="index">{{ item.name }}</li> 19 <li :class="item.select ? 'cactive' : ''" @click="handleTypeSelect(item)" v-for="(item, index) in typeList"
20 :key="index">{{ item.name }}</li>
20 </ul> 21 </ul>
21 </div> 22 </div>
22 <div class="right-situation el-card box-card is-always-shadow"> 23 <div class="right-situation el-card box-card is-always-shadow">
23 <div class="right-title">业务列表</div> 24 <div class="right-title">业务列表</div>
24 <ul> 25 <ul>
25 <li> 26 <li @click="handleCollection(item)" v-for="(item, index) in busList" :key="index">
26 国有建设用地使用权 || 首次登记+ 以出让方式取得 27 <p>
27 <i class="el-icon-star-off"></i> 28 {{ item.name }}
29 </p>
30 <p :class="item.select ? 'cactive' : ''">
31 <i class="el-icon-star-off" :class="item.select ? 'cactive' : ''"></i>
32 </p>
28 </li> 33 </li>
29 </ul> 34 </ul>
30 </div> 35 </div>
...@@ -42,7 +47,6 @@ export default { ...@@ -42,7 +47,6 @@ export default {
42 list: [ 47 list: [
43 { 48 {
44 name: '国有建设用地使用权', 49 name: '国有建设用地使用权',
45 select: false
46 } 50 }
47 ] 51 ]
48 }, 52 },
...@@ -51,11 +55,6 @@ export default { ...@@ -51,11 +55,6 @@ export default {
51 list: [ 55 list: [
52 { 56 {
53 name: '国有建设用地使用权', 57 name: '国有建设用地使用权',
54 select: false
55 },
56 {
57 name: '国有建设用地使用权/房屋所有权',
58 select: false
59 } 58 }
60 ] 59 ]
61 }, 60 },
...@@ -64,27 +63,21 @@ export default { ...@@ -64,27 +63,21 @@ export default {
64 list: [ 63 list: [
65 { 64 {
66 name: '国有建设用地使用权', 65 name: '国有建设用地使用权',
67 select: false
68 }, 66 },
69 { 67 {
70 name: '国有建设用地使用权/房屋所有权', 68 name: '国有建设用地使用权/房屋所有权',
71 select: false
72 }, 69 },
73 { 70 {
74 name: '宅基地使用权', 71 name: '宅基地使用权',
75 select: false
76 }, 72 },
77 { 73 {
78 name: '宅基地使用权/房屋所有权', 74 name: '宅基地使用权/房屋所有权',
79 select: false
80 }, 75 },
81 { 76 {
82 name: '集体建设用地使用权', 77 name: '集体建设用地使用权',
83 select: false
84 }, 78 },
85 { 79 {
86 name: '集体建设用地使用权/房屋所有权', 80 name: '集体建设用地使用权/房屋所有权',
87 select: false
88 } 81 }
89 ] 82 ]
90 } 83 }
...@@ -119,22 +112,39 @@ export default { ...@@ -119,22 +112,39 @@ export default {
119 { 112 {
120 name: '国有建设用地使用权 || 首次登记+ 以出让方式取得' 113 name: '国有建设用地使用权 || 首次登记+ 以出让方式取得'
121 } 114 }
115 ],
116 busList: [
117 {
118 name: '国有建设用地使用权 || 首次登记+ 以出让方式取得',
119 select: false
120 },
121 {
122 name: '国有建设用地使用权 || 首次登记+ 以出让方式取得',
123 select: false
124 },
125 {
126 name: '国有建设用地使用权 || 首次登记+ 以出让方式取得',
127 select: false
128 }
122 ] 129 ]
123 } 130 }
124 }, 131 },
125 methods: { 132 methods: {
126 handleList (list, obj) { 133 handleList (list, obj) {
127 list.forEach(item => { 134 list.forEach(item => {
128 item.select = false 135 if (item.check) item.check = false
129 });
130 obj.select = true
131 },
132 handleTitle (obj) {
133 this.leftList.forEach(item => {
134 item.open = false
135 }) 136 })
136 obj.open = true 137 this.$set(obj, 'check', true)
137 }, 138 },
139 handleCollection (item) {
140 item.select = !item.select
141 },
142 handleTypeSelect (item) {
143 this.typeList.forEach(item => {
144 if (item.select) item.select = false
145 })
146 this.$set(item, 'select', true)
147 }
138 } 148 }
139 } 149 }
140 </script> 150 </script>
......