Skip to content

polysoft-nafmii / polysoft-h5

Go to a project
Commit 9a12a481 by fanx
Options

fixed conflict

2 parents 11cbba4f 0124a4ef
Inline Side-by-side
Showing 17 changed files with 804 additions and 33 deletions
src/assets/css/sprite.less
......@@ -5,10 +5,13 @@
.icon-bg-navigation { width: 828px; height: 176px; background-position: -848px -566px; }
.icon-bg-search { width: 828px; height: 186px; background-position: -848px -360px; }
.icon-email { width: 36px; height: 36px; background-position: -344px -812px; }
.icon-icon-arrow-right { width: 10px; height: 18px; background-position: -948px -762px; }
.icon-icon-classify { width: 30px; height: 30px; background-position: -848px -762px; }
.icon-icon-clock { width: 30px; height: 30px; background-position: -898px -762px; }
.icon-logo { width: 224px; height: 224px; background-position: 0px -812px; }
.icon-password { width: 36px; height: 36px; background-position: -400px -812px; }
.icon-tel { width: 36px; height: 36px; background-position: -456px -812px; }
.icon-user-question { width: 32px; height: 36px; background-position: -624px -812px; }
.icon-user { width: 36px; height: 36px; background-position: -456px -812px; }
.icon-verification { width: 36px; height: 36px; background-position: -512px -812px; }
.icon-user { width: 36px; height: 36px; background-position: -512px -812px; }
.icon-verification { width: 36px; height: 36px; background-position: -568px -812px; }
.icon-wechat { width: 80px; height: 78px; background-position: -244px -812px; }
\ No newline at end of file
.icon-tel { width: 36px; height: 36px; background-position: -568px -812px; }
\ No newline at end of file
src/assets/images/sprite.png
src/assets/images/sprite.png

469 KB | W: | H:

src/assets/images/sprite.png

473 KB | W: | H:

src/assets/images/sprite.png
src/assets/images/sprite.png
src/assets/images/sprite.png
src/assets/images/sprite.png
  • 2-up
  • Swipe
  • Onion skin
src/components/DataListItem.vue 0 → 100644
<template>
<section class="data-list-item" @click="$emit('click')">
<div class="item-title">
<div class="title-tag">
<slot name="tag"></slot>
</div>
<span class="title-content" v-indent="10">{{data.title}}</span>
</div>
<div class="item-bottom">
<div class="bottom-content">
<slot v-bind:value="data" name="bottomLeft" />
<template v-if="!$slots.bottomLeft">
<img class="bottom-icon" src="@/assets/icon/icon_clock.png">
<span class="bottom-text">{{dateText}}{{data.date}}</span>
</template>
</div>
<div class="bottom-content">
<slot v-bind:value="data" name="bottomRight" />
<template v-if="!$slots.bottomRight">
<img class="bottom-icon" src="@/assets/icon/icon_classify.png">
<span>{{data.dataType}}</span>
</template>
</div>
</div>
</section>
</template>
<script>
export default {
name: 'DataListItem',
props: {
data: {
type: Object,
default: () => { return {} }
},
dateText: {
type: String
},
tag: {
type: String
}
},
data () {
return {}
},
methods: {
},
directives: {
indent: {
inserted (el, binding) {
setTimeout(() => {
const nodes = el.previousElementSibling.childNodes
const data = { width: 0 }
for (const node of nodes) {
data.width = data.width + node.offsetWidth
}
if (!data.width) return
const indentSize = data.width + (binding.value || 0)
console.log(indentSize);
el.style.textIndent = `${indentSize}px`
}, 0);
}
}
}
}
</script>
<style lang="less" scoped>
@import '~@/assets/css/mixins.less';
@PaddingSize: 11px;
.data-list-item {
padding: @PaddingSize 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
.item-title {
display: flex;
flex-wrap: wrap;
align-items: center;
line-height: 25px;
position: relative;
.title-tag {
position: absolute;
left: 0;
top: 0;
bottom: 0;
// margin-right: 10px;
}
.title-content {
font-size: 16px;
color: #222222;
line-height: 25px;
.line-clamp(2);
}
}
.item-bottom {
padding-top: 10px;
display: flex;
justify-content: space-between;
.bottom-content {
display: flex;
align-items: center;
color: #999999;
line-height: 16px;
font-size: 12px;
@IconSize: 15px;
.bottom-icon {
width: @IconSize;
height: @IconSize;
margin-right: 7px;
}
}
}
}
</style>
\ No newline at end of file
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/utils/vant-ui.js
......@@ -19,7 +19,9 @@ import {
Steps,
Checkbox,
Picker,
Popup
Popup,
Swipe,
SwipeItem
} from 'vant'
import NafmHeader from '@/components/NafmHeader'
......@@ -29,7 +31,7 @@ import FooterBottom from '@/components/FooterBottom'
[NafmHeader, FooterBottom].forEach(item => Vue.component(item.name, item));
// 默认vant组件
[Loading, Lazyload, Tab, Tabs, Toast, Dialog, Icon, Form, Field, Switch, Overlay, Cell, CellGroup, ActionSheet, Button, Step, Steps, Checkbox, Picker, Popup].forEach(item => Vue.use(item))
[Loading, Lazyload, Tab, Tabs, Toast, Dialog, Icon, Form, Field, Switch, Overlay, Cell, CellGroup, ActionSheet, Button, Step, Steps, Checkbox, Picker, Popup, Swipe, SwipeItem].forEach(item => Vue.use(item))
// 先预制，后期做统一调整
Object.assign(window, {
......
src/views/home/components/DataModule.vue 0 → 100644
<template>
<section class="data-module">
<div class="module-top-container">
<div class="module-top-left">
<span class="module-name">{{name}}</span>
<span v-if="isTop" class="module-top-btn">置顶</span>
</div>
<div class="module-more">
<span>更多</span>
</div>
</div>
<div class="module-content-container">
<DataListItem v-for="(item, idx) in data.list" :key="idx" :data="item" :dateText="dateText">
<template v-if="item.isRecommend" v-slot:tag>
<span class="item-recommend">推荐</span>
</template>
</DataListItem>
</div>
</section>
</template>
<script>
import DataListItem from '@/components/DataListItem'
export default {
name: 'DataModule',
components: { DataListItem },
props: {
name: {
type: String,
default: '协会动态'
},
isTop: {
type: Boolean,
default: false
},
dateText: {
type: String,
default: '更新日期：'
}
},
data () {
return {
data: {
name: '协会动态',
isTop: true,
list: [
{
isRecommend: true,
title: '创新推出碳中和债，助理实现30·60目标创新推出碳中和债，助理实现30·60目标创新推出碳中和债，助理实现30·60目标',
date: '2020-02-02',
dataType: '产品创新'
},
{
isRecommend: false,
title: '创新推出碳中和债，助理实现30·60目标创新推出碳中和60目标',
date: '2020-02-02',
dataType: '产品创新'
},
{
isRecommend: false,
title: '创新推出碳中和债，助理实现30·60目标出',
date: '2020-02-02',
dataType: '产品创新'
},
]
}
}
},
methods: {
}
}
</script>
<style lang="less" scoped>
@import '~@/assets/css/mixins.less';
@ModuleTop: 30px;
.data-module {
padding-top: @ModuleTop;
.module-top-container {
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #135faa;
.module-top-left {
display: flex;
align-items: center;
margin-bottom: -0.5px;
.module-name {
padding-bottom: 2px;
box-sizing: border-box;
font-size: 19px;
color: #222222;
line-height: 26px;
border-bottom: 2.5px solid #135faa;
}
.module-top-btn {
margin-left: 15px;
height: 17px;
line-height: 15px;
border-radius: 10px;
color: #135faa;
font-size: 12px;
padding: 0 5px;
text-align: center;
border: 0.5px solid #135faa;
}
}
.module-more {
font-size: 12px;
color: #999999;
}
}
}
.module-content-container {
.item-recommend {
height: 18px;
line-height: 18px;
font-size: 10px;
color: white;
padding: 0 7px;
border-radius: 8px;
background: #ff4038;
text-align: center;
}
.content-item {
padding-top: 14px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
.item-title {
display: flex;
flex-wrap: wrap;
align-items: center;
line-height: 25px;
position: relative;
.item-recommend {
position: absolute;
left: 0;
top: 3.5px;
height: 18px;
line-height: 18px;
font-size: 10px;
color: white;
padding: 0 7px;
border-radius: 8px;
background: #ff4038;
text-align: center;
margin-right: 10px;
}
.item-title-content {
font-size: 16px;
color: #222222;
line-height: 25px;
.line-clamp(2);
}
&.item-recommend {
.item-title-content {
text-indent: 50px;
}
}
}
.item-content-bottom {
padding-top: 10px;
display: flex;
justify-content: space-between;
.item-bottom-item {
display: flex;
align-items: center;
@IconSize: 15px;
.item-bottom-icon {
width: @IconSize;
height: @IconSize;
}
.item-bottom-text {
line-height: 16px;
font-size: 12px;
color: #999999;
margin-left: 7px;
}
}
}
}
}
</style>
\ No newline at end of file
src/views/home/components/HomeBanner.vue 0 → 100644
<template>
<section class="home-banner">
<van-swipe class="banner-swiper" :autoplay="autoplay" lazy-render @change="handleChange">
<van-swipe-item class="swiper-item" v-for="(item, idx) in banners" :key="idx">
<img v-if="item.imgUrl" class="banner-img" :src="item.imgUrl" @click="handleItem(item)" />
<div v-else class="banner-img white">
<div class="banner-img skeleton"></div>
</div>
</van-swipe-item>
<template #indicator>
<div class="nafmii-indicator">
<span class="indicator-item" :class="{'indicator-active': active == idx}" v-for="(item, idx) in banners" :key="idx" />
</div>
</template>
</van-swipe>
</section>
</template>
<script>
export default {
name: 'HomeBanner',
props: {
},
data () {
return {
autoplay: 5000,
active: 0,
banners: [
{},
{}
]
}
},
methods: {
handleItem (banner) {
},
handleChange (index) {
this.active = index
}
}
}
</script>
<style lang="less" scoped>
.white {
background: #eee;
}
@PaddingSize: 15;
.home-banner {
margin-top: @PaddingSize;
.banner-swiper {
.banner-img {
height: 145px;
border-radius: 5px;
width: 100%;
}
@PointSize: 5px;
.nafmii-indicator {
position: absolute;
left: 0;
bottom: 10px;
right: 0;
display: flex;
align-items: center;
justify-content: center;
height: @PointSize;
.indicator-item {
background: rgba(255, 255, 255, 0.4);
width: @PointSize;
height: @PointSize;
border-radius: calc(@PointSize / 2);
margin: 0 4px;
&.indicator-active {
background: white;
width: 21.5px;
}
}
}
}
}
</style>
\ No newline at end of file
src/views/home/components/MenuModule.vue 0 → 100644
<template>
<section class="menu-module">
<div class="menu-module-item" v-for="(item, idx) in datas" :key="idx" @click="handleClickItem(item)">
<img v-if="item.icon" class="menu-icon" :src="item.icon">
<div v-else class="menu-icon"></div>
<span v-if="item.name" class="menu-name">{{item.name}}</span>
<div v-else class="menu-name white"></div>
</div>
</section>
</template>
<script>
export default {
name: 'MenuModule',
props: {
},
data () {
return {
datas: [
{ id: 1, name: '', icon: '', type: '' },
{ id: 2, name: '', icon: '', type: '' },
{ id: 3, name: '', icon: '', type: '' },
{ id: 4, name: '', icon: '', type: '' },
{ id: 5, name: '', icon: '', type: '' },
{ id: 6, name: '', icon: '', type: '' },
{ id: 7, name: '', icon: '', type: '' },
{ id: 8, name: '', icon: '', type: '' },
]
}
},
methods: {
handleClickItem (item) {
}
}
}
</script>
<style lang="less" scoped>
.white {
width: 90%;
background: #eee;
}
.menu-module {
display: flex;
flex-wrap: wrap;
width: 100%;
padding-top: 5px;
@ModulePaddingTop: 25px;
.menu-module-item {
padding-top: @ModulePaddingTop;
width: 25%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
@IconSize: 50px;
.menu-icon {
background: #eee;
height: @IconSize;
width: @IconSize;
border-radius: calc(@IconSize / 2);
}
.menu-name {
display: block;
margin-top: 10px;
line-height: 20px;
min-height: 20px;
font-size: 14px;
text-align: center;
color: #444444;
}
}
}
</style>
\ No newline at end of file
src/views/home/index.vue
<template>
<div>
<nafm-header :leftArrow="false">
<div class="home nafmii-head-bg1">
<nafm-header :leftArrow="false" navClass="nafmii-head-bg1">
<div class="head-custom-container">
<div class="search-input-box" @click="handleSearch">
<div src="" alt="" class="search-icon" />
......@@ -10,43 +10,60 @@
</div>
</div>
</nafm-header>
<span @click="jumpLogin">跳转登录页面</span>
<FooterBottom />
<main>
<HomeBanner />
<MenuModule />
<DataModule />
<DataModule />
<DataModule />
</main>
</div>
</template>
<script>
import HomeBanner from './components/HomeBanner'
import MenuModule from './components/MenuModule'
import DataModule from './components/DataModule'
export default {
name: "Home",
components: {},
data() {
components: { HomeBanner, MenuModule, DataModule },
data () {
return {};
},
methods: {
jumpLogin() {
jumpLogin () {
this.$router.push({
name: "Login",
});
},
handleSearch() {},
handleSearch () { },
},
};
</script>
<style lang="less" scoped>
.home {
@PaddingSize: 15px;
main {
padding: 0 @PaddingSize;
}
}
@PaddingSize: 15px;
@HeadHeight: 33px;
@HeadHeight: 50px;
.head-custom-container {
width: 100%;
height: @HeadHeight;
padding: 0 @PaddingSize;
display: flex;
align-items: center;
@InputHeight: 33px;
.search-input-box {
width: 100%;
height: 100%;
border-radius: calc(@HeadHeight / 2);
height: @InputHeight;
border-radius: calc(@InputHeight / 2);
background-color: rgba(255, 255, 255, 0.2);
padding: 0 @PaddingSize;
display: flex;
......
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!