lock_Maintenance/components/messages/thing.vue
2024-08-29 15:19:18 +08:00

126 lines
2.2 KiB
Vue

<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>