feat：贷款

src/components/GroupTitle/index.vue

 <template>
   <div class="wrap12 flex mx-5 items-center">
-    <span class="word8">{{ title }}</span>
-    <span v-if="subtitle" class="ml-3 info2">{{ subtitle }}</span>
+    <div class="word8">{{ title }}</div>
+    <div v-if="subtitle" class="ml-3 info2">{{ subtitle }}</div>
     <div class="flex-grow"></div>
     <span class="word9" v-if="iconName === 'icon-gengduo'">更多</span>
     <icon
@@ -18,7 +18,7 @@
       size="16"
       @click="clickFilter"
     />
-    <icon v-else :name="iconName" color="#979BB6" size="16" />
+    <icon v-else-if="iconName" :name="iconName" color="#979BB6" size="16" />
   </div>
 </template>
 <script lang="ts">

src/components/LoanCard/index.vue → src/components/Loan/LoanCard/index.vue

@@ -17,7 +17,7 @@
 </template>
 <script lang="ts">
 import Vue, {defineComponent} from "vue";
-import Icon from "../common/Icon.vue";
+import Icon from "@/components/common/Icon.vue";
 export default defineComponent({ components: { Icon } });
 </script>
 <style scoped>

src/components/Loan/LoanHotCard/index.vue

+<template>
+  <div class="hot-loan">
+    <div class="title text-center mt-5">中国建设银行-信用快贷</div>
+    <div class="flex items-center box-group">
+      <div
+        v-for="n in 3"
+        :key="n"
+        class="box"
+        :style="{
+          width: 'calc(100% / 3)',
+        }"
+      >
+        <div class="top-text text-center">最低3.85%</div>
+        <div class="bottom-text mt-2.5 text-center">贷款年利率</div>
+      </div>
+    </div>
+    <div
+      class="viewRightNow flex items-center justify-center mt-5 mx-auto"
+      @click="$emit('viewRightNow')"
+    >
+      立即查看
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  emits: ["viewRightNow"],
+  setup() {},
+});
+</script>
+
+<style lang="less" scoped>
+.hot-loan {
+  margin: 0 auto;
+  width: 335px;
+  height: 200px;
+  background: #ffffff;
+  box-shadow: 0px 2px 13px 0px #f0f6fc;
+  border-radius: 20px;
+  .title {
+    font-size: 16px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #1b1f37;
+    line-height: 22px;
+  }
+  .box-group {
+    margin-top: 30px;
+    .box {
+      border-right: 1px solid #eaf0ff;
+      .top-text {
+        font-size: 16px;
+        font-family: PingFangHK-Semibold, PingFangHK;
+        font-weight: 600;
+        color: #f03a30;
+        line-height: 22px;
+      }
+      .bottom-text {
+        font-size: 12px;
+        font-family: PingFangHK-Regular, PingFangHK;
+        font-weight: 400;
+        color: #8d92af;
+        line-height: 17px;
+      }
+      &:last-of-type {
+        border-right: 0;
+      }
+    }
+  }
+  .viewRightNow {
+    width: 295px;
+    height: 40px;
+    background: #4e61c9;
+    border-radius: 20px;
+
+    font-size: 14px;
+    font-family: PingFangSC-Semibold, PingFang SC;
+    font-weight: 600;
+    color: #ffffff;
+  }
+}
+</style>
\ No newline at end of file

src/components/Loan/LoanHotSwipe/index.vue

+<template>
+  <van-swipe class="my-swipe" indicator-color="#3E4FAF">
+    <van-swipe-item class="flex justify-center swpiItem"
+      ><LoanHotCard />
+    </van-swipe-item>
+    <van-swipe-item class="flex justify-center swpiItem"
+      ><LoanHotCard
+    /></van-swipe-item>
+    <van-swipe-item class="flex justify-center swpiItem"
+      ><LoanHotCard
+    /></van-swipe-item>
+  </van-swipe>
+</template>
+<script lang="ts">
+import { defineComponent } from "vue";
+import LoanHotCard from "@/components/Loan/LoanHotCard/index.vue";
+export default defineComponent({
+  components: {
+    LoanHotCard,
+  },
+});
+</script>
+<style lang="less" scoped>
+.my-swipe /deep/ .van-swipe__indicator {
+  background-color: #e7e7e7;
+  opacity: 1;
+}
+.swpiItem {
+  height: 230px;
+}
+</style>
\ No newline at end of file

src/router/index.ts

@@ -23,14 +23,14 @@ const routes: Array<RouteRecordRaw> = [
             /* webpackChunkName: "mine" */ '@/views/withMenu/Mine/index.vue'
           ),
       },
-      {
-        path: '/financialManagement',
-        name: 'FinancialManagement',
-        component: () =>
-          import(
-            /* webpackChunkName: "fns" */ '@/views/withMenu/FinancialManagement/index.vue'
-          ),
-      },
+      // {
+      //   path: '/financialManagement',
+      //   name: 'FinancialManagement',
+      //   component: () =>
+      //     import(
+      //       /* webpackChunkName: "fns" */ '@/views/withMenu/FinancialManagement/index.vue'
+      //     ),
+      // },
       {
         path: '/loan',
         name: 'Loan',
@@ -41,11 +41,11 @@ const routes: Array<RouteRecordRaw> = [
       },
     ],
   },
-  {
-    path: '/fnsList',
-    name: 'FnsList',
-    component: () => import('@/views/FnsList/index.vue'),
-  },
+  // {
+  //   path: '/fnsList',
+  //   name: 'FnsList',
+  //   component: () => import('@/views/FnsList/index.vue'),
+  // },
   // {
   //   path: '/auth',
   //   component: () => import('@/views/Auth/index.vue'),

src/views/withMenu/FinancialManagement/index.vue

@@ -37,7 +37,6 @@
             <span class="txt1">长期持有增值</span>
           </div>
         </div>
-        <!-- <div class="box3 flex-col"><span class="word4">精选理财</span></div> -->
       </div>
       <MainFnsSwip class="relative z-10 mainfnsswip" />
       <GroupTitle

src/views/withMenu/Home/index.vue

@@ -20,22 +20,6 @@
       />
       <group-title class="mt-7" title="热门资讯" />
       <HotNews v-for="n in 2" :key="n" />
-      <!-- <div class="wrap24 flex-row">
-        <div class="bd7 flex-col">
-          <span class="info10">建信银行为您量身定做打造良好的信贷体验</span>
-          <div class="section1 flex-row">
-            <span class="word25">建信个人贷</span>
-            <span class="info11">2021-07-10</span>
-          </div>
-        </div>
-        <div class="bd8 flex-col">
-          <img
-            class="img1"
-            referrerpolicy="no-referrer"
-            src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng3cfe1683e7037e9adb65b1ebc163f4c5bd44f4dfa15c56ce2636f4d22fe8eba7"
-          />
-        </div>
-      </div> -->
     </div>
   </div>
 </template>
@@ -49,7 +33,7 @@ import Icon from "@/components/common/Icon.vue";
 import Notify from "./Notify/index.vue";
 import GroupTitle from "@/components/GroupTitle/index.vue";
 import FnsCard from "./FnsCard/index.vue";
-import LoanCard from "@/components/LoanCard/index.vue";
+import LoanCard from "@/components/Loan/LoanCard/index.vue";
 import LiveCard from "@/components/LiveCard/index.vue";
 import HotNews from "@/components/HotNews/index.vue";
 

src/views/withMenu/Loan/index.vue

 <template>
-  <div>
-    <div class="home" v-for="n in 1000" :key="n">adsfads</div>
+  <div class="page flex-col">
+    <div class="main1 flex-col">
+      <div class="block1">
+        <div class="mod2 flex-col">
+          <div class="wrap1 flex-row">
+            <span
+              class="word2"
+              :style="{
+                color:
+                  eLoanMode.personal === mode ? 'rgba(62, 79, 175, 1)' : '',
+              }"
+              @click="setMode(eLoanMode.personal)"
+              >个人贷</span
+            >
+            <span
+              class="info1"
+              :style="{
+                color: eLoanMode.company === mode ? 'rgba(62, 79, 175, 1)' : '',
+              }"
+              @click="setMode(eLoanMode.company)"
+              >企业贷</span
+            >
+          </div>
+        </div>
+        <div class="main8 flex-col" v-if="eLoanMode.personal === mode">
+          <div class="outer4 flex-row">
+            <div class="outer5 flex-col"></div>
+            <span class="word26">个人小额借款（元）</span>
+            <div class="outer6 flex-col"></div>
+          </div>
+          <div class="outer7 flex-row">
+            <div class="section8 flex-col">
+              <span class="paragraph1">
+                最高
+                <br />
+                可借
+              </span>
+            </div>
+            <span class="word27">¥</span>
+            <span class="txt14">1,000,000</span>
+          </div>
+        </div>
+        <div class="outer55" v-else-if="eLoanMode.company === mode">
+          <div class="outer6 flex-row items-center">
+            <span class="word32">小微快贷</span>
+            <span class="info14">最高可借（元）</span>
+          </div>
+          <div class="outer7 flex-row">
+            <span class="info15">¥</span>
+            <span class="txt10">1,000,000</span>
+          </div>
+          <div class="outer8 flex-row">
+            <span class="word33">年利率最低4.35%</span>
+            <div class="main22 flex-col"></div>
+            <span class="word34">分秒必批</span>
+            <div class="main22 flex-col"></div>
+            <span class="word35">灵活快捷</span>
+          </div>
+        </div>
+      </div>
+      <GroupTitle title="热门贷款" class="mt-2.5" iconName="" />
+      <LoanHotSwipe class="mt-5" />
+      <GroupTitle title="贷款精选" class="mb-2.5" />
+      <LoanCard v-for="n in 3" :key="n" class="mt-2.5" />
+
+      <GroupTitle title="精彩活动" class="mt-2.5" iconName="" />
+      <div class="activity mt-2.5">
+        <img
+          class="mx-auto"
+          src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng31633e386bbda59e950e5c032acc54d940fe3128b4f063d83a161084f4bbd79f"
+          alt=""
+        />
+      </div>
+      <GroupTitle
+        title="贷款资讯"
+        subtitle="最新贷款资讯展示"
+        class="mt-2.5"
+        iconName=""
+      />
+      <HotNews v-for="n in 2" :key="n" />
+    </div>
   </div>
 </template>
-
 <script lang="ts">
-import Vue, {defineComponent} from "vue";
-
+import { defineComponent, ref } from "vue";
+import { eLoanMode } from "./types";
+import LoanHotCard from "@/components/Loan/LoanHotCard/index.vue";
+import LoanHotSwipe from "@/components/Loan/LoanHotSwipe/index.vue";
+import LoanCard from "@/components/Loan/LoanCard/index.vue";
+import GroupTitle from "@/components/GroupTitle/index.vue";
+import HotNews from "@/components/HotNews/index.vue";
 export default defineComponent({
-  components: {},
+  components: { LoanHotCard, LoanHotSwipe, GroupTitle, LoanCard, HotNews },
+  setup(props) {
+    const mode = ref(eLoanMode.personal);
+    return {
+      mode,
+      eLoanMode,
+      setMode(v: eLoanMode) {
+        mode.value = v;
+      },
+    };
+  },
 });
 </script>
+<style lang="less" scoped>
+@import "./index.less";
+</style>
\ No newline at end of file

src/views/withMenu/Loan/types.ts

+export enum eLoanMode {
+    personal,
+    company
+}
\ No newline at end of file

src/views/withMenu/tabList.ts

@@ -4,11 +4,11 @@ export default [
     routeName: 'Home',
     icon: 'icon-shouye-tab-xuanze1',
   },
-  {
-    name: '理财',
-    routeName: 'FinancialManagement',
-    icon: 'icon-licai-tabxuanze',
-  },
+  // {
+  //   name: '理财',
+  //   routeName: 'FinancialManagement',
+  //   icon: 'icon-licai-tabxuanze',
+  // },
   {
     name: '贷款',
     routeName: 'Loan',