import { onMounted } from "vue"
|
|
<template>
|
<view class="container">
|
<view class="content">
|
<view class="card-box" :style="{paddingTop:capsuleHeight + 'rpx'}">
|
<view class="card"></view>
|
</view>
|
<view class="function-box1">
|
<view class="box1-bg"></view>
|
<view class="box1-bg"></view>
|
<view class="box1-bg"></view>
|
</view>
|
<view class="function-box2">
|
<view class="box2-title"><text>功能列表</text></view>
|
<view class="box2-content">
|
<block v-for="(item,index) in functionList" :key="index">
|
<view class="box2-item" @click="navTo(item.url)">
|
<image :src= "item.icon" alt=""></image>
|
<view class="box2-item-text">{{item.text}}</view>
|
</view>
|
</block>
|
</view>
|
</view>
|
</view>
|
<button @click="back()"></button>
|
</view>
|
</template>
|
|
<script setup>
|
import { onMounted, ref } from "vue"
|
const back = () =>{
|
// uni.navigateBack()
|
uni.navigateTo({
|
url:"/pages/login/index"
|
})
|
}
|
//胶囊高度
|
const capsuleHeight = ref(0)
|
onMounted(() =>{
|
if(uni.getMenuButtonBoundingClientRect){
|
capsuleHeight.value = (uni.getMenuButtonBoundingClientRect().top + uni.getMenuButtonBoundingClientRect().height) * 2
|
}
|
})
|
/**
|
* 功能列表相关
|
*/
|
const functionList = ref([
|
{text:'余额',icon:'../../static/images/index/icon31.png',url:'/pages/login/index'},
|
{text:'余额',icon:'../../static/images/index/icon32.png',url:'/pages/login/index'},
|
{text:'余额',icon:'../../static/images/index/icon33.png',url:'/pages/login/index'},
|
{text:'余额',icon:'../../static/images/index/icon34.png',url:'/pages/login/index'},
|
{text:'余额',icon:'../../static/images/index/icon35.png',url:'/pages/login/index'},
|
{text:'余额',icon:'../../static/images/index/icon36.png',url:'/pages/login/index'},
|
{text:'余额',icon:'../../static/images/index/icon37.png',url:'/pages/login/index'},
|
{text:'余额',icon:'../../static/images/index/icon38.png',url:'/pages/login/index'},
|
])
|
|
</script>
|
|
<style lang="scss" scoped>
|
.container{
|
width:100%;
|
height:100vh;
|
overflow:scroll;
|
.content{
|
width:100%;
|
height:100vh;
|
background:#F6F6F6;
|
}
|
}
|
.card-box{
|
width: 100%;
|
height: auto;
|
// background: #a0b5c7;
|
box-sizing: border-box;
|
padding: 0 32rpx;
|
background: linear-gradient(to bottom,#5EA1FA,#D2F2FE);
|
.card{
|
width: 100%;
|
height: 304rpx;
|
background-image: url("../../static/images/index/card1.png");
|
background-repeat: no-repeat;
|
background-size: 100%;
|
|
}
|
}
|
.function-box1{
|
width:100%;
|
box-sizing:border-box;
|
height: 264rpx;
|
padding: 32rpx;
|
// background: rgba(85, 170, 0, 0.1);
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
.box1-bg{
|
width:212rpx;
|
height:200rpx;
|
border-radius:24rpx;
|
background: #fff;
|
box-shadow:0 0 12rpx 2rpx rgba(13,118,255,0.16);
|
}
|
}
|
.function-box2{
|
width:100%;
|
box-sizing:border-box;
|
height: 460rpx;//374 + 44 + 距离 + 底部padding32
|
padding:0 32rpx 32rpx;
|
// background: rgba(46, 121, 170, 0.5);
|
.box2-title{
|
width: 100%;
|
font-weight:300;
|
font-size: 32rpx;
|
color: #000000;
|
text-align: left;
|
margin-bottom: 10rpx;
|
margin-left: 30rpx;
|
}
|
.box2-content{
|
box-sizing: border-box;
|
padding:30rpx 50rpx;
|
width: 686rpx;
|
height:374rpx;
|
background: #fff;
|
border-radius: 24rpx;
|
box-shadow: 0 0 12rpx 2rpx rgba(0, 0, 0, 0.1);
|
display: flex;
|
flex-wrap: wrap;
|
justify-content: space-between;
|
align-items: center;
|
.box2-item{
|
width: 120rpx;
|
height:130rpx;
|
image{
|
width: 90rpx;
|
height:90rpx;
|
margin: 0 auto;
|
}
|
.box2-item-text{
|
width:100%;
|
height: 40rpx;
|
font-weight: 300;
|
font-size: 28rpx;
|
color: #000000;
|
text-align: center;
|
}
|
}
|
}
|
}
|
button{
|
width:100rpx;
|
height:50rpx
|
}
|
</style>
|
