vue3+echarts实现一个移动端记账类app微网站h5代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：vue3+echarts实现一个移动端记账类app微网站h5代码，可以记账，还有统计效果和明细。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue3 记账App (ECharts版)</title>
    <!-- Vue 3 CDN -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue3.2.22.js"></script>
    <!-- ECharts CDN -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/echarts.js"></script>
    <style>
        :root {
            --primary-color: #4CAF50;
            --income-color: #2ecc71;
            --expense-color: #e74c3c;
            --bg-color: #f4f4f9;
            --surface-color: #ffffff;
            --text-color: #333;
            --text-secondary-color: #777;
        }
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            margin: 0; background-color: var(--bg-color); color: var(--text-color); font-size: 14px;
        }
        #app {
            max-width: 480px; margin: 0 auto; background-color: var(--bg-color);
            min-height: 100vh; position: relative; padding-bottom: 60px;
        }
        .page-container { padding: 15px; }
        .icon { width: 1.2em; height: 1.2em; fill: currentColor; }

        /* Bottom Nav & FAB */
        .bottom-nav {
            position: fixed; bottom: 0; left: 0; right: 0; max-width: 480px; margin: 0 auto;
            height: 55px; background-color: var(--surface-color); border-top: 1px solid #ddd;
            display: flex; justify-content: space-around; align-items: center; z-index: 100;
        }
        .nav-item { cursor: pointer; text-align: center; color: var(--text-secondary-color); display: flex; flex-direction: column; align-items: center; gap: 2px; }
        .nav-item .icon { font-size: 22px; }
        .nav-item.active { color: var(--primary-color); }
        .nav-item span { font-size: 10px; }
        .fab {
            position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%);
            width: 56px; height: 56px; background-color: var(--primary-color);
            color: white; border-radius: 50%; border: none;
            display: flex; justify-content: center; align-items: center;
            font-size: 28px; box-shadow: 0 4px 12px rgba(0,0,0,0.2);
            cursor: pointer; z-index: 101;
        }

        /* Home Page */
        .summary-card { background: var(--surface-color); padding: 20px; border-radius: 12px; margin-bottom: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
        .summary-header { font-size: 14px; color: var(--text-secondary-color); }
        .summary-balance { font-size: 32px; font-weight: bold; margin: 10px 0; }
        .summary-details { display: flex; justify-content: space-between; font-size: 16px; }
        .summary-income { color: var(--income-color); }
        .summary-expense { color: var(--expense-color); }

        /* Transaction List */
        .section-title { font-weight: bold; margin: 20px 0 10px; color: var(--text-secondary-color); font-size: 13px; }
        .transaction-group { background: var(--surface-color); border-radius: 8px; overflow: hidden; }
        .transaction-item { display: flex; align-items: center; padding: 12px 15px; border-bottom: 1px solid var(--bg-color); cursor: pointer; }
        .transaction-item:last-child { border-bottom: none; }
        .tx-icon-wrapper { width: 40px; height: 40px; border-radius: 50%; display: flex; justify-content: center; align-items: center; margin-right: 12px; }
        .tx-icon-wrapper .icon { font-size: 20px; color: white; }
        .tx-info { flex: 1; }
        .tx-category { font-weight: bold; }
        .tx-notes { font-size: 12px; color: var(--text-secondary-color); }
        .tx-amount { font-size: 16px; font-weight: bold; }
        .tx-amount.income { color: var(--income-color); }
        .tx-amount.expense { color: var(--expense-color); }

        /* Add/Edit Page Modal */
        .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 200; }
        .modal-content {
            position: fixed; bottom: 0; left: 0; width: 100%;
            background: var(--bg-color); border-top-left-radius: 16px; border-top-right-radius: 16px;
            padding: 15px; box-sizing: border-box;
            max-height: 90vh; overflow-y: auto;
        }
        .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
        .modal-header .close-btn { font-size: 24px; color: #999; cursor: pointer; }
        .type-toggle { display: flex; background: #ddd; border-radius: 8px; overflow: hidden; }
        .type-toggle button { flex: 1; border: none; padding: 10px; font-size: 16px; background: transparent; }
        .type-toggle button.active { background: var(--primary-color); color: white; font-weight: bold; }
        .form-group { margin:.........完整代码请登录后点击上方下载按钮下载查看