Etusivu Tutki Apua
Rekisteröidy Kirjaudu sisään
YQ-August
/
yzHY
1
0
Fork 0
Tiedostot Ongelmat 0 Pull-pyynnöt 0 Wiki
Puu: 43c8365bd3
Haarat Tagit
yzHY
/
zhgHy
/
view
/
video - 副本.html

video - 副本.html 4.1 KB
Historia Raaka

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100 
  1. <!DOCTYPE html>
    2. 

  2. <html>
    3. 

  3. 	<head>
    4. 

  4. 		<meta charset="UTF-8">
    5. 

  5. 		<meta name="renderer" content="webkit">
    6. 

  6. 		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    7. 

  7. 		<meta http-equiv="pragma" content="no-cache">
    8. 

  8. 		<meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
    9. 

  9. 		<meta http-equiv="expires" content="0">
    10. 

  10. 		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    11. 

  11. 		<link rel="stylesheet" href="../css/index.css">
    12. 

  12. 		<link rel="stylesheet" href="../css/style.css">
    13. 

  13. 		<link rel="stylesheet" href="../css/iconfont.css">
    14. 

  14. 		<script src="../js/vue.min.js"></script>
    15. 

  15. 		<script src="../js/index.js"></script>
    16. 

  16. 		<script src="../js/jquery.min.js"></script>
    17. 

  17. 		<style>
    18. 

  18. 			.toolBtn{
    19. 

  19. 				cursor: pointer;
    20. 

  20. 				color: #000;
    21. 

  21. 				border: 1px solid #ccc;
    22. 

  22. 				background-color: #f8f8f8;
    23. 

  23. 			}
    24. 

  24. 			.toolBtn:hover{
    25. 

  25. 				color:#0068ff;
    26. 

  26. 			}
    27. 

  27. 			.leiBox{
    28. 

  28. 				position: absolute;
    29. 

  29. 				left: 0;
    30. 

  30. 				transform: translateY(30%);
    31. 

  31. 				width: 100%;
    32. 

  32. 				color: #6b6b6b;
    33. 

  33. 				text-align: center;
    34. 

  34. 				background-color: #f8f8f8;
    35. 

  35. 				border: 1px solid #ccc;
    36. 

  36. 				z-index: 444;
    37. 

  37. 			}
    38. 

  38. 			.leiBox>div{
    39. 

  39. 				cursor: pointer;
    40. 

  40. 			}
    41. 

  41. 			.leiBox .act{
    42. 

  42. 				color: #fff;
    43. 

  43. 				background-color: #0068ff;
    44. 

  44. 			}
    45. 

  45. 			.videoBg {
    46. 

  46. 				border: 1px solid rgba(232, 232, 232, 0.4);
    47. 

  47. 				background-image: url(../img/novideo.png);
    48. 

  48. 				background-size: 100% 100%;
    49. 

  49. 			}
    50. 

  50. 		</style>
    51. 

  51. 	</head>
    52. 

  52. 	<body>
    53. 

  53. 		<div id="app" :style="'font-size:'+fontS+'px;width:1920px;height:1080px;overflow:auto;'">
    54. 

  54. 			<div :style="'width: 100%;height: 100%;padding:'+gutter+'px;'" class="flex">
    55. 

  55. 				<div class="modelBg" :style="'width: '+(gutter*30)+'px;padding:'+gutter+'px;overflow:auto;'">
    56. 

  56. 					<div :style="'font-size:'+(fontS*0.75)+'px;font-weight:bold;'">船舶列表</div>
    57. 

  57. 					<div v-for="(item,index) in shipLi" :key="index" :style="'padding:'+(gutter*0.6)+'px '+gutter+'px;color:#e6e6e6;'">
    58. 

  58. 						<div class="flex align-center yz_cursor">
    59. 

  59. 							<div class="iconfont icon-jia"></div>
    60. 

  60. 							<div class="iconfont icon-chuanbo"
    61. 

  61. 								:style="'margin:0 '+(gutter*0.8)+'px;color:'+(item.status == 1?'#55aaff':'#afafaf')+';font-size:'+(fontS*0.8)+'px;'"></div>
    62. 

  62. 							<div :style="'font-size:'+(fontS*0.7)+'px;'">{{item.dev_name}}</div>
    63. 

  63. 						</div>
    64. 

  64. 						<div :style="'font-size:'+(fontS*0.65)+'px;padding-left:'+gutter*2+'px;'" v-if="index == 0" >
    65. 

  65. 							<div v-for="(subit,subind) in ['驾驶室','机舱','左舷','右舷']" :key="subind"
    66. 

  66. 							 :style="'padding:'+(gutter*0.6)+'px '+gutter+'px;color:#e6e6e6;'"><i class="iconfont icon-shexiangtou" style="color:#0068ff;"></i>{{subit}}</div>
    67. 

  67. 						</div>
    68. 

  68. 					</div>
    69. 

  69. 				</div>
    70. 

  70. 				<div class="modelBg" :style="'width:calc(100% - '+(gutter+gutter*30)+'px);height:100%;margin-left:'+gutter+'px;padding:'+gutter*1.6+'px;'">
    71. 

  71. 					<div class="flex align-center" :style="'font-size:'+(fontS*0.8)+'px;'"  ref="toolBtn">
    72. 

  72. 						<div class="toolBtn" :style="'padding:'+gutter+'px '+gutter*1.3+'px;'" title="全部关闭">全部关闭</div>
    73. 

  73. 						<div :style="'position: relative;margin:0 '+gutter*1.6+'px;'">
    74. 

  74. 							<div class="toolBtn" @click="leiShow = !leiShow"
    75. 

  75. 								:style="'padding:'+gutter+'px '+gutter*1.3+'px;'" title="布局">{{leiLi[leiBar]}}</div>
    76. 

  76. 							<div class="leiBox" :style="'top: '+toolBtn+'px;'" v-if="leiShow">
    77. 

  77. 								<div :style="'padding:'+gutter+'px '+gutter*1.3+'px;'"
    78. 

  78. 									:class="leiBar == index?'act':''"
    79. 

  79. 									v-for="(item,index) in leiLi" :key="index" @click="changeLei(index)"
    80. 

  80. 									>{{item}}</div>
    81. 

  81. 							</div>
    82. 

  82. 						</div>
    83. 

  83. 						<div class="toolBtn" :style="'padding:'+gutter+'px '+gutter*1.3+'px;'" title="全屏">
    84. 

  84. 							<i :style="'font-size:'+fontS+'px;'" class="iconfont icon-fullScreen"></i>
    85. 

  85. 						</div>
    86. 

  86. 					</div>
    87. 

  87. 					<div :style="'height: calc(100% - 40px - '+gutter+'px);margin-top:'+gutter+'px;'" class="flex flex-wrap">
    88. 

  88. 						<div v-for="(item,index) in (leiBar+1)*(leiBar+1)" class="videoBg"
    89. 

  89. 							:style="'width:'+(100/(leiBar+1))+'%;height:'+(100/(leiBar+1))+'%;'">
    90. 

  90. 							<video src="../img/vido.mp4" autoplay style="width: 100%;height: 100%;" controls loop></video>
    91. 

  91. 						</div>
    92. 

  92. 					</div>
    93. 

  93. 				</div>
    94. 

  94. 			</div>
    95. 

  95. 		</div>
    96. 

  96. 		<script>
    97. 

  97. 			
    98. 

  98. 		</script>
    99. 

  99. 	</body>
    100. 

  100. </html>
    101.