改版

project.config.json

@@ -93,8 +93,8 @@
                 },
                 {
                     "id": -1,
-                    "name": "房间余额",
-                    "pathName": "/pages/feeDetail",
+                    "name": "我的",
+                    "pathName": "/pages/my",
                     "query": "",
                     "scene": null
                 },

src/main.js

@@ -54,26 +54,26 @@ export default {
             'pages/complaint'
         ],
         tabBar: {
-            color: '#584C43',
-            selectedColor: '#00BA64',
+            color: '#C2C2C2',
+            selectedColor: '#333333',
             list: [
                 {
                     pagePath: 'pages/banner',
                     text: '首页',
-                    iconPath: 'native/tabbar/homepage.png',
-                    selectedIconPath: 'native/tabbar/homepage_fill.png'
+                    iconPath: 'native/tabbar/tab1-2.png',
+                    selectedIconPath: 'native/tabbar/tab1-1.png'
                 },
                 {
                     pagePath: 'pages/home',
                     text: '团队房间',
-                    iconPath: 'native/tabbar/tabbar_icon_01@3x (1).png',
-                    selectedIconPath: 'native/tabbar/tabbar_icon_01@3x.png'
+                    iconPath: 'native/tabbar/tab2-2.png',
+                    selectedIconPath: 'native/tabbar/tab2-1.png'
                 },
                 {
                     pagePath: 'pages/my',
                     text: '我的',
-                    iconPath: 'native/tabbar/tabbar_icon_02@3x.png',
-                    selectedIconPath: 'native/tabbar/tabbar_icon_02@3x (1).png'
+                    iconPath: 'native/tabbar/tab3-2.png',
+                    selectedIconPath: 'native/tabbar/tab3-1.png'
                 }
             ]
         },
@@ -84,6 +84,7 @@ export default {
             'van-tab': '/vant/tab/index',
             'van-notice-bar': '/vant/notice-bar/index',
             'van-icon': '/vant/icon/index',
+            'van-grid ': '/vant/grid/index',
             'van-grid-item ': '/vant/grid-item/index',
             'van-count-down': '/vant/count-down/index',
             'van-dialog': '/vant/dialog/index',

src/pages/banner.vue

@@ -1,27 +1,56 @@
 <config>
 {
-    "navigationStyle": "custom",
-    "navigationBarTextStyle": "white",
+    "navigationBarTextStyle": "black",
     "backgroundColorTop":'#00ba64',
     "backgroundColorBottom":'#f5f7fa',
 }
 </config>
 <template>
     <div class="app">
-        <img src="../native/yajing-png-bg@3x.png" alt="" class="bg" />
-        <swiper class="my-swiper" indicator-dots autoplay :interval="5000" :duration="500">
-            <block v-for="(item, index) in banners" :key="index">
-                <swiper-item>
-                    <img class="banner-img" :src="item.pic" alt="" />
-                </swiper-item>
-            </block>
-        </swiper>
+        <div class="swiper-content">
+            <swiper class="my-swiper" indicator-dots autoplay :interval="5000" :duration="500">
+                <block v-for="(item, index) in banners" :key="index">
+                    <swiper-item>
+                        <img class="banner-img" :src="item.pic" alt="" />
+                    </swiper-item>
+                </block>
+            </swiper>
+            <div class="search">
+                <icon class="icon-small" type="search" size="12" color="#000"></icon>
+                <span>输入搜索内容</span>
+            </div>
+        </div>
+        <div class="grids">
+            <div class="grid">
+                <img src="../native/ic-1.png" alt="" />
+                <div class="text1">白领公寓</div>
+            </div>
+            <div class="grid">
+                <img src="../native/ic-2.png" alt="" />
+                <div class="text1">蓝领公寓</div>
+            </div>
+            <div class="grid">
+                <img src="../native/ic-3.png" alt="" />
+                <div class="text1">企业直租</div>
+            </div>
+            <div class="grid">
+                <img src="../native/ic-4.png" alt="" />
+                <div class="text1">商务合作</div>
+            </div>
+        </div>
         <div class="list">
             <div class="list-title">
-                门店详情
+                <img src="../native/ic-5.png" alt="" />
+                <span>门店详情</span>
             </div>
             <div class="room" v-for="(item, index) in list" :key="index">
-                <img :src="item.pic" alt="" class="room-img" />
+                <div class="room-img-content">
+                    <img :src="item.pic" alt="" class="room-img" />
+                    <div class="price">
+                        ¥{{ item.money }}
+                        <span>/月起</span>
+                    </div>
+                </div>
                 <div class="room-info">
                     <div class="text1">{{ item.storeName }}</div>
                     <div class="text2">
@@ -29,9 +58,11 @@
                             <div>
                                 {{ item.address }}
                             </div>
-                            <div>联系电话：{{ item.phone }}</div>
                         </div>
-                        <div class="price">{{ item.money }}元/月起</div>
+                        <div class="phone" @click="makePhone(item.phone)">
+                            <img src="../native/phone.png" alt="" />
+                            <span>电话</span>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -65,6 +96,11 @@ export default {
             this.$http.get('/clientStoreInfo/all').then(res => {
                 this.list = res.content;
             });
+        },
+        makePhone(phone) {
+            wx.makePhoneCall({
+                phoneNumber: phone
+            });
         }
     }
 };
@@ -72,12 +108,11 @@ export default {
 
 <style lang="less" scoped>
 .app {
-    background: #f5f7fa !important;
+    background: #fff !important;
     // padding-bottom: 200px;
     padding-bottom: 50px;
     min-height: 100vh;
     position: relative;
-    padding-top: 66px;
     .bg {
         width: 100%;
         height: 220px;
@@ -88,22 +123,104 @@ export default {
     }
 }
 .my-swiper {
-    margin: 16px;
-    border-radius: 16px;
     overflow: hidden;
-    height: 160px;
+    height: 60vw;
     .banner-img {
-        height: 160px;
+        height: 60vw;
         width: 100%;
     }
 }
+.swiper-content {
+    position: relative;
+    .search {
+        position: absolute;
+        left: 16px;
+        right: 16px;
+        bottom: 50px;
+        height: 54px;
+        background: rgba(255, 255, 255, 0.49);
+        border-radius: 15px;
+        backdrop-filter: blur(4px);
+        .flex();
+        font-size: 12px;
+        color: #666666;
+        line-height: 17px;
+        padding: 0 16px;
+        .icon-small {
+            width: 14px;
+            height: 14px;
+            display: block;
+        }
+        span {
+            margin-left: 14px;
+        }
+    }
+}
+
+.grids {
+    display: flex;
+    align-items: center;
+    background-color: #fff;
+    transform: translateY(-30px);
+    border-radius: 30px 30px 0px 0px;
+    padding-top: 30px;
+    .grid {
+        width: 25%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        img {
+            width: 45px;
+            height: 45px;
+        }
+        .text1 {
+            font-size: 12px;
+            color: #666666;
+            line-height: 17px;
+            margin-top: 10px;
+        }
+    }
+}
+
 .list {
-    padding: 16px;
+    padding: 0 16px 16px;
     .list-title {
-        font-size: 18px;
+        font-size: 15px;
         font-weight: bold;
         color: #000000;
         line-height: 24px;
+        display: flex;
+        align-items: center;
+        img {
+            width: 19px;
+            height: 15px;
+            margin-right: 9px;
+        }
+    }
+    .room-img-content {
+        position: relative;
+        .price {
+            position: absolute;
+            right: 0;
+            bottom: 0;
+            width: 108px;
+            height: 36px;
+            background: linear-gradient(180deg, #ffbc4c 0%, #ff8725 100%);
+            border-radius: 15px 0px 15px 0px;
+            font-size: 16px;
+            font-weight: bold;
+            color: #ffffff;
+            line-height: 22px;
+            letter-spacing: 1px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            span {
+                font-size: 12px;
+                transform: scale(0.8);
+                margin-top: 4px;
+            }
+        }
     }
     .room-img {
         width: 100%;
@@ -134,11 +251,21 @@ export default {
                 color: #939599;
                 line-height: 18px;
             }
-            .price {
-                font-size: 15px;
-                font-weight: bold;
-                color: #00ba64;
-                line-height: 21px;
+
+            .phone {
+                display: flex;
+                align-items: center;
+                img {
+                    width: 13px;
+                    height: 16px;
+                    margin-right: 5px;
+                }
+                span {
+                    font-size: 13px;
+                    font-weight: bold;
+                    color: #444444;
+                    line-height: 18px;
+                }
             }
         }
     }

src/pages/home.vue

@@ -8,72 +8,84 @@
 </config>
 <template>
     <div class="app">
-        <van-sticky :offset-top="0">
-            <div class="top-img">
-                <div class="title">{{ list.storeName || '暂无门店' }}</div>
+        <div class="top-img">
+            <img class="top-bg" mode="widthFix" src="../native/bg-2.png" alt="" />
+            <div class="text">
+                <div class="title">
+                    <img src="../native/shop.png" alt="" />
+                    <span>{{ list.storeName || '暂无门店' }}</span>
+                </div>
                 <div class="info">{{ list.roomName + '室' }}</div>
-                <div class="background">
-                    <img class="img" src="../static/imgs/info_img_tuanduiyucun@3x.png" alt="" />
-                    <div class="money">
-                        <div>
-                            <div class="money1">
-                                <img class="money-img" src="../native/icon_jiage@3x (1).png" alt="" />
-                                <div class="money2">{{ list.balance || 0 }}</div>
-                            </div>
-                            <div class="text1">总预存金额</div>
-                        </div>
-                        <div class="btn">
-                            <div class="btn1" @click="navigateTo('/pages/walletdetails?type=ROOM')">提现</div>
-                            <div class="btn2" @click="navigateTo('/pages/recharge?type=ROOM')">充值</div>
-                        </div>
+            </div>
+        </div>
+        <div class="continer">
+            <div class="background">
+                <div class="money">
+                    <div class="text1">
+                        <img src="../native/yucun.png" alt="" />
+                        <span>总预存金额</span>
+                    </div>
+                    <div class="money1">
+                        <div class="text1">¥</div>
+                        <div class="money2">{{ list.balance || 0 }}</div>
                     </div>
                 </div>
-            </div>
-        </van-sticky>
-        <div class="content">
-            <div class="box">
-                <img class="con-img" src="../static/imgs/fangjian-icon-ruzhu@3x.png" alt="" />
-                <div class="name">入住时间</div>
-            </div>
-            <div class="time">{{ list.checkinTime }} 至 {{ list.planOutTime }}</div>
-            <div class="border"></div>
-            <div class="box">
-                <img class="con-img" src="../static/imgs/fangjian-icon-fangxing@3x.png" alt="" />
-                <div class="name" v-if="list.checkout">已退房</div>
-                <div v-if="!list.checkout" class="box">
-                    <div class="name1">房间类型</div>
-                    <div class="name">{{ list.roomType || '-' }}</div>
-                    <img class="con-img con-img2" src="../static/imgs/fangjian-icon-yiruzhu@3x.png" alt="" />
-                    <div class="name1">已入住</div>
-                    <div class="name">{{ list.checkinNumber ? list.checkinNumber + '人' : '-' }}</div>
+                <div class="btn">
+                    <div class="btn1" @click="navigateTo('/pages/walletdetails?type=ROOM')">提现</div>
+                    <div class="btn2" @click="navigateTo('/pages/recharge?type=ROOM')">充值</div>
                 </div>
             </div>
-            <div class="border"></div>
-            <div class="box">
-                <img class="con-img" src="../static/imgs/fangjian-icon-zujing@3x.png" alt="" />
-                <div style="display: flex;align-items: center;">
-                    <div class="name1">{{ rateType }}</div>
-                    <div class="name">{{ rate }}</div>
+
+            <div class="content">
+                <div class="content-title">
+                    <img src="../native/room.png" alt="" />
+                    <span>房间信息</span>
                 </div>
-            </div>
-            <div class="border" v-if="list.checkInType !== 'INDIVIDUAL'"></div>
-            <div class="box" v-if="list.checkInType !== 'INDIVIDUAL'">
-                <img class="con-img" src="../static/imgs/fangjian-icon-tuandui@3x.png" alt="" />
-                <div class="name1">团队名称</div>
-                <div class="name">{{ teamName }}</div>
-            </div>
-        </div>
-        <div class="content1" v-if="list">
-            <div class="con-box" @click="navigateTo('/pages/wallet')">
-                <div class="title1">房间账单</div>
-                <div class="right">
-                    <div class="text1">历史记录</div>
-                    <img class="img-r" src="../native/icon_inter_huangse@3x.png" alt="" />
+                <div class="content-info">
+                    <img src="../native/box1.png" alt="" />
+                    <span class="text1">入住时间</span>
+                    <span class="text2">{{ list.checkinTime }}</span>
+                </div>
+                <div class="content-info">
+                    <img src="../native/box2.png" alt="" />
+                    <span class="text1">退房时间</span>
+                    <span class="text2">{{ list.planOutTime }}</span>
+                </div>
+                <div class="content-info">
+                    <img src="../native/box3.png" alt="" />
+                    <span class="text1">房间类型</span>
+                    <span class="text2">{{ list.roomType || '-' }}</span>
+                </div>
+                <div class="content-info">
+                    <img src="../native/box4.png" alt="" />
+                    <span class="text1">已入住</span>
+                    <span class="text2">{{ list.checkinNumber ? list.checkinNumber + '人' : '-' }}</span>
+                </div>
+                <div class="content-info">
+                    <img src="../native/box5.png" alt="" />
+                    <span class="text1">{{ rateType }}</span>
+                    <span class="text2">{{ rate }}</span>
+                </div>
+                <div class="content-info" v-if="list.checkInType !== 'INDIVIDUAL'">
+                    <img src="../native/box3.png" alt="" />
+                    <span class="text1">团队名称</span>
+                    <span class="text2">{{ teamName }}</span>
                 </div>
             </div>
-            <div class="border"></div>
-            <div class="text">每月账单费用会自动从总预存余额中扣除，当显示为负数时即为欠费，请及时充值缴纳</div>
-            <!-- <div class="box" @click="navigateTo('/pages/waterDetails')">
+
+            <div class="content1" v-if="list">
+                <div class="con-box" @click="navigateTo('/pages/wallet')">
+                    <div class="title1">
+                        <img src="../native/zhangdan.png" alt="" />
+                        <span>房间账单</span>
+                    </div>
+                    <div class="right">
+                        <div class="text1">历史记录</div>
+                        <img class="img-r" src="../native/inter.png" alt="" />
+                    </div>
+                </div>
+                <div class="text">*每月账单费用会自动从总预存余额中扣除，当显示为负数时即为欠费，请及时充值缴纳</div>
+                <!-- <div class="box" @click="navigateTo('/pages/waterDetails')">
                 <div class="box1">
                     <img class="img" src="../static/imgs/icon-shuifei@3x.png" alt="" />
                     <div>
@@ -84,15 +96,15 @@
                 <div class="btn">已缴费</div>
             </div>
             <div class="bor"></div> -->
-            <div class="box" @click="navigateTo('/pages/electricDetails')">
-                <div class="box1">
-                    <img class="img" src="../native/icon-shuifei@3x.png" alt="" />
-                    <div>
-                        <div class="text1">电费</div>
-                        <div class="text2">充后电量：{{ ammeterInfo.rest }}度</div>
+                <div class="box" @click="navigateTo('/pages/electricDetails')">
+                    <div class="box1">
+                        <img class="img" src="../native/dianfei.png" alt="" />
+                        <div>
+                            <div class="text2">电费 (充后电量：{{ ammeterInfo.rest }}度)</div>
+                        </div>
                     </div>
+                    <div class="btn2"><span>去缴费</span></div>
                 </div>
-                <div class="btn2"><span>去缴费</span></div>
             </div>
         </div>
     </div>
@@ -166,16 +178,31 @@ export default {
     min-height: 100vh;
     .top-img {
         width: 100%;
-        background: #00ba64;
-        height: 242px;
         border-radius: 2px;
+        position: sticky;
+        top: 0;
+        .top-bg {
+            width: 100%;
+            display: block;
+        }
+        .text {
+            position: absolute;
+            top: 56px;
+            left: 0;
+        }
         .title {
             padding-left: 20px;
             font-size: 24px;
             font-weight: bold;
             color: #ffffff;
             line-height: 34px;
-            padding-top: 54px;
+            display: flex;
+            align-items: center;
+            img {
+                width: 20px;
+                height: 20px;
+                margin-right: 10px;
+            }
         }
         .info {
             min-width: 100px;
@@ -186,82 +213,83 @@ export default {
             height: 36px;
             background: rgba(255, 255, 255, 0.16);
             border-radius: 8px;
-            margin: 5px 0 20px 20px;
+            margin: 20px 0 10px 50px;
             padding: 0 10px;
             display: inline-block;
         }
-        .background {
-            position: relative;
+    }
+    .background {
+        position: relative;
+        height: 129px;
+        background: linear-gradient(98deg, #ffe9bb 0%, #efcb8d 100%);
+        border-radius: 20px;
+        margin: 0 30px;
+        padding: 20px;
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        .money {
             display: flex;
-            .img {
-                height: 100px;
-                width: 100%;
-            }
-            .money {
-                position: absolute;
-                width: 81%;
+            justify-content: space-between;
+            .text1 {
+                font-size: 13px;
+                color: #512b18;
+                line-height: 18px;
                 display: flex;
-                justify-content: space-between;
-                margin: 16px 0 0 35px;
-                .money1 {
-                    .flex();
-                    margin-bottom: 3px;
-                    .money2 {
-                        font-size: 26px;
-                        font-family: DIN-Bold, DIN;
-                        font-weight: bold;
-                        color: #ff7f1f;
-                        line-height: 31px;
-                    }
-                    .money-img {
-                        width: 11px;
-                        height: 13px;
-                        margin-top: 6px;
-                    }
+                img {
+                    width: 22px;
+                    height: 18px;
+                    margin-right: 4px;
                 }
+            }
+            .money1 {
+                display: flex;
+                align-items: center;
                 .text1 {
-                    font-size: 13px;
-                    font-weight: normal;
-                    color: #a88e63;
-                    line-height: 18px;
+                    font-size: 16px;
+                    margin-top: 5px;
+                    margin-right: 3px;
                 }
-                .btn {
-                    display: flex;
-                    align-items: center;
-                    .btn1 {
-                        width: 72px;
-                        height: 26px;
-                        line-height: 26px;
-                        text-align: center;
-                        font-size: 14px;
-                        font-weight: bold;
-                        color: #ff7f1f;
-                        background: rgba(255, 255, 255, 0.6);
-                        border-radius: 13px;
-                        border: 1px solid #ffffff;
-                        margin: 0 20px 0 48px;
-                    }
-                    .btn2 {
-                        width: 72px;
-                        height: 26px;
-                        line-height: 26px;
-                        text-align: center;
-                        font-size: 14px;
-                        background: #ffffff;
-                        border-radius: 13px;
-                        font-weight: bold;
-                        color: #ff7f1f;
-                    }
+                .money2 {
+                    font-size: 26px;
+                    font-weight: bold;
+                    color: #522c17;
+                    line-height: 22px;
                 }
             }
         }
+
+        .btn {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            .btn1 {
+                width: 110px;
+                height: 35px;
+                line-height: 35px;
+                text-align: center;
+                font-size: 14px;
+                color: #522c17;
+                border-radius: 35px;
+                border: 1px solid #512b18;
+            }
+            .btn2 {
+                width: 110px;
+                height: 35px;
+                line-height: 35px;
+                text-align: center;
+                font-size: 14px;
+                background: #512b18;
+                border-radius: 35px;
+                color: #f9dda9;
+                margin-left: 27px;
+            }
+        }
     }
     .content {
-        padding: 20px 12px;
+        padding: 20px 19px;
         background: #ffffff;
-        box-shadow: 0px 2px 4px 0px rgba(1, 168, 91, 0.04);
-        border-radius: 12px;
-        margin: 8px 20px 0;
         .box {
             display: flex;
             align-items: center;
@@ -301,40 +329,48 @@ export default {
         margin: 16px 0;
     }
     .content1 {
-        margin: 20px;
-        padding: 20px 12px;
+        padding: 20px;
         background: #ffffff;
-        box-shadow: 0px 2px 4px 0px rgba(1, 168, 91, 0.04);
         border-radius: 12px;
         .con-box {
             .flex();
             justify-content: space-between;
             .title1 {
-                font-size: 16px;
+                font-size: 15px;
                 font-weight: bold;
-                color: #00ba64;
-                line-height: 22px;
+                color: #000000;
+                line-height: 21px;
+                display: flex;
+                align-items: center;
+                img {
+                    width: 12px;
+                    height: 18px;
+                    margin-right: 15px;
+                }
             }
             .right {
                 .flex();
                 .text1 {
-                    font-size: 13px;
-                    font-weight: normal;
-                    color: #00ba64;
-                    line-height: 18px;
+                    font-size: 12px;
+                    color: #8c8c8c;
+                    line-height: 17px;
+                    margin-right: 7px;
                 }
                 .img-r {
-                    width: 24px;
-                    height: 24px;
+                    width: 7px;
+                    height: 12px;
                 }
             }
         }
         .text {
+            background: #fbfbfb;
+            border-radius: 4px;
+            padding: 10px 12px;
             font-size: 12px;
             font-weight: normal;
             color: #aaacad;
             line-height: 17px;
-            padding-bottom: 30px;
+            margin: 15px 15px 15px 27px;
         }
         .bor {
             height: 1px;
@@ -379,17 +415,65 @@ export default {
             }
             .btn2 {
                 width: 66px;
-                height: 32px;
-                background: #00ba64;
-                line-height: 32px;
+                height: 26px;
+                line-height: 26px;
+                background: linear-gradient(180deg, #ffbc4c 0%, #ff8725 100%);
+                border-radius: 15px;
                 text-align: center;
                 font-size: 12px;
                 color: #fff;
-                border-radius: 18px;
-                opacity: 0.76;
-                font-weight: bold;
             }
         }
     }
 }
+
+.continer {
+    background: #ffffff;
+    border-radius: 30px 30px 0px 0px;
+    transform: translateY(-30px);
+    padding: 30px 0;
+}
+.content-title {
+    display: flex;
+    align-items: center;
+    height: 40px;
+    img {
+        width: 17px;
+        height: 17px;
+        margin-right: 12px;
+    }
+    span {
+        font-size: 15px;
+        font-weight: bold;
+        color: #000000;
+        line-height: 21px;
+    }
+}
+
+.content-info {
+    display: flex;
+    align-items: center;
+    padding-left: 29px;
+    img {
+        width: 32px;
+        height: 32px;
+    }
+    .text1 {
+        font-size: 13px;
+        font-weight: bold;
+        color: #999999;
+        line-height: 18px;
+        flex-grow: 1;
+        margin: 0 10px;
+    }
+    .text2 {
+        font-size: 13px;
+        font-weight: bold;
+        color: #333333;
+        line-height: 18px;
+    }
+}
+.content-info + .content-info {
+    margin-top: 15px;
+}
 </style>

src/pages/my.vue

@@ -1,88 +1,101 @@
 <config>
 {
     "navigationBarTitleText": "",
-    "backgroundColorTop":'#f5f7fa',
-    "backgroundColorBottom":'#f5f7fa',
-    "navigationBarBackgroundColor": "#f5f7fa",
+    "backgroundColorTop":'#ffffff',
+    "backgroundColorBottom":'#ffffff',
+    "navigationBarBackgroundColor": "#ffffff",
 }
 </config>
 <template>
     <div class="container">
-        <div class="top">
-            <img class="avatar" v-if="userInfo" :src="userInfo.avatar" alt="" />
-            <div class="right">
-                <div>
-                    <div class="txt1" v-if="userInfo">{{ userInfo.realName }}</div>
-                    <div class="idNo" v-if="userInfo">
-                        <img class="id-img" src="../native/icon_login_shenfenzheng@3x.png" alt="" />
-                        <div class="txt2">{{ idNo }}</div>
+        <div class="top-content" v-if="userInfo">
+            <img class="top-bg" src="../native/bg-3.png" alt="" />
+
+            <div class="top">
+                <img class="avatar" :src="userInfo.avatar" alt="" />
+                <div class="right">
+                    <div>
+                        <div class="txt1">{{ userInfo.realName || '未登录' }}</div>
+                        <div class="idNo">
+                            <img class="id-img" src="../native/no.png" alt="" />
+                            <div class="txt2">{{ idNo || '********' }}</div>
+                        </div>
                     </div>
+                    <!-- <img class="setting" src="../native/tabbar/icon_bianji@3x.png" alt="" /> -->
                 </div>
-                <!-- <img class="setting" src="../native/tabbar/icon_bianji@3x.png" alt="" /> -->
             </div>
         </div>
-        <div class="background">
-            <img class="img" src="../native/tabbar/info_img_gerenyue@3x.png" alt="" />
-            <div class="money">
-                <div>
-                    <div class="money1">
-                        <img class="money-img" src="../native/icon_jiage@3x (2).png" alt="" />
-                        <div class="money2">{{ list.money || 0 }}</div>
-                    </div>
-                    <div class="text1">个人账号余额</div>
-                </div>
-                <div class="btn">
-                    <div class="btn1" @click="navigateTo('/pages/walletdetails?type=PERSON')">提现</div>
-                    <div class="btn2" @click="navigateTo('/pages/recharge?type=PERSON')">{{ btnText }}</div>
-                </div>
-                <div v-if="list.depositStatus === 'UNPAID'" class="deposit" @click="navigateTo('/pages/deposit')">
-                    房租押金&nbsp;<span><span class="span">¥</span>{{ list.depositAmount || 0 }}</span
-                    >&nbsp;去缴费
-                    <img style="width:24px;height:24px;margin-top:1px" src="../native/icon_inter@3x.png" alt="" />
-                </div>
-                <div
-                    class="deposit deposit1"
-                    v-if="list.depositStatus === 'PAID' || list.depositStatus === 'REFUNDING'"
-                >
-                    <div class="deposit-money">
-                        房租押金&nbsp;<span><span class="span">¥</span>{{ list.depositAmount || 0 }}</span
-                        >&nbsp;已交
+        <div class="content">
+            <div class="background">
+                <div class="money">
+                    <div class="money-top">
+                        <div class="text1">
+                            <img src="../native/my1.png" alt="" />
+                            <span>个人账号余额</span>
+                        </div>
+                        <div class="money1">
+                            <div class="money-icon">¥</div>
+                            <div class="money2">{{ list.money || 0 }}</div>
+                        </div>
                     </div>
-                    <div class="jump" @click="show = true">
-                        <div>申请退回</div>
-                        <img class="jump-img" src="../native/icon_inter@3x.png" alt="" />
+                    <div class="btn">
+                        <div class="btn1" @click="navigateTo('/pages/walletdetails?type=PERSON')">提现</div>
+                        <div class="btn2" @click="navigateTo('/pages/recharge?type=PERSON')">{{ btnText }}</div>
                     </div>
                 </div>
-                <div v-if="list.depositStatus === 'REFUNDED'" class="deposit" @click="navigateTo('/pages/deposit')">
+            </div>
+            <div v-if="list.depositStatus === 'UNPAID'" class="deposit" @click="navigateTo('/pages/deposit')">
+                房租押金&nbsp;<span><span class="span">¥</span>{{ list.depositAmount || 0 }}</span
+                >&nbsp;去缴费
+                <img style="width:7px;height:12px;margin-top:1px" src="../native/icon_inter.png" alt="" />
+            </div>
+            <div class="deposit deposit1" v-if="list.depositStatus === 'PAID' || list.depositStatus === 'REFUNDING'">
+                <div class="deposit-money">
                     房租押金&nbsp;<span><span class="span">¥</span>{{ list.depositAmount || 0 }}</span
-                    >&nbsp;已退回
-                    <img style="width:24px;height:24px;margin-top:1px" src="../native/icon_inter@3x.png" alt="" />
+                    >&nbsp;已交
                 </div>
-            </div>
-        </div>
-        <!-- v-if="roomInfo && roomInfo.checkout" -->
-        <div class="content1">
-            <div class="title1">我的服务</div>
-            <div class="border"></div>
-            <div class="box">
-                <div class="div" @click="navigateTo('/pages/repairReport')">
-                    <img class="tit-img" src="../native/tabbar/wode_icon_baoxiu@3x.png" alt="" />
-                    <div class="text">保修申请</div>
+                <div class="jump" @click="show = true">
+                    <div>申请退回</div>
+                    <img class="jump-img" src="../native/icon_inter.png" alt="" />
                 </div>
-                <div class="div" @click="navigateTo('/pages/cleanReport')">
-                    <img class="tit-img" src="../native/tabbar/wode_icon_dasao@3x.png" alt="" />
-                    <div class="text">打扫申请</div>
+            </div>
+            <div v-if="list.depositStatus === 'REFUNDED'" class="deposit" @click="navigateTo('/pages/deposit')">
+                房租押金&nbsp;<span><span class="span">¥</span>{{ list.depositAmount || 0 }}</span
+                >&nbsp;已退回
+                <img style="width:7px;height:12px;margin-top:1px" src="../native/icon_inter.png" alt="" />
+            </div>
+            <!-- v-if="roomInfo && roomInfo.checkout" -->
+            <div class="content1">
+                <div class="title1">
+                    <img src="../native/fuwu.png" alt="" />
+                    <span>我的服务</span>
                 </div>
-                <!-- <div class="div" @click="navigateTo('/pages/complaint')">
+                <div class="box">
+                    <div class="div" @click="navigateTo('/pages/repairReport')">
+                        <img class="tit-img" src="../native/my0.png" alt="" />
+                        <div class="text">保修申请</div>
+                        <img style="width:7px;height:12px" src="../native/icon_inter.png" alt="" />
+                    </div>
+                    <div class="border"></div>
+                    <div class="div" @click="navigateTo('/pages/cleanReport')">
+                        <img class="tit-img" src="../native/my2.png" alt="" />
+                        <div class="text">打扫申请</div>
+                        <img style="width:7px;height:12px" src="../native/icon_inter.png" alt="" />
+                    </div>
+                    <div class="border"></div>
+                    <!-- <div class="div" @click="navigateTo('/pages/complaint')">
                     <img class="tit-img" src="../native/tabbar/wode_icon_tousu@3x.png" alt="" />
                     <div class="text">投诉/建议</div>
                 </div> -->
-                <div class="div" @click="navigateTo('/pages/help')">
-                    <img class="tit-img" src="../native/tabbar/wode_icon_shouming@3x.png" alt="" />
-                    <div class="text">帮助说明</div>
+                    <div class="div" @click="navigateTo('/pages/help')">
+                        <img class="tit-img" src="../native/my3.png" alt="" />
+                        <div class="text">帮助说明</div>
+                        <img style="width:7px;height:12px" src="../native/icon_inter.png" alt="" />
+                    </div>
                 </div>
             </div>
         </div>
+
         <van-dialog
             use-slot
             :show="show"
@@ -182,41 +195,53 @@ export default {
 .container {
     background: #f5f7fa;
     height: 100vh;
-
+    .top-content {
+        .top-bg {
+            width: 100%;
+            height: 158px;
+            display: block;
+        }
+    }
     .top {
         display: flex;
         align-items: center;
+        position: absolute;
+        height: 120px;
+        left: 0;
+        right: 0;
+        top: 0;
+        padding: 0 30px;
         .avatar {
-            width: 80px;
-            height: 80px;
-            border-radius: 50%;
-            margin: 0 16px;
+            width: 60px;
+            height: 60px;
+            border-radius: 10px;
         }
         .right {
             display: flex;
             align-items: center;
             justify-content: space-between;
-            width: 66.5%;
+            margin-left: 20px;
             .txt1 {
                 font-size: 21px;
                 font-weight: bold;
-                color: #000000;
+                color: #ffffff;
                 line-height: 29px;
             }
             .idNo {
                 display: flex;
                 align-items: center;
-                margin-top: 6px;
+                margin-top: 12px;
                 .id-img {
-                    width: 24px;
-                    height: 24px;
+                    width: 18px;
+                    height: 15px;
                     margin-right: 4px;
                 }
                 .txt2 {
-                    font-size: 14px;
+                    font-size: 16px;
                     font-weight: bold;
-                    color: #000000;
-                    line-height: 20px;
+                    color: #ffffff;
+                    line-height: 22px;
+                    margin-left: 10px;
                 }
             }
             .setting {
@@ -228,20 +253,21 @@ export default {
     .border {
         height: 1px;
         background: #f5f7fa;
-        margin: 16px 0;
     }
     .background {
         position: relative;
-        display: flex;
-        margin: 28px 20px 20px;
-        .img {
-            height: 128px;
-            width: 100%;
+        margin: 0 20px 20px;
+        padding: 20px;
+        background: linear-gradient(98deg, #fdf0d5 0%, #fae9cd 100%);
+        border-radius: 20px;
+        .money-top {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
         }
         .money {
-            position: absolute;
             display: flex;
-            margin: 16px 0 0 16px;
+            flex-direction: column;
             .money1 {
                 .flex();
                 margin-bottom: 3px;
@@ -249,9 +275,14 @@ export default {
                     font-size: 26px;
                     font-family: DIN-Bold, DIN;
                     font-weight: bold;
-                    color: #fff;
+                    color: #000000;
                     line-height: 31px;
                 }
+                .money-icon {
+                    font-size: 13px;
+                    margin-top: 6px;
+                    margin-right: 4px;
+                }
                 .money-img {
                     width: 11px;
                     height: 13px;
@@ -259,61 +290,46 @@ export default {
                 }
             }
             .text1 {
-                font-size: 13px;
-                font-weight: normal;
-                color: #ffffff;
-                line-height: 18px;
+                display: flex;
+                align-items: center;
+                img {
+                    width: 23px;
+                    height: 23px;
+                }
+                span {
+                    font-size: 13px;
+                    font-weight: bold;
+                    color: rgba(0, 0, 0, 0.5);
+                    line-height: 18px;
+                    margin-left: 2px;
+                }
             }
             .btn {
                 display: flex;
                 align-items: center;
+                justify-content: center;
+                margin-top: 14px;
                 .btn1 {
-                    width: 72px;
-                    height: 26px;
+                    width: 110px;
+                    height: 35px;
                     background: rgba(255, 255, 255, 0.33);
-                    border-radius: 13px;
-                    border: 1px solid #ffffff;
-                    font-weight: bold;
-                    line-height: 26px;
+                    border-radius: 18px;
+                    border: 1px solid #f4871f;
+                    line-height: 35px;
                     text-align: center;
-                    color: #ffffff;
-                    margin: 0 20px 0 56px;
+                    color: #f4871f;
+                    font-size: 14px;
                 }
                 .btn2 {
-                    width: 72px;
-                    height: 26px;
-                    background: #ffffff;
-                    font-weight: bold;
-                    line-height: 26px;
+                    width: 110px;
+                    height: 35px;
+                    background: #f4871f;
+                    line-height: 35px;
                     text-align: center;
-                    color: #5d7dff;
-                    border-radius: 13px;
-                }
-            }
-        }
-        .deposit {
-            position: absolute;
-            top: 80px;
-            left: 80px;
-            font-size: 13px;
-            .flex();
-            justify-content: space-between;
-            font-weight: bold;
-            color: #ffffff;
-            line-height: 18px;
-            &.deposit1 {
-                left: 0;
-                width: 100%;
-            }
-            .deposit-money {
-                .flex();
-            }
-            .jump {
-                .flex();
-                .jump-img {
-                    width: 24px;
-                    height: 24px;
-                    margin: 2px 0 0 2px;
+                    color: #ffffff;
+                    border-radius: 18px;
+                    margin-left: 30px;
+                    font-size: 14px;
                 }
             }
         }
@@ -329,37 +345,40 @@ export default {
         }
     }
     .content1 {
-        margin: 20px;
-        padding: 20px 12px;
+        padding: 30px 20px 20px;
         background: #ffffff;
         box-shadow: 0px 2px 4px 0px rgba(1, 168, 91, 0.04);
-        border-radius: 12px;
+        border-radius: 30px 30px 0px 0px;
         .title1 {
             font-size: 18px;
             font-weight: bold;
             color: #000000;
             line-height: 25px;
+            display: flex;
+            align-items: center;
+            img {
+                width: 13px;
+                height: 16px;
+                margin-right: 13px;
+            }
         }
         .box {
-            width: 100%;
-            display: flex;
-            justify-content: space-between;
-            flex-wrap: wrap;
-            margin: 0 14px;
+            margin: 0 14px 0 27px;
             .div {
-                margin-right: 27px;
-                text-align: center;
+                display: flex;
+                align-items: center;
+                padding: 15px 0;
                 .tit-img {
                     width: 36px;
                     height: 36px;
-                    margin-bottom: 6px;
                 }
                 .text {
                     font-size: 14px;
                     font-weight: normal;
-                    color: #000000;
+                    color: #666666;
                     line-height: 20px;
-                    margin-bottom: 25px;
+                    margin-left: 15px;
+                    flex-grow: 1;
                 }
             }
         }
@@ -384,4 +403,40 @@ export default {
         }
     }
 }
+
+.deposit {
+    font-size: 13px;
+    .flex();
+    justify-content: space-between;
+    font-weight: bold;
+    color: #333333;
+    line-height: 18px;
+    height: 49px;
+    background: #f5f5f5;
+    border-radius: 12px;
+    margin: 0 30px 20px;
+    padding: 0 20px;
+    &.deposit1 {
+        left: 0;
+        width: 100%;
+    }
+    .deposit-money {
+        .flex();
+    }
+    .jump {
+        .flex();
+        .jump-img {
+            width: 24px;
+            height: 24px;
+            margin: 2px 0 0 2px;
+        }
+    }
+}
+
+.content {
+    background: #fbfbfb;
+    border-radius: 30px 30px 0px 0px;
+    transform: translateY(-30px);
+    padding-top: 30px;
+}
 </style>