Your Creation详情页

This commit is contained in:
李志鹏
2025-10-21 13:41:54 +08:00
parent fe2b1194bb
commit b2003d8a85
7 changed files with 327 additions and 91 deletions

View File

@@ -1,14 +1,18 @@
<script setup lang="ts">
import HeaderTitle from '@/components/HeaderTitle.vue'
import FooterNavigation from '@/components/FooterNavigation.vue'
import { ref } from 'vue'
import GenerateLoading from '@/views/asistant/components/GenerateLoading.vue'
import { ref,onMounted } from 'vue'
const emit = defineEmits(['viewType'])
import { useRouter } from 'vue-router'
const router = useRouter()
const inputText = ref('')
const isLoved = ref(false)
const loading = ref(true)
setTimeout(() => {
loading.value = false
}, 500);
const onSend = () => {
if (inputText.value === '') return
const text = inputText.value
@@ -34,40 +38,50 @@
<template>
<header-title style-type="2" />
<div class="customize">
<div class="title">Customize your Look!</div>
<p class="tip">Refine your Look</p>
<div class="input-box">
<div class="help">?</div>
<input
type="text"
v-model="inputText"
@keyup.enter="onSend"
placeholder="Try: “Change background to Tokyo City”"
/>
<div class="send" @click="onSend"><SvgIcon name="send" size="48" /></div>
</div>
<div class="card">
<img src="@/assets/images/workshop/posture/posture_1.png" />
<!-- <div class="select-box">
<div class="loading" v-if="loading"><generate-loading /></div>
<template v-else>
<div class="customize">
<div class="title">Customize your Look!</div>
<p class="tip">Refine your Look</p>
<div class="input-box">
<div class="help">?</div>
<input
type="text"
v-model="inputText"
@keyup.enter="onSend"
placeholder="Try: “Change background to Tokyo City”"
/>
<div class="send" @click="onSend"><SvgIcon name="send" size="48" /></div>
</div>
<div class="card">
<img src="@/assets/images/workshop/posture/posture_1.png" />
<!-- <div class="select-box">
<div class="icon"><SvgIcon name="history" size="35" /></div>
<div class="label">History</div>
<div class="icon"><SvgIcon name="xialajiantou" size="29" /></div>
</div> -->
<div class="icons">
<div @click="onLove"><SvgIcon :name="`love_${isLoved ? 1 : 0}`" size="35" /></div>
<div @click="onReload"><SvgIcon name="reload" size="35" /></div>
<!-- <div @click="onDownload"><SvgIcon name="download" size="35" /></div> -->
<div class="icons">
<div @click="onLove"><SvgIcon :name="`love_${isLoved ? 1 : 0}`" size="35" /></div>
<div @click="onReload"><SvgIcon name="reload" size="35" /></div>
<!-- <div @click="onDownload"><SvgIcon name="download" size="35" /></div> -->
</div>
</div>
<div class="btns">
<button @click="onFinish">Finish</button>
</div>
</div>
<div class="btns">
<button @click="onFinish">Finish</button>
</div>
</div>
<footer-navigation />
<footer-navigation />
</template>
</template>
<style scoped lang="less">
.loading{
width: 100%;
margin-top: 36.6rem;
display: flex;
align-items: center;
justify-content: center;
}
.customize {
width: 100%;
position: relative;
@@ -189,6 +203,7 @@
box-sizing: content-box;
font-family: satoshiRegular;
// margin: 0 1.8rem;
border: none;
margin: 0 5.2rem 0 auto;
width: 23.8rem;
height: 6.9rem;