优化前端页面
This commit is contained in:
parent
aeb4ba8f21
commit
e076d9bbb5
@ -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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@ -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>
|
||||||
|
@ -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");
|
||||||
//第二步移除children为0的数组,也就是将children为0 设置为undefined
|
//第二步移除children为0的数组,也就是将children为0 设置为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>
|
||||||
|
@ -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"
|
||||||
|
Loading…
x
Reference in New Issue
Block a user