0908

montier/src/pages/AllCases.vue

@@ -113,11 +113,11 @@ const goPage = (url: any) => {
         padding: 2rem;
         display: flex;
         flex-wrap: wrap;
+        justify-content: space-between;
 
         .cases-item {
             width: 30%;
             margin-bottom: 2rem;
-            margin-right: 3.5rem;
 
             .item-img {
                 position: relative;

montier/src/pages/Productmessage.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="productcenter"
-        v-if="router.currentRoute.value.params.name != '3' && router.currentRoute.value.params.name != '6'">
+        v-if="router.currentRoute.value.params.name != '3' && router.currentRoute.value.params.name != '6' && router.currentRoute.value.params.name != '2'">
         <div class="door-bgc position-relative">
             <img :src="banner.src" :alt="banner.name">
             <span class="position-absolute doortitle color-fff font-bold"
@@ -64,6 +64,9 @@
                                 <span>{{ item.title }}</span>
                             </span>
                         </div>
+                        <div class="banner-icons" v-if="productmessage.icons && productmessage.icons.length != 0">
+                            <img :src="item.detail" :alt="item.name" v-for="item, index in productmessage.icons" :key="index">
+                        </div>
                     </div>
                 </div>
                 <div class="banner">
@@ -384,6 +387,27 @@
                                     </div>
                                 </div>
                             </div>
+                            <div v-else-if="activeName2 == 'Bathroom Accessories'">
+                                <div class="accessories">
+                                    <div class="accessories-left" v-if="item.banner">
+                                        <img :src="item.banner.detail" :alt="item.banner.name">
+                                        <span>{{ item.banner.title }}</span>
+                                    </div>
+                                    <div class="accessories-right" v-if="item.banner2">
+                                        <div class="right-header">
+                                            <h1><strong>{{ item.banner2.title }}</strong></h1>
+                                            <img :src="item.banner2.detail" :alt="item.banner2.name">
+                                        </div>
+                                        <div class="right-bottom" v-if="item.others">
+                                            <h3><strong>{{ item.others.title }}</strong></h3>
+                                            <h5>{{ item.others.mintitle }}</h5>
+                                            <div class="bottom-colors" v-if="item.others.children && item.others.children.length != 0">
+                                                <img :src="item2.detail" :alt="item2.name" v-for="item2,index2 in item.others.children" :key="index">
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
                         </div>
                         <div class="btn position-relative font-size-24" @click="goPage">Back</div>
                     </el-tab-pane>
@@ -514,6 +538,69 @@ onMounted(() => {
 
 <style scoped lang="less">
 // 产品的大图展示
+.accessories{
+    width: 100%;
+    box-sizing: border-box;
+    display: flex;
+    .accessories-left{
+        width: 50%;
+        position: relative;
+        img{
+            width: 100%;
+            height: 100%;
+        }
+        span{
+            width: 100%;
+            position: absolute;
+            left: 0%;
+            bottom: 2%;
+            text-align: center;
+            font-weight: bold;
+            background: rgba(0, 0, 0, 0.15);
+            color: #fff;
+            padding: 1rem 0;
+            box-sizing: border-box;
+        }
+    }
+    .accessories-right{
+        width: 50%;
+        background: url('../assets/img/sanitary/mirror/bgc.jpg') no-repeat;
+        background-size: cover;
+        box-sizing: border-box;
+        height: 100%;
+        .right-header{
+            width: 100%;
+            text-align: center;
+            padding: 1rem;
+            img{
+                width: 80%;
+            }
+        }
+        .right-bottom{
+            h3,h5{
+                width: 100%;
+                text-align: left;
+                margin-left: 2rem;
+                margin-top: 1rem;
+            }
+            h3{
+                color: #012D86;
+            }
+            .bottom-colors{
+                box-sizing: border-box;
+                margin-top: 1rem;
+                width: 100%;
+                padding: 0 1rem;
+                display: flex;
+                justify-content: space-between;
+                margin-bottom: 2rem;
+                img{
+                    width: 15%;
+                }
+            }
+        }
+    }
+}
 .cabinet{
     width: 100%;
     box-sizing: border-box;
@@ -1596,6 +1683,23 @@ onMounted(() => {
                             }
                         }
                     }
+                    .banner-icons{
+                        display: flex;
+                        justify-content: space-between;
+                        width: 100%;
+                        flex-wrap: wrap;
+                        position: absolute;
+                        bottom: 2%;
+                        left: 50%;
+                        transform: translateX(-50%);
+                        padding: 0 1rem;
+                        box-sizing: border-box;
+                        img{
+                            width: 30%;
+                            height: 100%;
+                            margin-bottom: 1rem;
+                        }
+                    }
                 }
             }
 

montier/src/store/modules/homepage.ts

@@ -227,7 +227,7 @@ const useHomeStore = defineStore('Home', {
                                 mintitle: 'can better match your house design',
                                 children: Array<any>(
                                     { detail: new URL("../../assets/img/sanitary/toilet/style01.png", import.meta.url).href, name: 'One Piece Toilet', title: 'One Piece Toilet' },
-                                    { detail: new URL("../../assets/img/sanitary/toilet/style02.png", import.meta.url).href, name: 'One Piece Toilet', title: 'One Piece Toilet' },
+                                    { detail: new URL("../../assets/img/sanitary/toilet/style02.png", import.meta.url).href, name: 'Two Piece Toilet', title: 'Two Piece Toilet' },
                                     { detail: new URL("../../assets/img/sanitary/toilet/style03.png", import.meta.url).href, name: 'Wall Hung Toilet', title: 'Wall Hung Toilet' },
                                 )
                             }
@@ -365,9 +365,45 @@ const useHomeStore = defineStore('Home', {
                         },
                         {
                             name: 'Bathroom Accessories',
-                            
+                            banner: { detail: new URL('../../assets/img/sanitary/accessories/01.jpg', import.meta.url).href, name: 'Bathroom Accessories', title: ' Bathroom Accessories' },
+                            banner2: { detail: new URL('../../assets/img/sanitary/accessories/02.png', import.meta.url).href, name: 'Bathroom Accessories', title: 'Bathroom Accessories' },
+                            others: {
+                                title: 'More Available Finishes',
+                                mintitle: 'can better match your house design',
+                                children: Array<any>(
+                                    { detail: new URL('../../assets/img/sanitary/Shower/color/color1.png', import.meta.url).href, name: 'Polished Chrome' },
+                                    { detail: new URL('../../assets/img/sanitary/Shower/color/color2.png', import.meta.url).href, name: 'Polished Stainless' },
+                                    { detail: new URL('../../assets/img/sanitary/Shower/color/color3.png', import.meta.url).href, name: 'Brushed Stainless' },
+                                    { detail: new URL('../../assets/img/sanitary/Shower/color/color4.png', import.meta.url).href, name: 'Brushed Nickel' },
+                                    { detail: new URL('../../assets/img/sanitary/Shower/color/color5.png', import.meta.url).href, name: 'Matte Black' },
+                                    { detail: new URL('../../assets/img/sanitary/Shower/color/color6.png', import.meta.url).href, name: 'Satin Gold' },
+                                )
+                            }
                         }
                     )
+                },
+                {
+                    name: 'Windows',
+                    position: '2',
+                    banner1: { detail: new URL("../../assets/img/window/1.jpg", import.meta.url).href, name: 'Soundproof, Anti-theft , Waterproof, Airtight，Customized Color Windows', title: 'Soundproof, Anti-theft , Waterproof, Airtight，Customized Color Windows' },
+                    banner2: { detail: new URL("../../assets/img/productbanner.jpg", import.meta.url).href, name: 'productbanner' },
+                    banner3: { detail: new URL("../../assets/img/window/others/05.jpg", import.meta.url).href, name: 'Windows' },
+                    others: Array<any>(
+                        { detail: new URL("../../assets/img/window/others/01.jpg", import.meta.url).href, name: 'Flush double inner opening system window', title: 'Flush double inner opening system window' },
+                        { detail: new URL("../../assets/img/window/others/02.jpg", import.meta.url).href, name: 'Open passive window inside the broken bridge', title: 'Open passive window inside the broken bridge' },
+                        { detail: new URL("../../assets/img/window/others/03.jpg", import.meta.url).href, name: 'Broken Bridge Narrow Flat Inner Window', title: 'Broken Bridge Narrow Flat Inner Window' },
+                        { detail: new URL("../../assets/img/window/others/04.jpg", import.meta.url).href, name: 'Sliding window', title: 'Sliding window' },
+                        { detail: new URL("../../assets/img/window/others/05.jpg", import.meta.url).href, name: 'Traditional Frame Crank Open Casement Windows', title: 'Traditional Frame Crank Open Casement Windows' },
+                        { detail: new URL("../../assets/img/window/others/06.jpg", import.meta.url).href, name: 'Slide Up Window', title: 'Slide Up Window' },
+                    ),
+                    icons: Array<any>(
+                        { detail: new URL("../../assets/img/window/icons/icon01.png", import.meta.url).href, name: 'Sound Proof' },
+                        { detail: new URL("../../assets/img/window/icons/icon02.png", import.meta.url).href, name: 'Anti-theft' },
+                        { detail: new URL("../../assets/img/window/icons/icon03.png", import.meta.url).href, name: 'Water Proof' },
+                        { detail: new URL("../../assets/img/window/icons/icon04.png", import.meta.url).href, name: 'Hurricane Resistant' },
+                        { detail: new URL("../../assets/img/window/icons/icon05.png", import.meta.url).href, name: 'Air Tightness' },
+                        { detail: new URL("../../assets/img/window/icons/icon06.png", import.meta.url).href, name: 'Thermal Insulation' },
+                    )
                 }
             )
         }