0906

montier/src/components/HeaderPage.vue

@@ -504,7 +504,7 @@ const getProduct = async () => {
   }
 }
 
-@media screen and (max-width: 1600px) {
+@media screen and (max-width: 1900px) {
   .navbar-brand-logo {
     width: 480px;
   }

montier/src/pages/Productmessage.vue

@@ -153,15 +153,125 @@
                                 <div class="faucets">
                                     <div class="faucets-header">
                                         <div class="header-left" v-if="item.banner1">
-                                            <img :src="item.banner1.detail" :alt="item.banner1.name">
+                                            <div class="left1">
+                                                <img :src="item.banner1.detail" :alt="item.banner1.name">
+                                            </div>
+                                            <div class="left2">
+                                                <img :src="item.banner2.detail" :alt="item.banner2.name">
+                                            </div>
+                                        </div>
+                                        <div class="header-right" v-if="item.others && item.others.length != 0">
+                                            <div class="right-item" v-for="item2, index2 in item.others" :key="index2">
+                                                <img :src="item2.detail" :alt="item2.name">
+                                            </div>
                                         </div>
-                                        <div class="header-right"></div>
                                     </div>
                                     <div class="faucets-bottom">
-
+                                        <h1 v-if="item.others2"><strong>{{ item.others2.title }}</strong></h1>
+                                        <span v-if="item.others2">{{ item.others2.mintitle }}</span>
+                                        <div class="color-pic"
+                                            v-if="item.others2 && item.others2.children && item.others2.children.length != 0">
+                                            <img :src="item2.detail" :alt="item2.name"
+                                                v-for="item2, index2 in item.others2.children" :key="index2">
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div v-else-if="activeName2 == 'Basins'">
+                                <div class="basins">
+                                    <div class="basins-header" v-if="item.others && item.others.length != 0">
+                                        <div class="header-item" v-for="item2, index2 in item.others" :key="index2">
+                                            <img :src="item2.detail" :alt="item2.name">
+                                        </div>
+                                    </div>
+                                    <div class="basins-bottom">
+                                        <h1 v-if="item.others2"><strong>{{ item.others2.title }}</strong></h1>
+                                        <span v-if="item.others2"><strong>{{ item.others2.mintitle }}</strong></span>
+                                        <div class="styles">
+                                            <div class="basins-styles"
+                                                v-if="item.others2 && item.others2.children && item.others2.children.length != 0">
+                                                <div class="styles-item" v-for="item2, index2 in item.others2.children"
+                                                    :key="index2">
+                                                    <img :src="item2.detail" :alt="item2.name">
+                                                </div>
+                                            </div>
+                                            <div class="basins-quality">
+                                                <h2 v-if="item.icons"><strong>{{ item.icons.title }}</strong></h2>
+                                                <div class="icons"
+                                                    v-if="item.icons && item.icons.children && item.icons.children.length != 0">
+                                                    <img :src="item2.detail" :alt="item2.name"
+                                                        v-for="item2, index2 in item.icons.children" :key="index2">
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div v-else-if="activeName2 == 'Toilets'">
+                                <div class="toilet">
+                                    <div class="toilet-banner" v-if="item.banner">
+                                        <img :src="item.banner.detail" :alt="item.banner.name">
+                                    </div>
+                                    <div class="other-toilet" v-if="item.others && item.others.length != 0">
+                                        <img :src="item2.detail" :alt="item2.name" v-for="item2, index2 in item.others"
+                                            :key="index2">
+                                    </div>
+                                    <div class="toilet-style">
+                                        <h1 v-if="item.styles"><strong>{{ item.styles.title }}</strong></h1>
+                                        <span v-if="item.styles"><strong>{{ item.styles.mintitle }}</strong></span>
+                                        <div class="styles"
+                                            v-if="item.styles && item.styles.children && item.styles.children.length != 0">
+                                            <div class="styles-item" v-for="item2, index2 in item.styles.children"
+                                                :key="index2">
+                                                <img :src="item2.detail" :alt="item2.name">
+                                                <span><strong>{{ item2.title }}</strong></span>
+                                            </div>
+                                        </div>
                                     </div>
                                 </div>
                             </div>
+                            <div v-else-if="activeName2 == 'Tubs'">
+                                <div class="tubs">
+                                    <div class="tubs-header" v-if="item.others && item.others.length != 0">
+                                        <div class="header-item" v-for="item2, index2 in item.others" :key="index2">
+                                            <div class="item-left">
+                                                <img :src="item2.detail" :alt="item2.name">
+                                            </div>
+                                            <div class="item-right">
+                                                <span>{{ item2.title }}</span>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="tubs-bottom">
+                                        <div class="bottom-left" v-if="item.others2">
+                                            <h1><strong>{{ item.others2.title }}</strong></h1>
+                                            <div class="one"></div>
+                                            <h2><strong>{{ item.others2.mintitle }}</strong></h2>
+                                            <div class="bottom-tubs"
+                                                v-if="item.others2 && item.others2.children && item.others2.children.length != 0">
+                                                <div class="bottom-item" v-for="item2, index2 in item.others2.children"
+                                                    :key="index2">
+                                                    <img :src="item2.detail" :alt="item2.name">
+                                                    <span>{{ item2.title }}</span>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <div class="bottom-right">
+                                            <h2 v-if="item.icons"><strong>{{ item.icons.title }}</strong></h2>
+                                            <div class="icons"
+                                                v-if="item.icons && item.icons.children && item.icons.children.length != 0">
+                                                <img :src="item2.detail" :alt="item2.name"
+                                                    v-for="item2, index2 in item.icons.children" :key="index2">
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div v-else-if="activeName2 == 'Shower Rooms'">
+                                <div class="shower">
+                                    
+                                </div>
+                            </div>
                         </div>
                         <div class="btn position-relative font-size-24" @click="goPage">Back</div>
                     </el-tab-pane>
@@ -292,26 +402,385 @@ onMounted(() => {
 
 <style scoped lang="less">
 // 产品的大图展示
-.faucets{
+.tubs {
+    box-sizing: border-box;
+    width: 100%;
+    padding: 1rem;
+
+    .tubs-header {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        flex-wrap: wrap;
+
+        .header-item {
+            width: 48%;
+            display: flex;
+            margin-bottom: 2rem;
+
+            .item-left {
+                width: 50%;
+
+                img {
+                    width: 100%;
+                    height: 100%;
+                }
+            }
+
+            .item-right {
+                width: 50%;
+                background: url('../assets/img/sanitary/mirror/bgc.jpg') no-repeat;
+                background-size: cover;
+                position: relative;
+
+                span {
+                    box-sizing: border-box;
+                    width: 100%;
+                    text-align: center;
+                    color: #fff;
+                    padding: 0 1rem;
+                    position: absolute;
+                    left: 50%;
+                    top: 50%;
+                    font-weight: 700;
+                    transform: translate(-50%, -50%);
+                }
+            }
+        }
+
+        .header-item:nth-child(3),
+        .header-item:nth-child(4) {
+            .item-left {
+                position: relative;
+                left: 50%;
+                // transform: translateX(-50%);
+            }
+
+            .item-right {
+                position: relative;
+                left: -50%;
+            }
+        }
+    }
+
+    .tubs-bottom {
+        margin-top: 2rem;
+        width: 100%;
+        box-sizing: border-box;
+        display: flex;
+        justify-content: space-between;
+
+        .bottom-left {
+            width: 74%;
+            text-align: center;
+            background-color: rgba(0, 0, 0, 0.05);
+            border-radius: 10px;
+
+            .one {
+                position: relative;
+                left: 50%;
+                transform: translateX(-50%);
+                height: 1rem;
+                background-color: rgba(0, 0, 0, 0.3);
+                width: 20%;
+                margin: 2rem 0;
+            }
+
+            .bottom-tubs {
+                margin-top: 2rem;
+                width: 100%;
+                display: flex;
+                flex-wrap: wrap;
+                justify-content: space-between;
+
+                .bottom-item {
+                    width: 24%;
+                    display: flex;
+                    flex-direction: column;
+
+                    img {
+                        width: 100%;
+                        height: 100%;
+                    }
+
+                    span {
+                        margin: 1rem 0;
+                        font-weight: bold;
+                    }
+                }
+            }
+        }
+
+        .bottom-right {
+            width: 24%;
+            // height: 100%;
+            background: url('../assets/img/sanitary/Basins/bgc.jpg') no-repeat;
+            background-size: cover;
+            border-radius: 10px;
+            text-align: center;
+
+            h2 {
+                text-align: center;
+                position: relative;
+                top: 15%;
+            }
+
+            .icons {
+                position: relative;
+                top: 50%;
+                transform: translateY(-50%);
+                display: flex;
+                justify-content: space-around;
+                align-items: center;
+                flex-wrap: wrap;
+
+                img {
+                    width: 40%;
+                    height: 100%;
+                    margin-bottom: 1rem;
+                    margin-top: 1rem;
+                }
+            }
+        }
+    }
+}
+
+.toilet {
+    box-sizing: border-box;
+    padding: 1rem;
     width: 100%;
-    .faucets-header{
+
+    .toilet-banner {
+        width: 100%;
+
+        img {
+            width: 100%;
+            height: 100%;
+        }
+    }
+
+    .other-toilet {
+        margin-top: 2rem;
+        width: 100%;
+        display: flex;
+        flex-wrap: nowrap;
+        justify-content: space-between;
+
+        img {
+            width: 24%;
+            height: 20vw;
+            border-radius: 10px;
+        }
+    }
+
+    .toilet-style {
+        margin-top: 2rem;
         width: 100%;
         padding: 1rem;
+        background: url('../assets/img/sanitary/mirror/bgc.jpg') no-repeat;
+        background-size: cover;
+        border-radius: 10px;
+
+        h1,
+        span {
+            margin-left: 2%;
+        }
+
+        .styles {
+            box-sizing: border-box;
+            margin-top: 2rem;
+            display: flex;
+            flex-wrap: nowrap;
+            align-items: center;
+            justify-content: space-between;
+
+            .styles-item {
+                width: 32%;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                color: #ffffff;
+
+                img {
+                    width: 80%;
+                    height: 80%;
+                }
+            }
+        }
+    }
+}
+
+.basins {
+    padding: 1rem;
+
+    .basins-header {
+        padding: 0 1rem;
+
+        .header-item {
+            margin-top: 1rem;
+            width: 100%;
+
+            img {
+                width: 100%;
+                height: 100%;
+            }
+        }
+    }
+
+    .basins-bottom {
+        box-sizing: border-box;
+        margin-top: 1rem;
+        background: url('../assets/img/sanitary/mirror/bgc.jpg') no-repeat;
+        background-size: cover;
+        width: 100%;
+        padding: 1rem;
+
+        h1,
+        span {
+            margin-left: 2%;
+        }
+
+        .styles {
+            box-sizing: border-box;
+            margin: 1rem;
+            padding: 0 1rem;
+            display: flex;
+            justify-content: space-between;
+
+            .basins-styles {
+                width: 80%;
+                display: flex;
+                flex-wrap: wrap;
+                justify-content: space-between;
+
+                .styles-item {
+                    width: 24%;
+                    margin-bottom: 1%;
+
+                    img {
+                        width: 100%;
+                        height: 100%;
+                        border-radius: 10px;
+                    }
+                }
+            }
+
+            .basins-quality {
+                width: 19%;
+                background: url('../assets/img/sanitary/Basins/bgc.jpg') no-repeat;
+                background-size: cover;
+                border-radius: 10px;
+
+                h2 {
+                    text-align: center;
+                    position: relative;
+                    top: 15%;
+                }
+
+                .icons {
+                    position: relative;
+                    top: 50%;
+                    transform: translateY(-50%);
+                    display: flex;
+                    justify-content: space-around;
+                    align-items: center;
+                    flex-wrap: wrap;
+
+                    img {
+                        width: 40%;
+                        height: 100%;
+                        margin-bottom: 1rem;
+                        margin-top: 1rem;
+                    }
+                }
+            }
+        }
+    }
+}
+
+.faucets {
+    width: 100%;
+
+    .faucets-header {
+        box-sizing: border-box;
+        width: 100%;
+        height: 100%;
+        padding: 1rem;
         background-color: #333333;
         display: flex;
         flex-wrap: wrap;
-        .faucets-item{
+        justify-content: space-between;
+
+        .header-left {
             width: 24%;
-            height: 25vw;
-            margin-right: 1%;
-            margin-bottom: 2rem;
-            img{
+            height: 100%;
+
+            .left1,
+            .left2 {
                 width: 100%;
-                height: 100%;
+                height: 66%;
+
+                img {
+                    width: 100%;
+                    height: 100%;
+                    border-radius: 10px;
+                }
+            }
+
+            .left2 {
+                height: 33%;
+                margin-top: 1rem;
+            }
+        }
+
+        .header-right {
+            width: 75%;
+            height: 100%;
+            display: flex;
+            flex-wrap: wrap;
+
+            .right-item {
+                width: 32%;
+                height: 33%;
+                margin-right: 1rem;
+                margin-bottom: 1rem;
+
+                img {
+                    width: 100%;
+                    height: 100%;
+                    border-radius: 10px;
+                }
+            }
+        }
+    }
+
+    .faucets-bottom {
+        box-sizing: border-box;
+        background: url('../assets/img/sanitary/mirror/bgc.jpg') no-repeat;
+        background-size: cover;
+        margin-top: 2rem;
+        width: 100%;
+        padding: 1rem;
+
+        h1,
+        span {
+            margin-left: 2%;
+        }
+
+        .color-pic {
+            margin-top: 2rem;
+            width: 100%;
+            display: flex;
+            justify-content: space-between;
+
+            img {
+                width: 49%;
+                border-radius: 20px;
             }
         }
     }
 }
+
 .wooden {
     width: 100%;
 
@@ -332,10 +801,12 @@ onMounted(() => {
                 height: 100%;
                 transition: 0.5s linear;
             }
-            img:hover{
+
+            img:hover {
                 scale: 1.2;
             }
-            img:hover + span{
+
+            img:hover+span {
                 background-color: #fa8106;
             }
 
@@ -352,18 +823,22 @@ onMounted(() => {
             }
         }
     }
-    .wooden-bootom{
+
+    .wooden-bootom {
         width: 100%;
         display: flex;
         justify-content: space-between;
-        .wooden-left{
+
+        .wooden-left {
             width: 20%;
             position: relative;
-            img{
+
+            img {
                 width: 100%;
                 height: 80%;
             }
-            span{
+
+            span {
                 position: absolute;
                 top: 40%;
                 left: 50%;
@@ -373,9 +848,11 @@ onMounted(() => {
                 font-weight: bold;
             }
         }
-        .wooden-right{
+
+        .wooden-right {
             width: 78%;
-            img{
+
+            img {
                 width: 100%;
                 height: 80%;
             }
@@ -903,13 +1380,12 @@ onMounted(() => {
             margin: 1rem auto 0;
         }
     }
-}
-</style>
+}</style>
 
-<style>
-.demo-tabs>.el-tabs__content {
+<style>.demo-tabs>.el-tabs__content {
     padding: 10px;
     color: #6b778c;
     font-size: 32px;
     font-weight: 600;
-}</style>
+}
+</style>

montier/src/store/modules/homepage.ts

@@ -152,31 +152,144 @@ const useHomeStore = defineStore('Home', {
                                 { detail: new URL('../../assets/img/sanitary/wooden/02.jpg', import.meta.url).href, name: 'Square Mirror', title: 'Square Mirror' },
                                 { detail: new URL('../../assets/img/sanitary/wooden/03.jpg', import.meta.url).href, name: 'Irregular Shape Mirror', title: 'Irregular Shape Mirror' },
                             )
-                        }, {
-                        name: 'Faucets',
-                        banner: { detail: new URL('../../assets/img/sanitary/mirror/bgc.jpg', import.meta.url).href, name: 'More colors' },
-                        banner1: { detail: new URL('../../assets/img/sanitary/Faucets/01.jpg', import.meta.url).href, name: 'Shower Faucet', title: 'Shower Faucet' },
-                        banner2: { detail: new URL('../../assets/img/sanitary/Faucets/08.jpg', import.meta.url).href, name: 'Bathtub Faucet', title: 'Bathtub Faucet' },
-                        others: Array<any>(
-                            { detail: new URL('../../assets/img/sanitary/Faucets/02.jpg', import.meta.url).href, name: 'Single-Hole Basin Faucet', title: 'Single-Hole Basin Faucet' },
-                            { detail: new URL('../../assets/img/sanitary/Faucets/03.jpg', import.meta.url).href, name: 'Waterfall Basin Faucet', title: 'Waterfall Basin Faucet' },
-                            { detail: new URL('../../assets/img/sanitary/Faucets/04.jpg', import.meta.url).href, name: 'Sensor Faucet', title: 'Sensor Faucet' },
-                            { detail: new URL('../../assets/img/sanitary/Faucets/05.jpg', import.meta.url).href, name: 'Wall-Mounted Basin Faucet', title: 'Wall-Mounted Basin Faucet' },
-                            { detail: new URL('../../assets/img/sanitary/Faucets/06.jpg', import.meta.url).href, name: '8 Widespread Basin Faucet', title: '8 Widespread Basin Faucet' },
-                            { detail: new URL('../../assets/img/sanitary/Faucets/07.jpg', import.meta.url).href, name: '4 Centerset Basin Faucet', title: '4 Centerset Basin Faucet' },
-                            { detail: new URL('../../assets/img/sanitary/Faucets/09.jpg', import.meta.url).href, name: 'Bathtub Faucet', title: 'Bathtub Faucet' },
-                            { detail: new URL('../../assets/img/sanitary/Faucets/10.jpg', import.meta.url).href, name: 'Bathroom Accessories', title: 'Bathroom Accessories' },
-                            { detail: new URL('../../assets/img/sanitary/Faucets/11.jpg', import.meta.url).href, name: 'Accessories', title: 'Accessories' },
-                        ),
-                        others2: {
-                            title: 'More colors',
-                            mintitle: 'can better match your house style',
-                            children: Array<any>(
-                                { detail: new URL('../../assets/img/sanitary/Faucets/12.jpg', import.meta.url).href, name: 'colors', title: 'colors' },
-                                { detail: new URL('../../assets/img/sanitary/Faucets/13.jpg', import.meta.url).href, name: 'colors', title: 'colors' },
-                            )
+                        },
+                        {
+                            name: 'Faucets',
+                            banner: { detail: new URL('../../assets/img/sanitary/mirror/bgc.jpg', import.meta.url).href, name: 'More colors' },
+                            banner1: { detail: new URL('../../assets/img/sanitary/Faucets/01.jpg', import.meta.url).href, name: 'Shower Faucet', title: 'Shower Faucet' },
+                            banner2: { detail: new URL('../../assets/img/sanitary/Faucets/08.jpg', import.meta.url).href, name: 'Bathtub Faucet', title: 'Bathtub Faucet' },
+                            others: Array<any>(
+                                { detail: new URL('../../assets/img/sanitary/Faucets/02.jpg', import.meta.url).href, name: 'Single-Hole Basin Faucet', title: 'Single-Hole Basin Faucet' },
+                                { detail: new URL('../../assets/img/sanitary/Faucets/03.jpg', import.meta.url).href, name: 'Waterfall Basin Faucet', title: 'Waterfall Basin Faucet' },
+                                { detail: new URL('../../assets/img/sanitary/Faucets/04.jpg', import.meta.url).href, name: 'Sensor Faucet', title: 'Sensor Faucet' },
+                                { detail: new URL('../../assets/img/sanitary/Faucets/05.jpg', import.meta.url).href, name: 'Wall-Mounted Basin Faucet', title: 'Wall-Mounted Basin Faucet' },
+                                { detail: new URL('../../assets/img/sanitary/Faucets/06.jpg', import.meta.url).href, name: '8 Widespread Basin Faucet', title: '8 Widespread Basin Faucet' },
+                                { detail: new URL('../../assets/img/sanitary/Faucets/07.jpg', import.meta.url).href, name: '4 Centerset Basin Faucet', title: '4 Centerset Basin Faucet' },
+                                { detail: new URL('../../assets/img/sanitary/Faucets/09.jpg', import.meta.url).href, name: 'Bathtub Faucet', title: 'Bathtub Faucet' },
+                                { detail: new URL('../../assets/img/sanitary/Faucets/10.jpg', import.meta.url).href, name: 'Bathroom Accessories', title: 'Bathroom Accessories' },
+                                { detail: new URL('../../assets/img/sanitary/Faucets/11.jpg', import.meta.url).href, name: 'Accessories', title: 'Accessories' },
+                            ),
+                            others2: {
+                                title: 'More colors',
+                                mintitle: 'can better match your house style',
+                                children: Array<any>(
+                                    { detail: new URL('../../assets/img/sanitary/Faucets/12.jpg', import.meta.url).href, name: 'colors', title: 'colors' },
+                                    { detail: new URL('../../assets/img/sanitary/Faucets/13.jpg', import.meta.url).href, name: 'colors', title: 'colors' },
+                                )
+                            }
+                        },
+                        {
+                            name: 'Basins',
+                            banner: { detail: new URL('../../assets/img/sanitary/Basins/bgc.jpg', import.meta.url).href, name: 'Basins' },
+                            others: Array<any>(
+                                { detail: new URL('../../assets/img/sanitary/Basins/01.jpg', import.meta.url).href, name: 'COUNTERTOP Basins' },
+                                { detail: new URL('../../assets/img/sanitary/Basins/02.jpg', import.meta.url).href, name: 'WALL-HUNG Basins' },
+                                { detail: new URL('../../assets/img/sanitary/Basins/03.jpg', import.meta.url).href, name: 'PEDESTAL Basins' },
+                                { detail: new URL('../../assets/img/sanitary/Basins/04.jpg', import.meta.url).href, name: 'UNDERCOUNTER Basins' },
+                            ),
+                            others2: {
+                                title: 'More styles',
+                                mintitle: 'can better match your house design',
+                                children: Array<any>(
+                                    { detail: new URL('../../assets/img/sanitary/Basins/other01.jpg', import.meta.url).href, name: 'Artificial stone basin', title: 'Artificial stone basin' },
+                                    { detail: new URL('../../assets/img/sanitary/Basins/other02.jpg', import.meta.url).href, name: 'Concrete basin', title: 'Concrete basin' },
+                                    { detail: new URL('../../assets/img/sanitary/Basins/other03.jpg', import.meta.url).href, name: 'Feather edge', title: 'Feather edge' },
+                                    { detail: new URL('../../assets/img/sanitary/Basins/other04.jpg', import.meta.url).href, name: 'Stainless steel basin', title: 'Stainless steel basin' },
+                                    { detail: new URL('../../assets/img/sanitary/Basins/other05.jpg', import.meta.url).href, name: 'Glass basin', title: 'Glass basin' },
+                                    { detail: new URL('../../assets/img/sanitary/Basins/other06.jpg', import.meta.url).href, name: 'Marble basin', title: 'Marble basin' },
+                                    { detail: new URL('../../assets/img/sanitary/Basins/other07.jpg', import.meta.url).href, name: 'Art basin', title: 'Art basin' },
+                                    { detail: new URL('../../assets/img/sanitary/Basins/other08.jpg', import.meta.url).href, name: 'Wall hung basin', title: 'Wall hung basin' },
+                                )
+                            },
+                            icons: {
+                                title: 'BEST QUALITY',
+                                children: Array<any>(
+                                    { detail: new URL('../../assets/img/sanitary/Basins/icon/icon01.png', import.meta.url).href, name: 'Integrated Moulding' },
+                                    { detail: new URL('../../assets/img/sanitary/Basins/icon/icon02.png', import.meta.url).href, name: 'Healthy Material' },
+                                    { detail: new URL('../../assets/img/sanitary/Basins/icon/icon03.png', import.meta.url).href, name: 'Gel Coating' },
+                                    { detail: new URL('../../assets/img/sanitary/Basins/icon/icon04.png', import.meta.url).href, name: 'No easy to crack' },
+                                    { detail: new URL('../../assets/img/sanitary/Basins/icon/icon05.png', import.meta.url).href, name: 'Easy to clean' },
+                                    { detail: new URL('../../assets/img/sanitary/Basins/icon/icon06.png', import.meta.url).href, name: 'Water Proof' },
+                                )
+                            }
+                        },
+                        {
+                            name: 'Toilets',
+                            banner: { detail: new URL("../../assets/img/sanitary/toilet/01.jpg", import.meta.url).href, name: 'Smart Toilet' },
+                            others: Array<any>(
+                                { detail: new URL("../../assets/img/sanitary/toilet/other01.jpg", import.meta.url).href, name: 'Toilet' },
+                                { detail: new URL("../../assets/img/sanitary/toilet/other02.jpg", import.meta.url).href, name: 'Toilet' },
+                                { detail: new URL("../../assets/img/sanitary/toilet/other03.jpg", import.meta.url).href, name: 'Toilet' },
+                                { detail: new URL("../../assets/img/sanitary/toilet/other04.jpg", import.meta.url).href, name: 'Toilet' },
+                            ),
+                            styles: {
+                                title: 'More styles',
+                                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/style03.png", import.meta.url).href, name: 'Wall Hung Toilet', title: 'Wall Hung Toilet' },
+                                )
+                            }
+                        },
+                        {
+                            name: 'Tubs',
+                            banner: { detail: new URL('../../assets/img/sanitary/mirror/bgc.jpg', import.meta.url).href, name: 'Tubs' },
+                            others: Array<any>(
+                                { detail: new URL('../../assets/img/sanitary/tubs/01.jpg', import.meta.url).href, name: 'Freestanding Bath Tub', title: 'Freestanding Bath Tub' },
+                                { detail: new URL('../../assets/img/sanitary/tubs/02.jpg', import.meta.url).href, name: 'Freestanding Bath Tub with Supporting Foot', title: 'Freestanding Bath Tub with Supporting Foot' },
+                                { detail: new URL('../../assets/img/sanitary/tubs/03.jpg', import.meta.url).href, name: 'Smart Constant Temperature Massage BathTub', title: 'Smart Constant Temperature Massage BathTub' },
+                                { detail: new URL('../../assets/img/sanitary/tubs/04.jpg', import.meta.url).href, name: 'Drop in Bathtub', title: 'Drop in Bathtub' },
+                                { detail: new URL('../../assets/img/sanitary/tubs/05.jpg', import.meta.url).href, name: 'SPA tub/Jacuzzi', title: 'SPA tub/Jacuzzi' },
+                                { detail: new URL('../../assets/img/sanitary/tubs/06.jpg', import.meta.url).href, name: 'swim SPA', title: 'swim SPA' },
+                            ),
+                            others2: {
+                                title: 'VARIOUS STYLES',
+                                mintitle: 'BATHROOMS THAT MEET DIFFERENT HOUSEHOLD STYLES',
+                                children: Array<any>(
+                                    { detail: new URL('../../assets/img/sanitary/tubs/001.jpg', import.meta.url).href, name: 'HD-1001', title: 'HD-1001' },
+                                    { detail: new URL('../../assets/img/sanitary/tubs/002.jpg', import.meta.url).href, name: 'HD-1004', title: 'HD-1004' },
+                                    { detail: new URL('../../assets/img/sanitary/tubs/003.jpg', import.meta.url).href, name: 'HD-1017', title: 'HD-1017' },
+                                    { detail: new URL('../../assets/img/sanitary/tubs/004.jpg', import.meta.url).href, name: 'HD-1020', title: 'HD-1020' },
+                                    { detail: new URL('../../assets/img/sanitary/tubs/005.jpg', import.meta.url).href, name: 'HD-1021', title: 'HD-1021' },
+                                    { detail: new URL('../../assets/img/sanitary/tubs/006.jpg', import.meta.url).href, name: 'HD-1030', title: 'HD-1030' },
+                                    { detail: new URL('../../assets/img/sanitary/tubs/007.jpg', import.meta.url).href, name: 'HD-1037', title: 'HD-1037' },
+                                    { detail: new URL('../../assets/img/sanitary/tubs/008.jpg', import.meta.url).href, name: 'CUSTOMIZED', title: 'CUSTOMIZED' },
+                                )
+                            },
+                            icons: {
+                                title: 'BEST QUALITY',
+                                children: Array<any>(
+                                    { detail: new URL('../../assets/img/sanitary/tubs/icon/icon01.png', import.meta.url).href, name: 'Healthy Material' },
+                                    { detail: new URL('../../assets/img/sanitary/tubs/icon/icon02.png', import.meta.url).href, name: 'Easy to clean' },
+                                    { detail: new URL('../../assets/img/sanitary/tubs/icon/icon03.png', import.meta.url).href, name: 'Not easy to crack' },
+                                    { detail: new URL('../../assets/img/sanitary/tubs/icon/icon04.png', import.meta.url).href, name: 'Durable Test' },
+                                )
+                            }
+                        },
+                        {
+                            name: 'Shower Rooms',
+                            others: {
+                                title: 'Shower Enclosure',
+                                titl2: 'More Available Finishes',
+                                icontitle: 'High Quality',
+                                mintitle: 'can better match your house design',
+                                banner: { detail: new URL('../../assets/img/sanitary/Shower/01.jpg', import.meta.url).href, name: 'Shower Rooms' },
+                                colors: 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' },
+                                ),
+                                icons: Array<any>(
+                                    { detail: new URL('../../assets/img/sanitary/Shower/icon/icon01.png', import.meta.url).href, name: 'Polished Chrome' },
+                                    { detail: new URL('../../assets/img/sanitary/Shower/icon/icon02.png', import.meta.url).href, name: 'Polished Chrome' },
+                                    { detail: new URL('../../assets/img/sanitary/Shower/color/color1.png', import.meta.url).href, name: 'Polished Chrome' },
+                                )
+                            }
                         }
-                    }
                     )
                 }
             )