|
@@ -13,106 +13,148 @@
|
|
|
<script>
|
|
|
!(function(win, doc) {
|
|
|
function setFontSize() {
|
|
|
- var docEl = doc.documentElement;
|
|
|
- var winWidth = docEl.clientWidth;
|
|
|
- doc.documentElement.style.fontSize = (winWidth / 375) * 100 + "px";
|
|
|
+ var docEl = doc.documentElement;
|
|
|
+ var winWidth = docEl.clientWidth;
|
|
|
+ doc.documentElement.style.fontSize = (winWidth / 375) * 100 + "px";
|
|
|
}
|
|
|
var userAgent = navigator.userAgent;
|
|
|
win.addEventListener("resize", function() {
|
|
|
- if (navigator.userAgent !== userAgent) {
|
|
|
- location.reload();
|
|
|
- }
|
|
|
+ if (navigator.userAgent !== userAgent) {
|
|
|
+ location.reload();
|
|
|
+ }
|
|
|
});
|
|
|
setFontSize();
|
|
|
})(window, document);
|
|
|
</script>
|
|
|
<style>
|
|
|
.page{
|
|
|
- width: 100%;
|
|
|
- height: 100vh;
|
|
|
- background: url(__CDN__/assets/invite/bg.png) no-repeat center/cover;
|
|
|
- background-size: 100% 100%;
|
|
|
+ width: 3.48rem;
|
|
|
+ height: 6.17rem;
|
|
|
position: relative;
|
|
|
-
|
|
|
+ margin: 0 auto;
|
|
|
+ padding: 0.14rem;
|
|
|
+ background-color: #1D1A1B;
|
|
|
}
|
|
|
- .page .invite-wrap{
|
|
|
+ .people-panel{
|
|
|
+ width: 3.20rem;
|
|
|
+ height: 5.35rem;
|
|
|
+ position: relative;
|
|
|
+ z-index: 2;
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
+ .people-panel .people-img{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ position: relative;
|
|
|
+ object-fit: cover;
|
|
|
+ }
|
|
|
+ .people-panel::after{
|
|
|
+ content: '';
|
|
|
position: absolute;
|
|
|
- z-index: 2;
|
|
|
- left:50%;
|
|
|
- transform: translateX(-50%);
|
|
|
- top:34%;
|
|
|
- background-color: #FFEDAD;
|
|
|
- border-radius: 0.10rem;
|
|
|
- padding: 0.15rem;
|
|
|
- width: 2rem;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background: rgba(0,0,0,.4);
|
|
|
}
|
|
|
- .page .invite-wrap .title{
|
|
|
- color:#333;
|
|
|
- font-size: 0.15rem;
|
|
|
- line-height: 0.20rem;
|
|
|
- text-align: center;
|
|
|
- font-weight: 700;
|
|
|
+ .girl-panel{
|
|
|
+ position: absolute;
|
|
|
+ z-index: 3;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ padding-top: 0.42rem;
|
|
|
}
|
|
|
- .page .invite-wrap .val{
|
|
|
- margin-top: 0.10rem;
|
|
|
- color:#333;
|
|
|
- font-size: 0.15rem;
|
|
|
- text-align: center;
|
|
|
- line-height: 0.20rem;
|
|
|
+ .girl-panel .logo-img{
|
|
|
+ width: 1.41rem;
|
|
|
+ height: 0.44rem;
|
|
|
+ object-fit: cover;
|
|
|
}
|
|
|
- .btn-c{
|
|
|
- margin: 0.20rem auto 0;
|
|
|
- border-radius: 0.20rem;
|
|
|
- width: 0.60rem;
|
|
|
- height: 0.20rem;
|
|
|
- line-height: 0.20rem;
|
|
|
- text-align: center;
|
|
|
- color:#fff;
|
|
|
- font-size: 0.12rem;
|
|
|
- background: #ED617F;
|
|
|
+ .girl-panel .girl-img{
|
|
|
+ width: 3.02rem;
|
|
|
+ height: 4.34rem;
|
|
|
+ object-fit: cover;
|
|
|
}
|
|
|
- .p-btn{
|
|
|
- width: 2.5rem;
|
|
|
- height: 0.30rem;
|
|
|
- line-height: 0.30rem;
|
|
|
- text-align: center;
|
|
|
- color:#ED617F;
|
|
|
- font-size: 0.14rem;
|
|
|
- font-weight: 700;
|
|
|
- border-radius: 0.10rem;
|
|
|
- margin: 0.30rem auto;
|
|
|
+ .code-panel{
|
|
|
position: absolute;
|
|
|
- z-index: 2;
|
|
|
- left: 50%;
|
|
|
- transform: translateX(-50%);
|
|
|
- top: 60%;
|
|
|
- background-color: #FFEDAD;
|
|
|
- }
|
|
|
-
|
|
|
+ z-index: 4;
|
|
|
+ width: 100%;
|
|
|
+ height: 1.60rem;
|
|
|
+ left: 0;
|
|
|
+ bottom: 0;
|
|
|
+ padding-top: 0.66rem;
|
|
|
+ background: url(__CDN__/assets/invite/imgs/bottom.png) no-repeat center/cover;
|
|
|
|
|
|
+ }
|
|
|
+ .code-panel .code-wrap{
|
|
|
+ width: 100%;
|
|
|
|
|
|
+ }
|
|
|
+ .code-panel .code-wrap .k{
|
|
|
+ font-size: 0.20rem;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #FFEDAD;
|
|
|
+ margin-right: 0.10rem;
|
|
|
+ }
|
|
|
+ .code-panel .code-wrap .v{
|
|
|
+ font-size: 0.17rem;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #E84B67;
|
|
|
+ }
|
|
|
+ .code-panel .btn-wrap{
|
|
|
+ margin: 0.20rem auto 0;
|
|
|
+ background: #FFEDAD;
|
|
|
+ border-radius: 0.13rem;
|
|
|
+ width: 1.30rem;
|
|
|
+ height: 0.25rem;
|
|
|
+ line-height: 0.25rem;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 0.14rem;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #E84B67;
|
|
|
+ }
|
|
|
+ body{
|
|
|
+ width: 100%;
|
|
|
+ height: 100vh;
|
|
|
+ background-color: #1D1A1B;
|
|
|
+ }
|
|
|
</style>
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
-<div class="page">
|
|
|
- <div class="invite-wrap">
|
|
|
- <h1 class="title">邀请码</h1>
|
|
|
- <p class="val">{$code}</p>
|
|
|
- <div class="btn-c copy" data-clipboard-text="{$code}">复制</div>
|
|
|
+ <div class="page">
|
|
|
+ <div class="people-panel">
|
|
|
+ <img src="__CDN__/assets/invite/imgs/people.png" class="people-img"/>
|
|
|
+ </div>
|
|
|
+ <div class="girl-panel flex-col align-center">
|
|
|
+ <img src="__CDN__/assets/invite/imgs/logo.png" class="logo-img"/>
|
|
|
+ <img src="__CDN__/assets/invite/imgs/girl.png" class="girl-img">
|
|
|
+ </div>
|
|
|
+ <div class="code-panel">
|
|
|
+ <div class="code-wrap align-center justify-center">
|
|
|
+ <span class="k">邀请码</span>
|
|
|
+ <span class="v">{$code}</span>
|
|
|
+ </div>
|
|
|
+ <div class="btn-wrap copy" data-clipboard-text="{$code}">
|
|
|
+ 复制并下载
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <a class="p-btn" href="{$site.apkUrl}">去下载</a>
|
|
|
-</div>
|
|
|
</body>
|
|
|
</html>
|
|
|
<script>
|
|
|
- var clipboard = new ClipboardJS('.copy');
|
|
|
- clipboard.on('success', function(e) {
|
|
|
- // console.log(e.text);
|
|
|
- swal({icon: "success",text:'复制成功',closeOnClickOutside: true,buttons: false,timer: 3000});
|
|
|
- });
|
|
|
+var clipboard = new ClipboardJS('.copy');
|
|
|
+clipboard.on('success', function(e) {
|
|
|
+ // console.log(e.text);
|
|
|
+ swal({icon: "success",text:'复制成功',closeOnClickOutside: true,buttons: false,timer: 3000});
|
|
|
+ window.location.href="{$site.apkUrl}"
|
|
|
+});
|
|
|
|
|
|
- clipboard.on('error', function(e) {
|
|
|
- swal({icon: "error",text:'复制失败',closeOnClickOutside: true,buttons: false,timer: 3000})
|
|
|
- });
|
|
|
+clipboard.on('error', function(e) {
|
|
|
+ swal({icon: "error",text:'复制失败',closeOnClickOutside: true,buttons: false,timer: 3000})
|
|
|
+});
|
|
|
</script>
|