<template>
    <view class="ActInProBox column"
    :class="[Details.Level>0?`activeLv${Details.Level}`:'activeLv1']">
        <scroll-view :scroll-y="true"
        style="height: 1px;flex: 1;box-sizing: border-box;"
        @scroll="scroll"
        :scroll-top="scrollTop">
        <view class="ActInProHeaderBox" :style="{ opacity: 100 - boxOption + '%' }"
        :class="[Details.Level>0?`activeLv${Details.Level}`:'activeLv1']">
            <headers :title="page" color="#fff"></headers>
            <view class="ActInProHeader" v-if="Details&&Details.TradeMoney>=0">
                <view class="ActInProHeaderTitle">
                    Lv{{ Details.Level>0?Details.Level:1 }}
                    <text>
                        <template v-if="Details.Level<=1">出发序章</template>
                        <template v-else-if="Details.Level==2">秘境探索</template>
                        <template v-else-if="Details.Level==3">云端行者</template>
                        <template v-else-if="Details.Level==4">丝路征程</template>
                        <template v-else-if="Details.Level==5">寰宇旅人</template>
                    </text>
                </view>
                <view class="ActInProHeaderTime row-sbas-n">
                    <view>有效期至{{ Details.EndTime }}</view>
                    <view class="col" @click="goTisp">规则说明</view>
                </view>
                <view class="ActInProHeaderNum row">
                    <view class="ActInProHeaderNT ActInProHeaderNTL col column">
                        <view>当前交易额</view>
                        <view>¥<text>{{ Details.TradeMoney.toFixed(2) }}</text></view>
                    </view>
                    <view class="ActInProHeaderNT ActInProHeaderNTR col column">
                        <view>预计收益</view>
                        <view>¥<text>{{ Details.TotalClosePrice.toFixed(2) }}</text></view>
                    </view>
                </view>
                <view class="lineBox" v-if="Details.TradeMoney<Details.MaxMoney">
                    <view class="greyLine"></view>
                    <view class="lineHigBox"
                    :style="{'width': `${progress}%`}">
                        <view class="lineHighlight" v-if="Details.TradeMoney>0">
                            <view></view>
                        </view>
                    </view>
                </view>
                <view class="ActInProHeaMoney row-sb-n">
                    <view>
                        <template v-if="Details.TradeMoney>Details.MaxMoney">
                            已达最高交易额{{ Details.MaxMoney }},返{{Details.Ratio}}‰
                        </template>
                        <template v-else-if="Details.TradeMoney>Details.Money">
                            当前返{{Details.Ratio}}‰
                        </template>
                        <template v-else>
                            交易额达{{ Details.Money }},返{{Details.Ratio}}‰
                        </template>
                    </view>
                    <view v-if="Details.RatioNext">下一级返{{Details.RatioNext}}‰</view>
                </view>
            </view>
        </view>
        <view v-if="scrollTop > 50" class="ActInProHeaders">
            <headers v-if="scrollTop > 50" :title="page"></headers>
            <view style="padding: 0 40rpx;">
                <view v-if="scrollTop > 650" class="ActInProCenTimeBox row-sbas-n"
                    style="padding: 10rpx 0 30rpx;">
                    <view class="row items-center">
                        <view class="ActInProCenTimeAll"
                        :class="[isType==1?'active':'']"
                        @click="SelectDate(1)">
                            全部
                        </view>
                        <view class="ActInProCenTime row">
                            <view @click="SelectDate(2)"
                            :class="[isType==2||isType==0?'active':'']">
                                <text>{{year}}年</text>
                                <text>{{month}}月</text>
                            </view>
                            <u-icon @click="SelectDate(0)" name="arrow-down" size="28" color="#000"></u-icon>
                        </view>
                    </view>
                    <view class="ActInProCenSSE">
                        总销售额：
                        <text v-if="total">¥{{total}}</text>
                    </view>
                </view>
            </view>
        </view>
        
        <view class="ActInProCenterBox">
            <view class="ActInProCenTjBox">
                <view class="ActInProCenTjTitle">月销售额统计</view>
                <view class="ActInProCenBar">
                    <mrsongCharts v-if="chartsData.series[0].data.length>0"
                        height="414rpx"
                        type='column' 
                        align='center'
                        :options="options"
                        :config="config"
                        :charts-data="chartsData" />
                        <u-empty v-else text="暂无月销售额统计！" mode="data" padding-top="10" color="#000"></u-empty>
                </view>
            </view>
            <view class="ActInProCenTimeBox row-sbas-n">
                <view class="row items-center">
                    <view class="ActInProCenTimeAll"
                    :class="[isType==1?'active':'']"
                     @click="SelectDate(1)">
                        全部
                    </view>
                    <view class="ActInProCenTime row">
                        <view @click="SelectDate(2)"
                        :class="[isType==2||isType==0?'active':'']">
                            <text>{{year}}年</text>
                            <text>{{month}}月</text>
                        </view>
                        <u-icon @click="SelectDate(0)" name="arrow-down" size="28" color="#000"></u-icon>
                    </view>
                </view>
                <view class="ActInProCenSSE">
                    总销售额：
                    <text>¥{{  total  }}</text>
                </view>
            </view>
            <u-picker mode="time" v-model="showTime" :defaultTime="times" :params="params" @confirm = 'confirm'></u-picker>
            <view class="ActInProListBox">
                <view class="ActInProList activeLY"
                v-for="(item,index) in CustomerOrderList" :key="index">
                    <view class="ActInProListTitle">
                        <text>
                            旅游
                        </text>
                        <view></view>
                    </view>
                    <view class="ActInProListDec">
                        {{ item.Title }}
                    </view>
                    <view class="ActInProListDecNum">¥{{item.Unit_Price}}，{{item.GuestNum}}人</view>
                    <view class="ActInProListTime row-sbas-n items-center">
                        <view>完结时间：{{ item.CreateDate }}</view>
                        <view class="ActInProListTimeR">¥{{item.Money}}</view>
                    </view>
                </view>
                <u-empty v-if="CustomerOrderList.length == 0" text="暂无数据" mode="data"></u-empty>
            </view>
            <view v-if="Details"
            class="RuleDetails">
                <view class="RuleDetailsTitle">规则说明</view>
                <view class="RuleDetailsText">
                    系统将自动汇算客户在{{Details.StartTime.slice(0,4) }}年度内的团队旅游交易
                    总金额（不包含单项产品），根据达成总金额锁定对应的返佣比例（具体的比例
                    等级参照下图中的“{{Details.StartTime.slice(0,4) }}大红包返佣规则”部分）
                    计算应返金额。结算时间为次年的一月份，届时客户在旅小友平台上查看返佣总
                    金额与明细记录并且申请提现，金额只能提取到双方签订合同的银行账户，
                    如有变更请及时联系印象之旅销售代表协助处理。本次返佣比例如下：
                </view>    
                <table class="RuleDetailsTable" 
                v-if="Details&&Details.CommissionRatioList">
                        <tr class="row" style="text-align: center;">
                            <th class="col">{{Details.CommissionRatioList[0].Year}}年</th>
                        </tr> 
                        <tr class="row">
                            <th class="RuleDetailsTd1">等级</th>
                            <th>达标额</th>
                            <th class="RuleDetailsTd2">返佣比列</th>
                        </tr> 
                        <tr class="row" v-for="(item,index) in Details.CommissionRatioList"
                        :key="index">
                            <td class="RuleDetailsTd1">Lv{{ index+1 }}</td>
                            <td>¥{{ item.Money }}~{{ item.MaxMoney }}</td>
                            <td class="RuleDetailsTd2">{{ item.Ratio }}‰</td>
                        </tr>
                </table>
            </view>
            <!--
            <u-alert-tips :close-able="false"
            style="border-radius: 18rpx;"
            type="warning"
            title="2025年2月1日（包含）起生效"
            description="积分：平台所有跟团游产品均可参加积分活动，积分获得比例：100:1（例：客人实付金额100元，获得1个积分)。团队出发后7个工作日内将会存入积分余额。"
            ></u-alert-tips>-->
            <view style="height: 40rpx;"></view>
        
        </view>
        
            
    
            
        </scroll-view>
        <auth v-if="showAuth&&is_show_auth==1" @changeuserinfo="reloadUserinfo" @gbAuth="gbAuth"></auth>
    </view>
</template>
<script>
import auth from "@/components/auth/index.vue";
import headers from "@/components/header/header";
import mrsongCharts from '@/uni_modules/mrsong-charts/components/mrsong-charts/mrsong-charts.vue';
export default {
    components: {
        auth,
        headers,
        mrsongCharts
    },
    data() {
        return {
            page:'',
            boxOption: 0,
            params: {
                year: true,
                month: true,
                day: false,
                hour: false,
                minute: false,
                second: false
            },
            year: '',
            month: '',
            date: '',
            times: null,
            showTime: false,
            msg: {
                QStartDate: '',
                QEndDate: '',
                YearMonth: '',
            },
            scrollHeight: 0,
            scrollTop: 0,
            U: {},
            showAuth: false,
            is_show_auth: 0,
            b2bUser:{},
            ContractId: 0,
            Details: null,
            CustomerOrderListAll:[],
            CustomerOrderList: [],
            progress: 0,
            total: 0,
            chartsData:{
                categories: [],
                series: [
                    {
                        name: "销售额",
                        data: []
                    }
                ]
            },
            config:{
                itemCount: 3, // x轴单屏显示数据的数量，默认为5个
                scrollShow: false, // 新增是否显示滚动条，默认false
                scrollAlign: 'left', // 滚动条初始位置
                rotateLabel: false, // X轴label旋转
                min: 0, // Y轴最小值
                max: 150, //Y轴大值
                unit: '', // Y轴单位
                enableScroll: false, // 开启滚动模式
                color: [
                    // 颜色设置
                    '#9AD3FF',
                ],
            },
            options:{
                color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
                padding: [25,5,10,5],
                enableScroll: false,
                legend: {
                    show: false,
                },
                xAxis: {
                    disableGrid: true,
                    axisLine: true,
                    axisLineColor: '#F2F8FF',
                },
                yAxis: {
                    disableGrid: true,
                    disabled: true,
                    axisLineColor: '#F2F8FF',
                    // data: [
                    //     {
                    //         min: -40,
                    //         max: 40
                    //     }
                    // ],
                    splitNumber: 4
                },
                extra: {
                    column: {
                        type: "group",
                        width: 10,
                        linearType: "custom",
                        // linearOpacity: 0.8,
                        barBorderRadius: [10,10,10,10],
                        customColor:[
                            '#085FF3',
                        ],
                    }
                },
            },
            isType: 2,
        }
    },
    watch:{
        CustomerOrderList: {
			handler (val, oldval) {
                this.count()
            },
            deep: false,
            immediate: false,
        },
    },
    onLoad(options) {
        this.ContractId = options.ContractId
    },
    onShow() {
        this.U = uni.getStorageSync("mall_UserInfo");
        this.b2bUser = uni.getStorageSync("b2b_user");
        let basedata = uni.getStorageSync("basedata");
        //判断后台是否开启自动授权
        if (basedata && basedata.mall
        && basedata.mall.setting 
        && basedata.mall.setting.is_show_auth ==1) {
            this.is_show_auth = 1;
        }

        if (!this.U) {
            this.U = {
                nickName: "未登录",
                avatarUrl: "",
            };
            this.showAuth = true;
        } else if (!this.b2bUser && this.is_show_auth == 1) {
            this.U = {
                nickName: "未登录",
                avatarUrl: "",
            };
            this.showAuth = true;
        }

        const now = new Date();
        this.year = now.getFullYear();
        this.month = String(now.getMonth() + 1).padStart(2, '0');
        this.msg.QStartDate = this.year + '-' + this.month + '-01'
        now.setMonth(now.getMonth() + 1, 0);
        this.msg.QEndDate = this.year + '-' + this.month + '-'+now.getDate()
        this.msg.YearMonth = this.year + '-' + this.month
    },
    mounted() {
        this.getSignDetails()
    },
    methods: {
        formatNumberWithUnit(num) {
            if (num === 0) return '0.00';
            const units = ['', 'K', 'M', 'B', 'T']; // 单位数组：千(k)、百万(M)、十亿(B)、万亿(T)
            const exponent = Math.floor(Math.log10(num));
            const unitIndex = Math.max(0, Math.floor(exponent / 3)) - 1; // 计算单位索引
            // 缩放数值并保留三位有效数字
            const scaledNum = num / (10 ** (unitIndex * 3));
            const formatted = scaledNum.toLocaleString('en-US', { 
                precision: 3, // 保留三位有效数字
                rounding: 'round-trip' // 四舍五入
            });
            // 处理科学计数法（如 1.23e3 → 1230）
            if (formatted.includes('e')) {
                const [significand, exp] = formatted.split('e');
                return significand + '0'.repeat(parseInt(exp)) + units[unitIndex + 1];
            }
            const cleanedInteger = formatted.replace(/0+$/, '')
            let money = cleanedInteger.split(',')
            if(money.length>1){
                return money[0] + units[unitIndex + 1]
            }
            return money + units[unitIndex + 1];
        },
        getSignDetails(){
            uni.showLoading({
                title: '加载中',
                mask: true
            })
            this.apipost('app_customer_GetAuthenticationContractDetails',{
                ContractId: this.ContractId
            },
            res=>{
                if (res.resultCode == 1) {
                    let data = res.data
                    this.Details = data
                    this.CustomerOrderListAll = data.CustomerOrderList
                    this.CustomerOrderList = data.CustomerOrderList.filter(item=>{
                       return this.msg.YearMonth == item.CreateDate.slice(0,7)
                    })
                    let TotalAmount = 0
                    for(let i=0;i<this.Details.OrderMonthList.length;i++){
                        
                        // this.chartsData.series[0].data.push({
                        //     labelShow: true,
                        //     labelText: this.Details.OrderMonthList[i].FormattedAmount,
                        //     value: this.Details.OrderMonthList[i].TotalAmount
                        // })
                        if(this.Details.OrderMonthList[i].TotalAmount>0){
                            let name = this.Details.OrderMonthList[i].MonthStr
                            if(this.Details.OrderMonthList[i].MonthStr<10) name = this.Details.OrderMonthList[i].MonthStr.slice(1,2)+'月'
                            this.chartsData.categories.push(name)
                            this.chartsData.series[0].data.push(this.Details.OrderMonthList[i].TotalAmount)
                        }
                        if(this.Details.OrderMonthList[i].TotalAmount>TotalAmount){
                            TotalAmount = this.Details.OrderMonthList[i].TotalAmount
                        }
                    }
                    this.count()
                    if(this.Details.TradeMoney>0) this.progress = (this.Details.TradeMoney/this.Details.MaxMoney)*100
                    uni.hideLoading()
                    this.$forceUpdate()
                }
            })
        },
        getCustomerOrderList(){
            this.CustomerOrderList = this.CustomerOrderListAll.filter(item=>{
                return this.msg.YearMonth == item.CreateDate.slice(0,7)
            })
        },
        count(){
            let total = 0;
            if (this.CustomerOrderList.length>0) {
                this.CustomerOrderList.forEach(order => {
                    total += Number(order.Money);
                });
            }
            this.total=total.toFixed(2);
            this.$forceUpdate()
        },
        goTisp(){
            console.log(1111)
            this.scrollTop = this.scrollHeight?this.scrollHeight:1000000
        },
        confirm(e){
            if(this.year==e.year&&this.month==e.month) return
            this.year = e.year
            this.month = e.month 
            this.times = this.year + '-' + this.month
            const now = new Date(this.year, this.month, 1); // 设置为下个月第1天
            now.setDate(now.getDate() - 1); // 减1天即为上个月最后一天
            this.msg.QStartDate = this.year + '-' + this.month + '-01'
            this.msg.QEndDate = this.year + '-' + this.month + '-'+now.getDate()
            this.msg.YearMonth = this.year + '-' + this.month
            this.getCustomerOrderList()
            this.showTime = false
            if(this.scrollTop>650){
                this.scrollTop = 630
            }
        },
        SelectDate(type){
            this.isType = type;
            if(type==1){
                this.CustomerOrderList = JSON.parse(JSON.stringify(this.CustomerOrderListAll))
            }else if(type==2){
                this.getCustomerOrderList()
            }else{
                this.showTime = true
            }
            if(this.scrollTop>650){
                this.scrollTop = 630
            }
        },
        goUrl(){
            uni.navigateTo({
                url: '/pages/bigredrnvelope/rule' 
            })
        },
        scroll(e) {
            this.scrollHeight = e.detail.scrollHeight
            this.scrollTop = e.detail.scrollTop;
            this.boxOption = Math.floor((e.detail.scrollTop - 200) / 1.5);
        },
        reloadUserinfo() {
            const pages = getCurrentPages()
            const curPage = pages[pages.length-1]
            curPage.onLoad(curPage.options)
            curPage.onShow()
            curPage.onReady()
        },
        //关闭登录窗口
        gbAuth() {
            this.showAuth = false;
        },
    }
}
</script>
<style lang="scss" scoped>
@import url("@/asset/css/flex.css");
.ActInProBox{
    height: 100vh;
    background: #F3F1EF;
}
.ActInProHeaderBox{
    height: 919rpx;
}
.ActInProHeaders{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: #F3F1EF;
    z-index: 3;
}
.ActInProHeader{
    padding: 25rpx 40rpx 0 40rpx;
}
.ActInProHeaderTitle{
    font-weight: 400;
    font-size: 30rpx;
}
.ActInProHeaderTitle text{
    font-family: SJzhuokai;
    font-weight: 400;
    font-size: 46rpx;
    color: #FFFFFF;
    margin-left: 10rpx;
}
.ActInProHeaderTime{
    font-weight: 500;
    font-size: 24rpx;
}
.ActInProHeaderTime view{
    display: block;
    padding: 10rpx 0;
}
.ActInProHeaderTime view:last-child{
    text-align: right;
}
.ActInProHeaderNum{
    padding: 53rpx 0 15rpx 0;
}
.ActInProHeaderNT view{
    font-size: 24rpx;
}
.ActInProHeaderNT view:first-child{
    font-weight: 500;
    margin-bottom: 10rpx;
}
.ActInProHeaderNT view:last-child{
    font-weight: bold;
}
.ActInProHeaderNT view:last-child text{
    font-size: 46rpx;
}
.ActInProHeaderNTL{
    color: #FFFFFF;
}
.lineBox{
    // width: 613rpx;
    position: relative;
}
.greyLine{
    // width: 613rpx;
    height: 8rpx;
    border-radius: 4rpx;
}
.lineHigBox{
    height: 8rpx;
    background: #fff;
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 4rpx;
}
.lineHighlight{
    position: relative;
    width: 100%;
}
.lineHighlight view{
    width: 21rpx;
    height: 8rpx;
    background: #fff;
    border-radius:10rpx;
    position: absolute;
    right: 0;
    top: 0;
    // box-shadow: 2px 0px 73px 13px #fff;
    box-shadow: 0 0 5px #fff,
    0 0 10px #fff, 
    0 0 15px #fff, 
    0 0 20px #fff, 
    0 0 25px #fff, 
    0 0 30px #fff, 
    0 0 35px #fff, 
    0 0 40px #fff, 
    0 0 45px #fff, 
    0 0 50px #fff; 
}
.ActInProHeaMoney{
    font-weight: 500;
    font-size: 24rpx;
    color: #FFFFFF;
    margin-top: 25rpx;
}
.ActInProCenterBox{
    padding: 0 40rpx;
    position: relative;
    top: -46rpx;
}
.ActInProCenTjBox{
    background: #FFFFFF;
    border-radius: 18rpx;
    padding: 30rpx 20rpx 20rpx 20rpx;
}
.ActInProCenTjTitle{
    font-weight: bold;
    font-size: 32rpx;
    color: #080A0A;
    margin-bottom: 37rpx;
    padding: 0 20rpx;
}
.ActInProCenBar{
    height: 414rpx;
    background: #F2F8FF;
    border-radius: 18rpx;
}
.ActInProCenTimeBox{
    padding: 40rpx 0 30rpx 0;
}
.ActInProCenTime{
    font-weight: 500;
    font-size: 24rpx;
    color: #000;
}
.ActInProCenTime u-icon{
    margin-left: 10rpx;
    position: relative;
    top: -2rpx;
}
.ActInProCenTimeAll{
    border-radius: 10rpx;
    padding: 0 15rpx 0 0;
    font-size: 24rpx;
    margin-right: 20rpx;
}
.ActInProBox.activeLv1 .ActInProCenTimeAll.active,
.ActInProBox.activeLv1 .ActInProCenTime .active{
    color: #3175FF;
}
.ActInProBox.activeLv2 .ActInProCenTimeAll.active,
.ActInProBox.activeLv2 .ActInProCenTime .active{
    color: #FF3166;
}
.ActInProBox.activeLv3 .ActInProCenTimeAll.active,
.ActInProBox.activeLv3 .ActInProCenTime .active{
    color: #1BCB8B;
}
.ActInProBox.activeLv4 .ActInProCenTimeAll.active,
.ActInProBox.activeLv4 .ActInProCenTime .active{
    color: #FF9731;
}
.ActInProBox.activeLv5 .ActInProCenTimeAll.active,
.ActInProBox.activeLv5 .ActInProCenTime .active{
    color: #9B2020;
}
.ActInProCenSSE{
    font-weight: bold;
    font-size: 24rpx;
    color: #080A0A;
}
.ActInProCenSSE text{
    font-size: 32rpx;
    margin-left: 10rpx;
}

.ActInProList{
    padding: 38rpx;
    background: #FFFFFF;
    border-radius: 18rpx;
    margin-bottom: 34rpx;
}
.ActInProListTitle{
    font-weight: bold;
    font-size: 28rpx;
    color: #080A0A;
    position: relative;
}
.ActInProListTitle view{
    width: 43rpx;
    height: 8rpx;
    border-radius: 3rpx;
    position: absolute;
    left: 6rpx;
    bottom: 5rpx;
    z-index: 0;
}
.ActInProListTitle text{
    position: relative;
    z-index: 2;
}
.RuleDetailsTable{
    margin-top: 20rpx;
}
.RuleDetailsTable tr th,.RuleDetailsTable tr td{
    border: 2rpx solid #eee;
    padding: 5rpx 10rpx;
}
.RuleDetailsTable tr th:nth-child(2),.RuleDetailsTable tr td:nth-child(2){
    width: 1px;
    flex: 1;
}
.RuleDetailsTd1{
    width: 100rpx;
}
.RuleDetailsTd2{
    width: 150rpx;
}
.RuleDetailsTable tr th{
    font-weight: bold;
}
.RuleDetailsTable tr td{
    font-size: 24rpx;
    color: #757776;
}
.ActInProList.activeJD .ActInProListTitle view{
    background: #3175FF;
}
.ActInProList.activeLY .ActInProListTitle view{
    background: #FF3166;
}
.ActInProList.activeZC .ActInProListTitle view{
    background: #1BCB8B;
}
.ActInProList.activeJP .ActInProListTitle view{
    background: #FF9731;
}
.ActInProList.activeQZ .ActInProListTitle view{
    background: #9B2020;
}
.ActInProListDec{
    font-weight: bold;
    font-size: 28rpx;
    color: #080A0A;
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical; 
    -webkit-line-clamp: 2;
    overflow: hidden;
    padding: 20rpx 0 9rpx 0;
}
.ActInProListDecNum{
    font-weight: 500;
    font-size: 24rpx;
    color: #757776;
    margin-bottom: 5rpx;
}
.ActInProListTime{
    font-weight: 500;
    font-size: 24rpx;
    color: #757776;
}
.ActInProListTimeR{
    font-weight: bold;
    font-size: 32rpx;
    color: #080A0A;
}
.ActInProHeaderNTR{
    color: #FFE6A2;
}
.ActInProHeaderNTR view:first-child{
    color: #FFE6A3;
}
.RuleDetails{
    background: #FFFFFF;
    border-radius: 18rpx;
    padding: 38rpx;
}
.RuleDetailsTitle{
    font-size: 28rpx;
    margin-bottom: 10rpx;
    font-weight: 600;
}
.RuleDetailsText{
    font-size: 24rpx;
    line-height: 40rpx;
    text-indent: 50rpx;
    color: #757776;
}
.ActInProHeaderBox.activeLv5 .greyLine{
    background: #010102;
}
.ActInProHeaderBox.activeLv5 .ActInProHeaderTitle,
.ActInProHeaderBox.activeLv5 .ActInProHeaderTime{
    color: #526474;
}
.ActInProHeaderBox.activeLv4 .greyLine{
    background: #232C5A;
}
.ActInProHeaderBox.activeLv4 .ActInProHeaderTitle,
.ActInProHeaderBox.activeLv4 .ActInProHeaderTime{
    color: #22627B;
}
.ActInProHeaderBox.activeLv3 .greyLine{
    background: #232C5A;
}
.ActInProHeaderBox.activeLv3 .ActInProHeaderTitle,
.ActInProHeaderBox.activeLv3 .ActInProHeaderTime{
    color: #B7CBFF;
}
.ActInProHeaderBox.activeLv2 .greyLine{
    background: #4D3204;
}
.ActInProHeaderBox.activeLv2 .ActInProHeaderTitle,
.ActInProHeaderBox.activeLv2 .ActInProHeaderTime{
    color: #EAD39E;
}
.ActInProHeaderBox.activeLv1 .greyLine{
    background: #123369;
}
.ActInProHeaderBox.activeLv1 .ActInProHeaderTitle,
.ActInProHeaderBox.activeLv1 .ActInProHeaderTime{
    color: #86B4FF;
}
.ActInProHeaderBox.activeLv1{
   background: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638797085844310824.png')no-repeat; 
   background-size: 100% 100%;
}
.ActInProHeaderBox.activeLv2{
   background: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638797085843373244.png')no-repeat; 
   background-size: 100% 100%;
}
.ActInProHeaderBox.activeLv3{
   background: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638797085843343956.png')no-repeat; 
   background-size: 100% 100%;
}
.ActInProHeaderBox.activeLv4{
   background: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638797085843324394.png')no-repeat; 
   background-size: 100% 100%;
}
.ActInProHeaderBox.activeLv5{
   background: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638797085843612910.png')no-repeat; 
   background-size: 100% 100%;
}

</style>
