You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
172 lines
3.5 KiB
Vue
172 lines
3.5 KiB
Vue
|
|
|
|
<template>
|
|
<div class="mine" :style="{background:'url('+'../../static/bbj1@3x.png'+')'}">
|
|
<div class="content1">
|
|
<div class="wrap1">
|
|
<div class="wrap1_1">203</div>
|
|
<div class="wrap1_2">当前订单总量</div>
|
|
</div>
|
|
<div class="wrap2"></div>
|
|
<div class="wrap3">
|
|
<div class="wrap3_1">19</div>
|
|
<div class="wrap3_2">当前有效合同数</div>
|
|
</div>
|
|
</div>
|
|
<div class="content2">
|
|
<div class="wrap1">
|
|
<div class="wrap1_1">
|
|
<image src="../../static/06@3x.png"></image>
|
|
</div>
|
|
<div class="wrap1_2">
|
|
<div class="wrap1_2_1">
|
|
<div class="wrap1_2_1_1">某某某</div>
|
|
<div class="wrap1_2_1_2">已实名</div>
|
|
</div>
|
|
<div class="wrap1_2_2">178273938123</div>
|
|
</div>
|
|
</div>
|
|
<div class="wrap2">
|
|
<div class="wrap2_1">
|
|
<image src="../../static/zu609@3x.png"></image>
|
|
</div>
|
|
<div class="wrap2_2">设置</div>
|
|
</div>
|
|
</div>
|
|
<tabbar :current="3"></tabbar>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import tabbar from "../../components/uiq-tabbar/uiq-tabbar.vue";
|
|
|
|
export default {
|
|
name: "index",
|
|
onLoad() {
|
|
uni.hideTabBar()
|
|
},
|
|
components: {tabbar}
|
|
}
|
|
</script>
|
|
<style scoped lang="scss">
|
|
.mine{
|
|
box-sizing: border-box;
|
|
padding-top: 46rpx;
|
|
padding-left: 30rpx;
|
|
padding-right: 30rpx;
|
|
background-size: cover;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
.content2{
|
|
margin-top: 30rpx;
|
|
display: flex;
|
|
.wrap2{
|
|
margin-left: auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 182rpx;
|
|
height: 204rpx;
|
|
background: #4E964D;
|
|
border-radius: 40rpx;
|
|
.wrap2_1{
|
|
image{
|
|
width: 40.88rpx;
|
|
height: 40.88rpx;
|
|
|
|
}
|
|
}
|
|
.wrap2_2{
|
|
font-size: 20rpx;
|
|
color: #fff;
|
|
}
|
|
}
|
|
.wrap1{
|
|
width: 480rpx;
|
|
height:204rpx;
|
|
border-radius: 40rpx;
|
|
background: #fff;
|
|
display: flex;
|
|
align-items: center;
|
|
.wrap1_2{
|
|
margin-left: 30rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
.wrap1_2_2{
|
|
color: #626262;
|
|
font-size: 24rpx;
|
|
}
|
|
.wrap1_2_1{
|
|
margin-bottom: 6rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
.wrap1_2_1_1{
|
|
margin-right: 6rpx;
|
|
font-size: 28rpx;
|
|
}
|
|
.wrap1_2_1_2{
|
|
width: 76rpx;
|
|
height: 26rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: #fff;
|
|
background:#76C458 ;
|
|
font-size: 16rpx;
|
|
}
|
|
}
|
|
}
|
|
.wrap1_1{
|
|
margin-left: 68rpx;
|
|
image{
|
|
width: 126rpx;
|
|
height: 126rpx;
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.content1{
|
|
display: flex;
|
|
height: 134rpx;
|
|
background: #fff;
|
|
border-radius: 40rpx;
|
|
align-items: center;
|
|
.wrap1{
|
|
width:344rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
.wrap1_1{
|
|
font-size: 28rpx;
|
|
}
|
|
.wrap1_2{
|
|
color: #979798;
|
|
font-size: 20rpx;
|
|
}
|
|
|
|
}
|
|
.wrap2{
|
|
width: 1px;
|
|
height: 70rpx;
|
|
background:#D3E6F2 ;
|
|
}
|
|
.wrap3{
|
|
width:344rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
.wrap3_1{
|
|
font-size: 28rpx;
|
|
}
|
|
.wrap3_2{
|
|
color: #979798;
|
|
font-size: 20rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|