567 lines
16 KiB
CSS
567 lines
16 KiB
CSS
@charset "utf-8";
|
|
a,p,h1,h2,h3,h4,h5,h6,body,span,label,div{padding:0;margin:0;font-family:'瀵邦喛钂嬮梿鍛寸拨';}
|
|
div{font-family:'瀵邦喛钂嬮梿鍛寸拨';}
|
|
ul{padding:0;margin:0;}
|
|
a{text-decoration:none !important;}
|
|
.clear{clear:both;}
|
|
html, body, form{overflow-y:auto;height:100%;}
|
|
/* 滚动条样式 */
|
|
::-webkit-scrollbar {width:1px;height:4px;}
|
|
::-webkit-scrollbar-track {-webkit-box-shadow:inset 0 0 6px rgba(255,255,255,0.9);border-radius: 10px;}
|
|
::-webkit-scrollbar-thumb {border-radius:5px; background: rgba(66,66,66,1);-webkit-box-shadow:inset 0 0 6px rgba(227,227,227,87.5);}
|
|
::-webkit-scrollbar-thumb:window-inactive {background: rgba(227,227,227,0.5);}
|
|
|
|
@font-face{
|
|
font-family: yjsz;
|
|
src:url('../fonts/yjsz.TTF'),
|
|
url('../fonts/yjsz.eot'); /* IE9+,可以是具体的实际链接 */
|
|
}
|
|
|
|
|
|
.ksh{height:100%;padding:15px;background:url(../images/data08.png) no-repeat #061537;background-size:cover;overflow:hidden;position:relative;z-index:-2;}
|
|
|
|
/* 加载旋转动画 */
|
|
#load{width:100%;height:100%;position:absolute;background:url(../images/data08.png) no-repeat #061537;background-size:cover;top:0;left:0;z-index:999}
|
|
#load .load_img{position:absolute;left:calc(50% - 182px);top:calc(50% - 182px);}
|
|
.load_img img{position:absolute;left:0;top:0;}
|
|
.load_img .jzxz1{animation:xz1 8s infinite linear;}
|
|
@keyframes xz1 {
|
|
from {
|
|
transform:rotate(0deg);
|
|
}
|
|
50% {
|
|
transform:rotate(180deg);
|
|
}
|
|
to{
|
|
transform:rotate(360deg);
|
|
}
|
|
}
|
|
.load_img .jzxz2{animation:xz2 7s infinite linear;}
|
|
@keyframes xz2 {
|
|
from {
|
|
transform:rotate(0deg);
|
|
}
|
|
50% {
|
|
transform:rotate(-180deg);
|
|
}
|
|
to{
|
|
transform:rotate(-360deg);
|
|
}
|
|
}
|
|
|
|
.head_top{position:relative;text-align:center;}
|
|
.head_top img{display:block;width:80%;margin:0 auto;}
|
|
.head_top .head_logo{position:absolute;top:6px;left:50%;transform:translateX(-50%);color:#55bfff;font-size:35px;font-weight:600;z-index:10;text-shadow: 0 0 10px rgba(0, 216, 255, 0.5);}
|
|
.head_top .head_decor{margin-top:1px;}
|
|
.head_top .decor_side {
|
|
position: absolute;
|
|
top: 15px;
|
|
width: 45px !important;
|
|
height: auto !important;
|
|
z-index: 11;
|
|
opacity: 0.9;
|
|
display: block; /* ensure it is visible */
|
|
margin: 0; /* reset margin from generic rule */
|
|
}
|
|
.head_top .decor_left {
|
|
left: 50%;
|
|
margin-left: -170px !important;
|
|
}
|
|
.head_top .decor_right {
|
|
left: 50%;
|
|
margin-left: 125px !important;
|
|
transform: scaleX(-1);
|
|
}
|
|
.head_top .decor_bar {
|
|
position: absolute;
|
|
top: 40px;
|
|
width: 25% !important;
|
|
height: auto !important;
|
|
z-index: 10;
|
|
display: block;
|
|
}
|
|
.head_top .decor_left_outer {
|
|
left: 50%;
|
|
margin-left: -850px !important;
|
|
}
|
|
.head_top .decor_right_outer {
|
|
left: 50%;
|
|
margin-left: 400px !important;
|
|
}
|
|
.head_top p{width:100%;text-align:center;color:#55bfff;position:absolute;bottom: -18px;left: -10px;}
|
|
.head_top p span{font-family:'yjsz';font-size:20px;}
|
|
|
|
.visual{height:calc(100% - 33px);padding-top:5px;}
|
|
|
|
.visual_box{height:40%;}
|
|
.visual_left .visual_box{height:18%;margin-bottom: 2%;}
|
|
.visual_right .visual_box{height:18%;margin-bottom: 2%;}
|
|
.visual_left .visual_box:nth-child(1),
|
|
.visual_right .visual_box:nth-child(1) {
|
|
height: 39%;
|
|
}
|
|
|
|
.visual_left .visual_box:nth-child(2),
|
|
.visual_right .visual_box:nth-child(2) {
|
|
height: 24%;
|
|
}
|
|
|
|
.visual_left .visual_box:nth-child(3),
|
|
.visual_right .visual_box:nth-child(3) {
|
|
height: 23%;
|
|
}
|
|
.visual_box .visual_title{position:relative;height:35px;margin:5px 0;}
|
|
.visual_box .visual_title span{color:#fff;font-size:18px;line-height:35px;}
|
|
.visual_box .visual_title img{width:100%;position:absolute;left:0;bottom:0;}
|
|
.visual_box .visual_chart{height:calc(100% - 35px);}
|
|
|
|
.visual_left{width:30%;height:100%;float:left;margin-top: -15px;}
|
|
.visual_left .sfzcll{position:relative;}
|
|
.visual_left .sfzcll a{width:32%;text-align:center;line-height:25px;color:#fff;display:inline-block;}
|
|
.visual_left .sfzcll .sfzcll_pos_box{width:100%;height:calc(100% - 30px);}
|
|
.visual_left .sfzcll .sfzcll_box{width:100%;height:calc(33% - 15px);line-height:5;background:rgba(15,47,72,0.8);border:1px solid #1380bd;position:relative;margin-bottom:15px;}
|
|
.visual_left .sfzcll .sfzcll_box:last-of-type{margin:0;}
|
|
.visual_left .sfzcll .sfzcll_box .sfzcll_bkJk{position:absolute;}
|
|
.visual_left .sfzcll .sfzcll_box .sfzcll_bkJk:first-of-type{top:-2px;left:-2px;}
|
|
.visual_left .sfzcll .sfzcll_box .sfzcll_bkJk:nth-child(2){top:-2px;right:-2px;}
|
|
.visual_left .sfzcll .sfzcll_box .sfzcll_bkJk:nth-child(3){bottom:-2px;right:-2px;}
|
|
.visual_left .sfzcll .sfzcll_box .sfzcll_bkJk:nth-child(4){bottom:-2px;left:-2px;}
|
|
.visual_left .sfzcll .sfzcll_box label{width:33%;color:#fff;text-align:center;float:left;}
|
|
.visual_left .sfzcll .sfzcll_box label img{width:23px;height:23px;margin-right:5px;margin-top:-2px;}
|
|
.visual_left .sfzcll .sfzcll_box .sfzcll_smallBk{width:33%;height:100%;float:left;padding:2px 5px;}
|
|
.visual_left .sfzcll .sfzcll_box .sfzcll_smallBk>div{height:100%;background:url(../images/ksh38.png) no-repeat;background-size:100% 100%;text-align: center;line-height:1.5em;}
|
|
.visual_left .sfzcll .sfzcll_box .sfzcll_smallBk .ygl{color:#00ffc6;}
|
|
.visual_left .sfzcll .sfzcll_box .sfzcll_smallBk .ygh{color:#ffe400;}
|
|
|
|
.visual_con{width:40%;height:100%;float:left;padding:0 20px 0 20px;}
|
|
.visual_con .visual_conTop{display:grid;grid-template-columns:repeat(5,1fr);grid-auto-rows:80px;gap:10px;margin-bottom:10px;}
|
|
.visual_con .visual_conTop .visual_conTop_box{height:100%;padding:0;}
|
|
.visual_con .visual_conTop .visual_conTop1{width:100%;height:100%;float:none;}
|
|
.visual_con .visual_conTop .visual_conTop1>div{background:url(../images/ksh40.png) no-repeat;background-size:100% 100%;}
|
|
.visual_con .visual_conTop .visual_conTop2{width:30%;height:100%;float:left;}
|
|
.visual_con .visual_conTop .visual_conTop2>div{background:url(../images/ksh39.png) no-repeat;background-size:100% 100%;}
|
|
.visual_right{width:30%;height:100%;float:right;margin-top: -15px;}
|
|
.visual_con .visual_conTop .visual_conTop_box>div{height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;}
|
|
.visual_con .visual_conTop .visual_conTop_box>div h3{color:#fff;font-size:14px;padding:0;margin:0;text-align:center;width:100%;}
|
|
.visual_con .visual_conTop .visual_conTop_box>div p{width:100%;float:none;line-height:1.2;color:#20dbfd;text-shadow:0 0 12px #00d8ff;font-size:24px;font-family: 'yjsz';text-align:center;padding:5px 0 0 0;margin:0;}
|
|
.visual_con .visual_conTop .visual_conTop_box>div .conTop_smil{width:67%;height:60px;float:left;padding-top:23px;}
|
|
.visual_con .visual_conTop .visual_conTop_box>div .conTop_smil a{display:block;line-height:20px;text-align: left;color:#fff;padding-left:9px;}
|
|
.visual_con .visual_conTop .visual_conTop_box>div .conTop_smil span{width:32px;display:inline-block;margin-left:3px;}
|
|
.visual_con .visual_conTop .visual_conTop_box>div .conTop_smil a.sz{color:#fe3e12;}
|
|
.visual_con .visual_conTop .visual_conTop_box>div .conTop_smil a.xd{color:#12fe81;}
|
|
.visual_con .visual_conTop .visual_conTop_box>div .conTop_smil a.null{visibility:hidden;}
|
|
|
|
.visual_conBot{height:calc(100% - 400px);position:relative;margin-top:10px;}
|
|
.visual_conBot>img{position:absolute;z-index:99;}
|
|
.visual_conBot .visual_conBot_l{left:0;top:0;}
|
|
.visual_conBot .visual_conBot_2{right:0;top:0;}
|
|
.visual_conBot .visual_conBot_3{right:0;bottom:0;}
|
|
.visual_conBot .visual_conBot_4{left:0;bottom:0;}
|
|
.visual_conBot .visual_chart{width:100%;height:100%;position:absolute;z-index:9;}
|
|
|
|
/* 订单状态监控模块样式 */
|
|
.visual_conStatus {
|
|
height: 90px;
|
|
margin-top: 10px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 0 10px;
|
|
}
|
|
|
|
.status_item {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
position: relative;
|
|
padding-bottom: 5px;
|
|
}
|
|
|
|
.status_label {
|
|
color: #fff;
|
|
font-size: 14px;
|
|
margin-bottom: 5px;
|
|
z-index: 2;
|
|
}
|
|
|
|
.status_value_group {
|
|
display: flex;
|
|
align-items: baseline;
|
|
margin-bottom: 15px;
|
|
z-index: 2;
|
|
}
|
|
|
|
.status_value_group .stat-value {
|
|
color: #fff;
|
|
font-size: 24px;
|
|
font-family: 'yjsz';
|
|
font-weight: bold;
|
|
text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
|
|
}
|
|
|
|
.status_value_group .status_unit {
|
|
color: #aaa;
|
|
font-size: 12px;
|
|
margin-left: 5px;
|
|
}
|
|
|
|
.status_base {
|
|
position: absolute;
|
|
bottom: 0;
|
|
width: 80%;
|
|
height: 30px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.status_ring {
|
|
position: absolute;
|
|
bottom: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 50%;
|
|
border: 2px solid rgba(0, 150, 255, 0.5);
|
|
background: rgba(0, 80, 160, 0.2);
|
|
box-shadow: 0 0 15px rgba(0, 150, 255, 0.4), inset 0 0 10px rgba(0, 150, 255, 0.2);
|
|
transform: rotateX(60deg);
|
|
}
|
|
|
|
.status_light {
|
|
position: absolute;
|
|
bottom: 10px;
|
|
width: 70%;
|
|
height: 40px;
|
|
background: linear-gradient(to top, rgba(0, 150, 255, 0.4), transparent);
|
|
clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
|
|
z-index: 1;
|
|
}
|
|
|
|
/* 为 status_ring 添加旋转动画 */
|
|
.status_ring::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: -5px; left: -5px; right: -5px; bottom: -5px;
|
|
border-radius: 50%;
|
|
border: 2px dashed rgba(0, 216, 255, 0.6);
|
|
animation: rotateRing 10s linear infinite;
|
|
}
|
|
|
|
@keyframes rotateRing {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
|
|
.stat-card{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;height:100%;}
|
|
|
|
/* Order List Styles */
|
|
.order_list_container {
|
|
padding: 10px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.order_list_header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 8px 10px;
|
|
background: rgba(13, 38, 71, 0.8);
|
|
border-radius: 4px;
|
|
margin-bottom: 5px;
|
|
}
|
|
.order_list_header span {
|
|
color: #00d8ff;
|
|
font-size: 14px;
|
|
flex: 1;
|
|
text-align: center;
|
|
}
|
|
/* 优化列宽分配 */
|
|
.order_list_header span:nth-child(1), .order_item span:nth-child(1) { flex: 0.4; } /* 序号 */
|
|
.order_list_header span:nth-child(2), .order_item span:nth-child(2) { flex: 1.4; } /* 运单号 */
|
|
.order_list_header span:nth-child(3), .order_item span:nth-child(3) { flex: 1; } /* 起始地 */
|
|
.order_list_header span:nth-child(4), .order_item span:nth-child(4) { flex: 1; } /* 目的地 */
|
|
.order_list_header span:nth-child(5), .order_item span:nth-child(5) { flex: 0.6; } /* 状态 */
|
|
.order_list_header span:nth-child(6), .order_item span:nth-child(6) { flex: 1.2; } /* 预计送达 */
|
|
|
|
.order_list_content {
|
|
flex: 1;
|
|
overflow-y: hidden; /* 隐藏滚动条，使用自动滚动 */
|
|
}
|
|
.order_item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 8px 10px;
|
|
border-bottom: 1px solid rgba(255,255,255,0.1);
|
|
align-items: center;
|
|
}
|
|
.order_item span {
|
|
color: #fff;
|
|
font-size: 13px;
|
|
flex: 1;
|
|
text-align: center;
|
|
}
|
|
.status-done { color: #00ffc6 !important; }
|
|
.status-shipping { color: #ffe400 !important; }
|
|
.status-pending { color: #ff6b6b !important; }
|
|
|
|
/* 牛只概况列表样式 */
|
|
#cattle_overview_container {
|
|
padding: 10px 10px 0 10px;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-content: flex-start;
|
|
overflow-y: auto;
|
|
height: 100%;
|
|
}
|
|
|
|
.cattle_item {
|
|
width: 48%;
|
|
margin-right: 4%;
|
|
margin-bottom: 12px;
|
|
background: rgba(10, 30, 60, 0.6);
|
|
border: 1px solid #134572;
|
|
border-radius: 20px;
|
|
padding: 5px 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
box-sizing: border-box;
|
|
box-shadow: inset 0 0 10px rgba(0, 150, 255, 0.1);
|
|
cursor: pointer;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.cattle_item:hover {
|
|
background: rgba(10, 30, 60, 0.9);
|
|
border-color: #00d8ff;
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 5px 15px rgba(0, 216, 255, 0.2);
|
|
}
|
|
|
|
.cattle_item:nth-child(2n) {
|
|
margin-right: 0;
|
|
}
|
|
|
|
.cattle_icon {
|
|
width: 30px;
|
|
height: 30px;
|
|
border-radius: 50%;
|
|
background: rgba(0, 80, 160, 0.5);
|
|
border: 1px solid #0096ff;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-right: 8px;
|
|
flex-shrink: 0;
|
|
position: relative;
|
|
}
|
|
|
|
.cattle_icon::after {
|
|
content: '';
|
|
position: absolute;
|
|
width: 4px;
|
|
height: 4px;
|
|
background: #00d8ff;
|
|
border-radius: 50%;
|
|
bottom: 2px;
|
|
right: 2px;
|
|
box-shadow: 0 0 5px #00d8ff;
|
|
}
|
|
|
|
.cattle_icon .glyphicon {
|
|
color: #8acaff;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.cattle_info {
|
|
flex: 1;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: baseline;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.cattle_name {
|
|
color: #cceeff;
|
|
font-size: 13px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.cattle_value {
|
|
color: #fff;
|
|
font-size: 16px;
|
|
font-family: 'yjsz';
|
|
margin-left: 5px;
|
|
}
|
|
|
|
.cattle_unit {
|
|
font-size: 12px;
|
|
color: #aaa;
|
|
margin-left: 2px;
|
|
font-family: "Microsoft YaHei";
|
|
}
|
|
|
|
/* 牛只行情列表样式 */
|
|
.market_list_container {
|
|
padding: 10px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.market_list_header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 8px 0;
|
|
background: rgba(13, 38, 71, 0.8);
|
|
border-radius: 4px;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.market_list_header span {
|
|
color: #aaa;
|
|
font-size: 14px;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.market_list_content {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.market_item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 8px 0;
|
|
border-bottom: 1px solid rgba(255,255,255,0.05);
|
|
align-items: center;
|
|
}
|
|
|
|
.market_item span {
|
|
color: #fff;
|
|
font-size: 13px;
|
|
text-align: center;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* 序号列 */
|
|
.market_list_header span:nth-child(1),
|
|
.market_item span:nth-child(1) {
|
|
flex: 0.5;
|
|
}
|
|
|
|
/* 省份列 */
|
|
.market_list_header span:nth-child(2),
|
|
.market_item span:nth-child(2) {
|
|
flex: 1;
|
|
}
|
|
|
|
/* 地区列 */
|
|
.market_list_header span:nth-child(3),
|
|
.market_item span:nth-child(3) {
|
|
flex: 1.5;
|
|
}
|
|
|
|
/* 品种列 */
|
|
.market_list_header span:nth-child(4),
|
|
.market_item span:nth-child(4) {
|
|
flex: 1;
|
|
}
|
|
|
|
/* 单价列 */
|
|
.market_list_header span:nth-child(5),
|
|
.market_item span:nth-child(5) {
|
|
flex: 1;
|
|
}
|
|
|
|
.market_price {
|
|
color: #00d8ff !important;
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* 合计总数模块样式 */
|
|
.total_layout {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-around;
|
|
padding: 10px 20px;
|
|
}
|
|
|
|
.total_row {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
background: rgba(10, 30, 60, 0.6);
|
|
border: 1px solid rgba(0, 216, 255, 0.2);
|
|
border-radius: 8px;
|
|
margin-bottom: 10px;
|
|
padding: 0 15px;
|
|
box-shadow: inset 0 0 15px rgba(0, 150, 255, 0.1);
|
|
}
|
|
|
|
.total_row:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.total_icon_wrapper {
|
|
width: 46px;
|
|
height: 46px;
|
|
background: rgba(0, 80, 160, 0.5);
|
|
border: 1px solid #0096ff;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
box-shadow: 0 0 10px rgba(0, 216, 255, 0.3);
|
|
}
|
|
|
|
.total_icon_wrapper .glyphicon {
|
|
font-size: 20px;
|
|
color: #00d8ff;
|
|
}
|
|
|
|
.total_text_wrapper {
|
|
margin-left: 20px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
}
|
|
|
|
.total_label {
|
|
color: #cceeff;
|
|
font-size: 14px;
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.total_data {
|
|
display: flex;
|
|
align-items: baseline;
|
|
}
|
|
|
|
.total_data .stat-value {
|
|
color: #fff;
|
|
font-size: 24px;
|
|
font-family: 'yjsz';
|
|
font-weight: bold;
|
|
text-shadow: 0 0 10px rgba(0, 216, 255, 0.5);
|
|
}
|
|
|
|
.total_data .total_unit {
|
|
color: #aaa;
|
|
font-size: 12px;
|
|
margin-left: 5px;
|
|
}
|
|
|
|
/* 屠宰场概况列表样式 - 复用牛只概况样式逻辑 */
|
|
#slaughterhouse_overview_container {
|
|
padding: 10px 10px 0 10px;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-content: flex-start;
|
|
overflow-y: auto;
|
|
height: 100%;
|
|
}
|