| @ -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> | |||