完成音频、视频、图片详情页面模板

src/pages/NewsViewDetail/NewsViewDetailAudio.vue

@@ -1,24 +1,24 @@
 <template>
-    <div>
-        <Header />
-        <Nav :navs="navs" />
-        <div class="container">
-            <div class="title">{{ title }}</div>
-            <div class="player" v-show="playFileId">
-                <div class="video">
-                    <video ref="videoPlayer" controls="controls" controlslist="nodownload" :src="getSrc" :poster="getPosterSrc"></video>
-                </div>
-                <div class="list">
-                    <div class="play-title">目录</div>
-                    <div class="play-buttons">
-                        <a href="javascript:void(0)" v-for="(file, index) in fileList" :class="{ 'active': file.contentFileFileId === playFileId }" :key="index" @click="onVideoPlayClick(file)">{{ index + 1 }}</a>
-                    </div>
-                </div>
-            </div>
+  <div>
+    <Header/>
+    <Nav :navs="navs"/>
+    <div class="container">
+      <div class="title">{{ title }}</div>
+      <div class="player" v-show="playFileId">
+        <div class="video">
+          <video ref="videoPlayer" controls="controls" controlslist="nodownload" :src="getSrc" :poster="getPosterSrc"></video>
         </div>
-        <Footer />
-        <loading v-show="isLoading" />
+        <div class="list">
+          <div class="play-title">目录</div>
+          <div class="play-buttons">
+            <a href="javascript:void(0)" v-for="(file, index) in fileList" :class="{ 'active': file.contentFileFileId === playFileId }" :key="index" @click="onVideoPlayClick(file)">{{ index + 1 }}</a>
+          </div>
+        </div>
+      </div>
     </div>
+    <Footer/>
+    <loading v-show="isLoading"/>
+  </div>
 </template>
 
 <script>
@@ -30,144 +30,159 @@ import Nav from '../../component/Nav'
 import axios from 'axios'
 
 export default {
-    name: 'NewsViewDetailAudio',
-    components: {
-        Header,
-        Footer,
-        Loading,
-        Nav
-    },
-    data() {
-        return {
-            isLoading: false,
-            navs: [
-                {
-                    to: this.$route.query.navPath,
-                    name: this.$route.query.navTitle
-                },
-                {
-                    name: '详情'
-                }
-            ],
-            title: '',
-            playFileId: '',
-            coverFileId: '',
-            fileList: []
+  name: 'NewsViewDetailAudio',
+  components: {
+    Header,
+    Footer,
+    Loading,
+    Nav
+  },
+  data () {
+    return {
+      isLoading: false,
+      navs: [
+        {
+          to: this.$route.query.navPath,
+          name: this.$route.query.navTitle
+        },
+        {
+          name: '详情'
         }
-    },
-    methods: {
-        onVideoPlayClick(file) {
-            this.playFileId = file.contentFileFileId
-        },
-        init() {
-            let vueSelf = this;
-            vueSelf.isLoading = true;
-            axios.get(`${common.url}app/newscontent/getnewscontentbyidrelease/${this.$route.params.newsContentId}`).then(resp => {
-                let data = resp.data;
-                vueSelf.title = data.newsContentTitle;
-                vueSelf.playFileId = data.fileList[0].contentFileFileId;
-                if(data.newsContentCoverList.length > 0 && 
-                    data.newsContentCoverList[0].contentCoverId) {
-                    vueSelf.coverFileId = data.newsContentCoverList[0].contentCoverId
-                }
-                vueSelf.fileList = data.fileList;
-            }).catch(resp => {
-                console.error(resp)
-            }).finally(() => {
-                vueSelf.isLoading = false
-            })
-        }
-    },
-    computed: {
-        getSrc() {
-            return `${common.url}route/file/download/true/${this.playFileId}`
-        },
-        getPosterSrc() {
-            return this.coverFileId ? `${common.url}route/file/download/true/${this.coverFileId}` : `static/banner/culture/banner.jpg`
-        },
-    },
-    mounted() {
-        this.init();
+      ],
+      title: '',
+      playFileId: '',
+      coverFileId: '',
+      fileList: []
     }
+  },
+  methods: {
+    onVideoPlayClick (file) {
+      this.playFileId = file.contentFileFileId
+    },
+    init () {
+      let vueSelf = this
+      vueSelf.isLoading = true
+      axios.get(`${common.url}app/newscontent/getnewscontentbyidrelease/${this.$route.params.newsContentId}`).then(resp => {
+        let data = resp.data
+        vueSelf.title = data.newsContentTitle
+        vueSelf.playFileId = data.fileList[0].contentFileFileId
+        if (data.newsContentCoverList.length > 0 &&
+          data.newsContentCoverList[0].contentCoverId) {
+          vueSelf.coverFileId = data.newsContentCoverList[0].contentCoverId
+        }
+        vueSelf.fileList = data.fileList
+      }).catch(resp => {
+        console.error(resp)
+      }).finally(() => {
+        vueSelf.isLoading = false
+      })
+    }
+  },
+  computed: {
+    getSrc () {
+      return `${common.url}route/file/download/true/${this.playFileId}`
+    },
+    getPosterSrc () {
+      return this.coverFileId ? `${common.url}route/file/download/true/${this.coverFileId}` : `static/poster-audio.jpeg`
+    }
+  },
+  mounted () {
+    this.init()
+  }
 }
 </script>
 
 <style lang="stylus" scoped>
 .container
-    width 100%
-    min-height 450px
-    margin 0 auto
+  width 100%
+  min-height 450px
+  margin 0 auto
+  display flex
+  flex-direction column
+  align-items center
+  font-family '宋体'
+  background-color #3e3e3e
+
+  .title
+    font-size 20px
+    color #fff
+    font-weight normal
+    line-height 35px
+    text-align center
+    padding 10px 0
+
+  .player
     display flex
-    flex-direction column
-    align-items center
-    font-family '宋体'
-    background-color #3e3e3e
-    .title
-        font-size 20px
-        color #fff
-        font-weight normal
-        line-height 35px
+    justify-content center
+
+    .video
+      video
+        width 100%
+        height 100%
+        background-color #000
+        outline none
+
+    .list
+      background-color #343434
+      display flex
+      flex-direction column
+
+      .play-title
+        font-size 18px
+        color #f9f6f6
         text-align center
-        padding 10px 0
-    .player
+        border-bottom 2px solid #797777
+        padding 10px
+
+      .play-buttons
         display flex
-        justify-content center
-        .video
-            video
-                width 100%
-                height 100%
-                background-color #000
-                outline none
-        .list
-            background-color #343434
-            display flex
-            flex-direction column
-            .play-title
-                font-size 18px
-                color #f9f6f6
-                text-align center
-                border-bottom 2px solid #797777
-                padding 10px
-            .play-buttons
-                display flex
-                flex-wrap wrap
-                padding 5px 0 5px 5px
-                a
-                    width 44px
-                    height 34px
-                    line-height 34px
-                    text-align center
-                    background-color #3a3a3a
-                    color #FFF
-                    margin 0 5px 5px 0
-                a:hover
-                        background-color #A0333B
-                .active
-                    background-color #A0333B
+        flex-wrap wrap
+        padding 5px 0 5px 5px
+
+        a
+          width 44px
+          height 34px
+          line-height 34px
+          text-align center
+          background-color #3a3a3a
+          color #FFF
+          margin 0 5px 5px 0
+
+        a:hover
+          background-color #A0333B
+
+        .active
+          background-color #A0333B
+
 @media (min-width: 1200px)
-    .title
-        width 1200px
-    .player 
-        width 1200px
-        flex-direction row
-        
-        .video
-            width 800px
-            height 600px
-        .list
-            width 300px
-            min-height 600px
+  .title
+    width 1200px
+
+  .player
+    width 1200px
+    flex-direction row
+
+    .video
+      width 800px
+      height 600px
+
+    .list
+      width 300px
+      min-height 600px
+
 @media (max-width: 1200px)
-    .title
-        width 600px
-    .player
-        width 600px
-        flex-direction column
-        
-        .video
-            width 100%
-            height 450px
-        .list
-            width 100%
-            min-height 150px
-</style>
+  .title
+    width 600px
+
+  .player
+    width 600px
+    flex-direction column
+
+    .video
+      width 100%
+      height 450px
+
+    .list
+      width 100%
+      min-height 150px
+</style>

src/pages/NewsViewDetail/NewsViewDetailImage.vue

@@ -1,26 +1,28 @@
 <template>
-    <div>
-        <Header />
-        <Nav :navs="navs" />
-        <div class="container">
-            <div class="title">{{ title }}</div>
-            <div class="swiper-container-outer">
-                <swiper ref="swiperMain" class="swiper-outer" v-if="fileList.length > 0" :options="swiperOptions">
-                    <swiper-slide class="swiper-box" v-for="(file, index) in fileList" :key="index">
-                        <img alt="暂无图片" :src="getSrc(file)">
-                    </swiper-slide>
-                    <div class="swiper-pagination" slot="pagination"></div>
-                </swiper>
-                <swiper ref="swiperThumbs" class="swiper-thumbs" :options="swiperOptionThumbs">
-                    <swiper-slide class="swiper-box" v-for="(file, index) in fileList" :key="index">
-                        <img alt="暂无图片" class="banner-img" :src="getSrc(file)">
-                    </swiper-slide>
-                </swiper>
-            </div>
-        </div>
-        <Footer />
-        <loading v-show="isLoading" />
+  <div>
+    <Header/>
+    <Nav :navs="navs"/>
+    <div class="container">
+      <div class="title">{{ title }}</div>
+      <div class="swiper-container-outer">
+        <swiper ref="swiperMain" class="swiper-outer" :options="swiperOptionsMain">
+          <swiper-slide class="swiper-box" v-for="(file, index) in fileList" v-if="fileList.length > 0" :key="index">
+            <img alt="暂无图片" :src="getSrc(file)">
+          </swiper-slide>
+          <div class="swiper-pagination" slot="pagination"></div>
+          <div class="swiper-button-prev swiper-button-white" slot="button-prev" @click="onSwiperMainSlidePrev()"></div>
+          <div class="swiper-button-next swiper-button-white" slot="button-next" @click="onSwiperMainSlideNext()"></div>
+        </swiper>
+        <swiper ref="swiperThumbs" class="swiper-thumbs" :options="swiperOptionThumbs">
+          <swiper-slide class="swiper-box" v-for="(file, index) in fileList" v-if="fileList.length > 0" :key="'s_'+ index">
+            <img alt="暂无图片" class="banner-img" :src="getSrc(file)">
+          </swiper-slide>
+        </swiper>
+      </div>
     </div>
+    <Footer/>
+    <loading v-show="isLoading"/>
+  </div>
 </template>
 
 <script>
@@ -32,139 +34,173 @@ import Nav from '../../component/Nav'
 import axios from 'axios'
 
 export default {
-    name: 'NewsViewDetailImage',
-    components: {
-        Header,
-        Footer,
-        Loading,
-        Nav
-    },
-    data() {
-        return {
-            isLoading: false,
-            navs: [
-                {
-                    to: this.$route.query.navPath,
-                    name: this.$route.query.navTitle
-                },
-                {
-                    name: '详情'
-                }
-            ],
-            title: '',
-            swiperOptions: {
-                pagination: '.swiper-pagination',
-                paginationClickable: true,
-                loop: true,
-                loopedSlides: 8,
-                spaceBetween: 10,
-                autoplay: 3000,
-                navigation: {
-                    nextEl: '.swiper-button-next',
-                    prevEl: '.swiper-button-prev'
-                }
-            },
-            swiperOptionThumbs: {
-                loop: true,
-                spaceBetween: 10,
-                centeredSlides: true,
-                slidesPerView: 4,
-                touchRatio: 1,
-                slideToClickedSlide: true,
-            },
-            fileList: []
-        }
-    },
-    methods: {
-        getSrc(file) {
-            return `${common.url}route/file/download/false/${file.contentFileFileId}`
+  name: 'NewsViewDetailImage',
+  components: {
+    Header,
+    Footer,
+    Loading,
+    Nav
+  },
+  data () {
+    let vueSelf = this
+    return {
+      isLoading: false,
+      navs: [
+        {
+          to: this.$route.query.navPath,
+          name: this.$route.query.navTitle
         },
-        init() {
-            let vueSelf = this;
-            vueSelf.isLoading = true;
-            axios.get(`${common.url}app/newscontent/getnewscontentbyidrelease/${this.$route.params.newsContentId}`).then(resp => {
-                let data = resp.data;
-                vueSelf.title = data.newsContentTitle;
-                vueSelf.fileList = data.fileList;
-                vueSelf.$nextTick(() => {
-                    const swiperMain = vueSelf.$refs.swiperMain.swiper
-                    const swiperThumbs = vueSelf.$refs.swiperThumbs.swiper
-                    console.log(vueSelf.$refs)
-                    swiperMain.controller.control = swiperThumbs
-                    swiperThumbs.controller.control = swiperMain
-                })
-            }).catch(resp => {
-                console.error(resp)
-            }).finally(() => {
-                vueSelf.isLoading = false
-            })
+        {
+          name: '详情'
         }
-    },
-    computed: {
-    },
-    mounted() {
-        
-        this.init();
+      ],
+      title: '',
+      swiperMain: null,
+      swiperOptionsMain: {
+        pagination: '.swiper-pagination',
+        paginationClickable: true,
+        loop: false,
+        loopedSlides: 0,
+        spaceBetween: 10,
+        autoplay: 3000,
+        navigation: {
+          nextEl: '.swiper-button-next',
+          prevEl: '.swiper-button-prev'
+        },
+        onSlideChangeStart (swiper) {
+          if (vueSelf.swiperThumbs) {
+            vueSelf.swiperThumbs.slideTo(swiper.activeIndex, 300, false)
+          }
+        }
+      },
+      swiperThumbs: null,
+      swiperOptionThumbs: {
+        loop: false,
+        loopedSlides: 0,
+        spaceBetween: 10,
+        centeredSlides: true,
+        slidesPerView: 4,
+        touchRatio: 1,
+        slideToClickedSlide: true,
+        watchSlidesVisibility: true,
+        onSlideChangeStart (swiper) {
+          if (vueSelf.swiperMain) {
+            vueSelf.swiperMain.slideTo(swiper.activeIndex, 300, false)
+          }
+        }
+      },
+      fileList: []
     }
+  },
+  methods: {
+    onSwiperMainSlidePrev () {
+      if (this.swiperMain) {
+        this.swiperMain.slidePrev()
+      }
+    },
+    onSwiperMainSlideNext () {
+      if (this.swiperMain) {
+        this.swiperMain.slideNext()
+      }
+    },
+    getSrc (file) {
+      return `${common.url}route/file/download/false/${file.contentFileFileId}`
+    },
+    init () {
+      let vueSelf = this
+      vueSelf.isLoading = true
+      axios.get(`${common.url}app/newscontent/getnewscontentbyidrelease/${this.$route.params.newsContentId}`).then(resp => {
+        let data = resp.data
+        vueSelf.title = data.newsContentTitle
+        vueSelf.fileList = data.fileList
+        setTimeout(() => {
+          vueSelf.swiperMain = vueSelf.$refs.swiperMain.swiper
+          vueSelf.swiperThumbs = vueSelf.$refs.swiperThumbs.swiper
+        }, 1000)
+      }).catch(resp => {
+        console.error(resp)
+      }).finally(() => {
+        vueSelf.isLoading = false
+      })
+    }
+  },
+  computed: {
+  },
+  mounted () {
+    this.init()
+  }
 }
 </script>
 
 <style lang="stylus" scoped>
 .container
-    width 100%
-    min-height 450px
-    margin 0 auto
-    display flex
-    flex-direction column
-    align-items center
-    font-family '宋体'
-    background-color #5b5b5b
-    .title
-        font-size 20px
-        color #fff
-        font-weight normal
-        line-height 35px
-        text-align center
-        padding 10px 0
-    .swiper-container-outer
-        position relative
-        box-sizing border-box
-        background-color #3e3e3e
-        padding 10px
-        .swiper-outer
-            width 1180px
-            height 500px
-            background-color #000
-            .swiper-box
-                cursor pointer
-            img
-                width 100%
-                height 100%
-                object-fit scale-down
-        .swiper-thumbs
-            height 200px
-            box-sizing border-box
-            margin-top 10px
-            .swiper-box
-                width 25%
-                height 100%
-                opacity 0.4
-                cursor pointer
-            .swiper-slide-active
-                opacity 1
-            img
-                width 100%
-                height 100%
-                background-color #000
-                object-fit scale-down
+  width 100%
+  min-height 450px
+  margin 0 auto
+  display flex
+  flex-direction column
+  align-items center
+  font-family '宋体'
+  background-color #5b5b5b
+
+  .title
+    font-size 20px
+    color #fff
+    font-weight normal
+    line-height 35px
+    text-align center
+    padding 10px 0
+
+  .swiper-container-outer
+    position relative
+    box-sizing border-box
+    background-color #3e3e3e
+    padding 10px
+
+    .swiper-outer
+      width 1180px
+      height 500px
+      background-color #000
+
+      .swiper-box
+        cursor pointer
+
+      img
+        width 100%
+        height 100%
+        object-fit scale-down
+
+    .swiper-thumbs
+      height 200px
+      box-sizing border-box
+      margin-top 10px
+
+      .swiper-box
+        width 25%
+        height 100%
+        opacity 0.4
+        cursor pointer
+
+      .swiper-slide-active
+        opacity 1
+
+      img
+        width 100%
+        height 100%
+        background-color #000
+        object-fit scale-down
+
 @media (min-width: 1200px)
-    .title
-        width 1200px
-    .swiper-container-outer
-        width 1200px
+  .title
+    width 1200px
+
+  .swiper-container-outer
+    width 1200px
+
 @media (max-width: 1200px)
-    .title
-        width 600px
-    .swiper-container-outer
-        width 600px
-</style>
+  .title
+    width 600px
+
+  .swiper-container-outer
+    width 600px
+</style>

src/pages/NewsViewDetail/NewsViewDetailVideo.vue

@@ -1,24 +1,24 @@
 <template>
-    <div>
-        <Header />
-        <Nav :navs="navs" />
-        <div class="container">
-            <div class="title">{{ title }}</div>
-            <div class="player" v-show="playFileId">
-                <div class="video">
-                    <video ref="videoPlayer" controls="controls" controlslist="nodownload" :src="getSrc" :poster="getPosterSrc"></video>
-                </div>
-                <div class="list">
-                    <div class="play-title">目录</div>
-                    <div class="play-buttons">
-                        <a href="javascript:void(0)" v-for="(file, index) in fileList" :class="{ 'active': file.contentFileFileId === playFileId }" :key="index" @click="onVideoPlayClick(file)">{{ index + 1 }}</a>
-                    </div>
-                </div>
-            </div>
+  <div>
+    <Header/>
+    <Nav :navs="navs"/>
+    <div class="container">
+      <div class="title">{{ title }}</div>
+      <div class="player" v-show="playFileId">
+        <div class="video">
+          <video ref="videoPlayer" controls="controls" controlslist="nodownload" :src="getSrc" :poster="getPosterSrc"></video>
         </div>
-        <Footer />
-        <loading v-show="isLoading" />
+        <div class="list">
+          <div class="play-title">目录</div>
+          <div class="play-buttons">
+            <a href="javascript:void(0)" v-for="(file, index) in fileList" :class="{ 'active': file.contentFileFileId === playFileId }" :key="index" @click="onVideoPlayClick(file)">{{ index + 1 }}</a>
+          </div>
+        </div>
+      </div>
     </div>
+    <Footer/>
+    <loading v-show="isLoading"/>
+  </div>
 </template>
 
 <script>
@@ -30,144 +30,159 @@ import Nav from '../../component/Nav'
 import axios from 'axios'
 
 export default {
-    name: 'NewsViewDetailVideo',
-    components: {
-        Header,
-        Footer,
-        Loading,
-        Nav
-    },
-    data() {
-        return {
-            isLoading: false,
-            navs: [
-                {
-                    to: this.$route.query.navPath,
-                    name: this.$route.query.navTitle
-                },
-                {
-                    name: '详情'
-                }
-            ],
-            title: '',
-            playFileId: '',
-            coverFileId: '',
-            fileList: []
+  name: 'NewsViewDetailVideo',
+  components: {
+    Header,
+    Footer,
+    Loading,
+    Nav
+  },
+  data () {
+    return {
+      isLoading: false,
+      navs: [
+        {
+          to: this.$route.query.navPath,
+          name: this.$route.query.navTitle
+        },
+        {
+          name: '详情'
         }
-    },
-    methods: {
-        onVideoPlayClick(file) {
-            this.playFileId = file.contentFileFileId
-        },
-        init() {
-            let vueSelf = this;
-            vueSelf.isLoading = true;
-            axios.get(`${common.url}app/newscontent/getnewscontentbyidrelease/${this.$route.params.newsContentId}`).then(resp => {
-                let data = resp.data;
-                vueSelf.title = data.newsContentTitle;
-                vueSelf.playFileId = data.fileList[0].contentFileFileId;
-                if(data.newsContentCoverList.length > 0 && 
-                    data.newsContentCoverList[0].contentCoverId) {
-                    vueSelf.coverFileId = data.newsContentCoverList[0].contentCoverId
-                }
-                vueSelf.fileList = data.fileList;
-            }).catch(resp => {
-                console.error(resp)
-            }).finally(() => {
-                vueSelf.isLoading = false
-            })
-        }
-    },
-    computed: {
-        getSrc() {
-            return `${common.url}route/file/download/true/${this.playFileId}`
-        },
-        getPosterSrc() {
-            return this.coverFileId ? `${common.url}route/file/download/true/${this.coverFileId}` : `static/banner/culture/banner.jpg`
-        },
-    },
-    mounted() {
-        this.init();
+      ],
+      title: '',
+      playFileId: '',
+      coverFileId: '',
+      fileList: []
     }
+  },
+  methods: {
+    onVideoPlayClick (file) {
+      this.playFileId = file.contentFileFileId
+    },
+    init () {
+      let vueSelf = this
+      vueSelf.isLoading = true
+      axios.get(`${common.url}app/newscontent/getnewscontentbyidrelease/${this.$route.params.newsContentId}`).then(resp => {
+        let data = resp.data
+        vueSelf.title = data.newsContentTitle
+        vueSelf.playFileId = data.fileList[0].contentFileFileId
+        if (data.newsContentCoverList.length > 0 &&
+          data.newsContentCoverList[0].contentCoverId) {
+          vueSelf.coverFileId = data.newsContentCoverList[0].contentCoverId
+        }
+        vueSelf.fileList = data.fileList
+      }).catch(resp => {
+        console.error(resp)
+      }).finally(() => {
+        vueSelf.isLoading = false
+      })
+    }
+  },
+  computed: {
+    getSrc () {
+      return `${common.url}route/file/download/true/${this.playFileId}`
+    },
+    getPosterSrc () {
+      return this.coverFileId ? `${common.url}route/file/download/true/${this.coverFileId}` : `static/poster-video.jpeg`
+    }
+  },
+  mounted () {
+    this.init()
+  }
 }
 </script>
 
 <style lang="stylus" scoped>
 .container
-    width 100%
-    min-height 450px
-    margin 0 auto
+  width 100%
+  min-height 450px
+  margin 0 auto
+  display flex
+  flex-direction column
+  align-items center
+  font-family '宋体'
+  background-color #3e3e3e
+
+  .title
+    font-size 20px
+    color #fff
+    font-weight normal
+    line-height 35px
+    text-align center
+    padding 10px 0
+
+  .player
     display flex
-    flex-direction column
-    align-items center
-    font-family '宋体'
-    background-color #3e3e3e
-    .title
-        font-size 20px
-        color #fff
-        font-weight normal
-        line-height 35px
+    justify-content center
+
+    .video
+      video
+        width 100%
+        height 100%
+        background-color #000
+        outline none
+
+    .list
+      background-color #343434
+      display flex
+      flex-direction column
+
+      .play-title
+        font-size 18px
+        color #f9f6f6
         text-align center
-        padding 10px 0
-    .player
+        border-bottom 2px solid #797777
+        padding 10px
+
+      .play-buttons
         display flex
-        justify-content center
-        .video
-            video
-                width 100%
-                height 100%
-                background-color #000
-                outline none
-        .list
-            background-color #343434
-            display flex
-            flex-direction column
-            .play-title
-                font-size 18px
-                color #f9f6f6
-                text-align center
-                border-bottom 2px solid #797777
-                padding 10px
-            .play-buttons
-                display flex
-                flex-wrap wrap
-                padding 5px 0 5px 5px
-                a
-                    width 44px
-                    height 34px
-                    line-height 34px
-                    text-align center
-                    background-color #3a3a3a
-                    color #FFF
-                    margin 0 5px 5px 0
-                a:hover
-                        background-color #A0333B
-                .active
-                    background-color #A0333B
+        flex-wrap wrap
+        padding 5px 0 5px 5px
+
+        a
+          width 44px
+          height 34px
+          line-height 34px
+          text-align center
+          background-color #3a3a3a
+          color #FFF
+          margin 0 5px 5px 0
+
+        a:hover
+          background-color #A0333B
+
+        .active
+          background-color #A0333B
+
 @media (min-width: 1200px)
-    .title
-        width 1200px
-    .player 
-        width 1200px
-        flex-direction row
-        
-        .video
-            width 800px
-            height 600px
-        .list
-            width 300px
-            min-height 600px
+  .title
+    width 1200px
+
+  .player
+    width 1200px
+    flex-direction row
+
+    .video
+      width 800px
+      height 600px
+
+    .list
+      width 300px
+      min-height 600px
+
 @media (max-width: 1200px)
-    .title
-        width 600px
-    .player
-        width 600px
-        flex-direction column
-        
-        .video
-            width 100%
-            height 450px
-        .list
-            width 100%
-            min-height 150px
-</style>
+  .title
+    width 600px
+
+  .player
+    width 600px
+    flex-direction column
+
+    .video
+      width 100%
+      height 450px
+
+    .list
+      width 100%
+      min-height 150px
+</style>