Skip to content

G
GaoQuYingJiH5-ASD
Commit b4b95eee authored by xinzhedeai's avatar xinzhedeai
Browse files
Options

连接添加，页面跳转处理

parent 6e63946c
Hide whitespace changes
Inline Side-by-side
Showing with 907 additions and 318 deletions
index.css
View file @ b4b95eee
......@@ -283,6 +283,7 @@ border-right: 1px solid #eee; */
background-image: url('image/code/bg1.png');
background-size: contain;
background-repeat: no-repeat;
cursor: pointer;
}
.check-module p:first-child {
......
index.html
View file @ b4b95eee
......@@ -20,7 +20,7 @@
<!-- <script type="text/javascript" src="sdk/jssdk2/index.js"></script> -->
<div id="app" class="page_wrapper">
<!-- 第二层：商户图标、名称、等级、场所类型和地址 -->
<div class="second-layer second-layer-zf" v-if="pageType=='ZF'">
<div class="second-layer second-layer-zf" v-if="userInfo.userType!=='sj'">
<img class="merchant-icon" src="image/code/zhengfu_logo.png" alt="">
<div class="merchant-info welcome">
<p>欢迎您，<br>进入安全“码”上查 </p>
......@@ -33,7 +33,7 @@
<!-- 第二层：商户图标、名称、等级、场所类型和地址 -->
<div class="second-layer-sj" v-show="pageType=='SJ'">
<div class="second-layer-sj" v-if="userInfo.userType=='sj'">
<div class="header">
<span>商家信息</span>
<div class="user_tag">
......@@ -84,11 +84,11 @@
<div class="stat-label">自查数</div>
</div>
<div class="stat-item">
<div class="stat-value">10次</div>
<div class="stat-value">10处</div>
<div class="stat-label">隐患数</div>
</div>
<div class="stat-item">
<div class="stat-value">5次</div>
<div class="stat-value">5处</div>
<div class="stat-label">未整改</div>
</div>
</div>
......@@ -98,27 +98,31 @@
<div class="fourth-layer">
<h2>检查专区</h2>
<div class="check-modules">
<div class="check-module saoma">
<div class="check-module saoma" v-if="menuShowYN('saoma')" @click="scanCode">
<p>扫码检查 <van-icon name="arrow" /></p>
<p class="module-intro">扫码进行企业安全检查</p>
</div>
<div class="check-module jiancha">
<div class="check-module jiancha" v-if="menuShowYN('jianchajilu')" @click="navTo('checkrecord')">
<p>检查记录 <van-icon name="arrow" /></p>
<p class="module-intro">查看商家检查自查记录</p>
</div>
<div class="check-module yinhuan">
<div class="check-module yinhuan" v-if="menuShowYN('yinhuanshenhe')" @click="navTo('yh-check')">
<p>隐患审核 <van-icon name="arrow" /></p>
<p class="module-intro">对整改隐患进行审核</p>
</div>
<div class="check-module anquan">
<div class="check-module yinhuan" v-if="menuShowYN('yinhuanzhenggai')" @click="navTo('yh-check')">
<p>隐患整改 <van-icon name="arrow" /></p>
<p class="module-intro">对隐患进行整改</p><!-- UI设计图没这个原型有 -->
</div>
<!-- <div class="check-module anquan" v-if="menuShowYN('anquanchangshi')" @click="navTo('check_list')">
<p>安全常识 <van-icon name="arrow" /></p>
<p class="module-intro">查看安全常识培训资料</p>
</div>
<div class="check-module shangjia">
</div> -->
<div class="check-module shangjia" v-if="menuShowYN('shangjiaxinxi')" @click="navTo('shanghu_detail')">
<p>商家信息 <van-icon name="arrow" /></p>
<p class="module-intro">查看商家基础信息</p>
</div>
<div class="check-module zicha">
<div class="check-module zicha" v-if="menuShowYN('anquanzicha')" @click="navTo('checkrecord')">
<p>安全自查 <van-icon name="arrow" /></p>
<p class="module-intro">进行企业安全自查</p>
</div>
......
index.js
View file @ b4b95eee
......@@ -6,7 +6,6 @@ window.onload = function () {
el: '#app',
data() {
return {
pageType: 'ZF',
showPopup4completionDate: false,
// 控制日期选择器弹窗的显示与隐藏
showPicker: false,
......@@ -17,7 +16,8 @@ window.onload = function () {
// 日期选择的最大范围，这里设置为当前日期的后 10 年
maxDate: new Date(new Date().getFullYear() + 10, 11),
checkModules: [{
intro: '提交检查反馈'
intro: '提交检查反馈',
},
{
intro: '查看检查历史记录'
......@@ -34,9 +34,23 @@ window.onload = function () {
{
intro: '设置检查提醒'
}
]
],
userInfo: {
userType: 'sj', // 登录用户type
userId: '1', // 登录用户id
userName: '张三', // 登录用户name
deptId: '1', // 登录用户部门id
deptName: '部门1', // 登录用户部门name
role: 'dudao',
roleName: '督导',
}, // 登录用户type
};
},
mounted() {
// 在组件挂载后执行
// 调用你的方法
this.init();
},
computed: {
formattedDate() {
// 检查原始日期是否存在
......@@ -51,6 +65,59 @@ window.onload = function () {
}
},
methods: {
scanCode() {
lightAppJssdk.device.scan({
success: function (data) {
// 获取到data为二维码的url路径，从这里取请求参数，商户id，在下面跳转本地系统路径
// alert('扫码成功'+JSON.stringify(data))
// location.href = 'shanghu_home.html'
gemhoUtil.navigatePage(`src/_shanghu_home.html`)
//成功回调
}, fail: function (data) {
//错误返回
alert('扫码失败')
}
});
},
navTo(url){
// gemhoUtil.nav2asd(url)
gemhoUtil.navigatePage(`src/_${url}.html`)
},
menuShowYN(menuName){
return true
var roleList = []
if(menuName=='saoma'){
roleList = ['dudao', 'hangye', 'richang']
}
if(menuName=='jianchajilu'){
roleList = ['dudao', 'hangye', 'richang', 'shangjia']
}
if(menuName=='yinhuanshenhe'){
roleList = ['richang']
}
if(menuName=='shangjiaxinxi'){
roleList = ['shangjia']
}
if(menuName=='anquanchangshi'){
roleList = ['shangjia']
}
if(menuName=='anquanzicha'){
roleList = ['shangjia']
}
if(menuName=='yinhuanzhenggai'){
roleList = ['shangjia']
}
console.log(roleList.indexOf(this.userInfo.role) > -1)
return roleList.indexOf(this.userInfo.role) > -1
},
init() {
// 在组件挂载后执行
// 调用你的方法
},
showPopup() {
this['showPopup4completionDate'] = true
},
......
sdk/includeHead.js
View file @ b4b95eee
......@@ -42,6 +42,7 @@ document.write('<script type="text/javascript" src="' + contextPath + '/sdk/vue.
if (getPageN()) { // 加载同名js
document.write('<script type="text/javascript" src="./' + getPageN() + '.js?rev=' + jsVersion + '"></script>');
document.write('<link rel="stylesheet" type="text/css" href="./' + getPageN() + '.css?rev=' + jsVersion + '" />');
}
function getPageN(){
......
sdk/util.js
View file @ b4b95eee
......@@ -224,6 +224,27 @@ gemhoUtil.navigatePage = function(path, title) {
location.href = url;
}
/**
* 跳转页面 更新版本号
* @param path
* @returns
* @demo navigatePage('/warehouse/company/companyDetail.html?companyId=1002');
*/
gemhoUtil.nav2asd = function(url, title) {
lightAppJssdk.navigation.show({
url: 'http://www.baidu.com',
title: title || '高区安全“码”上查监管平台',
isgoback: '0',
success: function(data) {
// 成功回调
},
fail: function(data) {
// 错误返回
}
});
}
/**
* 爱山东下载方法
* @param {Object} url 下载文件全路径
......
src/_check_list.html → src/_check_info.html
View file @ b4b95eee
......@@ -8,7 +8,6 @@
content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, viewprot-fit:cover">
<title>消防安全检查清单</title>
<script type="text/javascript" src="../sdk/includeHead.js"></script>
<link rel="stylesheet" href="_check_list.css" />
</head>
<body>
......
src/_shanghu_home.css 0 → 100644
View file @ b4b95eee
html,
body {
letter-spacing: .01rem;
}
.wrapper {
/* padding: 0.2rem; */
background-color: #fff;
}
.header {
padding: .2rem;
}
.header .title {
font-weight: bold;
font-size: 0.32rem;
color: #000000;
display: flex;
justify-content: start;
align-items: center;
gap: 0.2rem;
padding: 0.3rem 0.3rem;
}
.header .title img {
width: 0.51rem;
height: 0.52rem;
}
.detail {
width: 6.5rem;
/* height: 1.88rem; */
background: #F5F6FA;
border-radius: 0.01rem;
/* padding-left: 0.2rem; */
padding: 0.3rem;
margin-bottom: 0.2rem;
display: flex;
align-items: start;
flex-direction: column;
justify-content: space-around;
/* padding-bottom: 0.1rem;
gap: 0.1rem; */
}
.detail .van-col {
font-family: PingFang SC;
font-weight: 500;
font-size: 0.28rem;
color: #737373;
}
.detail span {
font-family: PingFang SC;
font-weight: 500;
font-size: 0.28rem;
color: #737373;
}
.detail .detail_link {
position: absolute;
right: .3rem;
font-size: .26rem;
color: #1081E3;
cursor: pointer;
}
.func_btn {
width: 7.12rem;
height: 0.8rem;
background: #1081E3;
border-radius: 0.1rem;
font-family: PingFang SC;
font-weight: 500;
font-size: 0.3rem;
color: #FFFFFF;
margin: 0 auto;
border-width: 0;
margin-left: .2rem;
cursor: pointer;
}
.func_btn span {
font-size: 0.5rem;
vertical-align: -0.05rem;
margin-right: .1rem;
}
.tag {
display: inline-block;
width: 1.9rem;
height: 0.42rem;
line-height: 0.42rem;
text-align: center;
background: #00B55E;
border-radius: 21px;
font-weight: 500;
font-size: 0.28rem;
color: #FFFFFF;
}
/* 添加以下样式 */
.van-tabs__line {
background-color: #1989fa;
}
.blue-text {
color: #1989fa;
font-weight: 500;
}
.van-list {
background: #fff;
border-radius: 8px;
margin: 0 0.1rem;
}
.subNavWrapper .van-cell {
padding: 12px 10px;
}
.van-tab {
color: #000;
}
.van-tab__text {
font-weight: bold;
font-size: 0.3rem;
/* color: #000; */
}
.van-tab--active {
color: #1081E3;
}
.van-field__label {
font-weight: bold;
}
.van-field__control {
color: #737373;
}
.subNavWrapper {
background-color: #F5F6FA;
padding: 0.2rem 0.2rem;
margin-top: -0.3rem;
}
.subNavWrapper .van-tab__text {
color: #5B5B5B;
}
.subNavWrapper .van-tab--active span {
color: #fff;
font-size: 0.28rem;
}
.subNavWrapper .van-tabs__nav--card {
border: none !important;
}
.subNavWrapper .van-tabs--card {
margin-bottom: 0.3rem;
}
.subNavWrapper .van-tabs__nav--card .van-tab {
color: #5B5B5B;
border: none !important;
}
.subNavWrapper .van-tabs__nav--card .van-tab.van-tab--active {
color: #FFFFFF;
background: #58A5E8;
border-radius: 0.4rem;
}
.subNavWrapper .van-list {
background: #F5F6FA;
}
.subNavWrapper .van-cell {
margin-bottom: .3rem;
}
.subNavWrapper .van-tabs__nav {
background: #F5F6FA;
margin: 0;
}
.navToBtn {
color: #5B5B5B;
font-size: .36rem;
margin-top: .04rem;
position: absolute;
right: 0;
}
\ No newline at end of file
src/_shanghu_home.html
View file @ b4b95eee
......@@ -7,214 +7,6 @@
content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, viewprot-fit:cover">
<title>高区“码”上</title>
<script type="text/javascript" src="../sdk/includeHead.js"></script>
<style>
html,
body {
letter-spacing: .01rem;
}
.wrapper {
/* padding: 0.2rem; */
background-color: #fff;
}
.header {
padding: .2rem;
}
.header .title {
font-weight: bold;
font-size: 0.32rem;
color: #000000;
display: flex;
justify-content: start;
align-items: center;
gap: 0.2rem;
padding: 0.3rem 0.3rem;
}
.header .title img {
width: 0.51rem;
height: 0.52rem;
}
.detail {
width: 6.5rem;
/* height: 1.88rem; */
background: #F5F6FA;
border-radius: 0.01rem;
/* padding-left: 0.2rem; */
padding: 0.3rem;
margin-bottom: 0.2rem;
display: flex;
align-items: start;
flex-direction: column;
justify-content: space-around;
/* padding-bottom: 0.1rem;
gap: 0.1rem; */
}
.detail .van-col {
font-family: PingFang SC;
font-weight: 500;
font-size: 0.28rem;
color: #737373;
}
.detail span {
font-family: PingFang SC;
font-weight: 500;
font-size: 0.28rem;
color: #737373;
}
.detail .detail_link {
position: absolute;
right: .3rem;
font-size: .26rem;
color: #1081E3;
}
.func_btn {
width: 7.12rem;
height: 0.8rem;
background: #1081E3;
border-radius: 0.1rem;
font-family: PingFang SC;
font-weight: 500;
font-size: 0.3rem;
color: #FFFFFF;
margin: 0 auto;
border-width: 0;
margin-left: .2rem;
}
.func_btn span {
font-size: 0.5rem;
vertical-align: -0.05rem;
margin-right: .1rem;
}
.tag {
display: inline-block;
width: 1.9rem;
height: 0.42rem;
line-height: 0.42rem;
text-align: center;
background: #00B55E;
border-radius: 21px;
font-weight: 500;
font-size: 0.28rem;
color: #FFFFFF;
}
/* 添加以下样式 */
.van-tabs__line {
background-color: #1989fa;
}
.blue-text {
color: #1989fa;
font-weight: 500;
}
.van-list {
background: #fff;
border-radius: 8px;
margin: 0 0.1rem;
}
.subNavWrapper .van-cell {
padding: 12px 10px;
}
.van-tab {
color: #000;
}
.van-tab__text {
font-weight: bold;
font-size: 0.3rem;
/* color: #000; */
}
.van-tab--active {
color: #1081E3;
}
.van-field__label {
font-weight: bold;
}
.van-field__control {
color: #737373;
}
.subNavWrapper {
background-color: #F5F6FA;
padding: 0.2rem 0.2rem;
margin-top: -0.3rem;
}
.subNavWrapper .van-tab__text {
color: #5B5B5B;
}
.subNavWrapper .van-tab--active span {
color: #fff;
font-size: 0.28rem;
}
.subNavWrapper .van-tabs__nav--card {
border: none !important;
}
.subNavWrapper .van-tabs--card {
margin-bottom: 0.3rem;
}
.subNavWrapper .van-tabs__nav--card .van-tab {
color: #5B5B5B;
border: none !important;
}
.subNavWrapper .van-tabs__nav--card .van-tab.van-tab--active {
color: #FFFFFF;
background: #58A5E8;
border-radius: 0.4rem;
}
.subNavWrapper .van-list {
background: #F5F6FA;
}
.subNavWrapper .van-cell {
margin-bottom: .3rem;
}
.subNavWrapper .van-tabs__nav {
background: #F5F6FA;
margin: 0;
}
.navToBtn {
color: #5B5B5B;
font-size: .36rem;
margin-top: .04rem;
position: absolute;
right: 0;
}
</style>
</head>
<div id="app">
<div class="wrapper">
......@@ -225,15 +17,9 @@
<img src="../image/code/sj.png" alt=""><span>威海市宝威酒店有限公司</span><span class="tag">安全等级-绿</span>
</div>
<div class="detail">
<!-- <div><span>场所类型: 小餐饮</span> </div>
<div><span>自查数:15 </span>
<span>检查数:75</span><span>隐患数:95</span><span>未整改:21: 小餐饮</span>
</div>
<div><span>山东省威海市环翠区和谐街35-6</span>
</div> -->
<van-row>
<van-col span="24">场所类型: 小餐饮</van-col>
<div class="detail_link">详情<van-icon name="arrow" /></div>
<div class="detail_link" @click="navTo('shanghu_detail')">详情<van-icon name="arrow" /></div>
</van-row>
<van-row type="flex" justify="space-around"
style="width:100%; margin-top: .3rem; margin-bottom: .3rem;">
......@@ -250,7 +36,7 @@
</div>
<!-- 功能 -->
<button type="info" class="func_btn"><span>+</span>安全检查</button>
<button type="info" class="func_btn" @click="navTo('check_info')"><span>+</span>安全检查</button>
<!-- Tab栏 -->
<van-tabs v-model:active="activeTab" title-active-color="#1989fa" line-height="2px"
......@@ -269,7 +55,7 @@
<van-tab title="待审核"></van-tab>
<van-tab title="待整改"></van-tab>
<van-tab title="已整改"></van-tab>
<van-tab title="整改逾期"></van-tab>
<!-- <van-tab title="整改逾期"></van-tab> -->
</van-tabs>
<!-- 隐患列表 -->
<van-list>
......@@ -343,92 +129,6 @@
</div>
</div>
<script>
// 在原有Vue实例中添加
new Vue({
el: '#app',
data() {
return {
// 新增子Tab数据
subActiveTab: 0,
hazardList: [{
id: 1,
description: '消防通道被货物堵塞，存在严重安全隐患',
status: '待审核',
date: '2024-03-15',
shop: 'XX餐饮店',
type: 2
},
{
id: 2,
description: '消防通道被货物堵塞，存在严重安全隐患',
status: '待整改',
date: '2024-03-15',
shop: 'XX餐饮店',
type: 2
},
// 更多示例数据...
],
activeTab: 0,
showTimePicker: false,
// 新增以下数据
showTypePicker: false,
typeOptions: ['小餐饮', '酒店', '商场', '学校', '医疗机构'],
formData: {
principal: '',
phone: '',
area: '',
businessHours: '',
type: '', // 新增类型字段
},
checkList: [{
id: 1,
date: '2024-03-15',
result: '合格'
},
{
id: 2,
date: '2024-03-14',
result: '不合格'
}
]
}
},
computed: {
filteredHazards() {
const statusMap = ['全部', '待审核', '待整改', '已整改'];
return this.hazardList.filter(item =>
this.subActiveTab === 0 ? true : item.status === statusMap[this.subActiveTab]
);
}
},
methods: {
// 新增选择确认方法
onConfirmType(value) {
this.formData.type = value;
this.showTypePicker = false;
},
onConfirmTime(time) {
this.formData.businessHours = time;
this.showTimePicker = false;
},
statusTagType(status) {
const types = {
'待审核': 'warning',
'待整改': 'primary',
'已整改': 'success',
'整改逾期': 'danger',
};
return types[status] || '';
},
viewDetail(id) {
console.log('查看详情:', id);
// 这里添加跳转逻辑
}
}
});
</script>
</body>
</html>
\ No newline at end of file
src/_shanghu_home.js 0 → 100644
View file @ b4b95eee
/**
* author: dabao
* date: 2024-03-15
* description: 商户首页
*/
var VUE = null
window.addEventListener("load", function() {
VUE = new Vue({
el: '#app',
data() {
return {
// 新增子Tab数据
subActiveTab: 0,
hazardList: [{
id: 1,
description: '消防通道被货物堵塞，存在严重安全隐患',
status: '待审核',
date: '2024-03-15',
shop: 'XX餐饮店',
type: 2
},
{
id: 2,
description: '消防通道被货物堵塞，存在严重安全隐患',
status: '待整改',
date: '2024-03-15',
shop: 'XX餐饮店',
type: 2
},
// 更多示例数据...
],
activeTab: 0,
showTimePicker: false,
// 新增以下数据
showTypePicker: false,
typeOptions: ['小餐饮', '酒店', '商场', '学校', '医疗机构'],
formData: {
principal: '',
phone: '',
area: '',
businessHours: '',
type: '', // 新增类型字段
},
checkList: [{
id: 1,
date: '2024-03-15',
result: '合格'
},
{
id: 2,
date: '2024-03-14',
result: '不合格'
}
]
}
},
computed: {
filteredHazards() {
const statusMap = ['全部', '待审核', '待整改', '已整改'];
return this.hazardList.filter(item =>
this.subActiveTab === 0 ? true : item.status === statusMap[this.subActiveTab]
);
}
},
methods: {
navTo(url){
// gemhoUtil.nav2asd(url)
gemhoUtil.navigatePage(`_${url}.html`)
},
// 新增选择确认方法
onConfirmType(value) {
this.formData.type = value;
this.showTypePicker = false;
},
onConfirmTime(time) {
this.formData.businessHours = time;
this.showTimePicker = false;
},
statusTagType(status) {
const types = {
'待审核': 'warning',
'待整改': 'primary',
'已整改': 'success',
'整改逾期': 'danger',
};
return types[status] || '';
},
viewDetail(id) {
console.log('查看详情:', id);
// 这里添加跳转逻辑
}
}
});
})
\ No newline at end of file
src/test/xxx111 - 副本.html 0 → 100644
View file @ b4b95eee
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>商家中心</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
/* 自定义滚动条样式 */
.custom-scrollbar::-webkit-scrollbar {
width: 4px;
height: 4px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.1);
border-radius: 2px;
}
/* 提取公共类 */
.card {
@apply bg-white rounded-lg shadow p-4;
}
.icon-container {
@apply w-10 h-10 rounded-full flex items-center justify-center mb-2;
}
</style>
</head>
<body class="bg-gray-50 text-gray-800">
<!-- 顶部导航栏 -->
<header class="fixed top-0 left-0 right-0 bg-blue-600 text-white p-4 z-10 shadow-sm">
<div class="flex items-center justify-between">
<div class="flex items-center">
<button class="mr-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
</svg>
</button>
<h1 class="text-lg font-semibold">商家中心</h1>
</div>
<button>
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
</svg>
</button>
</div>
</header>
<!-- 主要内容区 -->
<main class="pt-16 pb-20 px-4">
<!-- 统计卡片区 -->
<section class="grid grid-cols-2 gap-3 mb-6">
<!-- 今日营业额卡片 -->
<div class="card">
<div class="flex items-center justify-between mb-2">
<span class="text-gray-500 text-sm">今日营业额</span>
<span class="text-xs px-2 py-1 bg-blue-100 text-blue-600 rounded-full">+12.5%</span>
</div>
<div class="text-2xl font-bold text-blue-600">¥3,856.00</div>
<div class="text-xs text-gray-400 mt-1">昨日 ¥3,425.00</div>
</div>
<!-- 订单量卡片 -->
<div class="card">
<div class="flex items-center justify-between mb-2">
<span class="text-gray-500 text-sm">今日订单</span>
<span class="text-xs px-2 py-1 bg-green-100 text-green-600 rounded-full">+8.2%</span>
</div>
<div class="text-2xl font-bold text-green-600">42</div>
<div class="text-xs text-gray-400 mt-1">完成率 92%</div>
</div>
<!-- 客户数卡片 -->
<div class="card">
<div class="flex items-center justify-between mb-2">
<span class="text-gray-500 text-sm">客户总数</span>
<span class="text-xs px-2 py-1 bg-purple-100 text-purple-600 rounded-full">+3</span>
</div>
<div class="text-2xl font-bold text-purple-600">1,256</div>
<div class="text-xs text-gray-400 mt-1">今日新增 3</div>
</div>
<!-- 商品销量Top3卡片 -->
<div class="card">
<div class="text-gray-500 text-sm mb-2">热销商品</div>
<div class="space-y-1">
<div class="flex items-center justify-between text-sm">
<span>1. 经典拿铁</span>
<span class="text-orange-500">12单</span>
</div>
<div class="flex items-center justify-between text-sm">
<span>2. 美式咖啡</span>
<span class="text-orange-500">8单</span>
</div>
<div class="flex items-center justify-between text-sm">
<span>3. 卡布奇诺</span>
<span class="text-orange-500">5单</span>
</div>
</div>
</div>
</section>
<!-- 功能入口区 -->
<section class="mb-6">
<h2 class="text-lg font-semibold mb-3">常用功能</h2>
<div class="grid grid-cols-3 gap-3">
<!-- 订单管理 -->
<a href="#" class="card flex flex-col items-center justify-center">
<div class="icon-container bg-blue-100">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
</svg>
</div>
<span class="text-sm">订单管理</span>
</a>
<!-- 商品管理 -->
<a href="#" class="card flex flex-col items-center justify-center">
<div class="icon-container bg-green-100">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
</svg>
</div>
<span class="text-sm">商品管理</span>
</a>
<!-- 客户管理 -->
<a href="#" class="card flex flex-col items-center justify-center">
<div class="icon-container bg-purple-100">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
</svg>
</div>
<span class="text-sm">客户管理</span>
</a>
<!-- 营销活动 -->
<a href="#" class="card flex flex-col items-center justify-center">
<div class="icon-container bg-red-100">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-red-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
</svg>
</div>
<span class="text-sm">营销活动</span>
</a>
<!-- 数据分析 -->
<a href="#" class="card flex flex-col items-center justify-center">
<div class="icon-container bg-yellow-100">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-yellow-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
</svg>
</div>
<span class="text-sm">数据分析</span>
</a>
<!-- 店铺设置 -->
<a href="#" class="card flex flex-col items-center justify-center">
<div class="icon-container bg-gray-100">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
</div>
<span class="text-sm">店铺设置</span>
</a>
</div>
</section>
<!-- 公告/消息区 -->
<section>
<h2 class="text-lg font-semibold mb-3">最新消息</h2>
<div class="bg-white rounded-lg shadow overflow-hidden">
<!-- 系统公告 -->
<div class="p-4 border-b border-gray-100">
<div class="flex items-start">
<div class="flex-shrink-0 mr-3 text-blue-500">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z" />
</svg>
</div>
<div>
<h3 class="font-medium text-sm mb-1">系统升级通知</h3>
<p class="text-gray-500 text-xs">系统将于今晚23:00-24:00进行升级维护，期间可能无法访问...</p>
</div>
</div>
</div>
<!-- 待处理订单 -->
<div class="p-4 border-b border-gray-100">
<div class="flex items-start">
<div class="flex-shrink-0 mr-3 text-orange-500">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
</svg>
</div>
<div>
<h3 class="font-medium text-sm mb-1">待处理订单</h3>
<p class="text-gray-500 text-xs">您有3笔新订单待处理，请及时处理...</p>
</div>
</div>
</div>
<!-- 库存预警 -->
<div class="p-4">
<div class="flex items-start">
<div class="flex-shrink-0 mr-3 text-red-500">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
</svg>
</div>
<div>
<h3 class="font-medium text-sm mb-1">库存预警</h3>
<p class="text-gray-500 text-xs">经典拿铁库存不足(剩余5份)，请及时补货...</p>
</div>
</div>
</div>
</div>
</section>
</main>
<!-- 底部导航栏 -->
<nav class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 flex justify-around py-2 z-10">
<a href="#" class="flex flex-col items-center text-blue-600">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
</svg>
<span class="text-xs mt-1">首页</span>
</a>
<a href="#" class="flex flex-col items-center text-gray-500">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
</svg>
<span class="text-xs mt-1">订单</span>
</a>
<a href="#" class="flex flex-col items-center text-gray-500">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
</svg>
<span class="text-xs mt-1">商品</span>
</a>
<a href="#" class="flex flex-col items-center text-gray-500">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
</svg>
<span class="text-xs mt-1">我的</span>
</a>
</nav>
</body>
</html>
\ No newline at end of file
src/test/xxx111.html 0 → 100644
View file @ b4b95eee
html index.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>商家中心</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
/* 自定义滚动条样式 */
.custom-scrollbar::-webkit-scrollbar {
width: 4px;
height: 4px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.1);
border-radius: 2px;
}
</style>
</head>
<body class="bg-gray-50 text-gray-800">
<!-- 顶部导航栏 -->
<header class="fixed top-0 left-0 right-0 bg-blue-600 text-white p-4 z-10 shadow-sm">
<div class="flex items-center justify-between">
<div class="flex items-center">
<button class="mr-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
</svg>
</button>
<h1 class="text-lg font-semibold">商家中心</h1>
</div>
<button>
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
</svg>
</button>
</div>
</header>
<!-- 主要内容区 -->
<main class="pt-16 pb-20 px-4">
<!-- 统计卡片区 -->
<section class="grid grid-cols-2 gap-3 mb-6">
<!-- 今日营业额卡片 -->
<div class="bg-white rounded-lg shadow p-4">
<div class="flex items-center justify-between mb-2">
<span class="text-gray-500 text-sm">今日营业额</span>
<span class="text-xs px-2 py-1 bg-blue-100 text-blue-600 rounded-full">+12.5%</span>
</div>
<div class="text-2xl font-bold text-blue-600">¥3,856.00</div>
<div class="text-xs text-gray-400 mt-1">昨日 ¥3,425.00</div>
</div>
<!-- 订单量卡片 -->
<div class="bg-white rounded-lg shadow p-4">
<div class="flex items-center justify-between mb-2">
<span class="text-gray-500 text-sm">今日订单</span>
<span class="text-xs px-2 py-1 bg-green-100 text-green-600 rounded-full">+8.2%</span>
</div>
<div class="text-2xl font-bold text-green-600">42</div>
<div class="text-xs text-gray-400 mt-1">完成率 92%</div>
</div>
<!-- 客户数卡片 -->
<div class="bg-white rounded-lg shadow p-4">
<div class="flex items-center justify-between mb-2">
<span class="text-gray-500 text-sm">客户总数</span>
<span class="text-xs px-2 py-1 bg-purple-100 text-purple-600 rounded-full">+3</span>
</div>
<div class="text-2xl font-bold text-purple-600">1,256</div>
<div class="text-xs text-gray-400 mt-1">今日新增 3</div>
</div>
<!-- 商品销量Top3卡片 -->
<div class="bg-white rounded-lg shadow p-4">
<div class="text-gray-500 text-sm mb-2">热销商品</div>
<div class="space-y-1">
<div class="flex items-center justify-between text-sm">
<span>1. 经典拿铁</span>
<span class="text-orange-500">12单</span>
</div>
<div class="flex items-center justify-between text-sm">
<span>2. 美式咖啡</span>
<span class="text-orange-500">8单</span>
</div>
<div class="flex items-center justify-between text-sm">
<span>3. 卡布奇诺</span>
<span class="text-orange-500">5单</span>
</div>
</div>
</div>
</section>
<!-- 功能入口区 -->
<section class="mb-6">
<h2 class="text-lg font-semibold mb-3">常用功能</h2>
<div class="grid grid-cols-3 gap-3">
<!-- 订单管理 -->
<a href="#" class="bg-white rounded-lg shadow p-4 flex flex-col items-center justify-center">
<div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mb-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
</svg>
</div>
<span class="text-sm">订单管理</span>
</a>
<!-- 商品管理 -->
<a href="#" class="bg-white rounded-lg shadow p-4 flex flex-col items-center justify-center">
<div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center mb-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
</svg>
</div>
<span class="text-sm">商品管理</span>
</a>
<!-- 客户管理 -->
<a href="#" class="bg-white rounded-lg shadow p-4 flex flex-col items-center justify-center">
<div class="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center mb-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
</svg>
</div>
<span class="text-sm">客户管理</span>
</a>
<!-- 营销活动 -->
<a href="#" class="bg-white rounded-lg shadow p-4 flex flex-col items-center justify-center">
<div class="w-10 h-10 bg-red-100 rounded-full flex items-center justify-center mb-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-red-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
</svg>
</div>
<span class="text-sm">营销活动</span>
</a>
<!-- 数据分析 -->
<a href="#" class="bg-white rounded-lg shadow p-4 flex flex-col items-center justify-center">
<div class="w-10 h-10 bg-yellow-100 rounded-full flex items-center justify-center mb-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-yellow-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
</svg>
</div>
<span class="text-sm">数据分析</span>
</a>
<!-- 店铺设置 -->
<a href="#" class="bg-white rounded-lg shadow p-4 flex flex-col items-center justify-center">
<div class="w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center mb-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
</div>
<span class="text-sm">店铺设置</span>
</a>
</div>
</section>
<!-- 公告/消息区 -->
<section>
<h2 class="text-lg font-semibold mb-3">最新消息</h2>
<div class="bg-white rounded-lg shadow overflow-hidden">
<!-- 系统公告 -->
<div class="p-4 border-b border-gray-100">
<div class="flex items-start">
<div class="flex-shrink-0 mr-3 text-blue-500">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z" />
</svg>
</div>
<div>
<h3 class="font-medium text-sm mb-1">系统升级通知</h3>
<p class="text-gray-500 text-xs">系统将于今晚23:00-24:00进行升级维护，期间可能无法访问...</p>
</div>
</div>
</div>
<!-- 待处理订单 -->
<div class="p-4 border-b border-gray-100">
<div class="flex items-start">
<div class="flex-shrink-0 mr-3 text-orange-500">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
</svg>
</div>
<div>
<h3 class="font-medium text-sm mb-1">待处理订单</h3>
<p class="text-gray-500 text-xs">您有3笔新订单待处理，请及时处理...</p>
</div>
</div>
</div>
<!-- 库存预警 -->
<div class="p-4">
<div class="flex items-start">
<div class="flex-shrink-0 mr-3 text-red-500">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
</svg>
</div>
<div>
<h3 class="font-medium text-sm mb-1">库存预警</h3>
<p class="text-gray-500 text-xs">经典拿铁库存不足(剩余5份)，请及时补货...</p>
</div>
</div>
</div>
</div>
</section>
</main>
<!-- 底部导航栏 -->
<nav class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 flex justify-around py-2 z-10">
<a href="#" class="flex flex-col items-center text-blue-600">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
</svg>
<span class="text-xs mt-1">首页</span>
</a>
<a href="#" class="flex flex-col items-center text-gray-500">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
</svg>
<span class="text-xs mt-1">订单</span>
</a>
<a href="#" class="flex flex-col items-center text-gray-500">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
</svg>
<span class="text-xs mt-1">商品</span>
</a>
<a href="#" class="flex flex-col items-center text-gray-500">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
</svg>
<span class="text-xs mt-1">我的</span>
</a>
</nav>
</body>
</html>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment