【ionic】-卡片式数据列表

有原型有需求，接下来就是弄，学生端首页显示优秀毕业生信息，见得少做得少，才会做起来感觉吃力，搞不了，可能一个小功能都要捣鼓好久，但是搞出来想要的效果也是一件值得开心的事情；

首先我们来看一下原型中的样式；

思路：

• card形式的列表 list
• 设计样式

实现过程：

         
      
        
          
        
        

          
{{item.organization_Name}} {{item.user_Name}}
    
          
薪资：{{item.salary}}/月
          
就职：{{item.company}}
          
电话：{{item.tel_Num}}
          
邮箱：{{item.email}}
        
            
    

• CSS样式设置

.excellentgraduatelist{
    padding:2%,1%;
    margin-top:2px;
    margin-left:0;
    margin-right:0;
    margin-bottom: 4px;    
    border-radius: 12px;
    ion-item{
        line-height:2;

        .info{
            padding-left: 6%;
            h3{
                font-size: 16px;
                padding:6px;
                margin:0px;
                font-weight: bold;
            }
            p{
                font-size:13px;
                padding:2px;
                margin:0px;
                line-height: 1.5;
            }
        }
    }    
}

实现结果：

总结：

到这里基本的样式和数据都已经完成啦，距离原型还有距离，后续再完善。