feats

src/components/barcode/index.jsx

 import { code128 } from './drawCode'
 import './style.less'
 
+const widthRatio = 0.7;
+const barHeight = 80;
+
 export default (props) => {
 
-  const { width, height, code } = props
+  const { code } = props
 
   const canvasRef = useRef()
   const ctxRef = useRef()
 
-  console.log('---------------->', Taro.getSystemInfoSync().pixelRatio)
+  const sysInfo = useMemo(() => {
+    const { safeArea, pixelRatio } = Taro.getSystemInfoSync()
 
-  const dpr = useMemo(() => Taro.getSystemInfoSync().pixelRatio, [])
-  const size = useMemo(() => ({ width: width * dpr, height: height * dpr }), [width, height, dpr])
+    return {
+      width: safeArea.width,
+      height: safeArea.height,
+      dpr: pixelRatio,
+    }
+  }, [])
+  const size = useMemo(() => ({ width: sysInfo.width * sysInfo.dpr * widthRatio, height: barHeight * sysInfo.dpr }), [sysInfo])
 
   const style = useMemo(() => ({ width: `${size.width}rpx`, height: `${size.height}rpx` }), [size])
 
       query.select('#barCodeCanvas').fields({ node: true }).exec((res) => {
         const canvas = res[0].node
         const ctx = canvas.getContext('2d')
-        canvas.width = size.width
-        canvas.height = size.height
-        ctx.scale(dpr, dpr)
+        canvas.width = sysInfo.width
+        canvas.height = sysInfo.height
+        // ctx.scale(sysInfo.dpr, sysInfo.dpr)
 
         canvasRef.current = canvas;
         ctxRef.current = ctx;
 
         if (code) {
-          code128(ctx, code, size.width, size.height);
+          code128(ctx, code, sysInfo.width, sysInfo.height);
         }
       })
     })
-  }, [code, size, dpr])
+  }, [code, sysInfo])
 
   return (
     <View className='barcode-box' style={style}>
       <Canvas style={style} type='2d' id='barCodeCanvas'></Canvas>
-      <CodeText code={code}/>
+      <CodeText code={code} />
     </View>
   )
 }

src/pages/index/index.jsx

 import Taro from '@tarojs/taro';
 import BarCode from '@/components/barcode'
 import CountDown from '@/components/CountDown'
-// import userBck from '../../assets/userBck.png'
-import barcodeimg from '../../assets/barcodeimg.png'
-
 
 import './style.less'
 
-
-
 export default (props) => {
   const userId = '320888800110023011';
   

src/pages/index/style.less

   &-cententQR {
     box-sizing: border-box;
     width: 95%;
-    height: 65vh;
     // box-shadow: 0px 8px 38px 0px rgba(0, 0, 0, 0.12);
     border-radius: 15px;
     background-color: white;
     position: relative;
     top: -15vh;
     padding: 2em;
+    border: 1px solid rgba(0,0,0, 0.1);
 
     &-Times {
       padding-top: 3vh;
       text-align: center;
-      font-weight: 800;
-      font-size: 60px;
+      font-weight: bold;
+      font-size: 1.8em;
     }
     &-Barcode {
-      width: 80%;
-      height: 18vh;
+      height: 45vh;
       margin: 0 auto;
       position: relative;
-      top: 30%;
-      > Image {
-        width: 100%;
-        height: 100%;
-      }
+      display: flex;
+      justify-content: center;
+      align-items: center;
     }
   }
 }