123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100 |
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <meta name="renderer" content="webkit">
- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
- <meta http-equiv="pragma" content="no-cache">
- <meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
- <meta http-equiv="expires" content="0">
- <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
- <link rel="stylesheet" href="../css/index.css">
- <link rel="stylesheet" href="../css/style.css">
- <link rel="stylesheet" href="../css/iconfont.css">
- <script src="../js/vue.min.js"></script>
- <script src="../js/index.js"></script>
- <script src="../js/jquery.min.js"></script>
- <style>
- .toolBtn{
- cursor: pointer;
- color: #000;
- border: 1px solid #ccc;
- background-color: #f8f8f8;
- }
- .toolBtn:hover{
- color:#0068ff;
- }
- .leiBox{
- position: absolute;
- left: 0;
- transform: translateY(30%);
- width: 100%;
- color: #6b6b6b;
- text-align: center;
- background-color: #f8f8f8;
- border: 1px solid #ccc;
- z-index: 444;
- }
- .leiBox>div{
- cursor: pointer;
- }
- .leiBox .act{
- color: #fff;
- background-color: #0068ff;
- }
- .videoBg {
- border: 1px solid rgba(232, 232, 232, 0.4);
- background-image: url(../img/novideo.png);
- background-size: 100% 100%;
- }
- </style>
- </head>
- <body>
- <div id="app" :style="'font-size:'+fontS+'px;width:1920px;height:1080px;overflow:auto;'">
- <div :style="'width: 100%;height: 100%;padding:'+gutter+'px;'" class="flex">
- <div class="modelBg" :style="'width: '+(gutter*30)+'px;padding:'+gutter+'px;overflow:auto;'">
- <div :style="'font-size:'+(fontS*0.75)+'px;font-weight:bold;'">船舶列表</div>
- <div v-for="(item,index) in shipLi" :key="index" :style="'padding:'+(gutter*0.6)+'px '+gutter+'px;color:#e6e6e6;'">
- <div class="flex align-center yz_cursor">
- <div class="iconfont icon-jia"></div>
- <div class="iconfont icon-chuanbo"
- :style="'margin:0 '+(gutter*0.8)+'px;color:'+(item.status == 1?'#55aaff':'#afafaf')+';font-size:'+(fontS*0.8)+'px;'"></div>
- <div :style="'font-size:'+(fontS*0.7)+'px;'">{{item.dev_name}}</div>
- </div>
- <div :style="'font-size:'+(fontS*0.65)+'px;padding-left:'+gutter*2+'px;'" v-if="index == 0" >
- <div v-for="(subit,subind) in ['驾驶室','机舱','左舷','右舷']" :key="subind"
- :style="'padding:'+(gutter*0.6)+'px '+gutter+'px;color:#e6e6e6;'"><i class="iconfont icon-shexiangtou" style="color:#0068ff;"></i>{{subit}}</div>
- </div>
- </div>
- </div>
- <div class="modelBg" :style="'width:calc(100% - '+(gutter+gutter*30)+'px);height:100%;margin-left:'+gutter+'px;padding:'+gutter*1.6+'px;'">
- <div class="flex align-center" :style="'font-size:'+(fontS*0.8)+'px;'" ref="toolBtn">
- <div class="toolBtn" :style="'padding:'+gutter+'px '+gutter*1.3+'px;'" title="全部关闭">全部关闭</div>
- <div :style="'position: relative;margin:0 '+gutter*1.6+'px;'">
- <div class="toolBtn" @click="leiShow = !leiShow"
- :style="'padding:'+gutter+'px '+gutter*1.3+'px;'" title="布局">{{leiLi[leiBar]}}</div>
- <div class="leiBox" :style="'top: '+toolBtn+'px;'" v-if="leiShow">
- <div :style="'padding:'+gutter+'px '+gutter*1.3+'px;'"
- :class="leiBar == index?'act':''"
- v-for="(item,index) in leiLi" :key="index" @click="changeLei(index)"
- >{{item}}</div>
- </div>
- </div>
- <div class="toolBtn" :style="'padding:'+gutter+'px '+gutter*1.3+'px;'" title="全屏">
- <i :style="'font-size:'+fontS+'px;'" class="iconfont icon-fullScreen"></i>
- </div>
- </div>
- <div :style="'height: calc(100% - 40px - '+gutter+'px);margin-top:'+gutter+'px;'" class="flex flex-wrap">
- <div v-for="(item,index) in (leiBar+1)*(leiBar+1)" class="videoBg"
- :style="'width:'+(100/(leiBar+1))+'%;height:'+(100/(leiBar+1))+'%;'">
- <video src="../img/vido.mp4" autoplay style="width: 100%;height: 100%;" controls loop></video>
- </div>
- </div>
- </div>
- </div>
- </div>
- <script>
-
- </script>
- </body>
- </html>
|