| @@ -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 { | |||
| outline: none; | |||
| } | |||
| div { | |||
| padding: 0; | |||
| margin: 0; | |||
| } | |||
| @@ -1,48 +1,56 @@ | |||
| // generated by unplugin-vue-components | |||
| // We suggest you to commit this file into source control | |||
| // 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 { | |||
| 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="flex justify-between" style="width: 300px"> | |||
| <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 class="workList flex"> | |||
| <div class="workItem" v-for="item in 15"> | |||
| <div class="workItem" v-for="item in 12" :key="item"> | |||
| <div class="workImg"> | |||
| <img class="inmiddle" src="" alt="" /> | |||
| </div> | |||
| @@ -20,44 +17,113 @@ | |||
| <span>名称</span> | |||
| <span>时间</span> | |||
| </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> | |||
| <!-- 预览作品 --> | |||
| <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> | |||
| </template> | |||
| <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> | |||
| <style lang="scss" scoped> | |||
| .page { | |||
| height: calc(100vh - 84px); | |||
| background-color: #fff; | |||
| 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 { | |||
| margin-top: 20px; | |||
| flex-wrap: wrap; | |||
| justify-content: flex-start; | |||
| width: 100%; | |||
| height: 200px; | |||
| justify-content: flex-start; | |||
| flex-wrap: wrap; | |||
| margin-top: 20px; | |||
| .workItem { | |||
| position: relative; | |||
| margin: 0 10px 10px 0; | |||
| width: 300px; | |||
| height: 200px; | |||
| margin: 0 10px 10px 0; | |||
| border: 1px solid #000; | |||
| border-radius: 5px; | |||
| .workImg { | |||
| width: 100%; | |||
| height: 170px; | |||
| background-color: red; | |||
| img { | |||
| max-width: 100%; | |||
| max-height: 170px; | |||
| @@ -66,51 +132,120 @@ const title = ref(""); | |||
| .more { | |||
| position: absolute; | |||
| display: none; | |||
| top: 0; | |||
| left: 0; | |||
| display: none; | |||
| width: 100%; | |||
| 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 { | |||
| position: absolute; | |||
| top: 10px; | |||
| right: 10px; | |||
| width: 30px; | |||
| height: 30px; | |||
| font-size: 20px; | |||
| line-height: 15px; | |||
| color: #fff; | |||
| text-align: center; | |||
| border: 1px solid #000; | |||
| border-radius: 50%; | |||
| font-size: 20px; | |||
| cursor: pointer; | |||
| // &:hover { | |||
| // width: 80px; | |||
| // height: 80px; | |||
| // background-color: aqua; | |||
| // } | |||
| } | |||
| .btns { | |||
| position: absolute; | |||
| top: 45px; | |||
| 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; | |||
| line-height: 30px; | |||
| 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 { | |||
| padding: 0 10px; | |||
| justify-content: space-between; | |||
| height: 30px; | |||
| padding: 0 10px; | |||
| line-height: 30px; | |||
| justify-content: space-between; | |||
| border-top: 1px solid #000; | |||
| } | |||
| } | |||
| .workItem:hover .more { | |||
| 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> | |||