小程序简单订单布局

 

//WXML


  
    {{item}}
  

//JS
var app = getApp()
Page({
  data: {
    // 顶部菜单切换
    navbar: ['全部', '代付款', "代发货", "待收货", "已完成"],
    // 默认选中菜单
    currentTab: 0,
    index: 0,
    pick_name: "",
    // list数据
    list: [{
        binahao: "3124356568797697978",
        start: "已发货",
        arry: [{
            name: "这里是昵称这里是昵称这里是昵称这里是昵称这里是昵称",
            image: "../image/a.jpg",
            money: "56",
          },
          {
            name: "这里是昵称这里是昵称这里是昵称这里是昵称这里是昵称",
            image: "../image/a.jpg",
            money: "56",
          },
        ],
        cont_count: "2",
        count_money: "112",
      }, {
        binahao: "3124356568797697978",
        start: "已发货",
        arry: [{
            name: "这里是昵称这里是昵称这里是昵称这里是昵称这里是昵称",
            image: "../image/a.jpg",
            money: "56",
          },
          {
            name: "这里是昵称这里是昵称这里是昵称这里是昵称这里是昵称",
            image: "../image/a.jpg",
            money: "56",
          },
        ],
        cont_count: "2",
        count_money: "112",
      }, {
        binahao: "3124356568797697978",
        start: "已发货",
        arry: [{
            name: "这里是昵称这里是昵称这里是昵称这里是昵称这里是昵称",
            image: "../image/a.jpg",
            money: "56",
          },
          {
            name: "这里是昵称这里是昵称这里是昵称这里是昵称这里是昵称",
            image: "../image/a.jpg",
            money: "56",
          },
        ],
        cont_count: "2",
        count_money: "112",
      },

    ],

  },

  // 初始化加载
  onLoad: function() {
    var that = this;

  },


  //顶部tab切换
  navbarTap: function(e) {
    this.setData({
      currentTab: e.currentTarget.dataset.idx
    })
  },



})

//WXSS
/* 顶部菜单切换 */
.navbar{  
  display: flex;  
  background: #fff;  
}  
.none_tab{
  position: relative;
  top: 20rpx;
  color: #999;
  font-size: 32rpx;
}
/* 默认选中菜单 */
.navbar .item{  
  position: relative;  
  flex: auto;  
  font-size: 27rpx;
  width: 100rpx;
  text-align: center;  
  line-height: 80rpx;  
  color:  #333;
    border-bottom: 6rpx solid #ddd;
}  
/* 选中菜单样式 */
.navbar .item.active{  
  color: #333333;  
  border-bottom: 6rpx solid #D66058;
  
}  
/* 字体 */
.navbar .item.active:after{  
  content: "";  
  display: block;  
  position: absolute;  
  bottom: 0;  
  left: 0;  
  right: 0;  
  height: 4rpx;  
}  


/* 全部 */
.cont_count{
  padding-top: 6rpx;
  position: relative;
  width: 100%;
  text-align: center;
  /* height: 620rpx; */
/* border-bottom: 6rpx solid #ddd; */
margin-bottom: 6rpx;
  background-color:#fff;
}
/* 编号 */
.seria{
  position: relative;
  display: inline-block;
  width: 90%;
  height: 70rpx;
  line-height: 70rpx;
  /* background-color: yellow; */
  border-bottom: 1rpx solid #D4D4D4;
}
/* 订单lab */
.seriac_name{
  position: absolute;
  font-size: 28rpx;
  color: #333;
  left: 0rpx;
}
.seriac_name text{
margin-left: 15rpx;
}
/* 订单状态 */
.seriac_start{
  position: absolute;
  right:0rpx;
  color: #999;
  font-size: 28rpx;
}

/* 列表 */
.list{
  position: relative;
  width: 90%;
  display: inline-block;
  padding-bottom: 10rpx;
  height: 200rpx;
}
/* 列表图片 */
.list_img{
  position: absolute;
  width:144rpx;
  height: 144rpx;
  left: 0rpx;
  top: 30rpx; 
}
/* 列表标题 */
.list_name{
position: absolute;
   text-align: left;
   top: 30rpx;
   left: 180rpx;
   color: #333333;
   width: 350rpx;
   font-size: 30rpx;
   display: -webkit-box;    
-webkit-box-orient: vertical;    
-webkit-line-clamp: 2;    
overflow: hidden;

}
/* 列表价格 */
.list_money{
  position: absolute;
  font-size: 32rpx;
  right: 0rpx;
  bottom: 30rpx;
}



/* 总和 */
.count_eg{
  position: relative;
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  border-bottom: 2rpx solid #EBEBEB;
  /* background-color: red; */
}
/* 总和居中 */
.count_cent{
  position: relative;
  width: 90%;
  display: inline-block;
  height: 90rpx;
  line-height: 90rpx;
}
/* 商品数量 */
.cont_cent_name{
  position: relative;
  font-size: 28rpx;
float: right;
}
.cont_ce_mon{
  font-size: 28rpx;
}
/* 总计金额 */
.cont_cen_money{
  position: relative;
   font-size: 28rpx;
   margin-right: 15rpx;
   float: right;
}

/* 标签功能 */
.coent_list{
  position: relative;
  width: 100%;
  height: 150rpx;
  line-height: 150rpx;
  /* border-bottom: 6rpx solid #ddd; */
  background-color:  #fff;
}
/* 删除 */
.coent_del{
  position: absolute;
  top: 30%;
  right: 270rpx;
  display: inline-block;
  width: 180rpx;
    text-align: center;
  height: 56rpx;
  border: 1rpx solid #d3d3d3;
font-size: 30rpx;
line-height: 56rpx;
}


/* 取消 */
.coent_log_base{
    position: absolute;
    top: 30%;
    color: darkgoldenrod;
    right: 40rpx;
  display: inline-block;
  width: 180rpx;
  height: 56rpx;
  text-align: center;
  border: 1rpx solid  darkgoldenrod;
font-size: 30rpx;
line-height: 56rpx;
}