Skip to content

Commit 49212dd

Browse files
Rexlin595Rexlin595
committed
fix css
1 parent eaffdfa commit 49212dd

File tree

2 files changed

+165
-40
lines changed

2 files changed

+165
-40
lines changed

‎src/components/week1_2.vue‎

Lines changed: 94 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,103 @@
1+
<template>
2+
<div class="container mx-auto p-4 md:p-8 bg-gray-50 min-h-screen">
3+
<div class="max-w-4xl mx-auto bg-white rounded-xl shadow-lg overflow-hidden">
4+
<div class="p-6 md:p-8">
5+
<h2 class="text-2xl md:text-3xl font-bold text-gray-800 mb-6 text-center">
6+
👨‍🎓 學生名單與成績
7+
</h2>
8+
9+
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6 text-center">
10+
<div class="bg-blue-100 text-blue-800 p-4 rounded-lg">
11+
<p class="text-lg font-semibold">平均分數</p>
12+
<p class="text-3xl font-bold">{{ averageScore }}</p>
13+
</div>
14+
<div class="bg-green-100 text-green-800 p-4 rounded-lg">
15+
<p class="text-lg font-semibold">最高分數</p>
16+
<p class="text-3xl font-bold">{{ highestScore }}</p>
17+
</div>
18+
</div>
19+
20+
<div class="overflow-x-auto">
21+
<table class="min-w-full text-left text-sm font-light">
22+
<thead class="border-b bg-gray-800 text-white font-medium">
23+
<tr>
24+
<th scope="col" class="px-6 py-4">學號</th>
25+
<th scope="col" class="px-6 py-4">姓名</th>
26+
<th scope="col" class="px-6 py-4 text-center">分數</th>
27+
<th scope="col" class="px-6 py-4 text-center">評級</th>
28+
</tr>
29+
</thead>
30+
<tbody>
31+
<tr
32+
v-for="student in students"
33+
:key="student.id"
34+
class="border-b transition duration-300 ease-in-out hover:bg-gray-100"
35+
>
36+
<td class="whitespace-nowrap px-6 py-4 font-mono">{{ student.id }}</td>
37+
<td class="whitespace-nowrap px-6 py-4 font-medium">{{ student.name }}</td>
38+
<td class="whitespace-nowrap px-6 py-4 text-center">
39+
<span
40+
:class="getScoreClass(student.score)"
41+
class="px-3 py-1 text-base font-bold rounded-full"
42+
>
43+
{{ student.score }}
44+
</span>
45+
</td>
46+
<td class="whitespace-nowrap px-6 py-4 text-center text-2xl">
47+
{{ getGradeEmoji(student.score) }}
48+
</td>
49+
</tr>
50+
</tbody>
51+
</table>
52+
</div>
53+
</div>
54+
</div>
55+
</div>
56+
</template>
57+
158
<script setup>
2-
import { ref } from 'vue'
59+
import { ref, computed } from 'vue'
60+
361
const students = ref([
462
{ id: 's001', name: '洧杰', score: 90 },
563
{ id: 's002', name: '小花', score: 85 },
664
{ id: 's003', name: '阿明', score: 78 },
765
{ id: 's004', name: '佩佩', score: 92 },
66+
{ id: 's005', name: '志強', score: 65 },
67+
{ id: 's006', name: '美玲', score: 58 },
868
])
69+
70+
// 計算平均分數
71+
const averageScore = computed(() => {
72+
if (students.value.length === 0) return 0
73+
const total = students.value.reduce((acc, student) => acc + student.score, 0)
74+
return (total / students.value.length).toFixed(1) // 取到小數點後一位
75+
})
76+
77+
// 計算最高分數
78+
const highestScore = computed(() => {
79+
if (students.value.length === 0) return 0
80+
return Math.max(...students.value.map((s) => s.score))
81+
})
82+
83+
// 根據分數回傳對應的 CSS class
84+
function getScoreClass(score) {
85+
if (score >= 90) return 'bg-green-200 text-green-800'
86+
if (score >= 80) return 'bg-blue-200 text-blue-800'
87+
if (score >= 70) return 'bg-yellow-200 text-yellow-800'
88+
if (score >= 60) return 'bg-orange-200 text-orange-800'
89+
return 'bg-red-200 text-red-800'
90+
}
91+
92+
// 根據分數回傳對應的表情符號
93+
function getGradeEmoji(score) {
94+
if (score >= 90) return '🏆'
95+
if (score >= 80) return '👍'
96+
if (score >= 60) return '✅'
97+
return '😥'
98+
}
999
</script>
10100

11-
<template>
12-
<div class="p-6">
13-
<h2 class="text-xl font-bold mb-4">👨🎓 學生名單</h2>
14-
<ul>
15-
<li v-for="student in students" :key="student.id" class="mb-2 p-2 border rounded">
16-
<p>🆔 學號：{{ student.id }}</p>
17-
<p>📛 姓名：{{ student.name }}</p>
18-
<p>📈 分數：{{ student.score }}</p>
19-
</li>
20-
</ul>
21-
</div>
22-
</template>
101+
<style scoped>
102+
/* 這裡可以放一些無法用 Tailwind 輕鬆實現的自訂樣式，但此範例中我們主要使用 Tailwind */
103+
</style>

‎src/components/week1_hw_tc.vue‎

Lines changed: 71 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,45 @@
11
<template>
2-
<div class="container mt-5">
3-
<table>
4-
<thead>
5-
<tr>
6-
<th scope="col">品項</th>
7-
<th scope="col">描述</th>
8-
<th scope="col">價格</th>
9-
<th scope="col">庫存</th>
10-
</tr>
11-
</thead>
12-
<tbody>
13-
<tr v-for="item in drinks" :key="item.id">
14-
<td>{{ item.name }}</td>
15-
<td>
16-
<small>{{ item.description }}</small>
17-
</td>
18-
<td>{{ item.price }}</td>
19-
<td>
20-
<button @click="handleDrinkStock(item.id, item.stock - 1)" :disabled="item.stock < 1">
21-
-
22-
</button>
23-
{{ item.stock }}
24-
<button @click="handleDrinkStock(item.id, item.stock + 1)">+</button>
25-
</td>
26-
</tr>
27-
</tbody>
28-
</table>
2+
<div class="container mt-4">
3+
<h2 class="mb-4 text-center">飲品菜單</h2>
4+
<div class="table-responsive">
5+
<table class="table table-hover table-bordered align-middle">
6+
<thead class="table-dark">
7+
<tr>
8+
<th scope="col" class="text-center">品項</th>
9+
<th scope="col">描述</th>
10+
<th scope="col" class="text-center">價格</th>
11+
<th scope="col" class="text-center" style="width: 150px">庫存</th>
12+
</tr>
13+
</thead>
14+
<tbody>
15+
<tr v-for="item in drinks" :key="item.id">
16+
<td class="fw-bold text-center">{{ item.name }}</td>
17+
<td>
18+
<small>{{ item.description }}</small>
19+
</td>
20+
<td class="text-center">${{ item.price }}</td>
21+
<td>
22+
<div class="d-flex justify-content-center align-items-center">
23+
<button
24+
class="btn btn-sm btn-outline-danger"
25+
@click="handleDrinkStock(item.id, item.stock - 1)"
26+
:disabled="item.stock < 1"
27+
>
28+
-
29+
</button>
30+
<span class="mx-2 stock-display">{{ item.stock }}</span>
31+
<button
32+
class="btn btn-sm btn-outline-success"
33+
@click="handleDrinkStock(item.id, item.stock + 1)"
34+
>
35+
+
36+
</button>
37+
</div>
38+
</td>
39+
</tr>
40+
</tbody>
41+
</table>
42+
</div>
2943
</div>
3044
</template>
3145

@@ -94,6 +108,9 @@ const data = [
94108
const drinks = ref(data)
95109
96110
function handleDrinkStock(id, stock) {
111+
// 確保庫存不會變成負數
112+
if (stock < 0) return
113+
97114
drinks.value = drinks.value.map((item) => {
98115
if (item.id === id) {
99116
item.stock = stock
@@ -102,3 +119,30 @@ function handleDrinkStock(id, stock) {
102119
})
103120
}
104121
</script>
122+
123+
<style scoped>
124+
/* scoped 樣式只會作用在這個元件內，不會影響到其他元件 */
125+
.container {
126+
max-width: 800px;
127+
}
128+
129+
.table {
130+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
131+
}
132+
133+
.stock-display {
134+
display: inline-block;
135+
width: 40px;
136+
text-align: center;
137+
font-weight: bold;
138+
font-size: 1.1rem;
139+
}
140+
141+
.btn {
142+
border-radius: 50%;
143+
width: 30px;
144+
height: 30px;
145+
line-height: 1;
146+
padding: 0;
147+
}
148+
</style>

0 commit comments

Comments
 (0)