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

 

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

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

---

index.wxml

<!--状态栏区域-->
<view class="cu-custom" style="height:{{CustomBar}}px;">
    <view class="cu-bar fixed none-bg text-white bg-img" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
        <navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
            <text class='icon-back'></text> 优选商家
        </navigator>
    </view>
</view>

<view class="box" style="top: {{CustomBar}}px;">

    <navigator hover-class='none' url="">
        <view class="cu-card case">
            <view class="cu-item shadow margin-top">
                <view class="cu-list menu menu-avatar">
                    <view class="cu-item">
                        <view class="cu-avatar radius lg" style="background-image:url(https://image.weilanwl.com/img/square-1.jpg);"></view>
                        <view class='content'>
                            <view class='text-black canui-xzwz'>店铺名称店铺</view>
                            <view class='text-gray text-sm canui-xzwz'> 店铺介绍店铺介绍店铺介绍店铺介绍</view>
                            <view class='text-orange text-sm canui-xzwz'><text class='icon-location'></text> 重庆市渝北区渝北区渝北区11号</view>
                        </view>
                        <view class='action'>
                            <button class='cu-btn bg-gradual-green shadow-blur radius'>进店</button>
                        </view>
                    </view>
                    <view class="canui-duotu">
                        <view class="canui-dtimg-a">
                            <view class="canui-dtimg-content">
                                <image src="https://image.weilanwl.com/img/4x3-3.jpg" mode="aspectFill"></image>
                                <view class="text-sm canui-dtimg-text">
                                    <view class="text-white canui-xzwz">商品名称商品名称商品名称商品名称</view>
                                    <view class="text-price text-red">60000</view>
                                </view>
                            </view>
                        </view>
                        <view class="canui-dtimg-b">
                            <view class="canui-dtimg-ba">
                                <view class="canui-dtimg-content">
                                    <image src="https://image.weilanwl.com/img/4x3-3.jpg" mode="aspectFill"></image>
                                    <view class="text-sm canui-dtimg-text">
                                        <view class="text-white canui-xzwz">商品名称</view>
                                        <view class="text-price text-red">60</view>
                                    </view>
                                </view>
                            </view>
                            <view class="canui-dtimg-bb">
                                <view class="canui-dtimg-content">
                                    <image src="https://image.weilanwl.com/img/4x3-3.jpg" mode="aspectFill"></image>
                                    <view class="text-sm canui-dtimg-text">
                                        <view class="text-white canui-xzwz">商品名称商品名称商品名称商品名称</view>
                                        <view class="text-price text-red">60000</view>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </navigator>

    <navigator hover-class='none' url="">
        <view class="cu-card case">
            <view class="cu-item shadow">
                <view class="cu-list menu menu-avatar">
                    <view class="cu-item">
                        <view class="cu-avatar radius lg" style="background-image:url(https://image.weilanwl.com/img/square-1.jpg);"></view>
                        <view class='content'>
                            <view class='text-black canui-xzwz'>店铺名称店铺</view>
                            <view class='text-gray text-sm canui-xzwz'> 店铺介绍店铺介绍店铺介绍店铺介绍</view>
                            <view class='text-orange text-sm canui-xzwz'><text class='icon-location'></text> 重庆市渝北区渝北区渝北区11号</view>
                        </view>
                        <view class='action'>
                            <button class='cu-btn bg-gradual-green shadow-blur radius'>进店</button>
                        </view>
                    </view>
                    <view class="canui-duotu">
                        <view class="canui-dtimg-a">
                            <view class="canui-dtimg-content">
                                <image src="https://image.weilanwl.com/img/4x3-3.jpg" mode="aspectFill"></image>
                                <view class="text-sm canui-dtimg-text">
                                    <view class="text-white canui-xzwz">商品名称商品名称商品名称商品名称</view>
                                    <view class="text-price text-red">60000</view>
                                </view>
                            </view>
                        </view>
                        <view class="canui-dtimg-b">
                            <view class="canui-dtimg-ba">
                                <view class="canui-dtimg-content">
                                    <image src="https://image.weilanwl.com/img/4x3-3.jpg" mode="aspectFill"></image>
                                    <view class="text-sm canui-dtimg-text">
                                        <view class="text-white canui-xzwz">商品名称</view>
                                        <view class="text-price text-red">60</view>
                                    </view>
                                </view>
                            </view>
                            <view class="canui-dtimg-bb">
                                <view class="canui-dtimg-content">
                                    <image src="https://image.weilanwl.com/img/4x3-3.jpg" mode="aspectFill"></image>
                                    <view class="text-sm canui-dtimg-text">
                                        <view class="text-white canui-xzwz">商品名称商品名称商品名称商品名称</view>
                                        <view class="text-price text-red">60000</view>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </navigator>
</view>

---

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代码很少。