feat: 更新图标和样式，添加底部弹层滑动效果
This commit is contained in:
@@ -2,57 +2,66 @@
|
||||
<vector xmlns:android="http://schemas.android.com/apk/res/android"
|
||||
android:width="108dp"
|
||||
android:height="108dp"
|
||||
android:viewportWidth="108"
|
||||
android:viewportHeight="108">
|
||||
android:viewportWidth="100"
|
||||
android:viewportHeight="100">
|
||||
|
||||
<!-- 票据纸张：略带旋转感的卡片 -->
|
||||
<!-- Receipt card (slightly rotated), synced with public/echo-icon.svg -->
|
||||
<group
|
||||
android:pivotX="54"
|
||||
android:pivotY="54"
|
||||
android:pivotX="50"
|
||||
android:pivotY="50"
|
||||
android:rotation="-6">
|
||||
<!-- Paper shape -->
|
||||
<path
|
||||
android:fillColor="#FFFFFFFF"
|
||||
android:pathData="M32,24h44c4,0 7,3 7,7v40l-7,-4l-8,5l-8,-5l-8,5l-8,-5l-8,5v-41c0,-4 3,-7 6,-7z" />
|
||||
android:pathData="M32,22H68C73,22 76,25 76,30V78L68,73L60,78L52,73L44,78L36,73L28,78V30C28,25 31,22 36,22z" />
|
||||
|
||||
<!-- 标题条 -->
|
||||
<!-- Title bar -->
|
||||
<path
|
||||
android:fillColor="#4DFF8A65"
|
||||
android:pathData="M36,32h20a2,2 0 0 1 2,2v2a2,2 0 0 1 -2,2h-20a2,2 0 0 1 -2,-2v-2a2,2 0 0 1 2,-2z" />
|
||||
|
||||
<!-- 金额条 -->
|
||||
<!-- Amount bar -->
|
||||
<path
|
||||
android:fillColor="#80FFCC70"
|
||||
android:pathData="M36,42h34a2,2 0 0 1 2,2v2a2,2 0 0 1 -2,2h-34a2,2 0 0 1 -2,-2v-2a2,2 0 0 1 2,-2z" />
|
||||
|
||||
<!-- 中部圆形加号 -->
|
||||
<!-- Center plus circle -->
|
||||
<path
|
||||
android:fillColor="#00000000"
|
||||
android:strokeColor="#FF6B6B"
|
||||
android:strokeWidth="3"
|
||||
android:pathData="M54,60a9,9 0 1,0 0.01,0" />
|
||||
android:pathData="M52,51a9,9 0 1,0 0,18a9,9 0 1,0 0,-18" />
|
||||
<path
|
||||
android:fillColor="#00000000"
|
||||
android:strokeColor="#FF6B6B"
|
||||
android:strokeWidth="3"
|
||||
android:strokeLineCap="round"
|
||||
android:pathData="M54,55v10M49,60h10" />
|
||||
android:pathData="M52,56v8M48,60h8" />
|
||||
</group>
|
||||
|
||||
<!-- 右上角轻微信号波纹 -->
|
||||
<!-- Top-right signal waves (same shape as echo-icon.svg, slightly inward) -->
|
||||
<path
|
||||
android:fillColor="#00000000"
|
||||
android:strokeColor="#FFFFFF"
|
||||
android:strokeWidth="5"
|
||||
android:strokeLineCap="round"
|
||||
android:strokeAlpha="0.7"
|
||||
android:pathData="M76,30 Q84,38 82,48" />
|
||||
<path
|
||||
android:fillColor="#00000000"
|
||||
android:strokeColor="#FFFFFF"
|
||||
android:strokeWidth="4"
|
||||
android:strokeLineCap="round"
|
||||
android:strokeAlpha="0.7"
|
||||
android:pathData="M76,26a16,16 0 0,1 10,14" />
|
||||
android:strokeAlpha="0.3"
|
||||
android:pathData="M80,24 Q88,36 86,52" />
|
||||
|
||||
<!-- Left-side sparkle -->
|
||||
<path
|
||||
android:fillColor="#00000000"
|
||||
android:strokeColor="#FFFFFF"
|
||||
android:strokeWidth="3"
|
||||
android:strokeLineCap="round"
|
||||
android:strokeAlpha="0.3"
|
||||
android:pathData="M80,20a24,24 0 0,1 14,20" />
|
||||
android:strokeWidth="2"
|
||||
android:strokeAlpha="0.8"
|
||||
android:pathData="M25,35 L27,35 M26,34 L26,36" />
|
||||
|
||||
</vector>
|
||||
|
||||
|
||||
@@ -2,9 +2,9 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<link rel="icon" type="image/svg+xml" href="/echo-icon.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>echo-app</title>
|
||||
<title>Echo</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
||||
68
public/echo-icon.svg
Normal file
68
public/echo-icon.svg
Normal file
@@ -0,0 +1,68 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100" fill="none">
|
||||
<defs>
|
||||
<!-- Warm background gradient, same as design/icon.html brand-gradient -->
|
||||
<linearGradient id="echo-bg" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#FF6B6B" />
|
||||
<stop offset="100%" stop-color="#FFCC70" />
|
||||
</linearGradient>
|
||||
|
||||
<!-- Clip everything to the rounded square so nothing can spill out -->
|
||||
<clipPath id="echo-clip">
|
||||
<rect x="7" y="7" width="86" height="86" rx="24" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
|
||||
<!-- All shapes are clipped inside the rounded background -->
|
||||
<g clip-path="url(#echo-clip)">
|
||||
<!-- Rounded background -->
|
||||
<rect x="7" y="7" width="86" height="86" rx="24" fill="url(#echo-bg)" />
|
||||
|
||||
<!-- Receipt body (slightly rotated) -->
|
||||
<path
|
||||
d="M32 22 H 68 C 73 22 76 25 76 30 V 78 L 68 73 L 60 78 L 52 73 L 44 78 L 36 73 L 28 78 V 30 C 28 25 31 22 36 22 Z"
|
||||
fill="#FFFFFF"
|
||||
transform="rotate(-6 50 50)"
|
||||
/>
|
||||
|
||||
<!-- Receipt content -->
|
||||
<g transform="rotate(-6 50 50)">
|
||||
<!-- Title bar -->
|
||||
<rect x="36" y="32" width="20" height="4" rx="2" fill="#FF8A65" fill-opacity="0.3" />
|
||||
<!-- Amount bar -->
|
||||
<rect x="36" y="42" width="34" height="4" rx="2" fill="#FFCC70" fill-opacity="0.5" />
|
||||
|
||||
<!-- Center plus circle -->
|
||||
<circle cx="52" cy="60" r="9" stroke="#FF6B6B" stroke-width="2.5" fill="none" />
|
||||
<path
|
||||
d="M52 56 V 64 M48 60 H 56"
|
||||
stroke="#FF6B6B"
|
||||
stroke-width="2.5"
|
||||
stroke-linecap="round"
|
||||
/>
|
||||
</g>
|
||||
|
||||
<!-- Right-top signal waves (pulled inward so they visually stay inside background) -->
|
||||
<path
|
||||
d="M76 30 Q84 38 82 48"
|
||||
stroke="#FFFFFF"
|
||||
stroke-width="5"
|
||||
stroke-linecap="round"
|
||||
stroke-opacity="0.7"
|
||||
/>
|
||||
<path
|
||||
d="M80 24 Q88 36 86 52"
|
||||
stroke="#FFFFFF"
|
||||
stroke-width="4"
|
||||
stroke-linecap="round"
|
||||
stroke-opacity="0.3"
|
||||
/>
|
||||
|
||||
<!-- Left-side small sparkle -->
|
||||
<path
|
||||
d="M25 35 L 27 35 M26 34 L 26 36"
|
||||
stroke="#FFFFFF"
|
||||
stroke-width="2"
|
||||
stroke-opacity="0.8"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
@@ -57,7 +57,9 @@ onBeforeUnmount(() => {
|
||||
<BottomDock />
|
||||
|
||||
<!-- 新增记录底部弹窗：在任意 Tab 上浮层显示 -->
|
||||
<AddEntryView v-if="uiStore.addEntryVisible" />
|
||||
<transition name="slide-up">
|
||||
<AddEntryView v-if="uiStore.addEntryVisible" />
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -36,5 +36,15 @@
|
||||
-webkit-background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
/* 底部弹层上滑 / 下滑动效，与设计稿 ui_mock.html 保持一致 */
|
||||
.slide-up-enter-active,
|
||||
.slide-up-leave-active {
|
||||
transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
|
||||
}
|
||||
|
||||
.slide-up-enter-from,
|
||||
.slide-up-leave-to {
|
||||
transform: translateY(100%);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -156,7 +156,7 @@ transactionStore.ensureInitialized()
|
||||
@click.self="closePanel"
|
||||
>
|
||||
<div
|
||||
class="bg-white w-full rounded-t-[32px] p-6 pb-10 shadow-2xl max-h-[80vh] overflow-y-auto hide-scrollbar"
|
||||
class="bg-white w-full rounded-t-[32px] rounded-b-none border border-stone-100 border-b-0 p-6 pb-10 shadow-2xl max-h-[80vh] overflow-y-auto hide-scrollbar"
|
||||
:style="sheetStyle"
|
||||
>
|
||||
<div
|
||||
|
||||
Reference in New Issue
Block a user