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
Split 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;
}
.content{
position: fixed;
position: absolute
;
width: 100%;
height: 100%;
// height: 100%;
top: 0;
padding: 0 15px;
box-sizing: border-box;
overflow-y: scroll;
// overflow-y: scroll;
}
.content1{
height: 100%;
}
.notice_time{
padding-right: 5px;

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

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

Write Preview
Loading…
Cancel
Save