Skip to content

Commit 0fe2135

Browse files
shanehsushanehsu
committed
完成產品頁面
1 parent a7b8c78 commit 0fe2135

File tree

3 files changed

+131
-17
lines changed

3 files changed

+131
-17
lines changed

‎index.html‎

Lines changed: 0 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -24,23 +24,6 @@
2424
})
2525
})
2626
</script>
27-
<style>
28-
.glide__track {
29-
display: block;
30-
position: relative;
31-
}
32-
33-
.glide__track:before {
34-
display: block;
35-
content: '';
36-
position: absolute;
37-
width: 100%;
38-
height: 100%;
39-
-moz-box-shadow: inset 0px 0px 3px 1px rgba(0, 0, 0, 1);
40-
-webkit-box-shadow: inset 0px 0px 3px 1px rgba(0, 0, 0, 1);
41-
box-shadow: inset 0px 0px 20px 25px white;
42-
}
43-
</style>
4427
</head>
4528

4629
<body>

‎product.html‎

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>阿寯的美食天地</title>
7+
<link rel="stylesheet" type="text/css" href="dist/semantic.css">
8+
<link rel="stylesheet" type="text/css" href="style.css">
9+
<link rel="stylesheet" type="text/css" href="glide/css/glide.core.css">
10+
<link rel="stylesheet" type="text/css" href="glide/css/glide.theme.css">
11+
12+
<script src="jquery-2.2.2.js"></script>
13+
<script src="dist/semantic.js"></script>
14+
<script src="script.js"></script>
15+
<script src="glide/glide.js"></script>
16+
17+
<script>
18+
$(function() {
19+
$("#Glide").glide({
20+
type: "carousel"
21+
})
22+
})
23+
</script>
24+
</head>
25+
26+
<body>
27+
<br>
28+
<div class="ui container" style="padding-bottom: 2rem;">
29+
<div class="ui large menu" style="margin-bottom: 2rem;">
30+
<a class="active item">阿寯的美食天地</a>
31+
<div class="right menu">
32+
<div class="collapsed search item">
33+
<div class="ui icon input">
34+
<input type="text" placeholder="關鍵字">
35+
<i class="search link icon"></i>
36+
</div>
37+
</div>
38+
<a class="search trigger ui item"><i class="search link marginless icon"></i></a>
39+
<a id="login-modal-show" class="ui item">登入</a>
40+
<a id="cart-modal-show" class="ui item">購物車</a>
41+
</div>
42+
</div>
43+
<!-- Product -->
44+
<div>
45+
<div class="ui items">
46+
<div class="item">
47+
<a class="ui image">
48+
<img src="images/001.jpg">
49+
</a>
50+
<div class="middle aligned content">
51+
<h1 class="ui header">大陸 A 菜</h1>
52+
<div class="meta">
53+
<div class="recent" style="display: inline-block;">
54+
<i class="users icon"></i> 近三天內有 643 人購買
55+
</div>
56+
<span class="price quantity separator"></span>
57+
<div class="rating" style="display: inline-block;">
58+
<div class="ui star rating" data-rating="5" data-max-rating="5"></div>
59+
</div>
60+
</div>
61+
<div class="description">
62+
<p>福山萵苣，在臺灣俗稱大陸妹、妹仔菜或是大陸萵菜，是一種萵苣屬蔬菜。</p>
63+
</div>
64+
<div class="extra">
65+
<div class="ui blue add to cart button">
66+
<i class="add icon"></i> 加入購物車
67+
</div>
68+
</div>
69+
</div>
70+
<div class="ui right floated large statistics">
71+
<div class="ui horizontal green statistic">
72+
<div class="label">
73+
<span data-quantity-per-item="250" class="quantity per item"></span>
74+
<span class="gram unit" style="padding-right: 1em; "></span>
75+
</div>
76+
<div class="value">
77+
<span data-price-per-item="27" class="price per item"></span>
78+
<span class="dollar unit"></span>
79+
</div>
80+
</div>
81+
</div>
82+
</div>
83+
</div>
84+
<div id="image-carousel">
85+
<div id="Glide" class="glide">
86+
87+
<div class="glide__arrows">
88+
<button class="ui inverted blue circular icon button glide__arrow large prev" data-glide-dir="<"><i class="chevron left icon"></i></button>
89+
<button class="ui inverted blue circular icon button glide__arrow large next" data-glide-dir=">"><i class="chevron right icon" style="margin: 0;"></i></button>
90+
</div>
91+
92+
<div class="glide__wrapper">
93+
<div class="glide__track">
94+
<img class="glide__slide" src="images/index-carousel/1.jpg" />
95+
<img class="glide__slide" src="images/index-carousel/2.jpg" />
96+
<img class="glide__slide" src="images/index-carousel/3.jpg" />
97+
<img class="glide__slide" src="images/index-carousel/4.jpg" />
98+
<img class="glide__slide" src="images/index-carousel/5.jpg" />
99+
</div>
100+
</div>
101+
102+
<div class="glide__bullets"></div>
103+
</div>
104+
</div>
105+
<div class="ui segment">
106+
<p>在中國北京當地俗稱「蒿仔杆」屬於萵菜類中的嫩葉萵苣，是中國大陸北京地區吃火鍋或涮羊肉時相當受歡迎的配菜。 此菜因與臺灣人熟知的臺灣萵菜（A菜）相近，早期農民稱之為「大陸A菜」，而後民眾誤傳為「大陸妹」。 依據台北農產運銷公司有關人員表示，1999年之前南臺灣農民私下將此菜由中國大陸引進臺灣栽種，初上市時，許多臺灣消費者不知此菜原名，有些人以其葉片色澤翠綠，又油油亮亮，質感脆嫩，又聽聞此菜品種來自中國大陸，因此菜名流傳「大陸妹」的俗稱。客家話則有「妹仔菜」的對映語。</p>
107+
<p>在臺灣市場上的蔬菜「大陸妹」（福山萵苣的俗稱）並不是從大陸進口，而是在臺灣本地栽種，全年皆生產。2001年在臺灣南部已是相當普遍的家庭蔬菜，而主要栽培區在以臺灣葉菜類主產區的雲林縣二崙、西螺地區，每天市場交易量約2至3公噸左右。</p>
108+
<p>除了「大陸妹」的俗稱之外，但該公司曾將此新興蔬菜定名「油麥菜」。不過，「油麥菜」的名在香港、澳門反而指的是台灣俗稱「A菜」的臺灣萵菜。 一般傳統萵菜常拿來當海鮮的墊底裝飾，口感不佳，故並不加以食用。此菜（「大陸妹」）是改良過的萵菜，有翠綠的大葉片和甜脆的口感，所以很受到大家的喜愛。加上不容易變色的特質和價錢便宜，也是臺灣火鍋店或小吃店中的明星青菜之一。</p>
109+
</div>
110+
</div>
111+
</div>
112+
</div>
113+
</body>
114+
115+
</html>

‎style.css‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,4 +76,20 @@ span.quantity.per.item {
7676

7777
body .ui.container {
7878
padding-bottom: 3rem;
79+
}
80+
81+
.glide__track {
82+
display: block;
83+
position: relative;
84+
}
85+
86+
.glide__track:before {
87+
display: block;
88+
content: '';
89+
position: absolute;
90+
width: 100%;
91+
height: 100%;
92+
-moz-box-shadow: inset 0px 0px 3px 1px rgba(0, 0, 0, 1);
93+
-webkit-box-shadow: inset 0px 0px 3px 1px rgba(0, 0, 0, 1);
94+
box-shadow: inset 0px 0px 20px 25px white;
7995
}

0 commit comments

Comments
 (0)