feat(layout): 添加顶部导航栏并更新页面样式
- 在 default.vue 中添加 van-nav-bar 组件作为顶部导航栏 - 更新 home、profile 和 prose 页面的样式 - 移除 prose 页面的原有内容 - 添加 vueuse 依赖
This commit is contained in:
parent
c734e4ffd5
commit
0b9cf3c48e
@ -1,8 +1,18 @@
|
||||
<template>
|
||||
<main class="flex flex-col min-h-svh">
|
||||
<div class="flex-1 pb-[var(--van-nav-bar-height)]">
|
||||
<van-nav-bar fixed>
|
||||
<template #title>
|
||||
<div class="flex flex-col items-center justify-center">
|
||||
<div class="text-#000000 text-17px mb-5px font-600">京都拍卖会</div>
|
||||
<div class="text-#939393 text-10px line-height-none font-100">2025.01.18 蒙娜丽莎的微笑</div>
|
||||
</div>
|
||||
</template>
|
||||
</van-nav-bar>
|
||||
<div class="flex-1 pt-46px">
|
||||
<slot />
|
||||
</div>
|
||||
<AppFooter />
|
||||
</main>
|
||||
</template>
|
||||
<script setup>
|
||||
</script>
|
@ -192,7 +192,7 @@ const clickSwipe=(index)=>{
|
||||
</van-tabs>
|
||||
<van-back-top right="15vw" bottom="10vh"/>
|
||||
<van-action-sheet :round="false" v-model:show="show" title="拍品详情">
|
||||
<div class="content bg-[#F0F0F0]" :style="`height: calc(100vh - ${showHeight+39}px)`">
|
||||
<div class="content bg-[#F0F0F0]" :style="`height: calc(100vh - ${showHeight+39+46}px)`">
|
||||
<van-swipe style="height: 188px" indicator-color="#B4B4B4" lazy-render >
|
||||
<van-swipe-item v-for="(image,index) in images" :key="image" @click="clickSwipe(index)">
|
||||
<van-image
|
||||
|
@ -1,13 +1,13 @@
|
||||
<script setup lang="ts">
|
||||
definePageMeta({
|
||||
layout: 'default',
|
||||
title: '我的',
|
||||
i18n: 'menu.profile',
|
||||
})
|
||||
<script setup>
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
{{ $t('profile_page.txt') }}
|
||||
<div class="h-full w-[100vw] bg-[url('@/static/images/5532@2x.png')] bg-cover px-[31px]">
|
||||
123
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
@ -1,42 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
import { useProseStore } from '~/stores/prose'
|
||||
|
||||
definePageMeta({
|
||||
layout: 'default',
|
||||
title: '随笔',
|
||||
i18n: 'menu.fetch',
|
||||
})
|
||||
|
||||
const proseStore = useProseStore()
|
||||
|
||||
function fetch() {
|
||||
proseStore.fetchProse()
|
||||
}
|
||||
|
||||
function clear() {
|
||||
proseStore.clearProse()
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="h-300 flex items-center justify-center rounded-15 bg-white p-16 dark:bg-[--van-background-2]">
|
||||
<div v-if="proseStore.prose" class="text-16 leading-26">
|
||||
{{ proseStore.prose }}
|
||||
</div>
|
||||
|
||||
<ClientOnly v-else>
|
||||
<van-empty :description="$t('prose_page.btn_empty_desc')" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
<van-space class="m-10" direction="vertical" fill>
|
||||
<van-button type="primary" round block @click="fetch">
|
||||
{{ $t('prose_page.btn_fetch') }}
|
||||
</van-button>
|
||||
<van-button type="default" round block @click="clear">
|
||||
{{ $t('prose_page.btn_clear') }}
|
||||
</van-button>
|
||||
</van-space>
|
||||
</div>
|
||||
</template>
|
BIN
app/static/images/5532@2x.png
Normal file
BIN
app/static/images/5532@2x.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 62 KiB |
@ -1,33 +0,0 @@
|
||||
import { defineStore } from 'pinia'
|
||||
import { getProse } from '~/api/prose'
|
||||
|
||||
export const useProseStore = defineStore(
|
||||
'prose',
|
||||
() => {
|
||||
const prose = ref<string>('')
|
||||
|
||||
function initProse(val: string) {
|
||||
if (!prose.value) {
|
||||
prose.value = ''
|
||||
}
|
||||
|
||||
prose.value = val
|
||||
}
|
||||
|
||||
function clearProse() {
|
||||
prose.value = ''
|
||||
}
|
||||
|
||||
async function fetchProse() {
|
||||
const res = await getProse()
|
||||
initProse(res.result)
|
||||
}
|
||||
|
||||
return {
|
||||
prose,
|
||||
initProse,
|
||||
clearProse,
|
||||
fetchProse,
|
||||
}
|
||||
},
|
||||
)
|
@ -15,6 +15,7 @@
|
||||
"dependencies": {
|
||||
"@nuxtjs/color-mode": "^3.5.2",
|
||||
"@nuxtjs/i18n": "^9.1.1",
|
||||
"@vueuse/core": "^12.4.0",
|
||||
"nuxt": "^3.15.0",
|
||||
"pinia-plugin-persistedstate": "^4.2.0",
|
||||
"pinyin": "4.0.0-alpha.2",
|
||||
|
@ -17,6 +17,9 @@ importers:
|
||||
'@nuxtjs/i18n':
|
||||
specifier: ^9.1.1
|
||||
version: 9.1.1(@vue/compiler-dom@3.5.13)(eslint@9.17.0(jiti@2.4.2))(magicast@0.3.5)(rollup@4.29.1)(typescript@5.7.2)(vue@3.5.13(typescript@5.7.2))
|
||||
'@vueuse/core':
|
||||
specifier: ^12.4.0
|
||||
version: 12.4.0(typescript@5.7.2)
|
||||
nuxt:
|
||||
specifier: ^3.15.0
|
||||
version: 3.15.0(@parcel/watcher@2.5.0)(@types/node@22.10.2)(db0@0.2.1)(eslint@9.17.0(jiti@2.4.2))(ioredis@5.4.2)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.29.1)(sass@1.83.1)(terser@5.37.0)(tsx@4.19.2)(typescript@5.7.2)(vite@6.0.5(@types/node@22.10.2)(jiti@2.4.2)(sass@1.83.1)(terser@5.37.0)(tsx@4.19.2)(yaml@2.6.1))(yaml@2.6.1)
|
||||
@ -1266,6 +1269,9 @@ packages:
|
||||
'@types/resolve@1.20.2':
|
||||
resolution: {integrity: sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==}
|
||||
|
||||
'@types/web-bluetooth@0.0.20':
|
||||
resolution: {integrity: sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==}
|
||||
|
||||
'@typescript-eslint/scope-manager@8.18.2':
|
||||
resolution: {integrity: sha512-YJFSfbd0CJjy14r/EvWapYgV4R5CHzptssoag2M7y3Ra7XNta6GPAJPPP5KGB9j14viYXyrzRO5GkX7CRfo8/g==}
|
||||
engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
|
||||
@ -1492,6 +1498,15 @@ packages:
|
||||
'@vue/shared@3.5.13':
|
||||
resolution: {integrity: sha512-/hnE/qP5ZoGpol0a5mDi45bOd7t3tjYJBjsgCsivow7D48cJeV5l05RD82lPqi7gRiphZM37rnhW1l6ZoCNNnQ==}
|
||||
|
||||
'@vueuse/core@12.4.0':
|
||||
resolution: {integrity: sha512-XnjQYcJwCsyXyIafyA6SvyN/OBtfPnjvJmbxNxQjCcyWD198urwm5TYvIUUyAxEAN0K7HJggOgT15cOlWFyLeA==}
|
||||
|
||||
'@vueuse/metadata@12.4.0':
|
||||
resolution: {integrity: sha512-AhPuHs/qtYrKHUlEoNO6zCXufu8OgbR8S/n2oMw1OQuBQJ3+HOLQ+EpvXs+feOlZMa0p8QVvDWNlmcJJY8rW2g==}
|
||||
|
||||
'@vueuse/shared@12.4.0':
|
||||
resolution: {integrity: sha512-9yLgbHVIF12OSCojnjTIoZL1+UA10+O4E1aD6Hpfo/DKVm5o3SZIwz6CupqGy3+IcKI8d6Jnl26EQj/YucnW0Q==}
|
||||
|
||||
'@webassemblyjs/ast@1.14.1':
|
||||
resolution: {integrity: sha512-nuBEDgQfm1ccRp/8bCQrx1frohyufl4JlbMMZ4P1wpeOfDhF6FQkxZJ1b/e+PLwr6X1Nhw6OLme5usuBWYBvuQ==}
|
||||
|
||||
@ -5394,6 +5409,8 @@ snapshots:
|
||||
|
||||
'@types/resolve@1.20.2': {}
|
||||
|
||||
'@types/web-bluetooth@0.0.20': {}
|
||||
|
||||
'@typescript-eslint/scope-manager@8.18.2':
|
||||
dependencies:
|
||||
'@typescript-eslint/types': 8.18.2
|
||||
@ -5820,6 +5837,23 @@ snapshots:
|
||||
|
||||
'@vue/shared@3.5.13': {}
|
||||
|
||||
'@vueuse/core@12.4.0(typescript@5.7.2)':
|
||||
dependencies:
|
||||
'@types/web-bluetooth': 0.0.20
|
||||
'@vueuse/metadata': 12.4.0
|
||||
'@vueuse/shared': 12.4.0(typescript@5.7.2)
|
||||
vue: 3.5.13(typescript@5.7.2)
|
||||
transitivePeerDependencies:
|
||||
- typescript
|
||||
|
||||
'@vueuse/metadata@12.4.0': {}
|
||||
|
||||
'@vueuse/shared@12.4.0(typescript@5.7.2)':
|
||||
dependencies:
|
||||
vue: 3.5.13(typescript@5.7.2)
|
||||
transitivePeerDependencies:
|
||||
- typescript
|
||||
|
||||
'@webassemblyjs/ast@1.14.1':
|
||||
dependencies:
|
||||
'@webassemblyjs/helper-numbers': 1.13.2
|
||||
|
Loading…
Reference in New Issue
Block a user