vue3实现移动端二手车交易平台app的ui原型图代码
代码语言:html
所属分类:其他
代码描述:vue3实现移动端二手车交易平台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/vue3.2.22.js"></script>
<style>
:root {
--primary-color: #007AFF; /* 苹果蓝,专业且有活力 */
--accent-color: #FF9500; /* 橙色,用于价格等突出信息 */
--background-color: #F0F2F5; /* 轻微的灰色背景 */
--card-background: #FFFFFF;
--text-color: #1D2129; /* 主要文字颜色 */
--text-light: #65676B; /* 次要文字 */
--border-color: #E5E6EB;
--shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
--border-radius: 10px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
body {
background-color: var(--background-color);
color: var(--text-color);
}
#app {
max-width: 800px;
margin: 0 auto;
background-color: var(--background-color);
min-height: 100vh;
display: flex;
flex-direction: column;
padding-bottom: 70px;
}
.page-container {
padding: 15px;
flex-grow: 1;
animation: fadeIn 0.4s ease-in-out;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.card {
background: var(--card-background);
border-radius: var(--border-radius);
margin-bottom: 15px;
box-shadow: var(--shadow);
overflow: hidden;
border: 1px solid var(--border-color);
}
.btn {
display: inline-block;
padding: 12px 25px;
border-radius: var(--border-radius);
background-color: var(--primary-color);
color: white;
border: none;
cursor: pointer;
text-align: center;
text-decoration: none;
font-size: 16px;
font-weight: 600;
transition: background-color 0.3s ease;
}
.btn:hover {
background-color: #0056b3;
}
.page-header {
font-size: 26px;
font-weight: 600.........完整代码请登录后点击上方下载按钮下载查看
















网友评论0