Cori
/
html_and_vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

new

main
corizhang 2023-09-19 10:40:27 +08:00
parent 5ca5ca2ef7
commit 39d383f3b1
1 changed files with 58 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
qrcode_test/index.html
View File

@ -3,19 +3,22 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <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" > <style type="text/css" >
.left-box { .left-box {
width: 1344px; width: 1344px;
height: 880px; height: 880px;
background-color: skyblue; /* background-color: skyblue; */
float: right; border: 0.5px solid #999;
float: left;
} }
.right-box { .right-box {
width: 360px; width: 360px;
height: 880px; height: 880px;
margin-left: -0.5px;
/* background-color: orange; */ /* background-color: orange; */
float: right; float: left;
border: 0.5px solid #999; border: 0.5px solid #999;
} }
@ -50,8 +53,8 @@
color: #666; color: #666;
} }
input { button {
display: inline-block; display: block;
height: 38px; height: 38px;
width: 318px; width: 318px;
border-radius: 4px; border-radius: 4px;
@ -72,12 +75,46 @@
border: #256294 1px solid; border: #256294 1px solid;
margin-top: 8px; margin-top: 8px;
} }
table {
width: 100%;
text-align: center;
padding: 40px 20px;
line-height: 40px;
/* background-color: black; */
}
tbody:hover {
background-color: skyblue;
}
</style> </style>
<title>QRCode Qurey</title> <title>QRCode Qurey</title>
</head> </head>
<body> <body>
<div class="left-box"> <div class="left-box" id="root">
<span>hello</span> <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>
<div class="right-box"> <div class="right-box">
<div class="qr-block"> <div class="qr-block">
@ -93,9 +130,21 @@
<img src="#" alt=""> <img src="#" alt="">
<span>Export CSV</span> <span>Export CSV</span>
</div> </div>
<input type="submit" value="USE IT" id="use-it"> <button id="use-it">USE IT</button>
<input type="submit" value="CHANGE" id="change"> <button id="change">CHANGE</button>
</div> </div>
</div> </div>
</body> </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> </html>