@ -0,0 +1,308 @@ | |||||
<template> | |||||
<view class="container"> | |||||
<!-- 顶部标题 --> | |||||
<view class="header"> | |||||
<view class="header_info"> | |||||
<text class="header_text" :title="title">{{title}}</text> | |||||
<text style="margin-right: 10rpx; font-size: 40rpx;">|</text> | |||||
<view @click="change_text" class="header_change"> | |||||
<text >切换</text> | |||||
<uni-icons type="right" size="30" color="#c2d4de" :size="1"></uni-icons> | |||||
</view> | |||||
</view> | |||||
</view> | |||||
<!-- 轮播图 --> | |||||
<swiper class="swiper" indicator-dots autoplay interval="3000" duration="500" indicator-color="#ffffff" indicator-active-color="#707070"> | |||||
<swiper-item> | |||||
<image class="swiper-image" src="/static/logo.png" mode="scaleToFill"></image> | |||||
</swiper-item> | |||||
<swiper-item> | |||||
<image class="swiper-image" src="/static/logo.png" mode="scaleToFill"></image> | |||||
</swiper-item> | |||||
<swiper-item> | |||||
<image class="swiper-image" src="/static/logo.png" mode="scaleToFill"></image> | |||||
</swiper-item> | |||||
</swiper> | |||||
<!-- 公告 --> | |||||
<view class = "swiper_ac_container"> | |||||
<uni-icons custom-prefix="iconfont" type="qungonggao"></uni-icons> | |||||
<swiper class="swiper_ac" autoplay circular vertical='true'> | |||||
<swiper-item v-for="(item, index) in announcements" :key="index"> | |||||
<view class="announcement-item"> | |||||
<text class="announcement-text" style="color: #397496;">{{ item.title }}</text> | |||||
</view> | |||||
</swiper-item> | |||||
</swiper> | |||||
</view> | |||||
<view class="order_Entry_container" @click="orderEntry"> | |||||
<uni-icons ></uni-icons> | |||||
<text style="color: #115881;font-weight: bold;margin-left: 20rpx;" >录入订单</text> | |||||
<uni-icons class="order_Entry_end" type="right" :size="25" color="#306e91"></uni-icons> | |||||
</view> | |||||
<view v-if="isshow" class="show_container"> | |||||
<view class="isshow-header"> | |||||
<uni-icons class=" isshow-header-content-icon" type="search" :size="20"></uni-icons> | |||||
<uni-easyinput class=" isshow-header-content-input" v-model="ServiceName" placeholder="请输入服务名称" focus="true" /> | |||||
<text class="isshow-header-content-text" @click="searchName">搜索</text> | |||||
</view> | |||||
<view class="isshow-content" > | |||||
<text class="isshow-content-text" v-for="(item, index) in textcontent" :key="index" >{{item}}</text> | |||||
</view> | |||||
</view> | |||||
</view> | |||||
</template> | |||||
<script> | |||||
export default { | |||||
data() { | |||||
return { | |||||
ServiceName:'', | |||||
title:"北京汽车有限公司", | |||||
isshow:false, | |||||
announcements: [ | |||||
'公告1:欢迎使用车辆合同生成系统!', | |||||
'公告2:请及时查看最新用户协议。', | |||||
'公告3:隐私政策已更新,请知悉。' | |||||
], | |||||
textcontent: [ | |||||
'公告1:欢迎使用车辆合同生成系统!', | |||||
'公告2:请及时查看最新用户协议。', | |||||
'公告3:隐私政策已更新,请知悉。', | |||||
'公告1:欢迎使用车辆合同生成系统!', | |||||
'公告2:请及时查看最新用户协议。', | |||||
'公告3:隐私政策已更新,请知悉。' | |||||
], | |||||
}; | |||||
}, | |||||
onLoad() { | |||||
uni.request({ | |||||
url: 'https://gpt.aiym.run/contract/miniapp/notice/list', //仅为示例,并非真实接口地址。 | |||||
method:'GET', | |||||
data: { | |||||
}, | |||||
header: { | |||||
'X-Access-Token': 'hello' //自定义请求头信息 | |||||
}, | |||||
success: (res) => { | |||||
console.log(res.data.result); | |||||
this.announcements = res.data.result; | |||||
} | |||||
}); | |||||
}, | |||||
methods: { | |||||
change_text(){ | |||||
if(this.isshow){ | |||||
this.isshow=false; | |||||
}else{ | |||||
this.isshow=true; | |||||
console.log('111') | |||||
} | |||||
}, | |||||
orderEntry(){ | |||||
console.log('111') | |||||
}, | |||||
// 搜索城市名字 | |||||
searchName(){ | |||||
} | |||||
} | |||||
}; | |||||
</script> | |||||
<style> | |||||
.container { | |||||
display: flex; | |||||
flex-direction: column; | |||||
height: 100vh; | |||||
background-color: #f5f5f5; | |||||
} | |||||
/* 头部 */ | |||||
.header { | |||||
padding: 20px; | |||||
width: 100%; | |||||
height: 15%; | |||||
background-color: #044f7a; | |||||
color: #fff; | |||||
display: flex; | |||||
flex-direction: row; | |||||
align-items: center; | |||||
} | |||||
.header_info{ | |||||
width: 100%; | |||||
display: flex; | |||||
flex-direction: row; | |||||
align-items: center; | |||||
color: #e0e9ef; | |||||
} | |||||
.header_text{ | |||||
width: 45%; | |||||
white-space: nowrap;/*设置不换行*/ | |||||
overflow: hidden; /*设置隐藏*/ | |||||
text-overflow: ellipsis; /*设置隐藏部分为省略号*/ | |||||
} | |||||
.header_change{ | |||||
width: 100%; | |||||
display: flex; | |||||
flex-direction: row; | |||||
align-items: center; | |||||
} | |||||
/* 订单录入 */ | |||||
.order_Entry_container{ | |||||
width: 90%; | |||||
height: 8%; | |||||
background-color: #d9e5eb; | |||||
border-radius: 10rpx; | |||||
left:5%; | |||||
display: flex; | |||||
flex-direction: row; | |||||
align-items: center; | |||||
margin-top: 10%; | |||||
} | |||||
.order_Entry_end{ | |||||
margin-left: auto; | |||||
margin-right: 7%; | |||||
} | |||||
/* 轮播图 */ | |||||
.swiper { | |||||
height: 30%; | |||||
width: 100%; | |||||
display: flex; | |||||
flex-direction: row; | |||||
align-items: center; | |||||
} | |||||
.swiper-image { | |||||
width: 100%; | |||||
height: 100%; | |||||
margin: 0 auto; | |||||
} | |||||
.form { | |||||
flex: 1; | |||||
padding: 20px; | |||||
} | |||||
.submit-button { | |||||
width: 100%; | |||||
height: 40px; | |||||
background-color: #007aff; | |||||
color: #fff; | |||||
border: none; | |||||
border-radius: 4px; | |||||
font-size: 16px; | |||||
} | |||||
.footer { | |||||
display: flex; | |||||
justify-content: space-around; | |||||
padding: 10px; | |||||
background-color: #fff; | |||||
border-top: 1px solid #ccc; | |||||
} | |||||
.nav-item { | |||||
text-align: center; | |||||
} | |||||
.nav-item text { | |||||
font-size: 14px; | |||||
} | |||||
.icon-image{ | |||||
width: 30%; | |||||
height: 140px; | |||||
margin: 0 auto; | |||||
margin-top: 20px; | |||||
} | |||||
/* 轮播公告 */ | |||||
.swiper_ac_container{ | |||||
width: 100%; | |||||
height: 6%; | |||||
background-color: #e7eef2; | |||||
display: flex; | |||||
flex-direction: row; | |||||
} | |||||
.swiper_ac { | |||||
width: 70%; | |||||
height: 100%; | |||||
} | |||||
/* 轮播项 */ | |||||
.announcement-item { | |||||
display: flex; | |||||
justify-content: center; | |||||
align-items: center; | |||||
height: 100%; | |||||
} | |||||
/* 公告文字 */ | |||||
.announcement-text { | |||||
font-size: 15px; | |||||
color: #6996af; | |||||
} | |||||
/* 遮罩层 */ | |||||
.show_container{ | |||||
width: 60%; | |||||
height: 36%; | |||||
background-color: #ffffff; | |||||
position: absolute; | |||||
border-radius: 20rpx; | |||||
/* border: 1px solid; */ | |||||
box-shadow: 0px 3rpx 0px #e4e4e4; | |||||
left:5%; | |||||
top: 13%; | |||||
z-index:999; | |||||
display: flex; | |||||
flex-direction: column; | |||||
align-items: center; | |||||
} | |||||
.isshow-header{ | |||||
width: 90%; | |||||
height: 30%; | |||||
display: flex; | |||||
justify-content: center; | |||||
align-items: center; | |||||
flex-direction: row; | |||||
color: #3c7697; | |||||
} | |||||
.isshow-header-content-icon{ | |||||
width: 10%; | |||||
height: 30%; | |||||
} | |||||
.isshow-header-content-input{ | |||||
width: 80%; | |||||
height: 40%; | |||||
margin: 0 20rpx 0 20rpx; | |||||
border:none; | |||||
outline:none; | |||||
} | |||||
.isshow-content{ | |||||
height: 70%; | |||||
display: flex; | |||||
flex-direction: column; | |||||
align-items: center; | |||||
overflow-y:scroll; | |||||
} | |||||
.isshow-content-text{ | |||||
color: #414141; | |||||
height: 30rpx; | |||||
width: 100%; | |||||
line-height: 30rpx; | |||||
margin: 20rpx 0 20rpx 0; | |||||
font-size: 30rpx; | |||||
} | |||||
.isshow-content::-webkit-scrollbar { | |||||
display: none; | |||||
} | |||||
</style> |
@ -0,0 +1,105 @@ | |||||
<template> | |||||
<view class="container"> | |||||
<view class="form"> | |||||
<input class="input" type="text" placeholder="请输入您的账号" v-model="username" /> | |||||
<input class="input" type="password" placeholder="请输入您的密码" v-model="password" /> | |||||
<view class="agreement"> | |||||
<checkbox-group @change="handleAgreementChange"> | |||||
<label> | |||||
<checkbox value="agree" /> 阅读并同意《用户协议》和《隐私政策》 | |||||
</label> | |||||
</checkbox-group> | |||||
</view> | |||||
<button class="button" @click="handleLogin">登录</button> | |||||
</view> | |||||
</view> | |||||
</template> | |||||
<script> | |||||
export default { | |||||
data() { | |||||
return { | |||||
username: '', | |||||
password: '', | |||||
agreed: false | |||||
}; | |||||
}, | |||||
methods: { | |||||
handleAgreementChange(e) { | |||||
this.agreed = e.detail.value.includes('agree'); | |||||
}, | |||||
handleLogin() { | |||||
if (!this.agreed) { | |||||
uni.showToast({ | |||||
title: '请先同意用户协议和隐私政策', | |||||
icon: 'none' | |||||
}); | |||||
return; | |||||
} | |||||
// 简单的登录验证逻辑 | |||||
if (this.username === 'admin' && this.password === '123456') { | |||||
uni.showToast({ | |||||
title: '登录成功', | |||||
icon: 'success', | |||||
duration: 1500, // 提示持续时间 | |||||
success: () => { | |||||
// 延迟跳转,确保用户看到提示 | |||||
setTimeout(() => { | |||||
uni.navigateTo({ | |||||
url: '/pages/home/home' // 跳转到首页或其他页面 | |||||
}); | |||||
}, 1500); | |||||
} | |||||
}); | |||||
} else { | |||||
uni.showToast({ | |||||
title: '账号或密码错误', | |||||
icon: 'none' | |||||
}); | |||||
} | |||||
} | |||||
} | |||||
}; | |||||
</script> | |||||
<style> | |||||
.container { | |||||
display: flex; | |||||
justify-content: center; | |||||
align-items: center; | |||||
height: 100vh; | |||||
background-color: #f5f5f5; | |||||
} | |||||
.form { | |||||
width: 80%; | |||||
background-color: #fff; | |||||
padding: 20px; | |||||
border-radius: 8px; | |||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); | |||||
} | |||||
.input { | |||||
width: 100%; | |||||
height: 40px; | |||||
margin-bottom: 15px; | |||||
padding: 10px; | |||||
border: 1px solid #ccc; | |||||
border-radius: 4px; | |||||
} | |||||
.agreement { | |||||
margin-bottom: 15px; | |||||
} | |||||
.button { | |||||
width: 100%; | |||||
height: 40px; | |||||
background-color: #007aff; | |||||
color: #fff; | |||||
border: none; | |||||
border-radius: 4px; | |||||
font-size: 16px; | |||||
} | |||||
</style> |
@ -0,0 +1,88 @@ | |||||
<template> | |||||
<view class="container"> | |||||
<view class="form"> | |||||
<input class="input" type="text" placeholder="请输入您的账号" v-model="username" /> | |||||
<input class="input" type="password" placeholder="请输入您的密码" v-model="password" /> | |||||
<view class="agreement"> | |||||
<checkbox-group @change="handleAgreementChange"> | |||||
<label> | |||||
<checkbox value="agree" /> 阅读并同意《用户协议》和《隐私政策》 | |||||
</label> | |||||
</checkbox-group> | |||||
</view> | |||||
<button class="button" @click="handleLogin">登录</button> | |||||
</view> | |||||
</view> | |||||
</template> | |||||
<script> | |||||
export default { | |||||
data() { | |||||
return { | |||||
username: '', | |||||
password: '', | |||||
agreed: false | |||||
}; | |||||
}, | |||||
methods: { | |||||
handleAgreementChange(e) { | |||||
this.agreed = e.detail.value.includes('agree'); | |||||
}, | |||||
handleLogin() { | |||||
if (!this.agreed) { | |||||
uni.showToast({ | |||||
title: '请先同意用户协议和隐私政策', | |||||
icon: 'none' | |||||
}); | |||||
return; | |||||
} | |||||
// 这里可以添加登录逻辑 | |||||
uni.showToast({ | |||||
title: '登录成功', | |||||
icon: 'success' | |||||
}); | |||||
} | |||||
} | |||||
}; | |||||
</script> | |||||
<style> | |||||
.container { | |||||
display: flex; | |||||
justify-content: center; | |||||
align-items: center; | |||||
height: 100vh; | |||||
background-color: #f5f5f5; | |||||
} | |||||
.form { | |||||
width: 80%; | |||||
background-color: #fff; | |||||
padding: 20px; | |||||
border-radius: 8px; | |||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); | |||||
} | |||||
.input { | |||||
width: 100%; | |||||
height: 40px; | |||||
margin-bottom: 15px; | |||||
padding: 10px; | |||||
border: 1px solid #ccc; | |||||
border-radius: 4px; | |||||
} | |||||
.agreement { | |||||
margin-bottom: 15px; | |||||
} | |||||
.button { | |||||
width: 100%; | |||||
height: 40px; | |||||
background-color: #007aff; | |||||
color: #fff; | |||||
border: none; | |||||
border-radius: 4px; | |||||
font-size: 16px; | |||||
} | |||||
</style> |
@ -0,0 +1,255 @@ | |||||
<template> | |||||
<view class="login-container"> | |||||
<!-- 顶部欢迎语 --> | |||||
<view class="welcome"> | |||||
<text class="welcome-text">欢迎登陆车辆合同生成</text> | |||||
</view> | |||||
<!-- 账号输入框 --> | |||||
<view class="input-container"> | |||||
<uni-easyinput prefixIcon="person" class="input" placeholder="请输入您的账号" v-model="username" :inputBorder="false" ></uni-easyinput> | |||||
<view class="underline"></view> | |||||
</view> | |||||
<!-- 密码输入框 --> | |||||
<view class="input-container"> | |||||
<uni-easyinput prefixIcon="locked" class="input" type="password" placeholder="请输入您的密码" v-model="password" :inputBorder="false" ></uni-easyinput> | |||||
<view class="underline"></view> | |||||
</view> | |||||
<!-- 协议提示 --> | |||||
<view class="agreement"> | |||||
<radio class = "login-agree" value="r1" :checked="checked" @click="changeCK">登录即代表同意 | |||||
</radio> | |||||
<text class="link" @click="showModal">《用户协议》</text> | |||||
<text class="login-agree">与</text> | |||||
<text class="link" @click="showModal">《隐私政策》</text> | |||||
</view> | |||||
<view class = 'button_container'> | |||||
<!-- 登录按钮 --> | |||||
<button class="login-button" @click="handleLogin">登陆</button> | |||||
</view> | |||||
<mosowe-confirm-popup | |||||
v-model="popupNoCancelShow" | |||||
title="服务协议和隐私政策" | |||||
confirmText | |||||
cancelText | |||||
> | |||||
没有取消弹框 | |||||
<template v-slot:footer> | |||||
<view class="mini_container"> | |||||
<button class="mini-btn" type="primary" size="mini" @click="closeModal">取消</button> | |||||
<button class="mini-btn" type="primary" size="mini" @click="getConfirm">确认</button> | |||||
</view> | |||||
</template> | |||||
</mosowe-confirm-popup> | |||||
</view> | |||||
</template> | |||||
<script> | |||||
export default { | |||||
data() { | |||||
return { | |||||
username: '', // 账号 | |||||
password: '', // 密码 | |||||
isModalVisible: false, // 控制弹窗显示 | |||||
modalTitle: '', // 弹窗标题 | |||||
modalContent: '' ,// 弹窗内容 | |||||
popupNoCancelShow: false, | |||||
checked:false, | |||||
}; | |||||
}, | |||||
methods: { | |||||
// 处理登录逻辑 | |||||
handleLogin() { | |||||
if (!this.username || !this.password) { | |||||
uni.showToast({ title: '请输入账号和密码', icon: 'none' }); | |||||
return; | |||||
}else{ | |||||
console.log(this.checked); | |||||
if(this.checked){ | |||||
uni.showToast({ title: '登录成功', icon: 'success' }); | |||||
uni.switchTab({ url: '/pages/home/home' }); | |||||
}else{ | |||||
uni.showToast({ title: '请勾选服务协议', icon: 'none' }); | |||||
} | |||||
} | |||||
}, | |||||
// 显示弹窗 | |||||
showModal() { | |||||
this.popupNoCancelShow = true ; | |||||
}, | |||||
// 关闭弹窗 | |||||
closeModal() { | |||||
this.popupNoCancelShow = false ; | |||||
}, | |||||
change(e) { | |||||
console.log('当前模式:' + e.type + ',状态:' + e.show); | |||||
}, | |||||
changeCK(){ | |||||
if(this.checked){ | |||||
this.checked = false; | |||||
}else{ | |||||
this.checked = true; | |||||
} | |||||
}, | |||||
// 处理选中事件 | |||||
getConfirm(){ | |||||
console.log("111"); | |||||
this.changeCK(); | |||||
this.popupNoCancelShow = false; | |||||
} | |||||
} | |||||
}; | |||||
</script> | |||||
<style> | |||||
/* 页面容器 */ | |||||
.login-container { | |||||
display: flex; | |||||
flex-direction: column; | |||||
align-items: center; | |||||
padding: 40px 20px; | |||||
background-color: #ffffff; | |||||
height: 100vh; | |||||
} | |||||
.button-text { | |||||
color: #fff; | |||||
font-size: 12px; | |||||
} | |||||
/* 欢迎语 */ | |||||
.welcome { | |||||
height: 50%; | |||||
margin-bottom: 40px; | |||||
display: flex; | |||||
justify-content: end; | |||||
align-items: center; | |||||
} | |||||
.welcome-text { | |||||
font-size: 20px; | |||||
font-weight: bold; | |||||
color: #044f7a; | |||||
} | |||||
/* 输入框容器 */ | |||||
.input-container { | |||||
width: 100%; | |||||
left:10%; | |||||
} | |||||
/* 输入框样式 */ | |||||
.input { | |||||
width: 70%; | |||||
height: 40px; | |||||
font-size: 16px; | |||||
border: none; | |||||
outline: none; | |||||
background-color: transparent; | |||||
} | |||||
/* 下划线样式 */ | |||||
.underline { | |||||
width: 100%; | |||||
height: 1px; | |||||
background-color: #f2f2f2; | |||||
margin-top: 5px; | |||||
} | |||||
/* 协议提示 */ | |||||
.agreement { | |||||
font-size: 14px; | |||||
color: #666; | |||||
margin-bottom: 20px; | |||||
width: 70%; | |||||
display: flex; | |||||
flex-direction: row; | |||||
justify-content: center; | |||||
align-items: center; | |||||
} | |||||
.login-agree{ | |||||
font-size: 20rpx; | |||||
} | |||||
.link { | |||||
color: #007aff; | |||||
text-decoration: underline; | |||||
font-size: 20rpx; | |||||
} | |||||
.button_container{ | |||||
width: 100%; | |||||
height: 40%; | |||||
display: flex; | |||||
align-items: center; | |||||
} | |||||
/* 登录按钮 */ | |||||
.login-button { | |||||
width: 70%; | |||||
height: 70rpx; | |||||
line-height: 70rpx; | |||||
background-color: #044f7a; | |||||
color: #fff; | |||||
border: none; | |||||
border-radius: 4px; | |||||
font-size: 16px; | |||||
position: absolute; | |||||
top:15%; | |||||
left:20%; | |||||
} | |||||
/* 弹窗样式 */ | |||||
.modal { | |||||
position: fixed; | |||||
top: 0; | |||||
left: 0; | |||||
width: 100%; | |||||
height: 100%; | |||||
background-color: rgba(0, 0, 0, 0.5); | |||||
display: flex; | |||||
justify-content: center; | |||||
align-items: center; | |||||
} | |||||
.modal-content { | |||||
width: 80%; | |||||
background-color: #fff; | |||||
border-radius: 8px; | |||||
padding: 20px; | |||||
} | |||||
.modal-header { | |||||
display: flex; | |||||
justify-content: space-between; | |||||
align-items: center; | |||||
font-size: 18px; | |||||
font-weight: bold; | |||||
margin-bottom: 15px; | |||||
} | |||||
.close { | |||||
font-size: 24px; | |||||
cursor: pointer; | |||||
} | |||||
.modal-body { | |||||
font-size: 16px; | |||||
line-height: 1.5; | |||||
} | |||||
.mini_container{ | |||||
display: flex; | |||||
flex-direction: row; | |||||
align-items: center; | |||||
} | |||||
/* 按钮 */ | |||||
.mini-btn{ | |||||
width: 30%; | |||||
margin-left: 15%; | |||||
} | |||||
</style> |
@ -0,0 +1,123 @@ | |||||
<template> | |||||
<view class="container"> | |||||
<!-- 用户信息 --> | |||||
<view class="user-info"> | |||||
<text class="username">李晓春</text> | |||||
</view> | |||||
<!-- 功能列表 --> | |||||
<view class="menu"> | |||||
<view class="menu-item" > | |||||
<image class="arrow" src="/static/arrow-right.png"></image> | |||||
<text>关于我们</text> | |||||
</view> | |||||
<view class="menu-item" > | |||||
<image class="arrow" src="/static/arrow-right.png"></image> | |||||
<text>修改密码</text> | |||||
</view> | |||||
<view class="menu-item"> | |||||
<image class="arrow" src="/static/arrow-right.png"></image> | |||||
<text>服务协议</text> | |||||
</view> | |||||
<view class="menu-item" > | |||||
<image class="arrow" src="/static/arrow-right.png"></image> | |||||
<text>隐私政策</text> | |||||
</view> | |||||
<view class="menu-item" @click="logout"> | |||||
<image class="arrow" src="/static/arrow-right.png"></image> | |||||
<text>退出登录</text> | |||||
</view> | |||||
</view> | |||||
</view> | |||||
</template> | |||||
<script> | |||||
export default { | |||||
methods: { | |||||
logout() { | |||||
uni.showModal({ | |||||
title: '提示', | |||||
content: '确定要退出登录吗?', | |||||
success: (res) => { | |||||
if (res.confirm) { | |||||
uni.showToast({ | |||||
title: '退出登录成功', | |||||
icon: 'success', | |||||
success: () => { | |||||
// 这里可以添加退出登录的逻辑,例如清除用户登录状态 | |||||
setTimeout(() => { | |||||
uni.navigateTo({ url: '/pages/index/index' }); | |||||
}, 1500); | |||||
} | |||||
}); | |||||
} | |||||
} | |||||
}); | |||||
} | |||||
} | |||||
}; | |||||
</script> | |||||
<style> | |||||
.container { | |||||
display: flex; | |||||
flex-direction: column; | |||||
height: 300vh; | |||||
background-color: #f5f5f5; | |||||
} | |||||
.user-info { | |||||
padding: 20px; | |||||
height: 200px; | |||||
background-color: #007aff; | |||||
color: #fff; | |||||
text-align: center; | |||||
} | |||||
.username { | |||||
font-size: 20px; | |||||
font-weight: bold; | |||||
margin: 0 auto; | |||||
line-height: 200px; | |||||
} | |||||
.menu { | |||||
flex: 1; | |||||
padding: 20px; | |||||
background-color: #fff; | |||||
} | |||||
.menu-item { | |||||
display: flex; | |||||
justify-content: space-between; | |||||
align-items: center; | |||||
padding: 15px 0; | |||||
border-bottom: 1px solid #eee; | |||||
} | |||||
.menu-item text { | |||||
font-size: 16px; | |||||
} | |||||
.arrow { | |||||
width: 20px; | |||||
height: 20px; | |||||
} | |||||
.footer { | |||||
display: flex; | |||||
justify-content: space-around; | |||||
padding: 10px; | |||||
background-color: #fff; | |||||
border-top: 1px solid #ccc; | |||||
} | |||||
.nav-item { | |||||
text-align: center; | |||||
} | |||||
.nav-item text { | |||||
font-size: 14px; | |||||
} | |||||
</style> |