Skip to content

L
learn-online-pc
提交 401eca8b authored 作者: xmn's avatar xmn
浏览文件
操作

添加注释 按照css标准规范修改css 模块化

上级 56bd33f6
隐藏空白字符变更
内嵌 并排
正在显示 包含 344 行增加 和 238 行删除
client/project/elearning-node/pages/static/content.vue 0 → 100644
浏览文件 @ 401eca8b
<template>
<div class="play-content">
<div class="play-paper-body">
<div class="play-paper-title">
<div>
<h3>战略管理第一章课后试题</h3>
</div>
</div>
<div class="play-paper-content">
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
.play-content {
position: absolute;
top: 56px;
bottom: 0;
left: 0;
right: 0;
background-color: #e5e5e5;
overflow: auto;
}
.play-paper-body {
min-height: 500px;
margin: 25px;
padding: 15px 45px 25px;
color: #313131;
box-shadow: 0 0 2px rgba(0,0,0,.05);
background-color: #f2f2f2;
}
/* 标题 */
.play-paper-title {
margin: 0 10px;
text-align: center;
div {
display: inline-block;
padding-bottom: 3px;
border-bottom: 1px solid #707070;
}
h3 {
display: inline-block;
padding: 0 0 5px;
margin: 0;
font-size: 20px;
border-bottom: 3px solid #707070;
}
}
/* 正文 */
.play-chapter-content {
padding: 25px;
}
</style>
\ No newline at end of file
client/project/elearning-node/pages/static/header.vue
浏览文件 @ 401eca8b
<template> <template>
<div class="left-content"> <h1><a class="play-back" href="/courses/6437296339083591680/6437333685153824768/cont">&lt;</a>Sofia-战略管理</h1>
<h1><a class="play-back" href="/courses/6437296339083591680/6437333685153824768/cont">&lt;</a>Sofia-战略管理</h1>
</div>
</template> </template>
<script> <script>
...@@ -10,20 +8,11 @@ export default { ...@@ -10,20 +8,11 @@ export default {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.left-content { h1 {
position: absolute;
right: 350px;
top: 0;
left: 0;
bottom: 0;
min-width: 705px;
height: 100%;
}
h1{
line-height: 56px;
margin: 0; margin: 0;
text-align: center; line-height: 56px;
font-size: 20px; font-size: 20px;
text-align: center;
} }
.play-back { .play-back {
position: absolute; position: absolute;
...@@ -31,8 +20,8 @@ h1{ ...@@ -31,8 +20,8 @@ h1{
left: 10px; left: 10px;
width: 40px; width: 40px;
height: 40px; height: 40px;
overflow: hidden;
text-indent: -300px; text-indent: -300px;
background: url(https://zws-imgs-pub.ezijing.com/static/build/learn-mba/2vu7tn.png) no-repeat 14px -329px; background: url(https://zws-imgs-pub.ezijing.com/static/build/learn-mba/2vu7tn.png) no-repeat 14px -329px;
overflow: hidden;
} }
</style> </style>
client/project/elearning-node/pages/static/index.vue
浏览文件 @ 401eca8b
<template> <template>
<div class="play"> <div class="play">
<playHeader /> <playLeft />
<div class="right-content"> <playRight />
<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 current">
<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>
</div>
</div>
</div>
</div> </div>
</template> </template>
<script> <script>
import playHeader from './header.vue' import playLeft from './left.vue'
import playRight from './right.vue'
export default { export default {
components: { playHeader } components: { playLeft, playRight }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.play{ .play {
overflow: hidden;
position: fixed; position: fixed;
top: 0; top: 0;
z-index: 800; z-index: 800;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: #3f3f3f;
color: #a0a0a0; color: #a0a0a0;
} background-color: #3f3f3f;
.right-content { overflow: hidden;
position: absolute;
right: 0;
width: 350px;
z-index: 200;
background: #212121;
bottom: 0;
top: 0;
border-left: 19px solid #1b1b1b;
.right-arrow {
position: absolute;
left: -19px;
top: 0;
bottom: 0;
width: 19px;
height: 100%;
cursor: pointer;
color: #969696;
font-size: .875em;
span {
position: absolute;
top: 50%;
left: 0;
width: 19px;
margin-top: -10px;
text-align: center;
}
}
}
.control-panel {
height: 100%;
position: relative;
.tab-nav {
margin: 0;
padding: 15px 0;
border-bottom: 0;
background-color: #232323;
line-height: 1.6;
overflow: hidden;
li{
float: left;
line-height: 28px;
position: relative;
width: 50%;
padding: 0;
font-size: 16px;
text-align: center;
color: #909090;
list-style: none;
cursor: pointer;
&.current{
color: #b49441;
}
}
.video-jy {
border-left: 1px solid #3f3f3f;
}
}
.tab-content{
.tab-pane {
display: block;
height: 100%;
overflow: auto;
}
.chapter-list{
margin: 0;
padding: 0;
line-height: 1.6;
overflow: hidden;
}
.chapter-item{
h4 {
color: #b0b0b0;
padding: 10px 22px;
background-color: #2f2f2f;
}
}
}
.knob-list{
margin: 0;
padding: 0;
line-height: 1.6;
overflow: hidden;
li{
position: relative;
padding: 0 0 0 23px;
&.current {
background: #232323;
a{
color: #b49441;
}
}
&:before {
width: 18px;
height: 18px;
border-radius: 50%;
border: 2px solid #5b5b5b;
background: #5b5b5b;
position: absolute;
left: 13px;
top: 16px;
content: "";
display: block;
z-index: 10;
}
}
.knob-progress{
position: absolute;
top: 16px;
left: 13px;
z-index: 20;
display: none\0;
}
.icon-pro {
position: absolute;
width: 19px;
height: 19px;
border-radius: 9px;
top: 16px;
left: 23px;
z-index: 15;
display: none;
display: block\0;
}
.knob-name{
color: #909090;
font-size: .875em;
padding: 14px 35px 14px 20px;
text-decoration: none;
display: block;
cursor: pointer;
}
}
}
.icon-play-chapter {
display: inline-block;
vertical-align: middle;
width: 14px;
height: 14px;
background: url(https://zws-imgs-pub.ezijing.com/static/build/learn-mba/3ZOzuU.png) no-repeat;
position: absolute;
right: 13px;
top: 19px;
}
.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
}
.jiangyi-list{
padding: 8px 16px;
li{
padding: 8px 16px;
cursor: pointer;
list-style: none;
&.current {
background: #888;
}
img {
width: 100%;
}
}
} }
</style> </style>
client/project/elearning-node/pages/static/left.vue 0 → 100644
浏览文件 @ 401eca8b
<template>
<div class="left-content">
<playHeader />
<playContent />
</div>
</template>
<script>
import playHeader from './header.vue'
import playContent from './content.vue'
export default {
components: { playHeader, playContent }
}
</script>
<style lang="scss" scoped>
.left-content {
position: absolute;
right: 350px;
top: 0;
left: 0;
bottom: 0;
min-width: 705px;
height: 100%;
}
</style>
\ No newline at end of file
client/project/elearning-node/pages/static/right.vue 0 → 100644
浏览文件 @ 401eca8b
<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>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'playRight'
}
</script>
<style lang="scss" scoped>
.right-content {
position: absolute;
top: 0;
bottom: 0;
right: 0;
z-index: 200;
width: 350px;
background: #212121;
border-left: 19px solid #1b1b1b;
/* 箭头 */
.right-arrow {
position: absolute;
top: 0;
left: -19px;
bottom: 0;
width: 19px;
height: 100%;
font-size: .875em;
color: #969696;
cursor: pointer;
span {
position: absolute;
top: 50%;
left: 0;
width: 19px;
margin-top: -10px;
text-align: center;
}
}
}
.control-panel {
position: relative;
height: 100%;
/* 选择项 */
.tab-nav {
margin: 0;
padding: 15px 0;
line-height: 1.6;
border-bottom: 0;
background-color: #232323;
overflow: hidden;
li {
float: left;
position: relative;
width: 50%;
padding: 0;
font-size: 16px;
line-height: 28px;
color: #909090;
text-align: center;
list-style: none;
cursor: pointer;
&.current {
color: #b49441;
}
}
.video-jy {
border-left: 1px solid #3f3f3f;
}
}
.tab-content {
.tab-pane {
display: block;
height: 100%;
overflow: auto;
}
/* 章列表样式 */
.chapter-list {
margin: 0;
padding: 0;
line-height: 1.6;
overflow: hidden;
}
.chapter-item {
h4 {
padding: 10px 22px;
margin: 0;
color: #b0b0b0;
background-color: #2f2f2f;
}
}
}
/* 节列表样式 */
.knob-list {
margin: 0;
padding: 0;
line-height: 1.6;
overflow: hidden;
li {
position: relative;
padding: 0 0 0 23px;
&.current {
background: #232323;
a {
color: #b49441;
}
}
&:before {
display: block;
content: "";
position: absolute;
left: 13px;
top: 16px;
z-index: 10;
width: 18px;
height: 18px;
background: #5b5b5b;
border: 2px solid #5b5b5b;
border-radius: 50%;
}
&:after {
display: block;
content: "";
position: absolute;
left: 22px;
top: 0;
z-index: 5;
width: 1px;
height: 100px;
background: #616161;
}
}
.knob-progress {
position: absolute;
top: 16px;
left: 13px;
z-index: 20;
display: none\0;
}
.icon-pro {
display: none;
position: absolute;
top: 16px;
left: 23px;
z-index: 15;
width: 19px;
height: 19px;
border-radius: 9px;
display: block\0;
}
.knob-name {
display: block;
padding: 14px 35px 14px 20px;
font-size: .875em;
color: #909090;
text-decoration: none;
cursor: pointer;
}
}
}
/* 章节后面小图标的样式，总共有4种 */
.icon-play-chapter {
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
}
/* 讲义列表样式 */
.jiangyi-list {
padding: 8px 16px;
li {
padding: 8px 16px;
cursor: pointer;
list-style: none;
&.current {
background: #888;
}
img {
width: 100%;
}
}
}
</style>
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论