61 lines
1.5 KiB
Vue
61 lines
1.5 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不在可视区：显示并添加动画；在可视区：隐藏 -->
|
||
<view
|
||
v-show="show"
|
||
:class="['w-32 h-32', { 'image-animated': show }]"
|
||
:style="getStyle"
|
||
></view>
|
||
<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";
|
||
|
||
const props = defineProps({
|
||
mainPageDataModel: {
|
||
type: Object,
|
||
default: () => ({}),
|
||
},
|
||
});
|
||
|
||
const show = ref(false);
|
||
const config = getCurrentConfig();
|
||
const getStyle = computed(() => {
|
||
return {
|
||
"--ipSmallImageStep": config.ipSmallImageStep,
|
||
"--ipSmallImageHeight": config.ipSmallImageHeight,
|
||
"--ipSmallTime": config.ipSmallTime,
|
||
backgroundImage: `url(${config.ipSmallImage})`,
|
||
backgroundRepeat: "no-repeat",
|
||
backgroundSize: "32px auto",
|
||
backgroundPosition: "0 0",
|
||
};
|
||
});
|
||
|
||
const showDrawer = () => uni.$emit("SHOW_DRAWER");
|
||
|
||
defineExpose({ show });
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
@import "./styles/index.scss";
|
||
</style>
|