Skip to content

X
x-training-new
提交 ef476662 authored 作者: lihuihui's avatar lihuihui
浏览文件
操作

feat: 产品分析页面开发

上级 e60e655a
显示空白字符变更
内嵌 并排
正在显示 包含 730 行增加 和 50 行删除
src/components/layout/Header.vue
浏览文件 @ ef476662
...@@ -45,8 +45,8 @@ export default { ...@@ -45,8 +45,8 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.app-header{ .app-header{
width:1360px; // width:1360px;
padding:30px 0 0; padding:30px 33px 0;
} }
.menu{ .menu{
width: 780px; width: 780px;
......
src/components/layout/Index.vue
浏览文件 @ ef476662
...@@ -20,7 +20,7 @@ export default { ...@@ -20,7 +20,7 @@ export default {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-height: 100vh; min-height: 100vh;
width:1360px; /* width:1360px; */
margin:0 auto; margin:0 auto;
} }
.app-layout-container { .app-layout-container {
......
src/modules/product-analysis/components/Box.vue 0 → 100644
浏览文件 @ ef476662
<template>
<div class="box-card">
<div>
<span class="title">{{ title }}</span>
</div>
<slot></slot>
</div>
</template>
<script>
export default {
props: {
title: { type: String }
}
}
</script>
<style lang="scss" scoped>
.box-card{
padding: 0 22px 30px;
position: relative;
margin-bottom: 30px;
&::after{
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 620px;
border-bottom: 1px dashed #C0C0C0;
}
.title{
font-size: 18px;
font-weight: bold;
color: #666666;
line-height: 100%;
position: relative;
&::after{
content: '';
position: absolute;
bottom: 4px;
left: 0;
width: 100%;
height: 5px;
background: rgba(104, 184, 164, .8)
}
}
}
</style>
src/modules/product-analysis/components/Compares.vue 0 → 100644
浏览文件 @ ef476662
<template>
<box title="业绩比较基准" class="compares-box">
<ul>
<li v-for="(item, index) in inputList" :key="index">
<div class="input-box">
<input type="text" class="input1" placeholder="请输入" v-model="item.input1">
<div class="icon-x"></div>
<div class="character-input">
<div class="character">%</div>
<input type="text" class="input2" placeholder="请输入" v-model="item.input2">
</div>
<div class="el-icon-remove" @click="inputRemove(index)"></div>
</div>
<div class="jia-icon" v-if="inputList.length -1 != index"></div>
</li>
</ul>
<div class="add el-icon-circle-plus" @click="inputAdd"></div>
</box>
</template>
<script>
import Box from './Box.vue'
export default {
components: { Box },
data() {
return {
inputList: [
{ input1: '', input2: '' },
{ input1: '', input2: '' }
]
}
},
methods: {
inputAdd() {
this.inputList.push({ input1: '', input2: '' })
},
inputRemove(index) {
if (this.inputList.length <= 2) {
this.$message('最少俩条')
return
}
this.inputList.splice(index, 1)
}
}
}
</script>
<style lang="scss" scoped>
ul{
padding-left: 20px;
padding-top: 23px;
li{
.input-box{
display: flex;
align-items: center;
}
.jia-icon{
width: 28px;
height: 28px;
background: url(https://webapp-pub.ezijing.com/x-training-new/jia.png);
background-size: 100% 100%;
margin: 16px 0 16px 282px;
}
input{
background: #68B8A4;
box-shadow: 0px 3px 7px 0px rgba(4, 0, 0, 0.29) inset;
border-radius: 6px;
font-size: 16px;
color: #FFFFFF;
padding-left: 15px;
box-sizing: border-box;
height: 41px;
&::-webkit-input-placeholder{
color: #fff;
}
}
.input1{
width: 263px;
}
.input2{
width: 210px;
padding-right: 38px;
}
.character-input{
position: relative;
.character{
position: absolute;
top: 50%;
right: 18px;
transform: translateY(-50%);
font-size: 16px;
color: #FFFFFF;
}
}
.el-icon-remove{
font-size: 30px;
cursor: pointer;
color: rgb(204,204,204);
margin-left: 5px;
}
.icon-x{
width: 26px;
height: 26px;
background: url(https://webapp-pub.ezijing.com/x-training-new/cheng.png);
background-size: 100% 100%;
margin: 0 20px;
}
}
}
.compares-box{
position: relative;
.add{
position: absolute;
right: 20px;
bottom: 35px;
font-size: 30px;
cursor: pointer;
color: rgb(204,204,204);
}
}
</style>
src/modules/product-analysis/components/Cost.vue 0 → 100644
浏览文件 @ ef476662
<template>
<box title="基金涉及费用">
<div class="cost-box">
<div class="li">
<img src="https://webapp-pub.ezijing.com/x-training-new/cost-i1.png" class="icon">
<div class="right-con">
<div class="num">
<input v-model="form.input1" type="text">
<span>%</span>
</div>
<div class="name">托管费</div>
</div>
</div>
<div class="li">
<img src="https://webapp-pub.ezijing.com/x-training-new/cost-i2.png" class="icon">
<div class="right-con col-blue">
<div class="num">
<input v-model="form.input2" type="text">
<span>%</span>
</div>
<div class="name">管理费</div>
</div>
</div>
</div>
</box>
</template>
<script>
import Box from './Box.vue'
export default {
components: { Box },
data() {
return {
form: {
input1: '',
input2: ''
}
}
}
}
</script>
<style lang="scss" scoped>
.cost-box{
display: flex;
justify-content: center;
padding-top: 30px;
.li{
width: 225px;
height: 97px;
background: #FFFFFF;
box-shadow: 0px 9px 9px 0px rgba(175, 175, 175, 0.27);
border-radius: 10px;
display: flex;
align-items: center;
.icon{
width: 53px;
height: 53px;
display: block;
margin-left: 24px;
}
.right-con{
margin-left: 24px;
&.col-blue{
.num{
input{
color: #47BCDE;
}
span{
color: #47BCDE;
}
}
}
.num{
display: flex;
input{
outline: none;
background: none;
width: 80px;
font-size: 30px;
font-weight: bold;
color: #4EB198;
line-height: 100%;
font-weight: bold;
height: 28px;
width: 65px;
text-align: right;
}
span{
font-size: 14px;
color: #4EB198;
line-height: 100%;
margin-top: 12px;
margin-left: 3px;
}
}
.name{
font-size: 16px;
color: #666666;
line-height: 100%;
margin-top: 10px;
}
}
&:nth-child(1){
margin-right: 30px;
}
}
}
</style>
src/modules/product-analysis/components/Features.vue 0 → 100644
浏览文件 @ ef476662
<template>
<box title="风险收益特征">
<div class="content-box">
<input type="text" class="input-id1" placeholder="请输入基金类型">
<input type="text" class="input-id2" placeholder="请输入基金类型">
<input type="text" class="input-id3" placeholder="请输入基金类型">
<input type="text" class="input-id4" placeholder="请输入基金类型">
</div>
</box>
</template>
<script>
import Box from './Box.vue'
export default {
components: { Box }
}
</script>
<style lang="scss" scoped>
.content-box{
position: relative;
margin: 29px 0 0 19px;
width: 491px;
height: 325px;
background: url(https://webapp-pub.ezijing.com/x-training-new/features-bg.png);
background-size: 100% 100%;
input{
width: 110px;
font-size: 16px;
color: #666666;
background: none;
outline: none;
}
.input-id1{
position: absolute;
top: 45px;
right: -10px;
}
.input-id2{
position: absolute;
top: 106px;
right: -45px;
}
.input-id3{
position: absolute;
top: 170px;
right: -80px;
}
.input-id4{
position: absolute;
top: 238px;
right: -118px;
}
}
</style>
src/modules/product-analysis/components/InvestTarget.vue 0 → 100644
浏览文件 @ ef476662
<template>
<box title="投资目标">
<textarea></textarea>
</box>
</template>
<script>
import Box from './Box.vue'
export default {
components: {
Box
}
}
</script>
<style lang="scss" scoped>
textarea{
width: 603px;
height: 150px;
background: #ECECEC;
border-radius: 10px;
outline: none;
resize: none;
margin: 20px auto 0;
display: block;
padding: 15px;
box-sizing: border-box;
}
</style>
src/modules/product-analysis/components/Products.vue 0 → 100644
浏览文件 @ ef476662
<template>
<box title="产品概括">
<ul>
<li v-for="(item, index) in productList" :key="index">
<img :src="item.icon" class="icon">
<div class="tag">{{ item.tag }}</div>
<textarea placeholder="请输入"></textarea>
</li>
</ul>
</box>
</template>
<script>
import Box from './Box.vue'
export default {
components: { Box },
data() {
return {
productList: [
{
icon: 'https://webapp-pub.ezijing.com/x-training-new/products1.png',
tag: '基金类型'
},
{
icon: 'https://webapp-pub.ezijing.com/x-training-new/products2.png',
tag: '运作方式'
},
{
icon: 'https://webapp-pub.ezijing.com/x-training-new/products3.png',
tag: '开放频率'
},
{
icon: 'https://webapp-pub.ezijing.com/x-training-new/products4.png',
tag: '交易币种'
},
{
icon: 'https://webapp-pub.ezijing.com/x-training-new/products5.png',
tag: '基金管理人'
},
{
icon: 'https://webapp-pub.ezijing.com/x-training-new/products6.png',
tag: '基金委托人'
}
]
}
}
}
</script>
<style lang="scss" scoped>
ul{
padding-top: 27px;
display: flex;
flex-wrap: wrap;
margin-right: -24px;
li{
margin-right: 18px;
margin-bottom: 13px;
width: 198px;
height: 240px;
background: #F1FCF9;
border: 1px solid #B8EBDE;
border-radius: 12px;
&:nth-child(2){
background: #ECFAFC;
border: 1px solid #B5EBEB;
textarea{
border-bottom: 1px solid #A5E1E9;
color: #62C2D0;
}
}
&:nth-child(3){
background: #FFFDF0;
border: 1px solid #F0ECCB;
margin-right: 0;
textarea{
border-bottom: 1px solid #DAD396;
color: #D9D292;
}
}
&:nth-child(4){
background: #FDF8EE;
border: 1px solid #ECD7AA;
textarea{
border-bottom: 1px solid #E2C485;
color: #E2C485;
}
}
&:nth-child(5){
background: #FCEDE9;
border: 1px solid #F2C1B6;
textarea{
border-bottom: 1px solid #DE9888;
color: #DE9888;
}
}
&:nth-child(6){
background: #F1FCF9;
border: 1px solid #B8EBDE;
margin-right: 0;
textarea{
border-bottom: 1px solid #7BC1AF;
color: #7BC1AF;
}
}
.icon{
width: 82px;
display: block;
margin: 36px auto 18px;
}
.tag{
text-align: center;
font-size: 16px;
color: #8E8E8E;
line-height: 100%;
}
textarea{
width: 150px;
height: 43px;
outline: none;
resize: none;
margin: 15px auto 0;
display: block;
border-bottom: 1px solid #7BC1AF;
background: none;
color: #68B8A4;
text-align: center;
padding-top: 10px;
&::-webkit-input-placeholder{
font-size: 18px;
color: #CACACA;
}
}
}
}
</style>
src/modules/product-analysis/index.js
浏览文件 @ ef476662
...@@ -14,6 +14,10 @@ const routes = [ ...@@ -14,6 +14,10 @@ const routes = [
{ {
path: 'report', path: 'report',
component: () => import('./views/Report.vue') component: () => import('./views/Report.vue')
},
{
path: 'result',
component: () => import('./views/Result.vue')
} }
] ]
} }
......
src/modules/product-analysis/views/CaseSelect.vue
浏览文件 @ ef476662
...@@ -53,9 +53,8 @@ export default { ...@@ -53,9 +53,8 @@ export default {
<style scoped> <style scoped>
.product-analysis-case-select{ .product-analysis-case-select{
background:#eaf0f0; background:#eaf0f0;
width:1340px;
height:548px; height:548px;
margin:24px auto 60px; margin:24px 30px 60px 30px;
padding-top:32px; padding-top:32px;
position:relative; position:relative;
} }
......
src/modules/product-analysis/views/Index.vue
浏览文件 @ ef476662
<template> <template>
<div class="pad-lr-30">
<div class="product-analysis"> <div class="product-analysis">
<h5>选择一款金融产品进行分析吧。</h5> <h5>选择一款金融产品进行分析吧。</h5>
<ul class="list"> <ul class="list">
<li class="item" v-for="(item, index) in list" :key="index" @click="handleClick(item)"> <li class="item" v-for="(item, index) in list" :key="index" @click="handleClick(item)">
<span class="btn">{{item.label}}</span> <span class="btn">{{ item.label }}</span>
<img :src="item.image" /> <img :src="item.image" />
</li> </li>
</ul> </ul>
</div> </div>
</div>
</template> </template>
<script> <script>
...@@ -33,41 +35,44 @@ export default { ...@@ -33,41 +35,44 @@ export default {
</script> </script>
<style scoped> <style scoped>
.product-analysis{ .pad-lr-30{
background:#fff; padding: 0 30px;
width:1340px; }
height:552px; .product-analysis {
margin:24px auto 60px; background: #fff;
/* width: 1340px; */
height: 552px;
margin: 24px auto 60px;
} }
h5{ h5 {
font-size:22px; font-size: 22px;
font-weight:normal; font-weight: normal;
text-align:center; text-align: center;
color:#666; color: #666;
padding-top:56px; padding-top: 56px;
} }
.list{ .list {
display: flex; display: flex;
overflow-x: auto; overflow-x: auto;
padding-top:56px; padding-top: 56px;
} }
.item{ .item {
width:33.3%; width: 33.3%;
text-align:center; text-align: center;
} }
.item .btn{ .item .btn {
display:inline-block; display: inline-block;
width: 97px; width: 97px;
height: 40px; height: 40px;
background: #C7D4D5; background: #c7d4d5;
font-size:22px; font-size: 22px;
line-height:40px; line-height: 40px;
color:#fff; color: #fff;
margin-bottom:40px; margin-bottom: 40px;
cursor:pointer; cursor: pointer;
} }
.item img{ .item img {
display: block; display: block;
margin:0 auto; margin: 0 auto;
} }
</style> </style>
src/modules/product-analysis/views/Report.vue
浏览文件 @ ef476662
<template> <template>
<div class="product-analysis-report"> <div class="product-analysis-report">
<div class="left">pdf文档</div> <div class="page-mian">
<div class="right">产品分析报告</div> <div class="pdf-left">
<embed class="embed" width="100%" height="100%" src="https://test-certificate-frontend-api.ezijing.com/files/6816543487312265216.pdf" />
</div>
<div class="right-content">
<input type="text" class="code" placeholder="请输入基金简称+基金代码" />
<div class="title">产品分析报告</div>
<!-- 产品概括 -->
<product></product>
<!-- 投资目标 -->
<invest-target></invest-target>
<!-- 业绩比较基准 -->
<compares></compares>
<!-- 风险收益特征 -->
<features></features>
<!-- 基金涉及费用 -->
<cost ref="cost"></cost>
<!-- 提交 -->
<div class="submit-btn" @click="submit">提交报告</div>
</div>
</div>
</div> </div>
</template> </template>
<script> <script>
export default {} import Product from '../components/Products.vue'
import InvestTarget from '../components/InvestTarget.vue'
import Compares from '../components/Compares.vue'
import Features from '../components/Features.vue'
import Cost from '../components/Cost.vue'
export default {
components: {
Product,
InvestTarget,
Compares,
Features,
Cost
},
methods: {
submit() {
console.log(this.$refs.cost.form)
}
}
}
</script> </script>
<style scoped> <style lang="scss" scoped>
.product-analysis-report{ input {
background:#fff; background: none;
width:1340px; border: none;
margin:24px auto 60px; outline: none;
display:flex;
padding:20px 15px 25px;
}
.left{
width:500px;
} }
.right{ .product-analysis-report {
flex:1; padding: 33px 100px;
height: 1998px; .page-mian {
background: #F8F8F8; overflow: hidden;
border: 1px solid #DCDCDC; background: #fff;
display: flex;
padding: 20px;
.right-content {
width: 674px;
background: #f8f8f8;
border: 1px solid #dcdcdc;
border-radius: 10px; border-radius: 10px;
.code {
width: 370px;
margin: 35px auto 0;
height: 47px;
display: block;
text-align: center;
border-bottom: 1px solid #b4b4b4;
&::-webkit-input-placeholder {
color: #afafaf;
}
}
.submit-btn {
width: 119px;
background: #68b8a4;
border-radius: 16px;
text-align: center;
margin: 42px auto;
line-height: 32px;
color: #fff;
font-size: 18px;
cursor: pointer;
}
.title {
font-size: 24px;
font-weight: bold;
color: #4cac94;
line-height: 100%;
text-align: center;
margin-top: 27px;
}
}
.pdf-left {
flex: 1;
margin-right: 10px;
height: 500px;
}
}
} }
</style> </style>
src/modules/product-analysis/views/Result.vue 0 → 100644
浏览文件 @ ef476662
<template>
<div class="result-box">
<div class="trophy-box">
<img src="https://webapp-pub.ezijing.com/x-training-new/trophy.png">
<div class="text">你的得分是<span>98</span>分</div>
</div>
<div class="title-box">
<div class="title">产品分析报告</div>
<div class="code">广发资源优选股票053476</div>
</div>
<!-- 产品概括 -->
<product></product>
<!-- 投资目标 -->
<invest-target></invest-target>
<!-- 业绩比较基准 -->
<compares></compares>
<!-- 风险收益特征 -->
<features></features>
<!-- 基金涉及费用 -->
<cost ref="cost"></cost>
</div>
</template>
<script>
import Product from '../components/Products.vue'
import InvestTarget from '../components/InvestTarget.vue'
import Compares from '../components/Compares.vue'
import Features from '../components/Features.vue'
import Cost from '../components/Cost.vue'
export default {
components: {
Product,
InvestTarget,
Compares,
Features,
Cost
}
}
</script>
<style lang="scss" scoped>
.result-box{
margin: 66px auto;
width: 714px;
background: #FFFFFF;
border: 1px solid #DCDCDC;
border-radius: 10px;
padding: 20px;
box-sizing: border-box;
.trophy-box{
padding: 50px 0 38px 0;
position: relative;
&::after{
content: "";
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 620px;
border-bottom: 1px dashed #C0C0C0;
}
img{
width: 69px;
display: block;
margin: 0 auto;
}
.text{
font-size: 18px;
color: #666666;
text-align: center;
margin-top: 18px;
span{
color: rgba(67, 169, 143, 1);
font-size: 26px;
}
}
}
.title-box{
padding: 28px 0 50px;
.title{
text-align: center;
font-size: 24px;
font-weight: bold;
color: #4CAC94;
line-height: 100%;
}
.code{
width: 310px;
line-height: 47px;
margin: 29px auto 0;
border-bottom: 1px solid #B4B4B4;
text-align: center;
font-size: 18px;
color: #656565;
}
}
}
</style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论