天府星
This commit is contained in:
yanran200730
@@ -9,42 +9,63 @@
|
||||
<div></div>
|
||||
<image class="bg-img" src="https://cdn.cunwuyun.cn/wxmp/tianfuxing/home-bg.png" /> -->
|
||||
<div class="wrapper">
|
||||
<image class="banner" src="https://cdn.cunwuyun.cn/wxmp/tianfuxing/banner.png" />
|
||||
<div class="nav">
|
||||
<div class="nav-item" hover-class="text-hover" @click="$linkTo('./ActivityList')">
|
||||
<image mode="aspectFill" src="https://cdn.cunwuyun.cn/wxmp/tianfuxing/home1.png" />
|
||||
<span>活动签到</span>
|
||||
</div>
|
||||
<div class="nav-item" hover-class="text-hover" @click="$linkTo('./PhotoReport')">
|
||||
<image mode="aspectFill" src="https://cdn.cunwuyun.cn/wxmp/tianfuxing/ssp.png" />
|
||||
<image mode="aspectFill" src="https://cdn.cunwuyun.cn/wxmp/tianfuxing/home2.png" />
|
||||
<span>随手拍</span>
|
||||
</div>
|
||||
<div class="nav-item" hover-class="text-hover" @click="$linkTo('./Culture')">
|
||||
<image mode="aspectFill" src="https://cdn.cunwuyun.cn/wxmp/tianfuxing/wmcd.png" />
|
||||
<image mode="aspectFill" src="https://cdn.cunwuyun.cn/wxmp/tianfuxing/home3.png" />
|
||||
<span>海报接力</span>
|
||||
</div>
|
||||
<div class="nav-item" hover-class="text-hover" @click="$linkTo('./Ranking')">
|
||||
<image mode="aspectFill" src="https://cdn.cunwuyun.cn/wxmp/tianfuxing/home4.png" />
|
||||
<span>文明榜单</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="activity-wrapper">
|
||||
<h2>线下活动</h2>
|
||||
<div class="activity-list">
|
||||
<div class="activity-item" @click="$linkTo('./Activity?id=' + item.id)" hover-class="bg-hover" v-for="(item, index) in list" :key="index">
|
||||
<div class="top">
|
||||
<h2>{{ item.title }}</h2>
|
||||
<p>{{ item.detail }}</p>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<div class="item">
|
||||
<h3>进场时间：</h3>
|
||||
<div class="right">
|
||||
<p>{{ item.intoBegintime }} 至</p>
|
||||
<p>{{ item.intoEndtime }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<h3>离场时间：</h3>
|
||||
<div class="right">
|
||||
<p>{{ item.exitBegintime }} 至</p>
|
||||
<p>{{ item.exitEndtime }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<image class="banner" src="https://cdn.cunwuyun.cn/wxmp/tianfuxing/banner.png" />
|
||||
<div class="section yh">
|
||||
<h2>商家优惠</h2>
|
||||
<div class="yh-list">
|
||||
<div class="yh-item" v-for="(item, index) in 4" :key="index" hover-class="text-hover" @click="$linkTo('./StoreDetail')">
|
||||
<image src="https://cdn.cunwuyun.cn/wxmp/tianfuxing/banner.png" />
|
||||
<div class="right">
|
||||
<h2>实惠超市</h2>
|
||||
<p>Lv.1会员进店享受9折优惠</p>
|
||||
</div>
|
||||
</div>
|
||||
<AiEmpty v-if="!list.length"></AiEmpty>
|
||||
</div>
|
||||
<div class="more" @click="$linkTo('./Store')" hover-class="text-hover">查看更多优惠</div>
|
||||
</div>
|
||||
<div class="section rz">
|
||||
<h2>商家入驻</h2>
|
||||
<div class="rz-info">
|
||||
<div class="rz-item">
|
||||
<h3>商家权益</h3>
|
||||
<span>成都市金牛区xxxx大厦成都…</span>
|
||||
</div>
|
||||
<div class="rz-item">
|
||||
<h3>免费入驻</h3>
|
||||
<span>面对50万新区市民免费展示推荐</span>
|
||||
</div>
|
||||
<div class="rz-item">
|
||||
<h3>宣传报道</h3>
|
||||
<span>分批次获得媒体公开点名</span>
|
||||
</div>
|
||||
<div class="rz-item">
|
||||
<h3>出席仪式</h3>
|
||||
<span>邀请重点协会与商家代表参与启动仪式、颁奖仪式</span>
|
||||
</div>
|
||||
<div class="rz-item">
|
||||
<h3>直通车</h3>
|
||||
<span>商家诉求收集汇总反馈</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="more" @click="$linkTo('./Ranking')" hover-class="text-hover">查看更多优惠</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -83,45 +104,7 @@
|
||||
},
|
||||
|
||||
methods: {
|
||||
...mapActions(['autoLogin', 'getUserInfo']),
|
||||
|
||||
getList () {
|
||||
if (this.isMore) return
|
||||
|
||||
this.$loading()
|
||||
this.$instance.post(`/api/appactivityinfo/list`, null, {
|
||||
withoutToken: true,
|
||||
params: {
|
||||
current: this.current,
|
||||
size: 10
|
||||
}
|
||||
}).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.$hideLoading()
|
||||
if (this.current > 1) {
|
||||
this.list = [...this.list, ...res.data.records]
|
||||
} else {
|
||||
this.list = res.data.records
|
||||
}
|
||||
|
||||
if (res.data.records.length < 10) {
|
||||
this.isMore = true
|
||||
|
||||
return false
|
||||
}
|
||||
|
||||
this.current = this.current + 1
|
||||
} else {
|
||||
this.isMore = true
|
||||
}
|
||||
}).catch(() => {
|
||||
this.$hideLoading()
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
onReachBottom () {
|
||||
this.getList()
|
||||
...mapActions(['autoLogin', 'getUserInfo'])
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -129,7 +112,7 @@
|
||||
<style lang="scss" scoped>
|
||||
.home {
|
||||
position: relative;
|
||||
padding: 32px 0 40px;
|
||||
padding: 32px 0 60px;
|
||||
|
||||
.bg-img {
|
||||
position: absolute;
|
||||
@@ -143,7 +126,115 @@
|
||||
.wrapper {
|
||||
position: relative;
|
||||
z-index: 11;
|
||||
padding-top: 30px;
|
||||
margin: 0 32px 32px;
|
||||
}
|
||||
|
||||
.yh {
|
||||
.more {
|
||||
width: 100%;
|
||||
height: 88px;
|
||||
line-height: 88px;
|
||||
text-align: center;
|
||||
color: #687DA6;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.yh-list {
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
.yh-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 24px 0;
|
||||
border-bottom: 1px solid #EEEEEE;
|
||||
|
||||
image {
|
||||
width: 112px;
|
||||
height: 112px;
|
||||
margin-right: 12px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.right {
|
||||
flex: 1;
|
||||
|
||||
h2 {
|
||||
line-height: 48px;
|
||||
margin-bottom: 8px;
|
||||
font-size: 34px;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
p {
|
||||
color: #FFB94C;
|
||||
font-size: 26px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rz {
|
||||
padding-bottom: 48px;
|
||||
|
||||
.rz-info {
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
.rz-item {
|
||||
display: flex;
|
||||
margin-bottom: 24px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
h3 {
|
||||
width: 120px;
|
||||
line-height: 40px;
|
||||
margin-right: 40px;
|
||||
color: #999999;
|
||||
font-size: 28px;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
span {
|
||||
flex: 1;
|
||||
line-height: 40px;
|
||||
color: #333333;
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
.more {
|
||||
width: 638px;
|
||||
height: 88px;
|
||||
line-height: 88px;
|
||||
margin: 36px auto 0;
|
||||
font-size: 34px;
|
||||
color: #FFFFFF;
|
||||
text-align: center;
|
||||
background-image: linear-gradient(90deg, #75BDFF 0%, #4783FF 100%);
|
||||
box-shadow: 0 8px 12px -4px rgba(133,196,255,0.65);
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.section {
|
||||
margin-bottom: 24px;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0 0 8px 0 rgba(0,0,0,0.02);
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
|
||||
& > h2 {
|
||||
height: 96px;
|
||||
line-height: 96px;
|
||||
padding: 0 24px;
|
||||
font-size: 34px;
|
||||
color: #1D2229;
|
||||
background-image: linear-gradient(180deg, #DCEFFF 0%, rgba(220,239,255,0.00) 100%);
|
||||
}
|
||||
}
|
||||
|
||||
.back-wrapper {
|
||||
@@ -201,94 +292,37 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.banner {
|
||||
display: block;
|
||||
width: 686px;
|
||||
height: 240px;
|
||||
height: 352px;
|
||||
margin: 0 auto 32rpx;
|
||||
border-radius: 10px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin: 0 32rpx 58rpx;
|
||||
margin: 0 0 32px;
|
||||
padding: 0 36px;
|
||||
|
||||
.nav-item {
|
||||
width: 328px;
|
||||
height: 122px;
|
||||
width: 112px;
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.activity-wrapper {
|
||||
padding: 0 32px;
|
||||
|
||||
& > h2 {
|
||||
margin-bottom: 26px;
|
||||
color: #1D2229;
|
||||
font-size: 34px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.activity-item {
|
||||
margin-bottom: 24px;
|
||||
padding: 24px;
|
||||
background: #FCFCFC;
|
||||
box-shadow: 0 0 8px 0 rgba(0,0,0,0.02);
|
||||
border-radius: 16px;
|
||||
|
||||
.bottom {
|
||||
padding-top: 24px;
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
line-height: 1.3;
|
||||
margin-bottom: 8px;
|
||||
|
||||
h3 {
|
||||
font-size: 28px;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
div {
|
||||
flex: 1;
|
||||
|
||||
p {
|
||||
font-size: 28px;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
width: 112px;
|
||||
height: 116px;
|
||||
}
|
||||
|
||||
.top {
|
||||
padding-bottom: 24px;
|
||||
border-bottom: 1px solid #eee;
|
||||
|
||||
h2 {
|
||||
margin-bottom: 14px;
|
||||
font-weight: 500;
|
||||
font-size: 34px;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
p {
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
line-height: 1.3;
|
||||
font-size: 30px;
|
||||
color: #999999;
|
||||
text-align: justify;
|
||||
}
|
||||
span {
|
||||
display: block;
|
||||
text-align: center;
|
||||
color: #333;
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user