106 lines
2.1 KiB
Vue
106 lines
2.1 KiB
Vue
|
<template>
|
||
|
|
<view class="system-message">
|
||
|
|
<u-tabs :list="menuList" bg-color="#F0F3FF" :is-scroll="false" v-model="currentMenu"
|
||
|
|
@change="handleChangeMenu"></u-tabs>
|
||
|
|
|
||
|
|
<view class="message-list">
|
||
|
|
<view class="message-item" v-for="item in dataList">
|
||
|
|
<view class="typeAndDate">
|
||
|
|
<view> {{item.type}} </view>
|
||
|
|
<view> {{item.createDate}} </view>
|
||
|
|
</view>
|
||
|
|
<view class="u-m-t-20">
|
||
|
|
{{item.programName}}
|
||
|
|
</view>
|
||
|
|
<view class="u-m-t-20">
|
||
|
|
<span class="u-m-r-10" style="color: #666;">项目公司</span>{{item.programCom}}
|
||
|
|
</view>
|
||
|
|
<view class="u-m-t-20 u-m-b-20">
|
||
|
|
<span class="u-m-r-10" style="color: #666;">进度信息</span>{{item.process}}
|
||
|
|
</view>
|
||
|
|
<view class="btn">
|
||
|
|
查看详情
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts" setup>
|
||
|
|
import { onMounted, ref } from 'vue';
|
||
|
|
|
||
|
|
const menuList = [{
|
||
|
|
name: '提醒'
|
||
|
|
}, {
|
||
|
|
name: '物流'
|
||
|
|
}, {
|
||
|
|
name: '订单',
|
||
|
|
}, {
|
||
|
|
name: '优惠',
|
||
|
|
}, {
|
||
|
|
name: '其他',
|
||
|
|
}]
|
||
|
|
const currentMenu = ref(0)
|
||
|
|
const handleChangeMenu = (index) => {
|
||
|
|
console.log("handleChangeMenu");
|
||
|
|
}
|
||
|
|
|
||
|
|
const dataList = ref([])
|
||
|
|
|
||
|
|
const mockData = () => {
|
||
|
|
for (var i = 0; i < 20; i++) {
|
||
|
|
dataList.value.push({
|
||
|
|
type: "项目通知",
|
||
|
|
programName: "测试" + (i + 1),
|
||
|
|
programCom: "项目公司" + (i + 1),
|
||
|
|
process: "项目信息",
|
||
|
|
createDate: "2025-09-" + (i + 1)
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
onMounted(() => {
|
||
|
|
mockData()
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.system-message {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
background-color: #F0F3FF;
|
||
|
|
|
||
|
|
.message-list {
|
||
|
|
margin-top: 20rpx;
|
||
|
|
padding: 0 40rpx 20rpx;
|
||
|
|
|
||
|
|
.message-item {
|
||
|
|
border-radius: 20rpx;
|
||
|
|
padding: 20rpx;
|
||
|
|
background: #DDE8FF;
|
||
|
|
margin-bottom: 10rpx;
|
||
|
|
|
||
|
|
font-family: Work Sans;
|
||
|
|
font-weight: 400;
|
||
|
|
font-size: 26rpx;
|
||
|
|
leading-trim: NONE;
|
||
|
|
line-height: 100%;
|
||
|
|
letter-spacing: -2%;
|
||
|
|
|
||
|
|
.typeAndDate {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn {
|
||
|
|
display: inline;
|
||
|
|
background: #7B99FF;
|
||
|
|
border-radius: 8rpx;
|
||
|
|
padding: 4rpx 20rpx;
|
||
|
|
color: #002499;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|