微信小程序 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