From c5aaf07249288d0fc2865fe15c9c32ebe62ef7e2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Cgrape=E2=80=9D?= <18746553572@163.com> Date: Wed, 31 Aug 2022 10:03:47 +0800 Subject: [PATCH] =?UTF-8?q?=E9=A6=96=E9=A1=B5card?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/Picket.vue | 19 +++- src/components/common/Picket2.vue | 120 -------------------------- src/services/component-vue.service.ts | 3 +- src/views/main/Main.vue | 53 +++++------- 4 files changed, 41 insertions(+), 154 deletions(-) delete mode 100644 src/components/common/Picket2.vue diff --git a/src/components/common/Picket.vue b/src/components/common/Picket.vue index 28cb856..c15576d 100644 --- a/src/components/common/Picket.vue +++ b/src/components/common/Picket.vue @@ -26,6 +26,19 @@ <van-col span="8" class="loantermlot">å‚考利率</van-col> <van-col span="8" class="loantermlot">贷款期é™</van-col> </van-row> + + <van-row type="flex" justify="center" style="line-height: 30px;font-weight: 700;"> + <van-col span="8" class="loanterm" style="text-align: center;">{{ crowd }}</van-col> + <van-col span="8" class="interestrate" style="text-align: center;">{{ assureMeans }}</van-col> + <van-col span="8" class="loanterm" style="text-align: center;">{{ type }}</van-col> + </van-row> + <van-row type="flex" justify="center" style="line-height: 30px;color: #999999;font-weight: 400;font-size: 12px;"> + <van-col span="8" class="loantermlot">é¢å‘人群</van-col> + <van-col span="8" class="loantermlot">æ‹…ä¿æ–¹å¼</van-col> + <van-col span="8" class="loantermlot">贷款ç§ç±»</van-col> + </van-row> + + </div> </div> </template> @@ -44,6 +57,10 @@ export default class Picket extends Vue { @Prop({ default: "" }) limitrange: string | undefined //é¢åº¦èŒƒå›´ @Prop({ default: "" }) interestrate: string | undefined //利率 @Prop({ default: "" }) loanterm: string | undefined //è´·æ¬¾æœŸé™ + @Prop({ default: "" }) crowd: string | undefined //é¢å‘人群 + @Prop({ default: "" }) assureMeans: string | undefined //æ‹…ä¿æ–¹å¼ + @Prop({ default: "" }) type: string | undefined //贷款ç§ç±» + //调用父组件的值 @Emit("onClickPicket") onClickPicket(){} @@ -52,7 +69,7 @@ export default class Picket extends Vue { </script> <style scoped lang="scss"> .card { - height: 130px; + height: 200px; width: 98%; margin: 0% auto; background: inherit; diff --git a/src/components/common/Picket2.vue b/src/components/common/Picket2.vue deleted file mode 100644 index 205d3e0..0000000 --- a/src/components/common/Picket2.vue +++ /dev/null @@ -1,120 +0,0 @@ -<!-- - * @Author: jiangzaicheng jiangzaicheng_jzc@163.com - * @Date: 2022-07-04 16:24:00 - * @LastEditors: jiangzaicheng jiangzaicheng_jzc@163.com - * @LastEditTime: 2022-08-18 13:55:42 - * @FilePath: \mcep-h5\src\components\common\Tatle.vue - * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看é…ç½® 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE ---> -<template> - <!-- <div> --> - <div class="d-tatle"> - <div class="card" @click="onClickPicket()"> - <van-row> - <van-col span="24" class="priductName">{{ productname }}</van-col> - </van-row> - <div class="describe" style="line-height: 30px;"> - <div class="description">{{ describe }}</div> - </div> - <van-row type="flex" justify="center" style="line-height: 30px;font-weight: 700;"> - <van-col span="8" class="loanterm" style="text-align: center;">{{ limitrange }}</van-col> - <van-col span="8" class="interestrate" style="text-align: center;">{{ interestrate }}</van-col> - <van-col span="8" class="loanterm" style="text-align: center;">{{ loanterm }}</van-col> - </van-row> - <van-row type="flex" justify="center" style="line-height: 30px;color: #999999;font-weight: 400;font-size: 12px;"> - <van-col span="8" class="loantermlot">é¢å‘人群</van-col> - <van-col span="8" class="loantermlot">æ‹…ä¿æ–¹å¼</van-col> - <van-col span="8" class="loantermlot">贷款期é™</van-col> - </van-row> - </div> - </div> -</template> - -<script lang="ts"> -import { Component, Vue, Prop, Watch, Emit } from "vue-property-decorator"; -/* -* title -*/ -@Component({ - name: "Picket2", -}) -export default class Picket extends Vue { - @Prop({ default: "" }) productname: string | undefined //产å“åç§° - @Prop({ default: "" }) describe: string | undefined //æè¿° - @Prop({ default: "" }) limitrange: string | undefined //é¢åº¦èŒƒå›´ - @Prop({ default: "" }) interestrate: string | undefined //利率 - @Prop({ default: "" }) loanterm: string | undefined //è´·æ¬¾æœŸé™ - //调用父组件的值 - @Emit("onClickPicket") - onClickPicket(){} - -} -</script> -<style scoped lang="scss"> -.card { - height: 130px; - width: 98%; - margin: 0% auto; - background: inherit; - background-color: rgba(255, 255, 255, 1); - border: none; - border-radius: 4px; - -moz-box-shadow: 0px 0px; - box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); - - -} -.priductName{ - font-size: 16px; - text-align: left; - //margin-left: 3%; - font-weight: 600; - margin: 2% 0% 2% 4%; - text-rendering: optimizeLegibility; - font-feature-settings: "kern" 1; - -webkit-font-feature-settings: "kern"; - -moz-font-feature-settings: "kern"; - -moz-font-feature-settings: "kern=1"; - font-kerning: normal; -} -// .describe{ -// background: #eaf5ff; -// } -.description{ - background: #eaf5ff; - font-size: 12px; - margin-left: 3%; - color: #1890FF; - text-rendering: optimizeLegibility; - font-feature-settings: "kern" 1; - -webkit-font-feature-settings: "kern"; - -moz-font-feature-settings: "kern"; - -moz-font-feature-settings: "kern=1"; - font-kerning: normal; - // width: 50%; - border-radius: 4px; - padding-left:1%; - // text-align: center; -} -.limitrange{ - // margin-left: 3%; - align-items: center; - font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif; - font-weight: 700; - font-style: normal; - font-size: 20px; - color: #FF7628; - text-rendering: optimizeLegibility; - font-feature-settings: "kern" 1; - -webkit-font-feature-settings: "kern"; - -moz-font-feature-settings: "kern"; - -moz-font-feature-settings: "kern=1"; - font-kerning: normal; -} -.van-col--8 { - width: 32%; -} -.loantermlot{ - text-align: center; -} -</style> diff --git a/src/services/component-vue.service.ts b/src/services/component-vue.service.ts index ce499af..b640512 100644 --- a/src/services/component-vue.service.ts +++ b/src/services/component-vue.service.ts @@ -22,7 +22,7 @@ import AnchorNav from "@/components/general/AnchorNav.vue"; import * as echarts from "echarts"; import Tatle from "@/components/common/Tatle.vue"; import picket from "@/components/common/Picket.vue"; -import picket2 from "@/components/common/Picket2.vue"; + import ant from "ant-design-vue/es/locale/zh_CN" import Tool from "@/components/common/Tool.vue"; import Bottom from "@/components/common/Bottom.vue"; @@ -102,7 +102,6 @@ class ComponentVueService { Vue.component("anchor-nav", AnchorNav); Vue.component("tatle-bar", Tatle); Vue.component("picket-bar", picket); - Vue.component("picket-bar2", picket2); Vue.component("tools-bar", Tool); Vue.component("bottom-bar", Bottom); Vue.component("person-bar", Person); diff --git a/src/views/main/Main.vue b/src/views/main/Main.vue index 43b1f36..f891287 100644 --- a/src/views/main/Main.vue +++ b/src/views/main/Main.vue @@ -60,7 +60,7 @@ <span style="padding:20px 16px; font-size: 18px; font-weight: 600; margin-left: 4% width: 30%; height:44px;" >推è产å“</span> <van-cell - style="font-size: 18px; padding:18px 16px; width: 50%; " + style="font-size: 18px; padding:18px 16px; width: 60%; " :value="outcsinfo.place" @click="onAddress"> @@ -313,28 +313,13 @@ :limitrange="item.limitrange" :interestrate="item.interestrate" :loanterm="item.loanterm" + :crowd="item.crowd" + :assureMeans="item.assureMeans" + :type="item.type" @onClickPicket="onClickPicket" ></picket-bar> </div> - - <div - v-for="(item, index) in productList2" - :key="index" - style="margin: 4% auto" - > - <picket-bar2 - :productname="item.productname" - :describe="item.describe" - :limitrange="item.limitrange" - :interestrate="item.interestrate" - :loanterm="item.loanterm" - @onClickPicket="onClickPicket" - ></picket-bar2> - </div> - - - </scroller-view> </div> </div> @@ -529,29 +514,35 @@ export default class Main extends Vue { limitrange: "1~500万", //é¢åº¦èŒƒå›´ interestrate: "2%~4%", //利率 loanterm: "1~36个月", //è´·æ¬¾æœŸé™ - } - - ]; - - productList2: any = [ - + crowd: "ç»è¥ä¼ä¸š",//é¢å‘人群 + assureMeans: "抵押", // æ‹…ä¿æ–¹å¼ + type:"消费贷",//贷款ç§ç±» + }, { - productname: "“ä¼ä¸šä¹‹å…´â€æµåŠ¨èµ„é‡‘è´·æ¬¾", //产å“åç§° + productname: "“ä¼ä¸šä¹‹æ˜Ÿâ€æµåŠ¨èµ„é‡‘è´·æ¬¾", //产å“åç§° describe: "é¢åº¦è¾ƒå¤§ åˆ©çŽ‡ä¼˜æƒ ", //æè¿° - limitrange: "ç»è¥ä¼ä¸š", //é¢å‘人群 TODO å—æ®µå - interestrate: "抵押", //æ‹…ä¿æ–¹å¼ TODO å—æ®µå + limitrange: "1~500万", //é¢åº¦èŒƒå›´ + interestrate: "2%~4%", //利率 loanterm: "1~36个月", //è´·æ¬¾æœŸé™ + crowd: "ç»è¥ä¼ä¸š",//é¢å‘人群 + assureMeans: "抵押", // æ‹…ä¿æ–¹å¼ + type:"消费贷",//贷款ç§ç±» }, - { productname: "白领贷", //产å“åç§° describe: "手ç»ç®€å• è½»æ¾æ“作 éšç”¨éšè´· 安全å¯é ", //æè¿° - limitrange: "ç»è¥ä¼ä¸š", //é¢å‘人群 TODO å—æ®µå - interestrate: "抵押", //æ‹…ä¿æ–¹å¼ TODO å—æ®µå + limitrange: "1~500万", //é¢åº¦èŒƒå›´ + interestrate: "2%~4%", //利率 loanterm: "1~36个月", //è´·æ¬¾æœŸé™ + crowd: "个人",//é¢å‘人群 + assureMeans: "抵押", // æ‹…ä¿æ–¹å¼ + type:"金èžè´·",//贷款ç§ç±» }, + ]; + + //按钮 tabbarlist: any = { name: "首页", -- 2.22.0