Skip to content

polysoft-nafmii / polysoft-h5

Go to a project
Commit 0cd326c6 by lixin
Options

资质详情以及主协议

1 parent 703fe819
Inline Side-by-side
Showing 6 changed files with 289 additions and 16 deletions
src/router/modules/qualification.js
......@@ -19,6 +19,13 @@ const qulificationRouter = [{
title: '资质查询'
},
component: () => import( /* webpackChunkName: "qulificationDetail" */ '@/views/qulification/detail.vue') // 资质详情
}, {
path: '/qulification/masterAgreement',
name: 'MasterAgreement',
meta: {
title: '资质查询'
},
component: () => import( /* webpackChunkName: "masterAgreement" */ '@/views/qulification/agreement/master') // NFAMII主协议
}]
export default qulificationRouter
src/views/member/memberLogin.vue
......@@ -7,15 +7,9 @@
<van-icon name="coupon-o" />
</div>
</van-field>
<van-field v-model="password" type="password" placeholder="请输入密码" :rules="[{ required: true, message: '请输入密码' }]">
<div slot="left-icon">
<van-icon name="edit" />
</div>
<van-field v-model="password" :left-icon="passwordIcon" type="password" placeholder="请输入密码" :rules="[{ required: true, message: '请输入密码' }]">
</van-field>
<van-field v-model="checkCode" placeholder="请输入验证码" :rules="[{ required: true, message: '请输入验证码' }]">
<div slot="left-icon">
<van-icon name="certificate" />
</div>
<van-field v-model="checkCode" :left-icon="verificationIcon" placeholder="请输入验证码" :rules="[{ required: true, message: '请输入验证码' }]">
<template #button>
<span>111111</span>
</template>
......@@ -24,7 +18,7 @@
提示：请输入贵单位会员系统的登录名及密码登录（单位会员）
</p>
<div style="margin: 16px;">
<van-button block type="info" native-type="submit" :disabled="isLogin">登录</van-button>
<van-button class="login_btn" block type="info" native-type="submit" :disabled="isLogin">登录</van-button>
</div>
</van-form>
<div class="membership_about">
......@@ -40,7 +34,9 @@ export default {
return {
code: '',
password: '',
checkCode: ''
checkCode: '',
passwordIcon: require('@/assets/icon/password.png'),
verificationIcon: require('@/assets/icon/verification.png')
}
},
computed: {
......@@ -87,6 +83,10 @@ export default {
margin-left: 20px;
margin-top: 16px;
}
.login_btn {
background: linear-gradient(to right, #25a3df, #106abc);
border: none;
}
}
.membership_about {
margin: 20px 0;
......
src/views/qulification/agreement/components/letterItem.vue 0 → 100644
<template>
<section class="agreement_item">
<h3 class="item_title">{{navItem.title}}</h3>
<main v-if="navItem.children" class="item_content">
<p v-for="(item, index) in navItem.children" :key="index">
<span class="title">{{item.title}}</span>
<span class="update_time">{{item.time}}</span>
</p>
</main>
</section>
</template>
<script>
export default {
data() {
return {
}
},
props: {
navItem: {
type: Object,
default: () => {
return {}
}
}
},
updated() {
console.log(this.navItem)
}
}
</script>
<style lang="less" scoped>
.agreement_item {
.item_title {
font-size: 13px;
padding: 10px 0;
color: #999999;
}
.item_content {
padding: 15px;
border-radius: 8px;
background-color: #ffffff;
box-shadow: 0px 0px 6px 0px rgba(2, 15, 41, 0.06);
p {
display: flex;
justify-content: space-between;
line-height: 30px;
}
.title {
font-size: 14px;
color: #333333;
}
.update_time {
font-size: 13px;
color: #666666;
}
}
}
</style>
src/views/qulification/agreement/components/timeItem.vue 0 → 100644
<template>
<section class="agreement_item">
<h3 class="item_title">{{agreementItem.time}}</h3>
<main v-if="agreementItem.children" class="item_content">
<p v-for="(item, index) in agreementItem.children" :key="index">
<span class="title">{{item.title}}</span>
<span v-if="item.manager" class="manager">{{item.manager}}</span>
</p>
</main>
</section>
</template>
<script>
export default {
data() {
return {
}
},
props: {
agreementItem: {
type: Object,
default: () => {
return {}
}
}
}
}
</script>
<style lang="less" scoped>
.agreement_item {
.item_title {
font-size: 13px;
padding: 10px 0;
color: #999999;
}
.item_content {
padding: 15px;
border-radius: 8px;
background-color: #ffffff;
box-shadow: 0px 0px 6px 0px rgba(2, 15, 41, 0.06);
p {
display: flex;
justify-content: space-between;
line-height: 30px;
}
.title {
font-size: 14px;
color: #333333;
}
.update_time {
font-size: 13px;
color: #666666;
}
}
}
</style>
src/views/qulification/agreement/master.vue 0 → 100644
<template>
<div class="master_agreement">
<NafmHeader title="《NAGMII主协议》" />
<nav class="bav_bar">
<div v-for="navItem in barList" :key="navItem.id" :class="actNav === navItem.id ? 'act_item' : 'nav_item'" @click="navSwitch(navItem.id)">
<p>{{navItem.title}}</p>
<div v-show="actNav === navItem.id" class="under_line"></div>
</div>
</nav>
<main v-if="actNav === 'time'">
<time-item v-for="(item, index) in timeAgreements" :key="index" :agreement-item="item">
</time-item>
</main>
<main v-if="actNav === 'letter'">
<letter-item v-for="(item, index) in letterAgreements" :key="index" :nav-item="item">
</letter-item>
</main>
<section class="remark">
<h3 class="title">备注：</h3>
<ul class="content">
<li>《NAFMII主协议》非法人产品管理人名单自2020年起进行公示</li>
<li>《债券回购主协议》非法人产品管理人名单自2018年起进行公示</li>
</ul>
</section>
</div>
</template>
<script>
export default {
data() {
return {
barList: [{
title: '按时间',
id: 'time'
}, {
title: '按首字母',
id: 'letter'
}],
actNav: 'time',
letterAgreements: [{
title: 'A',
children: [{
title: 'XXXXXXXXXXXXX公司',
time: '2020-03-03'
}, {
title: 'XXXXXXXXXXXXX公司',
time: '2020-03-04'
}, {
title: 'XXXXXXXXXXXXX公司',
time: '2020-03-05'
}, {
title: 'XXXXXXXXXXXXX公司',
time: '2020-03-06'
}, {
title: 'XXXXXXXXXXXXX公司',
time: '2020-03-07'
}]
}],
timeAgreements: [{
time: '2021-03-03',
children: [{
title: 'XXXXXXXXXXXXX公司'
}, {
title: 'XXXXXXXXXXXXX公司'
}, {
title: 'XXX产品',
manager: 'XXX'
}, {
title: 'XXXXXXXXXXXXX公司'
}]
}]
}
},
components: {
letterItem: ()=> import('./components/letterItem.vue'),
timeItem: ()=> import('./components/timeItem.vue')
},
methods: {
navSwitch(id) {
this.actNav = id
}
}
}
</script>
<style lang="less" scoped>
.master_agreement {
padding: 0 20px;
}
.bav_bar {
width: 384px;
margin: 0 auto;
display: flex;
justify-content: space-around;
font-size: 15px;
color: #ffffff;
background: blue;
.act_item {
font-size: 19px;
font-family: PingFangSC-Semibold;
}
.under_line {
width: 30px;
height: 2.5px;
background: #ffffff;
margin: 0 auto;
}
}
.remark {
line-height: 20px;
margin: 20px 0;
.title {
font-size: 14px;
color: #333333;
font-weight: bold;
}
.content {
font-size: 12px;
color: #999999;
}
}
</style>
src/views/qulification/detail.vue
......@@ -9,27 +9,30 @@
</van-cell>
<van-cell>
<span slot="title" class="label">是否会员</span>
<span class="org_type">是</span>
<span class="info">是</span>
</van-cell>
<van-cell>
<span slot="title" class="label">会籍类别</span>
<span class="org_type">{{qulificationDetail.memberType}}</span>
<span class="info">{{qulificationDetail.memberType}}</span>
</van-cell>
<van-cell>
<span slot="title" class="label">主承销商类型</span>
<span class="org_type">{{qulificationDetail.memberType}}</span>
<span class="info">{{qulificationDetail.memberType}}</span>
</van-cell>
<van-cell>
<span slot="title" class="label">做市商</span>
<span class="org_type">{{qulificationDetail.memberType}}</span>
<span class="info">{{qulificationDetail.memberType}}</span>
</van-cell>
<van-cell>
<span slot="title" class="label">信用风险缓释工具</span>
<span class="org_type">{{qulificationDetail.memberType}}</span>
<span class="info">{{qulificationDetail.memberType}}</span>
</van-cell>
<van-cell>
<span slot="title" class="label">已签署备案主协议</span>
<span class="org_type">{{qulificationDetail.memberType}}</span>
<span class="info">
<div class="master_agreement">《NAFMII主协议》</div>
{{qulificationDetail.memberType}}
</span>
</van-cell>
</van-cell-group>
</section>
......@@ -51,5 +54,30 @@ export default {
}
</script>
<style lang="less" scoped>
.detail_content {
.detail_title {
font-size: 16px;
color: #222222;
font-family: PingFangSC-Semibold;
border-left: 2.5px solid #135faa;
padding-left: 5px;
}
.org_type {
color: #999999;
font-size: 14px;
}
.label {
font-size: 14px;
color: #161818;
}
.info {
font-size: 14px;
color: #666666;
}
.master_agreement {
color: #245fae;
text-decoration: underline;
}
}
</style>
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!