|
|
@@ -0,0 +1,382 @@
|
|
|
+<template>
|
|
|
+ <div class="container">
|
|
|
+ <!-- 搜索标题 -->
|
|
|
+ <div class="searchTitle">
|
|
|
+ <el-icon>
|
|
|
+ <ArrowLeftBold />
|
|
|
+ </el-icon>
|
|
|
+ <div class="colLine"></div>
|
|
|
+ <div class="searchTitle_text">“边缘代理”的搜索结果</div>
|
|
|
+ </div>
|
|
|
+ <!-- 搜索选项 -->
|
|
|
+ <div class="searchType">
|
|
|
+ <div class="searchFor">
|
|
|
+ <div class="search_title">搜索对象：</div>
|
|
|
+ <el-tabs
|
|
|
+ v-model="searchFor"
|
|
|
+ class="demo-tabs"
|
|
|
+ @tab-click="changeSearchFor"
|
|
|
+ >
|
|
|
+ <el-tab-pane label="综合" name="first"></el-tab-pane>
|
|
|
+ <el-tab-pane label="标题" name="second"></el-tab-pane>
|
|
|
+ <el-tab-pane label="内容" name="third"></el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ </div>
|
|
|
+ <div class="line"></div>
|
|
|
+ <div class="searchFor">
|
|
|
+ <div class="search_title">分类：</div>
|
|
|
+ <el-tabs
|
|
|
+ v-model="searchType"
|
|
|
+ class="demo-tabs"
|
|
|
+ @tab-click="changeSearchFor"
|
|
|
+ >
|
|
|
+ <el-tab-pane label="文档" name="1"></el-tab-pane>
|
|
|
+ <el-tab-pane label="图片" name="2"></el-tab-pane>
|
|
|
+ <el-tab-pane label="分类" name="3"></el-tab-pane>
|
|
|
+ <el-tab-pane label="视频" name="4"></el-tab-pane>
|
|
|
+ <el-tab-pane label="压缩包" name="5"></el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 排序显示 -->
|
|
|
+ <div class="statistics">
|
|
|
+ <div class="left_box">
|
|
|
+ <el-checkbox v-model="checkState" size="large" />
|
|
|
+ <div class="dataNum">共3项</div>
|
|
|
+ </div>
|
|
|
+ <div class="right_box">
|
|
|
+ <img src="@/assets/images/sort.png" alt="" />
|
|
|
+ <img src="@/assets/images/squre.png" alt="" @click="changeShow"/>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 文件列表 -->
|
|
|
+ <div class="fileList">
|
|
|
+ <div v-if="isList">
|
|
|
+ <!-- 表格 -->
|
|
|
+ <el-table
|
|
|
+ :data="tableData"
|
|
|
+ style="width: 100%"
|
|
|
+ height="100%"
|
|
|
+ :scrollbar-always-on="true"
|
|
|
+ >
|
|
|
+ <el-table-column fixed prop="date" label="名称" width="500">
|
|
|
+ <template #default="scope">
|
|
|
+ <div>
|
|
|
+ <img
|
|
|
+ class="table_icon"
|
|
|
+ src="@/assets/images/fileBox.png"
|
|
|
+ alt=""
|
|
|
+ style=""
|
|
|
+ />
|
|
|
+ {{ scope.row.date }}
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="name" label="时间" width="200" />
|
|
|
+ <el-table-column prop="state" label="类型" width="180" />
|
|
|
+ <el-table-column prop="city" label="大小" width="160" />
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ <div v-else>
|
|
|
+ <!-- 平铺 -->
|
|
|
+ <div class="tile_box">
|
|
|
+ <div class="file_box" v-for="item in 20" :key="item">
|
|
|
+ <img
|
|
|
+ class="big_file_img"
|
|
|
+ src="@/assets/images/fileType//file／DOC.png"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ <span>Inceptos</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { ref } from "vue";
|
|
|
+const searchFor = ref("first"); //搜索对象
|
|
|
+const searchType = ref("1"); //搜索对象
|
|
|
+const checkState = ref(false); //勾选框状态
|
|
|
+const activeNames = ref(["folder", "file"]);
|
|
|
+const isList = ref(true); //控制显示方式
|
|
|
+
|
|
|
+const tableData = [
|
|
|
+ {
|
|
|
+ date: "2016-05-03",
|
|
|
+ name: "Tom",
|
|
|
+ state: "California",
|
|
|
+ city: "Los Angeles",
|
|
|
+ address: "No. 189, Grove St, Los Angeles",
|
|
|
+ zip: "CA 90036",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ date: "2016-05-02",
|
|
|
+ name: "Tom",
|
|
|
+ state: "California",
|
|
|
+ city: "Los Angeles",
|
|
|
+ address: "No. 189, Grove St, Los Angeles",
|
|
|
+ zip: "CA 90036",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ date: "2016-05-04",
|
|
|
+ name: "Tom",
|
|
|
+ state: "California",
|
|
|
+ city: "Los Angeles",
|
|
|
+ address: "No. 189, Grove St, Los Angeles",
|
|
|
+ zip: "CA 90036",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ date: "2016-05-01",
|
|
|
+ name: "Tom",
|
|
|
+ state: "California",
|
|
|
+ city: "Los Angeles",
|
|
|
+ address: "No. 189, Grove St, Los Angeles",
|
|
|
+ zip: "CA 90036",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ date: "2016-05-08",
|
|
|
+ name: "Tom",
|
|
|
+ state: "California",
|
|
|
+ city: "Los Angeles",
|
|
|
+ address: "No. 189, Grove St, Los Angeles",
|
|
|
+ zip: "CA 90036",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ date: "2016-05-06",
|
|
|
+ name: "Tom",
|
|
|
+ state: "California",
|
|
|
+ city: "Los Angeles",
|
|
|
+ address: "No. 189, Grove St, Los Angeles",
|
|
|
+ zip: "CA 90036",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ date: "2016-05-07",
|
|
|
+ name: "Tom",
|
|
|
+ state: "California",
|
|
|
+ city: "Los Angeles",
|
|
|
+ address: "No. 189, Grove St, Los Angeles",
|
|
|
+ zip: "CA 90036",
|
|
|
+ },
|
|
|
+];
|
|
|
+const changeSearchFor = () => {
|
|
|
+ console.log();
|
|
|
+};
|
|
|
+const changeShow = ()=>{
|
|
|
+ isList.value = !isList.value
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.container {
|
|
|
+ height: 100%;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 4px;
|
|
|
+}
|
|
|
+.searchTitle {
|
|
|
+ width: 100%;
|
|
|
+ height: 40px;
|
|
|
+ padding-left: 8px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .colLine {
|
|
|
+ margin-left: 5px;
|
|
|
+ height: 100%;
|
|
|
+ border-right: 1px solid #c1cce3;
|
|
|
+ }
|
|
|
+ .searchTitle_text {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 24px;
|
|
|
+ margin-left: 16px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.searchType {
|
|
|
+ width: 100%;
|
|
|
+ height: 40px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background-color: #f5f7f9;
|
|
|
+ border-top: 1px solid #c1cce3;
|
|
|
+ border-bottom: 1px solid #c1cce3;
|
|
|
+ padding-left: 16px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .searchFor {
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ // align-items: center;
|
|
|
+ .search_title {
|
|
|
+ height: 100%;
|
|
|
+ line-height: 40px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 500;
|
|
|
+ font-family: Inter-Medium;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .line {
|
|
|
+ width: 1px;
|
|
|
+ height: 24px;
|
|
|
+ border-left: 1px solid #c1cce3;
|
|
|
+ margin: 0 16px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.statistics {
|
|
|
+ width: 100%;
|
|
|
+ height: 40px;
|
|
|
+ // background-color: #ccc;
|
|
|
+ padding-left: 16px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ .left_box {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .dataNum {
|
|
|
+ margin-left: 4px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right_box {
|
|
|
+ width: 50px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-right: 30px;
|
|
|
+ img {
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.fileList{
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+// tag间距
|
|
|
+::v-deep .el-tabs__item {
|
|
|
+ padding: 0 16px !important;
|
|
|
+ color: #505870 !important;
|
|
|
+ font-weight: 400 !important;
|
|
|
+}
|
|
|
+::v-deep .el-tabs--top .el-tabs__item.is-top:nth-child(2) {
|
|
|
+ padding-left: 0 !important;
|
|
|
+}
|
|
|
+::v-deep .el-tabs--top .el-tabs__item.is-top:last-child {
|
|
|
+ padding-right: 0 !important;
|
|
|
+}
|
|
|
+// tag选中颜色
|
|
|
+::v-deep .el-tabs__item.is-active {
|
|
|
+ color: #2e6bc8 !important;
|
|
|
+ font-weight: normal;
|
|
|
+ font-family: Inter-SemiBold;
|
|
|
+}
|
|
|
+::v-deep .el-tabs__active-bar {
|
|
|
+ background-color: #2e6bc8;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+::v-deep .el-table__inner-wrapper::before{
|
|
|
+ background-color: #fff !important;
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .el-collapse,.el-collapse-item__wrap {
|
|
|
+ border: none;
|
|
|
+}
|
|
|
+.table_icon {
|
|
|
+ height: 27px;
|
|
|
+ width: 27px;
|
|
|
+ vertical-align: middle;
|
|
|
+}
|
|
|
+::v-deep .el-collapse-item__content {
|
|
|
+ padding-bottom: 0;
|
|
|
+}
|
|
|
+::v-deep .el-collapse-item__header {
|
|
|
+ background-color: #ebeff6 !important;
|
|
|
+ width: 100% !important;
|
|
|
+ height: 24px !important;
|
|
|
+}
|
|
|
+::v-deep .el-collapse-item__arrow {
|
|
|
+ position: relative;
|
|
|
+ color: #2e6bc8;
|
|
|
+ right: 97%;
|
|
|
+}
|
|
|
+::v-deep .el-table td.el-table__cell {
|
|
|
+ border: none;
|
|
|
+ font-size: 14px !important;
|
|
|
+ font-weight: 400 !important;
|
|
|
+ color: #000 !important;
|
|
|
+}
|
|
|
+::v-deep .el-table__row {
|
|
|
+ height: 35px !important;
|
|
|
+}
|
|
|
+::v-deep .el-table .el-table__header-wrapper th {
|
|
|
+ border-bottom: none;
|
|
|
+ border-right: 1px solid #c1cce3;
|
|
|
+ background-color: #fff !important;
|
|
|
+ color: #505870;
|
|
|
+ font-size: 14px;
|
|
|
+}
|
|
|
+.collapseItem_title {
|
|
|
+ position: relative;
|
|
|
+ left: 40px;
|
|
|
+ color: #2e6bc8;
|
|
|
+ font-family: Inter-Medium;
|
|
|
+ font-size: 12px;
|
|
|
+}
|
|
|
+// 表格右边3个靠右对齐
|
|
|
+::v-deep .el-table__header thead tr th {
|
|
|
+ font-family: Inter-Medium;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #505870;
|
|
|
+ text-align: right;
|
|
|
+ &:nth-child(1) {
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+}
|
|
|
+// ::v-deep .el-table__body tbody [class*="column_2"] {
|
|
|
+// text-align: right;
|
|
|
+// }
|
|
|
+// ::v-deep .el-table__body tbody [class*="column_3"] {
|
|
|
+// text-align: right;
|
|
|
+// }
|
|
|
+// ::v-deep .el-table__body tbody [class*="column_4"] {
|
|
|
+// text-align: right;
|
|
|
+// }
|
|
|
+// ::v-deep .el-table__body tbody [class*="column_6"] {
|
|
|
+// text-align: right;
|
|
|
+// }
|
|
|
+// ::v-deep .el-table__body tbody [class*="column_7"] {
|
|
|
+// text-align: right;
|
|
|
+// }
|
|
|
+::v-deep .el-table__body tbody [class*="column_"] {
|
|
|
+ text-align: right;
|
|
|
+ &:nth-child(4n+1){
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+}
|
|
|
+//平铺
|
|
|
+.tile_box {
|
|
|
+ width: 100%;
|
|
|
+ height: 300px;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ .file_box {
|
|
|
+ width: 116px;
|
|
|
+ min-height: 138px;
|
|
|
+ // border: 1px solid #000;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ .big_file_img {
|
|
|
+ width: 100px;
|
|
|
+ height: 100px;
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 22px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
liuQiang