liuxiang/faceFamilySource
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
yixu
2025-09-12 22:20:39 +08:00
parent e3783c5f0a
commit 7d65fd2a3a
17 changed files with 605 additions and 730 deletions
Download Patch File Download Diff File Expand all files Collapse all files

244
src/components/SelectTemplateV2.vue
View File

@@ -1,89 +1,15 @@
<script setup>
import { ref, onMounted } from "vue"
import { useRouter } from 'vue-router'
import GenerateImgConfirm from './GenerateImgConfirm.vue'
import imageBackground from '../static/imageBackground.js';
import { globalStore } from "../globalstore.js";
defineProps({
show: true
})
const menuData = ref([
{
imgSrc: 'src/assets/images/generate/shenxian.png',
activeImgSrc: 'src/assets/images/generate/shenxian-selected.png',
children: [
{ imageUrl: 'src/assets/images/generate/template/shenxian/shenxian_1.png' },
{ imageUrl: 'src/assets/images/generate/template/shenxian/shenxian_2.png' },
{ imageUrl: 'src/assets/images/generate/template/shenxian/shenxian_3.png' },
{ imageUrl: 'src/assets/images/generate/template/shenxian/shenxian_4.png' },
{ imageUrl: 'src/assets/images/generate/template/shenxian/shenxian_5.png' },
{ imageUrl: 'src/assets/images/generate/template/shenxian/shenxian_6.png' }
]
},
{
imgSrc: 'src/assets/images/generate/xianxia.png',
activeImgSrc: 'src/assets/images/generate/xianxia-selected.png',
children: [
{ imageUrl: 'src/assets/images/generate/template/xianxia/xianxia_1.png' },
{ imageUrl: 'src/assets/images/generate/template/xianxia/xianxia_2.png' },
{ imageUrl: 'src/assets/images/generate/template/xianxia/xianxia_3.png' },
{ imageUrl: 'src/assets/images/generate/template/xianxia/xianxia_4.png' },
{ imageUrl: 'src/assets/images/generate/template/xianxia/xianxia_5.png' },
{ imageUrl: 'src/assets/images/generate/template/xianxia/xianxia_6.png' }
]
},
{
imgSrc: 'src/assets/images/generate/fugu.png',
activeImgSrc: 'src/assets/images/generate/fugu-selected.png',
children: [
{ imageUrl: 'src/assets/images/generate/template/fugu/fugu_1.png' },
{ imageUrl: 'src/assets/images/generate/template/fugu/fugu_2.png' },
{ imageUrl: 'src/assets/images/generate/template/fugu/fugu_3.png' },
{ imageUrl: 'src/assets/images/generate/template/fugu/fugu_4.png' },
{ imageUrl: 'src/assets/images/generate/template/fugu/fugu_5.png' },
{ imageUrl: 'src/assets/images/generate/template/fugu/fugu_6.png' }
]
},
{
imgSrc: 'src/assets/images/generate/xinzhongshi.png',
activeImgSrc: 'src/assets/images/generate/xinzhongshi-selected.png',
children: [
{ imageUrl: 'src/assets/images/generate/template/xinzhongshi/xinzhongshi_1.png' },
{ imageUrl: 'src/assets/images/generate/template/xinzhongshi/xinzhongshi_2.png' },
{ imageUrl: 'src/assets/images/generate/template/xinzhongshi/xinzhongshi_3.png' },
{ imageUrl: 'src/assets/images/generate/template/xinzhongshi/xinzhongshi_4.png' },
{ imageUrl: 'src/assets/images/generate/template/xinzhongshi/xinzhongshi_5.png' },
{ imageUrl: 'src/assets/images/generate/template/xinzhongshi/xinzhongshi_6.png' }
]
},
{
imgSrc: 'src/assets/images/generate/luying.png',
activeImgSrc: 'src/assets/images/generate/luying-selected.png',
children: [
{ imageUrl: 'src/assets/images/generate/template/luying/luying_1.png' },
{ imageUrl: 'src/assets/images/generate/template/luying/luying_2.png' },
{ imageUrl: 'src/assets/images/generate/template/luying/luying_3.png' },
{ imageUrl: 'src/assets/images/generate/template/luying/luying_4.png' },
{ imageUrl: 'src/assets/images/generate/template/luying/luying_5.png' },
{ imageUrl: 'src/assets/images/generate/template/luying/luying_6.png' }
]
},
{
imgSrc: 'src/assets/images/generate/paidui.png',
activeImgSrc: 'src/assets/images/generate/paidui-selected.png',
children: [
{ imageUrl: 'src/assets/images/generate/template/paidui/paidui_1.png' },
{ imageUrl: 'src/assets/images/generate/template/paidui/paidui_2.png' },
{ imageUrl: 'src/assets/images/generate/template/paidui/paidui_3.png' },
{ imageUrl: 'src/assets/images/generate/template/paidui/paidui_4.png' },
{ imageUrl: 'src/assets/images/generate/template/paidui/paidui_5.png' },
{ imageUrl: 'src/assets/images/generate/template/paidui/paidui_6.png' }
]
}
]);
onMounted(() => {
activeMenu.value = { ...activeMenu.value, level1: 0 };
updateDisplayedImages();
displayedImages.value = imageBackground[0].children;
})
const router = useRouter();
@@ -93,64 +19,10 @@ const navigateTodoList = () => {
})
}
const activeMenu = ref({
level1: 0
});
const selectMenu = (level, index)=> {
if (level === 1) {
activeMenu.value = { ...activeMenu.value, level1: index };
updateDisplayedImages();
}
}
const updateDisplayedImages = ()=> {
if (activeMenu.value.level1 !== null && menuData.value[activeMenu.value.level1]) {
displayedImages.value = menuData.value[activeMenu.value.level1].children;
} else {
displayedImages.value = [];
}
}
const contentPanels = ref([{}]);
const getMenuLevelTitle = (level) => {
const index = activeMenu.value[`level${level}`];
if (index === null || index === undefined) return '-';
if (level === 1) {
return menuData.value[index]?.title || '-';
}
return '-';
};
const getImageStyle = (index, actived)=> {
console.log(actived)
return {
position: 'absolute',
width: actived? index === 3? '16vw' : '13vw' : index === 3 ? '15vw' : '10.8vw',
top: actived? '14%' : '15%',
left: calculateMenuLevel1Left(index, actived) + '%'
}
}
// 计算一级菜单位置
const calculateMenuLevel1Left = (index, actived) => {
const multiplier =
index === 1 ? actived? 12.5 : 13.5 :
index === 2 ? actived? 13 : 13.5 :
index === 3 ? 13.5 :
index === 4 ? actived? 14.6 : 14.8 :
index === 5 ? 14.6 :
13.8;
return (8.4 + index * multiplier).toFixed(1);
};
const displayedImages = ref([]);
const goToGenerateImgPage = (item) => {
globalStore.people_count = item.peopleCount;
globalStore.select_template = item.imgUrl;
const hasVisitedBefore = localStorage.getItem('hasVisitedGenerateImg');
if (!hasVisitedBefore) {
localStorage.setItem('hasVisitedGenerateImg', 'true');
@@ -165,6 +37,28 @@ const goToGenerateImgPage = (item) => {
});
}
}
const currentBackground = ref(imageBackground[0].titleImgUrl);
const navImage = ref(null);
// 处理导航条点击事件
const handleNavClick = (event) => {
// 获取点击区域的id
const zone = event.target.closest('.click-zone');
if (!zone) return;
const id = parseInt(zone.dataset.id);
// 根据id找到对应的背景图片
const selectedItem = imageBackground.find(item => item.id === id);
if (selectedItem) {
currentBackground.value = selectedItem.titleImgUrl;
displayedImages.value = selectedItem.children || [];
console.log(`切换到ID ${id}的背景图`);
}
};
</script>
<template>
@@ -174,19 +68,27 @@ const goToGenerateImgPage = (item) => {
<img src="../assets/images/back-btn.png" @click="navigateTodoList" alt="后退">
</div>
<!-- 一级菜单 -->
<div class="menu-level-1">
<!-- 显示当前选中的背景图片 -->
<div class="main-image">
<img :src="currentBackground" alt="Background Image" />
</div>
<!-- 导航条图片，分成6个可点击区域 -->
<div class="nav-container">
<div
v-for="(item, index) in menuData"
:key="'level1-' + index"
class="menu-item"
:class="{ active: activeMenu.level1 === index }"
@click="selectMenu(1, index)"
class="nav-image-wrapper"
ref="navImage"
@click="handleNavClick"
>
<img
:src="activeMenu.level1 === index ? item.activeImgSrc : item.imgSrc"
:style="getImageStyle(index, activeMenu.level1 === index)"
/>
<img :src="imageBackground[0].titleImgUrl" alt="Navigation Image" />
<!-- 创建6个可点击区域 -->
<div
v-for="n in 6"
:key="n"
class="click-zone"
:style="{ left: `${(n-1)*16.666}%` }"
:data-id="n"
></div>
</div>
</div>
@@ -196,35 +98,59 @@ const goToGenerateImgPage = (item) => {
:key="index"
@click="goToGenerateImgPage(item)"
class="mask-image mask-background"
:style="{ 'background-image': `url(${item.imageUrl})` }"
:style="{ 'background-image': `url(${item.imgUrl})` }"
>
<img class="border-img" src="../assets/images/generate/border.png" alt="边框">
</div>
</div>
<div class="content-area">
<div
v-for="(item, index) in contentPanels"
:key="'panel-' + index"
class="content-panel"
:class="{ active: activeContent === index }"
>
</div>
</div>
</div>
</div>
</template>
<style scoped>
.main-image {
position: absolute;
top: 24vw;
padding: 0 3vw;
}
.main-image img {
width: 100%;
}
.nav-container {
position: relative;
}
.nav-image-wrapper {
top: 24vw;
opacity: 0;
position: relative;
display: inline-block;
cursor: pointer;
}
.nav-image-wrapper img {
width: 100%;
display: block;
max-width: none;
}
.click-zone {
position: absolute;
top: -5px;
bottom: -5px;
width: calc(100% /6);
background-color: transparent;
transition: background-color .2s ease-in-out;
}
.images-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 100%;
gap: 3vw;
margin-top: 43vw;
margin-top: 26vw;
overflow: hidden;
overflow-y: auto;
}