ewide/zsxt_nbzs_h5
22
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update:项目列表滚动效果

Browse Source
This commit is contained in:
自带大佬气场
2021-09-16 16:27:20 +08:00
parent 80d9a8c08b
commit 224ed17fe3
2 changed files with 41 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
FrontCode2/sunshine_levy/src/views/project/index.vue
View File

@@ -1,33 +1,27 @@
<template>
<div>
<div style="height: 240px;">
<div class="proTopBox">
<div :class="type == 'pg' ? 'proTopBoxpg': 'proTopBoxxy' "></div>
<div class="proCenterBox">
<div class="proCenterInfo">
<van-image :src="require('@/assets/img/expropriated_person.png')" class="proCenterImg" />
<div :class="type == 'pg' ? 'proTopBoxpg': 'proTopBoxxy'">
<div class="proCenterBox">
<div class="proCenterInfo">
<van-image :src="require('@/assets/img/expropriated_person.png')" class="proCenterImg" />
<div>
<div>
<div>
<span class="proCenterFont">被征收人姓名：</span>
<span class="proCenterFont" style="color:#626262;">{{user.name}}</span>
</div>
<div>
<span class="proCenterFont">身份证号：</span>
<span class="proCenterFont" style="color:#626262;">{{user.identityId}}</span>
</div>
<span class="proCenterFont">被征收人姓名：</span>
<span class="proCenterFont" style="color:#626262;">{{user.name}}</span>
</div>
<div>
<span class="proCenterFont">身份证号：</span>
<span class="proCenterFont" style="color:#626262;">{{user.identityId}}</span>
</div>
</div>
<div class="proCenterFlex">
<div class="proCenterFlexFont">请选择您的征收项目</div>
<van-image
:src="require('@/assets/img/expropriated_select.png')"
class="proCenterFlexImg"
/>
</div>
</div>
<div class="proCenterFlex" style="margin-bottom: 15px;">
<div class="proCenterFlexFont">请选择您的征收项目</div>
<van-icon color="#9da2a3" name="arrow-down" />
</div>
</div>
</div>
<div>
<div class="proList">
<van-list>
<div
:key="item.id"

47
FrontCode2/sunshine_levy/src/views/project/project.css
View File

@@ -1,46 +1,48 @@
.proTopBox {
position: relative;
margin: 15px 12px;
}
.proTopBoxpg {
position: absolute;
overflow: hidden;
display: flex;
justify-content: space-around;
width: 100%;
height: 90px;
width: 95%;
height: 220px;
margin: 10px;
background: url(../../assets/img/zspg.jpg);
background-repeat: no-repeat;
background-size: 100% 90px;
}
.proTopBoxxy {
position: absolute;
overflow: hidden;
display: flex;
justify-content: space-around;
width: 100%;
height: 90px;
width: 95%;
height: 220px;
margin: 10px;
background: url(../../assets/img/zsxy.jpg);
background-repeat: no-repeat;
background-size: 100% 90px;
}
.proCenterBox {
position: absolute;
top: 50%;
left: 50% ;
width: 95%;
height: 140px;
transform: translate(-50%, 50%);
/* margin: 70px 0 15px 10px; */
width: 94%;
margin-top: 78px;
border-radius: 6px;
background: rgba(248, 253, 255, 1);
box-shadow: 1px 1px 3px rgb(202, 201, 201);
}
.proList {
position: absolute;
top: 230px;
bottom: 0;
overflow-y: scroll;
width: 100%;
}
.proCenterInfo {
display: flex;
@@ -86,7 +88,7 @@
height: 25px;
color: #09a4fa;
color: #9da2a3;
}
.shadow {
-webkit-box-shadow: rgb(189, 189, 189) 0 0 3px;
@@ -98,6 +100,7 @@
margin: 15px 20px;
border-radius: 3px;
background-color: #fff;
}
.proAreaBox {
display: flex;