Skip to content

Commit 0696db0

Browse files
轩帅轩帅
轩帅
authored and
轩帅
committed
🚑 optimizate page CLS
1 parent 1857eeb commit 0696db0

File tree

12 files changed

+130
-214
lines changed

12 files changed

+130
-214
lines changed

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "nicelinks-vue-client",
3-
"version": "2.17.0",
3+
"version": "2.18.1",
44
"description": "A nice website for assembling nice links created using Vue.js",
55
"author": "jeffjade <[email protected]>",
66
"private": true,
@@ -139,4 +139,4 @@
139139
"path": "./node_modules/cz-conventional-changelog"
140140
}
141141
}
142-
}
142+
}

‎src/components/Elevator.vue‎

Lines changed: 23 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -3,20 +3,14 @@
33
<div class="tooltip">
44
<div class="pannel">
55
<div class="item">
6-
<img
7-
class="qrcode"
8-
src="https://image.nicelinks.site/qrcode_jqx.jpg"
9-
alt="晚晴幽草轩-公众号"
10-
/>
6+
<img class="qrcode" src="https://image.nicelinks.site/qrcode_jqx.jpg" alt="晚晴幽草轩-公众号" />
117
<span class="text font-medium">晚晴幽草轩</span>
128
<span class="text">微信扫码关注</span>
139
</div>
1410
<div class="item">
15-
<img
16-
class="qrcode"
11+
<img class="qrcode"
1712
src="https://image.nicelinks.site/nicelinks-miniprogram-code.jpeg?imageView2/1/w/250/h/250/interlace/1/ignore-error/1"
18-
alt="倾城之链-小程序"
19-
/>
13+
alt="倾城之链-小程序" />
2014
<span class="text font-medium">倾城之链</span>
2115
<span class="text">微信扫码体验</span>
2216
</div>
@@ -25,25 +19,11 @@
2519
<icon class="qrcode" name="qrcode"></icon>
2620
</div>
2721
</div>
28-
<a
29-
target="_blank"
30-
class="outside-link-btn gtag-track"
31-
data-action="recommend-btn"
32-
data-category="elevator"
33-
data-label="recommend-btn"
34-
rel="noopener"
35-
:href="reportPath"
36-
>投稿
22+
<a target="_blank" class="outside-link-btn gtag-track" data-action="recommend-btn" data-category="elevator"
23+
data-label="recommend-btn" rel="noopener" :href="reportPath">投稿
3724
</a>
38-
<a
39-
target="_blank"
40-
class="outside-link-btn gtag-track"
41-
data-action="feedback-btn"
42-
data-category="elevator"
43-
data-label="feedback-btn"
44-
rel="noopener"
45-
:href="reportPath"
46-
>反馈
25+
<a target="_blank" class="outside-link-btn gtag-track" data-action="feedback-btn" data-category="elevator"
26+
data-label="feedback-btn" rel="noopener" :href="reportPath">反馈
4727
</a>
4828
</div>
4929
</template>
@@ -99,6 +79,7 @@ $factor: 1rem;
9979
margin: 1rem 0;
10080
outline: none;
10181
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
82+
10283
&:hover {
10384
cursor: pointer;
10485
animation: jelly 0.5s;
@@ -108,11 +89,13 @@ $factor: 1rem;
10889
.tooltip {
10990
position: relative;
11091
display: inline-block;
92+
11193
&:hover {
11294
.pannel {
11395
visibility: visible;
11496
}
11597
}
98+
11699
.pannel {
117100
position: absolute;
118101
bottom: -9.25 * $factor;
@@ -129,6 +112,7 @@ $factor: 1rem;
129112
height: 26 * $factor;
130113
padding: 2 * $factor;
131114
border-radius: 2 * $factor;
115+
132116
&:before {
133117
content: '';
134118
position: absolute;
@@ -140,43 +124,53 @@ $factor: 1rem;
140124
border-left: $factor solid $white;
141125
border-bottom: $factor solid transparent;
142126
}
127+
143128
.item {
144129
display: flex;
145130
flex-direction: column;
146131
justify-content: space-between;
147132
align-items: center;
148133
width: 18 * $factor;
149134
height: 100%;
135+
150136
.qrcode {
151137
width: 16 * $factor;
152138
height: 16 * $factor;
139+
aspect-ratio: 1 / 1;
153140
}
141+
154142
.text {
155143
font-size: 1.6 * $factor;
156144
color: $common-link;
157145
}
158146
}
159147
}
148+
160149
.connect {
161150
.qrcode {
162-
width: 3 * $factor !important;
163-
height: 3 * $factor !important;
151+
width: 3 * $factor !important;
152+
height: 3 * $factor !important;
164153
margin: 0 auto;
165154
transform: scale(1);
166155
}
167156
}
168157
}
158+
169159
@keyframes jelly {
160+
170161
0%,
171162
100% {
172163
transform: scale(1, 1);
173164
}
165+
174166
25% {
175167
transform: scale(0.9, 1.1);
176168
}
169+
177170
50% {
178171
transform: scale(1.1, 0.9);
179172
}
173+
180174
75% {
181175
transform: scale(0.95, 1.05);
182176
}

‎src/components/Waline.vue‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ export default {
4646
4747
label,
4848
input {
49-
font-size: 1.4rem;
49+
font-size: 1.2rem;
5050
}
5151
}
5252
@@ -63,7 +63,12 @@ export default {
6363
.wl-content,
6464
.wl-count,
6565
.wl-empty {
66-
font-size: 1.4rem;
66+
font-size: 1.2rem;
67+
}
68+
69+
.wl-action:nth-child(1),
70+
.wl-action:nth-child(3) {
71+
display: none;
6772
}
6873
6974
.vbtn {

‎src/components/linksList/LinkItem.vue‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -507,13 +507,14 @@ export default {
507507
@include flex-box-center(row, start, center);
508508
509509
.avatar {
510+
position: relative;
510511
float: left;
511-
border-radius: 50%;
512-
height: 6rem;
513512
width: 6rem;
513+
height: 6rem;
514+
border-radius: 50%;
514515
box-shadow: 0px 10px 30px 0px rgba(0, 64, 128, 0.1);
515-
position: relative;
516516
margin: 0;
517+
aspect-ratio: 1 / 1;
517518
}
518519
519520
.user-info {

‎src/components/sidebar/AdsPosition.vue‎

Lines changed: 18 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,10 @@
11
<template>
22
<div id="jade-gg-position">
33
<h2 class="aside-widget-title">{{ $t('adPosition') }}</h2>
4-
<el-carousel
5-
trigger="click"
6-
class="jade-gg-body"
7-
indicator-position="outside"
8-
:interval="5000"
9-
height="255px"
10-
>
4+
<el-carousel trigger="click" class="jade-gg-body" indicator-position="outside" :interval="5000" height="255px">
115
<el-carousel-item v-for="item in advertsList" :key="item.item">
12-
<a :href="item.path" target="_blank" rel="noopener">
13-
<img :src="item.image" :alt="item.alt" />
6+
<a class="link" :href="item.path" target="_blank" rel="noopener">
7+
<img class="img" :src="item.image" :alt="item.alt" />
148
</a>
159
</el-carousel-item>
1610
</el-carousel>
@@ -38,11 +32,24 @@ export default {
3832
}
3933
</script>
4034

41-
<style lang="scss">
35+
<style lang="scss" scoped>
4236
#jade-gg-position {
4337
.jade-gg-body {
44-
overflow: hidden;
4538
width: 100%;
39+
overflow: hidden;
40+
41+
.link {
42+
width: 100%;
43+
display: flex;
44+
justify-content: center;
45+
46+
.img {
47+
display: block;
48+
width: 25rem;
49+
height: auto;
50+
aspect-ratio: 1 / 1;
51+
}
52+
}
4653
}
4754
}
4855
</style>

‎src/components/sidebar/AwesomeSentence.vue‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<div id="awesome-sentence" class="awesome-sentence">
33
<div class="lined-paper" v-show="currentSentenceStr" v-loading="isLoading">
4-
<preview-md id="sentence" :value="currentSentenceStr || $t('noFill')" />
4+
<preview-md class="sentence" id="sentence" :value="currentSentenceStr || $t('noFill')" />
55
</div>
66
<div class="btn-group">
77
<el-button class="common-btn" @click="onPreviousClick">
@@ -60,7 +60,7 @@ export default {
6060
PreviewMd,
6161
},
6262
63-
mounted() {},
63+
mounted() { },
6464
6565
watch: {
6666
'sentence.content': function (val = '') {
@@ -188,6 +188,12 @@ export default {
188188
-o-background-size: 100% 26px;
189189
background-size: 100% 26px;
190190
191+
.sentence {
192+
width: 100%;
193+
height: auto;
194+
aspect-ratio: 1 / 1;
195+
}
196+
191197
div,
192198
p {
193199
line-height: 26px;

‎src/components/sidebar/FriendshipLinks.vue‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,6 @@
11
<template>
22
<div id="friendship-links">
3-
<a
4-
target="_blank"
5-
class="friendship-links"
6-
rel="noopener"
7-
@click="onFriendshipClick"
8-
href="/friendlink"
9-
>🤝友情链接
3+
<a target="_blank" class="friendship-links" rel="noopener" @click="onFriendshipClick" href="/friendlink">🤝友情链接
104
</a>
115
</div>
126
</template>
@@ -29,7 +23,11 @@ export default {
2923

3024
<style scoped lang="scss">
3125
@import './../../assets/scss/variables.scss';
26+
3227
.friendship-links {
28+
display: inline-block;
29+
width: 100%;
30+
height: 2rem;
3331
font-size: $font-large;
3432
color: $jade;
3533
font-weight: 500;
@@ -39,6 +37,7 @@ export default {
3937
text-shadow: -15px 5px 20px $producthunt;
4038
transition: all 0.3s ease-out;
4139
}
40+
4241
.friendship-links:hover {
4342
text-shadow: 0px 6px 20px $producthunt;
4443
}

‎src/components/sidebar/Main.vue‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,9 @@
88
<h2 class="aside-widget-title">{{ $t('friendshipLinks') }}</h2>
99
<friendship-links class="sub-content" />
1010
<h2 class="aside-widget-title">{{ $t('miniprogramCode') }}</h2>
11-
<div class="text-center">
12-
<img
13-
class="miniprogram"
14-
alt="倾城之链.小程序"
15-
src="https://image.nicelinks.site/nicelinks-miniprogram-code.jpeg?imageView2/1/w/250/h/250/interlace/1/ignore-error/1"
16-
/>
11+
<div class="sub-content">
12+
<img class="miniprogram" alt="倾城之链.小程序"
13+
src="https://image.nicelinks.site/nicelinks-miniprogram-code.jpeg?imageView2/1/w/250/h/250/interlace/1/ignore-error/1" />
1714
</div>
1815
<h2 class="aside-widget-title">{{ $t('rewardme') }}</h2>
1916
<reward-me class="sub-content" />
@@ -108,8 +105,9 @@ export default {
108105
}
109106
110107
.miniprogram {
111-
display: block;
112-
width: 100%;
108+
display: inline-block;
109+
width: 25rem;
110+
height: auto;
113111
aspect-ratio: 1 / 1;
114112
}
115113
}

‎src/components/sidebar/RewardMe.vue‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -111,14 +111,12 @@ export default {
111111
backface-visibility: hidden;
112112
}
113113
114-
#reward .front .reward-img {
115-
width: 100%;
116-
max-width: 256px;
117-
}
118-
114+
#reward .front .reward-img,
119115
#reward .back .reward-img {
120-
width: 100%;
121-
max-width: 256px;
116+
display: inline-block;
117+
width: 25rem;
118+
height: auto;
119+
aspect-ratio: 1 / 1;
122120
}
123121
124122
#reward .back {

‎src/components/sidebar/SitesRecommend.vue‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,6 @@
11
<template>
22
<div id="sites-recommend">
3-
<a
4-
target="_blank"
5-
class="nice-link-recommend"
6-
rel="noopener"
7-
@click="onRecommendClick"
8-
:href="reportPath"
9-
>👍优质网站推荐
3+
<a target="_blank" class="nice-link-recommend" rel="noopener" @click="onRecommendClick" :href="reportPath">👍优质网站推荐
104
</a>
115
</div>
126
</template>
@@ -33,7 +27,11 @@ export default {
3327

3428
<style scoped lang="scss">
3529
@import './../../assets/scss/variables.scss';
30+
3631
.nice-link-recommend {
32+
display: inline-block;
33+
width: 100%;
34+
height: 2rem;
3735
font-size: $font-large;
3836
color: $jade;
3937
font-weight: 500;
@@ -43,6 +41,7 @@ export default {
4341
text-shadow: -15px 5px 20px $producthunt;
4442
transition: all 0.3s ease-out;
4543
}
44+
4645
.nice-link-recommend:hover {
4746
text-shadow: 0px 6px 20px $producthunt;
4847
}

0 commit comments

Comments
 (0)