|
|
@@ -15,6 +15,42 @@
|
|
|
<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">465.26</div>
|
|
|
+ <div class="text1">团队总预存余额</div>
|
|
|
+ </div>
|
|
|
+ <div class="btn">
|
|
|
+ <div class="btn1" @click="Tixian">提现</div>
|
|
|
+ <div class="btn2">充值</div>
|
|
|
+ </div>
|
|
|
+ <div class="deposit">房租押金 <span>¥1500</span> 去缴费</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="content1">
|
|
|
+ <div class="title1">我的服务</div>
|
|
|
+ <div class="border"></div>
|
|
|
+ <div class="box">
|
|
|
+ <div class="div">
|
|
|
+ <img class="tit-img" src="../native/tabbar/wode_icon_baoxiu@3x.png" alt="" />
|
|
|
+ <div class="text">保修申请</div>
|
|
|
+ </div>
|
|
|
+ <div class="div">
|
|
|
+ <img class="tit-img" src="../native/tabbar/wode_icon_dasao@3x.png" alt="" />
|
|
|
+ <div class="text">打扫申请</div>
|
|
|
+ </div>
|
|
|
+ <div class="div">
|
|
|
+ <img class="tit-img" src="../native/tabbar/wode_icon_tousu@3x.png" alt="" />
|
|
|
+ <div class="text">投诉/建议</div>
|
|
|
+ </div>
|
|
|
+ <div class="div">
|
|
|
+ <img class="tit-img" src="../native/tabbar/wode_icon_shouming@3x.png" alt="" />
|
|
|
+ <div class="text">帮助说明</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
@@ -34,12 +70,13 @@ export default {
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
-<style lang="less">
|
|
|
+<style lang="less" scoped>
|
|
|
.container {
|
|
|
+ background: #f5f7fa;
|
|
|
+ height: 100vh;
|
|
|
.top {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- margin-bottom: 28px;
|
|
|
.avatar {
|
|
|
width: 80px;
|
|
|
height: 80px;
|
|
|
@@ -72,5 +109,120 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ .border {
|
|
|
+ height: 1px;
|
|
|
+ background: #f5f7fa;
|
|
|
+ margin: 16px 0;
|
|
|
+ }
|
|
|
+ .background {
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ margin: 28px 20px 20px;
|
|
|
+ .img {
|
|
|
+ height: 128px;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .money {
|
|
|
+ position: absolute;
|
|
|
+ display: flex;
|
|
|
+ margin: 16px 0 0 16px;
|
|
|
+ .money1 {
|
|
|
+ font-size: 26px;
|
|
|
+ font-family: DIN-Bold, DIN;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #ff7f1f;
|
|
|
+ line-height: 31px;
|
|
|
+ }
|
|
|
+ .text1 {
|
|
|
+ font-size: 13px;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ font-weight: normal;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 18px;
|
|
|
+ }
|
|
|
+ .btn {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .btn1 {
|
|
|
+ width: 72px;
|
|
|
+ height: 26px;
|
|
|
+ background: rgba(255, 255, 255, 0.33);
|
|
|
+ border-radius: 13px;
|
|
|
+ border: 1px solid #ffffff;
|
|
|
+ font-weight: bold;
|
|
|
+ line-height: 26px;
|
|
|
+ text-align: center;
|
|
|
+ color: #ffffff;
|
|
|
+ margin: 0 20px 0 48px;
|
|
|
+ }
|
|
|
+ .btn2 {
|
|
|
+ width: 72px;
|
|
|
+ height: 26px;
|
|
|
+ background: #ffffff;
|
|
|
+ font-weight: bold;
|
|
|
+ line-height: 26px;
|
|
|
+ text-align: center;
|
|
|
+ color: #5d7dff;
|
|
|
+ border-radius: 13px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .deposit {
|
|
|
+ position: absolute;
|
|
|
+ top: 80px;
|
|
|
+ left: 80px;
|
|
|
+ font-size: 13px;
|
|
|
+ font-family: PingFangSC-Medium, PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 18px;
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: DIN-Bold, DIN;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 19px;
|
|
|
+ margin-top: 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .content1 {
|
|
|
+ margin: 20px;
|
|
|
+ padding: 20px 12px;
|
|
|
+ background: #ffffff;
|
|
|
+ box-shadow: 0px 2px 4px 0px rgba(1, 168, 91, 0.04);
|
|
|
+ border-radius: 12px;
|
|
|
+ .title1 {
|
|
|
+ font-size: 18px;
|
|
|
+ font-family: PingFangSC-Medium, PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #000000;
|
|
|
+ line-height: 25px;
|
|
|
+ }
|
|
|
+ .box {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ margin: 0 14px;
|
|
|
+ .div {
|
|
|
+ margin-right: 27px;
|
|
|
+ text-align: center;
|
|
|
+ .tit-img {
|
|
|
+ width: 36px;
|
|
|
+ height: 36px;
|
|
|
+ margin-bottom: 6px;
|
|
|
+ }
|
|
|
+ .text {
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ font-weight: normal;
|
|
|
+ color: #000000;
|
|
|
+ line-height: 20px;
|
|
|
+ margin-bottom: 25px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|