zc_saas_h5/pages4/login/pcLoginSuccess.vue

<template>
    <view class="pcLogins" :class="{bgcolor: !hidden}">
        <u-navbar :is-back="false" title="登录成功" :border-bottom="false"  title-color="#333333" back-icon-color="#ffffff">
            <view class="slot-wrap">
                <image src="/static/logo2.png" style="width: 178rpx;height: 31rpx;margin-left: 30rpx;"></image>
            </view>
        </u-navbar>
        <u-line color="#D6D6DB" />
        <view class="contents">
            <view class="success" :class="{hidsuce: !hidden}">
                <image src="/static/me/lg_success.png"></image>
                <view class="success_word">登录成功</view>
                <view class="pc_learn">你可以在电脑端学习了</view>
            </view>
            <view class="bg_pic">
                <image class="poster" src="/pages4/static/poster.png"></image>
            </view>
        </view>
        <view v-if="!hidden" class="toLearn" @click="toHome()"></view>
    </view>
</template>

<script>
export default {
    name: 'pcLoginSuccess',
    data() {
        return {
            hidden: true,
        }
    },
    onShow() {
        setTimeout(() => {
            this.hidden = false
        }, 1000)
    },
    methods: {
        toHome() {
            uni.switchTab({
                url: '/pages/index/index'
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.pcLogins {
    width: 100%;
    height: 100vh;
}
.bgcolor {
    background-color: #D2E8FF;
}
.success {
    width: 100%;
    height: 330rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all 0.5s;
    >image {
        width: 80rpx;
        height: 80rpx;
        margin: 58rpx 0rpx 32rpx;
    }
    .success_word {
        font-size: 32rpx;
        font-weight: 500;
        color: #222222;
        margin-bottom: 12rpx;
    }
    .pc_learn {
        font-weight: 400;
        color: #777777;
        font-size: 28rpx;
    }
}
.hidsuce {
    height: 0rpx;
    transition: all 0.5s;
}
.bg_pic {
    width: 100%;
    height: 1436rpx;
    .poster {
        width: 100%;
        height: 100%;
    }
}
.toLearn {
    position: fixed;
    right: 0;
    bottom: 0;
    width: 60%;
    height: 50vh;
    // background: #222222;
}
</style>