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

Administrator

2021-07-01 2ff14ce3f615c003c862e1f015cec414c1f2d337

 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>