From 2ff14ce3f615c003c862e1f015cec414c1f2d337 Mon Sep 17 00:00:00 2001
From: Administrator <admin>
Date: Thu, 01 Jul 2021 19:55:14 +0800
Subject: [PATCH] 我的页面微调，考勤页面重画
---
pages/clockSignIn/clockSignIn.vue | 310 +++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 306 insertions(+), 4 deletions(-)
diff --git a/pages/clockSignIn/clockSignIn.vue b/pages/clockSignIn/clockSignIn.vue
index 1dbaa93..49db344 100644
--- a/pages/clockSignIn/clockSignIn.vue
+++ b/pages/clockSignIn/clockSignIn.vue
@@ -1,6 +1,44 @@
<template>
<view class="content">
- <web-view :src="urls"></web-view>
+ <!-- 自定义顶部导航栏 -->
+ <view class="uni-nav-bar-info" :fixed="true" :status-bar="true">
+ <view class="uni-nav-bar-left" @click="goBack()">
+ <image src="../../static/images/nav/back02.png" />
+ </view>
+ <view class="title" slot="default">考勤打卡</view>
+ <view class="right">
+ <view class="title-right">打卡记录</view>
+ </view>
+ </view>
+ <view class="clock-time-background"></view>
+ <view class="clock-time">
+ <view class="clock-info">
+ <view class="clock-left">
+ <view class="clock-up-radiu"></view>
+ <view class="clock-line"></view>
+ <view class="clock-down-radiu"></view>
+ </view>
+ <view class="clock-right">
+ <view class="up-time">上班时间: 08:30</view>
+ <view class="clock-btn">
+ <view class="btn1">
+ <view class="btn0">
+ <view class="btn">
+ <view class="btn-title">打卡</view>
+ <view class="btn-time">{{nowTime}}</view>
+ </view>
+ </view>
+ </view>
+ </view>
+ <view class="clock-position">
+ <image src="../../static/images/clock/position01.png"></image>
+ <view class="clock-position">您已进入考勤范围: 万科中心</view>
+ </view>
+ <view class="down-time">下班时间: 18:00</view>
+ </view>
+ </view>
+ </view>
+ <!-- <web-view :src="urls"></web-view> -->
</view>
</template>
@@ -8,18 +46,282 @@
export default {
data() {
return {
- urls: ''
+ urls: '',
+ nowTime:''
}
},
- methods: {},
- mounted() {},
+ mounted() {
+ //获取当前位置信息
+ this.getNowPosition();
+ //获取时钟
+ setInterval(() => {
+ this.nowTime = this.getNowTime(3)
+ }, 1000);
+ },
onLoad: function(options) {
//long 转换为字符串
var code = JSON.stringify(this.$store.state.puserID.toString());
this.urls = "http://s16s652780.51mypc.cn/xcxjingqingmap_clock_sign_in/xcxmap.html?snumber="+code;
},
+ methods: {
+ //获取当前位置信息
+ getNowPosition(){
+ uni.getLocation({
+ type: 'wgs84',
+ geocode:'true',
+ success: function (res) {
+ debugger;
+ console.log('当前位置：' + res);
+ console.log('当前位置的经度：' + res.longitude);
+ console.log('当前位置的纬度：' + res.latitude);
+ }
+ });
+ },
+ //返回上一页
+ goBack() {
+ uni.navigateBack({})
+ },
+
+ //获取当前时间
+ getNowTime(type) {
+ //1、获得当前时间，格式化时间
+ var now = new Date();
+ var year = now.getFullYear();
+ var month = now.getMonth() + 1;
+ if (month < 10) {
+ month = "0" + month;
+ }
+ var date = now.getDate();
+ if (date < 10) {
+ date = "0" + date;
+ }
+ var hour = now.getHours();
+ if (hour < 10) {
+ hour = "0" + hour;
+ }
+ var minute = now.getMinutes();
+ if (minute < 10) {
+ minute = "0" + minute;
+ }
+ var second = now.getSeconds();
+ if (second < 10) {
+ second = "0" + second;
+ }
+ var nowstr = null;
+ if (type == 1) {
+ nowstr = year + "-" + month + "-" + date + " " + hour + ":" + minute + ":" + second;
+ }
+ if (type == 2) {
+ nowstr = year + "年" + month + "月" + date + "日 " + hour + ":" + minute + ":" + second;
+ }
+ if (type == 3) {
+ nowstr = hour + ":" + minute + ":" + second;
+ }
+ return nowstr;
+ },
+ },
+
}
</script>
<style>
+ page{
+ width: 100%;
+ height: 100%;
+ background-color: #FCFBFC;
+ }
+</style>
+
+<style lang="scss" scoped>
+
+ .btn0{
+ width: 6.5rem;
+ height: 6.5rem;
+ // background-image: linear-gradient(to bottom,#C6F1E2,#C6F1E2);
+ background-color: #C6F1E2;
+ border-radius: 100px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ .btn1{
+ width: 7rem;
+ height: 7rem;
+ // background-image: linear-gradient(to bottom,#EBF2F0,#EBF2F0);
+ background-color: #EBF2F0;
+ border-radius: 100px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ .content{
+ width: 100%;
+ height: 100%;
+
+ .uni-nav-bar-info {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ // background-color:#0078A8;
+ width: 100%;
+ height: 50px;
+ margin-top: 20px;
+
+ .uni-nav-bar-left {
+ width: 15%;
+ display: flex;
+ justify-items: center;
+
+ image {
+ // background-color: #00BFFF;
+ margin-left: 1rem;
+ width: 1.6rem;
+ height: 1.6rem;
+ }
+ }
+
+ .title {
+ width: 70%;
+ font-weight: 550;
+ letter-spacing: 1px;
+ text-align: center;
+ }
+
+
+ .right {
+ width: 15%;
+ display: flex;
+ justify-items: center;
+ margin-top: 0.2rem;
+
+ .title-right {
+ font-size: 0.8rem;
+ color: #808080;
+ }
+ }
+
+
+ }
+
+
+ .clock-time-background{
+ width: 100%;
+ height: 15rem;
+ background-color: #F5F5F5;
+ }
+
+
+ .clock-time{
+ width: 100%;
+ height: 20rem;
+ margin-top: -15rem;
+ // background-color: #0078A8;
+
+ .clock-info{
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-direction: row;
+ // margin: 0 auto;
+
+ .clock-left{
+ width: 10%;
+ margin-top: -1rem;
+ margin-left: 8%;
+ display: flex;
+ flex-direction: column;
+ // background-color: #00FFFF;
+ align-items: center;
+ justify-content: center;
+
+ .clock-up-radiu{
+ width: 0.9rem;
+ height: 0.9rem;
+ border-radius: 100px;
+ border: 2px solid #6DC7A9;
+ }
+
+ .clock-line{
+ width: 1.5px;
+ height: 15rem;
+ background-color: #EDEDED;
+ }
+
+ .clock-down-radiu{
+ width: 0.9rem;
+ height: 0.9rem;
+ border-radius: 100px;
+ border: 2px solid #6DC7A9;
+ }
+
+ }
+
+ .clock-right{
+ width: 64%;
+ height: 100%;
+ margin-top: 1rem;
+ display: flex;
+ flex-direction: column;
+
+ .up-time{
+ width: 100%;
+ height: 1.5rem;
+ margin-top: -0.2rem;
+ }
+
+ .clock-btn{
+ width: 100%;
+ height: 9.5rem;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ // background-color: #007AFF;
+ // margin-left: 5rem;
+
+
+ .btn{
+ width: 6rem;
+ height: 6rem;
+ border-radius: 100px;
+ color: #FFFFFF;
+ background-image: linear-gradient(to bottom,#65CBA9,#66D0AC);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+
+ .btn-title{
+ font-size: 1.2rem;
+ }
+ }
+ }
+
+ .clock-position{
+ width: 100%;
+ height: 2rem;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ image{
+ width: 2rem;
+ height: 1.5rem;
+ margin-left: 2rem;
+ }
+ }
+
+
+ .down-time{
+ height: 7rem;
+ line-height: 7rem;
+
+ // margin-top: 2.3rem;
+ }
+ }
+ }
+ }
+ }
+
</style>
\ No newline at end of file
--
Gitblit v1.9.3