index.html

<link rel="stylesheet" href="./public/ext/bootstrap.min.css">
<script src="./public/ext/vue.min.js"></script>
<script src="./public/ext/hls.min.js"></script>
<script src="./public/ext/jquery.min.js"></script>
<script type="text/javascript" src="./public/ext/bootstrap.min.js"></script>
<script type="text/javascript" src="./public/ext/tongji.baidu.js"></script>

<div id="app" >
	<div style="position:fixed;width:100%;height:35%;z-index:999;background:rgb(0, 0, 0);">
		<!--style="position:fixed;width:100%;height:25%" style="background:#EEEEEE;"style="background:url(https://api.uomg.com/api/rand.img3?_t=)"-->
		
		<div style="text-align:center;width:100%;background:rgb(0, 0, 0);">
			<video id="video" controls style="height:100%;width:auto;" v-on:click="playvideo(detail_items[0])" v-bind:poster="video_bgimg || detail_items[0] && detail_items[0].vod_pic"></video>
		</div>

		<div style="width:100%;background:rgb(0, 0, 0);">

			<br/>
				
			<div class="btn-group btn-lg">
				<button type="button" class="btn dropdown-toggle btn-lg" data-toggle="dropdown">
					{{ hostlist[current_host_index].name }} <span class="caret"></span></button>
				<ul class="dropdown-menu" role="menu">
					<li v-for="(host,index) in hostlist" v-on:click="changehost(index)" class="btn btn-lg">{{ host.name }}</li>
				</ul>
			</div>

			<div class="btn-group btn-lg">
				<button type="button" class="btn dropdown-toggle btn-lg" data-toggle="dropdown">
					{{ type_name }} <span class="caret"></span></button>
				<ul class="dropdown-menu" role="menu">
					<li v-for="(item,index) in lists.class" v-on:click="getclasspage(item)"
						class="btn btn-lg">
						{{ item.cid || item.type_id }} {{ item.title || item.type_name }}</li>
				</ul>
			</div>

			<button v-if="!showlike" v-on:click="likeit()" class="btn btn-lg">收藏</button>

			<button :disabled="detail.page===1" v-on:click="getnextpage(1)" class="btn btn-lg text-warning">首页</button>
			<button :disabled="detail.page===1" v-on:click="getnextpage(detail.page-1)" class="btn btn-lg text-warning">上一页</button>
			<span :disabled="1" class="btn text-warning ">{{ detail.page }}/{{ detail.pagecount }}</span>
			<button :disabled="detail.page===detail.pagecount" v-on:click="getnextpage(parseInt(detail.page)+1)"
				class="btn btn-lg text-warning">下一页</button>
			<button :disabled="detail.page===detail.pagecount" v-on:click="getnextpage(detail.pagecount)"
				class="btn btn-lg text-warning">尾页</button>

			<button v-on:click="showmylike()" class="btn btn-lg">我的收藏 </button>

			<div class="btn btn-lg input-group">
				<!--<span v-if="!showlike" v-on:click="likeit()" class="input-group-addon btn btn-primary">收藏</span>
				<span v-on:click="showmylike()" class="input-group-addon btn btn-primary">我的收藏 </span>-->
				<input v-model="wd" v-bind:placeholder="tips || 请输入关键字" size="30" type='text' class="form-control input-lg">
				<span v-on:click="querypage" class="input-group-addon btn btn-lg btn-primary">搜索</span>
			</div>

			<!--<span class="alert alert-warning">提示：{{ tips }} </span>-->

		</div>

	</div>

	<div style="position:absolute;top:35%;width:100%;background:rgb(0, 0, 0);">

		<div v-for="(item,index) in detail_items" class="unit">
			
			<div style="float:left;padding:10px;width:50%;">
				<img v-on:click="playvideo(item)" v-bind:src="item.vod_pic" style="width:100%;height: fit-content;">
				<p class="text-warning text-nowrap">{{ item.vod_title || item.vod_name }}</p>
				<p class="text-warning">{{ item.category || item.type_name }} {{ item.vod_addtime || item.vod_time }}
					<button v-if="!showlike" v-on:click="likeit(item)" class="btn">收藏</button>
					<button v-else v-on:click="unlikeit(item)" class="btn">取消收藏</button>
				</p>
			</div>

		</div>

	</div>

</div>

<script src="./public/index.js"></script>