员工健康码明细

src/assets/css/xpwyfyy.css

@@ -13,7 +13,8 @@ body {
 	color: #3385FF/*蓝*/
 }
 
-.colorf8b155 {
+.colorf8b155,
+.vongi-zctj .vongi-ygjkma .vongi-archives .mui-table-view .colorf8b155 {
 	color: #FF8400/*黄*/
 }
 
@@ -21,7 +22,8 @@ body {
 	color: #05c8af/*湖绿*/
 }
 
-.colorfe616c {
+.colorfe616c,
+.vongi-zctj .vongi-ygjkma .vongi-archives .mui-table-view .colorfe616c {
 	color: #fe616c/*红*/
 }
 
@@ -33,7 +35,8 @@ body {
 	color: #4359DB/*紫蓝*/
 }
 
-.color55f868 {
+.color55f868,
+.vongi-zctj .vongi-ygjkma .vongi-archives .mui-table-view .color55f868 {
 	color: #389E0D/*绿*/
 }
 
@@ -56,7 +59,7 @@ body {
 	color: #375cf5
 }
 
-.color999 {
+.color999{
 	color: #999
 }
 
@@ -408,6 +411,17 @@ body {
 .mui-segmented-control.mui-scroll-wrapper .mui-control-item {
 	width: 50%
 }
+.vongi-ygjkma .mui-segmented-control.mui-scroll-wrapper .mui-control-item {
+	width: 25%;
+	padding:0;
+	font-size:14px;
+}
+.vongi-ygjkma .mui-badge{
+	font-size:80%
+}
+.vongi-ygjkma .mui-segmented-control.mui-scroll-wrapper .mui-scroll{
+	padding:0 15px
+}
 
 .mui-segmented-control.mui-scroll-wrapper {
 	height: 44px

src/projects/business/views/Master/Health/CodeList.vue

@@ -1,8 +1,101 @@
 <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-zctj">
+			<div class="vongi-bagfff">
+				<div class="vongi-xzdw-search">
+					<input type="search" placeholder="搜索姓名或编号">
+					<span class="mui-icon mui-icon-search"></span>
+				</div>
+			</div>
+			<div id="slider" class="mui-slider mui-fullscreen vongi-ygjkma">
+				<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="mui-badge">5000</span>
+						</a>
+						<a class="mui-control-item" href="#item2mobile">
+							黄码<span class="mui-badge">5000</span>
+						</a>
+						<a class="mui-control-item" href="#item3mobile">
+							红码<span class="mui-badge">5000</span>
+						</a>
+						<a class="mui-control-item" href="#item4mobile">
+							灰码<span class="mui-badge">5</span>
+						</a>
+					</div>
+				</div>
+				<div class="mui-slider-group">
+					<div id="item1mobile" class="mui-slider-item mui-control-content">
+						<div class="mui-scroll-wrapper">
+							<div class="mui-scroll vongi-archives">
+								<ul class="mui-table-view">
+									<li class="mui-table-view-cell">
+										<a class="mui-navigate-right" href="#">
+											<div class="mui-pull-left flew-items"><div class="mui-media-object"><img src="~$project/assets/img/01.png"></div> 高进权</div>
+											<span class="mui-pull-right color55f868">绿码<i class="iconfont icon-erweima1"></i></span>
+										</a>
+									</li>
+								</ul>
+							</div>
+						</div>
+					</div>
+					<div id="item2mobile" class="mui-slider-item mui-control-content">
+						<div class="mui-scroll-wrapper">
+							<div class="mui-scroll vongi-archives">
+								<ul class="mui-table-view">
+									<li class="mui-table-view-cell">
+										<a class="mui-navigate-right" href="#">
+											<div class="mui-pull-left flew-items"><div class="mui-media-object"><img src="~$project/assets/img/01.png"></div> 高进权</div>
+											<span class="mui-pull-right colorf8b155">黄码<i class="iconfont icon-erweima1"></i></span>
+										</a>
+									</li>
+								</ul>
+							</div>
+						</div>
+					</div>
+					<div id="item3mobile" class="mui-slider-item mui-control-content">
+						<div class="mui-scroll-wrapper">
+							<div class="mui-scroll vongi-archives">
+								<ul class="mui-table-view">
+									<li class="mui-table-view-cell">
+										<a class="mui-navigate-right" href="#">
+											<div class="mui-pull-left flew-items"><div class="mui-media-object"><img src="~$project/assets/img/01.png"></div> 高进权</div>
+											<span class="mui-pull-right colorfe616c">红码<i class="iconfont icon-erweima1"></i></span>
+										</a>
+									</li>
+								</ul>
+							</div>
+						</div>
+					</div>
+					<div id="item4mobile" class="mui-slider-item mui-control-content">
+						<div class="mui-scroll-wrapper">
+							<div class="mui-scroll vongi-archives">
+								<ul class="mui-table-view">
+									<li class="mui-table-view-cell">
+										<a class="mui-navigate-right" href="#">
+											<div class="mui-pull-left flew-items"><div class="mui-media-object"><img src="~$project/assets/img/01.png"></div> 高进权</div>
+											<span class="mui-pull-right">灰码<i class="iconfont icon-erweima1"></i></span>
+										</a>
+									</li>
+								</ul>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+
+		</div>
+</div>
 </template>
 
 <script>
 </script>
 
+<style scoped src="$project/assets/css/xpwyfyy.css"></style>
+<style src="$project/assets/css/iconfont.css"></style>
 <style>
 </style>