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

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,55 +1,65 @@
-.goodstemplate,.detailstemplate{
+.goodstemplate,
+.detailstemplate {
   height: 653px;
   background: #F2F7F8;
   position: relative;
- overflow-y: auto;
- overflow-x: hidden;
- >.preBtn{
+  // overflow-y: auto;
+  // overflow-x: auto;
+
+  >.preBtn {
     position: absolute;
     width: 28px;
     height: 28px;
     top: 2%;
     z-index: 5;
-   left:4%;
+    left: 4%;
   }
- >.topbanner{
-  width:100%;
+
+  >.topbanner {
+    width: 100%;
     height: 187px;
   }
- >.content-title{
+
+  >.content-title {
     position: relative;
     z-index: 999;
     height: 40px;
     line-height: 40px;
     margin-bottom: 50px;
-   padding:0 13px; 
+    padding: 0 13px;
   }
- >.goodsPic,>.goodsPicMatrax{
-  width:349px;
+
+  >.goodsPic,
+  >.goodsPicMatrax {
+    width: 349px;
     height: 195px;
-  margin-left:13px; 
+    margin-left: 13px;
     position: relative;
     margin-top: -50px;
   }
- >.goodsPicMatrax{
+
+  >.goodsPicMatrax {
     height: auto;
   }
- >.exchageBtn{
+
+  >.exchageBtn {
     display: flex;
     align-items: center;
     justify-content: center;
-  width:349px;
+    width: 349px;
     color: #fff;
     background: #E8EAEC;
     border-radius: 44px;
     height: 44px;
-  margin:30px 0 0 13px; 
-  &.bottomBtn{
+    margin: 30px 0 0 13px;
+
+    &.bottomBtn {
       position: fixed;
-   top:695px;
+      top: 695px;
     }
   }
- .susactive_tip{
+
+  .susactive_tip {
     position: absolute;
     top: 40px;
     right: 0;
@@ -57,31 +67,65 @@
     // height: 70px;s
     cursor: pointer;
   }
- .bottomactiveTip{
+
+  .bottomactiveTip {
     width: 375px;
-   margin:10px 0;
+    margin: 10px 0;
     padding: 24px 20px 60px;
     box-sizing: border-box;
     background: #fff;
     border-radius: 4px;
     box-shadow: 1px 1px 13px 2px #f1f2f3;
     line-height: 1.5rem;
-   p{
+
+    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{
+
+.goodstemplate {
+  .bottomactiveTip {
     width: 350px;
-    margin:12.5px;
-    p{
+    margin: 12.5px;
+
+    p {
       width: 310px;
     }
   }
-  .searchBar{
+
+  .searchBar {
     width: 80%;
-    margin-left:10%;
+    margin-left: 10%;
     margin-top: 2%;
     height: 40px;
     line-height: 40px;
@@ -92,31 +136,37 @@
   }
 }
 
-.detailstemplate{
+.detailstemplate {
   position: relative;
   background: #fff;
   padding-bottom: 20px;
-  .detail_bottomImg{
+
+  .detail_bottomImg {
     width: 100%;
     padding-bottom: 30px;
   }
-  .topBanner{
+
+  .topBanner {
     width: 100%;
     height: 373px;
   }
-  .splitLine{
+
+  .splitLine {
     width: 100%;
     height: 3px;
     background: #f1f2f3;
   }
-  .splitLine:last-of-type{
+
+  .splitLine:last-of-type {
     margin-bottom: 20px;
   }
-  .iptbg{
+
+  .iptbg {
     width: 100%;
   }
-  .exchangeBtn{
-    width:348px;
+
+  .exchangeBtn {
+    width: 348px;
     height: 44px;
     border-radius: 22px;
     display: flex;
@@ -129,9 +179,11 @@
     color: #fff;
   }
 }
-.activeTip{
+
+.activeTip {
   position: relative;
-  .imgTip{
+
+  .imgTip {
     position: absolute;
     top: 50%;
     left: 60px;
@@ -141,23 +193,28 @@
     font-size: 20px;
   }
 }
-.bottomTip{
+
+.bottomTip {
   width: 100%;
   margin-top: 10px;
 }
-.bottomTipview{
+
+.bottomTipview {
   margin-bottom: 30px;
 }
-.desc-goods{
+
+.desc-goods {
   background: #fff;
-  .descript{
+
+  .descript {
     padding: 30px 24px;
     box-sizing: border-box;
     line-height: 1.5rem;
     background: #fff;
-    color: #45464b!important;
+    color: #45464b !important;
   }
-  >p{
+
+  >p {
     width: 100%;
     height: 50px;
     background: #f7f8f9;
@@ -168,8 +225,9 @@
     font-size: 16px;
   }
 }
+
 //商品详情页区分立减金/权益
-.details_type{
+.details_type {
   position: relative;
   top: 55px;
   left: 0;
@@ -178,22 +236,26 @@
   display: flex;
   align-items: center;
   justify-content: center;
+
   .zent-radio-button[data-zv="9.12.7"] {
     width: 100px;
   }
 }
+
 /*商品详情页-立减金*/
-.details-reduce{
+.details-reduce {
   background: #fff;
   position: relative;
-  .reduce-pic{
+
+  .reduce-pic {
     width: 100%;
-    position: absolute!important;
-    left:0;
+    position: absolute !important;
+    left: 0;
     z-index: 1;
   }
 }
+
 //优惠券图片
-.picture{
+.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;
 					}
 					
+
 				}
 			}
 		}