|
|
@@ -0,0 +1,273 @@
|
|
|
+<html lang="en">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title></title>
|
|
|
+ <style>
|
|
|
+ *{
|
|
|
+ padding: 0;
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+ .imgBox {
|
|
|
+ text-align: center;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottomInfo {
|
|
|
+ background-color: #fff;
|
|
|
+
|
|
|
+ padding: 20px 10px;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottomInfo .content {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ line-height: 36px;
|
|
|
+
|
|
|
+ font-size: 13px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottomInfo .content img {
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottom {
|
|
|
+ font-size: 13px;
|
|
|
+ text-align: center;
|
|
|
+ margin-top: 18px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .signInfo {
|
|
|
+ background-color: #fff;
|
|
|
+
|
|
|
+ border-bottom: 1px dotted #222;
|
|
|
+ padding: 20px 10px;
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+ .signInfo .qrBox {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+ .signInfo .qrTitle {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-bottom: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .signInfo .qrCode {
|
|
|
+ width: 211px;
|
|
|
+ height: 211px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .signInfo .warn {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #666666;
|
|
|
+ }
|
|
|
+
|
|
|
+ .signInfo .code {
|
|
|
+ width: 151px;
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ text-align: center;
|
|
|
+ border-radius: 6px;
|
|
|
+ border: 1px solid #2A63F3;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #2A63F3;
|
|
|
+ margin: 16px 0 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .titleBox {
|
|
|
+ margin: 10px 0;
|
|
|
+ padding: 0 10px;
|
|
|
+
|
|
|
+ line-height: 39px;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 10px;
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+ .titleBox .title {
|
|
|
+ font-size: 15px;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .tips img {
|
|
|
+ width: 14px;
|
|
|
+ height: 14px;
|
|
|
+ margin-right: 2px;
|
|
|
+ }
|
|
|
+ button {
|
|
|
+ font-size: 18px;
|
|
|
+ color: #fff;
|
|
|
+ font-weight: bold;
|
|
|
+ position: fixed;
|
|
|
+ bottom: 34px;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ width: 351px;
|
|
|
+ height: 48px;
|
|
|
+ line-height: 48px;
|
|
|
+ text-align: center;
|
|
|
+ background: #2A63F3;
|
|
|
+ border-radius: 24px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .info {
|
|
|
+ padding: 0 12px;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .wrap {
|
|
|
+ width: 100%;
|
|
|
+ min-height: 100vh;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ /* padding: 44px 0 83px; */
|
|
|
+ box-sizing: border-box;
|
|
|
+ background-color: #f4f4f4;
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 头部样式 */
|
|
|
+ .header-wrap {
|
|
|
+ width: 100%;
|
|
|
+ height: 44px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ z-index: 500;
|
|
|
+ background-color: #ffffff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .header {
|
|
|
+ width: 100%;
|
|
|
+ height: 44px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ background-color: #ffffff;
|
|
|
+ z-index: 999;
|
|
|
+ padding: 0 15px;
|
|
|
+ position: relative;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+
|
|
|
+ .return-img {
|
|
|
+ position: absolute;
|
|
|
+ left: 15px;
|
|
|
+ top: 50%;
|
|
|
+ transform: translate(0, -50%);
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .header-title {
|
|
|
+ /* flex: 1; */
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-line-clamp: 1;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ color: #333333;
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: bold;
|
|
|
+ /* position: absolute;
|
|
|
+ left: 40px;
|
|
|
+ top: 50%;
|
|
|
+ transform: translate(0, -50%); */
|
|
|
+ /* padding-right: 120px; */
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+
|
|
|
+ .header-btn-box {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ position: absolute;
|
|
|
+ right: 12px;
|
|
|
+ top: 50%;
|
|
|
+ transform: translate(0, -50%);
|
|
|
+ }
|
|
|
+
|
|
|
+ .header-btn-box>button {
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .header-btn-box>button:last-child {
|
|
|
+ margin-right: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .header-btn-box>button>img {
|
|
|
+ height: 24px;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <div class="wrap">
|
|
|
+ <div class="info">
|
|
|
+ <div class="titleBox">
|
|
|
+ <div class="title">
|
|
|
+ <?php $act_title ?>
|
|
|
+ </div>
|
|
|
+ <div class="person">
|
|
|
+ 参会者： <?php $num ?>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="signInfo">
|
|
|
+ <div class="qrBox">
|
|
|
+ <div class="qrTitle">
|
|
|
+ 签到码-用于现场签到
|
|
|
+ </div>
|
|
|
+ <div class="imgBox">
|
|
|
+
|
|
|
+ <img class="qrCode" src="<?php $qr_code ?>" alt="">
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="code">
|
|
|
+ 签到码： 123132123
|
|
|
+ </div>
|
|
|
+ <div class="warn">
|
|
|
+ 仅限本人使用
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div class="bottomInfo">
|
|
|
+ <div class="content">
|
|
|
+ <img src="/static/read@2x.png" alt="">
|
|
|
+ 123
|
|
|
+ </div>
|
|
|
+ <div class="content">
|
|
|
+ <img src="/static/time@2x.png" alt="">
|
|
|
+ 1213
|
|
|
+ </div>
|
|
|
+ <div class="content">
|
|
|
+ <img src="/static/location@2x.png" alt="">
|
|
|
+ 123
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="bottom">
|
|
|
+ 此二维码用于现场签到，请携带至会场
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+</body>
|
|
|
+
|
|
|
+</html>
|
