zhangzl
/
nsgk_mobile
2
0
Fork 0
Código Incidencias 0 Pull Requests 0 Lanzamientos 0 Wiki Actividad
Explorar el Código

宅基地

wulanhaote
liuminjian hace 3 años
padre
2d5580bb1c
commit
8a1d680f32
Se han modificado 3 ficheros con 331 adiciones y 4 borrados
Dividir vista
Opciones de diferencias
Mostrar estadísticas Descargar archivo de parche Descargar archivo de diferencias
  1. +1
    -1
      src/permission.js
  2. +12
    -3
      src/router/index.js
  3. +318
    -0
      src/views/homestead/index.vue

+ 1
- 1
src/permission.js Ver fichero

@@ -7,7 +7,7 @@ import { getToken } from '@/utils/auth'
NProgress.configure({ showSpinner: false })

const whiteList = ['/index', '/login', '/auth-redirect', '/bind', '/register', '/news/index', '/notice/index', '/supply/index'
, '/interaction/index', '/register/index', '/register/registerType', '/register/userRegister', '/register/companyRegister', '/homestead/login']
, '/interaction/index', '/register/index', '/register/registerType', '/register/userRegister', '/register/companyRegister', '/homestead/login', '/homestead/index']

router.beforeEach((to, from, next) => {
NProgress.start()


+ 12
- 3
src/router/index.js Ver fichero

@@ -320,7 +320,18 @@ export const constantRoutes = [
hidden: true,
},
component: (resolve) => require(['@/views/user/supply/supplyAdd'], resolve)
}, {
},
//两清三化宅基地
{
path: '/homestead/index',
name: 'homesteadIndex',
meta: {
title: '两清三化宅基地',
hidden: true,
},
component: (resolve) => require(['@/views/homestead/index'], resolve)
},
{
path: '/homestead/login',
name: 'homesteadLogin',
meta: {
@@ -328,8 +339,6 @@ export const constantRoutes = [
hidden: true,
},
component: (resolve) => require(['@/views/homestead/login'], resolve)


}




+ 318
- 0
src/views/homestead/index.vue Ver fichero

@@ -0,0 +1,318 @@
<template>
<div class="app-container" @touchmove.prevent>
<div class="map_area"></div>
<!--选择地址-->
<div class="address_wrap">
<div class="address_item">
<div class="portrait"></div>
<div class="name">羊亭镇</div>

<div class="address_suspension">
<div class="address_suspension_scroll">
<div class="items">全部</div>
<div class="items">北上夼</div>
<div class="items">大北山</div>
<div class="items">南郊村</div>
<div class="items">上路村</div>
<div class="items">下路村</div>
<div class="items">南郊村</div>
<div class="items">上路村</div>
<div class="items">下路村</div>
<div class="items">南郊村</div>
<div class="items">上路村</div>
<div class="items">下路村</div>
<div class="items">南郊村</div>
<div class="items">上路村</div>
<div class="items">下路村</div>
</div>
</div>
</div>
<div class="address_item">
<div class="portrait"></div>
<div class="name">南郊村南郊村</div>
</div>
<div class="address_item more">
<div class="portrait"></div>
<div class="name"></div>
</div>
</div>

<!--搜索栏目-->
<div class="searchBar_wrap">
<div class="searchBar_area">
<div class="bar_ipt">
<input type="text" placeholder="请输入宗地或权利人信息" />
</div>
<div class="bar_text">搜索</div>
</div>
<div class="searchBar_more"></div>
</div>

<!--点击房地-显示的搜索--->
<div class="landHomestead_wrap">
<div class="landHomestead_search">
<div class="bar_ipt">
<input type="text" placeholder="请输入宗地或权利人信息" />
</div>
<div class="bar_text">搜索</div>
</div>
<div class="landHomestead_body">
<!--1--->
<div class="body_flex">
<div class="attribute">
<div class="names">孙全礼</div>
<div class="address">南郊村东二街30号</div>
<div class="nature">性质：农村宅基地</div>
</div>
<div class="distance">
<div class="size">103</div>
<div class="probably">大约120㎡ </div>
</div>
<div class="others">
<div class="information"></div>
<div class="editor"></div>
</div>
</div>
</div>
</div>
</div>
</template>

<script>
export default {
name: "homesteadLogin",
data() {
return {
message: "",
};
},
mounted() {},
methods: {},
};
</script>
<style scoped lang="scss">
.app-container {
width: 100vw;
height: 100vh;
position: relative;
.map_area{
width: 100vw;
height: 100vh;
background: #ddd;
position: absolute;
left: 0;
top: 0;
}
.address_wrap{
position:fixed;
z-index: 9;
top: 24px;
left: 16px;
display: flex;
.address_item{
display: flex;
flex-direction: column;
margin-right: 8px;
justify-content: center; /* 相对父元素水平居中 */
align-items: center; /* 子元素相对父元素垂直居中 */
position: relative;
.portrait{
width: 76px;
height: 76px;
background:#000;
border-radius: 50%;
margin-bottom: 20px;
}
.name{
font-size: 14px;
background: #fff;
padding:2px 6px;
border-radius: 8px;
}
&.more{
.portrait{
width: 40px;
background: none;
}
.name{
background: #fff;
width: 40px;
height: 40px;
padding:0;
}
}
.address_suspension{
display: none;
position: absolute;
left: calc(100% + 8px);
top: 100px;
z-index: 10;
padding:10px 8px 10px 15px;
background: #fff;
border-radius: 10px;
width: auto;
.address_suspension_scroll{
height: 200px;
overflow-y:auto;
padding-right: 8px;
}
.items{
white-space: nowrap
}
}
}
}
.searchBar_wrap{
display: none;
// display: flex;
position:fixed;
bottom: 0;
left: 0;
width: 100%;
padding:28px 16px;
background: #fff;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
.searchBar_area{
flex: 1;
height: 80px;
background: #f1f1f1;
border: 1px solid #dfdfdf;
border-radius: 10px;
padding: 0 28px;
display: flex;
.bar_ipt{
flex: 1;
input{
width: 100%;
height: 100%;
background:none;
border:0 none;
font-size: 32px;
}
}
.bar_text{
flex: 0 0 80px;
font-size: 32px;
color: #333333;
font-family: PingFang SC, PingFang SC-Regular;
font-weight: 400;
display: flex;
justify-content: center; /* 相对父元素水平居中 */
align-items: center; /* 子元素相对父元素垂直居中 */
}
}
.searchBar_more{
flex: 0 0 80px;
background: #333;
margin-left: 18px;
}
}
.landHomestead_wrap{
position:fixed;
bottom: 0;
left: 0;
width: 100%;
padding: 0 16px;
.landHomestead_search{
height: 80px;
background: #f1f1f1;
border: 1px solid #dfdfdf;
border-radius: 10px;
padding: 0 28px;
display: flex;
margin-bottom: 10px;
.bar_ipt{
flex: 1;
input{
width: 100%;
height: 100%;
background:none;
border:0 none;
font-size: 32px;
}
}
.bar_text{
flex: 0 0 80px;
font-size: 32px;
color: #333333;
font-family: PingFang SC, PingFang SC-Regular;
font-weight: 400;
display: flex;
justify-content: center; /* 相对父元素水平居中 */
align-items: center; /* 子元素相对父元素垂直居中 */
}
}
.landHomestead_body{
background: #fff;
padding:30px 20px;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
position: relative;
.body_flex{
display: flex;
.attribute{
flex: 0.42;
display: flex;
.names{
flex: 0 0 60px;
font-size: 40px;
color: #333333;
}
}
.distance{
flex: 0.29;
}
.others{
flex: 0.29;
}


// <div class="attribute">
// <div class="names">孙全礼</div>
// <div class="address">南郊村东二街30号</div>
// <div class="nature">性质：农村宅基地</div>
// </div>
// <div class="distance">
// <div class="size">103</div>
// <div class="probably">大约120㎡ </div>
// </div>
// <div class="others">
// <div class="information"></div>
// <div class="editor"></div>
// </div>


}
}
}

}


::-webkit-scrollbar {
-webkit-appearance: none;
}
::-webkit-scrollbar:vertical {
width: 8px;
border-radius: 8px;
}
::-webkit-scrollbar:horizontal {
height: 8px;
border-radius: 8px;
}
::-webkit-scrollbar-thumb {
background-color: #9f9f9f;;
border-radius: 8px;
border: 1px solid #ffffff;
}
::-webkit-scrollbar-track {
border-radius: 8px;
background-color: #ffffff;
}
</style>

Escribir Vista previa
Cargando…
Cancelar
Guardar