二维码样式

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
@@ -26,7 +26,7 @@ const QrCode = (props) => {
          }
       })
    }
-   
+
    const imgError = (e) => {
       const img = e.currentTarget;
       img.src = '/assets/images/no_qcoder.png';
@@ -34,50 +34,64 @@ const QrCode = (props) => {
    }
 
    return (
-      <>
-         <Form
-            style={{ display: 'flex', }}
-            onFinish={r => {
-               projectList(r)
-            }}
-         >
-            <Form.Item
-               label='结构物名称'
-               name="projectId"
-               style={{ marginRight: 16, width: 240 }}
-            // initialValue={firmList[0]?.name}
-            >
-               <Select allowClear placeholder="请选择结构物名称" options={firmList} />
-            </Form.Item>
-            <Form.Item
-               label='点位名称'
-               name="name"
-               style={{ marginRight: 16, width: 260 }}
+      <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 => {
+                  projectList(r)
+               }}
             >
-               <Input placeholder="请输入点位名称" allowClear />
-            </Form.Item>
-            <Form.Item wrapperCol={{}}>
-               <Button type="primary" htmlType="submit">
-                  搜索
-               </Button>
-            </Form.Item>
-         </Form>
-         <div >
+               <Form.Item
+                  label='结构物名称'
+                  name="projectId"
+                  style={{ marginRight: 16, width: 240 }}
+               // initialValue={firmList[0]?.name}
+               >
+                  <Select allowClear placeholder="请选择结构物名称" options={firmList} />
+               </Form.Item>
+               <Form.Item
+                  label='点位名称'
+                  name="name"
+                  style={{ marginRight: 16, width: 260 }}
+               >
+                  <Input placeholder="请输入点位名称" allowClear />
+               </Form.Item>
+               <Form.Item wrapperCol={{}}>
+                  <Button type="primary" htmlType="submit">
+                     搜索
+                  </Button>
+               </Form.Item>
+            </Form>
+         </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;
+}