xytSk-App/pages/messageList/index.vue

172 lines
4.0 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<template>
<view :style="{height:'100vh',overflow:'hidden',backgroundColor: '#f0f0f0'}">
<u-status-bar></u-status-bar>
<u-navbar title="预警" :autoBack="true" :titleStyle="{
fontSize:'18px'
}" :height='44' :safeAreaInsetTop=true leftIconSize='20' leftIconColor='rgb(153, 153, 153)'>
</u-navbar>
<view class="" style="margin-top: 44px;;background-color: #f0f0f0;border-top: 1px solid #f0f0f0;">
<view style="display: flex;padding: 20px;background-color: #fff;align-items: center;">
<u--input v-model="model.stm" shape='circle' :customStyle="customStyle" placeholder="请选择开始时间"
style="background-color: #f0f0f0;height: 30px;text-align: center;" border='none' @click="show = true;hideKeyboard()"></u--input>
-
<u--input v-model=" model.etm" shape='circle' placeholder="请选择结束时间"
style="background-color: #f0f0f0;height: 30px;text-align: center;" border='none' @click="show = true;hideKeyboard()"></u--input>
<text>搜索</text>
</view>
<view class="" v-for="item in list" style="margin: 10px;background-color: #fff;padding: 10px;">
<view class="item">
<view class="align-center">
<view class="blueTiao">
</view>
<view class="title">
{{item.title}}
</view>
</view>
<view class="titleRight" @click="toDetail(item)">
2024-05-30 09:31:23
</view>
</view>
<view class="contentItem">
<view class="itemC">
20242
</view>
</view>
</view>
</view>
<u-calendar :show="show" mode="range" @confirm="confirm" @cancel='cancel'></u-calendar>
</view>
</template>
<script>
import moment from 'moment'
export default {
data() {
return {
show: false,
model: {
stm: '',
etm: ''
},
customStyle: {
background: '#000'
},
list: [{
title: '5-29日常巡检',
state: 0,
xjx: '上游坝面、坝顶',
name: '王自荣',
time: '2024-05-30 09:31:23'
},
{
title: '5-29日常巡检',
state: 1,
xjx: '上游坝面、坝顶',
name: '王自荣',
time: '2024-05-30 09:31:23'
},
]
};
},
mounted() {
},
methods: {
// getList(){
// uni.$http.post('/gunshiApp/xyt/stQxWarnR/home/warn',this.model).then(res=>{
// })
// },
confirm(e) {
console.log(e);
this.model.start = e[0]
this.model.end = e[1]
this.show = false
},
cancel() {
this.show = false
},
toDetail(){
uni.navigateTo({
url:'/pages/messageList/detail/index'
})
}
}
}
</script>
<style lang="scss" scoped>
.uni-input-placeholder{
text-align: center;
}
.myTitleStyle {
font-size: 30px;
background-color: red;
height: 200px;
}
.tabsClass {
margin-top: 44px;
height: 44px;
padding: 0 40px;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
}
.item {
// border-bottom: 1px solid #f0f0f0;
padding-bottom: 10px;
display: flex;
justify-content: space-between;
align-items: center;
.blueTiao{
background-color: #2a7efa;
width: 8px;
height: 8px;
border-radius: 50%;
margin-right: 10px;
}
.title {
border-width: 0px;
font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;
font-weight: 700;
font-style: normal;
font-size: 15px;
color: #666666
}
.titleRight {
display: flex;
.border {
border-width: 0px;
background-color: rgba(236, 245, 255, 1);
box-sizing: border-box;
border-width: 1px;
border-style: solid;
border-color: rgba(187, 220, 255, 1);
border-radius: 5px;
box-shadow: none;
width: 58px;
height: 25px;
color: #689FFF;
text-align: center;
}
}
}
.contentItem{
.itemC{
display: flex;
justify-content: space-between;
display: flex;
color: #666666;
padding: 10px;
}
}
</style>