Views/Player/Index.cshtml

这里只显示每个文件的开头 60 行。登录后可以解锁完整代码。

微信扫码关注公众号，代码整理好后第一时间通知你。

@{
    Layout = "_LayoutVue";
    ViewData["Title"] = "播放器";
}
@section Styles{
    <link rel="stylesheet" href="~/lib/zplayer/css/zplayer.css" asp-append-version="true" />
    <link rel="stylesheet" href="~/css/player.css" asp-append-version="true" />
    <link rel="stylesheet" href="~/lis/css/lis.css" asp-append-version="true" />
    <style>
        #i-player {
            width: 100%;
        }
    </style>
}
<div class="container-abs" id="i-container">
    <div class="container-rel lisui-bkg-c1-y1-p1">

        <!-- 主体内容 -->
        <div class="bd-content" v-show="tabIndex==0">
            
        </div>
        <div class="bd-content" v-show="tabIndex==1">
            <div id="i-list" class="lisui-layout-vertical"></div>
        </div>
        <div class="bd-content" v-show="tabIndex==2">
            
        </div>

        <!-- 播放器 -->
        <div class="bd-player">
            <div id="i-player"></div>
        </div>

        <div class="bd-nav">
            <a class="nav-a" v-for="(item, index) in tabList" :key="index" v-on:click="tabChange(index)">
                <div :class="index==tabIndex?'nav-a-btn active':'nav-a-btn'">
                    <i :class="item.icon"></i>
                    <span>{{item.text}}</span>
                </div>
            </a>
        </div>
    </div>
</div>
@section Scripts{
    <script src="~/js/Pages/player.min.js" asp-append-version="true"></script>

    <script>
        var vm = new Vue({
            el: '#i-container'
            , data: {
                tabIndex: 1,
                tabList: [
                    { text: '啊这', icon: 'icon-music', path: '' },
                    { text: '音乐', icon: 'icon-headphones', path: '' },
                    { text: '我的', icon: 'icon-home', path: '' }
                ]
            }
            , computed: {}
            , methods: {
                tabChange(index) {