itcsx/Docker
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ow

Browse Source
This commit is contained in:
owenchen committed 2026-08-25 15:31:16 +08:00
1 parent 1404640f16
commit 2bbf016cbf
167 files changed
+18941 -589
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

WebVue/src/views/home/indexSmall.vue
+215
View File
@@ -0,0 +1,215 @@
<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>