From b1fc04036f964163c128586810fec8b5e9da7e2c Mon Sep 17 00:00:00 2001
From: 马宇豪 <978517621@qq.com>
Date: 星期一, 24 七月 2023 09:58:10 +0800
Subject: [PATCH] 样式修改
---
pages/tabBar/notice/notice.vue | 154 ++++++++++++++++++++++++++++++++-------------------
1 files changed, 96 insertions(+), 58 deletions(-)
diff --git a/pages/tabBar/notice/notice.vue b/pages/tabBar/notice/notice.vue
index 8c41842..c11047e 100644
--- a/pages/tabBar/notice/notice.vue
+++ b/pages/tabBar/notice/notice.vue
@@ -12,36 +12,38 @@
</view>
</view>
<!-- 页面内容 -->
- <scroll-view scroll-y :style="{height: 900 + 'px'}">
- <view style="display: flex;flex-direction: column;margin-bottom: 10px;">
- <view class="buttonGroup">
- <view style="display: flex;">
- <view class="buttonAll all"
- :class="{ 'active': selectedSaleAnalysis === 'all'}"
- @click="handleButtonClick({label: 'all',name: '全部'})">
- 全部
- </view>
- <view v-for="(button, index) in buttons" :key="index" class="buttonItem"
- :class="{ 'active': selectedSaleAnalysis === button.label,
+ <view class="controlBar">
+ <view class="buttonGroup">
+ <view class="buttonItem all"
+ :class="{ 'active': selectedSaleAnalysis === 'all'}"
+ @click="handleButtonClick({label: 'all',name: '全部'})">
+ 全部
+ </view>
+ <view v-for="(button, index) in buttons" :key="index" class="buttonItem"
+ :class="{ 'active': selectedSaleAnalysis === button.label,
'red': button.label === 'red',
'orange':button.label === 'orange',
'yellow':button.label === 'yellow',
- 'blue': button.label === 'blue'}"
- @click="handleButtonClick(button)">
- {{ 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>
+ 'blue': button.label === 'blue'}"
+ @click="handleButtonClick(button)">
+ {{ button.name }}
+ </view>
+ </view>
+ <view class="listHead">
+ <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="listHead">
- <u-checkbox-group style="margin-left: 15px;">
- <u-checkbox v-model="isReadOnly" @change="chooseRead"></u-checkbox>只显示未读
- </u-checkbox-group>
- </view>
<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" >
@@ -88,7 +90,6 @@
</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>
@@ -169,7 +170,6 @@
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;
@@ -244,7 +244,7 @@
}
</script>
-<style>
+<style lang="scss" scoped>
.box {
display: flex;
flex-direction: column;
@@ -260,12 +260,13 @@
z-index: 1;
}
.navBarBox .navBar {
- background-color:lightgrey;
- height: 40px;
- display: flex;
- flex-direction: row;
- justify-content: center;
- align-items: center;
+ 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; */
@@ -283,22 +284,46 @@
height: 82rpx;
margin-right: 10rpx;
} */
-.buttonGroup{
- margin: 18px 12px;
- display: flex;
- align-items: center;
- justify-content: space-between;
+
+.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{
+ 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;
@@ -320,7 +345,7 @@
border: 1.5px solid #8d8d8d;
}
.red {
- background-color: red;
+ background-color: #ff5555;
}
.orange {
background-color: rgb(251, 158, 13);
@@ -329,36 +354,44 @@
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;
@@ -366,13 +399,18 @@
}
.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>
--
Gitblit v1.9.2