SxhGroup / sxhClockIn

Download as
Browse Code »

Commit 4b6fcb8940f8f1f35fbdb9e3d8f875a9bf66318e

Authored by 边
1 parent 7fba2e1e
Exists in master

feat：部分静态页面调整

Showing 43 changed files with 852 additions and 136 deletions   Show diff stats
app.json
  Diff comments   View file @4b6fcb8
1 1 {
2 2 "pages": [
3   - "pages/index/index",
4   - "pages/index/rank/rank",
  3 + "pages/index/index",
  4 + "pages/mine/record/record",
  5 + "pages/mine/index",
  6 + "pages/index/rank/rank",
  7 + "pages/index/newPunch/newPunch",
5 8 "pages/index/achievement/achievement",
6 9 "pages/index/punchDetail/punchDetail",
7   - "pages/index/newPunch/newPunch",
8 10 "pages/login/codeLogin/codeLogin",
9 11 "pages/login/protocol/protocol",
10 12 "pages/login/policy/policy",
11   - "pages/mine/index",
12   - "pages/mine/record/record",
13 13 "pages/webview/webview"
14 14 ],
15 15 "window": {
16 16 "backgroundTextStyle": "dark",
17 17 "navigationBarBackgroundColor": "#fff",
18   - "navigationBarTitleText": "计划管家",
  18 + "navigationBarTitleText": "打卡管理",
19 19 "navigationBarTextStyle": "black"
20 20 },
21 21 "tabBar": {
... ...
app.wxss
  Diff comments   View file @4b6fcb8
1   -/* @import "/miniprogram_npm/@vant/weapp/common/index.wxss"; */
2   -page{
  1 +@import "/miniprogram_npm/@vant/weapp/common/index.wxss";
  2 +/* page{
3 3 background: #fff;
4   -}
  4 +} */
5 5 /* 二级页面顶部统一返回按钮，位置可能需要根据机型调整 */
6   -.navigation_back{
  6 +/* .navigation_back{
7 7 width: 80rpx;
8 8 height: 80rpx;
9 9 border: 1px solid rgb(255, 207, 105);
... ... @@ -14,9 +14,9 @@ page{
14 14 display: flex;
15 15 align-items: center;
16 16 justify-content: center;
17   -}
  17 +} */
18 18 /* 临时文件，设计稿图 */
19   -.temporary{
  19 +/* .temporary{
20 20 width: 100%;
21 21 position: absolute;
22 22 top: 0;
... ... @@ -25,4 +25,4 @@ page{
25 25 .temporary_box{
26 26 border: 1px solid rgb(255, 207, 105);
27 27 z-index: 98;
28   -}
29 28 \ No newline at end of file
  29 +} */
30 30 \ No newline at end of file
... ...
img/answer/1.png 0 → 100644
View file @4b6fcb8

2.52 KB
img/answer/2.png 0 → 100644
View file @4b6fcb8

2.9 KB
img/answer/3.png 0 → 100644
View file @4b6fcb8

3.28 KB
img/answer/add.png 0 → 100644
View file @4b6fcb8

12.7 KB
img/answer/back.png 0 → 100644
View file @4b6fcb8

1.62 KB
img/answer/bck.png 0 → 100644
View file @4b6fcb8

101 KB
img/answer/bj.png 0 → 100644
View file @4b6fcb8

4.08 KB
img/answer/blue_bck.png 0 → 100644
View file @4b6fcb8

59.3 KB
img/answer/blue_bck1.png 0 → 100644
View file @4b6fcb8

67.9 KB
img/answer/dkjl.png 0 → 100644
View file @4b6fcb8

1.16 KB
img/answer/english.png 0 → 100644
View file @4b6fcb8

5.09 KB
img/answer/math.png 0 → 100644
View file @4b6fcb8

6.51 KB
img/answer/red_rank.png 0 → 100644
View file @4b6fcb8

178 KB
img/answer/sp.png 0 → 100644
View file @4b6fcb8

853 Bytes
img/answer/sp1.png 0 → 100644
View file @4b6fcb8

4.32 KB
img/answer/succ.png 0 → 100644
View file @4b6fcb8

62.6 KB
img/answer/tp.png 0 → 100644
View file @4b6fcb8

1.04 KB
img/answer/tp1.png 0 → 100644
View file @4b6fcb8

3.82 KB
img/answer/user.png 0 → 100644
View file @4b6fcb8

2.99 KB
img/answer/yp.png 0 → 100644
View file @4b6fcb8

1.12 KB
img/answer/yp1.png 0 → 100644
View file @4b6fcb8

4.35 KB
img/answer/zdy.png 0 → 100644
View file @4b6fcb8

2.95 KB
package-lock.json
  Diff comments   View file @4b6fcb8
1 1 {
2   - "name": "sxhClockIn",
3   - "version": "2.0.0",
4   - "lockfileVersion": 2,
  2 + "name": "sxh_clock_in",
  3 + "version": "1.0.0",
  4 + "lockfileVersion": 1,
5 5 "requires": true,
6   - "packages": {
7   - "": {
8   - "name": "sxhClockIn",
9   - "version": "2.0.0",
10   - "license": "ISC",
11   - "dependencies": {
12   - "@vant/weapp": "^1.10.5"
13   - }
14   - },
15   - "node_modules/@vant/weapp": {
16   - "version": "1.10.5",
17   - "resolved": "https://registry.npmmirror.com/@vant/weapp/-/weapp-1.10.5.tgz",
18   - "integrity": "sha512-bAHp9r0ZiRsOqPOLzQHI/ZvkAlXzol1/TFhM70MyghuxkzJTjcDUd8RIfLkCN3c1MCK/PfBGw2an8/afygftCg=="
19   - }
20   - },
21 6 "dependencies": {
22 7 "@vant/weapp": {
23 8 "version": "1.10.5",
... ...
pages/index/index.js
  Diff comments   View file @4b6fcb8
... ... @@ -4,63 +4,54 @@ import request from '../../api/request.js'
4 4  
5 5 Page({
6 6 data: {
7   - showAdd: false, //新建打卡
8   - tabindex: 1,
  7 + active: 1,
  8 + showAdd: false,
  9 + tempList: [
  10 + {name:'自定义模板',url: '/img/answer/zdy.png'},
  11 + {name:'英语模板',url: '/img/answer/english.png'},
  12 + {name:'数学模板',url: '/img/answer/math.png'},
  13 + ]
9 14 // bannerList: [], // 轮播图
10 15 },
11   - /**
12   - * 生命周期函数--监听页面加载
13   - */
14   - onLoad: function (options) {
15   - // this.getBannerList() //获取banner
16   - },
17   - onShow:function (options) {
  16 + checkTabs(e) {
  17 + let index = e.currentTarget.dataset.index
18 18 this.setData({
19   - showAdd:false
20   - })
21   - },
22   - // 排行榜
23   - handleRank(){
24   - wx.navigateTo({
25   - url: '/pages/index/rank/rank',
26   - })
27   - },
28   - handleTab1() {
29   - this.setData({
30   - tabindex: 1
31   - })
  19 + active: index
  20 + }) //修改参数
32 21 },
33   - handleTab2() {
34   - this.setData({
35   - tabindex: 2
36   - })
37   - },
38   - handleAdd() {
  22 + //打卡
  23 + toShow(e) {
39 24 this.setData({
40 25 showAdd: true
41 26 })
42 27 },
  28 + //关闭
43 29 closeAdd() {
44 30 this.setData({
45 31 showAdd: false
46 32 })
47 33 },
48   - // 打卡成果
49   - handleAchievement(){
  34 + //查看排行榜
  35 + toRank() {
50 36 wx.navigateTo({
51   - url: '/pages/index/achievement/achievement',
  37 + url: `../index/rank/rank`
52 38 })
53 39 },
54   - // 去打卡
55   - handleDetail(){
  40 + //选择模板
  41 + toPunch() {
56 42 wx.navigateTo({
57   - url: '/pages/index/punchDetail/punchDetail',
  43 + url: `../index/newPunch/newPunch`
58 44 })
59 45 },
60   - // 自定义模板
61   - handleNewPunch(){
62   - wx.navigateTo({
63   - url: '/pages/index/newPunch/newPunch',
  46 + /**
  47 + * 生命周期函数--监听页面加载
  48 + */
  49 + onLoad: function (options) {
  50 + // this.getBannerList() //获取banner
  51 + },
  52 + onShow: function (options) {
  53 + this.setData({
  54 + showAdd: false
64 55 })
65 56 },
66 57 // 获取banner图
... ...
pages/index/index.json
  Diff comments   View file @4b6fcb8
1 1 {
2 2 "usingComponents": {
3   - "van-popup": "@vant/weapp/popup/index"
  3 + "van-popup": "@vant/weapp/popup/index",
  4 + "van-tab": "@vant/weapp/tab/index",
  5 + "van-tabs": "@vant/weapp/tabs/index",
  6 + "van-progress": "@vant/weapp/progress/index"
4 7 },
5 8 "navigationBarTextStyle": "black",
6 9 "navigationStyle": "custom"
... ...
pages/index/index.wxml
  Diff comments   View file @4b6fcb8
1 1 <view class="main">
2   - <image class="temporary" hidden="{{tabindex==2}}" src="/img/_index1.png" mode="widthFix" alt="" />
3   - <image class="temporary" hidden="{{tabindex==1}}" src="/img/_index2.png" mode="widthFix" alt="" />
4   - <!-- 排行榜 -->
5   - <text class="temporary_box" style="width: 370rpx;height: 100rpx;position: absolute;top: 192rpx;left: 20rpx;" bindtap="handleRank"></text>
6   - <!-- 两个tab -->
7   - <text class="temporary_box" style="width: 160rpx;height: 80rpx;position: absolute;top: 300rpx;left: 32rpx;" bindtap="handleTab1"></text>
8   - <text class="temporary_box" style="width: 160rpx;height: 80rpx;position: absolute;top: 300rpx;left: 200rpx;" bindtap="handleTab2"></text>
9   - <!-- 打卡成果 -->
10   - <text class="temporary_box" style="width: 350rpx;height: 100rpx;position: absolute;top: 1000rpx;left: 20rpx;" bindtap="handleAchievement"></text>
11   - <!-- 去打卡 -->
12   - <text class="temporary_box" style="width: 350rpx;height: 100rpx;position: absolute;top: 1000rpx;right: 20rpx;" bindtap="handleDetail"></text>
13   - <!-- 新建打卡 -->
14   - <text class="temporary_box" style="width: 120rpx;height: 120rpx;position: absolute;top: 1200rpx;right: 20rpx;" bindtap="handleAdd"></text>
15   - <van-popup show="{{ showAdd }}" position="bottom" custom-style="height: 80%;" bind:close="closeAdd">
16   - <image class="temporary" src="/img/_index3.png" mode="widthFix" alt="" />
17   - <!-- 自定义模板 -->
18   - <text class="temporary_box" style="width: 180rpx;height: 220rpx;position: absolute;top: 364rpx;left: 20rpx;" bindtap="handleNewPunch"></text>
  2 + <view class="bck" style="background-image: url('../../../img/answer/blue_bck1.png')"></view>
  3 + <view class="box">
  4 + <view class="title_name">
  5 + <!-- 打卡排行榜 -->
  6 + </view>
  7 + <vidw class="title_view" bindtap="toRank">立即查看</vidw>
  8 + <view class="tabs_css">
  9 + <view class="{{active == 1?'tabs_item check' :'tabs_item no_check'}}" bindtap="checkTabs" data-index='1'>我的打卡</view>
  10 + <view class="{{active == 2?'tabs_item check' :'tabs_item no_check'}} " bindtap='checkTabs' data-index='2'>我创建的</view>
  11 + </view>
  12 + </view>
  13 + <view class="white_box">
  14 + <view class="card">
  15 + <view class="card_title">
  16 + <view class="title_L">
  17 + <image class="title_pic" src="/img/answer/bj.png" alt="" />
  18 + </view>
  19 + <view class="title_R">
  20 + <view>英语单词每日打卡</view>
  21 + <view class="grey_font">我发布于09-09 08:21</view>
  22 + </view>
  23 + </view>
  24 + <view class="day_font">每日20个英文单词背诵</view>
  25 + <view class="day_font2">已坚持打卡
  26 + <text class="day_font2_large">1/50 </text>天
  27 + </view>
  28 + <view>
  29 + <van-progress percentage="50" color='#3F5EFF' stroke-width="13" pivot-text=' ' />
  30 + </view>
  31 + <view class="flex_font">
  32 + <text class="grey_flex">打卡频次：</text>
  33 + 每天
  34 + </view>
  35 + <view class="flex_font">
  36 + <text class="grey_flex">打卡要求：</text>
  37 + 需填写单词个数
  38 + </view>
  39 + <view class="flex_font">
  40 + <view class="grey_flex">其他：</view>
  41 + 不允许补卡
  42 + </view>
  43 + <view class="grey_line"></view>
  44 + <view class="blue_font">
  45 + <view>打卡成果</view>
  46 + <view class="blue_line"></view>
  47 + <view>去打卡</view>
  48 + </view>
  49 + </view>
  50 + </view>
  51 + <view class="blue_tip" bindtap="toShow">
  52 + <image class="img_tip" src="/img/answer/add.png" alt="" />
  53 + </view>
  54 +
  55 + <!-- 弹窗 -->
  56 + <van-popup show="{{ showAdd }}" round position="bottom" custom-style="height: 60%;" bind:close="closeAdd">
  57 + <view class="pop_card">
  58 + <view class="pop_title">选择模板</view>
  59 + <view class="tem_box" >
  60 + <view class="tem_item" wx:for="{{tempList}}" wx:key="index" wx:for-item="value" bindtap="toPunch" data-value="{{value}}">
  61 + <image class="tem_pic" src="{{value.url}}" alt="" />
  62 + <view class="tem_font">{{value.name}}</view>
  63 + </view>
  64 + </view>
  65 + </view>
19 66 </van-popup>
20   -
21 67 </view>
22 68 \ No newline at end of file
... ...
pages/index/index.wxss
  Diff comments   View file @4b6fcb8
... ... @@ -0,0 +1,193 @@
  1 +.bck {
  2 + position: absolute;
  3 + top: 0;
  4 + left: 0;
  5 + width: 100%;
  6 + height: 250px;
  7 + z-index: -1;
  8 + background-size: 100% 100%;
  9 +}
  10 +
  11 +.box {
  12 + padding: 100px 7vw 0;
  13 + box-sizing: border-box;
  14 +}
  15 +
  16 +.title_name {
  17 + font-size: 7vw;
  18 + font-weight: bold;
  19 + letter-spacing: 1.5vw;
  20 + color: #fff;
  21 + margin-bottom: 20px;
  22 +}
  23 +
  24 +.title_view {
  25 + height: 20px;
  26 + font-size: 4.8vw;
  27 + letter-spacing: 0.5vw;
  28 + color: #fff;
  29 + opacity: 0.7;
  30 +}
  31 +
  32 +.tabs_css {
  33 + margin: 30px 0;
  34 + display: flex;
  35 +}
  36 +
  37 +.tabs_item {
  38 + margin-right: 20px;
  39 + font-size: 4.3vw;
  40 + color: #fff;
  41 +}
  42 +
  43 +.check {}
  44 +
  45 +.no_check {
  46 + opacity: 0.6;
  47 +}
  48 +
  49 +/**/
  50 +.white_box {
  51 + width: 100vw;
  52 + min-height: 650px;
  53 + /* background-color: rebeccapurple; */
  54 + background-color: #F5F6FA;
  55 + border-top-left-radius: 8vw;
  56 + border-top-right-radius: 8vw;
  57 + padding: 10vw 5vw;
  58 + box-sizing: border-box;
  59 +}
  60 +
  61 +.card {
  62 + width: 90vw;
  63 + height: 390px;
  64 + background-color: #fff;
  65 + border-radius: 8vw;
  66 + padding: 8vw 7vw;
  67 + box-sizing: border-box;
  68 + box-shadow: 1px 1px 1px 1px rgb(196, 196, 196);
  69 +}
  70 +
  71 +.card_title {
  72 + display: flex;
  73 +}
  74 +
  75 +.title_L {
  76 + flex-shrink: 0;
  77 + width: 50px;
  78 + height: 50px;
  79 + margin-right: 15px;
  80 +}
  81 +
  82 +.title_pic {
  83 + width: 100%;
  84 + height: 100%;
  85 +}
  86 +
  87 +.title_R {
  88 + height: 50px;
  89 + display: flex;
  90 + align-content: space-between;
  91 + flex-wrap: wrap;
  92 + font-size: 4.6vw;
  93 +}
  94 +
  95 +.grey_font {
  96 + width: 100%;
  97 + color: #999;
  98 + font-size: 3.8vw;
  99 +}
  100 +
  101 +.day_font {
  102 + margin: 20px 0 20px;
  103 + letter-spacing: 0.2vw;
  104 + font-size: 4vw;
  105 +}
  106 +
  107 +.day_font2 {
  108 + margin: 20px 0;
  109 + letter-spacing: 0.2vw;
  110 + font-size: 3.8vw;
  111 +}
  112 +
  113 +.day_font2_large {
  114 + font-size: 5.5vw;
  115 + font-weight: bold;
  116 +}
  117 +
  118 +.flex_font {
  119 + font-size: 3.5vw;
  120 + margin: 20px 0;
  121 + display: flex;
  122 +}
  123 +
  124 +.grey_flex {
  125 + width: 80px;
  126 + color: #999;
  127 +}
  128 +
  129 +.grey_line {
  130 + width: 100%;
  131 + height: 1px;
  132 + background-color: #E5E5E5;
  133 +}
  134 +
  135 +.blue_line {
  136 + width: 1px;
  137 + height: 20px;
  138 + background-color: #EAEAEA;
  139 +}
  140 +
  141 +.blue_font {
  142 + display: flex;
  143 + justify-content: space-around;
  144 + margin-top: 20px;
  145 + font-size: 4.1vw;
  146 + color: #4C92F9;
  147 +}
  148 +
  149 +.blue_tip {
  150 + position: fixed;
  151 + bottom: 40px;
  152 + right: 3vw;
  153 +}
  154 +
  155 +.img_tip {
  156 + width: 70px;
  157 + height: 70px;
  158 +}
  159 +
  160 +.pop_card {
  161 + padding: 5vw;
  162 + box-sizing: border-box;
  163 +}
  164 +
  165 +.pop_title {
  166 + font-size: 4.8vw;
  167 + font-weight: bold;
  168 + letter-spacing: 1px;
  169 + margin-bottom: 30px;
  170 +}
  171 +
  172 +.tem_box {
  173 + display: flex;
  174 + flex-wrap: wrap;
  175 +}
  176 +
  177 +.tem_item {
  178 + width: 23vw;
  179 + height: 170px;
  180 + text-align: center;
  181 + margin: 0 3vw 30px;
  182 +}
  183 +
  184 +.tem_pic {
  185 + width: 23vw;
  186 + height: 120px;
  187 + border-radius: 10px;
  188 +}
  189 +
  190 +.tem_font {
  191 + font-size: 3.9vw;
  192 + margin-top: 10px;
  193 +}
0 194 \ No newline at end of file
... ...
pages/index/newPunch/newPunch.js
  Diff comments   View file @4b6fcb8
... ... @@ -5,8 +5,20 @@ Page({
5 5 * 页面的初始数据
6 6 */
7 7 data: {
  8 + form: {
  9 + biaoti: '',
  10 + message: '',
  11 + checked: true
  12 + }
8 13 },
  14 + //输入
  15 + onfieldChange() {
9 16  
  17 + },
  18 + //开关
  19 + onswitchChange({detail }) {
  20 + this.setData({ 'form.checked': detail });
  21 + },
10 22 /**
11 23 * 生命周期函数--监听页面加载
12 24 */
... ...
pages/index/newPunch/newPunch.json
  Diff comments   View file @4b6fcb8
1 1 {
2 2 "usingComponents": {
3   - "van-icon": "@vant/weapp/icon/index"
  3 + "van-icon": "@vant/weapp/icon/index",
  4 + "van-cell-group": "@vant/weapp/cell-group/index",
  5 + "van-field": "@vant/weapp/field/index",
  6 + "van-cell": "@vant/weapp/cell/index",
  7 + "van-switch": "@vant/weapp/switch/index",
  8 + "van-button": "@vant/weapp/button/index"
4 9 },
5   - "navigationStyle": "custom"
  10 + "navigationBarTitleText": "自定义打卡"
6 11 }
7 12 \ No newline at end of file
... ...
pages/index/newPunch/newPunch.wxml
  Diff comments   View file @4b6fcb8
1 1 <!--pages/index/rank/rank.wxml-->
2 2 <view class="punch_detail">
3   - <!-- 顶部统一返回 -->
4   - <view class="navigation_back" bindtap="handleBack">
5   - <van-icon name="arrow-left" />
  3 + <view class="title_card">
  4 + <van-cell-group>
  5 + <van-field value="{{ form.biaoti }}" placeholder="请输入标题" border="{{ false }}" bind:change="onfieldChange" />
  6 + </van-cell-group>
  7 + <view class="grey_line"></view>
  8 + <view class="box_card">
  9 + <van-cell-group>
  10 + <van-field value="{{ form.message }}" type="textarea" placeholder="请输入" autosize border="{{ false }}" />
  11 + </van-cell-group>
6 12 </view>
7   - <image class="temporary" src="/img/_new_punch.png" mode="widthFix" alt="" />
8   - <!-- 创建完成返回首页 -->
9   - <text class="temporary_box" style="width: 700rpx;height: 100rpx;position: absolute;top: 2392rpx;right: 32rpx;" bindtap="handleCreate"></text>
  13 + <view class="tip_card">
  14 + <view class="tip_item">
  15 + <image class="pic" src="/img/answer/tp1.png" alt="" />
  16 + </view>
  17 + <view class="tip_item">
  18 + <image class="pic" src="/img/answer/sp1.png" alt="" />
  19 + </view>
  20 + <view class="tip_item">
  21 + <image class="pic" src="/img/answer/yp1.png" alt="" />
  22 + </view>
  23 + </view>
  24 + </view>
  25 + <view class="white_card">
  26 + <view class="bold_font">需要提交数据</view>
  27 + <view>
  28 + <van-switch checked="{{ form.checked }}" size='20' bind:change="onChange" />
  29 + </view>
  30 + </view>
  31 + <view class="grey_line"></view>
  32 + <view class="white_card_nopadding">
  33 + <van-cell-group>
  34 + <van-cell title="统计单位" is-link label="请选择统计单位" border="{{ false }}" />
  35 + </van-cell-group>
  36 + </view>
  37 + <view class="white_card">
  38 + <view>允许补卡</view>
  39 + <view>
  40 + <van-switch checked="{{ form.checked }}" size='20' bind:change="onChange" />
  41 + </view>
  42 + </view>
  43 + <view class="sm_grey_font">
  44 + 开启后，在打卡周期内，学生家长可对未打卡的任务进行补卡。
  45 + </view>
  46 + <view class="white_card_nopadding">
  47 + <van-cell-group>
  48 + <van-cell title="开始时间" value='时间' is-link border="{{ false }}" />
  49 + </van-cell-group>
  50 + </view>
  51 + <view class="white_card_nopadding">
  52 + <van-cell-group>
  53 + <van-cell title="打卡周期" value='90天' is-link border="{{ false }}" />
  54 + </van-cell-group>
  55 + </view>
  56 + <view class="white_card_nopadding">
  57 + <van-cell-group>
  58 + <van-cell title="打卡频次" value='每天' is-link border="{{ false }}" />
  59 + </van-cell-group>
  60 + </view>
  61 +
  62 + <view class="clearance"></view>
  63 + <view class="white_card_nopadding">
  64 + <van-cell-group>
  65 + <van-cell title="打卡提醒" value='18:00' is-link border="{{ false }}" />
  66 + </van-cell-group>
  67 + </view>
  68 + <view class="white_card_nopadding">
  69 + <van-cell-group>
  70 + <van-cell title="缺卡打卡提醒" value='缺卡三天及以上' is-link border="{{ false }}" />
  71 + </van-cell-group>
  72 + </view>
  73 +
  74 + <view class="sm_grey_font">
  75 + 学生如缺卡达到一定条件，将会提醒家长
  76 + </view>
  77 + <view class="white_card_nopadding">
  78 + <van-cell-group>
  79 + <van-cell title="提交时必须包含" value='图片' is-link border="{{ false }}" />
  80 + </van-cell-group>
  81 + </view>
10 82  
  83 + <view class="clearance"></view>
  84 + <view class="btn">
  85 + <van-button type="info" round block>创建打卡</van-button>
  86 + </view>
11 87 </view>
12 88 \ No newline at end of file
... ...
pages/index/newPunch/newPunch.wxss
  Diff comments   View file @4b6fcb8
1 1 /* pages/index/newPunch/newPunch.wxss */
  2 +.punch_detail {
  3 + position: absolute;
  4 + width: 100vw;
  5 + min-height: 100vh;
  6 + background-color: #F5F6FA;
  7 +}
  8 +
  9 +.title_card {
  10 + margin: 15px 0;
  11 +}
  12 +
  13 +.grey_line {
  14 + width: 80vw;
  15 + height: 1px;
  16 +}
  17 +
  18 +.box_card {
  19 + width: 100vw;
  20 + min-height: 120px;
  21 + background-color: #fff;
  22 +}
  23 +
  24 +.tip_card {
  25 + padding: 20px;
  26 + box-sizing: border-box;
  27 + display: flex;
  28 + background-color: #fff;
  29 +}
  30 +
  31 +.tip_item {
  32 + width: 70px;
  33 + height: 30px;
  34 + margin-right: 5vw;
  35 +}
  36 +
  37 +.pic {
  38 + width: 100%;
  39 + height: 100%;
  40 +}
  41 +
  42 +.white_card {
  43 + width: 100vw;
  44 + background-color: #fff;
  45 + padding: 20px 15px;
  46 + box-sizing: border-box;
  47 + display: flex;
  48 + justify-content: space-between;
  49 +}
  50 +
  51 +.bold_font {
  52 + font-weight: bold;
  53 +}
  54 +
  55 +.white_card_nopadding {
  56 + width: 100vw;
  57 + background-color: #fff;
  58 + font-weight: bold;
  59 + height: 60px;
  60 + padding-top: 11px;
  61 + box-sizing: border-box;
  62 +}
  63 +
  64 +.sm_grey_font {
  65 + padding: 15px 0 15px 20px;
  66 + box-sizing: border-box;
  67 + font-size: 12px;
  68 + color: #999;
  69 +}
  70 +
  71 +.clearance {
  72 + width: 100vw;
  73 + height: 20px;
  74 +}
  75 +
  76 +.btn {
  77 + width: 100vw;
  78 + height: 80px;
  79 + background-color: #fff;
  80 + padding: 20px 30px 80px;
  81 + box-sizing: border-box;
  82 +}
2 83 \ No newline at end of file
... ...
pages/index/rank/rank.js
  Diff comments   View file @4b6fcb8
... ... @@ -5,6 +5,11 @@ Page({
5 5 * 页面的初始数据
6 6 */
7 7 data: {
  8 + rankList: [
  9 + {name: '小米',num: 20},
  10 + {name: '杰瑞',num: 110},
  11 + {name: '王小明',num: 75},
  12 + ]
8 13 },
9 14  
10 15 /**
... ...
pages/index/rank/rank.json
  Diff comments   View file @4b6fcb8
... ... @@ -2,5 +2,5 @@
2 2 "usingComponents": {
3 3 "van-icon": "@vant/weapp/icon/index"
4 4 },
5   - "navigationStyle": "custom"
  5 + "navigationBarTitleText": "排行榜"
6 6 }
7 7 \ No newline at end of file
... ...
pages/index/rank/rank.wxml
  Diff comments   View file @4b6fcb8
1 1 <!--pages/index/rank/rank.wxml-->
2   -<view class="punch_detail">
3   - <!-- 顶部统一返回 -->
4   - <view class="navigation_back" bindtap="handleBack">
5   - <van-icon name="arrow-left" />
  2 +<view class="rank" style="background-image: url('../../../img/answer/red_rank.png')">
  3 + <view class="rank_time">更新时间：2022-03-12</view>
  4 + <view class="white_box">
  5 + <view class="title_box">
  6 + <view class="title_pic">
  7 + <image class="pic" src="/img/answer/user.png" alt="" />
  8 + 陈浩然
  9 + </view>
  10 + <view class="red_title">已坚持12天</view>
  11 + <view class="red_title">34次</view>
  12 + </view>
  13 + <view class="grey_title">
  14 + <view class="table_L">
  15 + <view>排名</view>
  16 + <view>姓名</view>
  17 + </view>
  18 + <view>打卡数</view>
6 19 </view>
7   - <image class="temporary" src="/img/_rank.png" mode="widthFix" alt="" />
8 20  
  21 + <view class="table_item" wx:for="{{ rankList }}" wx:key="index" wx:for-item="value">
  22 + <view class="table_L" >
  23 + <image wx:if="{{index == 0}}" class="tem_pic" src="/img/answer/1.png" alt="" />
  24 + <image wx:if="{{index == 1}}" class="tem_pic" src="/img/answer/2.png" alt="" />
  25 + <image wx:if="{{index == 2}}" class="tem_pic" src="/img/answer/3.png" alt="" />
  26 + <view wx:if="{{index != 0 && index != 1 && index != 2}}">{{index + 1}}</view>
  27 + <view>{{value.name}}</view>
  28 + </view>
  29 + <view class="table_R">
  30 + <view class="grey_R">已坚持52天</view>
  31 + <view>120</view>
  32 + </view>
  33 + </view>
  34 + </view>
9 35 </view>
10 36 \ No newline at end of file
... ...
pages/index/rank/rank.wxss
  Diff comments   View file @4b6fcb8
1 1 /* pages/index/rank/rank.wxss */
  2 +.rank {
  3 + position: absolute;
  4 + width: 100vw;
  5 + min-height: 100vh;
  6 + background-size: 100% 100%;
  7 + padding: 0 5vw;
  8 + box-sizing: border-box;
  9 +}
  10 +.rank_time {
  11 + font-size: 4.4vw;
  12 + color: #fff;
  13 + opacity: 0.8;
  14 + margin-top: 105px;
  15 + margin-left: 2vw;
  16 +}
  17 +.white_box{
  18 + width: 90vw;
  19 + min-height: 70vh;
  20 + margin-top: 40px;
  21 + background-color: #fff;
  22 + border-radius: 4vw;
  23 + padding: 7vw 5vw;
  24 + box-sizing: border-box;
  25 +}
  26 +.title_box {
  27 + display: flex;
  28 + justify-content: space-between;
  29 + align-items: center;
  30 + font-size: 3.9vw;
  31 + font-weight: bold;
  32 + padding: 30px 5vw;
  33 + box-sizing: border-box;
  34 + border-radius: 5vw;
  35 + box-shadow: 1px 1px 1px 1px rgb(207, 206, 206);
  36 +}
  37 +.title_pic {
  38 + display: flex;
  39 + align-items: center;
  40 +}
  41 +.pic {
  42 + width: 25px;
  43 + height: 25px;
  44 + border-radius: 25px;
  45 + margin-right: 7px;
  46 +}
  47 +.red_title {
  48 + color: #FD676A;
  49 +}
  50 +.grey_title {
  51 + margin: 30px 0;
  52 + font-size: 4.5vw;
  53 + color: #999;
  54 + display: flex;
  55 + justify-content: space-between;
  56 +}
  57 +.table_L{
  58 + width: 28vw;
  59 + display: flex;
  60 + justify-content: space-between;
  61 +}
  62 +
  63 +.table_item {
  64 + margin: 20px 0;
  65 + font-size: 4vw;
  66 + color: #333;
  67 + display: flex;
  68 + justify-content: space-between;
  69 + align-items: center;
  70 +}
  71 +.table_R {
  72 + width: 45vw;
  73 + display: flex;
  74 + justify-content: space-between;
  75 + align-items: center;
  76 +}
  77 +.grey_R {
  78 + color:#999;
  79 + font-size: 3.9vw;
  80 +}
  81 +.tem_pic {
  82 + width: 22px;
  83 + height: 28px;
  84 +}
2 85 \ No newline at end of file
... ...
pages/mine/index.wxml
  Diff comments   View file @4b6fcb8
1   -<view class="mine">
2   - <image class="temporary" src="../../img/_mine.png" mode="widthFix" alt="" />
3   - <!-- 打卡记录 -->
4   - <text class="temporary_box" style="width: 340rpx;height: 160rpx;position: absolute;top: 340rpx;left: 32rpx;" bindtap="handleRecord"></text>
5   - <!-- 退出登录 -->
6   - <text class="temporary_box" style="width: 340rpx;height: 160rpx;position: absolute;top: 340rpx;right: 32rpx;" bindtap="handleLoginOut"></text>
7   -
  1 +<view class="mine" style="background-image: url('../../../img/answer/bck.png')">
  2 + <view class="title">
  3 + <view>
  4 + <image class="pic" src="/img/answer/user.png" alt="" />
  5 + </view>
  6 + <view class="title_box">
  7 + <view class="title_name">陈浩然</view>
  8 + <view class="grey_title">绍兴市高级中学.20级</view>
  9 + </view>
  10 + </view>
  11 + <view class="flex_card">
  12 + <view class="card_item" bindtap="handleRecord">
  13 + <view><image class="card_pic" src="/img/answer/dkjl.png" alt="" /></view>
  14 + <view class="item_font">打卡记录</view>
  15 + </view>
  16 + <view class="grey_line"></view>
  17 + <view class="card_item" bindtap="handleLoginOut">
  18 + <view><image class="card_pic" src="/img/answer/back.png" alt="" /></view>
  19 + <view class="item_font">退出登录</view>
  20 + </view>
  21 + </view>
8 22 </view>
... ...
pages/mine/index.wxss
  Diff comments   View file @4b6fcb8
... ... @@ -0,0 +1,59 @@
  1 + .mine {
  2 + position: absolute;
  3 + width: 100vw;
  4 + min-height: 40vh;
  5 + background-size: 100% 100%;
  6 + padding: 140px 5vw 0;
  7 + box-sizing: border-box;
  8 + }
  9 + .title {
  10 + display: flex;
  11 + }
  12 + .pic {
  13 + width: 60px;
  14 + height: 60px;
  15 + border-radius: 60px;
  16 + }
  17 + .title_box {
  18 + margin-left: 20px;
  19 + display: flex;
  20 + align-content: space-between;
  21 + flex-wrap: wrap;
  22 + padding: 4px 0;
  23 + box-sizing: border-box;
  24 + }
  25 + .title_name {
  26 + font-size: 18px;
  27 + font-weight: bold;
  28 + }
  29 + .grey_title {
  30 + width: 100%;
  31 + font-size: 14px;
  32 + color: #999;
  33 + }
  34 + .flex_card {
  35 + display: flex;
  36 + justify-content: space-between;
  37 + padding: 20px 50px;
  38 + box-sizing: border-box;
  39 + box-shadow: 1px 1px 1px 1px rgb(224, 224, 224);
  40 + margin: 40px 0;
  41 + background-color: #fff;
  42 + border-radius: 20px;
  43 + }
  44 + .card_item {
  45 + text-align: center;
  46 + }
  47 + .card_pic {
  48 + width: 30px;
  49 + height: 30px;
  50 +}
  51 +.item_font {
  52 + margin-top: 10px;
  53 + color:#5A6694
  54 + }
  55 + .grey_line {
  56 + width: 1px ;
  57 + height: 60px;
  58 + background-color: #999;
  59 + }
0 60 \ No newline at end of file
... ...
pages/mine/record/record.js
  Diff comments   View file @4b6fcb8
... ... @@ -5,7 +5,7 @@ Page({
5 5 * 页面的初始数据
6 6 */
7 7 data: {
8   - tabindex: 1
  8 + tabindex: 0
9 9 },
10 10  
11 11 /**
... ... @@ -14,14 +14,10 @@ Page({
14 14 onLoad(options) {
15 15  
16 16 },
17   - handleTab1() {
  17 + //切换
  18 + handleTab(e) {
18 19 this.setData({
19   - tabindex: 1
20   - })
21   - },
22   - handleTab2() {
23   - this.setData({
24   - tabindex: 2
  20 + tabindex: e.detail.index
25 21 })
26 22 },
27 23 // 打卡成果
... ...
pages/mine/record/record.json
  Diff comments   View file @4b6fcb8
1 1 {
2 2 "usingComponents": {
3   - "van-icon": "@vant/weapp/icon/index"
  3 + "van-icon": "@vant/weapp/icon/index",
  4 + "van-tab": "@vant/weapp/tab/index",
  5 + "van-tabs": "@vant/weapp/tabs/index"
4 6 },
5   - "navigationStyle": "custom"
  7 + "navigationBarTitleText":"打卡记录"
6 8 }
7 9 \ No newline at end of file
... ...
pages/mine/record/record.wxml
  Diff comments   View file @4b6fcb8
1 1 <!--pages/index/record/record.wxml-->
2 2 <view class="punch_detail">
3   - <!-- 顶部统一返回 -->
4   - <view class="navigation_back" bindtap="handleBack">
5   - <van-icon name="arrow-left" />
6   - </view>
7   - <!-- 两个tab -->
8   - <text class="temporary_box" style="width: 320rpx;height: 80rpx;position: absolute;top: 160rpx;left: 32rpx;" bindtap="handleTab1"></text>
9   - <text class="temporary_box" style="width: 320rpx;height: 80rpx;position: absolute;top: 160rpx;right: 32rpx;" bindtap="handleTab2"></text>
10   - <!-- 打卡成果 -->
11   - <text class="temporary_box" wx:if="{{tabindex==1}}" style="width: 700rpx;height: 100rpx;position: absolute;top: 988rpx;left: 32rpx;" bindtap="handleAchievement"></text>
12   - <!-- 打卡成果 -->
13   - <text class="temporary_box" wx:if="{{tabindex==2}}" style="width: 350rpx;height: 100rpx;position: absolute;top: 920rpx;left: 20rpx;" bindtap="handleAchievement"></text>
14   - <!-- 去打卡 -->
15   - <text class="temporary_box" wx:if="{{tabindex==2}}" style="width: 350rpx;height: 100rpx;position: absolute;top: 920rpx;right: 20rpx;" bindtap="handleDetail"></text>
16   -
17   - <image class="temporary" hidden="{{tabindex==2}}" src="/img/_my_punch1.png" mode="widthFix" alt="" />
18   - <image class="temporary" hidden="{{tabindex==1}}" src="/img/_my_punch2.png" mode="widthFix" alt="" />
19   -
  3 + <view>
  4 + <van-tabs active="{{ tabindex }}" bind:change="handleTab" line-height='0' title-inactive-color='#999' title-active-color='#556191'>
  5 + <van-tab title="我发布的"></van-tab>
  6 + <van-tab title="我的打卡"></van-tab>
  7 + </van-tabs>
  8 + </view>
  9 + <view class="bck">
  10 + <view class="grey_font">进行中打卡</view>
  11 + <view class="card">
  12 + <view class="card_title">
  13 + <view class="title_L">
  14 + <image class="title_pic" src="/img/answer/bj.png" alt="" />
  15 + </view>
  16 + <view class="title_R">
  17 + <view>英语单词每日打卡</view>
  18 + <view class="grey_font">我发布于09-09 08:21</view>
  19 + </view>
  20 + </view>
  21 + <view class="day_font">每日20个英文单词背诵</view>
  22 + <view class="day_font2">已坚持打卡
  23 + <text class="day_font2_large">1/50 </text>天
  24 + </view>
  25 + <view>
  26 + <van-progress percentage="50" color='#3F5EFF' stroke-width="13" pivot-text=' ' />
  27 + </view>
  28 + <view class="flex_font">
  29 + <text class="grey_flex">打卡频次：</text>
  30 + 每天
  31 + </view>
  32 + <view class="flex_font">
  33 + <text class="grey_flex">打卡要求：</text>
  34 + 需填写单词个数
  35 + </view>
  36 + <view class="flex_font">
  37 + <view class="grey_flex">其他：</view>
  38 + 不允许补卡
  39 + </view>
  40 + <view class="grey_line"></view>
  41 + <view class="blue_font" wx:if="{{tabindex == 1}}">
  42 + <view>我的成果</view>
  43 + <view class="blue_line"></view>
  44 + <view>去打卡</view>
  45 + </view>
  46 + <view class="blue_font" wx:else>
  47 + <view>打卡成果</view>
  48 + </view>
  49 + </view>
  50 + </view>
20 51 </view>
21 52 \ No newline at end of file
... ...
pages/mine/record/record.wxss
  Diff comments   View file @4b6fcb8
1 1 /* pages/index/record/record.wxss */
  2 +.punch_detail {
  3 + position: absolute;
  4 + width: 100vw;
  5 + height: 100vh;
  6 + background-color: #F5F6FA;
  7 +}
  8 +
  9 +.bck {
  10 + padding: 20px 4vw;
  11 + box-sizing: border-box;
  12 +}
  13 +
  14 +.grey_font {
  15 + color: #999;
  16 + font-size: 14px;
  17 + margin-bottom: 15px;
  18 +}
  19 +
  20 +/**/
  21 +
  22 +.card {
  23 + width: 92vw;
  24 + height: 360px;
  25 + background-color: #fff;
  26 + border-radius: 8vw;
  27 + padding: 8vw;
  28 + box-sizing: border-box;
  29 + box-shadow: 1px 1px 1px 1px rgb(228, 228, 228);
  30 +}
  31 +
  32 +.card_title {
  33 + display: flex;
  34 +}
  35 +
  36 +.title_L {
  37 + flex-shrink: 0;
  38 + width: 50px;
  39 + height: 50px;
  40 + margin-right: 15px;
  41 +}
  42 +
  43 +.title_pic {
  44 + width: 100%;
  45 + height: 100%;
  46 +}
  47 +
  48 +.title_R {
  49 + height: 65px;
  50 + display: flex;
  51 + align-content: space-between;
  52 + flex-wrap: wrap;
  53 + font-size: 4.6vw;
  54 +}
  55 +
  56 +.grey_font {
  57 + width: 100%;
  58 + color: #999;
  59 + font-size: 3.8vw;
  60 +}
  61 +
  62 +.day_font {
  63 + margin: 10px 0 20px;
  64 + letter-spacing: 0.2vw;
  65 + font-size: 4vw;
  66 +}
  67 +
  68 +.day_font2 {
  69 + margin: 20px 0;
  70 + letter-spacing: 0.2vw;
  71 + font-size: 3.8vw;
  72 +}
  73 +
  74 +.day_font2_large {
  75 + font-size: 5.5vw;
  76 + font-weight: bold;
  77 +}
  78 +
  79 +.flex_font {
  80 + font-size: 3.5vw;
  81 + margin: 20px 0;
  82 + display: flex;
  83 +}
  84 +
  85 +.grey_flex {
  86 + width: 80px;
  87 + color: #999;
  88 +}
  89 +
  90 +.grey_line {
  91 + width: 100%;
  92 + height: 1px;
  93 + background-color: #EAEAEA;
  94 +}
  95 +
  96 +.blue_font {
  97 + display: flex;
  98 + justify-content: space-around;
  99 + margin-top: 20px;
  100 + font-size: 4.1vw;
  101 + color: #458EF8;
  102 + font-weight: 540;
  103 +}
  104 +
  105 +.blue_line {
  106 + width: 1px;
  107 + height: 20px;
  108 + background-color: #EAEAEA;
  109 +}
2 110 \ No newline at end of file
... ...