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

250
src/saas/AppCountryAlbum/Attendance.vue Normal file
View File

@@ -0,0 +1,250 @@
<template>
<div class="Attendance">
<div class="Attendance-top">
<div>
<div class="left">
<h2>09</h2>
<div class="left-wrapper__right">
<h3>2022年2月</h3>
<p>日·数据统计</p>
</div>
</div>
<div class="right">
<image src="./images/qiehuan.png" />
<span>切换日期</span>
</div>
</div>
</div>
<div class="info">
<div class="info-tab">
<div class="left">
<span @click="currIndex = 0" :class="[currIndex === 0 ? 'active' : '']">全部 10</span>
<span @click="currIndex = 1" :class="[currIndex === 1 ? 'active' : '']">已出勤 10</span>
<span @click="currIndex = 2" :class="[currIndex === 2 ? 'active' : '']">未出勤 10</span>
</div>
<div class="right" @click="linkTo('/saas/AppCountryAlbum/AttendanceSetting')">考勤设置</div>
</div>
<div class="info-table">
<div class="table-header">
<span>人员</span>
<span>上下班时间</span>
<span>工作时长</span>
</div>
<div class="table-body">
<div class="table-row" v-for="(item, index) in 10" :key="index">
<div class="table-row__left">
<h2>陶白白</h2>
<p>已上传1张</p>
</div>
<span>8:30-6:00</span>
<span>10.5小时</span>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Attendance',
appName: '考勤统计',
data () {
return {
currIndex: 0
}
},
onLoad () {
},
methods: {
linkTo (url) {
uni.navigateTo({
url
})
}
}
}
</script>
<style lang="scss" scoped>
.Attendance {
padding: 0 0 0;
* {
box-sizing: border-box;
line-height: 1;
}
i, em {
font-style: normal;
}
.info-table {
margin-top: 32px;
padding: 0 32px;
.table-header {
display: flex;
align-items: center;
height: 96px;
background: #F4F9FD;
border-radius: 8px;
span {
flex: 1;
text-align: center;
color: #333333;
font-size: 28px;
}
}
.table-body {
.table-row {
display: flex;
align-items: center;
height: 160px;
border-radius: 8px;
text-align: center;
&:nth-of-type(2n) {
background: #F4F9FD;
}
div {
h2 {
margin-bottom: 16px;
color: #333333;
font-size: 34px;
}
p {
color: #999999;
font-size: 28px;
}
}
div, span {
flex: 1;
}
span {
color: #333;
font-size: 28px;
}
}
}
}
.info {
position: relative;
top: -116px;
margin: 0 32px;
padding: 0 0 86px 0;
background: #FFFFFF;
box-shadow: 0px 4px 8px 0px rgba(17, 67, 110, 0.02);
border-radius: 16px;
.info-tab {
display: flex;
align-items: center;
justify-content: space-between;
height: 108px;
padding: 0 32px 0 16px;
.left {
display: flex;
align-items: center;
height: 100%;
span {
width: 124px;
height: 108px;
line-height: 108px;
margin-right: 32px;
text-align: center;
color: #999999;
font-size: 28px;
transition: all ease 0.3s;
&:last-child {
margin-right: 0;
}
&.active {
color: #1365DD;
border-bottom: 2px solid #1365DD;
}
}
}
.right {
font-size: 28px;
font-weight: 400;
color: #3975C6;
}
}
}
.Attendance-top {
height: 320px;
width: 100%;
padding: 58px 32px 0;
background: #3975C6;
& > div {
display: flex;
justify-content: space-between;
align-items: center;
}
.right {
display: flex;
align-items: center;
height: 56px;
padding: 0 36px;
background: #285DA4;
border-radius: 28px;
image {
width: 36px;
height: 26px;
margin-right: 12px;
}
span {
color: #FFFFFF;
font-size: 28px;
}
}
.left {
display: flex;
align-items: center;
line-height: 1;
h2 {
margin-right: 16px;
font-size: 100px;
font-weight: 600;
color: #FFFFFF;
}
h3 {
margin-bottom: 8px;
color: #a9c3e6;
font-size: 28px;
}
p {
font-size: 32px;
color: #FFFFFF;
}
}
}
}
</style>