Skip to content

M
mcep-h5
提交 6471890c 编写于 作者: “grape”'s avatar “grape”
浏览文件
操作

适配

上级 5c95f7db
展开全部 隐藏空白字符变更
内嵌 并排
正在显示 包含 388 行增加 和 47 行删除
src/assets/iconfont/demo_index.html
浏览文件 @ 6471890c
...@@ -54,6 +54,54 @@ ...@@ -54,6 +54,54 @@
<div class="content unicode" style="display: block;"> <div class="content unicode" style="display: block;">
<ul class="icon_lists dib-box"> <ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont">&#xedc1;</span>
<div class="name">降序</div>
<div class="code-name">&amp;#xedc1;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xedc2;</span>
<div class="name">未排序</div>
<div class="code-name">&amp;#xedc2;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xedc3;</span>
<div class="name">按钮-进入</div>
<div class="code-name">&amp;#xedc3;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xedc4;</span>
<div class="name">升序</div>
<div class="code-name">&amp;#xedc4;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xedb6;</span>
<div class="name">已还款</div>
<div class="code-name">&amp;#xedb6;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xedb7;</span>
<div class="name">不可见20x20px</div>
<div class="code-name">&amp;#xedb7;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xedb8;</span>
<div class="name">受理中</div>
<div class="code-name">&amp;#xedb8;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xedb9;</span>
<div class="name">已完成</div>
<div class="code-name">&amp;#xedb9;</div>
</li>
<li class="dib"> <li class="dib">
<span class="icon iconfont">&#xed8d;</span> <span class="icon iconfont">&#xed8d;</span>
<div class="name">未签订</div> <div class="name">未签订</div>
...@@ -960,9 +1008,9 @@ ...@@ -960,9 +1008,9 @@
<pre><code class="language-css" <pre><code class="language-css"
>@font-face { >@font-face {
font-family: 'iconfont'; font-family: 'iconfont';
src: url('iconfont.woff2?t=1660790093357') format('woff2'), src: url('iconfont.woff2?t=1662601281933') format('woff2'),
url('iconfont.woff?t=1660790093357') format('woff'), url('iconfont.woff?t=1662601281933') format('woff'),
url('iconfont.ttf?t=1660790093357') format('truetype'); url('iconfont.ttf?t=1662601281933') format('truetype');
} }
</code></pre> </code></pre>
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3> <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
...@@ -988,6 +1036,78 @@ ...@@ -988,6 +1036,78 @@
<div class="content font-class"> <div class="content font-class">
<ul class="icon_lists dib-box"> <ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont icon-jiangxu"></span>
<div class="name">
降序
</div>
<div class="code-name">.icon-jiangxu
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-weipaixu"></span>
<div class="name">
未排序
</div>
<div class="code-name">.icon-weipaixu
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-anniu-jinru"></span>
<div class="name">
按钮-进入
</div>
<div class="code-name">.icon-anniu-jinru
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-shengxu"></span>
<div class="name">
升序
</div>
<div class="code-name">.icon-shengxu
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-yihuankuan"></span>
<div class="name">
已还款
</div>
<div class="code-name">.icon-yihuankuan
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-bukejian20x20px"></span>
<div class="name">
不可见20x20px
</div>
<div class="code-name">.icon-bukejian20x20px
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-shoulizhong"></span>
<div class="name">
受理中
</div>
<div class="code-name">.icon-shoulizhong
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-yiwancheng"></span>
<div class="name">
已完成
</div>
<div class="code-name">.icon-yiwancheng
</div>
</li>
<li class="dib"> <li class="dib">
<span class="icon iconfont icon-weiqianding"></span> <span class="icon iconfont icon-weiqianding"></span>
<div class="name"> <div class="name">
...@@ -2347,6 +2467,70 @@ ...@@ -2347,6 +2467,70 @@
<div class="content symbol"> <div class="content symbol">
<ul class="icon_lists dib-box"> <ul class="icon_lists dib-box">
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-jiangxu"></use>
</svg>
<div class="name">降序</div>
<div class="code-name">#icon-jiangxu</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-weipaixu"></use>
</svg>
<div class="name">未排序</div>
<div class="code-name">#icon-weipaixu</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-anniu-jinru"></use>
</svg>
<div class="name">按钮-进入</div>
<div class="code-name">#icon-anniu-jinru</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-shengxu"></use>
</svg>
<div class="name">升序</div>
<div class="code-name">#icon-shengxu</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-yihuankuan"></use>
</svg>
<div class="name">已还款</div>
<div class="code-name">#icon-yihuankuan</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-bukejian20x20px"></use>
</svg>
<div class="name">不可见20x20px</div>
<div class="code-name">#icon-bukejian20x20px</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-shoulizhong"></use>
</svg>
<div class="name">受理中</div>
<div class="code-name">#icon-shoulizhong</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-yiwancheng"></use>
</svg>
<div class="name">已完成</div>
<div class="code-name">#icon-yiwancheng</div>
</li>
<li class="dib"> <li class="dib">
<svg class="icon svg-icon" aria-hidden="true"> <svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-weiqianding"></use> <use xlink:href="#icon-weiqianding"></use>
......
src/assets/iconfont/iconfont.css
浏览文件 @ 6471890c
@font-face { @font-face {
font-family: "iconfont"; /* Project id 3289090 */ font-family: "iconfont"; /* Project id 3289090 */
src: url('iconfont.woff2?t=1660790093357') format('woff2'), src: url('iconfont.woff2?t=1662601281933') format('woff2'),
url('iconfont.woff?t=1660790093357') format('woff'), url('iconfont.woff?t=1662601281933') format('woff'),
url('iconfont.ttf?t=1660790093357') format('truetype'); url('iconfont.ttf?t=1662601281933') format('truetype');
} }
.iconfont { .iconfont {
...@@ -13,6 +13,38 @@ ...@@ -13,6 +13,38 @@
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
.icon-jiangxu:before {
content: "\edc1";
}
.icon-weipaixu:before {
content: "\edc2";
}
.icon-anniu-jinru:before {
content: "\edc3";
}
.icon-shengxu:before {
content: "\edc4";
}
.icon-yihuankuan:before {
content: "\edb6";
}
.icon-bukejian20x20px:before {
content: "\edb7";
}
.icon-shoulizhong:before {
content: "\edb8";
}
.icon-yiwancheng:before {
content: "\edb9";
}
.icon-weiqianding:before { .icon-weiqianding:before {
content: "\ed8d"; content: "\ed8d";
} }
......
src/assets/iconfont/iconfont.js
浏览文件 @ 6471890c
此差异已折叠。
src/assets/iconfont/iconfont.json
浏览文件 @ 6471890c
...@@ -5,6 +5,62 @@ ...@@ -5,6 +5,62 @@
"css_prefix_text": "icon-", "css_prefix_text": "icon-",
"description": "", "description": "",
"glyphs": [ "glyphs": [
{
"icon_id": "31683324",
"name": "降序",
"font_class": "jiangxu",
"unicode": "edc1",
"unicode_decimal": 60865
},
{
"icon_id": "31683325",
"name": "未排序",
"font_class": "weipaixu",
"unicode": "edc2",
"unicode_decimal": 60866
},
{
"icon_id": "31683326",
"name": "按钮-进入",
"font_class": "anniu-jinru",
"unicode": "edc3",
"unicode_decimal": 60867
},
{
"icon_id": "31683328",
"name": "升序",
"font_class": "shengxu",
"unicode": "edc4",
"unicode_decimal": 60868
},
{
"icon_id": "31596248",
"name": "已还款",
"font_class": "yihuankuan",
"unicode": "edb6",
"unicode_decimal": 60854
},
{
"icon_id": "31596249",
"name": "不可见20x20px",
"font_class": "bukejian20x20px",
"unicode": "edb7",
"unicode_decimal": 60855
},
{
"icon_id": "31596250",
"name": "受理中",
"font_class": "shoulizhong",
"unicode": "edb8",
"unicode_decimal": 60856
},
{
"icon_id": "31596251",
"name": "已完成",
"font_class": "yiwancheng",
"unicode": "edb9",
"unicode_decimal": 60857
},
{ {
"icon_id": "30879721", "icon_id": "30879721",
"name": "未签订", "name": "未签订",
......
src/components/common/Picket.vue
浏览文件 @ 6471890c
...@@ -68,14 +68,19 @@ export default class Picket extends Vue { ...@@ -68,14 +68,19 @@ export default class Picket extends Vue {
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.d-tatle{
padding-top: 1vh;
padding-top: 1vh;
}
.card { .card {
height: 200px; height: 200px;
width: 98%; width: 98%;
margin: 0% auto; margin: 1% auto;
background: inherit; background: inherit;
background-color: rgba(255, 255, 255, 1); background-color: rgba(255, 255, 255, 1);
border: none; border: none;
border-radius: 4px; border-radius: 10px;
-moz-box-shadow: 0px 0px; -moz-box-shadow: 0px 0px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
......
src/components/common/ProductCard.vue
浏览文件 @ 6471890c
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
</van-row> </van-row>
<van-row type="flex" justify="center" class="button"> <van-row type="flex" justify="center" class="button">
<van-col span="24"> <van-col span="24">
<van-button type="info" @click="lodiing()">立即申请</van-button> <van-button type="info" style="background-color:3672F1" @click="lodiing()">立即申请</van-button>
</van-col> </van-col>
</van-row> </van-row>
</div> </div>
......
src/views/DepositInterestTrial/CountResult.vue
浏览文件 @ 6471890c
...@@ -5,12 +5,13 @@ ...@@ -5,12 +5,13 @@
<template> <template>
<div> <div>
<div class="rarle"> <div class="rarle">
<div style="width:100%;height: calc(35vh);background: linear-gradient(90deg, #76befa 0%, #3672f1 99%);"> <div style="width:100%;height: calc(25vh);background: linear-gradient(#0B54E0 50px , #ffffff);">
<tatle-bar :tatle="titleName" :tatleflag="titleflag" > <tatle-bar :tatle="titleName" :tatleflag="titleflag" style="background: #0B54E0" >
</tatle-bar> </tatle-bar>
</div> </div>
<div class="card"> <div class="card">
<div style="margin-top: 4%; margin-left: 20px"><span style="color: #9e9e9e">贷款利息(元)</span><span v-if="flag" style="margin-left: 130px; color: #3672F1" @click="toSeeRepayPlan">查看还款计划</span></div>
<div style="margin-top: 27px; margin-left: 20px"><span style="color: #9e9e9e">贷款利息(元)</span><span v-if="flag" style="margin-left: 130px; color: #3672F1" @click="toSeeRepayPlan">查看还款计划</span></div>
<div style="margin-top: 0px; margin-left: 20px"><span style="color: #FFA121;font-size: 24px;font-family: '思源黑体 Bold', '思源黑体 Regular', '思源黑体'; <div style="margin-top: 0px; margin-left: 20px"><span style="color: #FFA121;font-size: 24px;font-family: '思源黑体 Bold', '思源黑体 Regular', '思源黑体';
font-weight: 700; font-weight: 700;
font-style: normal;">{{result}}</span></div> font-style: normal;">{{result}}</span></div>
...@@ -19,7 +20,7 @@ ...@@ -19,7 +20,7 @@
font-weight: 700; font-weight: 700;
font-style: normal;">{{resultPlus}}</span></div> font-style: normal;">{{resultPlus}}</span></div>
</div> </div>
<div style="margin-top: 50px; margin-left: 30px; margin-right: 30px"> <div style="margin-top: 125px; margin-left: 30px; margin-right: 30px">
<van-row> <van-row>
<van-col span="12" style="color: #999999">贷款金额(元)</van-col> <van-col span="12" style="color: #999999">贷款金额(元)</van-col>
<van-col span="12" style="text-align: right">{{loanAmt}}</van-col> <van-col span="12" style="text-align: right">{{loanAmt}}</van-col>
...@@ -51,12 +52,24 @@ ...@@ -51,12 +52,24 @@
<!-- </div>--> <!-- </div>-->
<div style="margin-top: 20px; margin-left: 30px; margin-right: 30px"> <div style="margin-top: 20px; margin-left: 30px; margin-right: 30px">
<van-row> <van-row>
<van-col span="12" style="color: #999999">还款方式</van-col> <van-col span="12" style="color: #999999 ">还款方式</van-col>
<van-col span="12" style="text-align: right">{{repayType}}</van-col> <van-col span="12" style="text-align: right">{{repayType}}</van-col>
</van-row> </van-row>
</div> </div>
<van-button style="width: 90%;margin-left: 5%;background-color: #1890ff;position: absolute;margin-top: 36%;height: 6%;border-radius: 5px;" type="primary" @click="returnCount">确定</van-button>
<van-button style="width: 90%;margin-left: 5%;position: absolute;margin-top: 50%;height: 6%;border-radius: 5px;border-color: #1890ff" @click="returnCount"><span style="color: #1890ff">重新计算</span></van-button> <!-- <div style="margin-top:20px;"> -->
<van-button style="width: 90%;margin-left: 5%;margin-top:30px;background-color: #3672F1;border-radius: 5px;border:0px;"
type="primary" @click="returnCount">确定</van-button>
<!-- </div> -->
<!-- <div style="margin-top:20px;"> -->
<van-button style="width: 90%;margin-left: 5%;margin-top:20px;border-radius: 5px;border-color: #3672F1"
@click="returnCount"><span style="color: #3672F1">重新计算</span></van-button>
<!-- </div> -->
</div> </div>
</div> </div>
</template> </template>
...@@ -142,12 +155,14 @@ export default class CountResult extends Vue{ ...@@ -142,12 +155,14 @@ export default class CountResult extends Vue{
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.card{ ::v-deep .card{
position: absolute; position: absolute;
background-color: #ffffff; background-color: #ffffff;
width: 90%; width: 90%;
margin-left: 5%; margin-left: 5%;
margin-top: -30%; margin-top: -12vh;
height: 180px;
border-radius: 10px; border-radius: 10px;
} }
</style> </style>
src/views/main/Main.vue
浏览文件 @ 6471890c
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
--> -->
<template> <template>
<div class="d-page d-flex flex-column" style="background-color:background: linear-gradient(to bottom, #0B54E0 , #ffffff);"> <div class="d-page d-flex flex-column" style="background-color:background: linear-gradient(to bottom, #0B54E0 50px , #ffffff);">
<div class="rarle"> <div class="rarle">
<tools-bar :title="tatleName" style="width: 100%; height: calc(25vh)"> <tools-bar :title="tatleName" style="width: 100%; height: calc(25vh)">
</tools-bar> </tools-bar>
...@@ -54,27 +54,33 @@ ...@@ -54,27 +54,33 @@
</van-row> </van-row>
</div> </div>
<div style=" box-shadow: rgb(0 0 0 / 10%) 0px 2px 12px 0px;" > <div >
<div style=" box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);" >
<div class="prudect" style="background-color: #ffffff;"> <div class="prudect" style="background-color: #ffffff;">
<van-row type="flex" justify="space-between" align="center"> <van-row type="flex" justify="space-between" align="center">
<!--
<van-col span="10"> <van-col span="10">
<span color="#3672F1" style=" padding-left:10px; font-size: 18px; font-weight: 600; " >推荐产品</span> <span color="#3672F1" style=" padding-left:10px; font-size: 16px; font-weight: 600; " >推荐产品</span>
</van-col> </van-col> -->
<van-col span="14"> <!-- <van-col span="14"> -->
<van-cell <van-cell
style="font-size: 18px; " style="font-size: 12px;"
:value="outcsinfo.place" :value="outcsinfo.place"
@click="onAddress"> @click="onAddress">
<template #title>
<span color="#3672F1" style="font-size: 16px; font-weight: 600; " >推荐产品</span>
</template>
<template #right-icon> <template #right-icon>
<van-icon name="location-o" /> <van-icon name="location-o" size="14px"/>
</template> </template>
</van-cell> </van-cell>
</van-col> <!-- </van-col> -->
</van-row> </van-row>
...@@ -103,23 +109,36 @@ ...@@ -103,23 +109,36 @@
</van-tabs> --> </van-tabs> -->
<van-row type="flex" class="tab" > <van-row type="flex" class="tab" >
<van-col span ="18">
<van-tabs @click="onClick" style="width:75%" title-active-color="black" title-inactive-color="black" line-width=0px >
<van-tabs @click="onClick" style="height: 44px;" title-active-color="black" title-inactive-color="black" line-width=0px >
<van-tab v-for="index in tabsList" :key="index.name" > <van-tab v-for="index in tabsList" :key="index.name" >
<template #title >{{index.name}} <van-icon :name="index.status===1? 'arrow-up' :'arrow-down'"/> <template #title >{{index.name}}
<!-- <van-icon size="10px" class="iconfont" class-prefix="icon" :name="index.status===1? 'jiangxu' :'shengxu'"/> -->
<svg class="icon" aria-hidden="true" v-if = "index.status===1" >
<use xlink:href="#icon-jiangxu"></use>
</svg>
<svg class="icon" aria-hidden="true" v-if = "index.status===0" >
<use xlink:href="#icon-shengxu"></use>
</svg>
</template> </template>
</van-tab> </van-tab>
</van-tabs> </van-tabs>
</van-col>
<van-col span="6">
<van-dropdown-menu style="height: 44px; width:25%;" active-color="black" color="black"> <van-dropdown-menu style="height: 44px;" active-color="black" color="black">
<van-dropdown-item title="综合筛选" ref="item" > <van-dropdown-item title="综合筛选" ref="item" >
<div <div
class="application" class="application"
...@@ -299,22 +318,31 @@ ...@@ -299,22 +318,31 @@
<van-button square block type="default">重置</van-button> <van-button square block type="default">重置</van-button>
</van-col> </van-col>
<van-col span="12"> <van-col span="12">
<van-button square block type="info">确定</van-button> <van-button square block type="info" @click="onConfirm">确定</van-button>
</van-col> </van-col>
</van-row> </van-row>
</div> </div>
</van-dropdown-item> </van-dropdown-item>
</van-dropdown-menu> </van-dropdown-menu>
</van-col>
</van-row>
</van-row> </div>
</div> </div>
<scroller-view v-calculate-height pulldown="true" pullup="true" :height="10000" class="product" > <scroller-view v-calculate-height pulldown="true" pullup="true" :height="10000" class="product" >
<div <div
v-for="(item, index) in productList" v-for="(item, index) in productList"
:key="index" :key="index"
class="productItem"
> >
<picket-bar <picket-bar
:productname="item.productname" :productname="item.productname"
...@@ -336,13 +364,15 @@ ...@@ -336,13 +364,15 @@
<script lang="ts"> <script lang="ts">
import { Component, Vue } from "vue-property-decorator"; import { Component, Vue } from "vue-property-decorator";
import { ProductData } from "@/model/entity/ProductData"; import { ProductData } from "@/model/entity/ProductData";
import { i } from "mathjs"; import { i, im } from "mathjs";
import { Toast } from 'vant'; import { Toast } from 'vant';
import { Area } from "vant"; import { Area } from "vant";
import { Cell, CellGroup } from 'vant'; import { Cell, CellGroup } from 'vant';
import { Tabbar, TabbarItem } from 'vant'; import { Tabbar, TabbarItem } from 'vant';
import { Tab, Tabs } from 'vant'; import { Tab, Tabs } from 'vant';
import{area}from "../../model/domain/areaData"; import{area}from "../../model/domain/areaData";
import '../../assets/iconfont/iconfont.css'
import '../../assets/iconfont/iconfont.js'
Vue.use(Cell); Vue.use(Cell);
Vue.use(CellGroup); Vue.use(CellGroup);
Vue.use(Area); Vue.use(Area);
...@@ -396,6 +426,7 @@ export default class Main extends Vue { ...@@ -396,6 +426,7 @@ export default class Main extends Vue {
showAddress=false; showAddress=false;
onAddress(){ onAddress(){
this.showAddress=true this.showAddress=true
this.$refs.item
}; };
// 点击地址选择框的确认 // 点击地址选择框的确认
changeAddress(event:any){ changeAddress(event:any){
...@@ -692,10 +723,16 @@ export default class Main extends Vue { ...@@ -692,10 +723,16 @@ export default class Main extends Vue {
this.vanvcol44 = "vancoll"; this.vanvcol44 = "vancoll";
} }
} }
onClick(index:any) { onClick(index:any) {
this.tabsList[index].status=this.tabsList[index].status === 1?0:1 this.tabsList[index].status=this.tabsList[index].status === 1?0:1
Toast(this.tabsList[index].status===1?"升序":"降序"); // Toast(this.tabsList[index].status===1?"升序":"降序");
}
onConfirm() {
let myRef: any =this.$refs.item;
myRef.toggle(false);
} }
} }
</script> </script>
...@@ -828,11 +865,17 @@ export default class Main extends Vue { ...@@ -828,11 +865,17 @@ export default class Main extends Vue {
color: #1890ff; color: #1890ff;
text-align: right; text-align: right;
} }
::v-deep .productItem{
margin: 4% auto
::v-deep .van-cell__value {
position: relative;
overflow: hidden;
color: #1890ff;
text-align: right;
vertical-align: middle;
word-wrap: break-word;
} }
::v-deep .van-ellipsis { ::v-deep .van-ellipsis {
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
...@@ -840,5 +883,11 @@ export default class Main extends Vue { ...@@ -840,5 +883,11 @@ export default class Main extends Vue {
color: black; color: black;
} }
.icon{
width: 14px;
height: 14px;
}
</style> </style>
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或