页面开发

pages/clock/clock.js

@@ -11,15 +11,31 @@ Page({
    * 页面的初始数据
    */
   data: {
-    approveStatus:false,
-    imgServerUrl
+    approveStatus: false,
+    imgServerUrl,
+    time: '42.0',
+    money: '170.94',
+    navigation:[
+      {
+        image:'/images/clock/clock-tongji.png',
+        text:'统计'
+      },
+      {
+        image:'/images/clock/clock-rule-icon.png',
+        text:'规则'
+      },
+      {
+        image:'/images/clock/clock-kefu.png',
+        text:'客服'
+      },
+    ]
   },
 
   /**
    * 生命周期函数--监听页面加载
    */
   onLoad: function (options) {
-   
+
   },
 
   /**

pages/clock/clock.wxml

@@ -3,7 +3,7 @@
 <view class="container">
   <view class="no-authentication" wx:if="{{approveStatus === 0}}">
     <view class="header">
-      <image src="../../images/clock/clock-bg.png" class="no-authentication-bg" mode="widthFixed"></image>
+      <image src="{{imgServerUrl}}/images/clock/clock-bg.png" class="no-authentication-bg" mode="widthFixed"></image>
     </view>
     <view class="no-authentication-content">
       <image src="{{imgServerUrl}}/images/clock/clock-no-certified.png" class="no-authentication-img"></image>
@@ -20,7 +20,7 @@
         前往认证
       </navigator>
     </view>
-    <image src="../../images/clock/clock-video.png" class="video"></image>
+    <image src="{{imgServerUrl}}/images/clock/clock-video.png" class="video"></image>
   </view>
   <view class="no-pass" wx:elif="{{approveStatus === 2}}">
     <view class="header">
@@ -38,12 +38,60 @@
     </view>
     <image src="../../images/clock/clock-video.png" class="video"></image>
   </view>
-  <view wx:else>
-    <view wx:if="{{approveStatus === 1}}">
-      <image src="{{imgServerUrl}}/images/clock/clock-approving.png"></image>
+  <view class="pass" wx:else>
+    <view class="pass-header">
+      <image src="{{imgServerUrl}}/images/clock/clock-bg-home.png" class="pass-header-bg" mode="widthFixed"></image>
+      <view class="pass-header-content">
+        <view class="time">
+          <view>本周工时</view>
+          <view>
+            <text class="number">{{time}}</text>
+            <text class="unit">小时</text>
+          </view>
+        </view>
+        <view class="money">
+          <view>本周预支</view>
+          <view>
+            <text class="number">{{money}}</text>
+            <text class="unit">元</text>
+          </view>
+        </view>
+      </view>
+      <view class="pass-header-message">实际预支发放结合企业考勤，以上金额仅供参考。</view>
+      <view class="pass-header-footer">
+        <view class="pass-header-footer-view" wx:for="{{navigation}}" wx:key='index'>
+          <image src='{{imgServerUrl}}{{item.image}}'></image>
+          <text>{{item.text}}</text>
+        </view>
+      </view>
     </view>
-    <view wx:else>
-      <image src="{{imgServerUrl}}/images/clock/clock-in.png"></image>
+    <view class="pass-content">
+      <view class="status">
+        <view class="clock-in">
+          <text>上班打卡</text>
+          <text class="status-text">未完成</text>
+        </view>
+        <view class="clock-out">
+          <text>上班打卡</text>
+          <text class="status-text">未完成</text>
+        </view>
+      </view>
+      <view class="rule-messgae">规则：请根据企业实际上下班时间打卡</view>
+      <view wx:if="{{approveStatus === 1}}" class="image">
+        <image src="{{imgServerUrl}}/images/clock/clock-approving.png"></image>
+      </view>
+      <view wx:else class="image">
+        <image src="{{imgServerUrl}}/images/clock/clock-in.png"></image>
+      </view>
+      <view class="clock-status" wx:if="{{approveStatus === 1}}">
+        <image src="{{imgServerUrl}}/images/clock/clock-waring.png"></image>
+        <text>我们会尽快完成实名认证审核</text>
+      </view>
+      <view class="clock-status" wx:else>
+        <image src="{{imgServerUrl}}/images/clock/clock-waring.png"></image>
+        <text>我们会尽快完成实名认证审核</text>
+      </view>
     </view>
+    <image src="{{imgServerUrl}}/images/clock/clock-video-home.png" class="video"></image>
   </view>
 </view>

pages/clock/clock.wxss

@@ -1,6 +1,8 @@
 /* pages/clock/clock.wxss */
 page {
   background: rgba(245, 245, 245, 1);
+  font-family: PingFangSC-Regular, PingFang SC;
+  padding-bottom: 30rpx;
 }
 
 .video {
@@ -88,4 +90,175 @@ page {
   border-radius: 10rpx;
   border: 2rpx solid rgba(0, 122, 255, 1);
   margin-top: 88rpx;
+}
+
+.pass {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+
+}
+
+.pass-header {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  position: relative;
+}
+
+.pass-header-bg {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  z-index: -1;
+}
+
+.pass-header-content {
+  width: 70%;
+  font-size: 28rpx;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 100rpx;
+}
+
+.number {
+  font-size: 68rpx;
+  font-family: DINCondensed-Bold, DINCondensed;
+  font-weight: bold;
+  color: #FFFFFF;
+}
+
+.unit {
+  font-size: 28rpx;
+}
+
+.pass-header-message {
+  font-size: 22rpx;
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 500;
+  color: rgba(255, 255, 255, 0.7);
+  margin-top: 20rpx;
+}
+
+.pass-header-footer {
+  width: 690rpx;
+  height: 164rpx;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  background: #FFFFFF;
+  box-shadow: 0px 10rpx 10rpx 0rpx rgba(0, 0, 0, 0.06);
+  border-radius: 32rpx;
+  margin-top: 20rpx;
+}
+
+.pass-header-footer-view {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+
+.pass-header-footer-view image {
+  width: 48rpx;
+  height: 52rpx;
+}
+
+.pass-header-footer-view text {
+  font-size: 24rpx;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #666666;
+  margin-top: 16rpx;
+}
+
+.pass-content {
+  width: 690rpx;
+  height: 748rpx;
+  background: #FFFFFF;
+  box-shadow: 0px 10rpx 10rpx 0rpx rgba(0, 0, 0, 0.06);
+  border-radius: 32rpx;
+  margin-top: 20rpx;
+  padding: 30rpx;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+}
+
+.status {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.status view {
+  width: 310rpx;
+  height: 98rpx;
+  font-size: 28rpx;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #000000;
+  background: #F5F5F5;
+  border-radius: 10rpx;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.status-text {
+  font-size: 26rpx;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #999999;
+}
+
+.rule-messgae {
+  width: 100%;
+  font-size: 24rpx;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #999999;
+  margin-top: 20rpx;
+  margin-bottom: 100rpx;
+}
+
+.image {
+  height: 260rpx;
+  width: 260rpx;
+}
+
+.image image {
+  height: 100%;
+  width: 100%;
+}
+
+.clock-status {
+  font-size: 26rpx;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #666666;
+  margin-top: 70rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.clock-status image {
+  height: 30rpx;
+  width: 30rpx;
+  margin-right: 12rpx;
+}
+
+.video {
+  height: 248rpx;
+  width: 690rpx;
+  margin: 0 auto;
 }