Merge branch 'couponV1.5' of https://codeup.aliyun.com/5f9118049cffa29cfdd3be1c/marketing/frontend into couponV1.5
This commit is contained in:
zhangds
commit
0b2b8647b4
|
|
@ -28,8 +28,8 @@
|
|||
width: 100%;
|
||||
height: 50px;
|
||||
background: #f00;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
// position: absolute;
|
||||
// bottom: 0;
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import React from 'react';
|
||||
import "../main.less"
|
||||
import "./main.less"
|
||||
import "@/assets/comm.css"
|
||||
import '../goodstemplate.less'
|
||||
import './goodstemplate.less'
|
||||
export default class edittemplate extends React.Component{
|
||||
constructor(props){
|
||||
super(props)
|
||||
|
|
@ -10,6 +10,7 @@ export default class edittemplate extends React.Component{
|
|||
this.props.opendesc(true)
|
||||
}
|
||||
render(){
|
||||
let detailInfo=this.props.detaildata;
|
||||
return(
|
||||
<div className="editor-main detailstemplate">
|
||||
<img src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/backprepageBtn.png'} className="preBtn"/>
|
||||
|
|
@ -18,19 +19,19 @@ export default class edittemplate extends React.Component{
|
|||
<img className="iptbg" src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/detailipt.png'}/>
|
||||
<p className="splitLine"></p>
|
||||
{
|
||||
this.props.detaildata.describe.bg_image&&this.props.detaildata.describe.type==1?<img className="detail_bottomImg" src={this.props.detaildata.describe.bg_image}/>:this.props.detaildata.describe.type==3?<div className="bottomactiveTip" dangerouslySetInnerHTML = {{ __html:this.props.detaildata.describe.content}}></div>:null
|
||||
detailInfo.describe.bg_image&&detailInfo.describe.type==1?<img className="detail_bottomImg" src={detailInfo.describe.bg_image}/>:detailInfo.describe.type==3?<div className="bottomactiveTip" dangerouslySetInnerHTML = {{ __html:detailInfo.describe.content}}></div>:null
|
||||
}
|
||||
{
|
||||
this.props.detaildata.describe.type==2?<img className="susactive_tip" onClick={this.opendescFn.bind(this)} src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/acticeTextTip.png'}/>:null
|
||||
detailInfo.describe.type==2?<img className="susactive_tip" onClick={this.opendescFn.bind(this)} src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/acticeTextTip.png'}/>:null
|
||||
}
|
||||
{
|
||||
[1,3].includes(this.props.templateType)?<button className="exchangeBtn" style={{background:this.props.detaildata.button_color,color:this.props.detaildata.font_color}}>立即兑换</button>:
|
||||
<div className="dflexaj payBtn-view">
|
||||
[1,3].includes(this.props.templateType)?<button className={detailInfo.describe.type == 1 && detailInfo.describe.bg_image || detailInfo.describe.type == 3 ? "exchageBtn bottomBtn" : "exchageBtn"} style={{background:detailInfo.button_color,color:detailInfo.font_color}}>立即兑换</button>:
|
||||
<div className={'dflexaj payBtn-view good-Btnview'}>
|
||||
<div className="coupon-price">
|
||||
<p>￥<span>0.00</span></p>
|
||||
<p>共省￥0.01</p>
|
||||
</div>
|
||||
<button className="payBtn" style={{background:this.props.detaildata.button_color,color:this.props.detaildata.font_color}}>立即支付</button>
|
||||
<button className="payBtn" style={{background:detailInfo.button_color,color:detailInfo.font_color}}>立即支付</button>
|
||||
</div>
|
||||
}
|
||||
|
||||
|
|
@ -1,68 +1,55 @@
|
|||
import React from 'react';
|
||||
import React from 'react';
|
||||
import "./main.less"
|
||||
import "../../../assets/comm.css"
|
||||
import './goodstemplate.less'
|
||||
import SearchBarView from './couponCard/couponViewConfig/searchBar' //商品详情搜索栏
|
||||
import BottomBarView from './couponCard/couponViewConfig/bottomBar' //底部栏
|
||||
import {Sweetalert} from 'zent'
|
||||
import { Sweetalert } from 'zent'
|
||||
import Bus from '@/assets/eventBus.js'
|
||||
export default class edittemplate extends React.Component {
|
||||
constructor(props) {
|
||||
super(props)
|
||||
this.state={
|
||||
clientY:0,
|
||||
selectDom:'',
|
||||
icon:'',
|
||||
comName:''
|
||||
this.state = {
|
||||
clientY: 0,
|
||||
selectDom: '',
|
||||
icon: '',
|
||||
comName: ''
|
||||
}
|
||||
}
|
||||
opendescFn() {
|
||||
this.props.opendesc(true)
|
||||
}
|
||||
customComponent(e,name,icon,comName){
|
||||
customComponent(e, name, icon, comName) {
|
||||
//getBoundingClientRect().top ;获取div最顶边距离浏览器的位置
|
||||
|
||||
let b=this.refs[name];
|
||||
|
||||
let offset_top=this.refs[name].getBoundingClientRect().top;
|
||||
|
||||
this.setState({clientY:(offset_top-125),selectDom:name,icon:icon,comName});
|
||||
|
||||
if(name=='searchBar'){
|
||||
|
||||
this.setState({clientY:0});
|
||||
|
||||
let offset_top = this.refs[name].getBoundingClientRect().top;
|
||||
console.log(25, offset_top - 125);
|
||||
this.setState({ clientY: (offset_top - 125), selectDom: name, icon: icon, comName });
|
||||
if (name == 'searchBar') {
|
||||
this.setState({ clientY: 0 });
|
||||
}
|
||||
|
||||
if(name=='bottomBar'){
|
||||
|
||||
this.setState({clientY:600});
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
deleteFn(){
|
||||
deleteFn() {
|
||||
|
||||
let selectDom=this.state.selectDom;//需删除组件名称
|
||||
let selectDom = this.state.selectDom;//需删除组件名称
|
||||
|
||||
Sweetalert.confirm({
|
||||
|
||||
title:'确认信息',
|
||||
title: '确认信息',
|
||||
|
||||
content: <p>确认删除该模块？</p>,
|
||||
|
||||
onConfirm:()=>{
|
||||
onConfirm: () => {
|
||||
|
||||
this.setState({selectDom:''});
|
||||
this.setState({ selectDom: '' });
|
||||
|
||||
Bus.emit('componentLibClose',selectDom)
|
||||
Bus.emit('componentLibClose', selectDom)
|
||||
|
||||
},
|
||||
|
||||
onCancel:()=>{
|
||||
onCancel: () => {
|
||||
|
||||
|
||||
|
||||
|
||||
},
|
||||
|
||||
|
|
@ -75,104 +62,104 @@ export default class edittemplate extends React.Component {
|
|||
|
||||
|
||||
render() {
|
||||
let goodsConfig=this.props.goodsdata;
|
||||
console.log(48,goodsConfig);
|
||||
let naVisual=[]
|
||||
if(goodsConfig.bottomBar){
|
||||
naVisual=goodsConfig.bottomBar.navlist.filter(item=>item.iswitch);
|
||||
let goodsConfig = this.props.goodsdata;
|
||||
console.log(48, goodsConfig);
|
||||
let naVisual = []
|
||||
if (goodsConfig.bottomBar) {
|
||||
naVisual = goodsConfig.bottomBar.navlist.filter(item => item.iswitch);
|
||||
}
|
||||
|
||||
return (
|
||||
|
||||
<div className="editor-main goodstemplate" style={{ background:goodsConfig.backgroundImg&&goodsConfig.backgroundImg.bgImg? `url('${goodsConfig.backgroundImg.bgImg}') center center /cover`:goodsConfig.backgroundImg&&goodsConfig.backgroundImg.bgColor?goodsConfig.backgroundImg.bgColor:'#F2F7F8' }}>
|
||||
<div className="goodstemplate_Xcenter" style={{ background: goodsConfig.backgroundImg && goodsConfig.backgroundImg.bgImg ? `url('${goodsConfig.backgroundImg.bgImg}') center center /cover` : goodsConfig.backgroundImg && goodsConfig.backgroundImg.bgColor ? goodsConfig.backgroundImg.bgColor : '#F2F7F8' }}>
|
||||
<div className="goodstemplate">
|
||||
{
|
||||
|
||||
goodsConfig.search && goodsConfig.search.iswitch ?
|
||||
|
||||
<div onClick={e => this.customComponent(e, 'search', 'marketing-sousuolan-', '搜索栏')} className={this.state.selectDom == 'search' ? 'selectBorder' : ''} ref="search"><SearchBarView searchConfig={goodsConfig.search} /></div> : null
|
||||
|
||||
}
|
||||
|
||||
<img src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/backprepageBtn.png'} className="preBtn" />
|
||||
|
||||
{
|
||||
|
||||
!goodsConfig.top_image ? <img className="topbanner" src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/goodstop.png'} /> : <img className="topbanner" src={goodsConfig.top_image} />
|
||||
|
||||
}
|
||||
|
||||
{
|
||||
|
||||
goodsConfig.picture && goodsConfig.picture.iswitch ? <div onClick={e => this.customComponent(e, 'picture', 'marketing-tupian', '图片')} ref="picture" className={this.state.selectDom == 'picture' ? 'selectBorder' : ''}><img src={goodsConfig.picture.img} alt="" className="picture" /></div> : null
|
||||
|
||||
}
|
||||
|
||||
{
|
||||
|
||||
goodsConfig.title && goodsConfig.title.iswitch && goodsConfig.title.comstyle == 1 ? <div onClick={e => this.customComponent(e, 'title', 'marketing-fuwenbenkuang', '标题')} ref="title" className={this.state.selectDom == 'title' ? 'selectBorder' : ''}><div className={goodsConfig.title.textAlign + ' content-title ' + goodsConfig.title.fontSize} style={{ color: goodsConfig.title.fontColor, fontWeight: 'bold' }}>{goodsConfig.title.text}</div></div> : null
|
||||
|
||||
}
|
||||
{
|
||||
|
||||
goodsConfig.title && goodsConfig.title.iswitch && goodsConfig.title.comstyle == 2 ? <div onClick={e => this.customComponent(e, 'title', 'marketing-fuwenbenkuang', '标题')} ref="title" className={this.state.selectDom == 'title' ? 'selectBorder' : ''}>
|
||||
<img src={goodsConfig.title.pic} alt="" className="title-pic" />
|
||||
</div> : null
|
||||
|
||||
}
|
||||
|
||||
{
|
||||
|
||||
goodsConfig.title && goodsConfig.title.iswitch && goodsConfig.title.text || goodsConfig.picture && goodsConfig.picture.iswitch && goodsConfig.picture.img ? <div className="parting-line"></div> : null
|
||||
|
||||
}
|
||||
|
||||
{
|
||||
|
||||
goodsConfig.list == 2 ? <img className="goodsPic" src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/swiper.png'} /> : goodsConfig.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'} />
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
{
|
||||
|
||||
goodsConfig.describe.type == 1 ? <img src={goodsConfig.describe.bg_image} alt="" className={goodsConfig.list == 1 && goodsConfig.describe.bg_image ? 'bottomTip bottomTipview' : 'bottomTip'} /> : goodsConfig.describe.type == 3 ? <div className="bottomactiveTip" dangerouslySetInnerHTML={{ __html: goodsConfig.describe.content }}></div> : null
|
||||
|
||||
}
|
||||
|
||||
{
|
||||
|
||||
goodsConfig.describe.type == 2 ? <img className="susactive_tip" onClick={this.opendescFn.bind(this)} src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/acticeTextTip.png'} /> : null
|
||||
|
||||
}
|
||||
{
|
||||
|
||||
goodsConfig.list == 2 ? <button className={goodsConfig.describe.type == 1 && goodsConfig.describe.bg_image || goodsConfig.describe.type == 3 ? "exchageBtn bottomBtn" : "exchageBtn"} style={{ color: goodsConfig.font_color, background: goodsConfig.button_color }}>
|
||||
{goodsConfig.search ? '立即购买' : '立即兑换'}
|
||||
</button> : null
|
||||
|
||||
}
|
||||
{
|
||||
goodsConfig.bottomBar && goodsConfig.bottomBar.iswitch && naVisual.length > 1 ? <div ref="bottomBar" onClick={e => this.customComponent(e, 'bottomBar', 'marketing-list', '底部栏')} className={this.state.selectDom == 'bottomBar' ? 'selectBottomBorder' : ''}><BottomBarView bottomBarConfig={goodsConfig.bottomBar} /></div> : null
|
||||
}
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
{
|
||||
|
||||
goodsConfig.search&&goodsConfig.search.iswitch?
|
||||
this.state.selectDom ? <div className="delete-component" style={{ top: this.state.clientY }}>
|
||||
|
||||
<div onClick={e=>this.customComponent(e,'search','marketing-sousuolan-','搜索栏')} className={this.state.selectDom=='search'?'selectBorder':''} ref="search"><SearchBarView searchConfig={goodsConfig.search} /></div>:null
|
||||
<span>{this.state.comName}</span>
|
||||
|
||||
<b className="split">|</b>
|
||||
|
||||
<span className="del-color" onClick={this.deleteFn.bind(this)}>删除</span>
|
||||
|
||||
</div> : null
|
||||
|
||||
}
|
||||
|
||||
<img src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/backprepageBtn.png'} className="preBtn" />
|
||||
|
||||
{
|
||||
|
||||
!goodsConfig.top_image ? <img className="topbanner" src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/goodstop.png'} /> : <img className="topbanner" src={goodsConfig.top_image} />
|
||||
|
||||
}
|
||||
|
||||
{
|
||||
|
||||
goodsConfig.picture&&goodsConfig.picture.iswitch? <div onClick={e=>this.customComponent(e,'picture','marketing-tupian','图片')} ref="picture" className={this.state.selectDom=='picture'?'selectBorder':''}><img src={goodsConfig.picture.img} alt="" className="picture"/></div>:null
|
||||
|
||||
}
|
||||
|
||||
{
|
||||
|
||||
goodsConfig.title&&goodsConfig.title.iswitch&&goodsConfig.title.comstyle==1?<div onClick={e=>this.customComponent(e,'title','marketing-fuwenbenkuang','标题')} ref="title" className={this.state.selectDom=='title'?'selectBorder':''}><div className={goodsConfig.title.textAlign +' content-title '+goodsConfig.title.fontSize} style={{color:goodsConfig.title.fontColor,fontWeight:'bold'}}>{goodsConfig.title.text}</div></div>:null
|
||||
|
||||
}
|
||||
{
|
||||
|
||||
goodsConfig.title&&goodsConfig.title.iswitch&&goodsConfig.title.comstyle==2?<div onClick={e=>this.customComponent(e,'title','marketing-fuwenbenkuang','标题')} ref="title" className={this.state.selectDom=='title'?'selectBorder':''}>
|
||||
<img src={goodsConfig.title.pic} alt="" className="title-pic"/>
|
||||
</div>:null
|
||||
|
||||
}
|
||||
|
||||
{
|
||||
|
||||
goodsConfig.title&&goodsConfig.title.iswitch&&goodsConfig.title.text||goodsConfig.picture&&goodsConfig.picture.iswitch&&goodsConfig.picture.img?<div className="parting-line"></div>:null
|
||||
|
||||
}
|
||||
|
||||
{
|
||||
|
||||
goodsConfig.list == 2 ? <img className="goodsPic" src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/swiper.png'} /> : goodsConfig.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'} />
|
||||
|
||||
}
|
||||
|
||||
{
|
||||
|
||||
goodsConfig.list == 2 ? <button className={goodsConfig.describe.type == 1 && goodsConfig.describe.bg_image || goodsConfig.describe.type == 3 ? "exchageBtn bottomBtn" : "exchageBtn"} style={{ color: goodsConfig.font_color, background: goodsConfig.button_color }}>
|
||||
{goodsConfig.search?'立即购买':'立即兑换'}
|
||||
</button> : null
|
||||
|
||||
}
|
||||
|
||||
{
|
||||
|
||||
goodsConfig.describe.type == 1 ? <img src={goodsConfig.describe.bg_image} alt="" className={goodsConfig.list == 1 && goodsConfig.describe.bg_image ? 'bottomTip bottomTipview' : 'bottomTip'} /> : goodsConfig.describe.type == 3 ? <div className="bottomactiveTip" dangerouslySetInnerHTML={{ __html: goodsConfig.describe.content }}></div> : null
|
||||
|
||||
}
|
||||
|
||||
{
|
||||
|
||||
goodsConfig.describe.type == 2 ? <img className="susactive_tip" onClick={this.opendescFn.bind(this)} src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/acticeTextTip.png'} /> : null
|
||||
|
||||
}
|
||||
|
||||
{
|
||||
goodsConfig.bottomBar&&goodsConfig.bottomBar.iswitch&&naVisual.length>1? <div ref="bottomBar" onClick={e=>this.customComponent(e,'bottomBar','marketing-list','底部栏')} className={this.state.selectDom=='bottomBar'?'selectBottomBorder':''}><BottomBarView bottomBarConfig={goodsConfig.bottomBar}/></div>:null
|
||||
}
|
||||
|
||||
{
|
||||
|
||||
this.state.selectDom?<div className="delete-component" style={{top:this.state.clientY}}>
|
||||
|
||||
<span>{this.state.comName}</span>
|
||||
|
||||
<b className="split">|</b>
|
||||
|
||||
<span className="del-color" onClick={this.deleteFn.bind(this)}>删除</span>
|
||||
|
||||
</div>:null
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
)
|
||||
|
|
|
|||
|
|
@ -3,6 +3,9 @@
|
|||
height: 653px;
|
||||
background: #F2F7F8;
|
||||
position: relative;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
|
||||
>.preBtn {
|
||||
position: absolute;
|
||||
width: 28px;
|
||||
|
|
@ -25,9 +28,11 @@
|
|||
padding: 0 13px;
|
||||
display: flex;
|
||||
}
|
||||
.parting-line{
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.parting-line {
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
>.goodsPic,
|
||||
>.goodsPicMatrax {
|
||||
width: 349px;
|
||||
|
|
@ -36,6 +41,7 @@
|
|||
position: relative;
|
||||
margin-top: -50px;
|
||||
}
|
||||
|
||||
>.goodsPicMatrax {
|
||||
height: auto;
|
||||
}
|
||||
|
|
@ -49,12 +55,7 @@
|
|||
background: #E8EAEC;
|
||||
border-radius: 44px;
|
||||
height: 44px;
|
||||
margin: 30px 0 0 13px;
|
||||
|
||||
&.bottomBtn {
|
||||
position: fixed;
|
||||
top: 695px;
|
||||
}
|
||||
margin: 30px 0 30px 13px;
|
||||
}
|
||||
|
||||
.susactive_tip {
|
||||
|
|
@ -69,7 +70,7 @@
|
|||
.bottomactiveTip {
|
||||
width: 375px;
|
||||
margin: 10px 0;
|
||||
padding: 24px 20px 60px;
|
||||
padding: 24px 20px;
|
||||
box-sizing: border-box;
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
|
|
@ -79,41 +80,15 @@
|
|||
p {
|
||||
width: 335px;
|
||||
}
|
||||
}
|
||||
|
||||
.delete-component {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: -36px;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
padding: 6px 8px;
|
||||
border-radius: 2px;
|
||||
background: #fff;
|
||||
font-size: 14px;
|
||||
-webkit-transform: translateX(73px);
|
||||
transform: translateX(70px);
|
||||
&: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;
|
||||
color: #b4b8b4;
|
||||
.fixbottom {
|
||||
bottom: 0 !important;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
.fixbottom{
|
||||
bottom: 0!important;
|
||||
}
|
||||
.payBtn-view{//优惠券支付模块
|
||||
.payBtn-view {
|
||||
//优惠券支付模块
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
position: absolute;
|
||||
|
|
@ -121,59 +96,64 @@
|
|||
left: 0;
|
||||
z-index: 9;
|
||||
background: #D7D7D7;
|
||||
.coupon-price{
|
||||
&.good-Btnview{
|
||||
position: static;
|
||||
margin-top: 50px;
|
||||
}
|
||||
.coupon-price {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
padding-left: 15px;
|
||||
:first-of-type{
|
||||
|
||||
:first-of-type {
|
||||
color: #FF5533;
|
||||
span{
|
||||
|
||||
span {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
.payBtn{
|
||||
|
||||
.payBtn {
|
||||
width: 100px;
|
||||
height: 100%;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.goodstemplate {
|
||||
// overflow-y: auto;
|
||||
.selectBorder {
|
||||
z-index: 2;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
border: 2px solid #1985ff;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
background: rgba(25,133,255,.2);
|
||||
content: "";
|
||||
}
|
||||
.title-pic{
|
||||
height:40px;
|
||||
}
|
||||
.selectBottomBorder {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: 2;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
border: 2px solid #1985ff;
|
||||
width: 100%;
|
||||
height: 54px;
|
||||
background: rgba(25,133,255,.2);
|
||||
content: "";
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
.selectBorder {
|
||||
z-index: 2;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
border: 2px solid #1985ff;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
background: rgba(25, 133, 255, .2);
|
||||
content: "";
|
||||
}
|
||||
|
||||
.title-pic {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.selectBottomBorder {
|
||||
z-index: 2;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
border: 2px solid #1985ff;
|
||||
width: 100%;
|
||||
height: 54px;
|
||||
background: rgba(25, 133, 255, .2);
|
||||
content: "";
|
||||
}
|
||||
|
||||
.bottomactiveTip {
|
||||
width: 350px;
|
||||
margin: 12.5px;
|
||||
|
|
@ -189,7 +169,7 @@
|
|||
height: 40px;
|
||||
line-height: 40px;
|
||||
box-sizing: border-box;
|
||||
border:0;
|
||||
border: 0;
|
||||
border-radius: 20px;
|
||||
}
|
||||
}
|
||||
|
|
@ -197,6 +177,9 @@
|
|||
.detailstemplate {
|
||||
position: relative;
|
||||
background: #fff;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
|
||||
.detail_bottomImg {
|
||||
width: 100%;
|
||||
padding-bottom: 30px;
|
||||
|
|
@ -281,10 +264,12 @@
|
|||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
.sort_number{
|
||||
border: 0!important;
|
||||
border-bottom: 1px solid #e0e0e0!important;
|
||||
|
||||
.sort_number {
|
||||
border: 0 !important;
|
||||
border-bottom: 1px solid #e0e0e0 !important;
|
||||
}
|
||||
|
||||
//商品详情页区分立减金/权益
|
||||
.details_type {
|
||||
position: relative;
|
||||
|
|
@ -318,22 +303,67 @@
|
|||
.picture {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.goodstemplate::-webkit-scrollbar {
|
||||
|
||||
width: 6px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.goodstemplate::-webkit-scrollbar-track {
|
||||
|
||||
background-color: #F3F4F5;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.goodstemplate::-webkit-scrollbar-thumb {
|
||||
background-color: #C1C1C1;
|
||||
border-radius: 4px;
|
||||
opacity: 0.7;
|
||||
width: 6px;
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
|
||||
.goodstemplate_Xcenter {
|
||||
width: 375px;
|
||||
top: 65px;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
|
||||
.delete-component {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: -36px;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
padding: 6px 8px;
|
||||
border-radius: 2px;
|
||||
background: #fff;
|
||||
font-size: 14px;
|
||||
-webkit-transform: translateX(73px);
|
||||
transform: translateX(70px);
|
||||
|
||||
&: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;
|
||||
color: #b4b8b4;
|
||||
}
|
||||
}
|
||||
|
||||
.goodstemplate::-webkit-scrollbar-track {
|
||||
|
||||
background-color:#F3F4F5;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.goodstemplate::-webkit-scrollbar-thumb {
|
||||
background-color:#C1C1C1;
|
||||
border-radius: 4px;
|
||||
opacity: 0.7;
|
||||
width: 6px;
|
||||
height: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.goodsList-item .goodstemplate_Xcenter {
|
||||
top: 0;
|
||||
}
|
||||
|
|
@ -13,7 +13,7 @@ import CouponLandingForm from './couponCard/landPage'; //优惠券落地页表
|
|||
import CouponComLib from './couponCard/goodsPage/componentLib/main'; //优惠券组件库
|
||||
import CouponGoodsListForm from './couponCard/goodsPage/config/main'; //优惠券商品列表页
|
||||
import DetailsPage from './exchange/detailsPage'; //商品详情form页面
|
||||
import Detailstemplate from './exchange/detailstemplate'
|
||||
import Detailstemplate from './detailstemplate'
|
||||
import Descteplate from './goodsdesc'
|
||||
import GoodsForm from './exchange/goodsPage'; //商品页表单
|
||||
import Goodstemplate from './goodstemplate'
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@
|
|||
}
|
||||
|
||||
.xj-center-small {
|
||||
z-index: 4;
|
||||
margin: 0 430px 0 470px;
|
||||
}
|
||||
|
||||
|
|
@ -432,7 +433,7 @@
|
|||
|
||||
div {
|
||||
width: 100%;
|
||||
padding: 0 25px;
|
||||
padding: 25px;
|
||||
line-height: 1.5rem;
|
||||
font-size: 13px;
|
||||
box-sizing: border-box;
|
||||
|
|
|
|||
|
|
@ -206,23 +206,7 @@ export default class preview extends React.Component {
|
|||
}
|
||||
/>
|
||||
)}
|
||||
{propsData.product_list.list == 2 ? (
|
||||
<button
|
||||
className={
|
||||
(propsData.product_list.describe.type == 1 &&
|
||||
propsData.product_list.describe.bg_image) ||
|
||||
propsData.product_list.describe.type == 3
|
||||
? "exchageBtn"
|
||||
: "exchageBtn"
|
||||
}
|
||||
style={{
|
||||
color: propsData.product_list.font_color,
|
||||
background: propsData.product_list.button_color,
|
||||
}}
|
||||
>
|
||||
立即兑换
|
||||
</button>
|
||||
) : null}
|
||||
|
||||
{propsData.product_list.describe.type == 1 ? (
|
||||
<img
|
||||
src={propsData.product_list.describe.bg_image}
|
||||
|
|
@ -251,6 +235,23 @@ export default class preview extends React.Component {
|
|||
}
|
||||
/>
|
||||
) : null}
|
||||
{propsData.product_list.list == 2 ? (
|
||||
<button
|
||||
className={
|
||||
(propsData.product_list.describe.type == 1 &&
|
||||
propsData.product_list.describe.bg_image) ||
|
||||
propsData.product_list.describe.type == 3
|
||||
? "exchageBtn bottomBtn"
|
||||
: "exchageBtn"
|
||||
}
|
||||
style={{
|
||||
color: propsData.product_list.font_color,
|
||||
background: propsData.product_list.button_color,
|
||||
}}
|
||||
>
|
||||
立即兑换
|
||||
</button>
|
||||
) : null}
|
||||
{goodsConfig.bottomBar &&
|
||||
goodsConfig.bottomBar.iswitch &&
|
||||
naVisual.length > 1 ? (
|
||||
|
|
@ -315,7 +316,7 @@ export default class preview extends React.Component {
|
|||
) : null}
|
||||
{[1, 3].includes(this.props.pageType) ? (
|
||||
<button
|
||||
className="exchangeBtn"
|
||||
className={propsData.product_detail.describe.type == 1 && propsData.product_detail.describe.bg_image || propsData.product_detail.describe.type == 3 ? "exchageBtn bottomBtn" : "exchageBtn"}
|
||||
style={{
|
||||
background: propsData.product_detail.button_color,
|
||||
color: propsData.product_detail.font_color,
|
||||
|
|
@ -324,7 +325,7 @@ export default class preview extends React.Component {
|
|||
立即兑换
|
||||
</button>
|
||||
) : (
|
||||
<div className="dflexaj payBtn-view">
|
||||
<div className="dflexaj payBtn-view good-Btnview">
|
||||
<div className="coupon-price">
|
||||
<p>￥<span>0.00</span></p>
|
||||
<p>共省￥0.01</p>
|
||||
|
|
|
|||
|
|
@ -113,7 +113,7 @@
|
|||
.textTip_land {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
padding: 70px 25px 0;
|
||||
padding: 70px 25px 10px;
|
||||
line-height: 1.5rem;
|
||||
font-size: 13px;
|
||||
box-sizing: border-box;
|
||||
|
|
@ -186,8 +186,5 @@
|
|||
overflow: hidden;
|
||||
}
|
||||
.previewComponent .preview-show .bottomBtn {
|
||||
width: 200px;
|
||||
left: 50%;
|
||||
margin-left: -100px;
|
||||
height: 40px;
|
||||
}
|
||||
Loading…
Reference in New Issue