|
@@ -0,0 +1,334 @@
|
|
|
|
+<template>
|
|
|
|
+ <view>
|
|
|
|
+ <view class="head">
|
|
|
|
+ <view class="title">
|
|
|
|
+ <view class="name">
|
|
|
|
+ 食堂管理系统
|
|
|
|
+ </view>
|
|
|
|
+ <view class="option" @click="changePlaceShow">
|
|
|
|
+ 地方铁路食堂<u-icon name="arrow-down"></u-icon>
|
|
|
|
+ <view class="options-box" v-if="placeShow">
|
|
|
|
+ <view class="options-item">
|
|
|
|
+ 选项1
|
|
|
|
+ </view>
|
|
|
|
+ <view class="options-item">
|
|
|
|
+ 选项2
|
|
|
|
+ </view>
|
|
|
|
+ <view class="options-item">
|
|
|
|
+ 选项3
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+
|
|
|
|
+ </view>
|
|
|
|
+ <!-- 曲线图 -->
|
|
|
|
+ <view class="chart">
|
|
|
|
+ <view class="chart-title">
|
|
|
|
+ <view class="name">
|
|
|
|
+ 月度饭卡消费曲线图
|
|
|
|
+ </view>
|
|
|
|
+ <view class="time" @click="changeTimeShow">
|
|
|
|
+ 2023年4月<u-icon name="arrow-down"></u-icon>.
|
|
|
|
+ <view class="time-box" v-if="timeShow">
|
|
|
|
+ <view class="options-item">
|
|
|
|
+ 2023年4月
|
|
|
|
+ </view>
|
|
|
|
+
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ <img src="../../../assets/img/chart.png" alt="">
|
|
|
|
+ </view>
|
|
|
|
+
|
|
|
|
+ </view>
|
|
|
|
+
|
|
|
|
+ <!-- 订餐上报 -->
|
|
|
|
+ <view class="order-food">
|
|
|
|
+ <view class="title">
|
|
|
|
+ <view class="name">
|
|
|
|
+ <text><img src="../../../assets/img/riLine-calendar-2-line@1x.png" alt=""></text>订餐上报
|
|
|
|
+ </view>
|
|
|
|
+ <view class="record">
|
|
|
|
+ 全部记录 <u-icon name="arrow-right" size="20"></u-icon>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ <!-- 记录卡片 -->
|
|
|
|
+ <view class="record-card" v-for="item in 2">
|
|
|
|
+ <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>
|
|
|
|
+
|
|
|
|
+<canteenTabbar ref="mytabbar"
|
|
|
|
+ current="0"></canteenTabbar>
|
|
|
|
+ </view>
|
|
|
|
+</template>
|
|
|
|
+
|
|
|
|
+<script>
|
|
|
|
+ import canteenTabbar from "../../../components/canteenTabbar.vue"
|
|
|
|
+ export default {
|
|
|
|
+ components: {
|
|
|
|
+ canteenTabbar
|
|
|
|
+ },
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ placeShow: false,
|
|
|
|
+ timeShow: false
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ changePlaceShow() {
|
|
|
|
+ this.placeShow = !this.placeShow
|
|
|
|
+ },
|
|
|
|
+ changeTimeShow() {
|
|
|
|
+ this.timeShow = !this.timeShow
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+</script>
|
|
|
|
+
|
|
|
|
+<style lang="scss" scoped>
|
|
|
|
+ page {
|
|
|
|
+ padding-bottom: 100px;
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .head {
|
|
|
|
+ padding: 24rpx 32rpx;
|
|
|
|
+ background: linear-gradient(180deg, rgba(183, 208, 255, 1) 0%, rgba(244, 244, 246, 1) 100%);
|
|
|
|
+ height: 177px;
|
|
|
|
+
|
|
|
|
+ .title {
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ align-items: center;
|
|
|
|
+
|
|
|
|
+ .name {
|
|
|
|
+ color: rgba(31, 74, 153, 1);
|
|
|
|
+ font-size: 40rpx;
|
|
|
|
+ font-family: 'Medium';
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .option {
|
|
|
|
+ color: rgba(65, 80, 88, 1);
|
|
|
|
+ font-size: 32rpx;
|
|
|
|
+ position: relative;
|
|
|
|
+
|
|
|
|
+ .options-box {
|
|
|
|
+ background-color: #fff;
|
|
|
|
+ z-index: 999;
|
|
|
|
+ width: 240rpx;
|
|
|
|
+ box-shadow: 0px 0px 2px #999999;
|
|
|
|
+ position: absolute;
|
|
|
|
+ top: 50rpx;
|
|
|
|
+ left: 0px;
|
|
|
|
+
|
|
|
|
+ .options-item {
|
|
|
|
+ line-height: 60rpx;
|
|
|
|
+ padding-left: 8rpx;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ // 曲线图
|
|
|
|
+ .chart {
|
|
|
|
+ border-radius: 12px;
|
|
|
|
+ margin-top: 24rpx;
|
|
|
|
+ background-color: #fff;
|
|
|
|
+ height: 268px;
|
|
|
|
+
|
|
|
|
+ .chart-title {
|
|
|
|
+ padding: 38rpx 24rpx;
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ align-items: center;
|
|
|
|
+ font-size: 32rpx;
|
|
|
|
+
|
|
|
|
+ .name {
|
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
|
+ font-weight: bold;
|
|
|
|
+ font-family: 'Medium';
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .time {
|
|
|
|
+ color: rgba(119, 119, 119, 1);
|
|
|
|
+ position: relative;
|
|
|
|
+
|
|
|
|
+ .time-box {
|
|
|
|
+ background-color: #fff;
|
|
|
|
+ z-index: 999;
|
|
|
|
+ width: 200rpx;
|
|
|
|
+ box-shadow: 0px 0px 2px #999999;
|
|
|
|
+ position: absolute;
|
|
|
|
+ top: 50rpx;
|
|
|
|
+ left: 0px;
|
|
|
|
+
|
|
|
|
+ .options-item {
|
|
|
|
+ line-height: 64rpx;
|
|
|
|
+ padding-left: 8rpx;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ img {
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 200px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ // 订餐上报
|
|
|
|
+
|
|
|
|
+ .order-food {
|
|
|
|
+ padding: 0 32rpx;
|
|
|
|
+ margin-top: 160px;
|
|
|
|
+ font-family: 'PingFang Regular';
|
|
|
|
+
|
|
|
|
+ .title {
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ align-items: center;
|
|
|
|
+
|
|
|
|
+ .name {
|
|
|
|
+ color: rgba(56, 109, 205, 1);
|
|
|
|
+ font-size: 36rpx;
|
|
|
|
+ line-height: 36rpx;
|
|
|
|
+ font-weight: bold;
|
|
|
|
+
|
|
|
|
+ text {
|
|
|
|
+ vertical-align: middle;
|
|
|
|
+ margin-right: 8rpx;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .record {
|
|
|
|
+ color: rgba(119, 119, 119, 1);
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ // 记录卡片
|
|
|
|
+ .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/.uicon-arrow-down,
|
|
|
|
+ /deep/.uicon-arrow-right {
|
|
|
|
+ margin-left: 8rpx;
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+</style>
|