-
Notifications
You must be signed in to change notification settings - Fork 0
/
prod_detail.html
175 lines (173 loc) · 10.6 KB
/
prod_detail.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap CSS -->
<link href="assets/bs5/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="assets/slick-1.8.1/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="assets/slick-1.8.1/slick/slick-theme.css"/>
<link rel="stylesheet" type="text/css" href="assets/fancybox-master/dist/jquery.fancybox.min.css">
<link rel="stylesheet" href="style.css">
<title>Hello Spring</title>
</head>
<body class="prod p02">
<div w3-include-html="comp_nav.html"></div>
<div w3-include-html="comp_header_home.html"></div>
<main>
<div class="container mt-4">
<div class="row">
<div class="col-lg-10 order-lg-2">
<div class="row">
<div class="col-md-6">
<div>
<a href="images/sec-1@2x.jpg" class="main-img">
<img src="images/sec-1@2x.jpg" alt="" class="img-fluid">
</a>
</div>
<div class="slick">
<div> <img class="img-fluid" src="images/sec-1@2x.jpg" alt=""> </div>
<div> <img class="img-fluid" src="images/sec-2@2x.jpg" alt=""> </div>
<div> <img class="img-fluid" src="images/sec-7@2x.jpg" alt=""> </div>
<div> <img class="img-fluid" src="images/sec-8@2x.jpg" alt=""> </div>
<div> <img class="img-fluid" src="images/sec-9@2x.jpg" alt=""> </div>
<div> <img class="img-fluid" src="images/sec-4@2x.jpg" alt=""> </div>
<div> <img class="img-fluid" src="images/sec-5@2x.jpg" alt=""> </div>
<div> <img class="img-fluid" src="images/sec-6@2x.jpg" alt=""> </div>
<div> <img class="img-fluid" src="images/sec-7@2x.jpg" alt=""> </div>
</div>
</div>
<div class="col-md-6">
<div class="prod-info">
<h4 class="text-primary">產品名稱</h4>
<div class="price">
<span class="original">$300</span>
<span class="onsale">$280</span>
</div>
<p>綠色回憶宣傳聽說，種種特價，讓她這樣房。</p>
<ul>
<li>生存重點一款輸出一。</li>
<li>加上之處，小說傷心。</li>
<li>刺激隨後強烈，版面。</li>
</ul>
</div>
<div class="add-cart">
<form action="prod_detail.html" method="POST">
<div class="mb-3 row">
<div class="col-3">
<label for="color">顏色:</label>
</div>
<div class="col-9">
<select class="form-select" aria-label="選擇產品顏色" id="color" name="color">
<option value="" selected>選擇產品顏色</option>
<option value="BK">黑色</option>
<option value="WT">白色</option>
<option value="RD">紅色</option>
</select>
</div>
</div>
<div class="mb-3 row">
<div class="col-3"><label for="size">尺寸:</label></div>
<div class="col-9">
<select class="form-select col-8" aria-label="選擇產品尺寸" id="size" name="size">
<option value="" selected>選擇產品尺寸</option>
<option value="S">小</option>
<option value="M">中</option>
<option value="L">大</option>
<option value="XL">特大</option>
</select>
</div>
</div>
<div class="mb-3 row">
<div class="col-3">
<label for="qty">數量:</label>
</div>
<div class="col-9">
<input type="number" class="form-control" id="qty" name="qty" value="1">
</div>
</div>
<div class="mb-3">
<button class="btn btn-primary" type="submit">加入購物車</button>
</div>
<input type="hidden" id="modelno" name="modelno" value="U12345">
</form>
</div>
</div>
<div class="col-12 my-4">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="tab1" data-bs-toggle="tab" data-bs-target="#page1" type="button" role="tab" aria-selected="true">
產品簡介
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="tab2" data-bs-toggle="tab" data-bs-target="#page2" type="button" role="tab" aria-selected="false">
詳細規格
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="tab3" data-bs-toggle="tab" data-bs-target="#page3" type="button" role="tab" aria-selected="false">
支援服務
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="tab4" data-bs-toggle="tab" data-bs-target="#page4" type="button" role="tab" aria-selected="false">
用戶回饋
</button>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="page1" role="tabpanel">
1. 本地下載依據緊張漫畫作品突破左右主板雙方生日這些，如果你傳說資源交換海外交給青年毫不仔細我把演唱用。
</div>
<div class="tab-pane fade" id="page2" role="tabpanel">
2. 根據優秀，此時投訴降價，液晶之外他在程式貿易進去，食品重大建議規範他的條例推薦短信創建我來，為你商。
</div>
<div class="tab-pane fade" id="page3" role="tabpanel">
3. 階段案件來自坐在同一，舉報某些擴大雙方保障，咖啡抱著也許，效果工作檔案並且監控另一個獨立共同投票當。
</div>
<div class="tab-pane fade" id="page4" role="tabpanel">
4. 實在一級隊伍房子套件領導自由註冊時間，種種提醒一切你就還有責任編輯改善網上幾個先進性，電子商務本公。
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-2 order-lg-1">
<div w3-include-html="comp_prod_side.html"></div>
</div>
</div>
</div>
</main>
<div w3-include-html="comp_footer.html"></div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
<script src="assets/jquery-3.6.0.min.js"></script>
<script src="assets/bs5/js/bootstrap.bundle.min.js"></script>
<script type="text/javascript" src="assets/slick-1.8.1/slick/slick.min.js"></script>
<script src="assets/fancybox-master/dist/jquery.fancybox.min.js"></script>
<script src="assets/w3.js"></script>
<script>w3.includeHTML();</script>
<script>
$(document).ready(function(){
$("a.main-img").fancybox({
buttons: ["close"]
});
$('.slick').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 3,
dots: true,
speed: 500
});
// .slick img 點選時, 將點到的src圖檔, 複製到:
// a.main-img 的 href 屬性, 及裡面的img 的 src 屬性
$(".slick img").click(function(e){// .slick img 點選時
var pic=$(this).attr("src"); // 將點到的src圖檔, 複製到...(pic變數)
$("a.main-img").attr("href",pic);// ... a.main-img 的 href 屬性
$("a.main-img img").attr("src",pic);// ... 及裡面的img 的 src 屬性
});
});
</script>
</body>
</html>