add style

src/pages.json

@@ -24,6 +24,23 @@
 					}
 				}
 			]
+		},
+		{
+			"root": "subpackage/groupon",
+			"pages": [
+				{
+					"path": "pages/stadiums",
+					"style": {
+						"navigationBarTitleText": "选择门店"
+					}
+				},
+				{
+					"path": "pages/list",
+					"style": {
+						"navigationBarTitleText": "抖音团购券"
+					}
+				}
+			]
 		}
 	],
 	"globalStyle": {

src/styles/iconfonts.scss

@@ -52,5 +52,12 @@
     }
 }
 
+// iconfont search ()
+@mixin searchIcon {
+    @font-face {
+        font-family: 'searchIcon';
+        src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAALYAAsAAAAABqAAAAKLAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACCcAqBHIE6ATYCJAMICwYABCAFhGcHMBv2BcgOJUEPwYDhIQBEBF973b67C601DQ7dmjCoOIxgUDA+yqB8JHSN/n/up9lYbQ44N92yG7JCSPNfSp8uPyVHrtUDckDngR2i2xQYtdv/XE6vtm+cH8Dbk8ba1KYDCzA9oMZaFmEvD71FvdaXZmTEKwId9tRLP27vHUB5dSJUVCKT7Qyy0qh73QTlSr+i4FSb0AJdWcSrLNJzuoW8RJ+PP47IJalltuLsoU1C5z8HzpiMaBWFclN0vjp8XkINGVuQQlx1x09kiCZahg57pgVcXQSfB///gU3s2izEX2eLu8AUltyT1JPdanECJek+gFyMuoU03z/8NPiWGt6rGZxN7cYKhs6cH7Gh93eXnRx4fVVGWyLjZx+pN0uNvlKT7z1iHy9bVU2lLWVzZKaW22gsljnLFxcWvlbLWuZQsLQJgAhDI0Be1pBB1xZlU9jlDAyY5bCQygqISUjGo0YIVTM/5fL/+Rs990c70/mH/22dBbxLke/IWzULmBNpO6E9+HvaCSBqUQFSaZJKZ3IwKprQ4YSoWPeAz7GGwbtMhzaD9+psNZlB1mYBV0gbUNPpAFq0OYIOm9rWdxqkyxClHSsSCEKfbUh6vEHW5wJXSB9QM+IXWvT5gw430b1bp5WgLRyIAAm7IthLNZW5ehFh7QN3QCa8LjIE3PDiELZbbOVUB6jAp5hjBN0OIRhmXFNwOz8PZFnDOtd8QIXFI4RebbWyprdYqKagFhwgBCDBXCIwL0qjYgG6KH5fH+AWICM4EDcU5wxejB2zs7ABcB0aFdR0J/sYgtwcBIHBGI6SCqxdDgMymQbTm4f5AEqw8IyI6qpZHTQG1VjW1ylfTyzasMYUzqCs5REIpx6EAAA=') format('woff2');
+    }
+}
 
 

src/subpackage/groupon/components/search_bar.vue

@@ -0,0 +1,81 @@
+<script setup>
+import { onLoad } from '@dcloudio/uni-app';
+import { reactive, ref } from "vue";
+onLoad(() => {
+    
+});
+
+</script>
+
+<template>
+	<view class="search-bar">
+        <view class="sb-frame">
+            <picker class="sf-picker" mode="time">
+                <view class="sf-select">
+                    <view class="ss-val">广州市</view>
+                    <text class="ss-icon">&#xe695;</text>
+                </view>
+            </picker>
+            <view class="sf-ipt">
+                <text class="si-icon">&#xe6b9;</text>
+                <input class="si-ipt" placeholder="搜索门店" />
+            </view>
+        </view>
+	</view>
+</template>
+
+<style lang="scss" scoped>
+    .search-bar{
+        padding: 8upx 24upx;
+        background: #fff;
+        .sb-frame{
+            padding: 8upx 20upx;
+            height: 72upx;
+            border-radius: 36upx;
+            background: #F2F2F2;
+            @include ctf(space-between);
+            .sf-picker{
+                align-self: stretch;
+                flex-shrink: 0;
+                .sf-select{
+                    height: 100%;
+                    width: 130upx;
+                    border-right: 1px solid #EAEAEA;
+                    @include ctf(center);
+                    .ss-val{
+                        @include flcw(24upx, 34upx, #666);
+                        @include tHide;
+                    }
+                    @include rightArrow;
+                    .ss-icon{
+                        flex-shrink: 0;
+                        margin-left: 4upx;
+                        font-size: 24upx;
+                        font-family: rightArrow;
+                        color: #666666;
+                    }
+                }
+            }
+            .sf-ipt{
+                flex-grow: 1;
+                align-self: stretch;
+                padding-left: 10upx;
+                @include ctf;
+                @include searchIcon;
+                .si-icon{
+                    flex-shrink: 0;
+                    margin-right: 10upx;
+                    font-size: 34upx;
+                    font-family: searchIcon;
+                    color: #9F9F9F;
+                }
+                .si-ipt{
+                    flex-grow: 1;
+                    height: 100%;
+                    @include flcw(24upx, 34upx, #666666);
+                }
+
+            }
+        }
+    }
+</style>

src/subpackage/groupon/components/ticket_item.vue

@@ -0,0 +1,45 @@
+<script setup>
+import { reactive, ref } from "vue";
+
+</script>
+
+<template>
+	<view class="ticket-item">
+        <view class="ti-left">
+            <view class="tl-tit">订场100元代金券【欧轩运动生活】</view>
+            <view class="tl-time">有效时间：2025.03.03至2026.03.03</view>
+        </view>
+        <view class="ti-btn">立即使用</view>
+	</view>
+</template>
+
+<style lang="scss" scoped>
+    .ticket-item{
+        padding: 24upx;
+        border: 1px solid #FFD2D1;
+        border-radius: 20upx;
+        background-color: rgba($color: #FE5353, $alpha: .05);
+        @include ctf(space-between);
+        .ti-left{
+            flex-grow: 1;
+            .tl-tit{
+                @include flcw(32upx, 44upx, #333);
+                @include tHide(2);
+            }
+            .tl-time{
+                @include flcw(24upx, 52upx, #9A9A9D);
+                @include tHide;
+            }
+        }
+        .ti-btn{
+            flex-grow: 0;
+            flex-shrink: 0;
+            margin-left: 20upx;
+            padding: 0 20upx;
+            text-align: center;
+            border-radius: 50upx;
+            border: 2upx solid #E11E1E;
+            @include flcw(24upx, 46upx, #E11E1E);
+        }
+    }
+</style>

src/subpackage/groupon/pages/list.vue

@@ -0,0 +1,32 @@
+<script setup>
+import { onLoad } from '@dcloudio/uni-app';
+import { reactive, ref } from "vue";
+import ticketItem from "../components/ticket_item.vue";
+onLoad(() => {
+    
+});
+
+</script>
+
+<template>
+	<view class="groupon-list">
+        <view class="gl-item" v-for="i in 3" :key="i">
+            <ticket-item></ticket-item>
+        </view>
+	</view>
+</template>
+
+<style lang="scss" scoped>
+.groupon-list{
+    padding: 24upx;
+    @include isPd(24upx);
+    .gl-item{
+        padding: 24upx;
+        border-radius: 20upx;
+        background-color: #fff;
+        &+.gl-item{
+            margin-top: 22upx;
+        }
+    }
+}
+</style>

src/subpackage/groupon/pages/stadiums.vue

@@ -0,0 +1,22 @@
+<script setup>
+import { onLoad } from '@dcloudio/uni-app';
+import { reactive, ref } from "vue";
+import searchBar from "../components/search_bar.vue";
+onLoad(() => {
+    
+});
+
+</script>
+
+<template>
+	<view class="stadium-select">
+        <search-bar></search-bar>
+        123
+	</view>
+</template>
+
+<style lang="scss" scoped>
+.stadium-select{
+
+}
+</style>