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/measures.vue | 53 ++++++-
pages/tabBar/current/current.vue | 24 +-
pages/tabBar/information/information.vue | 74 ++++++---
pages/tabBar/notice/detail.vue | 55 ++++---
pages/tabBar/notice/notice.vue | 154 +++++++++++++--------
pages/tabBar/tabBarIndex.vue | 1
pages/index/index.vue | 2
pages/tabBar/response/response.vue | 51 +++++--
8 files changed, 273 insertions(+), 141 deletions(-)
diff --git a/pages/index/index.vue b/pages/index/index.vue
index 700fec8..8946186 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -53,7 +53,6 @@
Login(){
this.isLogining = true;
login(this.form).then(res => {
- console.log("res",res)
if (res.code === 100) {
this.isLogining = false;
//登录成功后
@@ -93,7 +92,6 @@
},
connect() {
uni.$on('connectStatusChange', (connectStatus) => {
- console.log('进入连接')
var connectStr = ''
if (connectStatus == true) {
connectStr = '已连接'
diff --git a/pages/tabBar/current/current.vue b/pages/tabBar/current/current.vue
index 46b8829..37cd53f 100644
--- a/pages/tabBar/current/current.vue
+++ b/pages/tabBar/current/current.vue
@@ -63,19 +63,21 @@
z-index: 1;
}
.navBarBox .navBar {
- background-color:lightgrey;
- height: 45px;
- 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{
- text-align: center;
- width: 85%;
- font-size: 16px;
- /* text-align: center; */
- font-weight: 600;
+ /* margin-left: 20px; */
+ text-align: center;
+ width: 85%;
+ font-size: 16px;
+ /* text-align: center; */
+ font-weight: 600;
}
.statusBar{
background-color:lightgrey;
diff --git a/pages/tabBar/information/information.vue b/pages/tabBar/information/information.vue
index fd4674b..3fcffd5 100644
--- a/pages/tabBar/information/information.vue
+++ b/pages/tabBar/information/information.vue
@@ -21,8 +21,10 @@
<view class="listContent" v-if="informationList.length > 0">
<view v-for="(item, index) in informationList" :key="index" class="itemContent">
<view class="content" @click="toDetail(item)">
- <text>[{{item.colorContent}}]</text>
- <text>{{item.title}},{{item.content}}</text>
+ <view class="textContent">
+ <text>[{{item.colorContent}}]</text>
+ <text>{{item.title}},{{item.content}}</text>
+ </view>
<view class="buttonContent">
<u-button v-if="item.buttonContent == '审核通过'" size="mini" class="buttonCo" style="background-color:rgb(17, 204, 33);color: white">
{{item.buttonContent}}
@@ -125,7 +127,7 @@
</script>
-<style>
+<style lang="scss" scoped>
.box {
display: flex;
flex-direction: column;
@@ -141,12 +143,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{
text-align: center;
@@ -161,6 +164,7 @@
.contentList{
display: flex;
flex-direction: column;
+ padding-bottom: 65px;
}
.buttonGroup{
margin: 18px 12px;
@@ -215,38 +219,54 @@
align-items: center;
}
.listHead{
- display: flex;
- align-items: center;
- /* background-color:lightgrey; */
- height: 25px;
- padding: 10px 10px;
+ padding: 12px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
}
.listContent{
display: flex;
flex-direction: column;
- padding: 0 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;
-
+ font-size: 16px;
+ color: #333;
+ margin-top: 15px;
+ padding: 0 12px 15px;
+ border-bottom: 1px solid #ebebeb;
+
+ &:last-of-type{
+ border-bottom: none;
+ }
}
.content{
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
+
+ .textContent{
+ width: calc(100% - 90px);
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+ }
+
+ .buttonContent{
+ width: 80px;
+ }
}
.buttonCo{
- margin-top: 5px;
- margin-bottom: 10px;
+ font-size: 13px;
}
-.buttonContent{
- float: right;
- width: 80px;
- margin-top: -5px;
-}
+
/* .divider{
height: 1px;
background-color: gray;
diff --git a/pages/tabBar/notice/detail.vue b/pages/tabBar/notice/detail.vue
index 5736c67..b08bcb3 100644
--- a/pages/tabBar/notice/detail.vue
+++ b/pages/tabBar/notice/detail.vue
@@ -10,12 +10,10 @@
<u-icon name="arrow-left" color="black" size="17" @click="goBack" />
<view class="barText">信息详情</view>
</view>
-
- <view class="divider"></view>
</view>
</view>
<!-- 页面内容 -->
- <view style="padding: 10px 15px;display: flex;flex-direction: column;">
+ <view class="detailCard">
<text style="font-size: 18px;"><b>标题：</b>{{detailData.title}}</text>
<text class="textTop"><b>类别：</b>{{detailData.disaster}}</text>
<view style="display: flex;align-items: center;" class="textTop">
@@ -103,9 +101,9 @@
>确认发布</u-button>
</view>
<!-- //村级显示 -->
- <view class="measures">
- <u-button type="primary" @click="goMeasures">响应措施反馈</u-button>
- </view>
+ </view>
+ <view class="measures">
+ <u-button class="resBtn" type="primary" @click="goMeasures">响应措施反馈</u-button>
</view>
</view>
</template>
@@ -173,7 +171,6 @@
},
methods: {
goBack() {
- console.log("1111")
uni.navigateBack({
url:'./notice/notice'
});
@@ -271,25 +268,26 @@
}
</script>
-<style>
+<style lang="scss" scoped>
a{
text-decoration: none;
}
.navBarBox .navBar {
- /* background-color:lightgrey; */
- height: 30px;
- display: flex;
- flex-direction: row;
- /* justify-content: center; */
- align-items: center;
-/* padding-top:5px ; */
- padding: 5px 8px;
+ 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: 36%;
- font-weight: 600;
- font-size: 18px;
-
+ /* margin-left: 20px; */
+ text-align: center;
+ width: 85%;
+ font-size: 16px;
+ /* text-align: center; */
+ font-weight: 600;
}
.navBarBox .navBar .logo {
width: 82rpx;
@@ -323,6 +321,15 @@
background-color: lightgray;
margin-left: 15px;
}
+.detailCard{
+ display: flex;
+ flex-direction: column;
+ background: #fff;
+ box-shadow: 0 3px 12px rgba(0,0,0,0.05);
+ margin: 12px 12px 20px;
+ border-radius: 5px;
+ padding: 30px 12px;
+}
.btn{
margin-top: 80px;
display: flex;
@@ -331,7 +338,13 @@
width: 100%;
}
.measures{
- margin-top: 50px;
+ margin-top: 50px 12px 0;
+ padding: 0 12px;
+
+ .resBtn{
+ border-radius: 5px;
+ box-shadow: 0 3px 12px rgba(33,148,239,0.4);
+ }
}
</style>
diff --git a/pages/tabBar/notice/measures.vue b/pages/tabBar/notice/measures.vue
index 4723e25..b83563c 100644
--- a/pages/tabBar/notice/measures.vue
+++ b/pages/tabBar/notice/measures.vue
@@ -6,10 +6,11 @@
<view class="statusBar" :style="{ paddingTop: statusBarHeight + 'px' }"></view>
<!-- 真正的导航栏内容 -->
<view class="navBar">
+ <u-icon name="arrow-left" color="black" size="17" @click="goBack" />
<view class="barText">响应措施反馈</view>
</view>
</view>
- <view style="display: flex;flex-direction: column; padding: 10px 15px;">
+ <view class="measureCard">
<view class="first">
<text style="font-size: 16px;margin-bottom: 20px;">基础措施</text>
<u-checkbox-group
@@ -46,7 +47,9 @@
{{item.name}}
</view>
</view>
- <u-button class="btn" type="success">提交</u-button>
+ </view>
+ <view class="measures">
+ <u-button class="measureBtn" type="success">提交</u-button>
</view>
</view>
</template>
@@ -89,6 +92,12 @@
uni.hideTabBar();
},
methods: {
+ goBack() {
+ uni.navigateBack({
+ url:'./detail/detail'
+ });
+ },
+
checkboxChange(n) {
console.log('change', n);
},
@@ -148,12 +157,31 @@
<style lang='scss' scoped>
.navBarBox .navBar {
- background-color:lightgrey;
- height: 25px;
+ 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; */
+ text-align: center;
+ width: 85%;
+ font-size: 16px;
+ /* text-align: center; */
+ font-weight: 600;
+}
+
+.measureCard{
display: flex;
- flex-direction: row;
- justify-content: center;
- align-items: center;
+ flex-direction: column;
+ background: #fff;
+ box-shadow: 0 3px 12px rgba(0,0,0,0.05);
+ margin: 12px 12px 20px;
+ border-radius: 5px;
+ padding: 30px 12px;
}
.fix{
position: sticky;
@@ -191,6 +219,17 @@
margin-top: 5px;
font-size: 14px;
}
+
+.measures{
+ margin-top: 50px 12px 0;
+ padding: 0 12px;
+
+ .measureBtn{
+ border-radius: 5px;
+ box-shadow: 0 3px 12px rgba(33,239,102,0.4);
+ }
+}
+
/* .btn{
position: fixed;
bottom: var(--window-bottom, 1);
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>
diff --git a/pages/tabBar/response/response.vue b/pages/tabBar/response/response.vue
index 8730a72..8cd873c 100644
--- a/pages/tabBar/response/response.vue
+++ b/pages/tabBar/response/response.vue
@@ -6,7 +6,7 @@
<view class="statusBar" :style="{ paddingTop: statusBarHeight + 'px' }"></view>
<!-- 真正的导航栏内容 -->
<view class="navBar">
- <view class="barText"></view>
+ <view class="barText">叫应记录</view>
</view>
</view>
<!-- 页面内容 -->
@@ -103,12 +103,21 @@
<style>
.navBarBox .navBar {
- background-color:lightgrey;
- height: 15px;
- 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; */
+ text-align: center;
+ width: 85%;
+ font-size: 16px;
+ /* text-align: center; */
+ font-weight: 600;
}
.fix{
position: sticky;
@@ -122,22 +131,34 @@
background-color:lightgrey;
}
.responseList{
- display: flex;
- flex-direction: column;
- padding: 20px 15px;
+ display: flex;
+ flex-direction: column;
+ margin: 0 12px;
+ background: #fff;
+ border-radius: 5px;
+ box-shadow: 0 3px 12px rgba(0,0,0,0.05);
+ margin-top: 12px;
}
.itemContent{
- display: flex;
- border-bottom: 1px lightgrey solid;
- margin-top: 15px;
+ 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{
- border-radius: 13px;
+ border-radius: 5px;
padding: 15px 15px;
background-color: rgb(174, 228, 255) ;
display: flex;
flex-direction: column;
- align-items: center;
+ align-items: flex-start;
justify-content: center;
margin-bottom: 15px;
}
diff --git a/pages/tabBar/tabBarIndex.vue b/pages/tabBar/tabBarIndex.vue
index b9c0e1b..5a5efdc 100644
--- a/pages/tabBar/tabBarIndex.vue
+++ b/pages/tabBar/tabBarIndex.vue
@@ -61,6 +61,7 @@
background-color: red;
z-index: 9999;
width: 100%;
+ box-shadow: 0 -3px 12px rgba(0,0,0,0.05);
}
.u-page__item__slot-icon{
width: 24px;
--
Gitblit v1.9.2