HandOver-liuwu
/
frontend
mirror of https://codeup.aliyun.com/lsxd/marketing/frontend.git
4
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

编辑器视图区预览兼容性调整

This commit is contained in:
许红梅 2022-09-09 17:29:05 +08:00
parent fcb6b32e45
commit 1451ca3e47
3 changed files with 58 additions and 316 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/pages/exchangepage/edittemplate/goodstemplate.less
View File

@ -201,11 +201,11 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
position: fixed; position: absolute;
margin-left: 13.5px; margin-left: 13.5px;
// bottom: 2%; bottom: 2%;
top: 750px;
color: #fff; color: #fff;
border: 0;
} }
} }

142
src/pages/exchangepage/edittemplate/main.js
View File

@ -897,101 +897,6 @@ export default class edittemplate extends React.Component {
goodsdata={this.state.product_list} goodsdata={this.state.product_list}
/> />
</div> </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> </div>
<div className='item'> <div className='item'>
@ -1003,47 +908,14 @@ export default class edittemplate extends React.Component {
? 'activeNav thumbheader' ? 'activeNav thumbheader'
: 'thumbheader' : 'thumbheader'
}> }>
<div className='detailstemplatescale' >
{ {
this.state.detailType == 1 ? (<div className='detailstemplatescale' > this.state.detailType == 1 ? <Detailstemplate
<img opendesc={(c) => this.setState({ detailactiveshow: true })}
src={ detaildata={this.state.product_detail}
'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/backprepageBtn.png' /> : <Reduce />
} }
className='preBtn' </div>
/>
<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" />)
}
</div> </div>
</div> </div>
</div> </div>

226
src/pages/exchangepage/edittemplate/main.less
View File

@ -1,9 +1,10 @@
.xj-wrapper {
.xj-wrapper{
width: calc(100% - 350px); width: calc(100% - 350px);
float: right; float: right;
} }
.xj-center,.xj-center-small {
.xj-center,
.xj-center-small {
scrollbar-face-color: transparent; scrollbar-face-color: transparent;
// background-color: #f5f7f8; // background-color: #f5f7f8;
height: 100%; height: 100%;
@ -13,9 +14,11 @@
position: absolute; position: absolute;
right: 0; right: 0;
} }
.xj-center-small{
.xj-center-small {
margin: 0 430px 0 470px; margin: 0 430px 0 470px;
} }
.perimg { .perimg {
position: absolute; position: absolute;
width: 50px; width: 50px;
@ -156,6 +159,7 @@
position: absolute; position: absolute;
right: 0; right: 0;
width: 440px; width: 440px;
.zent-image-upload-item-delete[data-zv="9.11.0"] { .zent-image-upload-item-delete[data-zv="9.11.0"] {
display: block; display: block;
top: -15px; top: -15px;
@ -317,36 +321,44 @@
line-height: 20px; line-height: 20px;
margin: 0; margin: 0;
} }
.title-control { .title-control {
color: #030303; color: #030303;
font-size: 14px; font-size: 14px;
padding: 16px 0 17px 24px; padding: 16px 0 17px 24px;
} }
.editor-title { .editor-title {
padding: 0 0 16.5px; padding: 0 0 16.5px;
} }
.editor-title h2 { .editor-title h2 {
color: #030303; color: #030303;
font-size: 14px; font-size: 14px;
} }
.title-control { .title-control {
color: #030303; color: #030303;
font-size: 14px; font-size: 14px;
padding: 16px 0 17px 24px; padding: 16px 0 17px 24px;
} }
.xj-viewer-mask { .xj-viewer-mask {
max-height: 600px; max-height: 600px;
overflow-y: auto; overflow-y: auto;
.top { .top {
width: 100%; width: 100%;
height: auto; height: auto;
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
img { img {
width: 100%; width: 100%;
vertical-align: middle; vertical-align: middle;
} }
.center { .center {
width: 100%; width: 100%;
padding: 0; padding: 0;
@ -468,6 +480,7 @@
box-sizing: border-box; box-sizing: border-box;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
img { img {
width: 28px; width: 28px;
height: 28px; height: 28px;
@ -482,6 +495,13 @@
height: 100%; height: 100%;
background: #fff; background: #fff;
.editor-main {
top: 0;
}
.preBtn{
width: auto!important;
}
.showTypechice { .showTypechice {
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -524,59 +544,18 @@
font-size: 14px; font-size: 14px;
font-weight: normal; font-weight: normal;
} }
.detailstemplatescale{
.detailstemplatescale { .detailstemplate{
position: relative; transform: scale(0.315);
background: #fff; transform-origin: 0 0;
width: 100%; img{
height: 100%; width: auto!important;
.susactive_Tip {
position: absolute;
top: 14px;
right: 0;
width: 14px;
// height: 24px;
} }
.iptbg{
.topBanner { width: 100%!important;
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%;
} }
} }
}
.thumbheader { .thumbheader {
width: 8vw; width: 8vw;
height: 11vw; height: 11vw;
@ -586,138 +565,26 @@
border: 1px solid #f1f2f3; border: 1px solid #f1f2f3;
align-self: center; align-self: center;
cursor: pointer; cursor: pointer;
&.activeNav { &.activeNav {
border: 5px solid #DDEEFF; border: 5px solid #DDEEFF;
} }
.goodsList-item { .goodsList-item {
.goodstemplate{ .goodstemplate {
transform: scale(0.315); transform: scale(0.315);
transform-origin: 0 0; transform-origin: 0 0;
} }
.editor-main{
.editor-main {
top: 0; 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 { .model44 {
z-index: 88888; z-index: 88888;
} }
/*商品详情页预览小图*/ /*商品详情页预览小图*/
#leftComponent .details-reduce{ #leftComponent .details-reduce {
transform: scale(0.5) transform: scale(0.315);
transform-origin: 0 0;
} }
.exchageBtn{
.exchageBtn {
border: 0 !important; border: 0 !important;
} }