Skip to content

M
max_android_panel
Commit c9fe86ab by Zhang Xin
Options

修改回收UI样式，开发补货UI

parent 53b49060
Showing with 328 additions and 75 deletions
client/components/CommonComponent/ButtonComponent/ButtonComponent.jsx
...@@ -8,11 +8,9 @@ export default class ButtonComponent extends React.Component{ ...@@ -8,11 +8,9 @@ export default class ButtonComponent extends React.Component{
render(){ render(){
let props = this.props; let props = this.props;
let classInfo = props.classInfo && props.classInfo.className ? props.classInfo.className : ''; let {btnContainer="",style={},option=null} = props;
let colorClass = props.classInfo && props.classInfo.colorInfo ? props.classInfo.colorInfo : "col333";
let fontClass = props.classInfo && props.classInfo.fontInfo ? props.classInfo.fontInfo : "font32";
return( return(
<div className={`buttonComponent ${fontClass} ${colorClass} ${classInfo}`} style={props.style} onClick={()=>{props.option()}}> <div className={`buttonComponent ${btnContainer}`} style={style} onClick={()=>{option()}}>
{props.text} {props.text}
</div> </div>
) )
......
client/components/CommonComponent/ButtonComponent/index.css
.buttonComponent{ .buttonComponent{
width: 413px; width: 280px;
height: 80px; height: 80px;
border: 2px solid #e5e5e5; border: 2px solid #e5e5e5;
background-color: #ffffff; background-color: #ffffff;
line-height: 80px; line-height: 80px;
text-align: center; text-align: center;
border-radius: 10px; border-radius: 10px;
color: #333;
} }
......
client/components/CommonComponent/PopupComponent/PopupChildComponent.jsx 0 → 100644
import React from 'react';
require('./index.css')
export default class PopupChildComponent extends React.Component{
constructor(props){
super(props);
}
render(){
let props = this.props;
let {classContainer='',popupTitle=''} = props;
return (
<div className={"popupChildComponent " + classContainer}>
{
popupTitle ? <div className={"popupTitle colfff font36"}>{popupTitle}</div> : null
}
<div className={"popupContent"}>
{this.props.children}
</div>
</div>
)
}
}
\ No newline at end of file
client/components/CommonComponent/PopupComponent/PopupComponent.jsx
...@@ -8,10 +8,9 @@ export default class PopupComponent extends React.Component{ ...@@ -8,10 +8,9 @@ export default class PopupComponent extends React.Component{
render(){ render(){
let {popupInfo} = this.props; let {popupInfo} = this.props;
console.log(popupInfo); let {showPopup=false,popupChild=null} = popupInfo;
let {showPopup=false,classNames='',popupChild=null} = popupInfo;
return ( return (
<div className={"popupComponent " + (showPopup ? ' ' : 'hide ') + classNames}> <div className={"popupComponent " + (showPopup ? ' ' : 'hide ')}>
{popupChild} {popupChild}
</div> </div>
) )
......
client/components/CommonComponent/PopupComponent/index.css
...@@ -48,6 +48,32 @@ ...@@ -48,6 +48,32 @@
} }
.popupChildComponent{
width: 1200px;
height: 800px;
background: #fff;
border-radius: 10px;
left: 50%;
top: 50%;
transform: translate(-50% ,-50%);
position: absolute;
text-align: center;
overflow: hidden;
}
.popupChildComponent .popupTitle{
width: 100%;
background-color: #ff775c;
height: 100px;
line-height: 100px;
}
.popupChildComponent .popupContent{
width: 100%;
}
/*.popupComponent{*/ /*.popupComponent{*/
/*position: absolute;*/ /*position: absolute;*/
/*background: rgba(0,0,0,.6);*/ /*background: rgba(0,0,0,.6);*/
......
client/components/CommonComponent/SkuInfoComponent/index.css
...@@ -15,6 +15,7 @@ ...@@ -15,6 +15,7 @@
background: #fff; background: #fff;
text-align: center; text-align: center;
margin-right: 40px; margin-right: 40px;
border:1px solid #e5e5e5;
} }
.skuInfoComponent ul>li{ .skuInfoComponent ul>li{
display: flex; display: flex;
......
client/components/RecoveryComponent/RecoverySecondPage/RecoverySecondPage.jsx
import React from 'react'; import React from 'react';
import Button from '../../CommonComponent/ButtonComponent/ButtonComponent' import Button from '../../CommonComponent/ButtonComponent/ButtonComponent'
import SkuInfoComponent from '../../CommonComponent/SkuInfoComponent/SkuInfoComponent' import SkuInfoComponent from '../../CommonComponent/SkuInfoComponent/SkuInfoComponent'
import PopModel from '../../CommonComponent/PopupComponent/PopupChildComponent'
require('./index.css') require('./index.css')
export default class RecoverySecondPage extends React.Component{ export default class RecoverySecondPage extends React.Component{
constructor(props){ constructor(props){
...@@ -20,46 +21,47 @@ export default class RecoverySecondPage extends React.Component{ ...@@ -20,46 +21,47 @@ export default class RecoverySecondPage extends React.Component{
} }
getPopInfo(){ getPopInfo(){
let btnDom = <Button key={"recoveryContainerCorrectQrcode"} style={{'width':"100%","marginTop":"36%"}} text={"已放入"} option={this.putSkuToBox}/> let btnDom = <Button btnContainer={"recoveryContainerQrcode font32 backff775c colfff"} key={"recoveryContainerCorrectQrcode"} text={"已放入"} option={this.putSkuToBox}/>
return ( return (
<div className={"recoveryPopInfo"}> <PopModel popupTitle={"货品匹配成功"} classContainer={"recoveryPopInfo"}>
<div className={"icon iconfont icon-correct font100"} /> <div className={"icon iconfont icon-correct font150 col27ce61"} />
<div className={"text font40 col000"}> <div className={"text font40 col000"}>
<p>请将货品放入回收箱</p> <p>请将货品放入回收箱</p>
</div> </div>
<div className={"btn"}> <div className={"btn"}>
{btnDom} {btnDom}
</div> </div>
</div> </PopModel>
) )
} }
wrongQrcode(){ wrongQrcode(){
//拿错货品 //拿错货品
let {showPopup,hidePopup} = this.props; let {showPopup,hidePopup} = this.props;
let btnDom = <Button key={"recoveryContainerCorrectQrcode"} style={{'width':"100%","marginTop":"36%"}} text={"关闭"} option={hidePopup}/> let btnDom = <Button btnContainer={"recoveryContainerQrcode font32"} key={"recoveryContainerWrongQrcode"} text={"关闭"} option={hidePopup}/>
let popDom = let popDom =
<div className={"recoveryPopInfo"}> <PopModel popupTitle={"遇到问题-货品不对"} classContainer={"recoveryPopInfo"}>
<div className={"icon iconfont icon-wrong font100"} /> <div className={"icon iconfont icon-wrong font150"} />
<div className={"text font40 col000"}> <div className={"text font40 col000"}>
<p>您拿错货品了，请放回货架！</p> <p>您拿错货品了，请放回货架！</p>
</div> </div>
<div className={"btn"}> <div className={"btn"}>
{btnDom} {btnDom}
</div> </div>
</div>; </PopModel>
showPopup(popDom); showPopup({popupChild:popDom});
} }
wrongSku(){ wrongSku(){
//货道商品不符 //货道商品不符
let {showPopup,hidePopup} = this.props; let {showPopup,hidePopup} = this.props;
let marginTop = '40px'; let marginTop = '40px';
let btnDom1 = <Button key={"recoveryContainerShelfWrong1"} style={{'width':"100%"}} text={"货品不符"} option={this.uploadWrongSku}/> let btnDom1 = <Button btnContainer={"recoveryPopInfoWrongSkuBtn1 font32"} key={"recoveryContainerShelfWrong1"} style={{'width':"100%"}} text={"货品不符"} option={this.uploadWrongSku}/>
let btnDom2 = <Button key={"recoveryContainerShelfWrong2"} style={{'width':"100%","marginTop":marginTop}} text={"关闭窗口"} option={hidePopup}/> let btnDom2 = <Button btnContainer={"recoveryPopInfoWrongSkuBtn2 backff775c colfff font32"} key={"recoveryContainerShelfWrong2"} style={{'width':"100%","marginTop":marginTop}} text={"关闭窗口"} option={hidePopup}/>
let popDom = let popDom =
<div className={"recoveryPopInfo"}> <PopModel popupTitle={"遇到问题-货品不符"} classContainer={"recoveryPopInfo"}>
<div className={"icon iconfont icon-exclamation font100"} /> <div className={"icon iconfont icon-exclamation font150 colf5a623"} />
<div className={"text font40 col000"}> <div className={"text font40 col000"}>
<p>请确认货道信息，不要数错货道哦</p> <p>请确认货道信息，不要数错货道哦</p>
</div> </div>
...@@ -67,14 +69,14 @@ export default class RecoverySecondPage extends React.Component{ ...@@ -67,14 +69,14 @@ export default class RecoverySecondPage extends React.Component{
{btnDom1} {btnDom1}
{btnDom2} {btnDom2}
</div> </div>
</div>; </PopModel>;
showPopup(popDom); showPopup({popupChild:popDom});
} }
correctQrcode(){ correctQrcode(){
let {showPopup} = this.props; let {showPopup} = this.props;
let popDom = this.getPopInfo(); let popDom = this.getPopInfo();
showPopup(popDom); showPopup({popupChild:popDom});
} }
putSkuToBox(){ putSkuToBox(){
...@@ -96,20 +98,15 @@ export default class RecoverySecondPage extends React.Component{ ...@@ -96,20 +98,15 @@ export default class RecoverySecondPage extends React.Component{
render(){ render(){
let props = this.props; let props = this.props;
let style = {'width':"410px","background":"#ff7860","display": "inline-block"}
let classInfo = {
colorInfo : "colfff",
className : ''
};
let {headerInfo} = props; let {headerInfo} = props;
return( return(
<div className={"RecoverySecondPage"}> <div className={"RecoverySecondPage commonPage"}>
<div className={"title font40 col333"}>任务目标：请将该货道货品进行扫码回收</div> <div className={"title font40 col333 pageTitle"}>任务目标：请将该货道货品进行扫码回收</div>
<div className={"box"}> <div className={"box pagebox"}>
<SkuInfoComponent style={{'display':'flex'}} skuInfo={headerInfo.taskList || {}}/> <SkuInfoComponent style={{'display':'flex'}} skuInfo={headerInfo.taskList || {}}/>
<div className={"btn"}> <div className={"btn"}>
<Button key={"RecoverySecondPageBtn"} classInfo={classInfo} style={style} text={'扫码回收'} option={this.scanQrcode}/> <Button btnContainer={"recoverySecondPageBtn font32 colfff"} key={"RecoverySecondPageBtn"} text={'扫码回收'} option={this.scanQrcode}/>
<div className={"text colff775c font28"} onClick={()=>this.wrongSku()}>货品不符？</div> <div className={"text colff775c font28"} onClick={()=>this.wrongQrcode()}>货品不符？</div>
</div> </div>
</div> </div>
</div> </div>
......
client/components/RecoveryComponent/RecoverySecondPage/index.css
.RecoverySecondPage{ .RecoverySecondPage{
width: 100%;
height: 100%;
text-align: center;
overflow: hidden;
}
.RecoverySecondPage .title{
margin: 60px 0;
} }
.RecoverySecondPage .box{ .RecoverySecondPage .box{
width: 90%;
height: 60.7%;
background: #f2f2f2;
border:2px solid #e5e5e5;
position: relative;
left: 50%;
transform: translateX(-50%);
overflow: hidden;
} }
.RecoverySecondPage .btn{ .RecoverySecondPage .btn{
position: absolute; position: absolute;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
bottom: 7%; bottom: 10%;
} }
.RecoverySecondPage .btn .text{ .RecoverySecondPage .btn .text{
margin-top: 40px; margin-top: 40px;
}
.RecoverySecondPage .recoverySecondPageBtn{
background: #ff7860;
width: 410px;
} }
\ No newline at end of file
client/containers/PageContainer/PageContainer.jsx
...@@ -27,7 +27,7 @@ import HomePage from '../HomePageContainer/HomePageContainer' ...@@ -27,7 +27,7 @@ import HomePage from '../HomePageContainer/HomePageContainer'
import TakeStokeContainer from '../TakeStokeContainer/TakeStokeContainer' import TakeStokeContainer from '../TakeStokeContainer/TakeStokeContainer'
import BreakageContainer from '../BreakageContainer/BreakageConatiner' import BreakageContainer from '../BreakageContainer/BreakageConatiner'
import RecoveryPage from '../RecoveryContainer/RecoveryContainer' import RecoveryPage from '../RecoveryContainer/RecoveryContainer'
import AllClassify from '../AllClassifyContainer/AllClassifyContainer' import ReplenishContainer from '../ReplenishContainer/ReplenishContainer'
/*二期引用 end*/ /*二期引用 end*/
import {on,remove} from '../../util/event'; import {on,remove} from '../../util/event';
...@@ -41,7 +41,8 @@ const headerStatus = CONFIG.headerStatus; ...@@ -41,7 +41,8 @@ const headerStatus = CONFIG.headerStatus;
const defaultPopupInfo = { const defaultPopupInfo = {
showPopup : false, //是否显示弹窗 showPopup : false, //是否显示弹窗
popupChild : null, // 自定义弹窗内部htmls popupChild : null, // 自定义弹窗内部htmls,
popupTitle : ''
}; };
const initPage = 13; const initPage = 13;
...@@ -55,7 +56,7 @@ class PageContainer extends React.Component { ...@@ -55,7 +56,7 @@ class PageContainer extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
showPage : showPage[initPage], showPage : showPage[11],
lastPage : '', lastPage : '',
page : null, page : null,
popupInfo : defaultPopupInfo, popupInfo : defaultPopupInfo,
...@@ -225,7 +226,7 @@ class PageContainer extends React.Component { ...@@ -225,7 +226,7 @@ class PageContainer extends React.Component {
this.changePages(CONFIG.showPage[10]); this.changePages(CONFIG.showPage[10]);
break; break;
case 4 : case 4 :
this.changePages(CONFIG.showPage[13]); this.changePages(CONFIG.showPage[11]);
break; break;
} }
} }
...@@ -243,7 +244,7 @@ class PageContainer extends React.Component { ...@@ -243,7 +244,7 @@ class PageContainer extends React.Component {
classNames : className classNames : className
}) })
this.showPopup(showErrorDom) this.showPopup({popupChild:showErrorDom})
} }
hideError(){ hideError(){
...@@ -334,7 +335,7 @@ class PageContainer extends React.Component { ...@@ -334,7 +335,7 @@ class PageContainer extends React.Component {
popupText : '您是否还在店铺准备执行您的任务', popupText : '您是否还在店铺准备执行您的任务',
popupButtons:[btnDom,clockDom] popupButtons:[btnDom,clockDom]
}) })
this.showPopup(countBackDom) this.showPopup({popupChild:countBackDom})
} }
},this.count); },this.count);
} }
...@@ -384,7 +385,7 @@ class PageContainer extends React.Component { ...@@ -384,7 +385,7 @@ class PageContainer extends React.Component {
this.setState({ this.setState({
popupInfo : defaultPopupInfo popupInfo : defaultPopupInfo
},()=>{ },()=>{
this.showPopup(showAlarmDom); this.showPopup({popupChild:showAlarmDom});
this.playAlarmMusic() this.playAlarmMusic()
}) })
...@@ -408,7 +409,7 @@ class PageContainer extends React.Component { ...@@ -408,7 +409,7 @@ class PageContainer extends React.Component {
popupText : '关门倒数，请尽快站到设备外关闭设备门', popupText : '关门倒数，请尽快站到设备外关闭设备门',
popupButtons:[clockDom] popupButtons:[clockDom]
}); });
this.showPopup(beginCloseDoorDom) this.showPopup({popupChild:beginCloseDoorDom})
}) })
} }
...@@ -451,10 +452,9 @@ class PageContainer extends React.Component { ...@@ -451,10 +452,9 @@ class PageContainer extends React.Component {
} }
showPopup(info){ showPopup(info){
let popupInfo = Object.assign({},defaultPopupInfo); let popupInfo = Object.assign({},defaultPopupInfo,info);
if(info){ if(info.popupChild){
popupInfo.showPopup = true; //以防未设置显示弹窗，做此判断。 popupInfo.showPopup = true; //以防未设置显示弹窗，做此判断。
popupInfo.popupChild = info; //以防未设置显示弹窗，做此判断。
} }
this.setState({ this.setState({
popupInfo : popupInfo, popupInfo : popupInfo,
...@@ -601,6 +601,12 @@ class PageContainer extends React.Component { ...@@ -601,6 +601,12 @@ class PageContainer extends React.Component {
wrongShelf={()=>dispatch(wrongShelf())} wrongShelf={()=>dispatch(wrongShelf())}
/>; />;
break; break;
case showPage[11]:
pages = <ReplenishContainer
headerInfo = {state.commonInfo}
showPopup={(info)=>this.showPopup(info)}
hidePopup={()=>this.hidePopup()}
/>
/*以下是二期页面 end*/ /*以下是二期页面 end*/
} }
return pages; return pages;
......
client/containers/RecoveryContainer/index.css
.recoveryPopInfo{
width: 800px;
height: 600px;
background: #fff;
border-radius: 10px;
left: 50%;
top: 50%;
transform: translate(-50% ,-50%);
position: absolute;
text-align: center;
}
.recoveryPopInfo .icon{ .recoveryPopInfo .icon{
margin: 70px 0 ; margin: 50px 0 60px ;
color: #27ce61;
} }
.recoveryPopInfo .icon.icon-wrong{ .recoveryPopInfo .icon.icon-wrong{
color: #ff0000; color: #ff0000;
...@@ -24,5 +12,8 @@ ...@@ -24,5 +12,8 @@
position: relative; position: relative;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
width: 410px; }
.recoveryPopInfo .btn .recoveryContainerQrcode{
display: inline-block;
margin-top: 10%;
} }
\ No newline at end of file
client/containers/ReplenishContainer/ReplenishContainer.jsx 0 → 100644
import React from 'react';
import Header from '../../components/CommonComponent/HeaderComponent/HeaderComponent';
import LeftContainer from '../LeftContainer/LeftContainer';
import RightContainer from '../RightContainer/RightContainer';
import Button from '../../components/CommonComponent/ButtonComponent/ButtonComponent'
import PopModel from '../../components/CommonComponent/PopupComponent/PopupChildComponent'
require('./index.css');
export default class ReplenishContainer extends React.Component{
constructor(props){
super(props);
}
componentWillMount(){
}
wrongQrcode(){
//货道商品不符
let {showPopup,hidePopup} = this.props;
let btnDom1 = <Button btnContainer={"replenishPopInfoWrongSkuBtn font32"} key={"replenishContainerShelfWrong1"} text={"确认扫描完毕"} option={this.uploadWrongSku}/>
let popDom =
<PopModel popupTitle={"扫描货品异常"} classContainer={"replenishPopInfo"}>
<div className={"icon iconfont icon-exclamation font150 colf5a623"} />
<div className={"text font40 col000"}>
<p>您需要补完【XXX】，才能补其它货品</p>
</div>
<div className={"btn"}>
{btnDom1}
<div className={"tip"}>忘记该货品的样子</div>
</div>
</PopModel>;
showPopup({popupChild:popDom});
}
getSkuDom(){
return(
<div className={"replenishSkuInfo"}>
<div className={"skuName font30 col333"}>商品名称：雪碧</div>
<div className={"skuInfo"}>
<div className={"skuImg"}>
<img src="" alt=""/>
</div>
<div className={"areaImg"}>
<img src="" alt=""/>
</div>
<div className={"skuPos col333 font30"}>
<ul>
<li>所在区域：A区域<span className={"colff775c"}>区域照片</span></li>
<li>一个字一个字一个字一个字一个字一个字</li>
<li>一个字</li>
</ul>
</div>
</div>
</div>
)
}
scanQrcode(){
console.log("扫描下一个")
}
scanOver(){
console.log("扫描结束")
}
getPage(){
return (
<div className={"replenishPage commonPage"}>
<div className={"title font40 col333 pageTitle"}>请将货品放到对应货架上
<span className={"font26 progressText"}>补货进度：3/30</span>
</div>
<div className={"pagebox"}>
{this.getSkuDom()}
<div className={"btn pageBtn"}>
<div className={"tips colff775c font30"}>遇到问题？</div>
<Button btnContainer={"replenishPageBtn1 font32"} key={"replenishPageBtn1"} text={'扫描工作结束'} option={this.scanOver}/>
<Button btnContainer={"replenishPageBtn2 font32 colfff backff775c"} key={"replenishPageBtn2"} text={'扫描下一个'} option={this.scanQrcode}/>
</div>
</div>
</div>
)
}
render(){
let props = this.props;
return (
<div className={"replenishContainer"}>
{
props.headerInfo && props.headerInfo.storeInfo ?
<Header headerInfo={props.headerInfo}/> : null
}
<LeftContainer leftInfo={props.headerInfo}/>
<RightContainer>
{this.getPage()}
</RightContainer>
</div>
)
}
}
\ No newline at end of file
client/containers/ReplenishContainer/index.css 0 → 100644
.replenishContainer{
position: relative;
width: 100%;
height: 100%;
}
.replenishContainer .progressText{
position: absolute;
right: 40px;
}
.replenishSkuInfo{
padding-left: 15%;
}
.replenishSkuInfo .skuName{
text-align: left;
}
.replenishSkuInfo .skuInfo{
text-align: left;
margin-top: 60px;
display: flex;
align-items: center;
}
.replenishSkuInfo .skuInfo .skuImg{
width: 200px;
height: 200px;
border: 1px solid #e5e5e5;
}
.replenishSkuInfo .skuInfo .areaImg{
width: 200px;
height: 200px;
border: 1px solid #e5e5e5;
margin: 0 80px 0 60px;
}
.replenishSkuInfo .skuInfo .skuPos{
line-height: 46px;
flex: 1;
}
.replenishPage .btn{
margin-top: 20%;
position: relative;
}
.replenishPage .btn .tips{
display: inline-block;
position: absolute;
left: 0;
bottom: 0;
}
.replenishPage .btn .replenishPageBtn1{
margin-right: 40px;
display: inline-block;
}
.replenishPage .btn .replenishPageBtn2{
display: inline-block;
}
\ No newline at end of file
client/css/color.css
...@@ -27,6 +27,15 @@ ...@@ -27,6 +27,15 @@
.colff775c{ .colff775c{
color: #ff775c!important; color: #ff775c!important;
} }
.colf5a623{
color: #f5a623!important;
}
.col27ce61{
color: #27ce61!important;
}
.border-green{ .border-green{
border-color: #26ce61!important; border-color: #26ce61!important;
} }
.backff775c{
background-color: #ff775c!important;
}
\ No newline at end of file
client/css/common.css
...@@ -38,4 +38,29 @@ body,.ant-modal-mask , .ant-modal-wrap ,.totalClass,.storeManagerQrcodeComponent ...@@ -38,4 +38,29 @@ body,.ant-modal-mask , .ant-modal-wrap ,.totalClass,.storeManagerQrcodeComponent
.troubleSwiperContainer .swiper-slide , .productPostionContainer .swiper-slide,.damageSwiperContainer .swiper-slide , .editProblemSwiperContainer .swiper-slide{ .troubleSwiperContainer .swiper-slide , .productPostionContainer .swiper-slide,.damageSwiperContainer .swiper-slide , .editProblemSwiperContainer .swiper-slide{
width: auto!important; width: auto!important;
}
.commonPage{
width: 90%;
height: 100%;
text-align: center;
overflow: hidden;
display: flex;
flex-direction: column;
transform: translateX(5%);
}
.commonPage .pageTitle{
width: 100%;
background: #f2f2f2;
border: 2px solid #e5e5e5;
line-height: 100px;
white-space: nowrap;
margin: 50px 0;
position: relative;
}
.commonPage .pagebox{
flex: 1;
width: 100%;
/*position: relative;*/
overflow: hidden;
} }
\ No newline at end of file
client/css/font.css
...@@ -19,6 +19,7 @@ body{ ...@@ -19,6 +19,7 @@ body{
@value font28: 28px; @value font28: 28px;
@value font30: 30px; @value font30: 30px;
@value font32: 32px; @value font32: 32px;
@value font36: 36px;
@value font40: 40px; @value font40: 40px;
@value font42: 42px; @value font42: 42px;
@value font44: 44px; @value font44: 44px;
...@@ -28,6 +29,7 @@ body{ ...@@ -28,6 +29,7 @@ body{
@value font70: 70px; @value font70: 70px;
@value font90: 90px; @value font90: 90px;
@value font100: 100px; @value font100: 100px;
@value font150: 150px;
.font10 { .font10 {
font-size: calc(font10 * var(--base)) !important; font-size: calc(font10 * var(--base)) !important;
...@@ -140,6 +142,17 @@ body{ ...@@ -140,6 +142,17 @@ body{
[data-dpr="3"] .font32 { [data-dpr="3"] .font32 {
font-size: calc(var(--font3) * font32 * var(--base)) !important; font-size: calc(var(--font3) * font32 * var(--base)) !important;
} }
.font36 {
font-size: calc(font36 * var(--base)) !important;
}
[data-dpr="2"] .font36 {
font-size: calc(var(--font2) * font36 * var(--base)) !important;
}
[data-dpr="3"] .font36 {
font-size: calc(var(--font3) * font36 * var(--base)) !important;
}
.font40 { .font40 {
font-size: calc(font40 * var(--base)) !important; font-size: calc(font40 * var(--base)) !important;
...@@ -240,4 +253,16 @@ body{ ...@@ -240,4 +253,16 @@ body{
[data-dpr="3"] .font100 { [data-dpr="3"] .font100 {
font-size: calc(var(--font3) * font100 * var(--base)) !important; font-size: calc(var(--font3) * font100 * var(--base)) !important;
}
.font150 {
font-size: calc(font150 * var(--base)) !important;
}
[data-dpr="2"] .font150 {
font-size: calc(var(--font2) * font150 * var(--base)) !important;
}
[data-dpr="3"] .font150 {
font-size: calc(var(--font3) * font150 * var(--base)) !important;
} }
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment