<template>
	<view class="AbnormalConsumption">
		<view class="" v-if="auth == 'false'"> 
			<div class="orderHeadWrapper">
				<img :src="ImgUrl+'wechatXZF/orderHead.png'" class="orderHead" alt="">
			</div>
			<div class="fixedBottomBtn" @click="openAzMenber">
				<img :src="ImgUrl+'wechatXZF/goToCost.png'" class="goToCost" alt="">
			</div>
		</view>
		<view class="exceptionContent" v-else>
			<view class="itemBar" v-if="cateringAbnormalGroupList.length">
				<view class="itemtitle">
					<image :src="ImgUrl+'user/remind.png'" class="img">
						<view class="subTitle">消费异常提醒</view>
				</view>
				<view class="record">
					<text>【{{userInfo.name||''}}】</text>
					<text class="redBlock">
						{{lastMeal}}({{cateringAbnormalGroupList[0].weekDate}})
						<text class="line"></text>
					</text>
					<text>在校消费有异常记录,</text>
					<text class="ml8">请家长及时关注哦~</text>
				</view>
				<view class="mealBar">
					<view class="meal breakfast" v-if="cateringAbnormalGroupList[0].zaoGroupInfo.isMessage">
						<view class="left">早餐</view>
						<view class="right">
							<view class="banner" v-if="cateringAbnormalGroupList[0].zaoGroupInfo.unrecorded">
								<image :src="ImgUrl+'user/mealIcon.png'" class="icon icon1">无就餐记录
							</view>
							<view class="banner" v-if="cateringAbnormalGroupList[0].zaoGroupInfo.abnormalTimeMessage">
								<image :src="ImgUrl+'user/timeIcon.png'" class="icon icon2">
									{{cateringAbnormalGroupList[0].zaoGroupInfo.abnormalTimeMessage}}
							</view>
							<view class="detail"
								v-for="item in cateringAbnormalGroupList[0].zaoGroupInfo.abnormalTimeList"
								:key="item.abnormalTime">
								<text>{{item.abnormalTime}}</text><text>{{item.businessName}}</text><text>{{item.abnormalMntStr}}</text>
							</view>
							<view
								:class="['banner', cateringAbnormalGroupList[0].zaoGroupInfo.unrecorded || cateringAbnormalGroupList[0].zaoGroupInfo.abnormalTimeMessage  ? 'mt20' : '']"
								v-if="cateringAbnormalGroupList[0].zaoGroupInfo.abnormalMntMessage">
								<image :src="ImgUrl+'user/timeIcon.png'" class="icon icon2">
									{{cateringAbnormalGroupList[0].zaoGroupInfo.abnormalMntMessage}}
							</view>
							<view class="detail"
								v-for="money in cateringAbnormalGroupList[0].zaoGroupInfo.abnormalMntList"
								:key="money.abnormalTime">
								<text>{{money.abnormalTime}}</text><text>{{money.businessName}}</text><text>{{money.abnormalMntStr}}</text>
							</view>
						</view>
					</view>
					<view class="meal lunch" v-if="cateringAbnormalGroupList[0].wuGroupInfo.isMessage">
						<view class="left">午餐</view>
						<view class="right">
							<view class="banner" v-if="cateringAbnormalGroupList[0].wuGroupInfo.unrecorded">
								<image :src="ImgUrl+'user/mealIcon.png'" class="icon icon1">无就餐记录
							</view>
							<view class="banner" v-if="cateringAbnormalGroupList[0].wuGroupInfo.abnormalTimeMessage">
								<image :src="ImgUrl+'user/timeIcon.png'" class="icon icon2">
									{{cateringAbnormalGroupList[0].wuGroupInfo.abnormalTimeMessage}}
							</view>
							<view class="detail"
								v-for="item in cateringAbnormalGroupList[0].wuGroupInfo.abnormalTimeList"
								:key="item.abnormalTime">
								<text>{{item.abnormalTime}}</text><text>{{item.businessName}}</text><text>{{item.abnormalMntStr}}</text>
							</view>
							<view
								:class="['banner', cateringAbnormalGroupList[0].wuGroupInfo.unrecorded || cateringAbnormalGroupList[0].wuGroupInfo.abnormalTimeMessage  ? 'mt20' : '']"
								v-if="cateringAbnormalGroupList[0].wuGroupInfo.abnormalMntMessage">
								<image :src="ImgUrl+'user/timeIcon.png'" class="icon icon2">
									{{cateringAbnormalGroupList[0].wuGroupInfo.abnormalMntMessage}}
							</view>
							<view class="detail"
								v-for="money in cateringAbnormalGroupList[0].wuGroupInfo.abnormalMntList"
								:key="money.abnormalTime">
								<text>{{money.abnormalTime}}</text><text>{{money.businessName}}</text><text>{{money.abnormalMntStr}}</text>
							</view>
						</view>
					</view>
					<view class="meal dinner" v-if="cateringAbnormalGroupList[0].wanGroupInfo.isMessage">
						<view class="left">晚餐</view>
						<view class="right">
							<view class="banner" v-if="cateringAbnormalGroupList[0].wanGroupInfo.unrecorded">
								<image :src="ImgUrl+'user/mealIcon.png'" class="icon icon1">无就餐记录
							</view>
							<view class="banner" v-if="cateringAbnormalGroupList[0].wanGroupInfo.abnormalTimeMessage">
								<image :src="ImgUrl+'user/moneyIcon.png'" class="icon icon3">
									{{cateringAbnormalGroupList[0].wanGroupInfo.abnormalTimeMessage}}
							</view>
							<view class="detail"
								v-for="item in cateringAbnormalGroupList[0].wanGroupInfo.abnormalTimeList"
								:key="item.abnormalTime">
								<text>{{item.abnormalTime}}</text><text>{{item.businessName}}</text><text>{{item.abnormalMntStr}}</text>
							</view>
							<view
								:class="['banner', cateringAbnormalGroupList[0].wanGroupInfo.unrecorded || cateringAbnormalGroupList[0].wanGroupInfo.abnormalTimeMessage  ? 'mt20' : '']"
								v-if="cateringAbnormalGroupList[0].wanGroupInfo.abnormalMntMessage">
								<image :src="ImgUrl+'user/timeIcon.png'" class="icon icon2">
									{{cateringAbnormalGroupList[0].wanGroupInfo.abnormalMntMessage}}
							</view>
							<view class="detail"
								v-for="money in cateringAbnormalGroupList[0].wanGroupInfo.abnormalMntList"
								:key="money.abnormalTime">
								<text>{{money.abnormalTime}}</text><text>{{money.businessName}}</text><text>{{money.abnormalMntStr}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="tips">
					<view class="what">
						<image :src="ImgUrl+'wechatXZF/question.png'" class="question">
							<view>什么是消费异常提醒？</view>
					</view>
					<view class="tipBlock">
						<view class="dotLine">在校消费超出学校建议范围时触发提醒，结果仅供参考：</view>
						<view class="dotLine">
							<view class="dot"></view>无就餐记录：餐别范围内无消费记录
						</view>
						<view class="dotLine">
							<view class="dot"></view>就餐时间异常：用餐时间早于/晚于学校的建议范围
						</view>
						<view class="dotLine">
							<view class="dot"></view>就餐金额提醒：餐别消费金额超出学校的建议范围
						</view>
					</view>
				</view>
			</view>
			<view class="nodatatoday" v-else>
				<view class="itemtitle">
					<image :src="ImgUrl+'user/remind.png'" class="img">
						<view class="subTitle">消费异常提醒</view>
				</view>
				<view class="nodataimg">
					<image :src="ImgUrl+'user/exception.png'" class="nodata">
				</view>
				<view class="tip">消费无异常</view>
			</view>

			<view class="itemBar lastBar" v-if="cateringAbnormalGroupList.length">
				<view class="itemtitle">
					<image :src="ImgUrl+'user/remind.png'" class="img">
						<view class="subTitle">近30天消费异常</view>
				</view>
				<view class="lineBlock" v-for="group in cateringAbnormalGroupList" :key="group.statisticalDate">
					<view class="week" v-if="group.date">
						<view class="dot">
						</view>
						<view>{{group.date}}</view>
						<view>{{group.weekDate}}</view>
					</view>
					<view class="mealBar">
						<view>
							<view class="meal breakfast" v-if="group.zaoGroupInfo.isMessage">
								<view class="left">早餐</view>
								<view class="right">
									<view class="banner" v-if="group.zaoGroupInfo.unrecorded">
										<image :src="ImgUrl+'user/mealIcon.png'" class="icon icon1">无就餐记录
									</view>
									<view class="banner" v-if="group.zaoGroupInfo.abnormalTimeMessage">
										<image :src="ImgUrl+'user/timeIcon.png'" class="icon icon2">
											{{group.zaoGroupInfo.abnormalTimeMessage}}
									</view>
									<view class="detail" v-for="item in group.zaoGroupInfo.abnormalTimeList"
										:key="item.abnormalTime">
										<text>{{item.abnormalTime}}</text><text>{{item.businessName}}</text><text>{{item.abnormalMntStr}}</text>
									</view>
									<view
										:class="['banner', group.zaoGroupInfo.unrecorded || group.zaoGroupInfo.abnormalTimeMessage  ? 'mt20' : '']"
										v-if="group.zaoGroupInfo.abnormalMntMessage">
										<image :src="ImgUrl+'user/timeIcon.png'" class="icon icon2">
											{{group.zaoGroupInfo.abnormalMntMessage}}
									</view>
									<view class="detail" v-for="money in group.zaoGroupInfo.abnormalMntList"
										:key="money.abnormalTime">
										<text>{{money.abnormalTime}}</text><text>{{money.businessName}}</text><text>{{money.abnormalMntStr}}</text>
									</view>
								</view>
							</view>
							<view class="meal lunch" v-if="group.wuGroupInfo.isMessage">
								<view class="left">午餐</view>
								<view class="right">
									<view class="banner" v-if="group.wuGroupInfo.unrecorded">
										<image :src="ImgUrl+'user/mealIcon.png'" class="icon icon1">无就餐记录
									</view>
									<view class="banner" v-if="group.wuGroupInfo.abnormalTimeMessage">
										<image :src="ImgUrl+'user/timeIcon.png'" class="icon icon2">
											{{group.wuGroupInfo.abnormalTimeMessage}}
									</view>
									<view class="detail" v-for="item in group.wuGroupInfo.abnormalTimeList"
										:key="item.abnormalTime">
										<text>{{item.abnormalTime}}</text><text>{{item.businessName}}</text><text>{{item.abnormalMntStr}}</text>
									</view>
									<view
										:class="['banner', group.wuGroupInfo.unrecorded || group.wuGroupInfo.abnormalTimeMessage  ? 'mt20' : '']"
										v-if="group.wuGroupInfo.abnormalMntMessage">
										<image :src="ImgUrl+'user/timeIcon.png'" class="icon icon2">
											{{group.wuGroupInfo.abnormalMntMessage}}
									</view>
									<view class="detail" v-for="money in group.wuGroupInfo.abnormalMntList"
										:key="money.abnormalTime">
										<text>{{money.abnormalTime}}</text><text>{{money.businessName}}</text><text>{{money.abnormalMntStr}}</text>
									</view>
								</view>
							</view>
							<view class="meal dinner" v-if="group.wanGroupInfo.isMessage">
								<view class="left">晚餐</view>
								<view class="right">
									<view class="banner" v-if="group.wanGroupInfo.unrecorded">
										<image :src="ImgUrl+'user/mealIcon.png'" class="icon icon1">无就餐记录
									</view>
									<view class="banner" v-if="group.wanGroupInfo.abnormalTimeMessage">
										<image :src="ImgUrl+'user/timeIcon.png'" class="icon icon2">
											{{group.wanGroupInfo.abnormalTimeMessage}}
									</view>
									<view class="detail" v-for="item in group.wanGroupInfo.abnormalTimeList"
										:key="item.abnormalTime">
										<text>{{item.abnormalTime}}</text><text>{{item.businessName}}</text><text>{{item.abnormalMntStr}}</text>
									</view>
									<view
										:class="['banner', group.wanGroupInfo.unrecorded || group.wanGroupInfo.abnormalTimeMessage  ? 'mt20' : '']"
										v-if="group.wanGroupInfo.abnormalMntMessage">
										<image :src="ImgUrl+'user/timeIcon.png'" class="icon icon2">
											{{group.wanGroupInfo.abnormalMntMessage}}
									</view>
									<view class="detail" v-for="money in group.wanGroupInfo.abnormalMntList"
										:key="money.abnormalTime">
										<text>{{money.abnormalTime}}</text><text>{{money.businessName}}</text><text>{{money.abnormalMntStr}}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="leftLine"></view>
				</view>
			</view>
			<view class="nodatatoday nodatatoday1" v-else>
				<view class="itemtitle">
					<image :src="ImgUrl+'user/remind.png'" class="img">
						<view class="subTitle">近30天消费异常</view>
				</view>
				<view class="nodataimg">
					<image :src="ImgUrl+'user/exception1.png'" class="nodata1">
				</view>
				<view class="tip">近30天内无异常</view>
			</view>
			<!-- 	<view class="more">
				<view>更多消费明细，请前往</view>
				<view class="green" @click="toDoOtherPage">消费明细</view>
				<view class="ml15 green">》</view>
			</view> -->
		</view>
	</view>
</template>

<script>
// 时间处理模块
import dayjs from "dayjs";
import { Dialog } from "vant";
let gHost = "https://" +  window.location.host;
if (window.location.protocol != "https:") {
  gHost = "https://test-az-cloud-api.xiaopay.net";
}
if (window.location.host == "fpdev.xiaopay.net") {
  gHost = "https://dev-az-cloud-api.xiaopay.net";
}
if (window.location.host == "uat.xiaopay.net") {
  gHost = "https://test-az-cloud-api.xiaopay.net";
}
if (window.location.host == "pay.xiaopay.net") {
  gHost = "https://az-cloud-api.xiaopay.net";
}
export default {
  name: "AbnormalConsumption",
  data() {
    return {
      cateringAbnormalGroupList: [],
      ImgUrl: this.$ImgUrl,
      userInfo: {
        name: "",
      },
      auth: "",
    };
  },
  onLoad(options) {
    console.warn(options);
    this.auth = options.auth;
    if (!options["schoolId"] || !options["userId"]) {
      Dialog({
        title: "温馨提示！",
        message: "学生Id或学校Id为必传参数！",
        confirmButtonText: "知道了",
      }).then((res) => {
        window.close();
      });
      return;
    }
    this.userInfo["name"] = options["name"] || "***";
    // 查询记录
    this.getCateringAbnormalGroupList(options["schoolId"], options["userId"]);
    // this.CloudGatewayToken(options['schoolId'], options['userId'])
  },
  methods: {
	// 跳转云平台权益中心
	async openAzMenber() {
		jWeixin.miniProgram.navigateTo({
			url: '/pages/nationalCenterForLesbianRights/index?productId=3'
		})
	},
    // 页面跳转
    toDoOtherPage() {
      try {
        my.navigateTo({
          url: "pages/ConsumptIoninfo/ConsumptIoninfo",
        });
      } catch (e) {
        //TODO handle the exception
        uni.showToast({
          icon: "none",
          title: "功能升级中！",
        });
      }
    },
    // 根据学生id获取用户信息
    getByStuInfo(studentId, Authorization, AuthOauthToken) {
      const header = {
        Authorization: Authorization || "",
        AuthOauthToken: AuthOauthToken || "",
      };
      const student1 = this.$http.get({
        // 云平台
        url: `${gHost}/cloud-gateway/basic-web/student/${studentId}`,
        header,
      });
      const student2 = this.$http.get({
        // 校园
        url: `${gHost}/cloud-gateway/basic-service/getByAzxyStuId/${studentId}`,
        header,
      });
      const student3 = this.$http.get({
        // 校智付
        url: `${gHost}/cloud-gateway/basic-service/getByXzfStuId/${studentId}`,
        header,
      });
      return Promise.all([student1, student2, student3]);
    },
    // 获取云平台网关token
    async CloudGatewayToken(schoolId, userId) {
      let res = await this.$http.post(
        {
          url: `${gHost}/cloud-gateway/auth/oauth/token`,
          header: {
            "Content-Type": "application/x-www-form-urlencoded",
          },
        },
        {
          client_id: "",
          client_secret: "",
          grant_type: "",
        }
      );
      if (res.code == 200) {
        const Authorization = res.data.tokenHead + res.data.token;
        const AuthOauthToken = res.data.token;
        uni.setStorageSync("Authorization", Authorization);
        uni.setStorageSync("AuthOauthToken", AuthOauthToken);
        // 查询记录
        this.getCateringAbnormalGroupList(schoolId, userId);
        // 获取学生信息
        const StuInfo = await this.getByStuInfo(
          userId,
          Authorization,
          AuthOauthToken
        );
        for (let s of StuInfo) {
          if (s.code == 10000 && s.data) {
            this.userInfo = s.data;
          }
        }
      } else {
        uni.showToast({
          icon: "none",
          title: "获取云平台token失败!",
        });
      }
    },
    // 用户消费异常列表分组信息
    async getCateringAbnormalGroupList(schoolId, userId) {
      const params = {
        userId,
        schoolId,
        startDate: dayjs().subtract(30, "days").format("YYYY-M-DD"),
        endDate: dayjs().format("YYYY-M-DD"),
      };
      try {
        let data = await this.$http.post(
          {
            header: {
              Authorization: uni.getStorageSync("Authorization") || "",
              AuthOauthToken: uni.getStorageSync("AuthOauthToken") || "",
              "Content-Type": "application/x-www-form-urlencoded",
            },
            url: `${gHost}/cloud-gateway/bill/cateringAbnormal/getCateringAbnormalGroupList`,
          },
          params
        );
        if (data.code != 200) {
          uni.showToast({
            icon: "none",
            title: data.message || "发生异常!",
          });
          return;
        }
        let res = data.data;
        this.cateringAbnormalGroupList = res;
        if (res.length) {
          this.lastMeal =
            new Date(res[0].statisticalDate).getMonth() +
            1 +
            "月" +
            new Date(res[0].statisticalDate).getDate() +
            "日";
        }
      } catch (e) {
        console.warn(e);
        //TODO handle the exception
        uni.showToast({
          icon: "none",
          title: "发生异常错误!",
        });
      }
    },
  },
};
</script>

<style lang="scss">
.orderHeadWrapper {
  width: 100%;
  background: #f0f1f1;
  display: flex;
  flex-direction: column;
  padding-top: 24rpx;
  padding-bottom: 160rpx;

  .orderHead {
    width: 702rpx;
    height: 2275rpx;
    margin: 0 auto;
  }
}

.fixedBottomBtn {
  width: 100%;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 154rpx;
  text-align: center;

  .goToCost {
    width: 742rpx;
    height: 154rpx;
  }
}
.tips {
  margin: 0 auto;
  margin-top: 24rpx;
  width: 622rpx;
  height: 218rpx;
  background: #f8f8f8;
  display: flex;
  flex-direction: column;
  border-radius: 12rpx;

  .what {
    margin-top: 18rpx;
    font-size: 26rpx;
    color: rgba(0, 0, 0, 0.85);
    height: 37rpx;
    line-height: 37rpx;
    padding-left: 25rpx;
    display: inline-flex;

    .question {
      width: 24rpx;
      height: 24rpx;
      margin-right: 8rpx;
      align-self: center;
    }
  }

  .tipBlock {
    margin-top: 9rpx;
    margin-left: 38rpx;
    width: calc(100% - 38rpx);
    display: flex;
    flex-direction: column;
    font-size: 22rpx;
    margin-top: 9rpx;
    line-height: 34rpx;
    color: rgba(0, 0, 0, 0.5);

    .dotLine {
      height: 34rpx;
      display: inline-flex;

      .dot {
        align-self: center;
        width: 7rpx;
        height: 7rpx;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.5);
        margin-right: 10rpx;
      }
    }
  }
}
.AbnormalConsumption {
  background: #f0f1f1;
  padding-top: 24rpx;
}

.exceptionContent {
  width: 702rpx;
  height: 100%;
  min-height: 100vh;
  background: #f0f1f1;
  margin: 0 auto;
  // padding: 24rpx 5vw 0;
  // margin-left: -5vw;

  .nodatatoday {
    display: flex;
    flex-direction: column;
    background: white;
    margin-bottom: 34rpx;
    border-radius: 16rpx;

    .nodataimg {
      width: 100%;
      height: 254rpx;
      display: flex;
      justify-content: center;
      margin-top: 120rpx;

      .nodata {
        width: 501rpx;
        height: 254rpx;
      }
    }

    .tip {
      display: flex;
      width: 100%;
      justify-content: center;
      height: 40rpx;
      font-size: 28rpx;
      color: rgba(0, 0, 0, 0.45);
      line-height: 40rpx;
      padding-bottom: 84rpx;
    }
  }

  .nodatatoday1 {
    .nodataimg {
      margin-top: 130rpx;

      .nodata1 {
        width: 500rpx;
        height: 232rpx;
      }
    }
  }

  .itemtitle {
    width: 100%;
    height: 43rpx;
    display: flex;
    justify-content: center;
    margin-top: 40rpx;
    position: relative;
    margin-bottom: 45rpx;

    .img {
      width: 232rpx;
      height: 43rpx;
    }

    .subTitle {
      position: absolute;
      left: 50%;
      top: 46rpx;
      transform: translate(-50%, -50%);
      font-weight: 500;
      font-size: 34rpx;
      height: 48rpx;
      line-height: 48rpx;
    }
  }

  .itemBar {
    width: 100%;
    background: #ffffff;
    border-radius: 16rpx;
    display: flex;
    flex-direction: column;
    margin-bottom: 24rpx;
    padding-bottom: 32rpx;

    .record {
      font-size: 28rpx;
      color: rgba(0, 0, 0, 0.85);
      line-height: 40rpx;
      display: flex;
      flex-wrap: wrap;
      padding: 0 28rpx;

      p {
        display: flex;
        flex-wrap: wrap;
      }

      .redBlock {
        display: inline-block;
        position: relative;
        color: #ef4034;

        .line {
          position: absolute;
          left: 0;
          top: calc(100% - 10rpx);
          width: 100%;
          height: 5rpx;
          background: rgba(239, 64, 52, 0.14);
          display: block;
        }
      }

      .ml8 {
        margin-left: 8rpx;
      }
    }
  }

  .mealBar {
    margin: 20rpx 40rpx 0 40rpx;
    display: flex;
    flex-direction: column;
    background: #fcf5f5;
    border-radius: 12rpx;
    padding-top: 20rpx;
    padding-bottom: 28rpx;

    .meal {
      display: flex;
      margin-top: 13rpx;
      padding-bottom: 16rpx;

      .left {
        width: 88rpx;
        padding-right: 24rpx;
        line-height: 44rpx;
        font-weight: 500;
        color: rgba(0, 0, 0, 0.85);
        font-size: 28rpx;
        text-align: right;
      }

      .right {
        flex: 1;
        display: flex;
        flex-wrap: wrap;

        .banner {
          display: flex;
          width: auto;
          height: 44rpx;
          line-height: 44rpx;
          background: rgba(239, 64, 52, 0.09);
          padding-left: 14rpx;
          padding-right: 10rpx;
          border-radius: 5rpx;
          color: #ef4034;
          font-size: 28rpx;

          .icon {
            align-self: center;
            margin-right: 4rpx;
          }

          .icon1 {
            width: 29rpx;
            height: 24rpx;
          }

          .icon2 {
            width: 26rpx;
            height: 25rpx;
          }

          .icon3 {
            width: 25rpx;
            height: 25rpx;
          }
        }

        .mt20 {
          margin-top: 20rpx;
        }

        .detail {
          width: 100%;
          display: flex;
          height: 37rpx;
          margin-bottom: 10rpx;
          margin-top: 16rpx;

          text {
            margin-right: 12rpx;
            color: rgba(0, 0, 0, 0.85);
            font-size: 26rpx;
            line-height: 37rpx;
          }

          text:nth-child(2) {
            max-width: 180rpx;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
        }

        .detail + .detail {
          margin-top: 0;
        }

        .detail:last-child {
          margin-bottom: 4rpx;
        }
      }
    }

    .breakfast,
    .lunch {
      // padding-bottom: 28rpx;
      border-bottom: 1rpx dashed #ffcbc9;
    }

    .dinner {
      padding-top: 21rpx;
      padding-bottom: 32rpx;
    }

    .meal:last-child {
      padding-bottom: 0;
      border-bottom: 0;
    }
  }

  .lastBar {
    width: 100%;
    display: flex;

    .lineBlock {
      width: 100%;
      display: flex;
      flex-direction: column;
      position: relative;

      .leftLine {
        position: absolute;
        left: 46rpx;
        top: 35rpx;
        width: 1rpx;
        background: #d2d2d2;
        height: calc(100% + 20rpx);
        z-index: 1;
      }
    }

    .lineBlock:last-child {
      .leftLine {
        height: 0;
      }
    }

    .lineBlock + .lineBlock {
      margin-top: 32rpx;
    }

    .week {
      display: flex;
      height: 56rpx;
      line-height: 56rpx;
      font-size: 44rpx;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.85);
      padding-left: 40rpx;

      view {
        align-self: flex-end;
      }

      .dot {
        width: 12rpx;
        height: 12rpx;
        margin-right: 22rpx;
        background: #ef4034;
        border-radius: 50%;
        align-self: center;
        position: relative;
        z-index: 2;
      }

      view:last-child {
        margin-left: 15rpx;
        color: rgba(0, 0, 0, 0.85);
        font-size: 24rpx;
        font-weight: 400;
      }
    }

    .mealBar {
      margin: 20rpx 48rpx 0 76rpx;
      position: relative;

      .breakfast,
      .lunch {
        border-bottom: 0;
      }

      .lunch {
        padding-bottom: 0;
      }
    }
  }

  .more {
    width: 100%;
    display: inline-flex;
    height: 94rpx;
    line-height: 94rpx;
    justify-content: center;
    background: #ffffff;
    border-radius: 16rpx;
    font-size: 28rpx;
    color: rgba(0, 0, 0, 0.85);
    margin-bottom: 24rpx;

    .ml15 {
      margin-left: 15rpx;
    }

    .green {
      margin-left: 4rpx;
      font-weight: 500;
      color: #04b871;
    }
  }
}
</style>