feat: 首页项目样式改变

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)

src/components/Projects/ProjectItem.vue

@@ -0,0 +1,7 @@
+<template>
+  <view class="flex items-center justify-between">
+  这是子项目
+</template>
+<script>
+export default {};
+</script>

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="flex items-center justify-between p-2 task" v-for="(task, index) in tasks" :key="index">
+      <view class="title">我的LWBS</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="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>
+          <u-icon name="arrow-right" size="28" @click="openProjectItem(index)"></u-icon>
+        </view>
+        <!-- 没有子项目 -->
+        <view v-else>
           <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 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="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="title">{{ task.taskName }}</view>
+                <view class="states px-2 text-green-400 bg-green-100 rounded-full">{{ task.state }}</view>
               </view>
-          <view class="flex items-center text-gray-400">
+              <view class="dates flex items-center text-gray-400">
                 <view class="pr-2">{{ task.time }}</view>
                 <view>时长：{{ task.duration }}</view>
               </view>
             </view>
           </view>
-      <u-icon name="arrow-right" size="28"></u-icon>
+        </view>
+        <view v-if="isrotate === index">
+          这是子项目
+          <ProjectItem />
+        </view>
+      </view>
     </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>

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>