.

css/common.css

@@ -308,3 +308,25 @@ body {
 	color: transparent;
 	font-weight: bold;
 }
+
+
+body::-webkit-scrollbar {
+	/*滚动条整体样式*/
+	width: 10px;
+	/*高宽分别对应横竖滚动条的尺寸*/
+	height: 10px;
+	scrollbar-arrow-color: #00f;
+}
+body::-webkit-scrollbar-thumb {
+	/*滚动条里面小方块*/
+	border-radius: 6px;
+	-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+	background: rgba(6,11,46, 1);
+	scrollbar-arrow-color: red;
+}
+body::-webkit-scrollbar-track {
+	/*滚动条里面轨道*/
+	-webkit-box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.8);
+	border-radius: 0;
+	background: rgba(255, 255, 255, 0.8);
+}

css/fzfx.css

@@ -1,12 +1,13 @@
 .grid-wrapper {
-  color: #ffffff;
-  padding: 23px 16px 16px;
-  height: calc(100% - 94px);
-  display: grid;
-  grid-gap: 8px;
-  grid-template-columns: repeat(3, 1fr);
-  grid-template-rows: repeat(2, 1fr);
-  grid-template-areas: "left center right" "left bottom bottom"; }
+	box-sizing: border-box;
+	color: #ffffff;
+	padding: 23px 16px 16px;
+	height: calc(100% - 94px);
+	display: grid;
+	grid-gap: 8px;
+	grid-template-columns: repeat(3, 1fr);
+	grid-template-rows: repeat(2, 1fr);
+	grid-template-areas: "left center right" "left bottom bottom"; }
 /*.grid-wrapper > div {
     overflow: hidden;
     background-color: #001346;
@@ -199,29 +200,34 @@
 .grid-wrapper .center .line2 .list .item .title {
     color: #6DDFE9; 
 } */
+.grid-wrapper .center .line2 .top{
+	display: flex;
+}
 .grid-wrapper .center .line2 .top .cell{
 	margin: 5px 8px;
-	/* background-color: #64CFDC; */
 	border: #64CFDC 1px solid;
 	border-radius: 5px;
 	padding: 5px;
 }
 .grid-wrapper .center .line2 .top .cell .title{
 	color: #69bdfd;
+	font-size: 18px;
 }
 .grid-wrapper .center .line2 .top .cell .content{
 	font-weight: 600;
+	font-size: 18px;
 }
 .grid-wrapper .line3{
 	margin-top:10px;
 	height:calc(100% - 148px);
 }
-.grid-wrapper .line3 .ln-Dropdown{
+.ln-Dropdown{
 	cursor: pointer;
 	position: relative;
 	display: inline-block;
 }
-.grid-wrapper .line3 .ln-Dropdown .ln-Dropdown-content{
+.ln-Dropdown .ln-Dropdown-content{
+	min-width: 100px;
 	background-color: #ddd;
 	display: none;
 	z-index: 999;
@@ -232,7 +238,7 @@
 	border-radius: 5px;
 	padding: 5px 0;
 }
-.grid-wrapper .line3 .ln-Dropdown .ln-Dropdown-content .ln-Dropdown-item{
+.ln-Dropdown .ln-Dropdown-content .ln-Dropdown-item{
 	color: #000;
 	text-align: center;
 	line-height: 180%;

fzfx.html

@@ -204,16 +204,16 @@
 				<div class="line2">
 					<div class="top">
 						<span class="cell">
-							<span class="title">返青率：</span>
-							<span class="content">87%</span>
+							<span class="title">存栏量：</span>
+							<span class="content">4897只</span>
 						</span>
 						<span class="cell">
-							<span class="title">受胎率：</span>
-							<span class="content">78%</span>
+							<span class="title">产总仔：</span>
+							<span class="content">858只</span>
 						</span>
 						<span class="cell">
-							<span class="title">配娩率：</span>
-							<span class="content">97%</span>
+							<span class="title">百斤龄：</span>
+							<span class="content">84天</span>
 						</span>
 					</div>
 					<!-- <div class='wait-finish'>
@@ -245,9 +245,9 @@
 					<div id="chartCenter">
 						<div class='chart-tab-t'>
 							<div class="chart-tab-title">
-								<div class="ln-Dropdown" id="ln-Dropdown">
+								<div class="ln-Dropdown ydfscts" id="ln-Dropdown">
 									<i class="ln-Dropdown-text">月度非生产天数</i> <i>▽</i>
-									<ul class="ln-Dropdown-content" id="ln-Dropdown-content">
+									<ul class="ln-Dropdown-content ydfscts" id="ln-Dropdown-content">
 										<li class="ln-Dropdown-item" value="1">周度非生产天数</li>
 										<li class="ln-Dropdown-item" value="2">月度非生产天数</li>
 									</ul>
@@ -285,7 +285,15 @@
 		<div class="bottom">
 			<div class="wrapper">
 				<div class="tab-t">
-					<div class="tab-title">批次配种分娩</div>
+					<div class="tab-title">批次配种分娩
+						<div class="ln-Dropdown charts3" id="ln-Dropdown" style="margin-left:100px;font-size:16px;">
+							<i class="ln-Dropdown-text">周数据</i> <i>▽</i>
+							<ul class="ln-Dropdown-content charts3" id="ln-Dropdown-content">
+								<li class="ln-Dropdown-item" value="1">周数据</li>
+								<li class="ln-Dropdown-item" value="2">月数据</li>
+							</ul>
+						</div>
+					</div>
 				</div>
 				<div class="chartBlock">
 					<div id="chartBottom1">
@@ -563,7 +571,7 @@
 				formatter: "{a} <br/>{b} : {c}%"
 			},
 			legend: {
-				data: ['阳性', '空胎', '返情', '流产', '阴性'],
+				data: ['哺乳', '断奶', '育肥'],
 				textStyle: {
 					color: '#fff',
 				},
@@ -610,25 +618,18 @@
 						fontSize: 20
 					}
 				},
-				data: [{
-					value: 120,
-					name: '阳性'
-				},
-				{
-					value: 80,
-					name: '空胎'
-				},
+				data: [
 				{
 					value: 60,
-					name: '返情'
+					name: '哺乳'
 				},
 				{
 					value: 40,
-					name: '流产'
+					name: '断奶'
 				},
 				{
 					value: 20,
-					name: '阴性'
+					name: '育肥'
 				}]
 			}]
 			};
@@ -930,7 +931,7 @@
 				}
 			},
 			series: [{
-				name: '配种分娩率',
+				name: '返青率',
 				type: 'gauge',
 				center: ['50%', '50%'],
 				min: 0,
@@ -999,7 +1000,7 @@
 				},
 				data: [{
 					value: 75.23,
-					name: '配种分娩率'
+					name: '受胎率'
 				}]
 			}]
 		};
@@ -1109,7 +1110,7 @@
 				}
 			},
 			series: [{
-				name: '分娩活仔率',
+				name: '受胎率',
 				type: 'gauge',
 				center: ['28%', '50%'],
 				min: 0,
@@ -1178,11 +1179,11 @@
 				},
 				data: [{
 					value: 88.23,
-					name: '分娩活仔率'
+					name: '受胎率'
 				}]
 			},
 			{
-				name: '窝均活仔数',
+				name: '配娩率',
 				type: 'gauge',
 				center: ['65%', '50%'],
 				min: 0,
@@ -1252,7 +1253,7 @@
 				},
 				data: [{
 					value: 15.5,
-					name: '窝均活仔数'
+					name: '配娩率'
 				}]
 			}
 			]

js/fzfx.js

@@ -71,10 +71,18 @@ $(".a_demo_two").click(function(){
 	$(".tab-areas .tab-area").eq(i).removeClass('tabshow');
 })
 // 中间下拉框点击事件
-$("#ln-Dropdown").click(function(e) {
-	$(".ln-Dropdown-content").slideToggle(300);
+$("#ln-Dropdown.ydfscts").click(function(e) {
+	$(".ln-Dropdown-content.ydfscts").slideToggle(300);
 	if(e.target.nodeName == 'LI') {
 		console.dir(e.target.attributes.value.value)
-		$('#ln-Dropdown').eq(0)[0].children[0].innerText = e.target.innerText
+		$('#ln-Dropdown.ydfscts').eq(0)[0].children[0].innerText = e.target.innerText
+	}
+})
+// 下部下拉框点击事件
+$("#ln-Dropdown.charts3").click(function (e) {
+	$(".ln-Dropdown-content.charts3").slideToggle(300);
+	if (e.target.nodeName == 'LI') {
+		console.dir(e.target.attributes.value.value)
+		$('#ln-Dropdown.charts3').eq(0)[0].children[0].innerText = e.target.innerText
 	}
 })