vue模仿顺丰实现移动端快递邮寄app的ui原型图代码
代码语言：html
所属分类：其他
代码描述：vue模仿顺丰实现移动端快递邮寄app的ui原型图代码
代码标签： 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 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>
// --- 数据和API服务 ---
const mockOrders = [
{ id: 'SF2023050100001', status: 'delivered', sender: { id: 1, name: '张三', phone: '13812345678', address: '北京市朝阳区建国路88号 SOHO现代城 A座 1101', isDefault: true }, receiver: { id: 2, name: '李四', phone: '13987654321', address: '上海市浦东新区张江高科技园区 祖冲之路2288弄', isDefault: false }, createTime: '2023-05-01 10:23', items: ['文件'], weight: '1.2kg', fee: 18, serviceType: 'express', paymentMethod: 'online', tracking: [ { time: '2023-05-02 15:45', location: '上海', status: '已签收', description: '已签收，签收人：李四' }, { time: '2023-05-01 10:45', location: '北京', status: '揽收', description: '快递员：赵六 (136****5678) 已揽收' } ] },
{ id: 'SF2023050200002', status: 'shipping', sender: { id: 2, .........完整代码请登录后点击上方下载按钮下载查看
相似代码
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0