From 601ebdfe8ec5d8109148763dc983663ea749e407 Mon Sep 17 00:00:00 2001
From: yz_08 <yz_0812@outlook.com>
Date: 星期四, 04 二月 2021 23:02:12 +0800
Subject: [PATCH] 修改员工智搜
---
src/assets/uploading/ppt.png | 0
src/assets/uploading/SVG.png | 0
src/views/system/user.vue | 10
src/assets/uploading/html.png | 0
src/views/user/search.vue | 11
src/views/yunpan/fujian.vue | 10
src/assets/uploading/WebPage.png | 0
src/assets/uploading/csv.png | 0
src/assets/uploading/folder.png | 0
src/views/user/Informationinput.vue | 10
src/assets/uploading/MP4.png | 0
src/views/yunpan/zhishou.vue | 479 ++++++++++++++++++++++++++++-----
src/assets/uploading/unknown .png | 0
src/assets/uploading/MP3.png | 0
src/views/user/inemployees.vue | 11
src/views/user/outemployess.vue | 10
src/views/statistics/outEmpCount.vue | 14
src/assets/uploading/apk.png | 0
src/assets/uploading/exe.png | 0
src/views/statistics/inEmpCount.vue | 12
src/views/user/selectuser.vue | 260 +++++++++---------
src/assets/uploading/json.png | 0
src/assets/uploading/pic.png | 0
src/assets/uploading/rar.png | 0
src/assets/uploading/zip.png | 0
src/assets/uploading/word.png | 0
src/assets/uploading/pdf.png | 0
src/assets/uploading/GIF.png | 0
src/assets/uploading/txt.png | 0
src/assets/uploading/excel.png | 0
30 files changed, 586 insertions(+), 241 deletions(-)
diff --git a/src/assets/uploading/GIF.png b/src/assets/uploading/GIF.png
new file mode 100644
index 0000000..3122475
--- /dev/null
+++ b/src/assets/uploading/GIF.png
Binary files differ
diff --git a/src/assets/uploading/MP3.png b/src/assets/uploading/MP3.png
new file mode 100644
index 0000000..1da886f
--- /dev/null
+++ b/src/assets/uploading/MP3.png
Binary files differ
diff --git a/src/assets/uploading/MP4.png b/src/assets/uploading/MP4.png
new file mode 100644
index 0000000..7d445b9
--- /dev/null
+++ b/src/assets/uploading/MP4.png
Binary files differ
diff --git a/src/assets/uploading/SVG.png b/src/assets/uploading/SVG.png
new file mode 100644
index 0000000..b022a63
--- /dev/null
+++ b/src/assets/uploading/SVG.png
Binary files differ
diff --git a/src/assets/uploading/WebPage.png b/src/assets/uploading/WebPage.png
new file mode 100644
index 0000000..5f09ff4
--- /dev/null
+++ b/src/assets/uploading/WebPage.png
Binary files differ
diff --git a/src/assets/uploading/apk.png b/src/assets/uploading/apk.png
new file mode 100644
index 0000000..82903d7
--- /dev/null
+++ b/src/assets/uploading/apk.png
Binary files differ
diff --git a/src/assets/uploading/csv.png b/src/assets/uploading/csv.png
new file mode 100644
index 0000000..2ee3396
--- /dev/null
+++ b/src/assets/uploading/csv.png
Binary files differ
diff --git a/src/assets/uploading/excel.png b/src/assets/uploading/excel.png
new file mode 100644
index 0000000..9b4c579
--- /dev/null
+++ b/src/assets/uploading/excel.png
Binary files differ
diff --git a/src/assets/uploading/exe.png b/src/assets/uploading/exe.png
new file mode 100644
index 0000000..0bea7d1
--- /dev/null
+++ b/src/assets/uploading/exe.png
Binary files differ
diff --git a/src/assets/uploading/folder.png b/src/assets/uploading/folder.png
new file mode 100644
index 0000000..a6f359f
--- /dev/null
+++ b/src/assets/uploading/folder.png
Binary files differ
diff --git a/src/assets/uploading/html.png b/src/assets/uploading/html.png
new file mode 100644
index 0000000..f9a3ac9
--- /dev/null
+++ b/src/assets/uploading/html.png
Binary files differ
diff --git a/src/assets/uploading/json.png b/src/assets/uploading/json.png
new file mode 100644
index 0000000..eb5a6ee
--- /dev/null
+++ b/src/assets/uploading/json.png
Binary files differ
diff --git a/src/assets/uploading/pdf.png b/src/assets/uploading/pdf.png
new file mode 100644
index 0000000..793bf28
--- /dev/null
+++ b/src/assets/uploading/pdf.png
Binary files differ
diff --git a/src/assets/uploading/pic.png b/src/assets/uploading/pic.png
new file mode 100644
index 0000000..4f3261d
--- /dev/null
+++ b/src/assets/uploading/pic.png
Binary files differ
diff --git a/src/assets/uploading/ppt.png b/src/assets/uploading/ppt.png
new file mode 100644
index 0000000..ec684a8
--- /dev/null
+++ b/src/assets/uploading/ppt.png
Binary files differ
diff --git a/src/assets/uploading/rar.png b/src/assets/uploading/rar.png
new file mode 100644
index 0000000..56982c5
--- /dev/null
+++ b/src/assets/uploading/rar.png
Binary files differ
diff --git a/src/assets/uploading/txt.png b/src/assets/uploading/txt.png
new file mode 100644
index 0000000..fc239f1
--- /dev/null
+++ b/src/assets/uploading/txt.png
Binary files differ
diff --git a/src/assets/uploading/unknown .png b/src/assets/uploading/unknown .png
new file mode 100644
index 0000000..eba51a7
--- /dev/null
+++ b/src/assets/uploading/unknown .png
Binary files differ
diff --git a/src/assets/uploading/word.png b/src/assets/uploading/word.png
new file mode 100644
index 0000000..a7e2ef7
--- /dev/null
+++ b/src/assets/uploading/word.png
Binary files differ
diff --git a/src/assets/uploading/zip.png b/src/assets/uploading/zip.png
new file mode 100644
index 0000000..8ee9923
--- /dev/null
+++ b/src/assets/uploading/zip.png
Binary files differ
diff --git a/src/views/statistics/inEmpCount.vue b/src/views/statistics/inEmpCount.vue
index 3c01f2b..fd3c296 100644
--- a/src/views/statistics/inEmpCount.vue
+++ b/src/views/statistics/inEmpCount.vue
@@ -247,6 +247,12 @@
}
}
</script>
+<style lang="scss" scoped>
+
+ .el-main {
+ height: 600px;
+ }
+</style>
<style lang="scss">
.el-aside {
padding: 20px;
@@ -256,10 +262,6 @@
.el-tree {
height: 100%;
}
- }
-
- .el-main {
- height: 600px;
}
#searchTable {
@@ -316,4 +318,4 @@
.del_button {
color: #D9001B;
}
-</style>
+</style>
diff --git a/src/views/statistics/outEmpCount.vue b/src/views/statistics/outEmpCount.vue
index 7009c8b..d6fe552 100644
--- a/src/views/statistics/outEmpCount.vue
+++ b/src/views/statistics/outEmpCount.vue
@@ -247,7 +247,13 @@
}
}
</script>
-<style lang="scss">
+<style lang="scss" scoped>
+
+ .el-main {
+ height: 600px;
+ }
+</style>
+<style >
.el-aside {
padding: 20px;
background: #f3f5f8;
@@ -256,10 +262,6 @@
.el-tree {
height: 100%;
}
- }
-
- .el-main {
- height: 600px;
}
#searchTable {
@@ -316,4 +318,4 @@
.del_button {
color: #D9001B;
}
-</style>
+</style>
diff --git a/src/views/system/user.vue b/src/views/system/user.vue
index f4fe5bd..c17c78c 100644
--- a/src/views/system/user.vue
+++ b/src/views/system/user.vue
@@ -1026,6 +1026,12 @@
}
}
</script>
+<style lang="scss" scoped>
+
+ .el-main {
+ height: 600px;
+ }
+</style>
<style lang="scss">
.el-aside {
padding: 20px;
@@ -1035,10 +1041,6 @@
.el-tree {
height: 100%;
}
- }
-
- .el-main {
- height: 600px;
}
#searchTable {
diff --git a/src/views/user/Informationinput.vue b/src/views/user/Informationinput.vue
index 2b48fa9..7293bc2 100644
--- a/src/views/user/Informationinput.vue
+++ b/src/views/user/Informationinput.vue
@@ -4248,16 +4248,16 @@
margin-top: 20px;
}
+</style>
+<style lang="scss" scoped>
+.el-autocomplete{
+ width: 100%;
+}
.el-header,
.el-footer {
background-color: #e9eef3;
color: #333;
text-align: center;
line-height: 60px;
-}
-</style>
-<style lang="scss" scoped>
-.el-autocomplete{
- width: 100%;
}
</style>
diff --git a/src/views/user/inemployees.vue b/src/views/user/inemployees.vue
index e26d69b..0903dd8 100644
--- a/src/views/user/inemployees.vue
+++ b/src/views/user/inemployees.vue
@@ -1211,6 +1211,12 @@
}
}
</script>
+<style lang="scss" scoped>
+
+ .el-main {
+ height: 600px;
+ }
+</style>
<style lang="scss">
.el-aside {
padding: 20px;
@@ -1221,11 +1227,6 @@
height: 100%;
}
}
-
- .el-main {
- height: 600px;
- }
-
#searchTable {
margin-top: 10px;
border-collapse: collapse;
diff --git a/src/views/user/outemployess.vue b/src/views/user/outemployess.vue
index 8fa4ede..fdb0f33 100644
--- a/src/views/user/outemployess.vue
+++ b/src/views/user/outemployess.vue
@@ -1176,6 +1176,12 @@
}
}
</script>
+<style lang="scss" scoped>
+
+ .el-main {
+ height: 600px;
+ }
+</style>
<style lang="scss">
.el-aside {
padding: 20px;
@@ -1185,10 +1191,6 @@
.el-tree {
height: 100%;
}
- }
-
- .el-main {
- height: 600px;
}
#searchTable {
diff --git a/src/views/user/search.vue b/src/views/user/search.vue
index d6b4a5e..f8e0a9e 100644
--- a/src/views/user/search.vue
+++ b/src/views/user/search.vue
@@ -376,6 +376,12 @@
}
}
</script>
+<style lang="scss" scoped>
+
+ .el-main {
+ height: 600px;
+ }
+</style>
<style lang="scss">
.el-aside {
padding: 20px;
@@ -386,11 +392,6 @@
height: 100%;
}
}
-
- .el-main {
- height: 600px;
- }
-
#searchTable {
margin-top: 10px;
border-collapse: collapse;
diff --git a/src/views/user/selectuser.vue b/src/views/user/selectuser.vue
index c186315..e8a3a1c 100644
--- a/src/views/user/selectuser.vue
+++ b/src/views/user/selectuser.vue
@@ -163,56 +163,56 @@
</el-header>
<el-container>
<el-aside width="400px">
- <el-tree
- ref="tree"
- :data="deptTree"
- :check-strictly="true"
- show-checkbox
- accordion
- node-key="id"
- highlight-current
- default-expand-all
- :filter-node-method="filterNode"
- @node-click="nodeClick"
+ <el-tree
+ ref="tree"
+ :data="deptTree"
+ :check-strictly="true"
+ show-checkbox
+ accordion
+ node-key="id"
+ highlight-current
+ default-expand-all
+ :filter-node-method="filterNode"
+ @node-click="nodeClick"
/>
</el-aside>
<el-main>
- <el-table
- ref="multipleTable"
- :data="list"
- style="width: 100%;height: 80%;"
+ <el-table
+ ref="multipleTable"
+ :data="list"
+ style="width: 100%;height: 80%;"
row-key="prop1"
- @selection-change="handleSelectionChange"
+ @selection-change="handleSelectionChange"
>
<el-table-column type="selection" :reserve-selection="true" width="55" />
- <el-table-column :label="$t('table.user.username')" prop="username" :show-overflow-tooltip="true" align="center" min-width="120px">
- <template slot-scope="scope">
- <span>{{ scope.row.username }}</span>
- </template>
- </el-table-column>
- <el-table-column :label="$t('table.user.email')" :show-overflow-tooltip="true" align="center" min-width="150px">
- <template slot-scope="scope">
- <span>{{ scope.row.email }}</span>
- </template>
- </el-table-column>
- <el-table-column
- :label="$t('table.user.sex')"
- :filters="[{ text: $t('common.sex.male'), value: '0' }, { text: $t('common.sex.female'), value: '1' }, { text: $t('common.sex.secret'), value: '2' }]"
- :filter-method="filterSex"
- class-name="status-col"
- >
- <template slot-scope="{row}">
- <el-tag :type="row.sex | sexFilter">
- {{ transSex(row.sex) }}
- </el-tag>
- </template>
- </el-table-column>
- </el-table>
- <!--
- page.sync 当前页
- limit.sync 每页显示数量 只能是5，10，20，30，50
- pagination 翻页的事件
- -->
+ <el-table-column :label="$t('table.user.username')" prop="username" :show-overflow-tooltip="true" align="center" min-width="120px">
+ <template slot-scope="scope">
+ <span>{{ scope.row.username }}</span>
+ </template>
+ </el-table-column>
+ <el-table-column :label="$t('table.user.email')" :show-overflow-tooltip="true" align="center" min-width="150px">
+ <template slot-scope="scope">
+ <span>{{ scope.row.email }}</span>
+ </template>
+ </el-table-column>
+ <el-table-column
+ :label="$t('table.user.sex')"
+ :filters="[{ text: $t('common.sex.male'), value: '0' }, { text: $t('common.sex.female'), value: '1' }, { text: $t('common.sex.secret'), value: '2' }]"
+ :filter-method="filterSex"
+ class-name="status-col"
+ >
+ <template slot-scope="{row}">
+ <el-tag :type="row.sex | sexFilter">
+ {{ transSex(row.sex) }}
+ </el-tag>
+ </template>
+ </el-table-column>
+ </el-table>
+ <!--
+ page.sync 当前页
+ limit.sync 每页显示数量 只能是5，10，20，30，50
+ pagination 翻页的事件
+ -->
<pagination v-show="total>0" :total="total" :page.sync="pagination.num" :limit.sync="pagination.size" @pagination="search" />
<el-button type="primary" @click="sureChoose">确定</el-button>
<el-button type="danger" @click="cancleChoose">取消</el-button>
@@ -221,96 +221,96 @@
</el-container>
</div>
</template>
-<script>
-// 引用翻页组件
+<script>
+// 引用翻页组件
import Pagination from '@/components/Pagination'
-export default {
+export default {
components: { Pagination },
data() {
return {
- headerHeight: '70px',
+ headerHeight: '70px',
deptTree: [],
- advancedQueryShow: false,
+ advancedQueryShow: false,
selection: [],
- multipleSelection: [],
- total: 0, // 总数量
- queryParams: {}, // 查询参数
- sort: {}, // 排序
- pagination: { // 分页参数
- size: 5,
- num: 1
+ multipleSelection: [],
+ total: 0, // 总数量
+ queryParams: {}, // 查询参数
+ sort: {}, // 排序
+ pagination: { // 分页参数
+ size: 5,
+ num: 1
},
- list: [], // 给table显示的数据
+ list: [], // 给table显示的数据
defaultProps: {
children: 'children',
label: 'label'
}
}
- },
- mounted() {
- this.initDeptTree()
- // 初始加载
- this.fetch()
},
- methods: {
- initDept() {
- return {
- deptId: '',
- deptName: '',
- parentId: null,
- orderNum: 0
- }
- },
- transSex(sex) {
- switch (sex) {
- case '0':
- return this.$t('common.sex.male')
- case '1':
- return this.$t('common.sex.female')
- default:
- return this.$t('common.sex.secret')
- }
- },
- filterSex(value, row) {
- return row.sex === value
- },
- // 翻页方法
- search() {
- this.fetch({
- ...this.queryParams,
- ...this.sort
- })
- },
- fetch(params = {}) {
- var that = this
- params.pageSize = this.pagination.size
- params.pageNum = this.pagination.num
- this.$get('system/user', {
- ...params
- }).then((r) => {
- const data = r.data.data
- that.total = data.total
- that.list = data.rows
- })
- },
-
- initDeptTree() {
- this.$get('system/dept').then((r) => {
- this.deptTree = r.data.data.rows
- })
- },
- filterNode(value, data) {
- if (!value) return true
- return data.label.indexOf(value) !== -1
- },
- nodeClick(data) {
- this.dept.parentId = data.parentId
- if (this.dept.parentId === '0') {
- this.dept.parentId = null
- }
- this.dept.orderNum = data.orderNum
- this.dept.deptName = data.label
- this.dept.deptId = data.id
+ mounted() {
+ this.initDeptTree()
+ // 初始加载
+ this.fetch()
+ },
+ methods: {
+ initDept() {
+ return {
+ deptId: '',
+ deptName: '',
+ parentId: null,
+ orderNum: 0
+ }
+ },
+ transSex(sex) {
+ switch (sex) {
+ case '0':
+ return this.$t('common.sex.male')
+ case '1':
+ return this.$t('common.sex.female')
+ default:
+ return this.$t('common.sex.secret')
+ }
+ },
+ filterSex(value, row) {
+ return row.sex === value
+ },
+ // 翻页方法
+ search() {
+ this.fetch({
+ ...this.queryParams,
+ ...this.sort
+ })
+ },
+ fetch(params = {}) {
+ var that = this
+ params.pageSize = this.pagination.size
+ params.pageNum = this.pagination.num
+ this.$get('system/user', {
+ ...params
+ }).then((r) => {
+ const data = r.data.data
+ that.total = data.total
+ that.list = data.rows
+ })
+ },
+
+ initDeptTree() {
+ this.$get('system/dept').then((r) => {
+ this.deptTree = r.data.data.rows
+ })
+ },
+ filterNode(value, data) {
+ if (!value) return true
+ return data.label.indexOf(value) !== -1
+ },
+ nodeClick(data) {
+ this.dept.parentId = data.parentId
+ if (this.dept.parentId === '0') {
+ this.dept.parentId = null
+ }
+ this.dept.orderNum = data.orderNum
+ this.dept.deptName = data.label
+ this.dept.deptId = data.id
},
handleSelectionChange(val) {
this.multipleSelection = val
@@ -326,13 +326,19 @@
},
sureChoose() {
this.$emit('selectedUser', this.multipleSelection)
- },
- cancleChoose() {
- this.$emit('cancleChooseUser')
+ },
+ cancleChoose() {
+ this.$emit('cancleChooseUser')
}
}
}
</script>
+<style lang="scss" scoped>
+
+ .el-main {
+ height: 600px;
+ }
+</style>
<style lang="scss">
.el-aside {
padding: 20px;
@@ -342,10 +348,6 @@
.el-tree {
height: 100%;
}
- }
-
- .el-main {
- height: 600px;
}
#searchTable {
@@ -402,4 +404,4 @@
.del_button {
color: #D9001B;
}
-</style>
+</style>
diff --git a/src/views/yunpan/fujian.vue b/src/views/yunpan/fujian.vue
index 176276e..3d4e4ff 100644
--- a/src/views/yunpan/fujian.vue
+++ b/src/views/yunpan/fujian.vue
@@ -594,6 +594,12 @@
}
}
</script>
+<style lang="scss" scoped>
+
+ .el-main {
+ height: 600px;
+ }
+</style>
<style lang="scss">
.el-aside {
padding: 20px;
@@ -603,10 +609,6 @@
.el-tree {
height: 100%;
}
- }
-
- .el-main {
- height: 600px;
}
#searchTable {
diff --git a/src/views/yunpan/zhishou.vue b/src/views/yunpan/zhishou.vue
index e6512ee..2b89dfa 100644
--- a/src/views/yunpan/zhishou.vue
+++ b/src/views/yunpan/zhishou.vue
@@ -1,83 +1,414 @@
<template>
- <el-container>
- <el-aside width="200px">
- <el-card class="info-card" shadow="always" @click.native="isShow(showArr[0].show,0)">
- 我的文件夹 +
- </el-card>
- <el-card class="info-card" shadow="always" @click.native="isShow(showArr[1].show,1)">
- 自定义文件夹1
- </el-card>
- <el-card class="info-card" shadow="always" @click.native="isShow(showArr[2].show,2)">
- 自定义文件夹2
- </el-card>
- <el-card class="info-card" shadow="always" @click.native="isShow(showArr[3].show,3)">
- 自定义文件夹3
- </el-card>
- <el-card class="info-card" shadow="always" @click.native="isShow(showArr[4].show,4)">
- 自定义文件夹4
- </el-card>
- </el-aside>
- <el-main>
- <el-row>
- <el-col :span="16">
- <h3 class="bu-tian-jia-title">云盘智搜</h3>
- </el-col>
- <el-col :span="8">
- <el-input v-model="input" placeholder="请输入内容" style="width:200px" />
- <el-button type="primary">查询</el-button>
- </el-col>
- </el-row>
- <el-row>
- <el-col :span="30">
- <el-button type="danger">下载</el-button>
- <el-button type="primary">删除</el-button>
- </el-col>
- </el-row>
- <el-row>
- <el-col :span="30">
- <dl>
- <dt><img src="../../../images/fujian.png"></dt>
- <dd><el-checkbox /> 附件名称1.doc</dd>
- </dl>
- <dl>
- <dt><img src="../../../images/fujian.png"></dt>
- <dd><el-checkbox /> 附件名称2.txt</dd>
- </dl>
- <dl>
- <dt><img src="../../../images/fujian.png"></dt>
- <dd><el-checkbox /> 附件名称3.xls</dd>
- </dl>
- <dl>
- <dt><img src="../../../images/fujian.png"></dt>
- <dd><el-checkbox /> 附件名称4.ppt</dd>
- </dl>
- <dl>
- <dt><img src="../../../images/fujian.png"></dt>
- <dd><el-checkbox /> 附件名称1.doc</dd>
- </dl>
- <dl>
- <dt><img src="../../../images/fujian.png"></dt>
- <dd><el-checkbox /> 附件名称1.doc</dd>
- </dl>
- <dl>
- <dt><img src="../../../images/fujian.png"></dt>
- <dd><el-checkbox /> 附件名称1.doc</dd>
- </dl>
- </el-col>
- </el-row>
- </el-main>
- </el-container>
+ <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>
- dl{
- float: left;
- margin-right: 20px;
+<style lang="scss">
+
+ .clearfix:before,
+ .clearfix:after {
+ display: table;
+ content: "";
}
- dd {
- margin-inline-start: 0px;
+
+ .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>
--
Gitblit v1.8.0