142 lines
3.0 KiB
Vue
142 lines
3.0 KiB
Vue
<template>
|
|
<div class="aiIcon-new">
|
|
<img class="bg" src="@/assets/gif/cartoon-gif.gif" alt="" @click.stop="$router.push('aiUndress')" />
|
|
<!-- <div v-if="visibleText" class="text-box">
|
|
<p class="text" v-html="aiText"></p>
|
|
</div> -->
|
|
<div class="ai-text" v-if="configStore.appConfig.aiCharacterImg">
|
|
<div class="text ellipsis2">
|
|
{{ configStore.appConfig.aiCharacterImg }}
|
|
</div>
|
|
</div>
|
|
<div v-if="props.isShowClose" class="aiClose" @click.stop="emit('close')"></div>
|
|
</div>
|
|
</template>
|
|
<script lang="ts">
|
|
export default {
|
|
name: 'AiFloat',
|
|
};
|
|
</script>
|
|
<script lang="ts" setup>
|
|
import { computed, ref, watch } from 'vue';
|
|
import { useRoute } from 'vue-router';
|
|
import { useConfigStore } from '@/stores/config';
|
|
const configStore = useConfigStore();
|
|
const emit = defineEmits(['close']);
|
|
const route = useRoute();
|
|
|
|
const props = defineProps({
|
|
isShowClose: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
routeName: {
|
|
type: String,
|
|
default: 'home',
|
|
},
|
|
});
|
|
|
|
watch(
|
|
() => route.name,
|
|
(toName) => {
|
|
if (toName === props.routeName) {
|
|
setText();
|
|
}
|
|
},
|
|
);
|
|
|
|
const visibleText = ref(true);
|
|
const aiText = ref('');
|
|
let timer = null as any;
|
|
|
|
const setText = () => {
|
|
const arr = configStore.appConfig.aiBubble || [];
|
|
const len = arr.length;
|
|
if (len === 0) {
|
|
aiText.value = '';
|
|
} else {
|
|
aiText.value = arr[Math.floor(Math.random() * len)].replace('\n', '<br>');
|
|
}
|
|
visibleText.value = true;
|
|
if (timer) {
|
|
clearTimeout(timer);
|
|
}
|
|
timer = setTimeout(() => {
|
|
visibleText.value = false;
|
|
}, 3000);
|
|
};
|
|
setText();
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.aiIcon-new {
|
|
width: 61.6px;
|
|
height: 56px;
|
|
position: fixed;
|
|
bottom: 110px;
|
|
right: 20px;
|
|
z-index: 10;
|
|
.bg {
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: -10px;
|
|
z-index: 1;
|
|
width: 61.6px;
|
|
height: 56px;
|
|
object-fit: contain;
|
|
}
|
|
.ai-text {
|
|
width: 60px;
|
|
height: 36px;
|
|
position: absolute;
|
|
left: -14px;
|
|
top: -10px;
|
|
background: url('@/assets/images/png/ai-text.png') no-repeat;
|
|
background-size: contain;
|
|
z-index: 10;
|
|
.text {
|
|
font-size: 7px;
|
|
color: #000;
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 52px;
|
|
}
|
|
}
|
|
.text-box {
|
|
position: absolute;
|
|
top: -20px;
|
|
left: -10px;
|
|
z-index: 2;
|
|
width: 76px;
|
|
height: 54px;
|
|
background: url('@/assets/images/png/AiGirlFriend-float-txt.png') 0 0 / contain no-repeat;
|
|
padding: 10px 6.8px 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-self: center;
|
|
.text {
|
|
color: #000;
|
|
font-size: 10px;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: normal;
|
|
text-align: center;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
max-height: 26px;
|
|
}
|
|
}
|
|
.aiClose {
|
|
position: absolute;
|
|
top: -14px;
|
|
right: -10px;
|
|
z-index: 1;
|
|
height: 14px;
|
|
width: 14px;
|
|
background: url('@/assets/images/png/aiClose.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
</style>
|