微信小程序 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代码很少。