Просмотр исходного кода

feat: 作品列表样式

dev_YWQ
congzc 2 лет назад
Родитель
Сommit
8eb6c2f1ad
4 измененных файлов: 362 добавлений и 211 удалений
  1. +142
    -139
      README.md
  2. +5
    -0
      src/styles/reset.scss
  3. +48
    -40
      src/types/components.d.ts
  4. +167
    -32
      src/views/myCreating/index.vue

+ 142
- 139
README.md Просмотреть файл

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

**控制台 & 接口文档**

| ![暗黑模式](https://s2.loli.net/2023/03/13/QvjY4zf3VCGteNF.png) |
| --------------------------------------------------------------- |
| ![接口文档](https://s2.loli.net/2023/03/13/bH4J3O6WRgCUpwt.png) |

**权限管理系统**

| ![用户管理](https://s2.loli.net/2023/03/13/L9xgT5sSMVZukQj.png) | ![image-20230313003008012](https://s2.loli.net/2023/03/13/nQg6HmrtFUkPDYv.png) |
| --- | --- |
| ![image-20230313003028425](https://s2.loli.net/2023/03/13/C4fDRJeTuUO7gPI.png) | ![字典管理](https://s2.loli.net/2023/03/13/BzqjHpa64wfeWhE.png) |

## 项目地址

| | 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) 。

## 关于我们

> 欢迎加我的微信,备注 `前端`、`后端`、`全栈` 进对应技术交流群

| 微信交流群 | 我的微信 |
| --- | --- |
| ![](https://s2.loli.net/2023/05/06/NwhFvKqZ4zjfO5i.png)| ![](https://s2.loli.net/2022/04/06/yRx8uzj4emA5QVr.jpg) |

![](https://s2.loli.net/2022/11/19/OGjum9wr8f6idLX.png)
<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/)
**控制台 & 接口文档**
| ![暗黑模式](https://s2.loli.net/2023/03/13/QvjY4zf3VCGteNF.png) |
| --------------------------------------------------------------- |
| ![接口文档](https://s2.loli.net/2023/03/13/bH4J3O6WRgCUpwt.png) |
**权限管理系统**
| ![用户管理](https://s2.loli.net/2023/03/13/L9xgT5sSMVZukQj.png) | ![image-20230313003008012](https://s2.loli.net/2023/03/13/nQg6HmrtFUkPDYv.png) |
| --- | --- |
| ![image-20230313003028425](https://s2.loli.net/2023/03/13/C4fDRJeTuUO7gPI.png) | ![字典管理](https://s2.loli.net/2023/03/13/BzqjHpa64wfeWhE.png) |
## 项目地址
| | 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) 。
## 关于我们
> 欢迎加我的微信,备注 `前端`、`后端`、`全栈` 进对应技术交流群
| 微信交流群 | 我的微信 |
| --- | --- |
| ![](https://s2.loli.net/2023/05/06/NwhFvKqZ4zjfO5i.png)| ![](https://s2.loli.net/2022/04/06/yRx8uzj4emA5QVr.jpg) |
![](https://s2.loli.net/2022/11/19/OGjum9wr8f6idLX.png)
git commit -m "feat: "

+ 5
- 0
src/styles/reset.scss Просмотреть файл

@@ -73,3 +73,8 @@ a:active,
div:focus { div:focus {
outline: none; outline: none;
} }

div {
padding: 0;
margin: 0;
}

+ 48
- 40
src/types/components.d.ts Просмотреть файл

@@ -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']
} }
} }

+ 167
- 32
src/views/myCreating/index.vue Просмотреть файл

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

Загрузка…
Отмена
Сохранить