<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>
