<template> <view class="page"> <u-navbar title="运维工单" :border-bottom="false" :background="bgc" title-color='#000' back-icon-color="#000" title-size='36' height='50'></u-navbar> <view class="box"> <u-picker mode="time" v-model="show" :params="params" @confirm="confirm"></u-picker> <view class="date"> <text @click="btnks(1)">{{selector}}</text> -- <text @click="btnks(2)">{{selectors}}</text> </view> <view class="scrll"> <view class="cdblist"> <view class="toptltle"> <view class="toptltle_lt"> fadgfryt168742341682 <u-icon name="file-text" size="32"></u-icon> </view> </view> <view class="" style="width: 100%;height: 1px;background-color: #ccc;margin-top: 10rpx;"> </view> <view class="cdbbuttom"> <view class="one"> <text>网络</text><text>设备状态</text><text>类型</text><text>电池</text><text>可还</text> </view> <view class="two"> <text style="color: #1DBE7B;">在线</text><text style="color: #1DBE7B;">正常</text><text>8</text><text>0</text><text>0</text> </view> </view> <view class="" style="width: 100%;height: 1px;background-color: #ccc;margin-top: 10rpx;"> </view> <view class="shop"> 绑定店铺:<text>瑞斯特酒店(龙安店)</text> </view> </view> </view> </view> </view> </template> <script> export default { data() { return { selector: '2024-4-9', selectors: '2024-4-9', show: false, params: { year: true, month: true, day: true, hour: false, minute: false, second: false }, bgc:{ background: '#25CE88' } } }, methods: { btnks(num) { this.show = true if (num == 1) { this.num = 1 } else { this.num = 2 } }, confirm(e) { if (this.num == 1) { this.selector = e.year + '-' + e.month + '-' + e.day } else { this.selectors = e.year + '-' + e.month + '-' + e.day } }, } } </script> <style lang="scss"> /deep/ .u-title, /deep/ .uicon-nav-back { padding-bottom: 22rpx; } page { // background: linear-gradient(180deg, #25CE88 0%, rgba(255, 255, 255, 0) 100%); } .page { width: 750rpx; // position: fixed; // top: 0; // left: 0; .box { width: 750rpx; height: 1440rpx; background: #F4F5F7; border-radius: 0rpx 0rpx 0rpx 0rpx; .scrll{ height: 1000rpx; overflow-y: scroll; margin-top: 24rpx; padding-bottom: 400rpx; .cdblist{ width: 680rpx; height: 308rpx; background: #FFFFFF; border-radius: 24rpx 24rpx 24rpx 24rpx; margin: auto; margin-top: 24rpx; .shop{ font-size: 24rpx; color: #3D3D3D; padding: 18rpx 30rpx; box-sizing: border-box; text{ color: #1DBE7B; } } .cdbbuttom{ padding: 26rpx 60rpx; box-sizing: border-box; font-size: 24rpx; color: #3D3D3D; text{ width: 100rpx; text-align: center; } .one{ display: flex; justify-content: space-between; } .two{ display: flex; justify-content: space-between; margin-top: 16rpx; } } .toptltle{ display: flex; justify-content: space-between; width: 100%; .toptltle_lt{ padding-top: 24rpx; padding-left: 32rpx; box-sizing: border-box; font-size: 24rpx; color: #808080; padding-bottom: 24rpx; } .toptltle_rt{ padding-top: 12rpx; padding-right: 32rpx; box-sizing: border-box; text{ display: inline-block; width: 8rpx; height: 8rpx; border-radius: 50%; background-color: #000; margin-right: 5rpx; } } } } } .date { padding-left: 80rpx; padding-right: 80rpx; box-sizing: border-box; display: flex; justify-content: space-between; width: 750rpx; height: 116rpx; background: #FFFFFF; padding-top: 38rpx; margin-bottom: 36rpx; text { padding: 6rpx 18rpx; box-sizing: border-box; background: #eee; height: 46rpx; border-radius: 10rpx 10rpx 10rpx 10rpx; font-size: 24rpx; color: #808080; } } } } </style>