From 9655b129a296b4a5cc5e39d60fc022cf5ac06879 Mon Sep 17 00:00:00 2001 From: 马宇豪 <978517621@qq.com> Date: 星期五, 04 八月 2023 13:43:55 +0800 Subject: [PATCH] 提交样式 --- pages/tabBar/response/response.vue | 67 +++++++++++++++++++-------------- 1 files changed, 38 insertions(+), 29 deletions(-) diff --git a/pages/tabBar/response/response.vue b/pages/tabBar/response/response.vue index 76b1f6a..cd8a87f 100644 --- a/pages/tabBar/response/response.vue +++ b/pages/tabBar/response/response.vue @@ -16,15 +16,15 @@ <!-- <view class="responseList" v-if="responseList.length > 0">--> <scroll-view :scroll-top="scrollTop" scroll-y="true" class="responseList" @scrolltoupper="upper" v-if="responseList.length > 0" @scrolltolower="lower" @scroll="scroll" lower-threshold="50"> - <view v-for="(item, index) in responseList" :key="index" class="itemContent"> - <view class="timeLeft"> - <text>{{item.time}}</text> - <text>{{item.timeMin}}</text> - </view> + <view v-for="(item, index) in responseList" :key="index" class="itemContent" @click="toDetail(item)"> <view class="contentRight"> - <text>{{item.content}}</text> - <text style="color: rgb(76, 197, 248);" @click="toDetail(item)">[查看信息详情]</text> + <view style="font-size: 14px">{{item.receiveUnit}}</view> + <text><span style="margin-right: 4px">{{item.recipienterName}}</span>对<span style="margin:0 4px">[{{ item.title }}]</span>进行了“已安排部署”叫应。</text> </view> + <view class="timeLeft"> + <text style="margin-right: 10px">{{item.time}}</text> + <text>{{item.timeMin}}</text> + </view> </view> </scroll-view> <!-- </view>--> @@ -87,7 +87,7 @@ this.responseList.forEach((item, index) => { this.responseList[index].time = item.responseTime.substring(0,10); this.responseList[index].timeMin = item.responseTime.substring(10,19); - this.responseList[index].content = item.receiveUnit + " " + item.recipienterName + " " + "在" + item.title + ' 进行了“已安排部署”叫应。'; + // this.responseList[index].content = item.receiveUnit + " " + item.recipienterName + " " + "在" + item.title + ' 进行了“已安排部署”叫应。'; }) } }else { @@ -137,7 +137,7 @@ } </script> -<style> +<style lang="scss" scoped> .navBarBox .navBar { background-color:#fff; height: 50px; @@ -177,31 +177,40 @@ box-shadow: 0 3px 12px rgba(0,0,0,0.05); } .itemContent{ - display: flex; - align-items: center; - font-size: 16px; color: #333; margin-top: 15px; padding: 0 12px; border-bottom: 1px solid #ebebeb; - &:last-of-type{ - border-bottom: none; + .timeLeft{ + display: flex; + align-items: center; + justify-content: left; + margin-bottom: 15px; + color: #11cc21; } -} -.timeLeft{ - border-radius: 5px; - padding: 15px 15px; - background-color: rgb(174, 228, 255) ; - display: flex; - flex-direction: column; - align-items: flex-start; - justify-content: center; - margin-bottom: 15px; -} -.contentRight{ - flex: 1; - font-size: 18px; - margin: 0 5px 15px 8px; + .contentRight{ + width: 100%; + flex: 1; + font-size: 16px; + margin-bottom: 6px; + view{ + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + text{ + overflow: hidden; //溢出内容隐藏 + text-overflow: ellipsis; //文本溢出部分用省略号表示 + display: -webkit-box; //特别显示模式 + -webkit-line-clamp: 2; //行数 + line-clamp: 2; + -webkit-box-orient: vertical; //盒子中内容竖直排列 + } + } + + // &:last-of-type{ + // border-bottom: none; + // } } </style> -- Gitblit v1.9.2