|
|
@@ -1,19 +1,18 @@
|
|
|
<template>
|
|
|
- <li>
|
|
|
- <div class="v">
|
|
|
+ <li class="item-li">
|
|
|
+ <div class="v m300">
|
|
|
<!-- 上部分 -->
|
|
|
<a class="preview cover-preview" href="">
|
|
|
- <!-- item 左上角的奖牌 -->
|
|
|
+ <!-- item 左上角的奖牌 -->
|
|
|
<div class="medal"></div>
|
|
|
<div class="original"></div>
|
|
|
-
|
|
|
- <div class="border">/div>
|
|
|
+ <!-- 边框 -->
|
|
|
+ <div class="border"></div>
|
|
|
<!-- 背景图片 -->
|
|
|
<img src="//i1.hdslb.com/bfs/archive/a5383ac22cb31e24a5b7be56c9105a6ee1034ee8.jpg@320w_200h.webp">
|
|
|
<!-- 内容预览 -->
|
|
|
<div class="back">
|
|
|
- <div>
|
|
|
-
|
|
|
+ <div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 预览进度控制 -->
|
|
|
@@ -25,7 +24,7 @@
|
|
|
</div>
|
|
|
<!-- 视频时间 -->
|
|
|
<div class="x">
|
|
|
- <b class="x2"></b>
|
|
|
+ <b class="x2">12.00</b>
|
|
|
</div>
|
|
|
</a>
|
|
|
<!-- 下部分 -->
|
|
|
@@ -35,8 +34,7 @@
|
|
|
<span>
|
|
|
<i class="b-icon b-icon-v-play"></i>
|
|
|
38.6万
|
|
|
- </span>
|
|
|
- <span>
|
|
|
+ </span><span>
|
|
|
<i class="b-icon b-icon-v-dm"></i>
|
|
|
2594
|
|
|
</span>
|
|
|
@@ -53,5 +51,135 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<style lang="stylus" scoped>
|
|
|
-
|
|
|
+ .item-li
|
|
|
+ float left
|
|
|
+ margin 0 20px 20px 0
|
|
|
+ .v
|
|
|
+ position relative
|
|
|
+ width 160px
|
|
|
+ height 148px
|
|
|
+ font-size 12px
|
|
|
+ overflow hidden
|
|
|
+ .x
|
|
|
+ visibility visible
|
|
|
+ opacity 1
|
|
|
+ .cover-preview
|
|
|
+ position relative
|
|
|
+ .back
|
|
|
+ position absolute
|
|
|
+ top 0px
|
|
|
+ left 0px
|
|
|
+ width 100%
|
|
|
+ height 100%
|
|
|
+ opacity 0
|
|
|
+ z-index 0
|
|
|
+ .fore
|
|
|
+ position absolute
|
|
|
+ top 0px
|
|
|
+ left 0px
|
|
|
+ width 100%
|
|
|
+ height 100%
|
|
|
+ opacity 0
|
|
|
+ z-index 0
|
|
|
+ transition opacity .2s
|
|
|
+ background-color rgba(0,0,0,0.2)
|
|
|
+ .bar
|
|
|
+ margin 5px
|
|
|
+ height 2px
|
|
|
+ background-color rgba(255,255,255,0.4)
|
|
|
+ border-radius 1px
|
|
|
+ opacity 0
|
|
|
+ transition opacity .2s .3s
|
|
|
+ div
|
|
|
+ height 2px
|
|
|
+ border-radius 1px
|
|
|
+ .x
|
|
|
+ position absolute
|
|
|
+ z-index 4
|
|
|
+ top 0px
|
|
|
+ left 0px
|
|
|
+ bottom 0px
|
|
|
+ right 0px
|
|
|
+ line-height 20px
|
|
|
+ width 100%
|
|
|
+ height 100%
|
|
|
+ background rgba(0,0,0,0.2)
|
|
|
+ overflow hidden
|
|
|
+ transition .2s
|
|
|
+ border-top-left-radius 4px
|
|
|
+ .x2
|
|
|
+ position absolute
|
|
|
+ right 0
|
|
|
+ bottom 0px
|
|
|
+ margin 0 5px 0 5px
|
|
|
+ font-weight normal
|
|
|
+ font-family tahoma,arial,'宋体',sans-serif
|
|
|
+ color #fff
|
|
|
+ .preview
|
|
|
+ width 160px
|
|
|
+ height 100px
|
|
|
+ display block
|
|
|
+ overflow hidden
|
|
|
+ text-align center
|
|
|
+ transition .2s all linear
|
|
|
+ box-sizing border-box
|
|
|
+ z-index 0
|
|
|
+ border-radius 4px
|
|
|
+ -webkit-mask-image -webkit-radial-gradient(circle, white, black)
|
|
|
+ .medal
|
|
|
+ position absolute
|
|
|
+ left 0
|
|
|
+ top 0px
|
|
|
+ width 40px
|
|
|
+ height 24px
|
|
|
+ background url(../../assets/images/icons.png) no-repeat
|
|
|
+ z-index 5
|
|
|
+ pointer-events: none
|
|
|
+ background-position -849px -148px
|
|
|
+ transition opacity .2x
|
|
|
+ opacity 1
|
|
|
+ img
|
|
|
+ width 100%
|
|
|
+ height 100%
|
|
|
+ display block
|
|
|
+ margin 0 auto
|
|
|
+ outline 0
|
|
|
+ .t
|
|
|
+ margin-bottom 8px
|
|
|
+ padding-top 8px
|
|
|
+ height 20px
|
|
|
+ line-height 20px
|
|
|
+ transition all .2s linear
|
|
|
+ color #222
|
|
|
+ word-wrap break-word
|
|
|
+ word-break break-all
|
|
|
+ overflow hidden
|
|
|
+ text-align left
|
|
|
+ .i
|
|
|
+ margin 0
|
|
|
+ font-size 12px
|
|
|
+ line-height 12px
|
|
|
+ span
|
|
|
+ display inline-block
|
|
|
+ vertical-align top
|
|
|
+ color #99a2aa
|
|
|
+ width 80px
|
|
|
+ white-space nowrap
|
|
|
+ overflow hidden
|
|
|
+ text-overflow ellipsis
|
|
|
+ line-height 12px
|
|
|
+ height 14px
|
|
|
+ .b-icon
|
|
|
+ display inline-block
|
|
|
+ width 12px
|
|
|
+ height 12px
|
|
|
+ vertical-align middle
|
|
|
+ background url(../../assets/images/icons.png) no-repeat
|
|
|
+ vertical-align top
|
|
|
+ margin-right 5px
|
|
|
+ &.b-icon-v-play
|
|
|
+ background-position -282px -90px
|
|
|
+ &.b-icon-v-dm
|
|
|
+ background-position -282px -218px
|
|
|
+
|
|
|
</style>
|
lybenson