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