feat: 改变了欢迎ip 的动态配置
This commit is contained in:
@@ -5,18 +5,11 @@
|
|||||||
<!-- 隐藏 -->
|
<!-- 隐藏 -->
|
||||||
<view class="flex-full h-full flex flex-items-center flex-justify-center">
|
<view class="flex-full h-full flex flex-items-center flex-justify-center">
|
||||||
<!-- ChatTopWelcome不在可视区:显示并添加动画;在可视区:隐藏 -->
|
<!-- ChatTopWelcome不在可视区:显示并添加动画;在可视区:隐藏 -->
|
||||||
<view
|
<view v-show="show" :class="['w-32 h-32', { 'image-animated': show }]" :style="getStyle"></view>
|
||||||
v-show="show"
|
<text v-show="show" :class="[
|
||||||
: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',
|
'font-size-14 font-500 color-171717 ml-10',
|
||||||
{ 'text-animated': show },
|
{ 'text-animated': show },
|
||||||
]"
|
]">
|
||||||
>
|
|
||||||
{{ config.name }}
|
{{ config.name }}
|
||||||
</text>
|
</text>
|
||||||
</view>
|
</view>
|
||||||
@@ -32,22 +25,31 @@ import { getCurrentConfig } from "@/constant/base";
|
|||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
mainPageDataModel: {
|
mainPageDataModel: {
|
||||||
type: Object,
|
type: Object,
|
||||||
default: () => ({}),
|
default: () => ({
|
||||||
|
initPageImages: {},
|
||||||
|
}),
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const initPageImages = computed(() => {
|
||||||
|
return props.mainPageDataModel?.initPageImages || {};
|
||||||
|
});
|
||||||
|
|
||||||
const show = ref(false);
|
const show = ref(false);
|
||||||
const config = getCurrentConfig();
|
const config = getCurrentConfig();
|
||||||
const getStyle = computed(() => {
|
const getStyle = computed(() => {
|
||||||
return {
|
const images = initPageImages.value;
|
||||||
"--ipSmallImageStep": config.ipSmallImageStep,
|
const style = {
|
||||||
"--ipSmallImageHeight": config.ipSmallImageHeight,
|
"--ipSmallImageStep": images.ipSmallImageStep ?? config.ipSmallImageStep,
|
||||||
"--ipSmallTime": config.ipSmallTime,
|
"--ipSmallImageHeight": images.ipSmallImageHeight ?? config.ipSmallImageHeight,
|
||||||
backgroundImage: `url(${config.ipSmallImage})`,
|
"--ipSmallTime": images.ipSmallTime ?? config.ipSmallTime,
|
||||||
|
backgroundImage: `url(${images.ipSmallImage ?? config.ipSmallImage})`,
|
||||||
backgroundRepeat: "no-repeat",
|
backgroundRepeat: "no-repeat",
|
||||||
backgroundSize: "32px auto",
|
backgroundSize: "32px auto",
|
||||||
backgroundPosition: "0 0",
|
backgroundPosition: "0 0",
|
||||||
};
|
};
|
||||||
|
console.log("top nav bar image style:", style);
|
||||||
|
return style;
|
||||||
});
|
});
|
||||||
|
|
||||||
const showDrawer = () => uni.$emit("SHOW_DRAWER");
|
const showDrawer = () => uni.$emit("SHOW_DRAWER");
|
||||||
|
|||||||
@@ -2,13 +2,9 @@ v
|
|||||||
<template>
|
<template>
|
||||||
<view class="welcome-content border-box p-12">
|
<view class="welcome-content border-box p-12">
|
||||||
<view class="wrap rounded-20">
|
<view class="wrap rounded-20">
|
||||||
<view
|
<view class="flex flex-items-center flex-justify-between border-box pl-12 pr-12">
|
||||||
class="flex flex-items-center flex-justify-between border-box pl-12 pr-12"
|
|
||||||
>
|
|
||||||
<view class="ip" :style="getStyle"></view>
|
<view class="ip" :style="getStyle"></view>
|
||||||
<view
|
<view class="welcome-text font-size-14 font-500 font-family-misans-vf color-171717 line-height-24">
|
||||||
class="welcome-text font-size-14 font-500 font-family-misans-vf color-171717 line-height-24"
|
|
||||||
>
|
|
||||||
{{ welcomeContent }}
|
{{ welcomeContent }}
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@@ -49,19 +45,27 @@ const props = defineProps({
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
const getStyle = computed(() => {
|
const initPageImages = computed(() => {
|
||||||
const config = getCurrentConfig();
|
return props.mainPageDataModel?.initPageImages || {};
|
||||||
|
});
|
||||||
|
|
||||||
return {
|
const config = getCurrentConfig();
|
||||||
"--ipLargeImageStep": config.ipLargeImageStep,
|
|
||||||
"--ipLargeImageHeight": config.ipLargeImageHeight,
|
const getStyle = computed(() => {
|
||||||
"--ipLargeTime": config.ipLargeTime,
|
const images = initPageImages.value;
|
||||||
backgroundImage: `url(${config.ipLargeImage})`,
|
const style = {
|
||||||
|
"--ipLargeImageStep": images.ipLargeImageStep ?? config.ipLargeImageStep,
|
||||||
|
"--ipLargeImageHeight": images.ipLargeImageHeight ?? config.ipLargeImageHeight,
|
||||||
|
"--ipLargeTime": images.ipLargeTime ?? config.ipLargeTime,
|
||||||
|
backgroundImage: `url(${images.ipLargeImage || config.ipLargeImage})`,
|
||||||
backgroundRepeat: "no-repeat",
|
backgroundRepeat: "no-repeat",
|
||||||
backgroundSize: "158px auto",
|
backgroundSize: "158px auto",
|
||||||
backgroundPosition: "0 0",
|
backgroundPosition: "0 0",
|
||||||
};
|
};
|
||||||
|
console.log("welcome image style:", style);
|
||||||
|
return style;
|
||||||
});
|
});
|
||||||
|
|
||||||
const welcomeContent = computed(() => props.mainPageDataModel.welcomeContent);
|
const welcomeContent = computed(() => props.mainPageDataModel.welcomeContent);
|
||||||
const guideWords = computed(() => props.mainPageDataModel.guideWords);
|
const guideWords = computed(() => props.mainPageDataModel.guideWords);
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user