From 39d383f3b19c0cb14a3155e30343b01ba5c0991e Mon Sep 17 00:00:00 2001
From: corizhang <zhang_fan0108@163.com>
Date: Tue, 19 Sep 2023 10:40:27 +0800
Subject: [PATCH] new

---
 qrcode_test/index.html | 67 ++++++++++++++++++++++++++++++++++++------
 1 file changed, 58 insertions(+), 9 deletions(-)
diff --git a/qrcode_test/index.html b/qrcode_test/index.html
index 641c26a..cdb2bb2 100644
--- a/qrcode_test/index.html
+++ b/qrcode_test/index.html
@@ -3,19 +3,22 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script type="text/javascript" src="../vue/js/vue.js"></script>
     <style type="text/css" >
         .left-box {
             width: 1344px;
             height: 880px;
-            background-color: skyblue;
-            float: right;
+            /* background-color: skyblue; */
+            border: 0.5px solid #999;
+            float: left;
         }
 
         .right-box {
             width: 360px;
             height: 880px;
+            margin-left: -0.5px;
             /* background-color: orange; */
-            float: right;
+            float: left;
             border: 0.5px solid #999;
         }
 
@@ -50,8 +53,8 @@
             color: #666;
         }
 
-        input {
-            display: inline-block;
+        button {
+            display: block;
             height: 38px;
             width: 318px;
             border-radius: 4px;
@@ -72,12 +75,46 @@
             border: #256294 1px solid;
             margin-top: 8px;
         }
+
+        table {
+            width: 100%;
+            text-align: center;
+            padding: 40px 20px;
+            line-height: 40px;
+            /* background-color: black; */
+        }
+
+
+
+        tbody:hover {
+            background-color: skyblue;
+        }
+
     </style>
     <title>QRCode Qurey</title>
 </head>
 <body>
-    <div class="left-box">
-        <span>hello</span>
+    <div class="left-box" id="root">
+        <table>
+            <thead>
+                <tr>
+                    <th>QRCode</th>
+                    <th>State</th>
+                    <th>User</th>
+                    <th>ActName</th>
+                    <th>UpdateTime</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr v-for="(qr) in qrcode">
+                    <td v-text="qr.qrcode"></td>
+                    <td v-text="qr.state"></td>
+                    <td v-text="qr.user"></td>
+                    <td v-text="qr.actname"></td>
+                    <td v-text="qr.updatetime"></td>
+                </tr>
+            </tbody>
+        </table>
     </div>
     <div class="right-box">
         <div class="qr-block">
@@ -93,9 +130,21 @@
                 <img src="#" alt="">
                 <span>Export CSV</span>
             </div>
-            <input type="submit" value="USE IT" id="use-it">
-            <input type="submit" value="CHANGE" id="change">
+            <button id="use-it">USE IT</button>
+            <button id="change">CHANGE</button>
         </div>
     </div>
 </body>
+
+<script type="text/javascript">
+    const vm = new Vue({
+        el:'#root',
+        data:{
+            qrcode:[
+                {qrcode:'FIT_110211', state:'used', user:'张帆', actname:'本溪医保查询', updatetime:'2023-09-14 18:16:32'},
+                {qrcode:'FIT_110985', state:'unused', user:'张帆', actname:'抚顺医保查询', updatetime:'2023-09-14 18:16:32'},
+            ]
+        }
+    })
+</script>
 </html>
\ No newline at end of file
