elink-star
/
epmet-wx-pa-chengyang
12
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

首页头部蓝色背景随页面下滑

feature
是小王呀\24601 1 year ago
parent
170f3cae3c
commit
95adbf8622
2 changed files with 118 additions and 112 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 10
      src/views/home/index.less
  2. 220
      src/views/home/index.vue

10
src/views/home/index.less
View File

@ -5,13 +5,17 @@
height: 160px; height: 160px;
} }
.content{ .content{
position: fixed; position: absolute
;
width: 100%; width: 100%;
height: 100%; // height: 100%;
top: 0; top: 0;
padding: 0 15px; padding: 0 15px;
box-sizing: border-box; box-sizing: border-box;
overflow-y: scroll; // overflow-y: scroll;
}
.content1{
height: 100%;
} }
.notice_time{ .notice_time{
padding-right: 5px; padding-right: 5px;

220
src/views/home/index.vue
View File

@ -1,136 +1,138 @@
<template> <template>
<div class="pages"> <div class="pages">
<div class="content1">
<div class="blueBg"></div> <div class="blueBg"></div>
<div class="content"> <div class="content">
<div class="flex flex-end"> <div class="flex flex-end">
<div class="flex flex-center2 white" @click="$router.push('/selectAgency')"> <div class="flex flex-center2 white" @click="$router.push('/selectAgency')">
<img src="@/assets/images/icons/home.png" class="img_17 m-right10" alt=""> <img src="@/assets/images/icons/home.png" class="img_17 m-right10" alt="">
<span>{{ this.$store.state.app.userInfo.agencyName || '--' }}</span> <span>{{ this.$store.state.app.userInfo.agencyName || '--' }}</span>
</div>
<div class="flex flex-center2">
<van-search v-model="searchKey" placeholder="请输入搜索关键词" shape="round" background="#3974f6"
style="width: 170px;"
@search="$router.push({ path: '/search', query: { searchKey: searchKey } })" />
<img src="@/assets/images/icons/mine.png"
@click="$router.push({ path: '/mine', query: { searchKey: searchKey } })" class="img_20 "
alt="">
</div>
</div> </div>
<div class="swipe"> <div class="flex flex-center2">
<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white"> <van-search v-model="searchKey" placeholder="请输入搜索关键词" shape="round" background="#3974f6"
<van-swipe-item v-for="item in PublicityListImg"> style="width: 170px;"
<img :src="item.coverPic" alt="" @click="toDetail(item)" @search="$router.push({ path: '/search', query: { searchKey: searchKey } })" />
style="width: 100%;height: 150px; margin: 0 auto;border-radius: 15px;"> <img src="@/assets/images/icons/mine.png"
</van-swipe-item> @click="$router.push({ path: '/mine', query: { searchKey: searchKey } })" class="img_20 "
</van-swipe> alt="">
</div> </div>
<div class="card flex flex-end flex-center2 m-top15 notice"> </div>
<img src="@/assets/images/icons/notice.png" class="img_17" alt=""> <div class="swipe">
<div class="van-ellipsis flex-1"> <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
<van-notice-bar color="#555555" background="#ffffff" :text="messageText" /> <van-swipe-item v-for="item in PublicityListImg">
</div> <img :src="item.coverPic" alt="" @click="toDetail(item)"
<span class="gray notice_time">{{day}}</span> style="width: 100%;height: 150px; margin: 0 auto;border-radius: 15px;">
<span class="gray" @click="$router.push('/messages')">更多</span> </van-swipe-item>
</van-swipe>
</div>
<div class="card flex flex-end flex-center2 m-top15 notice">
<img src="@/assets/images/icons/notice.png" class="img_17" alt="">
<div class="van-ellipsis flex-1">
<van-notice-bar color="#555555" background="#ffffff" :text="messageText" />
</div> </div>
<div class="card m-top10"> <span class="gray notice_time">{{day}}</span>
<div class="flex white"> <span class="gray" @click="$router.push('/messages')">更多</span>
<div class="appeal m-right10 flex flex-y" @click="handelClickJump('event')"> </div>
<div>我有诉求</div> <div class="card m-top10">
<div class="font-size13 m-top5" style="color: #d8e6fe;"> 居民点单 社区接单</div> <div class="flex white">
</div> <div class="appeal m-right10 flex flex-y" @click="handelClickJump('event')">
<div class="verify"> <div>我有诉求</div>
<div>信息核实</div> <div class="font-size13 m-top5" style="color: #d8e6fe;"> 居民点单 社区接单</div>
<div class="font-size13 m-top5" style="color: #d8e6fe;">登记信息 窗口办理</div>
</div>
</div> </div>
<div class="flex flex-centr2 flex-mean m-top18"> <div class="verify">
<div class="flex-y flex flex-center1 flex-center2 nav font-size13 " v-for="(item, index) in tabList" <div>信息核实</div>
@click="handelClickJump(item.path,'tab')" :key="index"> <div class="font-size13 m-top5" style="color: #d8e6fe;">登记信息 窗口办理</div>
<img :src="item.imgSrc" alt="">
<span>{{ item.title }}</span>
</div>
</div> </div>
</div> </div>
<div class="card m-top10"> <div class="flex flex-centr2 flex-mean m-top18">
<div class="title"> <div class="flex-y flex flex-center1 flex-center2 nav font-size13 " v-for="(item, index) in tabList"
<span>社区活动</span> @click="handelClickJump(item.path,'tab')" :key="index">
<span @click="$router.push('/activity')">更多</span> <img :src="item.imgSrc" alt="">
<span>{{ item.title }}</span>
</div> </div>
<div class="activity_content flex" v-for="(item, index) in activityList" :key="index" @click="handelClickJump(`activityDetail`,item)"> </div>
<img :src="item.coverPic" alt="" class="mr10" style="width: 75px;height: 95px;"> </div>
<div class="flex flex-y flex1 flex-end" style="overflow: hidden;"> <div class="card m-top10">
<div class="van-ellipsis">{{ item.activityName }}</div> <div class="title">
<div class="address font-size14 van-ellipsis gray">地点：{{ item.address }}</div> <span>社区活动</span>
<div class="time gray font-size14">时间：{{ item.startTime }}</div> <span @click="$router.push('/activity')">更多</span>
<div class="flex flex-end"> </div>
<div> <div class="activity_content flex" v-for="(item, index) in activityList" :key="index" @click="handelClickJump(`activityDetail`,item)">
<span>报名人数：</span> <span class="font-size18 orange">{{ item.currentParticipants }}</span>/<span <img :src="item.coverPic" alt="" class="mr10" style="width: 75px;height: 95px;">
class="font-size14">{{ item.participants }}人</span> <div class="flex flex-y flex1 flex-end" style="overflow: hidden;">
</div> <div class="van-ellipsis">{{ item.activityName }}</div>
<van-button type="info" size="small" round @click="handelClickJump(`activityDetail`,item)" <div class="address font-size14 van-ellipsis gray">地点：{{ item.address }}</div>
:disabled="disabledRecord(item)">{{recordFlag(item)?'已报名':'报名'}}</van-button> <div class="time gray font-size14">时间：{{ item.startTime }}</div>
<div class="flex flex-end">
<div>
<span>报名人数：</span> <span class="font-size18 orange">{{ item.currentParticipants }}</span>/<span
class="font-size14">{{ item.participants }}人</span>
</div> </div>
<van-button type="info" size="small" round @click="handelClickJump(`activityDetail`,item)"
:disabled="disabledRecord(item)">{{recordFlag(item)?'已报名':'报名'}}</van-button>
</div> </div>
</div> </div>
</div> </div>
<div class="card m-top10"> </div>
<div class="title"> <div class="card m-top10">
<span>居民议事</span> <div class="title">
<span @click="$router.push('/discussion')">更多</span> <span>居民议事</span>
</div> <span @click="$router.push('/discussion')">更多</span>
<div class="activity_content flex" v-for="(item, index) in eventList" :key="index" @click="$router.push({ path: `/discusionDetail`,query: { eventId:item.eventId} })"> </div>
<div class="flex flex-y flex1 flex-end" style="overflow: hidden;"> <div class="activity_content flex" v-for="(item, index) in eventList" :key="index" @click="$router.push({ path: `/discusionDetail`,query: { eventId:item.eventId} })">
<span class="van-multi-ellipsis--l2"> <div class="flex flex-y flex1 flex-end" style="overflow: hidden;">
{{ item.eventContent }} <span class="van-multi-ellipsis--l2">
</span> {{ item.eventContent }}
<div class="flex flex-end flex-center gray m-top10 font-size13"> </span>
<div class="flex flex-center"><img src="@/assets/images/icons/resi.png" class="img_16 m-right7" alt=""> <div class="flex flex-end flex-center gray m-top10 font-size13">
<span>参与 {{ item.total }}</span></div> <div class="flex flex-center"><img src="@/assets/images/icons/resi.png" class="img_16 m-right7" alt="">
<div class="flex flex-center" @click.stop="handelClicsupport1(item.eventId)"> <span>参与 {{ item.total }}</span></div>
<img src="@/assets/images/icons/support.png" alt="" class="img_16 m-right7"> <div class="flex flex-center" @click.stop="handelClicsupport1(item.eventId)">
<span>支持 {{ item.supportNum }}</span></div> <img src="@/assets/images/icons/support.png" alt="" class="img_16 m-right7">
<div class="flex flex-center" @click.stop="handelClicopposeNum(item.eventId)" ><img src="@/assets/images/icons/oppose.png" alt="" <span>支持 {{ item.supportNum }}</span></div>
class="img_16 m-right7"><span>反对 {{ item.opposeNum }}</span></div> <div class="flex flex-center" @click.stop="handelClicopposeNum(item.eventId)" ><img src="@/assets/images/icons/oppose.png" alt=""
</div> class="img_16 m-right7"><span>反对 {{ item.opposeNum }}</span></div>
</div> </div>
</div> </div>
</div> </div>
<div class="card m-top10"> </div>
<div class="title"> <div class="card m-top10">
<span>社区讯息</span> <div class="title">
<span @click="$router.push('/communityPublicity')">更多</span> <span>社区讯息</span>
</div> <span @click="$router.push('/communityPublicity')">更多</span>
<div class="activity_content flex"> </div>
<van-tabs v-model="tagActive" style="width: 100%;" @change="handelChangeTags"> <div class="activity_content flex">
<van-tab v-for="item in tagList" :key="item.id" :title="item.tagName"> <van-tabs v-model="tagActive" style="width: 100%;" @change="handelChangeTags">
<div class="flex flex-y flex1 flex-end" v-if="PublicityList.length !== 0" > <van-tab v-for="item in tagList" :key="item.id" :title="item.tagName">
<div class="activity_content flex flex-y" v-for="(item, index) in PublicityList" :key="index" @click="$router.push({name:'communityPublicityDetail',query:{item:JSON.stringify(item)}})"> <div class="flex flex-y flex1 flex-end" v-if="PublicityList.length !== 0" >
<div class="flex flex1 "> <div class="activity_content flex flex-y" v-for="(item, index) in PublicityList" :key="index" @click="$router.push({name:'communityPublicityDetail',query:{item:JSON.stringify(item)}})">
<span class="van-multi-ellipsis--l2 flex1" style="line-height: 28px;" > <div class="flex flex1 ">
{{ item.title }} <span class="van-multi-ellipsis--l2 flex1" style="line-height: 28px;" >
</span> {{ item.title }}
<img v-if="item.coverPic" :src="item.coverPic" style="width: 100px;height: 60px;" alt=""> </span>
</div> <img v-if="item.coverPic" :src="item.coverPic" style="width: 100px;height: 60px;" alt="">
<div class="flex flex-end flex-center gray m-top10 font-size13"> </div>
<div class="flex"> <div class="flex flex-end flex-center gray m-top10 font-size13">
<div class="flex flex-center m-right26" v-if="item.tagId && tagList">{{filterTagId(item.tagId)}}</div> <div class="flex">
<div class="flex flex-center" @click.stop="communityPublicityGiveLike(item.id)"><img src="@/assets/images/icons/support.png" <div class="flex flex-center m-right26" v-if="item.tagId && tagList">{{filterTagId(item.tagId)}}</div>
alt="" class="img_16 m-right7"><span>{{ item.likes || 0}}</span> <div class="flex flex-center" @click.stop="communityPublicityGiveLike(item.id)"><img src="@/assets/images/icons/support.png"
</div> alt="" class="img_16 m-right7"><span>{{ item.likes || 0}}</span>
</div> </div>
<div class="flex1 text-align-right">{{item.releaseTime}}</div>
</div> </div>
<div class="flex1 text-align-right">{{item.releaseTime}}</div>
</div> </div>
</div> </div>
<div v-else class="no-data"> </div>
暂无数据~ <div v-else class="no-data">
</div> 暂无数据~
</van-tab> </div>
</van-tabs> </van-tab>
</div> </van-tabs>
</div> </div>
</div> </div>
<register-dialog v-if="showRegister" @close="showRegister = false"></register-dialog> </div>
<register-dialog v-if="showRegister" @close="showRegister = false"></register-dialog>
</div>
</div> </div>
</template> </template>

Write Preview
Loading…
Cancel
Save