try-JS-cropCompares/1.html at main · codeStartFrom220101/try-JS-cropCompares · GitHub

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
<!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">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css"
        integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
    <link rel="stylesheet" href="1.css">
    <title>農產品比價網</title>
</head>

<body>
    <div class="wrap">
        <h1 class="logo"><a href="#">Product</a></h1>
        <div class="main rounded">
            <div class="button-group d-flex justify-content-center" id="type">
                <button data-type="N04" type="button"
                    class="vegetablesBtn btn btn-type border-dark border-2">蔬果</button>
                <button data-type="N05" type="button" class="fruitsBtn btn btn-type border-dark border-2">水果</button>
                <button data-type="N06" type="button" class="flowersBtn btn btn-type border-dark border-2">花卉</button>
            </div>

            <div class="search-group d-flex flex-column flex-md-row" id="search">


                <div class="crop-input d-flex mb-2">
                    <label class="rounded-start text-white" for="crop">作物名稱</label>
                    <input class="rounded-end" type="text" placeholder="請輸入作物名稱" id="crop" name="crop">

                </div>
                <button type="button" class="search text-white btn mb-2 ms-2" id="searchBtn">搜尋</button>
            </div>
            <div class="sort-content d-flex justify-content-md-between justify-content-center align-item-center">
                <p id="js-crop-name" class="show-result fw-bold"></p>

                <select id="js-select" class="sort-select border-secondary d-none d-md-block rounded p-2 pe-4">
                    <option value="排序">排序篩選</option>
                    <option value="上價">依上價排序</option>
                    <option value="中價">依中價排序</option>
                    <option value="下價">依下價排序</option>
                    <option value="平均價">依平均價排序</option>
                    <option value="交易量">依交易量排序</option>
                </select>
            </div>
            <table class="market table me-4">
                <thead class="js-sort-advanced">
                    <tr class="fwbe">
                        <th width="15%">作物名稱</th>
                        <th width="15%">市場名稱</th>
                        <th width="14%">
                            <div class="inline-flex sort-advanced">上價
                                <span>
                                    <i data-price="上價" data-sort="up" class="fas fa-caret-up"></i>

                                    <i data-price="上價" data-sort="down" class="fas fa-caret-down"></i>
                                </span>
                            </div>
                        </th>
                        <th width="14%">
                            <div class="inline-flex sort-advanced">中價
                                <span>
                                    <i data-price="中價" data-sort="up" class="fas fa-caret-up"></i>

                                    <i data-price="中價" data-sort="down" class="fas fa-caret-down"></i>
                                </span>
                            </div>
                        </th>
                        <th width="14%">
                            <div class="inline-flex sort-advanced">下價
                                <span>
                                    <i data-price="下價" data-sort="up" class="fas fa-caret-up"></i>

                                    <i data-price="下價" data-sort="down" class="fas fa-caret-down"></i>
                                </span>
                            </div>
                        </th>
                        <th width="14%">
                            <div class="inline-flex sort-advanced">平均價
                                <span>
                                    <i data-price="平均價" data-sort="up" class="fas fa-caret-up"></i>

                                    <i data-price="平均價" data-sort="down" class="fas fa-caret-down"></i>
                                </span>
                            </div>
                        </th>
                        <th width="14%">
                            <div class="inline-flex sort-advanced">交易量
                                <span>
                                    <i data-price="交易量" data-sort="up" class="fas fa-caret-up"></i>

                                    <i data-price="交易量" data-sort="down" class="fas fa-caret-down"></i>
                                </span>
                            </div>
                        </th>
                    </tr>
                </thead>
                <tbody class="showList">
                    <tr>
                        <td colspan="7" class="text-center p-3">請輸入並搜尋想比價的作物名稱^＿^</td>
                    </tr>
                </tbody>
            </table>
            <div class="pagesContent d-flex justify-content-md-between">
                <span class="b">
                    第<span>1</span>頁/共
                    <span>1</span>頁
                </span>
                <div class="pages d-flex">
                    <a href="#" class="firstPage">第一頁</a>
                    <a href="#" class="prev">上一頁</a>
                    <a href="#" class="next">下一頁</a>
                    <a href="#" class="lastPage">最後一頁</a>
                </div>
                <span class="pn">
                    第<span class="pageNum">1</span>頁/共
                    <span class="totalPages">1</span>頁
                </span>
            </div>
        </div>
        <select id="js-moblie-select"
            class="mobile-select border-2 border-secondary d-block d-md-none rounded-pill pt-1 pb-1 position-fixed end-0 bottom-0  ps-2 pe-3">
            <option>排序</option>
            <option>上價</option>
            <option>中價</option>
            <option>下價</option>
            <option>平均價</option>
            <option>交易量</option>
        </select>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous">
    </script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="1.js"></script>
</body>

</html>