<template>
|
<div class="zs-main">
|
<el-row class="search-title">
|
<el-col :span="18" class="title">
|
<div class="zs-title">云盘智搜</div>
|
</el-col>
|
<el-col :span="6" class="search">
|
<el-input v-model="input" placeholder="请输入关键词" style="width:200px" />
|
<el-button type="primary">查询</el-button>
|
</el-col>
|
</el-row>
|
<el-container style="background-color: #fff;">
|
<el-aside width="210px" style="background-color: #fff;text-align: center;">
|
<el-button icon="el-icon-plus" class="add-folder-but">新增文件夹</el-button>
|
<el-timeline>
|
<el-timeline-item
|
v-for="(activity, index) in activities"
|
:key="index"
|
:icon="activity.icon"
|
:type="activity.type"
|
:color="activity.color"
|
:size="activity.size"
|
:timestamp="activity.timestamp"
|
placement="top"
|
/>
|
</el-timeline>
|
</el-aside>
|
<el-container>
|
<el-header class="text-header">
|
<el-row><el-col :span="24">
|
<i
|
class="el-icon-bell"
|
style=" color: #a32c30; margin-right: 10px;"
|
/>提示：文件不要超过10个，单个文件大小不超过50M，单击或者拖动文件到下面区域，支持单个或批量文件的上传。</el-col>
|
</el-row>
|
<el-row style="background-color: rgba(0,0,0,0.2);">
|
<el-col :span="19">
|
<el-checkbox v-model="checkAll" class="myRedCheckBox" style="color: #000; margin-left: 20px;">全选</el-checkbox></el-col>
|
<el-col :span="5">
|
<el-button type="primary" icon="el-icon-download" size="mini">下载</el-button>
|
<el-button type="primary" icon="el-icon-search" size="mini">删除</el-button>
|
</el-col>
|
</el-row>
|
</el-header>
|
<el-main style="background-color: #fff;">
|
<el-row>
|
<el-col :span="3">
|
<el-card shadow="never">
|
<img src="../../assets/uploading/word.png" class="uploading-image">
|
<div style="padding-top: 14px;">
|
<el-checkbox v-model="checked" class="myRedCheckBox">文件1.pdf</el-checkbox>
|
</div>
|
</el-card>
|
</el-col>
|
<el-col :span="3">
|
<el-card shadow="never">
|
<img src="../../assets/uploading/pdf.png" class="uploading-image">
|
<div style="padding-top: 14px;">
|
<el-checkbox v-model="checked" class="myRedCheckBox">文件1.pdf</el-checkbox>
|
</div>
|
</el-card>
|
</el-col>
|
<el-col :span="3">
|
<el-card shadow="never">
|
<img src="../../assets/uploading/ppt.png" class="uploading-image">
|
<div style="padding-top: 14px;">
|
<el-checkbox v-model="checked" class="myRedCheckBox">文件1.pdf</el-checkbox>
|
</div>
|
</el-card>
|
</el-col>
|
<el-col :span="3">
|
<el-card shadow="never">
|
<img src="../../assets/uploading/excel.png" class="uploading-image">
|
<div style="padding-top: 14px;">
|
<el-checkbox v-model="checked" class="myRedCheckBox">文件1.pdf</el-checkbox>
|
</div>
|
</el-card>
|
</el-col>
|
<el-col :span="3">
|
<el-card shadow="never">
|
<img src="../../assets/uploading/zip.png" class="uploading-image">
|
<div style="padding-top: 14px;">
|
<el-checkbox v-model="checked" class="myRedCheckBox">文件1.pdf</el-checkbox>
|
</div>
|
</el-card>
|
</el-col>
|
<el-col :span="3">
|
<el-card shadow="never">
|
<img src="../../assets/uploading/txt.png" class="uploading-image">
|
<div style="padding-top: 14px;">
|
<el-checkbox v-model="checked" class="myRedCheckBox">文件1.pdf</el-checkbox>
|
</div>
|
</el-card>
|
</el-col>
|
<el-col :span="3">
|
<el-card shadow="never">
|
<img src="../../assets/uploading/txt.png" class="uploading-image">
|
<div style="padding-top: 14px;">
|
<el-checkbox v-model="checked" class="myRedCheckBox">文件1.pdf</el-checkbox>
|
</div>
|
</el-card>
|
</el-col>
|
<el-col :span="3">
|
<el-card shadow="never">
|
<img src="../../assets/uploading/txt.png" class="uploading-image">
|
<div style="padding-top: 14px;">
|
<el-checkbox v-model="checked" class="myRedCheckBox">文件1.pdf</el-checkbox>
|
</div>
|
</el-card>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="3">
|
<el-card shadow="never">
|
<img src="../../assets/uploading/word.png" class="uploading-image">
|
<div style="padding-top: 14px;">
|
<el-checkbox v-model="checked" class="myRedCheckBox">文件1.pdf</el-checkbox>
|
</div>
|
</el-card>
|
</el-col>
|
<el-col :span="3">
|
<el-card shadow="never">
|
<img src="../../assets/uploading/pdf.png" class="uploading-image">
|
<div style="padding-top: 14px;">
|
<el-checkbox v-model="checked" class="myRedCheckBox">文件1.pdf</el-checkbox>
|
</div>
|
</el-card>
|
</el-col>
|
<el-col :span="3">
|
<el-card shadow="never">
|
<img src="../../assets/uploading/ppt.png" class="uploading-image">
|
<div style="padding-top: 14px;">
|
<el-checkbox v-model="checked" class="myRedCheckBox">文件1.pdf</el-checkbox>
|
</div>
|
</el-card>
|
</el-col>
|
<el-col :span="3">
|
<el-card shadow="never">
|
<img src="../../assets/uploading/excel.png" class="uploading-image">
|
<div style="padding-top: 14px;">
|
<el-checkbox v-model="checked" class="myRedCheckBox">文件1.pdf</el-checkbox>
|
</div>
|
</el-card>
|
</el-col>
|
<el-col :span="3">
|
<el-card shadow="never">
|
<img src="../../assets/uploading/zip.png" class="uploading-image">
|
<div style="padding-top: 14px;">
|
<el-checkbox v-model="checked" class="myRedCheckBox">文件1.pdf</el-checkbox>
|
</div>
|
</el-card>
|
</el-col>
|
<el-col :span="3">
|
<el-card shadow="never">
|
<img src="../../assets/uploading/txt.png" class="uploading-image">
|
<div style="padding-top: 14px;">
|
<el-checkbox v-model="checked" class="myRedCheckBox">文件1.pdf</el-checkbox>
|
</div>
|
</el-card>
|
</el-col>
|
<el-col :span="3">
|
<el-card shadow="never">
|
<img src="../../assets/uploading/txt.png" class="uploading-image">
|
<div style="padding-top: 14px;">
|
<el-checkbox v-model="checked" class="myRedCheckBox">文件1.pdf</el-checkbox>
|
</div>
|
</el-card>
|
</el-col>
|
<el-col :span="3">
|
<el-card shadow="never">
|
<img src="../../assets/uploading/txt.png" class="uploading-image">
|
<div style="padding-top: 14px;">
|
<el-checkbox v-model="checked" class="myRedCheckBox">文件1.pdf</el-checkbox>
|
</div>
|
</el-card>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="3">
|
<el-card shadow="never">
|
<img src="../../assets/uploading/word.png" class="uploading-image">
|
<div style="padding-top: 14px;">
|
<el-checkbox v-model="checked" class="myRedCheckBox">文件1.pdf</el-checkbox>
|
</div>
|
</el-card>
|
</el-col>
|
<el-col :span="3">
|
<el-card shadow="never">
|
<img src="../../assets/uploading/pdf.png" class="uploading-image">
|
<div style="padding-top: 14px;">
|
<el-checkbox v-model="checked" class="myRedCheckBox">文件1.pdf</el-checkbox>
|
</div>
|
</el-card>
|
</el-col>
|
<el-col :span="3">
|
<el-card shadow="never">
|
<img src="../../assets/uploading/ppt.png" class="uploading-image">
|
<div style="padding-top: 14px;">
|
<el-checkbox v-model="checked" class="myRedCheckBox">文件1.pdf</el-checkbox>
|
</div>
|
</el-card>
|
</el-col>
|
<el-col :span="3">
|
<el-card shadow="never">
|
<img src="../../assets/uploading/excel.png" class="uploading-image">
|
<div style="padding-top: 14px;">
|
<el-checkbox v-model="checked" class="myRedCheckBox">文件1.pdf</el-checkbox>
|
</div>
|
</el-card>
|
</el-col>
|
<el-col :span="3">
|
<el-card shadow="never">
|
<img src="../../assets/uploading/zip.png" class="uploading-image">
|
<div style="padding-top: 14px;">
|
<el-checkbox v-model="checked" class="myRedCheckBox">文件1.pdf</el-checkbox>
|
</div>
|
</el-card>
|
</el-col>
|
<el-col :span="3">
|
<el-card shadow="never">
|
<img src="../../assets/uploading/txt.png" class="uploading-image">
|
<div style="padding-top: 14px;">
|
<el-checkbox v-model="checked" class="myRedCheckBox">文件1.pdf</el-checkbox>
|
</div>
|
</el-card>
|
</el-col>
|
<el-col :span="3">
|
<el-card shadow="never">
|
<img src="../../assets/uploading/txt.png" class="uploading-image">
|
<div style="padding-top: 14px;">
|
<el-checkbox v-model="checked" class="myRedCheckBox">文件1.pdf</el-checkbox>
|
</div>
|
</el-card>
|
</el-col>
|
<el-col :span="3">
|
<el-card shadow="never">
|
<el-upload
|
class="avatar-uploader"
|
action="https://jsonplaceholder.typicode.com/posts/"
|
:show-file-list="false"
|
:on-success="handleAvatarSuccess"
|
:before-upload="beforeAvatarUpload"
|
drag
|
>
|
<img v-if="imageUrl" :src="imageUrl" class="avatar">
|
<i v-else class="el-icon-upload" />
|
</el-upload>
|
</el-card>
|
</el-col>
|
</el-row>
|
</el-main>
|
</el-container>
|
</el-container>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
checked: false,
|
checkAll: false,
|
activities: [
|
{
|
timestamp: '自定义文件夹1'
|
},
|
{
|
color: '#a32c30',
|
timestamp: '自定义文件夹2'
|
},
|
{
|
timestamp: '自定义文件夹3'
|
},
|
{
|
timestamp: '自定义文件夹4'
|
}
|
]
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
|
.clearfix:before,
|
.clearfix:after {
|
display: table;
|
content: "";
|
}
|
|
.clearfix:after {
|
clear: both
|
}
|
|
.zs-main {
|
.search-title {
|
height: 50px;
|
.search {
|
position: relative;
|
top: 50%;
|
transform: translateY(-50%);
|
}
|
.title {
|
position: relative;
|
top: 40%;
|
transform: translateY(-50%);
|
}
|
.zs-title{
|
border-left: 4px solid #a32c30;
|
padding-left: 10px;
|
font-size: 16px;
|
}
|
}
|
.add-folder-but{
|
margin-bottom: 20px;
|
}
|
padding: 0 15px 0 15px;
|
.text-header {
|
line-height: 60px;
|
}
|
.uploading-image {
|
width: 100%;
|
height: 100%;
|
display: block;
|
}
|
|
}
|
|
.el-timeline-item__timestamp {
|
font-size: 15px;
|
color: #000;
|
}
|
|
/* 设置带边框的checkbox，选中后边框的颜色 */
|
.myRedCheckBox.is-bordered.is-checked {
|
border-color: #a32c30;
|
}
|
|
/* 设置选中后的文字颜色 */
|
.myRedCheckBox .el-checkbox__input.is-checked+.el-checkbox__label {
|
color: #a32c30;
|
}
|
|
/* 设置选中后对勾框的边框和背景颜色 */
|
.myRedCheckBox .el-checkbox__input.is-checked .el-checkbox__inner, .myRedCheckBox .el-checkbox__input.is-indeterminate .el-checkbox__inner {
|
border-color: #a32c30;
|
background-color:#a32c30;
|
}
|
|
/* 设置checkbox获得焦点后，对勾框的边框颜色 */
|
.myRedCheckBox .el-checkbox__input.is-focus .el-checkbox__inner{
|
border-color: #a32c30;
|
}
|
|
/* 设置鼠标经过对勾框，对勾框边框的颜色 */
|
.myRedCheckBox .el-checkbox__inner:hover{
|
border-color: #a32c30;
|
}
|
|
.avatar-uploader .el-upload {
|
border: 1px dashed #d9d9d9;
|
border-radius: 6px;
|
cursor: pointer;
|
position: relative;
|
overflow: hidden;
|
}
|
.avatar-uploader .el-upload:hover {
|
border-color: #409EFF;
|
}
|
.avatar-uploader-icon {
|
font-size: 28px;
|
color: #8c939d;
|
width: 178px;
|
height: 178px;
|
line-height: 178px;
|
text-align: center;
|
}
|
.avatar {
|
width: 178px;
|
height: 178px;
|
display: block;
|
}
|
.avatar-uploader .el-upload-dragger .el-icon-upload {
|
margin: 20px 0 16px;
|
}
|
.avatar-uploader .el-upload-dragger {
|
border: none;
|
width: 100px;
|
height: 100px;
|
}
|
</style>
|
<style lang="scss" scoped>
|
.el-main{
|
margin-top: 1%;
|
height: 500px;
|
}
|
.app-main {
|
background-color: #ffffff;
|
}
|
.el-button,
|
.el-button--primary {
|
background: #a32c30;
|
border-color: #a32c30;
|
color: #fff;
|
outline: none;
|
}
|
.zs-main .text-header {
|
line-height: 40px;
|
}
|
.el-card {
|
border: none;
|
}
|
|
</style>
|
