|
@@ -1,42 +1,18 @@
|
|
|
<template>
|
|
<template>
|
|
|
- <view class="content">
|
|
|
|
|
- <u-navbar :background="background" back-icon-color="#fff" titleColor="#fff" :title="vuex_now_date"></u-navbar>
|
|
|
|
|
- <calendar ref='ren' :markDays='markDays' :open="true" :disabledAfter='true' @onDayClick='onDayClick'></calendar>
|
|
|
|
|
-
|
|
|
|
|
- <view class="rule">
|
|
|
|
|
- <view class="left">
|
|
|
|
|
- <view class="title">上下班打卡</view>
|
|
|
|
|
- <view class="desc">
|
|
|
|
|
- <text>打卡规则:</text>
|
|
|
|
|
- <text>早9晚6点半</text>
|
|
|
|
|
- <text style="padding: 0 15rpx;">|</text>
|
|
|
|
|
- <text>工作时长:</text>
|
|
|
|
|
- <text>10小时30分钟</text>
|
|
|
|
|
- </view>
|
|
|
|
|
- </view>
|
|
|
|
|
- <view class="right desc">
|
|
|
|
|
- <text class="cuIcon-right"></text>
|
|
|
|
|
- </view>
|
|
|
|
|
- </view>
|
|
|
|
|
-
|
|
|
|
|
- <view class="history">
|
|
|
|
|
- <view class="left">
|
|
|
|
|
- <text class="time">09:00</text>
|
|
|
|
|
- <view class="bar">
|
|
|
|
|
- <text></text>
|
|
|
|
|
|
|
+ <view class="safe-area-inset-bottom">
|
|
|
|
|
+ <view class="card" v-for="(item,index) in 8" :key="index">
|
|
|
|
|
+ <view class="item">
|
|
|
|
|
+ <view class="left">
|
|
|
|
|
+ <view class="tag bg-red">
|
|
|
|
|
+ <text>麦</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="content">
|
|
|
|
|
+ <text class="text-cut-1">麦草方格(宁夏)文化传媒有限公司</text>
|
|
|
|
|
+ <text class="text-cut-1">德锐斯园区A区</text>
|
|
|
|
|
+ </view>
|
|
|
</view>
|
|
</view>
|
|
|
- <text class="time">18:30</text>
|
|
|
|
|
- </view>
|
|
|
|
|
-
|
|
|
|
|
- <view class="right">
|
|
|
|
|
- <view class="working" style="padding-bottom: 40rpx;">
|
|
|
|
|
- <text class="padding-bottom-10">上班 · 自动</text>
|
|
|
|
|
- <text class="desc">正常打卡(08:57)</text>
|
|
|
|
|
- </view>
|
|
|
|
|
-
|
|
|
|
|
- <view class="working" style="padding-top: 10rpx;">
|
|
|
|
|
- <text class="padding-bottom-10">下班 · 自动</text>
|
|
|
|
|
- <text class="desc">正常打卡(18:30)</text>
|
|
|
|
|
|
|
+ <view class="right">
|
|
|
|
|
+ <image src="../../static/index/call.png" mode=""></image>
|
|
|
</view>
|
|
</view>
|
|
|
</view>
|
|
</view>
|
|
|
</view>
|
|
</view>
|
|
@@ -44,131 +20,72 @@
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
<script>
|
|
|
- import calendar from '@/components/calendar/calendar.vue'
|
|
|
|
|
export default {
|
|
export default {
|
|
|
- components:{
|
|
|
|
|
- calendar
|
|
|
|
|
- },
|
|
|
|
|
data() {
|
|
data() {
|
|
|
return {
|
|
return {
|
|
|
- background: {
|
|
|
|
|
- backgroundColor: '#5064eb',
|
|
|
|
|
- },
|
|
|
|
|
- isfuture:false,
|
|
|
|
|
- markDays:[
|
|
|
|
|
- '2021-04-16',
|
|
|
|
|
- '2021-04-17',
|
|
|
|
|
- '2021-04-18',
|
|
|
|
|
- '2021-04-19',
|
|
|
|
|
- '2021-04-20'
|
|
|
|
|
- ]
|
|
|
|
|
|
|
+
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
- onReady() {
|
|
|
|
|
- let today = this.$refs.ren.getToday().date;
|
|
|
|
|
- this.$u.vuex("vuex_now_date",this.$dateTime.format(new Date(today),"YYYY年mm月dd日"))
|
|
|
|
|
- },
|
|
|
|
|
methods: {
|
|
methods: {
|
|
|
- onDayClick(data){
|
|
|
|
|
- if (!data) {
|
|
|
|
|
- this.isfuture=true
|
|
|
|
|
- return
|
|
|
|
|
- }
|
|
|
|
|
- this.isfuture=false
|
|
|
|
|
- this.$u.vuex("vuex_now_date",this.$dateTime.format(new Date(data.date),"YYYY年mm月dd日"))
|
|
|
|
|
- }
|
|
|
|
|
|
|
+
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss">
|
|
<style lang="scss">
|
|
|
- page{
|
|
|
|
|
- background-color: #f2f2f2;
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ .card{
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+ background-color: #FFFFFF;
|
|
|
|
|
+ padding: 35rpx;
|
|
|
|
|
+ margin: 20rpx;
|
|
|
|
|
|
|
|
- .flex-center{
|
|
|
|
|
|
|
+ .item{
|
|
|
display: flex;
|
|
display: flex;
|
|
|
- justify-content: center;
|
|
|
|
|
- align-items: center;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .desc{
|
|
|
|
|
- font-size: 28rpx;
|
|
|
|
|
- color: #8f8f8f;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .content {
|
|
|
|
|
- .change{
|
|
|
|
|
- display: flex;
|
|
|
|
|
- align-items: center;
|
|
|
|
|
- justify-content: center;
|
|
|
|
|
- margin: 0 auto;
|
|
|
|
|
- margin-top: 100rpx;
|
|
|
|
|
- height: 100rpx;
|
|
|
|
|
- color: #b89249;
|
|
|
|
|
- background-color: #21191b;
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ justify-content: space-between;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- .rule{
|
|
|
|
|
- padding: 20rpx 30rpx;
|
|
|
|
|
|
|
+ .left{
|
|
|
display: flex;
|
|
display: flex;
|
|
|
- justify-content: space-between;
|
|
|
|
|
- border-bottom: 1rpx solid $dt-border-color-sm;
|
|
|
|
|
|
|
+ width: 88%;
|
|
|
|
|
|
|
|
- .left{
|
|
|
|
|
- .title{
|
|
|
|
|
- font-size: 30rpx;
|
|
|
|
|
- font-weight: 800;
|
|
|
|
|
- padding-bottom: 10rpx;
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- .right{
|
|
|
|
|
|
|
+ .tag{
|
|
|
|
|
+ border-radius: 50%;
|
|
|
display: flex;
|
|
display: flex;
|
|
|
justify-content: center;
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
|
|
+ height: 80rpx;
|
|
|
|
|
+ width: 80rpx;
|
|
|
|
|
+ font-size: 32rpx;
|
|
|
}
|
|
}
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .history{
|
|
|
|
|
- display: flex;
|
|
|
|
|
- padding: 40rpx;
|
|
|
|
|
- .left{
|
|
|
|
|
|
|
+
|
|
|
|
|
+ .content{
|
|
|
|
|
+ padding-left: 30rpx;
|
|
|
display: flex;
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
flex-direction: column;
|
|
|
- justify-content: center;
|
|
|
|
|
|
|
|
|
|
- .time{
|
|
|
|
|
- font-weight: 550;
|
|
|
|
|
- font-size: 36rpx;
|
|
|
|
|
|
|
+ text:first-child{
|
|
|
|
|
+ font-size: 32rpx;
|
|
|
}
|
|
}
|
|
|
- .bar{
|
|
|
|
|
- padding: 10rpx 0;
|
|
|
|
|
- display: flex;
|
|
|
|
|
- justify-content: center;
|
|
|
|
|
- align-items: center;
|
|
|
|
|
-
|
|
|
|
|
- text{
|
|
|
|
|
- width: 8rpx;
|
|
|
|
|
- height: 80rpx;
|
|
|
|
|
- background-color: #dedede;
|
|
|
|
|
- }
|
|
|
|
|
|
|
+
|
|
|
|
|
+ text:last-child{
|
|
|
|
|
+ font-size: 28rpx;
|
|
|
|
|
+ color: #9f9f9f;
|
|
|
|
|
+ padding-top: 15rpx;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
- .right{
|
|
|
|
|
- display: flex;
|
|
|
|
|
- flex-direction: column;
|
|
|
|
|
- justify-content: space-between;
|
|
|
|
|
- padding-left: 50rpx;
|
|
|
|
|
- .working{
|
|
|
|
|
- display: flex;
|
|
|
|
|
- flex-direction: column;
|
|
|
|
|
-
|
|
|
|
|
- text:first-child{
|
|
|
|
|
- font-weight: 550;
|
|
|
|
|
- font-size: 32rpx;
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .right{
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+
|
|
|
|
|
+ image{
|
|
|
|
|
+ width: 50rpx;
|
|
|
|
|
+ height: 50rpx;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+ }
|
|
|
</style>
|
|
</style>
|