Skip to content

W
wx-school-app
Commit eb8f5c21 by 姜雷
Options

修改条码页样式

parent c97ea5b3
Showing with 39 additions and 31 deletions
src/pages/BarCode/BarCode.scss
page {
background-color: #eee;
}
.BarCode { .BarCode {
.OrderBox { .OrderBox {
box-sizing: border-box; box-sizing: border-box;
...@@ -13,9 +16,9 @@ ...@@ -13,9 +16,9 @@
} }
.BarCodeBox { .BarCodeBox {
position: relative; position: relative;
background-color: #fff;
width: 100%; width: 100%;
height: 260px; height: 260px;
overflow: hidden;
transition: all 0.28s; transition: all 0.28s;
display: flex; display: flex;
} }
...@@ -28,7 +31,6 @@ ...@@ -28,7 +31,6 @@
flex: 1; flex: 1;
margin: 26px 52px 46px; margin: 26px 52px 46px;
background-color: #fff; background-color: #fff;
overflow: hidden;
transition: all 0.28s; transition: all 0.28s;
} }
.BarCodeImgBig { .BarCodeImgBig {
...@@ -36,9 +38,10 @@ ...@@ -36,9 +38,10 @@
} }
.BarCodeBox-refresh { .BarCodeBox-refresh {
position: absolute; position: absolute;
right: 4px; right: 44px;
width: 32px; bottom: -58px;
height: 52px; width: 176px;
height: 96px;
} }
.BarCodeCav { .BarCodeCav {
display: none; display: none;
...@@ -50,16 +53,24 @@ ...@@ -50,16 +53,24 @@
} }
.toggleBtn { .toggleBtn {
position: absolute; position: absolute;
right: 0; display: flex;
bottom: 4px; justify-content: center;
background-color: #6180f4; align-items: center;
left: 50%;
bottom: 0;
transform: translate(-50%, 40px);
background-color: #fff;
box-sizing: border-box; box-sizing: border-box;
width: 82px; width: 136px;
height: 40px; height: 45px;
line-height: 40px; border-radius: 0 0 20px 20px;
padding-left: 20px; .arricon {
border-radius: 20px 0 0 20px; width: 24px;
font-size: 24px; height: 24px;
color: #fff; transition: all 400ms ease-in-out;
}
.rever {
transform: rotate(180deg);
}
} }
} }
src/pages/BarCode/BarCode.tsx
import Taro, { Component } from '@tarojs/taro'; import Taro, { Component } from '@tarojs/taro';
import { ComponentClass } from 'react'; import { ComponentClass } from 'react';
import { View, Canvas, Image } from '@tarojs/components'; import { View, Canvas, Image } from '@tarojs/components';
import BarCodeBoxBg from '../../images/barcode/tiaoxingma-1.png';
import BarCodeBoxBigBg from '../../images/barcode/tiaoxingma-2.png'; import RefreshIcon from '../../images/barcode/pic_shuaxin@2x.png';
import RefreshIcon from '../../images/barcode/icon_shuaxin@2x.png'; import ArrIcon from '../../images/barcode/icon_fangda@2x.png';
import wxbarcode from 'wxbarcode'; import wxbarcode from 'wxbarcode';
import './BarCode.scss'; import './BarCode.scss';
...@@ -250,18 +251,11 @@ class BarCode extends Component { ...@@ -250,18 +251,11 @@ class BarCode extends Component {
className={`BarCodeBox ${showPayOrder ? 'blur' : ''} ${ className={`BarCodeBox ${showPayOrder ? 'blur' : ''} ${
showBig ? 'BarCodeBoxBig' : '' showBig ? 'BarCodeBoxBig' : ''
}`}> }`}>
{showBig ? ( <Image
<Image className='bg' src={BarCodeBoxBigBg} /> className='BarCodeBox-refresh'
) : ( src={RefreshIcon}
<Image className='bg' src={BarCodeBoxBg} /> onClick={this.refreshCodeBar}
)} />
{!showBig && (
<Image
className='BarCodeBox-refresh'
src={RefreshIcon}
onClick={this.refreshCodeBar}
/>
)}
{showPayOrder ? null : ( {showPayOrder ? null : (
<View className={`BarCodeImg ${showBig ? 'BarCodeImgBig' : ''}`}> <View className={`BarCodeImg ${showBig ? 'BarCodeImgBig' : ''}`}>
<Canvas <Canvas
...@@ -275,7 +269,10 @@ class BarCode extends Component { ...@@ -275,7 +269,10 @@ class BarCode extends Component {
</View> </View>
)} )}
<View className='toggleBtn' onClick={this.toggleBigBarCode}> <View className='toggleBtn' onClick={this.toggleBigBarCode}>
{showBig ? '缩小' : '放大'} <Image
className={`arricon ${showBig ? 'rever' : ''}`}
src={ArrIcon}
/>
</View> </View>
</View> </View>
</View> </View>
......
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