'消息界面'

This commit is contained in:
Aw0odMan 2024-08-29 15:19:18 +08:00
parent a4be21a565
commit 6c9e79e7cc
20 changed files with 772 additions and 22 deletions

View File

@ -0,0 +1,90 @@
<template>
<view class="work">
<view class="message" @click="goemergent()">
<view class="icon2">
<image src="@/static/image/alarm.png"></image>
</view>
<view class="text">
<view class="title">
<text>紧急通知</text>
</view>
<view class="word">
<text>近期重庆有自然灾害请小心出门</text>
</view>
<view class="time">
<text>2023-08-08</text>
</view>
</view>
</view>
<view class="message">
<view class="icon2">
<image src="@/static/image/alarm.png"></image>
</view>
<view class="text">
<view class="title">
<text>紧急维修通知</text>
</view>
<view class="word">
<text>您有一条紧急维修通知请查看</text>
</view>
<view class="time">
<text>2023-08-08</text>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
name:"emergent",
data() {
return {
}
},
methods:{
goemergent(){
uni.navigateTo({
url:"/pages/Message/emergent"
})
}
}
}
</script>
<style lang="scss" scoped>
.message{
display: flex;
margin-bottom: 10rpx;
.text{
margin-left: 10rpx;
.title{
display: flex;
font-size: 40rpx;
font-weight: 500;
}
.word{
margin-top: 10rpx;
font-size: 25rpx;
font-weight: 100;
}
.time{
justify-items: right;
font-size: 20rpx;
}
}
}
.icon2{
width: 100rpx;
height: 100rpx;
border-radius: 50%;
background-color: rgb(255,207,199);
margin-left: 20rpx;
image{
margin: 16rpx;
width: 70rpx;
height: 70rpx;
}
}
</style>

View File

@ -0,0 +1,89 @@
<template>
<view class="work">
<view class="message" @click="goPolicy()">
<view class="icon3">
<image src="@/static/image/policy.png"></image>
</view>
<view class="text">
<view class="title">
<text>维修通知</text>
</view>
<view class="word">
<text>政策通知</text>
</view>
<view class="time">
<text>2023-08-08</text>
</view>
</view>
</view>
<view class="message">
<view class="icon3">
<image src="@/static/image/policy.png"></image>
</view>
<view class="text">
<view class="title">
<text>紧急维修通知</text>
</view>
<view class="word">
<text>政策通知</text>
</view>
<view class="time">
<text>2023-08-08</text>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
name:"policy",
data() {
return {
}
},
methods:{
goPolicy(){
uni.navigateTo({
url:"/pages/Message/Policy"
})
}
}
}
</script>
<style lang="scss" scoped>
.message{
display: flex;
margin-bottom: 10rpx;
.text{
margin-left: 10rpx;
.title{
display: flex;
font-size: 40rpx;
font-weight: 500;
}
.word{
margin-top: 10rpx;
font-size: 25rpx;
font-weight: 100;
}
.time{
justify-items: right;
font-size: 20rpx;
}
}
}
.icon3{
width: 100rpx;
height: 100rpx;
border-radius: 50%;
background-color: rgb(187,243,220);
image{
margin: 16rpx;
width: 70rpx;
height: 70rpx;
}
}
</style>

View File

@ -0,0 +1,126 @@
<template>
<view class="work">
<view class="message">
<view class="icon8">
<image src="@/static/image/fix.png"></image>
</view>
<view class="text">
<view class="title">
<text>维修通知</text>
</view>
<view class="word">
<text>您有一条新的维修通知(维修人员)</text>
</view>
<view class="time">
<text>2023-08-08</text>
</view>
</view>
</view>
<view class="message">
<view class="icon9">
<image src="@/static/image/emergentfix.png"></image>
</view>
<view class="text">
<view class="title">
<text>紧急维修通知</text>
</view>
<view class="word">
<text>您有一条新的紧急维修通知(领导)</text>
</view>
<view class="time">
<text>2023-08-08</text>
</view>
</view>
</view>
<view class="message">
<view class="icon10">
<image src="@/static/image/look.png"></image>
</view>
<view class="text">
<view class="title">
<text>巡检通知</text>
</view>
<view class="word">
<text>您有一条新的巡检通知</text>
</view>
<view class="time">
<text>2023-08-08</text>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
name:"thing",
data() {
return {
}
},
methods:{
}
}
</script>
<style lang="scss" scoped>
.message{
display: flex;
margin-bottom: 10rpx;
.text{
margin-left: 10rpx;
.title{
display: flex;
font-size: 40rpx;
font-weight: 500;
}
.word{
margin-top: 10rpx;
font-size: 25rpx;
font-weight: 100;
}
.time{
justify-items: right;
font-size: 20rpx;
}
}
}
.icon8{
width: 100rpx;
height: 100rpx;
border-radius: 50%;
background-color: rgb(250,225,195);
margin-left: 20rpx;
image{
margin: 16rpx;
width: 70rpx;
height: 70rpx;
}
}
.icon9{
width: 100rpx;
height: 100rpx;
border-radius: 50%;
background-color: rgb(255,211,198);
margin-left: 20rpx;
image{
margin: 16rpx;
width: 70rpx;
height: 70rpx;
}
}
.icon10{
width: 100rpx;
height: 100rpx;
border-radius: 50%;
background-color: rgb(213,223,252);
margin-left: 20rpx;
image{
margin: 16rpx;
width: 70rpx;
height: 70rpx;
}
}
</style>

View File

@ -0,0 +1,130 @@
<template>
<view class="work">
<view class="message" @click="gowork()">
<view class="icon5">
<image src="@/static/image/flag.png"></image>
</view>
<view class="text">
<view class="title">
<text>排班通知</text>
</view>
<view class="word">
<text>您的排班通知有更新请及时查收</text>
</view>
<view class="time">
<text>2023-08-08</text>
</view>
</view>
</view>
<view class="message">
<view class="icon6">
<image src="@/static/image/bag.png"></image>
</view>
<view class="text">
<view class="title">
<text>上班通知</text>
</view>
<view class="word">
<text>您的上班通知有更新请及时查收</text>
</view>
<view class="time">
<text>2023-08-08</text>
</view>
</view>
</view>
<view class="message">
<view class="icon7">
<image src="@/static/image/message.png"></image>
</view>
<view class="text">
<view class="title">
<text>公告通知</text>
</view>
<view class="word">
<text>公告通知公告通知公告通知公告通知</text>
</view>
<view class="time">
<text>2023-08-08</text>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
name:"work",
data() {
return {
}
},
methods:{
gowork(){
uni.navigateTo({
url:"/pages/Message/Scheduling"
})
}
},
}
</script>
<style lang="scss" scoped>
.message{
display: flex;
margin-bottom: 10rpx;
.text{
margin-left: 10rpx;
.title{
display: flex;
font-size: 40rpx;
font-weight: 500;
}
.word{
margin-top: 10rpx;
font-size: 25rpx;
font-weight: 100;
}
.time{
justify-items: right;
font-size: 20rpx;
}
}
}
.icon5{
width: 100rpx;
height: 100rpx;
border-radius: 50%;
background-color: rgb(251,229,199);
margin-left: 20rpx;
image{
margin: 16rpx;
width: 70rpx;
height: 70rpx;
}
}
.icon6{
width: 100rpx;
height: 100rpx;
border-radius: 50%;
background-color: rgb(189,235,249);
margin-left: 20rpx;
image{
margin: 16rpx;
width: 70rpx;
height: 70rpx;
}
}
.icon7{
width: 100rpx;
height: 100rpx;
border-radius: 50%;
background-color: rgb(213,222,253);
margin-left: 20rpx;
image{
margin: 16rpx;
width: 70rpx;
height: 70rpx;
}
}
</style>

View File

@ -30,14 +30,32 @@
"style": {
"navigationBarTitleText": "个人资料"
}
},
{
"path": "pages/Message/Scheduling",
"style": {
"navigationBarTitleText": "排班通知",
"backgroundColor": "#F7F8FA"
}
},
{
"path": "pages/Message/emergent",
"style": {
"navigationBarTitleText": "紧急通知"
}
},
{
"path": "pages/Message/Policy",
"style": {
"navigationBarTitleText": "政策通知",
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
"navigationBarBackgroundColor": "#FFFFFF",
"backgroundColor": "#F7F8FA"
},
"tabBar": {
"color": "#ccc",

View File

@ -1,37 +1,186 @@
<template>
<view class="container">
<view>
<view class="grid-container">
<view class="grid-item">
<view class="icon1">
<image src="@/static/image/event.png"></image>
</view>
<div class="caption">事件提醒</div>
</view>
<view class="grid-item">
<view class="icon2">
<image src="../../static/image/alarm.png"></image>
</view>
<div class="caption">紧急通知</div>
</view>
<view class="grid-item">
<view class="icon3">
<image src="../../static/image/policy.png"></image>
</view>
<div class="caption">政策通知</div>
</view>
<view class="grid-item">
<view class="icon4">
<image src="../../static/image/things.png"></image>
</view>
<div class="caption">事物通知</div>
</view>
</view>
<scroll-view class="scoll">
<view class="column" :style="columnStyle1" @click="selected1()">事件提醒</view>
<view class="column" :style="columnStyle2" @click="selected2()">紧急通知</view>
<view class="column" :style="columnStyle3" @click="selected3()">政策通知</view>
<view class="column" :style="columnStyle4" @click="selected4()">事物通知</view>
</scroll-view>
<view v-if="nowcomponent === 'work'">
<work></work>
</view>
<view v-if="nowcomponent === 'emergent'">
<emergent></emergent>
</view>
<view v-if="nowcomponent === 'policy'">
<policy></policy>
</view>
<view v-if="nowcomponent === 'thing'">
<thing></thing>
</view>
</view>
</template>
<script>
import work from '../../components/messages/work.vue';
import emergent from '../../components/messages/emergent.vue';
import policy from '../../components/messages/policy.vue';
import thing from '../../components/messages/thing.vue'
export default {
components: {
work,emergent,policy,thing
},
data() {
return {
}
nowcomponent:'',
columnStyle1: '',
columnStyle2: '',
columnStyle3: '',
columnStyle4: '',
};
},
methods: {
selected1() {
this.nowcomponent = 'work';
this.columnStyle1 = `color: red;`;
this.columnStyle2 = this.columnStyle3 = this.columnStyle4 =`color:black`;
//console.log(this.index)
},
selected2() {
this.nowcomponent = 'emergent';
this.columnStyle2 = `color: red;`;
this.columnStyle1 = this.columnStyle3 = this.columnStyle4 =`color:black`;
},
selected3() {
this.nowcomponent = 'policy';
this.columnStyle3 = `color: red;`;
this.columnStyle1 = this.columnStyle2 = this.columnStyle4 =`color:black`;
},
selected4() {
this.nowcomponent = 'thing'
this.columnStyle4 = `color: red;`;
this.columnStyle1 = this.columnStyle2 = this.columnStyle3 =`color:black`;
},
}
}
</script>
<style lang="scss">
$globalWidth: 600rpx;
$buttonColor: #0e7ff5;
.container {
display: flex;
background: -webkit-linear-gradient(270deg,
rgba(227, 239, 249, 1) 0%,
rgba(245, 245, 247, 1) 100%);
flex-direction: column;
/* align-items: center; */
width: 100%;
height: 100vh;
align-items: center;
.grid-container {
background-color: #ffffff;
display: flex; /* 使用 Flexbox 布局 */
flex-wrap: no; /* 允许换行 */
justify-content: space-between; /* 主轴上均匀分布项目 */
align-content: space-between; /* 交叉轴上均匀分布项目 */
width: 100%; /* 视图宽度 */
height: 150rpx; /* 视图高度 */
white-space: pre-wrap;
}
.grid-item {
flex: 0 0 calc(25%); /* 占据一半宽度减去一半的间距 */
background-color: #ffffff; /* 背景颜色 */
display: flex;
justify-content: center;
align-items: center;
font-size: 2em;
color: #ffffff;
flex-direction: column;
}
.icon1{
width: 100rpx;
height: 100rpx;
border-radius: 50%;
background-color: rgb(189,220,253);
image{
margin: 16rpx;
width: 70rpx;
height: 70rpx;
}
}
.icon2{
width: 100rpx;
height: 100rpx;
border-radius: 50%;
background-color: rgb(255,207,199);
image{
margin: 16rpx;
width: 70rpx;
height: 70rpx;
}
}
.icon3{
width: 100rpx;
height: 100rpx;
border-radius: 50%;
background-color: rgb(187,243,220);
image{
margin: 16rpx;
width: 70rpx;
height: 70rpx;
}
}
.icon4{
width: 100rpx;
height: 100rpx;
border-radius: 50%;
background-color: rgb(202,232,252);
image{
margin: 16rpx;
width: 70rpx;
height: 70rpx;
}
}
.scoll{
overflow-x: auto;
white-space: nowrap;
width: 100%;
height: 100rpx;
margin-bottom: 10rpx;
.column{
display: inline-block;
width: 20%;
height: 100rpx;
line-height: 100rpx;
text-align: center;
font-size: 26rpx;
margin-left: 10rpx;
font-weight: 100;
color: black;
}
}
.caption {
text-align: center; /* 文字居中 */
color: black;
font-size: 26rpx;
margin-top: 5rpx;
}
</style>

35
pages/Message/Policy.vue Normal file
View File

@ -0,0 +1,35 @@
<template>
<view>
<view class="policy">
<view class="title">
国家卫生健康委办公厅关于印发卫生服务中心多镇卫生院中医馆服务能力建设标准的通知
</view>
<view class="time">2023-08-08</view>
<view class="content">
2022年3月国务院办公厅印发了十四五"中医药发展规划》(以下简称《规划》),《规划》中明确提出"鼓励有条件的地方完成15%的社区卫生服务中心和乡镇卫生院中医馆服务内涵建设;在10%的社区卫生服务站和村卫生室开展'中医阁'建设"为了贯彻落实国务院决策部署深入实施基层中医药服务能力提升工程十四五行动计划更好地指导并推动有条件的地方建设一批具有示范引领作用的基层医疗卫生机构中医馆中医阁在前期相关标准试行基础上国家卫生健康委和国家中医药局组织制定了社区卫生服务中心乡镇卫生院中医馆服务能力提升建设标准社区卫生服务站村卫生室中医阁建设标准现印发给你们供各地参照执行
</view>
</view>
</view>
</template>
<script>
</script>
<style lang="scss" scoped>
.policy{
.title{
margin: 20rpx;
font-weight: 600;
}
.time{
font-size: 25rpx;
font-weight: 200;
margin-left: 20rpx;
}
.content{
font-size: 28rpx;
font-weight: 200;
margin-left: 20rpx;
}
}
</style>

View File

@ -0,0 +1,69 @@
<template>
<view class="bg">
<view class="Scheduling">
<view class="title">
<view class="left">排班通知</view>
<view class="time">2023-08-08</view>
</view>
<view class="text">
排班通知排班通知排班通知排班通知排班通知排班通知排班通知排班通知排班通知排班通知排班通知
</view>
</view>
<view class="Scheduling">
<view class="title">
<view class="left">排班通知</view>
<view class="time">2023-08-08</view>
</view>
<view class="text">
排班通知排班通知排班通知排班通知排班通知排班通知排班通知排班通知排班通知排班通知排班通知
</view>
</view>
</view>
</template>
<script>
</script>
<style lang="scss" scoped>
.bg{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
width: 100%;
height: 100%;
background-color: #F7F8FA;
}
.Scheduling{
margin: 30rpx;
margin-bottom: 20rpx;
margin-left: 20rpx;
border-radius: 30rpx;
background-color: #FFFFFF;
}
.title{
display: flex;
margin: 15rpx;
font-size: 40rpx;
.left{
flex: 1;
margin-top: 30rpx;
margin-bottom: 20rpx;
}
.time{
flex: 1;
text-align: right;
font-size: 26rpx;
margin-right: 20rpx;
margin-top: 30rpx;
}
}
.text{
margin-top: 10rpx;
margin-left: 15rpx;
padding-bottom: 20rpx;
font-size: 20rpx;
}
</style>

View File

@ -0,0 +1,44 @@
<template>
<view>
<view class="emergent">
<view class="title">应急管理部发布自然灾害综合风险预警响应提示</view>
<view class="time">2023-08-08</view>
<view class="content">应急管理部4月6日11时发布强对流天气蓝色预警响应提示:4月6日08时至7日08时山东南部和东部河南东部安徽东北部江苏北部等地的部分地区将有8-10级雷暴大风或冰雹天气局地最大风力可达11级;山东南部安徽东北部江苏北部等地的部分地区将有短时强降水天气小时雨量20-30毫米经综合会商研判,山东.河南安徽江苏等地雷暴大风冰雹和短时强降水等强对流天气可能引发局地风雹及次生灾害风险应急管理部提醒有关地区及时采取以下防范应对措施:1.加强短临监测预警和滚动会商研判2.加强对临时搭建物广告牌高空作业装置等的隐患排查做好人员转移避险工作3.停止高空作业提醒公众减少出行和农田劳作等户外活动4.督促指导相关水域作业人员或船舶及时采取回港或绕行措施</view>
<view class="image">
<image src="@/static/image/e76cb21348487899a86b7065939fa7e.png" mode=""></image>
</view>
</view>
</view>
</template>
<script>
</script>
<style lang="scss" scoped>
.emergent{
.image{
width: 100%;
height: 300rpx;
margin: 10rpx;
image{
width: 97%;
height: 100%;
border-radius: 30rpx;
}
}
.title{
margin: 20rpx;
font-weight: 600;
}
.time{
font-size: 25rpx;
font-weight: 200;
margin-left: 20rpx;
}
.content{
font-size: 28rpx;
font-weight: 200;
margin-left: 20rpx;
}
}
</style>

BIN
static/image/alarm.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.1 KiB

BIN
static/image/bag.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 55 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.3 KiB

BIN
static/image/event.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.8 KiB

BIN
static/image/fix.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.2 KiB

BIN
static/image/flag.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.8 KiB

BIN
static/image/look.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.9 KiB

BIN
static/image/message.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.4 KiB

BIN
static/image/policy.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.6 KiB

BIN
static/image/things.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.3 KiB