Docker/WebVue/src/views/home/indexSmall.vue

<template>
    <div class="main">
        <div class="box">
            <img class="box_start" src="/images/main/p1.png">
            <div class="box_mask"></div>
        </div>
        <div class="main-body">
            <div class="main-title"> </div>
            <div class="line1">
                <span class="main-content_img"><img src="/youjia.svg" width="60" /></span>
                <img class="line1_start" src="/images/main/line1.png">
            </div>
            <div class="main-content">
                <span class="main-content_text">有</span><span class="main-content_text">家</span>
                <span class="main-content_text">相</span><span class="main-content_text">冊</span>
            </div>
            <div class="line2">
                <div class="line1_button"
                    style="display: flex;    visibility: hidden;flex-direction: row;margin-right:80px; margin-bottom: 8px;">
                    <a-button type="default" @click.prevent="onLogin" style="width: 100px;" size="large" block> 登录
                    </a-button>
                    <a-button type="default" @click.prevent="onRegister" style="width: 100px;margin-left: 20px;"
                        size="large" block> 注册 </a-button>
                </div>
                <img class="line2_start" src="/images/main/line2.png">
                <p class="line2_p1">轻松三步创建有家相册,让相册分享更简单</p>
                <p class="line2_p2">安全、稳定、有家的氛围</p>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from "vue";
import { bsInfo } from "@/utils/browser";
import { gsap } from "gsap";
import { useRouter } from "vue-router";

const router = useRouter();

let tl: any;
let ctx: any;


onMounted(() => {
    ctx = gsap.context((self) => {
        const boxes: any = gsap.utils.toArray(".box_start");
        const masks: any = gsap.utils.toArray(".box_mask");
        const line1: any = gsap.utils.toArray(".line1_start");
        const line1_button: any = gsap.utils.toArray(".line1_button");
        const line2: any = gsap.utils.toArray(".line2_start");
        const line2P1: any = gsap.utils.toArray(".line2_p1");
        const line2P2: any = gsap.utils.toArray(".line2_p2");
        const title: any = gsap.utils.toArray(".main-title");
        const texts: any = gsap.utils.toArray(".main-content_text");
        const img: any = gsap.utils.toArray(".main-content_img");
        tl = gsap
            .timeline({ repeat: 0, repeatDelay: 1, yoyo: true })
            .to(boxes[0], { duration: 2, width: '100vw' })
            .to(masks[0], { duration: 2, width: '100vw', opacity: .6 }, "<2.5")
            .to(line1[0], { width: '80vw', duration: 3, opacity: .9 }, "<1")
            .to(line2[0], { width: '80vw', duration: 3, opacity: .9 }, "<1.5")
            .to(title[0], { duration: 2, visibility: 'visible' }, "<2")
            .to(texts[0], { duration: 2, width: '60px', visibility: 'visible' }, "<1")
            .to(texts[1], { duration: 2, width: '60px', visibility: 'visible' }, "<1")
            .to(texts[2], { duration: 2, width: '60px', visibility: 'visible' }, "<1")
            .to(texts[3], { duration: 2, width: '60px', visibility: 'visible' }, "<1")
            .to(img[0], { duration: 2, width: '30', visibility: 'visible' }, "<1")
            .to(line1_button[0], { visibility: 'visible', opacity: .6, duration: 3 }, "+=0")
            .to(line2P1[0], { visibility: 'visible', opacity: .9, duration: 3 }, "+=0")
            .to(line2P2[0], { visibility: 'visible', opacity: .9, duration: 3 }, "<");
    });
});


const onRegister = () => {
    router.push({ path: "/register" });
};

const onLogin = (() => {
    router.push({ path: "/login" });
})

</script>
<style scoped>
.main {
    background-color: #A3A37E;
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    overflow: hidden;
}

.box {
    width: 50vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    position: relative;
}

.box_start {
    width: 1px;
    height: 100vh;
    object-fit: cover;
    object-position: top;
}

.box_mask {
    position: absolute;
    background-color: #B2B7A0;
    top: 0;
    z-index: 10;
    width: 0;
    height: 100vh;
    opacity: 0.1;
}

.main-body {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    z-index: 20;
}

.main-content {
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 56px;
    margin-left: 20px;
    margin-right: 20px;
}

.main-content_text {
    margin-left: 16px;
    margin-right: 16px;
    width: 0px;
    font-weight: 600;
    color: #FFFFFF;
    visibility: hidden;
}

.main-content_img {
    margin-right: 72vw;

    visibility: hidden;
    margin-left: 18vw;
}

.main-title {
    visibility: hidden;
}

.line1 {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    height: 26vh;
    z-index: 20;
}

.line1_button {
    position: absolute;
    bottom: 10px;
    left: 20vw;
    opacity: 0.1;
}

.line1_start {
    z-index: 20;
    width: 0;
    object-fit: cover;
    object-position: top;
    opacity: 0.1;
}

.line2 {
    z-index: 20;
    height: 36vh;
    font-size: 16px;
}

.line2_p1 {
    font-weight: 600;
    color: #FFFFFF;
    margin-left: 20px;
    visibility: hidden;
    opacity: 0.1;
}

.line2_p2 {
    font-weight: 600;
    margin-left: 20px;
    color: #FFFFFF;
    visibility: hidden;
    opacity: 0.1;
}

.line2_start {
    z-index: 20;
    width: 0;
    object-fit: cover;
    object-position: top;
    opacity: 0.1;
}
</style>