From e5f6e8f85e9d1d1cb9c216f878a28297c86a94ae Mon Sep 17 00:00:00 2001
From: YongZL <1679963578@qq.com>
Date: Wed, 1 Nov 2023 10:58:24 +0800
Subject: [PATCH] feat: ui

---
 src/components/common/productQrcode.tsx | 11 ++++++++---
 src/components/svgr/Border.js           | 22 ++++++++++++++++++++++
 src/components/svgr/index.js            |  1 +
 3 files changed, 31 insertions(+), 3 deletions(-)
 create mode 100644 src/components/svgr/Border.js

diff --git a/src/components/common/productQrcode.tsx b/src/components/common/productQrcode.tsx
index e76b953..c010802 100644
--- a/src/components/common/productQrcode.tsx
+++ b/src/components/common/productQrcode.tsx
@@ -1,6 +1,7 @@
 import classNames from 'classnames';
 import QRCode from 'qrcode.react';
-import { Carbon3Name, DisableQrcode } from '../svgr';
+import { Border, Carbon3Name, DisableQrcode } from '../svgr';
+import { Fragment } from 'react';
 
 export function ProductQrcode(p: any) {
   const { qrText, className, qrcodeDisable, data, name = 'Certified' } = p;
@@ -20,10 +21,14 @@ export function ProductQrcode(p: any) {
             <p className="text-[0.6875rem] text-center mb-2 leading-[0.945rem] font-semibold mo:leading-[0.865rem]">
               {qrText ? qrText : `Product Carbon Footprint ${name}`}
             </p>
+
+            <Border className={'relative z-100'} />
             {qrcodeDisable ? (
-              <DisableQrcode width="92" height="92" />
+              <DisableQrcode className="" width="77" height="77" />
             ) : (
-              <QRCode className="w-[5.75rem]" size={92} value={data} />
+              <>
+                <QRCode className="w-[5.75rem] absolute z-1000 mo:mt-12 md:mt-13 mt-[50px]" size={76} value={data} />
+              </>
             )}
           </div>
         </div>
diff --git a/src/components/svgr/Border.js b/src/components/svgr/Border.js
new file mode 100644
index 0000000..9ef2d96
--- /dev/null
+++ b/src/components/svgr/Border.js
@@ -0,0 +1,22 @@
+import * as React from 'react';
+const SvgBorder = (props) => (
+  <svg {...props} width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M24.9546 0.253342H17.7344C8.16406 0.253342 0.405762 8.01165 0.405762 17.582V25.0429H8.10738V17.582C8.10738 12.2651 12.4175 7.95497 17.7344 7.95497H24.9546V0.253342Z"
+      fill="black"
+    />
+    <path
+      d="M74.7744 7.95497V0.253342H82.2355C91.8058 0.253342 99.5641 8.01165 99.5641 17.582V25.0429H91.8625V17.582C91.8625 12.2651 87.5523 7.95497 82.2355 7.95497H74.7744Z"
+      fill="black"
+    />
+    <path
+      d="M74.7744 91.7102H82.2355C87.5523 91.7102 91.8625 87.4 91.8625 82.0831V74.8629H99.5641V82.0831C99.5641 91.6535 91.8058 99.4118 82.2355 99.4118H74.7744V91.7102Z"
+      fill="black"
+    />
+    <path
+      d="M8.10738 74.8628V82.0831C8.10738 87.4 12.4175 91.7102 17.7344 91.7102H24.9546V99.4118H17.7344C8.16406 99.4118 0.405762 91.6535 0.405762 82.0831V74.8628H8.10738Z"
+      fill="black"
+    />
+  </svg>
+);
+export default SvgBorder;
diff --git a/src/components/svgr/index.js b/src/components/svgr/index.js
index 754f83e..2bdd9a5 100644
--- a/src/components/svgr/index.js
+++ b/src/components/svgr/index.js
@@ -40,3 +40,4 @@ export { default as VerifiedIcon } from './VerifiedIcon';
 export { default as Nft } from './Nft';
 export { default as GGX } from './Ggx';
 export { default as Detail } from './Detail';
+export { default as Border } from './Border';