微信小程序简易朴朴超市

wxml

  
    
      
    
    
      搜索
    
  
  
    
      
        
      
    
  

  
    
      
      
      
      
      

    
    
      聚餐酒水
      食用粮油
      清洁物品
      肉类食品
      休闲零食
    
    
      
      
      
      
      
    
    
      宠物用品
      手工美妆
      母婴用品
      新鲜水果
      全部类别
    
  
  

  
    
      
    
  
  

wxss

.allbox{
  background-color: white;
}

input{
  border: 1px solid white;
  width: 240px;
  height: 30px;
  padding-left: 10px;
  /* border-top:solid 10rpx #04BE02;
  border-bottom :solid 10rpx #04BE02;
  border-left: solid 10rpx #04BE02;
  border-right: solid 10rpx #04BE02; */
}

.box1{
  flex: 1;
  display: flex;
  flex-direction: row;
  border-top:solid 10rpx #04BE02;
  border-bottom :solid 10rpx #04BE02;
  border-left: solid 10rpx #04BE02;
}

.button_box{
  flex: 1;
  display: flex;
  flex-direction: row;
  background:  #04BE02;
}

.input_box{

}

.placeholder{
  text-align: center;
  color:darkgray;
}

.img{
   height: 100%;
   width: 90%;
   padding-left: 15px;
}

.box_button{
  display: flex;
  width: 100%;
  flex-wrap: wrap;
}

.btn{
  text-align: center;
  display: flex;
  width: 100%;
}

.btn>text{
  padding-left: 20px;
  height: auto;
  width: 90rpx;
}

.images_button{
  text-align:center;
  width: 45px;
  height: 45px;
  padding-left: 14px;
  padding-top: 5px;
}

.tapimg1{  
  width:315px;
  height: 120px;
}

.tapbtn1[plain]{
  padding: 0;
  border:none;   
  width: 315px;
  height: 120px;
}

app.json部分代码：

"window": {

    "backgroundTextStyle": "dark",

    "navigationBarBackgroundColor": "#04BE02",

    "navigationBarTitleText": "朴朴超市",

    "navigationBarTextStyle": "white"

  },

  "tabBar": {

    "color": "#2F0000",

    "selectedColor": "#04BE02",

    "backgroundColor": "#fffff",

    "borderStyle": "black",

    "position": "bottom",

    "list": [

      {

        "pagePath": "pages/main/main",

        "text": "首页",

        "iconPath": "imges/main.png",

        "selectedIconPath": "imges/main.png"

      },

      {

        "pagePath": "pages/selector/selector",

        "text": "分类",

        "iconPath": "imges/分类.png",

        "selectedIconPath": "imges/分类.png"

      },

      {

        "pagePath": "pages/get/get",

        "text": "发现",

        "iconPath": "imges/搜索.png",

        "selectedIconPath": "imges/搜索.png"

      },

      {

        "pagePath": "pages/compare/compare",

        "text": "我的",

        "iconPath": "imges/我的.png",

        "selectedIconPath": "imges/我的.png"

      }

    ]

  },

  

  "style": "v2",

  "sitemapLocation": "sitemap.json"

}

实现效果：