﻿

/* 定义upload_container容器的样式 */
#itemCollection {
background: #f2f6ff;
border-radius:5px;
display: flex;
flex-direction:row;
flex-wrap:wrap;
gap:20px 100px;
padding:2%;
}

#itemCollection > .item {
flex:0 0 auto;
margin-bottom:10px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
padding:5px;
border-radius:3px;
position:relative;
font-size: 13px;
transition: all 0.1s ease;
cursor:move;
width:180px;
height:300px;
}
#itemCollection > .item:hover {
background:#d9e5ff;
}
#itemCollection .item > .tools {
position:absolute;
top:5px;
right:5px;
z-index:1000;
display:none;
flex-direction:row;
flex-wrap: nowrap; /* 关键属性：强制不换行（即使容器宽度不够，图片也会挤在一行） */
background:#FFF;
border:1px solid #CCC;
border-radius:5px;
cursor:default;
padding: 5px;
}
#itemCollection > .item .tools > img  {
    cursor:pointer;
    margin:2px 5px;
    outline:1px solid #fff;
    border-radius:3px;
    width:21px;
    height:21px;

}
#itemCollection > .item .tools > img:hover {
    outline:1px solid #CCC;
}
#itemCollection > .item .tools > img:active {
    outline:1px solid #F0F;
}
#itemCollection > .item:hover .tools{
display:flex;
}

#itemCollection .item >  .imgs{
display:flex;
padding:2px;
justify-content:center;
align-items:center;
position:relative;
width:160px;
height:200px;
}
#itemCollection .item >  .imgs > img {
position:absolute;
max-width:100%;
max-height:100%;
border:1px solid #CCC;

top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;

object-fit:contain;
transform-origin: center center;
transition: all 0.2s ease;
}


#itemCollection .item > .imgs > img:first-of-type {
top:5px;
left:5px;
}

#itemCollection .item > .title{
width:100%;
display:flex;
justify-content:center;
margin:10px 0;
}

#itemCollection .item > .title > label {
border-radius:5px;
color: rgba(70,100,255,0.85);
background: rgba(70,100,255,0.3);
width:66%;
padding:5px 10px;
line-height:1;
text-align:center;
white-space: nowrap;    /* 防止文本换行 */
overflow: hidden;       /* 隐藏溢出的内容 */
text-overflow: ellipsis; /* 溢出部分显示省略号 */

}

#itemCollection .item > .imgs > .status{
    color:#A00;
    text-shadow: 1px 0 0 #FFF,0 1px 0 #FFF,   -1px 0 0 #FFF,0 -1px 0 #FFF;
    z-index:501;
    white-space:wrap;
}

#itemCollection .item .SizePdfPageCount{
    color:rgba(0,0,0,0.4);
}

#itemCollection .item .paperType {
padding-top:10px;
cursor:default;
font-size:12px;
color:rgba(70,100,255,0.8);
}
#itemCollection .item select.selectGeneral {
border: 1px solid rgba(70,100,255,0.3);
border-radius: 5px;
font-size:12px;
}



/*   图片预览功能 */
 /* 模态层 */
  .modal-overlay {
    position: fixed; inset: 0;flex-direction:column;
    display: none; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.65); z-index: 9999; padding: 24px;
  }
  .modal-overlay.open { display: flex; }

  /* 内部容器 */
 .modal-inner {
  max-width: 95%;
  max-height: 95%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-inner img {
  min-width: 60vh;      /* 宽度最小  */
  max-width: 95%;      /* 最大不超过 95% 宽度 */
  max-height: 95vh;    /* 高度不超过屏幕高度的 95% */
  width: auto;         /* 根据高度缩放时，保持宽高比 */
  height: auto;        /* 根据宽度缩放时，保持宽高比 */
  object-fit: contain; /* 确保完整显示，留空白也不裁剪 */
  border-radius: 6px;
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
}

  /* 公共按钮样式 */
  .modal-close, .modal-prev, .modal-next {
    position: fixed;
    top: 50%; transform: translateY(-50%);
    background: rgba(255,255,255,0.85);
    border: none; width: 70px; height:70px; border-radius: 999px;
    cursor: pointer; font-size: 30px; display: grid; place-items: center;
    box-shadow: 0 4px 12px rgba(0,0,0,.25);
    z-index: 10000;
  }

/* 关闭按钮 */
.modal-close {
top: 30px; right: 30px; transform: none;
}


/* 左右切换按钮固定在屏幕边缘 */
.modal-prev { left: 20px; }
.modal-next { right: 20px; }

.modal-close:hover, .modal-prev:hover, .modal-next:hover{
    color:#F00;
     background:#FFF;
}

.modal-close:active, .modal-prev:active, .modal-next:active{
    color:#FFF;
    background:#F00;
}


  /* 图片说明文字 */
  .modal-caption {
    margin-top: 8px;
    color: #FFF;
    font-size: 15px;
    text-align: center;
   text-shadow: 1px 1px 5px #000;
   line-height:1.8;
   font-weight:bold;
  }