|
|
@ -140,29 +140,61 @@ const goToAnotherPage = (address, courseId) => { |
|
|
|
<!-- 头部 --> |
|
|
|
<!-- 头部 --> |
|
|
|
<div class="header"> |
|
|
|
<div class="header"> |
|
|
|
<el-button type="primary" plain>浏览记录</el-button> |
|
|
|
<el-button type="primary" plain>浏览记录</el-button> |
|
|
|
<el-button type="danger" plain style="float: right" @click="deleteSelected"> |
|
|
|
<el-button |
|
|
|
|
|
|
|
type="danger" |
|
|
|
|
|
|
|
plain |
|
|
|
|
|
|
|
style="float: right" |
|
|
|
|
|
|
|
@click="deleteSelected" |
|
|
|
|
|
|
|
> |
|
|
|
批量删除 |
|
|
|
批量删除 |
|
|
|
</el-button> |
|
|
|
</el-button> |
|
|
|
<el-button type="primary" plain @click="toggleCheckbox" style="float: right"> |
|
|
|
<el-button |
|
|
|
|
|
|
|
type="primary" |
|
|
|
|
|
|
|
plain |
|
|
|
|
|
|
|
@click="toggleCheckbox" |
|
|
|
|
|
|
|
style="float: right" |
|
|
|
|
|
|
|
> |
|
|
|
管理 |
|
|
|
管理 |
|
|
|
</el-button> |
|
|
|
</el-button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- 中间 --> |
|
|
|
<!-- 中间 --> |
|
|
|
<div class="record-list"> |
|
|
|
<div class="record-list"> |
|
|
|
<ul v-if="recordList.length > 0"> |
|
|
|
<ul v-if="recordList.length > 0"> |
|
|
|
<li v-for="record in recordList" :key="record.id" v-loading="loading"> |
|
|
|
<li |
|
|
|
<input style="display: flex" type="checkbox" :value="record.id" @change="toggleSelection(record.id)" |
|
|
|
v-for="record in recordList" |
|
|
|
v-if="showCheckbox" /> |
|
|
|
:key="record.id" |
|
|
|
|
|
|
|
v-loading="loading" |
|
|
|
|
|
|
|
@click=" |
|
|
|
|
|
|
|
goToAnotherPage( |
|
|
|
|
|
|
|
'/myCourseStudyManagement/learningProcess1', |
|
|
|
|
|
|
|
record.courseId, |
|
|
|
|
|
|
|
) |
|
|
|
|
|
|
|
" |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
<input |
|
|
|
|
|
|
|
style="display: flex" |
|
|
|
|
|
|
|
type="checkbox" |
|
|
|
|
|
|
|
:value="record.id" |
|
|
|
|
|
|
|
@change="toggleSelection(record.id)" |
|
|
|
|
|
|
|
v-if="showCheckbox" |
|
|
|
|
|
|
|
/> |
|
|
|
|
|
|
|
|
|
|
|
<img class="img" :src="record.img" @click="goToAnotherPage(record.address)" style="margin-bottom: 10px" /> |
|
|
|
<img |
|
|
|
|
|
|
|
class="img" |
|
|
|
|
|
|
|
:src="record.img" |
|
|
|
|
|
|
|
@click="goToAnotherPage(record.address)" |
|
|
|
|
|
|
|
style="margin-bottom: 10px" |
|
|
|
|
|
|
|
/> |
|
|
|
|
|
|
|
|
|
|
|
<div style=" |
|
|
|
<div |
|
|
|
|
|
|
|
style=" |
|
|
|
display: flex; |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
justify-content: space-between; |
|
|
|
flex-grow: 1; |
|
|
|
flex-grow: 1; |
|
|
|
margin-top: 10px; |
|
|
|
margin-top: 10px; |
|
|
|
margin-bottom: 10px; |
|
|
|
margin-bottom: 10px; |
|
|
|
"> |
|
|
|
" |
|
|
|
|
|
|
|
> |
|
|
|
<p> |
|
|
|
<p> |
|
|
|
{{ record.courseName }} |
|
|
|
{{ record.courseName }} |
|
|
|
</p> |
|
|
|
</p> |
|
|
@ -170,29 +202,17 @@ const goToAnotherPage = (address, courseId) => { |
|
|
|
<Delete /> |
|
|
|
<Delete /> |
|
|
|
</el-icon> |
|
|
|
</el-icon> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div style=" |
|
|
|
<div |
|
|
|
|
|
|
|
style=" |
|
|
|
display: flex; |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
justify-content: space-between; |
|
|
|
flex-grow: 1; |
|
|
|
flex-grow: 1; |
|
|
|
margin-top: 10px; |
|
|
|
margin-top: 10px; |
|
|
|
"> |
|
|
|
" |
|
|
|
|
|
|
|
> |
|
|
|
<p>{{ record.time }}</p> |
|
|
|
<p>{{ record.time }}</p> |
|
|
|
<p>学习人数:{{ record.number }}</p> |
|
|
|
<p>学习人数:{{ record.number }}</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div style="display: flex;margin: 10px 0;"> |
|
|
|
|
|
|
|
<el-button @click=" |
|
|
|
|
|
|
|
goToAnotherPage( |
|
|
|
|
|
|
|
'/myCourseStudyManagement/learningProcess1', |
|
|
|
|
|
|
|
record.courseId, |
|
|
|
|
|
|
|
) |
|
|
|
|
|
|
|
">知识点学习记录</el-button> |
|
|
|
|
|
|
|
<el-button @click=" |
|
|
|
|
|
|
|
goToAnotherPage( |
|
|
|
|
|
|
|
'/myCourseStudyManagement/learningProcess2', |
|
|
|
|
|
|
|
record.courseId, |
|
|
|
|
|
|
|
) |
|
|
|
|
|
|
|
">资源学习记录</el-button> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</li> |
|
|
|
</li> |
|
|
|
</ul> |
|
|
|
</ul> |
|
|
|
<el-empty v-else description="暂时没有浏览记录" /> |
|
|
|
<el-empty v-else description="暂时没有浏览记录" /> |
|
|
@ -200,10 +220,17 @@ const goToAnotherPage = (address, courseId) => { |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- 分页 --> |
|
|
|
<!-- 分页 --> |
|
|
|
<div class="example-pagination-block"> |
|
|
|
<div class="example-pagination-block"> |
|
|
|
<el-pagination v-model:current-page="params.pagenum" v-model:page-size="params.pagesize" |
|
|
|
<el-pagination |
|
|
|
:page-sizes="[5, 10, 15, 20]" :background="true" layout="jumper,total, sizes, prev, pager, next " :total="total" |
|
|
|
v-model:current-page="params.pagenum" |
|
|
|
@current-change="onCurrentChange" @size-change="onSizeChange" |
|
|
|
v-model:page-size="params.pagesize" |
|
|
|
style="margin-top: 20px; justify-content: flex-end" /> |
|
|
|
:page-sizes="[5, 10, 15, 20]" |
|
|
|
|
|
|
|
:background="true" |
|
|
|
|
|
|
|
layout="jumper,total, sizes, prev, pager, next " |
|
|
|
|
|
|
|
:total="total" |
|
|
|
|
|
|
|
@current-change="onCurrentChange" |
|
|
|
|
|
|
|
@size-change="onSizeChange" |
|
|
|
|
|
|
|
style="margin-top: 20px; justify-content: flex-end" |
|
|
|
|
|
|
|
/> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</template> |
|
|
@ -214,11 +241,9 @@ const goToAnotherPage = (address, courseId) => { |
|
|
|
flex-direction: column; |
|
|
|
flex-direction: column; |
|
|
|
min-height: 100vh; |
|
|
|
min-height: 100vh; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.content { |
|
|
|
.content { |
|
|
|
flex: 1; |
|
|
|
flex: 1; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.example-pagination-block { |
|
|
|
.example-pagination-block { |
|
|
|
position: sticky; |
|
|
|
position: sticky; |
|
|
|
bottom: 0; |
|
|
|
bottom: 0; |
|
|
@ -229,7 +254,6 @@ const goToAnotherPage = (address, courseId) => { |
|
|
|
.record-list { |
|
|
|
.record-list { |
|
|
|
margin: 10px 0; |
|
|
|
margin: 10px 0; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
ul { |
|
|
|
ul { |
|
|
|
width: 100%; |
|
|
|
width: 100%; |
|
|
|
list-style-type: none; |
|
|
|
list-style-type: none; |
|
|
@ -244,11 +268,9 @@ ul { |
|
|
|
grid-template-columns: repeat(auto-fill, 272px); |
|
|
|
grid-template-columns: repeat(auto-fill, 272px); |
|
|
|
justify-content: space-around; |
|
|
|
justify-content: space-around; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
li { |
|
|
|
li { |
|
|
|
/* margin-bottom: 30px; */ |
|
|
|
/* margin-bottom: 30px; */ |
|
|
|
transition: filter 0.3s; |
|
|
|
transition: filter 0.3s; /* 添加过渡动画 */ |
|
|
|
/* 添加过渡动画 */ |
|
|
|
|
|
|
|
/* flex: 1 0 20%; */ |
|
|
|
/* flex: 1 0 20%; */ |
|
|
|
width: calc(20% - 20px); |
|
|
|
width: calc(20% - 20px); |
|
|
|
width: 250px; |
|
|
|
width: 250px; |
|
|
@ -263,7 +285,6 @@ li { |
|
|
|
transition: box-shadow 0.3s; |
|
|
|
transition: box-shadow 0.3s; |
|
|
|
cursor: pointer; |
|
|
|
cursor: pointer; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
li:hover { |
|
|
|
li:hover { |
|
|
|
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); |
|
|
|
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); |
|
|
|
} |
|
|
|
} |
|
|
|