assess-app/page_subpack/message/message.vue

<template>
	<view class="total-page page-box">
		<Nav :title="'消息'" :genre="1" :fixedHeight="50"></Nav>
		<view class="task-tabs" :style="{top:`${$tools.topHeight()}px`}">
			<z-tabs ref="tabs" :list="tabsList" :active-style="{color:'#10B261',fontWeight:'bold',fontSize:'30rpx'}"
				:bar-style="{background:'#10B261'}" :inactive-style="{fontWeight:'bold',fontSize:'28rpx'}"
				:current="current" :bar-animate-mode="'worm'" @change="tabsChange" />
		</view>
		<view class="task-body m-20">
			<view class="row-c page-box-bg-fff m-b20 r-30 p-30 box-shadow-197" v-for="(item,index) in 30" :key="index">
				<image class="wh-80" :src="getLeftImg(index)" mode=""></image>
				<view class="flex m-l20">
					<view class="row-justify-sb center flex">
						<text class="text-color-333 sys-weight-400 size-30">您有新的可执行任务</text>
						<image class="wh-30 m-l16" style="margin-top: 4rpx;" src="/static/img/task/task-phone.png"
							mode=""></image>
					</view>
					<view class="row-justify-sb center m-t10">
						<text class="size-26 text-color-666">垫资还款</text>
						<text class="size-24 text-color-999">2024/12/24用款</text>
					</view>
				</view>
			</view>
			<view class="content-row sys-list-background-color"></view>
		</view>
	</view>
</template>
<script>
	// 任务列表
	import TaskItem from "@/common/task/task-item.vue";

	export default {
		components: {
			TaskItem
		},
		data() {
			return {
				current: 0,
				tabsList: [{
					name: '全部(12)',
					// 可以禁用某个item
					is_dot: true,
					dot_color: 'red',
					disabled: false
				}, {
					name: '未读(15)',
					// 可以禁用某个item
					is_dot: true,
					dot_color: 'yellow',
					disabled: false
				}, {
					name: '已读',
					// 可以禁用某个item
					is_dot: false,
					dot_color: '',
					disabled: false
				}],
				leftImg: ['task-house', 'task-business', 'task-repayment'],
				iconList: ['task-audit', 'task-do', 'task-stay']
			}
		},
		watch: {


		},
		methods: {
			tabsChange(index) {
				this.current = index;
			},
			getLeftImg(index) {
				return `/static/img/task/${this.leftImg[0]}.png`
			},
		},
	}
</script>
<style lang="scss" scoped>

</style>