0907

montier/src/pages/Productmessage.vue

@@ -106,7 +106,7 @@
                                     <div class="pic1-img">
                                         <img :src="item2.detail" :alt="item2.name">
                                     </div>
-                                    <div class="pic1-title">
+                                    <div class="pic1-title" v-if="item.banner">
                                         <img :src="item.banner.detail" :alt="item.banner.name">
                                         <span>{{ item2.title }}</span>
                                     </div>
@@ -269,7 +269,119 @@
                             </div>
                             <div v-else-if="activeName2 == 'Shower Rooms'">
                                 <div class="shower">
-                                    
+                                    <div class="shower-header">
+                                        <div class="header-left" v-if="item.others && item.others.banner">
+                                            <img :src="item.others.banner.detail" :alt="item.others.banner.name">
+                                        </div>
+                                        <div class="header-right" v-if="item.others">
+                                            <h1><strong>{{ item.others.title }}</strong></h1>
+                                            <div class="right-color">
+                                                <h2><strong>{{ item.others.title2 }}</strong></h2>
+                                                <h4>{{ item.others.mintitle }}</h4>
+                                                <div class="color-list"
+                                                    v-if="item.others.colors && item.others.colors.length != 0">
+                                                    <div class="color-item" v-for="item2, index2 in item.others.colors"
+                                                        :key="index2">
+                                                        <img :src="item2.detail" :alt="item2.name">
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div class="right-icon">
+                                                <h2 v-if="item.others"><strong>{{ item.others.icontitle }}</strong></h2>
+                                                <div class="icon-list"
+                                                    v-if="item.others.icons && item.others.icons.length != 0">
+                                                    <div class="icon-item" v-for="item2, index2 in item.others.icons"
+                                                        :key="index2">
+                                                        <img :src="item2.detail" :alt="item2.name">
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="shower-bottom"
+                                        v-if="item.others && item.others.children && item.others.children.length != 0">
+                                        <div class="bottom-item" v-for="item2, index2 in item.others.children" :key="index2">
+                                            <img :src="item2.detail" :alt="item2.name">
+                                            <span>{{ item2.title }}</span>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div v-else-if="activeName2 == 'Shower Columns/Panel'">
+                                <div class="panel">
+                                    <div class="panel-list" v-if="item.children && item.children.length != 0">
+                                        <div class="list-item" v-for="item2, index2 in item.children" :key="index2">
+                                            <img :src="item2.detail" :alt="item2.name">
+                                            <span>{{ item2.title }}</span>
+                                        </div>
+                                        <div class="panel-item" v-if="item.others">
+                                            <h1><strong>{{ item.others.title }}</strong></h1>
+                                            <div class="right-color">
+                                                <h2><strong>{{ item.others.title2 }}</strong></h2>
+                                                <h4>{{ item.others.mintitle }}</h4>
+                                                <div class="color-list"
+                                                    v-if="item.others.colors && item.others.colors.length != 0">
+                                                    <div class="color-item" v-for="item2, index2 in item.others.colors"
+                                                        :key="index2">
+                                                        <img :src="item2.detail" :alt="item2.name">
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div class="right-icon">
+                                                <h2 v-if="item.others"><strong>{{ item.others.icontitle }}</strong></h2>
+                                                <div class="icon-list"
+                                                    v-if="item.others.icons && item.others.icons.length != 0">
+                                                    <div class="icon-item" v-for="item2, index2 in item.others.icons"
+                                                        :key="index2">
+                                                        <img :src="item2.detail" :alt="item2.name">
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div v-else-if="activeName2 == 'Bathroom Cabinet'">
+                                <div class="cabinet">
+                                    <div class="cabinet-header">
+                                        <img :src="item.banner.detail" :alt="item.banner.name" v-if="item.banner">
+                                        <div class="header-right" v-if="item.others">
+                                            <h1><strong>{{ item.others.title }}</strong></h1>
+                                            <span class="font-size-20">{{ item.others.desc }}</span>
+                                            <div class="right-options" v-if="item.others && item.others.options">
+                                                <h5><strong>{{ item.others.options.title }}</strong></h5>
+                                                <div class="options-list" v-if="item.others.options.children && item.others.options.children.length != 0">
+                                                    <div class="options-item" v-for="item2,index2 in item.others.options.children" :key="index2">
+                                                        <img :src="item2.detail" :alt="item2.name">
+                                                        <span class="font-size-18">{{ item2.title }}</span>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div class="right-options" v-if="item.others && item.others.options">
+                                                <h5><strong>{{ item.others.finishes.title }}</strong></h5>
+                                                <div class="options-list" v-if="item.others.finishes.children && item.others.finishes.children.length != 0">
+                                                    <div class="options-item" v-for="item2,index2 in item.others.finishes.children" :key="index2">
+                                                        <img :src="item2.detail" :alt="item2.name">
+                                                        <span class="font-size-18 finishesspan">{{ item2.title }}</span>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div class="tips" v-if="item.tips">
+                                                {{ item.tips }}
+                                            </div>
+                                            <div class="quality" v-if="item.others.icons">
+                                                <h5><strong>{{ item.others.icons.title }}</strong></h5>
+                                                <div class="icons-list" v-if="item.others.icons.children && item.others.icons.children.length != 0">
+                                                    <div class="icons-item" v-for="item2,index2 in item.others.icons.children" :key="index2">
+                                                        <img :src="item2.detail" :alt="item2.name">
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="cabinet-bottom" v-if="item.children && item.children.length != 0">
+                                        <img :src="item2.detail" :alt="item2.name" v-for="item2,index2 in item.children" :key="index2">
+                                    </div>
                                 </div>
                             </div>
                         </div>
@@ -402,6 +514,365 @@ onMounted(() => {
 
 <style scoped lang="less">
 // 产品的大图展示
+.cabinet{
+    width: 100%;
+    box-sizing: border-box;
+    .cabinet-header{
+        width: 100%;
+        display: flex;
+        img{
+            width: 50%;
+            height: 60vw;
+        }
+        .header-right{
+            width: 50%;
+            height: 60vw;
+            background: url('../assets/img/sanitary/mirror/bgc.jpg') no-repeat;
+            background-size: cover;
+            text-align: center;
+            padding: 1rem;
+            box-sizing: border-box;
+            h1{
+                margin-top: 1rem;
+                margin-bottom: 1rem;
+            }
+            .right-options{
+                box-sizing: border-box;
+                width: 100%;
+                margin-top: 2rem;
+                text-align: left;
+                padding: 0 1rem;
+                .options-list{
+                    margin-top: 1rem;
+                    display: flex;
+                    justify-content: space-between;
+                    .options-item{
+                        box-sizing: border-box;
+                        width: 30%;
+                        height: 10vw;
+                        position: relative;
+                        border: 4px solid #fff;
+                        img{
+                            width: 100%;
+                            height: 100%;
+                        }
+                        span{
+                            background: rgba(0, 0, 0, 0.35);
+                            width: 100%;
+                            position: absolute;
+                            bottom: 0;
+                            left: 0;
+                            text-align: center;
+                            color: #fff;
+                            box-sizing: border-box;
+                            padding: 1rem;
+                            font-weight: bold;
+                        }
+                        .finishesspan{
+                            background: rgba(0, 0, 0, 0.35);
+                            height: 2rem;
+                            width: 100%;
+                            position: absolute;
+                            padding: 0;
+                            top: 50%;
+                            transform: translateY(-50%);
+                            display: flex;
+                            align-items: center;
+                            justify-content: center;
+                            box-sizing: border-box;
+                            color: #fff;
+                            font-weight: bold;
+                        }
+                    }
+                }
+            }
+            .tips{
+                display: inline-block;
+                margin-top: 2rem;
+                padding: 1rem;
+                background: rgb(175, 175, 175);
+                color: #ffffff;
+                font-weight: bold;
+                box-shadow: 1px 5px 20px #333;
+            }
+            .quality{
+                margin-top: 2rem;
+                box-sizing: border-box;
+                width: 100%;
+                padding: 0 1rem;
+                h5{
+                    width: 100%;
+                    text-align: left;
+                }
+                .icons-list{
+                    margin-top: 2rem;
+                    display: flex;
+                    justify-content: space-between;
+                    .icons-item{
+                        width: 15%;
+                        img{
+                            width: 100%;
+                            height: 100%;
+                        }
+                    }
+                }
+            }
+        }
+    }
+    .cabinet-bottom{
+        margin-top: 2rem;
+        display: flex;
+        justify-content: space-between;
+        img{
+            width: 49%;
+        }
+    }
+}
+.panel {
+    box-sizing: border-box;
+    width: 100%;
+
+    .panel-list {
+        width: 100%;
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+
+        .panel-item {
+            width: 48%;
+            height: 45vw;
+            background: url('../assets/img/sanitary/mirror/bgc.jpg') no-repeat;
+            background-size: cover;
+            padding: 1rem;
+            box-sizing: border-box;
+
+            h1 {
+                margin: 2rem 0;
+                text-align: center;
+            }
+
+            .right-color {
+                box-sizing: border-box;
+                width: 100%;
+                padding: 1rem;
+                display: flex;
+                flex-direction: column;
+                justify-content: left;
+                margin-top: 2rem;
+
+                h2 {
+                    color: rgb(8, 43, 125);
+                }
+
+                h2,
+                h4 {
+                    float: left;
+                    margin-left: 2rem;
+                }
+
+                .color-list {
+                    width: 100%;
+                    margin-top: 4rem;
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+
+                    .color-item {
+                        width: 15%;
+
+                        img {
+                            width: 100%;
+                            height: 100%;
+                        }
+                    }
+                }
+            }
+
+            .right-icon {
+                box-sizing: border-box;
+                width: 100%;
+                margin-top: 3rem;
+
+                h2 {
+                    color: rgb(8, 43, 125);
+                    margin-left: 3rem;
+                }
+
+                .icon-list {
+                    margin-top: 1rem;
+                    width: 100%;
+                    box-sizing: border-box;
+                    padding: 0 1rem;
+                    display: flex;
+
+                    .icon-item {
+                        width: 15%;
+                        height: 100%;
+                        margin-right: 1rem;
+
+                        img {
+                            width: 100%;
+                            height: 100%;
+                        }
+                    }
+                }
+            }
+        }
+
+        .list-item {
+            width: 48%;
+            height: 45vw;
+            position: relative;
+            margin-bottom: 2rem;
+
+            img {
+                width: 100%;
+                height: 100%;
+            }
+
+            span {
+                position: absolute;
+                width: 100%;
+                padding: 1rem;
+                box-sizing: border-box;
+                bottom: 2%;
+                left: 0;
+                background: rgba(0, 0, 0, 0.2);
+                color: #fff;
+                text-align: center;
+                font-weight: bold;
+            }
+        }
+    }
+}
+
+.shower {
+    box-sizing: border-box;
+    width: 100%;
+
+    .shower-header {
+        width: 100%;
+        display: flex;
+
+        .header-left {
+            width: 50%;
+            height: 100%;
+
+            img {
+                width: 100%;
+                height: 100%;
+            }
+        }
+
+        .header-right {
+            width: 50%;
+            height: 100%;
+            background: url('../assets/img/sanitary/mirror/bgc.jpg') no-repeat;
+            background-size: cover;
+            padding: 1rem;
+
+            h1 {
+                text-align: center;
+            }
+
+            .right-color {
+                box-sizing: border-box;
+                width: 100%;
+                padding: 1rem;
+                display: flex;
+                flex-direction: column;
+                justify-content: left;
+
+                h2 {
+                    color: rgb(8, 43, 125);
+                }
+
+                h2,
+                h4 {
+                    float: left;
+                    margin-left: 2rem;
+                }
+
+                .color-list {
+                    width: 100%;
+                    margin-top: 2rem;
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+
+                    .color-item {
+                        width: 15%;
+
+                        img {
+                            width: 100%;
+                            height: 100%;
+                        }
+                    }
+                }
+            }
+
+            .right-icon {
+                width: 100%;
+
+                h2 {
+                    color: rgb(8, 43, 125);
+                    margin-left: 3rem;
+                }
+
+                .icon-list {
+                    margin-top: 1rem;
+                    width: 100%;
+                    box-sizing: border-box;
+                    padding: 0 1rem;
+                    display: flex;
+
+                    .icon-item {
+                        width: 15%;
+                        height: 100%;
+                        margin-right: 1rem;
+
+                        img {
+                            width: 100%;
+                            height: 100%;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    .shower-bottom {
+        margin-top: 1rem;
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .bottom-item {
+            position: relative;
+            width: 32%;
+
+            img {
+                width: 100%;
+                height: 100%;
+            }
+
+            span {
+                box-sizing: border-box;
+                width: 100%;
+                padding: 1rem;
+                position: absolute;
+                bottom: 2%;
+                left: 0;
+                background: rgba(0, 0, 0, 0.2);
+                color: #fff;
+                text-align: center;
+                font-weight: bold;
+                font-size: 23px;
+            }
+        }
+    }
+}
+
 .tubs {
     box-sizing: border-box;
     width: 100%;
@@ -1387,5 +1858,4 @@ onMounted(() => {
     color: #6b778c;
     font-size: 32px;
     font-weight: 600;
-}
-</style>
+}</style>

montier/src/store/modules/homepage.ts

@@ -271,7 +271,7 @@ const useHomeStore = defineStore('Home', {
                             name: 'Shower Rooms',
                             others: {
                                 title: 'Shower Enclosure',
-                                titl2: 'More Available Finishes',
+                                title2: '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' },
@@ -286,9 +286,86 @@ const useHomeStore = defineStore('Home', {
                                 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/icon/icon03.png', import.meta.url).href, name: 'Polished Chrome' },
+                                ),
+                                children: Array<any>(
+                                    { detail: new URL('../../assets/img/sanitary/Shower/02.jpg', import.meta.url).href, name: 'Frameless Pivot Glass Shower Doors', title: 'Frameless Pivot Glass Shower Doors' },
+                                    { detail: new URL('../../assets/img/sanitary/Shower/03.jpg', import.meta.url).href, name: 'Shower Cabin', title: 'Shower Cabin' },
+                                    { detail: new URL('../../assets/img/sanitary/Shower/04.jpg', import.meta.url).href, name: 'All In One Shower Room', title: 'All In One Shower Room' },
+                                )
+                            }
+                        },
+                        {
+                            name: 'Shower Columns/Panel',
+                            children: Array<any>(
+                                { detail: new URL('../../assets/img/sanitary/panel/01.jpg', import.meta.url).href, name: 'Shower Columns', title: 'Shower Columns' },
+                                { detail: new URL('../../assets/img/sanitary/panel/02.jpg', import.meta.url).href, name: 'Shower Panel', title: ' Shower Panel' },
+                                { detail: new URL('../../assets/img/sanitary/panel/03.jpg', import.meta.url).href, name: 'Wall Mounted Shower', title: 'Wall Mounted Shower' },
+                            ),
+                            others: {
+                                title: 'Shower Fixtures',
+                                title2: 'More Available Finishes',
+                                icontitle: 'High Quality',
+                                mintitle: 'can better match your house design',
+                                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/panel/icon/icon01.png', import.meta.url).href, name: 'Easy Switch' },
+                                    { detail: new URL('../../assets/img/sanitary/panel/icon/icon02.png', import.meta.url).href, name: 'Eacy Fit' },
+                                    { detail: new URL('../../assets/img/sanitary/panel/icon/icon03.png', import.meta.url).href, name: 'Eco Lead Free Material' },
+                                    { detail: new URL('../../assets/img/sanitary/panel/icon/icon04.png', import.meta.url).href, name: 'SPA Experience' },
                                 )
                             }
+                        },
+                        {
+                            name: 'Bathroom Cabinet',
+                            tips: 'Please contact us for more design options',
+                            banner: { detail: new URL('../../assets/img/sanitary/cabinet/01.jpg', import.meta.url).href, name: 'BATHROOM CABINET', title: 'BATHROOM CABINET' },
+                            children: Array<any>(
+                                { detail: new URL('../../assets/img/sanitary/cabinet/02.jpg', import.meta.url).href, name: 'BATHROOM CABINET', title: 'BATHROOM CABINET' },
+                                { detail: new URL('../../assets/img/sanitary/cabinet/03.jpg', import.meta.url).href, name: 'BATHROOM CABINET', title: 'BATHROOM CABINET' },
+                            ),
+                            others: {
+                                title: 'Bathroom Cabinet',
+                                desc: 'We offer a professional customization service with any different Material，surface finishes，drawer opitions and accessories.',
+                                options: {
+                                    title: 'Material Options',
+                                    children: Array<any>(
+                                        { detail: new URL('../../assets/img/sanitary/cabinet/options/01.jpg', import.meta.url).href, name: 'Chip Board', title: 'Chip Board' },
+                                        { detail: new URL('../../assets/img/sanitary/cabinet/options/02.jpg', import.meta.url).href, name: 'MDF', title: 'MDF' },
+                                        { detail: new URL('../../assets/img/sanitary/cabinet/options/03.jpg', import.meta.url).href, name: 'Poly Wood', title: 'Poly Wood' },
+                                    )
+                                },
+                                finishes: {
+                                    title: 'Surface Finishes',
+                                    children: Array<any>(
+                                        { detail: new URL('../../assets/img/sanitary/cabinet/options/finishes01.jpg', import.meta.url).href, name: 'PVC', title: 'PVC' },
+                                        { detail: new URL('../../assets/img/sanitary/cabinet/options/finishes02.jpg', import.meta.url).href, name: 'MELANINE', title: 'MELANINE' },
+                                        { detail: new URL('../../assets/img/sanitary/cabinet/options/finishes03.jpg', import.meta.url).href, name: 'EPOXY POWER', title: 'EPOXY POWER' },
+                                    )
+                                },
+                                icons: {
+                                    title: 'High Quality',
+                                    children: Array<any>(
+                                        { detail: new URL('../../assets/img/sanitary/cabinet/icon/icon01.png', import.meta.url).href, name: 'Multilayer Solid Wood' },
+                                        { detail: new URL('../../assets/img/sanitary/cabinet/icon/icon02.png', import.meta.url).href, name: 'Flexible Storage' },
+                                        { detail: new URL('../../assets/img/sanitary/cabinet/icon/icon03.png', import.meta.url).href, name: 'Sliver Mirror' },
+                                        { detail: new URL('../../assets/img/sanitary/cabinet/icon/icon04.png', import.meta.url).href, name: 'Wear-Resisting' },
+                                        { detail: new URL('../../assets/img/sanitary/cabinet/icon/icon05.png', import.meta.url).href, name: 'Storage' },
+                                        { detail: new URL('../../assets/img/sanitary/cabinet/icon/icon06.png', import.meta.url).href, name: 'Collocation' },
+                                    )
+                                }
+                            }
+                        },
+                        {
+                            name: 'Bathroom Accessories',
+                            
                         }
                     )
                 }