1114 lines
42 KiB
Vue
1114 lines
42 KiB
Vue
<template>
|
||
<view>
|
||
<!-- 定位 -->
|
||
<view class="locationPicker">
|
||
<image class="locationPicker-icon" src="/static/icon/indexSite.png"></image>
|
||
<navigator :url="'../switchcity/switchcity?city_code=' + address.cityCode + '&area_code=' + address.provinceCode + '&city=' + address.cityName + '&area=' + address.districtName" hover-class="none" class="cityCont">
|
||
<view class="nowrap">
|
||
<text>{{ address.cityName }}{{ address.districtName }}</text>
|
||
</view>
|
||
<image src="/static/img/arrow.png"></image>
|
||
</navigator>
|
||
</view>
|
||
|
||
<!-- 首页tab -->
|
||
<view class="indexTab">
|
||
<view class="indexTab-lable" :class="{active : stateType == 'shaky'}" data-state="shaky" @click="orderTab">
|
||
活动中心
|
||
</view>
|
||
<view class="indexTab-lable" :class="{active : stateType == 'silver'}" data-state="silver" @click="orderTab">
|
||
白金会员
|
||
</view>
|
||
<view class="indexTab-lable" :class="{active : stateType == 'drill'}" data-state="drill" @click="orderTab">
|
||
钻石会员
|
||
</view>
|
||
</view>
|
||
<view class="indexTop">
|
||
<!-- 卡片轮播 -->
|
||
<view class="indexBanner">
|
||
<view class="banner" v-if="content.adverts.length > 0">
|
||
<swiper class="banner-swiper" interval="3000" autoplay :current="content.current" @change="swiperChange">
|
||
<swiper-item v-for="(item, index) in content.adverts" :key="index">
|
||
<image class="banner-img" :src="item.cover" show-menu-by-longpress="true" mode="aspectFill"
|
||
@click="clickImg(item.qrcode, item.url, item.channel)">
|
||
</image>
|
||
<i class="light"></i>
|
||
</swiper-item>
|
||
</swiper>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 自定义轮播图进度点 -->
|
||
<view class="dots" v-if="content.adverts.length > 0">
|
||
<block v-for="(item, index) in content.adverts" :key="index">
|
||
<view :class="{active : index == content.swiperCurrent}"></view>
|
||
</block>
|
||
</view>
|
||
|
||
<!-- 公告 -->
|
||
<view class="indexNews">
|
||
<image src="/static/icon/news_icon.png"></image>
|
||
<view class="marquee_container" style="--marqueeWidth--:-30em">
|
||
<view class="marquee_text" :class="{active : content.noticeData.length > 20}">{{ content.noticeData }}</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 活动中心-权益列表 -->
|
||
<view class="cardArr" v-if="stateType == 'shaky'">
|
||
<view class="cardArr-top">
|
||
<block v-if="content.cardArr.length > 0">
|
||
<view @click="rightNav(item.right_config_id, item.right_config_id, item.from)" v-for="(item, index) in content.cardArr" :key="index" class="indexCard">
|
||
<image class="indexCard-img" :src="item.cover"></image>
|
||
<view class="nowrap indexCard-title">{{ item.title }}</view>
|
||
<view class="nowrap activity-remark" v-if="item.subtitle != null">
|
||
<text class="nowrap">{{ item.subtitle }}</text>
|
||
</view>
|
||
<view class="activity-tips" v-if="item.label">{{ item.label }}</view>
|
||
</view>
|
||
</block>
|
||
<block v-else>
|
||
<view class="legalTips">
|
||
<image src="/static/img/legal_tips.png"></image>
|
||
<text>抱歉, 此地区暂无权益</text>
|
||
</view>
|
||
</block>
|
||
</view>
|
||
|
||
<!-- 福利日 -->
|
||
<view class="WelfareCont" v-if="content.activities.length > 0">
|
||
<view class="WelfareTop">
|
||
<image class="welfare_stra" src="https://card.ysd-bs.com/storage/materials/2021/09/01/welfare_stra.png"></image>
|
||
<image class="welfare-title" src="https://card.ysd-bs.com/storage/materials/2021/09/01/welfare_title.png"></image>
|
||
</view>
|
||
<view class="WelfareTitle"><text>{{ content.activities.length }}</text> 大会员权益，福利全线升级</view>
|
||
<view class="WelfareList" v-for="(item, index) in content.activities" :key="index" @click="Snapup(item.code_text, item.canBuy, item.welfare_id, item.right.from, item.right.right_config_id)">
|
||
<image class="WelfareList-img" :class="{active : item.surplus == 0}" :src="item.right.from == 'washcar' ? 'https://card.ysd-bs.com/storage/materials/2021/09/01/welfare_back_00.png' : 'https://card.ysd-bs.com/storage/materials/2021/09/01/welfare_back_01.png'"></image>
|
||
<view class="WelfareList-back">
|
||
<image class="WelfareList-left" :class="{active : item.surplus == 0}" :src="item.right.from == 'washcar' ? 'https://card.ysd-bs.com/storage/materials/2021/09/01/welfare_icon_00.png' : 'https://card.ysd-bs.com/storage/materials/2021/09/01/welfare_icon_01.png'"></image>
|
||
<view class="WelfareList-center">
|
||
<view class="nowrap WelfareList-price">{{ item.price }}<text> 元</text>（{{item.title}}）</view>
|
||
<view class="WelfareList-center-all" :class="{active : item.surplus == 0}">
|
||
<text>[限量{{ item.stock }}份]</text> <text>[剩余{{ item.surplus }}份]</text>
|
||
</view>
|
||
<view class="WelfareList-center-time" :class="{active : item.surplus == 0}">
|
||
<text>{{ item.start_time }} 开抢</text><text>{{ item.end_time }} 结束</text>
|
||
</view>
|
||
</view>
|
||
<view class="WelfareList-right" :class="{active : item.surplus == 0}">
|
||
<text>抢购</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<template>
|
||
<view class="subscribe" v-if="content.subState">
|
||
<view class="subscribe-icon">
|
||
<image class="subscribe-icon-one" src="/static/static/img/finger_00.png"></image>
|
||
<image class="subscribe-icon-two" src="/static/static/img/finger_01.png"></image>
|
||
</view>
|
||
<view class="subscribe-cont">
|
||
<wx-open-subscribe :template="templateIds" id="subscribe-btn" ref="subscribeBtn">
|
||
<script type="text/wxtag-template" slot="style">
|
||
<style>
|
||
.subscribe-txt{
|
||
color: #89663f;
|
||
font-weight: bold;
|
||
-webkit-animation: subscribeCont 1s linear infinite;
|
||
animation: subscribeCont 1s linear infinite;
|
||
display: inline-block;
|
||
height: 40px;
|
||
width: 160px;
|
||
text-align: center;
|
||
line-height: 40px;
|
||
}
|
||
@keyframes subscribeCont {
|
||
25% {
|
||
transform: scale(.98);
|
||
}
|
||
50%,
|
||
100% {
|
||
transform: scale(1);
|
||
}
|
||
75% {
|
||
transform: scale(1.05);
|
||
}
|
||
}
|
||
</style>
|
||
</script>
|
||
<script type="text/wxtag-template">
|
||
<view class="subscribe-txt">点击消息提醒</view>
|
||
</script>
|
||
</wx-open-subscribe>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 白金会员&钻石会员-权益列表 -->
|
||
<view class="cardArr" v-else>
|
||
<view class="cardArr-top">
|
||
<block v-if="content.rightArr.length > 0">
|
||
<view @click="userNav(item.category_id)" v-for="(item, index) in content.rightArr" :key="index"
|
||
class="indexCard">
|
||
<image class="indexCard-img" :src="item.cover"></image>
|
||
<view class="nowrap indexCard-title">{{ item.title }}</view>
|
||
<view class="nowrap indexCard-remark" v-if="item.description != null">{{ item.description }}
|
||
</view>
|
||
<view class="activity-tips indexCard-tips" v-if="item.label != ''">{{ item.label }}</view>
|
||
</view>
|
||
</block>
|
||
<block v-else>
|
||
<view class="legalTips">
|
||
<image src="/static/img/legal_tips.png"></image>
|
||
<text>抱歉, 此地区暂无权益</text>
|
||
</view>
|
||
</block>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 漂浮窗 -->
|
||
<movable-area class="indexFloat">
|
||
<movable-view y="340" direction="vertical" class="indexFloat-movable">
|
||
<view @tap="userUrl" :data-url="'/pages/favour/favour'" class="indexFloat-img">
|
||
<image src="https://card.ysd-bs.com/storage/materials/2021/09/01/index_float_00.png"
|
||
mode="aspectFill" class="indexFloat-animation"></image>
|
||
</view>
|
||
<view @tap="userUrl" :data-url="'/pages/code/code'" class="indexFloat-img">
|
||
<image src="https://card.ysd-bs.com/storage/materials/2021/09/01/index_float_01.png" mode="aspectFill"></image>
|
||
</view>
|
||
</movable-view>
|
||
</movable-area>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
const jweixin = require('jweixin-module');
|
||
import { activity, index, subscribeUrl, subscribeH5 } from '@/apis/interfaces/index'
|
||
import { washcarUrl } from '@/apis/interfaces/rights'
|
||
export default {
|
||
data() {
|
||
return {
|
||
address : {
|
||
cityName : "", // 市名称
|
||
districtName : "", // 区名称
|
||
cityCode : "", // 市编号
|
||
provinceCode : "" // 区编号
|
||
},
|
||
location: {
|
||
latitude : '', // 纬度
|
||
longitude: '' // 经度
|
||
},
|
||
stateType: "silver", // tab状态名称 shaky为活动中心 silver为白金会员 drill为钻石会员
|
||
content: {
|
||
swiperCurrent : 0,
|
||
current : 0, // 轮播图当前的下标
|
||
adverts : [], // 轮播列表
|
||
noticeData : [], // 公告列表
|
||
cardArr : [], // 活动权益列表
|
||
rightArr : [], // 白金会员&钻石会员权益列表
|
||
activities : [], // 周五福利日
|
||
subState : '' // 订阅状态
|
||
},
|
||
templateIds: 'R9LbtDjg9sC-o3xUS2kDcSQ9MS4I67LnacAS8Fsmxpo'
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
if(options.type){
|
||
getApp().globalData.shareObj = {
|
||
type : options.type,
|
||
goodsId : '',
|
||
userId : options.parent_id
|
||
}
|
||
}
|
||
},
|
||
onShow() {
|
||
// 获取定位信息
|
||
this.locaTion()
|
||
},
|
||
methods: {
|
||
// 获取H5config 基本信息
|
||
getH5Info() {
|
||
subscribeUrl({
|
||
url: location.href.split('#')[0],
|
||
list: ['chooseWXPay', ],
|
||
openTagList: ['wx-open-subscribe']
|
||
}).then(res => {
|
||
let takeData = JSON.parse(res)
|
||
jweixin.config({
|
||
debug: false,
|
||
appId: takeData.appId,
|
||
timestamp: takeData.timestamp,
|
||
nonceStr: takeData.nonceStr,
|
||
signature: takeData.signature,
|
||
jsApiList: ['wx-open-subscribe', 'wx-open-launch-app', 'launchAppLication'],
|
||
openTagList: ['wx-open-subscribe', 'wx-open-launch-app',
|
||
'wx-open-subscribe-dialog'
|
||
]
|
||
})
|
||
jweixin.ready(() => {
|
||
this.$nextTick(() => {
|
||
const btn = this.$refs.subscribeBtn;
|
||
btn.addEventListener('success', ({
|
||
detail
|
||
}) => {
|
||
let subscribeState = JSON.parse(detail.subscribeDetails); // 全部模板
|
||
for(let val in subscribeState){
|
||
let new_subscribeState = subscribeState[val]; // 获取每个模板状态
|
||
let new_status = JSON.parse(new_subscribeState);
|
||
switch (new_status.status) {
|
||
case "reject":
|
||
uni.showToast({
|
||
title: '用户拒绝订阅',
|
||
icon : 'none'
|
||
})
|
||
break;
|
||
case "accept":
|
||
subscribeH5(1).then((subscribeRes) => {
|
||
uni.showLoading({
|
||
title: subscribeRes,
|
||
icon: 'none',
|
||
})
|
||
setTimeout(function() {
|
||
uni.hideLoading();
|
||
}, 1000)
|
||
})
|
||
break;
|
||
default:
|
||
uni.showToast({
|
||
title: '用户取消订阅',
|
||
icon : 'none'
|
||
})
|
||
break;
|
||
}
|
||
}
|
||
});
|
||
btn.addEventListener('error', (err) => {
|
||
uni.showToast({
|
||
title: err,
|
||
icon : 'none'
|
||
})
|
||
})
|
||
})
|
||
})
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon: 'none'
|
||
})
|
||
})
|
||
},
|
||
|
||
// 权益信息
|
||
indexInfo(){
|
||
// 钻石+白金权益内容
|
||
let dataUrl = index
|
||
// 活动权益内容
|
||
if(this.stateType == 'shaky') dataUrl = activity
|
||
dataUrl({
|
||
type : this.stateType,
|
||
area_name: this.address.cityName,
|
||
user_lat : this.location.latitude,
|
||
user_lng : this.location.user_lng
|
||
}).then(res => {
|
||
this.content.adverts = res.adverts // 轮播
|
||
this.address.cityName = res.location.city_name || '', // 市名称
|
||
this.address.districtName= res.location.district_name || '',// 区名称
|
||
this.address.cityCode = res.location.city_id || '', // 市编号
|
||
this.address.provinceCode= res.location.province_id || '' // 区编号
|
||
this.content.noticeData = res.notice // 公告
|
||
this.content.rightArr = res.categorys || '' // 白金会员&钻石会员权益列表
|
||
this.content.cardArr = res.rights || '' // 权益列表
|
||
this.content.activities = res.activities || '' // 周五福利日
|
||
this.content.subState = res.welfare_subscribe // 周五福利订阅
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: err.message
|
||
})
|
||
})
|
||
},
|
||
|
||
// 获取位置
|
||
locaTion(){
|
||
uni.getLocation({
|
||
type : 'wgs84',
|
||
success : res=> {
|
||
this.location.latitude = res.latitude,
|
||
this.location.longitude = res.longitude
|
||
},
|
||
complete: () => {
|
||
// 获取权益信息
|
||
this.indexInfo();
|
||
}
|
||
})
|
||
},
|
||
|
||
// 活动中心权益跳转详情
|
||
rightNav(newId, newRight, newFrom) {
|
||
// 是否登录
|
||
if(uni.getStorageSync("token")) {
|
||
if(newFrom == 'washcar') {
|
||
washcarUrl({
|
||
welfare_id: newId,
|
||
right_config_id: newRight
|
||
}).then(res=>{
|
||
const newUrl = res
|
||
// #ifdef H5
|
||
window.location.href = newUrl
|
||
// #endif
|
||
})
|
||
} else {
|
||
// 跳转分类页
|
||
uni.navigateTo({
|
||
url: '/pages/rights/index?id=' + newRight
|
||
})
|
||
}
|
||
} else {
|
||
uni.navigateTo({
|
||
url: "/pages/auth/login"
|
||
})
|
||
}
|
||
},
|
||
|
||
// 白金和钻石会员权益
|
||
userNav(id) {
|
||
let user_lng = this.location.longitude, // 经度
|
||
user_lat = this.location.latitude, // 纬度
|
||
area_name = this.address.cityName // 市名称
|
||
if(uni.getStorageSync("token")) {
|
||
uni.navigateTo({
|
||
url: '/pages/classify/classify?id=' + id + '&userlng=' + user_lng + '&latitude=' + user_lat + '&areaname=' + area_name
|
||
})
|
||
return
|
||
}
|
||
uni.navigateTo({
|
||
url: "/pages/auth/login"
|
||
})
|
||
},
|
||
|
||
// 周五福利跳转
|
||
Snapup(text, canBuy, welfarId, canFrom, rightId) {
|
||
if(!canBuy) {
|
||
uni.showToast({
|
||
title : text,
|
||
icon : 'none',
|
||
duration: 2000
|
||
})
|
||
return
|
||
}
|
||
// 是否登录
|
||
if(uni.getStorageSync("token")) {
|
||
if(canFrom == 'washcar') {
|
||
washcarUrl({
|
||
welfare_id: welfarId,
|
||
right_config_id: rightId
|
||
}).then(res=>{
|
||
const newUrl = res
|
||
// #ifdef H5
|
||
window.location.href = newUrl
|
||
// #endif
|
||
})
|
||
} else {
|
||
// 跳转福利详情
|
||
uni.navigateTo({
|
||
url: '/pages/welfare/welfare?id=' + welfarId
|
||
})
|
||
}
|
||
} else {
|
||
uni.navigateTo({
|
||
url: "/pages/auth/login"
|
||
})
|
||
}
|
||
},
|
||
|
||
// 卡身份tabs
|
||
orderTab(e){
|
||
let newState = e.currentTarget.dataset.state
|
||
if(this.stateType != newState){
|
||
this.stateType = newState
|
||
|
||
if (this.stateType == 'shaky') {
|
||
this.getH5Info()
|
||
}
|
||
// 获取卡权益
|
||
this.indexInfo();
|
||
|
||
// 重置轮播图
|
||
this.content.swiperCurrent= 0
|
||
this.content.current = 0
|
||
}
|
||
},
|
||
|
||
// 点击轮播图片放大
|
||
clickImg(qrcode, url, channel) {
|
||
let newImg = qrcode,
|
||
newUrl = url,
|
||
newChannel = channel
|
||
// 点击图片放大
|
||
if (newChannel == 'image') {
|
||
if(newImg == "") return
|
||
let imgUrl = [newImg]
|
||
uni.previewImage({
|
||
urls : imgUrl, //需要预览的图片http链接列表，注意是数组
|
||
current : imgUrl[0] // 当前显示图片的http链接，默认是第一个
|
||
})
|
||
}
|
||
// 跳转内网
|
||
if (newChannel == 'pages') {
|
||
uni.navigateTo({
|
||
url: newUrl
|
||
})
|
||
}
|
||
// 跳转外网
|
||
if (newChannel == 'url') {
|
||
// #ifdef H5
|
||
window.location.href = newUrl
|
||
// #endif
|
||
}
|
||
},
|
||
|
||
// 防止swiper控件卡死
|
||
swiperChange(e){
|
||
if (this.content.current == 0 && this.content.swiperCurrent>1 ) {
|
||
// 卡死时，重置current为正确索引
|
||
this.content.current = this.content.swiperCurrent
|
||
}
|
||
else {
|
||
// 正常轮转时，记录正确页码索引
|
||
this.content.swiperCurrent = e.detail.current
|
||
}
|
||
},
|
||
|
||
// 周五福利订阅
|
||
subscribeTap() {},
|
||
|
||
// 处理未登录时的转跳
|
||
userUrl(e){
|
||
let pageUrl = e.currentTarget.dataset.url
|
||
if(uni.getStorageSync("token")) {
|
||
uni.navigateTo({
|
||
url: pageUrl
|
||
})
|
||
} else {
|
||
// 去登录
|
||
uni.navigateTo({
|
||
url: "/pages/auth/login"
|
||
})
|
||
}
|
||
},
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
/* 定位 */
|
||
.locationPicker {
|
||
padding-top: var(--status-bar-height);
|
||
background: #000;
|
||
color: #fff;
|
||
height: 80rpx;
|
||
line-height: 80rpx;
|
||
position: fixed;
|
||
width: 100%;
|
||
z-index: 1009;
|
||
top: 0;
|
||
left: 0;
|
||
.locationPicker-icon {
|
||
width: 38rpx;
|
||
height: 38rpx;
|
||
float: left;
|
||
vertical-align: middle;
|
||
margin: 22rpx 10rpx 0 20rpx;
|
||
}
|
||
.cityCont {
|
||
width: 60%;
|
||
display: flex;
|
||
view {
|
||
max-width: calc(100% - 50rpx);
|
||
}
|
||
image {
|
||
width: 50rpx;
|
||
height: 50rpx;
|
||
margin-top: 16rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 首页tab
|
||
.indexTab {
|
||
position: fixed;
|
||
display: flex;
|
||
width: 100%;
|
||
height: 90rpx;
|
||
line-height: 90rpx;
|
||
z-index: 99999;
|
||
padding: 0 40rpx;
|
||
top: calc(var(--status-bar-height) + 80rpx);
|
||
box-sizing: border-box;
|
||
background-color: #07081d;
|
||
.indexTab-lable {
|
||
text-align: center;
|
||
flex: 3;
|
||
color: #fff;
|
||
position: relative;
|
||
&.active {
|
||
background-image: -webkit-linear-gradient(left, #e4dab7, #d9b672);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
font-weight: 600;
|
||
font-size: 38rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 内容
|
||
.indexTop {
|
||
padding-top: calc(var(--status-bar-height) + 160rpx);
|
||
// 轮播图
|
||
.indexBanner {
|
||
height: 360rpx;
|
||
position: relative;
|
||
padding-top: 20rpx;
|
||
&::after {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
height: 240rpx;
|
||
width: 100%;
|
||
content: '';
|
||
background: #07081d;
|
||
border-radius: 0 0 200rpx 200rpx;
|
||
}
|
||
.banner {
|
||
position: relative;
|
||
padding-top: 48%;
|
||
width: calc(100% - 100rpx);
|
||
background: white;
|
||
margin: 0 50rpx;
|
||
border-radius: 30rpx;
|
||
overflow: hidden;
|
||
z-index: 99;
|
||
.banner-swiper {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
.banner-img {
|
||
width: 100%;
|
||
height: 100%;
|
||
vertical-align: top;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 指示点 */
|
||
.dots {
|
||
margin: 30rpx 0;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 100%;
|
||
view {
|
||
width: 14rpx;
|
||
height: 14rpx;
|
||
margin: 0 6rpx;
|
||
border-radius: 50%;
|
||
background-color: #c5c5c5;
|
||
&.active {
|
||
width: 24rpx;
|
||
border-radius: 40rpx;
|
||
background-color: #f46851;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 公告
|
||
.indexNews {
|
||
background: #dddddd;
|
||
padding: 25rpx 40rpx;
|
||
display: flex;
|
||
font-size: 28rpx;
|
||
image {
|
||
width: 34rpx;
|
||
height: 34rpx;
|
||
margin: 4rpx 20rpx 0 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 权益列表 */
|
||
.cardArr {
|
||
padding: 50rpx 0 30rpx;
|
||
box-sizing: border-box;
|
||
overflow: hidden;
|
||
.cardArr-top {
|
||
padding: 0 30rpx;
|
||
box-sizing: border-box;
|
||
flex-wrap: wrap;
|
||
display: flex;
|
||
margin-bottom: 20rpx;
|
||
.indexCard {
|
||
width: 33.33%;
|
||
text-align: center;
|
||
position: relative;
|
||
flex: 0 0 33.3333%;
|
||
margin-bottom: 40rpx;
|
||
.indexCard-img {
|
||
width: 140rpx;
|
||
height: 140rpx;
|
||
border-radius: 50%;
|
||
}
|
||
.indexCard-title {
|
||
font-weight: 600;
|
||
margin: 5rpx 20rpx;
|
||
font-size: 30rpx;
|
||
}
|
||
.indexCard-remark {
|
||
font-size: 26rpx;
|
||
color: #8a8a8a;
|
||
}
|
||
.activity-remark {
|
||
background-color: #000000;
|
||
display: inline-block;
|
||
border-radius: 40rpx;
|
||
height: 38rpx;
|
||
line-height: 38rpx;
|
||
padding: 0 10rpx;
|
||
}
|
||
.activity-remark text {
|
||
display: block;
|
||
background-image: -webkit-linear-gradient(left, #e4dab7, #d9b672);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
font-size: 22rpx;
|
||
}
|
||
.activity-tips {
|
||
position: absolute;
|
||
top: -10rpx;
|
||
right: 10rpx;
|
||
z-index: 9;
|
||
background-image: -webkit-linear-gradient(to left, #ff0000, #ff0000);
|
||
background-image: -moz-linear-gradient(to left, #ff0000, #ff0000);
|
||
background-image: linear-gradient(to left, #ff0000, #ff0000);
|
||
color: #fff;
|
||
font-size: 24rpx;
|
||
padding: 0 18rpx;
|
||
height: 40rpx;
|
||
line-height: 40rpx;
|
||
border-radius: 20rpx;
|
||
animation: zy 2.5s .15s linear infinite;
|
||
-moz-animation: zy 2.5s .15s linear infinite;
|
||
-webkit-animation: zy 2.5s .15s linear infinite;
|
||
-o-animation: zy 2.5s .15s linear infinite;
|
||
}
|
||
@keyframes zy {
|
||
10% {
|
||
transform: rotate(15deg);
|
||
}
|
||
|
||
20% {
|
||
transform: rotate(-10deg);
|
||
}
|
||
|
||
30% {
|
||
transform: rotate(5deg);
|
||
}
|
||
|
||
40% {
|
||
transform: rotate(-5deg);
|
||
}
|
||
|
||
50%,
|
||
100% {
|
||
transform: rotate(0deg);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.WelfareCont {
|
||
background-color: #000;
|
||
border: #fcf9da 2rpx solid;
|
||
padding: 30rpx;
|
||
box-sizing: border-box;
|
||
border-radius: 30rpx 30rpx 10rpx 10rpx;
|
||
position: relative;
|
||
.WelfareTop {
|
||
position: absolute;
|
||
top: -20rpx;
|
||
left: calc(50% - 225rpx);
|
||
width: 450rpx;
|
||
height: 70rpx;
|
||
.welfare-title,
|
||
.welfare_stra {
|
||
width: 100%;
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
height: 100%;
|
||
}
|
||
.welfare_stra {
|
||
height: 130%;
|
||
z-index: 2;
|
||
animation: star .3s ease-in infinite;
|
||
}
|
||
@keyframes star {
|
||
10% {
|
||
opacity: 0;
|
||
}
|
||
|
||
90% {
|
||
opacity: 1;
|
||
}
|
||
}
|
||
}
|
||
.WelfareTitle {
|
||
width: 100%;
|
||
text-align: center;
|
||
margin-bottom: 30rpx;
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
padding-top: 50rpx;
|
||
color: #f1cb8c;
|
||
text {
|
||
font-size: 64rpx;
|
||
}
|
||
}
|
||
.WelfareList {
|
||
position: relative;
|
||
width: 100%;
|
||
padding-top: 35%;
|
||
margin-bottom: 30rpx;
|
||
&:last-child {
|
||
margin: 0;
|
||
}
|
||
.WelfareList-img {
|
||
border-radius: 15rpx;
|
||
overflow: hidden;
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.WelfareList-back {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
padding: 45rpx 40rpx;
|
||
box-sizing: border-box;
|
||
z-index: 8;
|
||
display: flex;
|
||
.WelfareList-left {
|
||
width: 70rpx;
|
||
height: 70rpx;
|
||
margin-top: 6%;
|
||
}
|
||
.WelfareList-center {
|
||
font-size: 24rpx;
|
||
margin: 0 30rpx;
|
||
width: calc(100% - 250rpx);
|
||
.WelfareList-price {
|
||
font-size: 30rpx;
|
||
font-weight: 600;
|
||
}
|
||
.WelfareList-center-all {
|
||
margin: 10rpx 0;
|
||
color: #633c1b;
|
||
font-weight: 600;
|
||
}
|
||
.WelfareList-center-time {
|
||
position: relative;
|
||
padding-top: 25rpx;
|
||
color: #a37d4d;
|
||
&::after {
|
||
position: absolute;
|
||
content: '';
|
||
left: 0;
|
||
top: 0;
|
||
width: 60rpx;
|
||
height: 6rpx;
|
||
border-radius: 20rpx;
|
||
background-color: #d68f0d;
|
||
}
|
||
}
|
||
.WelfareList-center-time text,
|
||
.WelfareList-center-all text {
|
||
padding-right: 20rpx;
|
||
}
|
||
}
|
||
.WelfareList-right {
|
||
background: linear-gradient(to bottom, #e8b86d, #9d743e);
|
||
-webkit-background-size: 200% 100%;
|
||
-webkit-animation: masked-animation 2s infinite linear;
|
||
color: #fff;
|
||
height: 58rpx;
|
||
line-height: 58rpx;
|
||
font-size: 28rpx;
|
||
width: 120rpx;
|
||
text-align: center;
|
||
border-radius: 40rpx;
|
||
margin-top: 7%;
|
||
&.active {
|
||
background: linear-gradient(to bottom, #969696, #969696);
|
||
}
|
||
&.active text {
|
||
-webkit-animation: mymove 0s infinite linear;
|
||
}
|
||
text {
|
||
display: inline-block;
|
||
animation:mymove 2s infinite;
|
||
transform: scale(.9);
|
||
}
|
||
@keyframes mymove{
|
||
0%{
|
||
transform: scale(.9);
|
||
}
|
||
25%{
|
||
transform: scale(1);
|
||
}
|
||
50%{
|
||
transform: scale(.9);
|
||
}
|
||
75%{
|
||
transform: scale(1);
|
||
}
|
||
}
|
||
}
|
||
@-webkit-keyframes masked-animation {
|
||
0% { background-position: 0 0;}
|
||
100% { background-position: -100% 0;}
|
||
}
|
||
}
|
||
.WelfareList-img.active,
|
||
.WelfareList-left.active {
|
||
-webkit-filter: grayscale(100%);
|
||
-moz-filter: grayscale(100%);
|
||
-ms-filter: grayscale(100%);
|
||
-o-filter: grayscale(100%);
|
||
filter: grayscale(100%);
|
||
filter: gray;
|
||
}
|
||
.WelfareList-center-time.active,
|
||
.WelfareList-center-all.active {
|
||
color: #929292;
|
||
}
|
||
.WelfareList-center-time.active::after {
|
||
background-color: #cccccc;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 首页轮播光
|
||
.light {
|
||
cursor: pointer;
|
||
position: absolute;
|
||
left: -100%;
|
||
top: 0;
|
||
width: 40px;
|
||
height: 100%;
|
||
background: rgba(255, 255, 255, 0);
|
||
transform: skewx(25deg);
|
||
-webkit-transition: all .5s ease-in;
|
||
-moz-transition: all .5s ease-in;
|
||
-o-transition: all .5s ease-in;
|
||
transition: all .5s ease-in;
|
||
animation-name: example;
|
||
animation-duration: 3.5s;
|
||
animation-iteration-count: infinite;
|
||
}
|
||
@keyframes example {
|
||
0% {
|
||
left: -100%;
|
||
background: rgba(255, 255, 255, .4);
|
||
}
|
||
|
||
50% {
|
||
left: -50%;
|
||
background: rgba(255, 255, 255, .7);
|
||
}
|
||
|
||
100% {
|
||
left: 100%;
|
||
background: rgba(255, 255, 255, 0);
|
||
}
|
||
}
|
||
|
||
/* 滚动 */
|
||
/*首页跑马灯效果*/
|
||
@keyframes around {
|
||
from {
|
||
margin-left: 60rpx;
|
||
}
|
||
|
||
to {
|
||
/* var接受传入的变量 */
|
||
margin-left: var(--marqueeWidth--);
|
||
}
|
||
}
|
||
|
||
.marquee_container {
|
||
width: calc(100% - 40rpx);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.marquee_container:hover {
|
||
/* 不起作用 */
|
||
animation-play-state: paused;
|
||
}
|
||
|
||
.marquee_text {
|
||
font-size: 28rpx;
|
||
display: inline-block;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.marquee_text.active {
|
||
animation-name: around;
|
||
animation-duration: 20s;
|
||
/*过渡时间*/
|
||
animation-iteration-count: infinite;
|
||
animation-timing-function: linear;
|
||
}
|
||
|
||
// 周五订阅
|
||
.subscribe {
|
||
color: #89663f;
|
||
width: 100%;
|
||
padding: 0 100rpx;
|
||
display: inline-block;
|
||
box-sizing: border-box;
|
||
margin-top: 50rpx;
|
||
display: flex;
|
||
.subscribe-icon,
|
||
.subscribe-cont {
|
||
height: 80rpx;
|
||
text-align: center;
|
||
line-height: 80rpx;
|
||
position: relative;
|
||
}
|
||
.subscribe-icon {
|
||
width: 150rpx;
|
||
padding-left: 30rpx;
|
||
box-sizing: border-box;
|
||
background: linear-gradient(to right, #f3c988, #f9e0b8);
|
||
border-radius: 40rpx 0 0 40rpx;
|
||
&::after{
|
||
position: absolute;
|
||
content: '';
|
||
right: -50rpx;
|
||
top: 0;
|
||
width: 0;
|
||
height: 0;
|
||
border-bottom: 80rpx solid #f9e0b8;
|
||
border-right: 50rpx solid transparent;
|
||
z-index: 9;
|
||
}
|
||
image {
|
||
width: 54rpx;
|
||
height: 54rpx;
|
||
margin-top: 14rpx;
|
||
}
|
||
.subscribe-icon-one {
|
||
-webkit-animation: bounce-right 1s linear infinite;
|
||
animation: bounce-right 1s linear infinite;
|
||
}
|
||
@keyframes bounce-right {
|
||
25% {transform: translateX(-3px);}
|
||
50%, 100% {transform: translateX(0);}
|
||
75% {transform: translateX(3px);}
|
||
}
|
||
.subscribe-icon-two {
|
||
-webkit-animation: bounce-two 1s linear infinite;
|
||
animation: bounce-two 1s linear infinite;
|
||
}
|
||
@keyframes bounce-two {
|
||
25% {opacity: 0;transform: translateX(-3px);}
|
||
75% {opacity: 1;transform: translateX(3px);}
|
||
}
|
||
}
|
||
.subscribe-cont {
|
||
width: calc(100% - 150rpx);
|
||
background: linear-gradient(to right, #f3c988, #f9e0b8);
|
||
border-radius: 0 40rpx 40rpx 0;
|
||
font-weight: 600;
|
||
text {
|
||
display: inline-block;
|
||
-webkit-animation: subscribeCont 1s linear infinite;
|
||
animation: subscribeCont 1s linear infinite;
|
||
}
|
||
@keyframes subscribeCont {
|
||
25% {transform: scale(.98);}
|
||
50%, 100% {transform: scale(1);}
|
||
75% {transform: scale(1.05);}
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 权益提示 */
|
||
.legalTips {
|
||
text-align: center;
|
||
font-size: 28rpx;
|
||
color: #999;
|
||
padding: 80rpx;
|
||
margin: 0 auto;
|
||
image {
|
||
width: 240rpx;
|
||
height: 180rpx;
|
||
display: block;
|
||
margin: 0 auto 40rpx;
|
||
}
|
||
}
|
||
|
||
|
||
/* 漂浮弹出层 */
|
||
.indexFloat {
|
||
position: fixed;
|
||
height: 70%;
|
||
width: 110rpx;
|
||
right: 20rpx;
|
||
bottom: 180rpx;
|
||
z-index: 99;
|
||
}
|
||
|
||
.indexFloat-movable {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 280rpx;
|
||
z-index: 99;
|
||
}
|
||
|
||
.indexFloat-img image {
|
||
width: 130rpx;
|
||
height: 130rpx;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.indexFloat-animation {
|
||
animation: shake 3s linear infinite;
|
||
}
|
||
|
||
@keyframes shake {
|
||
70%, 80% {
|
||
transform: rotate(7deg);
|
||
}
|
||
75% {
|
||
transform: rotate(-7deg);
|
||
}
|
||
|
||
65%,
|
||
85% {
|
||
transform: rotate(0);
|
||
}
|
||
}
|
||
</style>
|