<template>
|
<div class="fund_index">
|
<div class="fund_head flex-end">
|
<img
|
src="@/assets/img/fund_icon.png"
|
@click="$router.push('/fund_rules')"
|
/>
|
</div>
|
|
<div class="circular-content">
|
<div class="circulars">
|
<div class="ring"></div>
|
</div>
|
|
<div class="cc_title">{{ $t("餘額寶總餘額") }}</div>
|
<div class="cc_price">{{ 24095.55 }}</div>
|
</div>
|
|
<div class="tui-card">
|
<div class="tui-cardItem">
|
<img src="@/assets/img/fund_2.png" />
|
<div class="tui_text">{{ $t("存入") }}</div>
|
</div>
|
<div class="tui-border"></div>
|
<div class="tui-cardItem">
|
<img src="@/assets/img/fund_3.png" />
|
<div class="tui_text">{{ $t("转出") }}</div>
|
</div>
|
<div class="tui-border"></div>
|
<div class="tui-cardItem">
|
<img src="@/assets/img/fund_4.png" />
|
<div class="tui_text">{{ $t("明细") }}</div>
|
</div>
|
</div>
|
|
<div class="tui-grad">
|
<div class="tui-gradItem" v-for="i in lists" :key="i.title">
|
<img :src="i.img" />
|
<div class="tui_title">{{ i.title }}</div>
|
<div class="tui_desc">{{ i.desc }}</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
lists: [
|
{
|
img: require("@/assets/img/fund_5.png"),
|
title: this.$t("已确认份额"),
|
desc: "1095.54"
|
},
|
{
|
img: require("@/assets/img/fund_6.png"),
|
title: this.$t("待确认份额"),
|
desc: "23000"
|
},
|
{
|
img: require("@/assets/img/fund_7.png"),
|
title: this.$t("Profit"),
|
desc: "0.00"
|
},
|
{
|
img: require("@/assets/img/fund_8.png"),
|
title: this.$t("syl"),
|
desc: "1%"
|
},
|
{
|
img: require("@/assets/img/fund_9.png"),
|
title: this.$t("今日剩余入金次数"),
|
desc: "60"
|
},
|
{
|
img: require("@/assets/img/fund_10.png"),
|
title: this.$t("今日剩余出金次数"),
|
desc: "60"
|
}
|
]
|
};
|
},
|
computed: {}
|
};
|
</script>
|
|
<style lang="less" scoped>
|
.fund_index {
|
padding: 0 0.9rem .5rem;
|
.tui-grad {
|
border-radius: 0 0 0.325rem 0.325rem;
|
padding-bottom: 1rem;
|
display: flex;
|
flex-wrap: wrap;
|
justify-content: space-between;
|
margin-top: 0.3rem;
|
.tui-gradItem {
|
transform: translateX(0) !important;
|
width: 3.95rem;
|
margin-bottom: 0.3rem;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
flex-direction: column;
|
padding: 0.45rem 0;
|
box-sizing: border-box;
|
background-color: #525bad;
|
border-radius: 0.325rem;
|
transition: all 0.5s ease;
|
.tui_desc {
|
font-size: 0.475rem;
|
color: #fff;
|
padding-top: 0.075rem;
|
}
|
.tui_title {
|
color: #ccc;
|
font-size: 0.375rem;
|
padding-top: 0.3rem;
|
}
|
img {
|
width: 1.075rem;
|
height: 1.075rem;
|
}
|
}
|
}
|
.tui-card {
|
background-color: #525bad;
|
border-radius: 0.357rem;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
margin-top: 0.8rem;
|
.tui-border {
|
width: 1px;
|
height: 1rem;
|
background-color: #ccc;
|
}
|
.tui-cardItem {
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
padding: 0.45rem;
|
box-sizing: border-box;
|
.tui_text {
|
font-size: 0.375rem;
|
padding-top: 0.15rem;
|
// color: #fff;
|
}
|
img {
|
width: 1.075rem;
|
height: 1.075rem;
|
}
|
}
|
}
|
|
.circular-content {
|
width: 100%;
|
height: 4rem;
|
position: relative;
|
top: 0;
|
left: 0;
|
// display: flex;
|
// align-items: center;
|
// justify-content: center;
|
overflow: hidden;
|
@kg: 8rem;
|
.cc_title {
|
padding-top: 2rem;
|
font-size: 0.3rem;
|
text-align: center;
|
}
|
.cc_price {
|
padding-top: 0.4rem;
|
font-size: 0.8rem;
|
text-align: center;
|
}
|
.circulars {
|
height: @kg;
|
width: @kg;
|
// position: relative;
|
position: absolute;
|
top: 0.1rem;
|
left: 50%;
|
transform: translateX(-50%);
|
|
&::after {
|
content: "";
|
display: block;
|
height: 2.5rem;
|
width: 100%;
|
position: absolute;
|
bottom: 0;
|
left: 0;
|
}
|
|
.ring {
|
height: @kg;
|
width: @kg;
|
border-width: 0.5rem;
|
border-color: #fff #4f58a8 #4f58a8;
|
border-style: solid;
|
box-sizing: border-box;
|
position: relative;
|
border-radius: 100%;
|
// transform: rotate(315deg); // 满值
|
// transform:rotate(135deg); // 初始值 180/10 = 18
|
transform: rotate(135deg); // 初始值v2
|
transition: 1.5s ease-out;
|
}
|
}
|
}
|
|
.fund_head {
|
width: 100%;
|
padding-top: 0.3rem;
|
img {
|
width: 1.275rem;
|
height: auto;
|
}
|
}
|
}
|
</style>
|
