Merge branch 'dev' of gitlab.33.cn:chenqikuai/fns_front_2 into dev

src/App.vue

 <template>
-  <div id="nav">
+  <div id="nav" class="bg-app-bg h-screen">
     <router-view />
   </div>
 </template>

src/components/Loan/LoanCard/index.vue

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

src/components/NavBar/index.vue

 <template>
-  <div class="navbar w-full" style="z-index: 100">
+  <div class="navbar w-full" style="z-index: 300">
     <div
       class="
         h-full
@@ -56,7 +56,7 @@ export default defineComponent({
     top: 0;
     left: 0;
     right: 0;
-    z-index: 100;
+    z-index: 300;
     height: 46px;
   }
   .some-block {

src/components/PopUpContent/LoanFilter/index.vue

+<template>
+  <div>
+    <div class="group-title mt-8">银行名称</div>
+    <SelectList
+      class="mt-5"
+      :list="bankList"
+      :selecteds="selectedBanks"
+      :setSelecteds="setBanks"
+    />
+    <div class="group-title mt-8">利率 (%)</div>
+    <div class="section10 flex-row">
+      <div class="mod5 flex-col">
+        <div class="layer4 flex-row">
+          <div class="word24">
+            <input
+              v-model.number="min_"
+              type="number"
+              placeholder="最低利率"
+              class="bg-transparent w-full"
+            />
+          </div>
+          <div class="word25">%</div>
+        </div>
+      </div>
+      <div class="mod6 flex-col"></div>
+      <div class="mod7 flex-col">
+        <div class="main12 flex-row">
+          <div class="txt12">
+            <input
+              type="number"
+              v-model.number="max_"
+              placeholder="最高利率"
+              class="bg-transparent w-full"
+            />
+          </div>
+          <div class="word26">%</div>
+        </div>
+      </div>
+    </div>
+    <div class="group-title mt-8">额度 (万元)</div>
+    <div class="section10 flex-row">
+      <div class="mod5 flex-col">
+        <div class="layer4 flex-row">
+          <div class="word24">
+            <input
+              v-model.number="min_2"
+              type="number"
+              placeholder=""
+              class="bg-transparent w-full"
+            />
+          </div>
+        </div>
+      </div>
+      <div class="mod6 flex-col"></div>
+      <div class="mod7 flex-col">
+        <div class="main12 flex-row">
+          <div class="txt12">
+            <input
+              type="number"
+              v-model.number="max_2"
+              placeholder=""
+              class="bg-transparent w-full"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="group-title mt-8">期限</div>
+    <SelectList
+      class="mt-5"
+      :list="peridList"
+      :selecteds="selectedPerids"
+      :setSelecteds="setSelectedPerids"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import SelectList from "@/components/SelectList/index.vue";
+export default defineComponent({
+  components: {
+    SelectList,
+  },
+  props: {
+    bankList: Array,
+    selectedBanks: Array,
+    setBanks: Function,
+    peridList: Array,
+    selectedPerids: Array,
+    setSelectedPerids: Function,
+    min: [Number, String],
+    max: [Number, String],
+    setMin: {
+      type: Function,
+      required: true,
+    },
+    setMax: {
+      type: Function,
+      required: true,
+    },
+    min2: [Number, String],
+    max2: [Number, String],
+    setMin2: {
+      type: Function,
+      required: true,
+    },
+    setMax2: {
+      type: Function,
+      required: true,
+    },
+  },
+  computed: {
+    min_: {
+      get(): number | string | undefined {
+        return this.min;
+      },
+      set(v: number | string): void {
+        this.setMin(v);
+      },
+    },
+    max_: {
+      get(): number | string | undefined {
+        return this.max;
+      },
+      set(v: number | string): void {
+        this.setMax(v);
+      },
+    },
+    min_2: {
+      get(): number | string | undefined {
+        return this.min2;
+      },
+      set(v: number | string): void {
+        this.setMin2(v);
+      },
+    },
+    max_2: {
+      get(): number | string | undefined {
+        return this.max2;
+      },
+      set(v: number | string): void {
+        this.setMax2(v);
+      },
+    },
+  },
+});
+</script>
+<style lang="less" scoped>
+.group-title {
+  font-size: 14px;
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 500;
+  color: #1b1f37;
+}
+
+.section10 {
+  z-index: auto;
+  width: 282px;
+  height: 40px;
+  justify-content: space-between;
+  margin-top: 20px;
+}
+.mod5 {
+  z-index: 136;
+  height: 40px;
+  border-radius: 5px;
+  background-color: rgba(247, 247, 250, 1);
+  width: 116px;
+  justify-content: center;
+  align-items: flex-end;
+  padding-right: 10px;
+}
+.layer4 {
+  z-index: auto;
+  width: 82px;
+  height: 20px;
+  justify-content: space-between;
+}
+.word24 {
+  z-index: 140;
+  width: 56px;
+  display: block;
+  overflow-wrap: break-word;
+  font-size: 14px;
+  font-family: PingFangSC-Regular;
+  white-space: nowrap;
+  color: #1b1f37;
+  line-height: 20px;
+  text-align: left;
+}
+.word25 {
+  z-index: 138;
+  width: 14px;
+  display: block;
+  overflow-wrap: break-word;
+  font-size: 14px;
+  color: #1b1f37;
+  font-family: PingFangSC-Regular;
+  white-space: nowrap;
+  line-height: 20px;
+  text-align: left;
+}
+.mod6 {
+  z-index: 145;
+  width: 14px;
+  height: 1px;
+  background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPnga0e9464c2bc2666ea94aaa969a4fbb2853a62a3a30b32f0a92310f37426eb2d6)
+    0px 0px no-repeat;
+  margin-top: 20px;
+}
+.mod7 {
+  z-index: 139;
+  height: 40px;
+  border-radius: 5px;
+  background-color: rgba(247, 247, 250, 1);
+  width: 116px;
+  justify-content: center;
+  align-items: flex-end;
+  padding-right: 10px;
+}
+.main12 {
+  z-index: auto;
+  width: 76px;
+  height: 20px;
+  justify-content: space-between;
+}
+.txt12 {
+  z-index: 143;
+  width: 56px;
+  display: block;
+  overflow-wrap: break-word;
+  color: #1b1f37;
+  font-size: 14px;
+  font-family: PingFangSC-Regular;
+  white-space: nowrap;
+  line-height: 20px;
+  text-align: left;
+}
+.word26 {
+  z-index: 141;
+  width: 14px;
+  display: block;
+  overflow-wrap: break-word;
+  color: #1b1f37;
+  font-size: 14px;
+  font-family: PingFangSC-Regular;
+  white-space: nowrap;
+  line-height: 20px;
+  text-align: left;
+}
+</style>
\ No newline at end of file

src/router/index.ts

@@ -41,6 +41,11 @@ const routes: Array<RouteRecordRaw> = [
       },
     ],
   },
+  {
+    path: '/loanList',
+    name: 'LoanList',
+    component: ()=>import("@/views/LoanList/index.vue")
+  },
   // {
   //   path: '/fnsList',
   //   name: 'FnsList',

src/views/withMenu/Loan/index.vue

@@ -61,7 +61,11 @@
       </div>
       <GroupTitle title="热门贷款" class="mt-2.5" iconName="" />
       <LoanHotSwipe class="mt-5" />
-      <GroupTitle title="贷款精选" class="mb-2.5" />
+      <GroupTitle
+        title="贷款精选"
+        class="mb-2.5"
+        @seeMore="$router.push({ name: 'LoanList' })"
+      />
       <LoanCard v-for="n in 3" :key="n" class="mt-2.5" />
 
       <GroupTitle title="精彩活动" class="mt-2.5" iconName="" />