You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

516 lines
14 KiB

1 year ago
<!--
* @Author: 张涛
* @Date: 2023-11-06 14:18:06
* @LastEditors: 张涛
* @LastEditTime: 2023-11-17 15:09:01
* @FilePath: \JiangNingUmale-App\subcontract\work\attence\components\comanalysis.vue
-->
<template>
<view class="page">
<view class="view-segmented">
<uni-segmented-control
:current="current"
:values="items"
@clickItem="onClickItem"
styleType="button"
activeColor="#007aff"
bgColor="#FFFFFF"
fontColor="#34373B"
tabHeight="88rpx"
tabFontsize="32rpx"
tabBoxShadow="1rpx 1rpx 10rpx rgba(0,0,0,0.2)"
tabBorderRadius="16rpx"
class="segmented-controls"
></uni-segmented-control>
</view>
<view class="main-content">
<view class="view-one" v-show="current === 0">
<view class="view-calendar">
<view class="date">
<view class="icon-arrowleft"></view>
<view class="text-date">2023年07月</view>
<view class="icon-arrowright"></view>
</view>
<!-- 插入模式 -->
<uni-calendar
class="uni-calendar--hook"
:selected="info.selected"
:showMonth="false"
@change="change"
@monthSwitch="monthSwitch"
/>
<view class="icon-arrow"></view>
</view>
<view class="view-rule">
<view>打卡规则A组班次 7:00 - 12:00 13:00 - 18:00</view>
<view>
<view class="icon-timeb"></view>
<view>今日打卡2次共计工时8小时</view>
</view>
</view>
<view class="view-steps">
<!-- <view class="btn-edit">修改考勤</view> -->
<uni-steps
:options="list2"
active-color="#007AFF"
:active="active"
direction="column"
/>
</view>
</view>
<view v-show="current === 1" class="view-two">
<view>
<view class="view-head">
<view class="date">
<view class="icon-arrowleft"></view>
<view class="text-date">2023年07月</view>
<view class="icon-arrowright"></view>
</view>
<view class="header">
<view class="view-left">
<view class="avatar"></view>
<view class="name-gr">
<view class="name">李想</view>
<view class="title"
>本月签到
<text style="color: #fe7634; margin: 0 10rpx"> 2 </text>
</view
>
</view>
</view>
</view>
</view>
<view class="item-header">
<view class="title">签到历史分布</view>
</view>
<view class="list">
<view class="item">
<view class="item-gr1">
<view class="icon-calendar"></view>
<view class="text1">7月30日</view>
</view>
<view class="item-gr">
<view class="icon-time"></view>
<view class="text2">15:09</view>
</view>
<view class="item-gr">
<view class="icon-loc"></view>
<view class="text3">江苏省南京市江宁区xxx街道600号</view>
</view>
</view>
<view class="item">
<view class="item-gr1">
<view class="icon-calendar"></view>
<view class="text1">7月30日</view>
</view>
<view class="item-gr">
<view class="icon-time"></view>
<view class="text2">15:09</view>
</view>
<view class="item-gr">
<view class="icon-loc"></view>
<view class="text3">江苏省南京市江宁区xxx街道600号</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
active: null,
list2: [
{
title: "打卡时间06:59:59",
content: "江苏省南京市江宁区xxx街道600号",
desc: "上班打卡 07:00:00",
},
{
title: "打卡时间06:59:59",
content: "江苏省南京市江宁区xxx街道600号",
desc: "上班打卡 07:00:00",
},
{
title: "打卡时间06:59:59",
content: "江苏省南京市江宁区xxx街道600号",
desc: "上班打卡 07:00:00",
},
{
title: "打卡时间06:59:59",
content: "江苏省南京市江宁区xxx街道600号",
desc: "上班打卡 07:00:00",
},
],
items: ["打卡统计", "签到统计"],
current: 0,
showCalendar: false,
info: {
lunar: true,
range: true,
insert: false,
selected: [],
},
};
},
methods: {
open() {
this.$refs.calendar.open();
},
close() {
console.log("弹窗关闭");
},
change(e) {
console.log("change 返回:", e);
// 模拟动态打卡
if (this.info.selected.length > 5) return;
this.info.selected.push({
date: e.fulldate,
info: "打卡",
});
},
confirm(e) {
console.log("confirm 返回:", e);
},
monthSwitch(e) {
console.log("monthSwitchs 返回:", e);
},
onClickItem(e) {
if (this.current != e.currentIndex) {
this.current = e.currentIndex;
}
},
goPath(item) {
this.$tab.navigateTo(item.toPage);
},
},
};
</script>
<style lang="scss" scoped>
.page {
background-color: #f6f7f8;
.view-segmented {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: #f6f7f8;
position: fixed;
top: calc(var(--status-bar-height) + 44px);
z-index: 99;
padding-top: 30rpx;
padding-bottom: 30rpx;
.segmented-controls {
width: 688rpx;
font-size: 32rpx;
font-family: PingFang SC;
font-weight: bold;
/deep/.segmented-control--button {
/deep/.segmented-control__item--button {
/deep/.segmented-control__text {
color: #34373b;
}
}
}
}
}
.main-content {
position: relative;
margin-top: calc(var(--status-bar-height) + 84px);
padding-bottom: 250rpx;
.view-one {
background: #ffffff;
box-shadow: 0rpx 0rpx 20rpx rgba(57, 118, 241, 0.06);
border-radius: 16rpx;
padding: 20rpx 0;
margin: 0 20rpx;
.view-calendar {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding-bottom: 25rpx;
.date {
width: 100%;
background: #ffffff;
position: absolute;
top: 0;
z-index: 1;
display: flex;
margin-bottom: 30rpx;
padding: 37rpx 37rpx;
.icon-arrowleft {
width: 52rpx;
height: 52rpx;
background-size: 100%;
background-image: url("@/static/images/umale/icon-arrowleft.png");
background-repeat: no-repeat;
}
.text-date {
flex: 1;
font-size: 40rpx;
font-family: PingFang SC;
color: #34373b;
text-align: center;
}
.icon-arrowright {
width: 52rpx;
height: 52rpx;
background-size: 100%;
background-image: url("@/static/images/umale/icon-arrowright.png");
background-repeat: no-repeat;
}
}
.icon-arrow {
width: 20rpx;
height: 20rpx;
background-size: 100%;
background-image: url("@/static/images/umale/icon-arrow.png");
background-repeat: no-repeat;
}
}
.view-rule {
padding: 27rpx 33rpx;
font-size: 24rpx;
font-family: PingFang SC;
font-weight: 400;
color: #616367;
border-top: 1rpx solid #e2e2e2;
border-bottom: 1rpx solid #e2e2e2;
& > view {
display: flex;
align-items: center;
margin: 8rpx 0;
.icon-timeb {
width: 24rpx;
height: 24rpx;
background-size: 100%;
background-image: url("@/static/images/umale/icon-timeb.png");
background-repeat: no-repeat;
margin-right: 13rpx;
}
}
}
.view-steps {
position: relative;
.btn-edit {
position: absolute;
right: 20rpx;
top: 18rpx;
padding: 10rpx 25rpx;
font-size: 28rpx;
font-family: PingFang SC;
font-weight: 400;
color: #367bef;
letter-spacing: 10rpx;
border: 1px solid #367bef;
border-radius: 30rpx;
}
/deep/.uni-steps__column-desc {
font-size: 24rpx;
font-family: PingFang SC;
color: #616367;
}
/deep/.uni-steps__column-title {
font-size: 40rpx;
font-family: PingFang SC;
font-weight: bold;
color: #2e2f31 !important;
margin: 17rpx 0;
}
}
}
.view-two {
.view-head {
background: #ffffff;
box-shadow: 0rpx 0rpx 20rpx rgba(57, 118, 241, 0.06);
border-radius: 16rpx;
margin: 20rpx;
padding: 37rpx 37rpx 0 37rpx;
.date {
display: flex;
margin-bottom: 30rpx;
.icon-arrowleft {
width: 52rpx;
height: 52rpx;
background-size: 100%;
background-image: url("@/static/images/umale/icon-arrowleft.png");
background-repeat: no-repeat;
}
.text-date {
flex: 1;
font-size: 40rpx;
font-family: PingFang SC;
color: #34373b;
text-align: center;
}
.icon-arrowright {
width: 52rpx;
height: 52rpx;
background-size: 100%;
background-image: url("@/static/images/umale/icon-arrowright.png");
background-repeat: no-repeat;
}
}
.header {
display: flex;
padding: 36rpx;
justify-content: space-between;
.view-left {
display: flex;
.avatar {
width: 88rpx;
height: 88rpx;
background-size: 100%;
background-image: url("@/static/images/umale/icon-head.png");
background-repeat: no-repeat;
}
.name-gr {
margin-left: 48rpx;
.name {
font-size: 40rpx;
font-family: PingFang SC;
font-weight: bold;
color: #2e2f31;
}
.title {
font-size: 28rpx;
font-family: PingFang SC;
font-weight: 400;
color: #9da2ab;
letter-spacing: 5rpx;
}
}
}
.btn-appl {
display: flex;
flex-direction: column;
align-items: center;
padding: 0 14rpx;
.icon-appl {
width: 44rpx;
height: 44rpx;
background-size: 100%;
background-image: url("@/static/images/umale/icon-appl.png");
background-repeat: no-repeat;
}
}
}
}
.item-header {
display: flex;
margin: 15rpx 20rpx;
.title {
font-size: 30rpx;
font-family: PingFang SC;
font-weight: bold;
color: #2e2f31;
background-image: url("@/static/images/umale/icon_ind.png");
background-size: 100% 50%;
background-position: bottom;
background-repeat: no-repeat;
}
.icon {
font-size: 30rpx;
font-family: PingFang SC-Bold, PingFang SC;
font-weight: bold;
color: #fe3434;
}
}
.list {
.item {
background: #ffffff;
box-shadow: 0rpx 0rpx 20rpx rgba(57, 118, 241, 0.06);
border-radius: 16rpx;
margin: 15rpx 20rpx;
padding: 26rpx 16rpx;
.item-gr1 {
display: flex;
padding-bottom: 24rpx;
border-bottom: 1px solid #e2e2e2;
align-items: center;
.text1 {
font-size: 32rpx;
font-family: PingFang SC;
font-weight: bold;
color: #2e2f31;
letter-spacing: 6rpx;
margin-left: 16rpx;
}
.icon-calendar {
width: 44rpx;
height: 44rpx;
background-size: 100%;
background-image: url("@/static/images/umale/icon-calendar.png");
background-repeat: no-repeat;
}
}
.item-gr {
display: flex;
margin-top: 20rpx;
align-items: center;
.text2 {
font-size: 24rpx;
font-family: PingFang SC;
color: #616367;
margin-left: 8rpx;
}
.text3 {
font-size: 24rpx;
font-family: PingFang SC;
font-weight: 400;
color: #616367;
margin-left: 8rpx;
}
.icon-time {
width: 24rpx;
height: 24rpx;
background-size: 100%;
background-image: url("@/static/images/umale/icon-time.png");
background-repeat: no-repeat;
}
.icon-loc {
width: 24rpx;
height: 24rpx;
background-size: 100%;
background-image: url("@/static/images/umale/icon-loc.png");
background-repeat: no-repeat;
}
}
}
}
}
}
}
</style>