优化前端页面

This commit is contained in:
wangxinbo 2020-11-23 21:20:16 +08:00
parent aeb4ba8f21
commit e076d9bbb5
4 changed files with 84 additions and 23 deletions

View File

@ -105,4 +105,20 @@
.el-form-item { .el-form-item {
margin-bottom: 10px; margin-bottom: 10px;
} }
.box-shadow {
padding: 10px 8px !important;
}
.el-picker-panel {
left: 0 !important;
width: 100%;
}
.el-date-range-picker .el-picker-panel__body {
min-width: 100%;
height: 329px;
overflow-y: auto;
}
.el-date-range-picker__content.is-left, .el-date-range-picker__content.is-right {
width: 100%;
float: none;
}
} }

View File

@ -1,12 +1,26 @@
<template> <template>
<div class="app-container"> <div class="app-container">
<el-row :gutter="12"> <!-- <el-row :gutter="12">
<el-col :span="4" v-for="(item, index) in filesList" :key="index" style="padding: 10px;"> <el-col
:span="4"
v-for="(item, index) in filesList"
:key="index"
style="padding: 10px;"
>
<el-card shadow="hover"> <el-card shadow="hover">
<a :href="apiurl+item.fileurl">{{item.name}}</a> <a :href="apiurl + item.fileurl">{{ item.name }}</a>
</el-card> </el-card>
</el-col> </el-col>
</el-row> </el-row> -->
<ul class="infinite-list" v-infinite-scroll="load" style="overflow:auto">
<li v-for="(ele, i) in filesList" :key="i" class="flex align-center justify-between infinite-list-item">
<div class="left">
<span>{{i + 1}}.</span>
<i class="el-icon-document icon"></i>{{ele.name}}
</div>
<a class="right" :href="apiurl + ele.fileurl">下载</a>
</li>
</ul>
</div> </div>
</template> </template>
@ -29,8 +43,8 @@ export default {
filetype: undefined, filetype: undefined,
type: "1", // type: "1", //
fileurl: undefined, fileurl: undefined,
createuserid: undefined, createuserid: undefined
}, }
}; };
}, },
created() { created() {
@ -40,11 +54,36 @@ export default {
/** 查询文件管理列表 */ /** 查询文件管理列表 */
getList() { getList() {
this.loading = true; this.loading = true;
listFiles(this.queryParams).then((response) => { listFiles(this.queryParams).then(response => {
this.filesList = response.rows; this.filesList = response.rows;
this.loading = false; this.loading = false;
}); });
}, },
}, load() {
}
}
}; };
</script> </script>
<style lang="scss" scoped>
.infinite-list-item {
padding: 15px 15px;
border-bottom: 1px solid #eee;
&:hover {
background: #f8f8f8;
}
.left {
font-size: 14px;
.icon {
margin: 0 3px 0 5px;
}
}
.right {
font-size: 12px;
color: #999;
&:hover {
color: rgb(64, 158, 255);
}
}
}
</style>

View File

@ -103,7 +103,7 @@
import { import {
listVideo, listVideo,
getVideo, getVideo,
privateDownloadUrl, privateDownloadUrl
} from "@/api/benyi_train/video"; } from "@/api/benyi_train/video";
import { listAllLecturer } from "@/api/benyi_train/lecturer"; import { listAllLecturer } from "@/api/benyi_train/lecturer";
import { listMoedata } from "@/api/system/moedata"; import { listMoedata } from "@/api/system/moedata";
@ -132,17 +132,17 @@ export default {
type: undefined, type: undefined,
status: "0", status: "0",
pageNum: 1, pageNum: 1,
pageSize: 8, pageSize: 8
}, }
}; };
}, },
created() { created() {
this.getList(); this.getList();
listAllLecturer().then((response) => { listAllLecturer().then(response => {
//console.log(response.lecturer); //console.log(response.lecturer);
this.lecturerOptions = response.lecturer; this.lecturerOptions = response.lecturer;
}); });
listMoedata(this.queryParams).then((response) => { listMoedata(this.queryParams).then(response => {
// //
this.optionTypes = this.handleTree(response.data, "id", "pid"); this.optionTypes = this.handleTree(response.data, "id", "pid");
//children0children0 undefined //children0children0 undefined
@ -172,9 +172,9 @@ export default {
/** 查询培训列表 */ /** 查询培训列表 */
getList() { getList() {
this.loading = true; this.loading = true;
listVideo(this.queryParams).then((response) => { listVideo(this.queryParams).then(response => {
this.videoList = response.rows; this.videoList = response.rows;
this.playerOptions = response.rows.map((ele) => { this.playerOptions = response.rows.map(ele => {
return { return {
autoplay: false, autoplay: false,
muted: true, muted: true,
@ -185,8 +185,8 @@ export default {
{ {
type: ele.filetype, type: ele.filetype,
// mp4 // mp4
src: ele.videourl, src: ele.videourl
}, }
], ],
notSupportedMessage: "此视频暂无法播放,请稍后再试", notSupportedMessage: "此视频暂无法播放,请稍后再试",
poster: "", poster: "",
@ -194,8 +194,8 @@ export default {
timeDivider: true, timeDivider: true,
durationDisplay: false, durationDisplay: false,
remainingTimeDisplay: false, remainingTimeDisplay: false,
fullscreenToggle: true, // fullscreenToggle: true //
}, }
}; };
}); });
this.total = response.total; this.total = response.total;
@ -217,8 +217,8 @@ export default {
resetQuery() { resetQuery() {
this.resetForm("queryForm"); this.resetForm("queryForm");
this.handleQuery(); this.handleQuery();
}, }
}, }
}; };
</script> </script>
@ -259,4 +259,10 @@ export default {
.no-margin ::v-deep.el-form-item__content { .no-margin ::v-deep.el-form-item__content {
margin: 0 !important; margin: 0 !important;
} }
@media (max-width: 768.98px) {
.el-cascader-node__label {
max-width: 200px;
}
}
</style> </style>

View File

@ -141,7 +141,7 @@
:data="classList" :data="classList"
@selection-change="handleSelectionChange" @selection-change="handleSelectionChange"
> >
<el-table-column type="selection" width="55" align="center" /> <el-table-column type="selection" width="45" align="center" />
<el-table-column <el-table-column
label="班级编号" label="班级编号"
align="center" align="center"