From e6c51e405015489d3e66c7066d54ce4b7b5c8f31 Mon Sep 17 00:00:00 2001
From: "liujw155@outlook.com" <liujw155@outlook.com>
Date: Sun, 26 Jan 2025 18:26:49 +0800
Subject: [PATCH] add tid1878 style

---
 src/pages.json                                     |  11 ++
 .../mall/components/index_classify_bar.vue         |  61 ++++++++++
 .../mall/components/index_search_bar.vue           |  77 ++++++++++++
 src/subpackage/mall/pages/index.vue                | 133 +++++++++++++++++++++
 src/subpackage/mall/static/images/search.png       | Bin 0 -> 406 bytes
 .../mall/static/images/shopping_cart_333.png       | Bin 0 -> 827 bytes
 6 files changed, 282 insertions(+)
 create mode 100644 src/subpackage/mall/components/index_classify_bar.vue
 create mode 100644 src/subpackage/mall/components/index_search_bar.vue
 create mode 100644 src/subpackage/mall/pages/index.vue
 create mode 100644 src/subpackage/mall/static/images/search.png
 create mode 100644 src/subpackage/mall/static/images/shopping_cart_333.png

diff --git a/src/pages.json b/src/pages.json
index 944d62d..99ab599 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -895,6 +895,17 @@
 					}
 				}
 			]
+		},
+		{
+			"root": "subpackage/mall",
+			"pages": [
+				{
+					"path": "pages/index",
+					"style" : {
+						"navigationBarTitleText": "商城" 
+					}
+				}
+			]
 		}
 	],
 	"globalStyle": {
diff --git a/src/subpackage/mall/components/index_classify_bar.vue b/src/subpackage/mall/components/index_classify_bar.vue
new file mode 100644
index 0000000..ee0754c
--- /dev/null
+++ b/src/subpackage/mall/components/index_classify_bar.vue
@@ -0,0 +1,61 @@
+<template>
+    <view class="index-classify-bar">
+        <scroll-view class="icb-sview" scroll-x>
+            <view class="is-ls">
+                <view class="il-item" v-for="i in 6" :key="i">户外装备</view>
+            </view>
+        </scroll-view>
+        <view class="icb-right-tab">
+            <image class="irt-img"></image>
+            <view class="irt-txt"></view>
+        </view>
+    </view>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss">
+.index-classify-bar{
+    padding: 0 24upx;
+    height: 124upx;
+    /*background-color: #fbfbfc;*/
+    background-color: #f00;
+    @include ctf;
+    .icb-sview{
+        flex-grow: 1;
+        .is-ls{
+            padding: 0 10upx;
+            width: fit-content;
+            white-space: nowrap;
+            .il-item{
+                vertical-align: middle;
+                display: inline-block;
+                @include flcw(36upx, 50upx, #333333);
+                &+.il-item{
+                    margin-left: 80upx;
+                }
+            }
+        }
+    }
+    .icb-right-tab{
+        flex-shrink: 0;
+        padding-left: 10upx;
+        border-left: 1px solid #D8D8D8;
+        .irt-img{
+            display: block;
+            width: 36upx;
+            height: 36upx;
+            background: skyblue;
+        }
+        .irt-txt{
+            text-align: center;
+            margin-top: 4upx;
+            @include flcw(22upx, 32upx, #333333);
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/subpackage/mall/components/index_search_bar.vue b/src/subpackage/mall/components/index_search_bar.vue
new file mode 100644
index 0000000..5d18243
--- /dev/null
+++ b/src/subpackage/mall/components/index_search_bar.vue
@@ -0,0 +1,77 @@
+<template>
+    <view class="index-search-bar">
+        <view class="isb-frame">
+            <image class="if-icon" mode="aspectFit" src="/subpackage/mall/static/images/search.png"></image>
+            <input class="if-ipt" />
+            <view class="if-btn">搜索</view>
+        </view>
+        <view class="isb-box" @click="toShoppingCart">
+            <image class="ib-icon" src="/subpackage/mall/static/images/shopping_cart_333.png"></image>
+            <view class="ib-num">88</view>
+        </view>
+    </view>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss">
+    .index-search-bar {
+        padding: 30upx 24upx;
+		@include ctf(space-between);
+        background: transparent;
+		.isb-frame {
+			padding-left: 28upx;
+			padding-right: 4upx;
+			flex-grow: 1;
+			height: 72upx;
+			border-radius: 36upx;
+			background-color: #fff;
+			@include ctf(space-between);
+			.if-icon {
+				flex-shrink: 0;
+				margin-right: 20upx;
+				width: 30upx;
+				height: 30upx;
+			}
+			.if-ipt {
+				flex-grow: 1;
+				height: 100%;
+                @include flcw(28upx, 44upx, #333);
+			}
+			.if-btn {
+				flex-shrink: 0;
+				margin-left: 20upx;
+				width: 120upx;
+				border-radius: 30upx;
+				text-align: center;
+				background-color: $mColor;
+                @include flcw(28upx, 60upx, #fff);
+			}
+		}
+		.isb-box {
+			position: relative;
+			flex-shrink: 0;
+			margin-left: 14upx;
+			.ib-icon {
+				width: 64upx;
+				height: 64upx;
+			}
+			.ib-num {
+				position: absolute;
+				top: 0rpx;
+				right: -14rpx;
+				width: 36rpx;
+				height: 36rpx;
+				border-radius: 50%;
+				background-color: #e60213;
+				text-align: center;
+                @include flcw(22upx, 36upx, #fff);
+                @include tHide;
+			}
+		}
+    }
+</style>
\ No newline at end of file
diff --git a/src/subpackage/mall/pages/index.vue b/src/subpackage/mall/pages/index.vue
new file mode 100644
index 0000000..77b086f
--- /dev/null
+++ b/src/subpackage/mall/pages/index.vue
@@ -0,0 +1,133 @@
+<template>
+    <view class="mall-index">
+        <view class="mi-header">
+            <index-search-bar></index-search-bar>
+            <view class="mh-graph"></view>
+            <swiper class="mh-swiper">
+                <swiper-item v-for="i in 3" :key=i>
+                    <image class="ms-img" mode="aspectFill" :src="tImg"></image>
+                </swiper-item>
+            </swiper>
+        </view>
+        <!-- 分类tab -->
+        <view class="mi-tags">
+            <view class="mc-item" v-for="i in 7" :key='i'>
+                <image class="mi-img"></image>
+                <view class="mi-txt">健身训练</view>
+            </view>
+        </view>
+
+        <view class="mi-ad-pic">
+            <image class="map-img" mode="aspectFill" :src="tImg"></image>
+        </view>
+        <!-- 精选 -->
+        <view class="mi-choiceness">
+            <image class="mc-img"></image>
+            <image class="mc-img"></image>
+            <image class="mc-img"></image>
+        </view>
+        <index-classify-bar></index-classify-bar>
+    </view>
+</template>
+
+<script>
+import indexSearchBar from "../components/index_search_bar.vue";
+import indexClassifyBar from "../components/index_classify_bar.vue";
+export default {
+    components: {
+        indexSearchBar,
+        indexClassifyBar
+    },
+    data() {
+        return {
+            tImg: 'http://imgcdn.ouxuanzhineng.cn/upload/shopBanner/6b77330084b3732bad96250beeded038.png'
+        }
+    },
+}
+</script>
+
+<style lang="scss">
+    .mi-header{
+        position: relative;
+        background: $mColor;
+        .mh-graph{
+            position: absolute;
+            left: 0;
+            bottom: 0;
+            width: 100%;
+            height: 140upx;
+            background: #fff;
+            border-radius: 20upx 20upx 0 0;
+        }
+        .mh-swiper{
+            position: relative;
+            z-index: 1;
+            margin: 0 auto;
+            width: 690upx;
+			height: 280upx;
+            .ms-img{
+                width: 100%;
+                height: 100%;
+            }
+        }
+        
+    }
+    .mi-tags{
+        padding: 52upx 0;
+        background: #fff;
+        font-size: 0;
+        .mc-item{
+            display: inline-block;
+            width: 20%;
+            vertical-align: top;
+            font-size: 0;
+            &:nth-of-type(n+6){
+                margin-top: 34upx;
+            }
+            .mi-img{
+                margin: 0 auto;
+                display: block;
+                width: 88upx;
+                height: 88upx;
+                border-radius: 50%;
+                overflow: hidden;
+                background: skyblue;
+            }
+            .mi-txt{
+                margin-top: 12upx;
+                text-align: center;
+                @include flcw(24upx, 34upx, #333333);
+            }
+        }
+    }
+    .mi-ad-pic{
+        padding: 24upx;
+        background: #fff;
+        .map-img{
+            height: 136upx;
+            width: 100%;
+            overflow: hidden;
+        }
+    }
+    .mi-choiceness{
+        margin-top: 14upx;
+        padding: 28upx 24upx 0;
+        background: #fff;
+        @include ctf(space-between);
+        flex-wrap: wrap;
+        &::before{
+            content: '精选专区';
+            display: block;
+            width: 100%;
+            flex-shrink: 0;
+            @include flcw(36upx, 50upx, #333, 500);
+        }
+        .mc-img{
+            margin-top: 20upx;
+            flex-shrink: 0;
+            width: 340upx;
+            height: 236upx;
+            background: skyblue;
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/src/subpackage/mall/static/images/search.png b/src/subpackage/mall/static/images/search.png
new file mode 100644
index 0000000000000000000000000000000000000000..13c29a6f5c6cb3b08815dc0b5f9ef7f5e2a35a89
GIT binary patch
literal 406
zcmeAS@N?(olHy`uVBq!ia0vp^Dj>|k3?#4J%UA`ZJOX?|T!HiqFqk%NT7Q54s#U9|
zg8@(sC<0-_NuUTs@zkkPCr+FQ6rVYB=KT5dfsE7BjUNEb5-$nz3uc)0Q<8`6(d#cK
zk3HEqxg#aqLxp{!p1|w{CNqFao_V@BhFF|F8{#Q+M1dpZqQvI)lmGuOY4MsfBcS#8
zOW~yHCTmx`+c25$o`n3D6w!Xy>+Vi##oIRVJv))m_Vr}rvx<d{b2f)hS@%nFPV-Lt
z>D6U?s<$u3a++^D(llFc)zzD8F868uE8*R7Z=R9)8NQX}&Cgeef6ytmTo}mzc%EzQ
zubzvC0}UlEhI&72$+hTvvf-s>=xfn#yQ|!WvnnsiY-e({b2~6uA+NIQ0>kmiGP44_
zCY_$jHC<Q3Jb0hj&!*G!yZ*d*@?4w0i9K`4idhzOmV`(Y$4=IGc=*O&K|9IT-&Nn(
cuIzurU3XUQMEbmVkdGNWUHx3vIVCg!0A%yK;Q#;t

literal 0
HcmV?d00001

diff --git a/src/subpackage/mall/static/images/shopping_cart_333.png b/src/subpackage/mall/static/images/shopping_cart_333.png
new file mode 100644
index 0000000000000000000000000000000000000000..e30858f43b58eac1da31a43ec87481c25aff662a
GIT binary patch
literal 827
zcmeAS@N?(olHy`uVBq!ia0vp^4j|0I3?%1nZ+ru!rUm$fxB_WoV`B>o3m^#uMn*;u
z29Pu~Gz4<t04@$!29z=|FaVOsQb1imfGh%MLyS^WQ-hcQ(FhTQh`?0}sbzlwy3DX7
z$S;`TGtZxwjz3P`Q@y%1Lhr+yn+Jk@JtXGlBwCv)%0527dhvvIBP|iOohzm{r*)SX
z3Dho`q@=~bz@+Ty;usQf`0cdYWvdJX+S(U$G%2VHimbg+wc^&E|EJ$da%I0?>zUxF
zU-htj>Qni4pR|9B6(1iRKheDN=@M3+XD6~wY4R*dxu2oQb9igSVLrB^g3FxB>kQ_!
zx<{rM%<($TAuQ2&Z~{j{jP2x&?iUhyxZFAtS<Ki95?QYBtd18xutAh_8>3AP&jl^9
z$w{2dEoY<BgM1!54AB1fwXMhU!;M8njbfoLZMSP4d~7|XUSf1Om+$_izkhZd&dvXG
zu&Jx8L9b?Gwz)>B-!V~9$EVrhS8^r<$CqkeNa8&z=`r)tynrQY8tXzQJoNClG!3+C
zY*BR<OZwaUWog8H?G@|_ZeLeUnfRe4MKG01D8}p19L{;`H@}OH%iy`Ww|EIR>vFXz
z#fe8gpIBj+_3+AJ9W~{qqx+W|c=ei|f1j3Wx=cS<+5S#<&dfEDz2?nvcl>)!yYtmX
zTE6M@<=7jrT2uA?yMNN%r>-d&mhXPEuiWR(T#>K8rupd9=H>RqvmFgNFH$Vz6&;)X
zPQUsZ*Y4lJ8kZxQ<%;iF>zcpZ-5FW>Nqrr^=zO_{cU|K$qyA1d|G837R`lDvBYcUk
zL;F83b=Vtnu>8yB6CPJ|w#<0Es6s%~(CAa-r3<22QrCXFRoZni{@Zah>cyss$-ylN
zhhOdGU-Ffeo$GA3M9cIGi)^<3-F-gloWhe^|LmV!$++9$K0)B>^YWN^V(MzWf4NVb
lRCb=RXqKzqo*$9_802G%a^t6bnFvg444$rjF6*2UngB1AP$d8W

literal 0
HcmV?d00001