发布流程增加解锁赛伊德与腾讯安全中心截图教程
- 解锁赛伊德:皮肤与交接分区新增是/否必选项,存入 asset_summary, 仅当号主选「是」时在买家端列表/详情展示「解锁赛伊德:是」 - 腾讯安全中心截图:新增可复用 GuideImage 组件(缩略图 + 点击全屏放大), 在该截图槽位展示处罚截图教程图,仅提示用途、不占用上传数量 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Opus 4.8
parent
a88008f783
commit
f336957391
@@ -0,0 +1,93 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
|
||||
withDefaults(
|
||||
defineProps<{
|
||||
src: string
|
||||
label?: string
|
||||
}>(),
|
||||
{
|
||||
label: '点击查看示例',
|
||||
}
|
||||
)
|
||||
|
||||
const open = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="guide-image">
|
||||
<button type="button" class="guide-thumb" @click="open = true">
|
||||
<img :src="src" alt="示例图" loading="lazy" decoding="async" />
|
||||
<span class="guide-thumb-tip">{{ label }}</span>
|
||||
</button>
|
||||
|
||||
<Teleport to="body">
|
||||
<div v-if="open" class="guide-viewer" @click="open = false">
|
||||
<button type="button" class="guide-viewer-close" @click="open = false">关闭</button>
|
||||
<img class="guide-viewer-img" :src="src" alt="示例大图" @click.stop />
|
||||
</div>
|
||||
</Teleport>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.guide-image {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.guide-thumb {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 4px 8px 4px 4px;
|
||||
border: 1px dashed #c0c4cc;
|
||||
border-radius: 8px;
|
||||
background: #f7f9fc;
|
||||
cursor: zoom-in;
|
||||
}
|
||||
|
||||
.guide-thumb img {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 6px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.guide-thumb-tip {
|
||||
color: #409eff;
|
||||
font-size: 12px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.guide-viewer {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 3000;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 24px 12px;
|
||||
overflow: auto;
|
||||
background: rgba(0, 0, 0, 0.82);
|
||||
}
|
||||
|
||||
.guide-viewer-img {
|
||||
width: min(720px, 94vw);
|
||||
height: fit-content;
|
||||
border-radius: 8px;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.guide-viewer-close {
|
||||
position: fixed;
|
||||
top: 16px;
|
||||
right: 16px;
|
||||
z-index: 3001;
|
||||
padding: 6px 16px;
|
||||
border: 0;
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.92);
|
||||
color: #1f2937;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user