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

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>