路由案例

复制链接网址查看效果图

http://localhost:63342/WebstormProjects/BShop/index.html?_ijt=e87emc5u7frg60oq1u8rv303ol#/home

代码:

(主页面)




   
   
   
   
   
    书店
   






   
       
       

           

       

   


   

       


           

个人中心


       


       
           

               

               

姓名


           


           
       


   



   
   


   
       
   


   
       
   



//首页页面


   
       
   


   
       

       
           
               


                   
               

               

                   

Java编程思想


                   

C++、Java中的圣经级著作



                   

                        {{ 86.40 | currency: "¥" }}
                       
                   

               

           
           
               

                   
               

               

                   

Java编程思想


                   

C++、Java中的圣经级著作



                   

                        {{ 86.40 | currency: "¥" }}
                       
                   

               

           

           
               

                   
               

               

                   

Java编程思想


                   

C++、Java中的圣经级著作



                   

                        {{ 86.40 | currency: "¥" }}
                       
                   

               

           

           
               

                   
               

               

                   

Java编程思想


                   

C++、Java中的圣经级著作



                   

                        {{ 86.40 | currency: "¥" }}
                       
                   

               

           

           
               

                   
               

               

                   

Java编程思想


                   

C++、Java中的圣经级著作



                   

                        {{ 86.40 | currency: "¥" }}
                       
                   

               

           

           
               

                   
               

               

                   

Java编程思想


                   

C++、Java中的圣经级著作



                   

                        {{ 86.40 | currency: "¥" }}
                       
                   

               

           

       
   

//购物车页面


   
       
           
               


                   
               

               

                   

Java编程思想



                   

{{ 86.40 | currency: "¥" }}



                   

                       
                        1
                       
                       
                   

               

           
           

           
               

                   
               

               

                   

Java编程思想



                   

{{ 86.40 | currency: "¥" }}



                   

                       
                        1
                       
                       
                   

               

           

           

           
               

                   
               

               

                   

Java编程思想



                   

{{ 86.40 | currency: "¥" }}



                   

                       
                        1
                       
                       
                   

               

           

           

           
               

                   
               

               

                   

Java编程思想



                   

{{ 86.40 | currency: "¥" }}



                   

                       
                        1
                       
                       
                   

               

           

           

           
               

                   
               

               

                   

Java编程思想



                   

{{ 86.40 | currency: "¥" }}



                   

                       
                        1
                       
                       
                   

               

           

           

           
               

                   
               

               

                   

Java编程思想



                   

{{ 86.40 | currency: "¥" }}



                   

                       
                        1
                       
                       
                   

               

           

       
   

//我的页面


   
       
   


   
       


           

           

姓名


       


       
   

//css布局

.home .picture {
    float: left;
}

.home .details h3 {
    

margin-top: 16px;
}

.home .details div {
    margin-top: 48px;
}

.home .details span {
    color: red;
    font-size: large;
}

.home .details .ion-ios-cart {
    position: absolute;
    

right: 16px;
}

.cart .picture {
    float: left;
}

.cart .details

h3 {
    margin-top: 16px;
    color: red;
    font-size:

large;
}

.cart .details div {
    margin-top: 16px;
}

.cart

.details div .ion-android-delete {
    position: absolute;
    

right: 16px;
}

.cart .item {
    border-width: 0;
}

.cart hr {
    

border: 1px dotted #999;
    margin-left: 12px;
    margin-

right: 12px;
}

.mine .avatar {
    width: 100%;
    height:

160px;
    background: url("../img/mine_bg.jpg") no-repeat;
   

 background-size: cover;
    text-align: center;
}

.mine

.avatar img {
    border-radius: 50%;
    margin-top: 30px;
}


你可能感兴趣的:(路由案例)