134 lines
2.8 KiB
Vue
134 lines
2.8 KiB
Vue
<template>
|
||
<view class="news-detail-page">
|
||
<!-- 单条资讯卡片 -->
|
||
<view class="news-card">
|
||
<!-- 标题 + 右上角未读红点 -->
|
||
<view class="news-header">
|
||
<text class="news-title">以实干担当不断开创中国特色大国外交实干担当不断开创中国特色大国外交</text>
|
||
<view class="unread-dot"></view>
|
||
</view>
|
||
|
||
<!-- 发布人 + 时间 -->
|
||
<view class="news-meta">
|
||
<text class="author">张三</text>
|
||
<text class="publish-time">2026-07-01</text>
|
||
</view>
|
||
|
||
<!-- 内容区域：浅背景卡片 -->
|
||
<view class="news-content">
|
||
<text class="content-text">
|
||
学习贯彻习近平新时代中国特色社会主义思想主题教育开展以来，外交外事战线认真学习贯彻习近平总书记重要讲话精神和党中央部署要求，全面准确把...
|
||
</text>
|
||
</view>
|
||
|
||
<!-- 详情按钮 -->
|
||
<view class="detail-btn" @click="goToDetail">
|
||
<text class="detail-text">详情</text>
|
||
<uni-icons type="right" size="14" color="#4D5DFA"></uni-icons>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref } from 'vue'
|
||
|
||
// 跳转到详情页方法
|
||
const goToDetail = () => {
|
||
uni.navigateTo({
|
||
url: '/pageSubPack/notice-list/noticeListDetails'
|
||
})
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
// 页面基础样式
|
||
.news-detail-page {
|
||
padding: 20rpx;
|
||
background-color: #f9f9f9;
|
||
min-height: 100vh;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
// 资讯卡片：白色背景 + 圆角
|
||
.news-card {
|
||
background-color: #ffffff;
|
||
border-radius: 12rpx;
|
||
padding: 30rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
// 标题行：标题 + 红点
|
||
.news-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-start;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
// 资讯标题
|
||
.news-title {
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
color: #333333;
|
||
line-height: 1.4;
|
||
flex: 1;
|
||
margin-right: 10rpx;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
// 右上角未读红点
|
||
.unread-dot {
|
||
width: 16rpx;
|
||
height: 16rpx;
|
||
background-color: #E34D59;
|
||
border-radius: 50%;
|
||
margin-top: 6rpx;
|
||
}
|
||
|
||
// 发布人+时间行
|
||
.news-meta {
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.author {
|
||
font-size: 26rpx;
|
||
color: #666666;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.publish-time {
|
||
font-size: 26rpx;
|
||
color: #999999;
|
||
}
|
||
|
||
// 内容区域：浅背景卡片
|
||
.news-content {
|
||
background-color: #f5f5f5;
|
||
border-radius: 8rpx;
|
||
padding: 20rpx;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.content-text {
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
// 详情按钮：蓝色文字 + 右箭头
|
||
.detail-btn {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.detail-text {
|
||
font-size: 28rpx;
|
||
color: #4D5DFA;
|
||
margin-right: 8rpx;
|
||
}
|
||
</style>
|