Skip to content

Commit 73b21dc

Browse files
Rexlin595Rexlin595
committed
last fix css
1 parent 5ca6b01 commit 73b21dc

File tree

4 files changed

+204
-59
lines changed

4 files changed

+204
-59
lines changed

‎src/App.vue‎

Lines changed: 23 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,12 @@
11
<script setup>
2-
// 現在我們不需要在這裡 import 所有元件了
3-
// vue-router 會根據 URL 自動載入對應的元件
42
import { RouterLink, RouterView } from 'vue-router'
53
</script>
64

75
<template>
86
<header>
97
<nav>
10-
<RouterLink to="/">飲品菜單</RouterLink>
11-
<RouterLink to="/bmi">BMI 計算機</RouterLink>
12-
<RouterLink to="/computed">Computed 範例</RouterLink>
13-
<RouterLink to="/week1">Week 1</RouterLink>
14-
<RouterLink to="/week2">Week 2</RouterLink>
15-
<RouterLink to="/week1_hw_tc">Week1 作業</RouterLink>
8+
<!-- 導覽列現在只剩下一個回到主目錄的連結 -->
9+
<RouterLink to="/" class="home-link">🏠 主目錄</RouterLink>
1610
</nav>
1711
</header>
1812

@@ -23,50 +17,53 @@ import { RouterLink, RouterView } from 'vue-router'
2317

2418
<style>
2519
/* 為了讓深色主題應用到整個頁面，我們將樣式從 scoped 改為全域 */
26-
/* 如果您只想修改這個元件，可以保留 scoped，但建議全域統一主題 */
2720
body {
28-
background-color: #111827; /* Tailwind's gray-900 */
21+
/* 與 HomeView.vue 的背景色 (bg-gray-900) 保持一致 */
22+
background-color: #111827;
2923
}
3024
3125
header {
3226
line-height: 1.5;
3327
padding: 1rem 0;
34-
border-bottom: 1px solid #374151; /* Darker border (gray-700) */
35-
background-color: #1f2937; /* Dark background (gray-800) */
28+
/* 與 HomeView.vue 卡片和 App.vue 其他元件的邊框顏色一致 */
29+
border-bottom: 1px solid #374151;
30+
/* 與 HomeView.vue 卡片的背景色 (bg-gray-800) 一致 */
31+
background-color: #000000;
3632
}
3733
3834
nav {
3935
width: 100%;
40-
font-size: 1rem;
36+
font-size: 1.1rem; /* 稍微放大字體 */
4137
text-align: center;
42-
margin-top: 1rem;
4338
}
4439
45-
nav a {
46-
display: inline-block;
47-
padding: 0.5rem 1rem;
48-
border-left: 1px solid #4b5563; /* gray-600 */
40+
/* 移除舊的 a 標籤樣式，改用新的 home-link 樣式 */
41+
.home-link {
42+
padding: 0.5rem 1.5rem;
4943
text-decoration: none;
50-
color: #d1d5db; /* Lighter text color for dark background (gray-300) */
51-
transition: color 0.3s;
44+
/* 在深色背景下清晰的淺灰色文字 */
45+
color: #d1d5db;
46+
transition: all 0.3s;
47+
border-radius: 8px;
5248
}
5349
54-
nav a:first-of-type {
55-
border: 0;
50+
.home-link:hover {
51+
background-color: #374151; /* 滑鼠懸停時的背景色 */
52+
color: #fff;
5653
}
5754
58-
/* 這個樣式會應用在當前 active 的連結上 */
59-
nav a.router-link-exact-active {
60-
color: #34d399; /* A vibrant color for active link (emerald-400) */
55+
/* 當前 active 的連結樣式 */
56+
.home-link.router-link-exact-active {
57+
color: #34d399; /* 鮮明的綠色，用於高亮 */
6158
font-weight: bold;
6259
}
6360
6461
main {
62+
/* main 的樣式維持不變 */
6563
display: flex;
6664
justify-content: center;
6765
align-items: flex-start;
6866
min-height: calc(100vh - 80px); /* 根據 header 高度微調 */
6967
padding-top: 2rem;
70-
/* 背景色由 body 控制，這裡不需要再設定 */
7168
}
7269
</style>

‎src/components/DrinkMenu.vue‎

Lines changed: 75 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -28,17 +28,19 @@
2828
<small>{{ item.description }}</small>
2929
</td>
3030

31-
<td>{{ item.price }}</td>
31+
<td>${{ item.price }}</td>
3232

3333
<td class="stock-control">
34-
<button @click="decreaseStock(item)">-</button>
34+
<button class="btn-decrease" @click="decreaseStock(item)">-</button>
3535
<span>{{ item.stock }}</span>
36-
<button @click="increaseStock(item)">+</button>
36+
<button class="btn-increase" @click="increaseStock(item)">+</button>
3737
</td>
3838

3939
<td>
40-
<button v-if="editingItemId === item.id" @click="confirmEdit(item)">確認</button>
41-
<button v-else @click="startEdit(item)">編輯</button>
40+
<button v-if="editingItemId === item.id" class="btn-confirm" @click="confirmEdit(item)">
41+
確認
42+
</button>
43+
<button v-else class="btn-edit" @click="startEdit(item)">編輯</button>
4244
</td>
4345
</tr>
4446
</tbody>
@@ -119,80 +121,129 @@ const cancelEdit = () => {
119121
120122
h1 {
121123
text-align: center;
122-
color: black;
124+
color: #e5e7eb; /* 淺灰色文字 */
125+
margin-bottom: 2rem;
123126
}
124127
125128
table {
126129
width: 100%;
127130
border-collapse: collapse;
128-
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
131+
background-color: #1f2937; /* 深灰色背景 (gray-800) */
132+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
133+
border-radius: 8px;
134+
overflow: hidden; /* 確保圓角效果 */
129135
}
130136
131137
th,
132138
td {
133-
border: 1px solid #ddd;
134-
padding: 12px 15px;
139+
border: 1px solid #374151; /* 深灰色邊框 (gray-700) */
140+
padding: 14px 18px;
135141
text-align: center;
136-
color: black;
142+
color: #d1d5db; /* 淺灰色文字 (gray-300) */
137143
vertical-align: middle;
138144
}
139145
140-
th:first-child,
141146
td:first-child {
142-
width: 25%;
147+
color: #ffffff; /* 品項名稱使用白色，更突出 */
148+
font-weight: 500;
143149
}
144150
145151
th {
146-
background-color: #4caf50;
147-
color: white;
152+
background-color: #374151; /* 標題使用更深的灰色 (gray-700) */
153+
color: #ffffff;
154+
text-transform: uppercase;
155+
letter-spacing: 1px;
156+
}
157+
158+
tr {
159+
background-color: #1f2937; /* 單數行背景 (gray-800) */
148160
}
149161
150162
tr:nth-child(even) {
151-
background-color: #f2f2f2;
163+
background-color: #283342; /* 雙數行使用稍微不同的深灰 */
152164
}
153165
154166
tr:hover {
155-
background-color: #ddd;
167+
background-color: #4b5563; /* 滑鼠懸停時的顏色 (gray-600) */
156168
}
157169
158170
button {
159-
background-color: #4caf50;
160171
color: white;
161172
border: none;
162-
padding: 8px 12px;
173+
padding: 8px 16px;
163174
text-align: center;
164175
text-decoration: none;
165176
display: inline-block;
166177
font-size: 14px;
167178
margin: 0;
168179
cursor: pointer;
169-
border-radius: 4px;
170-
transition: background-color 0.3s;
180+
border-radius: 6px;
181+
transition: all 0.3s ease;
171182
}
172183
173184
button:hover {
174-
background-color: #45a049;
175-
}
185+
transform: translateY(-2px);
186+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
187+
}
188+
189+
.btn-decrease {
190+
background-color: #dc2626;
191+
} /* red-600 */
192+
.btn-decrease:hover {
193+
background-color: #b91c1c;
194+
} /* red-700 */
195+
196+
.btn-increase {
197+
background-color: #16a34a;
198+
} /* green-600 */
199+
.btn-increase:hover {
200+
background-color: #15803d;
201+
} /* green-700 */
202+
203+
.btn-edit {
204+
background-color: #8b5cf6;
205+
} /* violet-500 */
206+
.btn-edit:hover {
207+
background-color: #7c3aed;
208+
} /* violet-600 */
209+
210+
.btn-confirm {
211+
background-color: #2563eb;
212+
} /* blue-600 */
213+
.btn-confirm:hover {
214+
background-color: #1d4ed8;
215+
} /* blue-700 */
176216
177217
td.stock-control {
178218
display: flex;
179219
justify-content: center;
180220
align-items: center;
181221
gap: 12px;
182222
padding: 8px 15px;
223+
border: 1px solid transparent; /* 移除庫存控制格的邊框 */
224+
border-bottom: 1px solid #374151;
183225
}
184226
185227
.stock-control span {
186228
display: inline-block;
187229
width: 30px;
188230
text-align: center;
189231
font-weight: bold;
232+
font-size: 1.1rem;
233+
color: #ffffff;
190234
}
191235
192236
td input[type='text'] {
193-
width: 90%;
237+
width: 95%;
194238
padding: 8px;
195239
border-radius: 4px;
196-
border: 1px solid #ccc;
240+
background-color: #4b5563; /* gray-600 */
241+
border: 1px solid #6b7280; /* gray-500 */
242+
color: #ffffff;
243+
outline: none;
244+
}
245+
td input[type='text']:focus {
246+
border-color: #8b5cf6; /* violet-500 */
247+
box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.4);
197248
}
198249
</style>

‎src/components/HomeView.vue‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
<template>
2+
<div class="container mx-auto p-4 md:p-8">
3+
<div class="text-center mb-12">
4+
<h1 class="text-4xl md:text-5xl font-bold text-white">Vue 專案展示</h1>
5+
<p class="text-lg text-gray-400 mt-4">點擊下方卡片查看各個獨立頁面範例</p>
6+
</div>
7+
8+
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
9+
<!-- 飲品菜單 -->
10+
<RouterLink to="/drink-menu" class="card-link">
11+
<div class="card">
12+
<div class="card-icon bg-green-500">🥤</div>
13+
<h3 class="card-title">飲品菜單</h3>
14+
<!-- ↓↓↓ 更新了這裡的描述 ↓↓↓ -->
15+
<p class="card-description">整合深色主題的庫存管理表格，可即時編輯品項與數量。</p>
16+
</div>
17+
</RouterLink>
18+
19+
<!-- BMI 計算機 -->
20+
<RouterLink to="/bmi" class="card-link">
21+
<div class="card">
22+
<div class="card-icon bg-blue-500">⚖️</div>
23+
<h3 class="card-title">BMI 計算機</h3>
24+
<p class="card-description">一個互動式的 BMI 計算器，根據輸入即時反應。</p>
25+
</div>
26+
</RouterLink>
27+
28+
<!-- Computed 範例 -->
29+
<RouterLink to="/computed" class="card-link">
30+
<div class="card">
31+
<div class="card-icon bg-purple-500">⚙️</div>
32+
<h3 class="card-title">Computed 範例</h3>
33+
<p class="card-description">展示 Vue 的 computed 屬性如何簡化模板邏輯。</p>
34+
</div>
35+
</RouterLink>
36+
37+
<!-- Week 1 -->
38+
<RouterLink to="/week1" class="card-link">
39+
<div class="card">
40+
<div class="card-icon bg-yellow-500">1️⃣</div>
41+
<h3 class="card-title">Week 1</h3>
42+
<p class="card-description">第一週的練習或筆記內容展示頁面。</p>
43+
</div>
44+
</RouterLink>
45+
46+
<!-- Week 2 -->
47+
<RouterLink to="/week2" class="card-link">
48+
<div class="card">
49+
<div class="card-icon bg-red-500">2️⃣</div>
50+
<h3 class="card-title">Week 2</h3>
51+
<p class="card-description">第二週的練習或筆記內容展示頁面。</p>
52+
</div>
53+
</RouterLink>
54+
55+
<!-- Week1 作業 -->
56+
<RouterLink to="/week1_hw_tc" class="card-link">
57+
<div class="card">
58+
<div class="card-icon bg-indigo-500">🎓</div>
59+
<h3 class="card-title">學生名單 (作業)</h3>
60+
<p class="card-description">使用 Tailwind CSS 設計的深色模式成績單表格。</p>
61+
</div>
62+
</RouterLink>
63+
</div>
64+
</div>
65+
</template>
66+
67+
<script setup>
68+
import { RouterLink } from 'vue-router'
69+
</script>
70+
71+
<style scoped>
72+
.card-link {
73+
text-decoration: none;
74+
}
75+
76+
.card {
77+
@apply bg-gray-800 rounded-xl p-6 text-center transition-all duration-300 ease-in-out transform hover:-translate-y-2 hover:shadow-2xl hover:shadow-purple-500/20;
78+
display: flex;
79+
flex-direction: column;
80+
align-items: center;
81+
height: 100%;
82+
}
83+
84+
.card-icon {
85+
@apply w-16 h-16 rounded-full flex items-center justify-center text-3xl mb-4 shadow-lg;
86+
}
87+
88+
.card-title {
89+
@apply text-xl font-bold text-white mb-2;
90+
}
91+
92+
.card-description {
93+
@apply text-gray-400 text-sm;
94+
}
95+
</style>

0 commit comments

Comments
 (0)