浏览代码

fix: 调整店铺装修页面

周玉环 1 天之前
父节点
当前提交
c9aba78ea6

+ 1 - 1
xinkeaboard-seller/src/components/SldTableRowThree/index.js

@@ -612,7 +612,7 @@ export default class SldTableRowTwo extends PureComponent {
               <span className={styles.sld_det_r_item} style={{
                 width: `${val.rwidth != undefined ? val.rwidth : 80}%`,
                 alignItems: 'flex-start',
-                paddingLeft: 20,
+                paddingLeft: val.paddingLeft ?? 20,
                 height: val.item_height!=undefined?val.item_height+2:cur_height + 2,
                 borderRightWidth: 1,
               }}>

+ 2 - 1
xinkeaboard-seller/src/pages/settledManage/businessInfo/index.js

@@ -79,6 +79,7 @@ export default class BusinessInfo extends Component {
         item_height: 300,
         disabled: getSettleData('state') === 1,
         placeholder: ``,
+        paddingLeft: 0,
         tree_data: [],
         selected_keys:[],//选择的key数组
         select_cat_id: [],
@@ -474,7 +475,7 @@ export default class BusinessInfo extends Component {
                 <Scrollbars
                   autoHeight
                   autoHeightMin={100}
-                  autoHeightMax={document.body.clientHeight - 130}
+                  autoHeightMax={600}
                 >
                   <div className={styles.commen_wrap}>
                     <SldTableRowThree form={this.props.form} data={site.site_base_info} />

+ 1 - 1
xinkeaboard-seller/src/pages/settledManage/businessInfo/index.less

@@ -45,7 +45,7 @@
   .site_item {
     display: flex;
     flex-direction: column;
-    justify-content: center;
+    // justify-content: center;
     align-items: center;
 
     .site_item_title {

+ 1 - 5
xinkeaboard-seller/src/pages/store/pc_diy/adv_04.js

@@ -210,12 +210,8 @@ export default class Adv_04 extends Component {
                 <span>{sldComLanguage('编辑')}</span>
               </div>
               <h2>
-                <font
-                  style={data.title_info.title_color != '' ? { background: data.title_info.title_color } : null}>&nbsp;</font>
                 <span
                   style={data.title_info.title_color != '' ? { color: data.title_info.title_color } : null}>{data.title_info.title_name != '' ? data.title_info.title_name : `${sldComLanguage('请填写标题')}`}</span>
-                <font
-                  style={data.title_info.title_color != '' ? { background: data.title_info.title_color } : null}>&nbsp;</font>
               </h2>
             </div>
             <div className={styles.floor_goods}>
@@ -228,7 +224,7 @@ export default class Adv_04 extends Component {
                 return <div key={item} className={styles.item}>
                   <div className={styles.wrap}>
                     <a className={styles.example_text}>
-                      <span>{sldComLanguage('示例产品')}<br/>【172*170】</span>
+                      <span>{sldComLanguage('示例产品')}<br/>【232*232】</span>
                     </a>
                     <p className={styles.title}>
                       <a href="javascript:;" title={`${sldComLanguage('商品名称')}`}>{sldComLanguage('商品名称')}</a>

+ 12 - 12
xinkeaboard-seller/src/pages/store/pc_diy/adv_12.js

@@ -38,8 +38,8 @@ export default class Adv_12 extends Component {
 			data: {
 				type: 'adv_12',
 				left: {
-					width: 396,
-					height: 450,//高度为0的话表示不限制
+					width: 480,
+					height: 550,//高度为0的话表示不限制
 					data: [{
 						imgUrl: '',
 						imgPath: '',
@@ -50,8 +50,8 @@ export default class Adv_12 extends Component {
 					}],
 				},
 				center: {
-					width: 183,
-					height: 210,//高度为0的话表示不限制
+					width: 220,
+					height: 250,//高度为0的话表示不限制
 					data: [{
 						imgUrl: '',
 						imgPath: '',
@@ -101,8 +101,8 @@ export default class Adv_12 extends Component {
 						info: {},
 					},
 					top: {
-						width: 376,
-						height: 180,//高度为0的话表示不限制
+						width: 450,
+						height: 215,//高度为0的话表示不限制
 						data: [{
 							imgUrl: '',
 							imgPath: '',
@@ -113,8 +113,8 @@ export default class Adv_12 extends Component {
 						}],
 					},
 					bottom: {
-						width: 183,
-						height: 180,//高度为0的话表示不限制
+						width: 220,
+						height: 215,//高度为0的话表示不限制
 						data: [{
 							imgUrl: '',
 							imgPath: '',
@@ -235,7 +235,7 @@ export default class Adv_12 extends Component {
 										   href="javascript:void(0);">
 											{item.imgUrl
 												? <img src={item.imgUrl}/>
-												: <span>{sldComLanguage('此处添加【396*450】图片')}</span>
+												: <span>{sldComLanguage('480*450】图片')}</span>
 											}
 										</a>
 									))}
@@ -251,7 +251,7 @@ export default class Adv_12 extends Component {
 										   href="javascript:void(0);">
 											{item.imgUrl
 												? <img src={item.imgUrl}/>
-												: <span>{sldComLanguage('此处添加【183*210】图片')}</span>
+												: <span>{sldComLanguage('此处添加【220*250】图片')}</span>
 											}
 										</a>
 									))}
@@ -278,7 +278,7 @@ export default class Adv_12 extends Component {
 											<a key={index} href="javascript:void(0);">
 												{item.imgUrl
 													? <img src={item.imgUrl}/>
-													: <span>{sldComLanguage('此处添加【376*180】图片')}</span>
+													: <span>{sldComLanguage('此处添加【450*215】图片')}</span>
 												}
 											</a>
 										))}
@@ -292,7 +292,7 @@ export default class Adv_12 extends Component {
 											<a key={index} href="javascript:void(0);">
 												{item.imgUrl
 													? <img src={item.imgUrl}/>
-													: <span>{sldComLanguage('此处添加【183*180】图片')}</span>
+													: <span>{sldComLanguage('此处添加【220*215】图片')}</span>
 												}
 											</a>
 										))}

+ 16 - 16
xinkeaboard-seller/src/pages/store/pc_diy/adv_13.js

@@ -57,8 +57,8 @@ export default class Adv_13 extends Component {
 						info: {},
 					},
 					top: {
-						width: 376,
-						height: 180,//高度为0的话表示不限制
+						width: 450,
+						height: 215,//高度为0的话表示不限制
 						data: [{
 							imgUrl: '',
 							imgPath: '',
@@ -69,8 +69,8 @@ export default class Adv_13 extends Component {
 						}],
 					},
 					bottom: {
-						width: 183,
-						height: 180,//高度为0的话表示不限制
+						width: 220,
+						height: 215,//高度为0的话表示不限制
 						data: [{
 							imgUrl: '',
 							imgPath: '',
@@ -108,8 +108,8 @@ export default class Adv_13 extends Component {
 						info: {},
 					},
 					top: {
-						width: 376,
-						height: 180,//高度为0的话表示不限制
+						width: 450,
+						height: 215,//高度为0的话表示不限制
 						data: [{
 							imgUrl: '',
 							imgPath: '',
@@ -120,8 +120,8 @@ export default class Adv_13 extends Component {
 						}],
 					},
 					bottom: {
-						width: 183,
-						height: 180,//高度为0的话表示不限制
+						width: 220,
+						height: 215,//高度为0的话表示不限制
 						data: [{
 							imgUrl: '',
 							imgPath: '',
@@ -141,8 +141,8 @@ export default class Adv_13 extends Component {
 
 				},
 				right: {
-					width: 396,
-					height: 450,//高度为0的话表示不限制
+					width: 480,
+					height: 535,//高度为0的话表示不限制
 					data: [{
 						imgUrl: '',
 						imgPath: '',
@@ -264,7 +264,7 @@ export default class Adv_13 extends Component {
 											<a key={index} href="javascript:void(0);">
 												{item.imgUrl
 													? <img src={item.imgUrl}/>
-													: <span>{sldComLanguage('此处添加【376*180】图片')}</span>
+													: <span>{sldComLanguage('此处添加【450*215】图片')}</span>
 												}
 											</a>
 										))}
@@ -278,7 +278,7 @@ export default class Adv_13 extends Component {
 											<a key={index} href="javascript:void(0);">
 												{item.imgUrl
 													? <img src={item.imgUrl}/>
-													: <span>{sldComLanguage('此处添加【183*180】图片')}</span>
+													: <span>{sldComLanguage('此处添加【220*215】图片')}</span>
 												}
 											</a>
 										))}
@@ -304,7 +304,7 @@ export default class Adv_13 extends Component {
 											<a key={index} href="javascript:void(0);">
 												{item.imgUrl
 													? <img src={item.imgUrl}/>
-													: <span>{sldComLanguage('此处添加【376*180】图片')}</span>
+													: <span>{sldComLanguage('此处添加【450*215】图片')}</span>
 												}
 											</a>
 										))}
@@ -318,14 +318,14 @@ export default class Adv_13 extends Component {
 											<a key={index} href="javascript:void(0);">
 												{item.imgUrl
 													? <img src={item.imgUrl}/>
-													: <span>{sldComLanguage('此处添加【183*180】图片')}</span>
+													: <span>{sldComLanguage('此处添加【220*215】图片')}</span>
 												}
 											</a>
 										))}
 									</div>
 								</div>
 								<div className={`${styles.item} ${styles.left} ${styles.clear_padding}`}>
-									<div className={styles.sld_mask}
+									<div className={styles.sld_mask} style={{ width: '480px' }}
 										 onClick={() => this.editTpl('right','', `${sldComLanguage('右侧图片设置')}`)}>
 										<span>{sldComLanguage('编辑')}</span>
 									</div>
@@ -334,7 +334,7 @@ export default class Adv_13 extends Component {
 										   href="javascript:void(0);">
 											{item.imgUrl
 												? <img src={item.imgUrl}/>
-												: <span>{sldComLanguage('此处添加【396*450】图片')}</span>
+												: <span>{sldComLanguage('此处添加【480*535】图片')}</span>
 											}
 										</a>
 									))}

+ 1 - 1
xinkeaboard-seller/src/pages/store/pc_diy/diy_page.less

@@ -13,7 +13,7 @@
 .allow_show_sld_mask {
   div[class=ant-carousel]{
     div[class=slick-list]{
-      max-height: 457px;
+      height: 520px;
     }
   }
   .sld_web_item_hover {

+ 1 - 1
xinkeaboard-seller/src/pages/store/pc_diy/edit_diy_page.js

@@ -653,7 +653,7 @@ export default class Edit_diy_page extends Component {
         <div ref={'wrap_top'} className={global.flex_com_column}>
           <EditDdiyPageHead/>
         </div>
-        <div style={{ position: 'relative', width: '100%', height: 457, background: '#fff' }}
+        <div style={{ position: 'relative', width: '100%', height: 520, background: '#fff' }}
              className={`${styles.allow_show_edit}`}>
           <div style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, zIndex: 4 }}>
             <MainBanner tpl_info={main_swiper_data.data} save_tpl_data={this.save_main_banner_data}/>

+ 15 - 6
xinkeaboard-seller/src/pages/store/pc_diy/edit_diy_page_head.less

@@ -186,14 +186,16 @@
     }
 
     .left {
+      height: 100%;
+      display: flex;
+      align-items: center;
       position: relative;
-      float: left;
       width: 440px;
 
       .sld_img_center {
         display: block;
         width: 135px;
-        height: 98px;
+        height: 100%;
         position: relative;
 
         img {
@@ -215,14 +217,17 @@
         width: 1px;
         height: 44px;
         background-color: #EBEBEB;
-        margin: 32px 18px 0 18px;
+        margin: 0 18px;
       }
 
       .sld_store_rate {
+        // height: 100%;
+        // display: flex;
+        // justify-content: center;
+        // align-items: center;
         position: relative;
-        margin-top: 38px;
+        // margin-top: 38px;
         cursor: pointer;
-        padding-bottom: 23px;
 
         &:hover {
           .sld_store_info_more {
@@ -377,11 +382,15 @@
       width: 100%;
 
       form {
+        display: flex;
+        justify-content: center;
+        align-items: center;
         width: 536px;
         border: 2px solid @theme-color;
 
         .text {
-          width: 334px;
+          flex: 1;
+          width: 100%;
           -webkit-appearance: none;
           -webkit-border-radius: 0;
           height: 34px;

+ 80 - 60
xinkeaboard-seller/src/pages/store/pc_diy/pcdecorate.less

@@ -1,4 +1,5 @@
 @import '~antd/lib/style/themes/default.less';
+@import '../../../themeColor.less';
 
 /* 装修页面样式-start */
 div, p, ul {
@@ -50,7 +51,7 @@ a {
 }
 
 .main_banner_item_wrap{
-  height: 457px;
+  height: 520px;
 }
 
 .flash_wrap {
@@ -132,8 +133,8 @@ a {
 }
 
 .adv_01_img {
-  max-width: 100%;
-  max-height: 100%;
+  width: 100%;
+  height: 100%;
 }
 
 .modal_tip_color {
@@ -428,6 +429,7 @@ a {
 
 .adv_04_wrap {
   height: auto;
+  width: 1440px;
   min-height: 374px;
 }
 
@@ -442,19 +444,19 @@ a {
 .adv_04_wrap .floor_title h2 {
   width: 100%;
   line-height: 35px;
-  text-align: center;
   margin: 0 auto;
   font-size: 28px;
   color: #333;
   height: 35px;
   padding-left: 10px;
+  text-align: left;
 }
 
 .adv_04_wrap .floor_title h2 font {
   display: inline-block;
   width: 80px;
   height: 1px;
-  background: red;
+  background: @theme-color;
   position: relative;
   top: 20px;
 }
@@ -462,7 +464,7 @@ a {
 .adv_04_wrap .floor_title h2 span {
   font-size: 24px;
   margin: 0 20px;
-  color: red;
+  color: @theme-color;
   width: auto;
   min-width: 30px;
   height: 35px;
@@ -481,34 +483,39 @@ a {
 
 .adv_04_wrap .floor_goods .item {
   float: left;
-  width: 234px;
-  height: 310px;
-  margin: 0 10px 10px 0;
-  padding: 24px 31px 26px 31px;
+  width: 286px;
+  height: 326px;
   background-color: #FFF;
 }
 
-.adv_04_wrap .floor_goods .item:nth-child(5n+5) {
-  margin-right: 0 !important;
+.adv_04_wrap .floor_goods .item {
+  border: 1px solid #f2f2f2;
+  border-right: none;
+}
+
+.adv_04_wrap .floor_goods .item:last-child{
+  border-right: 1px solid #f2f2f2;
 }
 
 .adv_04_wrap .floor_goods .item .wrap {
-  width: 172px;
-  text-align: center;
-  margin: 0 auto;
-  font-size: 14px;
-  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
 }
 
 .adv_04_wrap .floor_goods .item .wrap img {
-  width: 170px;
-  height: 170px;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
   display: block;
 }
 
 .adv_04_wrap .floor_goods .item .wrap .example_text {
-  width: 170px;
-  height: 170px;
+  width: 232px;
+  height: 232px;
   display: block;
   color: #777;
   text-align: center;
@@ -528,10 +535,13 @@ a {
 }
 
 .adv_04_wrap .floor_goods .item .wrap .title {
-  margin: 26px 0 18px 0;
-  max-height: 38px;
+  margin: 20px 0 5px 0;
   height: 38px;
+  font-weight: bold;
+  font-size: 16px;
+  color: #282E30;
   overflow: hidden;
+  text-align: center;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 2;
@@ -539,7 +549,8 @@ a {
   -webkit-box-orient: vertical;
   word-wrap: break-word;
   word-break: normal;
-  display: inline-block;
+  width: 100%;
+  padding: 0 20px;
 }
 
 .adv_04_wrap .floor_goods .item .wrap .title a {
@@ -1489,19 +1500,20 @@ a {
 
 .adv_12 .adv_12_wrap .item {
   float: left;
-  width: 396px;
+  width: 470px;
   background-color: #FFFFFF;
-  height: 450px;
+  height: 535px;
   padding: 10px;
   position: relative;
 }
 
 .adv_12 .adv_12_wrap .item:first-child {
   margin-right: 10px;
+  width: 480px;
 }
 
 .adv_12 .adv_12_wrap .item:last-child {
-  margin-left: 10px;
+  margin-left: 5px;
 }
 
 .adv_12 .adv_12_wrap .item.clear_padding {
@@ -1509,8 +1521,8 @@ a {
 }
 
 .adv_12 .adv_12_wrap .item .l_img {
-  width: 396px;
-  height: 450px;
+  width: 480px;
+  height: 535px;
   display: block;
   overflow: hidden;
   position: relative;
@@ -1550,8 +1562,9 @@ a {
 }
 
 .adv_12 .adv_12_wrap .item a img {
-  max-width: 100%;
-  max-height: 100%;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
 }
 
 .adv_12 .adv_12_wrap .item a span {
@@ -1567,8 +1580,8 @@ a {
 
 .adv_12 .adv_12_wrap .item.center a {
   float: left;
-  width: 183px;
-  height: 210px;
+  width: 220px;
+  height: 250px;
   margin-bottom: 10px;
   display: block;
 }
@@ -1595,8 +1608,8 @@ a {
 }
 
 .adv_12 .adv_12_wrap .item.right .title_wrap{
-  height: 50px;
-  line-height: 50px;
+  height: 60px;
+  line-height: 60px;
   position: relative;
 }
 .adv_12 .adv_12_wrap .item.right .title_wrap .title{
@@ -1615,20 +1628,20 @@ a {
 }
 
 .adv_12 .adv_12_wrap .item.right .img_top{
-  width: 376px;
-  height: 180px;
+  width: 450px;
+  height: 215px;
   margin: 10px 0px;
   position: relative;
 }
 .adv_12 .adv_12_wrap .item.right .img_bottom{
   position: relative;
-  width: 376px;
-  height: 180px;
+  width: 450px;
+  height: 220px;
 }
 .adv_12 .adv_12_wrap .item.right .img_bottom a {
   float: left;
-  width: 183px;
-  height: 180px;
+  width: 220px;
+  height: 215px;
   position: relative;
   text-align: center;
 }
@@ -1638,7 +1651,13 @@ a {
 /* adv_12-end */
 
 /* adv_13-start */
+.adv_13 {
+  width: 1440px;
+  height: 535px;
+  margin: 0 auto;
+}
 .adv_13 .adv_13_wrap {
+  height: 100%;
   width: 100%;
   position: relative;
   clear: both;
@@ -1647,10 +1666,10 @@ a {
 
 .adv_13 .adv_13_wrap .item {
   float: left;
-  width: 396px;
+  width: 470px;
   background-color: #FFFFFF;
-  height: 450px;
-  padding: 10px;
+  height: 100%;
+  // padding: 10px;
   position: relative;
 }
 
@@ -1659,7 +1678,7 @@ a {
 }
 
 .adv_13 .adv_13_wrap .item:last-child {
-  margin-left: 10px;
+  margin-left: 5px;
 }
 
 .adv_13 .adv_13_wrap .item.clear_padding {
@@ -1667,8 +1686,8 @@ a {
 }
 
 .adv_13 .adv_13_wrap .item .l_img {
-  width: 396px;
-  height: 450px;
+  width: 480px;
+  height: 535px;
   display: block;
   overflow: hidden;
   position: relative;
@@ -1708,8 +1727,9 @@ a {
 }
 
 .adv_13 .adv_13_wrap .item a img {
-  max-width: 100%;
-  max-height: 100%;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
 }
 
 .adv_13 .adv_13_wrap .item a span {
@@ -1725,8 +1745,8 @@ a {
 
 .adv_13 .adv_13_wrap .item.center a {
   float: left;
-  width: 183px;
-  height: 210px;
+  width: 220px;
+  height: 215px;
   margin-bottom: 10px;
   display: block;
 }
@@ -1753,8 +1773,8 @@ a {
 }
 
 .adv_13 .adv_13_wrap .item.right .title_wrap{
-  height: 50px;
-  line-height: 50px;
+  height: 60px;
+  line-height: 60px;
   position: relative;
 }
 .adv_13 .adv_13_wrap .item.right .title_wrap .title{
@@ -1773,20 +1793,20 @@ a {
 }
 
 .adv_13 .adv_13_wrap .item.right .img_top{
-  width: 376px;
-  height: 180px;
-  margin: 10px 0px;
+  width: 450px;
+  height: 215px;
+  margin: 20px 0px;
   position: relative;
 }
 .adv_13 .adv_13_wrap .item.right .img_bottom{
   position: relative;
-  width: 376px;
-  height: 180px;
+  width: 460px;
+  height: 215px;
 }
 .adv_13 .adv_13_wrap .item.right .img_bottom a {
   float: left;
-  width: 183px;
-  height: 180px;
+  width: 220px;
+  height: 215px;
   position: relative;
   text-align: center;
 }