通知公告/看房预约/合同签约/退租申请页面样式改版

This commit is contained in:
2025-12-26 17:39:00 +08:00
parent dac2ae956d
commit fb8a6cc27e
6 changed files with 534 additions and 457 deletions

View File

@@ -5,19 +5,17 @@
<scroll-view scroll-y style="height: 100%;width: 100%;">
<view class="page-box">
<view class="tabSwiper" v-for="(item, index) in dataList" :key="item.id" @click="clickContent(item)">
<view class="top">
<view class="left">
<u-icon name="bell" :size="35" color="#2979ff"></u-icon>
<u-icon name="bell" :size="35" color="#2979ff" class="bell-icon"></u-icon>
<view class="content-wrapper">
<view class="top">
<view class="title">{{ item.title }}</view>
<u-icon name="arrow-right" color="rgb(203,203,203)" :size="26"></u-icon>
<view class="date">{{ item.date }}</view>
</view>
<view class="right">{{ item.date }}</view>
</view>
<view class="item">
<view class="content">
<view class="title u-line-2">{{ item.content }}</view>
<view class="item">
<view class="content u-line-2">{{ item.content }}</view>
</view>
</view>
<u-icon name="arrow-right" color="rgb(203,203,203)" :size="26" class="arrow-icon"></u-icon>
</view>
</view>
</scroll-view>
@@ -28,106 +26,145 @@
<script>
export default {
data() {
// 静态公告数据
const staticNoticeList = [
{
id: 1,
title: '关于开展2025年度招商工作的通知',
date: '2025-01-15',
content: '为进一步推进我市招商引资工作优化营商环境现就开展2025年度招商工作有关事项通知如下一、工作目标二、重点领域三、保障措施...'
},
{
id: 2,
title: '2024年度招商成果通报',
date: '2025-01-10',
content: '2024年我市招商引资工作取得显著成效共引进各类项目120个总投资达500亿元现将具体成果通报如下一、总体情况二、主要特点三、下一步计划...'
},
{
id: 3,
title: '关于举办2025年春季招商推介会的通知',
date: '2025-01-05',
content: '为搭建投资合作平台展示我市投资环境和发展机遇定于2025年3月15日举办春季招商推介会诚邀各界企业家参会...'
},
{
id: 4,
title: '关于印发《市招商引资优惠政策实施细则》的通知',
date: '2024-12-28',
content: '为进一步规范招商引资优惠政策的实施,经市政府同意,现将《市招商引资优惠政策实施细则》印发给你们,请认真贯彻执行...'
},
{
id: 5,
title: '关于认定2024年度市重点招商引资项目的通知',
date: '2024-12-20',
content: '根据《市重点招商引资项目认定管理办法》经评审认定以下30个项目为2024年度市重点招商引资项目现予以公布...'
}
];
return {
pageNum:1,
pageSize:50,
dataList: [],
pageNum: 1,
pageSize: 50,
dataList: staticNoticeList,
};
},
onLoad() {
this.getNoticecList();
// 静态数据已在data中初始化无需调用接口
// this.getNoticecList();
},
methods: {
clickContent(item){
if(item.id){
clickContent(item) {
if (item.id) {
this.$u.route('/pages/notice/noticeDetail', {
id: item.id
});
}
},
getNoticecList(){
let url = "/notice/findNoticeList";
this.$u.get(url,{
pageNum:this.pageNum,
pageSize:this.pageSize,
orderByColumn:'create_time',
isAsc:'desc'
}).then(obj => {
let data = obj.data.result
data.filter(item=>{
this.dataList.push(
{
id:item.noticeId,
title: item.noticeTitle,
date:item.createTime,
content: item.reMark,
}
)
})
});
getNoticecList() {
// 静态数据已在data中初始化无需调用接口
// 保留此方法以保持兼容性
return;
}
}
};
</script>
<style lang="scss" scoped>
.tabSwiper {
width: 710rpx;
width: 95%;
background-color: #ffffff;
margin: 20rpx auto;
border-radius: 20rpx;
margin: 16rpx auto;
border-radius: 12rpx;
box-sizing: border-box;
padding: 20rpx;
font-size: 28rpx;
padding: 32rpx;
box-shadow: 0 1rpx 8rpx rgba(0, 0, 0, 0.04);
transition: all 0.2s ease;
border: 1rpx solid #f0f0f0;
display: flex;
align-items: center;
position: relative;
&:hover {
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
}
.bell-icon {
margin-right: 32rpx;
flex-shrink: 0;
margin-top: 4rpx;
}
.content-wrapper {
flex: 1;
min-width: 0;
}
.arrow-icon {
margin-left: 24rpx;
flex-shrink: 0;
margin-top: 16rpx;
}
.top {
display: flex;
justify-content: space-between;
.left {
display: flex;
align-items: center;
.title {
margin: 0 10rpx;
font-size: 32rpx;
font-weight: bold;
}
align-items: flex-start;
margin-top: 20rpx;
.title {
font-size: 28rpx;
font-weight: 600;
color: #1a1a1a;
line-height: 38rpx;
flex: 1;
}
.right {
color: $u-tips-color;
.date {
color: #999999;
font-size: 26rpx;
flex-shrink: 0;
position: absolute;
right: 30rpx;
top: 15rpx;
}
}
.item {
display: flex;
margin: 20rpx 0 0;
.left {
margin-right: 20rpx;
image {
width: 200rpx;
height: 200rpx;
border-radius: 10rpx;
}
}
.content {
.title {
font-size: 28rpx;
line-height: 50rpx;
}
}
.right {
margin-left: 10rpx;
padding-top: 20rpx;
text-align: right;
font-size: 26rpx;
line-height: 36rpx;
color: #666666;
letter-spacing: 0.5rpx;
margin-top: 10rpx;
}
}
}
.wrap {
display: flex;
flex-direction: column;
height: calc(100vh - var(--window-top));
width: 100%;
background-color: #fafafa;
}
.swiper-box {
flex: 1;
}
.swiper-item {
height: 100%;
.page-box {
padding: 16rpx 0 40rpx 0;
}
</style>