hjq/PixelAI-admin
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

轮播图样式修改

Browse Source
This commit is contained in:
夕阳微笑1 2024-12-16 13:44:01 +08:00
parent 027772c637
commit 3ad716ba12
1 changed files with 147 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

195
src/views/carousel/index.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="system-dept-container layout-padding">
<el-card shadow="hover" class="layout-padding-auto">
<div class="system-dept-search mb15">
<!-- <div class="system-dept-search mb15">
<span>名称:</span>
<el-input size="default" placeholder="请输入" v-model="state.tableData.param.name" class="ml10" style="max-width: 250px;margin-right: 20px;"> </el-input>
<el-button @click="getTableData" size="default" type="primary" class="ml10" style="margin-right: 15px;">
@ -15,30 +15,51 @@
<ele-RefreshRight />
</el-icon>
重置
</el-button>
<el-button @click="switchDrawer(0)" size="default" type="primary" class="ml10">
</el-button> -->
<!-- <el-button @click="switchDrawer(0)" size="default" type="primary" class="ml10">
<el-icon>
<ele-FolderAdd />
</el-icon>
新增轮播图
</el-button>
</div>
<el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%">
<el-table-column prop="name" label="轮播图名称" show-overflow-tooltip width="350px"></el-table-column>
<el-table-column label="跳转链接" show-overflow-tooltip width="350px" align="center">
</el-button> -->
<!-- </div> -->
<el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%;" class="custom-table">
<el-table-column prop="name" label="轮播图名称" show-overflow-tooltip width="210px"></el-table-column>
<el-table-column label="素材" width="350px" align="center">
<template #default="scope">
<a :href="jpgFormatter(scope.row)">{{ jpgFormatter(scope.row) }}</a>
<el-image :src="encodeURI(viteUrl+scope.row.path)" />
<!-- <a :href="jpgFormatter(scope.row)">{{ jpgFormatter(scope.row) }}</a> -->
<!-- <el-button @click="jpgJump(scope.row)" text type="primary">{{ jpgFormatter(scope.row) }}</el-button> -->
</template>
</el-table-column>
<el-table-column prop="orderNum" label="排序号" sortable show-overflow-tooltip width="350px" align="center"></el-table-column>
<el-table-column prop="createtime" label="创建时间" :formatter="dateFormatter" show-overflow-tooltip width="350px" align="center"></el-table-column>
<el-table-column label="跳转地址" show-overflow-tooltip width="350px" align="center">
<template #default="scope">
<!-- <a :href="jpgFormatter(scope.row)">{{ jpgFormatter(scope.row) }}</a> -->
<el-button @click="jpgJump(scope.row)" text type="primary">{{ scope.row.url }}</el-button>
</template>
</el-table-column>
<el-table-column prop="orderNum" label="排序号" sortable show-overflow-tooltip width="150px" align="center"></el-table-column>
<el-table-column prop="createtime" label="创建时间" :formatter="dateFormatter" show-overflow-tooltip width="250px" align="center"></el-table-column>
<el-table-column label="操作" width="300" align="center">
<template #default="scope">
<el-button size="small" text type="primary" @click="switchDrawer(scope.row.id,1)">编辑</el-button>
<el-button size="small" text type="primary" @click="deleteBanner(scope.row.id)">删除</el-button>
<el-button size="small" text type="primary" @click="switchDrawer(scope.row.id,1)">
<el-icon>
<ele-EditPen/>
</el-icon>
</el-button>
<el-button size="small" text type="primary" @click="deleteBanner(scope.row.id)">
<el-icon>
<ele-Delete/>
</el-icon>
</el-button>
</template>
</el-table-column>
</el-table-column>
</el-table>
<div class="add-banner" @click="switchDrawer(0)">
+ 添加banner
</div>
<!-- 新增或编辑弹窗 -->
<el-drawer
v-model="dialog"
@ -92,8 +113,8 @@
<img :src="dialogImageUrl" style="width: 100%" alt="Preview Image" />
</el-dialog>
</el-form-item>
<el-form-item label="跳转链接:" prop="path">
<el-input v-model="state.formData.path" />
<el-form-item label="跳转链接:" prop="url">
<el-input v-model="state.formData.url" />
</el-form-item>
<el-form-item label="排序号:" prop="orderNum">
<el-input v-model.number="state.formData.orderNum" />
@ -108,7 +129,7 @@
</div>
</el-drawer>
<!-- 分页器 -->
<el-pagination
<!-- <el-pagination
@size-change="onHandleSizeChange"
@current-change="onHandleCurrentChange"
class="mt15"
@ -120,7 +141,7 @@
layout="total, sizes, prev, pager, next, jumper"
:total="state.tableData.total"
>
</el-pagination>
</el-pagination> -->
</el-card>
</div>
</template>
@ -152,6 +173,7 @@ const state = reactive({
fileList: [],
name:"",
path:"",
url: '',
orderNum: "",
loading: false
},
@ -193,18 +215,20 @@ const getTableData = async() => {
};
// 重置
const reset = () =>{
state.tableData.param = {
name: '',
current: 1,
size: 10,
}
getTableData();
}
// const reset = () =>{
// state.tableData.param = {
// name: '',
// current: 1,
// size: 10,
// }
// getTableData();
// }
// 图片基本路径
const viteUrl = import.meta.env.VITE_API_URL;
// 图片链接格式化
const jpgFormatter = (row: any) => {
console.log("44444444444",row);
@ -221,7 +245,26 @@ const jpgFormatter = (row: any) => {
newPath = newPath.includes('http://localhost:8888/') ? newPath : viteUrl + newPath
console.log("22222222222222222",newPath);
return `${newPath}`;
}
// window.open(newPath);
};
//轮播图跳转
const jpgJump = (row:any) =>{
// console.log("44444444444",row);
// let newPath;
// if (row?.data) {
// newPath = row.data.path.replaceAll('\\', '/')
// console.log("11111111111",newPath);
// } else {
// newPath = row.path.replaceAll('\\\\', '/')
// console.log("333333333333",newPath);
// }
// newPath = newPath.includes('http://localhost:8888/') ? newPath : viteUrl + newPath
// console.log("22222222222222222",newPath);
window.open(row.url);
};
// 日期格式化
const dateFormatter = (row: any, column: TableColumnCtx<String>) => {
@ -230,16 +273,16 @@ const dateFormatter = (row: any, column: TableColumnCtx<String>) => {
}
// 分页改变
const onHandleSizeChange = (val: number) => {
state.tableData.param.size = val;
getTableData();
};
// const onHandleSizeChange = (val: number) => {
// state.tableData.param.size = val;
// getTableData();
// };
// 分页改变
const onHandleCurrentChange = (val: number) => {
state.tableData.param.current = val;
getTableData();
};
// // 分页改变
// const onHandleCurrentChange = (val: number) => {
// state.tableData.param.current = val;
// getTableData();
// };
// #endregion
// #region
@ -297,8 +340,8 @@ const handleChange: UploadProps['onChange'] = async (file: uploadFile, uploadFil
console.log("result", res);
console.log("state.formData", state.formData);
if(res?.success){
state.formData.url = jpgFormatter(res);
state.formData.path = jpgFormatter(res);
// state.formData.url = jpgFormatter(res);
state.formData.path = res.data.path;
ElMessage({
message: '图片上传成功！',
type: 'success',
@ -454,17 +497,73 @@ onMounted(() => {
</script>
<style scoped lang="scss">
.system-dept-container {
:deep(.el-card__body) {
display: flex;
flex-direction: column;
flex: 1;
overflow: auto;
.el-table {
flex: 1;
}
}
.add-banner {
width: 100%; // 让按钮的宽度与表格的行一样
margin: 16px 0;
text-align: center;
color: #409eff;
cursor: pointer;
font-size: 16px;
display: flex;
align-items: center;
justify-content: center;
height: 100px; // 与表格行高度一致
border: 2px dashed #dcdfe6;
border-radius: 8px;
}
.system-dept-container {
:deep(.el-card__body) {
display: flex;
flex-direction: column;
flex: 1;
overflow-y: auto;
max-height: 1000px; // 固定最大高度
padding: 20px;
.el-table {
flex: 1;
width: 100%;
table-layout: fixed; // 表格均分布局
}
// .el-table th, .el-table td {
// text-align: center;
// padding: 12px 8px;
// word-break: break-all;
// }
}
};
::v-deep .el-image {
width: 250px; // 固定图片宽度
height: 150px; // 固定图片高度
object-fit: cover; // 图片居中剪裁
display: block;
}
img[alt="加载失败"] {
content: url('path_to_placeholder_image.png'); // 加载失败时显示占位图片
width: 250px; // 确保占位图片大小一致
height: 100px;
}
::v-deep .el-table__body{
width: 100% !important;
}
::v-deep .el-table__body-wrapper .el-table__row {
margin-bottom: 10px; // 增加底部间距，让卡片分隔更明显
border: 1px solid #dcdfe6; // 更宽的边框，使其明显
border-radius: 8px; // 圆角
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15); // 更强的阴影
background-color: #fff;
overflow: hidden; // 确保内容被边框包裹住
}
::v-deep .el-drawer .el-drawer__header {
margin: 15px 0 20px 0!important;
border-bottom: 0!important;