<template>
  <div class="page flex-col">
    <div class="main1 flex-col">
      <NavBar
        title="精选理财"
        :showBackIcon="false"
        class="!bg-app-blue text-white"
        :occupyPosition="false"
      />
      <div class="outer1 flex-col">
        <div class="box2 flex-row justify-between">
          <div class="flex items-center">
            <icon
              class="icon2"
              name="icon-gouxuanyangshi"
              color="#A7B2E3"
              size="17"
            />
            <span class="word2">中低风险</span>
          </div>
          <div class="flex items-center">
            <icon
              class="icon2"
              name="icon-gouxuanyangshi"
              color="#A7B2E3"
              size="17"
            />
            <span class="word3">风格稳健</span>
          </div>
          <div class="flex items-center">
            <icon
              class="icon2"
              name="icon-gouxuanyangshi"
              color="#A7B2E3"
              size="17"
            />
            <span class="txt1">长期持有增值</span>
          </div>
        </div>
      </div>
      <MainFnsSwip class="relative z-10 mainfnsswip" />
      <GroupTitle
        title="精选理财"
        subtitle="安稳省心 爆款甄选"
        @seeMore="seeMore"
      />
      <FnsCard4 v-for="n in 3" :key="n" :data="n" />
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import Icon from "@/components/common/Icon.vue";
import FnsCard3 from "@/components/FnsCard3/index.vue";
import GroupTitle from "@/components/GroupTitle/index.vue";
import MainFnsSwip from "./Components/MainFnsSwip/index.vue";
import FnsCard4 from "@/components/FnsCard4/index.vue";
import NavBar from "@/components/NavBar/index.vue";

export default defineComponent({
  components: {
    Icon,
    FnsCard3,
    MainFnsSwip,
    GroupTitle,
    FnsCard4,
    NavBar,
  },
  data() {
    return {
      constants: {},
    };
  },
  methods: {
    seeMore() {
      this.$router.push({
        name: "FnsList",
      });
    },
  },
});
</script>
<style lang="less" scoped>
@import "./index.less";
.mainfnsswip {
  margin-top: -130px;
}
</style>