Merge branch 'master' of http://yun.pashanhoo.com:9090/bdc/bdcdj-web
Showing
5 changed files
with
121 additions
and
13 deletions
1 | <template> | 1 | <template> |
2 | <div class='clxx'> | 2 | <div class="clxx"> |
3 | clxxclxxclxxclxxclxxclxx | 3 | <div class="clxx-box"> |
4 | <div class="header"> | ||
5 | <div class="title">{{ title }}</div> | ||
6 | </div> | ||
7 | <div class="img-box"> | ||
8 | <img :src="showImg.imgUrl" alt="" /> | ||
9 | </div> | ||
10 | <div class="img-list"> | ||
11 | <div class="item" v-for="(item, index) in imgList" :key="index"> | ||
12 | <img | ||
13 | :class="showImg.id == item.id ? 'active' : ''" | ||
14 | :src="item.imgUrl" | ||
15 | alt="" | ||
16 | @click="imgClick(item)" | ||
17 | /> | ||
18 | </div> | ||
19 | </div> | ||
20 | <div class="btn-group"> | ||
21 | <el-button>扫描</el-button> | ||
22 | <el-button>上传文件</el-button> | ||
23 | <el-button icon="el-icon-delete">删除</el-button> | ||
24 | </div> | ||
25 | </div> | ||
4 | </div> | 26 | </div> |
5 | </template> | 27 | </template> |
6 | <script> | 28 | <script> |
7 | |||
8 | export default { | 29 | export default { |
9 | /**注册组件*/ | 30 | /**注册组件*/ |
10 | components: {}, | 31 | components: {}, |
11 | data () { | 32 | data() { |
12 | return { | 33 | return { |
13 | 34 | title: "不动产登记申请书 (1/2)", | |
35 | imgList: [ | ||
36 | { | ||
37 | id: "1", | ||
38 | imgUrl: require("../images/1.png"), | ||
39 | }, | ||
40 | { | ||
41 | id: "2", | ||
42 | imgUrl: require("../images/2.png"), | ||
43 | }, | ||
44 | { | ||
45 | id: "3", | ||
46 | imgUrl: require("../images/3.png"), | ||
47 | }, | ||
48 | ], | ||
49 | showImg: { | ||
50 | id: "1", | ||
51 | imgUrl: require("../images/1.png"), | ||
52 | }, | ||
14 | }; | 53 | }; |
15 | }, | 54 | }, |
16 | } | 55 | methods: { |
56 | imgClick(item) { | ||
57 | this.showImg = item; | ||
58 | }, | ||
59 | }, | ||
60 | }; | ||
17 | </script> | 61 | </script> |
18 | <style scoped lang='scss'> | 62 | <style scoped lang='scss'> |
63 | .clxx { | ||
64 | width: 100%; | ||
65 | height: 100%; | ||
66 | &-box { | ||
67 | width: 800px; | ||
68 | height: 800px; | ||
69 | background: #e4e4e4; | ||
70 | margin: 0 auto; | ||
71 | .header { | ||
72 | height: 30px; | ||
73 | background: #fff; | ||
74 | text-align: center; | ||
75 | .title { | ||
76 | height: 28px; | ||
77 | line-height: 28px; | ||
78 | font-size: 13px; | ||
79 | padding: 0 8px; | ||
80 | border: 1px solid #aaa; | ||
81 | display: inline-block; | ||
82 | } | ||
83 | } | ||
84 | .img-box { | ||
85 | width: 800px; | ||
86 | height: 610px; | ||
87 | line-height: 610px; | ||
88 | padding: 5px; | ||
89 | text-align: center; | ||
90 | img { | ||
91 | max-height: 600px; | ||
92 | max-width: 790px; | ||
93 | } | ||
94 | } | ||
95 | .img-list { | ||
96 | width: 100%; | ||
97 | height: 80px; | ||
98 | line-height: 80px; | ||
99 | background: #ccc; | ||
100 | text-align: center; | ||
101 | .item { | ||
102 | display: inline-block; | ||
103 | margin: 10px 5px; | ||
104 | img { | ||
105 | width: 60px; | ||
106 | height: 60px; | ||
107 | cursor: pointer; | ||
108 | } | ||
109 | .active { | ||
110 | border: 1px solid #fff; | ||
111 | } | ||
112 | } | ||
113 | } | ||
114 | .btn-group { | ||
115 | width: 100%; | ||
116 | height: 80px; | ||
117 | line-height: 80px; | ||
118 | background: #fff; | ||
119 | text-align: center; | ||
120 | } | ||
121 | } | ||
122 | } | ||
19 | </style> | 123 | </style> |
... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
src/views/ywbl/fqsq/images/1.png
0 → 100644
2.97 KB
src/views/ywbl/fqsq/images/2.png
0 → 100644
3.31 KB
src/views/ywbl/fqsq/images/3.png
0 → 100644
3.47 KB
... | @@ -65,13 +65,17 @@ class data extends filter { | ... | @@ -65,13 +65,17 @@ class data extends filter { |
65 | prop: "syqqssj", | 65 | prop: "syqqssj", |
66 | label: "使用权起始时间", | 66 | label: "使用权起始时间", |
67 | }, | 67 | }, |
68 | { | 68 | // { |
69 | prop: "syqjssj", | 69 | // prop: "syqjssj", |
70 | label: "使用权结束时间", | 70 | // label: "使用权结束时间", |
71 | }, | 71 | // }, |
72 | { | 72 | // { |
73 | prop: "tdsyqx", | 73 | // prop: "tdsyqx", |
74 | label: "土地使用期限", | 74 | // label: "土地使用期限", |
75 | // }, | ||
76 | { | ||
77 | prop: "syqqzsj", | ||
78 | label: "使用权起止时间", | ||
75 | }, | 79 | }, |
76 | { | 80 | { |
77 | prop: "qdjg", | 81 | prop: "qdjg", | ... | ... |
-
Please register or sign in to post a comment