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

123123

Browse Source
This commit is contained in:
李志鹏
2025-10-16 11:01:54 +08:00
parent 7a312dd369
commit 6866d69d00
13 changed files with 381 additions and 288 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
src/components/HeaderTitle.vue
View File

@@ -4,8 +4,8 @@
defineProps({
title: { type: String, default: 'AI STYLING ASSISTANT' },
light: { type: Boolean,default:false },
hasSetting: { type: Boolean,default:false }
hasSetting: { type: Boolean, default: false },
styleType: { type: String, default: '1' },//1低 2高
})
defineEmits(['clickReturn'])
@@ -17,49 +17,57 @@
</script>
<template>
<div class="header-title main" :class="{ 'light': light }">
<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="34" /></div>
<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="34" /></div>
</div>
<div class="placeholder"></div>
</div>
<div class="header-title placeholder"></div>
</template>
<style scoped lang="less">
.header-title {
width: 100%;
height: var(--header-title-height, 9.9rem);
}
.header-title.main {
position: fixed;
top: 0;
z-index: var(--header-title-z-index, 999);
background-color: var(--header-title-background, #000000);
display: flex;
align-items: center;
justify-content: center;
&[style-type="2"] {
--header-title-height: 14.5rem;
--header-title-border-bottom-width: 0.2rem;
--header-title-return-left: 7.8rem;
}
> 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;
> .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;
}
}
> .return {
position: absolute;
left: 3.2rem;
display: inline-block;
--svg-icon-color: var(--header-title-color, #ffffff);
}
> .title {
font-size: 4.8rem;
color: var(--header-title-color, #ffffff);
font-family: 'boskaRegular';
}
>.setting{
position: absolute;
right: 3.2rem;
display: inline-block;
}
&.light {
--header-title-color: #000000;
--svg-icon-color: #000000;
--header-title-background: #ffffff;
}
}
</style>