|
|
@@ -0,0 +1,232 @@
|
|
|
+<template>
|
|
|
+ <view>
|
|
|
+ <u-navbar title="订餐上报"></u-navbar>
|
|
|
+ <!-- 筛选 -->
|
|
|
+ <view class="options">
|
|
|
+ <view class="date-option" @click="changeDateShow">
|
|
|
+ 2023年4月<u-icon name="arrow-down" size="24"></u-icon>
|
|
|
+ <view class="date-box" v-if="dateShow">
|
|
|
+ <view class="options-item">
|
|
|
+ 2023年4月
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="department-option" @click="changeDepartmentShow">
|
|
|
+ 全部部门<u-icon name="arrow-down" size="24"></u-icon>
|
|
|
+ <view class="department-box" v-if="departmentShow">
|
|
|
+ <view class="options-item">
|
|
|
+ 全部部门
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 记录卡片 -->
|
|
|
+ <view class="main">
|
|
|
+ <view class="record-card" v-for="item in 6">
|
|
|
+ <view class="record-title">
|
|
|
+ <view class="date">
|
|
|
+ 2023年4月10日 星期一
|
|
|
+ </view>
|
|
|
+ <view class="people-number">
|
|
|
+ 订餐人数 <text class="num1">29</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="classify">
|
|
|
+ <view class="item">
|
|
|
+ <view class="type1">
|
|
|
+ 机务段
|
|
|
+ </view>
|
|
|
+ <view class="number">
|
|
|
+ 订餐人数 <text class="num2">10</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="item">
|
|
|
+ <view class="type2">
|
|
|
+ 荆州南
|
|
|
+ </view>
|
|
|
+ <view class="number">
|
|
|
+ 订餐人数 <text class="num3">19</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <u-divider bg-color="#F2F4F4" border-color="#CFD2D5">没有更多数据了</u-divider>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ dateShow:false,
|
|
|
+ departmentShow:false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ changeDateShow() {
|
|
|
+ this.dateShow = !this.dateShow
|
|
|
+ },
|
|
|
+ changeDepartmentShow() {
|
|
|
+ this.departmentShow = !this.departmentShow
|
|
|
+ },
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ page{
|
|
|
+ padding-bottom: 100px;
|
|
|
+ }
|
|
|
+ // 筛选
|
|
|
+ .options{
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 0 92rpx;
|
|
|
+ line-height: 88rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ color: #7D7D7D;
|
|
|
+ .date-option,.department-option{
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ /deep/.uicon-arrow-down{
|
|
|
+ margin-left: 8rpx;
|
|
|
+ }
|
|
|
+ .date-box{
|
|
|
+ background-color: #fff;
|
|
|
+ z-index: 999;
|
|
|
+ width: 180rpx;
|
|
|
+ box-shadow: 0px 0px 2px #999999;
|
|
|
+ position: absolute;
|
|
|
+ top: 70rpx;
|
|
|
+ right: 0px;
|
|
|
+
|
|
|
+ .options-item {
|
|
|
+ line-height: 60rpx;
|
|
|
+ padding-left: 8rpx;
|
|
|
+ background-color: #2A8EFB ;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ .department-box{
|
|
|
+ background-color: #fff;
|
|
|
+ z-index: 999;
|
|
|
+ width: 180rpx;
|
|
|
+ box-shadow: 0px 0px 2px #999999;
|
|
|
+ position: absolute;
|
|
|
+ top: 70rpx;
|
|
|
+ left: 0px;
|
|
|
+
|
|
|
+ .options-item {
|
|
|
+ line-height: 60rpx;
|
|
|
+ padding-left: 8rpx;
|
|
|
+ background-color: #2A8EFB ;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+// 记录卡片
|
|
|
+.main{
|
|
|
+ padding: 0 32rpx;
|
|
|
+}
|
|
|
+.record-card {
|
|
|
+ padding: 24rpx;
|
|
|
+ margin-top: 24rpx;
|
|
|
+ border-radius: 12px;
|
|
|
+
|
|
|
+ background-color: rgba(255, 255, 255, 1);
|
|
|
+
|
|
|
+ .record-title {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 16rpx;
|
|
|
+
|
|
|
+ .date {
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ font-size: 32rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .people-number {
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ font-size: 16px;
|
|
|
+
|
|
|
+ text {
|
|
|
+ margin-left: 8rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .classify {
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .type1 {
|
|
|
+ width: 112rpx;
|
|
|
+ height: 48rpx;
|
|
|
+ line-height: 48rpx;
|
|
|
+ border-radius: 4px;
|
|
|
+ border: 1px solid rgba(96, 184, 201, 1);
|
|
|
+ color: rgba(96, 184, 201, 1);
|
|
|
+ text-align: center;
|
|
|
+ margin-right: 8rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .type2 {
|
|
|
+ width: 112rpx;
|
|
|
+ height: 48rpx;
|
|
|
+ line-height: 48rpx;
|
|
|
+ border-radius: 4px;
|
|
|
+ border: 1px solid rgba(77, 140, 255, 1);
|
|
|
+ color: rgba(77, 140, 255, 1);
|
|
|
+ text-align: center;
|
|
|
+ margin-right: 8rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .number {
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+
|
|
|
+ text {
|
|
|
+ margin-left: 8rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .item:nth-of-type(2) {
|
|
|
+ margin-left: 48rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .num1 {
|
|
|
+ color: #FF6923;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .num2 {
|
|
|
+ color: #85C8D5;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .num3 {
|
|
|
+ color: #74A5FF;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ /deep/.u-divider{
|
|
|
+ margin-top: 40rpx !important;
|
|
|
+ font-family: 'PingFang Regular';
|
|
|
+ }
|
|
|
+</style>
|
