完成编辑器预览-详情页
This commit is contained in:
parent
720b12704c
commit
b41a3697a1
|
@ -119,7 +119,7 @@
|
|||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 9999;
|
||||
z-index: 9;
|
||||
background: #D7D7D7;
|
||||
.coupon-price{
|
||||
display: flex;
|
||||
|
|
|
@ -1,8 +1,8 @@
|
|||
button{
|
||||
button {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.xj-template-list {
|
||||
.xj-template-list {
|
||||
display: grid;
|
||||
gap: 24px 20px;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
|
@ -11,12 +11,12 @@ button{
|
|||
width: 1200px
|
||||
}
|
||||
|
||||
.xj-template-list.IOS_APP .xj-template-blank-card-content {
|
||||
.xj-template-list.IOS_APP .xj-template-blank-card-content {
|
||||
height: 392px;
|
||||
position: relative
|
||||
}
|
||||
|
||||
.spaui-nav>li>a {
|
||||
.spaui-nav>li>a {
|
||||
padding: 15px 15px 5px 10px
|
||||
}
|
||||
|
||||
|
@ -204,6 +204,7 @@ button{
|
|||
-webkit-transform: scale(.83);
|
||||
transform: scale(.83)
|
||||
}
|
||||
|
||||
.xj-template-preview-card {
|
||||
background-color: #fff;
|
||||
border: 1px solid hsla(0, 0%, 89%, .96);
|
||||
|
@ -634,8 +635,9 @@ button{
|
|||
.scroller-page .block-selector-list-label {
|
||||
margin-right: 22px
|
||||
}
|
||||
.preview-box{
|
||||
width:900px;
|
||||
|
||||
.preview-box {
|
||||
width: 900px;
|
||||
height: 640px;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
|
@ -655,7 +657,8 @@ button{
|
|||
background-color: var(--theme-default-hover-bg, var(--theme-primary-8, #e6efff));
|
||||
z-index: 1;
|
||||
}
|
||||
.toTop-canvas{
|
||||
|
||||
.toTop-canvas {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 60px;
|
||||
|
@ -666,22 +669,26 @@ button{
|
|||
box-shadow: 1px 2px 3px 3px #eee;
|
||||
position: fixed;
|
||||
right: 2vh;
|
||||
bottom:2vh;
|
||||
bottom: 2vh;
|
||||
cursor: pointer;
|
||||
}
|
||||
.toTopBtn{
|
||||
|
||||
.toTopBtn {
|
||||
width: 40px;
|
||||
fill-opacity: 0.2;
|
||||
}
|
||||
.toTop-canvas:hover{
|
||||
|
||||
.toTop-canvas:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
.main-preview{
|
||||
|
||||
.main-preview {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
}
|
||||
.previewComponent{
|
||||
|
||||
.previewComponent {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
|
@ -690,22 +697,27 @@ button{
|
|||
justify-content: space-between;
|
||||
// height: calc(100% - 200px);
|
||||
}
|
||||
.previewbody{
|
||||
|
||||
.previewbody {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 400px;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
}
|
||||
.ctorSize{
|
||||
|
||||
.ctorSize {
|
||||
width: 375px;
|
||||
overflow: hidden;
|
||||
border: 1px solid #ccc;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.preview-show{
|
||||
|
||||
.preview-show {
|
||||
height: 100%;
|
||||
}
|
||||
.left-choice{
|
||||
|
||||
.left-choice {
|
||||
flex: 1;
|
||||
margin-left: 30px;
|
||||
// height: 300px;
|
||||
|
@ -714,9 +726,11 @@ button{
|
|||
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.exchange-page{
|
||||
|
||||
.exchange-page {
|
||||
margin-bottom: 20px;
|
||||
p{
|
||||
|
||||
p {
|
||||
padding: 15px 0;
|
||||
font-weight: bold;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Segoe UI, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft Yahei", STHeiti, SimSun, sans-serif;
|
||||
|
@ -730,19 +744,22 @@ button{
|
|||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom:10px;
|
||||
margin-bottom: 10px;
|
||||
margin-top: 20px;
|
||||
font-family:-apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Segoe UI, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft Yahei", STHeiti, SimSun, sans-serif ;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Segoe UI, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft Yahei", STHeiti, SimSun, sans-serif;
|
||||
}
|
||||
.screen-size-selector{
|
||||
|
||||
.screen-size-selector {
|
||||
width: 408px;
|
||||
}
|
||||
|
||||
.screen-size-selector .size.active {
|
||||
background: rgba(41,107,239,.08);
|
||||
background: rgba(41, 107, 239, .08);
|
||||
border: 1px solid #2096f5;
|
||||
color: #296bef;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.screen-size-selector .size {
|
||||
border: 1px solid #dcdee3;
|
||||
border-radius: 4px;
|
||||
|
@ -754,6 +771,7 @@ button{
|
|||
text-align: center;
|
||||
width: 96px;
|
||||
}
|
||||
|
||||
.screen-size-selector .size span {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
|
@ -761,18 +779,20 @@ button{
|
|||
opacity: .5;
|
||||
font-weight: bold;
|
||||
}
|
||||
.touse{
|
||||
|
||||
.touse {
|
||||
margin-top: 100px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
|
||||
.zent-btn[data-zv="9.11.0"] {
|
||||
width: 80px;
|
||||
height: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.left-choice .zent-radio-button--checked[data-zv="9.11.0"]{
|
||||
background: rgba(41, 107, 239, 0.08)!important;
|
||||
border: 1px solid #2096f5!important;
|
||||
color: #296bef!important;
|
||||
.left-choice .zent-radio-button--checked[data-zv="9.11.0"] {
|
||||
background: rgba(41, 107, 239, 0.08) !important;
|
||||
border: 1px solid #2096f5 !important;
|
||||
color: #296bef !important;
|
||||
}
|
|
@ -4,12 +4,13 @@ import { Button } from 'zent';
|
|||
import { RadioGroup, RadioButton, Input, openDialog, Dialog, Notify, Switch, Swiper, Dropdown, DropdownPosition, DropdownClickTrigger, Icon, MenuItem, DropdownContent, Menu, Sweetalert } from 'zent';
|
||||
import "../../../assets/comm.css"
|
||||
import _ from "lodash";
|
||||
import '../edittemplate/goodstemplate'
|
||||
import "./preview.less"
|
||||
import SearchBarView from '../edittemplate/couponConfig/searchBar' //商品详情搜索栏
|
||||
import BottomBarView from '../edittemplate/couponConfig/bottomBar' //底部栏
|
||||
|
||||
import Descteplate from "../edittemplate/goodsdesc.js"
|
||||
export default class acclist extends React.Component {
|
||||
export default class preview extends React.Component {
|
||||
constructor(props) {
|
||||
super(props)
|
||||
this.state = {
|
||||
|
@ -45,10 +46,11 @@ export default class acclist extends React.Component {
|
|||
this.setState({ detailactiveshow: false });
|
||||
}
|
||||
opendetaildescFn() {
|
||||
|
||||
this.setState({ detailactiveshow: true });
|
||||
}
|
||||
|
||||
componentDidUpdate(){
|
||||
document.querySelector('#previewbg').scrollTop = 0
|
||||
}
|
||||
render() {
|
||||
let propsData = this.props.data;
|
||||
let goodsConfig=propsData.product_list;
|
||||
|
@ -59,7 +61,7 @@ export default class acclist extends React.Component {
|
|||
console.log(53,this.props);
|
||||
return (
|
||||
<div className="preview-show">
|
||||
<div id="preview-bg" style={{background:this.props.step == 2&&goodsConfig.backgroundImg&&goodsConfig.backgroundImg.bgImg? `url('${goodsConfig.backgroundImg.bgImg}') center center /cover`:goodsConfig.backgroundImg&&goodsConfig.backgroundImg.bgColor?goodsConfig.backgroundImg.bgColor:'#F2F7F8' }}>
|
||||
<div id="previewbg" style={{background:this.props.step == 2&&goodsConfig.backgroundImg&&goodsConfig.backgroundImg.bgImg? `url('${goodsConfig.backgroundImg.bgImg}') center center /cover`:goodsConfig.backgroundImg&&goodsConfig.backgroundImg.bgColor?goodsConfig.backgroundImg.bgColor:'#F2F7F8' }}>
|
||||
{
|
||||
this.props.step == 1 ? (
|
||||
<div className="landpage" style={{ background: propsData.model.bg_color }}>
|
||||
|
@ -147,10 +149,34 @@ export default class acclist extends React.Component {
|
|||
{
|
||||
propsData.product_detail.describe.type == 2 ? <img className="susactive_tip" onClick={this.opendetaildescFn.bind(this)} src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/acticeTextTip.png'} /> : null
|
||||
}
|
||||
<button className="exchangeBtn viewdetailBtn" style={{ background: propsData.product_detail.button_color, color: propsData.product_detail.font_color }}>立即兑换</button>
|
||||
{
|
||||
[1,3].includes(this.props.pageType)?<button className="exchangeBtn" style={{background:propsData.product_detail.button_color, color: propsData.product_detail.font_color}}>立即兑换</button>:
|
||||
<div className="dflexaj payBtn-view">
|
||||
<div className="coupon-price">
|
||||
<p>¥0.00</p>
|
||||
<p>共省¥0.01</p>
|
||||
</div>
|
||||
<button className="payBtn" style={{background:propsData.product_detail.button_color, color: propsData.product_detail.font_color}}>立即支付</button>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
) : null
|
||||
// (<img src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/coupon/reduce_pic.png"/>)
|
||||
}
|
||||
{
|
||||
this.props.step==4?<div className="detailstemplate reduceComponent" >
|
||||
<img src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/coupon/reduce_pic.png"/>
|
||||
{
|
||||
[1,3].includes(this.props.pageType)?null:
|
||||
<div className="dflexaj payBtn-view">
|
||||
<div className="coupon-price">
|
||||
<p>¥0.00</p>
|
||||
<p>共省¥0.01</p>
|
||||
</div>
|
||||
<button className="payBtn" style={{background:propsData.product_detail.button_color, color: propsData.product_detail.font_color}}>立即支付</button>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
:null
|
||||
}
|
||||
</div>
|
||||
|
||||
|
|
|
@ -20,7 +20,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
#preview-bg {
|
||||
#previewbg {
|
||||
z-index: 10;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
|
@ -182,7 +182,9 @@
|
|||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.reduceComponent{
|
||||
overflow: hidden;
|
||||
}
|
||||
.previewComponent .preview-show .bottomBtn {
|
||||
width: 200px;
|
||||
left: 50%;
|
||||
|
|
Loading…
Reference in New Issue