优化编辑器预览视图兼容性适配方案，scale计算
This commit is contained in:
许红梅
parent
704b5ff62a
commit
1e99514aa1
|
|
@ -23,6 +23,12 @@ export default class edittemplate extends React.Component {
|
|||
this.setState({ bgimg });
|
||||
}
|
||||
}
|
||||
bgColorFn(color){
|
||||
this.setState({
|
||||
bgColor: color
|
||||
});
|
||||
Bus.emit('globalColor',color)
|
||||
}
|
||||
handleChange1 = (color) => {
|
||||
this.setState({
|
||||
bgColor: color
|
||||
|
|
@ -125,11 +131,11 @@ export default class edittemplate extends React.Component {
|
|||
</FormItem>
|
||||
<FormItem labelname="背景颜色:" labelwidth="80px">
|
||||
<div className="colorItemfont dfleac">
|
||||
<span style={{ border: '1px solid #f1f2f3' }} className={this.state.bgColor == '#fff' ? "cicle activecicle" : "cicle"} onClick={() => { this.bgColor('#fff') }}></span>
|
||||
<span className={this.state.bgColor == '#04C160' ? "activecicle cicle cicle6" : "cicle cicle6"} onClick={() => { this.bgColor('#04C160') }}></span>
|
||||
<span className={this.state.bgColor == '#AE99D3' ? "activecicle cicle cicle3" : "cicle cicle3"} onClick={() => { this.bgColor('#AE99D3') }}></span>
|
||||
<span className={this.state.bgColor == '#FACD6A' ? "activecicle cicle cicle4" : "cicle cicle4"} onClick={() => { this.bgColor('#FACD6A') }}></span>
|
||||
<span className={this.state.bgColor == '#FE7962' ? "activecicle cicle cicle5" : "cicle cicle5"} onClick={() => { this.bgColor('#FE7962') }}></span>
|
||||
<span style={{ border: '1px solid #f1f2f3' }} className={this.state.bgColor == '#fff' ? "cicle activecicle" : "cicle"} onClick={() => { this.bgColorFn('#fff') }}></span>
|
||||
<span className={this.state.bgColor == '#04C160' ? "activecicle cicle cicle6" : "cicle cicle6"} onClick={() => { this.bgColorFn('#04C160') }}></span>
|
||||
<span className={this.state.bgColor == '#AE99D3' ? "activecicle cicle cicle3" : "cicle cicle3"} onClick={() => { this.bgColorFn('#AE99D3') }}></span>
|
||||
<span className={this.state.bgColor == '#FACD6A' ? "activecicle cicle cicle4" : "cicle cicle4"} onClick={() => { this.bgColorFn('#FACD6A') }}></span>
|
||||
<span className={this.state.bgColor == '#FE7962' ? "activecicle cicle cicle5" : "cicle cicle5"} onClick={() => { this.bgColorFn('#FE7962') }}></span>
|
||||
<div className="selfset">
|
||||
<ColorPicker className="setbgColor" color={this.state.bgColor} onChange={this.handleChange1} />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,104 +1,206 @@
|
|||
import React from 'react';
|
||||
import React from 'react';
|
||||
|
||||
import "./main.less"
|
||||
|
||||
import "../../../assets/comm.css"
|
||||
|
||||
import './goodstemplate.less'
|
||||
|
||||
import SearchBarView from './couponConfig/searchBar' //商品详情搜索栏
|
||||
|
||||
import BottomBarView from './couponConfig/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: '',
|
||||
|
||||
this.state={
|
||||
|
||||
clientY:0,
|
||||
|
||||
selectDom:'',
|
||||
|
||||
icon:''
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
opendescFn() {
|
||||
|
||||
this.props.opendesc(true)
|
||||
|
||||
}
|
||||
customComponent(e, name, icon) {
|
||||
|
||||
customComponent(e,name,icon){
|
||||
|
||||
//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 });
|
||||
if (name == 'searchBar') {
|
||||
this.setState({ clientY: 0 });
|
||||
|
||||
let b=this.refs[name];
|
||||
|
||||
let offset_top=this.refs[name].getBoundingClientRect().top;
|
||||
|
||||
this.setState({clientY:(offset_top-125),selectDom:name,icon:icon});
|
||||
|
||||
if(name=='searchBar'){
|
||||
|
||||
this.setState({clientY:0});
|
||||
|
||||
}
|
||||
if (name == 'bottomBar') {
|
||||
this.setState({ clientY: 600 });
|
||||
|
||||
if(name=='bottomBar'){
|
||||
|
||||
this.setState({clientY:600});
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
deleteFn() {
|
||||
let selectDom = this.state.selectDom;//需删除组件名称
|
||||
|
||||
deleteFn(){
|
||||
|
||||
let selectDom=this.state.selectDom;//需删除组件名称
|
||||
|
||||
Sweetalert.confirm({
|
||||
title: '确认信息',
|
||||
|
||||
title:'确认信息',
|
||||
|
||||
content: <p>确认删除该模块？</p>,
|
||||
onConfirm: () => {
|
||||
this.setState({ selectDom: '' });
|
||||
Bus.emit('componentLibClose', selectDom)
|
||||
},
|
||||
onCancel: () => {
|
||||
|
||||
onConfirm:()=>{
|
||||
|
||||
this.setState({selectDom:''});
|
||||
|
||||
Bus.emit('componentLibClose',selectDom)
|
||||
|
||||
},
|
||||
|
||||
onCancel:()=>{
|
||||
|
||||
|
||||
|
||||
},
|
||||
|
||||
parentComponent: this
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
render() {
|
||||
let goodsConfig = this.props.goodsdata;
|
||||
let {backgroundImg,search,picture,title,bottomBar}=goodsConfig;
|
||||
let naVisual=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:backgroundImg && backgroundImg.bgImg ? `url('${backgroundImg.bgImg}') center center /cover` :backgroundImg.bgColor }}>
|
||||
|
||||
<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' }}>
|
||||
|
||||
{
|
||||
search && search.iswitch ?
|
||||
<div onClick={e => this.customComponent(e, 'search', 'marketing-sousuolan-')} className={this.state.selectDom == 'search' ? 'selectBorder' : ''} ref="search"><SearchBarView searchConfig={search} /></div> : null
|
||||
|
||||
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} />
|
||||
|
||||
}
|
||||
|
||||
{
|
||||
picture && picture.iswitch ? <div onClick={e => this.customComponent(e, 'picture', 'marketing-tupian')} ref="picture" className={this.state.selectDom == 'picture' ? 'selectBorder' : ''}><img src={picture.img} alt="" className="picture" /></div> : null
|
||||
|
||||
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
|
||||
|
||||
}
|
||||
|
||||
{
|
||||
title && title.iswitch && title.comstyle == 1 ? <div onClick={e => this.customComponent(e, 'title', 'marketing-fuwenbenkuang')} ref="title" className={this.state.selectDom == 'title' ? 'selectBorder' : ''}>
|
||||
<div className={title.textAlign + ' content-title ' +title.fontSize} style={{ color: title.fontColor, fontWeight: 'bold' }}>{title.text}</div></div> : null
|
||||
}
|
||||
{
|
||||
title && title.iswitch && title.comstyle == 2 ? <div onClick={e => this.customComponent(e, 'title', 'marketing-fuwenbenkuang')} ref="title" className={this.state.selectDom == 'title' ? 'selectBorder' : ''}>
|
||||
<img src={title.pic} className="title-pic" />
|
||||
</div> : null
|
||||
}
|
||||
{
|
||||
(title && title.iswitch && title.text||title.pic) || picture && picture.iswitch && 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 }}>立即兑换</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
|
||||
}
|
||||
{
|
||||
bottomBar && bottomBar.iswitch&&naVisual.length>1 ? <div ref="bottomBar" onClick={e => this.customComponent(e, 'bottomBar', 'marketing-list')} className={this.state.selectDom == 'bottomBar' ? 'selectBottomBorder' : ''}><BottomBarView bottomBarConfig={bottomBar} /></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
|
||||
|
||||
}
|
||||
{
|
||||
this.state.selectDom ? <div className="delete-component" style={{ top: this.state.clientY }}>
|
||||
<i className={'marketing ' + this.state.icon}></i>
|
||||
|
||||
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 }}>立即兑换</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}}>
|
||||
|
||||
<i className={'marketing '+this.state.icon}></i>
|
||||
|
||||
<b className="split">|</b>
|
||||
|
||||
<span className="del-color" onClick={this.deleteFn.bind(this)}>删除</span>
|
||||
</div> : null
|
||||
|
||||
</div>:null
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
)
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,22 +1,8 @@
|
|||
import React from 'react'
|
||||
import './main.less'
|
||||
import '../../../assets/comm.css'
|
||||
import {
|
||||
Notify,
|
||||
BlockLoading,
|
||||
Button,
|
||||
RadioGroup,
|
||||
RadioButton
|
||||
} from 'zent'
|
||||
import {
|
||||
uploadImg,
|
||||
handelResponse,
|
||||
addTheme,
|
||||
putMyTheme,
|
||||
putTheme,
|
||||
putSystemTemplate,
|
||||
addSystemTemplate
|
||||
} from '../../../assets/api.js'
|
||||
import {Notify,BlockLoading,Button,RadioGroup,RadioButton} from 'zent'
|
||||
import {uploadImg,handelResponse,addTheme,putMyTheme, putTheme,putSystemTemplate,addSystemTemplate} from '../../../assets/api.js'
|
||||
import Bus from '@/assets/eventBus.js'
|
||||
import PreviewEffect from '../previewEffect/main'
|
||||
import html2canvas from 'html2canvas'
|
||||
|
|
@ -900,13 +886,18 @@ export default class edittemplate extends React.Component {
|
|||
<h4>商品列表页:</h4>
|
||||
<div
|
||||
onClick={() => this.activeChoice(2)}
|
||||
|
||||
className={
|
||||
this.state.activeNavStatus == 2
|
||||
? 'activeNav thumbheader'
|
||||
: 'thumbheader'
|
||||
}>
|
||||
<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' }}>
|
||||
<div className='goodsList-item'>
|
||||
<Goodstemplate
|
||||
opendesc={(c) => this.setState({ activeshow: true })}
|
||||
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
|
||||
}
|
||||
|
|
@ -1000,7 +991,7 @@ export default class edittemplate extends React.Component {
|
|||
{
|
||||
this.state.product_list.bottomBar&&this.state.product_list.bottomBar.iswitch? <BottomBarView bottomBarConfig={this.state.product_list.bottomBar}/>:null
|
||||
}
|
||||
</div>
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
<div className='item'>
|
||||
|
|
|
|||
|
|
@ -589,119 +589,135 @@
|
|||
&.activeNav {
|
||||
border: 5px solid #DDEEFF;
|
||||
}
|
||||
|
||||
.goodsList-item {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
.topbanner {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
.goodstemplate{
|
||||
transform: scale(0.315);
|
||||
transform-origin: 0 0;
|
||||
}
|
||||
>.content-title{
|
||||
position: relative;
|
||||
z-index: 999;
|
||||
height: 20px;
|
||||
padding:0 8px;
|
||||
font-size: 8px;
|
||||
.editor-main{
|
||||
top: 0;
|
||||
img{
|
||||
width: auto!important;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
// .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%;
|
||||
// }
|
||||
|
||||
.susactive_Tip {
|
||||
position: absolute;
|
||||
top: 14px;
|
||||
right: 0;
|
||||
width: 14px;
|
||||
// height: 24px;
|
||||
}
|
||||
// .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;
|
||||
// }
|
||||
|
||||
.preBtn {
|
||||
position: absolute;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
top: 4%;
|
||||
left: 4%;
|
||||
}
|
||||
// .susactive_Tip {
|
||||
// position: absolute;
|
||||
// top: 14px;
|
||||
// right: 0;
|
||||
// width: 14px;
|
||||
// // height: 24px;
|
||||
// }
|
||||
|
||||
.goodsPic,
|
||||
.goodsPicMatrax {
|
||||
width: 90%;
|
||||
margin-left: 5%;
|
||||
position: relative;
|
||||
margin-top: -20px;
|
||||
}
|
||||
// .preBtn {
|
||||
// position: absolute;
|
||||
// width: 14px;
|
||||
// height: 14px;
|
||||
// top: 4%;
|
||||
// left: 4%;
|
||||
// }
|
||||
|
||||
.bottom_exchageBtn {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
margin: 0 5% 3% !important;
|
||||
}
|
||||
// .goodsPic,
|
||||
// .goodsPicMatrax {
|
||||
// width: 90%;
|
||||
// margin-left: 5%;
|
||||
// position: relative;
|
||||
// margin-top: -20px;
|
||||
// }
|
||||
|
||||
.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;
|
||||
// .bottom_exchageBtn {
|
||||
// position: absolute;
|
||||
// bottom: 0;
|
||||
// left: 0;
|
||||
// margin: 0 5% 3% !important;
|
||||
// }
|
||||
|
||||
}
|
||||
.bottomBar-view>li>img{
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
.bottomBar-view>li>span{
|
||||
font-size: 6px;
|
||||
}
|
||||
// .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;
|
||||
// }
|
||||
|
||||
|
||||
}
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue