jiacheng

src/views/myfile/MyFile.vue

@@ -4,11 +4,144 @@
             <div class="settingBox">
                 <!-- 设置盒子顶部搜索 -->
                 <div class="topSearch">
-                    <el-input v-model="searchFire" class="searchFire" size="large" placeholder="搜索文件">
-                    </el-input>
-                    <el-icon style="font-size: 24px;">
-                        <Plus />
-                    </el-icon>
+                    <div style="position: relative;">
+                        <el-input v-model="searchFire" class="searchFire" size="large" placeholder="搜索文件" />
+                        <el-icon style="color: gray;display: inline-block;position: absolute;top: 8px;right: 5px;">
+                            <Search />
+                        </el-icon>
+                    </div>
+                    <div>
+                        <el-icon style="font-size: 24px;">
+                            <Plus />
+                        </el-icon>
+                    </div>
+                </div>
+                <!-- 方块点击盒子 -->
+                <div style="display: flex;justify-content: flex-start;align-items: center;flex-wrap: wrap;">
+                    <div class="setBox" @click="changeFile">
+                        <!-- <p  @click="">...</p> -->
+                        <el-dropdown trigger="click" class="selectChe">
+                            <span class="el-dropdown-link">
+                                ...
+                            </span>
+                            <template #dropdown>
+                                <el-dropdown-menu>
+                                    <el-dropdown-item>重命名</el-dropdown-item>
+                                    <el-dropdown-item>删除</el-dropdown-item>
+                                </el-dropdown-menu>
+                            </template>
+                        </el-dropdown>
+                        <img src="../../assets/images/fileStyle.png" style="width: 72px;height: 72px;">
+                        <p>xxx文件</p>
+                    </div>
+                </div>
+            </div>
+            <!-- 右侧大盒子 -->
+            <div class="mesBox">
+                <!-- 功能盒子  -->
+                <div class="useBox">
+                    <!-- table切换 -->
+                    <div style="width: 100%;height: 24px;background-color: #7084B4;line-height: 20px;">
+                        <template v-for="(item, index) in menuList">
+                            <span @click="tableChange(item, index)"
+                                :class="['tables', { tableLis: selectedIndex === index }]">
+                                {{ item.name }}
+                                <img v-if="selectedIndex === index ? true : false"
+                                    style="position: absolute;top: 4px;right: 4px;" src="../../assets/images/close.png"
+                                    @click="shotdown(item)">
+                            </span>
+                        </template>
+                    </div>
+                    <!-- 众多功能 -->
+                    <div class="manyUse">
+                        <div
+                            style="display: flex;width: 82px;height: 32px;justify-content: flex-start;align-items: center;">
+                            <div style="margin-left: 5px;">
+                                <el-icon
+                                    style="background-color: #7084B4;width: 24px;height: 24px;border-radius: 50%;color: white;">
+                                    <Plus />
+                                </el-icon>
+                            </div>
+                            <div style="margin-left: 5px;">
+                                <span style="font-size: 14px;">新建</span>
+                            </div>
+                        </div>
+                        <template v-for="(item, index) in useMenu">
+                            <div
+                                style="display: flex;width: 82px;height: 32px;justify-content: flex-start;align-items: center;line-height: 18px;">
+                                <div style="margin-left: 5px;">
+                                    <img :src="item.img" style="width: 24px;height: 24px;" alt="">
+                                </div>
+                                <div style="margin-left: 5px;">
+                                    <span style="font-size: 14px;">{{ item.name }}</span>
+                                </div>
+                            </div>
+                        </template>
+                        <div
+                            style="display: flex;width: 92px;height: 32px;justify-content: flex-start;align-items: center;line-height: 18px;">
+                            <div style="margin-left: 5px;">
+                                <img src="../../assets/images/upload.png" style="width: 24px;height: 24px;" alt="">
+                            </div>
+                            <div style="margin-left: 5px;">
+                                <el-dropdown trigger="click">
+                                    <span style="color: black;">上传
+                                        <el-icon>
+                                            <arrow-down />
+                                        </el-icon>
+                                    </span>
+                                    <template #dropdown>
+                                        <el-dropdown-menu>
+                                            <template v-for="(item, index) in arrorMenu">
+                                                <el-dropdown-item>
+                                                    <img :src="item.img" alt="">
+                                                    <span>{{ item.name }}</span>
+                                                </el-dropdown-item>
+                                            </template>
+                                        </el-dropdown-menu>
+                                    </template>
+                                </el-dropdown>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- 面包屑功能栏 -->
+                    <div class="breadBox">
+                        <!-- 左侧 -->
+                        <div style="display: flex;justify-content: space-around;align-items: center;">
+                            <!-- 前进后退 -->
+                            <div style="display: flex;justify-content: space-around;align-items: center;">
+                                <img style="display:block;width: 11px;height: 11px;" :src="blueLeft" alt="">
+                                <img style="display:block;width: 16px;height: 16px;" :src="grayRight" alt="">
+                            </div>
+                            <!-- 面包屑 -->
+                            <div>
+                                <el-breadcrumb separator="/">
+                                    <el-breadcrumb-item style="font-size: 12px;">homepage</el-breadcrumb-item>
+                                    <el-breadcrumb-item style="font-size: 12px;">promotion management</el-breadcrumb-item>
+                                    <el-breadcrumb-item style="font-size: 12px;">promotion detail</el-breadcrumb-item>
+                                </el-breadcrumb>
+                            </div>
+                        </div>
+                        <!-- 右侧 -->
+                        <div>
+                            <img :src="sort" alt="">
+                            <img :src="squre" alt="">
+                        </div>
+                    </div>
+                </div>
+                <!-- 展示文件夹盒子 -->
+                <div>
+                    <!-- 文件夹 -->
+                    <div>
+                        <el-collapse v-model="folder" accordion >
+                            <el-collapse-item title="文件夹" name="1" class="custom-collapse-item">
+                               
+                            </el-collapse-item>
+                        </el-collapse>
+                    </div>
+                    <!-- 文件 -->
+                    <div>
+
+                    </div>
                 </div>
             </div>
         </div>
@@ -19,19 +152,110 @@
 import { ref } from 'vue'
 import myfile from '../../api/myfile/myfile'
 import { Search } from '@element-plus/icons-vue'
+import copy from '../../assets/images/copy.png'
+import clipboard from '../../assets/images/clipboard.png'
+import share from '../../assets/images/share.png'
+import trash from '../../assets/images/trash.png'
+import file from '../../assets/images/file.png'
+import folder from '../../assets/images/folder.png'
+import image from '../../assets/images/image.png'
+import filmSlate from '../../assets/images/filmSlate.png'
+import musicNotes from '../../assets/images/musicNotes.png'
+import blueLeft from '../../assets/images/blueLeft.png'
+import grayRight from "../../assets/images/grayRight.png"
+import sort from '../../assets/images/sort.png'
+import squre from '../../assets/images/squre.png'
+import 'element-plus/packages/theme-chalk/src/index.scss'
 export default {
     setup() {
-        let tableList = ref([])
+        let folderList = ref([])
+        let fireList = ref([])
         let searchFire = ref('')
-        const getAll = () => {
+        let selectedIndex = ref(0)
+        let folder = ref("")
+        let menuList = ref([
+            {
+                name: "标签1",
+                choose: "1"
+            },
+            {
+                name: "标签2",
+                choose: "2"
+            },
+        ])
+        let useMenu = ref([
+            {
+                img: copy,
+                name: "复制"
+            },
+            {
+                img: clipboard,
+                name: "粘贴"
+            },
+            {
+                img: share,
+                name: "分享给"
+            },
+            {
+                img: trash,
+                name: "删除"
+            },
+        ])
+        let arrorMenu = ref([
+            {
+                img: file,
+                name: "文件"
+            },
+            {
+                img: folder,
+                name: '文件夹'
+            },
+            {
+                img: image,
+                name: "图片"
+            },
+            {
+                img: filmSlate,
+                name: "视频"
+            },
+            {
+                img: musicNotes,
+                name: "音频"
+            }
+        ])
+        function getAll() {
             myfile.get().then(res => {
                 console.log(res, 'eee');
             })
         }
+        function changeFile(row) {
+
+        }
+        // tableMenu切换
+        function tableChange(row, num) {
+            this.selectedIndex = num
+        }
+        // x图标事件
+        function shotdown(row) {
+            this.menuList = this.menuList.filter(item => item.name !== row.name)
+        }
         return {
-            tableList,//定义的数据
+            folderList,//文件夹的数据
+            fireList,//文件夹的数据
             getAll,//拿到数据的方法
             searchFire,//搜索文件的model
+            changeFile,//切换右侧视图的file
+            menuList,//右侧切换
+            tableChange,//改变class点击事件
+            selectedIndex,//当前选中下标
+            shotdown,//筛选出当前数据
+            useMenu,
+            arrorMenu,
+            blueLeft,//返回
+            grayRight,//前进
+            squre,//视图切换
+            sort,//排序
+            folder,
         }
     },
     created() {
@@ -41,22 +265,128 @@ export default {
 </script>
 
 <style scoped>
+p {
+    margin: 0;
+    padding: 0;
+}
+
+.bigBox {
+    display: flex;
+    justify-content: flex-start;
+}
+
 .settingBox {
     width: 312px;
-    height: 836px;
-    border: 1px solid black;
+    height: 636px;
+    border: 2px solid black;
     border-radius: 4px;
     margin: 10px 10px;
 }
-.topSearch{
+
+.topSearch {
     width: 100%;
     height: 48px;
     background-color: #EBEFF6;
-    text-align: center;
-    line-height: 48px;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
 }
+
 .searchFire {
     width: 248px;
     height: 32px;
 }
+
+.setBox {
+    width: 88px;
+    height: 112px;
+    text-align: center;
+    margin-left: 12px;
+    margin-top: 5px;
+    position: relative;
+}
+
+.setBox:hover {
+    background-color: #EEF9FF;
+}
+
+.setBox:hover .selectChe {
+    background-color: #EEF9FF;
+    display: block;
+}
+
+.selectChe {
+    display: none;
+    width: 20px;
+    height: 20px;
+    background: rgba(255, 255, 255, 0.7);
+    border-radius: 4px 4px 4px 4px;
+    position: absolute;
+    top: 2px;
+    right: 2px;
+    line-height: 10px;
+}
+
+.mesBox {
+    width: 70vw;
+    height: 636px;
+    margin: 10px 5px;
+    border-radius: 4px;
+}
+
+.useBox {
+    width: 100%;
+    height: 96px;
+}
+
+.tables {
+    display: inline-block;
+    width: 112px;
+    height: 22px;
+    border-radius: 4px;
+    line-height: 21px;
+    text-align: center;
+    font-size: 12px;
+    margin-left: 5px;
+    position: relative;
+}
+
+.tableLis {
+    display: inline-block;
+    width: 112px;
+    height: 22px;
+    border-radius: 4px;
+    background-color: #EBEFF6;
+    line-height: 21px;
+    text-align: center;
+    font-size: 12px;
+    margin-left: 5px;
+    position: relative;
+}
+
+.manyUse {
+    width: 100%;
+    height: 48px;
+    /* background-color: gray; */
+    line-height: 48px;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+}
+
+.el-dropdown-link {
+    color: white;
+}
+
+.breadBox {
+    width: 100%;
+    height: 24px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: #D9E0F0;
+}
+::deep .custom-collapse-item{
+    height: 24px !important;
+}
 </style>