条码生成页面样式完善

src/views/components/QrCodeDemo.vue

@@ -14,7 +14,7 @@
         v-model="nowBarCode"
         clearable
         placeholder="请选择条码类型"
-        style="width: 185px;"
+        style="width: 185px; top:-5px"
       >
         <el-option
           v-for="item in options"
@@ -23,22 +23,48 @@
           :value="item.value"
         />
       </el-select>
-      <el-button @click="firstButton">二维码</el-button>
-
-      <el-button @click="SecButton">条形码</el-button>
-      <div v-if="(qrDisplay = true)">
-        <qrcode-vue :value="qrCode" :size="size" level="H" />
+    </div>
+    <div class="body-container">
+      <div class="cardOne" style="margin-top:40px; margin-left:40px ">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <el-button
+              type="primary"
+              @click="firstButton"
+            >点击生成二维码</el-button>
+            <el-button
+              style="float: right; padding: 3px 0"
+              type="text"
+            >导出二维码</el-button>
+          </div>
+          <div class="item1">
+            <div>
+              <qrcode-vue :value="qrCode" :size="size" level="H" />
+            </div>
+          </div>
+        </el-card>
       </div>
-      <div>
-        <barcode :value="qrCode" :format="barcodeFormat" />
+      <div class="cardTwo" style="margin-left:52%; margin-top:-38%">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <el-button
+              type="primary"
+              @click="SecButton"
+            >点击生成条形码</el-button>
+            <el-button
+              style="float: right; padding: 3px 0"
+              type="text"
+            >导出条形码</el-button>
+          </div>
+          <div class="item2">
+            <div>
+              <barcode :value="qrCode" :format="barcodeFormat" />
+            </div>
+          </div>
+        </el-card>
       </div>
     </div>
   </div>
-  <!-- <div>
-    <qrcode-vue :value="value" :size="size" level="H" />
-    <input v-model="barcodeValue" /><br />
-    <barcode :value="barcodeValue" :format="barcodeFormat" />
-  </div> -->
 </template>
 <script>
 import QrcodeVue from 'qrcode.vue'
@@ -50,12 +76,10 @@ export default {
   },
   data() {
     return {
-      // value: "https://www.baidu.com",
       nowBarCode: '',
       size: 300,
       barcodeValue: 'test',
       barcodeFormat: '',
-      qrDisplay: false,
       qrCode: '',
       materialCode: '',
       options: [
@@ -114,7 +138,6 @@ export default {
   mounted() {},
   methods: {
     firstButton() {
-      this.qrDisplay = true
       this.qrCode = this.materialCode
       console.log(this.materialCode)
       this.$message({
@@ -123,7 +146,6 @@ export default {
       })
     },
     SecButton() {
-      this.qrCode = this.materialCode
       if (this.nowBarCode === '') {
         this.$message({
           message: '请先选择条形码类型',
@@ -131,6 +153,7 @@ export default {
         })
         return
       }
+      this.qrCode = this.materialCode
       console.log('nowBarCode', this.nowBarCode)
       this.barcodeFormat = this.nowBarCode.value
     }
@@ -138,4 +161,37 @@ export default {
 }
 </script>
 
-<style scoped></style>
+<style scoped>
+.app-container .body-container {
+  padding: 20px 20px 20px 20px;
+}
+.head-container {
+  margin-top: 0px;
+}
+.text {
+  font-size: 14px;
+}
+
+.item1 {
+  margin-bottom: 24px;
+  margin-left: 64px;
+}
+.item2 {
+  margin-bottom: 24px;
+  margin-left: 64px;
+  height: 300px;
+}
+
+.clearfix:before,
+.clearfix:after {
+  display: table;
+  content: "";
+}
+.clearfix:after {
+  clear: both;
+}
+
+.box-card {
+  width: 480px;
+}
+</style>