update

front/src/main/index.js

@@ -13,6 +13,8 @@ function createWindow() {
     fullscreenable: true,
     // minWidth: 432,
     // minHeight: 768,
+    // width:2160,
+    // height:3840,
     show: false,
     autoHideMenuBar: true,
     icon: logoIcon,

front/src/renderer/src/App.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="appClass" v-if="isVip">
-    <dv-border-box1 ref="borderRef" style="text-align: center; width: 100vw; height: 100vh" class="maincss">
+    <dv-border-box1 ref="borderRef" style="text-align: center; width: 2160px; height: 3840px" class="maincss">
       <span style="font-size:2em;color: aquamarine;">米微婚礼</span>
       <div class="topinput">
         <dv-border-box8 :dur="5" class="topinputinfo">
           <div dv-bg>
-            <span style="color: #fff;">姓名：</span>
+            <span style="color: #fff;"><span style="color: #ff0000;">*</span>姓名：</span>
             <span>
-              <el-input v-model="form.name" style="width: 280px;color: #fff;" placeholder="请输入姓名" />
+              <el-input v-model.trim="form.name" style="width: 280px;color: #fff;" placeholder="请输入姓名" />
             </span>
           </div>
         </dv-border-box8>
@@ -42,15 +42,22 @@
           <div v-if="dispalyTitle" style="position: absolute;color: #fff;top: 28vh;left: 40vw;font-size: 1.5em;">
             {{ dispalyTitle }}
           </div>
+          <div v-if="dispalyTitle" style="position: absolute;color: #fff;top: 36vh;left: 40vw;font-size: 1.5em;">
+            单位名称：XXXX
+          </div>
+          <div v-if="dispalyTitle" style="position: absolute;color: #fff;top: 44vh;left: 40vw;font-size: 1.5em;">
+            扫描二维码下载
+          </div>
           <canvas width="180px" height="180px" id="canvas1"
-            style="position: absolute;top: 34vh;left: calc(50vw - 90px);"></canvas>
+            style="position: absolute;top: 34vh;left: calc(65vw - 90px);"></canvas>
 
           <el-row v-if="pngList.length" style="position: absolute;color: #fff;top: 57vh;left: 1vw;">
-            <el-col :span="6" v-for="( pngItem, pngIndex) in pngList">
+            <el-col :span="12" v-for="( pngItem, pngIndex) in pngList" style="margin:24px 0;">
               <v-row>
-                <v-col :span="4">{{ pngItem.age }}岁</v-col>
-                <v-col :span="20"><img :src="pngItem.png" :alt="`${pngItem.age}岁`" width="150px"
-                    height="150px" /></v-col>
+                <v-col :span="4" style="position: relative;top: -225px;font-size: 3em;color: cyan;">{{ pngItem.age
+                  }}岁</v-col>
+                <v-col :span="20"><img :src="pngItem.png" :alt="`${pngItem.age}岁`" width="500px"
+                    height="450px" /></v-col>
               </v-row>
             </el-col>
           </el-row>
@@ -95,6 +102,12 @@ export default {
   },
   methods: {
     async takePhotoUpload() {
+      let ctx1 = document.getElementById('canvas1').getContext('2d')
+      ctx1.width = 500
+      ctx1.height = 500
+      ctx1.clearRect(0, 0, 500, 500);
+      this.dispalyTitle = ""
+      this.pngList = []
       this.pngObj = {}
       this.form.img = ''
       let device = '' // 所选择的摄像头 deviceId
@@ -143,7 +156,13 @@ export default {
       // ctx1.width=500
       // ctx1.height=500
       // ctx.clearRect(0, 0, 500, 500);
-
+      if (!this.form.name) {
+        ElMessage({
+          type: "error",
+          message: "请填写姓名"
+        })
+        return
+      }
       let ctx = document.getElementById('canvas').getContext('2d')
       ctx.width = 500
       ctx.height = 480
@@ -281,8 +300,11 @@ export default {
 </script>
 <style scoped>
 .appClass {
-  width: 100vw;
-  height: 100vh;
+  width: 2160px;
+  height: 3840px;
+  /* overflow: hidden; */
+  /* width: 100vw; */
+  /* height: 100vh; */
   color: #000;
   background-color: #00b8ca;
 }