diff --git a/public/css/style.css b/public/css/style.css index 37a3745..74075c2 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -684,3 +684,51 @@ select { background-color: #ffe99d; color: #000; } + + + +.settings-window { + position: fixed; + top: 10%; + bottom: 10%; + height: 500px; + left: 10%; + right: 10%; + background-color: #171717; + border-radius: 20px; + border: #ffe99d 2px solid; + z-index: 100; + padding: 20px; +} + +.tag { + background: #fce9a7; + color: #000; + border-radius: 5px; +} + +.settings-window-bg { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: rgba(0, 0, 0, 0.5); + z-index: 99; +} + +.animated-notice { + opacity: 0; + animation: fadeIn 1s ease-in-out forwards; + animation-delay: 1.5s; +} + +@keyframes fadeIn { + to { + opacity: 1; + } +} + +b { + color: #fce9a7; +} diff --git a/src/App.vue b/src/App.vue index 2311516..c631c5e 100644 --- a/src/App.vue +++ b/src/App.vue @@ -52,6 +52,7 @@ if (window.localStorage.getItem("settings")) { }; window.localStorage.setItem('settings', JSON.stringify(settings.value)); } +let showSafetyNotice = ref(localStorage.getItem('showSafetyNotice') !== 'false') const upgradeSettings = () => { // 目前结构没变化,所以补全不存在的项就行了 @@ -102,7 +103,27 @@ const selectedGift = ref('') const selectedWave = ref('') const relations = ref(Object.entries(giftData).map(([key, value]) => ({ gift: key, wave: settings.value.waveData[key] }))) -// console.log(relations.value) +// 安全须知相关 +let canAcknowledgeSafetyNotice = ref(false) +let canAcknowledgeSafetyNoticeCountdown = ref(15) +let canAcknowledgeSafetyNoticeTimer = setInterval(() => { + canAcknowledgeSafetyNoticeCountdown.value-- + if (canAcknowledgeSafetyNoticeCountdown.value <= 0) { + canAcknowledgeSafetyNotice.value = true + clearInterval(canAcknowledgeSafetyNoticeTimer) + } +}, 1000) + +let safetyNotices = ref([ + "请保证在安全、清醒、自愿的情况下使用", + "严禁体内存在电子/金属植入物者、心脑血管疾病患者、孕妇、儿童或无法及时操作主机的人群使用", + "严禁将电极置于心脏投影区(或任何可能使电流经过心脏的位置),以及头部、颈部、皮肤破损处等位置", + "严禁在驾驶或操纵机器等危险情况下使用", + "请勿在同一部位连续使用30分钟以上,以免造成损伤", + "请勿在输出状态下移动电极,以免造成刺痛或灼伤", + "在直播过程中使用可能会导致直播间被封禁,风险自负", + "在使用前需要完整阅读郊狼产品安全须知,并设置好强度上限保护", +]) watch(selectedGift, (newGift) => { selectedWave.value = waveData[newGift] @@ -294,6 +315,14 @@ const addRelationAndSave = () => { saveSettings(); } +/** + * 阅读安全须知 + */ +const acknowledgeSafetyNotice = () => { + showSafetyNotice.value = false + localStorage.setItem('showSafetyNotice', 'false') +} + /** * 将数字大航海等级转换为文字 */ @@ -327,23 +356,40 @@ const guardLevelText = computed(() => { +
-

【重要】设置结构现已更新,请确认执行升级操作

+

⚠ 本地设置数据升级

- 目前设置数据储存结构版本为,你设备上储存的设置数据的结构版本为。 + 目前可读取的本地设置数据的储存结构版本为,你的设备上现有的设置数据的储存结构版本为

- 为了可以安全使用 BLive Coyote 需将你设备上储存的设置数据进行升级,这通常可以自动进行,如果出现意外请联系开发者。 + 为了可以安全使用 BLive Coyote,现在需要将你设备上储存的设置数据进行升级,这个过程通常可以自动进行,如果出现意外请联系开发者。


-

【注意】请先复制下面的全部内容,以确保在升级失败时可以恢复

+

【注意】下面是你的全部设置数据,请先复制下面的全部内容,以确保在升级失败时可以恢复!

+
+

⚠ 安全须知

+

+

+
+

【注意】请仔细阅读以上内容后,点击“我已知晓

+
+ +
+
+
@@ -479,8 +525,6 @@ const guardLevelText = computed(() => {
- -
@@ -524,24 +568,4 @@ const guardLevelText = computed(() => { margin: 10px 0; font-size: 18px; } - -.settings-window { - position: fixed; - top: 10%; - bottom: 10%; - height: 500px; - left: 10%; - right: 10%; - background-color: #171717; - border-radius: 20px; - border: #ffe99d 2px solid; - z-index: 100; - padding: 20px; -} - -.tag { - background: #fce9a7; - color: #000; - border-radius: 5px; -}