修改条码页样式

src/pages/BarCode/BarCode.scss

+page {
+  background-color: #eee;
+}
 .BarCode {
   .OrderBox {
     box-sizing: border-box;
@@ -13,9 +16,9 @@
   }
   .BarCodeBox {
     position: relative;
+    background-color: #fff;
     width: 100%;
     height: 260px;
-    overflow: hidden;
     transition: all 0.28s;
     display: flex;
   }
@@ -28,7 +31,6 @@
     flex: 1;
     margin: 26px 52px 46px;
     background-color: #fff;
-    overflow: hidden;
     transition: all 0.28s;
   }
   .BarCodeImgBig {
@@ -36,9 +38,10 @@
   }
   .BarCodeBox-refresh {
     position: absolute;
-    right: 4px;
-    width: 32px;
-    height: 52px;
+    right: 44px;
+    bottom: -58px;
+    width: 176px;
+    height: 96px;
   }
   .BarCodeCav {
     display: none;
@@ -50,16 +53,24 @@
   }
   .toggleBtn {
     position: absolute;
-    right: 0;
-    bottom: 4px;
-    background-color: #6180f4;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    left: 50%;
+    bottom: 0;
+    transform: translate(-50%, 40px);
+    background-color: #fff;
     box-sizing: border-box;
-    width: 82px;
-    height: 40px;
-    line-height: 40px;
-    padding-left: 20px;
-    border-radius: 20px 0 0 20px;
-    font-size: 24px;
-    color: #fff;
+    width: 136px;
+    height: 45px;
+    border-radius: 0 0 20px 20px;
+    .arricon {
+      width: 24px;
+      height: 24px;
+      transition: all 400ms ease-in-out;
+    }
+    .rever {
+      transform: rotate(180deg);
+    }
   }
 }

src/pages/BarCode/BarCode.tsx

 import Taro, { Component } from '@tarojs/taro';
 import { ComponentClass } from 'react';
 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/icon_shuaxin@2x.png';
+
+import RefreshIcon from '../../images/barcode/pic_shuaxin@2x.png';
+import ArrIcon from '../../images/barcode/icon_fangda@2x.png';
+
 import wxbarcode from 'wxbarcode';
 
 import './BarCode.scss';
@@ -250,18 +251,11 @@ class BarCode extends Component {
           className={`BarCodeBox ${showPayOrder ? 'blur' : ''} ${
             showBig ? 'BarCodeBoxBig' : ''
           }`}>
-          {showBig ? (
-            <Image className='bg' src={BarCodeBoxBigBg} />
-          ) : (
-            <Image className='bg' src={BarCodeBoxBg} />
-          )}
-          {!showBig && (
-            <Image
-              className='BarCodeBox-refresh'
-              src={RefreshIcon}
-              onClick={this.refreshCodeBar}
-            />
-          )}
+          <Image
+            className='BarCodeBox-refresh'
+            src={RefreshIcon}
+            onClick={this.refreshCodeBar}
+          />
           {showPayOrder ? null : (
             <View className={`BarCodeImg ${showBig ? 'BarCodeImgBig' : ''}`}>
               <Canvas
@@ -275,7 +269,10 @@ class BarCode extends Component {
             </View>
           )}
           <View className='toggleBtn' onClick={this.toggleBigBarCode}>
-            {showBig ? '缩小' : '放大'}
+            <Image
+              className={`arricon ${showBig ? 'rever' : ''}`}
+              src={ArrIcon}
+            />
           </View>
         </View>
       </View>