jiangxucong
/
dq-osi
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

新增页面：巡检管理—-巡检点管理—-生成二维码与扫码巡查

Browse Source
main
yupeng 3 hours ago
parent 811b665424
commit b2399bbe12
5 changed files with 787 additions and 223 deletions
Show Stats Download Patch File Download Diff File

96
src/assets/img/QRCodeScanning.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 50 KiB

196
src/assets/img/progress3.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 6.1 MiB

103
src/assets/img/scanningProcessDemonstration.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 1.1 MiB

609
src/pages/inspectionmanagement/components/Inspectionrecords/inspectionRecords.js
Unescape Escape View File

@ -1,6 +1,8 @@
import React, { useState } from 'react';
import { Button, Tree, Table, Pagination, Checkbox, Input, Select, DatePicker, Tag, Space } from 'antd';
import QRCodeScanning from '../../../../assets/img/QRCodeScanning.svg';
import scanningProcessDemonstration from '../../../../assets/img/scanningProcessDemonstration.svg';
import { SearchOutlined, PlusOutlined } from '@ant-design/icons';
import btnImg3 from '@/assets/img/planBtn3.png'
@ -8,6 +10,8 @@ const { Option } = Select;
import styles from './inspectionRecords.less';
import progress1 from '@/assets/img/progress1.svg';
import progress2 from '@/assets/img/progress2.svg';
import progress3 from '@/assets/img/progress3.svg';
import btnImg1 from '@/assets/img/planBtn1.png';
import btnImg2 from '@/assets/img/planBtn2.png';
import {
@ -20,9 +24,10 @@ import {
} from "@ant-design/icons";
// 巡检点管理组件
const InspectionRecords = () => {
const [currentPage, setCurrentPage] = useState(6);
const [currentPage, setCurrentPage] = useState(1);
const [pageSize, setPageSize] = useState(10);
const [total, setTotal] = useState(85); // 总条数
const [total, setTotal] = useState(85);
const [currentPageSection, setCurrentPageSection] = useState(1); // 总条数
const [showAddInspectionPoint, setShowAddInspectionPoint] = useState(false); // 控制是否显示新增巡检点表单
// 处理新增巡检点按钮点击
@ -244,7 +249,9 @@ const InspectionRecords = () => {
{/* 顶部进度条 - 根据状态切换图片 */}
<div
className={styles.progressContainer}
style={{ backgroundImage: `url(${showAddInspectionPoint ? progress2 : progress1})` }}
// style={{ backgroundImage: `url(${showAddInspectionPoint ? progress2 : progress1})` }}
// style={{ backgroundImage: `url(${currentPageSection === 3 ? progress3 : currentPageSection === 2 ? progress2 : progress1})` }}
style={{ backgroundImage: `url(${!showAddInspectionPoint ? progress1 : currentPageSection === 1 ? progress2 : progress3})` }}
></div>
{/* 主体内容区域 */}
@ -311,243 +318,405 @@ const InspectionRecords = () => {
</div>
</>
) : (
<div className={styles.addInspectionPointForm}>
<div className={styles.formHeader}>
<h3>新增巡检点</h3>
<Button onClick={handleBack}>返回</Button>
</div>
<div className={styles.formContent}>
{/* 查询条件区域 - 使用antd组件 */}
<div className={styles.queryConditionContainer}>
<div className={styles.queryConditionHeader}>
<span className={styles.queryConditionIcon}>| 查询条件</span>
<div>
<Button type="primary" icon={<SearchOutlined />} style={{ backgroundImage: `url(${btnImg1})`, marginRight: '30px' }} className={styles.button}>查询</Button>
<Button icon={<RedoOutlined />} className={styles['resetBtn']} style={{ backgroundImage: `url(${btnImg3})`, height: '36px' }}>重置</Button>
currentPageSection === 1 ? (
<div className={styles.addInspectionPointForm}>
<div className={styles.formHeader}>
<Button onClick={handleBack}>上一页</Button>
<Button onClick={() => setCurrentPageSection(2)}>下一页</Button>
{/* <h3>新增巡检点</h3> */}
</div>
<div className={styles.formContent}>
{/* 查询条件区域 - 使用antd组件 */}
<div className={styles.queryConditionContainer}>
<div className={styles.queryConditionHeader}>
<span className={styles.queryConditionIcon}>| 查询条件</span>
<div>
<Button type="primary" icon={<SearchOutlined />} style={{ backgroundImage: `url(${btnImg1})`, marginRight: '30px' }} className={styles.button}>查询</Button>
<Button icon={<RedoOutlined />} className={styles['resetBtn']} style={{ backgroundImage: `url(${btnImg3})`, height: '36px' }}>重置</Button>
</div>
</div>
</div>
<div className={styles.queryRow}>
<div className={styles.queryCol}>
<div className={styles.queryColLabel}>名称</div>
<Input className={styles.queryInput} placeholder="请输入名称" />
</div>
<div className={styles.queryRow}>
<div className={styles.queryCol}>
<div className={styles.queryColLabel}>名称</div>
<Input className={styles.queryInput} placeholder="请输入名称" />
</div>
<div className={styles.queryCol}>
<div className={styles.queryColLabel}>所属区域</div>
<Select className={styles.querySelect} placeholder="全部">
<Option value="">全部</Option>
<Option value="area1">储罐储存区</Option>
<Option value="area2">泵房区域</Option>
<Option value="area3">装卸区域</Option>
<Option value="area4">办公区域</Option>
</Select>
</div>
<div className={styles.queryCol}>
<div className={styles.queryColLabel}>所属区域</div>
<Select className={styles.querySelect} placeholder="全部">
<Option value="">全部</Option>
<Option value="area1">储罐储存区</Option>
<Option value="area2">泵房区域</Option>
<Option value="area3">装卸区域</Option>
<Option value="area4">办公区域</Option>
</Select>
</div>
<div className={styles.queryCol}>
<div className={styles.queryColLabel}>巡检时间范围</div>
<DatePicker.RangePicker className={styles.queryDateRange} />
</div>
<div className={styles.queryCol}>
<div className={styles.queryColLabel}>巡检时间范围</div>
<DatePicker.RangePicker className={styles.queryDateRange} />
<div className={styles.queryCol}>
<div className={styles.queryColLabel}>关联设备</div>
<div className={styles.deviceTags}>
<Tag color="blue">设备1</Tag>
<Tag color="blue">设备2</Tag>
</div>
</div>
</div>
<div className={styles.queryCol}>
<div className={styles.queryColLabel}>关联设备</div>
<div className={styles.deviceTags}>
<Tag color="blue">设备1</Tag>
<Tag color="blue">设备2</Tag>
<div className={styles.queryRow}>
<div className={styles.queryCol}>
<div className={styles.queryColLabel}>位置</div>
<Input className={styles.queryInput} placeholder="请输入位置" />
</div>
<div className={styles.queryCol}>
<div className={styles.queryColLabel}>巡检频率</div>
<Select className={styles.querySelect} placeholder="全部">
<Option value="">全部</Option>
<Option value="daily">每日</Option>
<Option value="weekly">每周</Option>
<Option value="monthly">每月</Option>
<Option value="other">其他</Option>
</Select>
</div>
</div>
{/* <div className={styles.queryActions}>
</div> */}
</div>
<div className={styles.queryRow}>
<div className={styles.queryCol}>
<div className={styles.queryColLabel}>位置</div>
<Input className={styles.queryInput} placeholder="请输入位置" />
</div>
{/* 巡检点列表 - 使用antd组件 */}
<div>
<div style={{ marginBottom: '20px', fontSize: '16px', fontWeight: '500' }}>| 巡检点列表</div>
<div className={styles.queryCol}>
<div className={styles.queryColLabel}>巡检频率</div>
<Select className={styles.querySelect} placeholder="全部">
<Option value="">全部</Option>
<Option value="daily">每日</Option>
<Option value="weekly">每周</Option>
<Option value="monthly">每月</Option>
<Option value="other">其他</Option>
</Select>
{/* 顶部按钮组 */}
<div className={styles.tableButtons} style={{ marginBottom: '20px' }}>
<Button type="primary" style={{ backgroundImage: `url(${btnImg1})`, marginRight: '30px' }} className={styles.button}>
批量导入
</Button>
<Button className={styles['resetBtn']} style={{ backgroundImage: `url(${btnImg3})`, height: '36px', marginRight: '30px' }}>
批量导出
</Button>
<Button className={styles['delBtn']} style={{ backgroundImage: `url(${btnImg2})` }}>
删除
</Button>
<Button icon={<PlusOutlined />} type="primary" style={{ backgroundImage: `url(${btnImg1})`, float: 'right' }} className={styles.button}>
新增巡检点
</Button>
</div>
{/* 巡检点表格 - 使用antd Table组件 */}
<Table
className={styles.table}
rowSelection={{
type: 'checkbox',
onChange: (selectedRowKeys, selectedRows) => {
console.log('选中的行:', selectedRowKeys, selectedRows);
},
}}
columns={[
{
title: '序号',
key: 'serialNumber',
width: 80,
render: (_, __, index) => (currentPage - 1) * pageSize + index + 1,
},
{
title: '名称',
dataIndex: 'name',
key: 'name',
},
{
title: '位置',
dataIndex: 'location',
key: 'location',
},
{
title: '关联设备',
dataIndex: 'relatedDevices',
key: 'relatedDevices',
},
{
title: '状态',
dataIndex: 'status',
key: 'status',
render: (text) => {
let color = '#52c41a'; // 默认正常绿色
if (text === '待巡检') color = '#faad14';
else if (text === '异常待处理') color = '#ff4d4f';
return <span style={{ color }}>{text}</span>;
},
},
{
title: '巡检频率',
dataIndex: 'frequency',
key: 'frequency',
},
{
title: '操作',
key: 'action',
width: 200,
render: (_, record) => (
<Space size="middle">
<Button
type="text"
style={{ color: '#006665' }}
onClick={() => console.log('查看详情:', record)}
>
查看详情
</Button>
<Button
type="text"
style={{ color: '#1890ff' }}
onClick={() => console.log('编辑:', record)}
>
编辑
</Button>
<Button
type="text"
style={{ color: '#52c41a' }}
onClick={() => console.log('巡检:', record)}
>
巡检
</Button>
</Space>
),
},
]}
dataSource={[
{
key: '1',
name: '一号储罐',
location: '储罐储存区 A区1号罐',
relatedDevices: '一号储罐本体、罐区消防栓组',
status: '正常',
frequency: '每日',
},
{
key: '2',
name: '原油输送泵组',
location: '泵房 B区',
relatedDevices: '1#原油泵、2#原油泵、泵区压力泵组',
status: '正常',
frequency: '每2小时',
},
{
key: '3',
name: '油品装车站台',
location: '装卸区北侧站台',
relatedDevices: '装卸臂管、装卸区静电释放装置、装卸区灭火器',
status: '待巡检',
frequency: '每次装卸前',
},
{
key: '4',
name: '办公区消防通道',
location: '办公楼1楼东侧通道',
relatedDevices: '通道应急灯、通道灭火器、疏散标示',
status: '正常',
frequency: '每周',
},
{
key: '5',
name: '输油管道段 A',
location: '库区东侧输油管道0-500米段',
relatedDevices: '管道压力传感器、管道监测点',
status: '异常待处理',
frequency: '每月',
},
{
key: '6',
name: '调和工艺罐区',
location: '生产工艺区调和罐群前',
relatedDevices: '3#调和罐、调和区温度传感器、搅拌装置',
status: '正常',
frequency: '每小时',
},
]}
pagination={{
current: currentPage,
pageSize: pageSize,
total: total,
onChange: (page, size) => {
setCurrentPage(page);
setPageSize(size);
},
showSizeChanger: true,
showTotal: (total) => `共 ${total} 条`,
style: {
textAlign: 'right',
marginTop: '20px',
},
}}
/>
</div>
</div>
</div>
) : (
<div className={styles.addInspectionPointForm}>
<div className={styles.formHeader}>
<Button onClick={() => setCurrentPageSection(1)}>上一页</Button>
</div>
<div className={styles.formContent}>
{/* 三栏布局 */}
<div style={{ display: 'flex', gap: '10px', height: '100%' }}>
{/* 第一栏：二维码生成 */}
<div style={{ flex: 1, border: '1px solid #f0f0f0', borderRadius: '8px', padding: '10px', backgroundColor: '#fff' }}>
<h3 style={{ marginBottom: '20px', color: '#333' }}>二维码生成</h3>
<div style={{ marginBottom: '20px' }}>
<label style={{ marginRight: '5px' }}>选择巡检点：</label>
<Select style={{ width: 130 }} placeholder="请选择">
<Option value="1">车辆二维扫码</Option>
</Select>
<Button type="primary" style={{ backgroundImage: `url(${btnImg1})`, marginRight: '30px' }} className={styles.button}>生成二维码</Button>
</div>
<div style={{ width: '200px', height: '200px', border: '1px dashed #d9d9d9', margin: '20px 0', display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative' }}>
{/* 二维码SVG */}
<img
src={QRCodeScanning}
alt="二维码"
style={{ width: '150px', height: '150px', objectFit: 'contain' }}
/>
</div>
<div style={{ display: 'flex', gap: '10px' }}>
<Button type="primary" style={{ backgroundImage: `url(${btnImg1})`, marginRight: '30px' }} className={styles.button}>下载</Button>
<Button className={styles['resetBtn']} style={{ backgroundImage: `url(${btnImg3})`, height: '36px', marginRight: '30px' }}>
打印
</Button>
</div>
</div>
{/* <div className={styles.queryActions}>
{/* 第二栏：扫码流程 */}
<div style={{ flex: 1, border: '1px solid #f0f0f0', borderRadius: '8px', padding: '20px', backgroundColor: '#fff' }}>
<h3 style={{ marginBottom: '20px', color: '#333' }}>扫码流程演示</h3>
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', padding: '20px' }}>
{/* Step 1 */}
<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', width: '100%', height: '400px' }}>
{/* 扫码流程演示SVG */}
<img
src={scanningProcessDemonstration}
alt="扫码流程演示"
style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'contain' }}
/>
</div>
</div>
</div>
</div> */}
</div>
{/* 第三栏：历史记录 */}
<div style={{ flex: 2, border: '1px solid #f0f0f0', borderRadius: '8px', padding: '20px', backgroundColor: '#fff' }}>
<h3 style={{ marginBottom: '20px', color: '#333' }}>历史记录</h3>
<div style={{ marginBottom: '20px', display: 'flex', alignItems: 'center', gap: '10px' }}>
<div>
<label style={{ marginRight: '5px' }}>人员：</label>
<Input placeholder="请输入人员名称" style={{ width: 150 }} />
</div>
<div>
<label style={{ marginRight: '5px' }}>巡检点：</label>
<Select style={{ width: 120 }} placeholder="全部">
<Option value="all">全部</Option>
</Select>
</div>
<Button type="primary" icon={<SearchOutlined />} style={{ backgroundImage: `url(${btnImg1})`, marginRight: '30px' }} className={styles.button}>查询</Button>
<Button icon={<RedoOutlined />} className={styles['resetBtn']} style={{ backgroundImage: `url(${btnImg3})`, height: '36px' }}>重置</Button>
</div>
{/* 巡检点列表 - 使用antd组件 */}
<div>
<div style={{ marginBottom: '20px', fontSize: '16px', fontWeight: '500' }}>| 巡检点列表</div>
{/* 历史记录表格 */}
<div style={{ maxHeight: '400px', overflowY: 'auto' }}>
<table style={{ width: '100%', borderCollapse: 'collapse' }}>
<thead>
<tr style={{ backgroundColor: '#fafafa' }}>
<th style={{ padding: '10px', border: '1px solid #f0f0f0', textAlign: 'left' }}>序号</th>
<th style={{ padding: '10px', border: '1px solid #f0f0f0', textAlign: 'left' }}>巡检点</th>
<th style={{ padding: '10px', border: '1px solid #f0f0f0', textAlign: 'left' }}>人员</th>
<th style={{ padding: '10px', border: '1px solid #f0f0f0', textAlign: 'left' }}>时间</th>
<th style={{ padding: '10px', border: '1px solid #f0f0f0', textAlign: 'left' }}>巡检结果</th>
</tr>
</thead>
<tbody>
{/* 模拟数据 */}
<tr>
<td style={{ padding: '10px', border: '1px solid #f0f0f0' }}>1</td>
<td style={{ padding: '10px', border: '1px solid #f0f0f0' }}>一号储罐消防</td>
<td style={{ padding: '10px', border: '1px solid #f0f0f0' }}>赵翔</td>
<td style={{ padding: '10px', border: '1px solid #f0f0f0' }}>2025-08-16 08:07</td>
<td style={{ padding: '10px', border: '1px solid #f0f0f0' }}>
<Tag color="green">已完成(无隐患)</Tag>
</td>
</tr>
<tr>
<td style={{ padding: '10px', border: '1px solid #f0f0f0' }}>2</td>
<td style={{ padding: '10px', border: '1px solid #f0f0f0' }}>油品装卸站台</td>
<td style={{ padding: '10px', border: '1px solid #f0f0f0' }}>钱新</td>
<td style={{ padding: '10px', border: '1px solid #f0f0f0' }}>2025-08-04 14:38</td>
<td style={{ padding: '10px', border: '1px solid #f0f0f0' }}>
<Tag color="orange">已完成(有隐患)</Tag>
</td>
</tr>
<tr>
<td style={{ padding: '10px', border: '1px solid #f0f0f0' }}>3</td>
<td style={{ padding: '10px', border: '1px solid #f0f0f0' }}>办公区消防通道</td>
<td style={{ padding: '10px', border: '1px solid #f0f0f0' }}>孙引琪</td>
<td style={{ padding: '10px', border: '1px solid #f0f0f0' }}>2025-07-28 11:02</td>
<td style={{ padding: '10px', border: '1px solid #f0f0f0' }}>
<Tag color="green">已完成(无隐患)</Tag>
</td>
</tr>
<tr>
<td style={{ padding: '10px', border: '1px solid #f0f0f0' }}>4</td>
<td style={{ padding: '10px', border: '1px solid #f0f0f0' }}>输油管廊间A</td>
<td style={{ padding: '10px', border: '1px solid #f0f0f0' }}>李婧静</td>
<td style={{ padding: '10px', border: '1px solid #f0f0f0' }}>2025-07-20 08:14</td>
<td style={{ padding: '10px', border: '1px solid #f0f0f0' }}>
<Tag color="orange">已完成(有隐患)</Tag>
</td>
</tr>
<tr>
<td style={{ padding: '10px', border: '1px solid #f0f0f0' }}>5</td>
<td style={{ padding: '10px', border: '1px solid #f0f0f0' }}>消防水泵房</td>
<td style={{ padding: '10px', border: '1px solid #f0f0f0' }}>冯冯</td>
<td style={{ padding: '10px', border: '1px solid #f0f0f0' }}>2025-07-16 02:44</td>
<td style={{ padding: '10px', border: '1px solid #f0f0f0' }}>
<Tag color="green">已完成(无隐患)</Tag>
</td>
</tr>
</tbody>
</table>
</div>
{/* 顶部按钮组 */}
<div className={styles.tableButtons} style={{ marginBottom: '20px' }}>
<Button type="primary" style={{ backgroundImage: `url(${btnImg1})`, marginRight: '30px' }} className={styles.button}>
批量导入
</Button>
<Button className={styles['resetBtn']} style={{ backgroundImage: `url(${btnImg3})`, height: '36px', marginRight: '30px' }}>
批量导出
</Button>
<Button className={styles['delBtn']} style={{ backgroundImage: `url(${btnImg2})` }}>
删除
</Button>
<Button icon={<PlusOutlined />} type="primary" style={{ backgroundImage: `url(${btnImg1})`, float: 'right' }} className={styles.button}>
新增巡检点
</Button>
{/* 分页 */}
<div style={{ marginTop: '20px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<div>共 85 条</div>
<div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
<span>10 / page</span>
<Select style={{ width: 60 }} defaultValue="10">
<Option value="10">10</Option>
<Option value="20">20</Option>
</Select>
<div style={{ display: 'flex', gap: '5px' }}>
<Button disabled>←</Button>
<Button type="primary" style={{ backgroundColor: '#006665' }}>1</Button>
<span>...</span>
<Button>4</Button>
<Button>5</Button>
<Button>6</Button>
<Button>7</Button>
<Button>8</Button>
<span>...</span>
<Button>50</Button>
<Button>→</Button>
</div>
</div>
</div>
</div>
</div>
{/* 巡检点表格 - 使用antd Table组件 */}
<Table
className={styles.table}
rowSelection={{
type: 'checkbox',
onChange: (selectedRowKeys, selectedRows) => {
console.log('选中的行:', selectedRowKeys, selectedRows);
},
}}
columns={[
{
title: '序号',
key: 'serialNumber',
width: 80,
render: (_, __, index) => (currentPage - 1) * pageSize + index + 1,
},
{
title: '名称',
dataIndex: 'name',
key: 'name',
},
{
title: '位置',
dataIndex: 'location',
key: 'location',
},
{
title: '关联设备',
dataIndex: 'relatedDevices',
key: 'relatedDevices',
},
{
title: '状态',
dataIndex: 'status',
key: 'status',
render: (text) => {
let color = '#52c41a'; // 默认正常绿色
if (text === '待巡检') color = '#faad14';
else if (text === '异常待处理') color = '#ff4d4f';
return <span style={{ color }}>{text}</span>;
},
},
{
title: '巡检频率',
dataIndex: 'frequency',
key: 'frequency',
},
{
title: '操作',
key: 'action',
width: 200,
render: (_, record) => (
<Space size="middle">
<Button
type="text"
style={{ color: '#006665' }}
onClick={() => console.log('查看详情:', record)}
>
查看详情
</Button>
<Button
type="text"
style={{ color: '#1890ff' }}
onClick={() => console.log('编辑:', record)}
>
编辑
</Button>
<Button
type="text"
style={{ color: '#52c41a' }}
onClick={() => console.log('巡检:', record)}
>
巡检
</Button>
</Space>
),
},
]}
dataSource={[
{
key: '1',
name: '一号储罐',
location: '储罐储存区 A区1号罐',
relatedDevices: '一号储罐本体、罐区消防栓组',
status: '正常',
frequency: '每日',
},
{
key: '2',
name: '原油输送泵组',
location: '泵房 B区',
relatedDevices: '1#原油泵、2#原油泵、泵区压力泵组',
status: '正常',
frequency: '每2小时',
},
{
key: '3',
name: '油品装车站台',
location: '装卸区北侧站台',
relatedDevices: '装卸臂管、装卸区静电释放装置、装卸区灭火器',
status: '待巡检',
frequency: '每次装卸前',
},
{
key: '4',
name: '办公区消防通道',
location: '办公楼1楼东侧通道',
relatedDevices: '通道应急灯、通道灭火器、疏散标示',
status: '正常',
frequency: '每周',
},
{
key: '5',
name: '输油管道段 A',
location: '库区东侧输油管道0-500米段',
relatedDevices: '管道压力传感器、管道监测点',
status: '异常待处理',
frequency: '每月',
},
{
key: '6',
name: '调和工艺罐区',
location: '生产工艺区调和罐群前',
relatedDevices: '3#调和罐、调和区温度传感器、搅拌装置',
status: '正常',
frequency: '每小时',
},
]}
pagination={{
current: currentPage,
pageSize: pageSize,
total: total,
onChange: (page, size) => {
setCurrentPage(page);
setPageSize(size);
},
showSizeChanger: true,
showTotal: (total) => `共 ${total} 条`,
style: {
textAlign: 'right',
marginTop: '20px',
},
}}
/>
</div>
</div>
</div>
)
)}
</div>
</div>

6
src/pages/inspectionmanagement/components/Inspectionrecords/inspectionRecords.less
Unescape Escape View File

@ -416,9 +416,9 @@
/* 查询条件区域样式 */
.queryConditionContainer {
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
// padding: 20px;
// border-radius: 8px;
// box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
margin-bottom: 20px;
}

Write Preview
Loading…
Cancel
Save