二维码样式

web/client/src/sections/projectRegime/containers/qrCode.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { connect } from 'react-redux';
 import { Form, Input, Select, Button } from 'antd';
-import '../style.less';
+import './qrCode.less';
 
 const QrCode = (props) => {
    const { dispatch, actions } = props
@@ -34,7 +34,13 @@ const QrCode = (props) => {
    }
 
    return (
-      <>
+      <div className='global-main'>
+         <div className='top'>
+            <div className='title'>
+               <span className='line'></span>
+               <span className='cn'>二维码</span>
+               <span className='en'>&nbsp;QRCode</span>
+            </div>
             <Form
                style={{ display: 'flex', }}
                onFinish={r => {
@@ -62,22 +68,30 @@ const QrCode = (props) => {
                   </Button>
                </Form.Item>
             </Form>
-         <div >
+         </div>
+
+         <div>
             {
                tableList?.map(v => {
                   return <div key={v.name + v.id}
-                     style={{ display: 'inline-block', margin: '0 10px 10px 0', border: '1px solid #3c383824' }} >
+                     style={{
+                        display: 'inline-block',
+                        margin: '0 20px 20px 0',
+                        border: '1px solid #3c383824',
+                        borderRadius: '3px'
+                     }}
+                  >
+                     <img src={`/_file-server/${v.qrCode}`} style={{ display: 'inline-block', width: 234 }} onError={imgError} />
                      <div style={{
                         display: 'flex', flexDirection: 'column', padding: '6px 0',
-                        marginLeft: 20, width: 220, borderBottom: '1px solid #3c383824'
+                        width: 220, alignItems: 'center'
                      }}>
-                        <span>结构物名称：{firmList?.filter(u => u.value == v.projectId)[0]?.label}</span>
-                        <span>点位名称：{v.name}</span>
+                        <span className='stru-name'>{firmList?.filter(u => u.value == v.projectId)[0]?.label}</span>
+                        <span className='point-name'>点位名称：{v.name}</span>
                      </div>
-                     <img src={`/_file-server/${v.qrCode}`} style={{ display: 'inline-block', width: 260 }} onError={imgError} />
                      <div style={{
-                        width: 260, height: 60, background: '#e1d4d42e', display: 'flex',
-                        justifyContent: 'center', alignItems: 'center', borderTop: '1px solid #3c383824'
+                        width: 234, height: 60, display: 'flex',
+                        justifyContent: 'center', alignItems: 'center', 
                      }}>
                         <Button type="primary" onClick={() => {
                            const a = document.createElement('a')
@@ -97,7 +111,7 @@ const QrCode = (props) => {
             }
          </div>
 
-      </>
+      </div>
    )
 }
 

web/client/src/sections/projectRegime/containers/qrCode.less

@@ -0,0 +1,44 @@
+.top {
+    display: flex;
+    justify-content: space-between;
+
+    .title {
+        background-color: #fff;
+        display: inline-block;
+
+        .line {
+            display: inline-block;
+            width: 3px;
+            height: 20px;
+            background: #006BE3;
+        }
+
+        .cn {
+            font-family: YouSheBiaoTiHei;
+            font-size: 24px;
+            color: #101531;
+            margin-left: 11px;
+        }
+
+        .en {
+            font-family: D-DINExp-Italic;
+            font-weight: Italic;
+            font-size: 12px;
+            color: #969799;
+        }
+    }
+}
+
+.stru-name {
+    font-family: PingFangSC-Medium;
+    font-weight: 500;
+    font-size: 16px;
+    color: #323233;
+}
+.point-name {
+    font-family: PingFangSC-Regular;
+    font-weight: 400;
+    font-size: 14px;
+    color: #646566;
+    line-height: 18px;
+}