aidlab/lanecarford_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更改头部标题和底部导航

Browse Source
This commit is contained in:
李志鹏
2025-12-19 13:25:58 +08:00
parent ed5c3232b9
commit c04b99a9aa
16 changed files with 307 additions and 287 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/FooterNavigation.vue
View File

@@ -33,7 +33,7 @@
const navs = [
{ label: 'Home', icon: 'home', size: 73, path: '/homeNav' },
{ label: 'Library', icon: 'library', size: 53, path: '/workshop/library' },
{ label: 'Profile', icon: 'profile', size: 55, path: '/workshop/profile' }
// { label: 'Profile', icon: 'profile', size: 55, path: '/workshop/profile' }
]
const onNavClick = (nav) => {
if (currentRoute.value !== nav.path) nav.on ? nav.on(nav) : nav.path && router.push(nav.path)
@@ -49,10 +49,10 @@
@click="onNavClick(nav)"
>
<SvgIcon :name="`${nav.icon}_${currentRoute === nav.path ? '1' : '0'}`" size="55" />
<span class="label">{{ nav.label }}</span>
<!-- <span class="label">{{ nav.label }}</span> -->
</div>
</div>
<div class="footer-navigation placeholder" v-show="isPlaceholder"></div>
<!-- <div class="footer-navigation placeholder" v-show="isPlaceholder"></div> -->
</template>
<style scoped lang="less">
@@ -61,9 +61,9 @@
height: var(--footer-navigation-height, 14.9rem);
}
.footer-navigation.main {
position: fixed;
bottom: 0;
z-index: var(--footer-navigation-z-index, 999);
// position: fixed;
// bottom: 0;
// z-index: var(--footer-navigation-z-index, 999);
background-color: var(--footer-navigation-background, #fff);
box-shadow: -2.6rem -1.4rem 3.47rem 0 rgba(0, 0, 0, 0.05);
display: flex;

86
src/components/HeaderTitle.vue
View File

@@ -4,76 +4,56 @@
defineProps({
title: { type: String, default: 'AI STYLING ASSISTANT' },
hasSetting: { type: Boolean, default: false },
styleType: { type: String, default: '1' },//1低 2高 3-12rem
isPlaceholder: { type: Boolean, default: true },
})
defineEmits(['clickReturn'])
const emit = defineEmits(['clickReturn', 'clickProfile'])
const handleClickReturn = () => {
router.back()
// emit('clickReturn')
}
const handleClickProfile = () => {
// router.push('/workshop/profile')
emit('clickProfile')
}
</script>
<template>
<div class="header-title" :style-type="styleType">
<div class="main">
<div class="return" @click="handleClickReturn"><SvgIcon name="return" size="34" /></div>
<span class="title">{{ title }}</span>
<div class="setting" v-if="hasSetting"><SvgIcon name="setting" size="44" /></div>
</div>
<div class="placeholder" v-if="isPlaceholder"></div>
<div class="header-title">
<div class="return" @click="handleClickReturn"><SvgIcon name="return" size="34" /></div>
<span class="title">{{ title }}</span>
<div class="profile" @click="handleClickProfile"><SvgIcon name="profile" size="45" /></div>
</div>
</template>
<style scoped lang="less">
.header-title {
width: 100%;
&[style-type="2"] {
--header-title-height: 14.5rem;
--header-title-border-bottom-width: 0.2rem;
--header-title-return-left: 7.8rem;
}
&[style-type="3"] {
--header-title-height: 12rem;
--header-title-border-bottom-width: 0.2rem;
}
> div {
width: 100%;
height: var(--header-title-height, 9.9rem);
border-bottom-width: var(--header-title-border-bottom-width, 0);
border-bottom-style: solid;
border-bottom-color: var(--header-title-border-bottom-color, #D5D5D5);
}
> .main {
position: fixed;
top: 0;
z-index: var(--header-title-z-index, 999);
background-color: var(--header-title-background, #fff);
display: flex;
align-items: center;
justify-content: center;
height: var(--header-title-height, 14.6rem);
border-bottom-style: solid;
border-bottom-width: var(--header-title-border-bottom-width, 0.2rem);
border-bottom-color: var(--header-title-border-bottom-color, #d5d5d5);
z-index: var(--header-title-z-index, 999);
background-color: var(--header-title-background, #fff);
display: flex;
align-items: center;
justify-content: center;
> .return {
position: absolute;
left: var(--header-title-return-left, 3.2rem);
display: inline-block;
--svg-icon-color: var(--header-title-color, #000);
}
> .title {
font-size: 4.8rem;
color: var(--header-title-color, #000);
font-family: 'boskaRegular';
}
> .setting {
position: absolute;
right: 3.2rem;
display: inline-block;
color: var(--header-title-color, #000);
}
> .return {
position: absolute;
left: 7rem;
display: inline-block;
}
> .title {
font-size: 4.8rem;
color: var(--header-title-color, #000);
font-family: 'boskaRegular';
}
> .profile {
position: absolute;
right: 7rem;
display: inline-block;
color: var(--header-title-color, #000);
}
}
</style>