167 lines
3.7 KiB
Vue
167 lines
3.7 KiB
Vue
<template>
|
|
<view class="container">
|
|
<unitv-page id="loginPage" ref="loginPage" class="loginPage" :show="true">
|
|
<app-header :is-show-user-info="false" />
|
|
<view class="main_title">
|
|
<text>登录可享</text>
|
|
<text>3</text>
|
|
<text>大权益</text>
|
|
</view>
|
|
<view class="rights_and_interests">
|
|
<view class="item">
|
|
<view class="icon">
|
|
<image src="/static/1080P.png" style="width: 17rpx; height: 9rpx" />
|
|
</view>
|
|
<view class="title">尊享1080P画质</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="icon">
|
|
<image
|
|
src="/static/w_yunduan.png"
|
|
style="width: 16rpx; height: 11rpx"
|
|
/>
|
|
</view>
|
|
<view class="title">同步云端观看历史</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="icon">
|
|
<image src="/static/fuli.png" style="width: 12rpx; height: 12rpx" />
|
|
</view>
|
|
<view class="title">福利活动享不停</view>
|
|
</view>
|
|
</view>
|
|
<view class="flex">
|
|
<view class="login_methods">
|
|
<view class="item">
|
|
<view class="icon">
|
|
<image
|
|
src="/static/scan_login.png"
|
|
style="width: 33rpx; height: 33rpx"
|
|
/>
|
|
</view>
|
|
<view class="right">
|
|
<view class="title">扫码登录</view>
|
|
<view class="subtitle">使用手机扫码授权</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="qrcode">
|
|
<view class="image">
|
|
<canvas
|
|
id="qrcode"
|
|
canvas-id="qrcode"
|
|
:style="{ width: canvasSize + 'px', height: canvasSize + 'px' }"
|
|
/>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</unitv-page>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import UQRCode from "uqrcodejs";
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
canvasSize: uni.upx2px(170),
|
|
};
|
|
},
|
|
onShow() {
|
|
if (this.$refs.loginPage) {
|
|
this.$refs.loginPage.showPage();
|
|
}
|
|
},
|
|
onReady() {
|
|
const qr = new UQRCode();
|
|
qr.data = "qrcode_url";
|
|
qr.size = this.canvasSize;
|
|
qr.make();
|
|
qr.canvasContext = uni.createCanvasContext("qrcode");
|
|
qr.drawCanvas();
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.container {
|
|
.main_title {
|
|
margin-top: 10rpx;
|
|
font-size: 30rpx;
|
|
|
|
text:nth-child(2) {
|
|
color: rgba(0, 204, 255, 1);
|
|
padding: 0 4rpx;
|
|
}
|
|
}
|
|
|
|
.rights_and_interests {
|
|
margin-top: 21rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.item {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-left: 18rpx;
|
|
|
|
&:first-child {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.title {
|
|
margin-left: 3rpx;
|
|
font-size: 12rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.flex {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.login_methods {
|
|
margin-top: 27rpx;
|
|
|
|
.item {
|
|
width: 359rpx;
|
|
height: 72rpx;
|
|
background-image: url("/static/scan_login_bg.png");
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
display: flex;
|
|
align-items: center;
|
|
padding-left: 12rpx;
|
|
|
|
.right {
|
|
margin-left: 14rpx;
|
|
|
|
.title {
|
|
font-size: 14rpx;
|
|
}
|
|
|
|
.subtitle {
|
|
padding-top: 9rpx;
|
|
font-size: 9rpx;
|
|
color: #ccc;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.qrcode {
|
|
background-color: rgba(255, 255, 255, 0.05);
|
|
border: 1px solid rgba(255, 255, 255, 0.17);
|
|
border-radius: 4px;
|
|
padding: 12rpx;
|
|
|
|
.image {
|
|
background-color: #fff;
|
|
padding: 12rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|