理财页面同首页很多类似，故很多组件可以复用，稍加修改即可
//app\js\money\mslider.vue
<template>
<Panel title="轮播图" :class="$style.panel">
<section :class="$style.content">
<Slider :items="items" :cname="$style.slider"/>
</section>
</Panel>
</template>
<script>
import Panel from '../core/panel'
import Slider from '../core/slider'
export default {
components:{
Panel,
Slider
},
data(){
return {
items:[
{
href:'home',
src:"//img12.360buyimg.com/jrpmobile/jfs/t1/38925/1/7734/32802/5cef91cfE8962dc90/08a7df363c6465f2.png?width=750&height=400"
},
{
href:'home',
src:"//img12.360buyimg.com/jrpmobile/jfs/t1/31588/6/14705/52443/5cbeb2b2Ea0648bba/e05f04db25d47126.png?width=750&height=400"
}
]
}
}
}
</script>
<style lang="scss" module>
@import "../../css/element.scss";
.panel{
@include panel;
margin: 0;
>h4{
display: none;
}
.content{
.slider{
margin-top: 120px;
}
}
}
</style>
//app\js\money\ada.vue
<template>
<Panel class="panel" :class="$style.panel">
<section :class="$style.content">
<img src="//img12.360buyimg.com/jrpmobile/jfs/t1/76825/21/3349/15938/5d197607Ed74e7dea/40bca9650539b256.jpg?width=750&height=200" alt="">
</section>
</Panel>
</template>
<script>
import Panel from '../core/panel'
export default {
components:{
Panel
}
}
</script>
<style lang="scss" module>
@import "../../css/element.scss";
.panel{
@include panel;
>h4{
display: none;
}
.content{
img{
width: 100%;
// height: 230px;
display: block;
}
}
}
</style>//app\js\money\money.vue
<template>
<Panel title="理财精选" :class="$style.panel">
<section :class="$style.content">
<dl :class="$style.item" v-for="item in items" :key="item.title">
<dt>{{item.title}}<span>{{item.sub}}</span> </dt>
<dd>{{item.rate}}</dd>
<dd>{{item.text}}</dd>
</dl>
</section>
</Panel>
</template>
<script>
import Panel from '../core/panel'
export default {
components:{
Panel
},
data(){
return {
items:[
{
title:'定期理财',
sub:'理财首选',
rate:'5.80%',
text:'近1年历史年化投资回报率'
},
{
title:'京智0号',
sub:'大数据赋能',
rate:'6.00%',
text:'近1月历史年化投资回报率'
},
{
title:'建信养老飞益鑫',
sub:'1000起投',
rate:'4.57%',
text:'近7日年化收益'
},
{
title:'小白基金',
sub:'超短期',
rate:'4.50%',
text:'7日年化收益率'
}
]
}
}
}
</script>
<style lang="scss" module>
@import '../../css/element.scss';
.panel{
@include panel;
.content{
@include flex(row);
justify-content: space-around;
box-sizing: border-box;
&:after{
content:"";
display: block;
width: 100%;
height: 0px;
box-sizing: border-box;
border-bottom: 1px solid red;
position: relative;
top: -208px;
}
.item{
position: relative;
width:50%;
box-sizing: border-box;
&:after{
content:'';
width:1px;
height: 136px;
display: block;
position: absolute;
top:50%;
right:0;
margin-top: -68px;
border-right: 1px solid red;
}
&:nth-child(2n){
&:after{
display: none;
}
}
padding: 34px 16px;
dt{
font-size: 22px;
line-height: 42px;
color: #333;
span{
font-size: 22px;
color: #ff5155;
border:1px solid #ff5155;
padding: 0 8px;
vertical-align: 1px;
margin-left: 2px;
}
}
dd{
&:nth-child(2){
font-weight: 700;
font-size: 44px;
height: 58px;
line-height: 58px;
color: #FF5155;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
&:nth-child(3){
font-size: 24px;
height: 34px;
line-height: 34px;
color: #999;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
}
}
}
}
</style>效果为
//app\js\money\finance.vue
<template>
<Panel title="理财精选" :class="$style.panel">
<section :class="$style.content">
<div :class="$style.item">
<img src="//img12.360buyimg.com/jrpmobile/jfs/t3670/58/543125556/2606/a65096b9/580d80afN63b1085a.png?width=76&height=76" alt="">
<div>
<h4>月度理财</h4>
<p>预期年化收益率4.50%</p>
</div>
<em>去赚钱 ></em>
</div>
<div :class="$style.item">
<img src="//img12.360buyimg.com/jrpmobile/jfs/t3679/44/511862277/2728/c1c6b2bf/580d8189N6b6f8052.png?width=76&height=76" alt="">
<div>
<h4>季度理财</h4>
<p>历史年化回报率5.50%<</p>
</div>
<em>去赚钱 ></em>
</div>
<div :class="$style.item">
<img src="//img12.360buyimg.com/jrpmobile/jfs/t3331/69/580199498/3074/d5bb21c5/580d7f6cN7f35e596.png?width=76&height=76" alt="">
<div>
<h4>一年理财</h4>
<p>历史年化回报率5.80%</p>
</div>
<em>去赚钱 ></em>
</div>
</section>
</Panel>
</template>
<script>
import Panel from '../core/panel';
export default {
components:{
Panel
}
}
</script>
<style lang="scss" module>
@import "../../css/element.scss";
.panel{
@include panel;
>h4{
border-bottom: 1px solid #ddd;
}
.content{
@include flex;
.item{
@include flex(row);
align-items: center;
height: 140px;
&:after{
content: "";
box-sizing: border-box;
height: 0;
width: 100%;
border-bottom: 1px solid #ddd;
margin-left: 150px;
}
&:last-child:after{
border-bottom: 1px solid #fff;
}
>img{
width:88px;
height: 88px;
display: inline-block;
margin: 0 32px;
}
>div{
font-size: 32px;
color: #333;
line-height: 1.8;
width: 344px;
p{
color:#ff3223;
font-size: 24px;
line-height: 1.1;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
}
>em{
color: #FF8014;
font-size: 28px;
}
}
}
}
</style>
//app\js\money\adc.vue
<template>
<Panel class="panel" :class="$style.panel">
<section :class="$style.content">
<img src="//img12.360buyimg.com/jrpmobile/jfs/t20746/93/1719082958/12040/306a2296/5b31b40dNeefe4c3c.png?width=750&height=200" alt="">
</section>
</Panel>
</template>
<script>
import Panel from '../core/panel'
export default {
components:{
Panel
}
}
</script>
<style lang="scss" module>
@import "../../css/element.scss";
.panel{
@include panel;
margin-bottom: 0;
>h4{
display: none;
}
.content{
img{
width: 100%;
// height: 230px;
display: block;
}
}
}
</style>//app\js\money\index.vue
<template lang="html">
<div>
<Heador/>
<Slider/>
<Ada/>
<Money/>
<Adb/>
<Finance/>
<Adc/>
<Footer :cname="$style.mfooter"/>
<Navbar/>
</div>
</template>
<script>
import Heador from '../public/header'
import Footer from '../public/footer'
import Slider from './mslider'
import Navbar from '../public/navbar'
import Ada from './ada'
import Adb from './adb'
import Adc from './adc'
import Money from './money'
import Finance from './finance'
export default {
components:{
Heador,
Slider,
Ada,
Adb,
Adc,
Footer,
Navbar,
Money,
Finance
}
}
</script>
<style lang="scss" module>
.mfooter{
margin-top: 0 !important;
ul{
li:first-child{
display: none;
}
}
}
</style>原文地址：https://www.cnblogs.com/smart-girl/p/11215522.html
时间： 2024-11-23 00:37:40