From cdc02f1ff426ab75c8076d128718c31e5647029a Mon Sep 17 00:00:00 2001
From: duan <1004387497@qq.com>
Date: Mon, 25 Nov 2024 17:54:34 +0800
Subject: [PATCH] =?UTF-8?q?=E6=89=93=E5=8D=B0=E6=9C=BA=E5=BC=80=E7=A5=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/application.js                        |  13 ++
 .../order_manage/components/Invoicing.vue     |  78 +++++---
 .../order_manage/components/LodopFuncs.js     | 188 ++++++++++++++++++
 src/views/order_manage/order_list.vue         | 133 +++++++++++--
 4 files changed, 365 insertions(+), 47 deletions(-)
 create mode 100644 src/views/order_manage/components/LodopFuncs.js

diff --git a/src/api/application.js b/src/api/application.js
index 1428327..6e64c30 100644
--- a/src/api/application.js
+++ b/src/api/application.js
@@ -26,6 +26,19 @@ export function getbinding(data) {
     }
   });
 }
+// 提交开票
+export function getsubInvoicing(data) {
+  return request({
+    url: "/api/invoice/subInvoicing",
+    method: "post",
+    data: {
+      shopId: localStorage.getItem("shopId"),
+      ...data
+    }
+  });
+}
+
+
 // 获取数电发票类型
 export function getdigitalInvoice(data) {
   return request({
diff --git a/src/views/order_manage/components/Invoicing.vue b/src/views/order_manage/components/Invoicing.vue
index 8384518..6c836d0 100644
--- a/src/views/order_manage/components/Invoicing.vue
+++ b/src/views/order_manage/components/Invoicing.vue
@@ -9,7 +9,7 @@
                 </el-select>
             </el-form-item>
             <el-form-item label="数电发票：" :label-width="labelWidth">
-                <el-select v-model="forms.sdType" style="width: 100%;" placeholder="">
+                <el-select v-model="forms.type" style="width: 100%;" placeholder="">
                     <el-option :label="item" :value="item" v-for="(item, index) in digitalInvoiceList[0]"
                         :key="index"></el-option>
                 </el-select>
@@ -21,16 +21,16 @@
                 </el-select>
             </el-form-item>
             <el-form-item label="开票金额：" :label-width="labelWidth">
-                <el-input v-model="forms.amount"  @change="changeevent" type="number" placeholder="请输入金额"></el-input>
+                <el-input v-model="forms.price" @change="changeevent" type="number" placeholder="请输入金额"></el-input>
             </el-form-item>
             <el-form-item label="开票人账号：" :label-width="labelWidth">
-                <el-select v-model="forms.se_amount" style="width: 100%;" placeholder="">
-                    <el-option :label="item" :value="item" v-for="(item, index) in digitalInvoiceList[1]"
+                <el-select v-model="forms.dlzh" style="width: 100%;" placeholder="">
+                    <el-option :label="item.bsryxm" :value="item.dlzh" v-for="(item, index) in Binding"
                         :key="index"></el-option>
                 </el-select>
             </el-form-item>
             <el-form-item label="单价：" :label-width="labelWidth">
-                <el-input v-model="forms.price" disabled placeholder=""></el-input>
+                <el-input v-model="forms.d_price" disabled placeholder=""></el-input>
             </el-form-item>
             <el-form-item label="税额：" :label-width="labelWidth">
                 <el-input v-model="forms.tax_amount" disabled placeholder=""></el-input>
@@ -39,10 +39,10 @@
                 <el-input v-model="forms.number" type="number" placeholder=""></el-input>
             </el-form-item>
             <el-form-item label="备注：" :label-width="labelWidth">
-                <el-input v-model="forms.notes" type="number" placeholder=""></el-input>
+                <el-input v-model="forms.notes" type="text" placeholder=""></el-input>
             </el-form-item>
             <el-form-item label="规格型号：" :label-width="labelWidth">
-                <el-input v-model="forms.notes" type="number" placeholder=""></el-input>
+                <el-input v-model="forms.notes" type="text" placeholder=""></el-input>
             </el-form-item>
             <el-form-item label="产品单位(桌)：" :label-width="labelWidth">
                 <el-input v-model="forms.notes" type="number" placeholder=""></el-input>
@@ -50,12 +50,12 @@
         </el-form>
         <div slot="footer" class="dialog-footer">
             <el-button @click="dialogFormVisible = false">取 消</el-button>
-            <el-button type="primary" @click="SubmitEvent">确 定</el-button>
+            <el-button type="primary" :loading="printloading" @click="SubmitEvent">确 定</el-button>
         </div>
     </el-dialog>
 </template>
 <script>
-import { getbinding, getindustry, getdigitalInvoice,getstoreSe } from "@/api/application";
+import { getbinding, getindustry, getdigitalInvoice, getstoreSe, getsubInvoicing } from "@/api/application";
 
 export default {
     data() {
@@ -65,24 +65,39 @@ export default {
             digitalInvoiceList: [],
             getindustryList: [],
             labelWidth: '120px',
+            // 绑定人信息
+            Binding: [],
+            item: "",
+            printloading: false,
+
         }
     },
     mounted() {
-        this.getbinding()
         this.getdigitalInvoice()
         this.getindustry()
     },
     methods: {
-        show() {
+        show(d) {
             this.dialogFormVisible = !this.dialogFormVisible
+            this.item = d
+            this.getbinding()
         },
-        async  changeevent(d) {
-            const res = await getstoreSe(this.forms)
-            console.log(res,'调试121')
+        async changeevent() {
+            let obj = {
+                se_amount: this.forms.se_amount.slice(0, -1),
+                amount: this.forms.price
+            }
+            const res = await getstoreSe(obj)
+            this.forms.d_price = res.d_amount
+            this.forms.tax_amount = res.tx
         },
-        SubmitEvent() {
-            this.forms.se_amount = this.forms.taxAmount
-            this.show()
+        async SubmitEvent() {
+            this.printloading = true
+            this.forms.se_amount = this.forms.se_amount.slice(0, -1)
+            const res = await getsubInvoicing(this.forms)
+            this.dialogFormVisible = !this.dialogFormVisible
+            this.printloading = false
+            this.$emit('qrcode', res.invoice_records)
         },
         // 获取项目分类
         async getindustry(d = '餐饮') {
@@ -96,22 +111,21 @@ export default {
         },
         // 开票
         async getbinding(d = "") {
-            try {
-                const res = await getbinding(d)
-                // if (res) {
-                this.forms = res.store
-                this.$set(this.forms, 'article', res.article)
-                this.$set(this.forms, 'sdType', res.sdType)
-                this.$set(this.forms, 'taxAmount', res.taxAmount)
-                // this.title = '数电票账号已绑定'
-                this.dialogVisible = false
-                // } else {
-                //     this.title = '绑定数点票账号'
-                //     this.forms = {}
-                // }
-            } catch (error) {
-                console.log(error);
+            const res = await getbinding(d)
+            this.forms = {
+                account: res.bindAccount,
+                dlzh: res.taxation[0].dlzh,
+                article: res.article,
+                type: res.sdType,
+                se_amount: res.taxAmount,
+                number: 1,
+                d_price: '',
+                tax_amount: '',
+                price: this.item.payAmount,
+                cash_out: this.item.orderNo,
             }
+            this.Binding = res.taxation
+            this.changeevent()
         }
     }
 }
diff --git a/src/views/order_manage/components/LodopFuncs.js b/src/views/order_manage/components/LodopFuncs.js
new file mode 100644
index 0000000..075c3b0
--- /dev/null
+++ b/src/views/order_manage/components/LodopFuncs.js
@@ -0,0 +1,188 @@
+//==本JS是加载Lodop插件或Web打印服务CLodop/Lodop7的综合示例，可直接使用，建议理解后融入自己程序==
+
+//用双端口加载主JS文件Lodop.js(或CLodopfuncs.js兼容老版本)以防其中某端口被占:
+var MainJS ="CLodopfuncs.js",
+    URL_WS1   = "ws://localhost:8000/"+MainJS,                //ws用8000/18000
+    URL_WS2   = "ws://localhost:18000/"+MainJS,
+    URL_HTTP1 = "http://localhost:8000/"+MainJS,              //http用8000/18000
+    URL_HTTP2 = "http://localhost:18000/"+MainJS,
+    URL_HTTP3 = "https://localhost.lodop.net:8443/"+MainJS;   //https用8000/8443
+
+var CreatedOKLodopObject, CLodopIsLocal, LoadJsState;
+
+//==判断是否需要CLodop(那些不支持插件的浏览器):==
+function needCLodop() {
+    try {
+        var ua = navigator.userAgent;
+        if (ua.match(/Windows\sPhone/i) ||
+            ua.match(/iPhone|iPod|iPad/i) ||
+            ua.match(/Android/i) ||
+            ua.match(/Edge\D?\d+/i))
+            return true;
+        var verTrident = ua.match(/Trident\D?\d+/i);
+        var verIE = ua.match(/MSIE\D?\d+/i);
+        var verOPR = ua.match(/OPR\D?\d+/i);
+        var verFF = ua.match(/Firefox\D?\d+/i);
+        var x64 = ua.match(/x64/i);
+        if ((!verTrident) && (!verIE) && (x64)) return true;
+        else if (verFF) {
+            verFF = verFF[0].match(/\d+/);
+            if ((verFF[0] >= 41) || (x64)) return true;
+        } else if (verOPR) {
+            verOPR = verOPR[0].match(/\d+/);
+            if (verOPR[0] >= 32) return true;
+        } else if ((!verTrident) && (!verIE)) {
+            var verChrome = ua.match(/Chrome\D?\d+/i);
+            if (verChrome) {
+                verChrome = verChrome[0].match(/\d+/);
+                if (verChrome[0] >= 41) return true;
+            }
+        }
+        return false;
+    } catch (err) {
+        return true;
+    }
+}
+
+//==检查加载成功与否，如没成功则用http(s)再试==
+//==低版本CLODOP6.561/Lodop7.043及前)用本方法==
+function checkOrTryHttp() {
+  if (window.getCLodop) {
+     LoadJsState = "complete";
+     return true;
+  }
+  if (LoadJsState == "loadingB" || LoadJsState == "complete") return;
+  LoadJsState = "loadingB";
+  var head = document.head || document.getElementsByTagName("head")[0] || document.documentElement;
+  var JS1 = document.createElement("script")
+     ,JS2 = document.createElement("script")
+     ,JS3 = document.createElement("script");
+  JS1.src = URL_HTTP1;
+  JS2.src = URL_HTTP2;
+  JS3.src = URL_HTTP3;
+  JS1.onload = JS2.onload = JS3.onload = JS2.onerror = JS3.onerror=function(){LoadJsState = "complete";}
+  JS1.onerror = function(e) {
+      if (window.location.protocol !== 'https:')
+          head.insertBefore(JS2, head.firstChild); else
+          head.insertBefore(JS3, head.firstChild);
+  }
+  head.insertBefore(JS1,head.firstChild);
+}
+
+//==加载Lodop对象的主过程:==
+(function loadCLodop(){
+  if (!needCLodop()) return;
+  CLodopIsLocal = !!((URL_WS1 + URL_WS2).match(/\/\/localho|\/\/127.0.0./i));
+  LoadJsState = "loadingA";
+  if (!window.WebSocket && window.MozWebSocket) window.WebSocket=window.MozWebSocket;
+  //ws方式速度快(小于200ms)且可避免CORS错误,但要求Lodop版本足够新:
+  try {
+    var WSK1=new WebSocket(URL_WS1);
+    WSK1.onopen = function(e) { setTimeout("checkOrTryHttp()",200); }
+    WSK1.onmessage = function(e) {if (!window.getCLodop) eval(e.data);}
+    WSK1.onerror = function(e) {
+         var WSK2=new WebSocket(URL_WS2);
+         WSK2.onopen = function(e) {setTimeout("checkOrTryHttp()",200);}
+         WSK2.onmessage = function(e) {if (!window.getCLodop) eval(e.data);}
+         WSK2.onerror= function(e) {checkOrTryHttp();}
+    }
+  } catch(e){
+    checkOrTryHttp();
+  }
+})();
+
+//==获取LODOP对象主过程,判断是否安装、需否升级:==
+export function getLodop(oOBJECT, oEMBED) {
+    var strFontTag = "<br><font color='#FF00FF'>打印控件";
+    var strLodopInstall = strFontTag + "未安装!点击这里<a href='install_lodop32.exe' target='_self'>执行安装</a>";
+    var strLodopUpdate = strFontTag + "需要升级!点击这里<a href='install_lodop32.exe' target='_self'>执行升级</a>";
+    var strLodop64Install = strFontTag + "未安装!点击这里<a href='install_lodop64.exe' target='_self'>执行安装</a>";
+    var strLodop64Update = strFontTag + "需要升级!点击这里<a href='install_lodop64.exe' target='_self'>执行升级</a>";
+    var strCLodopInstallA = "<br><font color='#FF00FF'>Web打印服务CLodop未安装启动，点击这里<a href='CLodop_Setup_for_Win32NT.exe' target='_self'>下载执行安装</a>";
+    var strCLodopInstallB = "<br>（若此前已安装过，可<a href='CLodop.protocol:setup' target='_self'>点这里直接再次启动</a>）";
+    var strCLodopUpdate = "<br><font color='#FF00FF'>Web打印服务CLodop需升级!点击这里<a href='CLodop_Setup_for_Win32NT.exe' target='_self'>执行升级</a>";
+    var strLodop7FontTag = "<br><font color='#FF00FF'>Web打印服务Lodop7";
+    var strLodop7HrefX86 = "点击这里<a href='Lodop7_Linux_X86_64.tar.gz' target='_self'>下载安装</a>(下载后解压，点击lodop文件开始执行)";
+    var strLodop7HrefARM = "点击这里<a href='Lodop7_Linux_ARM64.tar.gz'  target='_self'>下载安装</a>(下载后解压，点击lodop文件开始执行)";
+    var strLodop7Install_X86 = strLodop7FontTag + "未安装启动，" + strLodop7HrefX86;
+    var strLodop7Install_ARM = strLodop7FontTag + "未安装启动，" + strLodop7HrefARM;
+    var strLodop7Update_X86 = strLodop7FontTag + "需升级，" + strLodop7HrefX86;
+    var strLodop7Update_ARM = strLodop7FontTag + "需升级，" + strLodop7HrefARM;
+    var strInstallOK = "，成功后请刷新本页面或重启浏览器。</font>";
+    var LODOP;
+    try {
+        var isWinIE = (/MSIE/i.test(navigator.userAgent)) || (/Trident/i.test(navigator.userAgent));
+        var isWinIE64 = isWinIE && (/x64/i.test(navigator.userAgent));
+        var isLinuxX86 = (/Linux/i.test(navigator.platform)) && (/x86/i.test(navigator.platform));
+        var isLinuxARM = (/Linux/i.test(navigator.platform)) && (/aarch/i.test(navigator.platform));
+
+        if (needCLodop() || isLinuxX86 || isLinuxARM) {
+            try {
+                LODOP = window.getCLodop();
+            } catch (err) {}
+            if (!LODOP && LoadJsState !== "complete") {
+                if (!LoadJsState)
+                    alert("未曾加载Lodop主JS文件，请先调用loadCLodop过程."); else
+                    alert("网页还没下载完毕，请稍等一下再操作.");
+                return;
+            }
+            var strAlertMessage;
+            if (!LODOP) {
+                if (isLinuxX86)
+                    strAlertMessage = strLodop7Install_X86;
+                else if (isLinuxARM)
+                    strAlertMessage = strLodop7Install_ARM;
+                else
+                    strAlertMessage = strCLodopInstallA + (CLodopIsLocal ? strCLodopInstallB : "");
+                document.body.innerHTML = strAlertMessage + strInstallOK + document.body.innerHTML;
+                return;
+            } else {
+                if (isLinuxX86 && LODOP.CVERSION < "7.0.7.5")
+                    strAlertMessage = strLodop7Update_X86;
+                else if (isLinuxARM && LODOP.CVERSION < "7.0.7.5")
+                    strAlertMessage = strLodop7Update_ARM;
+                else if (CLODOP.CVERSION < "6.5.9.4")
+                    strAlertMessage = strCLodopUpdate;
+
+                if (strAlertMessage)
+                    document.body.innerHTML = strAlertMessage + strInstallOK + document.body.innerHTML;
+            }
+        } else {
+            //==如果页面有Lodop插件就直接使用,否则新建:==
+            if (oOBJECT || oEMBED) {
+                if (isWinIE)
+                    LODOP = oOBJECT;
+                else
+                    LODOP = oEMBED;
+            } else if (!CreatedOKLodopObject) {
+                LODOP = document.createElement("object");
+                LODOP.setAttribute("width", 0);
+                LODOP.setAttribute("height", 0);
+                LODOP.setAttribute("style", "position:absolute;left:0px;top:-100px;width:0px;height:0px;");
+                if (isWinIE)
+                    LODOP.setAttribute("classid", "clsid:2105C259-1E0C-4534-8141-A753534CB4CA");
+                else
+                    LODOP.setAttribute("type", "application/x-print-lodop");
+                document.documentElement.appendChild(LODOP);
+                CreatedOKLodopObject = LODOP;
+            } else
+                LODOP = CreatedOKLodopObject;
+            //==Lodop插件未安装时提示下载地址:==
+            if ((!LODOP) || (!LODOP.VERSION)) {
+                document.body.innerHTML = (isWinIE64 ? strLodop64Install : strLodopInstall) + strInstallOK + document.body.innerHTML;
+                return LODOP;
+            }
+            if (LODOP.VERSION < "6.2.2.6") {
+                document.body.innerHTML = (isWinIE64 ? strLodop64Update : strLodopUpdate) + strInstallOK + document.body.innerHTML;
+            }
+        }
+        //===如下空白位置适合调用统一功能(如注册语句、语言选择等):=======================
+
+
+        //===============================================================================
+        return LODOP;
+    } catch (err) {
+        alert("getLodop出错:" + err);
+    }
+}
+
diff --git a/src/views/order_manage/order_list.vue b/src/views/order_manage/order_list.vue
index 7639b8a..9d986b9 100644
--- a/src/views/order_manage/order_list.vue
+++ b/src/views/order_manage/order_list.vue
@@ -150,9 +150,10 @@
           <template v-slot="scope">
             <div class="u-flex gap-10">
               <el-button type="text" @click="$refs.orderDetail.show(scope.row)">详情</el-button>
-              <el-button type="text" @click="$refs.Invoicing.show(scope.row)">开票</el-button>
-              
-              <el-button v-if="scope.row.status == 'unpaid'" type="primary" size="mini" @click="payOrder(scope.row)">结账</el-button>
+              <el-button type="text" v-if="scope.row.status == 'closed'"
+                @click="$refs.Invoicing.show(scope.row)">开票</el-button>
+              <el-button v-if="scope.row.status == 'unpaid'" type="primary" size="mini"
+                @click="payOrder(scope.row)">结账</el-button>
             </div>
           </template>
         </el-table-column>
@@ -165,22 +166,37 @@
     </div>
     <orderDetail ref="orderDetail" @close="getTableData" />
     <!-- 开票 -->
-     <Invoicing ref="Invoicing"></Invoicing>
+    <Invoicing ref="Invoicing" @qrcode="qrcodeEvent"></Invoicing>
+    <!-- 二维码 -->
+    <div class="qrStyle" v-if="isuppop">
+      <div class="box">
+        <div> <span></span> {{ codeinfo.type }}<i class="el-icon-close" @click="isuppopEvent()"></i> </div>
+        <canvas ref="canvas" id="canvas"></canvas>
+        <div>
+          税率：{{ codeinfo.se_amount + '%' }}&nbsp;&nbsp;
+          金额：{{ codeinfo.price }}<br />
+          <div style="color: red;margin-top: 5px;"> {{ codeinfo.string1 }} </div> <br />
+          <el-button type="primary" style="margin-top: 10px;" @click="printEvent(codeinfo)">打印</el-button>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 import orderEnum from "./orderEnum";
+import { getLodop } from "./components/LodopFuncs.js";
 import { tbShopPayTypeGet } from "@/api/setting";
 import { tbOrderInfoData, tbOrderInfoDownload, payCount } from "@/api/order";
 import dayjs from "dayjs";
 import { downloadFile } from "@/utils/index";
+import QRCode from "qrcode";
 
 import orderDetail from "./components/orderDetail";
 import Invoicing from "./components/Invoicing";
 
 export default {
-  components: { orderDetail,Invoicing },
+  components: { orderDetail, Invoicing },
   data() {
     return {
       orderEnum,
@@ -205,31 +221,34 @@ export default {
       },
       downloadLoading: false,
       payCountList: "",
-      payCountTotal: 0
+      payCountTotal: 0,
+      isuppop: false,
+      codeinfo: "",
     };
   },
 
   filters: {
     orderTypeFilter(t) {
       if (t) {
-        const item= orderEnum.orderType.find(item => item.key == t);
-        return t && item?item.label:'';
+        const item = orderEnum.orderType.find(item => item.key == t);
+        return t && item ? item.label : '';
       } else {
         return t;
       }
     },
+
     sendTypeFilter(t) {
       if (t) {
-        const item= orderEnum.sendType.find(item => item.key == t);
-        return item?item.label:'';
+        const item = orderEnum.sendType.find(item => item.key == t);
+        return item ? item.label : '';
       } else {
         return t;
       }
     },
     statusFilter(t) {
       if (t) {
-        const item= orderEnum.status.find(item => item.key == t);
-        return t && item?item.label:'';
+        const item = orderEnum.status.find(item => item.key == t);
+        return t && item ? item.label : '';
       } else {
         return t;
       }
@@ -239,6 +258,8 @@ export default {
     }
   },
   mounted() {
+
+
     if (this.$route.query.tableName) {
       this.query.tableName = this.$route.query.tableName
     }
@@ -259,11 +280,57 @@ export default {
         this.getTableData();
       }, 200);
     }
- 
+
   },
   methods: {
+    printEvent(data) {
+      console.log('打印方法执行', data)
+      let LODOP = getLodop();
+      LODOP.PRINT_INIT("打印小票");
+      LODOP.SET_PRINTER_INDEX('MHT-POS58');//设置默认打印机(这里用的是打印机名称)
+      // 设置打印纸大小D
+      LODOP.SET_PRINT_PAGESIZE(3, 800, '', '')
+      // 二维码控制大小
+      LODOP.ADD_PRINT_BARCODE('', '30px', '150px', '150px', 'QRCode', data.url) //打印产品代码条码
+      LODOP.SET_PRINT_MODE('PRINT_PAGE_PERCENT', 'Full-Width ') //设置打印风格，这里是等宽打印
+      LODOP.SET_PRINT_STYLE("Alignment", 2);
+      // 文字内容
+      LODOP.ADD_PRINT_HTM(
+        '150px',
+        '5px',
+        '100%',
+        '100%',
+        `<div style="width: 100%;font-size: 12px; ">项目分类:${data.article}</div>
+        <div style="width: 100%;font-size: 12px; margin-top:6px;">发票类型:${data.type}</div>
+        <div style="width: 100%;font-size: 12px; margin-top:6px;">生成时间:${dayjs().format('YYYY-MM-DD HH:mm:ss')}</div>
+        <div style="width: 100%;font-size: 12px; margin-top:6px;">*二维码有效期30天,超过自动失效！</div>
+        <div style="width: 100%;font-size: 14px; margin-top: 15px;">您可以使用微信，扫码开票</div>`
+      )
+      LODOP.SET_LICENSES('', 'DCFF409304DFCEB3E2C644BF96CD0720', '', '')
+      LODOP.PRINT()
+
+    },
+    qrcodeEvent(d) {
+      this.codeinfo = d
+      this.isuppopEvent()
+      setTimeout(() => {
+        QRCode.toCanvas(
+          this.$refs.canvas,
+          this.codeinfo.url, {
+          width: 160,
+          height: 160,
+        }, function (error) {
+          console.log(error);
+        }
+        );
+      }, 500);
+
+    },
+    isuppopEvent() {
+      this.isuppop = !this.isuppop
+    },
     //结账
-    payOrder(order){
+    payOrder(order) {
       console.log(order);
       this.$router.push({
         path: "/tool/Instead/index",
@@ -273,7 +340,7 @@ export default {
           useType: order.useType,
           masterId: order.masterId,
           orderId: order.id,
-          key:'isJieZhang'
+          key: 'isJieZhang'
         },
       });
     },
@@ -548,4 +615,40 @@ export default {
 .colorStyle {
   color: #ffc315;
 }
+
+.qrStyle {
+  width: 100%;
+  height: 100%;
+  background-color: rgba($color: #000000, $alpha: 0.7);
+  position: fixed;
+  z-index: 999999;
+  top: 0;
+  left: 0;
+
+  .box {
+    width: 380px;
+    height: 320px;
+    position: absolute;
+    background: #fff;
+    top: 26%;
+    left: 36%;
+    padding: 18px;
+
+    >div:first-child {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    #canvas {
+      margin-left: 49%;
+      transform: translateX(-80px);
+    }
+
+    >div:last-child {
+      text-align: center;
+    }
+  }
+
+}
 </style>