refactor(calendar): 日历细节调整

4 years ago · 1a8d6bfa28
5 changed files with 226 additions and 203 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -3,90 +3,91 @@
 ### 🌟 新功能
 范围|描述|commitId
 --|--|--
- plugin | 插件添加了token及param参数 | [aeb0292](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/aeb0292)
- - | 标题栏变化 | [3898cfe](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/3898cfe)
- - | 标题栏变化 | [c0fcd9d](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/c0fcd9d)
- - | 标题栏角色栏全局任务组件新建 | [0500cb4](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/0500cb4)
- - | 插件参数处理调整 | [a3e68d3](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/a3e68d3)
- - | 插件数据获取 | [5b91bdc](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/5b91bdc)
- - | 存token | [b8a178d](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/b8a178d)
- - | 定期任务面板骨架屏添加 | [b2698c0](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/b2698c0)
- - | 角色栏实现 | [94cd671](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/94cd671)
- - | 距调整pc端 | [5069aa1](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/5069aa1)
- - | 模拟接口测试 | [69e7931](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/69e7931)
- - | 配置默认插件接口 | [f0c177d](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/f0c177d)
- - | 全局插件及默认插件位置修改 | [6c80d08](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/6c80d08)
- - | 日常任务插件调整 | [c1881f9](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/c1881f9)
- - | 时间基准线，默认插件 | [a33ba1e](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/a33ba1e)
- - | 时间轴界面 | [33927e9](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/33927e9)
- - | 时间轴修改状态时提示框增加 | [e841392](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/e841392)
- - | 提交到本地 | [9cbe411](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/9cbe411)
- - | 添加时间轴上下滚动 | [2b81bbc](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/2b81bbc)
- - | 引入dayjs | [29b8b93](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/29b8b93)
- - | 字体大小更改 | [82cfdd4](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/82cfdd4)
- - | db store | [6414c4f](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/6414c4f)
- - | indexedDB | [687394e](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/687394e)
- - | post 封装 | [da52e94](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/da52e94)
- - | tall插件封装 | [1bcb920](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/1bcb920)
- - | ws storage | [21b3a06](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/21b3a06)
- 富文本插件 | 富文本插件demo测试 | [ed3d644](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/ed3d644)
- pinch | alloy finger实现图片的pinch放大缩小 | [de01343](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/de01343)
+ - | db store | 6414c4f
+ - | indexedDB | 687394e
+ pinch | alloy finger实现图片的pinch放大缩小 | de01343
+ plugin | 插件添加了token及param参数 | aeb0292
+ - | post 封装 | da52e94
+ - | tall插件封装 | 1bcb920
+ task status | 任务状态切换未完 | 7ffd135
+ - | ws storage | 21b3a06
+ - | 全局插件及默认插件位置修改 | 6c80d08
+ - | 字体大小更改 | 82cfdd4
+ - | 存token | b8a178d
+ - | 定期任务面板骨架屏添加 | b2698c0
+ 富文本插件 | 富文本插件demo测试 | ed3d644
+ - | 引入dayjs | 29b8b93
+ - | 提交到本地 | 9cbe411
+ - | 插件参数处理调整 | a3e68d3
+ - | 插件数据获取 | 5b91bdc
+ - | 日常任务插件调整 | c1881f9
+ - | 时间基准线，默认插件 | a33ba1e
+ - | 时间轴修改状态时提示框增加 | e841392
+ - | 时间轴界面 | 33927e9
+ - | 标题栏变化 | 3898cfe
+ - | 标题栏变化 | c0fcd9d
+ - | 标题栏角色栏全局任务组件新建 | 0500cb4
+ - | 模拟接口测试 | 69e7931
+ - | 添加时间轴上下滚动 | 2b81bbc
+ - | 角色栏实现 | 94cd671
+ - | 距调整pc端 | 5069aa1
+ - | 配置默认插件接口 | f0c177d


 ### 🎨 代码样式
 范围|描述|commitId
 --|--|--
- - | 代码格式细节调整 | [cb2532b](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/cb2532b)
- - | 格式细节调整 | [b907a03](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/b907a03)
- - | 更新代码 | [8c27e68](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/8c27e68)
- - | 更新代码 | [1f40a76](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/1f40a76)
- - | 任务快捷方式图标增加 | [4aba872](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/4aba872)
- - | 日常任务修改 | [dfa7ee2](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/dfa7ee2)
- - | 删除插件携带的多余文件 | [0f392bb](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/0f392bb)
- - | 删除多余字段 | [5ae3973](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/5ae3973)
- - | 添加插件数据 | [2f11b42](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/2f11b42)
- - | 图标修改 | [54bca09](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/54bca09)
- - | 无基本变化 | [21ac4bb](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/21ac4bb)
- - | 修改角色样式 | [73e268e](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/73e268e)
- - | 组件新建 | [89c0035](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/89c0035)
+ - | 代码格式细节调整 | cb2532b
+ - | 任务快捷方式图标增加 | 4aba872
+ - | 修改角色样式 | 73e268e
+ - | 删除多余字段 | 5ae3973
+ - | 删除插件携带的多余文件 | 0f392bb
+ - | 图标修改 | 54bca09
+ - | 无基本变化 | 21ac4bb
+ - | 日常任务修改 | dfa7ee2
+ - | 更新代码 | 8c27e68
+ - | 更新代码 | 1f40a76
+ - | 格式细节调整 | b907a03
+ - | 添加插件数据 | 2f11b42
+ - | 组件新建 | 89c0035


 ### 🐛 Bug 修复
 范围|描述|commitId
 --|--|--
- ID1000343 | 解决向下预加载查询参数时间没+1颗粒度;以及滚动加载颗粒度写死的问题 | [940603a](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/940603a), closes [#ID1000343](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/issues/ID1000343)
- plugin | 插件解析机制完善 | [0f5a27d](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/0f5a27d)
- project title | 项目标题修改; 切换角色移除script | [5c20017](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/5c20017)
- role | 切换角色的逻辑修正完善 | [4ae534f](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/4ae534f)
- roles | 修复默认显示不是我的角色的问题 | [b69f94f](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/b69f94f)
- task任务逻辑完善 | 减少初始global及regular的不必要请求 | [bd4bd38](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/bd4bd38)
- - | 插件bug解决 | [41257eb](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/41257eb)
- - | 定期任务插件 | [92b3254](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/92b3254)
- - | 定期任务接口 | [aa4981c](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/aa4981c)
- - | 骨架屏替换 | [e9fdd71](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/e9fdd71)
- - | 角色栏修改 | [19228d6](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/19228d6)
- - | 解决时间轴报错 | [da1eece](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/da1eece)
- - | 任务开始时间延迟插件 | [992a313](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/992a313)
- - | 日常任务插件遍历时的key值修改 | [cd26285](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/cd26285)
- - | 日常任务插件面板高度修改 | [249f9e4](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/249f9e4)
- - | 日常任务html数据查验 | [880ce5c](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/880ce5c)
- - | 上下滚动时间轴 | [d533a01](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/d533a01)
- - | 上下滑动加载定期任务 | [4090d89](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/4090d89)
- - | 时间轴插件 | [225d3cc](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/225d3cc)
- - | 时间轴骨架屏修改 | [ca78d02](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/ca78d02)
- - | 时间轴上下滚动数据加载bug修改 | [e82ede4](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/e82ede4)
- - | 时间轴上下滑动 | [4d0ae46](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/4d0ae46)
- - | 提示信息显示bug及日常任务收缩问题 | [f2f06c5](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/f2f06c5)
- - | 下拉加载定期任务传参，时间格式化修改 | [0b95a0e](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/0b95a0e)
- - | 修改报错 | [531c14d](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/531c14d)
- - | 修改角色栏组件 | [a54c601](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/a54c601)
- - | 修改main | [749ae9a](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/749ae9a)
+ ID1000343 | 解决向下预加载查询参数时间没+1颗粒度;以及滚动加载颗粒度写死的问题 | 940603a, closes #ID1000343
+ plugin | 插件解析机制完善 | 0f5a27d
+ project title | 项目标题修改; 切换角色移除script | 5c20017
+ roles | 修复默认显示不是我的角色的问题 | b69f94f
+ role | 切换角色的逻辑修正完善 | 4ae534f
+ task任务逻辑完善 | 减少初始global及regular的不必要请求 | bd4bd38
+ - | 上下滑动加载定期任务 | 4090d89
+ - | 上下滚动时间轴 | d533a01
+ - | 下拉加载定期任务传参，时间格式化修改 | 0b95a0e
+ - | 任务开始时间延迟插件 | 992a313
+ - | 修改main | 749ae9a
+ - | 修改报错 | 531c14d
+ - | 修改角色栏组件 | a54c601
+ - | 定期任务接口 | aa4981c
+ - | 定期任务插件 | 92b3254
+ - | 提示信息显示bug及日常任务收缩问题 | f2f06c5
+ - | 插件bug解决 | 41257eb
+ - | 日常任务html数据查验 | 880ce5c
+ - | 日常任务插件遍历时的key值修改 | cd26285
+ - | 日常任务插件面板高度修改 | 249f9e4
+ - | 时间轴上下滑动 | 4d0ae46
+ - | 时间轴上下滚动数据加载bug修改 | e82ede4
+ - | 时间轴插件 | 225d3cc
+ - | 时间轴骨架屏修改 | ca78d02
+ - | 角色栏修改 | 19228d6
+ - | 解决时间轴报错 | da1eece
+ - | 骨架屏替换 | e9fdd71


 ### 📝 文档
 范围|描述|commitId
 --|--|--
- - | README.md | [ab0eb05](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/ab0eb05)
+ - | README.md | ab0eb05


 ### 🔨 代码重构
@ -103,49 +104,40 @@
 - | 删除多余的技术验证界面 | 542ae5b
 - | 界面样式调整 | 4367249
 - | 重构store分层 | 5f6fff8
- store/home | 删除store/home | [db8a3b4](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/db8a3b4)
- task beginTime | 格式化任务开始时间 | [fbc0301](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/fbc0301)
- tip | 任务状态显示及tip组件数据的重构 | [78a5750](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/78a5750)
- tips | 修改任务状态方法重构 | [b57d3ac](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/b57d3ac)
- - | 界面样式调整 | [4367249](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/4367249)
- - | 任务状态重构 | [4693655](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/4693655)
- - | 删除多余的技术验证界面 | [542ae5b](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/542ae5b)
- - | 下滑时间轴添加备注 | [4fd20e3](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/4fd20e3)
- - | 重构store分层 | [5f6fff8](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/5f6fff8)
- - | project 代码健壮性完善 | [a3202c5](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/a3202c5)
- template | eslint prettier sass uview tailwindcss | [9c966a1](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/9c966a1)


 ### 🚀 性能优化
 范围|描述|commitId
 --|--|--
- - | 测试接口 | [215e074](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/215e074)
- - | 插件查询及展示 | [4dba770](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/4dba770)
- - | 角色栏文字颜色修改 | [215c6b3](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/215c6b3)
- - | 解决警告 | [c932b09](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/c932b09)
- - | 组件文件夹新建 | [22bfe7b](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/22bfe7b)
- - | 组件文件夹新建 | [17bb8c9](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/17bb8c9)
- - | 组件文件夹新建 | [1421504](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/1421504)
+ - | 插件查询及展示 | 4dba770
+ - | 日历的更改 | 7353ac8
+ - | 测试接口 | 215e074
+ - | 组件文件夹新建 | 22bfe7b
+ - | 组件文件夹新建 | 17bb8c9
+ - | 组件文件夹新建 | 1421504
+ - | 角色栏文字颜色修改 | 215c6b3
+ - | 解决警告 | c932b09


 ### chore
 范围|描述|commitId
 --|--|--
- - | 删除多余的构建的命令 | [3f4eb2f](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/3f4eb2f)
- - | 修复不能build的问题 | [0b7b91e](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/0b7b91e)
- - | api 封装 | [8dcb8a2](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/8dcb8a2)
- - | env host修改 | [a79a4a5](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/a79a4a5)
- - | merge globals | [b0957cc](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/b0957cc)
- - | merge wrr | [5ccc7a5](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/5ccc7a5)
- package manifest | 去掉了摇树 | [f7c1dd4](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/f7c1dd4)
- - | mock | [51c24a5](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/51c24a5)
- 信息配置 | 配置eslint等配置 | [7421443](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/7421443)
- pwa 小程序 | 移除了pwa，alloyFinger添加平台判断 | [875fab4](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/875fab4)
- - | uview-ui | [a9ea34b](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/a9ea34b)
+ - | api 封装 | 8dcb8a2
+ - | env host修改 | a79a4a5
+ - | merge globals | b0957cc
+ - | merge wrr | 5ccc7a5
+ - | mock | 51c24a5
+ package manifest | 去掉了摇树 | f7c1dd4
+ pwa 小程序 | 移除了pwa，alloyFinger添加平台判断 | 875fab4
+ - | uview-ui | a9ea34b
+ 信息配置 | 配置eslint等配置 | 7421443
+ - | 修复不能build的问题 | 0b7b91e
+ - | 删除多余的构建的命令 | 3f4eb2f


 范围|描述|commitId
 --|--|--
- - | style:index | [978f272](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/978f272)
- - | !2 基础模板v1.1.0 | [f5e61dd](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/f5e61dd)
- - | init | [c0f1deb](https://dd.tall.wiki/gitea/wally/TALL-MUI-3/commits/c0f1deb)
+ - | style:index | 978f272
+ - | !2 基础模板v1.1.0 | f5e61dd
+ - | init | c0f1deb
+
--- a/src/components/Calendar/Calendar.vue
+++ b/src/components/Calendar/Calendar.vue
@ -3,8 +3,10 @@
    <view class="calendar-heander">
      {{ timeStr }}
    </view>
+
+    <!-- 星期几标题 -->
    <view class="calendar-weeks">
-      <view class="calendar-week" v-for="(week, index) in weeks" :key="index">
+      <view class="calendar-week" :class="{ 'text-red-500': week === '六' || week === '日' }" v-for="(week, index) in weeks" :key="index">
        {{ week }}
      </view>
    </view>
@ -25,14 +27,13 @@
      >
        <swiper-item class="calendar-item" v-for="sitem in swiper" :key="sitem">
          <view class="calendar-days">
+            <!-- 当前的 -->
            <template v-if="sitem === current">
              <view
                class="calendar-day"
                v-for="(item, index) in days"
                :key="index"
-                :class="{
-                  'day-hidden': !item.show,
-                }"
+                :class="{ 'day-hidden': !item.show }"
                @click="clickItem(item)"
              >
                <view class="date" :class="[item.isToday ? todayClass : '', item.fullDate === selectedDate ? checkedClass : '']">
@ -42,6 +43,7 @@
              </view>
            </template>
            <template v-else>
+              <!-- 下一个月/周 -->
              <template v-if="current - sitem === 1 || current - sitem === -2">
                <view
                  class="calendar-day"
@ -56,6 +58,7 @@
                  </view>
                </view>
              </template>
+              <!-- 上一个月/周 -->
              <template v-else>
                <view
                  class="calendar-day"
@ -74,14 +77,16 @@
          </view>
        </swiper-item>
      </swiper>
-      <view class="mode-change" @click="changeMode">
+
+      <!-- <view class="mode-change" @click="changeMode">
        <view :class="weekMode ? 'mode-arrow-bottom' : 'mode-arrow-top'"> </view>
+      </view> -->
    </view>
-    </view>
-    <view class="back-today" @click="goback" v-if="showBack"> 今日 </view>
+
+    <view class="flex justify-center u-font-18" style="color: #3b82f6" @click="goback"> 今日 </view>
  </view>
 </template>
-
+mb-3
 <script>
 import { gegerateDates, dateEqual, formatDate } from './generateDates.js';

@ -116,6 +121,7 @@ export default {
      },
    },
  },
+
  watch: {
    dotList: function (newvalue) {
      const days = this.days.slice(0);
@ -129,24 +135,42 @@ export default {
      console.log(days);
    },
  },
+
+  data() {
+    return {
+      weeks: ['日', '一', '二', '三', '四', '五', '六'], // 周
+      current: 1,
+      currentYear: '',
+      currentMonth: '',
+      currentDate: '',
+      days: [],
+      weekMode: false, // false -> 月  true -> 显示周
+      swiper: [0, 1, 2],
+      // dotList: [], // 打点的日期列表
+      selectedDate: formatDate(new Date(), 'yyyy-MM-dd'), // 当前选中的日期
+    };
+  },
+
  computed: {
    sheight() {
      // 根据年月判断有多少行
      // 判断该月有多少天
-      let h = '70rpx';
+      let h = '35px';
      if (!this.weekMode) {
        const d = new Date(this.currentYear, this.currentMonth, 0);
        const days = d.getDate(); // 判断本月有多少天
        let day = new Date(d.setDate(1)).getDay();
-        if (day === 0) {
-          day = 7;
-        }
+        // if (day === 0) {
+        //   day = 7;
+        // }
        const pre = 8 - day;
        const rows = Math.ceil((days - pre) / 7) + 1;
-        h = 70 * rows + 'rpx';
+        h = 35 * rows + 'px';
      }
      return h;
    },
+
+    // 当前日期 年月
    timeStr() {
      let str = '';
      const d = new Date(this.currentYear, this.currentMonth - 1, this.currentDate);
@ -155,61 +179,66 @@ export default {
      str = `${y}年${m}月`;
      return str;
    },
+
+    // 上一周期的days书籍
    predays() {
      let pres = [];
      if (this.weekMode) {
+        // 周模式
        const d = new Date(this.currentYear, this.currentMonth - 1, this.currentDate);
        d.setDate(d.getDate() - 7);
        pres = gegerateDates(d, 'week');
      } else {
+        // 月模式
        const d = new Date(this.currentYear, this.currentMonth - 2, 1);
        pres = gegerateDates(d, 'month');
      }
      return pres;
    },
+
+    // 下一周期的days书籍
    nextdays() {
      let nexts = [];
      if (this.weekMode) {
+        // 周模式
        const d = new Date(this.currentYear, this.currentMonth - 1, this.currentDate);
        d.setDate(d.getDate() + 7);
        nexts = gegerateDates(d, 'week');
      } else {
+        // 月模式
        const d = new Date(this.currentYear, this.currentMonth, 1);
        nexts = gegerateDates(d, 'month');
      }
      return nexts;
    },
  },
-  data() {
-    return {
-      weeks: ['一', '二', '三', '四', '五', '六', '日'],
-      current: 1,
-      currentYear: '',
-      currentMonth: '',
-      currentDate: '',
-      days: [],
-      weekMode: true,
-      swiper: [0, 1, 2],
-      // dotList: [], // 打点的日期列表
-      selectedDate: formatDate(new Date(), 'yyyy-MM-dd'),
-    };
+
+  created() {
+    this.initDate();
  },
+
  methods: {
+    //
+    /**
+     * 滑动切换上下周期
+     * 根据前一个减去目前的值我们可以判断是下一个月/周还是上一个月/周
+     * current - pre === 1, -2 下一个月/周
+     * current - pre === -1, 2 上一个月或者上一周
+     */
    changeSwp(e) {
-      // console.log(e);
      const pre = this.current;
      const current = e.target.current;
-      /* 根据前一个减去目前的值我们可以判断是下一个月/周还是上一个月/周
-       *current - pre === 1, -2时是下一个月/周
-       *current -pre === -1, 2时是上一个月或者上一周
-       */
      this.current = current;
+
      if (current - pre === 1 || current - pre === -2) {
+        // 下一个月 或 下一周
        this.daysNext();
      } else {
+        // 上一个月 或 上一周
        this.daysPre();
      }
    },
+
    // 初始化日历的方法
    initDate(cur) {
      let date = '';
@ -221,7 +250,7 @@ export default {
      this.currentDate = date.getDate(); // 今日日期 几号
      this.currentYear = date.getFullYear(); // 当前年份
      this.currentMonth = date.getMonth() + 1; // 当前月份
-      this.currentWeek = date.getDay() === 0 ? 7 : date.getDay(); // 1...6,0   // 星期几
+      this.currentWeek = date.getDay() === 0 ? 7 : date.getDay(); // 1...6,0 星期几
      // const nowY = new Date().getFullYear(); // 当前年份
      // const nowM = new Date().getMonth() + 1;
      // const nowD = new Date().getDate(); // 今日日期 几号
@ -249,6 +278,7 @@ export default {
        }
      });
      this.days = days;
+      console.log(days);
      // 派发事件,时间发生改变
      let obj = {
        start: '',
@ -265,6 +295,7 @@ export default {
      }
      this.$emit('days-change', obj);
    },
+
    //  上一个
    daysPre() {
      if (this.weekMode) {
@ -276,6 +307,7 @@ export default {
        this.initDate(d);
      }
    },
+
    //  下一个
    daysNext() {
      if (this.weekMode) {
@ -287,6 +319,8 @@ export default {
        this.initDate(d);
      }
    },
+
+    // 切换模式
    changeMode() {
      const premode = this.weekMode;
      let isweek = false;
@ -302,20 +336,19 @@ export default {
      }
      this.initDate(d);
    },
+
    // 点击日期
    clickItem(e) {
      this.selectedDate = e.fullDate;
      this.$emit('selected-change', e);
    },
+
+    // 返回
    goback() {
      const d = new Date();
      this.initDate(d);
    },
  },
-  created() {
-    this.initDate();
-  },
-  mounted() {},
 };
 </script>

@ -323,22 +356,27 @@ export default {
 .zzx-calendar {
  width: 100%;
  height: auto;
+  background-color: #fff;
+  padding-bottom: 10px;
+
  .calendar-heander {
    text-align: center;
-    height: 60upx;
-    line-height: 60upx;
+    padding: 16px 0;
    position: relative;
-    font-size: 30upx;
+    font-size: 15px;
  }
+
  .calendar-weeks {
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
-    height: 60upx;
-    line-height: 60upx;
+    margin-bottom: 10px;
    justify-content: center;
    align-items: center;
-    font-size: 30upx;
+    font-size: 12px;
+    color: #9ca3af;
+    font-weight: bold;
+
    .calendar-week {
      width: calc(100% / 7);
      height: 100%;
@ -350,10 +388,10 @@ export default {
    height: 60upx;
  }
  .calendar-content {
-    min-height: 60upx;
+    min-height: 30px;
  }
  .calendar-swiper {
-    min-height: 70upx;
+    min-height: 35px;
    transition: height ease-out 0.3s;
  }
  .calendar-item {
@ -367,10 +405,11 @@ export default {
    width: 100%;
    height: 100%;
    overflow: hidden;
-    font-size: 28upx;
+    font-size: 14px;
+
    .calendar-day {
      width: calc(100% / 7);
-      height: 70upx;
+      height: 35px;
      text-align: center;
      display: flex;
      flex-flow: column nowrap;
@ -382,28 +421,30 @@ export default {
  .day-hidden {
    visibility: hidden;
  }
+
  .mode-change {
    display: flex;
    justify-content: center;
-    margin-top: 10upx;
+    margin-top: 5px;
+
    .mode-arrow-top {
      width: 0;
      height: 0;
-      border-left: 12upx solid transparent;
-      border-right: 12upx solid transparent;
-      border-bottom: 10upx solid #ff6633;
+      border-left: 6px solid transparent;
+      border-right: 6px solid transparent;
+      border-bottom: 5px solid #ff6633;
    }
    .mode-arrow-bottom {
      width: 0;
      height: 0;
-      border-left: 12upx solid transparent;
-      border-right: 12upx solid transparent;
-      border-top: 10upx solid #ff6633;
+      border-left: 6px solid transparent;
+      border-right: 6px solid transparent;
+      border-top: 5px solid #ff6633;
    }
  }
  .is-today {
    background: #ffffff;
-    // border: 1upx solid #FF6633;
+    border: 1upx solid #ff6633;
    border-radius: 50%;
    color: #ff6633;
  }
@ -412,31 +453,20 @@ export default {
    color: #ffffff;
  }
  .date {
-    width: 50upx;
-    height: 50upx;
-    line-height: 50upx;
+    width: 25px;
+    height: 25px;
+    line-height: 25px;
    margin: 0 auto;
-    border-radius: 50upx;
+    border-radius: 25px;
  }
  .dot-show {
    width: 8px;
    height: 8px;
    // background: red;
-    border-radius: 10upx;
+    border-radius: 5px;
    position: absolute;
    top: 2px;
    right: 10px;
  }
-  .back-today {
-    // position: absolute;
-    line-height: 30upx;
-    font-size: 20px;
-    top: 15upx;
-    // border-radius: 15upx 0 0 15upx;
-    color: #24abf1;
-    position: relative;
-    left: 39%;
-    margin: 5%;
-  }
 }
 </style>
--- a/src/components/Calendar/generateDates.js
+++ b/src/components/Calendar/generateDates.js
@ -31,10 +31,13 @@ export const formatDate = (date, fmt) => {
 const padLeftZero = str => {
  return ('00' + str).substr(str.length);
 };
+
+// 判断是不是date对象
 export const judgeType = s => {
  // 函数返回数据的具体类型
  return Object.prototype.toString.call(s).slice(8, -1);
 };
+
 export const equalDate = (d1, d2) => {
  let result = false;
  if (d1.getFullYear() === d2.getFullYear() && d1.getMonth() === d2.getMonth() && d1.getDate() === d2.getDate()) {
@ -42,6 +45,7 @@ export const equalDate = (d1, d2) => {
  }
  return result;
 };
+
 /* 比较时间,时间格式为2020-04-04
 */
 export const dateEqual = (before, after) => {
@ -63,13 +67,15 @@ export const gegerateDates = (date = new Date(), type = 'week') => {
    const d = date.getDate();
    const days = new Date(y, m + 1, 0).getDate();
    // 获取日期是星期几
-    let weekIndex = date.getDay() === 0 ? 7 : date.getDay();
+    // let weekIndex = date.getDay() === 0 ? 7 : date.getDay();
+    let weekIndex = date.getDay();
    if (type === 'month') {
      const dobj = new Date(y, m, 1);
-      weekIndex = dobj.getDay() === 0 ? 7 : dobj.getDay();
+      // weekIndex = dobj.getDay() === 0 ? 7 : dobj.getDay();
+      weekIndex = dobj.getDay();
    }
    if (type === 'week') {
-      for (let i = weekIndex - 1; i > 0; i--) {
+      for (let i = weekIndex; i > 0; i--) {
        const dtemp = new Date(y, m, d);
        dtemp.setDate(dtemp.getDate() - i);
        result.push({
@ -91,7 +97,7 @@ export const gegerateDates = (date = new Date(), type = 'week') => {
      }
    } else if (type === 'month') {
      // 上个月
-      for (let i = weekIndex - 1; i > 0; i--) {
+      for (let i = weekIndex; i > 0; i--) {
        const dtemp = new Date(y, m, 1);
        dtemp.setDate(dtemp.getDate() - i);
        result.push({
--- a/src/components/Projects/Projects.vue
+++ b/src/components/Projects/Projects.vue
@ -1,19 +1,18 @@
 <template>
-  <view>
-    <view class="">
-      <view class="flex items-center m-2">
-        <image class="bg-yellow-700 w-8 h-8 rounded-full ml-1 mr-4" src="../../static/local_play1.png"></image>
+  <view class="p-3 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>
-      <view class="task flex items-center justify-between p-2" v-for="(task, index) in tasks" :key="index">
+    <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="bg-blue-300 w-8 h-8 rounded-full ml-1 mr-2">
-            <view class="w-8 h-8 flex items-center justify-center">{{ index + 1 }}</view>
+        <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="flex items-center">
            <view class="text-sm font-semibold">{{ task.taskName }}</view>
-              <view class="rounded-full pl-2 pr-2 bg-green-200 text-green-500">{{ task.state }}</view>
+            <view class="pl-2 pr-2 text-green-500 bg-green-200 rounded-full">{{ task.state }}</view>
          </view>
          <view class="flex items-center text-gray-400">
            <view class="pr-2">{{ task.time }}</view>
@ -24,7 +23,6 @@
      <u-icon name="arrow-right" size="28"></u-icon>
    </view>
  </view>
-  </view>
 </template>
 <script>
 export default {
@ -83,8 +81,3 @@ export default {
  },
 };
 </script>
-<style lang="scss">
-.task {
-  border-bottom: 1px solid #c0b9b9;
-}
-</style>
--- a/src/pages/index/index.vue
+++ b/src/pages/index/index.vue
@ -1,11 +1,13 @@
 <template>
-  <view>
+  <view class="bg-gray-50">
    <Calendar @selected-change="datechange" :showBack="true" :dot-list="dayss"></Calendar>
    <!-- <button @click="changeList">改变</button> -->
    <Upload />
-    <Projects />
+
+    <Projects class="mt-3" />
  </view>
 </template>
+
 <script>
 export default {
  data() {