From 6f256602722f17474fd30371dd8ee71fba2dad57 Mon Sep 17 00:00:00 2001
From: "liujw155@outlook.com" <liujw155@outlook.com>
Date: Mon, 27 Jan 2025 18:25:55 +0800
Subject: [PATCH] add tid1878 style

---
 src/subpackage/mall/components/goods_item.vue      | 120 ++++++++++++++
 .../mall/components/index_classify_bar.vue         |  16 +-
 src/subpackage/mall/components/line_button.vue     |  38 +++++
 src/subpackage/mall/components/modal_box.vue       |  61 +++++++
 src/subpackage/mall/components/number_operate.vue  |  55 ++++++
 .../mall/components/specification_modal.vue        | 184 +++++++++++++++++++++
 src/subpackage/mall/pages/index.vue                |  49 +++++-
 src/subpackage/mall/static/images/classify.png     | Bin 0 -> 218 bytes
 src/subpackage/mall/static/images/close_c97.png    | Bin 0 -> 519 bytes
 9 files changed, 511 insertions(+), 12 deletions(-)
 create mode 100644 src/subpackage/mall/components/goods_item.vue
 create mode 100644 src/subpackage/mall/components/line_button.vue
 create mode 100644 src/subpackage/mall/components/modal_box.vue
 create mode 100644 src/subpackage/mall/components/number_operate.vue
 create mode 100644 src/subpackage/mall/components/specification_modal.vue
 create mode 100644 src/subpackage/mall/static/images/classify.png
 create mode 100644 src/subpackage/mall/static/images/close_c97.png

diff --git a/src/subpackage/mall/components/goods_item.vue b/src/subpackage/mall/components/goods_item.vue
new file mode 100644
index 0000000..a0b95ce
--- /dev/null
+++ b/src/subpackage/mall/components/goods_item.vue
@@ -0,0 +1,120 @@
+<template>
+    <view class="goods-item">
+        <image class="gi-img" mode="aspeceFill" :src="poster"></image>
+        <view class="gi-tit">克洛斯威羽毛球拍2支装C8正品碳素成人进攻型羽毛成人进攻型羽毛…</view>
+        <view class="gi-tag">特价</view>
+        <view class="gi-bot-line">
+            <view class="gbl-price">
+                <view class="gp-num">
+                    <text class="gn-symbol">¥</text>
+                    59.9
+                </view>
+                <view class="gp-unit">/2支</view>
+            </view>
+            <view class="gbl-del-price">¥69.9</view>
+            <view class="gbl-add" @click="$emit('click:add')"></view>
+        </view>
+    </view>
+</template>
+
+<script>
+export default {
+    props: {
+        poster: {
+            type: String,
+            default: ''
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+    .goods-item{
+        padding-bottom: 16upx;
+        width: 340upx;
+        height: 560upx;
+        border-radius: 10upx;
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+        font-size: 0;
+        background: #fff;
+        .gi-img{
+            display: block;
+            height: 340upx;
+        }
+        .gi-tit{
+            margin-top: 20upx;
+            padding: 0 20upx;
+            @include flcw(24upx, 36upx, #333);
+            @include tHide(2);
+        }
+        .gi-tag{
+            position: relative;
+            left: 20upx;
+            margin-top: 4upx;
+            text-align: center;
+            width: 58upx;
+            border-radius: 6upx;
+            border: 1px solid rgba($color: #E60213, $alpha: .5);
+            @include flcw(20upx, 28upx, #E60213);
+        }
+        .gi-bot-line{
+            margin-top: auto;
+            margin-bottom: 0;
+            padding: 0 20upx;
+            @include ctf;
+            .gbl-price{
+                display: flex;
+                .gp-num{
+                    @include flcw(36upx, 50upx, #F6843E, 500);
+                    @include tHide;
+                    .gn-symbol{
+                        font-size: 28upx;
+                        font-weight: 400;
+                    }
+                }
+                .gp-unit{
+                    max-width: 80upx;
+                    min-width: 40upx;
+                    @include flcw(26upx, 50upx, #333333);
+                    @include tHide;
+                }
+            }
+            .gbl-del-price{
+                flex-shrink: 0;
+                max-width: 100upx;
+                margin-left: 20upx;
+                text-decoration: line-through;
+                @include flcw(24upx, 34upx, #9A9A9D);
+                @include tHide;
+            }
+            .gbl-add{
+                position: relative;
+                flex-shrink: 0;
+                margin-left: auto;
+                margin-right: 0;
+                width: 36upx;
+                height: 36upx;
+                border-radius: 50%;
+                background: $mColor;
+                &::before,&::after{
+                    content: '';
+                    display: block;
+                    position: absolute;
+                    left: 50%;
+                    top: 50%;
+                    transform: translate(-50%, -50%);
+                    background-color: #fff;
+                    border-radius: 2upx;
+                    width: 20upx;
+                    height: 4upx;
+                }
+                &::after{
+                    transform: translate(-50%, -50%) rotate(90deg);
+                }
+            }
+        }
+
+    }
+</style>
\ No newline at end of file
diff --git a/src/subpackage/mall/components/index_classify_bar.vue b/src/subpackage/mall/components/index_classify_bar.vue
index ee0754c..266bd10 100644
--- a/src/subpackage/mall/components/index_classify_bar.vue
+++ b/src/subpackage/mall/components/index_classify_bar.vue
@@ -1,13 +1,14 @@
 <template>
     <view class="index-classify-bar">
-        <scroll-view class="icb-sview" scroll-x>
+        <scroll-view enable-flex 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>
+            <image class="irt-img" mode="aspectFit" src="/subpackage/mall/static/images/classify.png"></image>
+            <view class="irt-txt">分类</view>
         </view>
     </view>
 </template>
@@ -20,13 +21,14 @@ export default {
 
 <style lang="scss">
 .index-classify-bar{
-    padding: 0 24upx;
+    padding: 0 20upx;
     height: 124upx;
     /*background-color: #fbfbfc;*/
-    background-color: #f00;
-    @include ctf;
+    background-color: #f7f7fa;
+    @include ctf(space-between);
     .icb-sview{
         flex-grow: 1;
+        width: 600upx;
         .is-ls{
             padding: 0 10upx;
             width: fit-content;
@@ -43,13 +45,13 @@ export default {
     }
     .icb-right-tab{
         flex-shrink: 0;
+        margin-left: 10upx;
         padding-left: 10upx;
         border-left: 1px solid #D8D8D8;
         .irt-img{
             display: block;
             width: 36upx;
             height: 36upx;
-            background: skyblue;
         }
         .irt-txt{
             text-align: center;
diff --git a/src/subpackage/mall/components/line_button.vue b/src/subpackage/mall/components/line_button.vue
new file mode 100644
index 0000000..4ed1f46
--- /dev/null
+++ b/src/subpackage/mall/components/line_button.vue
@@ -0,0 +1,38 @@
+<template>
+    <view class="line-button" hover-class="lb-hover">
+        <slot>confirm</slot>
+    </view>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            
+        }
+    },
+}
+</script>
+
+<style lang="scss">
+    .line-button{
+		border-radius: 44rpx;
+		text-align: center;
+		background: linear-gradient(90deg, #44D7B6 0%, #009874 100%);
+        @include flcw(32upx, 88upx, #fff, 500);
+        &.lb-hover{
+            position: relative;
+    	    overflow: hidden;
+            &::after{
+                content: '';
+                position: absolute;
+                left: 0;
+                right: 0;
+                top: 0;
+                bottom: 0;
+                z-index: 2;
+                background-color: rgba(0,0,0,.1);
+            }
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/src/subpackage/mall/components/modal_box.vue b/src/subpackage/mall/components/modal_box.vue
new file mode 100644
index 0000000..3fa5de9
--- /dev/null
+++ b/src/subpackage/mall/components/modal_box.vue
@@ -0,0 +1,61 @@
+<template>
+    <view class="modal-box" @touchmove.stop.prevent="_=>false" v-show="isShow">
+        <view class="mb-container">
+            <image 
+                class="mc-close" 
+                mode="aspectFit" 
+                src="/subpackage/mall/static/images/close_c97.png"
+                @click="$emit('click:close')"
+            ></image>
+            <view class="mc-tit">标题</view>
+            <slot></slot>
+        </view>
+    </view>
+</template>
+
+<script>
+export default {
+    props: {
+        isShow: {
+            type: Boolean,
+            default: false
+        },
+
+    },
+}
+</script>
+
+<style lang="scss">
+    .modal-box{
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        z-index: 9999;
+        width: 100%;
+        background-color: rgba(0,0,0,0.4);
+        .mb-container{
+            position: absolute;
+            left: 0;
+            bottom: 0;
+            width: 100%;
+            padding-top: 60upx;
+            background: #fff;
+            @include isPd(0upx);
+            .mc-tit{
+                padding: 0 24upx;
+                text-align: center;
+                @include flcw(32upx, 44upx, #333, 500);
+                @include tHide;
+            }
+            .mc-close{
+                position: absolute;
+                right: 20upx;
+                top: 20upx;
+                width: 40upx;
+                height: 40upx;
+            }
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/src/subpackage/mall/components/number_operate.vue b/src/subpackage/mall/components/number_operate.vue
new file mode 100644
index 0000000..ad78fb7
--- /dev/null
+++ b/src/subpackage/mall/components/number_operate.vue
@@ -0,0 +1,55 @@
+
+<template>
+    <view class="number-operate">
+        <view class="no-opt" @click="iptVal--"></view>
+        <input type="digit" class="no-ipt" v-model="iptVal" >
+        <view class="no-opt" @click="iptVal++"></view>
+    </view>
+</template>
+
+<script>
+export default {
+    data(){
+        return {
+            iptVal: '1'
+        }
+    },
+}
+</script>
+
+<style lang="scss">
+    .number-operate{
+        @include ctf(center);
+        border-radius: 10upx;
+        overflow: hidden;
+        .no-opt{
+            position: relative;
+            width: 60upx;
+            height: 56upx;
+            background: #F2F2F7;
+            &::before, &::after{
+                content: '';
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+                display: block;
+                width: 24upx;
+                height: 4upx;
+                border-radius: 2upx;
+                background: #9A9A9D;
+            }
+        }
+        .no-ipt{
+            margin: 0 2upx;
+            width: 72upx;
+            height: 56upx;
+            text-align: center;
+            background: #F2F2F7;
+            @include flcw(28upx, 40upx, #333, 500);
+            &+.no-opt::after{
+                    transform: translate(-50%, -50%) rotate(-90deg);
+            }
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/src/subpackage/mall/components/specification_modal.vue b/src/subpackage/mall/components/specification_modal.vue
new file mode 100644
index 0000000..d99e6cf
--- /dev/null
+++ b/src/subpackage/mall/components/specification_modal.vue
@@ -0,0 +1,184 @@
+<template>
+    <modal-box :is-show="isShow" @click:close="hide">
+        <view class="specification-modal">
+            <view class="sm-goods">
+                <image class="sg-img"></image>
+                <view class="sg-right">
+                    <view class="sr-name">克洛斯威羽毛球拍2支装C8正品碳素成人进攻型羽毛球克洛斯威羽毛球拍2支装C8正品碳素成人进攻型羽毛球</view>
+                    <view class="sr-bottom">
+                        <view class="sb-price">
+                            <view class="sp-amount">¥59.9</view>
+                            <view class="sp-unit">/2支</view>
+                        </view>
+                        <view class="sb-stock">库存：6</view>
+                    </view>
+                </view>
+            </view>
+            <scroll-view class="sm-scroll" scroll-y>
+                <view class="ss-ls">
+                    <view class="sl-item" v-for="i in 3" :key="i">
+                        <view class="si-tit">规格</view>
+                        <view class="si-tags">
+                            <view class="st-item" v-for="k in 10" :key="k">比赛专用</view>
+                        </view>
+                    </view>
+                </view>
+            </scroll-view>
+            <view class="num-bar">
+                <view class="nb-txt">购买数量</view>
+                <number-operate></number-operate>
+            </view>
+            <line-button>加入购物车</line-button>
+        </view>
+    </modal-box>
+</template>
+
+<script>
+import modalBox from "./modal_box.vue";
+import lineButton from "./line_button.vue";
+import numberOperate from "./number_operate.vue";
+export default {
+    components: {
+        modalBox,
+        lineButton,
+        numberOperate
+    },
+    data() {
+        return {
+            isShow: false,
+        }
+    },
+    methods: {
+        alert(){
+            this.isShow = true;
+        },
+        hide(){
+            this.isShow = false;
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+    .specification-modal{
+        padding: 20upx 20upx 10upx;
+        .sm-goods{
+            padding-bottom: 46upx;
+            border-bottom: 1px solid #F2F2F7;
+            display: flex;
+            align-items: flex-start;
+            .sg-img{
+                flex-shrink: 0;
+                margin-right: 20upx;
+                width: 172upx;
+                height: 172upx;
+                background: skyblue;
+            }
+            .sg-right{
+                flex-grow: 1;
+                align-self: stretch;
+                .sr-name{
+                    @include flcw(28upx, 40upx, #333);
+                    @include tHide(2);
+                }
+                .sr-bottom{
+                    margin-top: 40upx;
+                    display: flex;
+                    align-items: baseline;
+                    .sb-stock{
+                        flex-shrink: 0;
+                        margin-left: 30upx;
+                        max-width: 160upx;
+                        @include flcw(24upx, 34upx, #9A9A9D);
+                        @include tHide;
+                    }
+                    .sb-price{
+                        display: flex;
+                        align-items: baseline;
+                        .sp-amount{
+                            @include flcw(36upx, 50upx, #FF873D);
+                            @include tHide;
+                        }
+                        .sp-unit{
+                            flex-shrink: 0;                            
+                            max-width: 60upx;
+                            @include flcw(28upx, 50upx, #333);
+                            @include tHide;
+                        }
+
+                    }
+                }
+            }
+        }
+        .sm-scroll{
+            height: 380upx;
+            .ss-ls{
+                padding: 36upx 0upx;
+                .sl-item{
+                    &+.sl-item{
+                        margin-top: 40upx;
+                    }
+                    .si-tit{
+                        padding: 0 10upx;
+                        @include flcw(28upx, 40upx, #333333);
+                        
+                    }
+                    .si-tags{
+                        display: flex;
+                        align-content: flex-start;
+                        flex-wrap: wrap;
+                        .st-item{
+                            margin: 20upx 10upx 0;
+                            padding: 12upx 22upx;
+                            border-radius: 10upx;
+                            background: #F2F2F7;
+                            @include flcw(24upx, 34upx, #333333);
+                        }
+                    }
+                }
+            }
+        }
+        .num-bar{
+            padding: 44upx 0;
+            border-top: 1px solid #F2F2F7;
+            @include ctf(space-between);
+            .nb-txt{
+                @include flcw(24upx, 34upx, #333);
+            }
+            .number-operate{
+                @include ctf(center);
+                border-radius: 10upx;
+                overflow: hidden;
+                .no-opt{
+                    position: relative;
+                    width: 60upx;
+                    height: 56upx;
+                    background: #F2F2F7;
+                    &::before, &::after{
+                        content: '';
+                        position: absolute;
+                        top: 50%;
+                        left: 50%;
+                        transform: translate(-50%, -50%);
+                        display: block;
+                        width: 24upx;
+                        height: 4upx;
+                        border-radius: 2upx;
+                        background: #9A9A9D;
+                    }
+                }
+                .no-ipt{
+                    margin: 0 2upx;
+                    width: 72upx;
+                    height: 56upx;
+                    text-align: center;
+                    background: #F2F2F7;
+                    @include flcw(28upx, 40upx, #333, 500);
+                    &+.no-opt::after{
+                            transform: translate(-50%, -50%) rotate(-90deg);
+                    }
+                }
+            }
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/src/subpackage/mall/pages/index.vue b/src/subpackage/mall/pages/index.vue
index 77b086f..d62c01c 100644
--- a/src/subpackage/mall/pages/index.vue
+++ b/src/subpackage/mall/pages/index.vue
@@ -3,50 +3,78 @@
         <view class="mi-header">
             <index-search-bar></index-search-bar>
             <view class="mh-graph"></view>
-            <swiper class="mh-swiper">
+            <swiper class="mh-swiper" indicator-dots indicator-active-color='#009874'>
                 <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="mi-tags" v-if="false">
             <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">
+        
+        <view class="mi-ad-pic" v-if="false">
             <image class="map-img" mode="aspectFill" :src="tImg"></image>
         </view>
         <!-- 精选 -->
-        <view class="mi-choiceness">
+        <view class="mi-choiceness" v-if="false">
             <image class="mc-img"></image>
             <image class="mc-img"></image>
             <image class="mc-img"></image>
         </view>
+        <!-- 分类 -->
         <index-classify-bar></index-classify-bar>
+        <view class="mi-classify-list">
+            <view class="mcl-item" v-for="i in 7" :key="i">
+                <goods-item
+                    :poster="tImg"
+                    @click:add="goodsItemAddBtn"
+                ></goods-item>
+            </view>
+        </view>
+        <spacification-modal
+            ref="spacificationModal"
+        ></spacification-modal>
     </view>
 </template>
 
 <script>
 import indexSearchBar from "../components/index_search_bar.vue";
 import indexClassifyBar from "../components/index_classify_bar.vue";
+import goodsItem from "../components/goods_item.vue";
+import spacificationModal from "../components/specification_modal.vue";
 export default {
     components: {
         indexSearchBar,
-        indexClassifyBar
+        indexClassifyBar,
+        goodsItem,
+        spacificationModal
     },
     data() {
         return {
             tImg: 'http://imgcdn.ouxuanzhineng.cn/upload/shopBanner/6b77330084b3732bad96250beeded038.png'
         }
     },
+    methods: {
+        goodsItemAddBtn(){
+            this.$refs.spacificationModal.alert();
+        }
+    }
 }
 </script>
 
 <style lang="scss">
+    page{
+        background: #f2f2f7;
+    }
+    .mall-index{
+        @include isPd(24upx);
+    }
     .mi-header{
         position: relative;
         background: $mColor;
@@ -130,4 +158,15 @@ export default {
             background: skyblue;
         }
     }
+    .mi-classify-list{
+        padding: 0 24upx;
+        @include ctf(space-between);
+        flex-wrap: wrap;
+        .mcl-item{
+            flex-shrink: 0;
+            &:nth-of-type(n+3){
+                margin-top: 24upx;
+            }
+        }
+    }
 </style>
\ No newline at end of file
diff --git a/src/subpackage/mall/static/images/classify.png b/src/subpackage/mall/static/images/classify.png
new file mode 100644
index 0000000000000000000000000000000000000000..a83d419708844e8c999a50ca4cb06be7f5044bef
GIT binary patch
literal 218
zcmeAS@N?(olHy`uVBq!ia0vp^Dj>|k1|%Oc%$NbB7J9lkhD5l(oqCbCK|#RzJ=;aq
z1WxrrHT6Qy2q(6KKNfZxF6&gh(f{c-!_(OQV&!PRXU9`GLZ2v!B+toO+dY#vBRF~Q
zj^A^FqWX*VofTW&vKv3Y?RBp5iJ43IreiyQ)Xcdhw@_G7(1~Tjx!H=l`U5w=kz4k>
zV5zpGSH1q+?Wd~*9lm!=;80}pcz#yk?(r3o%Ocxuy>xy4c2hrp*1q1p3w$pvLR2@~
Soe~8)mci52&t;ucLK6T>gIAdV

literal 0
HcmV?d00001

diff --git a/src/subpackage/mall/static/images/close_c97.png b/src/subpackage/mall/static/images/close_c97.png
new file mode 100644
index 0000000000000000000000000000000000000000..3a718eb693f5264b0afbd8b396ab4d97b3bdd858
GIT binary patch
literal 519
zcmV+i0{H!jP)<h;3K|Lk000e1NJLTq001Ze001Zm1^@s6jQ+T70005bNkl<ZSV!&H
zze~eF6bJC{T_`29^uN$Qz}3;sMd%tz(?jTA;N~DMoeF6c3;qF0H#ZSn+||whKyYsh
zJqe@`(j@oey+Dy>es}lbUGClE1a|xrJMP0CNZp~W430*lFbu<PtJRwKdc9xj0yg85
zBsr5(e#deAQH<XLCP@+jxCijrZnsaODEhHk#5ZO#nOteDF9EzOrH+lj@pya?1i>qS
z!={lr+)7G$9>?+A2uuTJvsq`cSiCfe%;SO}==S^l$Fg0hJjG2SZE-2Mw#+nvbio;c
z+}rJnvjTD<eQ?%5D$*C{1oTBxaLzziBo*fcv_*2@yn!Yp7mft1LN1rfVRpB!>TU?z
zyPMn(7K(Y=Sable;K&)=WFbR-r8psk)>_9(sXN;&)y0uBm`=X==Q3P6CtIsV2Idb0
zfC~Ua&Mt@qEIX~-4Td+cu9R>hy?{1#jtl7ww80flH>ops0=nS1kk&vS90$@0NWoE&
zMj!`{f~*B{;(U>nz$S1$$WmaFI9FuZ+sqk&C(f3ss#_@(^Jk^hX)$&SIGs+9*6a1H
zl=7zRt%Re6%FmG@AA}HZgTdh12;>G(=QEZW>H^g9d*Hv%;2#|6{y5RnLS+B|002ov
JPDHLkV1j;B?#uuH

literal 0
HcmV?d00001