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

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

@@ -1,8 +1,6 @@
<template> <template>
<div> <div>
<div style="height: 240px;"> <div :class="type == 'pg' ? 'proTopBoxpg': 'proTopBoxxy'">
<div class="proTopBox">
<div :class="type == 'pg' ? 'proTopBoxpg': 'proTopBoxxy' "></div>
<div class="proCenterBox"> <div class="proCenterBox">
<div class="proCenterInfo"> <div class="proCenterInfo">
<van-image :src="require('@/assets/img/expropriated_person.png')" class="proCenterImg" /> <van-image :src="require('@/assets/img/expropriated_person.png')" class="proCenterImg" />
@@ -17,17 +15,13 @@
</div> </div>
</div> </div>
</div> </div>
<div class="proCenterFlex"> <div class="proCenterFlex" style="margin-bottom: 15px;">
<div class="proCenterFlexFont">请选择您的征收项目</div> <div class="proCenterFlexFont">请选择您的征收项目</div>
<van-image <van-icon color="#9da2a3" name="arrow-down" />
:src="require('@/assets/img/expropriated_select.png')"
class="proCenterFlexImg"
/>
</div> </div>
</div> </div>
</div> </div>
</div> <div class="proList">
<div>
<van-list> <van-list>
<div <div
:key="item.id" :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 { .proTopBoxpg {
position: absolute; position: absolute;
overflow: hidden; display: flex;
justify-content: space-around;
width: 100%; width: 95%;
height: 90px; height: 220px;
margin: 10px;
background: url(../../assets/img/zspg.jpg); background: url(../../assets/img/zspg.jpg);
background-repeat: no-repeat;
background-size: 100% 90px; background-size: 100% 90px;
} }
.proTopBoxxy { .proTopBoxxy {
position: absolute; position: absolute;
overflow: hidden; display: flex;
justify-content: space-around;
width: 100%; width: 95%;
height: 90px; height: 220px;
margin: 10px;
background: url(../../assets/img/zsxy.jpg); background: url(../../assets/img/zsxy.jpg);
background-repeat: no-repeat;
background-size: 100% 90px; background-size: 100% 90px;
} }
.proCenterBox { .proCenterBox {
position: absolute; width: 94%;
top: 50%; margin-top: 78px;
left: 50% ;
width: 95%;
height: 140px;
transform: translate(-50%, 50%);
/* margin: 70px 0 15px 10px; */
border-radius: 6px; border-radius: 6px;
background: rgba(248, 253, 255, 1); background: rgba(248, 253, 255, 1);
box-shadow: 1px 1px 3px rgb(202, 201, 201); box-shadow: 1px 1px 3px rgb(202, 201, 201);
} }
.proList {
position: absolute;
top: 230px;
bottom: 0;
overflow-y: scroll;
width: 100%;
}
.proCenterInfo { .proCenterInfo {
display: flex; display: flex;
@@ -86,7 +88,7 @@
height: 25px; height: 25px;
color: #09a4fa; color: #9da2a3;
} }
.shadow { .shadow {
-webkit-box-shadow: rgb(189, 189, 189) 0 0 3px; -webkit-box-shadow: rgb(189, 189, 189) 0 0 3px;
@@ -98,6 +100,7 @@
margin: 15px 20px; margin: 15px 20px;
border-radius: 3px; border-radius: 3px;
background-color: #fff;
} }
.proAreaBox { .proAreaBox {
display: flex; display: flex;