180 lines
7.8 KiB
HTML
180 lines
7.8 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<title>图片上传样式预览</title>
|
||
<style>
|
||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||
body {
|
||
font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
|
||
background: #f5f7fa;
|
||
padding: 32px 24px 56px;
|
||
color: #1c2333;
|
||
}
|
||
.wrap { max-width: 1080px; margin: 0 auto; }
|
||
h2 { font-size: 16px; font-weight: 600; margin-bottom: 6px; }
|
||
.desc { font-size: 13px; color: #8b93a7; margin-bottom: 20px; }
|
||
.card {
|
||
background: #fff; border-radius: 10px; padding: 24px 28px;
|
||
margin-bottom: 28px; box-shadow: 0 1px 3px rgba(28,35,51,.06);
|
||
}
|
||
.label { font-size: 14px; color: #5b6478; margin-bottom: 12px; }
|
||
|
||
/* ===== 与 AttachmentUpload.vue imageOnly 模式样式保持一致 ===== */
|
||
$primary: #577afb;
|
||
.img-drag-upload { display: block; width: 100%; }
|
||
.img-drag-upload .ivu-upload-drag {
|
||
display: block; width: 100%; padding: 26px 28px;
|
||
background: #fbfcfe; border: 1px dashed #e6ebf4; border-radius: 8px;
|
||
transition: border-color .2s ease, background .2s ease; cursor: pointer;
|
||
}
|
||
.img-drag-upload .ivu-upload-drag:hover { background: #f8faff; border: 1px dashed rgba(87,122,251,.5); }
|
||
.img-drag-upload .ivu-upload-dragOver { background: #eef3ff; border: 1px dashed #577afb; }
|
||
.drag-inner { display: flex; align-items: center; gap: 16px; user-select: none; }
|
||
.drag-icon {
|
||
flex-shrink: 0; display: flex; align-items: center; justify-content: center;
|
||
width: 56px; height: 56px; border-radius: 8px; background: #eef3ff; color: #577afb;
|
||
}
|
||
.drag-icon svg { width: 26px; height: 26px; }
|
||
.drag-text { min-width: 0; }
|
||
.drag-title { font-size: 15px; line-height: 22px; color: #5b6478; }
|
||
.drag-link { color: #577afb; }
|
||
.drag-sub { margin-top: 4px; font-size: 13px; line-height: 20px; color: #99a2b5; }
|
||
|
||
/* ===== 缩略图网格（上传成功后） ===== */
|
||
.img-preview-list { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
|
||
.img-preview-item {
|
||
width: 108px; border: 1px solid #e6ebf4; border-radius: 6px;
|
||
overflow: hidden; background: #fff; transition: box-shadow .2s;
|
||
}
|
||
.img-preview-item:hover { box-shadow: 0 2px 10px rgba(87,122,251,.18); border-color: #577afb; }
|
||
.img-thumb-box { position: relative; width: 100%; height: 80px; cursor: pointer; background: #f6f8fc; }
|
||
.img-thumb { width: 100%; height: 80px; object-fit: cover; display: block; }
|
||
.img-mask {
|
||
position: absolute; inset: 0; display: flex; flex-direction: column;
|
||
align-items: center; justify-content: center; gap: 2px; color: #fff;
|
||
font-size: 12px; background: rgba(28,35,51,.45); opacity: 0; transition: opacity .2s;
|
||
}
|
||
.img-preview-item:hover .img-mask { opacity: 1; }
|
||
.img-meta { display: flex; align-items: center; padding: 4px 6px; border-top: 1px solid #f0f3f9; }
|
||
.img-name {
|
||
flex: 1; font-size: 12px; color: #5b6478; overflow: hidden;
|
||
text-overflow: ellipsis; white-space: nowrap;
|
||
}
|
||
.img-del { color: #c5c8ce; cursor: pointer; font-size: 18px; line-height: 1; }
|
||
.img-del:hover { color: #e5484d; }
|
||
|
||
.tag {
|
||
display: inline-block; font-size: 12px; padding: 2px 8px; border-radius: 4px;
|
||
margin-bottom: 12px; background: #eef3ff; color: #577afb;
|
||
}
|
||
.thumb-holder { width: 108px; height: 80px; background: linear-gradient(135deg,#c7d7ff,#9fb6f7); }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="wrap">
|
||
<h2>图片上传样式预览</h2>
|
||
<p class="desc">对应组件：src/components/AttachmentUpload.vue（imageOnly 模式）— 应用页 src/views/leave/ApplyLeave.vue</p>
|
||
|
||
<!-- 状态1：默认 -->
|
||
<div class="card">
|
||
<span class="tag">默认态</span>
|
||
<div class="label">图片</div>
|
||
<div class="img-drag-upload">
|
||
<div class="ivu-upload-drag">
|
||
<div class="drag-inner">
|
||
<div class="drag-icon">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M20 17.58A5 5 0 0 0 18 8h-1.26A8 8 0 1 0 4 16.25"/><path d="M16 16l-4-4-4 4"/><path d="M12 12v9"/>
|
||
</svg>
|
||
</div>
|
||
<div class="drag-text">
|
||
<div class="drag-title">点击或拖拽图片到此处<span class="drag-link">上传</span></div>
|
||
<div class="drag-sub">支持 .jpg / .bmp / .png 格式，单张不超过 20MB，可多选</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 状态2：hover -->
|
||
<div class="card">
|
||
<span class="tag">悬停态</span>
|
||
<div class="label">图片</div>
|
||
<div class="img-drag-upload">
|
||
<div class="ivu-upload-drag" style="background:#f8faff; border:1px dashed rgba(87,122,251,.5);">
|
||
<div class="drag-inner">
|
||
<div class="drag-icon">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M20 17.58A5 5 0 0 0 18 8h-1.26A8 8 0 1 0 4 16.25"/><path d="M16 16l-4-4-4 4"/><path d="M12 12v9"/>
|
||
</svg>
|
||
</div>
|
||
<div class="drag-text">
|
||
<div class="drag-title">点击或拖拽图片到此处<span class="drag-link">上传</span></div>
|
||
<div class="drag-sub">支持 .jpg / .bmp / .png 格式，单张不超过 20MB，可多选</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 状态3：拖拽经过 -->
|
||
<div class="card">
|
||
<span class="tag">拖拽经过态（dragOver）</span>
|
||
<div class="label">图片</div>
|
||
<div class="img-drag-upload">
|
||
<div class="ivu-upload-drag" style="background:#eef3ff; border:1px dashed #577afb;">
|
||
<div class="drag-inner">
|
||
<div class="drag-icon">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M20 17.58A5 5 0 0 0 18 8h-1.26A8 8 0 1 0 4 16.25"/><path d="M16 16l-4-4-4 4"/><path d="M12 12v9"/>
|
||
</svg>
|
||
</div>
|
||
<div class="drag-text">
|
||
<div class="drag-title">点击或拖拽图片到此处<span class="drag-link">上传</span></div>
|
||
<div class="drag-sub">松开鼠标即可上传</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 状态4：已上传 -->
|
||
<div class="card">
|
||
<span class="tag">已上传态（缩略图 + 点击放大）</span>
|
||
<div class="label">图片</div>
|
||
<div class="img-drag-upload">
|
||
<div class="ivu-upload-drag">
|
||
<div class="drag-inner">
|
||
<div class="drag-icon">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M20 17.58A5 5 0 0 0 18 8h-1.26A8 8 0 1 0 4 16.25"/><path d="M16 16l-4-4-4 4"/><path d="M12 12v9"/>
|
||
</svg>
|
||
</div>
|
||
<div class="drag-text">
|
||
<div class="drag-title">点击或拖拽图片到此处<span class="drag-link">上传</span></div>
|
||
<div class="drag-sub">支持 .jpg / .bmp / .png 格式，单张不超过 20MB，可多选</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="img-preview-list">
|
||
<div class="img-preview-item">
|
||
<div class="img-thumb-box">
|
||
<div class="img-thumb thumb-holder"></div>
|
||
<div class="img-mask"><span>查看大图</span></div>
|
||
</div>
|
||
<div class="img-meta"><span class="img-name">病历单.jpg</span><span class="img-del">✕</span></div>
|
||
</div>
|
||
<div class="img-preview-item">
|
||
<div class="img-thumb-box">
|
||
<div class="img-thumb" style="background:linear-gradient(135deg,#d5e8d0,#9ec9a1);"></div>
|
||
<div class="img-mask"><span>查看大图</span></div>
|
||
</div>
|
||
<div class="img-meta"><span class="img-name">证明材料_01.png</span><span class="img-del">✕</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html> |