109 lines
2.8 KiB
Vue
109 lines
2.8 KiB
Vue
<template>
|
||
<div class="app-container">
|
||
<router-view/>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'App'
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
/* 全局样式 */
|
||
html, body {
|
||
margin: 0;
|
||
padding: 0;
|
||
height: 100%;
|
||
width: 100%;
|
||
}
|
||
|
||
body {
|
||
background: #f8f8f8; /* 你想要的颜色 */
|
||
}
|
||
|
||
/* 确保app容器撑满全屏 */
|
||
.app-container {
|
||
min-height: 100vh;
|
||
width: 100%;
|
||
}
|
||
|
||
/* ========== 统一所有模块右侧图片显示样式 ========== */
|
||
/* 右侧区域容器 - 统一居中布局 */
|
||
.right-area {
|
||
display: flex !important;
|
||
justify-content: center !important;
|
||
align-items: flex-start !important;
|
||
}
|
||
|
||
/* 上传区域容器 - 统一居中布局 */
|
||
.upload-area {
|
||
display: flex !important;
|
||
justify-content: center !important;
|
||
align-items: flex-start !important;
|
||
}
|
||
|
||
/* 统一 el-upload picture-card 列表布局 */
|
||
.right-area .el-upload-list--picture-card,
|
||
.upload-area .el-upload-list--picture-card {
|
||
display: flex !important;
|
||
justify-content: center !important;
|
||
flex-wrap: wrap !important;
|
||
gap: 16px !important;
|
||
}
|
||
|
||
/* 统一图片卡片尺寸：148px × 148px */
|
||
.right-area .el-upload-list--picture-card .el-upload-list__item,
|
||
.upload-area .el-upload-list--picture-card .el-upload-list__item {
|
||
width: 148px !important;
|
||
height: 148px !important;
|
||
margin: 0 !important;
|
||
border: 1px solid #c0ccda !important;
|
||
border-radius: 6px !important;
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
|
||
background: white !important;
|
||
}
|
||
|
||
.right-area .el-upload-list--picture-card .el-upload-list__item:hover,
|
||
.upload-area .el-upload-list--picture-card .el-upload-list__item:hover {
|
||
border-color: #409EFF !important;
|
||
box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2) !important;
|
||
}
|
||
|
||
.right-area .el-upload-list--picture-card .el-upload-list__item-thumbnail,
|
||
.upload-area .el-upload-list--picture-card .el-upload-list__item-thumbnail {
|
||
width: 100% !important;
|
||
height: 100% !important;
|
||
object-fit: cover !important;
|
||
}
|
||
|
||
/* 统一自定义图片项样式（用于非 el-upload 的情况） */
|
||
.preview-images {
|
||
display: flex !important;
|
||
flex-wrap: wrap !important;
|
||
justify-content: center !important;
|
||
gap: 16px !important;
|
||
}
|
||
|
||
.image-item {
|
||
width: 148px !important;
|
||
height: 148px !important;
|
||
border: 1px solid #c0ccda !important;
|
||
border-radius: 6px !important;
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
|
||
background: white !important;
|
||
}
|
||
|
||
.image-item:hover {
|
||
border-color: #409EFF !important;
|
||
box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2) !important;
|
||
}
|
||
|
||
.image-item img {
|
||
width: 100% !important;
|
||
height: 100% !important;
|
||
object-fit: cover !important;
|
||
}
|
||
</style>
|
||
|