wally
/
tall-mui-3-project
forked from ccsens_fe/tall-mui-3
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

feat: 首页项目样式改变

develop
wangrongrong 4 years ago
parent
40e0ecd54c
commit
8514c85adf
4 changed files with 133 additions and 30 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      CHANGELOG.md
  2. 7
      src/components/Projects/ProjectItem.vue
  3. 123
      src/components/Projects/Projects.vue
  4. 31
      src/components/Upload/Upload.vue

2
CHANGELOG.md
View File

@ -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)

7
src/components/Projects/ProjectItem.vue
View File

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

123
src/components/Projects/Projects.vue
View File

@ -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>

31
src/components/Upload/Upload.vue
View File

@ -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>

Write Preview
Loading…
Cancel
Save