zhangjing/cardtest
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

[更新]

Browse Source
This commit is contained in:
张慢慢
2021-05-24 13:56:00 +08:00
commit a7995d90bc
208 changed files with 13143 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

240
pages/index/index.js Normal file
View File

@@ -0,0 +1,240 @@
/*
* 本时生活
*/
const app = getApp()
Page({
/**
* 页面的初始数据
*/
data: {
swiperCurrent :0,
current :0, //轮播图当前的下标
dots :true,
cityAll : '',
statusBarHeight : getApp().globalData.systInfo.statusBarHeight,
longitude : 0, //经度
latitude : 0, //纬度
adverts : [], //轮播图
stateType : "silver",
cardArr : [], //权益数组
activities : [], //周五福利
isUser : false, //用户登录状态
noticeData : '', //首页公告
loading : true, //骨架屏加载
address : {
city: "", //市
area: "", //区
city_code: "", //市编号
area_code: "" //区编号
}
},
/**
* 生命周期函数--监听页面显示
*/
onShow () {
this.locaTion()
// 获取用户登录状态
this.setData({
isUser : getApp().globalData.isUser
})
},
/**
* 获取位置
*/
locaTion(){
wx.getLocation({
success: res => {
this.setData({
latitude    : res.latitude,
                    longitude   : res.longitude
                })
},
complete: () => {
// 获取卡权益
this.indexInfo();
}
})
},
/**
* 卡权益
*/
indexInfo() {
if(this.data.stateType == 'shaky') {
wx.$api.index.index(this.data.city, this.data.longitude, this.data.latitude).then(res=>{
this.setData({
adverts : res.data.adverts,
cardArr : res.data.rights,
activities : res.data.activities,
noticeData : res.data.notice,
loading : false,
address : {
city: res.data.location.city_name,
area: res.data.location.district_name || "",
city_code: res.data.location.city_id,
area_code: res.data.location.district_id || ""
}
})
wx.stopPullDownRefresh()
}).catch(err=>{
if(!err.login){
// 写入缓存
wx.setStorage({
key : 'token',
data : ''
})
}
})
} else {
wx.$api.index.choice(this.data.stateType,this.data.city, this.data.longitude, this.data.latitude).then(res=>{
this.setData({
adverts : res.data.adverts,
cardArr : res.data.categorys,
noticeData : res.data.notice,
cityName : res.data.city_name,
loading : false,
address : {
city: res.data.location.city_name,
area: res.data.location.district_name || "",
city_code: res.data.location.city_id,
area_code: res.data.location.district_id || ""
}
})
wx.stopPullDownRefresh()
}).catch(err=>{
if(!err.login){
// 写入缓存
wx.setStorage({
key : 'token',
data : ''
})
}
})
}
},
/**
* tabs
*/
orderTab(e){
if(this.data.stateType != e.currentTarget.dataset.state){
this.setData({
stateType: e.currentTarget.dataset.state
})
// 获取卡权益
this.indexInfo()
// 重置轮播图
this.setData({
current : 0,
swiperCurrent: 0
});
}
},
/**
* 处理未登录时的转跳
*/
userNav(e){
let id = e.currentTarget.dataset.id
wx.getStorage({
key : 'token',
success:res=>{
wx.navigateTo({
url: '/pages/classify/classify?id=' + id
})
},
fail: (err) => {
wx.navigateTo({
url: "/pages/login/login"
})
}
})
},
/**
* 点击图片放大
*/
clickImg(e) {
if(e.currentTarget.dataset.img == "") return
let imgUrl = [e.currentTarget.dataset.img]
wx.previewImage({
urls : imgUrl, //需要预览的图片http链接列表，注意是数组
current : imgUrl[0] // 当前显示图片的http链接，默认是第一个
})
},
/**
* 周五福利抢购
*/
Snapup(e) {
let canBuy = e.currentTarget.dataset.can,
canText = e.currentTarget.dataset.text,
canId = e.currentTarget.dataset.id
if(!canBuy) {
wx.showToast({
title : canText,
icon : 'none',
duration: 2000
})
return
}
// 跳转分类页
wx.navigateTo({
url: '/pages/welfare/welfare?id=' + canId
})
},
/**
* 活动中心权益跳转详情
*/
rightNav(e) {
let id = e.currentTarget.dataset.id
wx.getStorage({
key : 'token',
success:res=>{
wx.navigateTo({
url: '/pages/rights/rights?id=' + id
})
},
fail: (err) => {
wx.navigateTo({
url: "/pages/login/login"
})
}
})
},
/**
* 下拉刷新
*/
onPullDownRefresh(){
// 获取卡权益
this.indexInfo();
this.locaTion();
},
/**
* 防止swiper控件卡死
*/
swiperChange(e){
if (this.data.current == 0 && this.data.swiperCurrent>1 ) {//卡死时，重置current为正确索引
this.setData({ current: this.data.swiperCurrent });
}
else {//正常轮转时，记录正确页码索引
this.setData({ swiperCurrent: e.detail.current });
}
}
})

10
pages/index/index.json Normal file
View File

@@ -0,0 +1,10 @@
{
"usingComponents": {},
"navigationBarTitleText": "",
"navigationBarBackgroundColor": "#000000",
"backgroundColor": "#f4f4f4",
"navigationBarTextStyle": "white",
"navigationStyle" : "custom",
"backgroundTextStyle" : "dark",
"enablePullDownRefresh" : true
}

95
pages/index/index.skeleton.wxml Normal file
View File

@@ -0,0 +1,95 @@
<!--
此文件为开发者工具生成，生成时间: 2021/4/22 下午3:55:40
使用方法：
在 H:\工作项目\亿时代-本时生活-2021-04-13\本时生活\pages\index\index.wxml 引入模板
```
<import src="index.skeleton.wxml"/>
<template is="skeleton" wx-if="{{loading}}" />
```
在 H:\工作项目\亿时代-本时生活-2021-04-13\本时生活\pages\index\index.wxss 中引入样式
```
@import "./index.skeleton.wxss";
```
更多详细信息可以参考文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/skeleton.html
-->
<template name="skeleton">
<view class="sk-container">
<view class="locationPicker" style="padding-top:44px;">
<image class="locationPicker-icon sk-image"></image>
<navigator class="cityCont" hover-class="none">
<view class="nowrap sk-transparent">
<text class="sk-transparent sk-text-30-0000-789 sk-text">哈尔滨市</text>南岗区
</view>
<image class="sk-image"></image>
</navigator>
</view>
<view class="indexTab" style="top:84px;">
<view class="indexTab-lable active sk-transparent sk-image" data-state="shaky">活动中心
</view>
<view class="indexTab-lable sk-transparent sk-text-32-2222-11 sk-text" data-state="silver" style="background-position-x: 50%;">白金会员
</view>
<view class="indexTab-lable sk-transparent sk-text-32-2222-270 sk-text" data-state="drill" style="background-position-x: 50%;">钻石会员
</view>
</view>
<view class="indexTop" style="padding-top:124px;">
<view class="indexBanner sk-pseudo sk-pseudo-circle">
<view class="banner">
<swiper autoplay="false" class="banner-swiper" current="0" interval="3000">
<swiper-item style="position: absolute; width: 100%; height: 100%; transform: translate(0%, 0px) translateZ(0px);">
<image class="banner-img sk-image" data-img="true" data-index="0" mode="aspectFill" show-menu-by-longpress="true"></image>
<i class="light"></i>
</swiper-item>
</swiper>
</view>
</view>
<view class="dots">
<view class="active"></view>
</view>
<view class="indexNews">
<image class="sk-image"></image>
<view class="marquee_container" style="--marqueeWidth--:-30em">
<view class="marquee_text sk-transparent sk-text-14-2857-898 sk-text">您的预约已成功，请点击继续办理</view>
</view>
</view>
<view class="cardArr">
<view class="cardArr-top">
<view class="legalTips">
<image class="sk-image"></image>
<text class="sk-transparent sk-text-14-2857-980 sk-text" style="background-position-x: 50%;">抱歉, 此地区暂无权益</text>
</view>
</view>
<view class="Welfare">
<view class="WelfareTitle">
<text class="sk-transparent sk-image">周五会员福利日</text>
</view>
<view class="WelfareList sk-pseudo sk-pseudo-circle">
<view class="WelfareList-back" data-can="true" data-id="1" data-text="可购买">
<image class="WelfareList-img sk-image"></image>
<view class="WelfareList-left">
<view class="cell">
<view class="WelfareList-left-price sk-transparent">15
<text class="sk-transparent sk-text-14-2857-662 sk-text" style="background-position-x: 50%;"> 元</text>
</view>
<view class="WelfareList-left-title sk-transparent sk-text-14-2857-553 sk-text" style="background-position-x: 50%;">全车型洗车券</view>
</view>
</view>
<view class="WelfareList-right">
<view class="WelfareList-cont">
<view class="nowrap WelfareList-title sk-transparent sk-text-13-6364-777 sk-text">每周五：</view>
<view class="nowrap WelfareList-text sk-transparent sk-text-13-6364-28 sk-text">08:00:00 开抢</view>
<view class="nowrap WelfareList-all sk-transparent sk-text-22-7273-273 sk-text">[限量100份] [剩余97份]</view>
</view>
</view>
<view class="WelfareList-btn sk-pseudo sk-pseudo-circle">
<text class="sk-transparent sk-image">抢</text>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>

94
pages/index/index.skeleton.wxss Normal file
View File

@@ -0,0 +1,94 @@
/*
此文件为开发者工具生成，生成时间: 2021/4/22 下午3:55:40
在 H:\工作项目\亿时代-本时生活-2021-04-13\本时生活\pages\index\index.wxss 中引入样式
```
@import "./index.skeleton.wxss";
```
更多详细信息可以参考文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/skeleton.html
*/
.sk-transparent {
color: transparent !important;
}
.sk-text-30-0000-789 {
background-image: linear-gradient(transparent 30.0000%, #EEEEEE 0%, #EEEEEE 70.0000%, transparent 0%) !important;
background-size: 100% 80.0000rpx;
position: relative !important;
}
.sk-text {
background-origin: content-box !important;
background-clip: content-box !important;
background-color: transparent !important;
color: transparent !important;
background-repeat: repeat-y !important;
}
.sk-text-32-2222-11 {
background-image: linear-gradient(transparent 32.2222%, #EEEEEE 0%, #EEEEEE 67.7778%, transparent 0%) !important;
background-size: 100% 90.0000rpx;
position: relative !important;
}
.sk-text-32-2222-270 {
background-image: linear-gradient(transparent 32.2222%, #EEEEEE 0%, #EEEEEE 67.7778%, transparent 0%) !important;
background-size: 100% 90.0000rpx;
position: relative !important;
}
.sk-text-14-2857-898 {
background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
background-size: 100% 39.2000rpx;
position: relative !important;
}
.sk-text-14-2857-980 {
background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
background-size: 100% 39.2000rpx;
position: relative !important;
}
.sk-text-14-2857-662 {
background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
background-size: 100% 39.2000rpx;
position: relative !important;
}
.sk-text-14-2857-553 {
background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
background-size: 100% 39.2000rpx;
position: relative !important;
}
.sk-text-13-6364-777 {
background-image: linear-gradient(transparent 13.6364%, #EEEEEE 0%, #EEEEEE 86.3636%, transparent 0%) !important;
background-size: 100% 44.0000rpx;
position: relative !important;
}
.sk-text-13-6364-28 {
background-image: linear-gradient(transparent 13.6364%, #EEEEEE 0%, #EEEEEE 86.3636%, transparent 0%) !important;
background-size: 100% 44.0000rpx;
position: relative !important;
}
.sk-text-22-7273-273 {
background-image: linear-gradient(transparent 22.7273%, #EEEEEE 0%, #EEEEEE 77.2727%, transparent 0%) !important;
background-size: 100% 44.0000rpx;
position: relative !important;
}
.sk-image {
background: #EFEFEF !important;
}
.sk-pseudo::before, .sk-pseudo::after {
background: #EFEFEF !important;
background-image: none !important;
color: transparent !important;
border-color: transparent !important;
}
.sk-pseudo-rect::before, .sk-pseudo-rect::after {
border-radius: 0 !important;
}
.sk-pseudo-circle::before, .sk-pseudo-circle::after {
border-radius: 50% !important;
}
.sk-container {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: hidden;
background-color: transparent;
}

142
pages/index/index.wxml Normal file
View File

@@ -0,0 +1,142 @@
<import src="index.skeleton.wxml" />
<template is="skeleton" wx-if="{{loading}}" />
<block wx:if="{{!loading}}">
<!-- 定位 -->
<view class="locationPicker" style="padding-top:{{statusBarHeight}}px;">
<image class="locationPicker-icon" src="/static/icon/indexSite.png"></image>
<navigator url="/pages/switchcity/switchcity?city_code={{address.city_code}}&area_code={{address.area_code}}&city={{address.city}}&area={{address.area}}" hover-class="none" class="cityCont">
<view class="nowrap">
<text>{{address.city}}{{address.area}}</text>
</view>
<image src="/static/img/arrow.png"></image>
</navigator>
</view>
<!-- 首页 -->
<view class="indexTab" style="top:{{statusBarHeight + 40}}px;">
<view class="indexTab-lable {{stateType == 'shaky' ? 'active':''}}" data-state="shaky" bindtap="orderTab">活动中心
</view>
<view class="indexTab-lable {{stateType == 'silver' ? 'active':''}}" data-state="silver" bindtap="orderTab">白金会员
</view>
<view class="indexTab-lable {{stateType == 'drill' ? 'active':''}}" data-state="drill" bindtap="orderTab">钻石会员
</view>
</view>
<view class="indexTop" style="padding-top:{{statusBarHeight + 80}}px;">
<!-- 卡片轮播 -->
<view class="indexBanner">
<view class="banner">
<swiper class="banner-swiper" interval="3000" autoplay bindchange="monitorCurrent" current="{{current}}">
<swiper-item wx:for="{{adverts}}" wx:key="adverts">
<image class="banner-img" src="{{item.cover}}" show-menu-by-longpress="true" mode="aspectFill"
bindtap="clickImg" data-img="{{item.qrcode}}" data-index="{{index}}">
</image>
<i class="light"></i>
</swiper-item>
</swiper>
<swiper class="banner-swiper" interval="3000" autoplay circular current="{{current}}" bindchange="swiperChange">
<swiper-item wx:for="{{adverts}}" wx:key="adverts" bindtap="navigato" data-url="{{item.url}}">
<image class="banner-img" src="{{item.cover}}" show-menu-by-longpress="true" mode="aspectFill"
bindtap="clickImg" data-img="{{item.qrcode}}" data-index="{{index}}">
</image>
<i class="light"></i>
</swiper-item>
</swiper>
</view>
</view>
<!-- 自定义轮播图进度点 -->
<view class="dots">
<block wx:for="{{adverts}}" wx:key="cardBanner">
<view class='{{index == swiperCurrent ? "active":""}}'></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 {{ noticeData.length > 20 ? 'active' : ''}}">{{noticeData}}</view>
</view>
</view>
<!-- 活动中心-权益列表 -->
<view class="cardArr" wx:if="{{stateType == 'shaky'}}">
<view class="cardArr-top">
<block wx:if="{{cardArr.length > 0}}">
<view bindtap="rightNav" wx:for="{{cardArr}}" wx:key="cardArr" class="indexCard"
data-id="{{item.right_config_id}}">
<image class="indexCard-img" src="{{item.cover}}"></image>
<view class="nowrap indexCard-title">{{item.title}}</view>
<view class="nowrap activity-remark" wx:if="{{item.subtitle != null}}">
<text class="nowrap">{{item.subtitle}}</text>
</view>
<view class="activity-tips" wx:if="{{item.label}}">{{item.label}}</view>
</view>
</block>
<block wx:else>
<view class="legalTips">
<image src="/static/img/legal_tips.png"></image>
<text>抱歉, 此地区暂无权益</text>
</view>
</block>
</view>
<!-- 福利日 -->
<view class="Welfare" wx:if="{{activities.length > 0}}">
<view class="WelfareTitle"><text>周五会员福利日</text></view>
<view class="WelfareList">
<view class="WelfareList-back" bindtap="Snapup" wx:for="{{activities}}" wx:key="activities"
data-text="{{item.code_text}}" data-can="{{item.canBuy}}" data-id="{{item.welfare_id}}">
<image class="WelfareList-img {{item.surplus == 0 ? 'active' : ''}}"
src="/static/img/welfare_back.png"></image>
<view class="WelfareList-left">
<view class="cell">
<view class="WelfareList-left-price">{{item.price}}<text> 元</text></view>
<view class="WelfareList-left-title">{{item.title}}</view>
</view>
</view>
<view class="WelfareList-right">
<view class="WelfareList-cont">
<view class="nowrap WelfareList-title">每周五：</view>
<view class="nowrap WelfareList-text">{{item.start_time}} 开抢</view>
<view class="nowrap WelfareList-text">{{item.end_time}} 结束</view>
<view class="nowrap WelfareList-all">[限量{{item.stock}}份] [剩余{{item.surplus}}份]</view>
</view>
</view>
<view class="WelfareList-btn {{item.surplus == 0 ? 'active' : ''}}">
<text>抢</text>
</view>
</view>
</view>
</view>
</view>
<!-- 白金会员&钻石会员-权益列表 -->
<view class="cardArr" wx:else>
<view class="cardArr-top">
<block wx:if="{{cardArr.length > 0}}">
<!-- <view bindtap="userNav" wx:for="{{cardArr}}" wx:key="cardArr" class="indexCard" data-id="{{item.id}}"
data-type="{{item.get_type}}"> -->
<view bindtap="userNav" data-id="{{item.category_id}}" wx:for="{{cardArr}}" wx:key="cardArr"
class="indexCard">
<image class="indexCard-img" src="{{item.cover}}"></image>
<view class="nowrap indexCard-title">{{item.title}}</view>
<view class="nowrap indexCard-remark" wx:if="{{item.description != null}}">{{item.description}}
</view>
<view class="activity-tips indexCard-tips" wx:if="{{item.label != ''}}">{{item.label}}</view>
</view>
</block>
<block wx:else>
<view class="legalTips">
<image src="/static/img/legal_tips.png"></image>
<text>抱歉, 此地区暂无权益</text>
</view>
</block>
</view>
</view>
</view>
</block>

544
pages/index/index.wxss Normal file
View File

@@ -0,0 +1,544 @@
/* 首页 */
page {
background: #fff;
}
.indexTab {
position: fixed;
display: flex;
width: 100%;
height: 90rpx;
line-height: 90rpx;
z-index: 999;
padding: 0 40rpx;
top: 80rpx;
box-sizing: border-box;
background-color: #07081d;
}
.indexTab-lable {
text-align: center;
flex: 3;
color: #fff;
position: relative;
}
.indexTab-lable.active {
background-image: -webkit-linear-gradient(left, #e4dab7, #d9b672);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 600;
font-size: 38rpx;
}
/* 轮播图 */
.indexBanner {
height: 360rpx;
position: relative;
padding-top: 20rpx;
}
.indexBanner::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%;
}
.dots view {
width: 14rpx;
height: 14rpx;
margin: 0 6rpx;
border-radius: 50%;
background-color: #c5c5c5;
}
.dots .active {
width: 24rpx;
border-radius: 40rpx;
background-color: #f46851;
}
/* 提示 */
.indexNews {
background: #dddddd;
padding: 25rpx 40rpx;
display: flex;
font-size: 28rpx;
}
.indexNews image {
width: 34rpx;
height: 34rpx;
margin: 4rpx 20rpx 0 0;
}
/* 权益列表 */
.cardArr {
padding: 40rpx 30rpx 30rpx;
box-sizing: border-box;
overflow: hidden;
}
.cardArr-top {
flex-wrap: wrap;
display: flex;
}
.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%;
}
.activity-tips {
position: absolute;
top: -10rpx;
right: 10rpx;
z-index: 9;
background-image: -webkit-linear-gradient(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;
}
.indexCard-tips {
background-image: -webkit-linear-gradient(left, #ef354c, #ef001e);
color: #fff300;
height: 34rpx;
line-height: 32rpx;
padding: 0 10rpx;
right: 25rpx;
}
@keyframes zy {
10% {
transform: rotate(15deg);
}
20% {
transform: rotate(-10deg);
}
30% {
transform: rotate(5deg);
}
40% {
transform: rotate(-5deg);
}
50%,
100% {
transform: rotate(0deg);
}
}
.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;
}
/* 定位 */
.locationPicker {
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;
}
.locationPicker-region-icon {
width: 44rpx;
height: 44rpx;
margin-top: 12rpx;
}
.cityCont {
width: 60%;
display: flex;
}
.cityCont view {
max-width: calc(100% - 50rpx);
}
.cityCont image {
width: 50rpx;
height: 50rpx;
margin-top: 16rpx;
}
/* 权益提示 */
.legalTips {
text-align: center;
font-size: 28rpx;
color: #999;
padding: 80rpx;
margin: 0 auto;
}
.legalTips image {
width: 240rpx;
height: 180rpx;
display: block;
margin: 0 auto 40rpx;
}
/* 滚动 */
/*首页跑马灯效果*/
@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;
}
/* 福利日 */
.Welfare {
text-align: center;
}
.WelfareTitle {
display: inline-block;
background-color: #020202;
border-radius: 20rpx 20rpx 10rpx 10rpx;
height: 68rpx;
line-height: 68rpx;
padding: 0 50rpx;
}
.WelfareTitle text,
.WelfareList-btn text {
background-image: -webkit-linear-gradient(left, #e4dab7, #d9b672);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.WelfareTitle text {
font-weight: 600;
font-size: 38rpx;
}
.WelfareList {
background-color: #020202;
border-radius: 20rpx;
padding: 40rpx 30rpx;
box-sizing: border-box;
position: relative;
overflow: hidden;
}
.WelfareList::after {
position: absolute;
content: '';
top: -60rpx;
right: 0;
background-image: -moz-linear-gradient(right, rgba(255, 255, 255, .2), rgba(0, 0, 0, 0));
background-image: -webkit-linear-gradient(right, rgba(255, 255, 255, .2), rgba(0, 0, 0, 0));
background-image: linear-gradient(right, rgba(255, 255, 255, .2), rgba(0, 0, 0, 0));
width: 200rpx;
height: 200rpx;
border-radius: 50%;
}
.WelfareList-back {
position: relative;
width: 100%;
height: 220rpx;
padding: 30rpx;
box-sizing: border-box;
margin-bottom: 40rpx;
}
.WelfareList-back:last-child {
margin: 0;
}
.WelfareList-img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.WelfareList-img.active {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;
}
.WelfareList-left,
.WelfareList-right,
.WelfareList-btn {
position: absolute;
z-index: 2;
left: 0;
}
.WelfareList-left {
top: -4rpx;
width: 180rpx;
font-weight: 600;
display:table;
height: 226rpx;
}
.cell {
display:table-cell;
vertical-align:middle;
}
.WelfareList-left-title {
font-size: 28rpx;
word-break:normal;
padding: 0 30rpx;
box-sizing: border-box;
}
.WelfareList-left .WelfareList-left-price {
font-size: 40rpx;
}
.WelfareList-left text {
font-size: 28rpx;
font-weight: 600;
}
.WelfareList-right {
line-height: 44rpx;
width: 100%;
padding-left: 200rpx;
padding-right: 160rpx;
box-sizing: border-box;
text-align: left;
display: flex;
}
.WelfareList-cont {
width: 100%;
margin-top: -8rpx;
}
.WelfareList-btn {
left: auto;
top: 55rpx;
right: 30rpx;
background-color: #020202;
width: 110rpx;
height: 110rpx;
text-align: center;
line-height: 110rpx;
border-radius: 50%;
overflow: hidden;
}
.WelfareList-btn::after {
position: absolute;
content: '';
top: -50rpx;
left: 0;
background-image: -moz-linear-gradient(right, rgba(255, 255, 255, .25), rgba(0, 0, 0, 0));
background-image: -webkit-linear-gradient(right, rgba(255, 255, 255, .25), rgba(0, 0, 0, 0));
background-image: linear-gradient(right, rgba(255, 255, 255, .25), rgba(0, 0, 0, 0));
width: 100rpx;
height: 100rpx;
border-radius: 50%;
}
.WelfareList-btn.active {
background-color: #9c9c9c;
}
.WelfareList-btn.active::before {
position: absolute;
content: '';
width: 100%;
height: 4rpx;
background-color: #cecece;
left: 0;
top: 50%;
transform:rotate(45deg);
}
.WelfareList-btn.active text {
background-image: -moz-linear-gradient(#c3c3c3);
background-image: -webkit-linear-gradient(#c3c3c3);
background-image: linear-gradient(#c3c3c3);
-webkit-text-fill-color: #c3c3c3;
}
.WelfareList-btn text {
font-weight: 600;
font-size: 54rpx;
}
.WelfareList-all {
font-size: 24rpx;
}
.WelfareList-text {
font-size: 28rpx;
}
.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);
}
}