落地页编辑器删除组件样式编写
This commit is contained in:
许红梅
parent
ac73e2954d
commit
6fe7499eb0
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,87 +1,131 @@
|
|||
.goodstemplate,.detailstemplate{
|
||||
.goodstemplate,
|
||||
.detailstemplate {
|
||||
height: 653px;
|
||||
background: #F2F7F8;
|
||||
position: relative;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
>.preBtn{
|
||||
position: absolute;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
top: 2%;
|
||||
z-index: 5;
|
||||
left:4%;
|
||||
}
|
||||
>.topbanner{
|
||||
width:100%;
|
||||
height: 187px;
|
||||
}
|
||||
>.content-title{
|
||||
position: relative;
|
||||
z-index: 999;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
margin-bottom: 50px;
|
||||
padding:0 13px;
|
||||
}
|
||||
>.goodsPic,>.goodsPicMatrax{
|
||||
width:349px;
|
||||
height: 195px;
|
||||
margin-left:13px;
|
||||
background: #F2F7F8;
|
||||
position: relative;
|
||||
margin-top: -50px;
|
||||
}
|
||||
>.goodsPicMatrax{
|
||||
height: auto;
|
||||
}
|
||||
>.exchageBtn{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width:349px;
|
||||
color: #fff;
|
||||
background: #E8EAEC;
|
||||
border-radius: 44px;
|
||||
height: 44px;
|
||||
margin:30px 0 0 13px;
|
||||
&.bottomBtn{
|
||||
position: fixed;
|
||||
top:695px;
|
||||
// overflow-y: auto;
|
||||
// overflow-x: auto;
|
||||
|
||||
>.preBtn {
|
||||
position: absolute;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
top: 2%;
|
||||
z-index: 5;
|
||||
left: 4%;
|
||||
}
|
||||
|
||||
>.topbanner {
|
||||
width: 100%;
|
||||
height: 187px;
|
||||
}
|
||||
|
||||
>.content-title {
|
||||
position: relative;
|
||||
z-index: 999;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
margin-bottom: 50px;
|
||||
padding: 0 13px;
|
||||
}
|
||||
|
||||
>.goodsPic,
|
||||
>.goodsPicMatrax {
|
||||
width: 349px;
|
||||
height: 195px;
|
||||
margin-left: 13px;
|
||||
position: relative;
|
||||
margin-top: -50px;
|
||||
}
|
||||
|
||||
>.goodsPicMatrax {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
>.exchageBtn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 349px;
|
||||
color: #fff;
|
||||
background: #E8EAEC;
|
||||
border-radius: 44px;
|
||||
height: 44px;
|
||||
margin: 30px 0 0 13px;
|
||||
|
||||
&.bottomBtn {
|
||||
position: fixed;
|
||||
top: 695px;
|
||||
}
|
||||
}
|
||||
|
||||
.susactive_tip {
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
right: 0;
|
||||
width: 30px;
|
||||
// height: 70px;s
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.bottomactiveTip {
|
||||
width: 375px;
|
||||
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 {
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
.susactive_tip{
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
right: 0;
|
||||
width: 30px;
|
||||
// height: 70px;s
|
||||
cursor: pointer;
|
||||
}
|
||||
.bottomactiveTip{
|
||||
width: 375px;
|
||||
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{
|
||||
width: 335px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.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,32 +225,37 @@
|
|||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
//商品详情页区分立减金/权益
|
||||
.details_type{
|
||||
.details_type {
|
||||
position: relative;
|
||||
top: 55px;
|
||||
left: 0;
|
||||
width: 375px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.zent-radio-button[data-zv="9.12.7"] {
|
||||
width: 100px;
|
||||
}
|
||||
width: 375px;
|
||||
margin: 0 auto;
|
||||
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%;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
||||
|
|
@ -699,6 +698,7 @@
|
|||
.bottomBar-view>li>span{
|
||||
font-size: 6px;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue