落地页编辑器删除组件样式编写
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
|
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>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,87 +1,131 @@
|
||||||
.goodstemplate,.detailstemplate{
|
.goodstemplate,
|
||||||
|
.detailstemplate {
|
||||||
height: 653px;
|
height: 653px;
|
||||||
background: #F2F7F8;
|
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;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
margin-top: -50px;
|
// overflow-y: auto;
|
||||||
}
|
// overflow-x: auto;
|
||||||
>.goodsPicMatrax{
|
|
||||||
height: auto;
|
>.preBtn {
|
||||||
}
|
position: absolute;
|
||||||
>.exchageBtn{
|
width: 28px;
|
||||||
display: flex;
|
height: 28px;
|
||||||
align-items: center;
|
top: 2%;
|
||||||
justify-content: center;
|
z-index: 5;
|
||||||
width:349px;
|
left: 4%;
|
||||||
color: #fff;
|
}
|
||||||
background: #E8EAEC;
|
|
||||||
border-radius: 44px;
|
>.topbanner {
|
||||||
height: 44px;
|
width: 100%;
|
||||||
margin:30px 0 0 13px;
|
height: 187px;
|
||||||
&.bottomBtn{
|
}
|
||||||
position: fixed;
|
|
||||||
top:695px;
|
>.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;
|
width: 350px;
|
||||||
margin:12.5px;
|
margin: 12.5px;
|
||||||
p{
|
|
||||||
|
p {
|
||||||
width: 310px;
|
width: 310px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.searchBar{
|
|
||||||
|
.searchBar {
|
||||||
width: 80%;
|
width: 80%;
|
||||||
margin-left:10%;
|
margin-left: 10%;
|
||||||
margin-top: 2%;
|
margin-top: 2%;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
line-height: 40px;
|
line-height: 40px;
|
||||||
|
|
@ -92,31 +136,37 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.detailstemplate{
|
.detailstemplate {
|
||||||
position: relative;
|
position: relative;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
padding-bottom: 20px;
|
padding-bottom: 20px;
|
||||||
.detail_bottomImg{
|
|
||||||
|
.detail_bottomImg {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding-bottom: 30px;
|
padding-bottom: 30px;
|
||||||
}
|
}
|
||||||
.topBanner{
|
|
||||||
|
.topBanner {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 373px;
|
height: 373px;
|
||||||
}
|
}
|
||||||
.splitLine{
|
|
||||||
|
.splitLine {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 3px;
|
height: 3px;
|
||||||
background: #f1f2f3;
|
background: #f1f2f3;
|
||||||
}
|
}
|
||||||
.splitLine:last-of-type{
|
|
||||||
|
.splitLine:last-of-type {
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
.iptbg{
|
|
||||||
|
.iptbg {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
.exchangeBtn{
|
|
||||||
width:348px;
|
.exchangeBtn {
|
||||||
|
width: 348px;
|
||||||
height: 44px;
|
height: 44px;
|
||||||
border-radius: 22px;
|
border-radius: 22px;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -129,9 +179,11 @@
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.activeTip{
|
|
||||||
|
.activeTip {
|
||||||
position: relative;
|
position: relative;
|
||||||
.imgTip{
|
|
||||||
|
.imgTip {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
left: 60px;
|
left: 60px;
|
||||||
|
|
@ -141,23 +193,28 @@
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.bottomTip{
|
|
||||||
|
.bottomTip {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
}
|
}
|
||||||
.bottomTipview{
|
|
||||||
|
.bottomTipview {
|
||||||
margin-bottom: 30px;
|
margin-bottom: 30px;
|
||||||
}
|
}
|
||||||
.desc-goods{
|
|
||||||
|
.desc-goods {
|
||||||
background: #fff;
|
background: #fff;
|
||||||
.descript{
|
|
||||||
|
.descript {
|
||||||
padding: 30px 24px;
|
padding: 30px 24px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
line-height: 1.5rem;
|
line-height: 1.5rem;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
color: #45464b!important;
|
color: #45464b !important;
|
||||||
}
|
}
|
||||||
>p{
|
|
||||||
|
>p {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 50px;
|
height: 50px;
|
||||||
background: #f7f8f9;
|
background: #f7f8f9;
|
||||||
|
|
@ -168,32 +225,37 @@
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
//商品详情页区分立减金/权益
|
//商品详情页区分立减金/权益
|
||||||
.details_type{
|
.details_type {
|
||||||
position: relative;
|
position: relative;
|
||||||
top: 55px;
|
top: 55px;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 375px;
|
width: 375px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
.zent-radio-button[data-zv="9.12.7"] {
|
|
||||||
width: 100px;
|
.zent-radio-button[data-zv="9.12.7"] {
|
||||||
}
|
width: 100px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/*商品详情页-立减金*/
|
/*商品详情页-立减金*/
|
||||||
.details-reduce{
|
.details-reduce {
|
||||||
background: #fff;
|
background: #fff;
|
||||||
position: relative;
|
position: relative;
|
||||||
.reduce-pic{
|
|
||||||
|
.reduce-pic {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
position: absolute!important;
|
position: absolute !important;
|
||||||
left:0;
|
left: 0;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
//优惠券图片
|
//优惠券图片
|
||||||
.picture{
|
.picture {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
@ -14,7 +14,7 @@
|
||||||
right: 0;
|
right: 0;
|
||||||
}
|
}
|
||||||
.xj-center-small{
|
.xj-center-small{
|
||||||
margin: 0 485px 0 550px;
|
margin: 0 448px 0 490px;
|
||||||
}
|
}
|
||||||
.perimg {
|
.perimg {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
@ -43,7 +43,6 @@
|
||||||
// height: 400px;
|
// height: 400px;
|
||||||
width: 375px;
|
width: 375px;
|
||||||
margin-bottom: 200px;
|
margin-bottom: 200px;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.editor-main:before {
|
.editor-main:before {
|
||||||
|
|
@ -479,7 +478,7 @@
|
||||||
|
|
||||||
#leftComponent {
|
#leftComponent {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
width: 350px;
|
width: 300px;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
|
|
||||||
|
|
@ -700,6 +699,7 @@
|
||||||
font-size: 6px;
|
font-size: 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue