diff --git a/src/assets/images/homestead/farmlandEditSwitch_bg.png b/src/assets/images/homestead/farmlandEditSwitch_bg.png new file mode 100644 index 00000000..71023832 Binary files /dev/null and b/src/assets/images/homestead/farmlandEditSwitch_bg.png differ diff --git a/src/assets/images/homestead/farmlandEditSwitch_close.png b/src/assets/images/homestead/farmlandEditSwitch_close.png new file mode 100644 index 00000000..a615d60f Binary files /dev/null and b/src/assets/images/homestead/farmlandEditSwitch_close.png differ diff --git a/src/assets/images/homestead/nd.png b/src/assets/images/homestead/nd.png new file mode 100644 index 00000000..3c1716b5 Binary files /dev/null and b/src/assets/images/homestead/nd.png differ diff --git a/src/assets/images/homestead/nf.png b/src/assets/images/homestead/nf.png new file mode 100644 index 00000000..19177344 Binary files /dev/null and b/src/assets/images/homestead/nf.png differ diff --git a/src/assets/images/homestead/operation/positioning.png b/src/assets/images/homestead/operation/positioning.png new file mode 100644 index 00000000..7525b8ae Binary files /dev/null and b/src/assets/images/homestead/operation/positioning.png differ diff --git a/src/assets/images/homestead/operation/positioning_active.png b/src/assets/images/homestead/operation/positioning_active.png new file mode 100644 index 00000000..7d58e06e Binary files /dev/null and b/src/assets/images/homestead/operation/positioning_active.png differ diff --git a/src/assets/images/homestead/operation/scale.png b/src/assets/images/homestead/operation/scale.png new file mode 100644 index 00000000..2f6955e2 Binary files /dev/null and b/src/assets/images/homestead/operation/scale.png differ diff --git a/src/assets/images/homestead/operation/scale_active.png b/src/assets/images/homestead/operation/scale_active.png new file mode 100644 index 00000000..349b4d11 Binary files /dev/null and b/src/assets/images/homestead/operation/scale_active.png differ diff --git a/src/assets/images/homestead/operation/spacing.png b/src/assets/images/homestead/operation/spacing.png new file mode 100644 index 00000000..ec873bba Binary files /dev/null and b/src/assets/images/homestead/operation/spacing.png differ diff --git a/src/assets/images/homestead/operation/spacing_active.png b/src/assets/images/homestead/operation/spacing_active.png new file mode 100644 index 00000000..33cb9088 Binary files /dev/null and b/src/assets/images/homestead/operation/spacing_active.png differ diff --git a/src/assets/images/homestead/operation/tensile.png b/src/assets/images/homestead/operation/tensile.png new file mode 100644 index 00000000..66f405b8 Binary files /dev/null and b/src/assets/images/homestead/operation/tensile.png differ diff --git a/src/assets/images/homestead/operation/tensile_active.png b/src/assets/images/homestead/operation/tensile_active.png new file mode 100644 index 00000000..b225ca2f Binary files /dev/null and b/src/assets/images/homestead/operation/tensile_active.png differ diff --git a/src/assets/images/homestead/positioning_icon.png b/src/assets/images/homestead/positioning_icon.png new file mode 100644 index 00000000..5d301485 Binary files /dev/null and b/src/assets/images/homestead/positioning_icon.png differ diff --git a/src/assets/images/homestead/searchBar_close.png b/src/assets/images/homestead/searchBar_close.png new file mode 100644 index 00000000..7f3789cb Binary files /dev/null and b/src/assets/images/homestead/searchBar_close.png differ diff --git a/src/assets/images/homestead/searchBar_close_gray.png b/src/assets/images/homestead/searchBar_close_gray.png new file mode 100644 index 00000000..696e65c9 Binary files /dev/null and b/src/assets/images/homestead/searchBar_close_gray.png differ diff --git a/src/assets/images/homestead/searchBar_save.png b/src/assets/images/homestead/searchBar_save.png new file mode 100644 index 00000000..9b6ba128 Binary files /dev/null and b/src/assets/images/homestead/searchBar_save.png differ diff --git a/src/assets/images/homestead/selectionNext_icon.png b/src/assets/images/homestead/selectionNext_icon.png new file mode 100644 index 00000000..3aaea26a Binary files /dev/null and b/src/assets/images/homestead/selectionNext_icon.png differ diff --git a/src/assets/images/homestead/selection_icon.png b/src/assets/images/homestead/selection_icon.png new file mode 100644 index 00000000..84a0f40e Binary files /dev/null and b/src/assets/images/homestead/selection_icon.png differ diff --git a/src/views/homestead/index.vue b/src/views/homestead/index.vue index 804c3f7f..f6838a8a 100644 --- a/src/views/homestead/index.vue +++ b/src/views/homestead/index.vue @@ -1,6 +1,46 @@ @@ -317,6 +515,7 @@ export default { message: "", showPicker: false, columns: ["杭州", "宁波", "温州", "嘉兴", "湖州"], + fileList: [], }; }, mounted() {}, @@ -333,6 +532,138 @@ export default { width: 100vw; height: 100vh; position: relative; + .rightIcon_wrap { + position: absolute; + right: 16px; + bottom: 160px; + .selectionIcon_wrap { + width: 74px; + background: #fff; + border-radius: 10px; + padding: 14px 0; + + .icon { + width: 38px; + height: 38px; + background: url("../../assets/images/homestead/selection_icon.png") + no-repeat; + background-size: 100% 100%; + margin: 0 auto 4px; + } + .text { + font-size: 24px; + text-align: center; + } + } + .positioning_wrap { + width: 74px; + background: #fff; + margin-bottom: 16px; + border-radius: 10px; + height: 74px; + display: flex; + justify-content: center; /* 相对父元素水平居中 */ + align-items: center; /* 子元素相对父元素垂直居中*/ + .icon { + width: 38px; + height: 38px; + background: url("../../assets/images/homestead/positioning_icon.png") + no-repeat; + background-size: 100% 100%; + margin: 0 auto; + } + } + } + .homesteadList_wrap { + display: none; + // display: flex; + position: absolute; + right: 0; + top: 20px; + bottom: 160px; + width: 536px; + background: #fff; + z-index: 999; + border-top-left-radius: 15px; + border-bottom-left-radius: 15px; + + flex-direction: column; + + .title_m { + color: #333; + line-height: 36px; + padding: 20px 40px 32px; + .name { + font-size: 40px; + line-height: 42px; + height: 42px; + } + .more_icon { + width: 38px; + height: 38px; + background: url("../../assets/images/homestead/selectionNext_icon.png") + no-repeat; + float: right; + margin-top: 2px; + } + } + + .main_m { + overflow-y: auto; + padding: 0 40px; + // height: 300px; + flex: 1; + .flex_block { + height: 70px; + display: flex; + // justify-content: center; /* 相对父元素水平居中 */ + align-items: center; /* 子元素相对父元素垂直居中 */ + .name_text { + font-size: 34px; + flex: 1; + } + .square_text { + font-size: 34px; + flex: 0.8; + } + .operation_mian { + flex: 0 0 150px; + .describe { + font-size: 20px; + padding: 6px 12px; + float: right; + color: #fff; + &.yph { + background: #3cbf5b; + border-radius: 30px; + } + } + } + } + } + .footerBtn_wrap { + flex: 0 0 90px; + display: flex; + justify-content: center; /* 相对父元素水平居中 */ + align-items: center; /* 子元素相对父元素垂直居中 */ + + .options { + flex: 1; + font-size: 38px; + display: flex; + justify-content: center; /* 相对父元素水平居中 */ + align-items: center; /* 子元素相对父元素垂直居中 */ + height: 90px; + &:first-child { + border-bottom-left-radius: 15px; + } + &.active { + background: #3cbf5b; + color: #fff; + } + } + } + } .map_area { width: 100vw; height: 100vh; @@ -403,8 +734,8 @@ export default { } } .searchBar_wrap { - display: none; - // display: flex; + // display: none; + display: flex; position: fixed; bottom: 0; left: 0; @@ -413,6 +744,117 @@ export default { background: #fff; border-top-left-radius: 15px; border-top-right-radius: 15px; + .actionBar_wrap { + display: flex; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + + background: #fff; + border-top-left-radius: 15px; + border-top-right-radius: 15px; + .m_list { + flex: 1; + display: flex; + justify-content: center; /* 相对父元素水平居中 */ + align-items: center; /* 子元素相对父元素垂直居中 */ + + .tensile, + .positioning, + .spacing, + .scale { + width: 76px; + height: 72px; + background: #ffffff; + border-radius: 8px; + box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.16); + .icon { + width: 76px; + height: 72px; + } + &.active { + background: #333; + &.tensile { + .icon { + background: url("../../assets/images/homestead/operation/tensile_active.png") + center center no-repeat; + background-size: 38px 50px; + } + } + &.positioning { + .icon { + background: url("../../assets/images/homestead/operation/positioning_active.png") + center center no-repeat; + background-size: 38px 48px; + } + } + &.spacing { + .icon { + background: url("../../assets/images/homestead/operation/spacing_active.png") + center center no-repeat; + background-size: 46px 46px; + } + } + &.scale { + .icon { + background: url("../../assets/images/homestead/operation/scale_active.png") + center center no-repeat; + background-size: 48px 48px; + } + } + } + } + .tensile { + .icon { + background: url("../../assets/images/homestead/operation/tensile.png") + center center no-repeat; + background-size: 38px 50px; + } + } + .positioning { + .icon { + background: url("../../assets/images/homestead/operation/positioning.png") + center center no-repeat; + background-size: 38px 48px; + } + } + .spacing { + .icon { + background: url("../../assets/images/homestead/operation/spacing.png") + center center no-repeat; + background-size: 46px 46px; + } + } + .scale { + .icon { + background: url("../../assets/images/homestead/operation/scale.png") + center center no-repeat; + background-size: 48px 48px; + } + } + .closes { + background: url("../../assets/images/homestead/searchBar_close.png") + no-repeat; + background-size: 100% 100%; + width: 72px; + height: 72px; + &.gray { + background: url("../../assets/images/homestead/searchBar_close_gray.png") + no-repeat; + background-size: 100% 100%; + } + } + .correct { + background: url("../../assets/images/homestead/searchBar_save.png") + no-repeat; + background-size: 100% 100%; + width: 72px; + height: 72px; + } + } + } .searchBar_area { flex: 1; height: 80px; @@ -690,7 +1132,8 @@ export default { } } .landHomesteadEdit_wrap { - display: flex; + display: none; + // display: flex; position: absolute; left: 0; bottom: 0; @@ -700,7 +1143,7 @@ export default { .content_mian { flex: 1; margin: 0 16px; - padding: 28px 40px 28px 40px; + padding: 28px 25px 28px 40px; background: #fff; border-top-left-radius: 15px; border-top-right-radius: 15px; @@ -714,6 +1157,11 @@ export default { align-items: center; /* 子元素相对父元素垂直居中 */ color: #333; } + .flex_main { + height: 890px; + padding-right: 15px; + overflow-y: auto; + } .flex_block { height: 100px; margin-bottom: 20px; @@ -723,6 +1171,12 @@ export default { float: left; flex-direction: column; } + .number_s100 { + width: 100%; + float: left; + display: flex; + flex-direction: column; + } .number_s60 { // flex: 0.6; width: 60%; @@ -805,6 +1259,20 @@ export default { padding-right: 50px; } } + .uploadPicturesFlex_block { + .title_m { + font-size: 28px; + flex: 0 0 50px; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + word-break: break-all; + align-items: center; /* 子元素相对父元素垂直居中 */ + margin-bottom: 20px; + } + .main_m { + } + } } .footer_main { flex: 0 0 120px; @@ -830,6 +1298,89 @@ export default { } } } + .farmlandEditSwitch_wrap { + display: none; + width: 100vw; + height: 100vh; + background: url("../../assets/images/homestead/farmlandEditSwitch_bg.png") + no-repeat; + background-size: 100% 100%; + position: absolute; + left: 0; + top: 0; + z-index: 1001; + .mains { + width: 544px; + height: 480px; + background: #fff; + position: absolute; + left: 50%; + top: 50%; + margin: -272px 0 0 -240px; + z-index: 1002; + border-radius: 30px; + padding: 0 30px; + display: flex; + justify-content: center; /* 相对父元素水平居中 */ + align-items: center; /* 子元素相对父元素垂直居中 */ + .close_btn { + position: absolute; + width: 28px; + height: 28px; + background: url("../../assets/images/homestead/farmlandEditSwitch_close.png") + no-repeat; + background-size: 100% 100%; + right: 40px; + top: 40px; + } + .farmhouse { + flex: 1; + display: flex; + justify-content: center; /* 相对父元素水平居中 */ + align-items: center; /* 子元素相对父元素垂直居中 */ + } + .farmland { + flex: 1; + display: flex; + justify-content: center; /* 相对父元素水平居中 */ + align-items: center; /* 子元素相对父元素垂直居中 */ + } + .farmhouse, + .farmland { + flex-direction: column; + .icons { + width: 146px; + height: 146px; + margin-bottom: 14px; + } + .names { + font-size: 40px; + color: #3cbf5b; + } + } + .farmhouse { + .icons { + background: url("../../assets/images/homestead/nf.png") no-repeat; + background-size: 100% 100%; + } + } + .farmland { + .icons { + background: url("../../assets/images/homestead/nd.png") no-repeat; + background-size: 100% 100%; + } + } + + //
+ //
+ //

农房

+ //
+ //
+ //
+ //

农地

+ //
+ } + } } ::-webkit-scrollbar { @@ -837,23 +1388,23 @@ export default { } ::-webkit-scrollbar:vertical { - width: 8px; - border-radius: 8px; + width: 10px; + border-radius: 10px; } ::-webkit-scrollbar:horizontal { - height: 8px; - border-radius: 8px; + height: 10px; + border-radius: 10px; } ::-webkit-scrollbar-thumb { - background-color: #9f9f9f; - border-radius: 8px; - border: 1px solid #ffffff; + background-color: #eee; + border-radius: 10px; + border: 3px solid #ffffff; } ::-webkit-scrollbar-track { - border-radius: 8px; + border-radius: 10px; background-color: #ffffff; } \ No newline at end of file