编辑器视图区预览兼容性调整
This commit is contained in:
parent
fcb6b32e45
commit
1451ca3e47
|
@ -201,11 +201,11 @@
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
position: absolute;
|
||||
margin-left: 13.5px;
|
||||
// bottom: 2%;
|
||||
top: 750px;
|
||||
bottom: 2%;
|
||||
color: #fff;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -897,101 +897,6 @@ export default class edittemplate extends React.Component {
|
|||
goodsdata={this.state.product_list}
|
||||
/>
|
||||
</div>
|
||||
{/* <div className='goodsList-item' style={{ background: this.state.product_list.backgroundImg && this.state.product_list.backgroundImg.bgImg ? `url('${this.state.product_list.backgroundImg.bgImg}') center center /cover` : '#F2F7F8' }}>
|
||||
{
|
||||
this.state.product_list.search&&this.state.product_list.search.iswitch ? <SearchBarView searchConfig={this.state.product_list.search} /> : null
|
||||
}
|
||||
<img
|
||||
src={
|
||||
'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/backprepageBtn.png'
|
||||
}
|
||||
className='preBtn'
|
||||
/>
|
||||
{this.state.product_list.top_image ? (
|
||||
<img
|
||||
className='topbanner'
|
||||
src={this.state.product_list.top_image}
|
||||
/>
|
||||
) : (
|
||||
<img
|
||||
className='topbanner'
|
||||
src={
|
||||
'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/goodstop.png'
|
||||
}
|
||||
/>
|
||||
)}
|
||||
{
|
||||
this.state.product_list.picture&&this.state.product_list.picture.iswitch ? <img src={this.state.product_list.picture.img} alt="" className="picture" /> : null
|
||||
}
|
||||
{
|
||||
this.state.product_list.title&&this.state.product_list.title.iswitch ? <div className={this.state.product_list.title.textAlign + ' content-title ' + this.state.product_list.title.fontSize} style={{ color: this.state.product_list.title.fontColor }}>{this.state.product_list.title.text}</div> : null
|
||||
}
|
||||
{
|
||||
this.state.product_list.title&&this.state.product_list.title.iswitch&&this.state.product_list.title.text||this.state.product_list.picture&&this.state.product_list.picture.iswitch&&this.state.product_list.picture.img?<div className="parting-line"></div>:null
|
||||
}
|
||||
{this.state.product_list.list == 2 ? (
|
||||
<img
|
||||
className='goodsPic'
|
||||
src={
|
||||
'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/swiper.png'
|
||||
}
|
||||
/>
|
||||
) : this.state.product_list.list == 3 ? (
|
||||
<img
|
||||
className='goodsPicMatrax'
|
||||
src={
|
||||
'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/matrix.png'
|
||||
}
|
||||
/>
|
||||
) : (
|
||||
<img
|
||||
className='goodsPicMatrax'
|
||||
src={
|
||||
'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/listnew.png'
|
||||
}
|
||||
/>
|
||||
)}
|
||||
{this.state.product_list.list == 2 ? (
|
||||
<button
|
||||
className={
|
||||
(this.state.product_list.describe &&
|
||||
this.state.product_list.describe.bg_image) ||
|
||||
this.state.product_list.describe.type == 3
|
||||
? 'exchageBtn bottom_exchageBtn'
|
||||
: 'exchageBtn'
|
||||
}
|
||||
style={{
|
||||
color: this.state.product_list.font_color,
|
||||
background: this.state.product_list.button_color
|
||||
}}>
|
||||
立即兑换
|
||||
</button>
|
||||
) : null}
|
||||
{this.state.product_list.describe.type == 1 ? (
|
||||
<img
|
||||
className='bottom_Img'
|
||||
src={this.state.product_list.describe.bg_image}
|
||||
alt=''
|
||||
/>
|
||||
) : this.state.product_list.describe.type == 3 ? (
|
||||
<div
|
||||
className='bottom_activeTip'
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: this.state.product_list.describe.content
|
||||
}}></div>
|
||||
) : null}
|
||||
{this.state.product_list.describe.type == 2 ? (
|
||||
<img
|
||||
className='susactive_Tip'
|
||||
src={
|
||||
'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/acticeTextTip.png'
|
||||
}
|
||||
/>
|
||||
) : null}
|
||||
{
|
||||
this.state.product_list.bottomBar&&this.state.product_list.bottomBar.iswitch? <BottomBarView bottomBarConfig={this.state.product_list.bottomBar}/>:null
|
||||
}
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
<div className='item'>
|
||||
|
@ -1003,47 +908,14 @@ export default class edittemplate extends React.Component {
|
|||
? 'activeNav thumbheader'
|
||||
: 'thumbheader'
|
||||
}>
|
||||
<div className='detailstemplatescale' >
|
||||
{
|
||||
this.state.detailType == 1 ? (<div className='detailstemplatescale' >
|
||||
<img
|
||||
src={
|
||||
'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/backprepageBtn.png'
|
||||
}
|
||||
className='preBtn'
|
||||
/>
|
||||
<img
|
||||
className='topBanner'
|
||||
src={
|
||||
'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/detailtop.png'
|
||||
}
|
||||
/>
|
||||
<p className='splitLine'></p>
|
||||
<img
|
||||
className='iptbg'
|
||||
src={
|
||||
'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/detailipt.png'
|
||||
}
|
||||
/>
|
||||
<p className='splitLine'></p>
|
||||
<button
|
||||
className='exchangeBtn'
|
||||
style={{
|
||||
background: this.state.product_detail.button_color,
|
||||
color: this.state.product_detail.font_color
|
||||
}}>
|
||||
立即兑换
|
||||
</button>
|
||||
{this.state.product_detail.describe.type == 2 ? (
|
||||
<img
|
||||
className='susactive_Tip'
|
||||
src={
|
||||
'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/acticeTextTip.png'
|
||||
}
|
||||
/>
|
||||
) : null}
|
||||
</div>) : (<img src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/coupon/reduce_pic.png" />)
|
||||
}
|
||||
|
||||
this.state.detailType == 1 ? <Detailstemplate
|
||||
opendesc={(c) => this.setState({ detailactiveshow: true })}
|
||||
detaildata={this.state.product_detail}
|
||||
/> : <Reduce />
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -1,9 +1,10 @@
|
|||
|
||||
.xj-wrapper{
|
||||
.xj-wrapper {
|
||||
width: calc(100% - 350px);
|
||||
float: right;
|
||||
}
|
||||
.xj-center,.xj-center-small {
|
||||
|
||||
.xj-center,
|
||||
.xj-center-small {
|
||||
scrollbar-face-color: transparent;
|
||||
// background-color: #f5f7f8;
|
||||
height: 100%;
|
||||
|
@ -13,9 +14,11 @@
|
|||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
.xj-center-small{
|
||||
|
||||
.xj-center-small {
|
||||
margin: 0 430px 0 470px;
|
||||
}
|
||||
|
||||
.perimg {
|
||||
position: absolute;
|
||||
width: 50px;
|
||||
|
@ -156,6 +159,7 @@
|
|||
position: absolute;
|
||||
right: 0;
|
||||
width: 440px;
|
||||
|
||||
.zent-image-upload-item-delete[data-zv="9.11.0"] {
|
||||
display: block;
|
||||
top: -15px;
|
||||
|
@ -317,36 +321,44 @@
|
|||
line-height: 20px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.title-control {
|
||||
color: #030303;
|
||||
font-size: 14px;
|
||||
padding: 16px 0 17px 24px;
|
||||
}
|
||||
|
||||
.editor-title {
|
||||
padding: 0 0 16.5px;
|
||||
}
|
||||
|
||||
.editor-title h2 {
|
||||
color: #030303;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.title-control {
|
||||
color: #030303;
|
||||
font-size: 14px;
|
||||
padding: 16px 0 17px 24px;
|
||||
}
|
||||
|
||||
.xj-viewer-mask {
|
||||
max-height: 600px;
|
||||
overflow-y: auto;
|
||||
|
||||
.top {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.center {
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
|
@ -468,6 +480,7 @@
|
|||
box-sizing: border-box;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
|
@ -482,6 +495,13 @@
|
|||
height: 100%;
|
||||
background: #fff;
|
||||
|
||||
.editor-main {
|
||||
top: 0;
|
||||
}
|
||||
.preBtn{
|
||||
width: auto!important;
|
||||
}
|
||||
|
||||
.showTypechice {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
@ -524,59 +544,18 @@
|
|||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.detailstemplatescale {
|
||||
position: relative;
|
||||
background: #fff;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.susactive_Tip {
|
||||
position: absolute;
|
||||
top: 14px;
|
||||
right: 0;
|
||||
width: 14px;
|
||||
// height: 24px;
|
||||
.detailstemplatescale{
|
||||
.detailstemplate{
|
||||
transform: scale(0.315);
|
||||
transform-origin: 0 0;
|
||||
img{
|
||||
width: auto!important;
|
||||
}
|
||||
|
||||
.topBanner {
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
.preBtn {
|
||||
position: absolute;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
top: 4%;
|
||||
left: 4%;
|
||||
}
|
||||
|
||||
.splitLine {
|
||||
height: 2px;
|
||||
background: #EFEFEF;
|
||||
}
|
||||
|
||||
.iptbg {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.exchangeBtn {
|
||||
font-size: 10px;
|
||||
width: 100%;
|
||||
background: #E8EAEC;
|
||||
height: 16px;
|
||||
border-radius: 8px;
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
bottom: 2%;
|
||||
.iptbg{
|
||||
width: 100%!important;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.thumbheader {
|
||||
width: 8vw;
|
||||
height: 11vw;
|
||||
|
@ -586,138 +565,26 @@
|
|||
border: 1px solid #f1f2f3;
|
||||
align-self: center;
|
||||
cursor: pointer;
|
||||
|
||||
&.activeNav {
|
||||
border: 5px solid #DDEEFF;
|
||||
}
|
||||
|
||||
.goodsList-item {
|
||||
.goodstemplate{
|
||||
.goodstemplate {
|
||||
transform: scale(0.315);
|
||||
transform-origin: 0 0;
|
||||
}
|
||||
.editor-main{
|
||||
|
||||
.editor-main {
|
||||
top: 0;
|
||||
img{
|
||||
width: auto!important;
|
||||
|
||||
img {
|
||||
width: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
// .goodsList-item {
|
||||
// position: relative;
|
||||
// height: 100%;
|
||||
// overflow: hidden;
|
||||
// .goodstemplate{
|
||||
// transform: scale(0.31);
|
||||
// transform-origin: 0 0;
|
||||
// }
|
||||
// .topbanner {
|
||||
// width: 100%;
|
||||
// height: 50px;
|
||||
// }
|
||||
// >.content-title{
|
||||
// position: relative;
|
||||
// z-index: 999;
|
||||
// height: 20px;
|
||||
// padding:0 8px;
|
||||
// font-size: 8px;
|
||||
// }
|
||||
// .parting-line{
|
||||
// height:15px;
|
||||
// }
|
||||
// .searchBar{
|
||||
// transform: scale(0.8);
|
||||
// font-size: 10px;
|
||||
// padding: 0 5px;
|
||||
// border-radius: 10px;
|
||||
// }
|
||||
// .marketing{
|
||||
// width: 10px;
|
||||
// }
|
||||
// .bottom_Img {
|
||||
// width: 100%;
|
||||
// }
|
||||
|
||||
// .bottom_activeTip {
|
||||
// width: 7.2vw;
|
||||
// margin-left: 0.4vw;
|
||||
// padding: 6px;
|
||||
// background: #fff;
|
||||
// border-radius: 2px;
|
||||
// box-shadow: 1px 1px 13px 2px #f1f2f3;
|
||||
// box-sizing: border-box;
|
||||
// line-height: 15px;
|
||||
// padding-bottom: 60px;
|
||||
// font-size: 8px;
|
||||
// }
|
||||
|
||||
// .susactive_Tip {
|
||||
// position: absolute;
|
||||
// top: 14px;
|
||||
// right: 0;
|
||||
// width: 14px;
|
||||
// // height: 24px;
|
||||
// }
|
||||
|
||||
// .preBtn {
|
||||
// position: absolute;
|
||||
// width: 14px;
|
||||
// height: 14px;
|
||||
// top: 4%;
|
||||
// left: 4%;
|
||||
// }
|
||||
|
||||
// .goodsPic,
|
||||
// .goodsPicMatrax {
|
||||
// width: 90%;
|
||||
// margin-left: 5%;
|
||||
// position: relative;
|
||||
// margin-top: -20px;
|
||||
// }
|
||||
|
||||
// .bottom_exchageBtn {
|
||||
// position: absolute;
|
||||
// bottom: 0;
|
||||
// left: 0;
|
||||
// margin: 0 5% 3% !important;
|
||||
// }
|
||||
|
||||
// .exchageBtn {
|
||||
// width: 90%;
|
||||
// height: 30px;
|
||||
// font-size: 8px;
|
||||
// color: #fff;
|
||||
// height: 20px;
|
||||
// background: #E8EAEC;
|
||||
// border-radius: 15px;
|
||||
// margin: 10% 5%;
|
||||
// }
|
||||
// .bottomBar-view{
|
||||
// width: 100%;
|
||||
// height: 30px;
|
||||
// position: absolute;
|
||||
// bottom: 0;
|
||||
// display: flex;
|
||||
// justify-content: space-evenly;
|
||||
// }
|
||||
// .bottomBar-view>li{
|
||||
// flex: 1;
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
// align-items: center;
|
||||
// justify-content: center;
|
||||
// cursor: pointer;
|
||||
|
||||
// }
|
||||
// .bottomBar-view>li>img{
|
||||
// width: 8px;
|
||||
// height: 8px;
|
||||
// }
|
||||
// .bottomBar-view>li>span{
|
||||
// font-size: 6px;
|
||||
// }
|
||||
|
||||
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -755,10 +622,13 @@
|
|||
.model44 {
|
||||
z-index: 88888;
|
||||
}
|
||||
|
||||
/*商品详情页预览小图*/
|
||||
#leftComponent .details-reduce{
|
||||
transform: scale(0.5)
|
||||
#leftComponent .details-reduce {
|
||||
transform: scale(0.315);
|
||||
transform-origin: 0 0;
|
||||
}
|
||||
.exchageBtn{
|
||||
|
||||
.exchageBtn {
|
||||
border: 0 !important;
|
||||
}
|
Loading…
Reference in New Issue