manHourHousekeeper/fhKeeper/formulahousekeeper/timesheet/src/views/Expire.vue

<template>
    <div class="expire">
        <div class="expire_par">
            <div class="expire_container">
                <img class="expire_logo" src="../assets/image/login_logo.png" />
                <p class="expire_title">{{ $t('workingHoursHousekeeper') }}</p>
                <p class="expire_tips">{{ $t('ninHaoNinGouMaiDeBanBenYiDaoQi') }}</p>
                <p class="expire_text">
                    {{ $t('zunJingDeYongHuNinGouMaiDeBanBen') }} [{{versionList[versionId]}}] {{ $t('yiDaoQi') }}({{ $t('time.dueDate') }}{{expDate}})
                    ，{{ $t('ruoXuJiXuShiYongQingQianWangQiYeWeiXinYingYongShiChangXuFeiGeiGuiGongSiDaiLaiBuBianJingQingLiangJie') }} 
                </p>
                <!-- <p class="expire_kf">联系客服</p> -->
                <div class="expire_service">
                    <p style="color: #333">
                        {{ $t('qingYongQiYeWeiXinSaoMaTianJiaKeFu') }} </p>
                    <img src="../assets/image/qwcode.png" />
                    <p>
                        <span style="color: #333">QQ：</span
                        ><span id="QQ">3052894409</span>
                    </p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
          versionId: 0,
          versionList: ['verson',this.$t('jiChuBan'),this.$t('zhuanYeBan'),this.$t('qiJianBan'),this.$t('jianZhuGongChengBan')],
          expDate: 'date',
        };
    },
    mounted() {
      this.versionId = parseInt(window.location.href.split('version=')[1].split('&')[0])
      this.expDate = window.location.href.split('expDate=')[1].split('#')[0]
    }
};
</script>

<style lang="scss" scoped>
.expire {
    height: 100%;
    .expire_par {
        width: 100%;
        min-height: 100%;
        background: #f0f2f5 url("../assets/image/background.png") no-repeat 50%;
        background-size: 100%;
        padding: 110px 0 144px;
        position: relative;
        box-sizing: border-box;
        .expire_container {
            background-clip: padding-box;
            width: 600px;
            height: 495px;
            padding: 25px 35px 25px 35px;
            // border: 1px solid #cac6c6;
            margin: auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            .expire_logo {
                width: 80px;
                height: 80px;
            }
            .expire_title {
                font-size: 20px;
                color: #505458;
                font-weight: bold;
            }
            .expire_tips {
                color: #409eff;
                font-size: 18px;
            }
            .expire_text {
                font-size: 15px;
                color: #606266;
                text-align: center;
                line-height: 24px;
            }
            .expire_service {
            width: 120px;
            text-align: center;
            padding: 10px;
            img {
                width: 100px;
            }
        }
        }
    }
}
</style>