fix: msg
This commit is contained in:
zzc
@@ -1,5 +1,27 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="make-page" :style="{ paddingTop: getBavBarHeight() + 'px' }">
|
<view class="make-page" :style="{ paddingTop: getBavBarHeight() + 'px' }">
|
||||||
|
<!-- 顶部步骤条 -->
|
||||||
|
<view class="top-steps">
|
||||||
|
<view class="step-bar">
|
||||||
|
<view
|
||||||
|
v-for="(tool, idx) in tools"
|
||||||
|
:key="idx"
|
||||||
|
class="step-item"
|
||||||
|
:class="{ active: activeTool === tool.type }"
|
||||||
|
@tap="openTool(tool.type)"
|
||||||
|
>
|
||||||
|
<view class="step-num-wrap">
|
||||||
|
<view class="step-line" v-if="idx > 0"></view>
|
||||||
|
<view class="step-num">
|
||||||
|
<text v-if="activeTool === tool.type && showPanel">{{ tool.icon }}</text>
|
||||||
|
<text v-else>{{ tool.step }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<text class="step-text">{{ tool.text }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
<!-- 预览卡片 -->
|
<!-- 预览卡片 -->
|
||||||
<view class="card-preview">
|
<view class="card-preview">
|
||||||
<image
|
<image
|
||||||
@@ -22,7 +44,7 @@
|
|||||||
/>
|
/>
|
||||||
<view
|
<view
|
||||||
class="bubble"
|
class="bubble"
|
||||||
@tap="activeTool = 'text'"
|
@tap="openTool('text')"
|
||||||
:style="{
|
:style="{
|
||||||
marginTop: 230 + bubbleOffsetY + 'rpx',
|
marginTop: 230 + bubbleOffsetY + 'rpx',
|
||||||
maxWidth: bubbleMaxWidth + 80 + 'rpx',
|
maxWidth: bubbleMaxWidth + 80 + 'rpx',
|
||||||
@@ -57,11 +79,8 @@
|
|||||||
<text>分享或保存即可去除水印</text>
|
<text>分享或保存即可去除水印</text>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 编辑工具区 -->
|
<!-- 底部固定按钮 -->
|
||||||
<view class="editor-panel">
|
<view class="bottom-actions-fixed">
|
||||||
<view class="drag-handle"></view>
|
|
||||||
|
|
||||||
<!-- 主操作按钮 -->
|
|
||||||
<view class="main-actions">
|
<view class="main-actions">
|
||||||
<button class="btn secondary" @tap="preview">
|
<button class="btn secondary" @tap="preview">
|
||||||
<uni-icons type="cloud-download" size="20" color="#888"></uni-icons>
|
<uni-icons type="cloud-download" size="20" color="#888"></uni-icons>
|
||||||
@@ -76,26 +95,13 @@
|
|||||||
<view>分享给好友</view>
|
<view>分享给好友</view>
|
||||||
</button>
|
</button>
|
||||||
</view>
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
<!-- 功能入口 (步骤条式) -->
|
<!-- 弹出编辑面板 -->
|
||||||
<view class="step-bar">
|
<view class="panel-container" :class="{ show: showPanel }">
|
||||||
<view
|
<view class="panel-mask" @tap="closePanel"></view>
|
||||||
v-for="(tool, idx) in tools"
|
<view class="panel-content" :class="{ 'glass-effect': activeTool === 'text' || activeTool === 'position' }">
|
||||||
:key="idx"
|
<view class="panel-handle" @tap="closePanel"></view>
|
||||||
class="step-item"
|
|
||||||
:class="{ active: activeTool === tool.type }"
|
|
||||||
@tap="activeTool = tool.type"
|
|
||||||
>
|
|
||||||
<view class="step-num-wrap">
|
|
||||||
<view class="step-line" v-if="idx > 0"></view>
|
|
||||||
<view class="step-num">
|
|
||||||
<text v-if="activeTool === tool.type">{{ tool.icon }}</text>
|
|
||||||
<text v-else>{{ tool.step }}</text>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<text class="step-text">{{ tool.text }}</text>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- 标题选择区 -->
|
<!-- 标题选择区 -->
|
||||||
<view v-if="activeTool === 'title'" class="section">
|
<view v-if="activeTool === 'title'" class="section">
|
||||||
@@ -154,231 +160,230 @@
|
|||||||
/>
|
/>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 下一步引导 -->
|
<!-- 下一步引导 -->
|
||||||
<view class="next-step-tip" @tap="activeTool = 'template'">
|
<view class="next-step-tip" @tap="openTool('title')">
|
||||||
<text>选好标题了，去选模板</text>
|
<text>选好标题了，去选模板</text>
|
||||||
<uni-icons type="arrow-right" size="14" color="#ff3b30"></uni-icons>
|
<uni-icons type="arrow-right" size="14" color="#ff3b30"></uni-icons>
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- 模板区 -->
|
|
||||||
<view v-if="activeTool === 'template'" class="section">
|
|
||||||
<view class="section-title">
|
|
||||||
<text>热门模板</text>
|
|
||||||
</view>
|
|
||||||
<view class="tpl-scroll">
|
|
||||||
<view class="tpl-grid">
|
|
||||||
<view
|
|
||||||
v-for="(tpl, i) in templates"
|
|
||||||
:key="i"
|
|
||||||
class="tpl-card"
|
|
||||||
:class="{ selected: tpl?.id === currentTemplate?.id }"
|
|
||||||
@tap="applyTemplate(tpl)"
|
|
||||||
>
|
|
||||||
<image :src="tpl.imageUrl" class="tpl-cover" mode="aspectFill" />
|
|
||||||
<view class="tpl-name">{{ tpl.name }}</view>
|
|
||||||
<view v-if="tpl?.id === currentTemplate?.id" class="tpl-check"
|
|
||||||
>✔</view
|
|
||||||
>
|
|
||||||
</view>
|
|
||||||
</view>
|
</view>
|
||||||
<view v-if="loadingTemplates" class="loading-more">加载中...</view>
|
|
||||||
<view
|
|
||||||
v-else-if="!hasMoreTemplates && templates.length > 0"
|
|
||||||
class="no-more"
|
|
||||||
>没有更多了</view
|
|
||||||
>
|
|
||||||
</view>
|
|
||||||
<!-- 下一步引导 -->
|
|
||||||
<view class="next-step-tip" @tap="activeTool = 'text'">
|
|
||||||
<text>选好模板了，去修改文字</text>
|
|
||||||
<uni-icons type="arrow-right" size="14" color="#ff3b30"></uni-icons>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- 文字编辑 -->
|
|
||||||
<view v-if="activeTool === 'text'" class="section text-edit-section">
|
|
||||||
<!-- 祝贺对象 -->
|
|
||||||
<view class="form-item">
|
|
||||||
<text class="label">祝贺对象</text>
|
|
||||||
<input
|
|
||||||
class="input-box"
|
|
||||||
v-model="targetName"
|
|
||||||
placeholder="请输入称呼"
|
|
||||||
placeholder-style="color:#ccc"
|
|
||||||
maxlength="5"
|
|
||||||
/>
|
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 祝福语库 -->
|
<!-- 模板区 -->
|
||||||
<view class="form-item">
|
<view v-if="activeTool === 'template'" class="section">
|
||||||
<view class="label-row">
|
<view class="section-title">
|
||||||
<text class="label">祝福语库</text>
|
<text>热门模板</text>
|
||||||
<view class="refresh-btn" @tap="refreshGreetings">
|
|
||||||
<text class="refresh-icon">↻</text> 换一批
|
|
||||||
</view>
|
|
||||||
</view>
|
</view>
|
||||||
<scroll-view scroll-x class="greeting-scroll" show-scrollbar="false">
|
<view class="tpl-scroll">
|
||||||
<view class="greeting-list">
|
<view class="tpl-grid">
|
||||||
<view
|
<view
|
||||||
v-for="(text, index) in displayedGreetings"
|
v-for="(tpl, i) in templates"
|
||||||
:key="index"
|
:key="i"
|
||||||
class="greeting-card"
|
class="tpl-card"
|
||||||
:class="{ active: blessingText === text.content }"
|
:class="{ selected: tpl?.id === currentTemplate?.id }"
|
||||||
@tap="selectGreeting(text)"
|
@tap="applyTemplate(tpl)"
|
||||||
>
|
>
|
||||||
<text class="greeting-text">{{ text.content }}</text>
|
<image :src="tpl.imageUrl" class="tpl-cover" mode="aspectFill" />
|
||||||
<view
|
<view class="tpl-name">{{ tpl.name }}</view>
|
||||||
v-if="blessingText.content === text.content"
|
<view v-if="tpl?.id === currentTemplate?.id" class="tpl-check"
|
||||||
class="check-mark"
|
|
||||||
>✔</view
|
>✔</view
|
||||||
>
|
>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</scroll-view>
|
<view v-if="loadingTemplates" class="loading-more">加载中...</view>
|
||||||
|
<view
|
||||||
|
v-else-if="!hasMoreTemplates && templates.length > 0"
|
||||||
|
class="no-more"
|
||||||
|
>没有更多了</view
|
||||||
|
>
|
||||||
|
</view>
|
||||||
|
<!-- 下一步引导 -->
|
||||||
|
<view class="next-step-tip" @tap="openTool('title')">
|
||||||
|
<text>选好模板了，去选标题</text>
|
||||||
|
<uni-icons type="arrow-right" size="14" color="#ff3b30"></uni-icons>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 署名 -->
|
<!-- 文字编辑 -->
|
||||||
<view class="form-item">
|
<view v-if="activeTool === 'text'" class="section text-edit-section">
|
||||||
<text class="label">署名</text>
|
<!-- 祝贺对象 -->
|
||||||
<view class="input-wrapper">
|
<view class="form-item">
|
||||||
|
<text class="label">祝贺对象</text>
|
||||||
<input
|
<input
|
||||||
class="input-box"
|
class="input-box"
|
||||||
v-model="signatureName"
|
v-model="targetName"
|
||||||
placeholder="请输入署名"
|
placeholder="请输入称呼"
|
||||||
placeholder-style="color:#ccc"
|
placeholder-style="color:#ccc"
|
||||||
maxlength="5"
|
maxlength="5"
|
||||||
/>
|
/>
|
||||||
<text class="edit-icon">✎</text>
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- 字体选择 -->
|
<!-- 祝福语库 -->
|
||||||
<view class="form-item">
|
<view class="form-item">
|
||||||
<text class="label">字体样式</text>
|
<view class="label-row">
|
||||||
<scroll-view scroll-x class="font-scroll" show-scrollbar="false">
|
<text class="label">祝福语库</text>
|
||||||
<view class="font-list">
|
<view class="refresh-btn" @tap="refreshGreetings">
|
||||||
<view
|
<text class="refresh-icon">↻</text> 换一批
|
||||||
v-for="(font, index) in fontList"
|
|
||||||
:key="index"
|
|
||||||
class="font-item"
|
|
||||||
:class="{ active: selectedFont.family === font.family }"
|
|
||||||
@tap="changeFont(font)"
|
|
||||||
>
|
|
||||||
<text :style="{ fontFamily: font.family }">{{
|
|
||||||
font.name
|
|
||||||
}}</text>
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</scroll-view>
|
<scroll-view scroll-x class="greeting-scroll" show-scrollbar="false">
|
||||||
</view>
|
<view class="greeting-list">
|
||||||
|
<view
|
||||||
|
v-for="(text, index) in displayedGreetings"
|
||||||
|
:key="index"
|
||||||
|
class="greeting-card"
|
||||||
|
:class="{ active: blessingText.content === text.content }"
|
||||||
|
@tap="selectGreeting(text)"
|
||||||
|
>
|
||||||
|
<text class="greeting-text">{{ text.content }}</text>
|
||||||
|
<view
|
||||||
|
v-if="blessingText.content === text.content"
|
||||||
|
class="check-mark"
|
||||||
|
>✔</view
|
||||||
|
>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
</view>
|
||||||
|
|
||||||
<!-- 字体大小 -->
|
<!-- 署名 -->
|
||||||
<view class="form-item">
|
<view class="form-item">
|
||||||
<text class="label">字体大小</text>
|
<text class="label">署名</text>
|
||||||
<slider
|
<view class="input-wrapper">
|
||||||
:value="fontSize"
|
<input
|
||||||
min="24"
|
class="input-box"
|
||||||
max="64"
|
v-model="signatureName"
|
||||||
show-value
|
placeholder="请输入署名"
|
||||||
@change="(e) => (fontSize = e.detail.value)"
|
placeholder-style="color:#ccc"
|
||||||
activeColor="#ff3b30"
|
maxlength="5"
|
||||||
/>
|
/>
|
||||||
</view>
|
<text class="edit-icon">✎</text>
|
||||||
|
|
||||||
<!-- 文字颜色 -->
|
|
||||||
<view class="form-item">
|
|
||||||
<text class="label">祝福语颜色</text>
|
|
||||||
<view class="color-list">
|
|
||||||
<view
|
|
||||||
v-for="(color, index) in textColors"
|
|
||||||
:key="index"
|
|
||||||
class="color-item"
|
|
||||||
:style="{ background: color }"
|
|
||||||
@tap="selectedColor = color"
|
|
||||||
>
|
|
||||||
<view v-if="selectedColor === color" class="color-check">✔</view>
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
|
<!-- 字体选择 -->
|
||||||
|
<view class="form-item">
|
||||||
|
<text class="label">字体样式</text>
|
||||||
|
<scroll-view scroll-x class="font-scroll" show-scrollbar="false">
|
||||||
|
<view class="font-list">
|
||||||
|
<view
|
||||||
|
v-for="(font, index) in fontList"
|
||||||
|
:key="index"
|
||||||
|
class="font-item"
|
||||||
|
:class="{ active: selectedFont.family === font.family }"
|
||||||
|
@tap="changeFont(font)"
|
||||||
|
>
|
||||||
|
<text :style="{ fontFamily: font.family }">{{
|
||||||
|
font.name
|
||||||
|
}}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 字体大小 -->
|
||||||
|
<view class="form-item">
|
||||||
|
<text class="label">字体大小</text>
|
||||||
|
<slider
|
||||||
|
:value="fontSize"
|
||||||
|
min="24"
|
||||||
|
max="64"
|
||||||
|
show-value
|
||||||
|
@change="(e) => (fontSize = e.detail.value)"
|
||||||
|
activeColor="#ff3b30"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 文字颜色 -->
|
||||||
|
<view class="form-item">
|
||||||
|
<text class="label">祝福语颜色</text>
|
||||||
|
<view class="color-list">
|
||||||
|
<view
|
||||||
|
v-for="(color, index) in textColors"
|
||||||
|
:key="index"
|
||||||
|
class="color-item"
|
||||||
|
:style="{ background: color }"
|
||||||
|
@tap="selectedColor = color"
|
||||||
|
>
|
||||||
|
<view v-if="selectedColor === color" class="color-check">✔</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 下一步引导 -->
|
||||||
|
<view class="next-step-tip" @tap="openTool('position')">
|
||||||
|
<text>文字改好了，去调位置</text>
|
||||||
|
<uni-icons type="arrow-right" size="14" color="#ff3b30"></uni-icons>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 署名颜色 -->
|
<!-- 位置调整 -->
|
||||||
<view class="form-item">
|
<view v-if="activeTool === 'position'" class="section position-section">
|
||||||
<text class="label">署名颜色</text>
|
<view class="section-title">
|
||||||
<view class="color-list">
|
<text>调整位置</text>
|
||||||
<view
|
</view>
|
||||||
v-for="(color, index) in textColors"
|
|
||||||
:key="index"
|
<view class="form-item" style="margin-top: 20rpx;">
|
||||||
class="color-item"
|
<text class="label">祝福语气泡 (上下)</text>
|
||||||
:style="{ background: color }"
|
<slider
|
||||||
@tap="signatureColor = color"
|
:value="bubbleOffsetY"
|
||||||
>
|
min="-200"
|
||||||
<view v-if="signatureColor === color" class="color-check">✔</view>
|
max="400"
|
||||||
|
show-value
|
||||||
|
@change="(e) => (bubbleOffsetY = e.detail.value)"
|
||||||
|
activeColor="#ff3b30"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="form-item">
|
||||||
|
<text class="label">祝福语气泡宽度</text>
|
||||||
|
<slider
|
||||||
|
:value="bubbleMaxWidth"
|
||||||
|
min="200"
|
||||||
|
max="460"
|
||||||
|
show-value
|
||||||
|
@change="(e) => (bubbleMaxWidth = e.detail.value)"
|
||||||
|
activeColor="#ff3b30"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="form-item">
|
||||||
|
<text class="label">个人信息 (上下)</text>
|
||||||
|
<slider
|
||||||
|
:value="userOffsetY"
|
||||||
|
min="-100"
|
||||||
|
max="200"
|
||||||
|
show-value
|
||||||
|
@change="(e) => (userOffsetY = e.detail.value)"
|
||||||
|
activeColor="#ff3b30"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="form-item">
|
||||||
|
<text class="label">个人信息 (左右)</text>
|
||||||
|
<slider
|
||||||
|
:value="userOffsetX"
|
||||||
|
min="-100"
|
||||||
|
max="100"
|
||||||
|
show-value
|
||||||
|
@change="(e) => (userOffsetX = e.detail.value)"
|
||||||
|
activeColor="#ff3b30"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="form-item">
|
||||||
|
<text class="label">署名颜色</text>
|
||||||
|
<view class="color-list">
|
||||||
|
<view
|
||||||
|
v-for="(color, index) in textColors"
|
||||||
|
:key="index"
|
||||||
|
class="color-item"
|
||||||
|
:style="{ background: color }"
|
||||||
|
@tap="signatureColor = color"
|
||||||
|
>
|
||||||
|
<view v-if="signatureColor === color" class="color-check">✔</view>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 下一步引导 -->
|
|
||||||
<view class="next-step-tip" @tap="activeTool = 'position'">
|
|
||||||
<text>文字写好了，去微调位置</text>
|
|
||||||
<uni-icons type="arrow-right" size="14" color="#ff3b30"></uni-icons>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- 位置调整 -->
|
|
||||||
<view v-if="activeTool === 'position'" class="section position-section">
|
|
||||||
<view class="form-item">
|
|
||||||
<text class="label">祝福语位置 (上下)</text>
|
|
||||||
<slider
|
|
||||||
:value="bubbleOffsetY"
|
|
||||||
min="-200"
|
|
||||||
max="200"
|
|
||||||
show-value
|
|
||||||
@change="(e) => (bubbleOffsetY = e.detail.value)"
|
|
||||||
activeColor="#ff3b30"
|
|
||||||
/>
|
|
||||||
</view>
|
|
||||||
<view class="form-item">
|
|
||||||
<text class="label">祝福语宽度</text>
|
|
||||||
<slider
|
|
||||||
:value="bubbleMaxWidth"
|
|
||||||
min="200"
|
|
||||||
max="460"
|
|
||||||
show-value
|
|
||||||
@change="(e) => (bubbleMaxWidth = e.detail.value)"
|
|
||||||
activeColor="#ff3b30"
|
|
||||||
/>
|
|
||||||
</view>
|
|
||||||
<view class="form-item">
|
|
||||||
<text class="label">署名位置 (左右)</text>
|
|
||||||
<slider
|
|
||||||
:value="userOffsetX"
|
|
||||||
min="-200"
|
|
||||||
max="200"
|
|
||||||
show-value
|
|
||||||
@change="(e) => (userOffsetX = e.detail.value)"
|
|
||||||
activeColor="#ff3b30"
|
|
||||||
/>
|
|
||||||
</view>
|
|
||||||
<view class="form-item">
|
|
||||||
<text class="label">署名位置 (上下)</text>
|
|
||||||
<slider
|
|
||||||
:value="userOffsetY"
|
|
||||||
min="-200"
|
|
||||||
max="200"
|
|
||||||
show-value
|
|
||||||
@change="(e) => (userOffsetY = e.detail.value)"
|
|
||||||
activeColor="#ff3b30"
|
|
||||||
/>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- 头像挂饰 -->
|
|
||||||
<view v-if="activeTool === 'avatar'" class="section">
|
|
||||||
<view class="section-title"><text>头像挂饰</text></view>
|
|
||||||
<view class="row">
|
|
||||||
<button class="btn" @tap="toggleAvatarDecor">切换挂饰</button>
|
|
||||||
</view>
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
@@ -735,6 +740,16 @@ const tools = [
|
|||||||
{ type: "position", text: "4. 调位置", icon: "🎯", step: 4 },
|
{ type: "position", text: "4. 调位置", icon: "🎯", step: 4 },
|
||||||
];
|
];
|
||||||
const activeTool = ref("template");
|
const activeTool = ref("template");
|
||||||
|
const showPanel = ref(false);
|
||||||
|
|
||||||
|
const openTool = (toolType) => {
|
||||||
|
activeTool.value = toolType;
|
||||||
|
showPanel.value = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
const closePanel = () => {
|
||||||
|
showPanel.value = false;
|
||||||
|
};
|
||||||
|
|
||||||
const templates = ref([]);
|
const templates = ref([]);
|
||||||
|
|
||||||
@@ -1106,14 +1121,9 @@ function drawUserBubble(ctx, options) {
|
|||||||
|
|
||||||
function drawRoundRect(ctx, x, y, w, h, r, color) {
|
function drawRoundRect(ctx, x, y, w, h, r, color) {
|
||||||
ctx.beginPath();
|
ctx.beginPath();
|
||||||
// ctx.setFillStyle(color)
|
ctx.fillStyle = color || "rgba(255,255,255,0.18)";
|
||||||
ctx.fillStyle = "rgba(255,255,255,0.18)";
|
|
||||||
ctx.fill();
|
|
||||||
|
|
||||||
// 描边（非常关键）
|
|
||||||
ctx.strokeStyle = "rgba(255,255,255,0.35)";
|
ctx.strokeStyle = "rgba(255,255,255,0.35)";
|
||||||
ctx.lineWidth = 1;
|
ctx.lineWidth = 1;
|
||||||
ctx.stroke();
|
|
||||||
|
|
||||||
ctx.moveTo(x + r, y);
|
ctx.moveTo(x + r, y);
|
||||||
ctx.lineTo(x + w - r, y);
|
ctx.lineTo(x + w - r, y);
|
||||||
@@ -1136,11 +1146,19 @@ function drawRoundRect(ctx, x, y, w, h, r, color) {
|
|||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 顶部提示 */
|
||||||
|
.tip-line {
|
||||||
|
text-align: center;
|
||||||
|
color: #999;
|
||||||
|
font-size: 22rpx;
|
||||||
|
margin-bottom: 140rpx; /* 为底部固定按钮留出空间 */
|
||||||
|
}
|
||||||
|
|
||||||
/* 卡片预览 */
|
/* 卡片预览 */
|
||||||
.card-preview {
|
.card-preview {
|
||||||
margin: 24rpx auto;
|
margin: 30rpx auto 20rpx;
|
||||||
height: 960rpx;
|
height: 900rpx;
|
||||||
width: 540rpx;
|
width: 506rpx; /* 保持 9:16 比例并稍微缩小一点 */
|
||||||
border-radius: 30rpx;
|
border-radius: 30rpx;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
position: relative;
|
position: relative;
|
||||||
@@ -1229,36 +1247,84 @@ function drawRoundRect(ctx, x, y, w, h, r, color) {
|
|||||||
opacity: 0.6;
|
opacity: 0.6;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 顶部提示 */
|
/* 顶部步骤条 */
|
||||||
.tip-line {
|
.top-steps {
|
||||||
text-align: center;
|
|
||||||
color: #999;
|
|
||||||
font-size: 22rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 编辑工具区 */
|
|
||||||
.editor-panel {
|
|
||||||
margin: 20rpx 24rpx 40rpx;
|
|
||||||
border-radius: 30rpx 30rpx 0 0;
|
|
||||||
background: #fff;
|
background: #fff;
|
||||||
box-shadow: 0 -10rpx 30rpx rgba(0, 0, 0, 0.06);
|
padding: 10rpx 0;
|
||||||
padding-bottom: env(safe-area-inset-bottom);
|
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
|
||||||
|
position: relative;
|
||||||
|
z-index: 10;
|
||||||
}
|
}
|
||||||
.drag-handle {
|
|
||||||
width: 120rpx;
|
|
||||||
height: 8rpx;
|
|
||||||
border-radius: 999rpx;
|
|
||||||
background: #eee;
|
|
||||||
margin: 12rpx auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 步骤条工具 */
|
|
||||||
.step-bar {
|
.step-bar {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
padding: 20rpx 60rpx 10rpx;
|
padding: 10rpx 40rpx;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 底部固定按钮 */
|
||||||
|
.bottom-actions-fixed {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
background: #fff;
|
||||||
|
padding-bottom: env(safe-area-inset-bottom);
|
||||||
|
z-index: 90;
|
||||||
|
box-shadow: 0 -10rpx 30rpx rgba(0, 0, 0, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 弹出编辑面板 */
|
||||||
|
.panel-container {
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
z-index: 100;
|
||||||
|
visibility: hidden;
|
||||||
|
pointer-events: none;
|
||||||
|
transition: all 0.3s;
|
||||||
|
}
|
||||||
|
.panel-container.show {
|
||||||
|
visibility: visible;
|
||||||
|
pointer-events: auto;
|
||||||
|
}
|
||||||
|
.panel-mask {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background: rgba(0, 0, 0, 0.4);
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.3s;
|
||||||
|
}
|
||||||
|
.panel-container.show .panel-mask {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
.panel-content {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 40rpx 40rpx 0 0;
|
||||||
|
padding: 30rpx 40rpx calc(40rpx + env(safe-area-inset-bottom));
|
||||||
|
transform: translateY(100%);
|
||||||
|
transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
|
||||||
|
max-height: 80vh;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
.panel-container.show .panel-content {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
.panel-content.glass-effect {
|
||||||
|
background: rgba(255, 255, 255, 0.85);
|
||||||
|
backdrop-filter: blur(20rpx);
|
||||||
|
-webkit-backdrop-filter: blur(20rpx);
|
||||||
|
}
|
||||||
|
.panel-handle {
|
||||||
|
width: 80rpx;
|
||||||
|
height: 8rpx;
|
||||||
|
background: #ddd;
|
||||||
|
border-radius: 4rpx;
|
||||||
|
margin: 0 auto 30rpx;
|
||||||
|
}
|
||||||
.step-item {
|
.step-item {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|||||||
Reference in New Issue
Block a user