add tid1878 style

src/pages.json

@@ -895,6 +895,17 @@
 					}
 				}
 			]
+		},
+		{
+			"root": "subpackage/mall",
+			"pages": [
+				{
+					"path": "pages/index",
+					"style" : {
+						"navigationBarTitleText": "商城" 
+					}
+				}
+			]
 		}
 	],
 	"globalStyle": {

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>

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>

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>