0911

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' && router.currentRoute.value.params.name != '2'">
+        v-if="router.currentRoute.value.params.name != '3' && router.currentRoute.value.params.name != '6' && router.currentRoute.value.params.name != '2' && router.currentRoute.value.params.name != '4' && router.currentRoute.value.params.name != '5'">
         <div class="door-bgc position-relative">
             <img :src="banner.src" :alt="banner.name">
             <span class="position-absolute doortitle color-fff font-bold"
@@ -59,13 +59,14 @@
                     <div class="icon-img">
                         <img :src="productmessage.banner2.detail" :alt="productmessage.banner2.name">
                         <div class="banner-icon" v-if="productmessage.tips && productmessage.tips.length != 0">
-                            <span class="icon" v-for="item, index in productmessage.tips" :key="index">
+                            <span class="icon" :class="router.currentRoute.value.params.name == '5' ? 'kiticon' : ''" v-for="item, index in productmessage.tips" :key="index">
                                 <img :src="item.detail" :alt="item.name">
                                 <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">
+                            <img :src="item.detail" :alt="item.name" v-for="item, index in productmessage.icons"
+                                :key="index">
                         </div>
                     </div>
                 </div>
@@ -303,7 +304,8 @@
                                     </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">
+                                        <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>
@@ -353,8 +355,10 @@
                                             <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">
+                                                <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>
@@ -362,8 +366,11 @@
                                             </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">
+                                                <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>
@@ -374,8 +381,10 @@
                                             </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">
+                                                <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>
@@ -383,7 +392,8 @@
                                         </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">
+                                        <img :src="item2.detail" :alt="item2.name" v-for="item2, index2 in item.children"
+                                            :key="index2">
                                     </div>
                                 </div>
                             </div>
@@ -401,17 +411,151 @@
                                         <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 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="children-pic" v-if="router.currentRoute.value.params.name == '4'">
+                            <div v-if="activeName2 == 'LVT/SPC Flooring'">
+                                <div class="flooring">
+                                    <div class="flooring-header">
+                                        <img :src="item.banner.detail" :alt="item.banner.name" v-if="item.banner"
+                                            class="img1">
+                                        <span v-if="item.banner" class="span1">{{ item.banner.title }}</span>
+                                        <div class="flooring-footer">
+                                            <div class="footer-left" v-if="item.product">
+                                                <h3 v-if="item.product.title"><strong>{{ item.product.title }}</strong></h3>
+                                                <h5 v-if="item.product.mintitle">{{ item.product.mintitle }}</h5>
+                                                <div class="footer-product"
+                                                    v-if="item.product.children && item.product.children.length">
+                                                    <div class="product-item" v-for="item2, index2 in item.product.children"
+                                                        :key="index2">
+                                                        <img :src="item2.detail" :alt="item2.name">
+                                                        <span>{{ item2.title }}</span>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div class="footer-right" v-if="item.icons">
+                                                <div class="icons-list" v-if="item.icons && item.icons.length">
+                                                    <div class="icons-item" v-for="item2, index2 in item.icons"
+                                                        :key="index2">
+                                                        <img :src="item2.detail" :alt="item2.name">
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="flooring-bottom">
+                                        <div class="bottom-header" v-if="item.floor && item.floor.length != 0">
+                                            <div class="item" v-for="item2, index2 in item.floor" :key="index2">
+                                                <div class="item-left">
+                                                    <img :src="item2.leftimg.detail" :alt="item2.leftimg.name"
+                                                        class="img1" />
+                                                    <img :src="item2.rightimg.detail" :alt="item2.rightimg.name"
+                                                        class="img2" />
+                                                    <div class="mask"></div>
+                                                </div>
+                                                <div class="item-right">
+                                                    <span class="font-size-22"><strong>{{ item2.title }}</strong></span>
+                                                    <span>Thickness：{{ item2.Thickness }}</span>
+                                                    <span>Wear layer：{{ item2.Wearlayer }}</span>
+                                                    <span>Pattern：{{ item2.Pattern }}</span>
+                                                    <span>Finish：{{ item2.Finish }}</span>
+                                                    <span>Feature：{{ item2.Feature }}</span>
+                                                    <span>Advantage：{{ item2.Advantage }}</span>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <div class="bottom-size">
+                                            <img :src="item.banner1.detail" :alt="item.banner1.name" v-if="item.banner1">
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div v-else-if="activeName2 == 'WPC Series'">
+                                <div class="series">
+                                    <h1 v-if="item.title"><strong>{{ item.title }}</strong></h1>
+                                    <div class="series-list" v-if="item.children && item.children.length != 0">
+                                        <div class="series-item" v-for="item2, index2 in item.children" :key="index2">
+                                            <img :src="item2.detail" :alt="item2.name">
+                                            <span>{{ item2.title }}</span>
+                                        </div>
+                                    </div>
+                                    <div class="series-features">
+                                        <img :src="item.banner.detail" :alt="item.banner.name" v-if="item.banner">
+                                        <h1><strong>Product Features</strong></h1>
+                                        <div class="features" v-if="item.features && item.features.length != 0">
+                                            <div class="features-item" v-for="item2, index2 in item.features" :key="index2">
+                                                <h4>{{ item2.position }}&nbsp;{{ item2.content }}</h4>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="series-others" v-if="item.others && item.others.length != 0">
+                                        <div class="others-item" v-for="item2, index2 in item.others" :key="index2">
+                                            <img :src="item2.detail" :alt="item2.name">
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div v-else-if="activeName2 == 'FCP Series'">
+
+                            </div>
+                            <div v-else-if="activeName2 == 'Stone Series'">
+                                <div class="stone">
+                                    <div class="stone-list" v-if="item.children && item.children.length != 0">
+                                        <div class="stone-item" v-for="item2, index2 in item.children" :key="index2">
+                                            <div class="item-left">
+                                                <img :src="item2.detail" :alt="item2.name">
+                                            </div>
+                                            <div class="item-right">
+                                                <img :src="item.banner.detail" :alt="item.banner.name" v-if="item.banner">
+                                                <span>{{ item2.title }}</span>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="children-pic" v-if="router.currentRoute.value.params.name == '5'">
+                            <div v-if="activeName2 == 'Kitchen Cabinet'">
+                                <div class="kitcabinet">
+                                    <img :src="item.banner.detail" :alt="item.banner.name" v-if="item.banner">
+                                    <div class="kitcabinet-list">
+                                        <div class="list-left" v-if="item.banner2">
+                                            <img :src="item.banner2.detail" :alt="item.name">
+                                        </div>
+                                        <div class="list-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>
+                                    <img :src="item.banner1.detail" :alt="item.banner1.name" v-if="item.banner1">
+                                </div>
+                            </div>
+                            <div v-else-if="activeName2 == 'Kitchen Sinks/Faucets'">
+                                <div class="sinks">
+                                    <img :src="item.banner1.detail" :alt="item.banner1.name" v-if="item.banner1">
                                 </div>
                             </div>
                         </div>
                         <div class="btn position-relative font-size-24" @click="goPage">Back</div>
                     </el-tab-pane>
                 </el-tabs>
+                <div v-else>
+                    <div class="window-pic" v-if="productmessage.others && productmessage.others.length != 0">
+                        <div class="window-item" v-for="item, index in productmessage.others" :key="index">
+                            <img :src="item.detail" :alt="item.name">
+                            <span>{{ item.title }}</span>
+                        </div>
+                    </div>
+                </div>
             </div>
         </div>
     </div>
@@ -496,7 +640,6 @@ watch(() => router.currentRoute.value.params.name, (newValue: any) => {
             title: '',
             name: 'Kitchen'
         }
-        product = Home.$state.Cabinet
     } else if (newValue == '0') {
         productList = []
         banner.value = {
@@ -537,19 +680,422 @@ onMounted(() => {
 </script>
 
 <style scoped lang="less">
+// kitchen
+.sinks{
+    width: 100%;
+    box-sizing: border-box;
+}
+.kitcabinet{
+    width: 100%;
+    text-align: center;
+    img{
+        margin-top: 2rem;
+    }
+    .kitcabinet-list{
+        margin-top: 2rem;
+        margin-bottom: 2rem;
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        .list-left{
+            width: 55%;
+            img{
+                width: 100%;
+                height: 100%;
+            }
+        }
+        .list-right{
+            width: 43%;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            .right-item{
+                width: 100%;
+                height: 49%;
+                img{
+                    width: 100%;
+                    height: 100%;
+                }
+            }
+        }
+    }
+}
+// building
+.stone {
+    width: 100%;
+    box-sizing: border-box;
+
+    .stone-list {
+        width: 100%;
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+
+        .stone-item {
+            display: flex;
+            width: 48%;
+            margin-bottom: 2rem;
+
+            .item-left {
+                width: 50%;
+
+                img {
+                    width: 100%;
+                    height: 100%;
+                }
+            }
+
+            .item-right {
+                width: 50%;
+                position: relative;
+
+                img {
+                    width: 100%;
+                    height: 100%;
+                }
+
+                span {
+                    position: absolute;
+                    font-weight: bold;
+                    top: 50%;
+                    left: 0;
+                    transform: translateY(-50%);
+                    width: 100%;
+                    text-align: center;
+                }
+            }
+        }
+    }
+}
+
+.series {
+    width: 100%;
+
+    h1 {
+        width: 100%;
+        text-align: center;
+    }
+
+    .series-list {
+        margin-top: 2rem;
+        width: 100%;
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+
+        .series-item {
+            width: 24%;
+            margin-bottom: 1rem;
+            position: relative;
+
+            img {
+                width: 100%;
+                height: 20vw;
+            }
+
+            span {
+                position: absolute;
+                width: 100%;
+                background: url('../assets/img/building/series/bgc.jpg') no-repeat;
+                background-size: cover;
+                left: 0;
+                bottom: 0;
+                box-sizing: border-box;
+                padding: 0.5rem 1rem;
+                text-align: center;
+                color: #ffffff;
+            }
+        }
+    }
+
+    .series-features {
+        margin-top: 2rem;
+        width: 100%;
+        position: relative;
+
+        img {
+            width: 100%;
+        }
+
+        h1 {
+            position: absolute;
+            top: 2%;
+            width: 100%;
+            background: rgba(0, 0, 0, 0.1);
+            left: 0;
+            text-align: left;
+            padding: 1rem;
+            box-sizing: border-box;
+            color: #ffffff;
+        }
+
+        .features {
+            width: 60%;
+            position: absolute;
+            left: 2%;
+            top: 15%;
+            color: #ffffff;
+
+            .features-item {
+                width: 100%;
+                margin-bottom: 1.5rem;
+
+                h4 {
+                    font-weight: 600;
+                }
+            }
+        }
+    }
+
+    .series-others {
+        width: 100%;
+        margin-top: 2rem;
+        display: flex;
+        justify-content: space-between;
+        flex-wrap: wrap;
+
+        .others-item {
+            width: 48%;
+            margin-bottom: 2rem;
+
+            img {
+                width: 100%;
+                height: 100%;
+            }
+        }
+    }
+}
+
+.flooring {
+    width: 100%;
+    box-sizing: border-box;
+
+    .flooring-header {
+        width: 100%;
+        position: relative;
+
+        .img1 {
+            width: 100%;
+        }
+
+        .span1 {
+            position: absolute;
+            top: 1%;
+            left: 0;
+            width: 100%;
+            box-sizing: border-box;
+            padding: 0.5rem 1rem;
+            color: #ffffff;
+            background: rgba(0, 0, 0, 0.2);
+        }
+
+        .flooring-footer {
+            position: absolute;
+            left: 0;
+            bottom: 1%;
+            width: 100%;
+            box-sizing: border-box;
+            padding: 0 1rem;
+            display: flex;
+            justify-content: space-between;
+            align-items: end;
+
+            .footer-left {
+                width: 48%;
+
+                h3,
+                h5 {
+                    margin-left: 2rem;
+                    margin-bottom: 2rem;
+                    color: #ffffff;
+                }
+
+                .footer-product {
+                    width: 100%;
+                    display: flex;
+                    flex-wrap: wrap;
+                    justify-content: space-between;
+
+                    .product-item {
+                        box-sizing: border-box;
+                        width: 32%;
+                        border: 5px solid #ffffff;
+                        margin-bottom: 1rem;
+                        position: relative;
+
+                        img {
+                            width: 100%;
+                            height: 100%;
+                        }
+
+                        span {
+                            position: absolute;
+                            width: 100%;
+                            bottom: 0;
+                            left: 0;
+                            text-align: center;
+                            color: #ffffff;
+                            background: rgba(0, 0, 0, 0.2);
+                            font-weight: 600;
+                            box-sizing: border-box;
+                            padding: 0.5rem 1rem;
+                        }
+                    }
+                }
+            }
+
+            .footer-right {
+                width: 48%;
+
+                .icons-list {
+                    width: 100%;
+                    display: flex;
+                    justify-content: right;
+
+                    .icons-item {
+                        width: 20%;
+                        margin-right: 1rem;
+
+                        img {
+                            width: 100%;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    .flooring-bottom {
+        margin-top: 2rem;
+        width: 100%;
+        box-sizing: border-box;
+
+        .bottom-header {
+            width: 100%;
+            display: flex;
+            flex-direction: column;
+
+            .item {
+                width: 100%;
+                margin-top: 1rem;
+                border: 1px solid #333333;
+                display: flex;
+                font-size: 18px;
+
+                .item-left {
+                    width: 65%;
+                    display: flex;
+                    position: relative;
+                    box-sizing: border-box;
+
+                    .mask {
+                        width: 100%;
+                        height: 100%;
+                        position: absolute;
+                        background: linear-gradient(to right, transparent 25%, #ffffff 40%, transparent 55%);
+                        z-index: 99;
+                    }
+
+                    .img1 {
+                        width: 40%;
+                    }
+
+                    .img2 {
+                        width: 60%;
+                    }
+                }
+
+                .item-right {
+                    width: 35%;
+                    display: flex;
+                    flex-direction: column;
+                    box-sizing: border-box;
+                    padding: 1rem;
+                    background: url('../assets/img/building/flooring/floor/bgc.jpg');
+
+                    span {
+                        margin-bottom: 0.5rem;
+                    }
+                }
+            }
+
+            .item:nth-child(2n) {
+                .item-left {
+                    transform: translateX(53.8%);
+                }
+
+                .item-right {
+                    transform: translateX(-185.8%);
+                }
+            }
+        }
+
+        .bottom-size {
+            width: 100%;
+
+            img {
+                width: 100%;
+            }
+        }
+    }
+}
+
+// window
+.window-pic {
+    width: 100%;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+
+    .window-item {
+        width: 32%;
+        height: 25vw;
+        margin-bottom: 2rem;
+        position: relative;
+        overflow: hidden;
+
+        img {
+            width: 100%;
+            height: 100%;
+            transition: 1s linear;
+        }
+
+        img:hover {
+            scale: 1.2;
+        }
+
+        span {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            background: rgba(0, 0, 0, 0.2);
+            text-align: center;
+            color: #ffffff;
+            padding: 1rem 0;
+            font-weight: bold;
+            box-sizing: border-box;
+        }
+    }
+}
+
 // 产品的大图展示
-.accessories{
+.accessories {
     width: 100%;
     box-sizing: border-box;
     display: flex;
-    .accessories-left{
+
+    .accessories-left {
         width: 50%;
         position: relative;
-        img{
+
+        img {
             width: 100%;
             height: 100%;
         }
-        span{
+
+        span {
             width: 100%;
             position: absolute;
             left: 0%;
@@ -562,31 +1108,39 @@ onMounted(() => {
             box-sizing: border-box;
         }
     }
-    .accessories-right{
+
+    .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{
+
+        .right-header {
             width: 100%;
             text-align: center;
             padding: 1rem;
-            img{
+
+            img {
                 width: 80%;
             }
         }
-        .right-bottom{
-            h3,h5{
+
+        .right-bottom {
+
+            h3,
+            h5 {
                 width: 100%;
                 text-align: left;
                 margin-left: 2rem;
                 margin-top: 1rem;
             }
-            h3{
+
+            h3 {
                 color: #012D86;
             }
-            .bottom-colors{
+
+            .bottom-colors {
                 box-sizing: border-box;
                 margin-top: 1rem;
                 width: 100%;
@@ -594,24 +1148,29 @@ onMounted(() => {
                 display: flex;
                 justify-content: space-between;
                 margin-bottom: 2rem;
-                img{
+
+                img {
                     width: 15%;
                 }
             }
         }
     }
 }
-.cabinet{
+
+.cabinet {
     width: 100%;
     box-sizing: border-box;
-    .cabinet-header{
+
+    .cabinet-header {
         width: 100%;
         display: flex;
-        img{
+
+        img {
             width: 50%;
             height: 60vw;
         }
-        .header-right{
+
+        .header-right {
             width: 50%;
             height: 60vw;
             background: url('../assets/img/sanitary/mirror/bgc.jpg') no-repeat;
@@ -619,31 +1178,37 @@ onMounted(() => {
             text-align: center;
             padding: 1rem;
             box-sizing: border-box;
-            h1{
+
+            h1 {
                 margin-top: 1rem;
                 margin-bottom: 1rem;
             }
-            .right-options{
+
+            .right-options {
                 box-sizing: border-box;
                 width: 100%;
                 margin-top: 2rem;
                 text-align: left;
                 padding: 0 1rem;
-                .options-list{
+
+                .options-list {
                     margin-top: 1rem;
                     display: flex;
                     justify-content: space-between;
-                    .options-item{
+
+                    .options-item {
                         box-sizing: border-box;
                         width: 30%;
                         height: 10vw;
                         position: relative;
                         border: 4px solid #fff;
-                        img{
+
+                        img {
                             width: 100%;
                             height: 100%;
                         }
-                        span{
+
+                        span {
                             background: rgba(0, 0, 0, 0.35);
                             width: 100%;
                             position: absolute;
@@ -655,7 +1220,8 @@ onMounted(() => {
                             padding: 1rem;
                             font-weight: bold;
                         }
-                        .finishesspan{
+
+                        .finishesspan {
                             background: rgba(0, 0, 0, 0.35);
                             height: 2rem;
                             width: 100%;
@@ -673,7 +1239,8 @@ onMounted(() => {
                     }
                 }
             }
-            .tips{
+
+            .tips {
                 display: inline-block;
                 margin-top: 2rem;
                 padding: 1rem;
@@ -682,22 +1249,27 @@ onMounted(() => {
                 font-weight: bold;
                 box-shadow: 1px 5px 20px #333;
             }
-            .quality{
+
+            .quality {
                 margin-top: 2rem;
                 box-sizing: border-box;
                 width: 100%;
                 padding: 0 1rem;
-                h5{
+
+                h5 {
                     width: 100%;
                     text-align: left;
                 }
-                .icons-list{
+
+                .icons-list {
                     margin-top: 2rem;
                     display: flex;
                     justify-content: space-between;
-                    .icons-item{
+
+                    .icons-item {
                         width: 15%;
-                        img{
+
+                        img {
                             width: 100%;
                             height: 100%;
                         }
@@ -706,15 +1278,18 @@ onMounted(() => {
             }
         }
     }
-    .cabinet-bottom{
+
+    .cabinet-bottom {
         margin-top: 2rem;
         display: flex;
         justify-content: space-between;
-        img{
+
+        img {
             width: 49%;
         }
     }
 }
+
 .panel {
     box-sizing: border-box;
     width: 100%;
@@ -1673,7 +2248,7 @@ onMounted(() => {
                             align-items: center;
                             color: #ffffff;
                             font-weight: bold;
-                            font-size: 20px;
+                            font-size: 18px;
                             margin-top: 2rem;
 
                             img {
@@ -1682,8 +2257,12 @@ onMounted(() => {
                                 margin-right: 1rem;
                             }
                         }
+                        .kiticon{
+                            margin-top: 0.8rem;
+                        }
                     }
-                    .banner-icons{
+
+                    .banner-icons {
                         display: flex;
                         justify-content: space-between;
                         width: 100%;
@@ -1694,7 +2273,8 @@ onMounted(() => {
                         transform: translateX(-50%);
                         padding: 0 1rem;
                         box-sizing: border-box;
-                        img{
+
+                        img {
                             width: 30%;
                             height: 100%;
                             margin-bottom: 1rem;
@@ -1955,9 +2535,11 @@ 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;

montier/src/pages/contactUs.vue

@@ -26,12 +26,7 @@
             <div class="contact-right">
                 <el-form ref="ruleFormRef" :model="form" class="demo-ruleForm" :label-width="labelwidth" :size="'default'"
                     :inline="true" status-icon>
-                    <el-form-item label="Requirements" prop="desc" style="width: 100%" :rules="[
-                        {
-                            required: true,
-                            message: 'Please enter your requirements',
-                            trigger: 'blur',
-                        }]">
+                    <el-form-item label="Requirements" prop="desc" style="width: 100%">
                         <el-input v-model="form.Requirements" placeholder="Requirements" type="textarea"/>
                     </el-form-item>
                     <el-form-item label="Name" :style="{width: stylewidth}" :rules="[

montier/src/store/modules/homepage.ts

@@ -54,22 +54,6 @@ const useHomeStore = defineStore('Home', {
                 footer2: { detail: new URL("../../assets/img/Door/08/04.jpg", import.meta.url).href, name: 'Fold Sliding Doors' }
             },
             ),
-            Cabinet: Array<any>(
-                {
-                    name: 'Kitchen Cabinet',
-                    children: [
-                        { detail: new URL("../../assets/img/Kitchen/02.jpg", import.meta.url).href, name: 'Kitchen Cabinet' },
-                        { detail: new URL("../../assets/img/Kitchen/03.jpg", import.meta.url).href, name: 'Kitchen Cabinet' },
-                        { detail: new URL("../../assets/img/Kitchen/04.jpg", import.meta.url).href, name: 'Kitchen Cabinet' },
-                    ]
-                },
-                {
-                    name: 'Kitchen Sinks/Faucets',
-                    children: [
-                        { detail: new URL("../../assets/img/Kitchen/05.jpg", import.meta.url).href, name: 'Kitchen Cabinet' },
-                    ]
-                }
-            ),
             Products: Array<any>(
                 {
                     name: 'Raillings&stairs',
@@ -389,7 +373,7 @@ const useHomeStore = defineStore('Home', {
                     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/01.png", 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' },
@@ -404,6 +388,171 @@ const useHomeStore = defineStore('Home', {
                         { 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' },
                     )
+                },
+                {
+                    name: 'Building Materials',
+                    position: '4',
+                    banner1: { detail: new URL("../../assets/img/building/01.jpg", import.meta.url).href, name: 'Enjoy the beauty of your buliding', title: 'Enjoy the beauty of your buliding' },
+                    banner2: { detail: new URL("../../assets/img/productbanner.jpg", import.meta.url).href, name: 'productbanner' },
+                    banner3: { detail: new URL("../../assets/img/building/2.jpg", import.meta.url).href, name: 'Stone Series' },
+                    tips: Array<any>(
+                        { detail: new URL("../../assets/img/building/icons/icon01.png", import.meta.url).href, name: 'One stop product supply', title: 'One stop product supply' },
+                        { detail: new URL("../../assets/img/building/icons/icon02.png", import.meta.url).href, name: 'Customized', title: 'Customized' },
+                        { detail: new URL("../../assets/img/building/icons/icon03.png", import.meta.url).href, name: 'Controllable Cost', title: 'Controllable Cost' },
+                        { detail: new URL("../../assets/img/building/icons/icon04.png", import.meta.url).href, name: 'High Qulity', title: 'High Qulity' },
+                    ),
+                    children: Array<any>( 
+                        {
+                            name: 'LVT/SPC Flooring',
+                            banner: { detail: new URL("../../assets/img/building/flooring/01.jpg", import.meta.url).href, name: 'flooring', title: 'Green flooring that restores the texture of natural wood or stone, and brings nature home.' },
+                            banner1: { detail: new URL("../../assets/img/building/flooring/floor/09.jpg", import.meta.url).href, name: 'customsize' },
+                            icons: Array<any>(
+                                { detail: new URL("../../assets/img/building/flooring/icon/icon01.png", import.meta.url).href, name: 'Water Proof', title: 'Water Proof' },
+                                { detail: new URL("../../assets/img/building/flooring/icon/icon02.png", import.meta.url).href, name: 'Project Scrach', title: 'Project Scrach' },
+                                { detail: new URL("../../assets/img/building/flooring/icon/icon03.png", import.meta.url).href, name: 'Fire Proof', title: 'Fire Proof' },
+                                { detail: new URL("../../assets/img/building/flooring/icon/icon04.png", import.meta.url).href, name: 'Easy Fit', title: 'Easy Fit' },
+                            ),
+                            product: {
+                                title: 'More Texture',
+                                mintitle: 'can better match your house design',
+                                children: Array<any>(
+                                    { detail: new URL("../../assets/img/building/flooring/product/01.jpg", import.meta.url).href, name: 'Deep embossed', title: 'Deep embossed' },
+                                    { detail: new URL("../../assets/img/building/flooring/product/02.jpg", import.meta.url).href, name: 'Crystal', title: 'Crystal' },
+                                    { detail: new URL("../../assets/img/building/flooring/product/03.jpg", import.meta.url).href, name: 'Matt surface', title: 'Matt surface' },
+                                    { detail: new URL("../../assets/img/building/flooring/product/04.jpg", import.meta.url).href, name: 'Stone', title: 'Stone' },
+                                    { detail: new URL("../../assets/img/building/flooring/product/05.jpg", import.meta.url).href, name: 'Embossed in register', title: 'Embossed in register' },
+                                    { detail: new URL("../../assets/img/building/flooring/product/06.jpg", import.meta.url).href, name: 'High gloss', title: 'High gloss' },
+                                )
+                            },
+                            floor: Array<any>(
+                                {
+                                    title: 'Self Adhesive',
+                                    Thickness: '1.2mm-3mm',
+                                    Wearlayer: '0.1mm-0.5mm',
+                                    Pattern: 'Wood/ Woven/ Carpet/Stone/Marble',
+                                    Finish: 'Embossed/ Smooth',
+                                    Feature: 'Waterproof/ Anti-slip/ Anti-wear/ Formaldehyde Free/Fireproof',
+                                    Advantage: 'No need any glue for installationCompetitive prices',
+                                    leftimg: { detail: new URL("../../assets/img/building/flooring/floor/01.jpg", import.meta.url).href, name: 'Self Adhesive' },
+                                    rightimg: { detail: new URL("../../assets/img/building/flooring/floor/02.jpg", import.meta.url).href, name: 'Self Adhesive' }
+                                },
+                                {
+                                    title: 'Click Lock',
+                                    Thickness: '3.5-6.0mm',
+                                    Wearlayer: '0.1mm-0.5mm',
+                                    Pattern: 'Wood/ Woven/ Carpet/Stone/ Marble',
+                                    Finish: 'Embossed/ Smooth',
+                                    Feature: 'Waterproof/ Anti-slip/ Anti-wear/ Formaldehyde Free/Fireproof',
+                                    Advantage: 'No need any glue, click together',
+                                    leftimg: { detail: new URL("../../assets/img/building/flooring/floor/03.jpg", import.meta.url).href, name: 'Click Lock' },
+                                    rightimg: { detail: new URL("../../assets/img/building/flooring/floor/04.jpg", import.meta.url).href, name: 'Click Lock' }
+                                },
+                                {
+                                    title: 'Loose Lay',
+                                    Thickness: '3.5mm-6.0mm',
+                                    Wearlayer: '0.1mm-0.5mm',
+                                    Pattern: 'Wood/ Woven/ Carpet/Stone/ Marble',
+                                    Finish: 'Embossed/ Smooth',
+                                    Feature: 'Waterproof/ Anti-slip/ Anti-wear/ Formaldehyde Free/Fireproof',
+                                    Advantage: 'No need any glue',
+                                    leftimg: { detail: new URL("../../assets/img/building/flooring/floor/05.jpg", import.meta.url).href, name: 'Loose Lay' },
+                                    rightimg: { detail: new URL("../../assets/img/building/flooring/floor/06.jpg", import.meta.url).href, name: 'Loose Lay' }
+                                },
+                                {
+                                    title: 'Dry Back',
+                                    Thickness: '1.2mm-3mm',
+                                    Wearlayer: '0.1mm-0.5mm',
+                                    Pattern: 'Wood/ Woven/ Carpet/Stone/ Marble',
+                                    Finish: 'Embossed/ Smooth',
+                                    Feature: 'Waterproof/ Anti-slip/ Anti-wear/ Formaldehyde Free/Fireproof',
+                                    Advantage: 'Need Glue for installation',
+                                    leftimg: { detail: new URL("../../assets/img/building/flooring/floor/07.jpg", import.meta.url).href, name: 'Dry Back' },
+                                    rightimg: { detail: new URL("../../assets/img/building/flooring/floor/08.jpg", import.meta.url).href, name: 'Dry Back' }
+                                },
+                            )
+                        },
+                        {
+                            name: 'WPC Series',
+                            title: 'PRODUCT CATEGORIES',
+                            banner: { detail: new URL("../../assets/img/building/series/10.jpg", import.meta.url).href, name: 'Product Features' },
+                            children: Array<any>(
+                                { detail: new URL("../../assets/img/building/series/01.jpg", import.meta.url).href, name: 'PU STONE', title: 'PU STONE' },
+                                { detail: new URL("../../assets/img/building/series/02.jpg", import.meta.url).href, name: 'UV MARLE SHEET', title: 'UV MARLE SHEET' },
+                                { detail: new URL("../../assets/img/building/series/03.jpg", import.meta.url).href, name: 'INDOOR WPC WALL PANEL', title: 'INDOOR WPC WALL PANEL' },
+                                { detail: new URL("../../assets/img/building/series/04.jpg", import.meta.url).href, name: 'PS SKIRTING', title: 'PS SKIRTING' },
+                                { detail: new URL("../../assets/img/building/series/05.jpg", import.meta.url).href, name: 'WPC FENCE', title: 'WPC FENCE' },
+                                { detail: new URL("../../assets/img/building/series/06.jpg", import.meta.url).href, name: 'WPC DECKING', title: 'WPC DECKING' },
+                                { detail: new URL("../../assets/img/building/series/07.jpg", import.meta.url).href, name: 'OUT DOOR WPC WALL PANEL', title: 'OUT DOOR WPC WALL PANEL' },
+                                { detail: new URL("../../assets/img/building/series/08.jpg", import.meta.url).href, name: 'PS WPC PANEL', title: 'PS WPC PANEL' },
+                            ),
+                            features: Array<any>(
+                                { position: '1', content: 'Eco-friendly made from recycled plastics and non-virgin wood.' },
+                                { position: '2', content: 'Highly termite resistant, waterproof.' },
+                                { position: '3', content: 'Timber like finish for an excellent non-slip feel.' },
+                                { position: '4', content: 'No staining or painting required.' },
+                                { position: '5', content: 'Water and corrosion resistant, alkali-proof, moth-proof, stainable and malleable, low pollution risk and odor-free.' },
+                                { position: '6', content: 'Easy to install and clean.' },
+                                { position: '7', content: 'Against UV.' },
+                            ),
+                            others: Array<any>(
+                                { detail: new URL("../../assets/img/building/series/1.jpg", import.meta.url).href, name: 'PVC MARBLE SHEET' },
+                                { detail: new URL("../../assets/img/building/series/2.jpg", import.meta.url).href, name: 'INDOOR WPC WALL PANEL' },
+                                { detail: new URL("../../assets/img/building/series/3.jpg", import.meta.url).href, name: 'PU STONE' },
+                                { detail: new URL("../../assets/img/building/series/4.jpg", import.meta.url).href, name: 'PS SKIRTING' },
+                                { detail: new URL("../../assets/img/building/series/5.jpg", import.meta.url).href, name: 'PS WALL PANEL' },
+                                { detail: new URL("../../assets/img/building/series/6.jpg", import.meta.url).href, name: 'OUTDOOR WPC WALL PANEL' },
+                                { detail: new URL("../../assets/img/building/series/7.jpg", import.meta.url).href, name: 'WPC DECKING' },
+                                { detail: new URL("../../assets/img/building/series/8.jpg", import.meta.url).href, name: 'WPC FENCE' },
+                            )
+                        },
+                        {
+                            name: 'FCP Series',
+                            title: 'PRODUCT CATEGORY',
+                            bgctitle: 'FIBER CEMENT ROARD',
+                            mintitle: 'Various product categories,provide one-stop service for building boards',
+                        },
+                        {
+                            name: 'Stone Series',
+                            banner: { detail: new URL("../../assets/img/building/stone/bgc.jpg", import.meta.url).href, name: 'Stone Series' },
+                            children: Array<any>(
+                                { detail: new URL("../../assets/img/building/stone/01.jpg", import.meta.url).href, name: 'Wall Stone', title: 'Wall Stone' },
+                                { detail: new URL("../../assets/img/building/stone/02.jpg", import.meta.url).href, name: 'Natural  Stone', title: 'Natural  Stone' },
+                                { detail: new URL("../../assets/img/building/stone/03.jpg", import.meta.url).href, name: 'Artificial Stone', title: 'Artificial Stone' },
+                                { detail: new URL("../../assets/img/building/stone/04.jpg", import.meta.url).href, name: 'Countertops，Vanity Tops & Table Tops', title: 'Countertops，Vanity Tops & Table Tops' },
+                            )
+                        }
+                    )
+                },
+                {
+                    name: 'Kitchen Faucets/Sinks/Faucets',
+                    position: '5',
+                    banner1: { detail: new URL("../../assets/img/Kitchen/01.jpg", import.meta.url).href, name: 'Easy clean, Durable, Trendy Kitchen', title: 'Easy clean, Durable, Trendy Kitchen' },
+                    banner2: { detail: new URL("../../assets/img/productbanner.jpg", import.meta.url).href, name: 'productbanner' },
+                    banner3: { detail: new URL("../../assets/img/Kitchen/02.jpg", import.meta.url).href, name: 'Stone Series' },
+                    tips: Array<any>(
+                        { detail: new URL("../../assets/img/Kitchen/icon01.png", import.meta.url).href, name: 'Customized Cabinet Manufacturer', title: 'Customized Cabinet Manufacturer' },
+                        { detail: new URL("../../assets/img/Kitchen/icon02.png", import.meta.url).href, name: 'Quick Quotation and Free amples', title: 'Quick Quotation and Free amples' },
+                        { detail: new URL("../../assets/img/Kitchen/icon03.png", import.meta.url).href, name: 'World-wideProject Experience/Project Budget Solution', title: 'World-wideProject Experience/Project Budget Solution' },
+                        { detail: new URL("../../assets/img/Kitchen/icon04.png", import.meta.url).href, name: 'Solid Packing/Pallet Packing', title: 'Solid Packing/Pallet Packing' },
+                        { detail: new URL("../../assets/img/Kitchen/icon05.png", import.meta.url).href, name: 'Professiona lQC Report/Installation Support', title: 'Professiona lQC Report/Installation Support' },
+                    ),
+                    children: Array<any>(
+                        {
+                            name: 'Kitchen Cabinet',
+                            banner: { detail: new URL("../../assets/img/Kitchen/03.jpg", import.meta.url).href, name: 'Kitchen Cabinet' },
+                            banner1: { detail: new URL("../../assets/img/Kitchen/07.jpg", import.meta.url).href, name: 'Kitchen Cabinet' },
+                            banner2: { detail: new URL("../../assets/img/Kitchen/04.jpg", import.meta.url).href, name: 'Kitchen Cabinet' },
+                            others: Array<any>(
+                                { detail: new URL("../../assets/img/Kitchen/05.jpg", import.meta.url).href, name: 'Kitchen Cabinet' },
+                                { detail: new URL("../../assets/img/Kitchen/06.jpg", import.meta.url).href, name: 'Kitchen Cabinet' }
+                            )
+                        },
+                        {
+                            name: 'Kitchen Sinks/Faucets',
+                            banner1: { detail: new URL("../../assets/img/Kitchen/12.jpg", import.meta.url).href, name: 'Kitchen Sinks/Faucets' }
+
+                        }
+                    )
                 }
             )
         }