@@ -142,6 +142,7 @@ const whiteList = [ | |||
'/agriculturalTrusteeship/index', //首页 | |||
'/agriculturalTrusteeship/insuranceList',//保险列表 | |||
'/agriculturalTrusteeship/insuranceProjectList',//保险产品列表 | |||
'/agriculturalTrusteeship/insuranceProjectDetail',//保险产品详情 | |||
] | |||
@@ -4517,6 +4517,24 @@ export const constantRoutes = [ | |||
}, | |||
component: (resolve) => require(['@/views/agriculturalTrusteeship/insurance/insuranceProjectList'], resolve) | |||
}, | |||
{ | |||
path: '/agriculturalTrusteeship/insuranceProjectDetail', | |||
name: 'agriculturalTrusteeshipInsuranceProjectDetail', | |||
meta: { | |||
title: '保险服务', | |||
hidden: true, | |||
}, | |||
component: (resolve) => require(['@/views/agriculturalTrusteeship/insurance/insuranceProjectDetail'], resolve) | |||
}, | |||
{ | |||
path: '/agriculturalTrusteeship/societyList', | |||
name: 'agriculturalTrusteeshipSocietyList', | |||
meta: { | |||
title: '社会化服务', | |||
hidden: true, | |||
}, | |||
component: (resolve) => require(['@/views/agriculturalTrusteeship/society/societyList'], resolve) | |||
}, | |||
]; | |||
@@ -13,7 +13,7 @@ | |||
<!-- 导航开始 --> | |||
<div class="nav"> | |||
<van-grid :column-num="4" :border="false"> | |||
<van-grid-item :to="{name:'lawEnforcementCaseQuery'}"> | |||
<van-grid-item :to="{name:'agriculturalTrusteeshipSocietyList'}"> | |||
<img src="../../../static/images/agriculturalTrusteeship/index/nav_01.png"/> | |||
<p>社会化</p> | |||
</van-grid-item> | |||
@@ -2,7 +2,7 @@ | |||
<div class="home_wrapper"> | |||
<!-- 头部开始 --> | |||
<div class="header"> | |||
<div class="header_left"> | |||
<div class="header_left" @click="onClickLeft"> | |||
<img src="../../../../static/images/agriculturalTrusteeship/return.png"> | |||
<p>保险服务</p> | |||
</div> | |||
@@ -0,0 +1,132 @@ | |||
<template> | |||
<div class="home_wrapper"> | |||
<!-- 头部开始 --> | |||
<div class="header"> | |||
<div class="header_left" @click="onClickLeft"> | |||
<img src="../../../../static/images/agriculturalTrusteeship/return.png"> | |||
</div> | |||
<div class="header_right" @click="onClickLeft"> | |||
<img src="../../../../static/images/agriculturalTrusteeship/share.png"> | |||
</div> | |||
</div> | |||
<!-- 头部结束 --> | |||
<!-- 内容开始 --> | |||
<div class="main"> | |||
<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white"> | |||
<van-swipe-item><img src="../../../../static/images/agriculturalTrusteeship/test2.png"></van-swipe-item> | |||
<van-swipe-item><img src="../../../../static/images/agriculturalTrusteeship/test2.png"></van-swipe-item> | |||
<van-swipe-item><img src="../../../../static/images/agriculturalTrusteeship/test2.png"></van-swipe-item> | |||
<van-swipe-item><img src="../../../../static/images/agriculturalTrusteeship/test2.png"></van-swipe-item> | |||
</van-swipe> | |||
<div class="main_content"> | |||
<p class="tt">农业保险玉米保险30/亩小麦50/亩大豆60/亩</p> | |||
<p class="name">张三社会服务旗舰店</p> | |||
</div> | |||
<div class="main_box"> | |||
<van-cell title="产品类型" :border="false" value="内容" /> | |||
<van-cell title="联系人" :border="false" value="内容" /> | |||
<van-cell title="联系方式" :border="false" value="内容" /> | |||
<van-cell title="产品描述" :border="false" value="内容" /> | |||
<van-cell title="发布日期" :border="false" value="内容" /> | |||
</div> | |||
</div> | |||
<!-- 内容结束 --> | |||
</div> | |||
</template> | |||
<script> | |||
import Cookies from "js-cookie"; | |||
export default { | |||
name: "agriculturalTrusteeshipInsuranceDetail", | |||
data() { | |||
return { | |||
activeKey: 0, | |||
active: 0, | |||
loading: false, | |||
finished: false, | |||
}; | |||
}, | |||
created() { | |||
}, | |||
methods: { | |||
}, | |||
} | |||
</script> | |||
<style scoped lang="scss"> | |||
.home_wrapper{ | |||
} | |||
/*头部*/ | |||
.header{ | |||
display: flex; | |||
align-items: center; | |||
justify-content: space-between; | |||
padding: 2vh 4% 2vh; | |||
position: absolute; | |||
top: 0; | |||
z-index: 99999999; | |||
width: 100%; | |||
.header_left{ | |||
display: flex; | |||
align-items: center; | |||
p{ | |||
font-size: .4rem; | |||
color: #ffffff; | |||
line-height: 1; | |||
margin-left: 10PX; | |||
} | |||
} | |||
.header_right{ | |||
} | |||
} | |||
/* 内容 */ | |||
.main{ | |||
.my-swipe .van-swipe-item { | |||
color: #fff; | |||
font-size: 20px; | |||
text-align: center; | |||
} | |||
.main_content{ | |||
background: #ffffff; | |||
padding: 2vh 4%; | |||
width: 92%; | |||
margin: 0 auto; | |||
border-radius: 10PX; | |||
margin-top: 2vh; | |||
box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16); | |||
.tt{ | |||
font-size: .4rem; | |||
margin-bottom: 10PX; | |||
} | |||
.name{ | |||
color: #4E7FFF; | |||
background: url("../../../../static/images/agriculturalTrusteeship/index/name_icon.png") no-repeat left center; | |||
padding-left: 18PX; | |||
} | |||
} | |||
.main_box{ | |||
width: 92%; | |||
margin: 0 auto; | |||
margin-top: 2vh; | |||
border-radius: 10PX; | |||
box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16); | |||
overflow: hidden; | |||
background-color: #FFF; | |||
padding: 2vh 4%; | |||
/deep/ .van-cell{ | |||
padding: 0; | |||
margin-bottom: 10PX; | |||
&:last-child{ | |||
margin-bottom: 0; | |||
} | |||
} | |||
} | |||
} | |||
</style> |
@@ -2,7 +2,7 @@ | |||
<div class="home_wrapper"> | |||
<!-- 头部开始 --> | |||
<div class="header"> | |||
<div class="header_left"> | |||
<div class="header_left" @click="onClickLeft"> | |||
<img src="../../../../static/images/agriculturalTrusteeship/return.png"> | |||
<p>张三服务合作社</p> | |||
</div> | |||
@@ -23,7 +23,7 @@ | |||
finished-text="没有更多了" | |||
> | |||
<!-- @load="onLoad"--> | |||
<div class="main_content_right_list" v-for="item in 10" :key="item"> | |||
<div class="main_content_right_list" v-for="item in 10" :key="item" @click="$router.push({name:'agriculturalTrusteeshipInsuranceProjectDetail'})"> | |||
<img src="../../../../static/images/agriculturalTrusteeship/index/test.png"> | |||
<div class="main_content_right_list_content"> | |||
<p class="tt">如果只有一行就空着啊啊啊啊啊啊啊啊啊啊啊啊</p> | |||
@@ -31,7 +31,7 @@ | |||
<!-- <p>¥<span>66</span>.00/亩</p>--> | |||
<!-- <p><span>销 600</span><span>分 4.7</span></p>--> | |||
<!-- </div>--> | |||
<p class="name">张三社会服务旗舰店</p> | |||
<p class="name">健康保险</p> | |||
</div> | |||
</div> | |||
</van-list> | |||
@@ -139,6 +139,7 @@ | |||
display: flex; | |||
flex-direction:column; | |||
justify-content: space-between; | |||
align-items: start; | |||
.tt{ | |||
color: #333333; | |||
font-size: .35rem; | |||
@@ -176,9 +177,10 @@ | |||
} | |||
} | |||
.name{ | |||
color: #8F8F8F; | |||
background: url("../../../../static/images/agriculturalTrusteeship/index/name_icon.png") no-repeat left center; | |||
padding-left: 18PX; | |||
color: #497CE8; | |||
background: #E2E9FD; | |||
padding:2PX 5PX; | |||
border-radius: 5PX; | |||
} | |||
} | |||
} | |||
@@ -0,0 +1,268 @@ | |||
<template> | |||
<div class="home_wrapper"> | |||
<!-- 头部开始 --> | |||
<div class="header"> | |||
<div class="header_left" @click="onClickLeft"> | |||
<img src="../../../../static/images/agriculturalTrusteeship/return.png"> | |||
<p>保险服务</p> | |||
</div> | |||
<p class="header_right">河东河西村</p> | |||
</div> | |||
<!-- 头部结束 --> | |||
<!-- 内容开始 --> | |||
<div class="main"> | |||
<van-tabs v-model="active" sticky animated> | |||
<van-tab title="保险公司"> | |||
<div class="search"> | |||
<img src="../../../../static/images/agriculturalTrusteeship/index/search_icon_01.png" /> | |||
<input type="text" placeholder="输入需求进行搜索" /> | |||
<img src="../../../../static/images/agriculturalTrusteeship/index/search_icon_02.png" /> | |||
</div> | |||
<van-list | |||
v-model="loading" | |||
:finished="finished" | |||
finished-text="没有更多了" | |||
> | |||
<div class="content" v-for="item in 10" :key="item" @click="$router.push({name:'agriculturalTrusteeshipInsuranceProjectList'})"> | |||
<p class="content_tt">张三李四合伙开公司有限公司</p> | |||
<div class="content_con"> | |||
<div class="content_con_left"> | |||
<p>60个产品</p> | |||
<p>林巧巧</p> | |||
<p>18765332194</p> | |||
</div> | |||
<div class="content_con_right"> | |||
<img src="../../../../static/images/agriculturalTrusteeship/index/test.png"> | |||
<img src="../../../../static/images/agriculturalTrusteeship/index/test.png"> | |||
<img src="../../../../static/images/agriculturalTrusteeship/insurance/insurance_go.png"> | |||
</div> | |||
</div> | |||
</div> | |||
</van-list> | |||
</van-tab> | |||
<van-tab title="保险产品"> | |||
<div class="search"> | |||
<img src="../../../../static/images/agriculturalTrusteeship/index/search_icon_01.png" /> | |||
<input type="text" placeholder="输入需求进行搜索" /> | |||
<img src="../../../../static/images/agriculturalTrusteeship/index/search_icon_02.png" /> | |||
</div> | |||
<van-list | |||
v-model="loading" | |||
:finished="finished" | |||
finished-text="没有更多了" | |||
> | |||
<!-- @load="onLoad"--> | |||
<div class="main_content_right_list" v-for="item in 10" :key="item"> | |||
<img src="../../../../static/images/agriculturalTrusteeship/index/test.png"> | |||
<div class="main_content_right_list_content"> | |||
<p class="tt">如果只有一行就空着啊啊啊啊啊啊啊啊啊啊啊啊</p> | |||
<!-- <div class="tab">--> | |||
<!-- <p>¥<span>66</span>.00/亩</p>--> | |||
<!-- <p><span>销 600</span><span>分 4.7</span></p>--> | |||
<!-- </div>--> | |||
<p class="name">张三社会服务旗舰店</p> | |||
</div> | |||
</div> | |||
</van-list> | |||
</van-tab> | |||
</van-tabs> | |||
</div> | |||
<!-- 内容结束 --> | |||
</div> | |||
</template> | |||
<script> | |||
import Cookies from "js-cookie"; | |||
export default { | |||
name: "agriculturalTrusteeshipInsuranceList", | |||
data() { | |||
return { | |||
activeKey: 0, | |||
active: 0, | |||
loading: false, | |||
finished: false, | |||
}; | |||
}, | |||
created() { | |||
}, | |||
methods: { | |||
}, | |||
} | |||
</script> | |||
<style scoped lang="scss"> | |||
.home_wrapper{ | |||
} | |||
/*头部*/ | |||
.header{ | |||
display: flex; | |||
align-items: center; | |||
justify-content: space-between; | |||
background-image: linear-gradient(to right , #6E93F3 , #7E89E9 , #54C6E4); | |||
padding: 2vh 4% 2vh; | |||
.header_left{ | |||
display: flex; | |||
align-items: center; | |||
p{ | |||
font-size: .4rem; | |||
color: #ffffff; | |||
line-height: 1; | |||
margin-left: 10PX; | |||
} | |||
} | |||
.header_right{ | |||
font-size: .35rem; | |||
background: #ffffff url("../../../../static/images/agriculturalTrusteeship/address.png") no-repeat 10PX center; | |||
padding: 2PX 15PX 2PX 25PX; | |||
border-radius: 50PX; | |||
} | |||
} | |||
/* 内容 */ | |||
.main{ | |||
background-image: linear-gradient(to right , #6E93F3 , #7E89E9 , #54C6E4); | |||
/deep/ .van-tabs__nav{ | |||
border-top-left-radius: 25PX; | |||
border-top-right-radius: 25PX; | |||
overflow: hidden; | |||
} | |||
/deep/ .van-tabs__line{ | |||
background: #334281!important; | |||
} | |||
/deep/ .van-tab--active{ | |||
color: #334281; | |||
} | |||
/deep/ .van-tabs__content{ | |||
background: #ffffff; | |||
padding-top: 2vh; | |||
} | |||
.search{ | |||
display: flex; | |||
justify-content: space-between; | |||
align-items: center; | |||
width: 92%; | |||
margin: 0PX auto; | |||
border: 1px solid #6E93F3; | |||
padding: 1PX 1PX 1PX 12PX ; | |||
border-radius: 50PX; | |||
input{ | |||
flex: 1; | |||
background: transparent; | |||
margin-left: 10PX; | |||
} | |||
} | |||
.content{ | |||
width: 92%; | |||
margin: 0 auto; | |||
box-shadow: 0px 0px 10PX rgba(0,0,0,0.1); | |||
border-radius: 10PX; | |||
margin-top: 2vh; | |||
padding: 1.5vh 4%; | |||
.content_tt{ | |||
font-size: .35rem; | |||
} | |||
.content_con{ | |||
display: flex; | |||
justify-content: space-between; | |||
margin-top: 1.5vh; | |||
.content_con_left{ | |||
display: flex; | |||
flex-direction:column; | |||
justify-content: space-between; | |||
p{ | |||
font-size: .35rem; | |||
padding-left: 18PX; | |||
&:nth-child(1){ | |||
background: url("../../../../static/images/agriculturalTrusteeship/insurance/insurance_list_project.png") no-repeat left center; | |||
} | |||
&:nth-child(2){ | |||
background: url("../../../../static/images/agriculturalTrusteeship/insurance/insurance_list_name.png") no-repeat left center; | |||
} | |||
&:nth-child(3){ | |||
background: url("../../../../static/images/agriculturalTrusteeship/insurance/insurance_list_iphone.png") no-repeat left center; | |||
} | |||
} | |||
} | |||
.content_con_right{ | |||
display: flex; | |||
justify-content: end; | |||
align-items: center; | |||
img{ | |||
border-radius: 10PX; | |||
width: 40%; | |||
margin-left: 5%; | |||
box-shadow: 0px 5PX 10PX rgba(0,0,0,0.2); | |||
&:last-child{ | |||
width: auto; | |||
box-shadow: none; | |||
} | |||
} | |||
} | |||
} | |||
} | |||
.main_content_right_list{ | |||
display: flex; | |||
margin: 0 auto; | |||
margin-top: 2vh; | |||
width: 92%; | |||
img{ | |||
border-radius: 15PX; | |||
margin-right: 4%; | |||
width: 20%; | |||
} | |||
.main_content_right_list_content{ | |||
display: flex; | |||
flex-direction:column; | |||
justify-content: space-between; | |||
.tt{ | |||
color: #333333; | |||
font-size: .35rem; | |||
} | |||
.tab{ | |||
display: flex; | |||
justify-content: space-between; | |||
p{ | |||
&:nth-child(1){ | |||
flex: 1; | |||
color: #FF5E00; | |||
span{ | |||
font-size: .4rem; | |||
} | |||
} | |||
&:nth-child(2){ | |||
flex: 1; | |||
span{ | |||
width: 50%; | |||
display: inline-block; | |||
text-align: center; | |||
padding: 2PX 2PX; | |||
&:nth-child(1){ | |||
color: #497CE8; | |||
background: #E2E9FD; | |||
border-top-left-radius: 10PX; | |||
} | |||
&:nth-child(2){ | |||
color: #ffffff; | |||
background-image: linear-gradient(to right , #5D87FA , #5FD5F5); | |||
border-bottom-right-radius: 10PX; | |||
} | |||
} | |||
} | |||
} | |||
} | |||
.name{ | |||
color: #8F8F8F; | |||
background: url("../../../../static/images/agriculturalTrusteeship/index/name_icon.png") no-repeat left center; | |||
padding-left: 18PX; | |||
} | |||
} | |||
} | |||
} | |||
</style> |
@@ -80,6 +80,7 @@ | |||
<!-- </div>--> | |||
<!-- <img src="../../../static/images/lawEnforcement/new/index_icon_12.png" @click="$router.push({name:'lawEnforcementRecordDocument'})">--> | |||
<!-- </div>--> | |||
</div> | |||
<div class="main3"> | |||
@@ -153,6 +154,11 @@ export default { | |||
methods: { | |||
goSearch(){ | |||
this.$router.push({name:'lawEnforcementBasis',query:{searchInput:this.searchInput}}); | |||
}, | |||
openAlert(){ | |||
this.$dialog.alert({ | |||
message: '功能暂未开通!', | |||
}) | |||
} | |||
}, | |||
}; | |||