优化白胚布预测过程体现动画效果

public/conf.js

@@ -1,6 +1,6 @@
 AutoPlayer = false; //开启自动漫游
 ApiServer = "http://192.168.66.133:8080" //http://192.168.66.133:8080"; //服务接口地址
-PLAYER3D_URL = "ws://192.168.1.101:8082" // "ws://192.168.66.133:8082"; //
+PLAYER3D_URL = "ws://192.168.1.105:8082" // "ws://192.168.66.133:8082"; //
 DEV_ALAR_COLOR = "ff6c00"; //全局设备告警颜色
 DEV_HINT_COLOR = "d69d85"; //设备盘头剩余20-50之间的提示颜色
 DEV_OFFLINE_COLOR = "666666"; //设备未接入的颜色

src/pages/bpb/index.vue

@@ -5,40 +5,61 @@
             <div class="abs" style="text-align: center;top:2%;width: 100%;letter-spacing: 5px;color: #cdd2fb;font-size: 18px;">
                 <span style="position: relative;">订单日期<el-date-picker v-model="selectedDate" type="date" placeholder="选择日期"></el-date-picker></span>
                 <span style="position: relative;margin-left:10px;">预测周期<input value="10" type="text" style="text-align: center;width: 80px;">&nbsp;天</span>
+                <el-button @click="init">开始</el-button>
             </div>
             <div class="bpb_orderlist">
-                <div class="bpb_order_num fontcolor">订单数：<b>8</b></div>
+                <div ref="bpb_orderlist_title" class="bpb_order_num fontcolor">
+                    <template v-if="orderQueryState==2">订单数：<b>{{ orderlist.length }}</b></template>                    
+                </div>
                 <div class="itemlist" ref="orderItemList">
-                    <div class="bpb_order_item" v-for="item in orderlist" :style="{top:item.top,zIndex:item.zindex}" @click="selectedOrder(item)">
+                    <div class="bpb_order_item" style="top:210px;transition: none;z-index: 0;"></div>
+                    <div class="bpb_order_item" v-for="item in orderlist" :style="{top:item.top,zIndex:item.zindex,transition:item.transition}" @click="selectedOrder(item)">
                         <div class="no">编号：{{ item.id }}</div>
                         <div class="checkbox abs"><input :checked="item.checked" type="checkbox" name=""></div>
                     </div>
+                    
                 </div>
             </div>
-            <div class="pbp_order_app" ref="pbp_order_app">
+            <div class="pbp_order_app" ref="pbp_order_app" style="top:258.5px;">
                 <div class="title fontcolor">订单系统</div>
                 <div class="iconlist">
                     <img src="../../assets/image/bpb/o.png" style="z-index: 1">
                     <img src="../../assets/image/bpb/o.png" id="order_app_linkpoint" ref="order_app_linkpoint" style="z-index: 2;top: calc(0.7*110px);left: calc(0.7*70px);">
                     <img src="../../assets/image/bpb/o.png" style="z-index: 3;top: calc(0.7*154px);left: calc(0.7*150px);">
                 </div>
+                <div class="opt_state" v-if="orderQueryState>0">
+                    <template v-if="orderQueryState==1">
+                        <span>订单提取中</span>
+                        <span class="dot-loading"><span class="dot"></span><span class="dot"></span><span class="dot"></span></span>
+                    </template>
+                    <template v-if="orderQueryState==2">
+                        <span><img src="../../assets/image/CheckCircle.png">订单提取完成</span>
+                    </template>
+                </div>
             </div>
-            <div class="abs" id="order_app_line" ref="order_app_line" style="height: 50px;"><img src="../../assets/image/bpb/v317.png" style="width: 100%;height: 100%;"><img class="abs refresh" src="../../assets/image/bpb/refresh.png" style="left: 35%;top:8%;"></div>
+            <div class="abs" id="order_app_line" ref="order_app_line" style="height: 50px; left: 192px; top: 287px;"><img src="../../assets/image/bpb/v317.png" style="width: 100%;height: 100%;"><img class="abs refresh" src="../../assets/image/bpb/refresh.png" style="left: 35%;top:8%;"></div>
             <div class="bpb_mt_list" ref="bpb_mt_list">
                 <div class="title fontcolor">物料清单</div>
                 <div class="title fontcolor" style="left: 360px;top: 94px;">经编产能</div>
                 <img class="wlbg" src="../../assets/image/bpb/wlbg.png">
+                <div class="wlbg" style="right: -9px;top: 0%;height: 169%;bor;box-shadow: 3px 3px 10px #287faa;border: 1px solid rgb(47, 120, 171);width: 27%;border-radius: 3px;transform: rotateZ(240deg) rotateX(136deg) rotateY(-218deg) skew(0deg, -2deg);background: #0f3f6645;"></div>
                 <div class="itemlist">
-                    <div v-for="item in bpb_mt_item_data" :class="item.isalarm ? 'bpb_mt_item alarm':'bpb_mt_item'" :key="item.id" :style="{left:item.left,top:item.top,zIndex:item.zindex}">
-                        <table cellspacing="0" cellpadding="0"><tbody>
-                            <tr><td rowspan="2">{{ item.name }}</td><td>需求：{{item.need}}T</td></tr><tr><td>库存：{{item.storage}}T</td></tr>
-                        </tbody></table>
-                        <img src="../../assets/image/bpb/v320.png" class="link_point" :style="{top:'90%',left:'90%',zIndex:item.zindex}">
-                        <div class="cl" :style="{top:'102%',left:'119%',zIndex:item.zindex}"><b class="">{{item.plc}}T</b></div></div>
+                    <div v-if="selectPredictOrders.length==0" style="text-align: center;transform: rotateZ(26deg) rotateX(28deg) rotateY(-72deg) skew(65deg);letter-spacing: 6px;font-size: 30px;color: #e1e187;margin-top: 21%;">
+                        请选择预测订单
+                    </div>
+                    <template v-else>
+                        <div v-for="item in bpb_mt_item_data" :class="item.isalarm ? 'bpb_mt_item alarm':'bpb_mt_item'" :key="item.id" :style="{left:item.left,top:item.top,zIndex:item.zindex}">
+                            <table cellspacing="0" cellpadding="0"><tbody>
+                                <tr><td rowspan="2">{{ item.name }}</td><td>需求：{{item.need}}T</td></tr><tr><td :style="{opacity:item.opacity,transition: 'opacity 0.5s'}">库存：{{item.storage==null?'？':item.storage+'T'}}</td></tr>
+                            </tbody></table>
+                            <img src="../../assets/image/bpb/v320.png" class="link_point" :style="{top:'90%',left:'90%',zIndex:item.zindex}">
+                            <div class="cl" :style="{top:'102%',left:'119%',zIndex:item.zindex}"><b class="">{{item.plc==null?'?':item.plc+'T'}}</b></div>
+                        </div>
+                    </template>
                 </div>
             </div>
-            <div class="abs" id="order_wl_line" ref="order_wl_line" style="width:  calc(0.5*240px);"><img src="../../assets/image/bpb/v318.png" style="width: 100%;height: 100%;"><img class="abs refresh" src="../../assets/image/bpb/refresh.png" style="left: 35%;top:8%;"></div>
-            <div class="pbp_storage" ref="pbp_storage">
+            <div class="abs" id="order_wl_line" ref="order_wl_line" style="width: calc(120px); left: 413.59px; top: 269.031px;"><img src="../../assets/image/bpb/v318.png" style="width: 100%;height: 100%;"><img class="abs refresh" src="../../assets/image/bpb/refresh.png" style="left: 35%;top:8%;"></div>
+            <div class="pbp_storage" ref="pbp_storage" style="top: 388px; left: 331px;">
                 <div class="title fontcolor" style="top: 43px;left: -20px;">仓储</div>
                 <div class="iconlist">
                     <img src="../../assets/image/bpb/h.png" style="z-index: 1">
@@ -46,23 +67,49 @@
                     <img src="../../assets/image/bpb/h.png" style="z-index: 3;top: calc(0.7*154px);left: calc(0.7*150px);">
                 </div>
                 <div class="abs" id="storage_wl_line" ref="storage_wl_line" style="height: 50px;"><img src="../../assets/image/bpb/v317.png" style="width: 100%;height: 100%;"><img class="abs refresh" src="../../assets/image/bpb/refresh.png" style="left: 35%;top:100%;width: 36px;height: 36px"></div>
+                <div class="opt_state" v-if="storageQueryState>0">
+                    <template v-if="storageQueryState==1">
+                        <span>库存检查中</span>
+                        <span class="dot-loading"><span class="dot"></span><span class="dot"></span><span class="dot"></span></span>
+                    </template>
+                    <template v-if="storageQueryState==2">
+                        <span><img src="../../assets/image/CheckCircle.png">库存检查完成</span>
+                    </template>
+                </div>
             </div>
-            <div class="pbp_plc" ref="pbp_plc">
+            <div class="pbp_plc" ref="pbp_plc" style="top: 477.313px; left: 596.962px;">
                 <div class="title fontcolor" style="top: 43px;left: -20px;">生产</div>
                 <div class="iconlist">
                     <img src="../../assets/image/bpb/plc.png" style="z-index: 1">
                     <img src="../../assets/image/bpb/plc.png" id="plc_app_linkpoint" ref="plc_app_linkpoint" style="z-index: 2;top: calc(0.7*110px);left: calc(0.7*70px);">
                     <img src="../../assets/image/bpb/plc.png" style="z-index: 3;top: calc(0.7*154px);left: calc(0.7*150px);">
                 </div>
-                <div class="abs" id="plc_wl_line" ref="plc_wl_line" style="height: 50px;"><img src="../../assets/image/bpb/v319.png" style="width: 100%;height: 100%;top:0;"><img class="abs refresh" src="../../assets/image/bpb/refresh.png" style="left: 35%;top:32%;width: 36px;height: 36px"></div>
+                <div class="abs" id="plc_wl_line" ref="plc_wl_line" style="height: 42.1px;left: 84px;top: 37px;width: 58.4px;"><img src="../../assets/image/bpb/v317.png" style="width: 100%;height: 100%;top:0;"><img class="abs refresh" src="../../assets/image/bpb/refresh.png" style="left: 18%;top:11%;width: 36px;height: 36px"></div>
+                <div class="opt_state" v-if="plcPredictState>0">
+                    <template v-if="plcPredictState==1">
+                        <span>生产预测中</span>
+                        <span class="dot-loading"><span class="dot"></span><span class="dot"></span><span class="dot"></span></span>
+                    </template>
+                    <template v-if="plcPredictState==2">
+                        <span><img src="../../assets/image/CheckCircle.png">生产预测完成</span>
+                    </template>
+                </div>
             </div>    
             <div class="bpb_order_resultlist" ref="bpb_order_resultlist" style="left:inherit;right: 50px;top:calc(0.7*710px)">
-                <div class="itemlist">            
-                    <div :class="item.isalarm?'bpb_order_item alarm': 'bpb_order_item'" v-for="item in order_result_data" :key="item.id" :style="{zIndex:item.zindex,top:item.top,left:item.left}">
+                <div ref="bpb_order_resultlist_title" class="bpb_order_num fontcolor">
+                    <div v-if="plcPredictState==2">预测结果</div>
+                </div>
+                <div class="itemlist" v-show="plcPredictState==2">
+                    <div :class="item.isalarm?'bpb_order_item alarm': 'bpb_order_item'" v-for="item in order_result_data" :key="item.id" :style="{zIndex:item.zindex,top:item.top,left:item.left,transition:transition}">
                         <div class="no">需求过剩：{{item.neednum}}T<br>编号：{{ item.id }}</div>
                     </div>
                 </div>
-                <div class="abs order_result_line" ref="order_result_line"><img src="../../assets/image/bpb/v320.png" class="link_point"><img class="abs refresh" src="../../assets/image/bpb/refresh.png" style="left: 35%;top:27%;width: 36px;height: 36px"></div>
+                <div class="abs order_result_line" ref="order_result_line">
+                    <template v-if="plcPredictState==2">
+                        <img src="../../assets/image/bpb/v320.png" class="link_point">
+                        <img class="abs refresh" src="../../assets/image/bpb/refresh.png" style="left: 35%;top:27%;width: 36px;height: 36px">
+                    </template>
+                </div>
             </div>
         </div>
     </div>
@@ -85,14 +132,21 @@ import { ref,onMounted,watch } from 'vue';
 import api from "@/api/system";
 import { ElDatePicker } from 'element-plus';
 import 'element-plus/dist/index.css'; // 确保导入样式文件
+import { template } from 'lodash';
 export default {
     props:{
 
     },
     setup(props,{emit}) {
+        const orderQueryState = ref(0);
+        const storageQueryState = ref(0);
+        const plcPredictState = ref(0);
         let selectedDate = ref('');
+        let selectPredictOrders = ref([]);
         let orderlist=ref([]);
         let bpb_mt_item_data = ref([]);
+        const bpb_orderlist_title = ref(null);
+        const bpb_order_resultlist_title =ref(null);
         const orderItemList = ref(null);
         const pbp_order_app = ref(null);
         const order_app_linkpoint = ref(null);
@@ -109,52 +163,50 @@ export default {
         const order_result_line = ref(null);
         let order_result_data = ref([]);
 
-        function testData(){
-            var lst = [{id:'12345670'},{id:'12345671'},{id:'12345672'},{id:'12345673'},{id:'12345674'},{id:'12345675'},{id:'12345676'},{id:'12345677'}];
-            orderlist.value = lst;
-            //物料清单信息
-            var temp1 = [
-                {id:1,name:'单层涤纶毯(成品)',need:30,'storage':40,plc:25,isalarm:false},
-                {id:2,name:'单层涤纶毯(成品)',need:30,'storage':40,plc:25,isalarm:false},
-                {id:3,name:'单层涤纶毯(成品)',need:30,'storage':10,plc:25,isalarm:true},
-                {id:4,name:'单层涤纶毯(成品)',need:30,'storage':10,plc:25,isalarm:true}
-            ];
-            bpb_mt_item_data.value = temp1;
-            //预测结果列表
-            var temp2=[
-                {id:'12345670',isalarm:false,neednum:5},{id:'212345671',isalarm:false,neednum:5},{id:'012345671',isalarm:false,neednum:5},{id:'12345671',isalarm:false,neednum:5},{id:'12345672',isalarm:false,neednum:5},{id:'12345673',isalarm:false,neednum:5},{id:'12345674',isalarm:true,neednum:5},{id:'12345675',isalarm:false,neednum:5},{id:'12345676',isalarm:true,neednum:5},{id:'12345677',isalarm:false,neednum:5},
-            ];
-            order_result_data.value = temp2;
+        function testData(){           
+            
+            
         }
-        function init(){
-            testData();            
-            //重置订单列表布局
-            let tmpLst = [];
-            orderlist.value.forEach((item,ind)=>{
-                let top=(ind*30)+'px';
-                let zindex = 100-ind;
-                tmpLst.push({"id":item.id,"top":top,"zindex":zindex,"checked":false});
-            })
-            orderlist.value = tmpLst;
-            tmpLst = [];
-            bpb_mt_item_data.value.forEach((item,ind) => {
-                let top=11+(ind*30)+'px';
-                let zindex = 100-ind;
-                let left = 272+(ind*-53)+'px';
-                let obj = {"id":item.id,name:item.name,"top":top,"zindex":zindex,"left":left,"isalarm":item.isalarm,need:item.need,storage:item.storage,plc:item.plc};
-                tmpLst.push(obj);
-            });
-            bpb_mt_item_data.value = tmpLst;
-            //排列预测结果元素
-            tmpLst = [];
-            order_result_data.value.forEach((item,ind)=>{
-                tmpLst.push({"id":item.id,"zindex":1+ind,"left":'0px',"top":(ind*-37)+'px',"isalarm":item.isalarm,"neednum":item.neednum});
-            });
-            order_result_data.value = tmpLst;
+        function getOerderList(){
+            orderQueryState.value=1;//开始查询订单
+            setTimeout(() => {
+                var lst = [{id:'12345670'},{id:'12345671'},{id:'12345672'},{id:'12345673'},{id:'12345674'}];
+                orderlist.value = lst.reverse();                
+                let tmpLst = [];
+                let top=0;
+                orderQueryState.value=2;//订单查询完成
+                setTimeout(function(){
+                    orderlist.value.forEach((item,ind)=>{
+                        top=210-(ind*30)+'px';
+                        let zindex = 1+ind;
+                        tmpLst.push({"id":item.id,"top":top,"zindex":zindex,"checked":false,transition:'top '+(ind*0.3)+'s ease-in-out'});
+                    })                
+                    orderlist.value = tmpLst;                    
+                    layout();
+                },1000);
+
+            }, 2000);
+        }
+        function init(){            
+            testData();   
+            orderQueryState.value = 0;
+            storageQueryState.value = 0;
+            plcPredictState.value = 0;
+            orderlist.value = [];
+            selectPredictOrders.value=[];
+            bpb_mt_item_data.value = [];
+            order_result_data.value = [];
+            bpb_orderlist_title.value.style.top="0%";
+            bpb_order_resultlist_title.value.style.top='0%';
+            getOerderList();
+        }
+        //重置订单列表布局
+        function layout(){
             setTimeout(() => {
-                let lastOrderItemEle = orderItemList.value.lastElementChild;
+                let lastOrderItemEle = orderItemList.value.firstElementChild;
                 let sty1 = window.getComputedStyle(lastOrderItemEle);                
-                var orderH = parseInt(sty1.height)+lastOrderItemEle.offsetTop;                
+                var orderH = parseInt(sty1.height)+lastOrderItemEle.offsetTop;    
+                bpb_orderlist_title.value.style.top = orderItemList.value.lastElementChild.offsetTop-10+'px';            
                 orderItemList.value.parentElement.style.height = orderH+'px';
                 pbp_order_app.value.style.top = lastOrderItemEle.offsetTop+(parseInt(sty1.height)/2)+'px';
                 let sty2 = window.getComputedStyle(order_app_linkpoint.value);
@@ -180,35 +232,124 @@ export default {
                 plc_wl_line.value.style.left = plc_app_linkpoint.value.offsetLeft + parseInt(window.getComputedStyle(plc_app_linkpoint.value).width)/2+30+'px';
                 plc_wl_line.value.style.top = plc_app_linkpoint.value.offsetTop - parseInt(window.getComputedStyle(plc_app_linkpoint.value).height) -30 + 'px';
                 plc_wl_line.value.style.width = (0.7*132)+"px";
-                plc_wl_line.value.style.height = (0.7*173)+"px";
-
-                var orderCount = order_result_data.value.length;
-                if(orderCount>3) orderCount=3;
-                var tmpTop = parseInt(window.getComputedStyle(bpb_order_resultlist.value.querySelectorAll('.bpb_order_item')[0]).height)*0.7+((orderCount-1)*30);
-                order_result_line.value.style.left = 'inherit';
-                order_result_line.value.style.right = parseInt(window.getComputedStyle(bpb_order_resultlist.value).width) + 25 + 'px';
-                order_result_line.value.style.top = tmpTop*-1+"px";
-            }, 200);            
+                plc_wl_line.value.style.height = (0.7*173)+"px"; 
+            }, 1000);
         }
         function selectedOrder(obj){
             let tempLst = orderlist.value;
+            bpb_order_resultlist_title.value.style.top='0%';
+            storageQueryState.value = 0;
+            plcPredictState.value = 0;
+            bpb_mt_item_data.value = [];
+            order_result_data.value = [];
             for(let i=0;i<tempLst.length;i++){
                 if(tempLst[i].id==obj.id){
                     tempLst[i].checked = !tempLst[i].checked;
+                    
                     break;
                 }
             }
+            let tmpLst2=[];
+            tempLst.forEach(ele=>{
+                if(ele.checked) tmpLst2.push(ele);
+            })
+            selectPredictOrders.value=tmpLst2;
+            if(tmpLst2.length==0) storageQueryState.value=0;
+            else{
+                 setTimeout(() => {
+                    //物料清单信息
+                    var temp1 = [
+                        {id:1,name:'单层涤纶毯(成品)',need:30,'storage':null,plc:null,isalarm:false},
+                        {id:2,name:'单层涤纶毯(成品)',need:30,'storage':null,plc:null,isalarm:false},
+                        {id:3,name:'单层涤纶毯(成品)',need:30,'storage':null,plc:null,isalarm:true},
+                        {id:4,name:'单层涤纶毯(成品)',need:30,'storage':null,plc:null,isalarm:true}
+                    ];
+                    let tempLst=[];
+                    temp1.forEach((item,ind) => {
+                        let top=11+(ind*30)+'px';
+                        let zindex = 100-ind;
+                        let left = 272+(ind*-53)+'px';
+                        let obj = {"id":item.id,name:item.name,"top":top,"zindex":zindex,"left":left,"isalarm":item.isalarm,need:item.need,storage:item.storage,plc:item.plc};
+                        tempLst.push(obj);
+                    });
+                    bpb_mt_item_data.value = tempLst;                    
+                    queryStorage();
+                 }, 1000);                 
+            }
             orderlist.value = tempLst;
         }
+        //库存检查
+        function queryStorage(){
+            storageQueryState.value=1;
+            setTimeout(() => {
+                storageQueryState.value =2;
+                //渐隐
+                setTimeout(() => {
+                    let tempLst = bpb_mt_item_data.value;
+                    tempLst.forEach(ele=>{
+                        ele['opacity'] = 0;
+                    })
+                    bpb_mt_item_data.value = tempLst;
+                }, 500);
+                //渐显
+                setTimeout(() => {
+                    let tempLst = bpb_mt_item_data.value;
+                    tempLst.forEach(ele=>{
+                        ele['storage'] = 30;
+                        ele['isalarm'] = false;
+                        ele['opacity'] = 1;
+                        ele['plc'] = 25;
+                    })
+                    bpb_mt_item_data.value = tempLst;                
+                    predict();                    
+                }, 1000);
+
+            }, 3000);
+        }
+        function predict(){
+            setTimeout(() => {
+                plcPredictState.value = 1;
+                 //预测结果列表
+                 var temp2=[
+                        {id:'12345670',isalarm:false,neednum:5},{id:'212345671',isalarm:false,neednum:5},{id:'012345671',isalarm:false,neednum:5},{id:'12345671',isalarm:false,neednum:5},{id:'12345672',isalarm:false,neednum:5},{id:'12345673',isalarm:false,neednum:5},{id:'12345674',isalarm:true,neednum:5},{id:'12345675',isalarm:false,neednum:5},{id:'12345676',isalarm:true,neednum:5},{id:'12345677',isalarm:false,neednum:5},
+                    ];
+                    order_result_data.value = temp2;
+                setTimeout(() => {                   
+                    //排列预测结果元素
+                    let tmpLst = [];
+                    order_result_data.value.forEach((item,ind)=>{
+                        tmpLst.push({"id":item.id,"zindex":1+ind,"left":'0px',"top":(ind*-37)+'px',"isalarm":item.isalarm,"neednum":item.neednum,transition:"opt "+(ind*0.5)+"s ease-in-out"});
+                    });
+                    order_result_data.value = tmpLst;
+                    
+                    var orderCount = order_result_data.value.length;
+                    if(orderCount>3) orderCount=3;
+                    var tmpTop = parseInt(window.getComputedStyle(bpb_order_resultlist.value.querySelectorAll('.bpb_order_item')[0]).height)*0.7+((orderCount-1)*30);
+                    order_result_line.value.style.left = 'inherit';
+                    order_result_line.value.style.right = parseInt(window.getComputedStyle(bpb_order_resultlist.value).width) + 25 + 'px';
+                    order_result_line.value.style.top = tmpTop*-1+"px";   
+                    bpb_order_resultlist_title.value.style.top =   ((tmpLst.length-1)*-37)-10+'px';
+                    plcPredictState.value = 2;              
+                }, 3000);
+            }, 1000);
+        }
         onMounted(()=>{
             init();
         });
         return{
+            init,
+            selectPredictOrders,
+            orderQueryState,
+            storageQueryState,
+            plcPredictState,
             selectedDate,
             orderlist,
             bpb_mt_item_data,
             order_result_data,
             selectedOrder,
+            queryStorage,
+            bpb_orderlist_title,
+            bpb_order_resultlist_title,
             orderItemList,
             pbp_order_app,
             order_app_linkpoint,

src/styles/bpb.css

@@ -20,6 +20,39 @@ input[type='text']{
       transform: rotate(360deg); /* 动画结束时图片旋转360度 */
     }
 }
+.dot-loading {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+}
+
+.dot {
+    width: 10px;
+    height: 10px;
+    display: inline-block;
+    margin: 0 5px;
+    background-color: aliceblue;
+    border-radius: 50%;
+    animation: bounce 1.4s infinite ease-in-out;
+}
+
+.dot:nth-child(2) {
+    animation-delay: 0.2s;
+}
+
+.dot:nth-child(3) {
+    animation-delay: 0.4s;
+}
+
+@keyframes bounce {
+    0%, 80%, 100% {
+        transform: scale(0);
+    }
+    40% {
+        transform: scale(1);
+    }
+}
 .refresh{
     animation: rotate 2s linear infinite;
 }
@@ -35,6 +68,31 @@ input[type='text']{
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
 }
+.opt_state{
+    position: absolute;
+    font-weight: bold;
+    letter-spacing: 5px;
+    background: -webkit-linear-gradient(#730ad6, #89c95005);
+    font-size: 14px !important;
+    top: 49px !important;
+    left: 35px !important;
+    z-index: 1000;
+    transform: rotateZ(35deg) rotateX(12deg) rotateY(-10deg) skew(44deg);
+    -webkit-text-fill-color: aliceblue;
+    width: 170px;
+    height: 60px;
+    line-height: 32px;
+    text-align: center;
+}
+.opt_state>span{
+    display: inline-block;
+}
+.opt_state img{
+    width: 24px !important;
+    height: 24px !important;
+    position: static !important;
+    vertical-align: middle;
+}
 .bpb_bg{
     background-image: url('../assets/image/bpb/bg.png');
     background-size: contain;
@@ -55,13 +113,14 @@ input[type='text']{
 .bpb_order_num{
     position: absolute;
     left:35%;
-    top: -5%;
+    top: 0%;
     z-index: 2000;
     font-weight: bold;
     font-size: 20px;
     transform: rotateZ(210deg) rotateX(183deg) rotateY(-203deg) skew(37deg);
     cursor: pointer;
     border-bottom: 1px solid #fff;
+    transition:top 0.5s ease-in-out;
 }
 .bpb_orderlist,.bpb_order_resultlist{
     position: absolute;
@@ -81,6 +140,8 @@ input[type='text']{
     left: 0;
     right: 0;
     cursor: pointer;
+    top: 10%;
+    transition:top 0.1s ease-in-out;
 }
 .bpb_order_item:hover{
     width: calc(0.7*260px);