From c4d78a9bd30ee90374c1d8be8dc13375c6878830 Mon Sep 17 00:00:00 2001
From: PC-20250623MANY\Administrator <344137771@qq.com>
Date: Sat, 16 Aug 2025 18:31:47 +0800
Subject: [PATCH] 1
---
src/page/home/fundIndex.vue | 226 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 224 insertions(+), 2 deletions(-)
diff --git a/src/page/home/fundIndex.vue b/src/page/home/fundIndex.vue
index 7459922..b384dee 100644
--- a/src/page/home/fundIndex.vue
+++ b/src/page/home/fundIndex.vue
@@ -1,3 +1,225 @@
<template>
- <div>理财</div>
-</template>
\ No newline at end of file
+ <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>
--
Gitblit v1.9.3