wcx/surl-front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

更新主页

Browse Source
This commit is contained in:
wcx 2024-07-29 22:50:18 +08:00
parent 50ca6468c1
commit 5f13e914c2
3 changed files with 99 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
src/assets/img/hero.svg Normal file
View File

@ -0,0 +1,42 @@
<svg width="1920" height="500" viewBox="0 0 1920 500" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_145_3)">
<circle cx="1295.5" cy="204.5" r="38" stroke="#177BD7"/>
<circle cx="1629" cy="294" r="43.5" stroke="#177BD7"/>
<circle cx="1040" cy="84" r="43.5" stroke="#177BD7"/>
<circle cx="1027.5" cy="178.5" r="12" stroke="#177BD7"/>
<circle cx="1167.5" cy="190.5" r="12" stroke="#177BD7"/>
<circle cx="1441.5" cy="252.5" r="12" stroke="#177BD7"/>
<circle cx="1415.5" cy="312.5" r="7" stroke="#177BD7"/>
<circle cx="1313.5" cy="317.5" r="12" stroke="#177BD7"/>
<circle cx="1047.5" cy="267.5" r="7" stroke="#177BD7"/>
<circle cx="1174.5" cy="257.5" r="7" stroke="#177BD7"/>
<circle cx="1507.5" cy="359.5" r="7" stroke="#177BD7"/>
<circle cx="1820.5" cy="377.5" r="7" stroke="#177BD7"/>
<circle cx="1772.5" cy="328.5" r="12" stroke="#177BD7"/>
<circle cx="1913.5" cy="366.5" r="12" stroke="#177BD7"/>
<ellipse cx="2179" cy="-73.5" rx="1226" ry="403.5" fill="url(#paint0_linear_145_3)"/>
<ellipse cx="2065.52" cy="-29.5852" rx="1226" ry="403.5" transform="rotate(3.01447 2065.52 -29.5852)" fill="url(#paint1_linear_145_3)" fill-opacity="0.2"/>
<path d="M3209.94 153.947C3184.67 375.357 2629.73 426.281 1957 349.5C1284.27 272.719 748.486 97.3068 773.756 -124.103C799.026 -345.512 1364.87 -462.756 2037.6 -385.975C2710.34 -309.194 3235.21 -67.4621 3209.94 153.947Z" fill="url(#paint2_linear_145_3)" fill-opacity="0.2"/>
<line x1="1286.41" y1="85.4142" x2="1230.41" y2="141.414" stroke="white" stroke-opacity="0.39" stroke-width="4"/>
<line x1="1705.41" y1="101.414" x2="1678.41" y2="128.414" stroke="white" stroke-opacity="0.39" stroke-width="4"/>
<line x1="1613.41" y1="-12.5858" x2="1542.41" y2="58.4142" stroke="white" stroke-opacity="0.39" stroke-width="4"/>
<circle cx="1624.5" cy="165.5" r="12" stroke="white" stroke-opacity="0.46"/>
</g>
<defs>
<linearGradient id="paint0_linear_145_3" x1="953" y1="99" x2="3405" y2="-100" gradientUnits="userSpaceOnUse">
<stop stop-color="#1867C0"/>
<stop offset="1" stop-color="#17A9F6"/>
</linearGradient>
<linearGradient id="paint1_linear_145_3" x1="839.523" y1="142.915" x2="3291.52" y2="-56.0852" gradientUnits="userSpaceOnUse">
<stop stop-color="#17A9F6"/>
<stop offset="0.54569" stop-color="#177BD7"/>
</linearGradient>
<linearGradient id="paint2_linear_145_3" x1="754.195" y1="47.2846" x2="3212.94" y2="127.618" gradientUnits="userSpaceOnUse">
<stop stop-color="#17A9F6"/>
<stop offset="0.54569" stop-color="#177BD7"/>
</linearGradient>
<clipPath id="clip0_145_3">
<rect width="1920" height="500" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

5
src/components/views/HomeView.vue
View File

@ -2,9 +2,9 @@
</script> </script>
<template> <template>
<v-responsive class="border rounded mx-auto" max-width="1080"> <v-responsive class="rounded mx-auto" max-width="1600px">
<v-app> <v-app>
<v-app-bar flat> <v-app-bar>
<v-container class="mx-auto d-flex align-center justify-start"> <v-container class="mx-auto d-flex align-center justify-start">
<v-btn text="HOME" to="/" :active="false"></v-btn> <v-btn text="HOME" to="/" :active="false"></v-btn>
<v-btn text="INPUT" to="/input" :active="false"></v-btn> <v-btn text="INPUT" to="/input" :active="false"></v-btn>
@ -23,7 +23,6 @@
</v-list> </v-list>
</v-menu> </v-menu>
</v-container> </v-container>
</v-app-bar> </v-app-bar>
<v-main class="px-10"> <v-main class="px-10">
<router-view/> <router-view/>

56
src/components/views/IntroView.vue
View File

@ -1,10 +1,64 @@
<script setup lang="ts"> <script setup lang="ts">
import {ref} from "vue";
const slogans = [
"TRY OUR SERVICES FOR FREE",
"EARN MONEY FROM EACH SHORT LINKS"
];
const show = ref("");
let c = 0, i = 0, showIndicator = ref(true);
const showTimeout = 10000;
showSlogan(0)
setInterval(() => {
i++
show.value = ""
c = 0;
showSlogan(i % slogans.length)
}, showTimeout)
function showSlogan(i: number) {
const slogan = slogans[i]
const timeout = 2000 / slogan.length
const handle = setInterval(() => {
show.value = slogan.substring(0, c % slogan.length + 1);
c++;
if (c >= slogan.length) {
clearInterval(handle)
const indicatorHandle = setInterval(() => {
showIndicator.value = !showIndicator.value;
}, 500)
setTimeout(() => {
clearInterval(indicatorHandle)
showIndicator.value = true;
}, showTimeout - 2000)
}
}, timeout)
}
</script> </script>
<template> <template>
intro <v-img class="intro-view-banner" src="/src/assets/img/hero.svg">
<span class="intro-slogan"> &gt;&nbsp;{{ show }}<span
:class="{'intro-slogan-hidden': !showIndicator}">_</span> </span>
</v-img>
</template> </template>
<style scoped> <style scoped>
.intro-view-banner {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
color: #555555;
}
.intro-view-banner * {
transition: all ease .1s;
}
.intro-view-banner span.intro-slogan {
font-size: 3em;
}
.intro-slogan-hidden {
visibility: hidden;
}
</style> </style>