combination-tall/src/components/Projects/Projects.vue

<template>
  <view class="bg-white u-p-t-30 u-p-b-30">
    <view class="flex items-center">
      <view class="flex items-center justify-center rounded-full event-pic">
        <image style="width: 25px; height: 25px" src="../../static/local_play1.png"></image>
      </view>
      <view class="title">我的LWBS</view>
    </view>
    <view v-for="(task, index) in tasks" :key="index">
      <view>
        <!-- 有子项目 -->
        <view class="flex items-center justify-between item" v-if="index <= 2">
          <view class="flex items-center">
            <view class="text-white rounded-full firstTask" v-if="index === 0">
              <view class="flex items-center justify-center">{{ index + 1 }}</view>
            </view>
            <view class="text-white rounded-full sencondTask" v-else-if="index === 1">
              <view class="flex items-center justify-center">{{ index + 1 }}</view>
            </view>
            <view class="text-white rounded-full thirdTask" v-else-if="index === 2">
              <view class="flex items-center justify-center">{{ index + 1 }}</view>
            </view>
            <view>
              <view class="flex items-center">
                <view class="title">{{ task.taskName }}</view>
                <!-- 状态 -->
                <view class="text-green-400 bg-green-100 rounded-full u-p-l-10 u-p-r-10 states">{{ task.state }}</view>
              </view>
              <view class="flex items-center text-gray-400 dates">
                <view class="pr-2">{{ task.time }}</view>
                <view>时长：{{ task.duration }}</view>
              </view>
            </view>
          </view>
          <!-- 箭头 -->
          <u-icon name="arrow-right" color="#A4A6AB" size="14px" @click="openProjectItem(index)"></u-icon>
        </view>
        <!-- 没有子项目 -->
        <view class="item" v-else>
          <view class="flex items-center">
            <view class="w-8 h-8 bg-white border rounded-full routine">
              <view class="flex items-center justify-center">{{ index + 1 }}</view>
            </view>
            <view>
              <view class="flex items-center">
                <view class="title">{{ task.taskName }}</view>
                <view class="px-2 text-green-400 bg-green-100 rounded-full states">{{ task.state }}</view>
              </view>
              <view class="flex items-center text-gray-400 dates">
                <view class="pr-2">{{ task.time }}</view>
                <view>时长：{{ task.duration }}</view>
              </view>
            </view>
          </view>
        </view>
        <view v-if="isrotate === index">
          这是子项目
          <ProjectItem />
        </view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      isrotate: -1,
      tasks: [
        {
          taskName: '山西省三大中心建设',
          state: '正在进行',
          time: '05月31日 00：00',
          duration: '365天',
        },
        {
          taskName: '1号康复室',
          state: '正在进行',
          time: '01月31日 00：00',
          duration: '727天',
        },
        {
          taskName: '盐湖医院远程康复',
          state: '正在进行',
          time: '05月31日 00：00',
          duration: '65天',
        },
        {
          taskName: '山西省三大中心建设',
          state: '正在进行',
          time: '05月31日 00：00',
          duration: '365天',
        },
        {
          taskName: '1号康复室',
          state: '正在进行',
          time: '01月31日 00：00',
          duration: '727天',
        },
        {
          taskName: '盐湖医院远程康复',
          state: '正在进行',
          time: '05月31日 00：00',
          duration: '65天',
        },
      ],
    };
  },
  methods: {
    // 展开子项目
    openProjectItem(index) {
      if (this.isrotate === -1) {
        this.isrotate = index;
      } else {
        this.isrotate = -1;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.firstTask {
  background: linear-gradient(45deg, #9000ff, #5e00ff);
  width: 32px;
  height: 32px;
  margin-right: 16px;
  line-height: 32px;
  font-size: 16px;
  text-align: center;
  border: 1px solid #eee;
}
.sencondTask {
  background: linear-gradient(45deg, #0081ff, #1cbbb4);
  width: 32px;
  height: 32px;
  margin-right: 16px;
  line-height: 32px;
  font-size: 16px;
  text-align: center;
  border: 1px solid #eee;
}
.thirdTask {
  background: linear-gradient(45deg, #39b54a, #8dc63f);
  width: 32px;
  height: 32px;
  margin-right: 16px;
  line-height: 32px;
  font-size: 16px;
  text-align: center;
  border: 1px solid #eee;
}
.routine {
  width: 32px;
  height: 32px;
  margin-right: 16px;
  line-height: 32px;
  font-size: 16px;
  text-align: center;
  border: 1px solid #eee;
}
.event-pic {
  margin: 0 14px;
  width: 36px;
  height: 36px;
  background: linear-gradient(45deg, #ff9700, #ed1c24);
}
.title {
  font-size: 15px;
  margin-right: 12px;
}
.dates {
  font-size: 12px;
}
.states {
  font-size: 10px;
}
.item {
  border-bottom: 1px solid #fafafa;
  height: 60px;
  padding: 10px 16px;
}
</style>