适配深色模式、生成动画的文件chatloading改为generateLoading
This commit is contained in:
@@ -28,6 +28,13 @@ button.sandblasted-blurred::after {
|
|||||||
button.sandblasted-blurred:active {
|
button.sandblasted-blurred:active {
|
||||||
opacity: 0.7;
|
opacity: 0.7;
|
||||||
}
|
}
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
:root,
|
||||||
|
body {
|
||||||
|
background: white !important;
|
||||||
|
color: black !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
html:root {
|
html:root {
|
||||||
--van-dialog-width: 90rem;
|
--van-dialog-width: 90rem;
|
||||||
--van-dialog-font-size: 5rem;
|
--van-dialog-font-size: 5rem;
|
||||||
@@ -39,3 +46,9 @@ html:root {
|
|||||||
--van-dialog-message-padding: 3rem 2.5rem;
|
--van-dialog-message-padding: 3rem 2.5rem;
|
||||||
--van-dialog-has-title-message-padding-top: 2.5rem;
|
--van-dialog-has-title-message-padding-top: 2.5rem;
|
||||||
}
|
}
|
||||||
|
.van-toast__text {
|
||||||
|
font-size: 4rem;
|
||||||
|
height: 5rem;
|
||||||
|
line-height: 5rem;
|
||||||
|
padding: 0 2rem;
|
||||||
|
}
|
||||||
|
|||||||
@@ -34,6 +34,13 @@ button.sandblasted-blurred {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
//只使用浅色模式
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
:root, body {
|
||||||
|
background: white !important;
|
||||||
|
color: black !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// vant dialog
|
// vant dialog
|
||||||
html:root {
|
html:root {
|
||||||
|
|||||||
@@ -64,10 +64,10 @@ const {} = toRefs(data);
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="btn">
|
<div class="btn">
|
||||||
<div>
|
<!-- <div>
|
||||||
<SvgIcon v-if="!item.isLike" @click.stop="setLike(item,'like')" name="noLike" size="30" />
|
<SvgIcon v-if="!item.isLike" @click.stop="setLike(item,'like')" name="noLike" size="30" />
|
||||||
<SvgIcon v-else name="like" @click.stop="setLike(item,'noLike')" color="#FF4949" size="30" />
|
<SvgIcon v-else name="like" @click.stop="setLike(item,'noLike')" color="#FF4949" size="30" />
|
||||||
</div>
|
</div> -->
|
||||||
<div>
|
<div>
|
||||||
<SvgIcon @click.stop="updateStyle(item,index)" name="update" size="30" />
|
<SvgIcon @click.stop="updateStyle(item,index)" name="update" size="30" />
|
||||||
</div>
|
</div>
|
||||||
@@ -75,9 +75,9 @@ const {} = toRefs(data);
|
|||||||
<SvgIcon v-if="!item.isAdd" @click.stop="addLibrary(item,'add')" name="add" size="30" />
|
<SvgIcon v-if="!item.isAdd" @click.stop="addLibrary(item,'add')" name="add" size="30" />
|
||||||
<SvgIcon v-else @click.stop="addLibrary(item,'delete')" name="confirmation" size="30" />
|
<SvgIcon v-else @click.stop="addLibrary(item,'delete')" name="confirmation" size="30" />
|
||||||
</div> -->
|
</div> -->
|
||||||
<div>
|
<!-- <div>
|
||||||
<SvgIcon @click.stop="deleteStyle(index)" name="delete" size="30" />
|
<SvgIcon @click.stop="deleteStyle(index)" name="delete" size="30" />
|
||||||
</div>
|
</div> -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@@ -3,38 +3,47 @@ import { onMounted, onUnmounted, reactive, toRefs } from "vue";
|
|||||||
import HeaderTitle from '@/components/HeaderTitle.vue'
|
import HeaderTitle from '@/components/HeaderTitle.vue'
|
||||||
import FooterNavigation from '@/components/FooterNavigation.vue'
|
import FooterNavigation from '@/components/FooterNavigation.vue'
|
||||||
import { useRouter } from 'vue-router'
|
import { useRouter } from 'vue-router'
|
||||||
|
import GenerateLoading from '@/views/asistant/components/GenerateLoading.vue'
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
//const props = defineProps({
|
//const props = defineProps({
|
||||||
//})
|
//})
|
||||||
const emit = defineEmits(['view-type'])
|
const emit = defineEmits(['view-type'])
|
||||||
// let data = reactive({
|
let data = reactive({
|
||||||
// modelList:
|
modelList:
|
||||||
// [
|
[
|
||||||
|
|
||||||
// ],
|
],
|
||||||
// selectedModelId: null,
|
isLoading: false,
|
||||||
// })
|
})
|
||||||
|
|
||||||
// const setSelectedModelId = (item)=>{
|
// const setSelectedModelId = (item)=>{
|
||||||
// data.selectedModelId = item.id;
|
// data.selectedModelId = item.id;
|
||||||
// }
|
// }
|
||||||
|
|
||||||
|
|
||||||
const onContinue = ()=>{
|
const onContinue = ()=>{
|
||||||
router.push('uploadFace')
|
router.push('uploadFace')
|
||||||
|
}
|
||||||
|
|
||||||
|
const changeModel = ()=>{
|
||||||
|
router.push('selectModel')
|
||||||
}
|
}
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
emit('view-type', 1)
|
emit('view-type', 1)
|
||||||
|
data.isLoading = true;
|
||||||
|
setTimeout(()=>{
|
||||||
|
data.isLoading = false;
|
||||||
|
}, 2000)
|
||||||
})
|
})
|
||||||
onUnmounted(()=>{
|
onUnmounted(()=>{
|
||||||
})
|
})
|
||||||
defineExpose({})
|
defineExpose({})
|
||||||
// const { modelList, selectedModelId } = toRefs(data);
|
const { isLoading } = toRefs(data);
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<header-title style-type="2" />
|
<header-title style-type="2" />
|
||||||
<div class="selectModelContinue">
|
<div class="selectModelContinue" v-if="!isLoading">
|
||||||
<div class="text">
|
<div class="text">
|
||||||
<div class="title">
|
<div class="title">
|
||||||
Go with this Look?
|
Go with this Look?
|
||||||
@@ -58,12 +67,15 @@ defineExpose({})
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="again">
|
<div class="again">
|
||||||
<div>Re-try?</div>
|
<div @click="changeModel">Change Model</div>
|
||||||
<div @click="onContinue">Continue</div>
|
<div @click="onContinue">Continue</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<footer-navigation is-placeholder />
|
<footer-navigation is-placeholder v-if="!isLoading"/>
|
||||||
|
<div class="loading-container" v-if="isLoading">
|
||||||
|
<GenerateLoading title="Generating Results..." />
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
.selectModelContinue{
|
.selectModelContinue{
|
||||||
@@ -157,4 +169,11 @@ defineExpose({})
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.loading-container{
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
@@ -66,8 +66,8 @@ let data = reactive({
|
|||||||
|
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
const toSelectModel = ()=>{
|
const toSelectModelContinue = ()=>{
|
||||||
router.push({ path: 'selectModel' })
|
router.push({ path: 'selectModelContinue' })
|
||||||
}
|
}
|
||||||
onMounted(()=>{
|
onMounted(()=>{
|
||||||
emit('view-type', 1)
|
emit('view-type', 1)
|
||||||
@@ -94,7 +94,7 @@ const { selectList, select } = toRefs(data);
|
|||||||
</div>
|
</div>
|
||||||
<div class="footer placeholder"></div>
|
<div class="footer placeholder"></div>
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
<button @click.stop="toSelectModel">Continue</button>
|
<button @click.stop="toSelectModelContinue">Continue</button>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
|
|||||||
@@ -4,19 +4,23 @@
|
|||||||
<img src="@/assets/images/chat_loading.png" alt="Loading" class="loading-image" />
|
<img src="@/assets/images/chat_loading.png" alt="Loading" class="loading-image" />
|
||||||
<!-- 阴影效果 -->
|
<!-- 阴影效果 -->
|
||||||
<div class="loading-shadow"></div>
|
<div class="loading-shadow"></div>
|
||||||
<div class="loading-text">Analyzing the Outfit...</div>
|
<div class="loading-text">{{ title }}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
// 这个组件只负责显示loading动画
|
// 这个组件只负责显示loading动画
|
||||||
interface LoadingProps {
|
|
||||||
// 可以在这里定义props类型
|
|
||||||
}
|
|
||||||
|
|
||||||
// 定义组件props类型
|
// 定义组件props类型
|
||||||
const props = defineProps<LoadingProps>()
|
const props = defineProps({
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
default: 'Analyzing the Outfit...'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
@@ -8,7 +8,7 @@
|
|||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import NoticeItem from './NoticeItem.vue'
|
import NoticeItem from './NoticeItem.vue'
|
||||||
import ChatLoading from './ChatLoading.vue'
|
import GenerateLoading from './GenerateLoading.vue'
|
||||||
import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue'
|
import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue'
|
||||||
|
|
||||||
// 定义消息类型
|
// 定义消息类型
|
||||||
|
|||||||
@@ -4,7 +4,7 @@
|
|||||||
<HeaderTitle light hasSetting />
|
<HeaderTitle light hasSetting />
|
||||||
</div>
|
</div>
|
||||||
<div class="loading-container" v-if="isLoading">
|
<div class="loading-container" v-if="isLoading">
|
||||||
<ChatLoading />
|
<GenerateLoading />
|
||||||
</div>
|
</div>
|
||||||
<template v-else>
|
<template v-else>
|
||||||
<div class="content flex-1" v-if="!isLoading">
|
<div class="content flex-1" v-if="!isLoading">
|
||||||
@@ -23,7 +23,7 @@
|
|||||||
import HeaderTitle from '@/components/HeaderTitle.vue'
|
import HeaderTitle from '@/components/HeaderTitle.vue'
|
||||||
import NoticeList from './components/NoticeList.vue'
|
import NoticeList from './components/NoticeList.vue'
|
||||||
import InputArea from './components/InputArea.vue'
|
import InputArea from './components/InputArea.vue'
|
||||||
import ChatLoading from './components/ChatLoading.vue'
|
import GenerateLoading from './components/GenerateLoading.vue'
|
||||||
import { ref, onMounted } from 'vue'
|
import { ref, onMounted } from 'vue'
|
||||||
import { useRouter } from 'vue-router'
|
import { useRouter } from 'vue-router'
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
|
|||||||
Reference in New Issue
Block a user