@quicktvui/tv-ad-unlock 1.0.4 → 1.0.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,61 @@
1
+
2
+ .ad-container[data-v-72decd47] {
3
+ width: 1920px;
4
+ height: 1080px;
5
+ background-color: rgba(0, 0, 0, 0.7);
6
+ display: flex;
7
+ justify-content: center;
8
+ align-items: center;
9
+ }
10
+ .content[data-v-72decd47] {
11
+ width: 892px;
12
+ height: 646px;
13
+ display: flex;
14
+ flex-direction: column;
15
+ align-items: center;
16
+ justify-content: center;
17
+ }
18
+ .content-bg[data-v-72decd47] {
19
+ position: absolute;
20
+ width: 892px;
21
+ height: 646px;
22
+ background-color: #FBE6C4;
23
+ border-radius: 30px;
24
+ border-width: 1px;
25
+ border-color: #979797;
26
+ }
27
+ .title[data-v-72decd47] {
28
+ font-weight: 500;
29
+ font-size: 46px;
30
+ color: #000000;
31
+ }
32
+ .sub-title[data-v-72decd47] {
33
+ margin-top: 32px;
34
+ font-weight: 400;
35
+ font-size: 30px;
36
+ color: rgba(0, 0, 0, 0.65);
37
+ }
38
+ .qrcode-container[data-v-72decd47] {
39
+ margin-top: 32px;
40
+ width: 300px;
41
+ height: 300px;
42
+ border-radius: 30px;
43
+ background-color: #FFFFFF;
44
+ display: flex;
45
+ justify-content: center;
46
+ align-items: center;
47
+ }
48
+ .qrcode[data-v-72decd47] {
49
+ position: absolute;
50
+ width: 260px;
51
+ height: 260px;
52
+ border-radius: 30px;
53
+ background-color: #FFFFFF;
54
+ }
55
+ .invalid-code[data-v-72decd47] {
56
+ position: absolute;
57
+ width: 300px;
58
+ height: 300px;
59
+ border-radius: 30px;
60
+ background-color: transparent;
61
+ }
@@ -0,0 +1,2 @@
1
+ export { default } from './TVAdUnlockView.vue';
2
+ //# sourceMappingURL=TVAdUnlockView.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"TVAdUnlockView.d.ts","sourceRoot":"","sources":["../src/TVAdUnlockView.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAA"}
@@ -0,0 +1,183 @@
1
+ import { defineComponent, inject, ref, computed, resolveComponent, openBlock, createElementBlock, createElementVNode, toDisplayString, unref, createBlock, createCommentVNode } from 'vue';
2
+ import { useESToast, useESLocalStorage, useESRuntime, ESKeyCode } from '@extscreen/es3-core';
3
+ import { useESRouter } from '@extscreen/es3-router';
4
+ import { TV_AD_UNLOCK_KEY } from './plugin';
5
+ import { createStorageKeys, useTVAdUnlockStorage, useTVAdUnlock } from './useTVAdUnlock';
6
+
7
+ const _hoisted_1 = { class: "ad-container" };
8
+ const _hoisted_2 = { class: "content" };
9
+ const _hoisted_3 = { class: "title" };
10
+ const _hoisted_4 = { class: "sub-title" };
11
+ const _hoisted_5 = { class: "qrcode-container" };
12
+ const _hoisted_6 = ["src"];
13
+ const _hoisted_7 = ["src"];
14
+ var script = /*@__PURE__*/ defineComponent({
15
+ __name: 'TVAdUnlockView',
16
+ setup(__props, { expose: __expose }) {
17
+ const pluginContext = inject(TV_AD_UNLOCK_KEY);
18
+ const { requestManager, pageConfig: rawPageConfig, trackEvent } = pluginContext;
19
+ const toast = useESToast();
20
+ const storage = useESLocalStorage();
21
+ const router = useESRouter();
22
+ const runtime = useESRuntime();
23
+ const dnum = runtime.getRuntimeDeviceId();
24
+ const packageName = runtime.getESAppName?.() ?? 'unknown';
25
+ const keys = createStorageKeys(packageName);
26
+ const adStorage = useTVAdUnlockStorage(storage, keys);
27
+ const routeOverrides = ref({});
28
+ const routeRuleParams = ref({
29
+ creditsPerAd: 5,
30
+ permanentUnlockAfterTotalAds: 10
31
+ });
32
+ const pageConfig = computed(() => ({
33
+ ...rawPageConfig,
34
+ ...routeOverrides.value
35
+ }));
36
+ const payParams = ref({
37
+ assetId: '',
38
+ assetName: '',
39
+ fromId: '',
40
+ fromName: ''
41
+ });
42
+ async function handleUnlockSuccess() {
43
+ await adStorage.setTodayUnlocked();
44
+ await adStorage.addCredits(routeRuleParams.value.creditsPerAd);
45
+ const totalAds = await adStorage.incrementTotalAdsWatched();
46
+ await adStorage.incrementTodayAdCount();
47
+ if (totalAds >= routeRuleParams.value.permanentUnlockAfterTotalAds) {
48
+ await adStorage.setPermanentUnlocked();
49
+ }
50
+ trackEvent?.({ type: 'page', name: 'unlock_success' });
51
+ toast.showToast('解锁成功!');
52
+ router.back();
53
+ }
54
+ const { adQrCode, isInvalid, qrCodeState, isLoading, isShowConfirmToast, getAdQrCode, stopPollTvADStatusTimer, stopInvalidTimer, reset } = useTVAdUnlock({
55
+ packageName,
56
+ superRequestBaseUrl: '',
57
+ invalidTimeout: 300000,
58
+ pollInterval: 1000
59
+ }, keys, requestManager, {
60
+ onUnlockSuccess: () => handleUnlockSuccess(),
61
+ onUnlockFailed: (error) => {
62
+ trackEvent?.({ type: 'click', name: 'unlock_failed' });
63
+ },
64
+ onQrCodeInvalid: () => {
65
+ trackEvent?.({ type: 'click', name: 'qr_code_invalid' });
66
+ },
67
+ onQrCodeScanned: () => {
68
+ trackEvent?.({ type: 'click', name: 'qr_code_scanned' });
69
+ }
70
+ });
71
+ function onKeyDown(event) {
72
+ switch (event.keyCode) {
73
+ case ESKeyCode.ES_KEYCODE_DPAD_CENTER:
74
+ case ESKeyCode.ES_KEYCODE_ENTER:
75
+ if (isInvalid.value || qrCodeState.value === 1) {
76
+ const cfg = pageConfig.value;
77
+ getAdQrCode(dnum, cfg.scanTitle, cfg.scanContent, cfg.scanToast);
78
+ }
79
+ break;
80
+ }
81
+ }
82
+ function onESCreate(params) {
83
+ payParams.value = {
84
+ assetId: params.assetId || '',
85
+ assetName: params.assetName || '',
86
+ fromId: params.fromId || '',
87
+ fromName: params.fromName || ''
88
+ };
89
+ if (params.creditsPerAd) {
90
+ routeRuleParams.value.creditsPerAd = parseInt(params.creditsPerAd) || 5;
91
+ }
92
+ if (params.permanentUnlockAfterTotalAds) {
93
+ routeRuleParams.value.permanentUnlockAfterTotalAds = parseInt(params.permanentUnlockAfterTotalAds) || 10;
94
+ }
95
+ const extra = {};
96
+ if (params.title)
97
+ extra.title = params.title;
98
+ if (params.subTitle)
99
+ extra.subTitle = params.subTitle;
100
+ if (params.scanTitle)
101
+ extra.scanTitle = params.scanTitle;
102
+ if (params.scanContent)
103
+ extra.scanContent = params.scanContent;
104
+ if (params.scanToast)
105
+ extra.scanToast = params.scanToast;
106
+ if (params.invalidCodeImage)
107
+ extra.invalidCodeImage = params.invalidCodeImage;
108
+ if (params.scannedCodeImage)
109
+ extra.scannedCodeImage = params.scannedCodeImage;
110
+ routeOverrides.value = extra;
111
+ trackEvent?.({
112
+ type: 'page',
113
+ name: 'ad_page_show',
114
+ assetId: payParams.value.assetId,
115
+ assetName: payParams.value.assetName,
116
+ fromId: payParams.value.fromId,
117
+ fromName: payParams.value.fromName
118
+ });
119
+ const cfg = pageConfig.value;
120
+ getAdQrCode(dnum, cfg.scanTitle, cfg.scanContent, cfg.scanToast);
121
+ }
122
+ function onBackPressed() {
123
+ if (!isShowConfirmToast.value && qrCodeState.value === 1) {
124
+ toast.showToast('广告播放中,请不要关闭弹窗');
125
+ isShowConfirmToast.value = true;
126
+ return true;
127
+ }
128
+ else {
129
+ stopPollTvADStatusTimer();
130
+ stopInvalidTimer();
131
+ router.back();
132
+ }
133
+ }
134
+ function onESDestroy() {
135
+ stopPollTvADStatusTimer();
136
+ stopInvalidTimer();
137
+ }
138
+ __expose({
139
+ onESCreate,
140
+ onKeyDown,
141
+ onBackPressed,
142
+ onESDestroy
143
+ });
144
+ return (_ctx, _cache) => {
145
+ const _component_qt_qr_code = resolveComponent("qt-qr-code");
146
+ return (openBlock(), createElementBlock("div", _hoisted_1, [
147
+ createElementVNode("div", _hoisted_2, [
148
+ _cache[0] || (_cache[0] = createElementVNode("div", { class: "content-bg" }, null, -1 /* CACHED */)),
149
+ createElementVNode("span", _hoisted_3, toDisplayString(pageConfig.value.title), 1 /* TEXT */),
150
+ createElementVNode("span", _hoisted_4, toDisplayString(pageConfig.value.subTitle), 1 /* TEXT */),
151
+ createElementVNode("div", _hoisted_5, [
152
+ (unref(adQrCode) && !unref(isInvalid) && unref(qrCodeState) !== 1)
153
+ ? (openBlock(), createBlock(_component_qt_qr_code, {
154
+ key: 0,
155
+ class: "qrcode",
156
+ content: unref(adQrCode)
157
+ }, null, 8 /* PROPS */, ["content"]))
158
+ : createCommentVNode("v-if", true),
159
+ (unref(isInvalid))
160
+ ? (openBlock(), createElementBlock("img", {
161
+ key: 1,
162
+ class: "invalid-code",
163
+ src: pageConfig.value.invalidCodeImage
164
+ }, null, 8 /* PROPS */, _hoisted_6))
165
+ : createCommentVNode("v-if", true),
166
+ (unref(qrCodeState) === 1)
167
+ ? (openBlock(), createElementBlock("img", {
168
+ key: 2,
169
+ class: "invalid-code",
170
+ src: pageConfig.value.scannedCodeImage
171
+ }, null, 8 /* PROPS */, _hoisted_7))
172
+ : createCommentVNode("v-if", true)
173
+ ])
174
+ ])
175
+ ]));
176
+ };
177
+ }
178
+ });
179
+
180
+ script.__scopeId = "data-v-72decd47";
181
+ script.__file = "src/TVAdUnlockView.vue";
182
+
183
+ export { script as default };
@@ -0,0 +1 @@
1
+ {"version":3,"file":"TVAdUnlockView.js","sourceRoot":"","sources":["../src/TVAdUnlockView.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAA"}
package/dist/plugin.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { ESRouteType } from '@extscreen/es3-router';
2
- import TVAdUnlockView from '../src/TVAdUnlockView.vue';
2
+ import TVAdUnlockView from './TVAdUnlockView';
3
3
  export const TV_AD_UNLOCK_KEY = Symbol('tvAdUnlock');
4
4
  const DEFAULT_PAGE_CONFIG = {
5
5
  title: '观看30秒广告 当日解锁',
@@ -1 +1 @@
1
- {"version":3,"file":"plugin.js","sourceRoot":"","sources":["../src/plugin.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAA;AAMnD,OAAO,cAAc,MAAM,2BAA2B,CAAA;AAEtD,MAAM,CAAC,MAAM,gBAAgB,GAA2C,MAAM,CAAC,YAAY,CAAC,CAAA;AAE5F,MAAM,mBAAmB,GAAmC;IAC1D,KAAK,EAAE,cAAc;IACrB,QAAQ,EAAE,YAAY;IACtB,SAAS,EAAE,MAAM;IACjB,WAAW,EAAE,YAAY;IACzB,SAAS,EAAE,gBAAgB;IAC3B,gBAAgB,EAAE,EAAE;IACpB,gBAAgB,EAAE,EAAE;CACrB,CAAA;AAED,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,OAAO,CAAC,GAAQ,EAAE,OAAgC;QAChD,MAAM,UAAU,GAAmC;YACjD,GAAG,mBAAmB;YACtB,GAAG,OAAO,CAAC,UAAU;SACtB,CAAA;QAED,GAAG,CAAC,OAAO,CAAC,gBAAgB,EAAE;YAC5B,cAAc,EAAE,OAAO,CAAC,cAAc;YACtC,UAAU,EAAE,OAAO,CAAC,UAAU;YAC9B,UAAU;SACX,CAAC,CAAA;IACJ,CAAC;CACF,CAAA;AAED,MAAM,UAAU,eAAe;IAC7B,OAAO;QACL,IAAI,EAAE,KAAK;QACX,IAAI,EAAE,IAAI;QACV,SAAS,EAAE,cAAc;QACzB,IAAI,EAAE,WAAW,CAAC,oBAAoB;KACvC,CAAA;AACH,CAAC"}
1
+ {"version":3,"file":"plugin.js","sourceRoot":"","sources":["../src/plugin.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAA;AAMnD,OAAO,cAAc,MAAM,kBAAkB,CAAA;AAE7C,MAAM,CAAC,MAAM,gBAAgB,GAA2C,MAAM,CAAC,YAAY,CAAC,CAAA;AAE5F,MAAM,mBAAmB,GAAmC;IAC1D,KAAK,EAAE,cAAc;IACrB,QAAQ,EAAE,YAAY;IACtB,SAAS,EAAE,MAAM;IACjB,WAAW,EAAE,YAAY;IACzB,SAAS,EAAE,gBAAgB;IAC3B,gBAAgB,EAAE,EAAE;IACpB,gBAAgB,EAAE,EAAE;CACrB,CAAA;AAED,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,OAAO,CAAC,GAAQ,EAAE,OAAgC;QAChD,MAAM,UAAU,GAAmC;YACjD,GAAG,mBAAmB;YACtB,GAAG,OAAO,CAAC,UAAU;SACtB,CAAA;QAED,GAAG,CAAC,OAAO,CAAC,gBAAgB,EAAE;YAC5B,cAAc,EAAE,OAAO,CAAC,cAAc;YACtC,UAAU,EAAE,OAAO,CAAC,UAAU;YAC9B,UAAU;SACX,CAAC,CAAA;IACJ,CAAC;CACF,CAAA;AAED,MAAM,UAAU,eAAe;IAC7B,OAAO;QACL,IAAI,EAAE,KAAK;QACX,IAAI,EAAE,IAAI;QACV,SAAS,EAAE,cAAc;QACzB,IAAI,EAAE,WAAW,CAAC,oBAAoB;KACvC,CAAA;AACH,CAAC"}
package/package.json CHANGED
@@ -1,12 +1,11 @@
1
1
  {
2
2
  "name": "@quicktvui/tv-ad-unlock",
3
- "version": "1.0.4",
3
+ "version": "1.0.6",
4
4
  "description": "TV广告解锁组件 - 用于QuickTVUI框架的电视端广告解锁功能",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
7
7
  "files": [
8
8
  "dist",
9
- "src/TVAdUnlockView.vue",
10
9
  "src/assets"
11
10
  ],
12
11
  "keywords": [
@@ -19,11 +18,17 @@
19
18
  "author": "",
20
19
  "license": "MIT",
21
20
  "peerDependencies": {
22
- "vue": "^3.0.0",
23
21
  "@extscreen/es3-core": ">=3.0.0",
24
- "@extscreen/es3-router": ">=3.0.0"
22
+ "@extscreen/es3-router": ">=3.0.0",
23
+ "vue": "^3.0.0"
25
24
  },
26
25
  "devDependencies": {
26
+ "@rollup/plugin-node-resolve": "^16.0.3",
27
+ "@vue/compiler-sfc": "^3.5.35",
28
+ "rollup": "^4.60.4",
29
+ "rollup-plugin-postcss": "^4.0.2",
30
+ "rollup-plugin-typescript2": "^0.37.0",
31
+ "rollup-plugin-vue": "^6.0.0",
27
32
  "typescript": "^5.0.0",
28
33
  "vue": "^3.0.0"
29
34
  },
@@ -32,6 +37,6 @@
32
37
  "url": ""
33
38
  },
34
39
  "scripts": {
35
- "build": "tsc"
40
+ "build": "tsc && rollup -c rollup.config.mjs"
36
41
  }
37
42
  }
@@ -1,259 +0,0 @@
1
- <template>
2
- <div class="ad-container">
3
- <div class="content">
4
- <div class="content-bg" />
5
- <span class="title">{{ pageConfig.title }}</span>
6
- <span class="sub-title">{{ pageConfig.subTitle }}</span>
7
- <div class="qrcode-container">
8
- <qt-qr-code
9
- v-if="adQrCode && !isInvalid && qrCodeState !== 1"
10
- class="qrcode"
11
- :content="adQrCode"
12
- />
13
- <img
14
- v-if="isInvalid"
15
- class="invalid-code"
16
- :src="pageConfig.invalidCodeImage"
17
- />
18
- <img
19
- v-if="qrCodeState === 1"
20
- class="invalid-code"
21
- :src="pageConfig.scannedCodeImage"
22
- />
23
- </div>
24
- </div>
25
- </div>
26
- </template>
27
-
28
- <script setup lang="ts">
29
- import { ref, inject, computed } from 'vue'
30
- import { ESKeyCode, useESRuntime, useESToast, useESLocalStorage } from '@extscreen/es3-core'
31
- import { useESRouter } from '@extscreen/es3-router'
32
- import { TV_AD_UNLOCK_KEY } from './plugin'
33
- import { createStorageKeys, useTVAdUnlock, useTVAdUnlockStorage } from './useTVAdUnlock'
34
- import type { TVAdUnlockPluginProvided, TVAdUnlockParams } from './types'
35
-
36
- const pluginContext = inject(TV_AD_UNLOCK_KEY) as TVAdUnlockPluginProvided
37
- const { requestManager, pageConfig: rawPageConfig, trackEvent } = pluginContext
38
-
39
- const toast = useESToast()
40
- const storage = useESLocalStorage()
41
- const router = useESRouter()
42
- const runtime = useESRuntime()
43
- const dnum = runtime.getRuntimeDeviceId()
44
-
45
- const packageName = runtime.getESAppName?.() ?? 'unknown'
46
- const keys = createStorageKeys(packageName)
47
- const adStorage = useTVAdUnlockStorage(storage, keys)
48
-
49
- const routeOverrides = ref<Partial<typeof rawPageConfig>>({})
50
-
51
- const routeRuleParams = ref({
52
- creditsPerAd: 5,
53
- permanentUnlockAfterTotalAds: 10
54
- })
55
-
56
- const pageConfig = computed(() => ({
57
- ...rawPageConfig,
58
- ...routeOverrides.value
59
- }))
60
-
61
- const payParams = ref<TVAdUnlockParams>({
62
- assetId: '',
63
- assetName: '',
64
- fromId: '',
65
- fromName: ''
66
- })
67
-
68
- async function handleUnlockSuccess() {
69
- await adStorage.setTodayUnlocked()
70
- await adStorage.addCredits(routeRuleParams.value.creditsPerAd)
71
- const totalAds = await adStorage.incrementTotalAdsWatched()
72
- await adStorage.incrementTodayAdCount()
73
-
74
- if (totalAds >= routeRuleParams.value.permanentUnlockAfterTotalAds) {
75
- await adStorage.setPermanentUnlocked()
76
- }
77
-
78
- trackEvent?.({ type: 'page', name: 'unlock_success' })
79
- toast.showToast('解锁成功!')
80
- router.back()
81
- }
82
-
83
- const {
84
- adQrCode,
85
- isInvalid,
86
- qrCodeState,
87
- isLoading,
88
- isShowConfirmToast,
89
- getAdQrCode,
90
- stopPollTvADStatusTimer,
91
- stopInvalidTimer,
92
- reset
93
- } = useTVAdUnlock(
94
- {
95
- packageName,
96
- superRequestBaseUrl: '',
97
- invalidTimeout: 300000,
98
- pollInterval: 1000
99
- },
100
- keys,
101
- requestManager,
102
- {
103
- onUnlockSuccess: () => handleUnlockSuccess(),
104
- onUnlockFailed: (error) => {
105
- trackEvent?.({ type: 'click', name: 'unlock_failed' })
106
- },
107
- onQrCodeInvalid: () => {
108
- trackEvent?.({ type: 'click', name: 'qr_code_invalid' })
109
- },
110
- onQrCodeScanned: () => {
111
- trackEvent?.({ type: 'click', name: 'qr_code_scanned' })
112
- }
113
- }
114
- )
115
-
116
- function onKeyDown(event: any) {
117
- switch (event.keyCode) {
118
- case ESKeyCode.ES_KEYCODE_DPAD_CENTER:
119
- case ESKeyCode.ES_KEYCODE_ENTER:
120
- if (isInvalid.value || qrCodeState.value === 1) {
121
- const cfg = pageConfig.value
122
- getAdQrCode(dnum, cfg.scanTitle, cfg.scanContent, cfg.scanToast)
123
- }
124
- break
125
- }
126
- }
127
-
128
- function onESCreate(params: TVAdUnlockParams & Record<string, string>) {
129
- payParams.value = {
130
- assetId: params.assetId || '',
131
- assetName: params.assetName || '',
132
- fromId: params.fromId || '',
133
- fromName: params.fromName || ''
134
- }
135
-
136
- if (params.creditsPerAd) {
137
- routeRuleParams.value.creditsPerAd = parseInt(params.creditsPerAd) || 5
138
- }
139
- if (params.permanentUnlockAfterTotalAds) {
140
- routeRuleParams.value.permanentUnlockAfterTotalAds = parseInt(params.permanentUnlockAfterTotalAds) || 10
141
- }
142
-
143
- const extra: Partial<typeof rawPageConfig> = {}
144
- if (params.title) extra.title = params.title
145
- if (params.subTitle) extra.subTitle = params.subTitle
146
- if (params.scanTitle) extra.scanTitle = params.scanTitle
147
- if (params.scanContent) extra.scanContent = params.scanContent
148
- if (params.scanToast) extra.scanToast = params.scanToast
149
- if (params.invalidCodeImage) extra.invalidCodeImage = params.invalidCodeImage
150
- if (params.scannedCodeImage) extra.scannedCodeImage = params.scannedCodeImage
151
- routeOverrides.value = extra
152
-
153
- trackEvent?.({
154
- type: 'page',
155
- name: 'ad_page_show',
156
- assetId: payParams.value.assetId,
157
- assetName: payParams.value.assetName,
158
- fromId: payParams.value.fromId,
159
- fromName: payParams.value.fromName
160
- })
161
-
162
- const cfg = pageConfig.value
163
- getAdQrCode(dnum, cfg.scanTitle, cfg.scanContent, cfg.scanToast)
164
- }
165
-
166
- function onBackPressed() {
167
- if (!isShowConfirmToast.value && qrCodeState.value === 1) {
168
- toast.showToast('广告播放中,请不要关闭弹窗')
169
- isShowConfirmToast.value = true
170
- return true
171
- } else {
172
- stopPollTvADStatusTimer()
173
- stopInvalidTimer()
174
- router.back()
175
- }
176
- }
177
-
178
- function onESDestroy() {
179
- stopPollTvADStatusTimer()
180
- stopInvalidTimer()
181
- }
182
-
183
- defineExpose({
184
- onESCreate,
185
- onKeyDown,
186
- onBackPressed,
187
- onESDestroy
188
- })
189
- </script>
190
-
191
- <style scoped>
192
- .ad-container {
193
- width: 1920px;
194
- height: 1080px;
195
- background-color: rgba(0, 0, 0, 0.7);
196
- display: flex;
197
- justify-content: center;
198
- align-items: center;
199
- }
200
-
201
- .content {
202
- width: 892px;
203
- height: 646px;
204
- display: flex;
205
- flex-direction: column;
206
- align-items: center;
207
- justify-content: center;
208
- }
209
-
210
- .content-bg {
211
- position: absolute;
212
- width: 892px;
213
- height: 646px;
214
- background-color: #FBE6C4;
215
- border-radius: 30px;
216
- border-width: 1px;
217
- border-color: #979797;
218
- }
219
-
220
- .title {
221
- font-weight: 500;
222
- font-size: 46px;
223
- color: #000000;
224
- }
225
-
226
- .sub-title {
227
- margin-top: 32px;
228
- font-weight: 400;
229
- font-size: 30px;
230
- color: rgba(0, 0, 0, 0.65);
231
- }
232
-
233
- .qrcode-container {
234
- margin-top: 32px;
235
- width: 300px;
236
- height: 300px;
237
- border-radius: 30px;
238
- background-color: #FFFFFF;
239
- display: flex;
240
- justify-content: center;
241
- align-items: center;
242
- }
243
-
244
- .qrcode {
245
- position: absolute;
246
- width: 260px;
247
- height: 260px;
248
- border-radius: 30px;
249
- background-color: #FFFFFF;
250
- }
251
-
252
- .invalid-code {
253
- position: absolute;
254
- width: 300px;
255
- height: 300px;
256
- border-radius: 30px;
257
- background-color: transparent;
258
- }
259
- </style>