fix: 调整店铺装修页面

xinkeaboard-seller/src/pages/store/pc_diy/pcdecorate.less

@@ -154,8 +154,8 @@ a {
 }
 
 .adv_02_part {
-  width: 1210px;
-  height: 344px;
+  width: 1440px;
+  height: 540px;
   background: #fff;
   display: flex;
   flex-direction: row;
@@ -164,9 +164,11 @@ a {
 }
 
 .adv_02_part .adv_02_left {
-  width: 210px;
-  height: 344px;
+  width: 250px;
+  height: 100%;
   background-image: url('@/assets/pc_diy_img/adv_floor_02_left.png');
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
   position: relative;
   cursor: pointer;
   display: flex;
@@ -176,14 +178,17 @@ a {
 }
 
 .adv_02_part .adv_02_left img {
-  max-width: 100%;
-  max-height: 100%;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
 }
 
 .adv_02_part .adv_02_center {
-  width: 736px;
-  height: 344px;
+  width: 890px;
+  height: 100%;
   background-image: url('@/assets/pc_diy_img/adv_floor_02_goods.png');
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
   position: relative;
   word-break: break-all;
   overflow: hidden;
@@ -192,10 +197,10 @@ a {
 
 .adv_02_part .adv_02_center .split_h {
   position: absolute;
-  width: 736px;
+  width: 100%;
   height: 1px;
   background-color: #F0F2F3;
-  top: 172px;
+  top: 270px;
   left: 0;
   z-index: 2;
 }
@@ -203,22 +208,24 @@ a {
 .adv_02_part .adv_02_center .split_v {
   position: absolute;
   width: 1px;
-  height: 344px;
+  height: 100%;
   background-color: #F0F2F3;
-  left: 368px;
+  left: 445px;
   top: 0;
   z-index: 2;
 }
 
 .adv_02_part .adv_02_right {
-  width: 253px;
-  height: 344px;
+  width: 300px;
+  height: 100%;
   display: flex;
   flex-direction: column;
-  justify-content: center;
-  align-items: flex-start;
+  justify-content: space-around;
+  align-items: center;
   position: relative;
   background-image: url('@/assets/pc_diy_img/adv_floor_02_right.png');
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
 
 }
 
@@ -268,18 +275,19 @@ a {
 }
 
 .adv_02_right .right_img_item {
-  width: 242px;
-  height: 108px;
+  width: 250px;
+  height: 150px;
   display: flex;
   flex-direction: row;
-  justify-content: center;
+  justify-content: space-around;
   align-items: center;
   margin-top: 6px;
 }
 
 .adv_02_right .right_img_item img {
-  max-width: 100%;
-  max-height: 100%;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
 }
 
 .modal_goods_wrap {
@@ -330,12 +338,14 @@ a {
 }
 
 .adv_02_center .goods_item {
-  width: 363px;
-  height: 171px;
-  padding: 6px;
+  // display: flex;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  width: 445px;
+  height: 270px;
   background: #fff;
   cursor: pointer;
-  display: inline-block;
 }
 
 .clearfix {
@@ -345,17 +355,18 @@ a {
 
 .adv_02_center .goods_item .left {
   float: left;
-  width: 160px;
-  height: 160px;
+  width: 192px;
+  height: 192px;
   display: table-cell;
   vertical-align: middle;
   text-align: center;
+  margin-right: 10px;
 }
 
 .adv_02_center .goods_item .left img {
-  max-width: 140px;
-  max-height: 140px;
-  margin-top: 10px;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
 }
 
 .adv_02_center .goods_item .right {
@@ -373,6 +384,10 @@ a {
   margin-bottom: 0;
   margin-top: 13px;
   word-break: break-all;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  /*! autoprefixer: off */
+  -webkit-box-orient: vertical;
 }
 
 .adv_02_center .goods_item .right .buy_num {

xinkeaboard-web/assets/style/decorate.scss

@@ -79,7 +79,7 @@
 
 .adv_02_part {
   width: 1440px;
-  height: 344px;
+  height: 540px !important;
   background: #fff;
   margin: 0 auto;
   /*display: flex;
@@ -89,8 +89,8 @@
 }
 
 .adv_02_part .adv_02_left {
-  width: 215px;
-  height: 344px;
+  width: 250px;
+  height: 100%;
   position: relative;
   cursor: pointer;
   float: left;
@@ -107,23 +107,24 @@
 }
 
 .adv_02_part .adv_02_left img {
-  max-width: 100%;
-  max-height: 100%;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
 }
 
 .adv_02_part .adv_02_center {
   float: left;
-  width: 736px;
-  height: 344px;
+  width: 890px;
+  height: 100%;
   position: relative;
 }
 
 .adv_02_part .adv_02_center .split_h {
   position: absolute;
-  width: 736px;
+  width: 100%;
   height: 1px;
   background-color: rgba(0, 0, 0, 0.05);
-  top: 172px;
+  top: 270px;
   left: 0;
   z-index: 2;
 }
@@ -131,18 +132,22 @@
 .adv_02_part .adv_02_center .split_v {
   position: absolute;
   width: 1px;
-  height: 344px;
+  height: 100%;
   background-color: rgba(0, 0, 0, 0.05);
-  left: 368px;
+  left: 445px;
   top: 0;
   z-index: 2;
 }
 
 .adv_02_part .adv_02_right {
-  width: 253px;
-  height: 344px;
+  width: 300px;
+  height: 100%;
   float: left;
-  margin-left: 5px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  align-items: center;
+  // margin-left: 5px;
   position: relative;
 }
 
@@ -189,13 +194,11 @@
 }
 
 .adv_02_right .right_img_item {
-  position: relative;
-  width: 253px;
-  height: 108px;
-  float: left;
+  width: 250px;
+  height: 150px;
   display: flex;
   flex-direction: row;
-  justify-content: center;
+  justify-content: space-around;
   align-items: center;
   margin-top: 6px;
 }
@@ -211,8 +214,9 @@
 }
 
 .adv_02_right .right_img_item img {
-  max-width: 100%;
-  max-height: 100%;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
 }
 
 .modal_goods_wrap {
@@ -262,13 +266,13 @@
 }
 
 .adv_02_center .goods_item {
-  width: 363px;
-  height: 171px;
-  padding: 6px;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  width: 445px;
+  height: 270px;
   background: #fff;
   cursor: pointer;
-  display: inline-block;
-  box-sizing: border-box;
 }
 .adv_02_center .goods_item:hover .right .goods_name{
   color:$colorMain
@@ -283,13 +287,12 @@
 
 .adv_02_center .goods_item .left {
   float: left;
-  width: 160px;
-  height: 160px;
+  width: 192px;
+  height: 192px;
   display: table-cell;
   vertical-align: middle;
   text-align: center;
-  background: #fff;
-  padding-top: 0;
+  margin-right: 10px;
   transition: transform 0.5s;
 }
 
@@ -1636,11 +1639,16 @@
 }
 
 .adv_12 .adv_12_wrap .item {
+  // margin-right: 10px;
+}
+
+.adv_12 .adv_12_wrap .item:first-child {
+  width: 480px;
   margin-right: 10px;
 }
 
 .adv_12 .adv_12_wrap .item:last-child {
-  // margin-left: 10px;
+  margin-left: 10px;
   margin-right: 0;
 }
 
@@ -1850,7 +1858,7 @@
 }
 
 .adv_13 .adv_13_wrap .item:last-child {
-  // margin-left: 10px;
+  margin-left: 10px;
   margin-right: 0;
   width: 480px;
 }

xinkeaboard-web/components/SldDiy.vue

@@ -44,8 +44,8 @@
         }"
         :style="{
           height: item.json_data.data.height + 'px',
-          paddingTop: item.json_data.padding_top + 'px',
-          paddingBottom: item.json_data.padding_bottom + 'px',
+          marginTop: item.json_data.padding_top + 'px',
+          marginBottom: item.json_data.padding_bottom + 'px',
           backgroundColor: item.json_data.bg_color,
         }"
       >
@@ -65,8 +65,8 @@
             (item.json_data.padding_bottom ? item.json_data.padding_bottom : 0) +
             344 +
             'px',
-          paddingTop: item.json_data.padding_top + 'px',
-          paddingBottom: item.json_data.padding_bottom + 'px',
+          marginTop: item.json_data.padding_top + 'px',
+          marginBottom: item.json_data.padding_bottom + 'px',
           backgroundColor: item.json_data.bg_color,
         }"
       >
@@ -126,8 +126,8 @@
         class="w_sld_react_1210 adv_04_wrap"
         v-if="item.json_data && item.json_data.type == 'adv_04'"
         :style="{
-          paddingTop: item.json_data.padding_top + 'px',
-          paddingBottom: item.json_data.padding_bottom + 'px',
+          marginTop: item.json_data.padding_top + 'px',
+          marginBottom: item.json_data.padding_bottom + 'px',
           backgroundColor: item.json_data.bg_color,
         }"
       >
@@ -182,8 +182,8 @@
         class="w_sld_react_1210 adv_05_wrap"
         v-if="item.json_data && item.json_data.type == 'adv_05'"
         :style="{
-          paddingTop: item.json_data.padding_top + 'px',
-          paddingBottom: item.json_data.padding_bottom + 'px',
+          marginTop: item.json_data.padding_top + 'px',
+          marginBottom: item.json_data.padding_bottom + 'px',
           backgroundColor: item.json_data.bg_color,
         }"
       >
@@ -406,8 +406,8 @@
         v-if="item.json_data && item.json_data.type == 'adv_06'"
         class="adv_06 com_1210_center"
         :style="{
-          paddingTop: item.json_data.padding_top + 'px',
-          paddingBottom: item.json_data.padding_bottom + 'px',
+          marginTop: item.json_data.padding_top + 'px',
+          marginBottom: item.json_data.padding_bottom + 'px',
           backgroundColor: item.json_data.bg_color,
         }"
       >
@@ -430,8 +430,8 @@
         class="w_sld_react_1210 adv_07"
         v-if="item.json_data && item.json_data.type == 'adv_07'"
         :style="{
-          paddingTop: item.json_data.padding_top + 'px',
-          paddingBottom: item.json_data.padding_bottom + 'px',
+          marginTop: item.json_data.padding_top + 'px',
+          marginBottom: item.json_data.padding_bottom + 'px',
           backgroundColor: item.json_data.bg_color,
         }"
       >
@@ -461,8 +461,8 @@
         class="w_sld_react_1210 adv_08 com_1210_center"
         v-if="item.json_data && item.json_data.type == 'adv_08'"
         :style="{
-          paddingTop: item.json_data.padding_top + 'px',
-          paddingBottom: item.json_data.padding_bottom + 'px',
+          marginTop: item.json_data.padding_top + 'px',
+          marginBottom: item.json_data.padding_bottom + 'px',
           backgroundColor: item.json_data.bg_color,
         }"
       >
@@ -486,8 +486,8 @@
         class="adv_09 com_1210_center"
         v-if="item.json_data && item.json_data.type == 'adv_09'"
         :style="{
-          paddingTop: item.json_data.padding_top + 'px',
-          paddingBottom: item.json_data.padding_bottom + 'px',
+          marginTop: item.json_data.padding_top + 'px',
+          marginBottom: item.json_data.padding_bottom + 'px',
           backgroundColor: item.json_data.bg_color,
         }"
       >
@@ -568,8 +568,8 @@
         class="adv_10 com_1210_center"
         v-if="item.json_data && item.json_data.type == 'adv_10'"
         :style="{
-          paddingTop: item.json_data.padding_top + 'px',
-          paddingBottom: item.json_data.padding_bottom + 'px',
+          marginTop: item.json_data.padding_top + 'px',
+          marginBottom: item.json_data.padding_bottom + 'px',
           backgroundColor: item.json_data.bg_color,
         }"
       >
@@ -612,8 +612,8 @@
         class="adv_11 com_1210_center"
         v-if="item.json_data && item.json_data.type == 'adv_11'"
         :style="{
-          paddingTop: item.json_data.padding_top + 'px',
-          paddingBottom: item.json_data.padding_bottom + 'px',
+          marginTop: item.json_data.padding_top + 'px',
+          marginBottom: item.json_data.padding_bottom + 'px',
           backgroundColor: item.json_data.bg_color,
         }"
       >
@@ -658,8 +658,8 @@
         class="adv_12 com_1210_center"
         v-if="item.json_data && item.json_data.type == 'adv_12'"
         :style="{
-          paddingTop: item.json_data.padding_top + 'px',
-          paddingBottom: item.json_data.padding_bottom + 'px',
+          marginTop: item.json_data.padding_top + 'px',
+          marginBottom: item.json_data.padding_bottom + 'px',
           backgroundColor: item.json_data.bg_color,
         }"
       >
@@ -723,8 +723,8 @@
         class="w_sld_react_1210 adv_13 com_1210_center"
         v-if="item.json_data && item.json_data.type == 'adv_13'"
         :style="{
-          paddingTop: item.json_data.padding_top + 'px',
-          paddingBottom: item.json_data.padding_bottom + 'px',
+          marginTop: item.json_data.padding_top + 'px',
+          marginBottom: item.json_data.padding_bottom + 'px',
           backgroundColor: item.json_data.bg_color,
         }"
       >
@@ -811,8 +811,8 @@
         class="w_sld_react_1210 adv_19"
         v-if="item.json_data && item.json_data.type == 'adv_19'"
         :style="{
-          paddingTop: item.json_data.padding_top + 'px',
-          paddingBottom: item.json_data.padding_bottom + 'px',
+          marginTop: item.json_data.padding_top + 'px',
+          marginBottom: item.json_data.padding_bottom + 'px',
           backgroundColor: item.json_data.bg_color,
         }"
       >
@@ -913,8 +913,8 @@
         class="w_sld_react_1210 adv_20"
         v-if="item.json_data && item.json_data.type == 'adv_20'"
         :style="{
-          paddingTop: item.json_data.padding_top + 'px',
-          paddingBottom: item.json_data.padding_bottom + 'px',
+          marginTop: item.json_data.padding_top + 'px',
+          marginBottom: item.json_data.padding_bottom + 'px',
           backgroundColor: item.json_data.bg_color,
         }"
       >
@@ -953,8 +953,8 @@
         class="w_sld_react_1210 adv_21"
         v-if="item.json_data && item.json_data.type == 'adv_21'"
         :style="{
-          paddingTop: item.json_data.padding_top + 'px',
-          paddingBottom: item.json_data.padding_bottom + 'px',
+          marginTop: item.json_data.padding_top + 'px',
+          marginBottom: item.json_data.padding_bottom + 'px',
           backgroundColor: item.json_data.bg_color,
         }"
       >
@@ -1002,8 +1002,8 @@
               class="w_sld_react_1210 adv_27_wrap"
               v-if="item.json_data && item.json_data.type == 'adv_27'"
               :style="{
-          paddingTop: item.json_data.padding_top + 'px',
-          paddingBottom: item.json_data.padding_bottom + 'px',
+          marginTop: item.json_data.padding_top + 'px',
+          marginBottom: item.json_data.padding_bottom + 'px',
           backgroundColor: item.json_data.bg_color,
         }"
       >
@@ -1052,8 +1052,8 @@
               class="w_sld_react_1210 adv_28_wrap"
               v-if="item.json_data && item.json_data.type == 'adv_28'"
               :style="{
-          paddingTop: item.json_data.padding_top + 'px',
-          paddingBottom: item.json_data.padding_bottom + 'px',
+          marginTop: item.json_data.padding_top + 'px',
+          marginBottom: item.json_data.padding_bottom + 'px',
           backgroundColor: item.json_data.bg_color,
         }"
       >
@@ -1110,8 +1110,8 @@
           class="w_sld_react_1210 adv_29_wrap"
           v-if="item.json_data && item.json_data.type == 'adv_29'"
           :style="{
-          paddingTop: item.json_data.padding_top + 'px',
-          paddingBottom: item.json_data.padding_bottom + 'px',
+          marginTop: item.json_data.padding_top + 'px',
+          marginBottom: item.json_data.padding_bottom + 'px',
           backgroundColor: item.json_data.bg_color,
         }"
       >