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

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

代码语言：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 {
      .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; }
      .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 v-slot="{ Component }">
      <keep-alive>
        <component :is="Component" />
      </keep-alive>
    </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.........完整代码请登录后点击上方下载按钮下载查看