This commit is contained in:
yanran200730
2022-11-02 17:23:17 +08:00
parent 5061c0d950
commit 33b9400e4a
5 changed files with 164 additions and 66 deletions

View File

@@ -1,13 +1,12 @@
<template>
<div class="home">
<image class="banner" src="https://jisheng-xiaochengxu.oss-cn-hangzhou.aliyuncs.com/admin/5bad9165-fa6e-4c81-894d-2beae426260b.png" />
<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('./PhotoReport')">
<span>随手拍</span>
<image mode="aspectFill" src="https://cdn.cunwuyun.cn/wxmp/tianfuxing/ssp.png" />
</div>
<div class="nav-item" @click="$linkTo('./Culture')">
<span>文明倡导</span>
<image src="https://jisheng-xiaochengxu.oss-cn-hangzhou.aliyuncs.com/admin/5bad9165-fa6e-4c81-894d-2beae426260b.png" />
<div class="nav-item" hover-class="text-hover" @click="$linkTo('./Culture')">
<image mode="aspectFill" src="https://cdn.cunwuyun.cn/wxmp/tianfuxing/wmcd.png" />
</div>
</div>
<div class="activity-wrapper">
@@ -118,6 +117,7 @@
width: 686px;
height: 240px;
margin: 0 auto 32rpx;
border-radius: 10px;
}
.nav {
@@ -127,36 +127,13 @@
margin: 0 32rpx 58rpx;
.nav-item {
position: relative;
width: 328px;
height: 128px;
line-height: 128px;
text-align: center;
font-size: 30rpx;
overflow: hidden;
background: rgba($color: #fff, $alpha: 0.8);
border-radius: 16px;
span {
position: relative;
z-index: 1;
color: #333;
font-weight: 600;
}
&:last-child {
span {
color: #fff;
font-weight: 600;
}
}
height: 122px;
image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 10px;
}
}
}

View File

@@ -11,9 +11,10 @@
<image src="/static/img/left.png"/>
</div>
<div class="photo-header">
<image src="https://cdn.cunwuyun.cn/wxmp/tianfuxing/wm-bg.png" />
<image class="bg-img" src="https://cdn.cunwuyun.cn/wxmp/tianfuxing/wm-bg.png" />
<h2>文明倡导</h2>
<p>将文明倡导公益海报分享在微信朋友圈50人以上的微信群微博群即可获得积分奖励</p>
<image class="right-icon" src="https://cdn.cunwuyun.cn/wxmp/tianfuxing/right1.png" />
</div>
<div class="phone-wrapper">
<h2>我上传的</h2>
@@ -283,7 +284,7 @@ export default {
height: 448px;
padding: 150px 48px 0;
image {
.bg-img {
position: absolute;
top: 0;
left: 0;
@@ -292,6 +293,15 @@ export default {
height: 448px;
}
.right-icon {
position: absolute;
top: 105px;
right: 0;
z-index: 2;
width: 304px;
height: 240px;
}
h2 {
position: relative;
z-index: 2;
@@ -341,7 +351,7 @@ export default {
top: 16px;
right: 16px;
z-index: 2;
width: 110px;
padding: 0 16px;
height: 48px;
line-height: 48px;
font-size: 26px;

View File

@@ -11,9 +11,10 @@
<image src="/static/img/left.png"/>
</div>
<div class="photo-header">
<image src="https://cdn.cunwuyun.cn/wxmp/tianfuxing/photo-bg.png" />
<image class="bg-img" src="https://cdn.cunwuyun.cn/wxmp/tianfuxing/photo-bg.png" />
<h2>随手拍</h2>
<p>将身边文明或不文明行为拍照上传即可获得积分奖励</p>
<image class="right-icon" src="https://cdn.cunwuyun.cn/wxmp/tianfuxing/right2.png" />
</div>
<div class="phone-wrapper">
<h2>我上传的</h2>
@@ -275,7 +276,7 @@
height: 448px;
padding: 150px 48px 0;
image {
.bg-img {
position: absolute;
top: 0;
left: 0;
@@ -284,6 +285,15 @@
height: 448px;
}
.right-icon {
position: absolute;
top: 105px;
right: 0;
z-index: 2;
width: 304px;
height: 240px;
}
h2 {
position: relative;
z-index: 2;
@@ -333,9 +343,9 @@
top: 16px;
right: 16px;
z-index: 2;
width: 110px;
height: 48px;
line-height: 48px;
padding: 0 16px;
font-size: 26px;
text-align: center;
color: #FF883C;