Commit 4b6fcb8940f8f1f35fbdb9e3d8f875a9bf66318e
1 parent
7fba2e1e
Exists in
master
feat：部分静态页面调整
Showing
43 changed files
with
852 additions
and
136 deletions
Show diff stats
app.json
| 1 | { | 1 | { |
| 2 | "pages": [ | 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 | "pages/index/achievement/achievement", | 8 | "pages/index/achievement/achievement", |
| 6 | "pages/index/punchDetail/punchDetail", | 9 | "pages/index/punchDetail/punchDetail", |
| 7 | - "pages/index/newPunch/newPunch", | ||
| 8 | "pages/login/codeLogin/codeLogin", | 10 | "pages/login/codeLogin/codeLogin", |
| 9 | "pages/login/protocol/protocol", | 11 | "pages/login/protocol/protocol", |
| 10 | "pages/login/policy/policy", | 12 | "pages/login/policy/policy", |
| 11 | - "pages/mine/index", | ||
| 12 | - "pages/mine/record/record", | ||
| 13 | "pages/webview/webview" | 13 | "pages/webview/webview" |
| 14 | ], | 14 | ], |
| 15 | "window": { | 15 | "window": { |
| 16 | "backgroundTextStyle": "dark", | 16 | "backgroundTextStyle": "dark", |
| 17 | "navigationBarBackgroundColor": "#fff", | 17 | "navigationBarBackgroundColor": "#fff", |
| 18 | - "navigationBarTitleText": "计划管家", | 18 | + "navigationBarTitleText": "打卡管理", |
| 19 | "navigationBarTextStyle": "black" | 19 | "navigationBarTextStyle": "black" |
| 20 | }, | 20 | }, |
| 21 | "tabBar": { | 21 | "tabBar": { |
app.wxss
| 1 | -/* @import "/miniprogram_npm/@vant/weapp/common/index.wxss"; */ | ||
| 2 | -page{ | 1 | +@import "/miniprogram_npm/@vant/weapp/common/index.wxss"; |
| 2 | +/* page{ | ||
| 3 | background: #fff; | 3 | background: #fff; |
| 4 | -} | 4 | +} */ |
| 5 | /* 二级页面顶部统一返回按钮，位置可能需要根据机型调整 */ | 5 | /* 二级页面顶部统一返回按钮，位置可能需要根据机型调整 */ |
| 6 | -.navigation_back{ | 6 | +/* .navigation_back{ |
| 7 | width: 80rpx; | 7 | width: 80rpx; |
| 8 | height: 80rpx; | 8 | height: 80rpx; |
| 9 | border: 1px solid rgb(255, 207, 105); | 9 | border: 1px solid rgb(255, 207, 105); |
| @@ -14,9 +14,9 @@ page{ | @@ -14,9 +14,9 @@ page{ | ||
| 14 | display: flex; | 14 | display: flex; |
| 15 | align-items: center; | 15 | align-items: center; |
| 16 | justify-content: center; | 16 | justify-content: center; |
| 17 | -} | 17 | +} */ |
| 18 | /* 临时文件，设计稿图 */ | 18 | /* 临时文件，设计稿图 */ |
| 19 | -.temporary{ | 19 | +/* .temporary{ |
| 20 | width: 100%; | 20 | width: 100%; |
| 21 | position: absolute; | 21 | position: absolute; |
| 22 | top: 0; | 22 | top: 0; |
| @@ -25,4 +25,4 @@ page{ | @@ -25,4 +25,4 @@ page{ | ||
| 25 | .temporary_box{ | 25 | .temporary_box{ |
| 26 | border: 1px solid rgb(255, 207, 105); | 26 | border: 1px solid rgb(255, 207, 105); |
| 27 | z-index: 98; | 27 | z-index: 98; |
| 28 | -} | ||
| 29 | \ No newline at end of file | 28 | \ No newline at end of file |
| 29 | +} */ | ||
| 30 | \ No newline at end of file | 30 | \ No newline at end of file |
2.52 KB
2.9 KB
3.28 KB
12.7 KB
1.62 KB
101 KB
4.08 KB
59.3 KB
67.9 KB
1.16 KB
5.09 KB
6.51 KB
178 KB
853 Bytes
4.32 KB
62.6 KB
1.04 KB
3.82 KB
2.99 KB
1.12 KB
4.35 KB
2.95 KB
package-lock.json
| 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 | "requires": true, | 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 | "dependencies": { | 6 | "dependencies": { |
| 22 | "@vant/weapp": { | 7 | "@vant/weapp": { |
| 23 | "version": "1.10.5", | 8 | "version": "1.10.5", |
pages/index/index.js
| @@ -4,63 +4,54 @@ import request from '../../api/request.js' | @@ -4,63 +4,54 @@ import request from '../../api/request.js' | ||
| 4 | 4 | ||
| 5 | Page({ | 5 | Page({ |
| 6 | data: { | 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 | // bannerList: [], // 轮播图 | 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 | this.setData({ | 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 | this.setData({ | 24 | this.setData({ |
| 40 | showAdd: true | 25 | showAdd: true |
| 41 | }) | 26 | }) |
| 42 | }, | 27 | }, |
| 28 | + //关闭 | ||
| 43 | closeAdd() { | 29 | closeAdd() { |
| 44 | this.setData({ | 30 | this.setData({ |
| 45 | showAdd: false | 31 | showAdd: false |
| 46 | }) | 32 | }) |
| 47 | }, | 33 | }, |
| 48 | - // 打卡成果 | ||
| 49 | - handleAchievement(){ | 34 | + //查看排行榜 |
| 35 | + toRank() { | ||
| 50 | wx.navigateTo({ | 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 | wx.navigateTo({ | 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 | // 获取banner图 | 57 | // 获取banner图 |
pages/index/index.json
| 1 | { | 1 | { |
| 2 | "usingComponents": { | 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 | "navigationBarTextStyle": "black", | 8 | "navigationBarTextStyle": "black", |
| 6 | "navigationStyle": "custom" | 9 | "navigationStyle": "custom" |
pages/index/index.wxml
| 1 | <view class="main"> | 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 | </van-popup> | 66 | </van-popup> |
| 20 | - | ||
| 21 | </view> | 67 | </view> |
| 22 | \ No newline at end of file | 68 | \ No newline at end of file |
pages/index/index.wxss
| @@ -0,0 +1,193 @@ | @@ -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 | \ No newline at end of file | 194 | \ No newline at end of file |
pages/index/newPunch/newPunch.js
| @@ -5,8 +5,20 @@ Page({ | @@ -5,8 +5,20 @@ Page({ | ||
| 5 | * 页面的初始数据 | 5 | * 页面的初始数据 |
| 6 | */ | 6 | */ |
| 7 | data: { | 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
| 1 | { | 1 | { |
| 2 | "usingComponents": { | 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 | \ No newline at end of file | 12 | \ No newline at end of file |
pages/index/newPunch/newPunch.wxml
| 1 | <!--pages/index/rank/rank.wxml--> | 1 | <!--pages/index/rank/rank.wxml--> |
| 2 | <view class="punch_detail"> | 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 | </view> | 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 | </view> | 87 | </view> |
| 12 | \ No newline at end of file | 88 | \ No newline at end of file |
pages/index/newPunch/newPunch.wxss
| 1 | /* pages/index/newPunch/newPunch.wxss */ | 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 | \ No newline at end of file | 83 | \ No newline at end of file |
pages/index/rank/rank.js
pages/index/rank/rank.json
| @@ -2,5 +2,5 @@ | @@ -2,5 +2,5 @@ | ||
| 2 | "usingComponents": { | 2 | "usingComponents": { |
| 3 | "van-icon": "@vant/weapp/icon/index" | 3 | "van-icon": "@vant/weapp/icon/index" |
| 4 | }, | 4 | }, |
| 5 | - "navigationStyle": "custom" | 5 | + "navigationBarTitleText": "排行榜" |
| 6 | } | 6 | } |
| 7 | \ No newline at end of file | 7 | \ No newline at end of file |
pages/index/rank/rank.wxml
| 1 | <!--pages/index/rank/rank.wxml--> | 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 | </view> | 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 | </view> | 35 | </view> |
| 10 | \ No newline at end of file | 36 | \ No newline at end of file |
pages/index/rank/rank.wxss
| 1 | /* pages/index/rank/rank.wxss */ | 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 | \ No newline at end of file | 85 | \ No newline at end of file |
pages/mine/index.wxml
| 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 | </view> | 22 | </view> |
pages/mine/index.wxss
| @@ -0,0 +1,59 @@ | @@ -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 | \ No newline at end of file | 60 | \ No newline at end of file |
pages/mine/record/record.js
| @@ -5,7 +5,7 @@ Page({ | @@ -5,7 +5,7 @@ Page({ | ||
| 5 | * 页面的初始数据 | 5 | * 页面的初始数据 |
| 6 | */ | 6 | */ |
| 7 | data: { | 7 | data: { |
| 8 | - tabindex: 1 | 8 | + tabindex: 0 |
| 9 | }, | 9 | }, |
| 10 | 10 | ||
| 11 | /** | 11 | /** |
| @@ -14,14 +14,10 @@ Page({ | @@ -14,14 +14,10 @@ Page({ | ||
| 14 | onLoad(options) { | 14 | onLoad(options) { |
| 15 | 15 | ||
| 16 | }, | 16 | }, |
| 17 | - handleTab1() { | 17 | + //切换 |
| 18 | + handleTab(e) { | ||
| 18 | this.setData({ | 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
| 1 | { | 1 | { |
| 2 | "usingComponents": { | 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 | \ No newline at end of file | 9 | \ No newline at end of file |
pages/mine/record/record.wxml
| 1 | <!--pages/index/record/record.wxml--> | 1 | <!--pages/index/record/record.wxml--> |
| 2 | <view class="punch_detail"> | 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 | </view> | 51 | </view> |
| 21 | \ No newline at end of file | 52 | \ No newline at end of file |
pages/mine/record/record.wxss
| 1 | /* pages/index/record/record.wxss */ | 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 | \ No newline at end of file | 110 | \ No newline at end of file |