落地页编辑器删除组件样式编写

src/pages/exchangepage/edittemplate/goodstemplate.js

@@ -44,6 +44,11 @@ export default class edittemplate extends React.Component {
           goodsConfig.bottomBar? <BottomBarView bottomBarConfig={goodsConfig.bottomBar}/>:null
          
         }
+        <div className="delete-component">
+         <span>搜索</span>
+         <b className="split">|</b>
+         <i className="marketing marketing-fuwenbenkuang"></i>
+        </div>
       </div>
     )
   }

src/pages/exchangepage/edittemplate/goodstemplate.less

@@ -1,9 +1,11 @@
-.goodstemplate,.detailstemplate{
+.goodstemplate,
+.detailstemplate {
   height: 653px;
   background: #F2F7F8;
   position: relative;
- overflow-y: auto;
+  // overflow-y: auto;
- overflow-x: hidden;
+  // overflow-x: auto;
+
   >.preBtn {
     position: absolute;
     width: 28px;
@@ -12,10 +14,12 @@
     z-index: 5;
     left: 4%;
   }
+
   >.topbanner {
     width: 100%;
     height: 187px;
   }
+
   >.content-title {
     position: relative;
     z-index: 999;
@@ -24,16 +28,20 @@
     margin-bottom: 50px;
     padding: 0 13px;
   }
- >.goodsPic,>.goodsPicMatrax{
+
+  >.goodsPic,
+  >.goodsPicMatrax {
     width: 349px;
     height: 195px;
     margin-left: 13px;
     position: relative;
     margin-top: -50px;
   }
+
   >.goodsPicMatrax {
     height: auto;
   }
+
   >.exchageBtn {
     display: flex;
     align-items: center;
@@ -44,11 +52,13 @@
     border-radius: 44px;
     height: 44px;
     margin: 30px 0 0 13px;
+
     &.bottomBtn {
       position: fixed;
       top: 695px;
     }
   }
+
   .susactive_tip {
     position: absolute;
     top: 40px;
@@ -57,6 +67,7 @@
     // height: 70px;s
     cursor: pointer;
   }
+
   .bottomactiveTip {
     width: 375px;
     margin: 10px 0;
@@ -66,19 +77,52 @@
     border-radius: 4px;
     box-shadow: 1px 1px 13px 2px #f1f2f3;
     line-height: 1.5rem;
+
     p {
       width: 335px;
     }
   }
+
+  .delete-component {
+    display: flex;
+    position: absolute;
+    top: 193.2px;
+    right: -5px;
+    -ms-flex-align: center;
+    align-items: center;
+    padding: 6px 8px;
+    border-radius: 2px;
+    background: #fff;
+    font-size: 14px;
+    -webkit-transform: translate3d(100%, 64px, 0);
+    transform: translate3d(100%, 64px, 0);
+    &:before{
+      position: absolute;
+      left: 0;
+      top: 50%;
+      border-width: 5px 6px 5px 0;
+      border-style: solid;
+      border-color: transparent #fff transparent transparent;
+      content: "";
+      -webkit-transform: translate3d(-100%,-50%,0);
+      transform: translate3d(-100%,-50%,0);
     }
+    .split{
+      padding: 0 5px;
+    }
+  }
+}
+
 .goodstemplate {
   .bottomactiveTip {
     width: 350px;
     margin: 12.5px;
+
     p {
       width: 310px;
     }
   }
+
   .searchBar {
     width: 80%;
     margin-left: 10%;
@@ -96,25 +140,31 @@
   position: relative;
   background: #fff;
   padding-bottom: 20px;
+
   .detail_bottomImg {
     width: 100%;
     padding-bottom: 30px;
   }
+
   .topBanner {
     width: 100%;
     height: 373px;
   }
+
   .splitLine {
     width: 100%;
     height: 3px;
     background: #f1f2f3;
   }
+
   .splitLine:last-of-type {
     margin-bottom: 20px;
   }
+
   .iptbg {
     width: 100%;
   }
+
   .exchangeBtn {
     width: 348px;
     height: 44px;
@@ -129,8 +179,10 @@
     color: #fff;
   }
 }
+
 .activeTip {
   position: relative;
+
   .imgTip {
     position: absolute;
     top: 50%;
@@ -141,15 +193,19 @@
     font-size: 20px;
   }
 }
+
 .bottomTip {
   width: 100%;
   margin-top: 10px;
 }
+
 .bottomTipview {
   margin-bottom: 30px;
 }
+
 .desc-goods {
   background: #fff;
+
   .descript {
     padding: 30px 24px;
     box-sizing: border-box;
@@ -157,6 +213,7 @@
     background: #fff;
     color: #45464b !important;
   }
+
   >p {
     width: 100%;
     height: 50px;
@@ -168,6 +225,7 @@
     font-size: 16px;
   }
 }
+
 //商品详情页区分立减金/权益
 .details_type {
   position: relative;
@@ -178,14 +236,17 @@
   display: flex;
   align-items: center;
   justify-content: center;
+
   .zent-radio-button[data-zv="9.12.7"] {
     width: 100px;
   }
 }
+
 /*商品详情页-立减金*/
 .details-reduce {
   background: #fff;
   position: relative;
+
   .reduce-pic {
     width: 100%;
     position: absolute !important;
@@ -193,6 +254,7 @@
     z-index: 1;
   }
 }
+
 //优惠券图片
 .picture {
   width: 100%;

src/pages/exchangepage/edittemplate/main.less

@@ -14,7 +14,7 @@
 	right: 0;
 }
 .xj-center-small{
-	margin: 0 485px 0 550px;
+	margin: 0 448px 0 490px;
 }
 .perimg {
 	position: absolute;
@@ -43,7 +43,6 @@
 	// height: 400px;
 	width: 375px;
 	margin-bottom: 200px;
-
 }
 
 .editor-main:before {
@@ -479,7 +478,7 @@
 
 #leftComponent {
 	position: fixed;
-	width: 350px;
+	width: 300px;
 	height: 100%;
 	background: #fff;
 
@@ -700,6 +699,7 @@
 						font-size: 6px;
 					}
 					
+
 				}
 			}
 		}