kubbo/dvcp_v2_wxcp_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

考勤静态页面

Browse Source
This commit is contained in:
yanran200730
2022-03-08 17:02:42 +08:00
parent b768efcb5d
commit 7faac31464
8 changed files with 1126 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

246
src/saas/AppCountryAlbum/AttendanceFlexibleTime.vue Normal file
View File

@@ -0,0 +1,246 @@
<template>
<div class="AttendanceFiexdTime">
<div class="form-group">
<div class="form-group__item">
<div class="left">
<label>*</label>
<span>最早允许打卡时间</span>
</div>
<div class="right">
<span>09:00</span>
<image src="./images/right.png" />
</div>
</div>
<div class="form-group__item">
<div class="left">
<label>*</label>
<span>最晚允许打卡时间</span>
</div>
<div class="right">
<span>18:00</span>
<image src="./images/right.png" />
</div>
</div>
</div>
<div class="form-group">
<div class="form-group__item form-group__checked">
<div class="left">
<h2>是否开启休息时间</h2>
<p>若开启休息时间，则休息时间不计入工作时长</p>
</div>
<div class="right">
<switch color="#1088F9" checked />
</div>
</div>
<div class="form-group__item">
<div class="left">
<label>*</label>
<span>休息开始</span>
</div>
<div class="right">
<span>请设置时间</span>
<image src="./images/right.png" />
</div>
</div>
<div class="form-group__item">
<div class="left">
<label>*</label>
<span>休息结束</span>
</div>
<div class="right">
<span>请设置时间</span>
<image src="./images/right.png" />
</div>
</div>
</div>
<div class="form-group">
<div class="form-group__item form-group__checked">
<div class="left">
<h2>工作时长要求</h2>
</div>
</div>
<div class="form-group__item">
<div class="left">
<label>*</label>
<span>时长要求</span>
</div>
<div class="right">
<span>8小时</span>
<image src="./images/right.png" />
</div>
</div>
</div>
<div class="form-group">
<div class="form-group__item form-group__checked">
<div class="left">
<h2>是否开启固定打卡点</h2>
<p>若开启，不在固定范围内打卡将不计入考勤</p>
</div>
<div class="right">
<switch color="#1088F9" checked />
</div>
</div>
<div class="form-group__item form-group__checked">
<div class="left">
<h2>绿地蓝海A座</h2>
<p>湖北省武汉市武昌区和平大道750号</p>
<p style="margin-top: 8px;">允许打卡范围200米</p>
</div>
<div class="right">
<image :src="`${$cdn}askform/sc1.png`" />
<span>删除</span>
</div>
</div>
<div class="form-group__item form-group__checked">
<div class="left left-add">
<div class="add-btn"></div>
<h2 style="color: #1088F9;">添加打卡点</h2>
</div>
</div>
</div>
<div class="form-btn" hover-class="text-hover">保存</div>
</div>
</template>
<script>
export default {
name: 'AttendanceFlexibleTime',
appName: '灵活时间打卡设置',
data () {
return {
}
},
onLoad () {
},
methods: {
}
}
</script>
<style lang="scss" scoped>
.AttendanceFiexdTime {
padding-bottom: 130px;
* {
line-height: 1;
box-sizing: border-box;
}
.form-btn {
position: fixed;
bottom: 0;
left: 0;
z-index: 1;
width: 100%;
height: 112px;
line-height: 112px;
text-align: center;
color: #fff;
font-size: 32px;
background: #1365DD;
&:active {
opacity: 0.8;
}
}
.form-group {
margin-bottom: 16px;
padding: 0 32px;
background: #fff;
.form-group__item {
display: flex;
align-items: center;
justify-content: space-between;
height: 112px;
font-size: 32px;
color: #333333;
border-bottom: 1px solid #DDDDDD;
&.form-group__checked {
height: auto;
padding: 32px 0;
.left {
h2 {
margin-bottom: 12px;
color: #333333;
font-size: 32px;
}
&.left-add {
display: flex;
align-items: center;
h2 {
margin-bottom: 0;
}
}
.add-btn {
position: relative;
width: 48px;
height: 48px;
margin-right: 16px;
border-radius: 50%;
overflow: hidden;
background: #1088F9;
&::after {
position: absolute;
top: 50%;
left: 50%;
z-index: 1;
width: 4px;
height: 24px;
background: #fff;
content: ' ';
transform: translate(-50%, -50%);
}
&::before {
position: absolute;
top: 50%;
left: 50%;
z-index: 1;
width: 24px;
height: 4px;
background: #fff;
content: ' ';
transform: translate(-50%, -50%);
}
}
p {
color: #999999;
font-size: 28px;
}
}
}
label {
color: #FF4466;
}
&:last-child {
border: none;
}
.right {
display: flex;
align-items: center;
color: #999999;
image {
width: 32px;
height: 32px;
}
}
}
}
}
</style>