<template>
  <div class="plan">
    <div v-for="(item,index) in planformList" :key="index">
      <div class="title"><img src="../../assets/icon1.png" alt="">{{item.projectName}}</div>
      <div class="list" v-for="items in item.projectList" :key="items.id">
        <div class="box">
          <div><span>{{items.content}}</span><span>{{items.serviceContent}}</span></div>
          <div><span>总服务次数：{{items.serviceNum}}</span><span>已完成次数：{{items.finishNum}}</span></div>
        </div>
        <div class="but">
          <van-button size="mini" @click="$router.push({path: '/specialServices/startServiceplay',query:{item:items}})">开始服务</van-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: ['planformList'],
  data() {
    return {}
  },
}
</script>
<style lang="scss" scoped>
.title {
  font-size: 30px;
  display: flex;
  align-items: center;
  height: 80px;
  padding: 0 30px;
  border-bottom: 1px solid #eee;
  img {
    width: 40px;
    height: 40px;
    margin-right: 10px;
  }
}
.list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  line-height: 60px;
  padding: 0 30px;
  text-align: left;
  color: #999;
  font-size: 26px;
  border-bottom: 1px solid #eee;
  div {
    span {
      margin: 0 16px;
    }
  }
}
.van-button {
  width: 160px;
  background-color: #1677ff;
  color: #fff;
  font-size: 24px;
  border-radius: 8px;
}
</style>