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