| | |
| | | <template> |
| | | <div class="mixing_index"> |
| | | <div class="mixing_header"> |
| | | <div class="mixing_main"> |
| | | <div class="mixing_left"> |
| | | <div class="mixing_left_num"><span>{{mixingList&&mixingList.tableNum}}</span></div> |
| | | <div class="mixing_left_name">{{mixingList&&mixingList.materialName}}</div> |
| | | <span>中铁十四局通甬站前I标管片场拌合站</span> |
| | | </div> |
| | | <div class="mixing_main"> |
| | | <div class="mixing_left"> |
| | | <div class="mixing_left_num"><span>{{mixingList&&mixingList.tableNum}}</span></div> |
| | | <div class="mixing_left_name">{{mixingList&&mixingList.materialName}}</div> |
| | | </div> |
| | | <div class="mixing_right"> |
| | | <div class="mixing_rows"> |
| | | <div class="mixing_rows_titles">产地名称:</div> |
| | | <div class="mixing_rows_datas">{{mixingList&&mixingList.nameOfOrigin}}</div> |
| | | </div> |
| | | <div class="mixing_right"> |
| | | <div class="mixing_rows"> |
| | | <div class="mixing_rows_titles">产地名称:</div> |
| | | <div class="mixing_rows_datas">{{mixingList&&mixingList.nameOfOrigin}}</div> |
| | | </div> |
| | | <div class="mixing_rows"> |
| | | <div class="mixing_rows_titles">进场数量:</div> |
| | | <div class="mixing_rows_datas">{{mixingList&&mixingList.incomingQuantity}} t</div> |
| | | </div> |
| | | <div class="mixing_rows"> |
| | | <div class="mixing_rows_titles">进场日期:</div> |
| | | <div class="mixing_rows_datas">{{mixingList&&mixingList.inTime}}</div> |
| | | </div> |
| | | <div class="mixing_rows"> |
| | | <div class="mixing_rows_titles">检验日期:</div> |
| | | <div class="mixing_rows_datas">{{mixingList&&mixingList.inspectionDate}}</div> |
| | | </div> |
| | | <div class="mixing_rows"> |
| | | <div class="mixing_rows_titles">检验状态:</div> |
| | | <div class="mixing_rows_datas" :class="{'standardStyle':mixingList.status===1,'notStandardStyle':mixingList.status!==1}">{{mixingList&&mixingList.status===1?'合格':mixingList&&mixingList.status===2?'待检':''}}</div> |
| | | </div> |
| | | <div class="mixing_rows"> |
| | | <div class="mixing_rows_titles">报告编号:</div> |
| | | <div class="mixing_rows_datas">{{mixingList&&mixingList.reportNumber}}</div> |
| | | </div> |
| | | <div class="mixing_rows"> |
| | | <div class="mixing_rows_titles">进场数量:</div> |
| | | <div class="mixing_rows_datas">{{mixingList&&mixingList.incomingQuantity}} t</div> |
| | | </div> |
| | | <div class="mixing_rows"> |
| | | <div class="mixing_rows_titles">进场日期:</div> |
| | | <div class="mixing_rows_datas">{{mixingList&&mixingList.inTime}}</div> |
| | | </div> |
| | | <div class="mixing_rows"> |
| | | <div class="mixing_rows_titles">检验日期:</div> |
| | | <div class="mixing_rows_datas">{{mixingList&&mixingList.inspectionDate}}</div> |
| | | </div> |
| | | <div class="mixing_rows"> |
| | | <div class="mixing_rows_titles">检验状态:</div> |
| | | <div class="mixing_rows_datas" :class="{'standardStyle':mixingList.status===1,'notStandardStyle':mixingList.status!==1}">{{mixingList&&mixingList.status===1?'合格':mixingList&&mixingList.status===2?'待检':''}}</div> |
| | | </div> |
| | | <div class="mixing_rows"> |
| | | <div class="mixing_rows_titles">报告编号:</div> |
| | | <div class="mixing_rows_datas">{{mixingList&&mixingList.reportNumber}}</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | .mixing_index{ |
| | | width: 100%; |
| | | height: 100%; |
| | | background-color: #041A3F; |
| | | padding: 5px; |
| | | background: url("../../assets/mixing/mixing_bg3.png") no-repeat; |
| | | background-size: 100% 100%; |
| | | background-position: center center; |
| | | |
| | | |
| | | .mixing_header{ |
| | | width: 100%; |
| | | height: 100%; |
| | | padding: 108px 50px 40px; |
| | | background: url("../../assets/mixing/mixing_bg.png") no-repeat; |
| | | background-size: 100% 100%; |
| | | background-position: center center; |
| | | height: 3.2rem; |
| | | position: relative; |
| | | padding: 50px; |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | |
| | | span{ |
| | | position: absolute; |
| | | font-size: 3rem; |
| | | font-weight: bold; |
| | | line-height: 3.2rem; |
| | | letter-spacing: 2px; |
| | | text-shadow: 0px 3px 3px rgba(25, 63, 95, 0.05); |
| | | background: -webkit-linear-gradient(90deg, #2AC0FF 0%, #FFFFFF 70%); |
| | | -webkit-background-clip: text; |
| | | -webkit-text-fill-color: transparent; |
| | | } |
| | | } |
| | | |
| | | .mixing_main{ |
| | | width: 100%; |
| | | height: 100%; |
| | | padding: 20px 15px; |
| | | .mixing_main{ |
| | | width: 100%; |
| | | height: calc(100% - 3rem); |
| | | position: absolute; |
| | | padding: 20px 15px; |
| | | display: flex; |
| | | .mixing_left{ |
| | | width: 45%; |
| | | margin-right: 15px; |
| | | display: flex; |
| | | .mixing_left{ |
| | | width: 45%; |
| | | margin-right: 15px; |
| | | display: flex; |
| | | flex-direction: column; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | flex-direction: column; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | |
| | | .mixing_left_num{ |
| | | width: 100%; |
| | | height: 78%; |
| | | padding: 10px; |
| | | background: url("../../assets/mixing/mixing_left_bg.png") no-repeat; |
| | | background-size: 100% 100%; |
| | | span{ |
| | | height: 100%; |
| | | padding: 10px 0; |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | color: rgba(254, 252, 94, 1); |
| | | font-size: 44rem; |
| | | font-weight: bold; |
| | | background-color: rgba(37, 129, 255, 0.29); |
| | | } |
| | | } |
| | | .mixing_left_name{ |
| | | width: 100%; |
| | | height: 20%; |
| | | margin-top: 15px; |
| | | .mixing_left_num{ |
| | | width: 100%; |
| | | height: 78%; |
| | | padding: 10px; |
| | | background: url("../../assets/mixing/mixing_left_bg.png") no-repeat; |
| | | background-size: 100% 100%; |
| | | span{ |
| | | height: 100%; |
| | | padding: 10px 0; |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | text-shadow: 5px 7px 0px rgba(0,66,255,0.2), 16px 23px 16px rgba(14,19,48,0.15); |
| | | background: linear-gradient(to bottom,#FFFFFF 0%,rgba(140, 186, 255, 0.88) 100%); |
| | | background-clip: text; |
| | | -webkit-background-clip: text; |
| | | text-fill-color: transparent; |
| | | -webkit-text-fill-color: transparent; |
| | | color: #FFFFFF; |
| | | font-size: 9rem; |
| | | font-weight: 500; |
| | | color: rgba(254, 252, 94, 1); |
| | | font-size: 44rem; |
| | | font-weight: bold; |
| | | background-color: rgba(37, 129, 255, 0.29); |
| | | } |
| | | } |
| | | .mixing_right{ |
| | | width:55%; |
| | | background: linear-gradient(to right,#0D3776 0%,#041A40 100%); |
| | | .mixing_left_name{ |
| | | width: 100%; |
| | | height: 20%; |
| | | margin-top: 15px; |
| | | display: flex; |
| | | flex-direction: column; |
| | | justify-content: space-around; |
| | | .mixing_rows{ |
| | | padding: 10px 20px; |
| | | display: flex; |
| | | .mixing_rows_titles{ |
| | | flex: none; |
| | | color: #FFFFFF; |
| | | font-weight: 400; |
| | | font-size: 5rem; |
| | | } |
| | | .mixing_rows_datas{ |
| | | flex: none; |
| | | color: #FFFFFF; |
| | | font-weight: 400; |
| | | font-size: 5rem; |
| | | } |
| | | .standardStyle{ |
| | | color:#15EF48; |
| | | font-size:8rem; |
| | | } |
| | | .notStandardStyle{ |
| | | color:rgba(255, 102, 0, 1); |
| | | font-size:8rem; |
| | | } |
| | | justify-content: center; |
| | | align-items: center; |
| | | text-shadow: 5px 7px 0px rgba(0,66,255,0.2), 16px 23px 16px rgba(14,19,48,0.15); |
| | | background: linear-gradient(to bottom,#FFFFFF 0%,rgba(140, 186, 255, 0.88) 100%); |
| | | background-clip: text; |
| | | -webkit-background-clip: text; |
| | | text-fill-color: transparent; |
| | | -webkit-text-fill-color: transparent; |
| | | color: #FFFFFF; |
| | | font-size: 9rem; |
| | | font-weight: 500; |
| | | } |
| | | } |
| | | .mixing_right{ |
| | | width:55%; |
| | | background: linear-gradient(to right,#0D3776 0%,#041A40 100%); |
| | | display: flex; |
| | | flex-direction: column; |
| | | justify-content: space-around; |
| | | .mixing_rows{ |
| | | padding: 10px 20px; |
| | | display: flex; |
| | | .mixing_rows_titles{ |
| | | flex: none; |
| | | color: #FFFFFF; |
| | | font-weight: 400; |
| | | font-size: 5rem; |
| | | } |
| | | .mixing_rows_datas{ |
| | | flex: none; |
| | | color: #FFFFFF; |
| | | font-weight: 400; |
| | | font-size: 5rem; |
| | | } |
| | | .standardStyle{ |
| | | color:#15EF48; |
| | | font-size:8rem; |
| | | } |
| | | .notStandardStyle{ |
| | | color:rgba(255, 102, 0, 1); |
| | | font-size:8rem; |
| | | } |
| | | } |
| | | } |