manHourHousekeeper/fhKeeper/formulahousekeeper/timesheet-workshop/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">生产车间管家</p>
                <p class="expire_tips">您好，您购买的版本已到期!</p>
                <p class="expire_text">
                    尊敬的用户! 您购买的版本[{{versionList[versionId]}}] 已到期(到期日期{{expDate}})
                    ，若需继续使用请前往企业微信应用市场续费，给贵公司带来不便，敬请谅解!
                </p>
                <!-- <p class="expire_kf">联系客服</p> -->
                <div class="expire_service">
                    <p style="color: #333">
                        请用企业微信扫码添加客服
                    </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','基础版','专业版','旗舰版','建筑工程版'],
          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>