跟我一起做京东金融的项目白条页(四)

//app\js\ious\islider.vue
<template>
    <div>
        <Panel title="轮播图" :class="$style.panel">
            <section :class="$style.content">
                <Slider :items="items"/>
            </section>
        </Panel>
    </div>
</template>
<script>
import Slider from '../core/slider'
import Panel from '../core/panel'
export default {
    components:{
        Slider,
        Panel
    },
    data(){
        return{
            items:[
                {
                    href:"11",
                    src:"//img12.360buyimg.com/jrpmobile/jfs/t1/54124/12/3394/140400/5d11e389Ee12d74f3/f3cba452b6470938.png?width=750&height=320"
                },
                {
                    href:"22",
                    src:"//img12.360buyimg.com/jrpmobile/jfs/t1/52802/14/4027/212241/5d1b14f4Ed1748086/588363d90a40b28c.png?width=750&height=320"
                }
            ]
        }
    }
}
</script>
<style lang="scss" module>
    @import "../../css/element.scss";
    .panel{
        @include panel;
        >h4{
            display: none;
        }
        margin-top: 120px;
    }
</style>

白条福利页面

//app\js\ious\welfare.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:#999;
                        font-size: 24px;
                        line-height: 1.1;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        overflow: hidden;
                    }
                }
                >em{
                    color: #FF8014;
                    font-size: 28px;
                }
            }
        }
    }
</style>

页面效果为

更多服务页面

//app\js\ious\service.vue
<template>
    <Panel :class="$style.panel" title="更多服务">
        <section :class="$style.content" >
             <div :class="$style.item" v-for="item in items" :key="item.img">
                <img :src="item.img" alt="">
                <p>{{item.text}}</p>
            </div>
        </section>
    </Panel>
</template>
<script>
import Panel from '../core/panel'
export default {
    components:{
        Panel
    },
    data(){
        return {
            items:[
                {
                    img:"//img12.360buyimg.com/jrpmobile/jfs/t1/69506/40/2501/5076/5d0c2ff7E903b5e99/5333b1c655b4c7bf.png?width=90&height=90",
                    text:"去赚钱"
                },
                   {
                    img:"//img12.360buyimg.com/jrpmobile/jfs/t1/62829/35/1167/4169/5cf64e75Ec0e5b729/eb07348c21179775.png?width=90&height=90",
                    text:"优惠券"
                },
                   {
                    img:"//img12.360buyimg.com/jrpmobile/jfs/t1/22708/8/15082/7446/5cad5c35E7e3ae22b/72adc577175d7c4f.png?width=90&height=90",
                    text:"双签"
                },
                   {
                    img:"//img12.360buyimg.com/jrpmobile/jfs/t29131/288/288291507/3943/bed46aef/5bee6bd5Nfc5d5360.png?width=90&height=90",
                    text:"全部"
                }
            ]
        }
    }
}
</script>
<style lang="scss" module>
   @import "../../css/element.scss";
   .panel{
       @include panel;
       .content{
           @include flex(row);
           .item{
               width: 160px;
               height: 144px;
               text-align: center;
               margin-bottom: 40px;
               img{
                   width: 90px;
                   height: 90px;
               }
               p{
                   font-size: 26px;
                   color: #666;
                   margin-top: 12px;
               }
           }
       }
   } 
</style>

页面完整效果

//app\js\ious\index.vue
<template>
    <div>
        <Heador/>
        <Slider/>
         <Welfare/>
         <Service/>
        <Footer/>
        <Navbar/>
       
    </div>
</template>
<script>
import Heador from '../public/header'
import Footer from '../public/footer'
import Slider from './islider'
import Navbar from '../public/navbar'
import Welfare from './welfare'
import Service from './service'
export default {
    components:{
        Heador,
        Slider,
        Footer,
        Navbar,
        Welfare,
        Service
    }
}
</script>
<style lang="scss">
    
</style>

转载于:https://www.cnblogs.com/smart-girl/p/11215528.html