overcast404/ocer-cc-old
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

💄 style: chage card animation

Browse Source
This commit is contained in:
guoqi.sun 2024-02-14 20:55:34 +08:00
parent bd61a4ee9f
commit 0ec734bbcb
2 changed files with 7 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/App.vue
View File

@ -114,7 +114,7 @@ onMounted(() => {
</nav>
<!-- 主体 -->
<main bg-transparent absolute w-full top-72vh z-10>
<main bg-transparent absolute w-full top-75vh z-10>
<!-- 大标题 -->
<section ml-15vw absolute>
<div text-10 text-white font-bold tracking-widest v-html="data.titleList[Math.floor(Math.random() * data.titleList.length)]" />
@ -130,7 +130,7 @@ onMounted(() => {
</div>
</section>
<!-- 个人简介 -->
<section mx-9vw mt-110>
<section mx-9vw mt-90>
<!-- 关于我 -->
<div text-bold mb-4 ml-10 text-8 text-white>
About Me
@ -170,7 +170,7 @@ onMounted(() => {
<div mb-10 flex flex-wrap justify-between>
<div v-for="(item, index) in data.myProjects" :key="index" mx-10 my-4 class="basis-3/4 md:basis-1/6">
<a :href="item.link">
<div p-2 class="bg-white/5 hover:bg-white/10" rounded-lg shadow-md flex-col backdrop-blur-3xl backdrop-opacity-60 hover:skew-y-1 hover:backdrop-opacity-100>
<div class="bg-white/5 hover:bg-white/10" p-2 rounded-lg shadow-md flex-col transition backdrop-blur-3xl backdrop-opacity-60 hover:backdrop-opacity-100 hover:-translate-y-2>
<div text-bold opacity-75 text-white>
{{ item.name }}
</div>
@ -188,7 +188,7 @@ onMounted(() => {
</div>
<div flex flex-wrap justify-between>
<div v-for="(item, index) in data.socialLinks" :key="index" mx-10 my-4 class="basis-1/6">
<a p-2 class="bg-white/5 hover:bg-white/10" rounded-lg shadow-md flex-col justify-between items-center backdrop-blur-3xl backdrop-opacity-60 hover:skew-y-1 hover:backdrop-opacity-100 :href="item.link">
<a class="bg-white/5 hover:bg-white/10" p-2 rounded-lg shadow-md flex-col justify-between items-center transition backdrop-blur-3xl backdrop-opacity-60 hover:backdrop-opacity-100 hover:-translate-y-2 :href="item.link">
<div mb-1 text-white f-c-c v-html="item.icon" />
<div text-bold opacity-75 text-white>{{ item.label }}</div>
</a>
@ -197,13 +197,13 @@ onMounted(() => {
</section>
<!-- 底部 -->
<footer>
<div mt-100 f-c-c class="text-white/60" hover:skew-y-1>
<footer mb-5>
<div class="text-white/60" mt-50 f-c-c>
<i i-ant-design-environment-outlined mr-1 />
<p>路虽远行则将至，事虽难做则必成</p>
<i i-ant-design-environment-outlined ml-1 />
</div>
<div class="text-white/60" mb-3 mt-2 f-c-c gap-4>
<div class="text-white/60" mt-2 f-c-c gap-4>
<div>皖 ICP 备 2021010058 号</div>
<div>© 2024 小孙同学</div>
</div>

4
src/main.js
View File

@ -5,10 +5,6 @@ import { createApp } from 'vue'
import App from '@/App.vue'
import router from '@/router'
const app = createApp(App)
app.use(router)
app.mount('#app')