353 lines
7.1 KiB
Vue
353 lines
7.1 KiB
Vue
<template>
|
|
<view class="container">
|
|
<view class="main-info-container">
|
|
<!-- 导航栏 placeholder -->
|
|
<NavBar bgColor="transparent">
|
|
<view class="nav-bar flex-align-center h100">
|
|
<view class="left flex-align-center">
|
|
<image src="/static/image/finance-management/search/search-left.png"></image>
|
|
</view>
|
|
<view class="nav-bar-search flex-align-center flex-1">
|
|
<image class="search-icon" src="/static/image/bill/bill-list/search-black.png" mode=""></image>
|
|
<input type="text" class="search-input flex-1" placeholder="小而美的基金" />
|
|
<view class="line h100"></view>
|
|
<view class="search-button">搜索</view>
|
|
</view>
|
|
<view class="right flex-align-center">
|
|
<image src="/static/image/finance-management/search/search-right.png"></image>
|
|
</view>
|
|
</view>
|
|
</NavBar>
|
|
|
|
<view class="total-money-box flex-align-center flex-justify-between">
|
|
<view class="revenue-box flex-1">
|
|
<view class="total-money flex-align-center">
|
|
<view class="total-money-title flex-align-center">
|
|
<text>总资产(元)</text>
|
|
<image class="eye-icon" src="/static/image/finance-management/eye.png"></image>
|
|
<view class="flex-align-center" style="color: #A39797;font-size: 22rpx;">
|
|
<image class="safe-icon" src="/static/image/finance-management/safe.png"></image>
|
|
<text>免费升级保障</text>
|
|
</view>
|
|
</view>
|
|
<view class="total-money-title flex-align-center">
|
|
<text>昨日收益</text>
|
|
</view>
|
|
</view>
|
|
<view class="total-money flex-align-center" style="margin-top: 10px;">
|
|
<view class="total-money-value flex-align-center">
|
|
<text>{{ financeInfo.totalMoney }}</text>
|
|
</view>
|
|
<view class="total-money-value flex-align-center">
|
|
<text>{{ financeInfo.yesterdayIncome }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="family-protection">
|
|
<view class="total-money-title flex-align-center">
|
|
<text>家庭保障</text>
|
|
</view>
|
|
<view class=" flex-align-end" style="margin-top: 10px;">
|
|
<text class="value">{{ financeInfo.familyProtection }}</text>
|
|
<text class="text">份</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="arrow-box">
|
|
<image class="arrow-icon" src="/static/image/finance-management/arrow-down.png"></image>
|
|
</view>
|
|
|
|
<view class="card-box flex-column">
|
|
|
|
<view class="wealth-card-box flex">
|
|
<!-- 占位图片设置为透明 -->
|
|
<image class="wealth-card-opacity0" src="/static/image/finance-management/v1/bg.png"
|
|
mode="widthFix" />
|
|
<!-- 背景图片高度自适应 -->
|
|
<image class="wealth-card" src="/static/image/finance-management/v1/bg.png" mode="widthFix" />
|
|
|
|
<view class="card-info">
|
|
<image class="logo" src="/static/image/finance-management/v1/logo.png" mode="scaleToFill" />
|
|
<view class="name-box flex-align-center">
|
|
<image class="card-holder-icon" src="/static/image/finance-management/v1/card-holder.png"
|
|
mode="scaleToFill" />
|
|
<view class="card-holder-name sacramento-font">{{ financeInfo.cardHolderName }}</view>
|
|
</view>
|
|
|
|
</view>
|
|
<view class="enjoy-benefits flex-align-center">
|
|
<text class="benefits-text">{{ financeInfo.benefitsText }}</text>
|
|
<image class="arrow-icon" src="/static/image/finance-management/v1/arrow.png"></image>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<view class="content-box"></view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="content">
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import NavBar from '@/components/nav-bar/nav-bar.vue'
|
|
import { ref, toRefs, reactive, onMounted } from 'vue'
|
|
import { onLoad } from '@dcloudio/uni-app'
|
|
|
|
onLoad(() => {
|
|
// 理财页面埋点
|
|
// proxy.$apiUserEvent('all', {
|
|
// type: 'click',
|
|
// key: 'fortune',
|
|
// value: "理财"
|
|
// })
|
|
})
|
|
|
|
const data = reactive({
|
|
financeInfo: {
|
|
totalMoney: 100000000,
|
|
yesterdayIncome: 22222,
|
|
familyProtection: 1,
|
|
benefitsText: '尊享礼遇18000元/年',
|
|
cardHolderName: 'LiXing',
|
|
vipLevel: 1,
|
|
}
|
|
})
|
|
|
|
let { financeInfo } = toRefs(data)
|
|
|
|
</script>
|
|
|
|
<style>
|
|
@import "@/common/main.css";
|
|
</style>
|
|
<style lang="less" scoped>
|
|
.container {
|
|
height: 100vh;
|
|
background-color: #f5f5f5;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.main-info-container {
|
|
background: linear-gradient(191deg, #0B1028 5.48%, #0B1028 30.26%, #18336C 60.18%, #18336C 100%);
|
|
|
|
|
|
.nav-bar {
|
|
padding: 20rpx;
|
|
|
|
.left {
|
|
image {
|
|
height: 48rpx;
|
|
width: 48rpx;
|
|
}
|
|
}
|
|
|
|
.right {
|
|
image {
|
|
height: 36rpx;
|
|
width: 36rpx;
|
|
}
|
|
}
|
|
|
|
.nav-bar-search {
|
|
background-color: #ffffff;
|
|
border-radius: 300rpx;
|
|
height: 56rpx;
|
|
padding: 4px 0;
|
|
margin: 0 26rpx 0 14rpx;
|
|
|
|
.search-icon {
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
margin-left: 4px;
|
|
margin-right: 6px;
|
|
}
|
|
|
|
.search-input {
|
|
font-size: 14px;
|
|
}
|
|
|
|
::v-deep .input-placeholder {
|
|
color: #767676;
|
|
}
|
|
|
|
.line {
|
|
width: 1px;
|
|
background-color: #D8D8D8;
|
|
}
|
|
|
|
.search-button {
|
|
font-size: 14px;
|
|
padding: 0 12px;
|
|
color: #8B634E;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.total-money-box {
|
|
padding-top: 10rpx;
|
|
padding-bottom: 6rpx;
|
|
|
|
.revenue-box {
|
|
padding: 0 24rpx;
|
|
|
|
.total-money {
|
|
font-size: 24rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
|
|
.total-money-value {
|
|
color: #F1CFAB;
|
|
}
|
|
|
|
}
|
|
|
|
.total-money-title {
|
|
color: #A39797;
|
|
|
|
.eye-icon {
|
|
width: 44rpx;
|
|
height: 44rpx;
|
|
margin: 0 32rpx 0 20rpx;
|
|
}
|
|
|
|
.safe-icon {
|
|
width: 24rpx;
|
|
height: 24rpx;
|
|
margin-right: 4rpx;
|
|
}
|
|
}
|
|
|
|
.total-money-value {
|
|
font-size: 50rpx;
|
|
font-weight: 500;
|
|
line-height: 64rpx;
|
|
}
|
|
|
|
.family-protection {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
padding: 0 28rpx;
|
|
border-left: 1rpx solid #172139;
|
|
align-items: center;
|
|
font-size: 24rpx;
|
|
|
|
.value {
|
|
color: #F1CFAB;
|
|
font-size: 56rpx;
|
|
font-weight: 500;
|
|
line-height: 64rpx;
|
|
}
|
|
|
|
.text {
|
|
color: #F1CFAB;
|
|
font-size: 24rpx;
|
|
margin-left: 8rpx;
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
.arrow-box {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 4rpx;
|
|
|
|
.arrow-icon {
|
|
width: 28rpx;
|
|
height: 28rpx;
|
|
}
|
|
}
|
|
|
|
.card-box {
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.wealth-card-box {
|
|
position: relative;
|
|
|
|
.card-info {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
position: absolute;
|
|
width: 100%;
|
|
top: 12%;
|
|
padding: 0 5%;
|
|
|
|
.logo {
|
|
width: 188rpx;
|
|
height: 40rpx;
|
|
}
|
|
|
|
.name-box {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.card-holder-icon {
|
|
width: 68rpx;
|
|
height: 28rpx;
|
|
margin-right: 8rpx;
|
|
}
|
|
|
|
.card-holder-name {
|
|
color: #F1CFAB;
|
|
font-size: 30rpx;
|
|
}
|
|
}
|
|
|
|
.enjoy-benefits {
|
|
position: absolute;
|
|
bottom: 25%;
|
|
right: 4%;
|
|
|
|
.benefits-text {
|
|
color: #F1CFAB;
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.arrow-icon {
|
|
width: 28rpx;
|
|
height: 28rpx;
|
|
margin-left: 6rpx;
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
|
|
.wealth-card-opacity0 {
|
|
width: 100%;
|
|
opacity: 0;
|
|
}
|
|
|
|
.wealth-card {
|
|
position: absolute;
|
|
width: 100%;
|
|
}
|
|
|
|
.content-box {
|
|
margin-top: -1px;
|
|
background-color: #ffffff;
|
|
padding: 20rpx;
|
|
}
|
|
|
|
|
|
}
|
|
}
|
|
|
|
.content {
|
|
padding: 20rpx;
|
|
}
|
|
</style>
|