GithubBackup/cloudflare_temp_email
1
0
Fork 0
mirror of https://github.com/dreamhunter2333/cloudflare_temp_email.git synced 2026-09-05 23:47:50 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: |UI| change SideMargin size base on gridMaxCols (#596)

Browse Source
This commit is contained in:
Dream Hunter
2025-02-27 00:14:04 +08:00
committed by GitHub
parent 278f0112d0
commit 144a792cb2
1 changed files with 5 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/App.vue
+5 -4
View File
@@ -20,6 +20,7 @@ const localeConfig = computed(() => locale.value == 'zh' ? zhCN : null)
const isMobile = useIsMobile() const isMobile = useIsMobile()
const showSideMargin = computed(() => !isMobile.value && useSideMargin.value); const showSideMargin = computed(() => !isMobile.value && useSideMargin.value);
const showAd = computed(() => !isMobile.value && adClient && adSlot); const showAd = computed(() => !isMobile.value && adClient && adSlot);
const gridMaxCols = computed(() => showAd.value ? 8 : 12);
onMounted(async () => { onMounted(async () => {
@@ -78,21 +79,21 @@ onMounted(async () => {
<n-spin description="loading..." :show="loading"> <n-spin description="loading..." :show="loading">
<n-notification-provider container-style="margin-top: 60px;"> <n-notification-provider container-style="margin-top: 60px;">
<n-message-provider container-style="margin-top: 20px;"> <n-message-provider container-style="margin-top: 20px;">
<n-grid x-gap="12" :cols="8"> <n-grid x-gap="12" :cols="gridMaxCols">
<n-gi v-if="showSideMargin" span="1"> <n-gi v-if="showSideMargin" span="1">
<div class="side" v-if="showAd"> <div class="side" v-if="showAd">
<ins class="adsbygoogle" style="display:block" :data-ad-client="adClient" :data-ad-slot="adSlot" <ins class="adsbygoogle" style="display:block" :data-ad-client="adClient" :data-ad-slot="adSlot"
data-ad-format="auto" data-full-width-responsive="true"></ins> data-ad-format="auto" data-full-width-responsive="true"></ins>
</div> </div>
</n-gi> </n-gi>
<n-gi :span="!showSideMargin ? 8 : 6"> <n-gi :span="!showSideMargin ? gridMaxCols : (gridMaxCols - 2)">
<div class="main"> <div class="main">
<n-space vertical> <n-space vertical>
<n-layout style="min-height: 80vh;"> <n-layout style="min-height: 80vh;">
<Header /> <Header />
<router-view></router-view> <router-view></router-view>
</n-layout> </n-layout>
<Footer style="min-height: 15vh;" /> <Footer />
</n-space> </n-space>
</div> </div>
</n-gi> </n-gi>
@@ -103,7 +104,7 @@ onMounted(async () => {
</div> </div>
</n-gi> </n-gi>
</n-grid> </n-grid>
<n-back-top :bottom="150" /> <n-back-top />
</n-message-provider> </n-message-provider>
</n-notification-provider> </n-notification-provider>
</n-spin> </n-spin>