forked from natuka/web.puabadge.com
修改:更换标题和样式调整
This commit is contained in:
1 parent
e6ff4756df
commit
290b065310
11 files changed
+35
-13
No files matched your search
+2
-2
@@ -5,8 +5,8 @@
|
|||||||
<meta name="theme-color" content="#ffffff" />
|
<meta name="theme-color" content="#ffffff" />
|
||||||
<meta name="description" content="The template for Vue3 Vant Mobile" />
|
<meta name="description" content="The template for Vue3 Vant Mobile" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover, user-scalable=no"/>
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover, user-scalable=no"/>
|
||||||
<link rel="icon" href="/favicon.ico" />
|
<link rel="icon" type="image/png" href="/douyin-logo.png" />
|
||||||
<title>葡哇立体肖像</title>
|
<title>首页</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="app" style="max-width: 500px;margin: 0 auto;"></div>
|
<div id="app" style="max-width: 500px;margin: 0 auto;"></div>
|
||||||
|
|||||||
+1
-1
@@ -5,7 +5,7 @@
|
|||||||
<meta name="theme-color" content="#ffffff" />
|
<meta name="theme-color" content="#ffffff" />
|
||||||
<meta name="description" content="The template for Vue3 Vant Mobile" />
|
<meta name="description" content="The template for Vue3 Vant Mobile" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover, user-scalable=no"/>
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover, user-scalable=no"/>
|
||||||
<link rel="icon" href="/favicon.ico" />
|
<link rel="icon" type="image/png" href="/douyin-logo.png" />
|
||||||
<title>Oauth2</title>
|
<title>Oauth2</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|||||||
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
+16
-5
@@ -1,4 +1,6 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
import { computed, onMounted, watch } from 'vue'
|
||||||
|
import { useRoute } from 'vue-router'
|
||||||
import { useTranslation } from "i18next-vue";
|
import { useTranslation } from "i18next-vue";
|
||||||
import * as i18n from '@/lang/utils'
|
import * as i18n from '@/lang/utils'
|
||||||
import { Locale } from 'vant';
|
import { Locale } from 'vant';
|
||||||
@@ -7,11 +9,14 @@ import enUS from 'vant/es/locale/lang/en-US';
|
|||||||
import zhCN from 'vant/es/locale/lang/zh-CN';
|
import zhCN from 'vant/es/locale/lang/zh-CN';
|
||||||
import zhTW from 'vant/es/locale/lang/zh-TW';
|
import zhTW from 'vant/es/locale/lang/zh-TW';
|
||||||
import ko from 'vant/es/locale/lang/ko-KR';
|
import ko from 'vant/es/locale/lang/ko-KR';
|
||||||
// import { zhCN } from "element-plus/es/locale";
|
|
||||||
|
|
||||||
const { i18next, t } = useTranslation();
|
const { i18next, t } = useTranslation();
|
||||||
i18n.set(t);
|
i18n.set(t);
|
||||||
|
|
||||||
|
const route = useRoute()
|
||||||
|
/** 仅抖音页使用独立布局壳,避免影响 cartoon / badge 等页面 */
|
||||||
|
const isDouyinRoute = computed(() => String(route.path || '').startsWith('/douyin'))
|
||||||
|
|
||||||
// 根据 i18next 语言获取对应的 Vant Locale
|
// 根据 i18next 语言获取对应的 Vant Locale
|
||||||
function getVantLocale() {
|
function getVantLocale() {
|
||||||
const lang = i18next.language || "zh-CN";
|
const lang = i18next.language || "zh-CN";
|
||||||
@@ -62,7 +67,7 @@ onMounted(() => {
|
|||||||
<template>
|
<template>
|
||||||
<router-view v-slot="{ Component }">
|
<router-view v-slot="{ Component }">
|
||||||
<Suspense>
|
<Suspense>
|
||||||
<div class="app-shell">
|
<div :class="isDouyinRoute ? 'app-shell app-shell--douyin' : 'app-shell'">
|
||||||
<component :is="Component" />
|
<component :is="Component" />
|
||||||
</div>
|
</div>
|
||||||
</Suspense>
|
</Suspense>
|
||||||
@@ -70,16 +75,22 @@ onMounted(() => {
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
/* 全站最大宽度,桌面端居中;transform 让 position:fixed 相对本容器对齐 */
|
/* 公共根节点:cartoon 等页白底 */
|
||||||
.app-shell {
|
.app-shell {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 540px;
|
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
min-height: 100dvh;
|
min-height: 100dvh;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background-color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 仅抖音链路:桌面居中 + fixed 相对本容器(不影响 cartoon) */
|
||||||
|
.app-shell--douyin {
|
||||||
|
max-width: 540px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
position: relative;
|
position: relative;
|
||||||
box-sizing: border-box;
|
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
transform: translateZ(0);
|
transform: translateZ(0);
|
||||||
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
+1
-1
@@ -12,7 +12,7 @@
|
|||||||
color-scheme: light !important;
|
color-scheme: light !important;
|
||||||
}
|
}
|
||||||
[data-theme='light'] body {
|
[data-theme='light'] body {
|
||||||
background-color: #eff2f5;
|
background-color: #ffffff;
|
||||||
}
|
}
|
||||||
:root {
|
:root {
|
||||||
--van-checkbox-checked-icon-color: #07c160;
|
--van-checkbox-checked-icon-color: #07c160;
|
||||||
|
|||||||
+4
-2
@@ -4,13 +4,15 @@ body {
|
|||||||
padding: 0;
|
padding: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
min-height: 100%;
|
min-height: 100%;
|
||||||
background-color: #eff2f5;
|
/* cartoon 等业务页默认白底;勿用全局灰底覆盖 */
|
||||||
|
background-color: #ffffff;
|
||||||
}
|
}
|
||||||
|
|
||||||
#app {
|
#app {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
min-height: 100dvh;
|
min-height: 100dvh;
|
||||||
|
background-color: #ffffff;
|
||||||
}
|
}
|
||||||
|
|
||||||
*,
|
*,
|
||||||
@@ -33,7 +35,7 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background-color: #eff2f5;
|
background-color: #ffffff;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -1,3 +1,5 @@
|
|||||||
export const config: any = {
|
export const config: any = {
|
||||||
|
/** 暂时隐藏浏览器标题中的品牌名;恢复时改回 true / 填回 brand */
|
||||||
|
showBrandInTitle: false,
|
||||||
brand: '葡哇立体肖像',
|
brand: '葡哇立体肖像',
|
||||||
}
|
}
|
||||||
@@ -13,7 +13,7 @@ export const routes = [
|
|||||||
component: douyinHome,
|
component: douyinHome,
|
||||||
meta: {
|
meta: {
|
||||||
needGuard: true,
|
needGuard: true,
|
||||||
title: '抖音定制',
|
title: '首页',
|
||||||
channel: 'douyin',
|
channel: 'douyin',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|||||||
+5
-1
@@ -72,7 +72,11 @@ router.beforeEach((_to, _from, next) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const pageTitle = (_to.meta.title as string) || '相册'
|
const pageTitle = (_to.meta.title as string) || '相册'
|
||||||
window.document.title = `${config.brand.$t} - ${pageTitle.$t || pageTitle}`
|
const titleText = pageTitle.$t || pageTitle
|
||||||
|
const brandText = config.brand?.$t || config.brand || ''
|
||||||
|
// 暂时去掉「葡哇立体肖像」前缀,仅保留页面标题(如「抖音定制」)
|
||||||
|
window.document.title =
|
||||||
|
config.showBrandInTitle && brandText ? `${brandText} - ${titleText}` : String(titleText)
|
||||||
NProgress.start() // start progress bar
|
NProgress.start() // start progress bar
|
||||||
const needGuard = _to.meta.needGuard
|
const needGuard = _to.meta.needGuard
|
||||||
if (needGuard) {
|
if (needGuard) {
|
||||||
|
|||||||
@@ -707,6 +707,8 @@ onMounted(() => {
|
|||||||
.photo-upload-page {
|
.photo-upload-page {
|
||||||
height: auto;
|
height: auto;
|
||||||
overflow-y: scroll!important;
|
overflow-y: scroll!important;
|
||||||
|
min-height: 100vh;
|
||||||
|
background-color: #ffffff;
|
||||||
}
|
}
|
||||||
.badge-size {
|
.badge-size {
|
||||||
padding: 16px;
|
padding: 16px;
|
||||||
|
|||||||
@@ -1554,6 +1554,7 @@ watch(() => isViews.value, (val) => {
|
|||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
font-family: 'PingFang SC', Arial, sans-serif;
|
font-family: 'PingFang SC', Arial, sans-serif;
|
||||||
color: #222;
|
color: #222;
|
||||||
|
background-color: #ffffff;
|
||||||
}
|
}
|
||||||
.backstyle_1 {
|
.backstyle_1 {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
|||||||
Reference in new issue
Block a user