hjq/mart-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

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

@ -1,7 +1,7 @@
<template> <template>
<div class="system-dept-container layout-padding"> <div class="system-dept-container layout-padding">
<el-card shadow="hover" class="layout-padding-auto"> <el-card shadow="hover" class="layout-padding-auto">
<div class="system-dept-search mb15"> <!-- <div class="system-dept-search mb15">
<span>名称:</span> <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-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;"> <el-button @click="getTableData" size="default" type="primary" class="ml10" style="margin-right: 15px;">
@ -15,30 +15,51 @@
<ele-RefreshRight /> <ele-RefreshRight />
</el-icon> </el-icon>
重置 重置
</el-button> </el-button> -->
<el-button @click="switchDrawer(0)" size="default" type="primary" class="ml10"> <!-- <el-button @click="switchDrawer(0)" size="default" type="primary" class="ml10">
<el-icon> <el-icon>
<ele-FolderAdd /> <ele-FolderAdd />
</el-icon> </el-icon>
新增轮播图 新增轮播图
</el-button> </el-button> -->
</div> <!-- </div> -->
<el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%"> <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="350px"></el-table-column> <el-table-column prop="name" label="轮播图名称" show-overflow-tooltip width="210px"></el-table-column>
<el-table-column label="跳转链接" show-overflow-tooltip width="350px" align="center"> <el-table-column label="素材" width="350px" align="center">
<template #default="scope"> <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> </template>
</el-table-column> </el-table-column>
<el-table-column prop="orderNum" label="排序号" sortable show-overflow-tooltip width="350px" align="center"></el-table-column> <el-table-column label="跳转地址" show-overflow-tooltip width="350px" align="center">
<el-table-column prop="createtime" label="创建时间" :formatter="dateFormatter" show-overflow-tooltip width="350px" align="center"></el-table-column> <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"> <el-table-column label="操作" width="300" align="center">
<template #default="scope"> <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="switchDrawer(scope.row.id,1)">
<el-button size="small" text type="primary" @click="deleteBanner(scope.row.id)">删除</el-button> <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> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<div class="add-banner" @click="switchDrawer(0)">
+ 添加banner
</div>
<!-- 新增或编辑弹窗 --> <!-- 新增或编辑弹窗 -->
<el-drawer <el-drawer
v-model="dialog" v-model="dialog"
@ -92,8 +113,8 @@
<img :src="dialogImageUrl" style="width: 100%" alt="Preview Image" /> <img :src="dialogImageUrl" style="width: 100%" alt="Preview Image" />
</el-dialog> </el-dialog>
</el-form-item> </el-form-item>
<el-form-item label="跳转链接:" prop="path"> <el-form-item label="跳转链接:" prop="url">
<el-input v-model="state.formData.path" /> <el-input v-model="state.formData.url" />
</el-form-item> </el-form-item>
<el-form-item label="排序号:" prop="orderNum"> <el-form-item label="排序号:" prop="orderNum">
<el-input v-model.number="state.formData.orderNum" /> <el-input v-model.number="state.formData.orderNum" />
@ -108,7 +129,7 @@
</div> </div>
</el-drawer> </el-drawer>
<!-- 分页器 --> <!-- 分页器 -->
<el-pagination <!-- <el-pagination
@size-change="onHandleSizeChange" @size-change="onHandleSizeChange"
@current-change="onHandleCurrentChange" @current-change="onHandleCurrentChange"
class="mt15" class="mt15"
@ -120,7 +141,7 @@
layout="total, sizes, prev, pager, next, jumper" layout="total, sizes, prev, pager, next, jumper"
:total="state.tableData.total" :total="state.tableData.total"
> >
</el-pagination> </el-pagination> -->
</el-card> </el-card>
</div> </div>
</template> </template>
@ -152,6 +173,7 @@ const state = reactive({
fileList: [], fileList: [],
name:"", name:"",
path:"", path:"",
url: '',
orderNum: "", orderNum: "",
loading: false loading: false
}, },
@ -193,18 +215,20 @@ const getTableData = async() => {
}; };
// 重置 // 重置
const reset = () =>{ // const reset = () =>{
state.tableData.param = { // state.tableData.param = {
name: '', // name: '',
current: 1, // current: 1,
size: 10, // size: 10,
} // }
getTableData(); // getTableData();
} // }
// 图片基本路径 // 图片基本路径
const viteUrl = import.meta.env.VITE_API_URL; const viteUrl = import.meta.env.VITE_API_URL;
// 图片链接格式化 // 图片链接格式化
const jpgFormatter = (row: any) => { const jpgFormatter = (row: any) => {
console.log("44444444444",row); console.log("44444444444",row);
@ -221,7 +245,26 @@ const jpgFormatter = (row: any) => {
newPath = newPath.includes('http://localhost:8888/') ? newPath : viteUrl + newPath newPath = newPath.includes('http://localhost:8888/') ? newPath : viteUrl + newPath
console.log("22222222222222222",newPath); console.log("22222222222222222",newPath);
return `${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>) => { const dateFormatter = (row: any, column: TableColumnCtx<String>) => {
@ -230,16 +273,16 @@ const dateFormatter = (row: any, column: TableColumnCtx<String>) => {
} }
// 分页改变 // 分页改变
const onHandleSizeChange = (val: number) => { // const onHandleSizeChange = (val: number) => {
state.tableData.param.size = val; // state.tableData.param.size = val;
getTableData(); // getTableData();
}; // };
// 分页改变 // // 分页改变
const onHandleCurrentChange = (val: number) => { // const onHandleCurrentChange = (val: number) => {
state.tableData.param.current = val; // state.tableData.param.current = val;
getTableData(); // getTableData();
}; // };
// #endregion // #endregion
// #region // #region
@ -297,8 +340,8 @@ const handleChange: UploadProps['onChange'] = async (file: uploadFile, uploadFil
console.log("result", res); console.log("result", res);
console.log("state.formData", state.formData); console.log("state.formData", state.formData);
if(res?.success){ if(res?.success){
state.formData.url = jpgFormatter(res); // state.formData.url = jpgFormatter(res);
state.formData.path = jpgFormatter(res); state.formData.path = res.data.path;
ElMessage({ ElMessage({
message: '图片上传成功！', message: '图片上传成功！',
type: 'success', type: 'success',
@ -454,17 +497,73 @@ onMounted(() => {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.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 { .system-dept-container {
:deep(.el-card__body) { :deep(.el-card__body) {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex: 1; flex: 1;
overflow: auto; overflow-y: auto;
max-height: 1000px; // 固定最大高度
padding: 20px;
.el-table { .el-table {
flex: 1; 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 { ::v-deep .el-drawer .el-drawer__header {
margin: 15px 0 20px 0!important; margin: 15px 0 20px 0!important;
border-bottom: 0!important; border-bottom: 0!important;