vue3实现移动端快递公司官网查询邮寄快递html源码-html代码-BFW代码库

代码语言：html

代码描述：vue3实现移动端快递公司官网查询邮寄快递html源码

下面为部分代码预览，完整代码请点击下载或在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>智能快递App</title>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue3.2.22.js"></script>
    <style>
        :root {
            --primary-color: #0ea5e9; /* Sky Blue */
            --primary-color-dark: #0284c7;
            --background-color: #f1f5f9; /* Slate 100 */
            --card-background: #ffffff;
            --text-color: #1e293b; /* Slate 800 */
            --light-text-color: #64748b; /* Slate 500 */
            --border-color: #e2e8f0; /* Slate 200 */
            --danger-color: #ef4444;
            --success-color: #22c55e;
            --warning-color: #f97316;
            --card-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
            --border-radius: 0.75rem; /* 12px */
        }

        body {
            font-family: "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;
            margin: 0;
            background-color: var(--background-color);
            background-image: url('https://images.unsplash.com/photo-1585713181935-d5f622cc261b?q=80&w=2070&auto=format&fit=crop');
            background-size: cover;
            background-position: center;
            color: var(--text-color);
        }

        #app {
            display: flex;
            flex-direction: column;
            height: 100vh;
            background: rgba(241, 245, 249, 0.9); /* Semi-transparent background */
            backdrop-filter: blur(5px);
        }

        /* Header */
        .app-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem 2rem;
            background: rgba(255, 255, 255, 0.8);
            border-bottom: 1px solid var(--border-color);
            flex-shrink: 0;
        }
        .logo { font-size: 1.5rem; font-weight: bold; color: var(--primary-color); cursor: pointer; }
        .app-nav a {
            margin-left: 1.5rem;
            font-weight: 500;
            color: var(--light-text-color);
            text-decoration: none;
            padding: 0.5rem 0;
            border-bottom: 2px solid transparent;
            transition: all 0.3s ease;
        }
        .app-nav a:hover, .app-nav a.active {
            color: var(--primary-color);
            border-bottom-color: var(--primary-color);
        }

        /* Main Content */
        .main-content {
            flex-grow: 1;
            overflow-y: auto;
            padding: 2rem;
        }
        .page-container {
            max-width: 1200px;
            margin: 0 auto;
        }

        /* Common Components */
        .card {
            background: var(--card-background);
            padding: 1.5rem;
            border-radius: var(--border-radius);
            box-shadow: var(--card-shadow);
            margin-bottom: 1.5rem;
        }
        .btn {
            padding: 0.75rem 1.5rem; border: none; border-radius: 0.5rem; cursor: pointer;
            font-size: 1rem; font-weight: 600; transition: all 0.2s ease;
            display: inline-flex; align-items: center; justify-content: center;
        }
        .btn svg { margin-right: 0.5rem; }
        .btn-primary { background-color: var(--primary-color); color: white; }
        .btn-primary:hover { background-color: var(--primary-color-dark); }
        .btn-secondary { background: var(--background-color); color: var(--text-color); border: 1px solid var(--border-color); }

        /* Dashboard Page */
        .dashboard-hero {
            text-align: center;
            padding: 2rem 0;
        }
        .dashboard-hero h1 { font-size: 2.5rem; margin: 0 0 1rem 0; }
        .dashboard-hero p { color: var(--light-text-color); margin-bottom: 2rem; }
        .tracking-form { display: flex; max-width: 500px; margin: 0 auto 3rem auto; }
        .tracking-form input {
            flex-grow: 1; padding: 0.75rem 1rem; border: 1px solid var(--border-color);
            border-radius: 0.5rem 0 0 0.5rem; font-size: 1rem;
        }
        .tracking-form button { border-radius: 0 0.5rem 0.5rem 0; }
        .shipment-list-item {
            display: flex; align-items: center; padding: 1rem;
            border-bottom: 1px solid var(--border-color); cursor: pointer;
            transition: background-color 0.2s;
        }
        .shipment-list-item:last-child { border-bottom: none; }
        .shipment-list-item:hover { background-color: #f8fafc; }
        .shipment-icon {
            width: 48px; height: 48px; border-radius: 50%; display: flex;
            align-items: center; justify-content: center; background: #e0f2fe;
            color: var(--primary-color); margin-right: 1rem;
        }
        .shipment-info p { margin: 0; }
        .shipment-info .tracking-id { font-weight: 600; }
        .shipment-status { margin-left:.........完整代码请登录后点击上方下载按钮下载查看