提交样式

马宇豪

2023-08-04 9655b129a296b4a5cc5e39d60fc022cf5ac06879

 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>