| | |
| | | </view> |
| | | </view> |
| | | <!-- 页面内容 --> |
| | | <scroll-view scroll-y :style="{height: 900 + 'px'}"> |
| | | <view style="display: flex;flex-direction: column;margin-bottom: 10px;"> |
| | | <view class="controlBar"> |
| | | <view class="buttonGroup"> |
| | | <view style="display: flex;"> |
| | | <view class="buttonAll all" |
| | | <view class="buttonItem all" |
| | | :class="{ 'active': selectedSaleAnalysis === 'all'}" |
| | | @click="handleButtonClick({label: 'all',name: '全部'})"> |
| | | 全部 |
| | |
| | | {{ button.name }} |
| | | </view> |
| | | </view> |
| | | <view class="switchBtn"> |
| | | <text style="margin-right: 7px;">仅紧临</text> |
| | | <u-switch v-model="checked" size="20" @change="clickSwitch"></u-switch> |
| | | </view> |
| | | </view> |
| | | <view class="noticeList"> |
| | | <view class="listHead"> |
| | | <u-checkbox-group style="margin-left: 15px;"> |
| | | <u-checkbox v-model="isReadOnly" @change="chooseRead"></u-checkbox>只显示未读 |
| | | <view class="switchBtn"> |
| | | <u-checkbox-group> |
| | | <u-checkbox v-model="isReadOnly" @change="chooseRead"></u-checkbox> |
| | | </u-checkbox-group> |
| | | <text>只显示未读</text> |
| | | </view> |
| | | <view class="switchBtn"> |
| | | <u-switch v-model="checked" size="20" @change="clickSwitch" style="margin-right: 6px"></u-switch> |
| | | <text>仅紧临</text> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | <view style="display: flex;flex-direction: column;margin-bottom: 55px;"> |
| | | <view class="noticeList"> |
| | | <view class="listContent" v-if="noticeList.length > 0" > |
| | | <view v-for="(item, index) in noticeList" :key="index" class="itemContent" > |
| | | <view class="content" v-if="item.isRead" > |
| | |
| | | </view> |
| | | </view> |
| | | </view> |
| | | </scroll-view> |
| | | <view class="lastbottom">共<span style="font-weight: 600;"> {{noticeList.length}} </span>条 未叫应<span style="font-weight: 600;">{{noSpeak}}</span> 条</view> |
| | | <dia ref="showDialog" @close="close"></dia> |
| | | <tabBar :currentPagePath="page" :tabBarList="tabBarLists"></tabBar> |
| | |
| | | this.data.searchParams.emergType = this.checked ? 1 : null ; |
| | | this.data.searchParams.warningLevel = this.selectedSaleAnalysis =='all' ? null : this.selectedSaleAnalysis =='red' ? 1 : this.selectedSaleAnalysis =='orange' ? 2: this.selectedSaleAnalysis =='yellow'? 3 : 4; |
| | | getNotice(this.data).then(res => { |
| | | console.log("dddddr",res); |
| | | if (res.code == 100) { |
| | | this.noticeList = res.data ? res.data : []; |
| | | this.noticeListCopy = this.noticeList; |
| | |
| | | } |
| | | </script> |
| | | |
| | | <style> |
| | | <style lang="scss" scoped> |
| | | .box { |
| | | display: flex; |
| | | flex-direction: column; |
| | |
| | | z-index: 1; |
| | | } |
| | | .navBarBox .navBar { |
| | | background-color:lightgrey; |
| | | height: 40px; |
| | | background-color:#fff; |
| | | height: 50px; |
| | | display: flex; |
| | | flex-direction: row; |
| | | justify-content: center; |
| | | align-items: center; |
| | | box-shadow: 0 3px 12px rgba(0,0,0,0.05); |
| | | } |
| | | .barText{ |
| | | /* margin-left: 20px; */ |
| | |
| | | height: 82rpx; |
| | | margin-right: 10rpx; |
| | | } */ |
| | | |
| | | .controlBar{ |
| | | margin: 12px 12px 0; |
| | | padding: 12px; |
| | | height: 90px; |
| | | box-sizing: border-box; |
| | | display: flex; |
| | | flex-direction: column; |
| | | justify-content: space-between; |
| | | width: calc(100% - 24px); |
| | | background: #fff; |
| | | border-radius: 5px; |
| | | box-shadow: 0 3px 12px rgba(0,0,0,0.05); |
| | | |
| | | .buttonGroup{ |
| | | margin: 18px 12px; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | margin-bottom: 12px; |
| | | } |
| | | |
| | | .listHead{ |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | } |
| | | } |
| | | |
| | | .buttonItem{ |
| | | margin-left:5px; |
| | | width: calc(20% - 4px); |
| | | color: white; |
| | | display: flex; |
| | | flex-direction: row; |
| | | justify-content: center; |
| | | align-items: center; |
| | | width: 47px; |
| | | height: 30px; |
| | | border-radius: 5px; |
| | | &.active{ |
| | | border: 1px solid #fff; |
| | | } |
| | | } |
| | | .buttonAll{ |
| | | margin-left:5px; |
| | |
| | | border: 1.5px solid #8d8d8d; |
| | | } |
| | | .red { |
| | | background-color: red; |
| | | background-color: #ff5555; |
| | | } |
| | | .orange { |
| | | background-color: rgb(251, 158, 13); |
| | |
| | | background-color: rgb(255, 223, 37); |
| | | } |
| | | .blue { |
| | | background-color: rgb(2, 167, 240); |
| | | background-color: #409EFF; |
| | | } |
| | | .switchBtn{ |
| | | display: flex; |
| | | align-items: center; |
| | | } |
| | | |
| | | .listHead{ |
| | | display: flex; |
| | | align-items: center; |
| | | background-color:lightgrey; |
| | | height: 35px; |
| | | .noticeList{ |
| | | margin-top: 12px; |
| | | height: calc(100vh - 266px); |
| | | overflow: hidden; |
| | | overflow-y: scroll; |
| | | } |
| | | |
| | | .listContent{ |
| | | display: flex; |
| | | flex-direction: column; |
| | | padding: 10px 10px; |
| | | margin: 0 12px; |
| | | background: #fff; |
| | | border-radius: 5px; |
| | | box-shadow: 0 3px 12px rgba(0,0,0,0.05); |
| | | } |
| | | .itemContent{ |
| | | font-size: 16px; |
| | | color: gray; |
| | | margin-top: 10px; |
| | | border-bottom: 1px solid lightgrey; |
| | | color: #333; |
| | | margin-top: 15px; |
| | | padding: 0 12px 15px; |
| | | border-bottom: 1px solid #ebebeb; |
| | | |
| | | &:last-of-type{ |
| | | border-bottom: none; |
| | | } |
| | | } |
| | | .content{ |
| | | text-overflow: ellipsis; |
| | | overflow: hidden; |
| | | white-space: nowrap; |
| | | margin-bottom: 10px; |
| | | |
| | | } |
| | | .contentNoRead{ |
| | | font-size: 14px; |
| | |
| | | } |
| | | .lastbottom{ |
| | | width: 100%; |
| | | height: 100px; |
| | | height: 40px; |
| | | background-color: white; |
| | | text-align: center; |
| | | line-height: 50px; |
| | | line-height: 40px; |
| | | position: fixed; |
| | | bottom: var(--window-bottom, 0); |
| | | bottom: 50px; |
| | | z-index: 99; |
| | | font-size: 16px; |
| | | box-shadow: 0 -3px 12px rgba(0,0,0,0.04); |
| | | border-radius: 5px 5px 0 0; |
| | | span{ |
| | | margin: 0 2px; |
| | | } |
| | | } |
| | | </style> |