From 681efe897b7fb4dbe8bec5fa5056209e3e0edfdc Mon Sep 17 00:00:00 2001
From: Liuyi <candymxq888@outlook.com>
Date: 星期三, 20 十一月 2024 17:19:57 +0800
Subject: [PATCH] 添加积分商品详情，替换首页海报，调整样式，添加积分规则
---
pages/index/index.vue | 91 +++++++++++++++++++++++++++++++++++++++++++--
1 files changed, 86 insertions(+), 5 deletions(-)
diff --git a/pages/index/index.vue b/pages/index/index.vue
index 3cb01bd..ec461b7 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -19,6 +19,7 @@
userName:'微信用户',
headImg:'',
userPhone:'',
+ integral:'',
waterCardNumber:'',
balance:'',
@@ -60,6 +61,7 @@
if(res.code == 200){
cardInfo.value.userName = res.data.userInfo.userName ? res.data.userInfo.userName : cardInfo.value.userName
cardInfo.value.headImg = res.data.userInfo.headImg
+ cardInfo.value.integral = res.data.userInfo.integral
// showHeadImg.value = BASE_URL + '/upload' + cardInfo.value.headImg
cardInfo.value.userPhone = res.data.userInfo.userPhone
cardInfo.value.id = res.data.userInfo.id
@@ -364,9 +366,18 @@
</view>
<!-- 积分商城 -->
<view class="advertisement-box" @click="navTo('/pages/pointsMall/index')">
- <!-- <view class="advertisement-box" @click="upGrade"> -->
- <image src="../../static/images/index/banner2.png" alt=""></image>
- <image src="../../static/images/index/banner1.png" alt=""></image>
+ <view class="point-advert">
+ <view class="advert-image">
+ <image class="image-icon3" src="../../static/images/index/advert-icon3.svg"></image>
+ <image class="image-icon1" src="../../static/images/index/advert-icon1.svg"></image>
+ <image class="image-icon2" src="../../static/images/index/advert-icon2.svg"></image>
+ <image class="image-icon4" src="../../static/images/index/advert-icon4.svg"></image>
+ </view>
+ <view class="advert-title">
+ <view class="advert-title1">积分商城</view>
+ <view class="advert-title2"><text>点击进入</text></view>
+ </view>
+ </view>
</view>
<view class="service-box">
<view class="service-title"><text>服务指南</text></view>
@@ -709,11 +720,81 @@
box-sizing: border-box;
display: flex;
justify-content: space-around;
- image{
- width:320rpx;
+ .point-advert{
+ width:640rpx;
height:136rpx;
border-radius:10rpx;
+ background:linear-gradient(140deg,#5c9dff 0%,#b5dcff 30%,#52aafc 70%,#b5dcff 90%,#5daffc 100%);
+ display: flex;
+ justify-content: space-around;
+ align-items: center;
+ box-shadow: 0 0 4rpx 2rpx #4978de;
+ .advert-title{
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ color: #fff;
+ font-size:46rpx;
+ font-weight:800;
+ text-shadow:4rpx 2rpx #5EA1FA;
+ .advert-title2{
+ margin-top:10rpx;
+ font-size:28rpx;
+ font-weight:500;
+ width:180rpx;
+ height:40rpx;
+ background: #5c9dff;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius:30rpx;
+ letter-spacing:2rpx;
+ }
+ }
+ .advert-image{
+ width:200rpx;
+ height:100%;
+ // background: #76bfa1;
+ position: relative;
+ .image-icon1{
+ position:absolute;
+ left: calc(50% - 65rpx);
+ top: calc(50% - 65rpx);
+ width:130rpx;
+ height:130rpx;
+ transform: rotate(20deg);
+ }
+ .image-icon2{
+ position:absolute;
+ left:60%;
+ top: calc(50% - 30rpx);
+ width:90rpx;
+ height:90rpx;
+ transform: rotate(-10deg);
+ }
+ .image-icon3{
+ position:absolute;
+ left: calc(50% - 100rpx);
+ top: 30%;
+ width:80rpx;
+ height:80rpx;
+ transform: rotate(-10deg);
+ }
+ .image-icon4{
+ position:absolute;
+ left:140%;
+ top: 60%;
+ width:50rpx;
+ height:50rpx;
+ transform: rotate(5deg);
+ }
+ }
}
+ // image{
+ // width:320rpx;
+ // height:136rpx;
+ // border-radius:10rpx;
+ // }
}
.service-box{
width: 100%;
--
Gitblit v1.9.3