我的页面微调，考勤页面重画

Administrator

2021-07-01 2ff14ce3f615c003c862e1f015cec414c1f2d337

我的页面微调，考勤页面重画

 pages.json

@@ -260,7 +260,11 @@
            "path": "pages/clockSignIn/clockSignIn",
            "name": "clockSignIn",
            "style": {
                "navigationBarTitleText": "打卡签到"
                "navigationBarTitleText": "打卡签到",
                "navigationBarBackgroundColor": "#25262E",
                "app-plus":{
                    "titleNView":false
                }
            }
        },
        {

 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">上班时间:&nbsp;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">您已进入考勤范围:&nbsp;万科中心</view>
                    </view>
                    <view class="down-time">下班时间:&nbsp;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>

 pages/myself/myself.vue

@@ -4,8 +4,7 @@
        <view class="m-top">
            <view class="my-user-info">
                <view class="user-name-id">
                    <!-- <view>{{userName}}</view> -->
                    <view class="user-name">周刚</view>
                    <view class="user-name">{{userName}}</view>
                    <view class="user-id">ID: &nbsp;4120552252</view>
                </view>
                <view class="userImg">
@@ -418,6 +417,10 @@
                        font-size: 0.9rem;
                    }
                }
				
                image{
                    margin-right: 1rem;
                }
            }
        }
    }

 static/images/clock/position01.png

 xcxjingqingmap_clock_sign_in/img/back02.png