<template> <view class="schedule"> <view class="schedule-title"> <view class="schedule-title-item"> 周一 </view> <view class="schedule-title-item"> 周二 </view> <view class="schedule-title-item"> 周三 </view> <view class="schedule-title-item"> 周四 </view> <view class="schedule-title-item"> 周五 </view> </view> <view v-for="(item,index) in list" :key="index" class="schedule-content"> <view v-for="(item1,index1) in item.arr" :key="index1" class="schedule-content-item"> <view class="schedule-content-item-name"> {{item1.name}} </view> <view style="line-height: 0;margin: 14rpx 0;" class="schedule-content-item-name"> {{item1.date}} </view> <view class="schedule-content-item-name"> {{item1.teacher}} </view> </view> </view> </view> </template> <script> export default { name: "Schedule", data() { return { list: [{ arr: [{ name: '语文', date: '8:00-8:45', teacher: '王老师' }, { name: '语文', date: '8:00-8:45', teacher: '王老师' }, { name: '语文', date: '8:00-8:45', teacher: '王老师' }, { name: '语文', date: '8:00-8:45', teacher: '王老师' }, { name: '语文', date: '8:00-8:45', teacher: '王老师' }, ] }, { arr: [{ name: '语文', date: '8:00-8:45', teacher: '王老师' }, { name: '语文', date: '8:00-8:45', teacher: '王老师' }, { name: '语文', date: '8:00-8:45', teacher: '王老师' }, { name: '语文', date: '8:00-8:45', teacher: '王老师' }, { name: '语文', date: '8:00-8:45', teacher: '王老师' }, ] }, { arr: [{ name: '语文', date: '8:00-8:45', teacher: '王老师' }, { name: '语文', date: '8:00-8:45', teacher: '王老师' }, { name: '语文', date: '8:00-8:45', teacher: '王老师' }, { name: '语文', date: '8:00-8:45', teacher: '王老师' }, { name: '语文', date: '8:00-8:45', teacher: '王老师' }, ] }, { arr: [{ name: '语文', date: '8:00-8:45', teacher: '王老师' }, { name: '语文', date: '8:00-8:45', teacher: '王老师' }, { name: '语文', date: '8:00-8:45', teacher: '王老师' }, { name: '语文', date: '8:00-8:45', teacher: '王老师' }, { name: '语文', date: '8:00-8:45', teacher: '王老师' }, ] } ] }; } } </script> <style lang="scss" scoped> .schedule { width: 100%; box-sizing: border-box; .schedule-title { height: 70rpx; width: 100%; background: #05cca1; border-radius: 10rpx; display: flex; margin-bottom: 16rpx; .schedule-title-item { flex: 1; display: flex; align-items: center; justify-content: center; color: #fff; } } .schedule-content { width: 100%; display: flex; justify-content: space-between; font-size: 20rpx; margin-bottom: 16rpx; .schedule-content-item { width: 126rpx; height: 140rpx; background: #cef1e9; border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; } } } </style>