Skip to content

bdc / bdcdj-web

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

feat:业务办理

1 parent 998d5e39
Inline Side-by-side
Showing 8 changed files with 246 additions and 44 deletions
...@@ -28,6 +28,7 @@ export default { ...@@ -28,6 +28,7 @@ export default {
28 overflow-x: auto; 28 overflow-x: auto;
29 padding: 15px; 29 padding: 15px;
30 box-sizing: border-box; 30 box-sizing: border-box;
31 background-color: #fefefe;
31 } 32 }
32 } 33 }
33 </style> 34 </style>
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -47,7 +47,6 @@ export default { ...@@ -47,7 +47,6 @@ export default {
47 </script> 47 </script>
48 <style lang="scss" scoped> 48 <style lang="scss" scoped>
49 @import "~@/styles/mixin.scss"; 49 @import "~@/styles/mixin.scss";
50 @import "~@/styles/variables.scss";
51 50
52 .app-wrapper { 51 .app-wrapper {
53 @include clearfix; 52 @include clearfix;
......
...@@ -125,6 +125,10 @@ a:hover { ...@@ -125,6 +125,10 @@ a:hover {
125 text-decoration: none; 125 text-decoration: none;
126 } 126 }
127 127
128 ul li {
129 list-style: none;
130 }
131
128 div:focus { 132 div:focus {
129 outline: none; 133 outline: none;
130 } 134 }
......
1 //*****start*通用查询条件，列表样式******// 1 //*****start*通用查询条件，列表样式******//
2 .from-clues { 2 .from-clues {
3 padding: 10px; 3 padding: 10px;
4 background: #f7f7f7; 4 background: #f7f7f7;
5 min-width: 1280px; 5 min-width: 1280px;
6 height: 100%; 6 height: 100%;
7 width: 100%; 7 width: 100%;
8 &-header {
9 width: 100%;
10 padding: 20px 20px 0 20px;
11 box-sizing: border-box;
12 background: #FFFFFF;
13 border-radius: 8px;
14 border: 1px solid #e8edf3;
15 }
16 &-content {
17 width: 100%;
18 padding: 20px;
19 box-sizing: border-box;
20 background: #FFFFFF;
21 border-radius: 8px;
22 margin-top: 10px;
23 border: 1px solid #e8edf3;
24 }
25 .el-form--inline .el-form-item {
26 width: auto;
27 margin-right: 0px;
28 .el-form-item__content {
29 width: auto;
30 }
31 }
32 }
33 //*****end*通用查询条件，列表样式******//
34 8
35 .width200px{ 9 &-header {
36 width: 200px; 10 width: 100%;
37 } 11 padding: 20px 20px 0 20px;
12 box-sizing: border-box;
13 background: #FFFFFF;
14 border-radius: 8px;
15 border: 1px solid #e8edf3;
16 }
38 17
18 &-content {
19 width: 100%;
20 padding: 20px;
21 box-sizing: border-box;
22 background: #FFFFFF;
23 border-radius: 8px;
24 margin-top: 10px;
25 border: 1px solid #e8edf3;
26 }
27
28 .el-form--inline .el-form-item {
29 width: auto;
30 margin-right: 0px;
31
32 .el-form-item__content {
33 width: auto;
34 }
35 }
36 }
...\ No newline at end of file ...\ No newline at end of file
......
1 // base color 1 // base color
2 $blue:#324157; 2 $blue:#324157;
3 $light-blue:#3A71A8; 3 $light-blue:#0F93F6;
4 $red:#C03639; 4 $red:#C03639;
5 $pink: #E65D6E; 5 $pink: #E65D6E;
6 $green: #30B08F; 6 $green: #30B08F;
...@@ -22,6 +22,9 @@ $subMenuHover:#2e69ca; ...@@ -22,6 +22,9 @@ $subMenuHover:#2e69ca;
22 $sideBarWidth: 170px; 22 $sideBarWidth: 170px;
23 $sideBarFontSize:15px; 23 $sideBarFontSize:15px;
24 24
25 // border颜色
26 $borderColor: #EBEEF5;
27
25 // the :export directive is the magic sauce for webpack 28 // the :export directive is the magic sauce for webpack
26 // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass 29 // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
27 :export { 30 :export {
...@@ -34,4 +37,5 @@ $sideBarFontSize:15px; ...@@ -34,4 +37,5 @@ $sideBarFontSize:15px;
34 subMenuHover: $subMenuHover; 37 subMenuHover: $subMenuHover;
35 sideBarWidth: $sideBarWidth; 38 sideBarWidth: $sideBarWidth;
36 sideBarFontSize: $sideBarFontSize; 39 sideBarFontSize: $sideBarFontSize;
40 borderColor: $borderColor;
37 } 41 }
...\ No newline at end of file ...\ No newline at end of file
......
1 .ywsq {
2 display: flex;
3
4 /deep/.el-card__body {
5 padding: 0 !important;
6 }
7
8 .ywsq-left {
9 width: 25%;
10
11 .box-card {
12 margin-bottom: 20px;
13 cursor: pointer;
14 }
15
16 .item-title {
17 font-size: 18px;
18 font-weight: 700;
19 padding: 20px;
20
21 &:hover {
22 background-color: $light-blue;
23 color: $menuText;
24 }
25 }
26
27 .item-list {
28 padding: 0 20px 25px 20px;
29 margin-top: -5px;
30
31 .active {
32 background-color: $light-blue;
33 color: $menuText;
34 }
35
36 li {
37 line-height: 36px;
38 background-color: rgb(235, 235, 235);
39 margin-top: 10px;
40 padding-left: 10px;
41 border-radius: 2px;
42 box-sizing: border-box;
43 border: 1px solid rgb(235, 235, 235);
44
45 &:hover {
46 background-color: $light-blue;
47 color: $menuText;
48 }
49 }
50 }
51 }
52
53 .ywsq-right {
54 width: 65%;
55 margin-left: 30px;
56
57 .right-title {
58 font-size: 18px;
59 font-weight: 700;
60 padding: 20px;
61 border-bottom: 1px solid $borderColor;
62
63 .type-content {
64 padding: 20px;
65 @include flex;
66 }
67 }
68 }
69 }
...\ No newline at end of file ...\ No newline at end of file
1 <template> 1 <template>
2 <div> 2 <div class="ywsq">
3 22222222222222 3 <div class="ywsq-left">
4 <el-card class="box-card" v-for="(item, index) in leftList" :key="index">
5 <div class="item-title" @click="handleTitle(item)">{{ item.title }}</div>
6 <el-collapse-transition>
7 <ul class="item-list" v-show="item.open">
8 <li v-for="(obj, key) in item.list" :key="key" @click="handleList(item.list, obj)"
9 :class="obj.select ? 'active' : ''">{{ obj.name }}</li>
10 </ul>
11 </el-collapse-transition>
12 </el-card>
13 </div>
14
15 <!-- right -->
16 <div class="ywsq-right">
17 <div class="right-type el-card box-card is-always-shadow">
18 <div class="right-title">登记类型</div>
19 <ul class="type-content">
20 <li v-for="(item, index) in typeList" :key="index">{{ item.name }}</li>
21 </ul>
22 </div>
23 <div class="right-situation el-card box-card is-always-shadow">
24 <div class="right-title">登记情形</div>
25 </div>
26 </div>
4 </div> 27 </div>
5 </template> 28 </template>
6 <script> 29 <script>
7 export default { 30 export default {
8 components: {},
9 props: {},
10 name: '该组件名称',
11 data () { 31 data () {
12 return { 32 return {
13 33 leftList: [
14 }; 34 {
35 title: '常办业务',
36 open: true,
37 list: [
38 {
39 name: '国有建设用地使用权',
40 select: false
41 }
42 ]
43 },
44 {
45 title: '一并申请',
46 open: false,
47 list: [
48 {
49 name: '国有建设用地使用权',
50 select: false
51 },
52 {
53 name: '国有建设用地使用权/房屋所有权',
54 select: false
55 }
56 ]
57 },
58 {
59 title: '业务申请',
60 open: false,
61 list: [
62 {
63 name: '国有建设用地使用权',
64 select: false
65 },
66 {
67 name: '国有建设用地使用权/房屋所有权',
68 select: false
69 },
70 {
71 name: '宅基地使用权',
72 select: false
73 },
74 {
75 name: '宅基地使用权/房屋所有权',
76 select: false
77 },
78 {
79 name: '集体建设用地使用权',
80 select: false
81 },
82 {
83 name: '集体建设用地使用权/房屋所有权',
84 select: false
85 }
86 ]
87 }
88 ],
89 typeList: [
90 {
91 name: '首次登记',
92 },
93 {
94 name: '转移登记',
95 },
96 {
97 name: '变更登记',
98 },
99 {
100 name: '注销登记'
101 }
102 ],
103 situationList: [
104 {
105 name: '国有建设用地使用权 || 首次登记+ 以出让方式取得'
106 },
107 {
108 name: '国有建设用地使用权 || 首次登记+ 以出让方式取得'
109 },
110 {
111 name: '国有建设用地使用权 || 首次登记+ 以出让方式取得'
112 },
113 {
114 name: '国有建设用地使用权 || 首次登记+ 以出让方式取得'
115 },
116 {
117 name: '国有建设用地使用权 || 首次登记+ 以出让方式取得'
118 }
119 ]
120 }
121 },
122 methods: {
123 handleList (list, obj) {
124 list.forEach(item => {
125 item.select = false
126 });
127 obj.select = true
128 },
129 handleTitle (obj) {
130 this.leftList.forEach(item => {
131 item.open = false
132 })
133 obj.open = true
134 },
15 } 135 }
16 } 136 }
17 </script> 137 </script>
18 <style scoped lang='scss'> 138 <style scoped lang='scss'>
139 @import "~@/styles/mixin.scss";
140 @import './index.scss';
19 </style> 141 </style>
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -49,7 +49,12 @@ module.exports = { ...@@ -49,7 +49,12 @@ module.exports = {
49 css: { 49 css: {
50 extract: true, // 是否使用css分离插件 ExtractTextPlugin 50 extract: true, // 是否使用css分离插件 ExtractTextPlugin
51 sourceMap: false, // 开启 CSS source maps? 51 sourceMap: false, // 开启 CSS source maps?
52 modules: false // 启用 CSS modules for all css / pre-processor files. 52 loaderOptions: {
53 sass: {
54 prependData: `@import "@/styles/variables.scss";`
55 }
56 },
57 modules: false,// 启用 CSS modules for all css / pre-processor files.
53 }, 58 },
54 // configureWebpack通过操作对象的形式，来修改默认的webpack配置 59 // configureWebpack通过操作对象的形式，来修改默认的webpack配置
55 configureWebpack: { 60 configureWebpack: {
......