Skip to content

Commit b66098f

Browse files
cpython666cpython666
committed
feat(增加了首页的友情链接栏目，优化样式)
1 parent 33f9da1 commit b66098f

File tree

8 files changed

+146
-66
lines changed

8 files changed

+146
-66
lines changed

‎docs/index/IndexPage.vue‎

Lines changed: 21 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,33 @@
11
<template>
2-
<div class="section-container">
3-
<section id="first-section">
2+
<section>
43

5-
<div id="bg" :style="{ backgroundImage: `url(${randomImage})` }">
4+
<div id="big-bg" :style="{ backgroundImage: `url(${randomImage})` }">
65

7-
</div>
6+
</div>
87

9-
<div id="big-bg">
10-
<div id="bg-overlay" :class="{ 'rotate-animation': randomImage === 'imgs/bg/small_videos.png' }"
11-
:style="{ backgroundImage: `url(${randomImage})` }">
12-
<!-- 背景部分 -->
8+
<div id="small-bg">
9+
<div id="bg-overlay" :class="{ 'rotate-animation': randomImage === 'imgs/bg/small_videos.png' }"
10+
:style="{ backgroundImage: `url(${randomImage})` }">
11+
<!-- 背景部分 -->
12+
</div>
13+
<div class="content">
14+
<div style="cursor: pointer" @click="openLink">
15+
<img id="index-logo" alt="星梦起航，点击跳转～" src="/logo_super.svg">
1316
</div>
14-
<div class="content">
15-
<div style="cursor: pointer" @click="openLink">
16-
<img id="index-logo" alt="星梦起航，点击跳转～" src="/logo_super.svg">
17-
</div>
18-
<div id="box-cursor">
19-
<span id="box"></span>
20-
</div>
17+
<div id="box-cursor">
18+
<span id="box"></span>
2119
</div>
2220
</div>
23-
</section>
24-
<section>
25-
</section>
26-
27-
</div>
21+
</div>
22+
<SponsorsLinks/>
23+
</section>
2824

2925
</template>
3026

3127
<script setup>
3228
import {onBeforeUnmount, onMounted, ref} from 'vue';
3329
import Typed from 'typed.js';
30+
import SponsorsLinks from "./SponsorsLinks.vue";
3431
// 响应式数据
3532
const randomImage = ref('');
3633
const openLink = () => {
@@ -43,7 +40,7 @@ const changeBgHeight = () => {
4340
4441
const headerHeight = header.clientHeight;
4542
console.log(headerHeight)
46-
const bg1 = document.querySelector('#bg');
43+
const bg1 = document.querySelector('#big-bg');
4744
// bg.style.height = `calc(100vh)`;
4845
// bg1.style.height = `calc(100vh)`;
4946
bg.style.height = `calc(100vh - ${headerHeight}px)`;
@@ -139,55 +136,23 @@ onBeforeUnmount(() => {
139136
</script>
140137

141138
<style>
142-
/* div {
143-
padding-top: 0 !important;
144-
145-
}
146-
147-
header {
148-
position: fixed !important;
149-
opacity: 0.1;
150-
z-index: 5;
151-
}
152-
153-
header:hover {
154-
top: 0;
155-
} */
156-
157-
/* .vp-doc{
158-
width:100% !important;
159-
} */
160-
/* .section-container{
161-
width: 100vw;
162-
background-color: antiquewhite;
163-
scroll-snap-type:y mandatory;
164-
} */
165-
166-
.container {
167-
padding: 0 !important;
168-
/* max-width:3000 !important; */
169-
margin: 0 !important;
170-
}
171139
172140
body::-webkit-scrollbar {
173141
display: none;
174-
/* Safari 和 Chrome */
175142
}
176143
177144
* {
178145
margin: 0;
179146
padding: 0;
180147
}
181148
182-
#bg {
149+
#big-bg {
183150
height: 100vh;
184151
width: 100vw;
185152
position: absolute;
186153
justify-content: center;
187154
align-items: center;
188155
/* background-image: url('imgs/bg/small_1.jpg'); */
189-
/* background-image: url('imgs/bg/small_1.jpg'); */
190-
/* background-image: url('imgs/bg/1.jpg'); */
191156
/* background-size: cover; */
192157
/*background-size: 100 auto;*/
193158
/* background-size: cover; */
@@ -200,7 +165,7 @@ body::-webkit-scrollbar {
200165
z-index: 1;
201166
}
202167
203-
#big-bg {
168+
#small-bg {
204169
border-radius: 50px;
205170
height: 100vh;
206171
width: 100vw;
@@ -210,11 +175,7 @@ body::-webkit-scrollbar {
210175
justify-content: center;
211176
align-items: center;
212177
/* background-image: url('imgs/bg/small_2.png'); */
213-
/* background-image: url('imgs/bg/small_1.jpg'); */
214-
/* background-image: url('imgs/bg/1.jpg'); */
215178
background-size: contain;
216-
/* background-size: 100% auto; */
217-
/* background-size: cover; */
218179
background-position: center;
219180
color: white;
220181
font-size: 36px;
@@ -234,17 +195,12 @@ body::-webkit-scrollbar {
234195
justify-content: center;
235196
align-items: center;
236197
/* background-image: url('imgs/bg/small_2.png'); */
237-
/* background-image: url('imgs/bg/small_1.jpg'); */
238-
/* background-image: url('imgs/bg/1.jpg'); */
239198
background-size: contain;
240-
/* background-size: 100% auto; */
241-
/* background-size: cover; */
242199
background-position: center;
243200
color: white;
244201
font-size: 36px;
245202
z-index: 2;
246203
background-repeat: no-repeat;
247-
/* 如果有其他样式 */
248204
}
249205
250206
.content {
@@ -253,8 +209,7 @@ body::-webkit-scrollbar {
253209
flex-direction: column;
254210
justify-content: center;
255211
align-items: center;
256-
z-index: 3; /* 保证文字在最上层 */
257-
/* 其他文字样式 */
212+
z-index: 3;
258213
}
259214
260215
#box {

‎docs/index/SponsorsLinks.vue‎

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
<template>
2+
<div class="sponsors-section">
3+
<h2 class="section-title">赞助商</h2>
4+
<div class="grid-container">
5+
<a
6+
v-for="(sponsor, index) in sponsors"
7+
:key="'sponsor-' + index"
8+
:href="sponsor.link"
9+
class="card"
10+
rel="noopener noreferrer"
11+
target="_blank"
12+
>
13+
<div class="card-inner">
14+
<img :alt="sponsor.name" :src="sponsor.logo"/>
15+
</div>
16+
</a>
17+
</div>
18+
19+
<h2 class="section-title">友情链接</h2>
20+
<div class="grid-container">
21+
<a
22+
v-for="(link, index) in friends"
23+
:key="'friend-' + index"
24+
:href="link.link"
25+
class="card"
26+
rel="noopener noreferrer"
27+
target="_blank"
28+
>
29+
<div class="card-inner">
30+
<img :alt="link.name" :src="link.logo"/>
31+
</div>
32+
</a>
33+
</div>
34+
</div>
35+
</template>
36+
37+
<script setup>
38+
const sponsors = [
39+
{
40+
name: '莱卡云',
41+
logo: '/imgs/sponsors/lky_logo.png',
42+
link: 'https://www.lcayun.com/aff/DECEDOZS',
43+
},
44+
{
45+
name: '猿人学',
46+
logo: '/imgs/sponsors/yrx_logo.png',
47+
link: 'https://match.yuanrenxue.cn/',
48+
},
49+
{
50+
name: '青果网络',
51+
logo: '/imgs/sponsors/qgwl_logo.png',
52+
link: 'https://www.qg.net/product/proxyip.html?source=star',
53+
},
54+
{
55+
name: 'Evolution Host',
56+
logo: '/imgs/sponsors/evolution_host.png',
57+
link: 'https://evolution-host.com/',
58+
},
59+
]
60+
61+
const friends = [
62+
{
63+
name: '星梦起航',
64+
logo: '/imgs/friends/stardream_logo.png',
65+
link: 'http://www.stardream.vip/',
66+
},
67+
{
68+
name: '爬虫百战成神',
69+
logo: '/imgs/friends/learnspider_logo.png',
70+
link: 'http://www.learnspider.vip/',
71+
},
72+
]
73+
</script>
74+
75+
<style scoped>
76+
.sponsors-section {
77+
padding: 2rem 1rem;
78+
background-color: #f8f9fa;
79+
border-top: 1px solid #eee;
80+
}
81+
82+
.section-title {
83+
font-size: 1.5rem;
84+
font-weight: 600;
85+
text-align: center;
86+
margin: 2rem 0 1rem;
87+
color: #333;
88+
}
89+
90+
.grid-container {
91+
display: grid;
92+
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
93+
gap: 1rem;
94+
margin-bottom: 2rem;
95+
}
96+
97+
.card {
98+
display: block;
99+
background: #fff;
100+
border-radius: 12px;
101+
overflow: hidden;
102+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
103+
transition: transform 0.2s, box-shadow 0.2s;
104+
}
105+
106+
.card:hover {
107+
transform: translateY(-4px);
108+
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
109+
}
110+
111+
.card-inner {
112+
display: flex;
113+
align-items: center;
114+
justify-content: center;
115+
padding: 0.5rem;
116+
aspect-ratio: 12 / 5;
117+
background-color: #fefefe;
118+
}
119+
120+
.card-inner img {
121+
max-height: 100%;
122+
max-width: 100%;
123+
object-fit: contain;
124+
}
125+
</style>

‎docs/public/imgs/friends/learnspider_logo.png‎

86.7 KB
Loading

‎docs/public/imgs/friends/stardream_logo.png‎

39.8 KB
Loading

‎docs/public/imgs/sponsors/evolution_host.png‎

13 KB
Loading

‎docs/public/imgs/sponsors/lky_logo.png‎

62.7 KB
Loading

‎docs/public/imgs/sponsors/qgwl_logo.png‎

63.5 KB
Loading

‎docs/public/imgs/sponsors/yrx_logo.png‎

33.8 KB
Loading

0 commit comments

Comments
 (0)