考勤/缺卡记录/补卡详情/补卡审批/意见弹窗/补卡申请

src/assets/css/xpwyfyy.css

@@ -200,8 +200,8 @@ body {
 	.mui-input-group .mui-input-row p {
 		font-size: 14px
 	}
-	.mui-content .vongi-choose .mui-table-view-cell a{
-		padding:11px 15px
+	.mui-content .vongi-choose .mui-table-view-cell a {
+		padding: 11px 15px
 	}
 }
 
@@ -658,9 +658,10 @@ h3 {
 	top: 50%;
 	margin-top: -1.5px;
 }
-.fyy-statistics-body h3{
+
+.fyy-statistics-body h3 {
 	text-align: center;
-	width:100%
+	width: 100%
 }
 
 .vongi-editme .mui-input-row .mui-btn img {
@@ -731,196 +732,603 @@ h3 {
 .vongi-jkz-content .faceaifyy-content.mui-content-padded {
 	margin: 0;
 	background: 0;
-    padding: 0;
-    height:178px;
-    width: 100%;
+	padding: 0;
+	height: 178px;
+	width: 100%;
 }
 
 .fyy-statistics.mui-grid-view.mui-grid-9 .mui-table-view-cell {
 	margin-top: 10px
 }
-.fyy-statistics.mui-grid-view.mui-grid-9 .mui-table-view-cell:first-child{
-	margin-top:0
+
+.fyy-statistics.mui-grid-view.mui-grid-9 .mui-table-view-cell:first-child {
+	margin-top: 0
 }
-.vongi-jkz-right h2{
+
+.vongi-jkz-right h2 {
 	display: flex;
 	align-items: center;
-	float:left
+	float: left
 }
-.vongi-jkz-right h2 span{
-	border:1px #47bf37 solid;
-	padding:3px 8px;
-	font-size:12px;
+
+.vongi-jkz-right h2 span {
+	border: 1px #47bf37 solid;
+	padding: 3px 8px;
+	font-size: 12px;
 	border-radius: 4px;
-	margin-left:10px
+	margin-left: 10px
 }
-.fyy-statistics.mui-grid-view.mui-grid-9 .mui-media .fyy-statistics-body .mui-icon{
-	font-size:18px
+
+.fyy-statistics.mui-grid-view.mui-grid-9 .mui-media .fyy-statistics-body .mui-icon {
+	font-size: 18px
 }
-.fyy-statistics-body{
+
+.fyy-statistics-body {
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
 }
-.fyy-statistics-body a{
-	position:relative;
+
+.fyy-statistics-body a {
+	position: relative;
 	padding-right: 20px;
 }
-.fyy-statistics-body .mui-navigate-right:after, .fyy-statistics-body .mui-push-right:after{
-	right:0
+
+.fyy-statistics-body .mui-navigate-right:after,
+.fyy-statistics-body .mui-push-right:after {
+	right: 0
 }
 
 .mui-content.vongi-jkz-content {
 	overflow: hidden;
 }
-.faceaifyy-content .mui-media-body{
-	background:rgba(0,0,0,0.5);
-	padding:5px;
-	position:absolute;
-	bottom:0;
-	color:#ffffff
+
+.faceaifyy-content .mui-media-body {
+	background: rgba(0, 0, 0, 0.5);
+	padding: 5px;
+	position: absolute;
+	bottom: 0;
+	color: #ffffff
 }
-.faceaifyy-content .mui-media-body span{
-	margin-left:5px
+
+.faceaifyy-content .mui-media-body span {
+	margin-left: 5px
 }
-.vongi-jkz-list{
-	background:#ffffff;
-	padding:10px;
+
+.vongi-jkz-list {
+	background: #ffffff;
+	padding: 10px;
 	border-radius: 4px;
 }
-.vongi-choose-yq{
-	background:url(../img/blue.png) no-repeat center;	
+
+.vongi-choose-yq {
+	background: url(../img/blue.png) no-repeat center;
 }
-.vongi-choose-zz{
-	background:url(../img/green.png) no-repeat center;	
+
+.vongi-choose-zz {
+	background: url(../img/green.png) no-repeat center;
 }
-.vongi-choose-yl{
-	background:url(../img/red.png) no-repeat center;	
+
+.vongi-choose-yl {
+	background: url(../img/red.png) no-repeat center;
 }
+
 .vongi-choose .mui-media-body,
 .vongi-choose .mui-media-body p,
-.vongi-choose .mui-navigate-right:after, .vongi-choose .mui-push-left:after, .vongi-choose .mui-push-right:after{
-	color:#ffffff
+.vongi-choose .mui-navigate-right:after,
+.vongi-choose .mui-push-left:after,
+.vongi-choose .mui-push-right:after {
+	color: #ffffff
 }
-.vongi-choose{
-	padding:30px
+
+.vongi-choose {
+	padding: 30px
 }
-.vongi-choose .mui-table-view{
-	background:0
+
+.vongi-choose .mui-table-view {
+	background: 0
 }
-.vongi-choose .mui-table-view-cell{
-	margin-top:15px;
-	background-size:100% 100%;
+
+.vongi-choose .mui-table-view-cell {
+	margin-top: 15px;
+	background-size: 100% 100%;
 	border-radius: 7px;
 }
 
-.vongi-choose .mui-media-body p{
-	margin-top:5px
+.vongi-choose .mui-media-body p {
+	margin-top: 5px
 }
-.vongi-choose .mui-table-view-cell a{
-	padding:20px 15px
+
+.vongi-choose .mui-table-view-cell a {
+	padding: 20px 15px
 }
-.vongi-choose h5{
+
+.vongi-choose h5 {
 	line-height: 1.4;
 }
-.vongi-choose h1{
+
+.vongi-choose h1 {
 	text-align: center;
-	margin-bottom:10px
+	margin-bottom: 10px
 }
-.vongi-login-logo{
-	width:72px;
-	height:72px;
-	margin:15% auto;
+
+.vongi-login-logo {
+	width: 72px;
+	height: 72px;
+	margin: 15% auto;
 	overflow: hidden;
 	border-radius: 7px;
 	display: flex;
 }
-.vongi-login-logo img{
-	width:100%;
-	min-height:100%;
+
+.vongi-login-logo img {
+	width: 100%;
+	min-height: 100%;
 	object-fit: cover;
 }
-.vongi-xieyi.mui-input-group .mui-input-row{
-	background:0;
-	position:relative
+
+.vongi-xieyi.mui-input-group .mui-input-row {
+	background: 0;
+	position: relative
 }
-.vongi-login-form .mui-input-row a{
-	position:absolute;
-	right:15px;
-	top:15px;
-	color:#3385FF
+
+.vongi-login-form .mui-input-row a {
+	position: absolute;
+	right: 15px;
+	top: 15px;
+	color: #3385FF
 }
-.vongi-xieyi .mui-radio input[type=radio]:before{
-	font-size:16px
+
+.vongi-xieyi .mui-radio input[type=radio]:before {
+	font-size: 16px
 }
-.vongi-xieyi .mui-radio.mui-left label{
-	padding:5px 15px 5px 35px
+
+.vongi-xieyi .mui-radio.mui-left label {
+	padding: 5px 15px 5px 35px
 }
-.vongi-xieyi .mui-radio.mui-left input[type=radio]{
-	left:15px;
-	width:auto;
-	height:auto;
-	top:10px
+
+.vongi-xieyi .mui-radio.mui-left input[type=radio] {
+	left: 15px;
+	width: auto;
+	height: auto;
+	top: 10px
 }
-.vongi-btn{
-	padding:15px
+
+.vongi-btn {
+	padding: 15px
 }
-.vongi-btn button{
-	width:100%;
-	padding:11px 15px
+
+.vongi-btn button {
+	width: 100%;
+	padding: 11px 15px
 }
-.vongi-login-form.mui-input-group .mui-input-row:after{
+
+.vongi-login-form.mui-input-group .mui-input-row:after {
 	-webkit-transform: initial;
-    transform: initial;
-    background-color: #eee;
+	transform: initial;
+	background-color: #eee;
 }
-.vongi-xieyi.mui-input-group .mui-input-row{
-	height:auto
+
+.vongi-xieyi.mui-input-group .mui-input-row {
+	height: auto
 }
-.vongi-pipei.mui-table-view .mui-media-object{
+
+.vongi-pipei.mui-table-view .mui-media-object {
 	line-height: 36px;
-    max-width: 36px;
-    height: 36px;
-    display: flex;
-    overflow: hidden;
-    border-radius: 50%;
-    margin: 0 auto;
-}
-.vongi-pipei.mui-table-view .mui-media-object img{
+	max-width: 36px;
+	height: 36px;
+	display: flex;
+	overflow: hidden;
+	border-radius: 50%;
+	margin: 0 auto;
+}
+
+.vongi-pipei.mui-table-view .mui-media-object img {
 	object-fit: cover;
-	width:100%;
+	width: 100%;
 	min-height: 100%;
 }
-.vongi-pipei .mui-selected.mui-table-view-cell{
-	background:#3385FF
+
+.vongi-pipei .mui-selected.mui-table-view-cell {
+	background: #3385FF
 }
-.vongi-pipei .mui-table-view-cell{
-	background:#FFFFFF;
-	border:1px #D9D9D9 solid
+
+.vongi-pipei .mui-table-view-cell {
+	background: #FFFFFF;
+	border: 1px #D9D9D9 solid
 }
-.vongi-pipei .mui-pull-left  p{
+
+.vongi-pipei .mui-pull-left p {
 	text-align: center;
 }
 
-.vongi-pipei .mui-pull-left{
-	margin-right:15px
+.vongi-pipei .mui-pull-left {
+	margin-right: 15px
 }
-.vongi-pipei .mui-table-view-cell a{
+
+.vongi-pipei .mui-table-view-cell a {
 	display: flex;
 	align-items: center;
 }
+
 .vongi-choose .vongi-pipei .mui-media-body,
-.vongi-choose .vongi-pipei .mui-media-body p{
-	color:#333;
+.vongi-choose .vongi-pipei .mui-media-body p {
+	color: #333;
 	overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
+	white-space: nowrap;
+	text-overflow: ellipsis;
 }
+
 .vongi-choose .vongi-pipei .mui-selected .mui-media-body,
 .vongi-choose .vongi-pipei .mui-selected .mui-media-body p,
-.vongi-pipei .mui-selected .mui-pull-left  p{
-	color:#ffffff
+.vongi-pipei .mui-selected .mui-pull-left p {
+	color: #ffffff
+}
+
+.vongi-choose.mui-content-padded {
+	padding: 5px
+}
+
+.vongi-work ul li {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	background: #ffffff;
+	margin-bottom: 2px
+}
+
+.vongi-work ul,
+.vongi-work .mui-table-view:before,
+.vongi-work .mui-table-view:after,
+.vongi-work .mui-table-view-cell:after {
+	background: 0
+}
+
+.vongi-work ul li .mui-media-body {
+	display: flex;
+	align-items: center;
+}
+
+.vongi-work ul li .mui-media-body button {
+	margin-right: 15px;
+	border-radius: 15px;
+	padding: 3px 12px
+}
+
+.mui-content-padded h5 {
+	margin: 15px 0;
+	color: #666
+}
+
+.vongi-wordcard-padded {
+	background: #ffffff;
+	padding: 20px 15px
+}
+
+.vongi-wordcard-padded span {
+	margin-left: 15px
+}
+
+.vongi-wordcard .mui-input-row label {
+	width: 50%
+}
+
+.vongi-wordcard .mui-input-row {
+	display: flex;
+	justify-content: space-between
+}
+
+.vongi-wordcard .mui-input-row .mui-btn {
+	padding-right: 70px
+}
+
+.vongi-wordcard .vongi-wordcard-padded h5 {
+	margin: 0;
+	line-height: 30px;
+}
+
+.vongi-wordcard .mui-content-padded .mui-input-row textarea {
+	line-height: inherit
+}
+
+.vongi-wordcard .fyy-upphoto img {
+	width: 100%;
+	object-fit: cover;
+	min-height: 100%;
+}
+
+.vongi-wordcard .fyy-upphoto .mui-col-xs-3 {
+	height: 80px;
+	overflow: hidden;
+	border: 1px #ccc solid;
+	display: flex;
+	margin-right: 10px;
+	border-radius: 4px;
+}
+
+.vongi-wordcard .fyy-upphoto .mui-col-xs-3 img {
+	object-fit: cover;
+}
+
+.vongi-wordcard .fyy-upphoto .mui-col-xs-3:nth-child(4) {
+	margin-right: 0
+}
+
+.vongi-wordcard .fyy-upphoto .mui-col-xs-3 a {
+	display: block;
+	width: 100%;
+	line-height: 80px;
+	text-align: center;
+	color: #999
+}
+
+.vongi-wordcard .mui-media-object {
+	width: 47px;
+	height: 47px;
+	border-radius: 50%;
+	overflow: hidden;
+	display: flex;
+	margin-right: 10px
+}
+
+.vongi-wordcard .mui-media-object img {
+	width: 100%;
+	object-fit: cover;
+}
+
+.vongi-wordcard-top {
+	position: relative;
+	padding: 10px;
+	background: #ffffff;
+}
+
+.vongi-wordcard-top button {
+	position: absolute;
+	right: 10px;
+	top: 50%;
+	border-radius: 16px;
+	padding: 5px 15px;
+	margin-top: -15px
+}
+
+.vongi-wordcard-center li {
+	display: flex;
+	padding: 5px 15px
+}
+
+.vongi-wordcard-center li .mui-media-body {
+	width: 30%
+}
+
+.vongi-wordcard-center li span {
+	width: 70%
+}
+
+.vongi-wordcard .mui-table-view:after,
+.vongi-wordcard .mui-table-view:before,
+.vongi-wordcard .mui-table-view-cell:after {
+	background: 0
+}
+
+.vongi-wordcard .mui-table-view-cell.fyy-upphoto {
+	justify-content: center;
+	padding-top: 0
+}
+
+.vongi-wordcard .fyy-upphoto {
+	display: flex;
+}
+
+.vongi-wordcard .fyy-upphoto .mui-col-xs-3 {
+	height: 80px;
+	overflow: hidden;
+	border: 1px 283464 solid;
+	display: flex;
+	margin-right: 10px
+}
+
+.vongi-wordcard .fyy-upphoto .mui-col-xs-3 img {
+	object-fit: cover;
+}
+
+.vongi-wordcard .fyy-upphoto .mui-col-xs-3:nth-child(4) {
+	margin-right: 0
+}
+
+.vongi-wordcard-center ul {
+	padding: 10px 0
+}
+
+.vongi-wordcard .mui-ellipsis {
+	margin-top: 5px;
+	margin-bottom: 0
+}
+
+.vongi-wordcard .mui-content-padded {
+	margin: 15px
+}
+
+.fyy-popup.mui-card {
+	background: 0;
+	position: fixed;
+	top: 25%;
+	left: 0;
+	border-radius: 4px;
+	z-index: 999;
+	right: 0;
+	margin: 0 30px;
+	box-shadow: initial;
+}
+
+.fyy-popup.mui-card .mui-card-header {
+	background: #ffffff
+}
+
+.fyy-popup.mui-card .vongi-btn {
+	padding: 15px 0
+}
+
+.fyy-popup.mui-card .mui-card-content textarea {
+	border-radius: 0 0 2px 2px;
+}
+
+.vongi-wordcard-sp .mui-slider-group .mui-slider-item {
+	background: #ffffff;
+}
+
+.vongi-wordcard-sp .mui-slider .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
+	background: 0;
+	border-bottom: 2px solid #375cf5
+}
+
+.vongi-wordcard-sp .mui-slider .mui-segmented-control.mui-segmented-control-inverted .mui-control-item {
+	border-bottom: 2px solid #ffffff;
+}
+
+.vongi-wordcard-sp .mui-segmented-control.mui-scroll-wrapper,
+.vongi-wordcard-sp .mui-segmented-control.mui-scroll-wrapper .mui-scroll {
+	height: 46px;
+}
+
+.vongi-wordcard-sp .mui-media-object {
+	width: 42px;
+	min-height: 42px;
+	height: 42px;
+	display: flex;
+	margin-right: 10px;
+	border-radius: 50%;
+	overflow: hidden;
+}
+
+.vongi-wordcard-sp .mui-media-object img {
+	width: 100%;
+	object-fit: cover;
+}
+
+.vongi-wordcard-sp .mui-input-row a,
+.vongi-wordcard-sp .mui-input-row p,
+.vongi-wordcard-sp .mui-input-row label {
+	line-height: inherit;
+}
+
+.vongi-wordcard-sp .mui-input-row p {
+	margin: 0;
+	font-size: 14px;
+	color: #666
 }
-.vongi-choose.mui-content-padded{
-	padding:5px
+
+.vongi-wordcard-sp .mui-input-row a {
+	color: #333;
+	display: block;
+	background: #eee;
+	padding: 10px
+}
+
+.vongi-wordcard-sp .mui-input-group .mui-input-row {
+	background: 0;
+	height: auto
+}
+
+.vongi-wordcard-sp .fyy-checkbox .mui-checkbox.mui-left input[type=checkbox],
+.vongi-wordcard-sp .fyy-checkbox .mui-radio.mui-left input[type=radio] {
+	top: 29px;
+	left: 10px
+}
+
+.vongi-wordcard-sp .fyy-checkbox .mui-checkbox.mui-left label,
+.vongi-wordcard-sp .fyy-checkbox .mui-radio.mui-left label {
+	padding: 10px 10px 0px 50px
 }
+
+.vongi-wordcard-sp .mui-segmented-control.mui-scroll-wrapper .mui-control-item .fyy-badge {
+	position: relative
+}
+
+.vongi-wordcard-sp .mui-segmented-control.mui-scroll-wrapper .mui-control-item .mui-badge {
+	position: absolute;
+	right: -15px;
+	top: -10px;
+	background: #fe616c;
+	color: #ffffff
+}
+
+.vongi-wordcard-sp .fyy-bindfyy-btn {
+	padding: 0;
+	bottom: 0;
+	display: flex;
+	z-index: 9999;
+	margin: 0;
+	position: fixed;
+	width: 100%;
+	-webkit-box-shadow: 0 1px 6px #ccc;
+	box-shadow: 0 1px 6px #ccc;
+}
+
+.vongi-wordcard-sp .mui-scroll .fyy-bindfyy-btn button {
+	border-radius: initial;
+	width: 30%;
+	margin-bottom: 0;
+}
+
+.vongi-wordcard-sp .fyy-bindfyy-btn .mui-input-group {
+	border-radius: initial;
+	width: 40%
+}
+
+.vongi-wordcard-sp .fyy-bindfyy-btn .mui-checkbox input[type=checkbox] {
+	top: 7px
+}
+
+.vongi-wordcard-sp #item1mobile .mui-btn-danger {
+	background: #fe616c
+}
+
+.vongi-wordcard-sp #item1mobile .mui-btn-success {
+	background: #47bf37
+}
+
+.vongi-wordcard-sp #item2mobile .mui-btn-danger,
+.vongi-wordcard-sp #item2mobile .mui-btn-success {
+	border-radius: 16px;
+	padding: 2px 10px;
+	right: 25px
+}
+
+.vongi-wordcard-sp .mui-table-view {
+	background: 0;
+	padding: 10px
+}
+
+.vongi-wordcard-sp .mui-table-view li {
+	background: #ffffff;
+	margin-bottom: 10px;
+	border-bottom: 1px #eee solid;
+	border-radius: 4px;
+}
+
+.vongi-wordcard-sp .mui-table-view-cell:after,
+.vongi-wordcard-sp .mui-segmented-control.mui-scroll-wrapper .mui-scroll {
+	background: 0
+}
+
+.vongi-wordcard-sp .mui-slider .mui-segmented-control.mui-segmented-control-inverted~.mui-slider-group .mui-slider-item {
+	border: 0;
+}
+
+.vongi-wordcard-sp .mui-card-footer:before,
+.vongi-wordcard-sp .mui-card-header:after {
+	background-color: #999;
+}
+
+.vongi-wordcard-sp .mui-backdrop {
+	background-color: rgba(0, 0, 0, .8);
+}
+
+.vongi-wordcard-sp .mui-table-view-cell>a:not(.mui-btn) {
+	padding: 11px 0
+}
+
+.vongi-wordcard-sp #item2mobile .mui-navigate-right:after,
+#item2mobile .mui-push-right:after {
+	right: 0
+}

src/projects/business/views/Master/Attendance/Apply.vue

@@ -1,8 +1,60 @@
 <template>
+<div>
+    <header class="mui-bar mui-bar-nav">
+			<h1 class="mui-title">补卡申请</h1>
+			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
+		</header>
+		<div class="mui-content vongi-wordcard">
+			<div class="mui-content-padded vongi-wordcard-padded">
+				<h5>当前打卡班次</h5>
+				<h3>2020-04-18<span>07:30 - 09:00</span></h3>
+			</div>
+			<div class="mui-content-padded">
+				<form class="mui-input-group">
+					<div class="mui-input-row">
+						<label><span class="colorfe616c">*</span>选择审批人</label>
+						<div class="mui-navigate-right">
+							<button id='showUserPicker' class="mui-btn mui-btn-block" type='button'>郑强</button>
+						</div>
+					</div>
+					<div class="mui-input-row">
+						<label><span class="colorfe616c">*</span>选择补卡类型</label>
+						<div class="mui-navigate-right">
+							<button id='showUserPicker' class="mui-btn mui-btn-block" type='button'>外勤</button>
+						</div>
+					</div>
+				</form>
+			</div>
+			<div class="mui-content-padded">
+				<h5><span class="colorfe616c">*</span>申请理由</h5>
+				<div class="mui-input-row">
+					<textarea id="textarea" rows="5" placeholder="请输入"></textarea>
+				</div>
+			</div>
+			<div class="mui-content-padded">
+				<h5>上传照片</h5>
+				<div class="fyy-upphoto">
+					<div class="mui-col-xs-3">
+						<img src="~$project/assets/img/zhaop.jpg" />
+					</div>
+					<div class="mui-col-xs-3">
+						<a><span class="mui-icon mui-icon-plusempty"></span></a>
+					</div>
+				</div>
+			</div>
+			<div class="vongi-btn">
+				<button class="mui-btn mui-btn-primary " type="submit">
+				提交
+			</button>
+			</div>
+		</div>
+</div>
 </template>
 
 <script>
 </script>
 
+<style scoped src="$project/assets/css/xpwyfyy.css"></style>
+<style scoped src="$project/assets/css/iconfont.css"></style>
 <style>
 </style>

src/projects/business/views/Master/Attendance/Info.vue

@@ -1,8 +1,89 @@
 <template>
+<div>
+    <header class="mui-bar mui-bar-nav">
+			<h1 class="mui-title">补卡详情</h1>
+			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
+		</header>
+		<div class="mui-content vongi-wordcard">
+			<div class="mui-content-padded vongi-wordcard-top">
+				<div class="mui-media-object mui-pull-left">
+					<img src="~$project/assets/img/zhaop1.jpg">
+				</div>
+				<div class="mui-media-body">
+					冯银银
+					<p class='mui-ellipsis'><span class="colorfe616c">缺勤</span>补卡申请</p>
+				</div>
+				<button type="button" class="mui-btn mui-btn-success mui-btn-outlined">
+					已补卡
+				</button>
+			</div>
+
+			<div class="mui-content-padded vongi-wordcard-center">
+				<ul class="mui-table-view">
+					<li class="mui-table-view-cell mui-media">
+						<div class="mui-media-body">申请类型</div>
+						<span>补卡</span>
+					</li>
+					<li class="mui-table-view-cell mui-media">
+						<div class="mui-media-body">所在部门</div>
+						<span>信息工程中心</span>
+					</li>
+					<li class="mui-table-view-cell mui-media">
+						<div class="mui-media-body">申请班次</div>
+						<span class="colorf6f448">2020-04-19 07:30-09:00</span>
+					</li>
+					<li class="mui-table-view-cell mui-media">
+						<div class="mui-media-body">申请时间</div>
+						<span>2020-04-19 07:30:56</span>
+					</li>
+					<li class="mui-table-view-cell mui-media">
+						<div class="mui-media-body">申请理由</div>
+						<span class="colorf8b155">努力加班忘记了打卡，申请补卡！</span>
+					</li>
+					<li class="mui-table-view-cell mui-media">
+						<div class="mui-media-body">相关照片</div>
+
+					</li>
+					<li class="mui-table-view-cell mui-media fyy-upphoto">
+						<div class="mui-col-xs-3">
+							<img src="~$project/assets/img/zhaop1.jpg" />
+						</div>
+						<div class="mui-col-xs-3">
+							<img src="~$project/assets/img/zhaop1.jpg" />
+						</div>
+						<div class="mui-col-xs-3">
+							<img src="~$project/assets/img/zhaop1.jpg" />
+						</div>
+						<div class="mui-col-xs-3">
+							<img src="~$project/assets/img/zhaop1.jpg" />
+						</div>
+					</li>
+				</ul>
+			</div>
+			<div class="mui-content-padded vongi-wordcard-center">
+				<h5>审批意见</h5>
+				<ul class="mui-table-view">
+					<li class="mui-table-view-cell mui-media">
+						审批人:
+						<span>郑强</span>
+					</li>
+					<li class="mui-table-view-cell mui-media">
+						审批编号：
+						<span>20200419115613532321135</span>
+					</li>
+					<li class="mui-table-view-cell mui-media">
+						<span class="colorf8b155">努力加班也别忘记了打卡。</span>
+					</li>
+				</ul>
+			</div>
+		</div>
+</div>
 </template>
 
 <script>
 </script>
 
+<style scoped src="$project/assets/css/xpwyfyy.css"></style>
+<style scoped src="$project/assets/css/iconfont.css"></style>
 <style>
 </style>

src/projects/business/views/Master/Attendance/List.vue

@@ -1,8 +1,121 @@
 <template>
+<div>
+    <header class="mui-bar mui-bar-nav">
+			<h1 class="mui-title">考勤记录</h1>
+			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
+			<a class=" mui-pull-right" href=""><span class="mui-icon iconfont icon-shijian"></span>缺卡记录</a>
+		</header>
+		<div class="mui-content">
+			<div class="mui-content-padded vongi-work">
+				<h5>2020-09-28</h5>
+				<ul class="mui-table-view">
+					<li class="mui-table-view-cell">
+						12:00
+						<div class="mui-media-body">
+							<button type="button" class="mui-btn mui-btn-primary">申请补卡</button>
+							<span class="colorfe616c">缺卡</span>
+						</div>
+					</li>
+					<li class="mui-table-view-cell">
+						12:00
+						<div class="mui-media-body">
+							<span class="colorf8b155">早退</span>
+						</div>
+					</li>
+					<li class="mui-table-view-cell">
+						12:00
+						<div class="mui-media-body">
+							<span class="color55f868">正常</span>
+						</div>
+					</li>
+				</ul>
+			</div>
+			<div class="mui-content-padded vongi-work">
+				<h5>2020-09-27</h5>
+				<ul class="mui-table-view">
+					<li class="mui-table-view-cell">
+						12:00
+						<div class="mui-media-body">
+							<button type="button" class="mui-btn mui-btn-primary">申请补卡</button>
+							<span class="colorfe616c">缺卡</span>
+						</div>
+					</li>
+					<li class="mui-table-view-cell">
+						12:00
+						<div class="mui-media-body">
+							<span class="colorf8b155">早退</span>
+						</div>
+					</li>
+					<li class="mui-table-view-cell">
+						12:00
+						<div class="mui-media-body">
+							<span class="color55f868">正常</span>
+						</div>
+					</li>
+				</ul>
+			</div>
+		</div>
+        <!-- 缺卡记录 -->
+        <div class="mui-content">
+			<div class="mui-content-padded vongi-work">
+				<h5>2020-09-28</h5>
+				<ul class="mui-table-view">
+					<li class="mui-table-view-cell">
+						12:00
+						<div class="mui-media-body">
+							<button type="button" class="mui-btn mui-btn-primary">申请补卡</button>
+							<span class="colorfe616c">缺卡</span>
+						</div>
+					</li>
+					<li class="mui-table-view-cell">
+						12:00
+						<div class="mui-media-body">
+							<button type="button" class="mui-btn  mui-btn-primary mui-btn-outlined">申请中</button>
+							<span class="colorfe616c">缺卡</span>
+						</div>
+					</li>
+					<li class="mui-table-view-cell">
+						12:00
+						<div class="mui-media-body">
+							<button type="button" class="mui-btn mui-btn-danger mui-btn-outlined">已拒绝</button>
+							<span class="colorfe616c">缺卡</span>
+						</div>
+					</li>
+				</ul>
+			</div>
+			<div class="mui-content-padded vongi-work">
+				<h5>2020-09-27</h5>
+				<ul class="mui-table-view">
+					<li class="mui-table-view-cell">
+						12:00
+						<div class="mui-media-body">
+							<button type="button" class="mui-btn mui-btn-primary">申请补卡</button>
+							<span class="colorfe616c">缺卡</span>
+						</div>
+					</li>
+				</ul>
+			</div>
+		</div>
+        <!-- 审批弹窗 -->
+		<div class="mui-backdrop mui-active" style="display: block;"></div>
+		<div class="mui-card fyy-popup" style="display: block;">
+			<div class="mui-card-header mui-h3">审批意见</div>
+			<div class="mui-card-content">
+				<div class="mui-input-row">
+					<textarea id="textarea" rows="5" placeholder="请输入"></textarea>
+				</div>
+			</div>
+			<div class="vongi-btn">
+				<button class="mui-btn mui-btn-primary ">提交</button>
+			</div>
+		</div>
+</div>
 </template>
 
 <script>
 </script>
 
+<style scoped src="$project/assets/css/xpwyfyy.css"></style>
+<style scoped src="$project/assets/css/iconfont.css"></style>
 <style>
 </style>

src/projects/business/views/Master/Attendance/VerifyList.vue

@@ -1,8 +1,116 @@
 <template>
+<div>
+    <header class="mui-bar mui-bar-nav">
+			<h1 class="mui-title">补卡审批</h1>
+			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
+		</header>
+		<div class="mui-content vongi-wordcard-sp">
+			<div id="slider" class="mui-slider mui-fullscreen">
+				<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
+					<div class="mui-scroll">
+						<a class="mui-control-item mui-active" href="#item1mobile">
+							<span class="fyy-badge">待处理<span class="mui-badge">5</span></span>
+						</a>
+						<a class="mui-control-item" href="#item2mobile">
+							已处理
+						</a>
+					</div>
+				</div>
+				<div class="mui-slider-group">
+					<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
+						<div id="scroll1" class="mui-scroll-wrapper">
+							<div class="mui-scroll">
+								<form class="mui-input-group fyy-checkbox">
+									<div class="mui-input-row mui-checkbox mui-left">
+										<label>
+											<a href="adadd.html" class="mui-navigate-right">
+												<div class="mui-media-object mui-pull-left"><img src="~$project/assets/img/zhaop1.jpg"></div>
+												<div class="mui-media-body">
+													冯银银
+													<p class='mui-ellipsis'><span class="colorfe616c">缺勤</span>补卡申请</p>
+												</div>
+											</a>
+										</label>
+										<input name="checkbox" value="Item 1" type="checkbox" checked>
+									</div>
+									<div class="mui-input-row mui-checkbox mui-left">
+										<label>
+											<a href="" class="mui-navigate-right">
+												<div class="mui-media-object mui-pull-left"><img src="~$project/assets/img/zhaop1.jpg"></div>
+												<div class="mui-media-body">
+													冯银银
+													<p class='mui-ellipsis'><span class="colorfe616c">缺勤</span>补卡申请</p>
+												</div>
+											</a>
+										</label>
+										<input name="checkbox" value="Item 1" type="checkbox">
+									</div>
+									<div class="mui-input-row mui-checkbox mui-left">
+										<label>
+											<a href="" class="mui-navigate-right">
+												<div class="mui-media-object mui-pull-left"><img src="~$project/assets/img/zhaop1.jpg"></div>
+												<div class="mui-media-body">
+													冯银银
+													<p class='mui-ellipsis'><span class="colorfe616c">缺勤</span>补卡申请</p>
+												</div>
+											</a>
+										</label>
+										<input name="checkbox" value="Item 1" type="checkbox">
+									</div>
+								</form>
+								<div class="fyy-bindfyy-btn">
+									<form class="mui-input-group">
+										<div class="mui-input-row mui-checkbox mui-left">
+											<label>全选</label>
+											<input name="checkbox" value="Item 1" type="checkbox">
+										</div>
+									</form>
+									<button type="button" class="mui-btn mui-btn-danger">拒绝</button>
+									<button type="button" class="mui-btn mui-btn-success">同意</button>
+								</div>
+							</div>
+						</div>
+					</div>
+					<div id="item2mobile" class="mui-slider-item mui-control-content">
+						<div class="mui-scroll-wrapper">
+							<div class="mui-scroll">
+								<ul class="mui-table-view mui-table-view-chevron">
+									<li class="mui-table-view-cell mui-media">
+										<a class="mui-navigate-right" href="">
+											<div class="mui-media-object mui-pull-left"><img src="~$project/assets/img/zhaop1.jpg"></div>
+											<div class="mui-media-body">
+												冯银银
+												<p class='mui-ellipsis'><span class="colorfe616c">缺勤</span>补卡申请</p>
+											</div>
+											<button type="button" class="mui-btn mui-btn-success mui-btn-outlined">已同意</button>
+										</a>
+									</li>
+									<li class="mui-table-view-cell mui-media">
+										<a class="mui-navigate-right" href="">
+											<div class="mui-media-object mui-pull-left"><img src="~$project/assets/img/zhaop1.jpg"></div>
+											<div class="mui-media-body">
+												冯银银
+												<p class='mui-ellipsis'><span class="colorfe616c">缺勤</span>补卡申请</p>
+											</div>
+											<button type="button" class="mui-btn mui-btn-danger mui-btn-outlined">已拒绝</button>
+										</a>
+									</li>
+								</ul>
+							</div>
+						</div>
+					</div>
+
+				</div>
+			</div>
+
+		</div>
+</div>
 </template>
 
 <script>
 </script>
 
+<style scoped src="$project/assets/css/xpwyfyy.css"></style>
+<style scoped src="$project/assets/css/iconfont.css"></style>
 <style>
 </style>