mirror of
https://github.com/weilanwl/coloruicss.git
synced 2026-03-13 11:34:02 +08:00
v2.1.2
This commit is contained in:
Weilanwl
@@ -1,9 +1 @@
|
||||
const app = getApp();
|
||||
Page({
|
||||
data: {
|
||||
StatusBar: app.globalData.StatusBar,
|
||||
CustomBar: app.globalData.CustomBar,
|
||||
Custom: app.globalData.Custom,
|
||||
},
|
||||
|
||||
})
|
||||
Page({})
|
||||
@@ -1,425 +1,404 @@
|
||||
<view class="cu-custom" style="height:{{CustomBar}}px;">
|
||||
<view class="cu-bar fixed bg-gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
|
||||
<navigator class='action border-custom' open-type="navigateBack" delta="1" hover-class="none" style='width:{{Custom.width}}px;height:{{Custom.height}}px;margin-left:calc(750rpx - {{Custom.right}}px)'>
|
||||
<text class='icon-back'></text>
|
||||
<text class='icon-homefill'></text>
|
||||
</navigator>
|
||||
<view class='content' style='top:{{StatusBar}}px;'>操作条</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<cu-custom bgColor="bg-gradual-pink" isCustom="{{true}}"><view slot="content">操作条</view></cu-custom>
|
||||
<view class="cu-bar bg-white margin-top">
|
||||
<view class='action'>
|
||||
<text class='icon-title text-green'></text>
|
||||
<view class="action">
|
||||
<text class="icon-title text-green"></text>
|
||||
<text>底部操作条</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class='box'>
|
||||
<view class="box">
|
||||
<view class="cu-bar tabbar bg-white">
|
||||
<view class="action">
|
||||
<view class='icon-cu-image'>
|
||||
<image src='/images/tabbar/basics_cur.png'></image>
|
||||
<view class="icon-cu-image">
|
||||
<image src="/images/tabbar/basics_cur.png"></image>
|
||||
</view>
|
||||
<view class='text-green'>元素</view>
|
||||
<view class="text-green">元素</view>
|
||||
</view>
|
||||
<view class="action">
|
||||
<view class='icon-cu-image'>
|
||||
<image src='/images/tabbar/component.png'></image>
|
||||
<view class="icon-cu-image">
|
||||
<image src="/images/tabbar/component.png"></image>
|
||||
</view>
|
||||
<view class='text-gray'>组件</view>
|
||||
<view class="text-gray">组件</view>
|
||||
</view>
|
||||
<view class="action">
|
||||
<view class='icon-cu-image'>
|
||||
<image src='/images/tabbar/plugin.png'></image>
|
||||
<view class='cu-tag badge'>99</view>
|
||||
<view class="icon-cu-image">
|
||||
<image src="/images/tabbar/plugin.png"></image>
|
||||
<view class="cu-tag badge">99</view>
|
||||
</view>
|
||||
<view class='text-gray'>扩展</view>
|
||||
<view class="text-gray">扩展</view>
|
||||
</view>
|
||||
<view class="action">
|
||||
<view class='icon-cu-image'>
|
||||
<image src='/images/tabbar/about.png'></image>
|
||||
<view class='cu-tag badge'></view>
|
||||
<view class="icon-cu-image">
|
||||
<image src="/images/tabbar/about.png"></image>
|
||||
<view class="cu-tag badge"></view>
|
||||
</view>
|
||||
<view class='text-gray'>关于</view>
|
||||
<view class="text-gray">关于</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-bar tabbar margin-bottom-xl bg-black">
|
||||
<view class="action text-orange">
|
||||
<view class='icon-homefill'></view> 首页
|
||||
<view class="icon-homefill"></view> 首页
|
||||
</view>
|
||||
<view class="action text-gray">
|
||||
<view class='icon-similar'></view> 分类
|
||||
<view class="icon-similar"></view> 分类
|
||||
</view>
|
||||
<view class="action text-gray">
|
||||
<view class='icon-recharge'></view>
|
||||
<view class="icon-recharge"></view>
|
||||
积分
|
||||
</view>
|
||||
<view class="action text-gray">
|
||||
<view class='icon-cart'>
|
||||
<view class='cu-tag badge'>99</view>
|
||||
<view class="icon-cart">
|
||||
<view class="cu-tag badge">99</view>
|
||||
</view>
|
||||
购物车
|
||||
</view>
|
||||
<view class="action text-gray">
|
||||
<view class='icon-my'>
|
||||
<view class='cu-tag badge'></view>
|
||||
<view class="icon-my">
|
||||
<view class="cu-tag badge"></view>
|
||||
</view>
|
||||
我的
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-bar tabbar margin-bottom-xl bg-white">
|
||||
<view class="action text-green">
|
||||
<view class='icon-homefill'></view> 首页
|
||||
<view class="icon-homefill"></view> 首页
|
||||
</view>
|
||||
<view class="action text-gray">
|
||||
<view class='icon-similar'></view> 分类
|
||||
<view class="icon-similar"></view> 分类
|
||||
</view>
|
||||
<view class="action text-gray add-action">
|
||||
<button class='cu-btn icon-add bg-green shadow'></button>
|
||||
<button class="cu-btn icon-add bg-green shadow"></button>
|
||||
发布
|
||||
</view>
|
||||
<view class="action text-gray">
|
||||
<view class='icon-cart'>
|
||||
<view class='cu-tag badge'>99</view>
|
||||
<view class="icon-cart">
|
||||
<view class="cu-tag badge">99</view>
|
||||
</view>
|
||||
购物车
|
||||
</view>
|
||||
<view class="action text-gray">
|
||||
<view class='icon-my'>
|
||||
<view class='cu-tag badge'></view>
|
||||
<view class="icon-my">
|
||||
<view class="cu-tag badge"></view>
|
||||
</view>
|
||||
我的
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-bar tabbar bg-black">
|
||||
<view class="action text-green">
|
||||
<view class='icon-homefill'></view> 首页
|
||||
<view class="icon-homefill"></view> 首页
|
||||
</view>
|
||||
<view class="action text-gray">
|
||||
<view class='icon-similar'></view> 分类
|
||||
<view class="icon-similar"></view> 分类
|
||||
</view>
|
||||
<view class="action text-gray add-action">
|
||||
<button class='cu-btn icon-add bg-green shadow'></button>
|
||||
<button class="cu-btn icon-add bg-green shadow"></button>
|
||||
发布
|
||||
</view>
|
||||
<view class="action text-gray">
|
||||
<view class='icon-cart'>
|
||||
<view class='cu-tag badge'>99</view>
|
||||
<view class="icon-cart">
|
||||
<view class="cu-tag badge">99</view>
|
||||
</view>
|
||||
购物车
|
||||
</view>
|
||||
<view class="action text-gray">
|
||||
<view class='icon-my'>
|
||||
<view class='cu-tag badge'></view>
|
||||
<view class="icon-my">
|
||||
<view class="cu-tag badge"></view>
|
||||
</view>
|
||||
我的
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="cu-bar bg-white tabbar border shop">
|
||||
<button class="action" open-type='contact'>
|
||||
<view class='icon-service text-green'>
|
||||
<view class='cu-tag badge'></view>
|
||||
<button class="action" open-type="contact">
|
||||
<view class="icon-service text-green">
|
||||
<view class="cu-tag badge"></view>
|
||||
</view>
|
||||
客服
|
||||
</button>
|
||||
<view class="action text-orange">
|
||||
<view class='icon-favorfill'></view> 已收藏
|
||||
<view class="icon-favorfill"></view> 已收藏
|
||||
</view>
|
||||
<view class="action">
|
||||
<view class='icon-cart'>
|
||||
<view class='cu-tag badge'>99</view>
|
||||
<view class="icon-cart">
|
||||
<view class="cu-tag badge">99</view>
|
||||
</view>
|
||||
购物车
|
||||
</view>
|
||||
<view class='bg-red submit'>立即订购</view>
|
||||
<view class="bg-red submit">立即订购</view>
|
||||
</view>
|
||||
|
||||
<view class="cu-bar bg-white tabbar border shop">
|
||||
<button class="action" open-type='contact'>
|
||||
<view class='icon-service text-green'>
|
||||
<view class='cu-tag badge'></view>
|
||||
<button class="action" open-type="contact">
|
||||
<view class="icon-service text-green">
|
||||
<view class="cu-tag badge"></view>
|
||||
</view>
|
||||
客服
|
||||
</button>
|
||||
<view class="action">
|
||||
<view class='icon-cart'>
|
||||
<view class='cu-tag badge'>99</view>
|
||||
<view class="icon-cart">
|
||||
<view class="cu-tag badge">99</view>
|
||||
</view>
|
||||
购物车
|
||||
</view>
|
||||
<view class='bg-orange submit'>加入购物车</view>
|
||||
<view class='bg-red submit'>立即订购</view>
|
||||
<view class="bg-orange submit">加入购物车</view>
|
||||
<view class="bg-red submit">立即订购</view>
|
||||
</view>
|
||||
|
||||
<view class="cu-bar bg-white tabbar border shop">
|
||||
<button class="action" open-type='contact'>
|
||||
<view class='icon-service text-green'>
|
||||
<view class='cu-tag badge'></view>
|
||||
<button class="action" open-type="contact">
|
||||
<view class="icon-service text-green">
|
||||
<view class="cu-tag badge"></view>
|
||||
</view>
|
||||
客服
|
||||
</button>
|
||||
<view class="action">
|
||||
<view class=' icon-shop'></view> 店铺
|
||||
<view class=" icon-shop"></view> 店铺
|
||||
</view>
|
||||
<view class="action">
|
||||
<view class='icon-cart'>
|
||||
<view class='cu-tag badge'>99</view>
|
||||
<view class="icon-cart">
|
||||
<view class="cu-tag badge">99</view>
|
||||
</view>
|
||||
购物车
|
||||
</view>
|
||||
<view class='btn-group'>
|
||||
<button class='cu-btn bg-red round shadow-blur'>立即订购</button>
|
||||
<view class="btn-group">
|
||||
<button class="cu-btn bg-red round shadow-blur">立即订购</button>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-bar bg-white tabbar border shop">
|
||||
<button class="action" open-type='contact'>
|
||||
<view class='icon-service text-green'>
|
||||
<view class='cu-tag badge'></view>
|
||||
<button class="action" open-type="contact">
|
||||
<view class="icon-service text-green">
|
||||
<view class="cu-tag badge"></view>
|
||||
</view> 客服
|
||||
</button>
|
||||
<view class="action">
|
||||
<view class='icon-cart'>
|
||||
<view class='cu-tag badge'>99</view>
|
||||
<view class="icon-cart">
|
||||
<view class="cu-tag badge">99</view>
|
||||
</view>
|
||||
购物车
|
||||
</view>
|
||||
<view class='btn-group'>
|
||||
<button class='cu-btn bg-orange round shadow-blur'>加入购物车</button>
|
||||
<button class='cu-btn bg-red round shadow-blur'>立即订购</button>
|
||||
<view class="btn-group">
|
||||
<button class="cu-btn bg-orange round shadow-blur">加入购物车</button>
|
||||
<button class="cu-btn bg-red round shadow-blur">立即订购</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="cu-bar bg-white">
|
||||
<view class='action'>
|
||||
<text class='icon-title text-green'></text>
|
||||
<view class="action">
|
||||
<text class="icon-title text-green"></text>
|
||||
<text>标题操作条</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class='box' wx:if="{{false}}">
|
||||
<view class="box" wx:if="{{false}}">
|
||||
<view class="cu-bar justify-center bg-white">
|
||||
<view class='action border-title'>
|
||||
<text class='text-xl text-bold'>关于我们</text>
|
||||
<text class='bg-grey' style='width:2rem'></text>
|
||||
<view class="action border-title">
|
||||
<text class="text-xl text-bold">关于我们</text>
|
||||
<text class="bg-grey" style="width:2rem"></text>
|
||||
<!-- 底部样式 last-child选择器-->
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-bar justify-center bg-white">
|
||||
<view class='action border-title'>
|
||||
<text class='text-xl text-bold text-blue'>关于我们</text>
|
||||
<text class='bg-gradual-blue' style='width:3rem'></text>
|
||||
<view class="action border-title">
|
||||
<text class="text-xl text-bold text-blue">关于我们</text>
|
||||
<text class="bg-gradual-blue" style="width:3rem"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-bar justify-center bg-white">
|
||||
<view class='action sub-title'>
|
||||
<text class='text-xl text-bold text-green'>关于我们</text>
|
||||
<text class='bg-green' style='width:2rem'></text>
|
||||
<view class="action sub-title">
|
||||
<text class="text-xl text-bold text-green">关于我们</text>
|
||||
<text class="bg-green" style="width:2rem"></text>
|
||||
<!-- last-child选择器-->
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-bar justify-center bg-white">
|
||||
<view class='action sub-title'>
|
||||
<text class='text-xl text-bold text-blue'>关于我们</text>
|
||||
<text class='text-ABC text-blue'>about</text>
|
||||
<view class="action sub-title">
|
||||
<text class="text-xl text-bold text-blue">关于我们</text>
|
||||
<text class="text-ABC text-blue">about</text>
|
||||
<!-- last-child选择器-->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class='box'>
|
||||
<view class="box">
|
||||
<view class="cu-bar bg-white">
|
||||
<view class='action border-title'>
|
||||
<text class='text-xl text-bold'>关于我们</text>
|
||||
<text class='bg-grey' style='width:2rem'></text>
|
||||
<view class="action border-title">
|
||||
<text class="text-xl text-bold">关于我们</text>
|
||||
<text class="bg-grey" style="width:2rem"></text>
|
||||
<!-- 底部样式 last-child选择器-->
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-bar bg-white">
|
||||
<view class='action border-title'>
|
||||
<text class='text-xl text-bold text-blue'>关于我们</text>
|
||||
<text class='bg-gradual-blue' style='width:3rem'></text>
|
||||
<view class="action border-title">
|
||||
<text class="text-xl text-bold text-blue">关于我们</text>
|
||||
<text class="bg-gradual-blue" style="width:3rem"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-bar bg-white">
|
||||
<view class='action sub-title'>
|
||||
<text class='text-xl text-bold text-green'>关于我们</text>
|
||||
<text class='bg-green'></text>
|
||||
<view class="action sub-title">
|
||||
<text class="text-xl text-bold text-green">关于我们</text>
|
||||
<text class="bg-green"></text>
|
||||
<!-- last-child选择器-->
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-bar bg-white">
|
||||
<view class='action sub-title'>
|
||||
<text class='text-xl text-bold text-blue'>关于我们</text>
|
||||
<text class='text-ABC text-blue'>about</text>
|
||||
<view class="action sub-title">
|
||||
<text class="text-xl text-bold text-blue">关于我们</text>
|
||||
<text class="text-ABC text-blue">about</text>
|
||||
<!-- last-child选择器-->
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-bar bg-white">
|
||||
<view class='action title-style-3'>
|
||||
<text class='text-xl text-bold'>关于我们</text>
|
||||
<text class='text-Abc text-gray self-end margin-left-sm'>about</text>
|
||||
<view class="action title-style-3">
|
||||
<text class="text-xl text-bold">关于我们</text>
|
||||
<text class="text-Abc text-gray self-end margin-left-sm">about</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-bar bg-white">
|
||||
<view class='action'>
|
||||
<text class='icon-title text-green'></text>
|
||||
<text class='text-xl text-bold'>关于我们</text>
|
||||
<view class="action">
|
||||
<text class="icon-title text-green"></text>
|
||||
<text class="text-xl text-bold">关于我们</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-bar bg-white">
|
||||
<view class='action'>
|
||||
<text class='icon-titles text-green'></text>
|
||||
<text class='text-xl text-bold'>关于我们</text>
|
||||
<view class="action">
|
||||
<text class="icon-titles text-green"></text>
|
||||
<text class="text-xl text-bold">关于我们</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="cu-bar bg-white">
|
||||
<view class='action'>
|
||||
<text class='icon-title text-green'></text>
|
||||
<view class="action">
|
||||
<text class="icon-title text-green"></text>
|
||||
<text>顶部操作条</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class='box'>
|
||||
<view class="box">
|
||||
<view class="cu-bar bg-white">
|
||||
<view class='action'>
|
||||
<text class='icon-back text-gray'></text> 返回
|
||||
<view class="action">
|
||||
<text class="icon-back text-gray"></text> 返回
|
||||
</view>
|
||||
<view class='content text-bold'>
|
||||
<view class="content text-bold">
|
||||
操作条
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-bar bg-white">
|
||||
<view class='action'>
|
||||
<text class='icon-homefill text-gray'></text> 首页
|
||||
<view class="action">
|
||||
<text class="icon-homefill text-gray"></text> 首页
|
||||
</view>
|
||||
<view class='content text-bold'>
|
||||
<view class="content text-bold">
|
||||
鲜亮的高饱和色彩，专注视觉的小程序组件库
|
||||
</view>
|
||||
<view class='action'>
|
||||
<text class='icon-cardboardfill text-grey'></text>
|
||||
<text class='icon-recordfill text-red'></text>
|
||||
<view class="action">
|
||||
<text class="icon-cardboardfill text-grey"></text>
|
||||
<text class="icon-recordfill text-red"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-bar bg-blue">
|
||||
<view class='action'>
|
||||
<text class='icon-close'></text> 关闭
|
||||
<view class="action">
|
||||
<text class="icon-close"></text> 关闭
|
||||
</view>
|
||||
<view class='content text-bold'>
|
||||
<view class="content text-bold">
|
||||
海蓝
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-bar bg-black search">
|
||||
<view class="cu-avatar round" style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"></view>
|
||||
<view class='content'>
|
||||
<view class="content">
|
||||
ColorUI
|
||||
</view>
|
||||
<view class='action'>
|
||||
<view class="action">
|
||||
<text class="icon-more"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="cu-bar bg-white">
|
||||
<view class='action'>
|
||||
<text class='icon-title text-green'></text>
|
||||
<view class="action">
|
||||
<text class="icon-title text-green"></text>
|
||||
<text>搜索操作条</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class='box'>
|
||||
<view class="box">
|
||||
<view class="cu-bar search bg-white">
|
||||
<view class='search-form round'>
|
||||
<view class="search-form round">
|
||||
<text class="icon-search"></text>
|
||||
<input type="text" placeholder="搜索图片、文章、视频" confirm-type="search"></input>
|
||||
</view>
|
||||
<view class='action'>
|
||||
<button class='cu-btn bg-green shadow-blur round'>搜索</button>
|
||||
<view class="action">
|
||||
<button class="cu-btn bg-green shadow-blur round">搜索</button>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-bar search bg-white">
|
||||
<view class="cu-avatar round" style="background-image:url(https://image.weilanwl.com/img/square-2.jpg);"></view>
|
||||
<view class='search-form round'>
|
||||
<view class="search-form round">
|
||||
<text class="icon-search"></text>
|
||||
<input type="text" placeholder="搜索图片、文章、视频" confirm-type="search"></input>
|
||||
</view>
|
||||
<view class='action'>
|
||||
<view class="action">
|
||||
<text>广州</text>
|
||||
<text class="icon-triangledownfill"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-bar bg-red search">
|
||||
<view class="cu-avatar round" style="background-image:url(https://image.weilanwl.com/img/square-1.jpg);"></view>
|
||||
<view class='search-form radius'>
|
||||
<view class="search-form radius">
|
||||
<text class="icon-search"></text>
|
||||
<input type="text" placeholder="搜索图片、文章、视频" confirm-type="search"></input>
|
||||
</view>
|
||||
<view class='action'>
|
||||
<view class="action">
|
||||
<text>广州</text>
|
||||
<text class="icon-triangledownfill"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-bar bg-cyan search">
|
||||
<view class='search-form radius'>
|
||||
<view class="search-form radius">
|
||||
<text class="icon-search"></text>
|
||||
<input type="text" placeholder="搜索图片、文章、视频" confirm-type="search"></input>
|
||||
</view>
|
||||
<view class='action'>
|
||||
<text class='icon-close'></text>
|
||||
<view class="action">
|
||||
<text class="icon-close"></text>
|
||||
<text>取消</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="cu-bar bg-white">
|
||||
<view class='action'>
|
||||
<text class='icon-title text-green'></text>
|
||||
<view class="action">
|
||||
<text class="icon-title text-green"></text>
|
||||
<text>操作条按钮组</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class='box'>
|
||||
<view class="box">
|
||||
<view class="cu-bar btn-group">
|
||||
<button class='cu-btn bg-green shadow-blur round lg'>保存</button>
|
||||
<button class="cu-btn bg-green shadow-blur round lg">保存</button>
|
||||
</view>
|
||||
<view class="cu-bar btn-group">
|
||||
<button class='cu-btn bg-green shadow-blur'>保存</button>
|
||||
<button class='cu-btn text-green line-green shadow'>上传</button>
|
||||
<button class="cu-btn bg-green shadow-blur">保存</button>
|
||||
<button class="cu-btn text-green line-green shadow">上传</button>
|
||||
</view>
|
||||
<view class="cu-bar btn-group">
|
||||
<button class='cu-btn bg-green shadow-blur round'>保存</button>
|
||||
<button class='cu-btn bg-blue shadow-blur round'>提交</button>
|
||||
<button class="cu-btn bg-green shadow-blur round">保存</button>
|
||||
<button class="cu-btn bg-blue shadow-blur round">提交</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="cu-bar bg-white">
|
||||
<view class='action'>
|
||||
<text class='icon-title text-green'></text>
|
||||
<view class="action">
|
||||
<text class="icon-title text-green"></text>
|
||||
<text>输入操作条</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class='box'>
|
||||
<view class="box">
|
||||
<view class="cu-bar input">
|
||||
<view class='action'>
|
||||
<text class='icon-sound text-grey'></text>
|
||||
<view class="action">
|
||||
<text class="icon-sound text-grey"></text>
|
||||
</view>
|
||||
<input class='solid-bottom' focus="{{false}}" maxlength="300" cursor-spacing="10"></input>
|
||||
<view class='action'>
|
||||
<text class='icon-emojifill text-grey'></text>
|
||||
<input class="solid-bottom" focus="{{false}}" maxlength="300" cursor-spacing="10"></input>
|
||||
<view class="action">
|
||||
<text class="icon-emojifill text-grey"></text>
|
||||
</view>
|
||||
<button class='cu-btn bg-green shadow-blur'>发送</button>
|
||||
<button class="cu-btn bg-green shadow-blur">发送</button>
|
||||
</view>
|
||||
|
||||
<view class="cu-bar input">
|
||||
<view class="cu-avatar round" style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"></view>
|
||||
<view class='action'>
|
||||
<text class='icon-roundaddfill text-grey'></text>
|
||||
<view class="action">
|
||||
<text class="icon-roundaddfill text-grey"></text>
|
||||
</view>
|
||||
<input class='solid-bottom' maxlength="300" cursor-spacing="10"></input>
|
||||
<view class='action'>
|
||||
<text class='icon-emojifill text-grey'></text>
|
||||
<input class="solid-bottom" maxlength="300" cursor-spacing="10"></input>
|
||||
<view class="action">
|
||||
<text class="icon-emojifill text-grey"></text>
|
||||
</view>
|
||||
<button class='cu-btn bg-green shadow-blur'>发送</button>
|
||||
<button class="cu-btn bg-green shadow-blur">发送</button>
|
||||
</view>
|
||||
</view>
|
||||
@@ -1,5 +1,5 @@
|
||||
.box {
|
||||
margin: 20rpx;
|
||||
margin: 20rpx 0;
|
||||
}
|
||||
|
||||
.box view.cu-bar {
|
||||
|
||||
@@ -1,10 +1,4 @@
|
||||
<view class="cu-custom" style="height:{{CustomBar}}px;">
|
||||
<view class="cu-bar fixed bg-gradual-pink" 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>
|
||||
<cu-custom bgColor="bg-gradual-pink" isBack="{{true}}"><view slot="backText">返回</view><view slot="content">卡片</view></cu-custom>
|
||||
<view class="cu-bar bg-white solid-bottom">
|
||||
<view class='action'>
|
||||
<text class='icon-titles text-orange '></text> 案例类卡片
|
||||
@@ -14,29 +8,32 @@
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-card case {{isCard?'no-card':''}}">
|
||||
<view wx:for="{{1}}" wx:key class="cu-item shadow">
|
||||
<view class='image'>
|
||||
<image src="https://image.weilanwl.com/img/4x3-1.jpg" mode="widthFix"></image>
|
||||
<view class="cu-tag bg-blue">福利</view>
|
||||
<view class='cu-bar bg-shadeBottom'>我和制服不得不说的那些事！</view>
|
||||
<view class="cu-item shadow">
|
||||
<view class="image">
|
||||
<image src="https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg" mode="widthFix"></image>
|
||||
<view class="cu-tag bg-blue">史诗</view>
|
||||
<view class="cu-bar bg-shadeBottom">
|
||||
<text class="text-cut">我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-list menu menu-avatar">
|
||||
<view class="cu-list menu-avatar">
|
||||
<view class="cu-item">
|
||||
<view class="cu-avatar round lg" style="background-image:url(https://image.weilanwl.com/img/square-4.jpg);"></view>
|
||||
<view class='content flex-sub'>
|
||||
<view class='text-grey'>猪皮蛋</view>
|
||||
<view class='text-gray text-sm flex justify-between'>
|
||||
<view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg);"></view>
|
||||
<view class="content flex-sub">
|
||||
<view class="text-grey">正义天使 凯尔</view>
|
||||
<view class="text-gray text-sm flex justify-between">
|
||||
十天前
|
||||
<view class="text-gray text-sm">
|
||||
<text class="icon-attentionfill"></text> 10
|
||||
<text class="icon-appreciatefill"></text> 20
|
||||
<text class="icon-messagefill"></text> 30
|
||||
<text class="icon-attentionfill margin-lr-xs"></text> 10
|
||||
<text class="icon-appreciatefill margin-lr-xs"></text> 20
|
||||
<text class="icon-messagefill margin-lr-xs"></text> 30
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="cu-bar bg-white solid-bottom {{isCard?'margin-top':''}}">
|
||||
<view class='action'>
|
||||
@@ -47,48 +44,70 @@
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-card dynamic {{isCard?'no-card':''}}">
|
||||
<view wx:for="1" wx:key class="cu-item shadow">
|
||||
<view class="cu-list menu menu-avatar">
|
||||
<view class="cu-item shadow">
|
||||
<view class="cu-list menu-avatar">
|
||||
<view class="cu-item">
|
||||
<view class="cu-avatar round lg" style="background-image:url(https://image.weilanwl.com/img/square-1.jpg);"></view>
|
||||
<view class='content flex-sub'>
|
||||
<view>晓晓萌</view>
|
||||
<view class='text-gray text-sm flex justify-between'>
|
||||
2018年12月3日
|
||||
<view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg);"></view>
|
||||
<view class="content flex-sub">
|
||||
<view>凯尔</view>
|
||||
<view class="text-gray text-sm flex justify-between">
|
||||
2019年12月3日
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class='text-content'>
|
||||
你们的铲屎官是不是经常突然对手机傻笑？我家铲屎官常常坐沙发上笑的发抖！（暗中观察.jpg）
|
||||
<view class="text-content">
|
||||
折磨生出苦难，苦难又会加剧折磨，凡间这无穷的循环，将有我来终结！
|
||||
</view>
|
||||
<view class="grid {{isCard?'col-3 grid-square':'col-1'}} flex-sub padding-lr">
|
||||
<view class="bg-img {{isCard?'':'only-img'}}" style="background-image:url(https://image.weilanwl.com/img/square-1.jpg);" wx:for="{{isCard?9:1}}" wx:key>
|
||||
<view class="grid flex-sub padding-lr {{isCard?'col-3 grid-square':'col-1'}}">
|
||||
<view class="bg-img {{isCard?'':'only-img'}}" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg);" wx:for="{{isCard?9:1}}" wx:key="{{index}}">
|
||||
</view>
|
||||
</view>
|
||||
<view class='text-gray text-sm text-right padding'>
|
||||
<text class="icon-attentionfill"></text> 10
|
||||
<text class="icon-appreciatefill"></text> 20
|
||||
<text class="icon-messagefill"></text> 30
|
||||
<view class="text-gray text-sm text-right padding">
|
||||
<text class="icon-attentionfill margin-lr-xs"></text> 10
|
||||
<text class="icon-appreciatefill margin-lr-xs"></text> 20
|
||||
<text class="icon-messagefill margin-lr-xs"></text> 30
|
||||
</view>
|
||||
<view class="cu-list menu menu-avatar comment solids-top">
|
||||
<view class="cu-item" wx:for="{{2}}" wx:key>
|
||||
<view class="cu-avatar round" style="background-image:url(https://image.weilanwl.com/img/square-1.jpg);"></view>
|
||||
<view class='content'>
|
||||
<view class='text-grey'>猪皮蛋</view>
|
||||
<view class='text-gray text-content text-df'>
|
||||
我家铲屎官不舔毛，还抠脚！
|
||||
<view class="cu-list menu-avatar comment solids-top">
|
||||
<view class="cu-item">
|
||||
<view class="cu-avatar round" style="background-image:url(https://ossweb-img.qq.com/images/lol/img/champion/Morgana.png);"></view>
|
||||
<view class="content">
|
||||
<view class="text-grey">莫甘娜</view>
|
||||
<view class="text-gray text-content text-df">
|
||||
凯尔，你被自己的光芒变的盲目。
|
||||
</view>
|
||||
<view class='bg-grey padding-sm radius margin-top-sm text-sm' wx:if="{{index==1}}">
|
||||
<view class="flex {{index!=0?'margin-top-sm':'' }}" wx:for="{{2}}" wx:key>
|
||||
<view>我：</view>
|
||||
<view class='flex-sub'>我家的铲屎官也不舔毛！</view>
|
||||
<view class="bg-grey padding-sm radius margin-top-sm text-sm">
|
||||
<view class="flex">
|
||||
<view>凯尔：</view>
|
||||
<view class="flex-sub">妹妹，你在帮他们给黑暗找借口吗?</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class='margin-top-sm flex justify-between'>
|
||||
<view class='text-gray text-df'>2018年12月4日</view>
|
||||
<view class="margin-top-sm flex justify-between">
|
||||
<view class="text-gray text-df">2018年12月4日</view>
|
||||
<view>
|
||||
<text class="icon-appreciate{{!isZan?'fill':''}} text-{{!isZan?'red':'gray'}}"></text>
|
||||
<text class="icon-appreciatefill text-red"></text>
|
||||
<text class="icon-messagefill text-gray margin-left-sm"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-item">
|
||||
<view class="cu-avatar round" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg);"></view>
|
||||
<view class="content">
|
||||
<view class="text-grey">凯尔</view>
|
||||
<view class="text-gray text-content text-df">
|
||||
妹妹，如果不是为了飞翔，我们要这翅膀有什么用?
|
||||
</view>
|
||||
<view class="bg-grey padding-sm radius margin-top-sm text-sm">
|
||||
<view class="flex">
|
||||
<view>莫甘娜：</view>
|
||||
<view class="flex-sub">如果不能立足于大地，要这双脚又有何用?</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="margin-top-sm flex justify-between">
|
||||
<view class="text-gray text-df">2018年12月4日</view>
|
||||
<view>
|
||||
<text class="icon-appreciate text-gray"></text>
|
||||
<text class="icon-messagefill text-gray margin-left-sm"></text>
|
||||
</view>
|
||||
</view>
|
||||
@@ -97,7 +116,6 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="cu-bar bg-white solid-bottom margin-top">
|
||||
<view class='action'>
|
||||
<text class='icon-titles text-orange '></text> 文章类卡片
|
||||
@@ -107,15 +125,17 @@
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-card article {{isCard?'no-card':''}}">
|
||||
<view wx:for="1" wx:key class="cu-item shadow">
|
||||
<view class="title">这里有个戏精铲屎官，主子了解一下？</view>
|
||||
<view class="cu-item shadow">
|
||||
<view class="title">
|
||||
<view class="text-cut">无意者 烈火焚身;以正义的烈火拔出黑暗。我有自己的正义，见证至高的烈火吧。</view>
|
||||
</view>
|
||||
<view class="content">
|
||||
<image src="https://image.weilanwl.com/img/4x3-3.jpg" mode="aspectFill"></image>
|
||||
<image src="https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg" mode="aspectFill"></image>
|
||||
<view class="desc">
|
||||
<view class='text-content'> 这是一个伪铲屎官为了给自己的程序凑字数瞎几把乱写的一堆文字，了解一下就OK！ヾ(=･ω･=)o</view>
|
||||
<view class="text-content"> 折磨生出苦难，苦难又会加剧折磨，凡间这无穷的循环，将有我来终结！真正的恩典因不完整而美丽，因情感而真诚，因脆弱而自由！</view>
|
||||
<view>
|
||||
<view class='cu-tag bg-red light sm round'>假装有猫系列</view>
|
||||
<view class='cu-tag bg-green light sm round'>戏精系列</view>
|
||||
<view class="cu-tag bg-red light sm round">正义天使</view>
|
||||
<view class="cu-tag bg-green light sm round">史诗</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -1,9 +1,15 @@
|
||||
const app = getApp();
|
||||
Page({
|
||||
data: {
|
||||
StatusBar: app.globalData.StatusBar,
|
||||
CustomBar: app.globalData.CustomBar
|
||||
InputBottom: 0
|
||||
},
|
||||
onLoad: function () { },
|
||||
|
||||
});
|
||||
InputFocus(e) {
|
||||
this.setData({
|
||||
InputBottom: e.detail.height
|
||||
})
|
||||
},
|
||||
InputBlur(e) {
|
||||
this.setData({
|
||||
InputBottom: 0
|
||||
})
|
||||
}
|
||||
})
|
||||
@@ -1,91 +1,83 @@
|
||||
<view class="cu-custom" style="height:{{CustomBar}}px;">
|
||||
<view class="cu-bar fixed bg-gradual-pink" 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>
|
||||
|
||||
<cu-custom bgColor="bg-gradual-pink" isBack="{{true}}"><view slot="backText">返回</view><view slot="content">聊天</view></cu-custom>
|
||||
<view class="cu-chat">
|
||||
<view class="cu-item self">
|
||||
<view class="main">
|
||||
<view class='content bg-green shadow'>
|
||||
<view class="content bg-green shadow">
|
||||
<text>喵喵喵！喵喵喵！喵喵喵！喵喵！喵喵！！喵！喵喵喵！</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-avatar radius" style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"></view>
|
||||
<view class='date'>2018年3月23日 13:23</view>
|
||||
<view class="cu-avatar radius" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big107000.jpg);"></view>
|
||||
<view class="date">2018年3月23日 13:23</view>
|
||||
</view>
|
||||
<view class='cu-info round'>对方撤回一条消息!</view>
|
||||
<view class="cu-info round">对方撤回一条消息!</view>
|
||||
<view class="cu-item">
|
||||
<view class="cu-avatar radius" style="background-image:url(https://image.weilanwl.com/img/square-2.jpg);"></view>
|
||||
<view class="cu-avatar radius" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big143004.jpg);"></view>
|
||||
<view class="main">
|
||||
<view class='content shadow'>
|
||||
<view class="content shadow">
|
||||
<text>喵喵喵！喵喵喵！</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class='date '> 13:23</view>
|
||||
<view class="date "> 13:23</view>
|
||||
</view>
|
||||
<view class="cu-info">
|
||||
<text class='icon-roundclosefill text-red '></text> 对方拒绝了你的消息
|
||||
<text class="icon-roundclosefill text-red "></text> 对方拒绝了你的消息
|
||||
</view>
|
||||
<view class="cu-info">
|
||||
对方开启了好友验证，你还不是他(她)的好友。请先发送好友验证请求，对方验证通过后，才能聊天。
|
||||
<text class='text-blue'>发送好友验证</text>
|
||||
<text class="text-blue">发送好友验证</text>
|
||||
</view>
|
||||
<view class="cu-item self">
|
||||
<view class="main">
|
||||
<image src="https://image.weilanwl.com/img/3x4-1.jpg" class='radius' mode="widthFix"></image>
|
||||
<image src="https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg" class="radius" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="cu-avatar radius" style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"></view>
|
||||
<view class='date'> 13:23</view>
|
||||
<view class="cu-avatar radius" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big107000.jpg);"></view>
|
||||
<view class="date"> 13:23</view>
|
||||
</view>
|
||||
<view class="cu-item self">
|
||||
<view class="main">
|
||||
<view class='action text-bold text-grey'>
|
||||
<view class="action text-bold text-grey">
|
||||
3"
|
||||
</view>
|
||||
<view class='content shadow'>
|
||||
<text class='icon-sound text-xxl padding-right-xl'> </text>
|
||||
<view class="content shadow">
|
||||
<text class="icon-sound text-xxl padding-right-xl"> </text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-avatar radius" style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"></view>
|
||||
<view class='date'>13:23</view>
|
||||
<view class="cu-avatar radius" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big107000.jpg);"></view>
|
||||
<view class="date">13:23</view>
|
||||
</view>
|
||||
<view class="cu-item self">
|
||||
<view class="main">
|
||||
<view class='action'>
|
||||
<text class='icon-locationfill text-orange text-xxl'></text>
|
||||
<view class="action">
|
||||
<text class="icon-locationfill text-orange text-xxl"></text>
|
||||
</view>
|
||||
<view class='content shadow'>
|
||||
<view class="content shadow">
|
||||
喵星球，喵喵市
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-avatar radius" style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"></view>
|
||||
<view class='date'>13:23</view>
|
||||
<view class="cu-avatar radius" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big107000.jpg);"></view>
|
||||
<view class="date">13:23</view>
|
||||
</view>
|
||||
<view class="cu-item">
|
||||
<view class="cu-avatar radius" style="background-image:url(https://image.weilanwl.com/img/square-2.jpg);"></view>
|
||||
<view class="cu-avatar radius" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big143004.jpg);"></view>
|
||||
<view class="main">
|
||||
<view class='content shadow'>
|
||||
<view class="content shadow">
|
||||
@#$^&**
|
||||
</view>
|
||||
<view class='action text-grey'>
|
||||
<text class='icon-warnfill text-red text-xxl'></text> <text class='text-sm margin-left-sm'>翻译错误</text>
|
||||
<view class="action text-grey">
|
||||
<text class="icon-warnfill text-red text-xxl"></text> <text class="text-sm margin-left-sm">翻译错误</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class='date'>13:23</view>
|
||||
<view class="date">13:23</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="cu-bar foot input">
|
||||
<view class='action'>
|
||||
<text class='icon-sound text-grey'></text>
|
||||
<view class="cu-bar foot input" style="bottom:{{InputBottom}}px">
|
||||
<view class="action">
|
||||
<text class="icon-sound text-grey"></text>
|
||||
</view>
|
||||
<input class='solid-bottom' focus="{{false}}" maxlength="300" cursor-spacing="10"></input>
|
||||
<view class='action'>
|
||||
<text class='icon-emojifill text-grey'></text>
|
||||
<input class="solid-bottom" bindfocus="InputFocus" bindblur="InputBlur" adjust-position="{{false}}" focus="{{false}}" maxlength="300" cursor-spacing="10"></input>
|
||||
<view class="action">
|
||||
<text class="icon-emojifill text-grey"></text>
|
||||
</view>
|
||||
<button class='cu-btn bg-green shadow'>发送</button>
|
||||
<button class="cu-btn bg-green shadow">发送</button>
|
||||
</view>
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
page{
|
||||
padding-bottom: 60px;
|
||||
padding-bottom: 100rpx;
|
||||
}
|
||||
@@ -11,8 +11,7 @@ Page({
|
||||
['猪肉绦虫', '吸血虫']
|
||||
],
|
||||
objectMultiArray: [
|
||||
[
|
||||
{
|
||||
[{
|
||||
id: 0,
|
||||
name: '无脊柱动物'
|
||||
},
|
||||
@@ -20,8 +19,8 @@ Page({
|
||||
id: 1,
|
||||
name: '脊柱动物'
|
||||
}
|
||||
], [
|
||||
{
|
||||
],
|
||||
[{
|
||||
id: 0,
|
||||
name: '扁性动物'
|
||||
},
|
||||
@@ -41,8 +40,8 @@ Page({
|
||||
id: 3,
|
||||
name: '节肢动物'
|
||||
}
|
||||
], [
|
||||
{
|
||||
],
|
||||
[{
|
||||
id: 0,
|
||||
name: '猪肉绦虫'
|
||||
},
|
||||
@@ -56,6 +55,10 @@ Page({
|
||||
time: '12:01',
|
||||
date: '2018-12-25',
|
||||
region: ['广东省', '广州市', '海珠区'],
|
||||
imgList: [],
|
||||
modalName: null,
|
||||
textareaAValue: '',
|
||||
textareaBValue: ''
|
||||
},
|
||||
PickerChange(e) {
|
||||
console.log(e);
|
||||
@@ -63,7 +66,7 @@ Page({
|
||||
index: e.detail.value
|
||||
})
|
||||
},
|
||||
MultiChange (e) {
|
||||
MultiChange(e) {
|
||||
this.setData({
|
||||
multiIndex: e.detail.value
|
||||
})
|
||||
@@ -134,14 +137,64 @@ Page({
|
||||
time: e.detail.value
|
||||
})
|
||||
},
|
||||
DateChange (e) {
|
||||
DateChange(e) {
|
||||
this.setData({
|
||||
date: e.detail.value
|
||||
})
|
||||
},
|
||||
RegionChange: function (e) {
|
||||
RegionChange: function(e) {
|
||||
this.setData({
|
||||
region: e.detail.value
|
||||
})
|
||||
},
|
||||
ChooseImage() {
|
||||
wx.chooseImage({
|
||||
count: 4, //默认9
|
||||
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
|
||||
sourceType: ['album'], //从相册选择
|
||||
success: (res) => {
|
||||
if (this.data.imgList.length != 0) {
|
||||
this.setData({
|
||||
imgList: this.data.imgList.concat(res.tempFilePaths)
|
||||
})
|
||||
} else {
|
||||
this.setData({
|
||||
imgList: res.tempFilePaths
|
||||
})
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
ViewImage(e) {
|
||||
wx.previewImage({
|
||||
urls: this.data.imgList,
|
||||
current: e.currentTarget.dataset.url
|
||||
});
|
||||
},
|
||||
DelImg(e) {
|
||||
wx.showModal({
|
||||
title: '召唤师',
|
||||
content: '确定要删除这段回忆吗？',
|
||||
cancelText: '再看看',
|
||||
confirmText: '再见',
|
||||
success: res => {
|
||||
if (res.confirm) {
|
||||
this.data.imgList.splice(e.currentTarget.dataset.index, 1);
|
||||
this.setData({
|
||||
imgList: this.data.imgList
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
textareaAInput(e) {
|
||||
this.setData({
|
||||
textareaAValue: e.detail.value
|
||||
})
|
||||
},
|
||||
textareaBInput(e) {
|
||||
this.setData({
|
||||
textareaBValue: e.detail.value
|
||||
})
|
||||
}
|
||||
})
|
||||
@@ -1,39 +1,35 @@
|
||||
<view class="cu-custom" style="height:{{CustomBar}}px;">
|
||||
<view class="cu-bar fixed bg-gradual-pink" 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>
|
||||
<cu-custom bgColor="bg-gradual-pink" isBack="{{true}}">
|
||||
<view slot="backText">返回</view>
|
||||
<view slot="content">表单</view>
|
||||
</cu-custom>
|
||||
<form>
|
||||
|
||||
<view class="cu-form-group margin-top">
|
||||
<view class='title'>邮件</view>
|
||||
<input placeholder="两字短标题" class='radius' name='input'></input>
|
||||
<view class="title">邮件</view>
|
||||
<input placeholder="两字短标题"></input>
|
||||
</view>
|
||||
<view class="cu-form-group">
|
||||
<view class='title'>输入框</view>
|
||||
<input placeholder="三字标题" class='radius' name='input'></input>
|
||||
<view class="title">输入框</view>
|
||||
<input placeholder="三字标题"></input>
|
||||
</view>
|
||||
<view class="cu-form-group">
|
||||
<view class='title'>收货地址</view>
|
||||
<input placeholder="统一标题的宽度" class='radius' name='input'></input>
|
||||
<view class="title">收货地址</view>
|
||||
<input placeholder="统一标题的宽度"></input>
|
||||
</view>
|
||||
<view class="cu-form-group">
|
||||
<view class='title'>收货地址</view>
|
||||
<input placeholder="输入框带个图标" class='radius' name='input'></input>
|
||||
<text class='icon-locationfill text-orange'></text>
|
||||
<view class="title">收货地址</view>
|
||||
<input placeholder="输入框带个图标"></input>
|
||||
<text class="icon-locationfill text-orange"></text>
|
||||
</view>
|
||||
<view class="cu-form-group">
|
||||
<view class='title'>验证码</view>
|
||||
<input placeholder="输入框带个按钮" class='radius' name='input'></input>
|
||||
<button class='cu-btn bg-green shadow'>验证码</button>
|
||||
<view class="title">验证码</view>
|
||||
<input placeholder="输入框带个按钮"></input>
|
||||
<button class="cu-btn bg-green shadow">验证码</button>
|
||||
</view>
|
||||
<view class="cu-form-group">
|
||||
<view class='title'>手机号码</view>
|
||||
<input placeholder="输入框带标签" class='radius' name='input'></input>
|
||||
<view class="title">手机号码</view>
|
||||
<input placeholder="输入框带标签"></input>
|
||||
<view class="cu-capsule radius">
|
||||
<view class='cu-tag bg-blue '>
|
||||
<view class="cu-tag bg-blue">
|
||||
+86
|
||||
</view>
|
||||
<view class="cu-tag line-blue">
|
||||
@@ -41,10 +37,8 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="cu-form-group margin-top">
|
||||
<view class='title'>普通选择</view>
|
||||
<view class="title">普通选择</view>
|
||||
<picker bindchange="PickerChange" value="{{index}}" range="{{picker}}">
|
||||
<view class="picker">
|
||||
{{index?picker[index]:'禁止换行，超出容器部分会以 ... 方式截断'}}
|
||||
@@ -52,7 +46,7 @@
|
||||
</picker>
|
||||
</view>
|
||||
<view class="cu-form-group">
|
||||
<view class='title'>多列选择</view>
|
||||
<view class="title">多列选择</view>
|
||||
<picker mode="multiSelector" bindchange="MultiChange" bindcolumnchange="MultiColumnChange" value="{{multiIndex}}" range="{{multiArray}}">
|
||||
<view class="picker">
|
||||
{{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}，{{multiArray[2][multiIndex[2]]}}
|
||||
@@ -60,7 +54,7 @@
|
||||
</picker>
|
||||
</view>
|
||||
<view class="cu-form-group">
|
||||
<view class='title'>时间选择</view>
|
||||
<view class="title">时间选择</view>
|
||||
<picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="TimeChange">
|
||||
<view class="picker">
|
||||
{{time}}
|
||||
@@ -68,7 +62,7 @@
|
||||
</picker>
|
||||
</view>
|
||||
<view class="cu-form-group">
|
||||
<view class='title'>日期选择</view>
|
||||
<view class="title">日期选择</view>
|
||||
<picker mode="date" value="{{date}}" start="2015-09-01" end="2020-09-01" bindchange="DateChange">
|
||||
<view class="picker">
|
||||
{{date}}
|
||||
@@ -76,88 +70,84 @@
|
||||
</picker>
|
||||
</view>
|
||||
<view class="cu-form-group">
|
||||
<view class='title'>地址选择</view>
|
||||
<view class="title">地址选择</view>
|
||||
<picker mode="region" bindchange="RegionChange" value="{{region}}" custom-item="{{customItem}}">
|
||||
<view class="picker">
|
||||
{{region[0]}}，{{region[1]}}，{{region[2]}}
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
|
||||
<view class="cu-form-group margin-top">
|
||||
<view class='title'>开关选择</view>
|
||||
<view class="title">开关选择</view>
|
||||
<switch></switch>
|
||||
</view>
|
||||
<view class="cu-form-group">
|
||||
<view class='title'>定义颜色</view>
|
||||
<switch class='red sm' checked></switch>
|
||||
<view class="title">定义颜色</view>
|
||||
<switch class="red sm" checked></switch>
|
||||
</view>
|
||||
<view class="cu-form-group">
|
||||
<switch class='switch-sex' checked></switch>
|
||||
<view class='title'>定义图标</view>
|
||||
<switch class="switch-sex" checked></switch>
|
||||
<view class="title">定义图标</view>
|
||||
</view>
|
||||
<view class="cu-form-group">
|
||||
<view class='title'>方形开关</view>
|
||||
<switch class='orange radius sm' checked></switch>
|
||||
<view class="title">方形开关</view>
|
||||
<switch class="orange radius sm" checked></switch>
|
||||
</view>
|
||||
<radio-group class="block">
|
||||
<view class="cu-form-group margin-top">
|
||||
<view class='title'>单选操作(radio)</view>
|
||||
<view class="title">单选操作(radio)</view>
|
||||
<radio checked></radio>
|
||||
</view>
|
||||
<view class="cu-form-group">
|
||||
<view class='title'>定义样式</view>
|
||||
<radio class='radio'></radio>
|
||||
<view class="title">定义样式</view>
|
||||
<radio class="radio"></radio>
|
||||
</view>
|
||||
<view class="cu-form-group">
|
||||
<view class='title'>定义颜色</view>
|
||||
<view class="title">定义颜色</view>
|
||||
<view>
|
||||
<radio class='blue radio'></radio>
|
||||
<radio class='red margin-left-sm'></radio>
|
||||
<radio class="blue radio"></radio>
|
||||
<radio class="red margin-left-sm"></radio>
|
||||
</view>
|
||||
</view>
|
||||
</radio-group>
|
||||
|
||||
<view class="cu-form-group margin-top">
|
||||
<view class='title'>复选选操作(checkbox)</view>
|
||||
<view class="title">复选选操作(checkbox)</view>
|
||||
<checkbox></checkbox>
|
||||
</view>
|
||||
<view class="cu-form-group">
|
||||
<view class='title'>定义形状</view>
|
||||
<checkbox class='round' checked></checkbox>
|
||||
<view class="title">定义形状</view>
|
||||
<checkbox class="round" checked></checkbox>
|
||||
</view>
|
||||
<view class="cu-form-group">
|
||||
<view class='title'>定义颜色</view>
|
||||
<checkbox class='round blue' checked></checkbox>
|
||||
<view class="title">定义颜色</view>
|
||||
<checkbox class="round blue" checked></checkbox>
|
||||
</view>
|
||||
<view class="cu-form-group margin-top">
|
||||
<view class="grid col-3 grid-square flex-sub">
|
||||
<view class="padding-xs bg-img" style="background-image:url(https://image.weilanwl.com/img/square-1.jpg);">
|
||||
</view>
|
||||
<view class="padding-xs bg-img" style="background-image:url(https://image.weilanwl.com/img/square-2.jpg);">
|
||||
<view class="cu-tag bg-red">
|
||||
<text class='icon-close'></text>
|
||||
<view class="cu-bar bg-white margin-top">
|
||||
<view class="action">
|
||||
图片上传
|
||||
</view>
|
||||
<view class="action">
|
||||
{{imgList.length}}/4
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-form-group">
|
||||
<view class="grid col-4 grid-square flex-sub">
|
||||
<view class="padding-xs bg-img" style="background-image:url({{imgList[index]}})" wx:for="{{imgList}}" wx:key="{{index}}" bindtap="ViewImage" data-url="{{imgList[index]}}">
|
||||
<view class="cu-tag bg-red" catchtap="DelImg" data-index="{{index}}">
|
||||
<text class="icon-close"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="padding-xs solids">
|
||||
<text class='icon-cameraadd'></text>
|
||||
<view class="padding-xs solids" bindtap="ChooseImage" wx:if="{{imgList.length<4}}">
|
||||
<text class="icon-cameraadd"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-form-group margin-top" wx:hide="{{modalName==null}}">
|
||||
<textarea placeholder="多行文本输入框" maxlength="-1" disabled="{{modalName!=null}}" placeholder-class='placeholder'></textarea>
|
||||
</view>
|
||||
<view class="cu-form-group top" wx:hide="{{modalName==null}}">
|
||||
<view class='title'>点文本框</view>
|
||||
<textarea placeholder="多行文本输入框" maxlength="-1" disabled="{{modalName!=null}}" placeholder-class='placeholder'></textarea>
|
||||
</view>
|
||||
<!--
|
||||
<!-- !!!!! placeholder 在ios表现有偏移 建议使用 第一种样式 -->
|
||||
<view class="cu-form-group margin-top">
|
||||
<view class='title'>多级联动</view>
|
||||
<picker mode="region" bindchange="RegionChange" value="{{region}}" custom-item="{{customItem}}">
|
||||
<view class="picker">
|
||||
{{region[0]}}，{{region[1]}}，{{region[2]}}
|
||||
</view>
|
||||
</picker>
|
||||
</view> -->
|
||||
<textarea data-placeholder="多行文本输入框" maxlength="-1" disabled="{{modalName!=null}}" placeholder-class="placeholder" class="{{textareaAValue?'value':''}}" bindinput="textareaAInput"></textarea>
|
||||
</view>
|
||||
<view class="cu-form-group top">
|
||||
<view class="title">点文本框</view>
|
||||
<textarea data-placeholder="多行文本输入框" maxlength="-1" disabled="{{modalName!=null}}" placeholder-class="placeholder" class="{{textareaBValue?'value':''}}" bindinput="textareaBInput"></textarea>
|
||||
</view>
|
||||
</form>
|
||||
@@ -1,3 +1,3 @@
|
||||
form-group .title {
|
||||
min-width: calc(4em + 15px);
|
||||
.cu-form-group .title {
|
||||
min-width: calc(4em + 30rpx);
|
||||
}
|
||||
|
||||
@@ -1,4 +1,7 @@
|
||||
Component({
|
||||
options: {
|
||||
addGlobalClass: true,
|
||||
},
|
||||
data: {
|
||||
elements: [
|
||||
{ title: '操作条', name: 'bar', color: 'purple', icon: 'vipcard' },
|
||||
@@ -13,16 +16,4 @@ Component({
|
||||
{ title: '步骤条', name: 'steps', color: 'cyan', icon: 'roundcheckfill' },
|
||||
],
|
||||
},
|
||||
onLoad: function () {
|
||||
},
|
||||
pageLifetimes: {
|
||||
show() {
|
||||
if (typeof this.getTabBar === 'function' &&
|
||||
this.getTabBar()) {
|
||||
this.getTabBar().setData({
|
||||
selected: 1
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
{
|
||||
"usingComponents": {}
|
||||
"component": true
|
||||
}
|
||||
@@ -1,9 +1,11 @@
|
||||
<image src='/images/componentBg.png' mode='widthFix' class='response'></image>
|
||||
<view class='nav-list'>
|
||||
<navigator hover-class='none' url="../{{item.name}}/{{item.name}}" class="nav-li bg-{{item.color}}" style='animation: show {{(index+1)*0.2+1}}s 1;-webkit-animation: show {{(index+1)*0.2+1}}s 1;' wx:for="{{elements}}" wx:key>
|
||||
<view class="nav-title">{{item.title}}</view>
|
||||
<view class="nav-name">{{item.name}}</view>
|
||||
<text class='icon-{{item.icon}}'></text>
|
||||
</navigator>
|
||||
</view>
|
||||
<view class='cu-tabbar-height'></view>
|
||||
<scroll-view scroll-y class="scrollPage">
|
||||
<image src='/images/componentBg.png' mode='widthFix' class='response'></image>
|
||||
<view class='nav-list'>
|
||||
<navigator hover-class='none' url="/pages/component/{{item.name}}/{{item.name}}" class="nav-li bg-{{item.color}}" wx:for="{{elements}}" wx:key>
|
||||
<view class="nav-title">{{item.title}}</view>
|
||||
<view class="nav-name">{{item.name}}</view>
|
||||
<text class='icon-{{item.icon}}'></text>
|
||||
</navigator>
|
||||
</view>
|
||||
<view class='cu-tabbar-height'></view>
|
||||
</scroll-view>
|
||||
@@ -1,273 +1,308 @@
|
||||
<view class="cu-custom" style="height:{{CustomBar}}px;">
|
||||
<view class="cu-bar fixed bg-gradual-pink" 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>
|
||||
<scroll-view scroll-y="{{modalName==null}}" class="page {{modalName!=null?'show':''}}">
|
||||
<cu-custom bgColor="bg-gradual-pink" isBack="{{true}}">
|
||||
<view slot="backText">返回</view>
|
||||
<view slot="content">列表</view>
|
||||
</cu-custom>
|
||||
<view class="cu-bar bg-white solid-bottom margin-top">
|
||||
<view class="action">
|
||||
<text class="icon-title text-orange "></text> 宫格列表
|
||||
</view>
|
||||
<view class="action">
|
||||
<button class="cu-btn bg-green shadow" bindtap="showModal" data-target="gridModal">设置</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-bar bg-white solid-bottom margin-top">
|
||||
<view class='action'>
|
||||
<text class='icon-title text-orange '></text> 宫格列表
|
||||
</view>
|
||||
<view class='action'>
|
||||
<button class='cu-btn bg-green shadow' bindtap="showModal" data-target="gridModal">设置</button>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-modal {{modalName=='gridModal'?'show':''}}" bindtap='hideModal'>
|
||||
<view class="cu-dialog" catchtap>
|
||||
<radio-group class="block" bindchange="gridchange">
|
||||
<view class='cu-list menu text-left'>
|
||||
<view class='cu-item' wx:for="{{3}}" wx:key>
|
||||
<label class='flex justify-between align-center flex-sub'>
|
||||
<view class='flex-sub'>{{index +3}} 列</view>
|
||||
<radio class='round' value='{{index +3}}' checked='{{gridCol==index+3}}'></radio>
|
||||
</label>
|
||||
<view class="cu-modal {{modalName=='gridModal'?'show':''}}" bindtap="hideModal">
|
||||
<view class="cu-dialog" catchtap>
|
||||
<radio-group class="block" bindchange="gridchange">
|
||||
<view class="cu-list menu text-left">
|
||||
<view class="cu-item" wx:for="{{3}}" wx:key>
|
||||
<label class="flex justify-between align-center flex-sub">
|
||||
<view class="flex-sub">{{index +3}} 列</view>
|
||||
<radio class="round" value="{{index +3}}" checked="{{gridCol==index+3}}"></radio>
|
||||
</label>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</radio-group>
|
||||
<view class='cu-list menu text-left solid-top'>
|
||||
<view class='cu-item'>
|
||||
<view class='content'>
|
||||
<text class='text-grey'>边框</text>
|
||||
</view>
|
||||
<view class='action'>
|
||||
<switch bindchange="gridswitch"></switch>
|
||||
</radio-group>
|
||||
<view class="cu-list menu text-left solid-top">
|
||||
<view class="cu-item">
|
||||
<view class="content">
|
||||
<text class="text-grey">边框</text>
|
||||
</view>
|
||||
<view class="action">
|
||||
<switch bindchange="gridswitch"></switch>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-list grid col-{{gridCol}} {{gridBorder?'':'no-border'}}">
|
||||
<view class="cu-item" wx:for="{{iconList}}" wx:key wx:if="{{index<gridCol*2}}">
|
||||
<view class='icon-{{item.icon}} text-{{item.color}}'>
|
||||
<view class="cu-tag badge" wx:if="{{item.badge!=0}}">
|
||||
<block wx:if="{{item.badge!=1}}">{{item.badge>99?'99+':item.badge}}</block>
|
||||
</view>
|
||||
</view>
|
||||
<text>{{item.name}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="cu-bar bg-white solid-bottom margin-top">
|
||||
<view class='action'>
|
||||
<text class='icon-title text-orange '></text> 菜单列表
|
||||
</view>
|
||||
<view class='action'>
|
||||
<button class='cu-btn bg-green shadow' bindtap="showModal" data-target="menuModal">设置</button>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-modal {{modalName=='menuModal'?'show':''}}" bindtap='hideModal'>
|
||||
<view class="cu-dialog" catchtap>
|
||||
<view class='cu-list menu text-left solid-top'>
|
||||
<view class='cu-item'>
|
||||
<view class='content'>
|
||||
<text class='text-grey'>短边框</text>
|
||||
</view>
|
||||
<view class='action'>
|
||||
<switch bindchange="menuBorder"></switch>
|
||||
<view class="cu-list grid col-{{gridCol}} {{gridBorder?'':'no-border'}}">
|
||||
<view class="cu-item" wx:for="{{iconList}}" wx:key wx:if="{{index<gridCol*2}}">
|
||||
<view class="icon-{{item.icon}} text-{{item.color}}">
|
||||
<view class="cu-tag badge" wx:if="{{item.badge!=0}}">
|
||||
<block wx:if="{{item.badge!=1}}">{{item.badge>99?"99+":item.badge}}</block>
|
||||
</view>
|
||||
</view>
|
||||
<view class='cu-item'>
|
||||
<view class='content'>
|
||||
<text class='text-grey'>箭头</text>
|
||||
<text>{{item.name}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-bar bg-white solid-bottom margin-top">
|
||||
<view class="action">
|
||||
<text class="icon-title text-orange "></text> 菜单列表
|
||||
</view>
|
||||
<view class="action">
|
||||
<button class="cu-btn bg-green shadow" bindtap="showModal" data-target="menuModal">Modal</button>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-modal {{modalName=='menuModal'?'show':''}}" bindtap="hideModal">
|
||||
<view class="cu-dialog" catchtap>
|
||||
<scroll-view scroll-y style="height:300rpx">
|
||||
<view class="cu-list menu text-left solid-top">
|
||||
<view class="cu-item">
|
||||
<view class="content">
|
||||
<text class="text-grey">短边框</text>
|
||||
</view>
|
||||
<view class="action">
|
||||
<switch bindchange="menuBorder"></switch>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-item">
|
||||
<view class="content">
|
||||
<text class="text-grey">箭头</text>
|
||||
</view>
|
||||
<view class="action">
|
||||
<switch bindchange="menuArrow"></switch>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-item">
|
||||
<view class="content">
|
||||
<text class="text-grey">卡片</text>
|
||||
</view>
|
||||
<view class="action">
|
||||
<switch bindchange="menuCard"></switch>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-item">
|
||||
<view class="content">
|
||||
<text class="text-grey">短边框</text>
|
||||
</view>
|
||||
<view class="action">
|
||||
<switch bindchange="menuBorder"></switch>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-item">
|
||||
<view class="content">
|
||||
<text class="text-grey">箭头</text>
|
||||
</view>
|
||||
<view class="action">
|
||||
<switch bindchange="menuArrow"></switch>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-item">
|
||||
<view class="content">
|
||||
<text class="text-grey">卡片</text>
|
||||
</view>
|
||||
<view class="action">
|
||||
<switch bindchange="menuCard"></switch>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class='action'>
|
||||
<switch bindchange="menuArrow"></switch>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-list menu {{menuBorder?'sm-border':''}} {{menuCard?'card-menu margin-top':''}}">
|
||||
<view class="cu-item {{menuArrow?'arrow':''}}">
|
||||
<view class="content">
|
||||
<text class="icon-circlefill text-grey"></text>
|
||||
<text class="text-grey">图标 + 标题</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-item {{menuArrow?'arrow':''}}">
|
||||
<view class="content">
|
||||
<image src="/images/logo.png" class="png" mode="aspectFit"></image>
|
||||
<text class="text-grey">图片 + 标题</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-item {{menuArrow?'arrow':''}}">
|
||||
<button class="cu-btn content" open-type="contact">
|
||||
<text class="icon-btn text-olive"></text>
|
||||
<text class="text-grey">Open-type 按钮</text>
|
||||
</button>
|
||||
</view>
|
||||
<view class="cu-item {{menuArrow?'arrow':''}}">
|
||||
<navigator class="content" hover-class="none" url="../list/list" open-type="redirect">
|
||||
<text class="icon-discoverfill text-orange"></text>
|
||||
<text class="text-grey">Navigator 跳转</text>
|
||||
</navigator>
|
||||
</view>
|
||||
<view class="cu-item {{menuArrow?'arrow':''}}">
|
||||
<view class="content">
|
||||
<text class="icon-emojiflashfill text-pink"></text>
|
||||
<text class="text-grey">头像组</text>
|
||||
</view>
|
||||
<view class="action">
|
||||
<view class="cu-avatar-group">
|
||||
<view class="cu-avatar round sm" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10004.jpg);"></view>
|
||||
<view class="cu-avatar round sm" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10003.jpg);"></view>
|
||||
<view class="cu-avatar round sm" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10002.jpg);"></view>
|
||||
<view class="cu-avatar round sm" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg);"></view>
|
||||
</view>
|
||||
<text class="text-grey text-sm">4 人</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-item {{menuArrow?'arrow':''}}">
|
||||
<view class="content">
|
||||
<text class="icon-btn text-green"></text>
|
||||
<text class="text-grey">按钮</text>
|
||||
</view>
|
||||
<view class="action">
|
||||
<button class="cu-btn round bg-green shadow">
|
||||
<text class="icon-upload"></text> 上传</button>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-item {{menuArrow?'arrow':''}}">
|
||||
<view class="content">
|
||||
<text class="icon-tagfill text-red"></text>
|
||||
<text class="text-grey">标签</text>
|
||||
</view>
|
||||
<view class="action">
|
||||
<view class="cu-tag round bg-orange light">音乐</view>
|
||||
<view class="cu-tag round bg-olive light">电影</view>
|
||||
<view class="cu-tag round bg-blue light">旅行</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-item {{menuArrow?'arrow':''}}">
|
||||
<view class="content">
|
||||
<text class="icon-warn text-green"></text>
|
||||
<text class="text-grey">文本</text>
|
||||
</view>
|
||||
<view class="action">
|
||||
<text class="text-grey text-sm">小目标还没有实现！</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-item">
|
||||
<view class="content padding-tb-sm">
|
||||
<view>
|
||||
<text class="icon-clothesfill text-blue margin-right-xs"></text> 多行Item</view>
|
||||
<view class="text-gray text-sm">
|
||||
<text class="icon-infofill margin-right-xs"></text> 小目标还没有实现！</view>
|
||||
</view>
|
||||
<view class="action">
|
||||
<switch class="switch-sex sm" bindchange="switchSex"></switch>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-bar bg-white solid-bottom margin-top">
|
||||
<view class="action">
|
||||
<text class="icon-title text-orange "></text> 消息列表
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-list menu-avatar">
|
||||
<view class="cu-item">
|
||||
<view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg);"></view>
|
||||
<view class="content">
|
||||
<view class="text-grey">凯尔</view>
|
||||
<view class="text-gray text-sm flex">
|
||||
<text class="text-cut">
|
||||
<text class="icon-infofill text-red margin-right-xs"></text> 我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class='cu-item'>
|
||||
<view class='content'>
|
||||
<text class='text-grey'>卡片</text>
|
||||
<view class="action">
|
||||
<view class="text-grey text-xs">22:20</view>
|
||||
<view class="cu-tag round bg-grey sm">5</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-item">
|
||||
<view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/img/champion/Taric.png);">
|
||||
<view class="cu-tag badge">99+</view>
|
||||
</view>
|
||||
<view class="content">
|
||||
<view class="text-grey">
|
||||
<text class="text-cut">瓦洛兰之盾-塔里克</text>
|
||||
<view class="cu-tag round bg-orange sm">战士</view>
|
||||
</view>
|
||||
<view class='action'>
|
||||
<switch bindchange="menuCard"></switch>
|
||||
<view class="text-gray text-sm flex">
|
||||
<text class="text-cut">
|
||||
塔里克是保护者星灵，用超乎寻常的力量守护着符文之地的生命、仁爱以及万物之美。塔里克由于渎职而被放逐，离开了祖国德玛西亚，前去攀登巨神峰寻找救赎，但他找到的却是来自星界的更高层的召唤。现在的塔里克与古代巨神族的神力相融合，以瓦洛兰之盾的身份，永不疲倦地警惕着阴险狡诈的虚空腐化之力。
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-list menu {{menuBorder?'sm-border':''}} {{menuCard?'card-menu margin-top':''}}">
|
||||
<view class="cu-item {{menuArrow?'arrow':''}}">
|
||||
<view class='content'>
|
||||
<text class='icon-circlefill text-grey'></text>
|
||||
<text class='text-grey'>图标 + 标题</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-item {{menuArrow?'arrow':''}}">
|
||||
<view class='content'>
|
||||
<image src='/images/logo.png' class='png' mode='aspectFit'></image>
|
||||
<text class='text-grey'>图片 + 标题</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-item {{menuArrow?'arrow':''}}">
|
||||
<button class='cu-btn content' open-type='contact'>
|
||||
<text class='icon-btn text-olive'></text>
|
||||
<text class='text-grey'>Open-type 按钮</text>
|
||||
</button>
|
||||
</view>
|
||||
<view class="cu-item {{menuArrow?'arrow':''}}">
|
||||
<navigator class='content' hover-class='none' url='../list/list' open-type="redirect">
|
||||
<text class='icon-discoverfill text-orange'></text>
|
||||
<text class='text-grey'>Navigator 跳转</text>
|
||||
</navigator>
|
||||
</view>
|
||||
<view class="cu-item {{menuArrow?'arrow':''}}">
|
||||
<view class='content'>
|
||||
<text class='icon-emojiflashfill text-pink'></text>
|
||||
<text class='text-grey'>头像组</text>
|
||||
</view>
|
||||
<view class='action'>
|
||||
<view class="cu-avatar-group">
|
||||
<view class="cu-avatar round sm" style="background-image:url(https://image.weilanwl.com/img/square-4.jpg);"></view>
|
||||
<view class="cu-avatar round sm" style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"></view>
|
||||
<view class="cu-avatar round sm" style="background-image:url(https://image.weilanwl.com/img/square-2.jpg);"></view>
|
||||
<view class="cu-avatar round sm" style="background-image:url(https://image.weilanwl.com/img/square-1.jpg);"></view>
|
||||
<view class="action">
|
||||
<view class="text-grey text-xs">22:20</view>
|
||||
<view class="icon-notice_forbid_fill text-gray"></view>
|
||||
</view>
|
||||
<text class='text-grey text-sm'>4 人</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-item {{menuArrow?'arrow':''}}">
|
||||
<view class='content'>
|
||||
<text class='icon-btn text-green'></text>
|
||||
<text class='text-grey'>按钮</text>
|
||||
</view>
|
||||
<view class='action'>
|
||||
<button class='cu-btn round bg-green shadow'>
|
||||
<text class='icon-upload'></text> 上传</button>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-item {{menuArrow?'arrow':''}}">
|
||||
<view class='content'>
|
||||
<text class='icon-tagfill text-red'></text>
|
||||
<text class='text-grey'>标签</text>
|
||||
</view>
|
||||
<view class='action'>
|
||||
<view class="cu-tag round bg-orange light">音乐</view>
|
||||
<view class="cu-tag round bg-olive light">电影</view>
|
||||
<view class="cu-tag round bg-blue light">旅行</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-item {{menuArrow?'arrow':''}}">
|
||||
<view class='content'>
|
||||
<text class='icon-warn text-green'></text>
|
||||
<text class='text-grey'>文本</text>
|
||||
</view>
|
||||
<view class='action'>
|
||||
<text class='text-grey text-sm'>小目标还没有实现！</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-item">
|
||||
<view class='content padding-tb-sm'>
|
||||
<view>
|
||||
<text class='icon-clothesfill text-blue'></text> 多行Item</view>
|
||||
<view class='text-gray text-sm'>
|
||||
<text class='icon-infofill'></text> 小目标还没有实现！</view>
|
||||
</view>
|
||||
<view class='action'>
|
||||
<switch class='switch-sex sm' bindchange="switchSex"></switch>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="cu-bar bg-white solid-bottom margin-top">
|
||||
<view class='action'>
|
||||
<text class='icon-title text-orange '></text> 消息列表
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-list menu menu-avatar">
|
||||
<view class="cu-item">
|
||||
<view class="cu-avatar round lg" style="background-image:url(https://image.weilanwl.com/img/square-1.jpg);"></view>
|
||||
<view class='content'>
|
||||
<view class='text-grey'>文晓港</view>
|
||||
<view class='text-gray text-sm'>
|
||||
<text class='icon-infofill text-red'></text> 消息未送达</view>
|
||||
</view>
|
||||
<view class='action'>
|
||||
<view class='text-grey text-xs'>22:20</view>
|
||||
<view class="cu-tag round bg-grey sm">5</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-item">
|
||||
<view class="cu-avatar round lg" style="background-image:url(https://image.weilanwl.com/img/square-2.jpg);">
|
||||
<view class="cu-tag badge">99+</view>
|
||||
</view>
|
||||
<view class='content'>
|
||||
<view class='text-grey'>文晓港
|
||||
<view class="cu-tag round bg-orange sm">SVIP</view>
|
||||
<view class="cu-item ">
|
||||
<view class="cu-avatar radius lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/img/champion/Morgana.png);"></view>
|
||||
<view class="content">
|
||||
<view class="text-pink">
|
||||
<text class="text-cut">莫甘娜</text>
|
||||
</view>
|
||||
<view class="text-gray text-sm flex">
|
||||
<text class="text-cut">凯尔，你被自己的光芒变的盲目！</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class='text-gray text-sm'>
|
||||
<text class='icon-redpacket_fill text-red'></text> 收到红包</view>
|
||||
</view>
|
||||
<view class='action'>
|
||||
<view class='text-grey text-xs'>22:20</view>
|
||||
<view class='icon-notice_forbid_fill text-gray'></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-item ">
|
||||
<view class="cu-avatar radius lg" style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"></view>
|
||||
<view class='content'>
|
||||
<view>喵星人互动群</view>
|
||||
<view class='text-gray text-sm'>
|
||||
喵星酱：喵喵喵！</view>
|
||||
</view>
|
||||
<view class='action'>
|
||||
<view class='text-grey text-xs'>22:20</view>
|
||||
<view class="cu-tag round bg-red sm">5</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-item grayscale">
|
||||
<view class="cu-avatar radius lg" style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"></view>
|
||||
<view class='content'>
|
||||
<view>喵星人互动群</view>
|
||||
<view class='text-gray text-sm'>
|
||||
喵星酱：喵喵喵！</view>
|
||||
</view>
|
||||
<view class='action'>
|
||||
<view class='text-grey text-xs'>22:20</view>
|
||||
<view class="cu-tag round bg-red sm">5</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-item cur">
|
||||
<view class="cu-avatar radius lg" style="background-image:url(https://image.weilanwl.com/img/square-4.jpg);">
|
||||
<view class="cu-tag badge"></view>
|
||||
</view>
|
||||
<view class='content'>
|
||||
<view>喵星人互动群
|
||||
<view class="cu-tag round bg-orange sm">6人</view>
|
||||
<view class="action">
|
||||
<view class="text-grey text-xs">22:20</view>
|
||||
<view class="cu-tag round bg-red sm">5</view>
|
||||
</view>
|
||||
<view class='text-gray text-sm'>
|
||||
喵星酱：
|
||||
<text class='icon-picfill text-orange'></text> 图片传输中...</view>
|
||||
</view>
|
||||
<view class='action'>
|
||||
<view class='text-grey text-xs'>22:20</view>
|
||||
<view class='icon-notice_forbid_fill text-gray'></view>
|
||||
<view class="cu-item grayscale">
|
||||
<view class="cu-avatar radius lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big81007.jpg);"></view>
|
||||
<view class="content">
|
||||
<view>
|
||||
<text class="text-cut">伊泽瑞尔</text>
|
||||
<view class="cu-tag round bg-orange sm">断开连接...</view>
|
||||
</view>
|
||||
<view class="text-gray text-sm flex">
|
||||
<text class="text-cut"> 等我回来一个打十个</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="action">
|
||||
<view class="text-grey text-xs">22:20</view>
|
||||
<view class="cu-tag round bg-red sm">5</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-item cur">
|
||||
<view class="cu-avatar radius lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big81020.jpg);">
|
||||
<view class="cu-tag badge"></view>
|
||||
</view>
|
||||
<view class="content">
|
||||
<view>
|
||||
<text class="text-cut">瓦罗兰大陆-睡衣守护者-新手保护营</text>
|
||||
<view class="cu-tag round bg-orange sm">6人</view>
|
||||
</view>
|
||||
<view class="text-gray text-sm flex">
|
||||
<text class="text-cut"> 伊泽瑞尔：<text class="icon-locationfill text-orange margin-right-xs"></text> 传送中...</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="action">
|
||||
<view class="text-grey text-xs">22:20</view>
|
||||
<view class="icon-notice_forbid_fill text-gray"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="cu-bar bg-white solid-bottom margin-top">
|
||||
<view class='action'>
|
||||
<text class='icon-title text-orange '></text> 列表左滑
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-list menu menu-avatar">
|
||||
<view class="cu-item {{modalName=='move-box-'+ index?'move-cur':''}}" wx:for="{{4}}" wx:key bindtouchstart='ListTouchStart' bindtouchmove='ListTouchMove' bindtouchend='ListTouchEnd' data-target="move-box-{{index}}">
|
||||
<view class="cu-avatar round lg" style="background-image:url(https://image.weilanwl.com/img/square-{{index+1}}.jpg);"></view>
|
||||
<view class='content'>
|
||||
<view class='text-grey'>文晓港</view>
|
||||
<view class='text-gray text-sm'>
|
||||
<text class='icon-infofill text-red'></text> 消息未送达</view>
|
||||
</view>
|
||||
<view class='action'>
|
||||
<view class='text-grey text-xs'>22:20</view>
|
||||
<view class="cu-tag round bg-grey sm">5</view>
|
||||
</view>
|
||||
<view class='move'>
|
||||
<view class='bg-grey'>置顶</view>
|
||||
<view class="bg-red">删除</view>
|
||||
<view class="cu-bar bg-white solid-bottom margin-top">
|
||||
<view class="action">
|
||||
<text class="icon-title text-orange "></text> 列表左滑
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-list menu-avatar">
|
||||
<view class="cu-item {{modalName=='move-box-'+ index?'move-cur':''}}" wx:for="{{4}}" wx:key bindtouchstart="ListTouchStart" bindtouchmove="ListTouchMove" bindtouchend="ListTouchEnd" data-target="move-box-{{index}}">
|
||||
<view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big2100{{index+1}}.jpg);"></view>
|
||||
<view class="content">
|
||||
<view class="text-grey">文晓港</view>
|
||||
<view class="text-gray text-sm">
|
||||
<text class="icon-infofill text-red"></text> 消息未送达</view>
|
||||
</view>
|
||||
<view class="action">
|
||||
<view class="text-grey text-xs">22:20</view>
|
||||
<view class="cu-tag round bg-grey sm">5</view>
|
||||
</view>
|
||||
<view class="move">
|
||||
<view class="bg-grey">置顶</view>
|
||||
<view class="bg-red">删除</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
@@ -1,5 +1,10 @@
|
||||
.page {
|
||||
background: #f1f1f1;
|
||||
height: 100Vh;
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
.page.show {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.switch-sex::after {
|
||||
@@ -17,3 +22,4 @@
|
||||
.switch-music::before {
|
||||
content: "\e6db";
|
||||
}
|
||||
|
||||
|
||||
@@ -1,13 +1,42 @@
|
||||
const app = getApp();
|
||||
|
||||
Page({
|
||||
data: {
|
||||
StatusBar: app.globalData.StatusBar,
|
||||
CustomBar: app.globalData.CustomBar
|
||||
CustomBar: app.globalData.CustomBar,
|
||||
checkbox: [{
|
||||
value: 0,
|
||||
name: '10元',
|
||||
checked: false,
|
||||
hot: false,
|
||||
}, {
|
||||
value: 1,
|
||||
name: '20元',
|
||||
checked: true,
|
||||
hot: false,
|
||||
}, {
|
||||
value: 2,
|
||||
name: '30元',
|
||||
checked: true,
|
||||
hot: true,
|
||||
}, {
|
||||
value: 3,
|
||||
name: '60元',
|
||||
checked: false,
|
||||
hot: true,
|
||||
}, {
|
||||
value: 4,
|
||||
name: '80元',
|
||||
checked: false,
|
||||
hot: false,
|
||||
}, {
|
||||
value: 5,
|
||||
name: '100元',
|
||||
checked: false,
|
||||
hot: false,
|
||||
}]
|
||||
},
|
||||
showModal(e) {
|
||||
this.setData({
|
||||
modalName: e.currentTarget.dataset.target
|
||||
modalName: e.currentTarget.dataset.target
|
||||
})
|
||||
},
|
||||
hideModal(e) {
|
||||
@@ -15,4 +44,17 @@ Page({
|
||||
modalName: null
|
||||
})
|
||||
},
|
||||
});
|
||||
ChooseCheckbox(e) {
|
||||
let items = this.data.checkbox;
|
||||
let values = e.currentTarget.dataset.value;
|
||||
for (let i = 0, lenI = items.length; i < lenI; ++i) {
|
||||
if (items[i].value == values) {
|
||||
items[i].checked = !items[i].checked;
|
||||
break
|
||||
}
|
||||
}
|
||||
this.setData({
|
||||
checkbox: items
|
||||
})
|
||||
}
|
||||
})
|
||||
@@ -1,76 +1,73 @@
|
||||
<view class="cu-custom" style="height:{{CustomBar}}px;">
|
||||
<view class="cu-bar fixed bg-gradual-pink" 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>
|
||||
<cu-custom bgColor="bg-gradual-pink" isBack="{{true}}">
|
||||
<view slot="backText">返回</view>
|
||||
<view slot="content">模态窗口</view>
|
||||
</cu-custom>
|
||||
<view class="cu-bar bg-white margin-top">
|
||||
<view class='action'>
|
||||
<text class='icon-title text-orange '></text> 普通窗口
|
||||
<view class="action">
|
||||
<text class="icon-title text-orange "></text> 普通窗口
|
||||
</view>
|
||||
<view class='action'>
|
||||
<button class='cu-btn bg-green shadow' bindtap="showModal" data-target="Modal">Modal</button>
|
||||
<view class="action">
|
||||
<button class="cu-btn bg-green shadow" bindtap="showModal" data-target="Modal">Modal</button>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-modal {{modalName=='Modal'?'show':''}}">
|
||||
<view class="cu-dialog">
|
||||
<view class="cu-bar bg-white justify-end">
|
||||
<view class='content'>Modal标题</view>
|
||||
<view class='action' bindtap='hideModal'>
|
||||
<text class='icon-close text-red'></text>
|
||||
<view class="content">Modal标题</view>
|
||||
<view class="action" bindtap="hideModal">
|
||||
<text class="icon-close text-red"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class='padding-xl'>
|
||||
<view class="padding-xl">
|
||||
Modal 内容。
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="cu-bar bg-white margin-top">
|
||||
<view class='action'>
|
||||
<text class='icon-title text-orange '></text> 底部窗口
|
||||
<view class="action">
|
||||
<text class="icon-title text-orange "></text> 底部窗口
|
||||
</view>
|
||||
<view class='action'>
|
||||
<button class='cu-btn bg-green shadow' bindtap="showModal" data-target="bottomModal">Bottom</button>
|
||||
<view class="action">
|
||||
<button class="cu-btn bg-green shadow" bindtap="showModal" data-target="bottomModal">Bottom</button>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-modal bottom-modal {{modalName=='bottomModal'?'show':''}}">
|
||||
<view class="cu-dialog">
|
||||
<view class="cu-bar bg-white">
|
||||
<view class='action text-green'>确定</view>
|
||||
<view class='action text-blue' bindtap='hideModal'>取消</view>
|
||||
<view class="action text-green">确定</view>
|
||||
<view class="action text-blue" bindtap="hideModal">取消</view>
|
||||
</view>
|
||||
<view class='padding-xl'>
|
||||
<view class="padding-xl">
|
||||
Modal 内容。
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="cu-bar bg-white margin-top">
|
||||
<view class='action'>
|
||||
<text class='icon-title text-orange '></text> 对话窗口
|
||||
<view class="action">
|
||||
<text class="icon-title text-orange "></text> 对话窗口
|
||||
</view>
|
||||
<view class='action'>
|
||||
<button class='cu-btn bg-green shadow' bindtap="showModal" data-target="DialogModal1">Dialog</button>
|
||||
<button class='cu-btn bg-blue shadow margin-left' bindtap="showModal" data-target="DialogModal2">Dialog</button>
|
||||
<view class="action">
|
||||
<button class="cu-btn bg-green shadow" bindtap="showModal" data-target="DialogModal1">Dialog</button>
|
||||
<button class="cu-btn bg-blue shadow margin-left" bindtap="showModal" data-target="DialogModal2">Dialog</button>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-modal {{modalName=='DialogModal1'?'show':''}}">
|
||||
<view class="cu-dialog">
|
||||
<view class="cu-bar bg-white justify-end">
|
||||
<view class='content'>Modal标题</view>
|
||||
<view class='action' bindtap='hideModal'>
|
||||
<text class='icon-close text-red'></text>
|
||||
<view class="content">Modal标题</view>
|
||||
<view class="action" bindtap="hideModal">
|
||||
<text class="icon-close text-red"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class='padding-xl'>
|
||||
<view class="padding-xl">
|
||||
Modal 内容。
|
||||
</view>
|
||||
<view class="cu-bar bg-white justify-end">
|
||||
<view class='action'>
|
||||
<button class='cu-btn line-green text-green' bindtap='hideModal'>取消</button>
|
||||
<button class='cu-btn bg-green margin-left' bindtap='hideModal'>确定</button>
|
||||
<view class="action">
|
||||
<button class="cu-btn line-green text-green" bindtap="hideModal">取消</button>
|
||||
<button class="cu-btn bg-green margin-left" bindtap="hideModal">确定</button>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
@@ -80,65 +77,65 @@
|
||||
<view class="cu-modal {{modalName=='DialogModal2'?'show':''}}">
|
||||
<view class="cu-dialog">
|
||||
<view class="cu-bar bg-white justify-end">
|
||||
<view class='content'>Modal标题</view>
|
||||
<view class='action' bindtap='hideModal'>
|
||||
<text class='icon-close text-red'></text>
|
||||
<view class="content">Modal标题</view>
|
||||
<view class="action" bindtap="hideModal">
|
||||
<text class="icon-close text-red"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class='padding-xl'>
|
||||
<view class="padding-xl">
|
||||
Modal 内容。
|
||||
</view>
|
||||
<view class="cu-bar bg-white">
|
||||
<view class='action margin-0 flex-sub text-green ' bindtap='hideModal'>
|
||||
<text class='icon-moneybag'></text>微信支付</view>
|
||||
<view class='action margin-0 flex-sub text-green solid-left' bindtap='hideModal'>取消</view>
|
||||
<view class='action margin-0 flex-sub solid-left' bindtap='hideModal'>确定</view>
|
||||
<view class="action margin-0 flex-sub text-green " bindtap="hideModal">
|
||||
<text class="icon-moneybag"></text>微信支付</view>
|
||||
<view class="action margin-0 flex-sub text-green solid-left" bindtap="hideModal">取消</view>
|
||||
<view class="action margin-0 flex-sub solid-left" bindtap="hideModal">确定</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="cu-bar bg-white margin-top">
|
||||
<view class='action'>
|
||||
<text class='icon-title text-orange '></text> 图片窗口
|
||||
<view class="action">
|
||||
<text class="icon-title text-orange "></text> 图片窗口
|
||||
</view>
|
||||
<view class='action'>
|
||||
<button class='cu-btn bg-green shadow' bindtap="showModal" data-target="Image">Image</button>
|
||||
<view class="action">
|
||||
<button class="cu-btn bg-green shadow" bindtap="showModal" data-target="Image">Image</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="cu-modal {{modalName=='Image'?'show':''}}">
|
||||
<view class="cu-dialog">
|
||||
<view class="bg-img" style="background-image: url('https://albedo-theme.com/wp-content/uploads/2016/08/pexels-photo-26180.jpg');height:200px;">
|
||||
<view class="bg-img" style="background-image: url('https://ossweb-img.qq.com/images/lol/web201310/skin/big91012.jpg');height:200px;">
|
||||
<view class="cu-bar justify-end text-white">
|
||||
<view class='action' bindtap='hideModal'>
|
||||
<text class='icon-close '></text>
|
||||
<view class="action" bindtap="hideModal">
|
||||
<text class="icon-close "></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-bar bg-white">
|
||||
<view class='action margin-0 flex-sub solid-left' bindtap='hideModal'>我知道了</view>
|
||||
<view class="action margin-0 flex-sub solid-left" bindtap="hideModal">我知道了</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="cu-bar bg-white margin-top">
|
||||
<view class='action'>
|
||||
<text class='icon-title text-orange '></text> 单选窗口
|
||||
<view class="action">
|
||||
<text class="icon-title text-orange "></text> 单选窗口
|
||||
</view>
|
||||
<view class='action'>
|
||||
<button class='cu-btn bg-green shadow' bindtap="showModal" data-target="RadioModal">Radio</button>
|
||||
<view class="action">
|
||||
<button class="cu-btn bg-green shadow" bindtap="showModal" data-target="RadioModal">Radio</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="cu-modal {{modalName=='RadioModal'?'show':''}}" bindtap='hideModal'>
|
||||
<view class="cu-modal {{modalName=='RadioModal'?'show':''}}" bindtap="hideModal">
|
||||
<view class="cu-dialog" catchtap>
|
||||
<radio-group class="block">
|
||||
<view class='cu-list menu text-left'>
|
||||
<view class='cu-item' wx:for="{{5}}" wx:key>
|
||||
<label class='flex justify-between align-center flex-sub'>
|
||||
<view class='flex-sub'>Item {{index +1}}</view>
|
||||
<radio class='round'></radio>
|
||||
<view class="cu-list menu text-left">
|
||||
<view class="cu-item" wx:for="{{5}}" wx:key>
|
||||
<label class="flex justify-between align-center flex-sub">
|
||||
<view class="flex-sub">Item {{index +1}}</view>
|
||||
<radio class="round"></radio>
|
||||
</label>
|
||||
</view>
|
||||
</view>
|
||||
@@ -147,41 +144,43 @@
|
||||
</view>
|
||||
|
||||
<view class="cu-bar bg-white margin-top">
|
||||
<view class='action'>
|
||||
<text class='icon-title text-orange '></text> 多选窗口
|
||||
<view class="action">
|
||||
<text class="icon-title text-orange "></text> 多选窗口
|
||||
</view>
|
||||
<view class='action'>
|
||||
<button class='cu-btn bg-green shadow' bindtap="showModal" data-target="ChooseModal">Choose</button>
|
||||
<view class="action">
|
||||
<button class="cu-btn bg-green shadow" bindtap="showModal" data-target="ChooseModal">Choose</button>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-modal bottom-modal {{modalName=='ChooseModal'?'show':''}}" bindtap='hideModal'>
|
||||
<view class="cu-modal bottom-modal {{modalName=='ChooseModal'?'show':''}}" bindtap="hideModal">
|
||||
<view class="cu-dialog" catchtap>
|
||||
<view class="cu-bar bg-white">
|
||||
<view class='action text-green'>确定</view>
|
||||
<view class='action text-blue' bindtap='hideModal'>取消</view>
|
||||
<view class="action text-blue" bindtap="hideModal">取消</view>
|
||||
<view class="action text-green" bindtap="hideModal">确定</view>
|
||||
</view>
|
||||
<view class='grid col-3 padding-sm'>
|
||||
<view wx:for="{{9}}" class='padding-xs' wx:key>
|
||||
<button class='cu-btn orange lg block {{index == 2?"bg":"line"}}-orange'>Item {{index + 1}}</button>
|
||||
<view class="grid col-3 padding-sm">
|
||||
<view wx:for="{{checkbox}}" class="padding-xs" wx:key="{{index}}">
|
||||
<button class="cu-btn orange lg block {{item.checked?'bg-orange':'line-orange'}}" bindtap="ChooseCheckbox" data-value="{{item.value}}"> {{item.name}}
|
||||
<view class="cu-tag sm round {{item.checked?'bg-white text-orange':'bg-orange'}}" wx:if="{{item.hot}}">HOT</view>
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="cu-bar bg-white margin-top">
|
||||
<view class='action'>
|
||||
<text class='icon-title text-orange '></text> 侧边抽屉
|
||||
<view class="action">
|
||||
<text class="icon-title text-orange "></text> 侧边抽屉
|
||||
</view>
|
||||
<view class='action'>
|
||||
<button class='cu-btn bg-green shadow' bindtap="showModal" data-target="DrawerModalL">Left</button>
|
||||
<button class='cu-btn bg-blue shadow margin-left' bindtap="showModal" data-target="DrawerModalR">Right</button>
|
||||
<view class="action">
|
||||
<button class="cu-btn bg-green shadow" bindtap="showModal" data-target="DrawerModalL">Left</button>
|
||||
<button class="cu-btn bg-blue shadow margin-left" bindtap="showModal" data-target="DrawerModalR">Right</button>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-modal drawer-modal justify-start {{modalName=='DrawerModalL'?'show':''}}" bindtap='hideModal'>
|
||||
<view class="cu-dialog basis-lg" catchtap style="top:{{CustomBar}}px;">
|
||||
<view class='cu-list menu text-left'>
|
||||
<view class='cu-item arrow' wx:for="{{5}}" wx:key>
|
||||
<view class='content'>
|
||||
<view class="cu-modal drawer-modal justify-start {{modalName=='DrawerModalL'?'show':''}}" bindtap="hideModal">
|
||||
<view class="cu-dialog basis-lg" catchtap style="top:{{CustomBar}}px;height:calc(100vh - {{CustomBar}}px)">
|
||||
<view class="cu-list menu text-left">
|
||||
<view class="cu-item arrow" wx:for="{{5}}" wx:key>
|
||||
<view class="content">
|
||||
<view>Item {{index +1}}</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -189,35 +188,12 @@
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="cu-modal drawer-modal justify-end {{modalName=='DrawerModalR'?'show':''}}" bindtap='hideModal'>
|
||||
<view class="cu-dialog basis-lg" catchtap style="top:{{CustomBar}}px;">
|
||||
<view class="cu-list menu menu-avatar text-left">
|
||||
<view class="cu-item">
|
||||
<view class="cu-avatar round lg" style="background-image:url(https://image.weilanwl.com/img/square-1.jpg);"></view>
|
||||
<view class='content'>
|
||||
<view class='text-grey'>文晓港</view>
|
||||
<view class='text-gray text-sm'>
|
||||
<text class='icon-infofill text-red'></text> 消息未送达</view>
|
||||
</view>
|
||||
<view class='action'>
|
||||
<view class='text-grey text-xs'>22:20</view>
|
||||
<view class="cu-tag round bg-grey sm">5</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-item">
|
||||
<view class="cu-avatar round lg" style="background-image:url(https://image.weilanwl.com/img/square-2.jpg);">
|
||||
<view class="cu-tag badge">99+</view>
|
||||
</view>
|
||||
<view class='content'>
|
||||
<view class='text-grey'>文晓港
|
||||
<view class="cu-tag round bg-orange sm">SVIP</view>
|
||||
</view>
|
||||
<view class='text-gray text-sm'>
|
||||
<text class='icon-redpacket_fill text-red'></text> 收到红包</view>
|
||||
</view>
|
||||
<view class='action'>
|
||||
<view class='text-grey text-xs'>22:20</view>
|
||||
<text class='icon-notice_forbid_fill text-gray'></text>
|
||||
<view class="cu-modal drawer-modal justify-end {{modalName=='DrawerModalR'?'show':''}}" bindtap="hideModal">
|
||||
<view class="cu-dialog basis-lg" catchtap style="top:{{CustomBar}}px;height:calc(100vh - {{CustomBar}}px)">
|
||||
<view class="cu-list menu text-left">
|
||||
<view class="cu-item arrow" wx:for="{{5}}" wx:key>
|
||||
<view class="content">
|
||||
<view>Item {{index +1}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -1,13 +1,9 @@
|
||||
const app = getApp();
|
||||
Page({
|
||||
data: {
|
||||
StatusBar: app.globalData.StatusBar,
|
||||
CustomBar: app.globalData.CustomBar,
|
||||
TabCur: 0,
|
||||
scrollLeft:0
|
||||
},
|
||||
tabSelect(e) {
|
||||
console.log(e);
|
||||
this.setData({
|
||||
TabCur: e.currentTarget.dataset.id,
|
||||
scrollLeft: (e.currentTarget.dataset.id-1)*60
|
||||
|
||||
@@ -1,70 +1,62 @@
|
||||
<view class="cu-custom" style="height:{{CustomBar}}px;">
|
||||
<view class="cu-bar fixed bg-gradual-pink" 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 wx:for="{{10}}" wx:key wx:if="{{index==TabCur}}" class='bg-grey padding margin text-center'>
|
||||
<cu-custom bgColor="bg-gradual-pink" isBack="{{true}}"><view slot="backText">返回</view><view slot="content">导航栏</view></cu-custom>
|
||||
<view wx:for="{{10}}" wx:key wx:if="{{index==TabCur}}" class="bg-grey padding margin text-center">
|
||||
Tab{{index}}
|
||||
</view>
|
||||
<view class="cu-bar bg-white solid-bottom">
|
||||
<view class='action'>
|
||||
<text class='icon-titles text-orange '></text> 默认
|
||||
<view class="action">
|
||||
<text class="icon-titles text-orange"></text> 默认
|
||||
</view>
|
||||
</view>
|
||||
<scroll-view scroll-x class="bg-white nav" scroll-with-animation scroll-left="{{scrollLeft}}">
|
||||
<view class="cu-item {{index==TabCur?'text-green cur':''}}" wx:for="{{10}}" wx:key bindtap='tabSelect' data-id="{{index}}">
|
||||
<view class="cu-item {{index==TabCur?'text-green cur':''}}" wx:for="{{10}}" wx:key bindtap="tabSelect" data-id="{{index}}">
|
||||
Tab{{index}}
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<view class="cu-bar bg-white margin-top solid-bottom">
|
||||
<view class='action'>
|
||||
<text class='icon-title text-orange'></text> 居中
|
||||
<view class="action">
|
||||
<text class="icon-title text-orange"></text> 居中
|
||||
</view>
|
||||
</view>
|
||||
<scroll-view scroll-x class="bg-white nav text-center">
|
||||
<view class="cu-item {{index==TabCur?'text-blue cur':''}}" wx:for="{{3}}" wx:key bindtap='tabSelect' data-id="{{index}}">
|
||||
<view class="cu-item {{index==TabCur?'text-blue cur':''}}" wx:for="{{3}}" wx:key bindtap="tabSelect" data-id="{{index}}">
|
||||
Tab{{index}}
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<view class="cu-bar bg-white margin-top solid-bottom">
|
||||
<view class='action'>
|
||||
<text class='icon-title text-orange'></text> 平分
|
||||
<view class="action">
|
||||
<text class="icon-title text-orange"></text> 平分
|
||||
</view>
|
||||
</view>
|
||||
<scroll-view scroll-x class="bg-white nav">
|
||||
<view class='flex text-center'>
|
||||
<view class="cu-item flex-sub {{index==TabCur?'text-orange cur':''}}" wx:for="{{4}}" wx:key bindtap='tabSelect' data-id="{{index}}">
|
||||
<view class="flex text-center">
|
||||
<view class="cu-item flex-sub {{index==TabCur?'text-orange cur':''}}" wx:for="{{4}}" wx:key bindtap="tabSelect" data-id="{{index}}">
|
||||
Tab{{index}}
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class="cu-bar bg-white margin-top solid-bottom">
|
||||
<view class='action'>
|
||||
<text class='icon-title text-orange'></text> 背景
|
||||
<view class="action">
|
||||
<text class="icon-title text-orange"></text> 背景
|
||||
</view>
|
||||
</view>
|
||||
<scroll-view scroll-x class="bg-red nav text-center">
|
||||
<view class="cu-item {{index==TabCur?'text-white cur':''}}" wx:for="{{3}}" wx:key bindtap='tabSelect' data-id="{{index}}">
|
||||
<view class="cu-item {{index==TabCur?'text-white cur':''}}" wx:for="{{3}}" wx:key bindtap="tabSelect" data-id="{{index}}">
|
||||
Tab{{index}}
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class="cu-bar bg-white margin-top solid-bottom">
|
||||
<view class='action'>
|
||||
<text class='icon-title text-orange'></text> 图标
|
||||
<view class="action">
|
||||
<text class="icon-title text-orange"></text> 图标
|
||||
</view>
|
||||
</view>
|
||||
<scroll-view scroll-x class="bg-green nav text-center">
|
||||
<view class="cu-item {{0==TabCur?'text-white cur':''}}" bindtap='tabSelect' data-id="0">
|
||||
<text class='icon-camerafill'></text> 数码
|
||||
<view class="cu-item {{0==TabCur?'text-white cur':''}}" bindtap="tabSelect" data-id="0">
|
||||
<text class="icon-camerafill"></text> 数码
|
||||
</view>
|
||||
<view class="cu-item {{1==TabCur?'text-white cur':''}}" bindtap='tabSelect' data-id="1">
|
||||
<text class='icon-upstagefill'></text> 排行榜
|
||||
<view class="cu-item {{1==TabCur?'text-white cur':''}}" bindtap="tabSelect" data-id="1">
|
||||
<text class="icon-upstagefill"></text> 排行榜
|
||||
</view>
|
||||
<view class="cu-item {{2==TabCur?'text-white cur':''}}" bindtap='tabSelect' data-id="2">
|
||||
<text class='icon-clothesfill'></text> 皮肤
|
||||
<view class="cu-item {{2==TabCur?'text-white cur':''}}" bindtap="tabSelect" data-id="2">
|
||||
<text class="icon-clothesfill"></text> 皮肤
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
@@ -1,8 +1,5 @@
|
||||
const app = getApp();
|
||||
Page({
|
||||
data: {
|
||||
StatusBar: app.globalData.StatusBar,
|
||||
CustomBar: app.globalData.CustomBar,
|
||||
basicsList: [{
|
||||
icon: 'usefullfill',
|
||||
name: '开始'
|
||||
@@ -15,7 +12,7 @@ Page({
|
||||
}, {
|
||||
icon: 'roundcheckfill',
|
||||
name: '完成'
|
||||
},],
|
||||
}, ],
|
||||
basics: 0,
|
||||
numList: [{
|
||||
name: '开始'
|
||||
@@ -25,7 +22,7 @@ Page({
|
||||
name: '错误'
|
||||
}, {
|
||||
name: '完成'
|
||||
},],
|
||||
}, ],
|
||||
num: 0,
|
||||
scroll: 0
|
||||
},
|
||||
@@ -44,5 +41,4 @@ Page({
|
||||
scroll: this.data.scroll == 9 ? 0 : this.data.scroll + 1
|
||||
})
|
||||
}
|
||||
|
||||
});
|
||||
})
|
||||
@@ -1,66 +1,58 @@
|
||||
<view class="cu-custom" style="height:{{CustomBar}}px;">
|
||||
<view class="cu-bar fixed bg-gradual-pink" 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>
|
||||
<cu-custom bgColor="bg-gradual-pink" isBack="{{true}}"><view slot="backText">返回</view><view slot="content">步骤条</view></cu-custom>
|
||||
<view class="cu-bar bg-white solid-bottom">
|
||||
<view class='action'>
|
||||
<text class='icon-title text-orange'></text> 基本用法
|
||||
<view class="action">
|
||||
<text class="icon-title text-orange"></text> 基本用法
|
||||
</view>
|
||||
<view class='action'>
|
||||
<button class='cu-btn bg-green shadow' bindtap='basicsSteps'>下一步</button>
|
||||
<view class="action">
|
||||
<button class="cu-btn bg-green shadow" bindtap="basicsSteps">下一步</button>
|
||||
</view>
|
||||
</view>
|
||||
<view class='bg-white padding'>
|
||||
<view class='cu-steps'>
|
||||
<view class='cu-item {{index>basics?"":"text-red"}}' wx:for="{{basicsList}}" wx:key>
|
||||
<text class='icon-{{item.icon}}'></text> {{item.name}}
|
||||
<view class="bg-white padding">
|
||||
<view class="cu-steps">
|
||||
<view class="cu-item {{index>basics?'':'text-red'}}" wx:for="{{basicsList}}" wx:key>
|
||||
<text class="icon-{{item.icon}}"></text> {{item.name}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class='bg-white padding margin-top-xs'>
|
||||
<view class='cu-steps'>
|
||||
<view class='cu-item {{index>basics?"":"text-orange"}}' wx:for="{{basicsList}}" wx:key>
|
||||
<text class='icon-{{index>basics?"title":item.icon}}'></text> {{item.name}}
|
||||
<view class="bg-white padding margin-top-xs">
|
||||
<view class="cu-steps">
|
||||
<view class="cu-item {{index>basics?'':'text-orange'}}" wx:for="{{basicsList}}" wx:key>
|
||||
<text class="icon-{{index>basics?'title':item.icon}}"></text> {{item.name}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class='bg-white padding margin-top-xs'>
|
||||
<view class='cu-steps steps-arrow'>
|
||||
<view class='cu-item {{index>basics?"":"text-blue"}}' wx:for="{{basicsList}}" wx:key>
|
||||
<text class='icon-{{item.icon}}'></text> {{item.name}}
|
||||
<view class="bg-white padding margin-top-xs">
|
||||
<view class="cu-steps steps-arrow">
|
||||
<view class="cu-item {{index>basics?'':'text-blue'}}" wx:for="{{basicsList}}" wx:key>
|
||||
<text class="icon-{{item.icon}}"></text> {{item.name}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-bar bg-white solid-bottom margin-top">
|
||||
<view class='action'>
|
||||
<text class='icon-title text-orange'></text> 数字完成
|
||||
<view class="action">
|
||||
<text class="icon-title text-orange"></text> 数字完成
|
||||
</view>
|
||||
<view class='action'>
|
||||
<button class='cu-btn bg-green shadow' bindtap='numSteps'>下一步</button>
|
||||
<view class="action">
|
||||
<button class="cu-btn bg-green shadow" bindtap="numSteps">下一步</button>
|
||||
</view>
|
||||
</view>
|
||||
<view class='bg-white padding'>
|
||||
<view class='cu-steps'>
|
||||
<view class='cu-item {{index>num?"":"text-blue"}}' wx:for="{{numList}}" wx:key>
|
||||
<text class='num {{index==2?"err":""}}' data-index='{{index + 1}}'></text> {{item.name}}
|
||||
<view class="bg-white padding">
|
||||
<view class="cu-steps">
|
||||
<view class="cu-item {{index>num?'':'text-blue'}}" wx:for="{{numList}}" wx:key>
|
||||
<text class="num {{index==2?'err':''}}" data-index="{{index + 1}}"></text> {{item.name}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-bar bg-white solid-bottom margin-top">
|
||||
<view class='action'>
|
||||
<text class='icon-title text-orange'></text> 多级显示
|
||||
<view class="action">
|
||||
<text class="icon-title text-orange"></text> 多级显示
|
||||
</view>
|
||||
<view class='action'>
|
||||
<button class='cu-btn bg-green shadow' bindtap='scrollSteps'>下一步</button>
|
||||
<view class="action">
|
||||
<button class="cu-btn bg-green shadow" bindtap="scrollSteps">下一步</button>
|
||||
</view>
|
||||
</view>
|
||||
<scroll-view scroll-x class='bg-white padding response cu-steps steps-bottom' scroll-into-view="scroll-{{scroll}}" scroll-with-animation>
|
||||
<view class='cu-item {{index>scroll?"":"text-blue"}} padding-lr-xl' wx:for="{{10}}" wx:key id="scroll-{{index}}">
|
||||
Level {{index + 1}} <text class='num' data-index='{{index + 1}}'></text>
|
||||
<scroll-view scroll-x class="bg-white padding response cu-steps steps-bottom" scroll-into-view="scroll-{{scroll}}" scroll-with-animation>
|
||||
<view class="cu-item {{index>scroll?'':'text-blue'}} padding-lr-xl" wx:for="{{10}}" wx:key id="scroll-{{index}}">
|
||||
Level {{index + 1}} <text class="num" data-index="{{index + 1}}"></text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
@@ -1,34 +1,38 @@
|
||||
const app = getApp();
|
||||
Page({
|
||||
data: {
|
||||
StatusBar: app.globalData.StatusBar,
|
||||
CustomBar: app.globalData.CustomBar,
|
||||
cardCur: 0,
|
||||
tower: [{
|
||||
swiperList: [{
|
||||
id: 0,
|
||||
url: 'https://image.weilanwl.com/img/4x3-1.jpg'
|
||||
type: 'image',
|
||||
url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big84000.jpg'
|
||||
}, {
|
||||
id: 1,
|
||||
url: 'https://image.weilanwl.com/img/4x3-2.jpg'
|
||||
type: 'image',
|
||||
url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big84001.jpg',
|
||||
}, {
|
||||
id: 2,
|
||||
url: 'https://image.weilanwl.com/img/4x3-3.jpg'
|
||||
}, {
|
||||
id: 3,
|
||||
url: 'https://image.weilanwl.com/img/4x3-4.jpg'
|
||||
}, {
|
||||
id: 4,
|
||||
url: 'https://image.weilanwl.com/img/4x3-2.jpg'
|
||||
}, {
|
||||
id: 5,
|
||||
url: 'https://image.weilanwl.com/img/4x3-4.jpg'
|
||||
}, {
|
||||
id: 6,
|
||||
url: 'https://image.weilanwl.com/img/4x3-2.jpg'
|
||||
}]
|
||||
type: 'image',
|
||||
url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big39000.jpg'
|
||||
}, {
|
||||
id: 3,
|
||||
type: 'image',
|
||||
url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg'
|
||||
}, {
|
||||
id: 4,
|
||||
type: 'image',
|
||||
url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big25011.jpg'
|
||||
}, {
|
||||
id: 5,
|
||||
type: 'image',
|
||||
url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big21016.jpg'
|
||||
}, {
|
||||
id: 6,
|
||||
type: 'image',
|
||||
url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big99008.jpg'
|
||||
}],
|
||||
},
|
||||
onLoad() {
|
||||
this.towerSwiper('tower');
|
||||
this.towerSwiper('swiperList');
|
||||
// 初始化towerSwiper 传已有的数组名即可
|
||||
},
|
||||
DotStyle(e) {
|
||||
@@ -51,28 +55,25 @@ Page({
|
||||
list[i].mLeft = i - parseInt(list.length / 2)
|
||||
}
|
||||
this.setData({
|
||||
towerList: list
|
||||
swiperList: list
|
||||
})
|
||||
},
|
||||
|
||||
// towerSwiper触摸开始
|
||||
towerStart(e) {
|
||||
this.setData({
|
||||
towerStart: e.touches[0].pageX
|
||||
})
|
||||
},
|
||||
|
||||
// towerSwiper计算方向
|
||||
towerMove(e) {
|
||||
this.setData({
|
||||
direction: e.touches[0].pageX - this.data.towerStart > 0 ? 'right' : 'left'
|
||||
})
|
||||
},
|
||||
|
||||
// towerSwiper计算滚动
|
||||
towerEnd(e) {
|
||||
let direction = this.data.direction;
|
||||
let list = this.data.towerList;
|
||||
let list = this.data.swiperList;
|
||||
if (direction == 'right') {
|
||||
let mLeft = list[0].mLeft;
|
||||
let zIndex = list[0].zIndex;
|
||||
@@ -83,7 +84,7 @@ Page({
|
||||
list[list.length - 1].mLeft = mLeft;
|
||||
list[list.length - 1].zIndex = zIndex;
|
||||
this.setData({
|
||||
towerList: list
|
||||
swiperList: list
|
||||
})
|
||||
} else {
|
||||
let mLeft = list[list.length - 1].mLeft;
|
||||
@@ -95,8 +96,8 @@ Page({
|
||||
list[0].mLeft = mLeft;
|
||||
list[0].zIndex = zIndex;
|
||||
this.setData({
|
||||
towerList: list
|
||||
swiperList: list
|
||||
})
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
})
|
||||
@@ -1,41 +1,45 @@
|
||||
<view class="cu-custom" style="height:{{CustomBar}}px;">
|
||||
<view class="cu-bar fixed bg-gradual-pink" 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>
|
||||
<cu-custom bgColor="bg-gradual-pink" isBack="{{true}}">
|
||||
<view slot="backText">返回</view>
|
||||
<view slot="content">轮播图</view>
|
||||
</cu-custom>
|
||||
<view class="cu-bar bg-white">
|
||||
<view class='action'>
|
||||
<text class='icon-title text-pink'></text> 全屏限高轮播
|
||||
<view class="action">
|
||||
<text class="icon-title text-pink"></text> 全屏限高轮播
|
||||
</view>
|
||||
<view class='action'>
|
||||
<switch class='sm' bindchange='DotStyle'></switch>
|
||||
<view class="action">
|
||||
<switch class="sm" bindchange="DotStyle"></switch>
|
||||
</view>
|
||||
</view>
|
||||
<swiper class="screen-swiper {{DotStyle?'square-dot':'round-dot'}}" indicator-dots="true" circular="true" autoplay="true" interval="5000" duration="500">
|
||||
<swiper-item wx:for="{{4}}" wx:key>
|
||||
<image src="https://image.weilanwl.com/img/4x3-{{index+1}}.jpg" mode='aspectFill'></image>
|
||||
<swiper-item wx:for="{{swiperList}}" wx:key>
|
||||
<image src="{{item.url}}" mode="aspectFill" wx:if="{{item.type=='image'}}"></image>
|
||||
<video src="{{item.url}}" autoplay loop muted show-play-btn="{{false}}" controls="{{false}}" objectFit="cover" wx:if="{{item.type=='video'}}"></video>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<view class="cu-bar bg-white margin-top">
|
||||
<view class='action'>
|
||||
<text class='icon-title text-pink'></text> 卡片式轮播
|
||||
<view class="action">
|
||||
<text class="icon-title text-pink"></text> 卡片式轮播
|
||||
</view>
|
||||
</view>
|
||||
<swiper class="card-swiper {{DotStyle?'square-dot':'round-dot'}}" indicator-dots="true" circular="true" autoplay="true" interval="5000" duration="500" bindchange="cardSwiper" indicator-color="#8799a3" indicator-active-color="#0081ff">
|
||||
<swiper-item wx:for="{{4}}" wx:key class="{{cardCur==index?'cur':''}}">
|
||||
<view class='bg-img shadow-blur' style="background-image:url(https://image.weilanwl.com/img/4x3-{{index+1}}.jpg)"></view>
|
||||
<swiper-item wx:for="{{swiperList}}" wx:key class="{{cardCur==index?'cur':''}}">
|
||||
<view class="swiper-item">
|
||||
<image src="{{item.url}}" mode="aspectFill" wx:if="{{item.type=='image'}}"></image>
|
||||
<video src="{{item.url}}" autoplay loop muted show-play-btn="{{false}}" controls="{{false}}" objectFit="cover" wx:if="{{item.type=='video'}}"></video>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
|
||||
<view class="cu-bar bg-white margin-top">
|
||||
<view class='action'>
|
||||
<text class='icon-title text-pink'></text> 堆叠式轮播
|
||||
<view class="action">
|
||||
<text class="icon-title text-pink"></text> 堆叠式轮播
|
||||
</view>
|
||||
</view>
|
||||
<view class="tower-swiper" bindtouchmove="towerMove" bindtouchstart="towerStart" bindtouchend="towerEnd">
|
||||
<view class='tower-item {{item.zIndex==1?"none":""}}' wx:for="{{towerList}}" wx:key style='transform: scale({{0.5+item.zIndex/10}});margin-left:{{item.mLeft*100-150}}rpx;z-index:{{item.zIndex}}'>
|
||||
<view class='bg-img shadow-blur' style="background-image:url({{item.url}})"></view>
|
||||
<view class="tower-item {{item.zIndex==1?'none':''}}" wx:for="{{swiperList}}" wx:key style="--index:{{item.zIndex}};--left:{{item.mLeft}}">
|
||||
<view class="swiper-item">
|
||||
<image src="{{item.url}}" mode="aspectFill" wx:if="{{item.type=='image'}}"></image>
|
||||
<video src="{{item.url}}" autoplay loop muted show-play-btn="{{false}}" controls="{{false}}" objectFit="cover" wx:if="{{item.type=='video'}}"></video>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -1 +1,5 @@
|
||||
/* pages/component/swiper/swiper.wxss */
|
||||
.tower-swiper .tower-item {
|
||||
transform: scale(calc(0.5 + var(--index) / 10));
|
||||
margin-left: calc(var(--left) * 100rpx - 150rpx);
|
||||
z-index: var(--index);
|
||||
}
|
||||
@@ -1,9 +1 @@
|
||||
const app = getApp();
|
||||
Page({
|
||||
data: {
|
||||
StatusBar: app.globalData.StatusBar,
|
||||
CustomBar: app.globalData.CustomBar
|
||||
},
|
||||
onLoad: function () { },
|
||||
|
||||
});
|
||||
Page({});
|
||||
|
||||
@@ -1,29 +1,25 @@
|
||||
<view class="cu-custom" style="height:{{CustomBar}}px;">
|
||||
<view class="cu-bar fixed bg-gradual-pink" 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>
|
||||
<cu-custom bgColor="bg-gradual-pink" isBack="{{true}}">
|
||||
<view slot="backText">返回</view>
|
||||
<view slot="content">时间轴</view>
|
||||
</cu-custom>
|
||||
<view class="cu-timeline">
|
||||
<view class="cu-time">昨天</view>
|
||||
<view class='cu-item cur icon-noticefill'>
|
||||
<view class="cu-item cur icon-noticefill">
|
||||
<view class="content bg-green shadow-blur">
|
||||
<text>22:22</text> 【广州市】快件已到达地球
|
||||
</view>
|
||||
</view>
|
||||
<view class='cu-item text-red icon-attentionforbidfill'>
|
||||
<view class="cu-item text-red icon-attentionforbidfill">
|
||||
<view class="content bg-red shadow-blur">
|
||||
这是第一次，我家的铲屎官走了这么久。久到足足有三天！！
|
||||
</view>
|
||||
</view>
|
||||
<view class='cu-item text-grey icon-evaluate_fill'>
|
||||
<view class="cu-item text-grey icon-evaluate_fill">
|
||||
<view class="content bg-grey shadow-blur">
|
||||
这是第一次，我家的铲屎官走了这么久。
|
||||
</view>
|
||||
</view>
|
||||
<view class='cu-item text-blue'>
|
||||
<view class="cu-item text-blue">
|
||||
<view class="bg-blue content">
|
||||
<text>20:00</text> 【月球】快件已到达月球，准备发往地球
|
||||
</view>
|
||||
@@ -50,38 +46,38 @@
|
||||
<view class="cu-tag bg-cyan">上午</view>
|
||||
<view class="cu-tag line-cyan">10:00</view>
|
||||
</view>
|
||||
<view class='margin-top'>这是第一次，我家的铲屎官走了这么久。久到足足有三天！！ 在听到他的脚步声响在楼梯间的那一刻，我简直想要破门而出，对着他狠狠地吼上10分钟，然后再看心情要不要他进门。</view>
|
||||
<view class="margin-top">这是第一次，我家的铲屎官走了这么久。久到足足有三天！！ 在听到他的脚步声响在楼梯间的那一刻，我简直想要破门而出，对着他狠狠地吼上10分钟，然后再看心情要不要他进门。</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class='cu-item text-blue'>
|
||||
<view class="cu-item text-blue">
|
||||
<view class="bg-blue shadow-blur content">
|
||||
<view class="cu-list menu menu-avatar radius">
|
||||
<view class="cu-list menu-avatar radius">
|
||||
<view class="cu-item">
|
||||
<view class="cu-avatar round lg" style="background-image:url(https://image.weilanwl.com/img/square-1.jpg);"></view>
|
||||
<view class='content'>
|
||||
<view class='text-grey'>文晓港</view>
|
||||
<view class='text-gray text-sm'>
|
||||
<text class='icon-infofill text-red'></text> 消息未送达</view>
|
||||
<view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg);"></view>
|
||||
<view class="content">
|
||||
<view class="text-grey">文晓港</view>
|
||||
<view class="text-gray text-sm">
|
||||
<text class="icon-infofill text-red"></text> 消息未送达</view>
|
||||
</view>
|
||||
<view class='action'>
|
||||
<view class='text-grey text-xs'>22:20</view>
|
||||
<view class="action">
|
||||
<view class="text-grey text-xs">22:20</view>
|
||||
<view class="cu-tag round bg-grey sm">5</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-item">
|
||||
<view class="cu-avatar round lg" style="background-image:url(https://image.weilanwl.com/img/square-2.jpg);">
|
||||
<view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg);">
|
||||
<view class="cu-tag badge">99+</view>
|
||||
</view>
|
||||
<view class='content'>
|
||||
<view class='text-grey'>文晓港
|
||||
<view class="content">
|
||||
<view class="text-grey">文晓港
|
||||
<view class="cu-tag round orange sm">SVIP</view>
|
||||
</view>
|
||||
<view class='text-gray text-sm'>
|
||||
<text class='icon-redpacket_fill text-red'></text> 收到红包</view>
|
||||
<view class="text-gray text-sm">
|
||||
<text class="icon-redpacket_fill text-red"></text> 收到红包</view>
|
||||
</view>
|
||||
<view class='action'>
|
||||
<view class='text-grey text-xs'>22:20</view>
|
||||
<text class='icon-notice_forbid_fill text-gray'></text>
|
||||
<view class="action">
|
||||
<view class="text-grey text-xs">22:20</view>
|
||||
<text class="icon-notice_forbid_fill text-gray"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
/* pages/component/timeline/timeline.wxss */
|
||||
Reference in New Issue
Block a user