zhny_web.git - Gitblit

			@@ -1,970 +1,679 @@
			<!-- web 端详情 -->
			<!DOCTYPE html>
			<html lang="en">


			<head>
			<meta charset="UTF-8">
			<meta name="divport" content="width=device-width, initial-scale=1.0">
			<style>
			.top-log {
			position: relative;
			}
			<<<<<<< HEAD
			<meta charset="UTF-8">
			<meta name="divport" content="width=device-width, initial-scale=1.0">
			<style>
			.top-log {
			position: relative;
			}

			=======

			>>>>>>> adf4c52344cf6f0ea16d1f01410258648c9f5356
			.top-log .btn-grounp {
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 80px;
			display: flex;
			align-items: center;
			justify-content: space-around;
			background: transparent;
			}
			<<<<<<< HEAD
			.top-log .btn-grounp {
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 80px;
			display: flex;
			align-items: center;
			justify-content: space-around;
			background: transparent;
			}

			=======

			>>>>>>> adf4c52344cf6f0ea16d1f01410258648c9f5356
			.main-content {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			}
			<<<<<<< HEAD
			.main-content {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			}

			=======

			>>>>>>> adf4c52344cf6f0ea16d1f01410258648c9f5356
			.main-content .logo {
			position: relative;
			margin-top: 56px;
			width: 300px;
			height: 300px;
			border-radius: 50%;
			overflow: hidden;
			}
			<<<<<<< HEAD
			.main-content .logo {
			position: relative;
			margin-top: 56px;
			width: 300px;
			height: 300px;
			border-radius: 50%;
			overflow: hidden;
			}

			=======

			>>>>>>> adf4c52344cf6f0ea16d1f01410258648c9f5356
			.main-content .logo .btn {
			position: absolute;
			bottom: 0;
			width: 100%;
			height: 64px;
			line-height: 64px;
			text-align: center;
			background: rgba(0, 0, 0, .4);
			font-size: 24px;
			color: #fff;
			}
			<<<<<<< HEAD
			.main-content .logo .btn {
			position: absolute;
			bottom: 0;
			width: 100%;
			height: 64px;
			line-height: 64px;
			text-align: center;
			background: rgba(0, 0, 0, .4);
			font-size: 24px;
			color: #fff;
			}

			=======

			>>>>>>> adf4c52344cf6f0ea16d1f01410258648c9f5356
			.main-content .title {
			margin-top: 30px;
			font-size: 48px;
			font-weight: bold;
			color: #333333;
			}
			<<<<<<< HEAD
			.main-content .title {
			margin-top: 30px;
			font-size: 48px;
			font-weight: bold;
			color: #333333;
			}

			=======

			>>>>>>> adf4c52344cf6f0ea16d1f01410258648c9f5356
			.main-content .type {
			display: flex;
			margin-top: 10px;
			width: 180px;
			height: 36px;
			font-size: 24px;
			background: #7BDA8F;
			color: #fff;
			border-radius: 8px;
			overflow: hidden;
			}
			<<<<<<< HEAD
			.main-content .type {
			display: flex;
			margin-top: 10px;
			width: 180px;
			height: 36px;
			font-size: 24px;
			background: #7BDA8F;
			color: #fff;
			border-radius: 8px;
			overflow: hidden;
			}

			=======

			>>>>>>> adf4c52344cf6f0ea16d1f01410258648c9f5356
			.main-content .type .sub {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			}
			<<<<<<< HEAD
			.main-content .type .sub {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			}

			=======

			>>>>>>> adf4c52344cf6f0ea16d1f01410258648c9f5356
			.main-content .type .icon {
			width: 36px;
			display: flex;
			align-items: center;
			justify-content: center;
			background: #6AC077;
			}
			<<<<<<< HEAD
			.main-content .type .icon {
			width: 36px;
			display: flex;
			align-items: center;
			justify-content: center;
			background: #6AC077;
			}

			=======

			>>>>>>> adf4c52344cf6f0ea16d1f01410258648c9f5356
			.main-content .date {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 40px;
			width: calc(100% - 60px);
			height: 110px;
			background: #E4F0F1;
			border-radius: 34px;
			font-size: 34px;
			color: #5ABF78;
			}
			<<<<<<< HEAD
			.main-content .date {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 40px;
			width: calc(100% - 60px);
			height: 110px;
			background: #E4F0F1;
			border-radius: 34px;
			font-size: 34px;
			color: #5ABF78;
			}

			=======

			>>>>>>> adf4c52344cf6f0ea16d1f01410258648c9f5356
			.model-box {
			margin-top: 60px;
			padding: 0 30px;
			}
			<<<<<<< HEAD
			.model-box {
			margin-top: 60px;
			padding: 0 30px;
			}

			=======

			>>>>>>> adf4c52344cf6f0ea16d1f01410258648c9f5356
			.model-box .model-title {
			display: flex;
			align-items: center;
			height: 50px;
			}
			<<<<<<< HEAD
			.model-box .model-title {
			display: flex;
			align-items: center;
			height: 50px;
			}

			=======

			>>>>>>> adf4c52344cf6f0ea16d1f01410258648c9f5356
			.model-box .model-title .l {
			width: 5px;
			height: 36px;
			background: #5ABF78;
			}
			<<<<<<< HEAD
			.model-box .model-title .l {
			width: 5px;
			height: 36px;
			background: #5ABF78;
			}

			=======

			>>>>>>> adf4c52344cf6f0ea16d1f01410258648c9f5356
			.model-box .model-title .title {
			margin-left: 20px;
			font-size: 36px;
			font-weight: bold;
			color: #333333;
			}
			<<<<<<< HEAD
			.model-box .model-title .title {
			margin-left: 20px;
			font-size: 36px;
			font-weight: bold;
			color: #333333;
			}

			=======

			>>>>>>> adf4c52344cf6f0ea16d1f01410258648c9f5356
			.model-box .model-title .border {
			flex: 1;
			margin: 13px;
			border-top: 1px dashed #D4DBE8;
			border-bottom: 1px dashed #D4DBE8;
			}
			<<<<<<< HEAD
			.model-box .model-title .border {
			flex: 1;
			margin: 13px;
			border-top: 1px dashed #D4DBE8;
			border-bottom: 1px dashed #D4DBE8;
			}

			=======

			>>>>>>> adf4c52344cf6f0ea16d1f01410258648c9f5356
			.model-box .model-title .status {
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 24px;
			color: #5ABF78;
			}
			<<<<<<< HEAD
			.model-box .model-title .status {
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 24px;
			color: #5ABF78;
			}

			.model-box .model-title .statu.no {
			color: #EC9144;
			}
			.model-box .model-title .statu.no {
			color: #EC9144;
			}

			=======

			.model-box .model-title .statu.no {
			color: #EC9144;
			}

			>>>>>>> adf4c52344cf6f0ea16d1f01410258648c9f5356
			.model-box .model-title .status view {
			display: flex;
			align-items: center;
			justify-content: center;
			}
			<<<<<<< HEAD
			.model-box .model-title .status view {
			display: flex;
			align-items: center;
			justify-content: center;
			}

			=======

			>>>>>>> adf4c52344cf6f0ea16d1f01410258648c9f5356
			.model-box.qw .model-content {
			display: flex;
			flex-direction: column;
			margin-top: 30px;
			/* height: 642px; */
			background: #fff;
			border-radius: 30px;
			}
			<<<<<<< HEAD
			.model-box.qw .model-content {
			display: flex;
			flex-direction: column;
			margin-top: 30px;
			background: #fff;
			border-radius: 30px;
			}

			.model-box.qw .model-content .box:first-child {
			border: 2px solid #EEEEEE;
			}
			.model-box.qw .model-content .box:first-child {
			border-bottom: 2px solid #EEEEEE;
			}

			=======

			.model-box.qw .model-content .box:first-child {
			border: 2px solid #EEEEEE;
			}

			>>>>>>> adf4c52344cf6f0ea16d1f01410258648c9f5356
			.model-box.qw .model-content .box {
			flex: 1;
			display: flex;
			padding: 30px;
			}
			<<<<<<< HEAD
			.model-box.qw .model-content .box {
			flex: 1;
			display: flex;
			padding: 30px;
			}

			=======

			>>>>>>> adf4c52344cf6f0ea16d1f01410258648c9f5356
			.model-box.qw .model-content .box>.r {
			margin-left: 26px;
			flex: 1;
			font-size: 24px;
			}
			<<<<<<< HEAD
			.model-box.qw .model-content .box>.r {
			margin-left: 26px;
			flex: 1;
			font-size: 24px;
			}

			=======

			>>>>>>> adf4c52344cf6f0ea16d1f01410258648c9f5356
			.model-box.qw .model-content .box>.r .title {
			font-size: 32px;
			font-weight: bold;
			color: #333333;
			}
			<<<<<<< HEAD
			.model-box.qw .model-content .box>.r .title {
			font-size: 32px;
			font-weight: bold;
			color: #333333;
			}

			=======

			>>>>>>> adf4c52344cf6f0ea16d1f01410258648c9f5356
			.model-box.qw .model-content .box>.r .line-box {
			margin-top: 16px;
			display: flex;
			}
			<<<<<<< HEAD
			.model-box.qw .model-content .box>.r .line-box {
			margin-top: 16px;
			display: flex;
			}

			=======

			>>>>>>> adf4c52344cf6f0ea16d1f01410258648c9f5356
			.model-box.qw .model-content .box>.r .line-box .sub {
			width: 120px;
			color: #333333;
			line-height: 36px;
			}
			<<<<<<< HEAD
			.model-box.qw .model-content .box>.r .line-box .sub {
			width: 120px;
			color: #333333;
			line-height: 36px;
			}

			=======

			>>>>>>> adf4c52344cf6f0ea16d1f01410258648c9f5356
			.model-box.qw .model-content .box>.r .line-box .content {
			flex: 1;
			color: #666666;
			line-height: 36px;
			}
			/* 容器 */
			<<<<<<< HEAD
			.model-box.qw .model-content .box>.r .line-box .content {
			flex: 1;
			color: #666666;
			line-height: 36px;
			}

			=======

			>>>>>>> adf4c52344cf6f0ea16d1f01410258648c9f5356
			.model-box.cd .model-content {
			margin-top: 30px;
			background: #fff;
			border-radius: 30px;
			}
			/* 头部 */
			<<<<<<< HEAD
			/* 容器 */

			=======

			>>>>>>> adf4c52344cf6f0ea16d1f01410258648c9f5356
			.model-box.cd .model-content .content-header {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 90px;
			font-size: 30px;
			color: #5ABF78;
			}
			<<<<<<< HEAD
			.model-box.cd .model-content {
			margin-top: 30px;
			background: #fff;
			border-radius: 30px;
			}

			=======

			>>>>>>> adf4c52344cf6f0ea16d1f01410258648c9f5356
			.model-box.cd .model-content.jk .content-header {
			color: #A255B5;
			border-bottom: 2px solid #ECECEC;
			}
			/* 中间 */
			<<<<<<< HEAD
			/* 头部 */

			=======

			>>>>>>> adf4c52344cf6f0ea16d1f01410258648c9f5356
			.model-box.cd .model-content.dk .content-body {
			height: 450px;
			background: greenyellow;
			}
			<<<<<<< HEAD
			.model-box.cd .model-content .content-header {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 90px;
			font-size: 30px;
			color: #5ABF78;
			}

			=======

			>>>>>>> adf4c52344cf6f0ea16d1f01410258648c9f5356
			.model-box.cd .model-content.jksp .content-body {
			height: 385px;
			background: #A255B5;
			}
			<<<<<<< HEAD
			.model-box.cd .model-content.jk .content-header {
			color: #A255B5;
			border-bottom: 2px solid #ECECEC;
			}

			.model-box.cd .model-content.jk .content-body {
			border-bottom: 1px solid transparent;
			}
			/* 中间 */

			=======

			.model-box.cd .model-content.jk .content-body {
			border-bottom: 1px solid transparent;
			}

			>>>>>>> adf4c52344cf6f0ea16d1f01410258648c9f5356
			.model-box.cd .model-content.jk .content-body .site-box {
			margin: 26px 22px;
			border-radius: 28px;
			border: 2px solid #E3E3E3;
			}
			<<<<<<< HEAD
			.model-box.cd .model-content.dk .content-body {
			height: 450px;
			background: greenyellow;
			}

			=======

			>>>>>>> adf4c52344cf6f0ea16d1f01410258648c9f5356
			.model-box.cd .model-content.jk .content-body .site-box .site-title {
			padding: 0 22px;
			margin-top: 10px;
			height: 100px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 28px;
			font-weight: bold;
			color: #333333;
			}
			<<<<<<< HEAD
			.model-box.cd .model-content.jksp .content-body {
			height: 385px;
			/* background: #A255B5; */
			}

			=======

			>>>>>>> adf4c52344cf6f0ea16d1f01410258648c9f5356
			.model-box.cd .model-content.jk .content-body .site-box .site-date {
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 13px 0;
			height: 2px;
			background: #ECECEC;
			}
			<<<<<<< HEAD
			.model-box.cd .model-content.jk .content-body {
			border-bottom: 1px solid transparent;
			}

			=======

			>>>>>>> adf4c52344cf6f0ea16d1f01410258648c9f5356
			.model-box.cd .model-content.jk .content-body .site-box .site-date .site-date-text {
			padding: 0 18px;
			height: 36px;
			background: #F4F4F4;
			border-radius: 18px;
			font-size: 24px;
			color: #929292;
			}
			<<<<<<< HEAD
			.model-box.cd .model-content.jk .content-body .site-box {
			margin: 26px 22px;
			border-radius: 28px;
			border: 2px solid #E3E3E3;
			}

			=======

			>>>>>>> adf4c52344cf6f0ea16d1f01410258648c9f5356
			.model-box.cd .model-content.jk .content-body .site-box .site-content {
			padding: 24px 22px;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			}
			<<<<<<< HEAD
			.model-box.cd .model-content.jk .content-body .site-box .site-title {
			padding: 0 22px;
			/* margin-top: 10px; */
			height: 100px;
			line-height: 100px;
			/* display: flex;
			align-items: center;
			justify-content: space-between; */
			font-size: 28px;
			font-weight: bold;
			color: #333333;
			width: 100%;
			}

			=======

			>>>>>>> adf4c52344cf6f0ea16d1f01410258648c9f5356
			.model-box.cd .model-content.jk .content-body .site-box .site-content>view {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 16px;
			padding: 16px 12px;
			width: calc((100% - 18px) / 2);
			background: #E9F1FC;
			border-radius: 8px;
			box-sizing: border-box;
			}
			<<<<<<< HEAD
			.model-box.cd .model-content.jk .content-body .site-box .site-date {
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 13px 0;
			height: 2px;
			background: #ECECEC;
			}

			=======

			>>>>>>> adf4c52344cf6f0ea16d1f01410258648c9f5356
			.model-box.cd .model-content.jk .content-body .site-box .site-content>view:nth-child(1),
			.model-box.cd .model-content.jk .content-body .site-box .site-content>view:nth-child(2) {
			margin-top: 0;
			}
			<<<<<<< HEAD
			.model-box.cd .model-content.jk .content-body .site-box .site-date .site-date-text {
			padding: 0 18px;
			/* height: 36px; */
			background: #F4F4F4;
			border-radius: 18px;
			font-size: 24px;
			color: #929292;
			}

			=======

			>>>>>>> adf4c52344cf6f0ea16d1f01410258648c9f5356
			.model-box.cd .model-content.jk .content-body .site-box .site-content>view .type {
			font-size: 28px;
			color: #333333;
			}
			<<<<<<< HEAD
			.model-box.cd .model-content.jk .content-body .site-box .site-content {
			padding: 24px 22px;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			}

			.model-box.cd .model-content.jk .content-body .site-box .site-content>div {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 16px;
			padding: 16px 12px;
			width: calc((100% - 18px) / 2);
			background: #E9F1FC;
			border-radius: 8px;
			box-sizing: border-box;
			}

			.model-box.cd .model-content.jk .content-body .site-box .site-content>div:nth-child(1),
			.model-box.cd .model-content.jk .content-body .site-box .site-content>div:nth-child(2) {
			margin-top: 0;
			}

			.model-box.cd .model-content.jk .content-body .site-box .site-content>div .type {
			font-size: 28px;
			color: #333333;
			}

			.model-box.cd .model-content.jk .content-body .site-box .site-content>div .unit {
			margin-top: 4px;
			font-size: 24px;
			color: #84898F;
			}

			.model-box.cd .model-content.jk .content-body .site-box .site-content>div .r {
			font-size: 38px;
			color: #5ABF78;
			}

			/* 底部 */

			.model-box.cd .model-content .content-footer {
			display: flex;
			align-items: center;
			height: 120px;
			font-size: 24px;
			}

			.model-box.cd .model-content.dk .content-footer {
			padding: 0 26px;
			}

			.model-box.cd .model-content.dk .content-footer .l {
			width: 480px;
			color: #666666;
			}

			.model-box.cd .model-content.dk .content-footer .r {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #5ABF78;
			}

			=======

			>>>>>>> adf4c52344cf6f0ea16d1f01410258648c9f5356
			.model-box.cd .model-content.jk .content-body .site-box .site-content>view .unit {
			margin-top: 4px;
			font-size: 24px;
			color: #84898F;
			}
			<<<<<<< HEAD
			.model-box.cd .model-content.jksp .content-footer {
			padding: 0 30px;
			}

			=======

			>>>>>>> adf4c52344cf6f0ea16d1f01410258648c9f5356
			.model-box.cd .model-content.jk .content-body .site-box .site-content>view .r {
			font-size: 38px;
			color: #5ABF78;
			}
			/* 底部 */
			<<<<<<< HEAD
			.model-box.cd .model-content.jksp .content-footer .equi-btn {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-left: 12px;
			width: 196px;
			height: 60px;
			background: #F2F5F9;
			border-radius: 9px;
			border: 1px solid #DCDCDC;
			font-size: 24px;
			color: #697580;
			}

			=======

			>>>>>>> adf4c52344cf6f0ea16d1f01410258648c9f5356
			.model-box.cd .model-content .content-footer {
			display: flex;
			align-items: center;
			height: 120px;
			font-size: 24px;
			}
			<<<<<<< HEAD
			.model-box.cd .model-content.jksp .content-footer .equi-btn:first-child {
			margin-left: 0;
			}

			.model-box.cd .model-content.dk .content-footer {
			padding: 0 26px;
			}
			.model-box.cd .model-content.jksp .content-footer .equi-btn.on {
			background: linear-gradient(90deg, #5ABB82 0%, #7BDA8F 100%);
			border: none;
			color: #fff;
			}

			=======

			.model-box.cd .model-content.dk .content-footer {
			padding: 0 26px;
			}

			>>>>>>> adf4c52344cf6f0ea16d1f01410258648c9f5356
			.model-box.cd .model-content.dk .content-footer .l {
			width: 480px;
			color: #666666;
			}
			<<<<<<< HEAD
			/* 种植环节 */

			=======

			>>>>>>> adf4c52344cf6f0ea16d1f01410258648c9f5356
			.model-box.cd .model-content.dk .content-footer .r {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #5ABF78;
			}
			<<<<<<< HEAD
			.model-box.zz .model-content {
			margin-top: 30px;
			}

			.model-box.cd .model-content.jksp .content-footer {
			padding: 0 30px;
			}
			.model-box.zz .model-content .msg {
			display: flex;
			align-items: center;
			height: 126px;
			}

			=======

			.model-box.cd .model-content.jksp .content-footer {
			padding: 0 30px;
			}

			>>>>>>> adf4c52344cf6f0ea16d1f01410258648c9f5356
			.model-box.cd .model-content.jksp .content-footer .equi-btn {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-left: 12px;
			width: 196px;
			height: 60px;
			background: #F2F5F9;
			border-radius: 9px;
			border: 1px solid #DCDCDC;
			font-size: 24px;
			color: #697580;
			}
			<<<<<<< HEAD
			.model-box.zz .model-content .msg .r {
			margin-left: 30px;
			padding: 10px 26px;
			position: relative;
			flex: 1;
			background: #fff;
			font-size: 24px;
			color: #999999;
			border-radius: 16px;
			}

			.model-box.cd .model-content.jksp .content-footer .equi-btn:first-child {
			margin-left: 0;
			}
			.model-box.zz .model-content .msg .r text {
			font-weight: bold;
			color: #EC9144;
			}

			=======

			.model-box.cd .model-content.jksp .content-footer .equi-btn:first-child {
			margin-left: 0;
			}

			>>>>>>> adf4c52344cf6f0ea16d1f01410258648c9f5356
			.model-box.cd .model-content.jksp .content-footer .equi-btn.on {
			background: linear-gradient(90deg, #5ABB82 0%, #7BDA8F 100%);
			border: none;
			color: #fff;
			}
			/* 种植环节 */
			<<<<<<< HEAD
			.model-box.zz .model-content .msg .r .r-b-msg {
			margin-top: 10px;
			color: #333333;
			}

			.model-box.zz .model-content {
			margin-top: 30px;
			}
			.model-box.zz .model-content .msg .r .point-to {
			position: absolute;
			top: 0;
			left: -18px;
			right: auto;
			bottom: 0;
			margin: auto;
			width: 0;
			height: 0;
			border-top: 14px solid transparent;
			border-right: 30px solid #fff;
			border-bottom: 14px solid transparent;
			z-index: -1;
			}

			=======

			.model-box.zz .model-content {
			margin-top: 30px;
			}

			>>>>>>> adf4c52344cf6f0ea16d1f01410258648c9f5356
			.model-box.zz .model-content .msg {
			display: flex;
			align-items: center;
			height: 126px;
			}
			<<<<<<< HEAD
			.model-box.zz .model-content .record-box {
			display: flex;
			align-items: center;
			}

			=======

			>>>>>>> adf4c52344cf6f0ea16d1f01410258648c9f5356
			.model-box.zz .model-content .msg .r {
			margin-left: 30px;
			padding: 10px 26px;
			position: relative;
			flex: 1;
			background: #fff;
			font-size: 24px;
			color: #999999;
			border-radius: 16px;
			}
			<<<<<<< HEAD
			.model-box.zz .model-content .record-box .l {
			margin-left: 40px;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			}

			=======

			>>>>>>> adf4c52344cf6f0ea16d1f01410258648c9f5356
			.model-box.zz .model-content .msg .r text {
			font-weight: bold;
			color: #EC9144;
			}
			<<<<<<< HEAD
			.model-box.zz .model-content .record-box .l .point {
			width: 20px;
			height: 20px;
			background: #5ABF78;
			border-radius: 50%;
			}

			=======

			>>>>>>> adf4c52344cf6f0ea16d1f01410258648c9f5356
			.model-box.zz .model-content .msg .r .r-b-msg {
			margin-top: 10px;
			color: #333333;
			}
			<<<<<<< HEAD
			.model-box.zz .model-content .record-box .l .line {
			width: 2px;
			height: 150px;
			background: #DEE3E7;
			}

			=======

			>>>>>>> adf4c52344cf6f0ea16d1f01410258648c9f5356
			.model-box.zz .model-content .msg .r .point-to {
			position: absolute;
			top: 0;
			left: -18px;
			right: auto;
			bottom: 0;
			margin: auto;
			width: 0;
			height: 0;
			border-top: 14px solid transparent;
			border-right: 30px solid #fff;
			border-bottom: 14px solid transparent;
			z-index: -1;
			}
			<<<<<<< HEAD
			.model-box.zz .model-content .record-box .l .line.one {
			width: 2px;
			height: 100px;
			background: #DEE3E7;
			}

			=======

			>>>>>>> adf4c52344cf6f0ea16d1f01410258648c9f5356
			.model-box.zz .model-content .record-box {
			display: flex;
			align-items: center;
			}
			<<<<<<< HEAD
			.model-box.zz .model-content .record-box .l .line.two {
			width: 2px;
			height: 100px;
			background: #DEE3E7;
			}

			=======

			>>>>>>> adf4c52344cf6f0ea16d1f01410258648c9f5356
			.model-box.zz .model-content .record-box .l {
			margin-left: 40px;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			}
			<<<<<<< HEAD
			.model-box.zz .model-content .record-box .r {
			margin-left: 64px;
			flex: 1;
			}

			=======

			>>>>>>> adf4c52344cf6f0ea16d1f01410258648c9f5356
			.model-box.zz .model-content .record-box .l .point {
			width: 20px;
			height: 20px;
			background: #5ABF78;
			border-radius: 50%;
			}
			<<<<<<< HEAD
			.model-box.zz .model-content .record-box .r .record-item {
			margin-top: 30px;
			padding: 32px 30px 42px;
			background: #FFFFFF;
			border-radius: 30px;
			}

			=======

			>>>>>>> adf4c52344cf6f0ea16d1f01410258648c9f5356
			.model-box.zz .model-content .record-box .l .line {
			width: 2px;
			height: 150px;
			background: #DEE3E7;
			}
			<<<<<<< HEAD
			.model-box.zz .model-content .record-box .r .record-item .type {
			font-size: 32px;
			font-weight: bold;
			color: #333333;
			}

			=======

			>>>>>>> adf4c52344cf6f0ea16d1f01410258648c9f5356
			.model-box.zz .model-content .record-box .l .line.one {
			width: 2px;
			height: 100px;
			background: #DEE3E7;
			}
			<<<<<<< HEAD
			.model-box.zz .model-content .record-box .r .record-item .date-pel {
			margin-top: 10px;
			display: flex;
			justify-content: space-between;
			}

			=======

			>>>>>>> adf4c52344cf6f0ea16d1f01410258648c9f5356
			.model-box.zz .model-content .record-box .l .line.two {
			width: 2px;
			height: 100px;
			background: #DEE3E7;
			}
			<<<<<<< HEAD
			.model-box.zz .model-content .record-box .r .record-item .date-pel .date {
			padding: 2px 20px;
			font-size: 24px;
			color: #fff;
			background: linear-gradient(89deg, #60BA84 0%, #73DB90 100%);
			border-radius: 10px;
			}

			=======

			>>>>>>> adf4c52344cf6f0ea16d1f01410258648c9f5356
			.model-box.zz .model-content .record-box .r {
			margin-left: 64px;
			flex: 1;
			}
			<<<<<<< HEAD
			.model-box.zz .model-content .record-box .r .record-item .date-pel .pel {
			font-size: 28px;
			color: #666666;
			}

			=======

			>>>>>>> adf4c52344cf6f0ea16d1f01410258648c9f5356
			.model-box.zz .model-content .record-box .r .record-item {
			margin-top: 30px;
			padding: 32px 30px 42px;
			background: #FFFFFF;
			border-radius: 30px;
			}
			<<<<<<< HEAD
			/* 生产企业 */

			=======

			>>>>>>> adf4c52344cf6f0ea16d1f01410258648c9f5356
			.model-box.zz .model-content .record-box .r .record-item .type {
			font-size: 32px;
			font-weight: bold;
			color: #333333;
			}
			<<<<<<< HEAD
			.model-box.sc .model-content {
			margin-top: 30px;
			/* padding-bottom: 30px; */
			background: #fff;
			border-radius: 30px;
			}

			=======

			>>>>>>> adf4c52344cf6f0ea16d1f01410258648c9f5356
			.model-box.zz .model-content .record-box .r .record-item .date-pel {
			margin-top: 10px;
			display: flex;
			justify-content: space-between;
			}
			<<<<<<< HEAD
			.model-box.sc .model-content .content-header {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 124px;
			font-size: 36px;
			font-weight: bold;
			color: #000000;
			}

			=======

			>>>>>>> adf4c52344cf6f0ea16d1f01410258648c9f5356
			.model-box.zz .model-content .record-box .r .record-item .date-pel .date {
			padding: 2px 20px;
			font-size: 24px;
			color: #fff;
			background: linear-gradient(89deg, #60BA84 0%, #73DB90 100%);
			border-radius: 10px;
			}
			<<<<<<< HEAD
			.model-box.sc .model-content .content-body {
			height: 390px;
			}

			=======

			>>>>>>> adf4c52344cf6f0ea16d1f01410258648c9f5356
			.model-box.zz .model-content .record-box .r .record-item .date-pel .pel {
			font-size: 28px;
			color: #666666;
			}
			/* 生产企业 */
			<<<<<<< HEAD
			.model-box.sc .model-content .content-body .swiper {
			height: 100%;
			width: 100%;
			}

			=======

			>>>>>>> adf4c52344cf6f0ea16d1f01410258648c9f5356
			.model-box.sc .model-content {
			margin-top: 30px;
			/* padding-bottom: 30px; */
			background: #fff;
			border-radius: 30px;
			}
			<<<<<<< HEAD
			.model-box.sc .model-content .content-body .swiper-image {
			height: 100%;
			width: 100%;
			}

			=======

			>>>>>>> adf4c52344cf6f0ea16d1f01410258648c9f5356
			.model-box.sc .model-content .content-header {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 124px;
			font-size: 36px;
			font-weight: bold;
			color: #000000;
			}
			<<<<<<< HEAD
			.model-box.sc .model-content .content-body .slide-image {
			height: 100%;
			width: 100%;
			}

			.model-box.sc .model-content .content-body {
			height: 390px;
			}
			.model-box.sc .model-content .text-intro {
			margin: 0 25px;
			padding: 20px 0 34px;
			line-height: 42px;
			font-size: 24px;
			color: #818592;
			border-bottom: 2px solid #EAEEF4;
			}

			=======

			.model-box.sc .model-content .content-body {
			height: 390px;
			}

			>>>>>>> adf4c52344cf6f0ea16d1f01410258648c9f5356
			.model-box.sc .model-content .content-body .swiper {
			height: 100%;
			width: 100%;
			}
			<<<<<<< HEAD
			.model-box.sc .model-content .content-footer {
			margin-top: 24px;
			display: flex;
			align-items: flex-start;
			justify-content: space-around;
			}

			=======

			>>>>>>> adf4c52344cf6f0ea16d1f01410258648c9f5356
			.model-box.sc .model-content .content-body .swiper-image {
			height: 100%;
			width: 100%;
			}
			<<<<<<< HEAD
			.model-box.sc .model-content .content-footer>view {
			display: flex;
			flex-direction: column;
			align-items: center;
			}

			=======

			>>>>>>> adf4c52344cf6f0ea16d1f01410258648c9f5356
			.model-box.sc .model-content .content-body .slide-image {
			height: 100%;
			width: 100%;
			}
			<<<<<<< HEAD
			.model-box.sc .model-content .content-footer>view .type {
			margin-top: 6px;
			font-size: 24px;
			color: #697580;
			}

			=======

			>>>>>>> adf4c52344cf6f0ea16d1f01410258648c9f5356
			.model-box.sc .model-content .text-intro {
			margin: 0 25px;
			padding: 20px 0 34px;
			line-height: 42px;
			font-size: 24px;
			color: #818592;
			border-bottom: 2px solid #EAEEF4;
			}
			<<<<<<< HEAD
			.model-box.sc .model-content .content-footer>view .msg {
			margin-top: 2px;
			padding: 2px 6px;
			background: #E4EBEE;
			border-radius: 13px 13px 13px 13px;
			font-size: 20px;
			color: #697580;
			}

			=======

			>>>>>>> adf4c52344cf6f0ea16d1f01410258648c9f5356
			.model-box.sc .model-content .content-footer {
			margin-top: 24px;
			display: flex;
			align-items: flex-start;
			justify-content: space-around;
			}
			<<<<<<< HEAD
			.btn-grounp {
			margin-top: 84px;
			display: flex;
			height: 148px;
			background: #FFFFFF;
			}

			=======

			>>>>>>> adf4c52344cf6f0ea16d1f01410258648c9f5356
			.model-box.sc .model-content .content-footer>view {
			display: flex;
			flex-direction: column;
			align-items: center;
			}
			<<<<<<< HEAD
			.btn-grounp .l {
			margin-right: 76px;
			width: 194px;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			}

			=======

			>>>>>>> adf4c52344cf6f0ea16d1f01410258648c9f5356
			.model-box.sc .model-content .content-footer>view .type {
			margin-top: 6px;
			font-size: 24px;
			color: #697580;
			}
			<<<<<<< HEAD
			.btn-grounp .l .plan {
			font-size: 34px;
			font-weight: bold;
			color: #D55B26;
			}

			=======

			>>>>>>> adf4c52344cf6f0ea16d1f01410258648c9f5356
			.model-box.sc .model-content .content-footer>view .msg {
			margin-top: 2px;
			padding: 2px 6px;
			background: #E4EBEE;
			border-radius: 13px 13px 13px 13px;
			font-size: 20px;
			color: #697580;
			}
			<<<<<<< HEAD
			.btn-grounp .l .text {
			margin-top: 2px;
			font-size: 20px;
			color: #A5AEB5;
			}

			=======

			>>>>>>> adf4c52344cf6f0ea16d1f01410258648c9f5356
			.btn-grounp {
			margin-top: 84px;
			display: flex;
			height: 148px;
			background: #FFFFFF;
			}
			<<<<<<< HEAD
			.btn-grounp .r {
			flex: 1;
			display: flex;
			align-items: center;
			}

			=======

			>>>>>>> adf4c52344cf6f0ea16d1f01410258648c9f5356
			.btn-grounp .l {
			margin-right: 76px;
			width: 194px;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			}
			<<<<<<< HEAD
			#video-body {
			display: inline-block;
			height: 100%;
			position: relative;
			overflow: hidden;
			}

			=======

			>>>>>>> adf4c52344cf6f0ea16d1f01410258648c9f5356
			.btn-grounp .l .plan {
			font-size: 34px;
			font-weight: bold;
			color: #D55B26;
			}
			<<<<<<< HEAD
			#video-footer {
			width: 100%;
			height: 60px;
			background: rgba(0, 0, 0, 0.5);
			margin-top: -63px;
			position: relative;
			}

			=======

			>>>>>>> adf4c52344cf6f0ea16d1f01410258648c9f5356
			.btn-grounp .l .text {
			margin-top: 2px;
			font-size: 20px;
			color: #A5AEB5;
			}
			<<<<<<< HEAD
			#oper-btn {
			position: absolute;
			top: 10px;
			left: 20px;
			cursor: pointer;
			}

			=======

			>>>>>>> adf4c52344cf6f0ea16d1f01410258648c9f5356
			.btn-grounp .r {
			flex: 1;
			display: flex;
			align-items: center;
			}
			</style>
			<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
			<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
			#full-btn {
			position: absolute;
			top: 12px;
			right: 20px;
			cursor: pointer;
			}
			</style>
			<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
			<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
			<script src="js/flv.min.js" type="text/javascript" charset="utf-8"></script>
			</head>




			<body>
			<div class="page-main-container" style="background: #F1F9F8;width:100%;height: 100%;">

			<!-- <scroll-div scroll-top="{{scrollTop}}" refresher-enabled="{{true}}" bindrefresherrefresh="refresh" refresher-triggered="{{triggered}}" style="height: {{clientHeight}}" scroll-y bindscrolltolower="upcroll"> -->

			<!-- </scroll-div> -->

			</div>
			<script>
			var getData = function(name) {
			var reg = new RegExp("(^\|&)" + name + "=([^&]*)(&\|$)");
			var r = window.location.search.substr(1).match(reg);
			if (r != null) return decodeURI(r[2]);
			return null;
			};
			var code = getData("code");
			<<<<<<< HEAD
			<div class="page-main-container" style="background: #F1F9F8;width:100%;height: 100%;">

			// var code = "22070000002";
			<!-- <scroll-div scroll-top="{{scrollTop}}" refresher-enabled="{{true}}" bindrefresherrefresh="refresh" refresher-triggered="{{triggered}}" style="height: {{clientHeight}}" scroll-y bindscrolltolower="upcroll"> -->

			<!-- </scroll-div> -->

			</div>
			<script>
			var getData = function (name) {
			var reg = new RegExp("(^\|&)" + name + "=([^&]*)(&\|$)");
			var r = window.location.search.substr(1).match(reg);
			if (r != null) return decodeURI(r[2]);
			return null;
			};
			var code = getData("code");

			// var code = "22070000001";


			=======

			// var code = "22070000002";


			>>>>>>> adf4c52344cf6f0ea16d1f01410258648c9f5356
			axios.get('https://dev.jxpskj.com:8023/api/traceability/getTraceabilityDetailInfo?code=' + code).then(function(res) {
			// axios.get('http://192.168.0.114:89/traceability/getTraceabilityDetailInfo?code==22060000002').then(function(res) {

			var data = res.data.data;
			var farm = data.farm;
			var land = data.landVO;
			var num = data.num;
			var paperList = data.paperVOList;
			var recordVOList = data.recordVOList;
			var recovery = data.recoveryVO;

			var str0 = `<div class="top-log">
			axios.get('https://dev.jxpskj.com:8023/api/traceability/getTraceabilityDetailInfo?code=' + code).then(function (res) {
			// axios.get('http://192.168.0.114:89/traceability/getTraceabilityDetailInfo?code=' + code).then(function(res) {

			var data = res.data.data;
			var farm = data.farm;
			var land = data.landVO;
			var num = data.num;
			var paperList = data.paperVOList;
			var recordVOList = data.recordVOList;
			var recovery = data.recoveryVO;

			//请求检测数据
			axios.get('http://dev.jxpskj.com:8030/pyh-station/stationAndVideo/queryStationAndVideoInfoData?type=All&landId=' + recovery.landId).then(function (res) {
			var staList = res.data.data.staList;
			var vidList = res.data.data.vidList;

			window.detectionList = staList;
			window.videoList = vidList;



			var str0 = `<div class="top-log">
			<img width="100%" height="405px" src="http://182.106.212.58:8014/assets/images/sym/2.png" />
			<div class="btn-grounp">
			<img bindtap="scrollTo" data-class=".qw" width="176px" height="80px" src="http://182.106.212.58:8014/assets/images/sy/1418.png" />
			@@ -973,30 +682,30 @@
			<img bindtap="scrollTo" data-class=".sc" width="176px" height="80px" src="http://182.106.212.58:8014/assets/images/sy/1414.png" />
			</div>
			</div>


			<div class="main-content">


			<div class="logo">
			<img width="100%" height="100%" src="${recovery.url}" />
			<!-- <div class="btn">更换图片</div> -->
			</div>


			<div class="title">${recovery.strainName}</div>


			<div class="type">
			<div class="sub">${recovery.lx}</div>
			<!-- <div class="icon">
			<van-icon name="play" />
			</div> -->
			</div>


			<div class="date">
			采收时间：${recovery.time.replaceAll("-",".")}
			采收时间：${recovery.time.replaceAll("-", ".")}
			</div>


			</div>
			<div class="qw model-box">


			<div class="model-title">
			<div class="l"></div>
			<div class="title">权威检测</div>
			@@ -1008,13 +717,13 @@
			可追溯
			</div>
			</div>


			<div class="model-content">`
			var str1 = '';
			if (paperList.length > 0) {
			paperList.forEach(item => {
			var url = item.pictures.split(",")[0];
			str1 = str1 + `<div class="box">
			var str1 = '';
			if (paperList.length > 0) {
			paperList.forEach(item => {
			var url = item.pictures.split(",")[0];
			str1 = str1 + `<div class="box">
			<div class="l">
			<img width="204px" height="204px" src="${url}" />
			</div>
			@@ -1032,25 +741,20 @@
			</div>
			<div class="date line-box">
			<div class="sub">颁发日期：</div>
			<div class="content">${item.time.replaceAll("-",".")}</div>
			<div class="content">${item.time.replaceAll("-", ".")}</div>
			</div>
			</div>
			</div>`
			});
			} else {
			str1 = str1 + `<div class="box"></div>`
			}
			<<<<<<< HEAD
			});
			} else {
			str1 = str1 + `<div class="box"></div>`
			}


			=======


			>>>>>>> adf4c52344cf6f0ea16d1f01410258648c9f5356
			var str2 = `
			var str2 = `
			</div>
			</div>


			<div class="cd model-box">
			<div class="model-title">
			<div class="l"></div>
			@@ -1063,7 +767,7 @@
			可追溯
			</div>
			</div>


			<div class="dk model-content">
			<div class="content-header">
			<van-icon style="margin-right: 12px;" name="http://182.106.212.58:8014/assets/images/sy/1267.png" /> 种植地块
			@@ -1081,180 +785,142 @@
			</div> -->
			</div>
			</div>


			<div class="jksp model-content">
			<div class="content-header">
			<van-icon style="margin-right: 12px;" name="http://182.106.212.58:8014/assets/images/sy/1272.png" /> 良心生产，不怕监督，24小时视频监控
			</div>
			<div class="content-body"></div>
			<div class="content-footer">
			<div class="equi-btn on">
			3号摄像头
			</div>`


			//监控
			var strvedio = '';
			// vidList.push({
			// name:"1号摄像头"
			// })
			// vidList.push({
			// name:"2号摄像头"
			// })
			if (vidList.length > 0) {
			//读取第一个视频 url
			strvedio = strvedio + `<div class="content-body">
			<div id="video-body">
			<video controls id="video-element" muted>你的浏览器太老了，不支持HTML5视频。</video>
			<div id="video-footer" class="css-closeTrans">
			<img id="oper-btn" src="img/i-play.png" width="40px" />
			<div id="video-sound">
			</div>
			<img id="full-btn" src="img/i-fs.png" width="35px" />
			</div>

			<div class="equi-btn">
			3号摄像头
			</div>
			</div>
			</div>

			</div>
			</div><div class="content-footer">`
			//遍历监控点
			vidList.forEach((item,index) => {
			strvedio = strvedio + `<div class="equi-btn on">
			${item.name}
			</div>`
			if(index>=1){
			// equibtn.style.color = "#fff";
			}
			})
			} else {
			strvedio = strvedio + `<div class="content-body">
			</div><div class="content-footer">`
			}

			var str10 =
			`</div>
			</div>
			<div class="jk model-content">
			<div class="content-header">
			物联网监控保证产地养分充足，且不被污染
			</div>
			<div class="content-body">
			<div class="site-box">
			<div class="site-title">
			<div class="site-box">`

			var strdetection = '';

			if (staList.length > 0) {
			var sta = staList[0];
			var timeStr = '';
			var time = sta.weatherTime;
			//当前时间
			var date = new Date();
			//计算时间差
			var crud = date.getTime() - new Date(time).getTime();
			//计算出相差天数
			var days = Math.floor(crud / (24 * 3600 * 1000))
			timeStr = days + "天";

			if (days == 0) {
			//计算出小时数
			var leave1 = crud % (24 * 3600 * 1000) //计算天数后剩余的毫秒数
			var hours = Math.floor(leave1 / (3600 * 1000))
			timeStr = hours + "小时";

			if (hours == 0) {
			//计算相差分钟数
			var leave2 = leave1 % (3600 * 1000) //计算小时数后剩余的毫秒数
			var minutes = Math.floor(leave2 / (60 * 1000))
			timeStr = minutes + "分钟";

			if (minutes == 0) {
			//计算相差秒数
			var leave3 = leave2 % (60 * 1000) //计算分钟数后剩余的毫秒数
			var seconds = Math.round(leave3 / 1000)
			timeStr = seconds + "秒";
			}
			}
			}

			//读取第一个检测设备
			strdetection = strdetection + `<div class="site-title">
			<div class="l">
			<van-icon name="like" /> 谷米田庄二号气象站
			</div>
			<div class="r">
			<van-icon name="add-o" />
			<select id="select" style="font-weight: bold;color: #333333;border: none;font-size: 28px;width:96%">`



			staList.forEach(item=>{
			strdetection = strdetection + `<option>${item.name}</option>`
			})

			strdetection = strdetection + `</select>
			</div>
			</div>
			<div class="site-date">
			<div class="site-date-text">6分钟前更新</div>
			<div class="site-date-text" id="sitedatetext">
			${timeStr}前更新</div>
			</div>
			<div class="site-content">

			<div>
			<div class="l">
			<div class="type">空气温度</div>
			<div class="unit">
			单位：℃
			</div>
			</div>
			<div class="r">
			33.92
			</div>
			</div>

			<div>
			<div class="l">
			<div class="type">空气温度</div>
			<div class="unit">
			单位：℃
			</div>
			</div>
			<div class="r">
			33.92
			</div>
			</div>

			<div>
			<div class="l">
			<div class="type">空气温度</div>
			<div class="unit">
			单位：℃
			</div>
			</div>
			<div class="r">
			33.92
			</div>
			</div>

			<div>
			<div class="l">
			<div class="type">空气温度</div>
			<div class="unit">
			单位：℃
			</div>
			</div>
			<div class="r">
			33.92
			</div>
			</div>

			<div>
			<div class="l">
			<div class="type">空气温度</div>
			<div class="unit">
			单位：℃
			</div>
			</div>
			<div class="r">
			33.92
			</div>
			</div>

			<div>
			<div class="l">
			<div class="type">空气温度</div>
			<div class="unit">
			单位：℃
			</div>
			</div>
			<div class="r">
			33.92
			</div>
			</div>

			<div>
			<div class="l">
			<div class="type">空气温度</div>
			<div class="unit">
			单位：℃
			</div>
			</div>
			<div class="r">
			33.92
			</div>
			</div>

			<div>
			<div class="l">
			<div class="type">空气温度</div>
			<div class="unit">
			单位：℃
			</div>
			</div>
			<div class="r">
			33.92
			</div>
			</div>

			<div>
			<div class="l">
			<div class="type">空气温度</div>
			<div class="unit">
			单位：℃
			</div>
			</div>
			<div class="r">
			33.92
			</div>
			</div>

			<div>
			<div class="l">
			<div class="type">空气温度</div>
			<div class="unit">
			单位：℃
			</div>
			</div>
			<div class="r">
			33.92
			</div>
			</div>

			<div>
			<div class="l">
			<div class="type">空气温度</div>
			<div class="unit">
			单位：℃
			</div>
			</div>
			<div class="r">
			33.92
			</div>
			</div>

			</div>
			<div class="site-content" id="detectionlist">`
			//遍历检测信息
			var weatherList = staList[0].weatherList;
			if (weatherList.length > 0) {
			weatherList.forEach(item => {
			if (item.name != '监测时间') {
			strdetection = strdetection + `<div class="list">
			<div class="l">
			<div class="type">${item.name}</div>
			<div class="unit">
			单位：${item.unit}
			</div>
			</div>
			<div class="r">
			${item.value}
			</div>
			</div>`
			}
			})
			}
			} else {
			strdetection = strdetection + `
			<div class="site-content">`
			}

			var str11 = `</div>
			</div>
			</div>
			</div>
			</div>


			<div class="zz model-box">
			<div class="model-title">
			<div class="l"></div>
			@@ -1267,9 +933,9 @@
			</div> -->
			</div>
			</div>


			<div class="model-content">


			<div class="msg">
			<div class="l">
			<img width="126px" height="126px" src="http://182.106.212.58:8014/assets/images/sy/zz-log.png" />
			@@ -1277,30 +943,29 @@
			<div class="r">
			<div>
			我是基地管理员：
			<!-- <text>郝爱国</text> -->
			</div>
			<div class="r-b-msg">
			以下农事操作，是在我的监督下完成
			</div>


			<div class="point-to"></div>
			</div>
			</div>`

			var str3 = '';
			recordVOList.forEach((item, index) => {
			str3 = str3 + `<div class="record-box">

			var str3 = '';
			recordVOList.forEach((item, index) => {
			str3 = str3 + `<div class="record-box">
			<div class="l">

			<div class="one line" style="${ index == 0 ? 'background: transparent !important;' : '' }">

			<div class="one line" style="${index == 0 ? 'background: transparent !important;' : ''}">
			</div>


			<div class="point">
			</div>

			<div class="two line" style="${ index == recordVOList.length - 1 ? 'background: transparent !important;' : '' }">

			<div class="two line" style="${index == recordVOList.length - 1 ? 'background: transparent !important;' : ''}">
			</div>


			</div>
			<div class="r">
			<div class="record-item">
			@@ -1310,14 +975,13 @@
			<div class="pel">操作人：${item.realName}</div>
			</div>
			</div>

			</div>
			</div>`
			});

			var str4 = `</div>
			});

			var str4 = `</div>
			</div>


			<div class="sc model-box">
			<div class="model-title">
			<div class="l"></div>
			@@ -1330,7 +994,7 @@
			</div> -->
			</div>
			</div>


			<div class="model-content">
			<div class="content-header">
			${farm.farmName}
			@@ -1338,17 +1002,17 @@
			<div class="content-body">
			<swiper class="swiper" indicator-dots="true" autoplay="true" interval="3000" duration="1000">
			<block class="swiper-image">`
			var str5 = '';
			var urls = farm.picture.split(",");
			if (urls.length > 0) {
			urls.forEach(item => {
			str5 = str5 + `<swiper-item>
			var str5 = '';
			var urls = farm.picture.split(",");
			if (urls.length > 0) {
			urls.forEach(item => {
			str5 = str5 + `<swiper-item>
			<image src="${item}" class="slide-image" />
			</swiper-item>`
			})
			}
			var str6 = `</block></swiper>

			})
			}
			var str6 = `</block></swiper>

			</div>
			<div class="text-intro">
			${farm.introduce}
			@@ -1357,33 +1021,214 @@
			</div>
			</div>
			</div>`

			// <div class="btn-grounp">
			// <div class="l">
			// <div class="plan">
			// ${num} %
			// </div>
			// <div class="text">
			// 溯源完整度
			// </div>
			// </div>
			// <div class="r">
			// <van-button bind:click="editTracability" round custom-style="margin-right: 40px; width: 200px; height: 72px; border: 2px solid #5ABF78; background: #fff; color: #5ABF78; font-size: 30px;">编辑溯源</van-button>

			// <van-button bind:click="submit" round custom-style="width: 200px; height: 72px; border: none; background: #5ABF78; color: #fff; font-size: 30px;">分享</van-button>
			// </div>
			// </div>

			var dom = $('.page-main-container');
			dom.empty();
			dom.append(str0 + str1 + str2 + str3 + str4 + str5 + str6);
			});
			</script>

			// <div class="btn-grounp">
			// <div class="l">
			// <div class="plan">
			// ${num} %
			// </div>
			// <div class="text">
			// 溯源完整度
			// </div>
			// </div>
			// <div class="r">
			// <van-button bind:click="editTracability" round custom-style="margin-right: 40px; width: 200px; height: 72px; border: 2px solid #5ABF78; background: #fff; color: #5ABF78; font-size: 30px;">编辑溯源</van-button>

			// <van-button bind:click="submit" round custom-style="width: 200px; height: 72px; border: none; background: #5ABF78; color: #fff; font-size: 30px;">分享</van-button>
			// </div>
			// </div>

			var dom = $('.page-main-container');
			dom.empty();
			dom.append(str0 + str1 + str2 + strvedio + str10 + strdetection + str11 + str3 + str4 + str5 + str6);

			var playImg = "img/i-play.png",
			pauseImg = "img/i-pause.png",
			fsImg = "img/i-fs.png",
			exitFsImg = "img/i-exitfs.png",
			soundOpenImg = "img/sound-open.png",
			soundCloseImg = "img/sound-close.png";

			var videoBody = document.getElementById('video-body'),
			videoElement = document.getElementById('video-element'),
			videoBegin = document.getElementById('video-begin'),
			videoEnd = document.getElementById('video-end'),
			videoFooter = document.getElementById('video-footer'),
			operBtn = document.getElementById('oper-btn'),
			fullBtn = document.getElementById('full-btn');

			var slide = false, soundWidth = 0;

			//初始化视频配置
			if (flvjs.isSupported()) {
			var flvPlayer = flvjs.createPlayer({
			type: 'flv',
			url: window.videoList[0].wssFlv,
			hasAudio: false
			});


			flvPlayer.attachMediaElement(videoElement);
			flvPlayer.load();
			}

			videoElement.style.width = "100%";
			videoElement.style.objectFit = "fill";

			//播放或暂停
			operBtn.onclick = function () {
			if (this.attributes.src.value === playImg) {
			flvPlayer.play();
			this.src = pauseImg;
			} else {
			flvPlayer.pause();
			this.src = playImg;
			}
			}

			//全屏或退出全屏
			fullBtn.onclick = function () {
			if (this.attributes.src.value === fsImg) {
			var docEle = videoContainer;
			var rfs = docEle.requestFullScreen \|\| docEle.webkitRequestFullScreen \|\| docEle.mozRequestFullScreen \|\| docEle.msRequestFullScreen;
			if (rfs) {
			rfs.call(docEle);
			}
			this.src = exitFsImg;
			} else {
			var cfs = document.cancelFullScreen \|\| document.webkitCancelFullScreen \|\| document.mozCancelFullScreen \|\| document.exitFullScreen;
			if (cfs) {
			cfs.call(document);
			}
			this.src = fsImg;
			}
			}

			//鼠标进入显示工具条
			videoBody.onmouseenter = function () {
			videoFooter.classList.add(
			"css-show-transition",
			"css-showTrans"
			);
			}
			//鼠标退出隐藏工具条
			videoBody.onmouseleave = function () {
			videoFooter.classList.add(
			"css-close-transition",
			"css-closeTrans"
			);
			videoFooter.classList.remove(
			"css-show-transition",
			"css-showTrans"
			);
			}

			//播放视频
			operBtn.onclick();

			//切换视频
			$('.jksp .content-footer .equi-btn').click(function () {
			var ind = $(this).index()
			window.videoList.some((item, index) => {
			if (ind == index) {
			//暂停播放数据流
			flvPlayer.pause();
			//取消数据流加载
			flvPlayer.unload();
			//将播放实例从节点中取出
			flvPlayer.detachMediaElement();
			//销毁播放实例
			flvPlayer.destroy();
			//重新创建流实例
			var flvPlayer = flvjs.createPlayer({
			type: 'flv',
			url: window.videoList[index].wssFlv,
			hasAudio: false
			});

			flvPlayer.attachMediaElement(videoElement);
			flvPlayer.load();
			}
			})
			})

			//检测点下拉切换事件
			$('#select').change(function() {
			var bind = $(this).val()
			window.detectionList.some((e, index) => {
			if (bind == e.name) {
			var detectionlist= document.getElementById("detectionlist");
			//先清空
			detectionlist.innerHTML = "";
			//再追加
			var weatherList = e.weatherList;
			var strdetection = "";
			if (weatherList.length > 0) {
			weatherList.forEach( item => {
			if (item.name != '监测时间') {
			strdetection = strdetection + `<div class="list">
			<div class="l">
			<div class="type">${item.name}</div>
			<div class="unit">
			单位：${item.unit}
			</div>
			</div>
			<div class="r">
			${item.value}
			</div>
			</div>`
			}
			})
			}
			detectionlist.innerHTML = strdetection;

			//更新时间替换
			var sitedatetext= document.getElementById("sitedatetext");
			//先清空
			sitedatetext.innerHTML = "";
			var timeStr = '';
			var time = e.weatherTime;
			//当前时间
			var date = new Date();
			//计算时间差
			var crud = date.getTime() - new Date(time).getTime();
			//计算出相差天数
			var days = Math.floor(crud / (24 * 3600 * 1000))
			timeStr = days + "天";

			if (days == 0) {
			//计算出小时数
			var leave1 = crud % (24 * 3600 * 1000) //计算天数后剩余的毫秒数
			var hours = Math.floor(leave1 / (3600 * 1000))
			timeStr = hours + "小时";

			if (hours == 0) {
			//计算相差分钟数
			var leave2 = leave1 % (3600 * 1000) //计算小时数后剩余的毫秒数
			var minutes = Math.floor(leave2 / (60 * 1000))
			timeStr = minutes + "分钟";

			if (minutes == 0) {
			//计算相差秒数
			var leave3 = leave2 % (60 * 1000) //计算分钟数后剩余的毫秒数
			var seconds = Math.round(leave3 / 1000)
			timeStr = seconds + "秒";
			}
			}
			}
			//填充时间参数
			sitedatetext.innerHTML = `<div class="site-date-text" id="sitedatetext">
			${timeStr}前更新</div>`;
			}
			})
			})
			});
			});
			</script>

			<script>

			</script>
			</body>
			<<<<<<< HEAD

			</html>
			=======

			</html>
			>>>>>>> adf4c52344cf6f0ea16d1f01410258648c9f5356