lq/hunli
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更新页面效果

Browse Source
This commit is contained in:
李琦
2026-07-31 12:13:41 +08:00
parent 4630035dd1
commit d060681920
30 changed files with 597 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
vite-tailwindcss/src/components/PhotoGallery.vue
View File

@@ -13,12 +13,14 @@
<div :class="singleFrameClass"><img :src="page.img1" /></div>
</div>
<!-- 错落双图（高度 clamp 封顶，图片贴容器边缘，任何页高下不溢出） -->
<!-- 错落双图（交错拼贴：左上大图 + 右下压角叠放，微旋转；clamp 封顶不溢出） -->
<div v-else-if="page.type === 'overlap'" class="overlap-wrap relative w-full mt-2">
<div v-reveal="{ variant: 'left', delay: 100 }" class="absolute top-0 right-0 w-[68%] h-[72%] z-10" :class="frameClass">
<div v-reveal="{ variant: 'left', delay: 100 }"
class="absolute left-0 top-0 w-[72%] h-[78%] z-10 -rotate-2" :class="frameClass">
<img :src="page.img1" />
</div>
<div v-reveal="{ variant: 'right', delay: 300 }" class="absolute bottom-0 left-0 w-[60%] h-[60%] z-20" :class="frameClass">
<div v-reveal="{ variant: 'right', delay: 300 }"
class="absolute right-0 bottom-0 w-[56%] h-[62%] z-20 rotate-3" :class="frameClass">
<img :src="page.img2" />
</div>
</div>
@@ -96,8 +98,10 @@ const singleWrapClass = computed(() =>
)
const singleWrapStyle = computed(() => {
if (props.page.singleWidth === 'full') {
// 铺满 + 保持原始比例 → 高度由图片自然撑开；铺满 + 不保持 → 固定 4:5 裁切
return props.page.singleKeepRatio ? {} : { aspectRatio: '4 / 5' }
// 沾满宽度：负边距抵消 page-section 的 p-6（24px×2），图片贴到屏幕两缘
const bleed = { width: 'calc(100% + 48px)', marginLeft: '-24px', marginRight: '-24px' }
// 保持原始比例 → 高度由图片自然撑开；否则固定 4:5 裁切
return props.page.singleKeepRatio ? bleed : { ...bleed, aspectRatio: '4 / 5' }
}
return { aspectRatio: '4 / 5' }
})

6
vite-tailwindcss/src/styles/frames.css
View File

@@ -3,10 +3,12 @@
- 前台 PhotoGallery 按 page.borderStyle 套用
- 后台 AdminEditor 预览复用同一套类
结构约定：<div class="gf-frame gf-xxx"><img/></div>
gf-frame 负责定位与裁切，gf-xxx 负责边框/卡纸/投影
gf-frame 只负责裁切，gf-xxx 负责边框/卡纸/投影
注意：绝不能在此设置 position/width/height —— 本文件在
Tailwind 工具类之后加载，会覆盖元素上的 absolute/尺寸工具类
（position:relative 曾把 overlap 版的 absolute 静默冲掉）
============================================================ */
.gf-frame {
position: relative;
background: #fff;
overflow: hidden;
}

13
vite-tailwindcss/src/views/admin/AdminEditor.vue
View File

@@ -243,6 +243,13 @@
<button v-if="isFlexible(page.type) && page.images.length > 1"
class="absolute -top-2 -right-2 w-5 h-5 rounded-full bg-[#a88c6b] text-white text-[10px] leading-none flex items-center justify-center shadow"
@click="removeImage(page, iidx)" title="移除该图">✕</button>
<!-- 排序：前移 / 后移 -->
<button v-if="iidx > 0"
class="absolute -bottom-2 left-1 w-5 h-5 rounded-full bg-white border border-[#a88c6b]/50 text-[#a88c6b] text-[10px] leading-none flex items-center justify-center shadow hover:bg-[#a88c6b] hover:text-white transition-colors"
@click="moveImage(page, iidx, -1)" title="前移"><i class="fa-solid fa-arrow-left"></i></button>
<button v-if="iidx < page.images.length - 1"
class="absolute -bottom-2 right-1 w-5 h-5 rounded-full bg-white border border-[#a88c6b]/50 text-[#a88c6b] text-[10px] leading-none flex items-center justify-center shadow hover:bg-[#a88c6b] hover:text-white transition-colors"
@click="moveImage(page, iidx, 1)" title="后移"><i class="fa-solid fa-arrow-right"></i></button>
</div>
<button v-if="isFlexible(page.type)"
class="w-[96px] h-[96px] rounded-xl border border-dashed border-[#a88c6b]/40 text-[#a88c6b] text-[11px] flex items-center justify-center hover:border-[#a88c6b] transition-colors"
@@ -396,6 +403,12 @@ function isFlexible(type) {
}
function addImage(page) { if (!Array.isArray(page.images)) page.images = []; page.images.push('') }
function removeImage(page, i) { if (page.images.length > 1) page.images.splice(i, 1) }
// 图片排序：前移(-1) / 后移(+1)
function moveImage(page, i, dir) {
const j = i + dir
if (!Array.isArray(page.images) || j < 0 || j >= page.images.length) return
const t = page.images[i]; page.images[i] = page.images[j]; page.images[j] = t
}
// 相册页操作
function addPage() { cfg.photoPages.push(ensurePageShape({ type: 'single', title: '新页面', subtitle: 'NEW', desc: '', img1: '' })) }

5
vite-tailwindcss/src/views/index/index.vue
View File

@@ -71,8 +71,9 @@
</div>
</div>
<div @click="toggleAutoScroll" class="control-btn cursor-pointer transition-all duration-300" :class="isAutoScroll ? 'bg-[#a88c6b]' : 'bg-white/60 shadow-sm border-[#a88c6b]/30'">
<img v-if="isAutoScroll" src="https://api.iconify.design/lucide:pause.svg?color=%23ffffff" class="w-4 h-4" />
<div @click="toggleAutoScroll" class="control-btn cursor-pointer transition-all duration-300"
:class="isAutoScroll ? 'bg-[#a88c6b]/15 !border-[#a88c6b]/60 shadow-sm' : 'bg-white/60 shadow-sm border-[#a88c6b]/30'">
<img v-if="isAutoScroll" src="https://api.iconify.design/lucide:pause.svg?color=%23a88c6b" class="w-4 h-4" />
<img v-else src="https://api.iconify.design/lucide:play.svg?color=%23a88c6b" class="w-4 h-4 ml-0.5" />
</div>
</div>