修改模块
This commit is contained in:
@@ -1,3 +1,4 @@
|
||||
@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;}
|
||||
@@ -50,20 +51,63 @@ html, body, form{overflow-y:auto;height:100%;}
|
||||
|
||||
.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:2;}
|
||||
.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:10px;}
|
||||
.visual{height:calc(100% - 33px);padding-top:5px;}
|
||||
|
||||
.visual_box{height:33.3%;}
|
||||
.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),
|
||||
.visual_left .visual_box:nth-child(2),
|
||||
.visual_right .visual_box:nth-child(2) {
|
||||
height: 34%;
|
||||
}
|
||||
.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:25%;height:100%;float:left;}
|
||||
.visual_left{width:25%;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);}
|
||||
@@ -81,17 +125,17 @@ html, body, form{overflow-y:auto;height:100%;}
|
||||
.visual_left .sfzcll .sfzcll_box .sfzcll_smallBk .ygl{color:#00ffc6;}
|
||||
.visual_left .sfzcll .sfzcll_box .sfzcll_smallBk .ygh{color:#ffe400;}
|
||||
|
||||
.visual_con{width:50%;height:100%;float:left;padding:25px 20px 0 20px;}
|
||||
.visual_con .visual_conTop{display:grid;grid-template-columns:repeat(5,1fr);grid-auto-rows:120px;gap:10px;margin-bottom:10px;}
|
||||
.visual_con{width:50%;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:25%;height:100%;float:right;}
|
||||
.visual_con .visual_conTop .visual_conTop_box>div{height:100%;}
|
||||
.visual_con .visual_conTop .visual_conTop_box>div h3{color:#fff;font-size:16px;padding:12px 0 0 16px;margin:0;}
|
||||
.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:32px;font-family: 'yjsz';text-align:left;padding:12px 0 0 16px;margin:0;}
|
||||
.visual_right{width:25%;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;}
|
||||
@@ -99,35 +143,408 @@ html, body, form{overflow-y:auto;height:100%;}
|
||||
.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%;}
|
||||
|
||||
.visual_con .visual_conBot{height:calc(100% - 136px);background:url(../images/ksh41.png) no-repeat;background-size:100% 100%;position:relative;}
|
||||
.visual_con .visual_conBot>img{position:absolute;width:25px;height:25px;}
|
||||
.visual_con .visual_conBot .visual_conBot_l{position:absolute;left:0;top:0;}
|
||||
.visual_con .visual_conBot .visual_conBot_2{position:absolute;right:0;top:0;}
|
||||
.visual_con .visual_conBot .visual_conBot_3{position:absolute;right:0;bottom:0;}
|
||||
.visual_con .visual_conBot .visual_conBot_4{position:absolute;left:0;bottom:0;}
|
||||
.visual_con .visual_conBot .visual_chart{width:100%;height:100%;position:absolute;}
|
||||
.visual_con .visual_conBot .visual_chart_text{color:#fff;position:absolute;top:15px;left:15px;z-index: 99;}
|
||||
.visual_con .visual_conBot .visual_chart_text h1{font-size:26px;margin-bottom:6px;}
|
||||
.visual_con .visual_conBot .visual_chart_text h2{font-size:20px;}
|
||||
.visual_con .visual_conBot .visual_conBot_bot{width:calc(100% - 8px);height:180px;background:rgba(16,54,87,0.5);border:1px solid #345f92;position:absolute;bottom:4px;left:4px;z-index:99;}
|
||||
/* 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_content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.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; }
|
||||
|
||||
.visualSssf_left{width:40%;float:left;color:#fff;padding:10px 20px 0 20px;}
|
||||
.visualSssf_left h3{color:#fff;font-size:20px;font-weight:600;margin-bottom:10px;}
|
||||
.visualSssf_left a{width:32%;color:#fff;display:inline-block;margin-bottom:10px;cursor:pointer;}
|
||||
.visualSssf_left a.active{color:#01f0ff;}
|
||||
.visualSssf_right{width:60%;height:100%;float:left;}
|
||||
.visualSssf_right .visualSssf_right_box{width:33%;float:left;height:100%;}
|
||||
/* 牛只概况列表样式 */
|
||||
#cattle_overview_container {
|
||||
padding: 10px 10px 0 10px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: flex-start;
|
||||
overflow-y: auto;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.visualSfzsfl{position:relative;}
|
||||
.visualSfzsfl .visual_chart{opacity:0.6}
|
||||
.visualSfzsfl .visual_table{width:60%;position:absolute;z-index: 99;top:40px;left:0;}
|
||||
.visualSfzsfl .visual_table table{width:100%;color:#fff;text-align:center;}
|
||||
.visualSfzsfl .visual_table table tr{border-bottom: 1px dashed #ddd;}
|
||||
.visualSfzsfl .visual_table table tr:first-child{color:#01c0ff;}
|
||||
.visualSfzsfl .visual_table table tr:last-child{border-bottom: 1px solid #ddd;}
|
||||
.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: 13px;
|
||||
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: 12px;
|
||||
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%;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user