跟我一起做京东金融的项目众筹页(五)

标签：vba   content   for   display   inner   top   页面   tom   ade   

//app\js\raise\rslider.vue
<template>
    <Panel title="轮播组件" :class="$style.panel">
        <section :class="$style.content">
            <swiper :options="options">
                <swiper-slide>
                    百万白条券免费送，速来领取
                </swiper-slide>
                  <swiper-slide>
                    签到领流量，1元500M<em>></em>
                </swiper-slide>
                  <swiper-slide>
                    百万白条券免费送，1元500M<em>></em>
                </swiper-slide>
            </swiper>
        </section>
    </Panel>
</template>
<script>
import Panel from "../core/panel"
// import Slider from '../core/slider'
import {swiper,swiperSlide} from "vue-awesome-swiper"
export default {
    components:{
        Panel,
        // Slider,
        swiper,
        swiperSlide
    },
    data(){
        return{
                options:{
                autoplay:true,
                loop:true,
                direction:'vertical'
            }
        }
    }
}
</script>
<style lang="scss">
.swiper-container-vertical{
    height: 72px;
    .swiper-slide{
        font-family: PingFangSC-Medium;
        font-size: 28px;
        color: #333;
        em{
            color:#333;
            float:right;
            margin-right: 20px;
        }
    }
}
</style>

<style lang="scss" module>
@import "../../css/element.scss";
    .panel{
        @include panel;
        >h4{
            display: none;
        }
        .content{
            margin-top: 120px !important;
            height: 72px;
            line-height: 72px;
            overflow: hidden;
            padding-left: 178px;
            background-repeat: no-repeat;
            background: url(//m.jr.jd.com/spe/qyy/main/images/scroll_title_img.png) no-repeat;
        }
    }
</style>

页面效果为

每日签到页面

//app\js\raise\daily.vue
<template>
    <Panel title="每日签到" :class="$style.panel">
        <section :class="$style.content">
            <img src="//img12.360buyimg.com/jrpmobile/jfs/t3184/283/6032981290/37056/fa30c674/589bd5a2Nabdbbbd9.jpg?width=376&height=160" alt="">
            <img src="//img12.360buyimg.com/jrpmobile/jfs/t3298/196/6130416421/33755/a0536d3e/589bd5d4Nf32e7adc.jpg?width=374&height=160" alt="">
            <p>不抢白不抢</p>
        </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;
        .content{
            @include flex(row);
            padding-bottom:40px;
            position: relative;
            img{
                width: 320px;
                height: 136px;
            }
            p{
                position: absolute;
                top: -112px;
                right: 20px;
                font-size: 28px;
                color: #999;
                height: 112px;
                line-height: 112px;
            }
        }
    }
</style>

//app\js\raise\in.vue
<template>
    <Panel title="In尖货推荐" :class="$style.panel">
        <section :class="$style.content">
            <div :class="$style.item" v-for="item in items" :key="item.catory">
                <img :src="item.catory" alt="">
                <section :class="$style.list">
                    <div :class="$style.product" v-for="product in item.list" :key="product.img">
                        <img :src="product.img" alt="">
                        <p :class="$style.title">{{product.title}}</p>
                        <p :class="$style.price"><em>{{product.price}}</em>起</p>
                        <article>
                            <div :class="$style.wrapper">
                                <div :class="$style.inner" :style="{width:product.progress+'%'}"></div>
                            </div>
                            <p>{{product.progress}}</p>
                        </article>
                        <label>精选</label>
                    </div>
                     <!-- <div :class="$style.product">
                        <img src="https://img30.360buyimg.com/cf/s250x250_jfs/t14881/283/656508232/143980/9b606acf/5a33a171N18c9c80a.jpg" alt="">
                        <p :class="$style.title">双响炮蓝牙音箱</p>
                        <p :class="$style.price"><em>29:00</em>起</p>
                        <article>
                            <div :class="$style.wrapper">
                                <div :class="$style.inner"></div>
                            </div>
                            <p>172%</p>
                        </article>
                        <label>精选</label>
                    </div> -->
                </section>
            </div>
        </section>
    </Panel>
</template>
<script>
import Panel from '../core/panel';
export default {
    components:{
        Panel
    },
    data(){
        return {
            items:[
                {
                     catory:"//img12.360buyimg.com/jrpmobile/jfs/t3406/210/2247820735/50952/86016eea/5846d8e7N20446dbd.png?width=750&height=200",
                    list:[
                        {
                            img:"https://img30.360buyimg.com/cf/s250x250_jfs/t14881/283/656508232/143980/9b606acf/5a33a171N18c9c80a.jpg",
                            title:"双响炮音箱",
                             price: "29.00",
                            progress: 175
    
                        },
                         {
                        img:
                            "https://img30.360buyimg.com/cf/s250x250_jfs/t15529/308/632300625/135123/adb9c6d0/5a37676dNc31da9ea.jpg",
                        title: "脑波相机",
                        price: "998.00",
                        progress: 251
                        }
                    ]
                },
                    {
            catory:
                "//img12.360buyimg.com/jrpmobile/jfs/t3739/82/2244582797/54399/746c7d79/5846a953N66b67d05.png?width=750&height=200",
            list: [
                {
                img:
                    "https://img30.360buyimg.com/cf/s250x250_jfs/t11257/287/2281727659/55759/e00b90a/5a138f21N32dca834.jpg",
                title: "智能电动牙刷",
                price: "19.00",
                progress: 481
                },
                {
                img:
                    "https://img30.360buyimg.com/cf/s250x250_jfs/t14209/293/662014092/61635/bba5c330/5a33a983N077cac56.jpg",
                title: "烟草加热电子烟",
                price: "258.00",
                progress: 108
                }
            ]
            }
           
           ]
            }
    }
}
</script>

<style lang="scss" module>
    @import "../../css/element.scss";
    .panel{
        @include panel;
        .content{
            @include flex(row);
            .item{
                width: 100%;
                >img{
                    display: block;
                    width: 100%;
                    height: 170px;
                }
                .list{
                    @include flex(row);
                    .product{
                        width:50%;
                        height: 396px;
                        box-sizing: border-box;
                        background: raba(0,0,0,.02);
                        text-align: center;
                        position: relative;
                        img{
                            width: 180px;
                            height: 180px;
                            margin: 44px auto 20px;
                        }
                        .title{
                            font-family: PingFangSC-Medium;
                            font-size: 28px;
                            color: #444;
                        }
                        .price{
                            font-size: 20px;
                           height: 48px;
                           line-height: 48px;
                            color: #999;
                            font-family: PingFangSC-Medium;
                            em{
                                font-size: 36px;
                                color: #FF3232;
                                 margin-right: 4px;
                                &:before{
                                    content:"￥";
                                    font-size: 28px;
                                }
                            }
                        }
                      article{
                          @include flex(row);
                          align-items: center;
                          justify-content: space-around;
                          padding: 0 20px;
                          height: 30px;
                          line-height: 30px;
                          margin-top: 16px;
                        .wrapper{
                            width:144px;
                            height: 10px;
                            background: #F6F6F6;
                            border-radius: 22px;
                            .inner{
                                width: 40%;
                                height: 10px;
                                background-image: linear-gradient(270deg,#F55 1%,#FF9c31 100%);
                                border-radius: 22px;
                                max-width: 100%;
                            }
                        }
                        p{
                            font-size: 24px;
                            color: #999;
                        }
                       
                      }
                       label{
                            position: absolute;
                            left: 0;
                            top: 0;
                            font-family: PingFangSC-Medium;
                            font-size: 20px;
                            color: #ff0000;
                            text-align: center;
                            padding: 2px 8px;
                            background-image: linear-gradient(-35deg,#c1c1c1 0,#ACACAC 100%)
                        }

                    }
                }

            }
        }
    }
</style>

//app\js\raise\more.vue
<template>
    <Panel title="更多福利" :class="$style.panel">
        <div :class="$style.content">
            <img src="//img12.360buyimg.com/jrpmobile/jfs/t7456/56/1425209238/21928/f1fe492d/599cee57Naea99020.jpg?width=250&height=330" alt="">
            <img src="//img12.360buyimg.com/jrpmobile/jfs/t7894/126/1440046618/24763/5ce6a129/599cee04Ne77b3641.jpg?width=250&height=330" alt="">
            <img src="//img12.360buyimg.com/jrpmobile/jfs/t6385/103/1675552688/24265/91be4150/59549aedNa30670f7.jpg?width=250&height=330" alt="">
            <span>专享福利》</span>
        </div>
    </Panel>
</template>
<script>
import Panel from '../core/panel'
export default {
    components:{
        Panel
    }
}
</script>
<style lang="scss" module>
    @import "../../css/element.scss";
    .panel{
        @include panel;
        .content{
            @include flex(row);
            justify-content: space-around;
            padding-bottom: 60px;
            position: relative;
            img{
                width: 33.333%;
                height: 280px;
            }
            span{
                position: absolute;
                right: 10px;
                top: -112px;
                font-size: 28px;
                color: #999;
                height: 112px;
                line-height: 112px;
            }
        }
    }
</style>

//app\js\raise\index.vue
<template lang="html">
    <div>
        <Heador/>
        <Slider/>
        <Daily/>
         <In/>
         <More/>
        <Footer/>
        <Navbar/>
    </div>
</template>
<script>
import Heador from '../public/header'
import Footer from '../public/footer'
import Slider from './rslider'
import Navbar from '../public/navbar'
import Daily from './daily'
import In from './in'
import More from './more'
export default {
  components:{
    Heador,
    Slider,
    Footer,
    Navbar,
    Daily,
    In,
    More
  }
}
</script>

<style lang="scss" module>

</style>

关于跟业务相关的就已经完结了，当然这个视频讲了一些其他方面的东西，我这个只是记录项目开发过程中的东西，
虽然没有什么深度，不过在写法上面倒是可以借鉴。

跟我一起做京东金融的项目众筹页(五)

标签：vba   content   for   display   inner   top   页面   tom   ade   

原文地址：https://www.cnblogs.com/smart-girl/p/11215534.html