提交 684204b2 authored 作者: xmn's avatar xmn

图标替换

上级 9dd9780b
<template>
<h1><a class="play-back" href="/courses/6437296339083591680/6437333685153824768/cont">&lt;</a>Sofia-战略管理</h1>
<h1><a class="play-back" href="/courses/6437296339083591680/6437333685153824768/cont"><i class="el-icon-arrow-left"></i></a>Sofia-战略管理</h1>
</template>
<style lang="scss" scoped>
......@@ -11,12 +11,9 @@ h1 {
}
.play-back {
position: absolute;
top: 10px;
top: 0;
left: 10px;
width: 40px;
height: 40px;
text-indent: -300px;
background: url(https://zws-imgs-pub.ezijing.com/static/build/learn-mba/2vu7tn.png) no-repeat 14px -329px;
color: #fff;
overflow: hidden;
}
</style>
<template>
<div class="right-content">
<p class="right-arrow">
<span>></span>
</p>
<div class="control-panel">
<ul class="tab-nav cl">
<li class="video-chapter current">章节</li>
<li class="video-jy">讲义</li>
</ul>
<div class="tab-content">
<div class="tab-pane">
<ul class="chapter-list">
<li class="chapter-item">
<h4>第一章 战略管理与竞争力</h4>
<ul class="knob-list">
<li class="knob-item current">
<div class="knob-progress"></div>
<i class="icon icon-pro" title="学习进度 5%"></i>
<a class="knob-name" href="">1.1 战略管理概述</a>
<i class="icon-play-chapter icon-play-video"></i>
</li>
<li class="knob-item">
<div class="knob-progress"></div>
<i class="icon icon-pro" title="学习进度 5%"></i>
<a class="knob-name" href="">战略管理第一章课后试题</a>
<i class="icon-play-chapter icon-play-exam"></i>
</li>
</ul>
</li>
</ul>
<ul class="jiangyi-list">
<li class="current">
<img src="https://img1.ezijing.com/curriculum/ppt/958dbedd5201f69068d8fe61e907d4dc.jpg" alt="" />
</li>
<li>
<img src="https://img1.ezijing.com/curriculum/ppt/d9bbc0df0179f47b4de7f833b592d869.jpg" alt="" />
</li>
</ul>
</div>
<i class="el-icon-arrow-right"></i>
</p>
<div class="control-panel">
<ul class="tab-nav cl">
<li class="video-chapter current">章节</li>
<li class="video-jy">讲义</li>
</ul>
<div class="tab-content">
<div class="tab-pane">
<ul class="chapter-list">
<li class="chapter-item">
<h4>第一章 战略管理与竞争力</h4>
<ul class="knob-list">
<li class="knob-item current">
<div class="knob-progress"></div>
<i class="icon icon-pro" title="学习进度 5%"></i>
<a class="knob-name" href="">1.1 战略管理概述</a>
<i class="el-icon el-icon-tickets"></i>
</li>
<li class="knob-item">
<div class="knob-progress"></div>
<i class="icon icon-pro" title="学习进度 5%"></i>
<a class="knob-name" href="">战略管理第一章课后试题</a>
<i class="el-icon el-icon-menu"></i>
</li>
</ul>
</li>
</ul>
<ul class="jiangyi-list">
<li class="current">
<img src="https://img1.ezijing.com/curriculum/ppt/958dbedd5201f69068d8fe61e907d4dc.jpg" alt="" />
</li>
<li>
<img src="https://img1.ezijing.com/curriculum/ppt/d9bbc0df0179f47b4de7f833b592d869.jpg" alt="" />
</li>
</ul>
</div>
</div>
</div>
</div>
</template>
......@@ -65,13 +65,14 @@
font-size: .875em;
color: #969696;
cursor: pointer;
span {
i {
position: absolute;
top: 50%;
left: 0;
width: 19px;
margin-top: -10px;
text-align: center;
color: #fff;
}
}
}
......@@ -199,28 +200,12 @@
}
}
/* 章节后面小图标的样式,总共有4种 */
.icon-play-chapter {
/* 章节后面小图标的样式 */
.el-icon {
display: inline-block;
position: absolute;
right: 13px;
top: 19px;
width: 14px;
height: 14px;
vertical-align: middle;
background: url(https://zws-imgs-pub.ezijing.com/static/build/learn-mba/3ZOzuU.png) no-repeat;
}
.icon-play-video {
background-position: 0 0
}
.icon-play-work {
background-position: 0 -37px
}
.icon-play-exam {
background-position: 0 -73px
}
.icon-play-read {
background-position: 0 -110px
}
/* 讲义列表样式 */
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论