From 8514c85adfa817238a019c70cb7835ef27d65afd Mon Sep 17 00:00:00 2001
From: wangrongrong <wangrongrong@ccsens.com>
Date: Wed, 4 Aug 2021 20:50:20 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=A6=96=E9=A1=B5=E9=A1=B9=E7=9B=AE?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E6=94=B9=E5=8F=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG.md                            |   2 +
 src/components/Projects/ProjectItem.vue |   7 ++
 src/components/Projects/Projects.vue    | 123 +++++++++++++++++++++---
 src/components/Upload/Upload.vue        |  31 +++---
 4 files changed, 133 insertions(+), 30 deletions(-)
 create mode 100644 src/components/Projects/ProjectItem.vue

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 32260e6..d6c8917 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,7 @@
 --|--|--
  - | 上传逻辑变化 | [3ff1dc2](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/3ff1dc2)
  plugin | 插件添加了token及param参数 | [aeb0292](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/aeb0292)
+ task status | 任务状态切换未完 | [7ffd135](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/7ffd135)
  - | 标题栏变化 | [3898cfe](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/3898cfe)
  - | 标题栏变化 | [c0fcd9d](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/c0fcd9d)
  - | 标题栏角色栏全局任务组件新建 | [0500cb4](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/0500cb4)
@@ -93,6 +94,7 @@
 ### 🔨 代码重构
 范围|描述|commitId
 --|--|--
+ calendar | 日历细节调整 | [1a8d6bf](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/1a8d6bf)
  store/home | 删除store/home | [db8a3b4](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/db8a3b4)
  task beginTime | 格式化任务开始时间 | [fbc0301](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/fbc0301)
  tip | 任务状态显示及tip组件数据的重构 | [78a5750](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/78a5750)
diff --git a/src/components/Projects/ProjectItem.vue b/src/components/Projects/ProjectItem.vue
new file mode 100644
index 0000000..84ff924
--- /dev/null
+++ b/src/components/Projects/ProjectItem.vue
@@ -0,0 +1,7 @@
+<template>
+  <view class="flex items-center justify-between">
+  这是子项目
+</template>
+<script>
+export default {};
+</script>
diff --git a/src/components/Projects/Projects.vue b/src/components/Projects/Projects.vue
index 6072cba..6e02015 100644
--- a/src/components/Projects/Projects.vue
+++ b/src/components/Projects/Projects.vue
@@ -1,26 +1,61 @@
 <template>
-  <view class="p-3 bg-white">
+  <view class="bg-white">
     <view class="flex items-center">
-      <image class="w-8 h-8 ml-1 mr-4 bg-yellow-700 rounded-full" src="../../static/local_play1.png"></image>
-      <view class="text-sm font-semibold">我的LWBS</view>
+      <view class="event-pic rounded-full flex justify-center items-center">
+        <image style="width: 25px; height: 25px" src="../../static/local_play1.png"></image>
+      </view>
+      <view class="title">我的LWBS</view>
     </view>
-    <view class="flex items-center justify-between p-2 task" v-for="(task, index) in tasks" :key="index">
-      <view class="flex items-center">
-        <view class="w-8 h-8 ml-1 mr-2 bg-blue-300 rounded-full">
-          <view class="flex items-center justify-center w-8 h-8">{{ index + 1 }}</view>
-        </view>
-        <view>
+    <view class="p-2 task" v-for="(task, index) in tasks" :key="index">
+      <view>
+        <!-- 有子项目 -->
+        <view class="flex items-center justify-between" v-if="index <= 2">
           <view class="flex items-center">
-            <view class="text-sm font-semibold">{{ task.taskName }}</view>
-            <view class="pl-2 pr-2 text-green-500 bg-green-200 rounded-full">{{ task.state }}</view>
+            <view class="firstTask ml-1 mr-2 rounded-full text-white" v-if="index === 0">
+              <view class="flex items-center justify-center">{{ index + 1 }}</view>
+            </view>
+            <view class="sencondTask ml-1 mr-2 rounded-full text-white" v-else-if="index === 1">
+              <view class="flex items-center justify-center">{{ index + 1 }}</view>
+            </view>
+            <view class="thirdTask ml-1 mr-2 rounded-full text-white" 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="states px-2 text-green-400 bg-green-100 rounded-full">{{ task.state }}</view>
+              </view>
+              <view class="dates flex items-center text-gray-400">
+                <view class="pr-2">{{ task.time }}</view>
+                <view>时长：{{ task.duration }}</view>
+              </view>
+            </view>
           </view>
-          <view class="flex items-center text-gray-400">
-            <view class="pr-2">{{ task.time }}</view>
-            <view>时长：{{ task.duration }}</view>
+          <u-icon name="arrow-right" size="28" @click="openProjectItem(index)"></u-icon>
+        </view>
+        <!-- 没有子项目 -->
+        <view v-else>
+          <view class="flex items-center">
+            <view class="routine w-8 h-8 ml-1 mr-2 bg-white border rounded-full">
+              <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="states px-2 text-green-400 bg-green-100 rounded-full">{{ task.state }}</view>
+              </view>
+              <view class="dates flex items-center text-gray-400">
+                <view class="pr-2">{{ task.time }}</view>
+                <view>时长：{{ task.duration }}</view>
+              </view>
+            </view>
           </view>
         </view>
+        <view v-if="isrotate === index">
+          这是子项目
+          <ProjectItem />
+        </view>
       </view>
-      <u-icon name="arrow-right" size="28"></u-icon>
     </view>
   </view>
 </template>
@@ -81,3 +116,61 @@ export default {
   },
 };
 </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: 16px;
+}
+.dates {
+  font-size: 12px;
+}
+.states {
+  font-size: 10px;
+  margin: 2px;
+}
+</style>
diff --git a/src/components/Upload/Upload.vue b/src/components/Upload/Upload.vue
index 462f282..b2883b2 100644
--- a/src/components/Upload/Upload.vue
+++ b/src/components/Upload/Upload.vue
@@ -14,8 +14,8 @@
         :before-upload="beforeUpload"
         max-count="6"
       >
-        <view slot="addBtn" class="h-10 w-10 flex justify-center items-center bg-white rounded-full" hover-stay-time="150">
-          <u-icon name="plus" color="#ffffff" size="48" class="flex justify-center h-10 w-10 bg-blue-500 rounded-full"></u-icon>
+        <view slot="addBtn" class="bgIcon flex justify-center items-center rounded-full" hover-stay-time="150">
+          <u-icon name="plus" color="#ffffff" size="48" class="uploadIcon flex justify-center rounded-full"></u-icon>
         </view>
       </u-upload>
     </view>
@@ -61,8 +61,10 @@ export default {
 </script>
 <style lang="scss">
 .upload {
-  display: flex;
-  flex-direction: row-reverse;
+  position: relative;
+  left: 80%;
+  bottom: 25px;
+  height: 20px;
 }
 .one {
   position: relative;
@@ -74,15 +76,14 @@ export default {
   width: 50px;
   height: 50px;
 }
-// .slot-btn {
-//   // display: flex;
-//   // justify-content: center;
-//   // align-items: center;
-//   // background: rgb(244, 245, 246);
-//   border-radius: 10rpx;
-// }
-
-// .slot-btn__hover {
-//   background-color: rgb(235, 236, 238);
-// }
+.uploadIcon {
+  background: linear-gradient(45deg, #0081ff, #1cbbb4);
+  height: 50px;
+  width: 50px;
+}
+.bgIcon {
+  background: white;
+  height: 50px;
+  width: 50px;
+}
 </style>