b25071a92b
Remove standalone .scss style files for home page components, update their vue templates to use inline Tailwind utility classes, and remove the associated scoped style imports.
89 lines
2.5 KiB
Vue
89 lines
2.5 KiB
Vue
v
|
|
<template>
|
|
<div class="p-3">
|
|
<div class="bg-white/50 rounded-[20px]">
|
|
<div class="flex items-center justify-between pl-3 pr-3">
|
|
<SpriteAnimator :src="spriteStyle.ipLargeImage" :frameWidth="spriteStyle.frameWidth"
|
|
:frameHeight="spriteStyle.frameHeight" :totalFrames="spriteStyle.totalFrames" :columns="spriteStyle.columns"
|
|
:displayWidth="spriteStyle.displayWidth" :fps="16" />
|
|
<div class="welcome-text text-[14px] font-medium font-family-misans-vf text-[#171717] leading-[24px]">
|
|
{{ welcomeContent }}
|
|
</div>
|
|
</div>
|
|
|
|
<ChatMoreTips :guideWords="guideWords" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { defineProps, computed, getCurrentInstance, defineExpose } from "vue";
|
|
import { getCurrentConfig } from "@/constants/base";
|
|
import ChatMoreTips from "../ChatMoreTips/index.vue";
|
|
import SpriteAnimator from "@/components/SpriteAnimator/index.vue";
|
|
|
|
const props = defineProps({
|
|
mainPageDataModel: {
|
|
type: Object,
|
|
default: () => {
|
|
return {
|
|
initPageImages: {
|
|
backgroundImageUrl: "",
|
|
logoImageUrl: "",
|
|
welcomeImageUrl: "",
|
|
},
|
|
welcomeContent:
|
|
"查信息、预定下单、探索玩法、呼叫服务、我通通可以满足，快试试问我问题吧!",
|
|
guideWords: [
|
|
"定温泉票",
|
|
"定酒店",
|
|
"优惠套餐",
|
|
"亲子玩法",
|
|
"了解交通",
|
|
"看看酒店",
|
|
"看看美食",
|
|
],
|
|
};
|
|
},
|
|
},
|
|
});
|
|
|
|
const initPageImages = computed(() => {
|
|
return props.mainPageDataModel?.initPageImages || {};
|
|
});
|
|
|
|
const spriteStyle = computed(() => {
|
|
const images = initPageImages.value;
|
|
return {
|
|
ipLargeImage: images.ipLargeImage,
|
|
frameWidth: images.ipLargeImageWidth,
|
|
frameHeight: images.ipLargeImageHeight,
|
|
totalFrames: images.ipLargeTotalFrames,
|
|
columns: images.ipLargeColumns,
|
|
displayWidth: 158,
|
|
};
|
|
});
|
|
|
|
const welcomeContent = computed(() => props.mainPageDataModel.welcomeContent);
|
|
const guideWords = computed(() => props.mainPageDataModel.guideWords);
|
|
|
|
// Welcome 可视状态与高度
|
|
const instance = getCurrentInstance();
|
|
|
|
// 测量欢迎区域高度
|
|
const measureWelcomeHeight = (callback) => {
|
|
uni
|
|
.createSelectorQuery()
|
|
.in(instance)
|
|
.select(".welcome-content")
|
|
.boundingClientRect((res) => {
|
|
if (res && res.height) {
|
|
callback(res);
|
|
}
|
|
})
|
|
.exec();
|
|
};
|
|
|
|
defineExpose({ measureWelcomeHeight });
|
|
</script>
|