|
1 | 1 | <script setup lang="ts">
|
2 | 2 | import { usePageData } from "@vuepress/client"
|
3 |
| -import { computed } from 'vue' |
| 3 | +import { computed } from "vue" |
4 | 4 |
|
5 | 5 | const pageData = usePageData()
|
6 |
| -const isChinese = computed(() => { |
| 6 | +
|
| 7 | +const isZh = computed(() => { |
7 | 8 | return pageData.value.path.startsWith("/zh/")
|
8 | 9 | })
|
9 |
| -const backgroundImage = computed(() => isChinese.value ? '/img/ss/new_bgc_zh.png' : '/img/ss/new_bgc_en.png') |
10 |
| -const jumpUrl = computed(() => |
11 |
| - isChinese.value |
12 |
| - ? 'https://zh.okaapps.com/vidhub-alist' |
13 |
| - : 'https://okaapps.com/vidhub-alist' |
14 |
| -) |
15 | 10 |
|
16 |
| -console.log('当前图片:', backgroundImage.value) |
| 11 | +const vidHubEn = { |
| 12 | + title: "VidHub - An elegant cloud video player within the Apple ecosystem.", |
| 13 | + hero: [ |
| 14 | + "Support for iPhone, iPad, Mac, and Apple TV.", |
| 15 | + "Supports various cloud storage providers such as Aliyun, Baidu Cloud, OneDrive, Google Drive, Dropbox, Alist, mounted with different cloud drives like Quark Cloud, pikpak, 115, and more.", |
| 16 | + ], |
| 17 | + url: "https://apps.apple.com/app/apple-store/id1659622164?pt=118612019&ct=alist&mt=8", |
| 18 | + tag: "Free", |
| 19 | + new_site: "Open the new site", |
| 20 | +} |
| 21 | +
|
| 22 | +const vidHubCN = { |
| 23 | + title: "VidHub - 苹果生态下优雅的网盘视频播放器", |
| 24 | + hero: [ |
| 25 | + "iPhone,iPad,Mac,Apple TV全平台支持,", |
| 26 | + "直接挂载阿里云盘、百度网盘、OneDrive、GoogleDrive、Dropbox、Alist挂载各种夸克云盘,pikpak, 115等等。", |
| 27 | + ], |
| 28 | + url: "https://zh.okaapps.com/product/1659622164?ref=alist", |
| 29 | + tag: "免费", |
| 30 | + new_site: "打开新站点", |
| 31 | +} |
| 32 | +
|
| 33 | +const vidHub = computed(() => { |
| 34 | + if (isZh.value) return vidHubCN |
| 35 | + return vidHubEn |
| 36 | +}) |
| 37 | +
|
| 38 | +const isApple = computed(() => { |
| 39 | + if (navigator.platform) return /Mac|iPod|iPhone|iPad/.test(navigator.platform) |
| 40 | + return /Mac|iPod|iPhone|iPad/.test(navigator.userAgent) |
| 41 | +}) |
17 | 42 | </script>
|
18 | 43 |
|
19 | 44 | <template>
|
20 | 45 | <div class="ads-container">
|
21 |
| - <div class="vidhub-new-bgc"> |
22 |
| - <a :href="jumpUrl" target="_blank" rel="noopener"> |
23 |
| - <img :src="backgroundImage" :alt="isChinese ? 'VidHub 背景' : 'VidHub Background'" /> |
| 46 | + <div class="wwads-container"> |
| 47 | + <div |
| 48 | + class="wwads wwads-cn wwads-horizontal" |
| 49 | + data-id="213" |
| 50 | + style="width: 100% !important" |
| 51 | + v-if="!isApple" |
| 52 | + ></div> |
| 53 | + <a v-else class="vidhub" :href="vidHub.url" target="_blank"> |
| 54 | + <div> |
| 55 | + <img src="/img/ss/vidhub-logo.png" alt="" /> |
| 56 | + <div> |
| 57 | + <div class="title"> |
| 58 | + <span>{{ vidHub.title }}</span> |
| 59 | + <span class="tag">{{ vidHub.tag }}</span> |
| 60 | + </div> |
| 61 | + <div class="hero" v-for="hero in vidHub.hero" :key="hero"> |
| 62 | + {{ hero }} |
| 63 | + </div> |
| 64 | + </div> |
| 65 | + </div> |
24 | 66 | </a>
|
| 67 | + <a class="new_site" href="https://alistgo.com" target="_blank">{{ vidHub.new_site }}</a> |
25 | 68 | </div>
|
26 | 69 | </div>
|
27 | 70 | </template>
|
@@ -146,34 +189,4 @@ console.log('当前图片:', backgroundImage.value)
|
146 | 189 | }
|
147 | 190 | max-width: var(--home-page-width);
|
148 | 191 | }
|
149 |
| -
|
150 |
| -.vidhub-new-bgc { |
151 |
| - // width: 100%; |
152 |
| - // max-width: 100%; |
153 |
| - // 以上为展示图片圆角,暂时先注释 |
154 |
| - margin: 10px auto; |
155 |
| - overflow: hidden; |
156 |
| - display: flex; |
157 |
| - justify-content: center; |
158 |
| - align-items: center; |
159 |
| - background: none; |
160 |
| - height: auto; |
161 |
| - border-radius: 10px; |
162 |
| -} |
163 |
| -.vidhub-new-bgc img { |
164 |
| - width: 100%; |
165 |
| - max-height: 200px; |
166 |
| - height: auto; |
167 |
| - display: block; |
168 |
| - object-fit: contain;//cover 为正常宽展示,但是图片宽高过大会被拉伸,先用contain |
169 |
| -} |
170 |
| -.vidhub-new-bgc a { |
171 |
| - display: flex; |
172 |
| - align-items: center; |
173 |
| - justify-content: center; |
174 |
| - width: 100%; |
175 |
| - height: 100%; |
176 |
| - text-decoration: none; |
177 |
| - color: inherit; |
178 |
| -} |
179 | 192 | </style>
|
0 commit comments