微信小程序 colorui 仿美团优选商家模板界面（无功能）

 

使用的是colorui的小程序UI框架。

colorui地址：https://www.color-ui.com/

---

index.wxml

    
        
             优选商家
        
    




    
        
            
                
                    
                        
                        
                            店铺名称店铺
                             店铺介绍店铺介绍店铺介绍店铺介绍
                             重庆市渝北区渝北区渝北区11号
                        
                        
                            进店
                        
                    
                    
                        
                            
                                
                                
                                    商品名称商品名称商品名称商品名称
                                    60000
                                
                            
                        
                        
                            
                                
                                    
                                    
                                        商品名称
                                        60
                                    
                                
                            
                            
                                
                                    
                                    
                                        商品名称商品名称商品名称商品名称
                                        60000
                                    
                                
                            
                        
                    
                
            
        
    

    
        
            
                
                    
                        
                        
                            店铺名称店铺
                             店铺介绍店铺介绍店铺介绍店铺介绍
                             重庆市渝北区渝北区渝北区11号
                        
                        
                            进店
                        
                    
                    
                        
                            
                                
                                
                                    商品名称商品名称商品名称商品名称
                                    60000
                                
                            
                        
                        
                            
                                
                                    
                                    
                                        商品名称
                                        60
                                    
                                
                            
                            
                                
                                    
                                    
                                        商品名称商品名称商品名称商品名称
                                        60000
                                    
                                
                            
                        
                    
                
            
        
    

---

index.wxss

page {
    padding-top: 50px;
    padding-bottom:170rpx;
}
.cu-custom{
    position: absolute;
    top: 0px;
    width: 100%;
}
.canui-xzwz{
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:1;
}
.box{
    position: absolute;
    top: 64px;
    width: 100%;
}
.cu-custom .cu-bar{
    padding-right:inherit;
    background-image:linear-gradient(45deg, #ff9700, #ed1c24);
}
.bg-gradual-green {
    background-image:linear-gradient(45deg, #ff9700, #ed1c24);
}
.text-green, .line-green, .lines-green {
    color:#e45c5c;
}

.cu-list.menu-avatar>.cu-item {
    padding-left:190rpx;
    height:170rpx;
}
.cu-avatar.lg {
    width:140rpx;
    height:120rpx;
}
.cu-list.menu>.cu-item .content {
    margin-right:15rpx;
}
.canui-duotu{
    padding:20rpx 30rpx;
    padding-left:380rpx;
    padding-bottom:30rpx;
    position:relative;
    display:flex;
}
.canui-dtimg-a{
    position:absolute;
    left:30rpx;
    width:344rpx;
    height:348rpx;
}
.canui-dtimg-b{
    height:348rpx;
    width:100%;
}
.canui-dtimg-ba,.canui-dtimg-bb{
    height:172rpx;
}
.canui-dtimg-bb{
    margin-top:5rpx;
}
.canui-dtimg-content{
    position:relative;
}
.canui-dtimg-content,.canui-duotu image{
    width:100%;
    height:100%;
}
.canui-dtimg-a image{
    border-radius:10rpx 0 0 10rpx;
}
.canui-dtimg-ba image{
    border-radius:0 9rpx 0 0;
}
.canui-dtimg-bb image{
    border-radius:0 0 9rpx 0;
}
.canui-dtimg-text{
    position:absolute;
    bottom:0px;
    background:rgba(0,0,0,0.4);
    height:60rpx;
    line-height:60rpx;
    padding:0 15rpx;
}
.canui-dtimg-text .text-white{
    float:left;
    width:auto;
    max-width:210rpx;
    margin-right:10rpx;
    color:#aaa;
}
.canui-dtimg-text .text-price{
    float:right;
}
.canui-dtimg-a .canui-dtimg-text{
    border-radius:0 0 0 10rpx;
}
.canui-dtimg-b .canui-dtimg-text .text-white{
    max-width:150rpx;
}
.cu-card>.cu-item {
    margin-top:0rpx;
}
.cu-card>.margin-top{
    margin-top:30rpx;
}

 

---

index.js

const app = getApp();

Page({
	data: {
		StatusBar: app.globalData.StatusBar,
		CustomBar: app.globalData.CustomBar,
		hidden: true,
	},
	onLoad: function (option) {

	}
	
});

 

---

 

由于没有写功能，所以，js代码很少。