|
|
@@ -1,7 +1,40 @@
|
|
|
<template>
|
|
|
<view class="page" :style="{'height':(h-th)+'px'}">
|
|
|
<c-nav-bar title="我的" bgColor="transparent" :titleStyle="titleStyle" :showIcon="false"></c-nav-bar>
|
|
|
- <view class="bg"></view>
|
|
|
+ <view class="bg" :style="{'padding-top':(mt+30)+'px'}">
|
|
|
+ <view class="account">
|
|
|
+ <image :src="avatar"></image>
|
|
|
+ <text>{{name}}</text>
|
|
|
+ <u-icon name="arrow-right" color="#ffffff" size="28"></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="orders box">
|
|
|
+ <view class="o_top">
|
|
|
+ <text>订单管理</text>
|
|
|
+ <view>
|
|
|
+ <text>全部</text>
|
|
|
+ <u-icon name="arrow-right" color="#999999" size="28"></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="o_menus">
|
|
|
+ <view v-for="(item,index) in menus" :key="index">
|
|
|
+ <image :src="item.img"></image>
|
|
|
+ <text>{{item.title}}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="menu box">
|
|
|
+ <text>酒店民宿信息</text>
|
|
|
+ <u-icon name="arrow-right" color="#999999" size="28"></u-icon>
|
|
|
+ </view>
|
|
|
+ <view class="menu box">
|
|
|
+ <text>房型管理</text>
|
|
|
+ <u-icon name="arrow-right" color="#999999" size="28"></u-icon>
|
|
|
+ </view>
|
|
|
+ <view class="menu box">
|
|
|
+ <text>预订二维码</text>
|
|
|
+ <u-icon name="arrow-right" color="#999999" size="28"></u-icon>
|
|
|
+ </view>
|
|
|
<Tabbar :tabbarIndex="3"></Tabbar>
|
|
|
</view>
|
|
|
</template>
|
|
|
@@ -14,7 +47,31 @@
|
|
|
fontSize: '34rpx',
|
|
|
fontWeight: "bold",
|
|
|
color: '#FFFFFF'
|
|
|
- }
|
|
|
+ },
|
|
|
+ avatar:'https://i.ringzle.com/file/20240107/d61321708599457bbcca1c089154e635.png',
|
|
|
+ name:'吴彦霖',
|
|
|
+ menus:[
|
|
|
+ {
|
|
|
+ img:'https://i.ringzle.com/file/20240107/83bca90dfb3f4b1fba36115dc7269219.png',
|
|
|
+ title:'待确认',
|
|
|
+ path:''
|
|
|
+ },
|
|
|
+ {
|
|
|
+ img:'https://i.ringzle.com/file/20240107/7e7825255bbc4d06ae5d75e7bb23db71.png',
|
|
|
+ title:'未支付',
|
|
|
+ path:''
|
|
|
+ },
|
|
|
+ {
|
|
|
+ img:'https://i.ringzle.com/file/20240107/c368a627821244929ab6477acb46fb15.png',
|
|
|
+ title:'已预订',
|
|
|
+ path:''
|
|
|
+ },
|
|
|
+ {
|
|
|
+ img:'https://i.ringzle.com/file/20240107/656b5cc9e9514a08a3f2abd86d86b4ca.png',
|
|
|
+ title:'已取消',
|
|
|
+ path:''
|
|
|
+ }
|
|
|
+ ]
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
@@ -31,9 +88,103 @@
|
|
|
overflow-y: auto;
|
|
|
.bg{
|
|
|
width: 100%;
|
|
|
- height: 412rpx;
|
|
|
+ height: 360rpx;
|
|
|
+ padding: 0 60rpx;
|
|
|
background: url(https://i.ringzle.com/file/20240107/fc66824bcef14a3b9e19f8b966a128c7.png) no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ position: relative;
|
|
|
+ z-index: 1;
|
|
|
+ .account{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ image{
|
|
|
+ width: 96rpx;
|
|
|
+ height: 96rpx;
|
|
|
+ }
|
|
|
+ text{
|
|
|
+ font-size: 40rpx;
|
|
|
+ font-family: PingFang SC, PingFang SC;
|
|
|
+ font-weight: 800;
|
|
|
+ color: #FFFFFF;
|
|
|
+ margin: 0 20rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .box{
|
|
|
+ width: calc(100% - 60rpx);
|
|
|
+ margin: 0 30rpx;
|
|
|
+ padding: 30rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 10rpx 10rpx 10rpx 10rpx;
|
|
|
+ }
|
|
|
+ .orders{
|
|
|
+ margin-top: -60rpx;
|
|
|
+ position: relative;
|
|
|
+ z-index: 2;
|
|
|
+ .o_top{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ &>text{
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-family: PingFang SC, PingFang SC;
|
|
|
+ font-weight: 800;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+ &>view{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ &>text{
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-family: PingFang SC, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #999999;
|
|
|
+ margin-right: 10rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .o_menus{
|
|
|
+ margin-top: 30rpx;
|
|
|
+ padding-top: 30rpx;
|
|
|
+ border-top: 1rpx solid #F1F1F1;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-around;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ &>view{
|
|
|
+ width: 25%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ image{
|
|
|
+ width: 64rpx;
|
|
|
+ height: 64rpx;
|
|
|
+ }
|
|
|
+ text{
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-family: PingFang SC, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #1F2425;
|
|
|
+ margin-top: 10rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .menu{
|
|
|
+ margin-top: 30rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ text{
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-family: PingFang SC, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</style>
|
