01fdf80a72
Remove the deprecated src/static/scss/line-height.scss custom utility file, and update all component template instances of line-height-* classes to use the equivalent tailwind leading-[xxpx] utilities. This standardizes line height styling across the codebase by using native tailwind classes instead of custom SCSS helpers.
93 lines
2.6 KiB
Vue
93 lines
2.6 KiB
Vue
v
|
|
<template>
|
|
<view class="welcome-content p-[12px]">
|
|
<view class="wrap rounded-20">
|
|
<view class="flex flex-items-center flex-justify-between pl-[12px] pr-[12px]">
|
|
<SpriteAnimator :src="spriteStyle.ipLargeImage" :frameWidth="spriteStyle.frameWidth"
|
|
:frameHeight="spriteStyle.frameHeight" :totalFrames="spriteStyle.totalFrames" :columns="spriteStyle.columns"
|
|
:displayWidth="spriteStyle.displayWidth" :fps="16" />
|
|
<view class="welcome-text font-size-14 font-500 font-family-misans-vf color-171717 leading-[24px]">
|
|
{{ welcomeContent }}
|
|
</view>
|
|
</view>
|
|
|
|
<ChatMoreTips :guideWords="guideWords" />
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { defineProps, computed, getCurrentInstance, defineExpose } from "vue";
|
|
import { getCurrentConfig } from "@/constant/base";
|
|
import ChatMoreTips from "../ChatMoreTips/index.vue";
|
|
import SpriteAnimator from "@/components/Sprite/SpriteAnimator.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>
|
|
|
|
<style lang="scss" scoped>
|
|
@import "./styles/index.scss";
|
|
</style>
|