@@ -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> |