Skip to content

E
exhibition_backstage
提交 5f300396 authored 作者: 龙菲's avatar 龙菲
浏览文件
操作

增加文创管理

上级 876db43f
显示空白字符变更
内嵌 并排
正在显示 包含 867 行增加 和 77 行删除
src/api/literature.js
浏览文件 @ 5f300396
......@@ -39,3 +39,40 @@ export function deleteLt(data) {
data
})
}
// 文创产品api
// 获取文创列表
export function getCcProduct(data) {
return request({
url: '/bizCcProducts/listByPagePer',
method: 'post',
data
})
}
// 新增文创
export function addCcProduct(data) {
return request({
url: '/bizCcProducts/add',
method: 'post',
data
})
}
// 更新文创
export function updateCcProduct(data) {
return request({
url: '/bizCcProducts/update',
method: 'put',
data
})
}
// 删除文创
export function deleteCcProduct(data) {
return request({
url: '/bizCcProducts/delete',
method: 'delete',
data
})
}
src/components/Uploader/ManualUploader.vue
浏览文件 @ 5f300396
......@@ -84,9 +84,9 @@ export default {
// 将回填的字段从url-->pressUrl
this.fileList = val.map((item) => {
return {
highImg: item.url,
lowImg: item.pressUrl,
url: item.pressUrl,
highImg: this.$getFullUrl(item.url),
lowImg: this.$getFullUrl(item.pressUrl),
url: this.$getFullUrl(item.pressUrl),
// pressUrl:item.pressUrl,
name: item.name,
fileId: item.fileId,
......@@ -216,14 +216,6 @@ export default {
item.name = item.name;
item.fileId = item.fileId;
return item;
// return {
// // highImg: item.url,
// // lowImg: item.pressUrl,
// url: item.highImg,
// pressUrl: item.lowImg,
// name: item.name,
// fileId: item.fileId,
// };
});
that.$emit("input", newFileList);
} else {
......@@ -252,14 +244,6 @@ export default {
item.name = item.name;
item.fileId = item.fileId;
return item;
// return {
// // highImg: item.url,
// // lowImg: item.pressUrl,
// url: item.highImg,
// pressUrl: item.lowImg,
// name: item.name,
// fileId: item.fileId,
// };
});
that.$emit("input", newFileList);
} else {
......
src/components/VueQuillEditor/index.vue
浏览文件 @ 5f300396
<!-- -->
<template>
<div class="">
<quill-editor
ref="myQuillEditor"
v-model="content"
......@@ -8,7 +7,6 @@
@change="onEditorChange($event)"
class=".editor"
/>
</div>
</template>
<script>
......@@ -35,11 +33,13 @@ export default {
immediate: true,
deep: true,
},
placeholder(value) {
debugger
if (value) {
this.editorOption.placeholder = value;
}
placeholder: {
handler: function (value) {
this.$set(this.editorOption, "placeholder", this.placeholder);
},
immediate: true,
deep: true,
},
},
components: {
......@@ -74,16 +74,16 @@ export default {
},
//主题
theme: "snow",
placeholder: "请输入馆藏介绍",
placeholder: "",
},
};
},
mounted() {},
methods: {
onEditorChange() {
//内容改变事件
this.$emit("input", this.content);
},
},
};
</script>
......
src/icons/svg/product.svg 0 → 100644
浏览文件 @ 5f300396
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1666085245078" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1895" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><path d="M830.904679 268.49508 745.113757 268.49508C708.080306 154.440441 619.198999 83.83129 511.984139 83.83129S315.919694 154.440441 278.855544 268.49508l-85.760223 0c-48.204885 0-87.411839 39.987736-87.411839 89.202625l0 493.345128c0 49.152467 39.20593 89.125877 87.411839 89.125877l637.809357 0c46.275953 0 83.83129-36.910655 86.830601-83.310428 0.121773-1.039679 0.579191-1.89721 0.579191-2.937912l0-2.877537 0-23.627117L918.314471 357.697705C918.314471 308.481793 879.10854 268.49508 830.904679 268.49508M511.984139 148.33335c75.719542 0 136.780223 43.629683 168.947853 120.160707L343.068008 268.494057C375.234615 191.963033 436.264597 148.33335 511.984139 148.33335M826.71117 881.95589 197.28883 881.95589c-18.945491 0-34.30941-15.793708-34.30941-35.19764L162.97942 361.951589c0-19.404955 15.363919-35.166941 34.30941-35.166941l68.007907 0c-3.091408 19.939121-4.622274 39.83424-4.622274 59.360969 0 15.364943 1.010003 30.973432 3.03001 47.517223-16.068977 10.497075-25.863041 28.387537-25.863041 47.914266 0 31.494295 25.159006 57.141418 56.101739 57.141418 30.882358 0 56.07104-25.647123 56.07104-57.141418 0-19.388583-9.824763-37.386492-25.892717-47.914266-2.539846-16.771989-3.764744-32.351825-3.764744-47.517223 0-19.863397 1.836835-39.803541 5.448082-59.360969l372.35759 0c3.612271 19.465331 5.448082 39.405475 5.448082 59.360969 0 15.395642-1.254573 31.157627-3.795443 48.083112-15.578814 10.559497-25.066909 28.387537-25.066909 47.348378 0 31.494295 25.130354 57.141418 56.041364 57.141418 30.943756 0 56.101739-25.647123 56.101739-57.141418 0-19.894096-10.039657-37.983079-26.536376-48.38908 1.957585-16.160051 2.907213-31.616068 2.907213-47.042409 0-19.618826-1.528819-39.512922-4.559852-59.360969l68.007907 0c18.883069 0 34.248012 15.761985 34.248012 35.166941L860.958158 846.881047C860.897783 866.22358 845.565587 881.95589 826.71117 881.95589" p-id="1896"></path></svg>
\ No newline at end of file
src/router/index.js
浏览文件 @ 5f300396
......@@ -75,7 +75,7 @@ import Layout from '@/layout'
/**
* 需要动态添加的路由
* 需要动态添加的路由（此处仅做记录，保证与后端保持同步）
*/
export const asyncRouterMap = [
{
......@@ -141,6 +141,15 @@ export const asyncRouterMap = [
title: '文献管理',
icon: 'literature'
}
},
{
path: 'product',
name: 'Product',
component: () => import('@/views/product/index'),
meta: {
title: '文创产品管理',
icon: 'product'
}
}
]
},
......
src/styles/index.scss
浏览文件 @ 5f300396
......@@ -61,5 +61,5 @@ div:focus {
// main-container global css
.app-container {
padding: 20px;
padding: 40px;
}
src/utils/index.js
浏览文件 @ 5f300396
......@@ -100,7 +100,7 @@ export function formatTime(time, option) {
export function getYestoday() {
let d = new Date().getTime() - 1000 * 60 * 60 * 24
return parseTime(new Date(new Date().getTime() - 1000 * 60 * 60 * 24),"{yy}-{mm}-{dd}")
return parseTime(new Date(new Date().getTime() - 1000 * 60 * 60 * 24), "{yy}-{mm}-{dd}")
}
/**
......@@ -181,6 +181,8 @@ export function getFullUrl(url) {
if (url && url.indexOf('http') != -1 && url.indexOf('files') != -1) {
let urlArr = url.split('files')
fullUrl = '/files' + urlArr[1]
} else if (url && url.indexOf('http') == -1 && url.indexOf('files') == -1) {
fullUrl = '/files' + url
} else {
fullUrl = url
}
......
src/views/display/components/InfoEditDialog.vue
浏览文件 @ 5f300396
......@@ -403,7 +403,7 @@ export default {
}
});
}
// 回填文物
// 回填虚拟展厅
this.vrIds = [];
if (
this.dialogForm.virtualVo &&
......@@ -621,20 +621,6 @@ export default {
let files = [...this.$refs[media].getFiles()];
let fileIds = []; //不同媒体或单元已经存在的文件id数组
files.map((f) => {
// switch (f.status) {
// case "ready":
// formData.append(media, f.raw);
// break;
// case "success":
// if (successFilesObj[media]) {
// successFilesObj[media].push(f);
// } else {
// successFilesObj[media] = [f];
// }
// fileIds.push(f.fileId);
// break;
// }
if (f.status && f.status == "ready") {
formData.append(media, f.raw);
} else {
......@@ -660,11 +646,8 @@ export default {
});
}
});
// return
let unitIds = [];
let unitData = [...this.$refs["exhibitionUnits"].getUnitData()];
// debugger;
// return
// 批量添加image进入formdata
let newfileIdsArr = []; //不同媒体或单元已经存在的文件id数组
......@@ -733,34 +716,6 @@ export default {
// ];
// }
// if (imageFiles.length > 0) {
// imageFiles.forEach((imgFile) => {
// if (imgFile.status === "ready") {
// formData.append(`unit-images-${euId}`, imgFile.raw);
// } else {
// //
// if (successFilesObj[`unit-images-${euId}`]) {
// successFilesObj[`unit-images-${euId}`].push(imgFile);
// } else {
// successFilesObj[`unit-images-${euId}`] = [imgFile];
// }
// }
// });
// }
// if (videoFiles.length > 0) {
// videoFiles.forEach((videoFile) => {
// if (videoFile.status === "ready") {
// formData.append(`unit-videos-${euId}`, videoFile.raw);
// } else {
// if (successFilesObj[`unit-videos-${euId}`]) {
// successFilesObj[`unit-videos-${euId}`].push(videoFiles);
// } else {
// successFilesObj[`unit-videos-${euId}`] = [videoFiles];
// }
// }
// });
// }
// });
// 上传所有媒体文件
let filesObj = {};
......
src/views/product/components/InfoEditDialog.vue 0 → 100644
浏览文件 @ 5f300396
<template>
<el-dialog
:visible.sync="dialogVisible"
width="40%"
style="height: 98%"
:before-close="handleClose"
top="5vh"
lock-scroll
v-loading="submitLoading"
element-loading-background="rgba(0, 0, 0, 0.5)"
:element-loading-text="loadingText"
>
<div class="title" slot="title">
<div class="divider"></div>
<div class="label">{{ title }}</div>
</div>
<div class="dialog-content">
<el-form :model="dialogForm" class="basic-info">
<el-form-item label="名称" :label-width="formLabelWidth">
<el-input
v-model="dialogForm.title"
autocomplete="off"
placeholder="请输入名称"
></el-input>
</el-form-item>
<el-form-item label="所属博物馆" :label-width="formLabelWidth">
<el-cascader
style="width: 100%"
v-model="dialogForm.deptId"
:options="orgTreeData"
:props="optionProps"
placeholder="请选择所属博物馆"
:key="pidModalKey"
filterable
>
</el-cascader>
</el-form-item>
<el-form-item label="所属地" :label-width="formLabelWidth">
<el-cascader
style="width: 100%"
v-model="dialogForm.regionCode"
:options="regionTree"
:props="regionOptionProps"
placeholder="请选择所属地"
:key="regionCodeModalKey"
filterable
>
</el-cascader>
</el-form-item>
<el-form-item label="展览介绍" :label-width="formLabelWidth">
<VueQuillEditor ref="VueQuillEditor"
v-model="dialogForm.intro"
:placeholder="'请输入产品介绍'"
/>
</el-form-item>
<el-form-item label="上架" :label-width="formLabelWidth">
<el-switch v-model="status"> </el-switch>
</el-form-item>
<el-form-item label="文创图片" :label-width="formLabelWidth">
<ManualUploader
:files="images"
:fileLimit="6"
:fileSize="50"
listType="picture-card"
:fileType="['png', 'jpeg', 'jpg']"
ref="images"
/>
</el-form-item>
</el-form>
</div>
<div class="dialog-footer">
<el-button @click="cancelForm">取 消</el-button>
<el-button type="primary" @click="handleSubmit"
>确定<i class="el-icon-right" style="margin-left: 5px"></i
></el-button>
</div>
</el-dialog>
</template>
<script>
import { addCcProduct, updateCcProduct } from "@/api/literature";
import ManualUploader from "@/components/Uploader/ManualUploader.vue";
import { mapGetters } from "vuex";
import { uploadV1 } from "@/utils/file";
import VueQuillEditor from "@/components/VueQuillEditor";
export default {
name: "InfoEditDialog",
components: {
ManualUploader,
VueQuillEditor
},
props: {
visible: {
type: Boolean,
default: false,
},
form: {
type: Object,
default: () => ({}),
},
orgTreeData: {
type: Array,
default: () => [],
},
},
computed: {
...mapGetters(["userInfo"]),
title() {
if (this.dialogForm.bccpId) {
return "修改信息";
} else {
return "添加文创产品";
}
},
},
watch: {
visible: {
handler: function (value) {
this.dialogVisible = value;
this.loadRegionTree();
},
deep: true,
immediate: true,
},
form: {
handler: function (value) {
let that = this;
that.dialogForm = JSON.parse(JSON.stringify(value));
if (that.dialogForm.bccpId) {
// 回填状态
that.status = Boolean(Number(that.dialogForm.status));
// 回填图片
that.images = that.dialogForm.imagesVo || [];
}
},
immediate: true,
deep: true,
},
orgTreeData(value) {
// 遍历，如果children为空，则直接去掉children，以免选择器中显示无结果
if (value) {
let tree = [...value];
loopTree(tree);
function loopTree(arr) {
arr.forEach((item) => {
if (item.children && item.children.length == 0) {
delete item.children;
} else {
loopTree(item.children);
}
});
}
}
},
},
data() {
return {
dialogForm: {},
formLabelWidth: "100px",
optionProps: {
value: "id",
label: "name",
children: "children",
checkStrictly: true, //单选选择任意一级选项
},
regionOptionProps: {
value: "code",
label: "name",
children: "children",
checkStrictly: true, //单选选择任意一级选项
},
regionTree: [],
status: true,
pidModalKey: 0,
regionCodeModalKey: 0,
images: [],
dialogVisible: false,
submitLoading: false,
loadingText: "",
};
},
methods: {
handlePreview({ type, file }) {
console.log(type, file);
},
handleRemove(file, fileList) {
console.log(file, fileList);
},
// 取消编辑
cancelForm() {
this.$emit("handleClose");
this.images = [];
if (this.submitLoading) {
this.submitLoading = false;
}
},
loadRegionTree() {
let parentId = "";
this.$store.dispatch("org/getSysRegionTreeData", parentId).then((res) => {
this.regionTree = res;
loopTree(this.regionTree);
function loopTree(arr) {
if (arr && arr.length > 0) {
arr.forEach((item) => {
if (item.children && item.children.length == 0) {
delete item.children;
} else {
loopTree(item.children);
}
});
}
}
});
},
async handleSubmit() {
// this.submitLoading = true;
let params = { ...this.dialogForm };
let deleteFileArr = [];
let files = this.$refs.images.getFiles();
let imgFileIds = [];
if (files.length > 0) {
let formData = new FormData();
files.map((f) => {
switch (f.status) {
case "ready":
formData.append("images", f.raw);
break;
case "success":
imgFileIds.push(f.fileId);
break;
}
});
var formDataArr = Array.from(formData.entries(), ([key, prop]) => ({
[key]: {
ContentLength: typeof prop === "string" ? prop.length : prop.size,
},
}));
console.log("formDataArr.length", formDataArr.length);
console.log("params", params);
// return;
// formData有长度时再进行上传
if (formDataArr.length > 0) {
this.loadingText = "正在上传文件...请耐心等待";
let upLoadRes = await uploadV1(formData);
if (upLoadRes.code == 0) {
upLoadRes.data.map((resFile) => {
imgFileIds.push(resFile.fileId);
});
}
}
params.images = imgFileIds.join(',');
} else {
params.images = "";
}
// return;
// 处理行政区划
if (params.regionCode instanceof Array) {
params.regionCode = params.regionCode[params.regionCode.length - 1];
}
// 处理所属部门
if (params.deptId instanceof Array) {
params.deptId = params.deptId[params.deptId.length - 1];
}
// 处理状态
params.status = this.status ? 1 : 0;
if (this.dialogForm.bccpId) {
let res = await updateCcProduct(params);
if (res.code == 0) {
this.$message.success("修改成功！");
this.reload();
}
} else {
let res = await addCcProduct(params);
if (res.code == 0) {
this.$message.success("添加成功！");
this.reload();
}
}
},
reload() {
this.$emit("refresh", true); //需要重新获取orgTree
this.$emit("handleClose");
this.images = [];
},
handleClose(done) {
this.$confirm("确认关闭？")
.then((_) => {
done();
this.$emit("handleClose");
this.images = [];
})
.catch((_) => {});
},
},
};
</script>
<style lang='scss' scoped>
.title {
display: flex;
margin-bottom: 16px;
.divider {
width: 8px;
border-left: 4px solid #409eff;
margin-right: 8px;
}
.label {
font-weight: bold;
}
}
.dialog-content {
padding: 0 32px;
display: flex;
.basic-info {
flex: 1;
margin-right: 48px;
}
.relate {
flex: 1;
}
}
.dialog-footer {
display: flex;
justify-content: flex-end;
}
.upload-box {
background-color: #fbfdff;
border: 1px dashed #c0ccda;
border-radius: 6px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 148px;
height: 148px;
line-height: 146px;
vertical-align: top;
text-align: center;
margin: 0 8px 8px 0;
i {
font-size: 28px;
color: #8c939d;
}
}
.video-lists {
display: flex;
}
</style>
\ No newline at end of file
src/views/product/config.js 0 → 100644
浏览文件 @ 5f300396
export const title = [{
prop: "title",
label: "名称",
columnAlign: 'center',
},
{
prop: "deptName",
label: "所属博物馆",
columnAlign: 'center',
},
{
prop: "regionName",
label: "所属地",
columnAlign: 'center',
},
{
prop: "images",
label: "封面",
columnAlign: 'center',
isFaceImage: true,
},
{
prop: "status",
label: "状态",
columnAlign: 'center',
isStatus: true,
width: 100
},
// {
// prop: "url",
// label: "链接",
// columnAlign: 'center',
// width:350
// },
]
export const operates = {
operate: true,
label: "操作",
width: "200px",
titleAlign: "center",
columnAlign: "center",
}
export const operations = [
// {
// type: 'view',
// title: '预览'
// },
{
type: 'edit',
title: '编辑'
},
{
type: 'delete',
title: '删除'
},
]
src/views/product/index.vue 0 → 100644
浏览文件 @ 5f300396
<template>
<div class="app-container">
<div class="top-bar">
<SearchBar :config="searchConfig" @search="search" @reset="reset" />
<el-button
type="primary"
@click.native="handleOperation({ type: 'add' })"
icon="el-icon-plus"
>
添加</el-button
>
</div>
<TablePage
:data="list.records"
:tableTitle="tableTitle"
:operates="tableOperates"
>
<template v-slot:images="data">
<img
:src="$getFullUrl(data.scope.imagesVo[0].pressUrl)"
alt="暂无图片"
v-if="data.scope.imagesVo.length > 0"
style="
cursor: pointer;
height: 100px;
width: 100px;
object-fit: contain;
"
width="100px"
@click="
handelPreviewImages($getFullUrl(data.scope.imagesVo[0].pressUrl))
"
/>
</template>
<template v-slot:status="data">
<el-popconfirm
:title="getStatusTitle(data.scope.status)"
@onConfirm="handleChangeStatus(data.scope)"
>
<el-switch
slot="reference"
:value="Boolean(Number(data.scope.status))"
></el-switch>
</el-popconfirm>
</template>
<template v-slot:operates="scope">
<TableOperation
:operations="tableOperations"
:rawData="scope.scope.row"
@handleOperation="handleOperation"
></TableOperation>
</template>
</TablePage>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="Number(list.current)"
:page-sizes="[10, 20, 40, 50]"
:page-size="Number(list.size)"
layout="total, sizes, prev, pager, next, jumper"
:total="Number(list.total)"
class="pagination"
>
</el-pagination>
<InfoEditDialog
:visible="drawerVisible"
:form="form"
:orgTreeData="orgTreeData"
@handleClose="handleClose"
@refresh="loadData"
/>
<el-image-viewer
v-if="imgViewerVisible"
:on-close="closeImgViewer"
:url-list="imgList"
/>
</div>
</template>
<script>
import TablePage from "@/components/Table/TablePage.vue";
import TableOperation from "@/components/Table/TableOperation.vue";
import { title, operates, operations } from "./config";
import { getCcProduct, deleteCcProduct } from "@/api/literature";
import InfoEditDialog from "./components/InfoEditDialog";
import SearchBar from "@/components/SearchBar";
export default {
components: {
TablePage,
TableOperation,
InfoEditDialog,
SearchBar,
"el-image-viewer": () =>
import("element-ui/packages/image/src/image-viewer"),
},
data() {
return {
list: {
records: [],
size: 10,
current: 1,
total: 0,
},
searchForm: {
name: "",
status: "",
},
searchConfig: [
{
prop: "name",
type: "input",
label: "文创名称",
},
{
prop: "status",
type: "select",
label: "状态",
selectOptions: [
{
label: "已上架",
value: "1",
},
{
label: "已下架",
value: "0",
},
],
},
],
drawerVisible: false,
form: {
title: "", //名称
deptId: "", //所属博物馆
regionCode: "", //所属地code
status: true, //上下架状态
images: "", //封面
intro: "", //简介
},
loading: false,
orgTreeData: [],
imgViewerVisible: false,
imgList: [],
};
},
computed: {
tableTitle() {
return title;
},
tableOperates() {
return operates;
},
tableOperations() {
return operations;
},
getStatusTitle(status) {
return (status) => {
if (Number(status)) {
return "是否确定要下架？";
} else {
return "是否确定要上架？";
}
};
},
},
mounted() {
this.loadData();
this.loadOrgTree();
},
methods: {
async search(form) {
var params = {
page: this.list.current,
limit: this.list.size,
...form,
};
if (params.status == "") {
delete params.status;
}
let res = await getCcProduct(params);
if (res.code == 0) {
this.list = res.data;
}
},
reset() {
this.loadData();
},
// 加载表格数据
async loadData() {
var params = {
page: this.list.current,
limit: this.list.size,
};
let res = await getCcProduct(params);
if (res.code == 0) {
this.list = res.data;
}
},
loadOrgTree() {
this.$store.dispatch("org/getMuseumTreeData", true).then((res) => {
// this.orgTreeData = res[0].children; //去掉文旅厅根节点
this.orgTreeData = res; //去掉文旅厅根节点
});
},
async handleOperation(value, row) {
switch (value.type) {
case "add":
this.drawerVisible = true;
break;
case "edit":
this.form = row;
this.drawerVisible = true;
break;
case "delete":
let deleteRes = await deleteCcProduct([row.bccpId]);
if (deleteRes.code == 0) {
this.$message.success("删除成功！");
this.loadData();
}
break;
}
},
// 关闭预览图片
closeImgViewer() {
this.imgViewerVisible = false;
},
// 预览图片
handelPreviewImages(images) {
this.imgViewerVisible = true;
if (images.length > 1) {
this.imgList = images.split(",");
} else {
this.imgList = [images];
}
},
async handleChangeStatus(row) {
console.log("status", row);
const { status } = row;
let newStatus = status === "0" ? "1" : "0";
const params = {
...row,
status: newStatus,
};
// let res = await editVirtual(params);
// if (res.code == 0) {
// this.loadData();
// this.$message.success("修改成功！");
// }
},
// 多选
handleSelectionChange(val) {
this.multipleSelection = val;
},
// 改变页容量
handleSizeChange(value) {
this.list.size = value;
this.loadData();
},
// 改变当前显示页
handleCurrentChange(value) {
this.list.current = value;
this.loadData();
},
// 搜索
onSubmitSearch() {
console.log("submit!");
},
// 打开drawer
handleOpenDialog(type, value) {
this.drawerVisible = true;
switch (type) {
case "add":
console.log("新增");
break;
case "edit":
console.log("编辑", value);
break;
}
},
// 关闭Dialog
handleClose() {
this.drawerVisible = false;
this.form = {
status: true,
};
},
},
};
</script>
<style lang="scss" scoped>
.top-bar {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.pagination {
margin: 16px;
}
::v-deep .el-card__header {
padding: 10px 20px;
font-weight: bold;
}
.deptName {
padding: 12px 16px;
font-size: 13px;
}
.theme {
padding: 4px 16px;
font-size: 13px;
}
.faceImage {
padding: 16px;
.img {
position: relative;
// width: 100%;
width: 100%;
height: 160px;
&:hover {
.modal {
background-color: rgba(0, 0, 0, 0.3);
i {
display: inline;
}
.view-text {
display: block;
}
}
}
img {
width: 100%;
height: 100%;
}
.modal {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
transition: all ease 0.3s;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
i {
font-size: 28px;
color: #fff;
display: none;
transition: all ease 0.3s;
}
.view-text {
color: #fff;
font-size: 12px;
display: none;
transition: all ease 0.3s;
}
// display: none;
}
}
}
::v-deep .el-image {
.image-slot {
width: 100%;
height: 100%;
}
}
.buttons {
.el-button {
border-radius: 0;
}
}
</style>
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论