| @@ -1,139 +1,142 @@ | |||||
| <p align="center"> | |||||
| <img src="https://img.shields.io/badge/Vue-3.2.45-brightgreen.svg"/> | |||||
| <img src="https://img.shields.io/badge/Vite-4.3.1-green.svg"/> | |||||
| <img src="https://img.shields.io/badge/Element Plus-2.3.1-blue.svg"/> | |||||
| <img src="https://img.shields.io/badge/license-MIT-green.svg"/> | |||||
| <a href="https://gitee.com/youlaiorg" target="_blank"> | |||||
| <img src="https://img.shields.io/badge/Author-有来开源组织-orange.svg"/> | |||||
| </a> | |||||
| </p> | |||||
| <p align="center"> | |||||
| <a target="_blank" href="https://www.cnblogs.com/haoxianrui/p/17331952.html">vue3-element-admin官方文档</a> | <a target="_blank" href="http://vue3.youlai.tech">在线预览</a> | |||||
| </p> | |||||
| ## 项目介绍 | |||||
| [vue3-element-admin](https://gitee.com/youlaiorg/vue3-element-admin) 是基于 [vue-element-admin](https://gitee.com/panjiachen/vue-element-admin) 升级的 `Vue3` 版本后台管理框架,使用 Vue3、Vite4、TypeScript、Pinia、Element Plus 当前主流技术栈开发。 | |||||
| ## 项目特色 | |||||
| - 基于 `vue-element-admin` 升级的 `Vue3` 版本,主流技术栈,无过度自定义封装,极易上手,减少学习成本; | |||||
| - 配套 `Java` 后台接口,非 `Mock` 数据,[在线接口文档](https://www.apifox.cn/apidoc/shared-195e783f-4d85-4235-a038-eec696de4ea5/api-65851240); | |||||
| - 从 `0` 到 `1` 的项目文档支持,[官方文档](https://www.cnblogs.com/haoxianrui/p/16090029.html)。 | |||||
| - 系统功能:用户、角色、菜单、字典管和部门管理等; | |||||
| - 基础设施:动态路由,按钮权限,常用组件封装。 | |||||
| ## 技术栈 | |||||
| | 技术栈 | 描述 | 官网 | | |||||
| | --- | --- | --- | | |||||
| | Vue3 | 渐进式 JavaScript 框架 | https://v3.cn.vuejs.org/ | | |||||
| | TypeScript | JavaScript 的一个超集 | https://www.tslang.cn/ | | |||||
| | Vite | 前端开发与构建工具 | https://cn.vitejs.dev/ | | |||||
| | Element Plus | 基于 Vue 3,面向设计师和开发者的组件库 | https://element-plus.gitee.io/zh-CN/ | | |||||
| | Pinia | 新一代状态管理工具 | https://pinia.vuejs.org/ | | |||||
| | Vue Router | Vue.js 的官方路由 | https://router.vuejs.org/zh/ | | |||||
| ## 项目预览 | |||||
| **在线预览地址**: [http://vue3.youlai.tech/](http://vue3.youlai.tech/) | |||||
| **控制台 & 接口文档** | |||||
| |  | | |||||
| | --------------------------------------------------------------- | | |||||
| |  | | |||||
| **权限管理系统** | |||||
| |  |  | | |||||
| | --- | --- | | |||||
| |  |  | | |||||
| ## 项目地址 | |||||
| | | Gitee | Github | | |||||
| | --- | --- | --- | | |||||
| | vue3-element-admin | [vue3-element-admin](https://gitee.com/youlaiorg/vue3-element-admin) | [vue3-element-admin](https://github.com/youlaitech/vue3-element-admin) | | |||||
| | 后端 | [youlai-boot](https://gitee.com/youlaiorg/youlai-boot) | [youlai-boot](https://github.com/hxrui/youlai-boot.git) | | |||||
| ## 环境要求 | |||||
| - Node 环境 | |||||
| 版本:16+ | |||||
| - 开发工具 | |||||
| VSCode | |||||
| - 必装插件 | |||||
| - Vue Language Features (Volar) | |||||
| - TypeScript Vue Plugin (Volar) | |||||
| ## 项目启动 | |||||
| ```bash | |||||
| # 安装 pnpm | |||||
| npm install pnpm -g | |||||
| # 安装依赖 | |||||
| pnpm install | |||||
| # 项目运行 | |||||
| pnpm run dev | |||||
| # 项目打包 | |||||
| pnpm run build:prod | |||||
| ``` | |||||
| ## 项目部署 | |||||
| - 上传文件 | |||||
| 将打包生成在 `dist` 目录下的文件拷贝至 `/usr/share/nginx/html` 目录 | |||||
| - nginx.cofig 配置 | |||||
| ``` | |||||
| server { | |||||
| listen 80; | |||||
| server_name localhost; | |||||
| location / { | |||||
| root /usr/share/nginx/html; | |||||
| index index.html index.htm; | |||||
| } | |||||
| # 代理转发 prod-api 标识至 vapi.youlai.tech | |||||
| location /prod-api/ { | |||||
| proxy_pass http://vapi.youlai.tech/; | |||||
| } | |||||
| } | |||||
| ``` | |||||
| ## 接口文档 | |||||
| - 接口调用地址:[vapi.youlai.tech](http://vapi.youlai.tech) | |||||
| - 接口文档地址:[vue3-element-admin 在线接口文档](https://www.apifox.cn/apidoc/shared-195e783f-4d85-4235-a038-eec696de4ea5/api-65851240) | |||||
| ## 本地接口 | |||||
| > 默认使用线上接口,你可以通过以下步骤完成本地接口环境搭建: | |||||
| 1. 获取基于 `Java 、SpringBoot` 开发的后端 [youlai-boot](https://gitee.com/youlaiorg/youlai-boot.git) 源码 ; | |||||
| 2. 根据后端工程说明文档 [README.md](https://gitee.com/youlaiorg/youlai-boot#%E9%A1%B9%E7%9B%AE%E8%BF%90%E8%A1%8C) 完成本地启动; | |||||
| 3. 替换 [vite.config.ts](vite.config.ts) 的代理目标地址 [vapi.youlai.tech](vapi.youlai.tech) 为本地的 [localhost:8989](localhost:8989) 。 | |||||
| ## 关于我们 | |||||
| > 欢迎加我的微信,备注 `前端`、`后端`、`全栈` 进对应技术交流群 | |||||
| | 微信交流群 | 我的微信 | | |||||
| | --- | --- | | |||||
| | |  | | |||||
|  | |||||
| <p align="center"> | |||||
| <img src="https://img.shields.io/badge/Vue-3.2.45-brightgreen.svg"/> | |||||
| <img src="https://img.shields.io/badge/Vite-4.3.1-green.svg"/> | |||||
| <img src="https://img.shields.io/badge/Element Plus-2.3.1-blue.svg"/> | |||||
| <img src="https://img.shields.io/badge/license-MIT-green.svg"/> | |||||
| <a href="https://gitee.com/youlaiorg" target="_blank"> | |||||
| <img src="https://img.shields.io/badge/Author-有来开源组织-orange.svg"/> | |||||
| </a> | |||||
| </p> | |||||
| <p align="center"> | |||||
| <a target="_blank" href="https://www.cnblogs.com/haoxianrui/p/17331952.html">vue3-element-admin官方文档</a> | <a target="_blank" href="http://vue3.youlai.tech">在线预览</a> | |||||
| </p> | |||||
| ## 项目介绍 | |||||
| [vue3-element-admin](https://gitee.com/youlaiorg/vue3-element-admin) 是基于 [vue-element-admin](https://gitee.com/panjiachen/vue-element-admin) 升级的 `Vue3` 版本后台管理框架,使用 Vue3、Vite4、TypeScript、Pinia、Element Plus 当前主流技术栈开发。 | |||||
| ## 项目特色 | |||||
| - 基于 `vue-element-admin` 升级的 `Vue3` 版本,主流技术栈,无过度自定义封装,极易上手,减少学习成本; | |||||
| - 配套 `Java` 后台接口,非 `Mock` 数据,[在线接口文档](https://www.apifox.cn/apidoc/shared-195e783f-4d85-4235-a038-eec696de4ea5/api-65851240); | |||||
| - 从 `0` 到 `1` 的项目文档支持,[官方文档](https://www.cnblogs.com/haoxianrui/p/16090029.html)。 | |||||
| - 系统功能:用户、角色、菜单、字典管和部门管理等; | |||||
| - 基础设施:动态路由,按钮权限,常用组件封装。 | |||||
| ## 技术栈 | |||||
| | 技术栈 | 描述 | 官网 | | |||||
| | --- | --- | --- | | |||||
| | Vue3 | 渐进式 JavaScript 框架 | https://v3.cn.vuejs.org/ | | |||||
| | TypeScript | JavaScript 的一个超集 | https://www.tslang.cn/ | | |||||
| | Vite | 前端开发与构建工具 | https://cn.vitejs.dev/ | | |||||
| | Element Plus | 基于 Vue 3,面向设计师和开发者的组件库 | https://element-plus.gitee.io/zh-CN/ | | |||||
| | Pinia | 新一代状态管理工具 | https://pinia.vuejs.org/ | | |||||
| | Vue Router | Vue.js 的官方路由 | https://router.vuejs.org/zh/ | | |||||
| ## 项目预览 | |||||
| **在线预览地址**: [http://vue3.youlai.tech/](http://vue3.youlai.tech/) | |||||
| **控制台 & 接口文档** | |||||
| |  | | |||||
| | --------------------------------------------------------------- | | |||||
| |  | | |||||
| **权限管理系统** | |||||
| |  |  | | |||||
| | --- | --- | | |||||
| |  |  | | |||||
| ## 项目地址 | |||||
| | | Gitee | Github | | |||||
| | --- | --- | --- | | |||||
| | vue3-element-admin | [vue3-element-admin](https://gitee.com/youlaiorg/vue3-element-admin) | [vue3-element-admin](https://github.com/youlaitech/vue3-element-admin) | | |||||
| | 后端 | [youlai-boot](https://gitee.com/youlaiorg/youlai-boot) | [youlai-boot](https://github.com/hxrui/youlai-boot.git) | | |||||
| ## 环境要求 | |||||
| - Node 环境 | |||||
| 版本:16+ | |||||
| - 开发工具 | |||||
| VSCode | |||||
| - 必装插件 | |||||
| - Vue Language Features (Volar) | |||||
| - TypeScript Vue Plugin (Volar) | |||||
| ## 项目启动 | |||||
| ```bash | |||||
| # 安装 pnpm | |||||
| npm install pnpm -g | |||||
| # 安装依赖 | |||||
| pnpm install | |||||
| # 项目运行 | |||||
| pnpm run dev | |||||
| # 项目打包 | |||||
| pnpm run build:prod | |||||
| ``` | |||||
| ## 项目部署 | |||||
| - 上传文件 | |||||
| 将打包生成在 `dist` 目录下的文件拷贝至 `/usr/share/nginx/html` 目录 | |||||
| - nginx.cofig 配置 | |||||
| ``` | |||||
| server { | |||||
| listen 80; | |||||
| server_name localhost; | |||||
| location / { | |||||
| root /usr/share/nginx/html; | |||||
| index index.html index.htm; | |||||
| } | |||||
| # 代理转发 prod-api 标识至 vapi.youlai.tech | |||||
| location /prod-api/ { | |||||
| proxy_pass http://vapi.youlai.tech/; | |||||
| } | |||||
| } | |||||
| ``` | |||||
| ## 接口文档 | |||||
| - 接口调用地址:[vapi.youlai.tech](http://vapi.youlai.tech) | |||||
| - 接口文档地址:[vue3-element-admin 在线接口文档](https://www.apifox.cn/apidoc/shared-195e783f-4d85-4235-a038-eec696de4ea5/api-65851240) | |||||
| ## 本地接口 | |||||
| > 默认使用线上接口,你可以通过以下步骤完成本地接口环境搭建: | |||||
| 1. 获取基于 `Java 、SpringBoot` 开发的后端 [youlai-boot](https://gitee.com/youlaiorg/youlai-boot.git) 源码 ; | |||||
| 2. 根据后端工程说明文档 [README.md](https://gitee.com/youlaiorg/youlai-boot#%E9%A1%B9%E7%9B%AE%E8%BF%90%E8%A1%8C) 完成本地启动; | |||||
| 3. 替换 [vite.config.ts](vite.config.ts) 的代理目标地址 [vapi.youlai.tech](vapi.youlai.tech) 为本地的 [localhost:8989](localhost:8989) 。 | |||||
| ## 关于我们 | |||||
| > 欢迎加我的微信,备注 `前端`、`后端`、`全栈` 进对应技术交流群 | |||||
| | 微信交流群 | 我的微信 | | |||||
| | --- | --- | | |||||
| | |  | | |||||
|  | |||||
| git commit -m "feat: " | |||||
| @@ -73,3 +73,8 @@ a:active, | |||||
| div:focus { | div:focus { | ||||
| outline: none; | outline: none; | ||||
| } | } | ||||
| div { | |||||
| padding: 0; | |||||
| margin: 0; | |||||
| } | |||||
| @@ -1,48 +1,56 @@ | |||||
| // generated by unplugin-vue-components | // generated by unplugin-vue-components | ||||
| // We suggest you to commit this file into source control | // We suggest you to commit this file into source control | ||||
| // Read more: https://github.com/vuejs/core/pull/3399 | // Read more: https://github.com/vuejs/core/pull/3399 | ||||
| import "@vue/runtime-core"; | |||||
| import '@vue/runtime-core' | |||||
| export {}; | |||||
| export {} | |||||
| declare module "@vue/runtime-core" { | |||||
| declare module '@vue/runtime-core' { | |||||
| export interface GlobalComponents { | export interface GlobalComponents { | ||||
| Breadcrumb: typeof import("./../components/Breadcrumb/index.vue")["default"]; | |||||
| ElBreadcrumb: typeof import("element-plus/es")["ElBreadcrumb"]; | |||||
| ElBreadcrumbItem: typeof import("element-plus/es")["ElBreadcrumbItem"]; | |||||
| ElButton: typeof import("element-plus/es")["ElButton"]; | |||||
| ElDivider: typeof import("element-plus/es")["ElDivider"]; | |||||
| ElDropdown: typeof import("element-plus/es")["ElDropdown"]; | |||||
| ElDropdownItem: typeof import("element-plus/es")["ElDropdownItem"]; | |||||
| ElDropdownMenu: typeof import("element-plus/es")["ElDropdownMenu"]; | |||||
| ElIcon: typeof import("element-plus/es")["ElIcon"]; | |||||
| ElInput: typeof import("element-plus/es")["ElInput"]; | |||||
| ElMenu: typeof import("element-plus/es")["ElMenu"]; | |||||
| ElMenuItem: typeof import("element-plus/es")["ElMenuItem"]; | |||||
| ElOption: typeof import("element-plus/es")["ElOption"]; | |||||
| ElRow: typeof import("element-plus/es")["ElRow"]; | |||||
| ElScrollbar: typeof import("element-plus/es")["ElScrollbar"]; | |||||
| ElSelect: typeof import("element-plus/es")["ElSelect"]; | |||||
| ElSubMenu: typeof import("element-plus/es")["ElSubMenu"]; | |||||
| ElSwitch: typeof import("element-plus/es")["ElSwitch"]; | |||||
| ElTabPane: typeof import("element-plus/es")["ElTabPane"]; | |||||
| ElTabs: typeof import("element-plus/es")["ElTabs"]; | |||||
| ElTooltip: typeof import("element-plus/es")["ElTooltip"]; | |||||
| GithubCorner: typeof import("./../components/GithubCorner/index.vue")["default"]; | |||||
| Hamburger: typeof import("./../components/Hamburger/index.vue")["default"]; | |||||
| IconSelect: typeof import("./../components/IconSelect/index.vue")["default"]; | |||||
| IEpCaretBottom: typeof import("~icons/ep/caret-bottom")["default"]; | |||||
| IEpClose: typeof import("~icons/ep/close")["default"]; | |||||
| IEpSetting: typeof import("~icons/ep/setting")["default"]; | |||||
| LangSelect: typeof import("./../components/LangSelect/index.vue")["default"]; | |||||
| MultiUpload: typeof import("./../components/Upload/MultiUpload.vue")["default"]; | |||||
| Pagination: typeof import("./../components/Pagination/index.vue")["default"]; | |||||
| RightPanel: typeof import("./../components/RightPanel/index.vue")["default"]; | |||||
| RouterLink: typeof import("vue-router")["RouterLink"]; | |||||
| RouterView: typeof import("vue-router")["RouterView"]; | |||||
| SingleUpload: typeof import("./../components/Upload/SingleUpload.vue")["default"]; | |||||
| SizeSelect: typeof import("./../components/SizeSelect/index.vue")["default"]; | |||||
| SvgIcon: typeof import("./../components/SvgIcon/index.vue")["default"]; | |||||
| WangEditor: typeof import("./../components/WangEditor/index.vue")["default"]; | |||||
| Breadcrumb: typeof import('./../components/Breadcrumb/index.vue')['default'] | |||||
| ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb'] | |||||
| ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem'] | |||||
| ElButton: typeof import('element-plus/es')['ElButton'] | |||||
| ElDialog: typeof import('element-plus/es')['ElDialog'] | |||||
| ElDivider: typeof import('element-plus/es')['ElDivider'] | |||||
| ElDropdown: typeof import('element-plus/es')['ElDropdown'] | |||||
| ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem'] | |||||
| ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu'] | |||||
| ElForm: typeof import('element-plus/es')['ElForm'] | |||||
| ElFormItem: typeof import('element-plus/es')['ElFormItem'] | |||||
| ElIcon: typeof import('element-plus/es')['ElIcon'] | |||||
| ElInput: typeof import('element-plus/es')['ElInput'] | |||||
| ElMenu: typeof import('element-plus/es')['ElMenu'] | |||||
| ElMenuItem: typeof import('element-plus/es')['ElMenuItem'] | |||||
| ElOption: typeof import('element-plus/es')['ElOption'] | |||||
| ElRow: typeof import('element-plus/es')['ElRow'] | |||||
| ElScrollbar: typeof import('element-plus/es')['ElScrollbar'] | |||||
| ElSelect: typeof import('element-plus/es')['ElSelect'] | |||||
| ElSubMenu: typeof import('element-plus/es')['ElSubMenu'] | |||||
| ElSwitch: typeof import('element-plus/es')['ElSwitch'] | |||||
| ElTabPane: typeof import('element-plus/es')['ElTabPane'] | |||||
| ElTabs: typeof import('element-plus/es')['ElTabs'] | |||||
| ElTooltip: typeof import('element-plus/es')['ElTooltip'] | |||||
| GithubCorner: typeof import('./../components/GithubCorner/index.vue')['default'] | |||||
| Hamburger: typeof import('./../components/Hamburger/index.vue')['default'] | |||||
| IconSelect: typeof import('./../components/IconSelect/index.vue')['default'] | |||||
| IEpCaretBottom: typeof import('~icons/ep/caret-bottom')['default'] | |||||
| IEpClose: typeof import('~icons/ep/close')['default'] | |||||
| IEpDelete: typeof import('~icons/ep/delete')['default'] | |||||
| IEpDownload: typeof import('~icons/ep/download')['default'] | |||||
| IEpEdit: typeof import('~icons/ep/edit')['default'] | |||||
| IEpPlus: typeof import('~icons/ep/plus')['default'] | |||||
| IEpSetting: typeof import('~icons/ep/setting')['default'] | |||||
| IEpVideoPlay: typeof import('~icons/ep/video-play')['default'] | |||||
| LangSelect: typeof import('./../components/LangSelect/index.vue')['default'] | |||||
| MultiUpload: typeof import('./../components/Upload/MultiUpload.vue')['default'] | |||||
| Pagination: typeof import('./../components/Pagination/index.vue')['default'] | |||||
| RightPanel: typeof import('./../components/RightPanel/index.vue')['default'] | |||||
| RouterLink: typeof import('vue-router')['RouterLink'] | |||||
| RouterView: typeof import('vue-router')['RouterView'] | |||||
| SingleUpload: typeof import('./../components/Upload/SingleUpload.vue')['default'] | |||||
| SizeSelect: typeof import('./../components/SizeSelect/index.vue')['default'] | |||||
| SvgIcon: typeof import('./../components/SvgIcon/index.vue')['default'] | |||||
| WangEditor: typeof import('./../components/WangEditor/index.vue')['default'] | |||||
| } | } | ||||
| } | } | ||||
| @@ -4,15 +4,12 @@ | |||||
| <div class="top"> | <div class="top"> | ||||
| <div class="flex justify-between" style="width: 300px"> | <div class="flex justify-between" style="width: 300px"> | ||||
| <el-input v-model="title" placeholder="输入标题" /> | <el-input v-model="title" placeholder="输入标题" /> | ||||
| <el-icon | |||||
| style="text-align: center; width: 32px; height: 32px; color: #8c939d" | |||||
| ><Edit | |||||
| /></el-icon> | |||||
| <el-icon class="icon-edit"><i-ep-edit /></el-icon> | |||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| <!-- 作品列表 --> | <!-- 作品列表 --> | ||||
| <div class="workList flex"> | <div class="workList flex"> | ||||
| <div class="workItem" v-for="item in 15"> | |||||
| <div class="workItem" v-for="item in 12" :key="item"> | |||||
| <div class="workImg"> | <div class="workImg"> | ||||
| <img class="inmiddle" src="" alt="" /> | <img class="inmiddle" src="" alt="" /> | ||||
| </div> | </div> | ||||
| @@ -20,44 +17,113 @@ | |||||
| <span>名称</span> | <span>名称</span> | ||||
| <span>时间</span> | <span>时间</span> | ||||
| </div> | </div> | ||||
| <!-- 更多 --> | |||||
| <div class="more"> | |||||
| <div class="showBtn">...</div> | |||||
| <div class="btns"> | |||||
| <div>下载</div> | |||||
| <div>删除</div> | |||||
| <!-- 更多遮罩层 --> | |||||
| <div | |||||
| class="more" | |||||
| @mouseleave="mouseleave" | |||||
| @click="clickVideoItem(item)" | |||||
| > | |||||
| <el-icon class="icon-videoPlay"><i-ep-videoPlay /></el-icon> | |||||
| <div class="showBtn" @click.stop="mouseenter(item)">...</div> | |||||
| <div class="btns" v-show="showPopup"> | |||||
| <div class="btns-item"> | |||||
| <div class="btns-item-icon"> | |||||
| <el-icon class="icon-delete"><i-ep-download /></el-icon> | |||||
| </div> | |||||
| <div class="text">下载</div> | |||||
| </div> | |||||
| <div class="btns-item"> | |||||
| <div class="btns-item-icon"> | |||||
| <el-icon class="icon-delete"><i-ep-delete /></el-icon> | |||||
| </div> | |||||
| <div class="text">删除</div> | |||||
| </div> | |||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| <!-- 预览作品 --> | |||||
| <el-dialog | |||||
| destroy-on-close | |||||
| class="elDialog" | |||||
| v-model="showDialog" | |||||
| :title="presentVideo" | |||||
| width="60%" | |||||
| center | |||||
| > | |||||
| <div> | |||||
| <video | |||||
| controls="true" | |||||
| class="inmiddle" | |||||
| src="https://wenlian.wenzhou.gov.cn:8001/upload/video/%E3%80%8A%E7%93%AF%E8%B6%8A%E4%B9%8B%E5%8D%8E%E3%80%8B%E7%89%87%E8%8A%B11.mp4" | |||||
| ></video> | |||||
| </div> | |||||
| <template #footer> | |||||
| <span class="dialog-footer"> | |||||
| <el-button type="primary" @click="showDialog = false">下载</el-button> | |||||
| <el-button @click="showDialog = false"> 删除 </el-button> | |||||
| </span> | |||||
| </template> | |||||
| </el-dialog> | |||||
| </div> | </div> | ||||
| </template> | </template> | ||||
| <script setup> | <script setup> | ||||
| const title = ref(""); | |||||
| let title = ref(""); | |||||
| // 弹窗显示隐藏 | |||||
| let showDialog = ref(true); | |||||
| // 当前作品 | |||||
| let presentVideo = ref(""); | |||||
| // 点击作品事件 | |||||
| function clickVideoItem(item) { | |||||
| showDialog.value = true; | |||||
| presentVideo.value = item; | |||||
| } | |||||
| // 删除框是否显示 | |||||
| let showPopup = ref(false); | |||||
| function mouseleave() { | |||||
| showPopup.value = false; | |||||
| } | |||||
| function mouseenter(item) { | |||||
| presentVideo.value = item; | |||||
| showPopup.value = !showPopup.value; | |||||
| } | |||||
| </script> | </script> | ||||
| <style lang="scss" scoped> | <style lang="scss" scoped> | ||||
| .page { | .page { | ||||
| height: calc(100vh - 84px); | height: calc(100vh - 84px); | ||||
| background-color: #fff; | |||||
| padding: 20px 0 0 20px; | padding: 20px 0 0 20px; | ||||
| background-color: #fff; | |||||
| } | } | ||||
| .el-icon.icon-edit { | |||||
| width: 32px; | |||||
| height: 32px; | |||||
| font-size: 32px; | |||||
| color: #8c939d; | |||||
| text-align: center; | |||||
| } | |||||
| .workList { | .workList { | ||||
| margin-top: 20px; | |||||
| flex-wrap: wrap; | |||||
| justify-content: flex-start; | |||||
| width: 100%; | width: 100%; | ||||
| height: 200px; | height: 200px; | ||||
| justify-content: flex-start; | |||||
| flex-wrap: wrap; | |||||
| margin-top: 20px; | |||||
| .workItem { | .workItem { | ||||
| position: relative; | position: relative; | ||||
| margin: 0 10px 10px 0; | |||||
| width: 300px; | width: 300px; | ||||
| height: 200px; | height: 200px; | ||||
| margin: 0 10px 10px 0; | |||||
| border: 1px solid #000; | border: 1px solid #000; | ||||
| border-radius: 5px; | border-radius: 5px; | ||||
| .workImg { | .workImg { | ||||
| width: 100%; | width: 100%; | ||||
| height: 170px; | height: 170px; | ||||
| background-color: red; | background-color: red; | ||||
| img { | img { | ||||
| max-width: 100%; | max-width: 100%; | ||||
| max-height: 170px; | max-height: 170px; | ||||
| @@ -66,51 +132,120 @@ const title = ref(""); | |||||
| .more { | .more { | ||||
| position: absolute; | position: absolute; | ||||
| display: none; | |||||
| top: 0; | top: 0; | ||||
| left: 0; | left: 0; | ||||
| display: none; | |||||
| width: 100%; | width: 100%; | ||||
| height: 170px; | height: 170px; | ||||
| background-color: rgba(0, 0, 0, 0.3); | |||||
| background-color: rgb(0 0 0 / 30%); | |||||
| .icon-videoPlay { | |||||
| position: absolute; | |||||
| top: 50%; | |||||
| left: 50%; | |||||
| width: 50px; | |||||
| height: 50px; | |||||
| font-size: 50px; | |||||
| color: #fff; | |||||
| text-align: center; | |||||
| transform: translate(-50%, -50%); | |||||
| } | |||||
| .showBtn { | .showBtn { | ||||
| position: absolute; | position: absolute; | ||||
| top: 10px; | top: 10px; | ||||
| right: 10px; | right: 10px; | ||||
| width: 30px; | width: 30px; | ||||
| height: 30px; | height: 30px; | ||||
| font-size: 20px; | |||||
| line-height: 15px; | line-height: 15px; | ||||
| color: #fff; | |||||
| text-align: center; | text-align: center; | ||||
| border: 1px solid #000; | |||||
| border-radius: 50%; | |||||
| font-size: 20px; | |||||
| cursor: pointer; | |||||
| // &:hover { | |||||
| // width: 80px; | |||||
| // height: 80px; | |||||
| // background-color: aqua; | |||||
| // } | |||||
| } | } | ||||
| .btns { | .btns { | ||||
| position: absolute; | position: absolute; | ||||
| top: 45px; | top: 45px; | ||||
| right: 10px; | right: 10px; | ||||
| width: 50px; | |||||
| border: 1px solid #000; | |||||
| border-bottom: none; | |||||
| > div { | |||||
| width: 50px; | |||||
| background-color: #fff; | |||||
| width: 70px; | |||||
| height: 60px; | |||||
| overflow: hidden; | |||||
| border-radius: 10px; | |||||
| &-item { | |||||
| width: 70px; | |||||
| height: 30px; | height: 30px; | ||||
| line-height: 30px; | |||||
| text-align: center; | text-align: center; | ||||
| border-bottom: 1px solid #000; | |||||
| background-color: #fff; | |||||
| &-icon { | |||||
| position: relative; | |||||
| display: inline-block; | |||||
| width: 20px; | |||||
| height: 20px; | |||||
| .icon-delete { | |||||
| position: absolute; | |||||
| top: 4px; | |||||
| left: 0; | |||||
| width: 20px; | |||||
| height: 20px; | |||||
| font-size: 16px; | |||||
| color: #000; | |||||
| text-align: center; | |||||
| } | |||||
| } | |||||
| .text { | |||||
| display: inline-block; | |||||
| height: 30px; | |||||
| padding-left: 5px; | |||||
| margin-top: -5px; | |||||
| line-height: 20px; | |||||
| } | |||||
| } | } | ||||
| } | } | ||||
| } | } | ||||
| .workInfo { | .workInfo { | ||||
| padding: 0 10px; | |||||
| justify-content: space-between; | |||||
| height: 30px; | height: 30px; | ||||
| padding: 0 10px; | |||||
| line-height: 30px; | line-height: 30px; | ||||
| justify-content: space-between; | |||||
| border-top: 1px solid #000; | border-top: 1px solid #000; | ||||
| } | } | ||||
| } | } | ||||
| .workItem:hover .more { | .workItem:hover .more { | ||||
| display: block; | display: block; | ||||
| } | } | ||||
| } | } | ||||
| .elDialog { | |||||
| div { | |||||
| width: 100%; | |||||
| height: 400px; | |||||
| } | |||||
| video { | |||||
| width: 100%; | |||||
| height: 350px; | |||||
| } | |||||
| :deep(.el-dialog) { | |||||
| overflow: hidden; | |||||
| border-radius: 25px; | |||||
| } | |||||
| :deep(.el-dialog__body) { | |||||
| padding: 0; | |||||
| overflow: hidden; | |||||
| } | |||||
| } | |||||
| </style> | </style> | ||||