|
|
@@ -2,83 +2,70 @@
|
|
|
<template>
|
|
|
<div class="resource-card">
|
|
|
<div class="card-title">实验室安全素养资源卡</div>
|
|
|
-
|
|
|
<!-- 分类 Tab 横向滚动 -->
|
|
|
<div class="tab-scroll-wrap">
|
|
|
<div class="tab-bar">
|
|
|
- <el-button
|
|
|
- v-for="tab in resourceData.tabs"
|
|
|
- :key="tab"
|
|
|
- :type="resourceData.activeTab === tab ? 'primary' : 'default'"
|
|
|
- size="mini"
|
|
|
- round
|
|
|
- @click="resourceData.activeTab = tab"
|
|
|
- >{{ tab }}</el-button>
|
|
|
+ <p v-for="(item,index) in topList" :key="index"
|
|
|
+ :class="item.value == topIndex?'check-p':''"
|
|
|
+ @click="topButton(item.value)">{{ item.table }}</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="resource-body">
|
|
|
- <!-- 左侧:知识学习 + 刷题练习 -->
|
|
|
- <div class="left-panel">
|
|
|
-
|
|
|
- <!-- 知识学习 -->
|
|
|
- <div class="sub-block">
|
|
|
- <div class="sub-header">
|
|
|
- <span class="sub-title">知识学习</span>
|
|
|
- <a class="more-link">查看更多</a>
|
|
|
+ <div class="left-max-big-box">
|
|
|
+ <!--知识学习-->
|
|
|
+ <div class="left-top-big-box">
|
|
|
+ <div class="big-title-box">
|
|
|
+ <p>知识学习</p>
|
|
|
+ <p>查看更多</p>
|
|
|
</div>
|
|
|
- <div v-for="item in resourceData.knowledgeList" :key="item.name + item.year" class="file-item">
|
|
|
- <div class="file-icon-wrap">
|
|
|
- <i class="el-icon-document file-icon"></i>
|
|
|
+ <div class="big-content-box scrollbar-box">
|
|
|
+ <p class="null-p" v-if="!leftTopList[0]">暂无数据</p>
|
|
|
+ <div class="for-big-box" v-for="(item,index) in leftTopList" :key="index">
|
|
|
+ <p>{{item.leftTopData1}}</p>
|
|
|
+ <p>{{item.leftTopData2}}分钟丨{{item.leftTopData3}}学时丨{{item.leftTopData4}}积分</p>
|
|
|
+ <p :class="item.leftTopData5==1?'colorA':''">{{item.leftTopData5==1?'学习中':'未学习'}}</p>
|
|
|
</div>
|
|
|
- <div class="file-info">
|
|
|
- <div class="file-name">{{ item.name }}</div>
|
|
|
- <div class="file-meta">{{ item.year }}|{{ item.term }}|{{ item.credit }}学分</div>
|
|
|
- </div>
|
|
|
- <el-button size="mini" type="primary" plain>学习</el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
- <!-- 刷题练习 -->
|
|
|
- <div class="sub-block">
|
|
|
- <div class="sub-header">
|
|
|
- <span class="sub-title">刷题练习</span>
|
|
|
- <a class="more-link">查看更多</a>
|
|
|
+ <!--刷题练习-->
|
|
|
+ <div class="left-bottom-big-box">
|
|
|
+ <div class="big-title-box">
|
|
|
+ <p>刷题练习</p>
|
|
|
+ <p>查看更多</p>
|
|
|
</div>
|
|
|
- <div class="practice-item">
|
|
|
- <div class="practice-top">
|
|
|
- <a class="practice-date link">2026-09-01 9:30:33</a>
|
|
|
- <div class="practice-more"><i class="el-icon-more"></i></div>
|
|
|
+ <div class="big-content-box scrollbar-box">
|
|
|
+ <p class="null-p" v-if="!leftBottomList[0]">暂无数据</p>
|
|
|
+ <div class="for-big-box" v-for="(item,index) in leftBottomList" :key="index">
|
|
|
+ <div class="for-flex-box">
|
|
|
+ <p class="el-icon-time"></p>
|
|
|
+ <p>{{item.leftBottomData1}}</p>
|
|
|
+ </div>
|
|
|
+ <p class="text-p">练习进度:{{item.leftBottomData2}}/{{item.leftBottomData3}}</p>
|
|
|
+ <p class="text-p">正确数:{{item.leftBottomData4}}丨错题数:{{item.leftBottomData5}}丨正确率:{{item.leftBottomData6}}%</p>
|
|
|
+ <el-progress
|
|
|
+ class="num-p" type="circle"
|
|
|
+ :stroke-width="4"
|
|
|
+ :width="60" :percentage="item.leftBottomData6">
|
|
|
+ </el-progress>
|
|
|
</div>
|
|
|
- <div class="practice-stats">
|
|
|
- <span>练习题:<b>32/369</b></span>
|
|
|
- </div>
|
|
|
- <div class="practice-rates">
|
|
|
- <span>答对率:<b>50%</b></span>
|
|
|
- <span>正确数:<b>72%</b></span>
|
|
|
- <span>错误数:<b>96%</b></span>
|
|
|
- </div>
|
|
|
- <div class="practice-time">2026-09-01 11:03:25</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
</div>
|
|
|
-
|
|
|
- <!-- 右侧:视频课程学习 -->
|
|
|
- <div class="right-panel">
|
|
|
- <div class="sub-header">
|
|
|
- <span class="sub-title">视频课程学习</span>
|
|
|
- <a class="more-link">查看更多</a>
|
|
|
+ <!--视频资源学习-->
|
|
|
+ <div class="right-max-big-box">
|
|
|
+ <div class="big-title-box">
|
|
|
+ <p>视频资源学习</p>
|
|
|
+ <p>查看更多</p>
|
|
|
</div>
|
|
|
- <div class="video-grid">
|
|
|
- <div v-for="item in resourceData.videoList" :key="item.name + item.idx" class="video-item">
|
|
|
- <div class="video-thumb">
|
|
|
- <div class="thumb-inner">视频缩略图</div>
|
|
|
- </div>
|
|
|
- <div class="video-footer">
|
|
|
- <div class="video-name">{{ item.name }}</div>
|
|
|
- <div class="video-meta">{{ item.year }}|{{ item.term }}|{{ item.credit }}学分</div>
|
|
|
- <el-button size="mini" type="primary" plain>学习</el-button>
|
|
|
+ <div class="big-content-box-1 scrollbar-box">
|
|
|
+ <p class="null-p" v-if="!rightList[0]">暂无数据</p>
|
|
|
+ <div class="for-big-box" v-for="(item,index) in rightList" :key="index">
|
|
|
+ <img :src="item.rightData1">
|
|
|
+ <div class="text-box">
|
|
|
+ <p>{{item.rightData2}}</p>
|
|
|
+ <p>{{item.rightData3}}分钟丨{{item.rightData4}}学时丨{{item.rightData5}}积分</p>
|
|
|
+ <p :class="item.rightData6==1?'colorA':''">{{item.rightData6==1?'学习中':'未学习'}}</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -92,27 +79,138 @@ export default {
|
|
|
name: 'ResourceCard',
|
|
|
data() {
|
|
|
return {
|
|
|
- resourceData: {
|
|
|
- activeTab: '总览',
|
|
|
- tabs: ['总览', '生物类', '辐射类', '化学', '总览', '科目', '生物类', '辐射类', '化学', '科目'],
|
|
|
- knowledgeList: [
|
|
|
- { name: '课件资料名称.PDF', year: '2026年', term: '1学年', credit: '1' },
|
|
|
- { name: '课件资料名称.PDF', year: '2026年', term: '1学年', credit: '1' },
|
|
|
- { name: '课件资料名称.PDF', year: '2026年', term: '1学年', credit: '1' },
|
|
|
- { name: '课件资料名称.PDF', year: '2026年', term: '1学年', credit: '1' },
|
|
|
- { name: '课件资料名称.PDF', year: '2026年', term: '1学年', credit: '1' },
|
|
|
- ],
|
|
|
- videoList: [
|
|
|
- { idx: 1, name: '视频课程名称', year: '2026年', term: '1学年', credit: '1' },
|
|
|
- { idx: 2, name: '视频课程名称', year: '2026年', term: '1学年', credit: '1' },
|
|
|
- { idx: 3, name: '视频课程名称', year: '2026年', term: '1学年', credit: '1' },
|
|
|
- { idx: 4, name: '视频课程名称', year: '2026年', term: '1学年', credit: '1' },
|
|
|
- { idx: 5, name: '视频课程名称', year: '2026年', term: '1学年', credit: '1' },
|
|
|
- { idx: 6, name: '视频课程名称', year: '2026年', term: '1学年', credit: '1' },
|
|
|
- ]
|
|
|
- }
|
|
|
+ topList:[{value:'',table:'总览'},{value:'1',table:'生物类'},{value:'2',table:'辐射类'},{value:'3',table:'化学'}],
|
|
|
+ topIndex:'',
|
|
|
+ leftTopList:[
|
|
|
+ {
|
|
|
+ leftTopData1:'课件名称',
|
|
|
+ leftTopData2:'20',
|
|
|
+ leftTopData3:'1',
|
|
|
+ leftTopData4:'3',
|
|
|
+ leftTopData5:'1',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ leftTopData1:'课件名称',
|
|
|
+ leftTopData2:'20',
|
|
|
+ leftTopData3:'1',
|
|
|
+ leftTopData4:'3',
|
|
|
+ leftTopData5:'2',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ leftTopData1:'课件名称',
|
|
|
+ leftTopData2:'20',
|
|
|
+ leftTopData3:'1',
|
|
|
+ leftTopData4:'3',
|
|
|
+ leftTopData5:'1',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ leftTopData1:'课件名称',
|
|
|
+ leftTopData2:'20',
|
|
|
+ leftTopData3:'1',
|
|
|
+ leftTopData4:'3',
|
|
|
+ leftTopData5:'1',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ leftBottomList:[
|
|
|
+ {
|
|
|
+ leftBottomData1:'2026-09-01 9:30:33',
|
|
|
+ leftBottomData2:'33',
|
|
|
+ leftBottomData3:'369',
|
|
|
+ leftBottomData4:'3',
|
|
|
+ leftBottomData5:'3',
|
|
|
+ leftBottomData6:'96',
|
|
|
+ leftBottomData7:'33',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ leftBottomData1:'2026-09-01 9:30:33',
|
|
|
+ leftBottomData2:'33',
|
|
|
+ leftBottomData3:'369',
|
|
|
+ leftBottomData4:'3',
|
|
|
+ leftBottomData5:'3',
|
|
|
+ leftBottomData6:'96',
|
|
|
+ leftBottomData7:'33',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ leftBottomData1:'2026-09-01 9:30:33',
|
|
|
+ leftBottomData2:'33',
|
|
|
+ leftBottomData3:'369',
|
|
|
+ leftBottomData4:'3',
|
|
|
+ leftBottomData5:'3',
|
|
|
+ leftBottomData6:'96',
|
|
|
+ leftBottomData7:'33',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ rightList:[
|
|
|
+ {
|
|
|
+ rightData1:'',
|
|
|
+ rightData2:'视频课件名称',
|
|
|
+ rightData3:'20',
|
|
|
+ rightData4:'1',
|
|
|
+ rightData5:'3',
|
|
|
+ rightData6:'1',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ rightData1:'',
|
|
|
+ rightData2:'视频课件名称',
|
|
|
+ rightData3:'20',
|
|
|
+ rightData4:'1',
|
|
|
+ rightData5:'3',
|
|
|
+ rightData6:'2',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ rightData1:'',
|
|
|
+ rightData2:'视频课件名称',
|
|
|
+ rightData3:'20',
|
|
|
+ rightData4:'1',
|
|
|
+ rightData5:'3',
|
|
|
+ rightData6:'1',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ rightData1:'',
|
|
|
+ rightData2:'视频课件名称',
|
|
|
+ rightData3:'20',
|
|
|
+ rightData4:'1',
|
|
|
+ rightData5:'3',
|
|
|
+ rightData6:'1',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ rightData1:'',
|
|
|
+ rightData2:'视频课件名称',
|
|
|
+ rightData3:'20',
|
|
|
+ rightData4:'1',
|
|
|
+ rightData5:'3',
|
|
|
+ rightData6:'2',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ rightData1:'',
|
|
|
+ rightData2:'视频课件名称',
|
|
|
+ rightData3:'20',
|
|
|
+ rightData4:'1',
|
|
|
+ rightData5:'3',
|
|
|
+ rightData6:'1',
|
|
|
+ },
|
|
|
+ ],
|
|
|
}
|
|
|
- }
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ topButton(val){
|
|
|
+ if(this.topIndex != val){
|
|
|
+ this.$set(this,'topIndex',val);
|
|
|
+ this.leftTopGetData();
|
|
|
+ this.leftBottomGetData();
|
|
|
+ this.rightGetData();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ leftTopGetData(){
|
|
|
+
|
|
|
+ },
|
|
|
+ leftBottomGetData(){
|
|
|
+
|
|
|
+ },
|
|
|
+ rightGetData(){
|
|
|
+
|
|
|
+ },
|
|
|
+ },
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
@@ -120,21 +218,21 @@ export default {
|
|
|
.resource-card {
|
|
|
background: #fff;
|
|
|
border-radius: 6px;
|
|
|
- padding: 16px 20px;
|
|
|
margin-bottom: 12px;
|
|
|
box-shadow: 0 1px 4px rgba(0,0,0,0.06);
|
|
|
|
|
|
.card-title {
|
|
|
- font-size: 14px;
|
|
|
- font-weight: 600;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 700;
|
|
|
+ line-height:20px;
|
|
|
color: #333;
|
|
|
- margin-bottom: 12px;
|
|
|
+ margin:20px 0 20px 20px;
|
|
|
}
|
|
|
|
|
|
.tab-scroll-wrap {
|
|
|
overflow-x: auto;
|
|
|
- margin-bottom: 16px;
|
|
|
padding-bottom: 4px;
|
|
|
+ margin:20px 0 0 20px;
|
|
|
|
|
|
&::-webkit-scrollbar { height: 4px; }
|
|
|
&::-webkit-scrollbar-thumb { background: #ddd; border-radius: 2px; }
|
|
|
@@ -144,117 +242,220 @@ export default {
|
|
|
gap: 6px;
|
|
|
white-space: nowrap;
|
|
|
width: max-content;
|
|
|
+ p{
|
|
|
+ height:40px;
|
|
|
+ line-height:40px;
|
|
|
+ border-radius:6px;
|
|
|
+ border:1px solid #666;
|
|
|
+ color:#666;
|
|
|
+ padding:0 20px;
|
|
|
+ min-width: 100px;
|
|
|
+ text-align: center;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .check-p{
|
|
|
+ color:#fff;
|
|
|
+ background-color: #0183fa;
|
|
|
+ border: 1px solid #0183fa;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.resource-body {
|
|
|
+ height:800px;
|
|
|
display: flex;
|
|
|
- gap: 20px;
|
|
|
- align-items: flex-start;
|
|
|
-
|
|
|
- .left-panel { flex: 0 0 45%; }
|
|
|
- .right-panel { flex: 1; }
|
|
|
- }
|
|
|
-
|
|
|
- .sub-block { margin-bottom: 20px; }
|
|
|
-
|
|
|
- .sub-header {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- margin-bottom: 10px;
|
|
|
-
|
|
|
- .sub-title { font-size: 14px; font-weight: 600; color: #333; }
|
|
|
- .more-link { font-size: 12px; color: #409eff; cursor: pointer; }
|
|
|
- }
|
|
|
-
|
|
|
- .file-item {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 10px;
|
|
|
- padding: 8px 0;
|
|
|
- border-bottom: 1px solid #f5f5f5;
|
|
|
-
|
|
|
- .file-icon-wrap {
|
|
|
- width: 32px;
|
|
|
- height: 32px;
|
|
|
- background: #fff3e0;
|
|
|
- border-radius: 4px;
|
|
|
+ .left-max-big-box{
|
|
|
+ flex:1;
|
|
|
display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- flex-shrink: 0;
|
|
|
- .file-icon { font-size: 18px; color: #e6a23c; }
|
|
|
- }
|
|
|
-
|
|
|
- .file-info {
|
|
|
- flex: 1;
|
|
|
- min-width: 0;
|
|
|
- .file-name { font-size: 13px; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
|
- .file-meta { font-size: 12px; color: #999; margin-top: 2px; }
|
|
|
+ flex-direction: column;
|
|
|
+ overflow: hidden;
|
|
|
+ padding:20px 0 20px 20px;
|
|
|
+ .left-top-big-box{
|
|
|
+ height:400px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ overflow: hidden;
|
|
|
+ border-radius:10px;
|
|
|
+ box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
|
|
|
+ margin-bottom:20px;
|
|
|
+ margin-right:20px;
|
|
|
+ padding-bottom:20px;
|
|
|
+ .for-big-box{
|
|
|
+ margin:12px 14px 0 20px;
|
|
|
+ background-color: rgba(1, 131, 250, 0.1);
|
|
|
+ border-radius:6px;
|
|
|
+ padding:18px 20px;
|
|
|
+ position: relative;
|
|
|
+ cursor: pointer;
|
|
|
+ p:nth-child(1){
|
|
|
+ font-size:16px;
|
|
|
+ font-weight:700;
|
|
|
+ color:#0183fa;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+ p:nth-child(2){
|
|
|
+ font-size:14px;
|
|
|
+ color:#333;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+ p:nth-child(3){
|
|
|
+ position: absolute;
|
|
|
+ bottom:20px;
|
|
|
+ right:20px;
|
|
|
+ font-size:14px;
|
|
|
+ border-radius:4px;
|
|
|
+ line-height: 24px;
|
|
|
+ width: 60px;
|
|
|
+ text-align: center;
|
|
|
+ background-color: #999;
|
|
|
+ color:#fff;
|
|
|
+ }
|
|
|
+ .colorA{
|
|
|
+ background-color: #0183fa!important;
|
|
|
+ color:#fff!important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .left-bottom-big-box{
|
|
|
+ height:400px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ overflow: hidden;
|
|
|
+ border-radius:10px;
|
|
|
+ margin-right:20px;
|
|
|
+ box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
|
|
|
+ padding-bottom:20px;
|
|
|
+ .for-big-box{
|
|
|
+ margin:12px 14px 0 20px;
|
|
|
+ background-color: rgba(1, 131, 250, 0.1);
|
|
|
+ border-radius:6px;
|
|
|
+ padding:16px 20px;
|
|
|
+ position: relative;
|
|
|
+ .for-flex-box{
|
|
|
+ display: flex;
|
|
|
+ color:#0183fa;
|
|
|
+ p{
|
|
|
+ font-weight:700;
|
|
|
+ }
|
|
|
+ p:nth-child(1){
|
|
|
+ font-size:18px;
|
|
|
+ line-height:40px;
|
|
|
+ margin-right:5px;
|
|
|
+ }
|
|
|
+ p:nth-child(2){
|
|
|
+ font-size:14px;
|
|
|
+ line-height:40px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .text-p{
|
|
|
+ line-height:30px;
|
|
|
+ font-size:14px;
|
|
|
+ color:#666;
|
|
|
+ font-weight:700;
|
|
|
+ }
|
|
|
+ .num-p{
|
|
|
+ position: absolute;
|
|
|
+ right:40px;
|
|
|
+ top:35px;
|
|
|
+ }
|
|
|
+ .num-p ::v-deep .el-progress__text {
|
|
|
+ margin-left:0!important;
|
|
|
+ font-size:12px!important;
|
|
|
+ }
|
|
|
+ .num-p ::v-deep svg path:first-child {
|
|
|
+ stroke: #cccccc !important; /* 修改为红色 */
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
-
|
|
|
- .practice-item {
|
|
|
- border: 1px solid #eee;
|
|
|
- border-radius: 6px;
|
|
|
- padding: 12px;
|
|
|
-
|
|
|
- .practice-top {
|
|
|
+ .right-max-big-box{
|
|
|
+ flex:1;
|
|
|
display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- margin-bottom: 8px;
|
|
|
- .link { color: #409eff; font-size: 13px; cursor: pointer; }
|
|
|
- .practice-more { color: #ccc; cursor: pointer; font-size: 16px; }
|
|
|
- }
|
|
|
-
|
|
|
- .practice-stats {
|
|
|
- font-size: 13px;
|
|
|
- color: #555;
|
|
|
- margin-bottom: 6px;
|
|
|
- b { color: #333; }
|
|
|
+ flex-direction: column;
|
|
|
+ overflow: hidden;
|
|
|
+ width:740px;
|
|
|
+ border-radius:10px;
|
|
|
+ box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
|
|
|
+ margin:20px 20px 20px 0;
|
|
|
+ .big-content-box-1{
|
|
|
+ flex:1;
|
|
|
+ .for-big-box{
|
|
|
+ margin:12px 0 0 20px;
|
|
|
+ display: inline-block;
|
|
|
+ width:346px;
|
|
|
+ border-radius:6px;
|
|
|
+ overflow: hidden;
|
|
|
+ position: relative;
|
|
|
+ img{
|
|
|
+ width:346px;
|
|
|
+ height:180px;
|
|
|
+ display: block;
|
|
|
+ overflow: hidden;
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+ .text-box{
|
|
|
+ background-color: rgba(1, 131, 250, 0.1);
|
|
|
+ p:nth-child(1){
|
|
|
+ margin:0 20px;
|
|
|
+ line-height:40px;
|
|
|
+ color:#0183fa;
|
|
|
+ font-size:16px;
|
|
|
+ font-weight:700;
|
|
|
+ }
|
|
|
+ p:nth-child(2){
|
|
|
+ margin:0 20px;
|
|
|
+ line-height:20px;
|
|
|
+ color:#333;
|
|
|
+ font-size:14px;
|
|
|
+ padding-bottom:10px;
|
|
|
+ }
|
|
|
+ p:nth-child(3){
|
|
|
+ position: absolute;
|
|
|
+ bottom:10px;
|
|
|
+ right:10px;
|
|
|
+ background-color: #999;
|
|
|
+ color:#fff;
|
|
|
+ font-size:14px;
|
|
|
+ border-radius:4px;
|
|
|
+ line-height: 24px;
|
|
|
+ width: 60px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .colorA{
|
|
|
+ background-color: #0183fa!important;
|
|
|
+ color:#fff!important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
-
|
|
|
- .practice-rates {
|
|
|
+ .big-title-box{
|
|
|
display: flex;
|
|
|
- gap: 16px;
|
|
|
- font-size: 12px;
|
|
|
- color: #666;
|
|
|
- margin-bottom: 6px;
|
|
|
- b { color: #409eff; }
|
|
|
- }
|
|
|
-
|
|
|
- .practice-time {
|
|
|
- font-size: 12px;
|
|
|
- color: #999;
|
|
|
- text-align: right;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .video-grid {
|
|
|
- display: grid;
|
|
|
- grid-template-columns: repeat(2, 1fr);
|
|
|
- gap: 12px;
|
|
|
-
|
|
|
- .video-item {
|
|
|
- border: 1px solid #eee;
|
|
|
- border-radius: 6px;
|
|
|
- overflow: hidden;
|
|
|
-
|
|
|
- .video-thumb {
|
|
|
- height: 72px;
|
|
|
- background: #f0f2f5;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- .thumb-inner { color: #ccc; font-size: 12px; }
|
|
|
+ height:60px;
|
|
|
+ padding:0 20px;
|
|
|
+ p{
|
|
|
+ line-height:60px;
|
|
|
+ font-size:16px;
|
|
|
+ font-weight: 700;
|
|
|
}
|
|
|
-
|
|
|
- .video-footer {
|
|
|
- padding: 8px 10px;
|
|
|
- .video-name { font-size: 13px; color: #333; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
|
- .video-meta { font-size: 12px; color: #999; margin-bottom: 6px; }
|
|
|
+ p:nth-child(1){
|
|
|
+ flex:1;
|
|
|
+ }
|
|
|
+ p:nth-child(2){
|
|
|
+ cursor: pointer;
|
|
|
+ color:#0183fa;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .big-content-box{
|
|
|
+ flex:1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ .null-p{
|
|
|
+ text-align: center;
|
|
|
+ line-height:200px;
|
|
|
+ color:#999;
|
|
|
+ font-size:14px;
|
|
|
}
|
|
|
}
|
|
|
}
|