cd307da2ff
Also remove the now-unused .text-color CSS rule, update the direct text color in the HomeWelcome component from #0B5C2D to #181B25, and replace all existing uses of the .text-color class with direct inline text-[#181B25] utility classes in the NoticeMessage component.
135 lines
3.2 KiB
Vue
135 lines
3.2 KiB
Vue
<template>
|
||
<view v-if="hasBannerList">
|
||
<swiper @change="onSwiperChange" class="swiper" circular :autoplay="autoplay" :interval="interval"
|
||
:duration="duration" :indicator-dots="false" :vertical="true">
|
||
<swiper-item v-for="item in bannerList" :key="item.entityName">
|
||
<view class="swiper-item" @click="clickItem(item)">
|
||
<text class="text-[#181B25] text-[12px] font-[600]">
|
||
{{ item.entityName }}
|
||
</text>
|
||
<view class="notice-footer">
|
||
<text class="text-[#181B25] text-[10px] font-[500]">
|
||
发布时间：{{ item.effectiveStartTime }}
|
||
</text>
|
||
<text class="text-[#181B25] text-[10px] font-[500] underline-text">
|
||
详情
|
||
</text>
|
||
</view>
|
||
</view>
|
||
</swiper-item>
|
||
</swiper>
|
||
|
||
</view>
|
||
|
||
<view v-else-if="props.tipsMessage">
|
||
<view class="noMessage">
|
||
<text class="noMessage-text text-[#181B25] text-[12px] font-[600]">
|
||
{{ props.tipsMessage }}
|
||
</text>
|
||
</view>
|
||
</view>
|
||
|
||
</template>
|
||
|
||
<script setup>
|
||
import { computed, onMounted, ref } from "vue";
|
||
import { getTimeNoticeList } from "@/request/api/MainPageDataApi";
|
||
import { NOTICE_EVENT_LOGIN_SUCCESS } from "@/constant/constant";
|
||
|
||
const props = defineProps({
|
||
tipsMessage: {
|
||
type: String,
|
||
default: "随时吩咐，懂你的旅游搭子",
|
||
},
|
||
});
|
||
|
||
const autoplay = ref(true);
|
||
const interval = ref(7000);
|
||
const duration = ref(500);
|
||
|
||
const currentIndex = ref(0);
|
||
const bannerList = ref([]);
|
||
const hasBannerList = computed(() => Array.isArray(bannerList.value) && bannerList.value.length > 0);
|
||
|
||
const onSwiperChange = (e) => {
|
||
currentIndex.value = e.detail.current;
|
||
};
|
||
|
||
const getTimeNoticeListData = async () => {
|
||
const res = await getTimeNoticeList();
|
||
if (res && res.code === 0) {
|
||
bannerList.value = Array.isArray(res.data) ? res.data : [];
|
||
}
|
||
}
|
||
|
||
onMounted(() => {
|
||
getTimeNoticeListData();
|
||
uni.$on(NOTICE_EVENT_LOGIN_SUCCESS, () => {
|
||
getTimeNoticeListData();
|
||
});
|
||
});
|
||
|
||
const clickItem = (item) => {
|
||
uni.navigateTo({
|
||
url: `/pages/ChatMain/NoticeMessage/detail?noticeData=${encodeURIComponent(JSON.stringify(item))}`
|
||
});
|
||
}
|
||
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.swiper {
|
||
height: 48px;
|
||
margin-top: 8px;
|
||
}
|
||
|
||
.swiper-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
align-items: stretch;
|
||
height: 48px;
|
||
padding: 7px 8px;
|
||
box-sizing: border-box;
|
||
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
|
||
border-radius: 8px;
|
||
border: 1px solid rgba(255, 255, 255, 0.9);
|
||
background: rgba(255, 255, 255, 0.96);
|
||
}
|
||
|
||
.notice-footer {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
min-width: 0;
|
||
}
|
||
|
||
.underline-text {
|
||
text-decoration: underline;
|
||
text-decoration-color: #35F37F;
|
||
color: #99A0AE;
|
||
}
|
||
|
||
.noMessage {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-top: 8px;
|
||
height: 48px;
|
||
padding: 7px 8px;
|
||
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
|
||
border-radius: 8px;
|
||
border: 1px solid rgba(255, 255, 255, 0.9);
|
||
background: rgba(255, 255, 255, 0.96);
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.noMessage-text {
|
||
color: #0B5C2D;
|
||
line-height: 16px;
|
||
white-space: normal;
|
||
overflow-wrap: break-word;
|
||
word-break: break-all;
|
||
}
|
||
</style>
|