0922

montier/src/components/HeaderPage.vue

@@ -262,7 +262,7 @@ const getProduct = async () => {
 
 <style scoped lang="less">
 .headerpage {
-  margin-bottom: 4rem;
+  margin-bottom: 3rem;
 }
 
 .navbar {

montier/src/pages/NewsMessage.vue

@@ -129,7 +129,33 @@ onMounted(() => {
 }
 
 @media screen and (max-width: 960px) {
+    .news-title{
+        padding: 1rem 0 !important;
+        h1{
+            margin-bottom: 0.5rem;
+        }
+    }
+    .content{
+        margin-top: 1rem !important;
+    }
+    .contentmessage{
+        display: flex;
+        flex-direction: column;
+    }
+    .content-img{
+        width: 90%;
+        img{
+            width: 100%;
+        }
+    }
+    .item-img{
+        width: 90%;
+        img{
+            width: 100%;
+        }
+    }
     .newsmessage {
+        width: 100%;
         box-sizing: border-box;
         margin: 0;
         padding: 0;
@@ -142,4 +168,5 @@ onMounted(() => {
             margin-bottom: 11.9rem;
         }
     }
-}</style>
+}
+</style>

montier/src/pages/Productmessage.vue

@@ -481,7 +481,8 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="children-pic" v-else-if="router.currentRoute.value.params.name == 'Kitchen Faucets Sinks Cabinets'">
+                        <div class="children-pic"
+                            v-else-if="router.currentRoute.value.params.name == 'Kitchen Faucets Sinks Cabinets'">
                             <div v-if="activeName2 == 'Kitchen Cabinet'">
                                 <div class="kitcabinet">
                                     <img :src="item.banner.detail" :alt="item.banner.name" v-if="item.banner">
@@ -2129,11 +2130,10 @@ onMounted(() => {
 
         .pic1-item {
             width: 48%;
-            height: 25vw;
+            height: 26vw;
             margin-right: 1%;
             margin-bottom: 2%;
             display: flex;
-            background-color: pink;
 
             .pic1-img,
             .pic1-title {
@@ -2355,7 +2355,7 @@ onMounted(() => {
     border: 1px solid #333;
     cursor: pointer;
     padding: 0.5rem 2rem;
-    margin: 1.5rem 0;
+    margin: 2rem 0;
     left: 50%;
     transform: translateX(-50%);
 }
@@ -2415,41 +2415,340 @@ onMounted(() => {
 
 
 @media screen and (max-width: 960px) {
-    .sinks{
-        img{
+    .shower{
+        .shower-header{
+            flex-direction: column;
+            .header-left{
+                width: 100%;
+            }
+            .header-right{
+                width: 100%;
+                padding: 5px;
+                .right-color{
+                    padding: 5px;
+                    .color-list{
+                        margin-top: 10px;
+                    }
+                }
+                .right-icon{
+                    .icon-list{
+                        margin-top: 5px;
+                    }
+                }
+            }
+        }
+        .shower-bottom{
+            flex-wrap: wrap;
+            .bottom-item{
+                width: 100%;
+                margin-bottom: 10px;
+                span{
+                    font-size: 12px;
+                }
+            }
+        }
+    }
+    .tubs{
+        .tubs-header{
+            flex-direction: column;
+            .header-item{
+                width: 100%;
+                .item-right{
+                    span{
+                        font-size: 14px;
+                    }
+                }
+            }
+        }
+        .tubs-bottom{
+            .bottom-left{
+                padding: 3px 0;
+                .one{
+                    margin: 10px 0;
+                }
+                .bottom-tubs{
+                    margin-top: 10px;
+                    .bottom-item{
+                        width: 45%;
+                        span{
+                            font-size: 12px;
+                        }
+                    }
+                }
+            }
+            .bottom-right{
+                .icons{
+                    flex-direction: column;
+                    img{
+                        width: 80%;
+                    }
+                }
+            }
+        }
+    }
+    .toilet{
+        .toilet-style{
+            span{
+                font-size: 12px;
+                text-align: center;
+            }
+            .styles{
+                margin-top: 20px;
+            }
+        }
+    }
+    .basins{
+        padding: 0;
+        .basins-header{
+            padding: 0;
+            .header-item{
+                margin-top: 10px;
+            }
+        }
+        .basins-bottom{
+            padding: 5px;
+            span{
+                font-size: 12px;
+            }
+            .styles{
+                padding: 0;
+                margin: 5px;
+                .basins-styles{
+                    .styles-item{
+                        img{
+                            border-radius: 5px;
+                        }
+                    }
+                }
+                .basins-quality{
+                    padding: 10px 5px;
+                    h2{
+                        top: 5%;
+                    }
+                    .icons{
+                        top: 43%;
+                        img{
+                            width: 45%;
+                            margin-bottom: 5px;
+                            margin-top: 0;
+                        }
+                    }
+                }
+            }
+        }
+    }
+    .faucets{
+        .faucets-header{
+            .header-left{
+                .left2{
+                    margin-top: 2px;
+                }
+            }
+            .header-right{
+                .right-item{
+                    width: 30%;
+                    margin-right: 5px !important;
+                    margin-bottom: 5px !important;
+                }
+            }
+        }
+        .faucets-bottom{
+            padding: 10px;
+            span{
+                font-size: 12px;
+                margin-top: 5px;
+            }
+            .color-pic{
+                margin-top: 10px;
+                display: flex;
+                flex-direction: column;
+                img{
+                    width: 100%;
+                    margin-bottom: 10px;
+                }
+            }
+        }
+    }
+    .wooden{
+        .wooden-header{
+            .wooden-item{
+                span{
+                    padding: 5px;
+                    font-size: 14px;
+                }
+            }
+        }
+        .wooden-bootom{
+            display: flex;
+            flex-direction: column;
+            .wooden-left{
+                width: 100%;
+                height: 15vw;
+                span{
+                    font-size: 16px;
+                }
+            }
+            .wooden-right{
+                width: 100%;
+            }
+        }
+    }
+    .allpic1{
+        .pic1-item{
+            width: 100% !important;
+            height: 100% !important;
+            .pic1-title{
+                font-size: 14px;
+            }
+        }
+        .pic1-item1{
+            width: 100% !important;
+            display: flex;
+            flex-direction: column;
+            .pic1-title{
+                width: 100% !important;
+                height: 30% !important;
+                font-size: 14px !important;
+            }
+            .pic1-img{
+                height: 100% !important;
+            }
+        }
+    }
+    .stone{
+        .stone-list{
+            .stone-item{
+                width: 100%;
+                .item-right{
+                    span{
+                        font-size: 14px;
+                    }
+                }
+            }
+        }
+    }
+    .fcpseries{
+        .fcplist{
+            .fcpitem{
+                width: 100% !important;
+                img{
+                    width: 100%;
+                }
+            }
+        }
+    }
+    .series{
+        .series-list{
+            margin-bottom: 10px !important;
+            .series-item{
+                width: 49%;
+                img{
+                    width: 100%;
+                }
+                span{
+                    font-size: 12px !important;
+                }
+            }
+        }
+        .series-features{
+            img{
+                height: 20rem;
+            }
+            h1{
+                font-size: 14px !important;
+                padding: 3px 5px !important;
+            }
+            .features{
+                width: 100% !important;
+                margin-top: 5px !important;
+                .features-item{
+                    margin-bottom: 5px;
+                    h4{
+                        width: 90% !important;
+                        padding: 3px !important;
+                        font-weight: 400;
+                    }
+                }
+            }
+        }
+    }
+    .item {
+        // height: 35vw;
+        display: flex;
+        flex-direction: column;
+
+        .item-left {
+            width: 100% !important;
+        }
+
+        .item-right {
+            width: 100% !important;
+            padding: 2px !important;
+
+            span {
+                font-size: 12px !important;
+                margin-bottom: 2px !important;
+            }
+        }
+    }
+
+    .item:nth-child(2n) {
+        .item-left {
+            transform: translateX(0) !important;
+        }
+
+        .item-right {
+            transform: translateX(0) !important;
+        }
+    }
+
+    .sinks {
+        img {
             width: 100%;
         }
     }
-    h1{
+
+    h1 {
         font-size: 14px !important;
     }
-    h2,h3,h4,h5{
+
+    h2,
+    h3,
+    h4,
+    h5 {
         font-size: 12px !important;
     }
+
     // building
-    .flooring-header{
-        .span1{
+    .flooring-header {
+        .span1 {
             font-size: 12px;
             padding: 5px !important;
         }
-        .flooring-footer{
-            .footer-left{
-                h3,h5{
+
+        .flooring-footer {
+            .footer-left {
+
+                h3,
+                h5 {
                     margin: 2px !important;
                 }
-                .footer-product{
-                    .product-item{
+
+                .footer-product {
+                    .product-item {
                         border: 1px solid #ffffff !important;
                         margin-bottom: 8px !important;
-                        span{
+
+                        span {
                             display: none;
                         }
                     }
                 }
             }
-            .footer-right{
-                .icons-list{
-                    .icons-item{
+
+            .footer-right {
+                .icons-list {
+                    .icons-item {
                         width: 24% !important;
                         margin-right: 5px !important;
                     }
@@ -2457,23 +2756,25 @@ onMounted(() => {
             }
         }
     }
-    .flooring-bottom{
-        .bottom-header{
-            .item{
+
+    .flooring-bottom {
+        .bottom-header {
+            .item {
 
                 box-sizing: border-box;
-                .item-left{
 
-                }
+                .item-left {}
             }
         }
     }
+
     .children-allpic {
         justify-content: space-between;
 
         .children-item {
             width: 48% !important;
-            .img-title{
+
+            .img-title {
                 font-size: 12px;
                 padding: 5px !important;
             }
@@ -2515,7 +2816,10 @@ onMounted(() => {
             img {
                 width: 1rem !important;
                 height: 1rem !important;
-                margin-right: 0 !important;
+            }
+
+            span {
+                display: none;
             }
         }
     }