Commit 20bec89e by 吴春元

修改细节

parent 99469e05
...@@ -67,7 +67,7 @@ ...@@ -67,7 +67,7 @@
// 字体 // 字体
fontSize: { fontSize: {
type: String, type: String,
default: '14px' default: '16px'
}, },
// 是否滚动,默认是,否则是不滚动,按个数等分宽度 // 是否滚动,默认是,否则是不滚动,按个数等分宽度
scroll: { scroll: {
...@@ -248,6 +248,7 @@ ...@@ -248,6 +248,7 @@
.scroll-item { .scroll-item {
position: relative; position: relative;
padding: 0 10px; padding: 0 10px;
margin-left: 10px;
display: inline-block; display: inline-block;
text-align: center; text-align: center;
color: rgba(255, 255, 255, 0.7); color: rgba(255, 255, 255, 0.7);
......
...@@ -2,13 +2,20 @@ ...@@ -2,13 +2,20 @@
<view class="app-container"> <view class="app-container">
<!-- 顶部轮播图 --> <!-- 顶部轮播图 -->
<view class="banner-container"> <view class="banner-container">
<view class="banner-title"> <!-- <view class="banner-title">
<image :src="logoUrl" mode="aspectFit" class="logo-image" /> <image :src="logoUrl" mode="aspectFit" class="logo-image" />
<text class="title-text">太原市互联网应急指挥和举报中心</text> <text class="title-text">太原市互联网应急指挥和举报中心</text>
</view> </view> -->
<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="500"> <!-- <view class="banner-title1">
<text class="title-text">太原市互联网应急指挥和举报中心</text>
</view> -->
<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="500"
@change="onSlideChange">
<swiper-item v-for="(banner, index) in slides" :key="index" @click="goToDetails(banner)"> <swiper-item v-for="(banner, index) in slides" :key="index" @click="goToDetails(banner)">
<image :src="banner.images" :alt="banner.contentTitle" mode="aspectFill" class="banner-image" /> <image :src="banner.images" :alt="banner.contentTitle" mode="aspectFill" class="banner-image" />
<view class="banner-title1">
<text class="title-text">{{banner.contentTitle}}</text>
</view>
</swiper-item> </swiper-item>
</swiper> </swiper>
</view> </view>
...@@ -32,6 +39,7 @@ ...@@ -32,6 +39,7 @@
<image :src="news.images" :alt="news.contentTitle" mode="aspectFill" class="news-image" /> <image :src="news.images" :alt="news.contentTitle" mode="aspectFill" class="news-image" />
<view class="news-content"> <view class="news-content">
<text class="news-title">{{ news.contentTitle }}</text> <text class="news-title">{{ news.contentTitle }}</text>
<text class="news-title1">{{ news.contentDescription }}</text>
<text class="news-date">{{ news.contentDatetime }}</text> <text class="news-date">{{ news.contentDatetime }}</text>
</view> </view>
</view> </view>
...@@ -45,9 +53,11 @@ ...@@ -45,9 +53,11 @@
</view> </view>
<view class="news-list"> <view class="news-list">
<view v-for="(news, index) in sxNews" :key="index" class="news-card" @click="goToDetails(news)"> <view v-for="(news, index) in sxNews" :key="index" class="news-card" @click="goToDetails(news)">
<image :src="news.images" :alt="news.contentTitle" mode="aspectFill" class="news-image" /> <image v-if="news.images" :src="news.images" :alt="news.contentTitle" mode="aspectFill"
class="news-image" />
<view class="news-content"> <view class="news-content">
<text class="news-title">{{ news.contentTitle }}</text> <text class="news-title">{{ news.contentTitle }}</text>
<text class="news-title1">{{ news.contentDescription }}</text>
<text class="news-date">{{ news.contentDatetime }}</text> <text class="news-date">{{ news.contentDatetime }}</text>
</view> </view>
</view> </view>
...@@ -64,6 +74,7 @@ ...@@ -64,6 +74,7 @@
<image :src="news.images" :alt="news.contentTitle" mode="aspectFill" class="news-image" /> <image :src="news.images" :alt="news.contentTitle" mode="aspectFill" class="news-image" />
<view class="news-content"> <view class="news-content">
<text class="news-title">{{ news.contentTitle }}</text> <text class="news-title">{{ news.contentTitle }}</text>
<text class="news-title1">{{ news.contentDescription }}</text>
<text class="news-date">{{ news.contentDatetime }}</text> <text class="news-date">{{ news.contentDatetime }}</text>
</view> </view>
</view> </view>
...@@ -79,6 +90,11 @@ ...@@ -79,6 +90,11 @@
const rdNews = ref([]); const rdNews = ref([]);
const sxNews = ref([]); const sxNews = ref([]);
const tyNews = ref([]); const tyNews = ref([]);
const bannerTitle = ref();
const onSlideChange = (value : any) => {
console.log(value);
}
getLbtList(5, 1); getLbtList(5, 1);
...@@ -186,7 +202,7 @@ ...@@ -186,7 +202,7 @@
//详情页面 //详情页面
function goToDetails(item : any) { function goToDetails(item : any) {
if (item.contentOutLink) { if (item.contentOutLink) {
uni.navigateTo({ uni.navigateTo({
url: '/pages/web/index?webUrl=' + item.contentOutLink, url: '/pages/web/index?webUrl=' + item.contentOutLink,
}); });
...@@ -247,6 +263,20 @@ ...@@ -247,6 +263,20 @@
border-radius: 30rpx; border-radius: 30rpx;
} }
.banner-title1 {
max-width: 80%;
position: absolute;
left: 12rpx;
bottom: 0;
margin-bottom: 10rpx;
z-index: 10;
display: flex;
align-items: center;
background-color: rgba(0, 0, 0, 0.5);
padding: 5rpx 25rpx;
border-radius: 30rpx;
}
.logo-image { .logo-image {
width: 40rpx; width: 40rpx;
height: 40rpx; height: 40rpx;
...@@ -255,7 +285,14 @@ ...@@ -255,7 +285,14 @@
.title-text { .title-text {
color: #ffffff; color: #ffffff;
font-size: 14px; font-size: 16px;
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
word-wrap: break-word;
white-space: normal !important;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
} }
.swiper { .swiper {
...@@ -263,6 +300,20 @@ ...@@ -263,6 +300,20 @@
height: 440rpx; height: 440rpx;
} }
.swiper .wx-swiper-dot {
background-color: #999999;
}
.swiper .wx-swiper-dot-active {
background-color: #ffffff;
}
/* 右下角 */
.wx-swiper-dots.wx-swiper-dots-horizontal {
width: 90%;
text-align: right;
}
.banner-image { .banner-image {
width: 100%; width: 100%;
height: 440rpx; height: 440rpx;
...@@ -310,7 +361,7 @@ ...@@ -310,7 +361,7 @@
.news-section { .news-section {
padding: 0 32rpx; padding: 0 32rpx;
margin-top: 32rpx; margin-top: 25rpx;
} }
.section-header { .section-header {
...@@ -321,7 +372,7 @@ ...@@ -321,7 +372,7 @@
} }
.section-title { .section-title {
font-size: 18px; font-size: 20px;
font-weight: 500; font-weight: 500;
} }
...@@ -358,17 +409,28 @@ ...@@ -358,17 +409,28 @@
} }
.news-title { .news-title {
font-size: 16px;
margin-bottom: 10rpx;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
.news-title1 {
font-size: 14px; font-size: 14px;
margin-bottom: 16rpx; color: #999999;
margin-bottom: 10rpx;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 2; -webkit-line-clamp: 1;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
} }
.news-date { .news-date {
font-size: 12px; font-size: 13px;
color: #999999; color: #999999;
} }
......
...@@ -9,6 +9,7 @@ ...@@ -9,6 +9,7 @@
<image v-if="news.image" class="news-image" :src="news.image" mode="aspectFill" /> <image v-if="news.image" class="news-image" :src="news.image" mode="aspectFill" />
<view class="news-info"> <view class="news-info">
<text class="news-title">{{ news.contentTitle }}</text> <text class="news-title">{{ news.contentTitle }}</text>
<text class="news-title1">{{ news.contentDescription }}</text>
<text class="news-date">{{ news.contentDatetime }}</text> <text class="news-date">{{ news.contentDatetime }}</text>
</view> </view>
</view> </view>
...@@ -188,17 +189,29 @@ ...@@ -188,17 +189,29 @@
} }
.news-title { .news-title {
font-size: 14px; font-size: 16px;
color: #333333; color: #333333;
line-height: 1.4; line-height: 1.4;
display: -webkit-box; display: -webkit-box;
margin-bottom: 10rpx;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
overflow: hidden; overflow: hidden;
} }
.news-title1 {
font-size: 14px;
color: #999999;
margin-bottom: 10rpx;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
.news-date { .news-date {
font-size: 12px; font-size: 15px;
color: #999999; color: #999999;
margin-top: 10rpx; margin-top: 10rpx;
} }
......
...@@ -34,6 +34,7 @@ ...@@ -34,6 +34,7 @@
<view class="message-list"> <view class="message-list">
<view v-for="item in hotList" :key="item.id" class="message-item" @click="goToDetails(item.id)"> <view v-for="item in hotList" :key="item.id" class="message-item" @click="goToDetails(item.id)">
<text class="title line-clamp-2">{{ item.title }}</text> <text class="title line-clamp-2">{{ item.title }}</text>
<text class="item-content">{{ item.content }}</text>
<view class="message-info"> <view class="message-info">
<text class="date">{{ item.contentDatetime }}</text> <text class="date">{{ item.contentDatetime }}</text>
<text <text
...@@ -54,7 +55,7 @@ ...@@ -54,7 +55,7 @@
<view class="reply-header"> <view class="reply-header">
<text class="reply-title">{{ item.title }}</text> <text class="reply-title">{{ item.title }}</text>
</view> </view>
<text class="reply-content">{{ item.content }}</text> <text class="item-content">{{ item.content }}</text>
<view class="reply-footer"> <view class="reply-footer">
<text class="reply-date">{{ item.contentDatetime }}</text> <text class="reply-date">{{ item.contentDatetime }}</text>
<text <text
...@@ -197,7 +198,7 @@ ...@@ -197,7 +198,7 @@
border-radius: 12rpx; border-radius: 12rpx;
padding: 8rpx 24rpx; padding: 8rpx 24rpx;
color: #ffffff; color: #ffffff;
font-size: 14px; font-size: 18px;
margin-bottom: 16rpx; margin-bottom: 16rpx;
margin-top: 70rpx; margin-top: 70rpx;
} }
...@@ -212,7 +213,7 @@ ...@@ -212,7 +213,7 @@
.slogan { .slogan {
color: rgba(255, 255, 255, 0.9); color: rgba(255, 255, 255, 0.9);
font-size: 14px; font-size: 16px;
display: block; display: block;
} }
...@@ -234,7 +235,7 @@ ...@@ -234,7 +235,7 @@
flex: 1; flex: 1;
height: 60rpx; height: 60rpx;
padding: 0 16rpx; padding: 0 16rpx;
font-size: 14px; font-size: 16px;
color: #333; color: #333;
} }
...@@ -320,9 +321,21 @@ ...@@ -320,9 +321,21 @@
} }
.title { .title {
font-size: 16px;
margin-bottom: 16rpx;
display: block;
}
.item-content{
font-size: 14px; font-size: 14px;
margin-bottom: 16rpx; margin-bottom: 16rpx;
color: #999999;
display: block; display: block;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
} }
.reply-header { .reply-header {
...@@ -332,7 +345,7 @@ ...@@ -332,7 +345,7 @@
} }
.reply-title { .reply-title {
font-size: 14px; font-size: 16px;
font-weight: 500; font-weight: 500;
flex: 1; flex: 1;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
...@@ -359,7 +372,7 @@ ...@@ -359,7 +372,7 @@
} }
.status-tag { .status-tag {
font-size: 12px; font-size: 14px;
padding: 4rpx 16rpx; padding: 4rpx 16rpx;
border-radius: 32rpx; border-radius: 32rpx;
display: inline-block; display: inline-block;
...@@ -382,7 +395,7 @@ ...@@ -382,7 +395,7 @@
} }
.reply-date { .reply-date {
font-size: 12px; font-size: 13px;
color: #9ca3af; color: #9ca3af;
} }
</style> </style>
\ No newline at end of file
...@@ -11,6 +11,7 @@ ...@@ -11,6 +11,7 @@
</view> </view>
<view class="news-content"> <view class="news-content">
<text class="news-title">{{ item.contentTitle }}</text> <text class="news-title">{{ item.contentTitle }}</text>
<text class="news-title1">{{ item.contentDescription }}</text>
<text class="news-date">{{ item.contentDatetime }}</text> <text class="news-date">{{ item.contentDatetime }}</text>
</view> </view>
</view> </view>
...@@ -179,12 +180,25 @@ ...@@ -179,12 +180,25 @@
font-weight: 500; font-weight: 500;
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
margin-bottom: 10rpx;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
overflow: hidden; overflow: hidden;
} }
.news-title1 {
font-size: 14px;
color: #999999;
margin-bottom: 10rpx;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
.news-date { .news-date {
font-size: 12px; font-size: 13px;
color: #999999; color: #999999;
} }
</style> </style>
\ No newline at end of file
...@@ -8,8 +8,6 @@ ...@@ -8,8 +8,6 @@
<view class="info-row"> <view class="info-row">
<text <text
:class="['reply-status', detail.replyStatus === '1' ? 'replied' : 'pending']">{{ detail.replyStatus == "1" ? "已回复" : "未回复" }}</text> :class="['reply-status', detail.replyStatus === '1' ? 'replied' : 'pending']">{{ detail.replyStatus == "1" ? "已回复" : "未回复" }}</text>
<!-- <text :class="detail.replyStatus == '1'
?'status-tag':'status-tag-red'">{{ detail.replyStatus == "1" ? "已回复" : "未回复" }}</text> -->
<text class="info-text">留言人: ***{{'&nbsp;'}}</text> <text class="info-text">留言人: ***{{'&nbsp;'}}</text>
<text class="divider">|</text> <text class="divider">|</text>
<text class="info-text">{{detail.contentDatetime}}</text> <text class="info-text">{{detail.contentDatetime}}</text>
...@@ -18,7 +16,7 @@ ...@@ -18,7 +16,7 @@
<!-- 诉求内容 --> <!-- 诉求内容 -->
<view class="content-section"> <view class="content-section">
<text class="section-title">问题内容:</text> <text class="section-title">问题内容:</text>
<text class="description">{{detail.content}}</text> <text class="description1">{{detail.content}}</text>
<!-- <textarea class="textarea" fixed disabled auto-height :value="detail.content"></textarea> --> <!-- <textarea class="textarea" fixed disabled auto-height :value="detail.content"></textarea> -->
</view> </view>
<!-- 附件列表 --> <!-- 附件列表 -->
...@@ -37,7 +35,7 @@ ...@@ -37,7 +35,7 @@
<!-- 官方回复 --> <!-- 官方回复 -->
<view class="reply-card" v-if="detail.reply != null"> <view class="reply-card" v-if="detail.reply != null">
<text class="section-title2">官方回复</text> <text class="section-title2">官方回复</text>
<text class="description" >{{detail.reply}}</text> <text class="description">{{detail.reply}}</text>
<!-- <rich-text class="reply-text" :nodes="detail.reply"></rich-text> --> <!-- <rich-text class="reply-text" :nodes="detail.reply"></rich-text> -->
<!-- <textarea class="textarea" fixed disabled auto-height :value="detail.reply"></textarea> --> <!-- <textarea class="textarea" fixed disabled auto-height :value="detail.reply"></textarea> -->
...@@ -163,8 +161,8 @@ ...@@ -163,8 +161,8 @@
} }
.title { .title {
font-size: 18px; font-size: 20px;
font-weight: 500; font-weight: 800;
color: #333333; color: #333333;
margin-bottom: 20rpx; margin-bottom: 20rpx;
display: block; display: block;
...@@ -196,7 +194,7 @@ ...@@ -196,7 +194,7 @@
.info-text { .info-text {
color: #999; color: #999;
font-size: 25rpx; font-size: 14px;
margin-left: 10rpx; margin-left: 10rpx;
} }
...@@ -213,7 +211,7 @@ ...@@ -213,7 +211,7 @@
.section-title { .section-title {
color: black; color: black;
font-size: 14px; font-size: 18px;
font-weight: 500; font-weight: 500;
margin-bottom: 20rpx; margin-bottom: 20rpx;
display: block; display: block;
...@@ -221,15 +219,23 @@ ...@@ -221,15 +219,23 @@
.section-title2 { .section-title2 {
color: red; color: red;
font-size: 14px; font-size: 16px;
font-weight: 500; font-weight: 500;
margin-bottom: 20rpx; margin-bottom: 20rpx;
display: block; display: block;
} }
.description1 {
color: #777777;
font-size: 16px;
line-height: 1.8;
margin-bottom: 30rpx;
display: block;
}
.description { .description {
color: #333333; color: #333333;
font-size: 14px; font-size: 16px;
line-height: 1.8; line-height: 1.8;
margin-bottom: 30rpx; margin-bottom: 30rpx;
display: block; display: block;
......
...@@ -160,7 +160,7 @@ ...@@ -160,7 +160,7 @@
.message-content { .message-content {
display: block; display: block;
font-size: 14px; font-size: 14px;
color: #666666; color: #999999;
line-height: 1.6; line-height: 1.6;
margin-bottom: 20rpx; margin-bottom: 20rpx;
display: -webkit-box; display: -webkit-box;
...@@ -180,12 +180,12 @@ ...@@ -180,12 +180,12 @@
} }
.message-time { .message-time {
font-size: 12px; font-size: 13px;
color: #999999; color: #999999;
} }
.reply-status { .reply-status {
font-size: 12px; font-size: 14px;
padding: 4rpx 16rpx; padding: 4rpx 16rpx;
border-radius: 32rpx; border-radius: 32rpx;
display: inline-block; display: inline-block;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment