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

71
src/components/FooterNavigation.vue Normal file
View File

@@ -0,0 +1,71 @@
<script setup lang="ts">
import { computed } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const currentRoute = computed(() => router.currentRoute.value.path)
defineProps({
/** 是否显示占位符 */
isPlaceholder: { type: Boolean, default: false }
})
const handleClickReturn = () => {
router.back()
// emit('clickReturn')
}
const navs = [
{ label: 'Home', icon: 'home', size: 73, path: '/home' },
{ label: 'Library', icon: 'library', size: 53, path: '/workshop/library' },
{ label: 'Profile', icon: 'profile', size: 55, path: '/workshop/creation' }
]
const onNavClick = (nav) => {
if (currentRoute.value !== nav.path) router.push(nav.path)
}
</script>
<template>
<div class="footer-navigation main">
<div
v-for="nav in navs"
:key="nav.path"
:class="{ active: currentRoute === nav.path }"
@click="onNavClick(nav)"
>
<SvgIcon :name="nav.icon" size="55" />
<span class="label">{{ nav.label }}</span>
</div>
</div>
<div class="footer-navigation placeholder" v-show="isPlaceholder"></div>
</template>
<style scoped lang="less">
.footer-navigation {
width: 100%;
height: var(--footer-navigation-height, 14.9rem);
}
.footer-navigation.main {
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;
align-items: center;
justify-content: space-evenly;
> div {
display: flex;
flex-direction: column;
align-items: center;
&.active > * {
color: #0d99ff;
}
> .label {
margin-top: 1.6rem;
font-family: satoshiRegular;
font-weight: 500;
font-size: 2.4rem;
line-height: 89%;
}
}
}
</style>

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>