vue模仿顺丰实现移动端快递邮寄app的ui原型图代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：vue模仿顺丰实现移动端快递邮寄app的ui原型图代码，包含我的、寄件、订单跟踪等模块。

下面为部分代码预览，完整代码请点击下载或在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>顺丰速运 - 快递服务</title>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tailwindcss.3.4.16.js"></script>
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue3.2.22.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue-router.global.prod.4.1.6.js"></script>
  
  <!-- Tailwind配置 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#316CCB', // 顺丰蓝
            secondary: '#FF9800', // 顺丰橙
            neutral: {
              100: '#F5F7FA',
              200: '#E4E7ED',
              300: '#C0C4CC',
              400: '#909399',
              500: '#606266',
              600: '#303133',
              700: '#1E1E1E',
            }
          },
          fontFamily: {
            sans: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }
  </script>
  
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .text-shadow {
        text-shadow: 0 2px 4px rgba(0,0,0,0.1);
      }
      .transition-custom {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      }
      .card-hover {
        @apply hover:shadow-lg hover:-translate-y-1 transition-all duration-300;
      }
      .bottom-nav-active {
        @apply text-primary !important;
      }n
      .scrollbar-hide::-webkit-scrollbar {
        display: none;
      }
      .scrollbar-hide {
        -ms-overflow-style: none;
        scrollbar-width: none;
      }
    }
  </style>
</head>
<body class="bg-neutral-100 font-sans text-neutral-600 min-h-screen">
  <div id="app">
    <!-- 路由视图 -->
    <router-view></router-view>
    
    <!-- 底部导航栏 -->
    <nav class="fixed bottom-0 left-0 right-0 bg-white border-t border-neutral-200 px-4 py-2 flex justify-around items-center z-50">
      <router-link to="/" class="flex flex-col items-center justify-center py-1 text-neutral-400" active-class="bottom-nav-active">
        <i class="fa fa-home text-lg"></i>
        <span class="text-xs mt-1">首页</span>
      </router-link>
      <router-link to="/send" class="flex flex-col items-center justify-center py-1 text-neutral-400" active-class="bottom-nav-active">
        <i class="fa fa-paper-plane text-lg"></i>
        <span class="text-xs mt-1">寄件</span>
      </router-link>
      <router-link to="/orders" class="flex flex-col items-center justify-center py-1 text-neutral-400" active-class="bottom-nav-active">
        <i class="fa fa-list-alt text-lg"></i>
        <span class="text-xs mt-1">订单</span>
      </router-link>
      <router-link to="/profile" class="flex flex-col items-center justify-center py-1 text-neutral-400" active-class="bottom-nav-active">
        <i class="fa fa-user text-lg"></i>
        <span class="text-xs mt-1">我的</span>
      </router-link>
    </nav>
  </div>

  <script>
    // 模拟数据 - 订单列表
    const mockOrders = [
      {
        id: 'SF2023050100001',
        status: 'delivered',
        sender: { name: '张三', phone: '138****5678', address: '北京市朝阳区建国路88号' },
        receiver: { name: '李四', phone: '139****8765', address: '上海市浦东新区张江高科技园区' },
        createTime: '2023-05-01 10:23',
        deliveryTime: '2023-05-02 15:45',
        items: ['文件', '衣物'],
        weight: '1.2kg',
        fee: 18,
        serviceType: 'express',
        paymentMethod: 'online',
        tracking: [
          { time: '2023-05-02 15:45', location: '上海市浦东新区张江分部', status: '已签收', description: '已签收，签收人：李四' },
          { time: '2023-05-02 10:30', location: '上海市浦东新区张江分部', status: '派送中', description: '快递员：王五 (137****1234) 正在为您派送' },
          { time: '2023-05-02 08:15', location: '上海市浦东新区张江分部', status: '到达', description: '快件已到达上海市浦东新区张江分部' },
          { time: '2023-05-01 16:30', locati.........完整代码请登录后点击上方下载按钮下载查看