qr_coed.html
3.96 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<style type="text/css">
.qr-code-frame{
width:100%; height: 100%; display: none;
}
.qr-code-frame .mc{
position: fixed;
top: 0rem;
left: 0rem;
width: 100%;
height: 100%;
z-index: 100;
background: rgba(0,0,0,0.5);
}
.layer{
width: 5.8rem;
min-height:5.2rem;
background: #fff;
height: auto;
padding-bottom: 0.1rem;
}
.layer .tiaoxin-frame{
width: 95%;
height: 20%;
text-align: center;
margin: auto;
margin-top: 0.15rem;
}
.layer .tiaoxin-frame .img-code{
width:100%;
height:15%;
margin-top:0.35rem;
}
.layer .tiaoxin-frame .tiaoxin-code{
font-size:0.3rem;
letter-spacing:0.04rem;
height: 20%;
margin-top: 0.07rem;
}
.layer .erweima-img{
width: 3.2rem;
height: 3.2rem;
margin: auto;
margin-top: 0.2rem;
}
.layer p{
width: 100%;
}
.world{
margin-top: 0.15rem;
width: 100%;
height: 0.2rem;
font-size: 0.25rem;
}
#quan_div{ margin: 0.2rem 0;}
.guanbi{
border-radius: 50%;
border: 0.01rem solid #fff;
width: 0.6rem;
height: 0.55rem;
font-size: 0.55rem;
color: #fff;
z-index: 150;
margin: auto;
margin-top: 0.25rem;
padding-bottom: 0.05rem;
}
.layer-frame{
width: 5.8rem; height: auto; z-index: 2000;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
</style>
<div class="qr-code-frame ">
<div class="mc" onclick="mc_qr_code()"></div>
<div class="layer-frame">
<div class="layer t_c">
<div class="tiaoxin-frame">
<img class="img-code"/>
<div class="tiaoxin-code"></div>
</div>
<img class="erweima-img">
<p class="t_c world" ></p>
<div id="quan_div">
<p>有效时间： <font id="st_time"></font> 至 <font id="end_time"></font></p>
<p style="margin-top: 0.05rem;">使用说明：<font id="remark"></font></p>
</div>
</div>
<div class="guanbi flex jc_center ai_center" onclick="guanbi()">ⅹ</div>
</div>
</div>
<script type="text/javascript">
function xc_text_qr_code(val,type,st_time,end_item,remark) {
//--0为使用优惠券--
if(type==0){
$(".img-code").attr("src","/vendor/barcodegen/test_1D2.php?text="+val);
$(".tiaoxin-code").html(val) ;
$(".erweima-img").attr("src","/index.php?m=Home&c=Index&a=qr_code&data="+val);
$(".world").text("请将二维码展示给核销员，抵券更快捷")
$("#st_time").text(st_time);
$("#end_time").text(end_item);
if(remark) {
remark="仅"+remark+"使用";
$("#remark").text(remark);
}
else
$("#remark").text('全场通用');
}else{
$(".erweima-img").attr("src","/index.php?m=Home&c=Index&a=qr_code&data="+val);
$(".img-code").hide();
/* $(".erweima-img").css("margin-top","-0.2rem");*/
$(".erweima-img").css("margin-bottom","0.15rem");
$(".world").text("请将二维码展示给核销员，服务更快捷！")
$("#quan").hide();
$("#quan_div").hide();
$(".erweima-img").css("margin-top","0.78rem");
}
$(".qr-code-frame").show();
}
function mc_qr_code() {
$(".qr-code-frame").hide();
}
function guanbi(){
$(".qr-code-frame").hide();
}
</script>