65 lines
2.0 KiB
Vue
65 lines
2.0 KiB
Vue
<template>
|
||
<view class="border-box h-44 flex flex-items-center pl-12 pr-12">
|
||
<uni-icons type="bars" size="24" color="#333" @click="showDrawer" />
|
||
|
||
<!-- 隐藏 -->
|
||
<view class="flex-full h-full flex flex-items-center flex-justify-center">
|
||
<!-- ChatTopWelcome不在可视区：显示并添加动画；在可视区：隐藏 -->
|
||
<SpriteAnimator v-show="show" class="image-animated" :src="spriteStyle.ipSmallImage"
|
||
:frameWidth="spriteStyle.frameWidth" :frameHeight="spriteStyle.frameHeight"
|
||
:totalFrames="spriteStyle.totalFrames" :columns="spriteStyle.columns" :displayWidth="spriteStyle.displayWidth"
|
||
:fps="16" />
|
||
<text v-show="show" :class="[
|
||
'font-size-14 font-500 color-171717 ml-10',
|
||
{ 'text-animated': show },
|
||
]">
|
||
{{ config.name }}
|
||
</text>
|
||
</view>
|
||
|
||
<view class="w-24 h-24"></view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, defineProps, computed, defineExpose } from "vue";
|
||
import { getCurrentConfig } from "@/constant/base";
|
||
import SpriteAnimator from "@/components/Sprite/SpriteAnimator.vue";
|
||
|
||
const props = defineProps({
|
||
mainPageDataModel: {
|
||
type: Object,
|
||
default: () => ({
|
||
initPageImages: {},
|
||
}),
|
||
},
|
||
});
|
||
|
||
const initPageImages = computed(() => {
|
||
return props.mainPageDataModel?.initPageImages || {};
|
||
});
|
||
|
||
const show = ref(false);
|
||
const config = getCurrentConfig();
|
||
|
||
const spriteStyle = computed(() => {
|
||
const images = initPageImages.value;
|
||
return {
|
||
ipSmallImage: images.ipSmallImage ?? config.ipSmallImage,
|
||
frameWidth: images.ipSmallImageWidth ?? config.ipSmallImageWidth,
|
||
frameHeight: images.ipSmallImageHeight ?? config.ipSmallImageHeight,
|
||
totalFrames: images.ipSmallTotalFrames ?? config.ipSmallTotalFrames,
|
||
columns: images.ipSmallColumns ?? config.ipSmallColumns,
|
||
displayWidth: 32,
|
||
};
|
||
});
|
||
|
||
const showDrawer = () => uni.$emit("SHOW_DRAWER");
|
||
|
||
defineExpose({ show });
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
@import "./styles/index.scss";
|
||
</style>
|