![]()
@@ -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;
}
}
}