<template>
  <view class="content">
    <u-navbar
      :is-back="false"
      title="计划列表"
      :background="{ backgroundColor: '#F7F8FC' }"
      :border-bottom="false"
    >
      <view slot="right"> 424242 </view>
    </u-navbar>

    <view class="selectTab">
      <view class="tab-item">
        <view class="label">已完成计划</view>
        <view class="count">12</view>
      </view>
      <view class="tab-item">
        <view class="label">未完成计划</view>
        <view class="count">5</view>
      </view>
    </view>

    <view class="planList">
      <view class="plan-item">
        <view class="time">
          <u-icon
            label="uView"
            size="40"
            name="https://cdn.uviewui.com/uview/example/button.png"
          ></u-icon>
          <view class="date">05-21</view>
        </view>
        <view class="place-time">
          <view class="place">校门A区教学楼</view>
          <u-tag text="9:00~12:00" type="info" border-color="transparent" />
        </view>
        <view class="illustrate">
          北大门右侧操场跑道/南广场升旗台/A区第二食堂3楼
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  created() {},
  methods: {},
};
</script>

<style lang="scss" scoped>
.content {
  height: 100vh;
  background: #f7f8fc;
  .selectTab{
    padding: 42rpx 90rpx;
    display: flex;
    justify-content: space-between;
    // background: ;
    .tab-item{
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 50%;
      background: #fff;
      .label{
        font-size: 28rpx;
        color: #333;
      }
      .count{
        font-size: 24rpx;
        color: #999;
      }
    }
  }
  .planList {
    padding: 0 32rpx;
    .plan-item {
      margin-top: 32rpx;
      padding: 32rpx;
      background: #fff;
    }
  }
}
</style>
