|
|
|
@@ -0,0 +1,245 @@ |
|
|
|
<template> |
|
|
|
<div class="home_wrapper"> |
|
|
|
<div class="header_main" > |
|
|
|
承包网签 |
|
|
|
<div class="return_btn" @click="onClickLeft"></div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 发包方 --> |
|
|
|
<div class="list_main top_main"> |
|
|
|
<div class="titBox"> |
|
|
|
<img src="../../assets/images/sunVillage_info/list_contract_signature_icon_01.png" style="width:22PX;height:22PX;margin-right: 10px;"/> |
|
|
|
<p class="tit">发包方</p> |
|
|
|
</div> |
|
|
|
<!-- 已授权 --> |
|
|
|
<img v-if="false" src="../../assets/images/sunVillage_info/list_contract_signature_icon_09.png" style="width: 33%;" /> |
|
|
|
|
|
|
|
<!-- 未授权 --> |
|
|
|
<p class="top_main_btn">进入授权 ></p> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 承包方 --> |
|
|
|
<div class="list_main"> |
|
|
|
<div class="titBox"> |
|
|
|
<img src="../../assets/images/sunVillage_info/list_contract_signature_icon_02.png" style="width:22PX;height:22PX;margin-right: 10px;"/> |
|
|
|
<p class="tit">承包方</p> |
|
|
|
<p class="tt_num">共<span>100</span>户</p> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="list_main_content"> |
|
|
|
<div class="list_main_block"> |
|
|
|
<div class="list_main_block_tt"> |
|
|
|
<div class="list_main_block_icon"> |
|
|
|
<img src="../../assets/images/sunVillage_info/list_contract_signature_icon_04.png" style="width:12PX;height:12PX;"/> |
|
|
|
</div> |
|
|
|
<p>未审核</p> |
|
|
|
<p>80%</p> |
|
|
|
</div> |
|
|
|
<p class="list_main_block_num"><span>80</span>户</p> |
|
|
|
<p class="list_main_block_btn">进入查看 ></p> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="list_main_block"> |
|
|
|
<div class="list_main_block_tt"> |
|
|
|
<div class="list_main_block_icon"> |
|
|
|
<img src="../../assets/images/sunVillage_info/list_contract_signature_icon_05.png" style="width:12PX;height:12PX;"/> |
|
|
|
</div> |
|
|
|
<p>未授权</p> |
|
|
|
<p>80%</p> |
|
|
|
</div> |
|
|
|
<p class="list_main_block_num"><span>80</span>户</p> |
|
|
|
<p class="list_main_block_btn">进入查看 ></p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 承包合同 --> |
|
|
|
<div class="list_main"> |
|
|
|
<div class="titBox"> |
|
|
|
<img src="../../assets/images/sunVillage_info/list_contract_signature_icon_03.png" style="width:22PX;height:22PX;margin-right: 10px;"/> |
|
|
|
<p class="tit">承包合同</p> |
|
|
|
</div> |
|
|
|
<div class="list_main_content"> |
|
|
|
<div class="list_main_block"> |
|
|
|
<div class="list_main_block_tt"> |
|
|
|
<div class="list_main_block_icon"> |
|
|
|
<img src="../../assets/images/sunVillage_info/list_contract_signature_icon_06.png" style="width:12PX;height:12PX;"/> |
|
|
|
</div> |
|
|
|
<p>筹备中</p> |
|
|
|
<p>80%</p> |
|
|
|
</div> |
|
|
|
<p class="list_main_block_num"><span>80</span>户</p> |
|
|
|
<p class="list_main_block_btn">转入待签 ></p> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="list_main_block"> |
|
|
|
<div class="list_main_block_tt"> |
|
|
|
<div class="list_main_block_icon"> |
|
|
|
<img src="../../assets/images/sunVillage_info/list_contract_signature_icon_07.png" style="width:12PX;height:12PX;"/> |
|
|
|
</div> |
|
|
|
<p>双方待签</p> |
|
|
|
<p>80%</p> |
|
|
|
</div> |
|
|
|
<p class="list_main_block_num"><span>80</span>户</p> |
|
|
|
<p class="list_main_block_btn">批量签署 ></p> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="list_main_block"> |
|
|
|
<div class="list_main_block_tt"> |
|
|
|
<div class="list_main_block_icon"> |
|
|
|
<img src="../../assets/images/sunVillage_info/list_contract_signature_icon_08.png" style="width:12PX;height:12PX;"/> |
|
|
|
</div> |
|
|
|
<p>已完成</p> |
|
|
|
<p style="background-color: #d2f1d1;color: #30bf2c;">80%</p> |
|
|
|
</div> |
|
|
|
<p class="list_main_block_num"><span>80</span>户</p> |
|
|
|
<p class="list_main_block_btn">进入查看 ></p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import $ from "jquery"; |
|
|
|
import Cookies from "js-cookie"; |
|
|
|
export default { |
|
|
|
name: "sunVillageInfoListContractSignature", |
|
|
|
data() { |
|
|
|
return { |
|
|
|
|
|
|
|
}; |
|
|
|
}, |
|
|
|
created() { |
|
|
|
|
|
|
|
}, |
|
|
|
methods: { |
|
|
|
|
|
|
|
}, |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style scoped lang="scss"> |
|
|
|
.home_wrapper{ |
|
|
|
background: #e9e9e9; |
|
|
|
min-height: 100vh; |
|
|
|
width: 100vw; |
|
|
|
.header_main { |
|
|
|
height: 116px; |
|
|
|
background: url('../../assets/images/sunVillage_info/list_head.png') no-repeat; |
|
|
|
background-size: 100% 100%; |
|
|
|
position: fixed; |
|
|
|
top: 0; |
|
|
|
left: 0; |
|
|
|
width: 100%; |
|
|
|
font-size: 36px; |
|
|
|
line-height: 116px; |
|
|
|
text-align: center; |
|
|
|
color: #fff; |
|
|
|
position: relative; |
|
|
|
|
|
|
|
.return_btn { |
|
|
|
width: 24px; |
|
|
|
height: 43.2px; |
|
|
|
background: url('../../assets/images/sunVillage_info/list_icon_5.png') center center no-repeat; |
|
|
|
background-size: 20px 36px; |
|
|
|
position: absolute; |
|
|
|
left: 38px; |
|
|
|
top: 36px; |
|
|
|
} |
|
|
|
} |
|
|
|
.list_main{ |
|
|
|
padding:25px; |
|
|
|
background: #ffffff; |
|
|
|
width: 94%; |
|
|
|
margin: 25px auto 0; |
|
|
|
border-radius: 15PX; |
|
|
|
box-shadow: 4px 6px 5px rgba(63, 68, 75, 0.1); |
|
|
|
.list_main_content{ |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
flex-wrap: wrap; |
|
|
|
} |
|
|
|
.list_main_block{ |
|
|
|
padding:25px; |
|
|
|
width: 48%; |
|
|
|
border-radius: 15PX; |
|
|
|
box-shadow: 0PX 2PX 5PX rgba(63, 68, 75, 0.2); |
|
|
|
margin-top: 25px; |
|
|
|
.list_main_block_tt{ |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
.list_main_block_icon{ |
|
|
|
padding: 5PX; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
border-radius: 50%; |
|
|
|
box-shadow: 0PX 2PX 5PX rgba(63, 68, 75, 0.2); |
|
|
|
margin-right: 5PX; |
|
|
|
} |
|
|
|
p{ |
|
|
|
line-height: 1; |
|
|
|
&:nth-child(2){ |
|
|
|
font-size: 14PX; |
|
|
|
} |
|
|
|
&:nth-child(3){ |
|
|
|
font-size: 14PX; |
|
|
|
color: #fa0c0c; |
|
|
|
background-color: #fecece; |
|
|
|
padding: 5PX 10PX; |
|
|
|
border-top-right-radius: 10PX; |
|
|
|
margin-left: auto; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.list_main_block_num{ |
|
|
|
font-size: 16PX; |
|
|
|
margin: 5PX 0; |
|
|
|
span{ |
|
|
|
font-size: 24PX; |
|
|
|
font-weight: bold; |
|
|
|
} |
|
|
|
} |
|
|
|
.list_main_block_btn{ |
|
|
|
font-size: 14PX; |
|
|
|
color: #686868; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.titBox{ |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
.tt_num{ |
|
|
|
font-size: 16PX; |
|
|
|
color: #686868; |
|
|
|
margin-left: auto; |
|
|
|
span{ |
|
|
|
font-size: 18PX; |
|
|
|
color: #2f8be5; |
|
|
|
font-weight: bold; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.tit{ |
|
|
|
font-size: 36px; |
|
|
|
color: #2f8be5; |
|
|
|
} |
|
|
|
.top_main{ |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: space-between; |
|
|
|
padding:10px 25px; |
|
|
|
.top_main_btn{ |
|
|
|
font-size: 14PX; |
|
|
|
color: #686868; |
|
|
|
padding: 8PX 15PX; |
|
|
|
box-shadow: 0PX 2PX 5PX rgba(63, 68, 75, 0.2); |
|
|
|
border-radius: 8PX; |
|
|
|
margin: 10PX 0; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
