diff --git a/cc-inspector/src/panel/index.vue b/cc-inspector/src/panel/index.vue index d2fdef2..375f947 100644 --- a/cc-inspector/src/panel/index.vue +++ b/cc-inspector/src/panel/index.vue @@ -1,19 +1,23 @@ @@ -27,8 +31,14 @@ export default defineComponent({ components: { CCButton }, setup(props, { emit }) { onMounted(() => { - console.log("hi ~~~"); + updateLayout(); }); + const horizontal = ref(true); + function updateLayout() { + const w = window.document.body.clientWidth; + horizontal.value = w > 1100; + } + window.addEventListener("resize", updateLayout); const msg = ref(PluginConfig.manifest.name); const count = ref(0); const options = ref({ @@ -110,11 +120,16 @@ export default defineComponent({ }); return { options, + horizontal, msg, count, onClickBtn() { - count.value++; - console.log("click btn"); + const url = "https://chromewebstore.google.com/detail/cc-inspector/hejbkamkfnkifppoaljcidepkhgaahcj?hl=zh-CN&utm_source=ext_sidebar"; + window.open(url); + }, + onClickGithub() { + const url = "https://github.com/tidys/cc-inspector-chrome"; + window.open(url); }, }; }, @@ -125,7 +140,7 @@ export default defineComponent({ .panel { display: flex; flex-direction: column; - overflow: hidden; + overflow: auto; width: 100%; height: 100%; padding: 30px; @@ -148,25 +163,53 @@ export default defineComponent({ margin-left: 10px; } } + .content-row { + flex-direction: row; + } + .content-col { + flex-direction: column; + .video { + margin-top: 40px !important; + } + } .content { z-index: 1; display: flex; - flex-direction: row; + .title { margin-top: 10px; margin-left: 20px; min-width: 450px; box-sizing: border-box; + .link { + display: flex; + flex-direction: row; + align-items: flex-end; + .github { + cursor: pointer; + padding: 0 20px; + font-size: 30px; + color: white; - .download { - width: 160px; - height: 60px; - font-size: 20px !important; + &:hover { + color: #188ee1; + } + &:active { + color: rgb(255, 153, 0); + } + } + .download { + width: 160px; + height: 60px; + font-size: 20px !important; + } } } .video { + flex: 1; object-fit: cover; overflow: hidden; + min-height: 440px; margin: 5px; box-sizing: border-box; color: white;