欢迎来到懒人模板!我们专注移动互联网,所有模板永久免费下载!
  • 首 页
  • 当前位置:主页 > 小程序教程 >

    微信小程序仁怀酱酒保类论坛式首页设计制作开发教程(2)

    2018-07-13 09:16 来源/作者:懒人模板 分类:小程序教程  « »
     
    二、wxss样式文件代码如下:
    /**index.wxss**/
    .userinfo {
      line-height: 1;
      padding: 0 40rpx;
      background: #c24e4e;
      overflow: hidden
      
    }
    .userinfo-box{
       display: flex;
       flex-direction: row;
       position: relative;
    }
    .count-list {
      margin: 30rpx 0;
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      left: 0;
    }
    .list-line{
      border: 2rpx solid #d48383;
      border-top:none; 
      border-bottom:none; 
      padding: 0 70rpx;
    }
    .list-cloum {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .list-cloum .item1 {
     font-size: 50rpx;
     color: #ffffff;
    }
    
    .list-cloum .item2 {
      font-size: 24rpx;
      color: #D9D9D9;
      margin-bottom: 30rpx;
    }
    
    .userinfo-box::after{
      content: " ";
      position: absolute;
      left: 0rpx;
      bottom: 0;
      right:0rpx;
      height: 1px;
      border-top: 1rpx solid #d48383;
      color: #D9D9D9;
      
    }
    .userinfo-area{
      display:flex;
      flex-direction: column;
      margin-top:50rpx; 
    }
    .userinfo-avatar {
      width: 168rpx;
      height: 168rpx;
      border-radius: 50%;
      margin: 40rpx 30rpx 40rpx 0rpx;
    }
    
    .userinfo-nickname {
      color: #fff;
      font-size: 30rpx;
    }
    .userinfo-parent{
      font-size: 24rpx;
      color: #d48383;
      margin: 30rpx 0 20rpx;
    }
    .userinfo-company{
        font-size: 24rpx;
        color: #fff;
    }
    .index-muen{
      background-color:#fff;
      position: relative;
      display: flex;
      flex-direction:row;
      align-items: center;
    }
    .index-muen::after{
       content: " ";
      position: absolute;
      left: 50%;
      bottom: 0;
      height: 100%;
      background-color: #eeeeee;
      width: 2rpx;
    }
    .index-muen .muen-list{
      height: 160rpx;
      display: flex;
      flex-direction: row;
      align-items: center;
      padding:0 0rpx 0 40rpx;
      width: 50%;
    }
    .index-muen .image{
      width: 100rpx;
      height: 100rpx;
      margin-right: 16rpx;
    }
    .muen-list .text{
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    .massge{
      overflow: hidden;
      width: 100%;
      background-color: #ffffff;
      margin-top: 20rpx;
       position: relative;
    }
    .massge-img{
      width: 60rpx;
      height: 60rpx;
      margin-right: 20rpx;
     
    }
    .massge-hd{
      padding:20rpx 0rpx 30rpx 20rpx; 
      display: flex;
      flex-direction: row;
      align-items: center;
    }
    .massge-bd,.massge-ft{
      padding:0rpx 0rpx 30rpx 40rpx; 
    }
    .massge-close{
      width: 100rpx;
      height: 100rpx;
      position: absolute;
      top: 30rpx;
      right: 30rpx;
      z-index: 22;
      display: flex;
      justify-content: flex-end;
      
    
    }
    .massge-close image{
      
      width: 50rpx;
      height: 50rpx;
      
    }
    .news{
      padding: 40rpx;
      margin-top: 20rpx;
      background-color: #ffffff;
    }
    .news-listimg{
      width:100%;
      overflow: hidden
    }
    .img-box{
      width: 670rpx;
      height:240rpx;
      overflow: hidden;
    }
    .newslist-hd{
      padding-bottom: 20rpx;
    }
    
    
    

    点击扫描效果预览免费下载免登陆网盘下载
    标签:
    * 懒人模板承诺:本站所有资源免费下载,无病毒,无弹窗,无干扰链接! 提点建议