|
|
@@ -1,265 +1,31 @@
|
|
|
<template>
|
|
|
- <div class="denet-toolbox" @click.stop="clickHead">
|
|
|
- <div class="head" @click.stop="clickHead">
|
|
|
- <span></span>
|
|
|
- <div>
|
|
|
- <img :src="require('@/assets/img/icon-fixed.png')" alt class="fixed" @click.stop="clickFixed" />
|
|
|
- <img :src="require('@/assets/img/icon-full.png')" alt class="full" @click.stop="clickFull" />
|
|
|
- <!-- <img :src="require('@/assets/img/icon-close.png')" alt class="full" @click="clickFull" /> -->
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="content">
|
|
|
- <iframe src="https://www.bilibili.com" v-show="state.status == ''" frameborder="0"></iframe>
|
|
|
- <!-- 网页错误 -->
|
|
|
- <div class="state" v-show="state.status == '网页错误'">
|
|
|
- <img :src="require('@/assets/img/icon-page-fail.png')" alt />
|
|
|
- <div>Oops, this link is invalid</div>
|
|
|
- </div>
|
|
|
+ <!-- <div class="denet-toolbox" @click.stop="clickHead">
|
|
|
+
|
|
|
+ </div> -->
|
|
|
+ <input type="button" value="点击" @click="state.show = !state.show">
|
|
|
+ <p v-if="state.show" :data-view="1" :data-click="'按钮'" @click.stop="clickTest">1</p>
|
|
|
+ <p v-else :data-view="2">2</p>
|
|
|
|
|
|
- <!-- 加载 -->
|
|
|
- <div class="state" v-show="state.status == '加载'">
|
|
|
- <img :src="require('@/assets/img/icon-loading-gray.png')" alt />
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 关闭 -->
|
|
|
- <div class="state" v-show="state.status == '关闭'">
|
|
|
-
|
|
|
- </div>
|
|
|
- <!-- 固定右上角 -->
|
|
|
- <div class="state" v-show="state.status == '固定右上角'">
|
|
|
- <img :src="require('@/assets/img/icon-page-fail.png')" alt />
|
|
|
- <div>Pinned to the top right</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- alert -->
|
|
|
- <div class="alert" v-show="state.show_alert">
|
|
|
- <div class="back" @click.stop="clickCancel"></div>
|
|
|
- <div class="confirm">
|
|
|
- <div class="check">
|
|
|
- <input :id="state.checkbox_id" type='checkbox' v-model="state.checkbox" />
|
|
|
- <label :for="state.checkbox_id">Don't remind</label>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="title">Web Page Progress May Reset</div>
|
|
|
- <div class="handle">
|
|
|
- <div class="cancel" @click.stop="clickCancel">Cancel</div>
|
|
|
- <div class="continue" @click.stop="clickContinue">Continue</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
</template>
|
|
|
<script setup>
|
|
|
-import { getChromeStorage, setChromeStorage, httpContentToBack } from "@/uilts/chromeExtension";
|
|
|
-import { guid } from "@/uilts/help";
|
|
|
import { onMounted, reactive } from "vue";
|
|
|
|
|
|
let state = reactive({
|
|
|
- status: '', //
|
|
|
- show_alert: false,
|
|
|
- list: [],
|
|
|
- checkbox: false,
|
|
|
- checkbox_id: `denet-${guid()}`
|
|
|
+ show: false
|
|
|
})
|
|
|
onMounted(() => {
|
|
|
-
|
|
|
-})
|
|
|
-
|
|
|
-const clickHead = () => {
|
|
|
- //
|
|
|
-}
|
|
|
-
|
|
|
-const clickContinue = () => {
|
|
|
- if (state.checkbox) {
|
|
|
- setChromeStorage({ fullCheck: JSON.stringify({ fullCheck: 1 }) })
|
|
|
- // 全屏
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-const clickCancel = () => {
|
|
|
- state.show_alert = false
|
|
|
-}
|
|
|
+ var io = new IntersectionObserver((e) => {
|
|
|
+ console.log(e[0].target)
|
|
|
+ });
|
|
|
+ io.observe(document.querySelector('p[data-view]'))
|
|
|
|
|
|
-const clickFixed = () => {
|
|
|
- getChromeStorage('fullCheck', (res) => {
|
|
|
- if (res && res.fullCheck) {
|
|
|
- // 固定
|
|
|
-
|
|
|
- } else {
|
|
|
- state.show_alert = true
|
|
|
- }
|
|
|
- })
|
|
|
-}
|
|
|
-
|
|
|
-const clickFull = () => {
|
|
|
- getChromeStorage('fullCheck', (res) => {
|
|
|
- if (res && res.fullCheck) {
|
|
|
- // 全屏
|
|
|
+})
|
|
|
|
|
|
- } else {
|
|
|
- state.show_alert = true
|
|
|
- }
|
|
|
- })
|
|
|
+function clickTest() {
|
|
|
+ console.log('clickTest')
|
|
|
}
|
|
|
|
|
|
-
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
-.denet-toolbox {
|
|
|
- width: 505px;
|
|
|
- height: 544px;
|
|
|
- filter: drop-shadow(0px 4px 20px rgba(0, 0, 0, 0.2));
|
|
|
- border-radius: 12px;
|
|
|
- overflow: hidden;
|
|
|
- position: relative;
|
|
|
-
|
|
|
- .alert {
|
|
|
- text-align: center;
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
-
|
|
|
- .back {
|
|
|
- background: #000000;
|
|
|
- opacity: 0.8;
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- cursor: auto;
|
|
|
- }
|
|
|
-
|
|
|
- .confirm {
|
|
|
- position: absolute;
|
|
|
- width: 355px;
|
|
|
- height: 180px;
|
|
|
- background: #FFFFFF;
|
|
|
- border-radius: 20px;
|
|
|
- top: 173px;
|
|
|
- left: 50%;
|
|
|
- margin-left: -180px;
|
|
|
-
|
|
|
- .title {
|
|
|
- font-weight: 600;
|
|
|
- font-size: 18px;
|
|
|
- color: #000000;
|
|
|
- margin-bottom: 34px;
|
|
|
- }
|
|
|
-
|
|
|
- .check {
|
|
|
- color: #899099;
|
|
|
- font-weight: 400;
|
|
|
- font-size: 14px;
|
|
|
- margin: 12px 15px 32px 0;
|
|
|
- text-align: right;
|
|
|
- align-content: center;
|
|
|
- justify-content: flex-end;
|
|
|
- display: flex;
|
|
|
- line-height: 17px;
|
|
|
-
|
|
|
- input {
|
|
|
- margin-right: 8px;
|
|
|
- }
|
|
|
-
|
|
|
- label {
|
|
|
- line-height: 19px;
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .handle {
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- div {
|
|
|
- font-weight: 600;
|
|
|
- font-size: 16px;
|
|
|
- width: 156px;
|
|
|
- height: 47px;
|
|
|
- line-height: 47px;
|
|
|
- cursor: pointer;
|
|
|
- border-radius: 1000px;
|
|
|
- user-select: none;
|
|
|
- }
|
|
|
-
|
|
|
- .cancel {
|
|
|
- color: #000000;
|
|
|
- background: rgba(56, 154, 255, 0.01);
|
|
|
- border: 1px solid #E6E6E6;
|
|
|
- }
|
|
|
-
|
|
|
- .continue {
|
|
|
- background: #1D9BF0;
|
|
|
- font-weight: 600;
|
|
|
- margin-left: 11px;
|
|
|
- color: #FFFFFF;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .head {
|
|
|
- width: 100%;
|
|
|
- height: 40px;
|
|
|
- background: #373737;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
-
|
|
|
- span {
|
|
|
- color: #FFFFFF;
|
|
|
- font-style: normal;
|
|
|
- font-weight: 500;
|
|
|
- font-size: 14px;
|
|
|
- margin-left: 16px;
|
|
|
- }
|
|
|
-
|
|
|
- img {
|
|
|
- width: 20px;
|
|
|
- height: 20px;
|
|
|
- cursor: pointer;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .full {
|
|
|
- margin-right: 16px;
|
|
|
- }
|
|
|
-
|
|
|
- .fixed {
|
|
|
- margin-right: 20px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .content {
|
|
|
- width: 100%;
|
|
|
- height: calc(100% - 40px);
|
|
|
- background: #686868;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
-
|
|
|
- iframe {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
-
|
|
|
- .state {
|
|
|
- img {
|
|
|
- margin-bottom: 14px;
|
|
|
- }
|
|
|
-
|
|
|
- div {
|
|
|
- color: #8E8E8E;
|
|
|
- text-align: center;
|
|
|
- font-weight: 500;
|
|
|
- font-size: 22px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
</style>
|
