Skip to content

Commit dfca292

Browse files
GitHubPlayerZeroGitHubPlayerZero
committed
1. 更新套件，並加入 Swiper 套件。
2. 加入 Swiper 範例。
1 parent a2a4ba5 commit dfca292

File tree

10 files changed

+1403
-566
lines changed

10 files changed

+1403
-566
lines changed

‎package-lock.json

+571-395
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+16-15
Original file line numberDiff line numberDiff line change
@@ -12,28 +12,29 @@
1212
"deploy": "vite build && gh-pages -d dist"
1313
},
1414
"dependencies": {
15-
"@fortawesome/fontawesome-free": "^6.7.1",
16-
"@vee-validate/i18n": "^4.14.7",
17-
"@vee-validate/rules": "^4.14.7",
18-
"axios": "^1.7.8",
15+
"@fortawesome/fontawesome-free": "^6.7.2",
16+
"@vee-validate/i18n": "^4.15.0",
17+
"@vee-validate/rules": "^4.15.0",
18+
"axios": "^1.7.9",
1919
"bootstrap": "^5.3.3",
20-
"pinia": "^2.2.7",
21-
"sweetalert2": "^11.14.5",
22-
"vee-validate": "^4.14.7",
20+
"pinia": "^2.3.0",
21+
"sweetalert2": "^11.15.10",
22+
"swiper": "^11.2.1",
23+
"vee-validate": "^4.15.0",
2324
"vue": "^3.5.13",
2425
"vue-loading-overlay": "6.0",
2526
"vue-router": "^4.5.0"
2627
},
2728
"devDependencies": {
28-
"@rushstack/eslint-patch": "^1.10.4",
29+
"@rushstack/eslint-patch": "^1.10.5",
2930
"@vitejs/plugin-vue": "^5.2.1",
3031
"@vue/eslint-config-prettier": "^10.1.0",
31-
"eslint": "^9.15.0",
32-
"eslint-plugin-vue": "^9.31.0",
33-
"gh-pages": "^6.2.0",
34-
"prettier": "^3.4.1",
35-
"sass": "^1.81.0",
36-
"vite": "^5.4.11",
37-
"vite-plugin-vue-devtools": "^7.6.5"
32+
"eslint": "^9.18.0",
33+
"eslint-plugin-vue": "^9.32.0",
34+
"gh-pages": "^6.3.0",
35+
"prettier": "^3.4.2",
36+
"sass": "^1.83.1",
37+
"vite": "^6.0.7",
38+
"vite-plugin-vue-devtools": "^7.7.0"
3839
}
3940
}

‎src/App.vue

+48-49
Original file line numberDiff line numberDiff line change
@@ -5,85 +5,84 @@ import HelloWorld from './components/HelloWorld.vue';
55
</script>
66

77
<template>
8-
<header>
9-
<div class="wrapper">
10-
<nav>
11-
<RouterLink to="/">Home</RouterLink>
12-
<RouterLink to="/about">About</RouterLink>
13-
<RouterLink to="/samples">練習範例</RouterLink>
14-
<RouterLink :to="{name: 'kitSamples'}">套件範例</RouterLink>
15-
<RouterLink to="/dayjobs">每日任務</RouterLink>
16-
<RouterLink to="/homework">每週作業</RouterLink>
17-
</nav>
18-
</div>
19-
</header>
20-
21-
<hr style="margin: 0 0 24px; border: 3px solid #f00">
8+
<header>
9+
<div class="wrapper">
10+
<nav>
11+
<RouterLink to="/">Home</RouterLink>
12+
<RouterLink to="/about">About</RouterLink>
13+
<RouterLink to="/samples">練習範例</RouterLink>
14+
<RouterLink :to="{ name: 'kitSamples' }">套件範例</RouterLink>
15+
<RouterLink to="/dayjobs">每日任務</RouterLink>
16+
<RouterLink to="/homework">每週作業</RouterLink>
17+
</nav>
18+
</div>
19+
</header>
2220

23-
<RouterView />
21+
<hr style="margin: 0 0 24px; border: 3px solid #f00" />
22+
23+
<RouterView />
2424
</template>
2525

2626
<style lang="scss" scoped>
27-
2827
header {
29-
line-height: 1.5;
30-
max-height: 100vh;
28+
line-height: 1.5;
29+
max-height: 100vh;
3130
}
3231

3332
.logo {
34-
display: block;
35-
margin: 0 auto 2rem;
33+
display: block;
34+
margin: 0 auto 2rem;
3635
}
3736

3837
nav {
39-
width: 100%;
40-
font-size: 12px;
41-
text-align: center;
42-
margin-top: 2rem;
38+
width: 100%;
39+
font-size: 12px;
40+
text-align: center;
41+
margin-top: 2rem;
4342
}
4443

4544
// nav a.router-link-exact-active {
4645
// color: var(--color-text);
4746
// }
4847

4948
nav a.router-link-exact-active:hover {
50-
background-color: transparent;
49+
background-color: transparent;
5150
}
5251

5352
nav a {
54-
display: inline-block;
55-
padding: 0 1rem;
56-
border-left: 1px solid var(--color-border);
53+
display: inline-block;
54+
padding: 0 1rem;
55+
border-left: 1px solid var(--color-border);
5756
}
5857

5958
nav a:first-of-type {
60-
border: 0;
59+
border: 0;
6160
}
6261

6362
@media (min-width: 1024px) {
64-
header {
65-
// display: flex;
66-
place-items: center;
67-
padding-right: calc(var(--section-gap) / 2);
68-
}
63+
header {
64+
// display: flex;
65+
place-items: center;
66+
padding-right: calc(var(--section-gap) / 2);
67+
}
6968

70-
.logo {
71-
margin: 0 2rem 0 0;
72-
}
69+
.logo {
70+
margin: 0 2rem 0 0;
71+
}
7372

74-
header .wrapper {
75-
display: flex;
76-
place-items: flex-start;
77-
flex-wrap: wrap;
78-
}
73+
header .wrapper {
74+
display: flex;
75+
place-items: flex-start;
76+
flex-wrap: wrap;
77+
}
7978

80-
nav {
81-
text-align: left;
82-
margin-left: -1rem;
83-
font-size: 1rem;
79+
nav {
80+
text-align: left;
81+
margin-left: -1rem;
82+
font-size: 1rem;
8483

85-
padding: 1rem 0;
86-
margin-top: 1rem;
87-
}
84+
padding: 1rem 0;
85+
margin-top: 1rem;
86+
}
8887
}
8988
</style>

‎src/assets/myStyle.scss

-103
This file was deleted.

‎src/assets/scss/myStyle.scss

+104
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
// Bootstrap
2+
@use 'bootstrap/dist/css/bootstrap';
3+
4+
// Font Awesome
5+
// $fa-font-path: '/node_modules/@fortawesome/fontawesome-free/webfonts';
6+
// @import '@fortawesome/fontawesome-free/scss/fontawesome.scss';
7+
// @import '@fortawesome/fontawesome-free/scss/solid.scss';
8+
// @import '@fortawesome/fontawesome-free/scss/regular.scss';
9+
// Font Awesome
10+
$fa-font-path: '/node_modules/@fortawesome/fontawesome-free/webfonts';
11+
@use '@fortawesome/fontawesome-free/scss/fontawesome';
12+
// 需要在使用到的樣式設定變數配置
13+
@use '@fortawesome/fontawesome-free/scss/solid' with (
14+
$fa-font-path: $fa-font-path
15+
);
16+
17+
.h1,
18+
.h2 {
19+
margin-bottom: 20px;
20+
}
21+
.h3 {
22+
margin-bottom: 16px;
23+
}
24+
25+
.link-active {
26+
background-color: #aff;
27+
color: red;
28+
font-weight: bold;
29+
}
30+
31+
.box {
32+
border: 3px dashed orange;
33+
padding: 10px;
34+
}
35+
36+
.result {
37+
border: 1px dashed #aaa;
38+
padding: 5px 8px;
39+
}
40+
41+
.fieldset {
42+
border: 3px dashed #3355ff;
43+
padding: 15px;
44+
45+
legend {
46+
float: none;
47+
width: auto;
48+
padding: 0 5px;
49+
margin-bottom: 0;
50+
font-size: 20px;
51+
}
52+
}
53+
54+
.flex {
55+
display: flex;
56+
flex-wrap: wrap;
57+
}
58+
59+
.desc {
60+
color: blue;
61+
}
62+
63+
.hr {
64+
border-width: 2.5px;
65+
border-style: dashed;
66+
// border-color: #0af;
67+
border-color: #555;
68+
margin: 36px 0;
69+
}
70+
71+
.text-bold {
72+
font-weight: bold;
73+
}
74+
75+
// 產出間距
76+
$spacer: 0, 4, 8, 12, 16, 20, 24, 28, 32, 36, 40, 44, 48, 52, 56, 60;
77+
78+
@each $val in $spacer {
79+
.mt-#{$val} {
80+
margin-top: #{$val}px !important;
81+
}
82+
.mr-#{$val} {
83+
margin-right: #{$val}px !important;
84+
}
85+
.mb-#{$val} {
86+
margin-bottom: #{$val}px !important;
87+
}
88+
.ml-#{$val} {
89+
margin-left: #{$val}px !important;
90+
}
91+
92+
.pt-#{$val} {
93+
padding-top: #{$val}px !important;
94+
}
95+
.pr-#{$val} {
96+
padding-right: #{$val}px !important;
97+
}
98+
.pb-#{$val} {
99+
padding-bottom: #{$val}px !important;
100+
}
101+
.pl-#{$val} {
102+
padding-left: #{$val}px !important;
103+
}
104+
}

0 commit comments

Comments
 (0)