mirror of
https://gitee.com/vant-contrib/vant-weapp.git
synced 2025-04-05 19:41:45 +08:00
项目初始化
This commit is contained in:
Nino
commit
6224c000eb
19
app.json
Normal file
19
app.json
Normal file
@ -0,0 +1,19 @@
|
||||
{
|
||||
"pages":[
|
||||
"pages/dashboard/index",
|
||||
"pages/btn/index",
|
||||
"pages/badge/index",
|
||||
"pages/cell/index",
|
||||
"pages/label/index",
|
||||
"pages/loadmore/index",
|
||||
"pages/panel/index",
|
||||
"pages/tab/index"
|
||||
],
|
||||
"window":{
|
||||
"navigationBarBackgroundColor": "#FAFAFA",
|
||||
"navigationBarTitleText": "WeChat",
|
||||
"navigationBarTextStyle":"black",
|
||||
"backgroundTextStyle":"dark",
|
||||
"backgroundColor": "#f9f9f9"
|
||||
}
|
||||
}
|
||||
18
app.wxss
Normal file
18
app.wxss
Normal file
@ -0,0 +1,18 @@
|
||||
@import "zui/index.wxss";
|
||||
|
||||
.container {
|
||||
background: #F9F9F9;
|
||||
overflow: hidden;
|
||||
min-height: 100vh;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.container::before {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
content: ' ';
|
||||
width: 100%;
|
||||
height: 1rpx;
|
||||
background-color: #e2e2e2;
|
||||
z-index: 5;
|
||||
}
|
||||
13
pages/badge/index.js
Normal file
13
pages/badge/index.js
Normal file
@ -0,0 +1,13 @@
|
||||
var app = getApp()
|
||||
|
||||
Page({
|
||||
data: {
|
||||
},
|
||||
|
||||
onLoad: function () {
|
||||
|
||||
},
|
||||
|
||||
onShow: function() {
|
||||
},
|
||||
})
|
||||
23
pages/badge/index.wxml
Normal file
23
pages/badge/index.wxml
Normal file
@ -0,0 +1,23 @@
|
||||
<view class="container">
|
||||
<view class="demo">
|
||||
<view class="demo__item">
|
||||
<view class="demo__icon zui-badge">
|
||||
</view>
|
||||
</view>
|
||||
<view class="demo__item">
|
||||
<view class="demo__icon zui-badge">
|
||||
<view class="zui-badge__count">9</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="demo__item">
|
||||
<view class="demo__icon zui-badge">
|
||||
<view class="zui-badge__count">19</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="demo__item">
|
||||
<view class="demo__icon zui-badge">
|
||||
<view class="zui-badge__count">99+</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
14
pages/badge/index.wxss
Normal file
14
pages/badge/index.wxss
Normal file
@ -0,0 +1,14 @@
|
||||
.demo {
|
||||
padding: 40px 0;
|
||||
display: flex;
|
||||
}
|
||||
.demo__item {
|
||||
flex: 1;
|
||||
}
|
||||
.demo__icon {
|
||||
margin: 0 auto;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background: #ddd;
|
||||
border-radius: 4px;
|
||||
}
|
||||
13
pages/btn/index.js
Normal file
13
pages/btn/index.js
Normal file
@ -0,0 +1,13 @@
|
||||
var app = getApp()
|
||||
|
||||
Page({
|
||||
data: {
|
||||
},
|
||||
|
||||
onLoad: function () {
|
||||
|
||||
},
|
||||
|
||||
onShow: function() {
|
||||
},
|
||||
})
|
||||
42
pages/btn/index.wxml
Normal file
42
pages/btn/index.wxml
Normal file
@ -0,0 +1,42 @@
|
||||
<view class="container">
|
||||
|
||||
<view class="zui-panel" style="padding: 15px;">
|
||||
<button class="zui-btn">取消订单</button>
|
||||
<button class="zui-btn zui-btn--primary">确认付款</button>
|
||||
<button class="zui-btn zui-btn--danger">确认付款</button>
|
||||
<button class="zui-btn zui-btn--warn zui-btn--last-child">确认付款</button>
|
||||
</view>
|
||||
|
||||
<view class="zui-panel">
|
||||
<button class="zui-btn zui-btn--big zui-btn--primary">确认付款</button>
|
||||
<button class="zui-btn zui-btn--big zui-btn--warn">立即购买</button>
|
||||
<button class="zui-btn zui-btn--big zui-btn--danger">立即购买</button>
|
||||
</view>
|
||||
|
||||
<view class="zui-panel" style="padding: 15px;">
|
||||
<button class="zui-btn zui-btn--small">取消订单</button>
|
||||
<button class="zui-btn zui-btn--small zui-btn--primary">确认付款</button>
|
||||
</view>
|
||||
|
||||
<view class="zui-panel" style="padding: 15px;">
|
||||
<button class="zui-btn zui-btn--mini zui-btn--plain">取消订单</button>
|
||||
<button class="zui-btn zui-btn--mini zui-btn--primary zui-btn--plain">确认付款</button>
|
||||
<button class="zui-btn zui-btn--mini zui-btn--warn zui-btn--plain">确认付款</button>
|
||||
<button class="zui-btn zui-btn--mini zui-btn--danger zui-btn--plain">确认付款</button>
|
||||
</view>
|
||||
|
||||
<view class="zui-panel" style="padding: 15px;">
|
||||
<button class="zui-btn zui-btn--loading">取消订单</button>
|
||||
<button class="zui-btn zui-btn--loading zui-btn--primary">确认付款</button>
|
||||
<button class="zui-btn zui-btn--loading zui-btn--danger">确认付款</button>
|
||||
<button class="zui-btn zui-btn--loading zui-btn--warn zui-btn--last-child">确认付款</button>
|
||||
</view>
|
||||
|
||||
<view class="zui-panel" style="padding: 15px;">
|
||||
<button class="zui-btn zui-btn--disabled" disabled>取消订单</button>
|
||||
<button class="zui-btn zui-btn--disabled zui-btn--primary" disabled>确认付款</button>
|
||||
<button class="zui-btn zui-btn--disabled zui-btn--danger" disabled>确认付款</button>
|
||||
<button class="zui-btn zui-btn--disabled zui-btn--warn zui-btn--last-child" disabled>确认付款</button>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
13
pages/btns/index.js
Normal file
13
pages/btns/index.js
Normal file
@ -0,0 +1,13 @@
|
||||
var app = getApp()
|
||||
|
||||
Page({
|
||||
data: {
|
||||
},
|
||||
|
||||
onLoad: function () {
|
||||
|
||||
},
|
||||
|
||||
onShow: function() {
|
||||
},
|
||||
})
|
||||
7
pages/btns/index.wxml
Normal file
7
pages/btns/index.wxml
Normal file
@ -0,0 +1,7 @@
|
||||
<view class="container">
|
||||
<view class="zui-btns">
|
||||
<button class="zui-btn zui-btn--danger">1号按钮</button>
|
||||
<button class="zui-btn zui-btn--primary">1号按钮</button>
|
||||
<button class="zui-btn">2号按钮</button>
|
||||
</view>
|
||||
</view>
|
||||
13
pages/cell/index.js
Normal file
13
pages/cell/index.js
Normal file
@ -0,0 +1,13 @@
|
||||
var app = getApp()
|
||||
|
||||
Page({
|
||||
data: {
|
||||
},
|
||||
|
||||
onLoad: function () {
|
||||
|
||||
},
|
||||
|
||||
onShow: function() {
|
||||
},
|
||||
})
|
||||
31
pages/cell/index.wxml
Normal file
31
pages/cell/index.wxml
Normal file
@ -0,0 +1,31 @@
|
||||
<view class="container">
|
||||
|
||||
<view class="zui-panel">
|
||||
<view class="zui-cell zui-cell--access">
|
||||
<view class="zui-cell__bd">字段1</view>
|
||||
<view class="zui-cell__ft"></view>
|
||||
</view>
|
||||
<view class="zui-cell zui-cell--access">
|
||||
<view class="zui-cell__bd">字段2</view>
|
||||
<view class="zui-cell__ft"></view>
|
||||
</view>
|
||||
<view class="zui-cell zui-cell--last-child zui-cell--access">
|
||||
<view class="zui-cell__bd">最后一个字段</view>
|
||||
<view class="zui-cell__ft"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="zui-panel">
|
||||
<view class="zui-cell zui-cell--last-child">
|
||||
<view class="zui-cell__bd">不带箭头</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="zui-panel">
|
||||
<navigator class="zui-cell zui-cell--last-child">
|
||||
<view class="zui-cell__bd">点击时背景会变色</view>
|
||||
<view class="zui-cell__ft"></view>
|
||||
</navigator>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
13
pages/dashboard/index.js
Normal file
13
pages/dashboard/index.js
Normal file
@ -0,0 +1,13 @@
|
||||
var app = getApp()
|
||||
|
||||
Page({
|
||||
data: {
|
||||
},
|
||||
|
||||
onLoad: function () {
|
||||
|
||||
},
|
||||
|
||||
onShow: function() {
|
||||
},
|
||||
})
|
||||
34
pages/dashboard/index.wxml
Normal file
34
pages/dashboard/index.wxml
Normal file
@ -0,0 +1,34 @@
|
||||
<view class="container">
|
||||
|
||||
<view class="zui-panel">
|
||||
<navigator class="zui-cell zui-cell--access" url="/pages/btn/index">
|
||||
<view class="zui-cell__bd">Button</view>
|
||||
<view class="zui-cell__ft"></view>
|
||||
</navigator>
|
||||
<navigator class="zui-cell zui-cell--access" url="/pages/loadmore/index">
|
||||
<view class="zui-cell__bd">Loadmore</view>
|
||||
<view class="zui-cell__ft"></view>
|
||||
</navigator>
|
||||
<navigator class="zui-cell zui-cell--access" url="/pages/panel/index">
|
||||
<view class="zui-cell__bd">Panel</view>
|
||||
<view class="zui-cell__ft"></view>
|
||||
</navigator>
|
||||
<navigator class="zui-cell zui-cell--access" url="/pages/cell/index">
|
||||
<view class="zui-cell__bd">Cell</view>
|
||||
<view class="zui-cell__ft"></view>
|
||||
</navigator>
|
||||
<navigator class="zui-cell zui-cell--access" url="/pages/badge/index">
|
||||
<view class="zui-cell__bd">Badge</view>
|
||||
<view class="zui-cell__ft"></view>
|
||||
</navigator>
|
||||
<navigator class="zui-cell zui-cell--access" url="/pages/tab/index">
|
||||
<view class="zui-cell__bd">Tab</view>
|
||||
<view class="zui-cell__ft"></view>
|
||||
</navigator>
|
||||
<navigator class="zui-cell zui-cell--access zui-cell--last-child" url="/pages/label/index">
|
||||
<view class="zui-cell__bd">Label</view>
|
||||
<view class="zui-cell__ft"></view>
|
||||
</navigator>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
13
pages/label/index.js
Normal file
13
pages/label/index.js
Normal file
@ -0,0 +1,13 @@
|
||||
var app = getApp()
|
||||
|
||||
Page({
|
||||
data: {
|
||||
},
|
||||
|
||||
onLoad: function () {
|
||||
|
||||
},
|
||||
|
||||
onShow: function() {
|
||||
},
|
||||
})
|
||||
22
pages/label/index.wxml
Normal file
22
pages/label/index.wxml
Normal file
@ -0,0 +1,22 @@
|
||||
<view class="container">
|
||||
<view class="zui-panel">
|
||||
<view class="zui-cell zui-cell--last-child">
|
||||
<view class="zui-label">蓝色</view>
|
||||
<view class="zui-label zui-label--primary">红色</view>
|
||||
<view class="zui-label zui-label--disabled">黑色</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="zui-panel">
|
||||
<view class="zui-cell zui-cell--last-child">
|
||||
<view class="zui-label zui-label--primary zui-label--small">会员折扣</view>
|
||||
<view class="zui-label zui-label--primary zui-label--small">返现</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="zui-panel">
|
||||
<view class="zui-cell zui-cell--last-child">
|
||||
<view class="zui-label zui-label--primary zui-label--small zui-label--plain">会员折扣</view>
|
||||
<view class="zui-label zui-label--primary zui-label--small zui-label--plain">返现</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
13
pages/loadmore/index.js
Normal file
13
pages/loadmore/index.js
Normal file
@ -0,0 +1,13 @@
|
||||
var app = getApp()
|
||||
|
||||
Page({
|
||||
data: {
|
||||
},
|
||||
|
||||
onLoad: function () {
|
||||
|
||||
},
|
||||
|
||||
onShow: function() {
|
||||
},
|
||||
})
|
||||
7
pages/loadmore/index.wxml
Normal file
7
pages/loadmore/index.wxml
Normal file
@ -0,0 +1,7 @@
|
||||
<import src="/zui/loadmore.wxml" />
|
||||
|
||||
<view class="container">
|
||||
<template is="loadmore" data="{{loading: true}}" />
|
||||
<template is="loadmore" data="{{nomore: true}}" />
|
||||
<template is="loadmore" data="{{nodata: true}}" />
|
||||
</view>
|
||||
13
pages/panel/index.js
Normal file
13
pages/panel/index.js
Normal file
@ -0,0 +1,13 @@
|
||||
var app = getApp()
|
||||
|
||||
Page({
|
||||
data: {
|
||||
},
|
||||
|
||||
onLoad: function () {
|
||||
|
||||
},
|
||||
|
||||
onShow: function() {
|
||||
},
|
||||
})
|
||||
15
pages/panel/index.wxml
Normal file
15
pages/panel/index.wxml
Normal file
@ -0,0 +1,15 @@
|
||||
<view class="container">
|
||||
|
||||
<view class="zui-panel">
|
||||
<view style="padding: 15px;">Panel</view>
|
||||
</view>
|
||||
|
||||
<view class="zui-panel">
|
||||
<view style="padding: 15px;">Panel</view>
|
||||
</view>
|
||||
|
||||
<view class="zui-panel">
|
||||
<view style="padding: 15px;">Panel</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
70
pages/tab/index.js
Normal file
70
pages/tab/index.js
Normal file
@ -0,0 +1,70 @@
|
||||
Page({
|
||||
data: {
|
||||
tab1: {
|
||||
list: [{
|
||||
id: 'all',
|
||||
title: '全部'
|
||||
}, {
|
||||
id: 'topay',
|
||||
title: '待付款'
|
||||
}, {
|
||||
id: 'tosend',
|
||||
title: '待发货'
|
||||
}, {
|
||||
id: 'send',
|
||||
title: '待收货'
|
||||
}, {
|
||||
id: 'sign',
|
||||
title: '已完成'
|
||||
}],
|
||||
selectedId: 'all',
|
||||
scroll: false
|
||||
},
|
||||
tab2: {
|
||||
list: [{
|
||||
id: '1',
|
||||
title: '最新商品1'
|
||||
}, {
|
||||
id: '2',
|
||||
title: '最新商品2'
|
||||
}, {
|
||||
id: '3',
|
||||
title: '最新商品3'
|
||||
}, {
|
||||
id: '4',
|
||||
title: '最新商品4'
|
||||
}, {
|
||||
id: '5',
|
||||
title: '最新商品5'
|
||||
}, {
|
||||
id: '6',
|
||||
title: '最新商品6'
|
||||
}],
|
||||
selectedId: '1',
|
||||
scroll: true
|
||||
}
|
||||
},
|
||||
|
||||
_handleComponentTabChange(e) {
|
||||
var dataset = e.currentTarget.dataset;
|
||||
var componentId = dataset.componentId;
|
||||
var selectedId = dataset.itemId;
|
||||
|
||||
if (this.handleComponentTabChange) {
|
||||
this.handleComponentTabChange({
|
||||
componentId,
|
||||
selectedId
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
handleComponentTabChange(e) {
|
||||
console.log('[handleComponentTabChange]', e);
|
||||
var componentId = e.componentId;
|
||||
var selectedId = e.selectedId;
|
||||
|
||||
this.setData({
|
||||
[`${componentId}.selectedId`]: selectedId
|
||||
});
|
||||
}
|
||||
});
|
||||
36
pages/tab/index.wxml
Normal file
36
pages/tab/index.wxml
Normal file
@ -0,0 +1,36 @@
|
||||
<template name="component-tab">
|
||||
<view class="zui-tab">
|
||||
<block wx:if="{{tab.scroll}}">
|
||||
<scroll-view class="zui-tab__bd zui-tab__bd--scroll {{fixed ? 'zui-tab__bd--fixed' : ''}}" scroll-x="true">
|
||||
<template is="component-tab-list" data="{{ tab, componentId }}"></template>
|
||||
</scroll-view>
|
||||
</block>
|
||||
<block wx:else>
|
||||
<view class="zui-tab__bd">
|
||||
<template is="component-tab-list" data="{{ tab, componentId }}"></template>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<template name="component-tab-list">
|
||||
<view
|
||||
wx:for="{{tab.list}}"
|
||||
wx:key="id"
|
||||
class="zui-tab__item {{tab.selectedId == item.id ? 'zui-tab__item--selected' : ''}}"
|
||||
data-component-id="{{componentId}}"
|
||||
data-item-id="{{item.id}}"
|
||||
bindtap="_handleComponentTabChange"
|
||||
>
|
||||
<view class="zui-tab__title">{{item.title}}</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<view class="container">
|
||||
<view style="margin: 20px 0">
|
||||
<template is="component-tab" data="{{tab: tab1, componentId: 'tab1'}}"></template>
|
||||
</view>
|
||||
<view style="margin: 20px 0">
|
||||
<template is="component-tab" data="{{tab: tab2, componentId: 'tab2'}}"></template>
|
||||
</view>
|
||||
</view>
|
||||
0
pages/tab/index.wxss
Normal file
0
pages/tab/index.wxss
Normal file
24
zui/badge.wxss
Normal file
24
zui/badge.wxss
Normal file
@ -0,0 +1,24 @@
|
||||
.zui-badge {
|
||||
position: relative;
|
||||
}
|
||||
.zui-badge__count {
|
||||
position: absolute;
|
||||
top: -8px;
|
||||
right: 0px;
|
||||
height: 16px;
|
||||
min-width: 16px;
|
||||
line-height: 16px;
|
||||
padding: 0 4px;
|
||||
font-size: 10px;
|
||||
font-family: tahoma;
|
||||
border-radius: 10px;
|
||||
background: #FF4444;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
transform: translateX(50%);
|
||||
transform-origin: -10% center;
|
||||
z-index: 10;
|
||||
box-shadow: 0 0 0 1px #fff;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
137
zui/btn.wxss
Normal file
137
zui/btn.wxss
Normal file
@ -0,0 +1,137 @@
|
||||
.zui-btn {
|
||||
position: relative;
|
||||
color: #333;
|
||||
background-color: #fff;
|
||||
margin-bottom: 10px;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
border-radius: 2px;
|
||||
border: 1rpx solid #e5e5e5;
|
||||
font-size: 16px;
|
||||
line-height: 45px;
|
||||
height: 45px;
|
||||
box-sizing: border-box;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.zui-btn::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* type */
|
||||
.zui-btn--primary {
|
||||
color: #fff;
|
||||
background-color: #4b0;
|
||||
border-color: #0a0;
|
||||
}
|
||||
|
||||
.zui-btn--warn {
|
||||
color: #fff;
|
||||
background-color: #f85;
|
||||
border-color: #f85;
|
||||
}
|
||||
|
||||
.zui-btn--danger {
|
||||
color: #fff;
|
||||
background-color: #f44;
|
||||
border-color: #e33;
|
||||
}
|
||||
|
||||
/* size */
|
||||
.zui-btn--small {
|
||||
display: inline-block;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
font-size: 12px;
|
||||
margin-right: 5px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.zui-btn--mini {
|
||||
display: inline-block;
|
||||
line-height: 21px;
|
||||
height: 22px;
|
||||
font-size: 10px;
|
||||
margin-right: 5px;
|
||||
margin-bottom: 0;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
.zui-btn--big {
|
||||
border-radius: 0;
|
||||
margin-bottom: 0;
|
||||
border: none;
|
||||
line-height: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
/* plain */
|
||||
.zui-btn--plain.zui-btn {
|
||||
background-color: transparent;
|
||||
}
|
||||
.zui-btn--plain.zui-btn--primary {
|
||||
color: #06BF04;
|
||||
}
|
||||
.zui-btn--plain.zui-btn--warn {
|
||||
color: #FF6600;
|
||||
}
|
||||
.zui-btn--plain.zui-btn--danger {
|
||||
color: #FF4444;
|
||||
}
|
||||
|
||||
/* 重写button组件的button-hover样式 */
|
||||
.button-hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
/* loading */
|
||||
.zui-btn--loading {
|
||||
color: transparent;
|
||||
opacity: 1;
|
||||
}
|
||||
.zui-btn--loading::before {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
content: ' ';
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-left: -8px;
|
||||
margin-top: -8px;
|
||||
border: 3px solid #e5e5e5;
|
||||
border-color: #666 #e5e5e5 #e5e5e5 #e5e5e5;
|
||||
border-radius: 8px;
|
||||
box-sizing: border-box;
|
||||
animation: btn-spin 0.6s linear;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
.zui-btn--primary.zui-btn--loading::before,
|
||||
.zui-btn--warn.zui-btn--loading::before,
|
||||
.zui-btn--danger.zui-btn--loading::before {
|
||||
border-color: #fff rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
@keyframes btn-spin {
|
||||
0% {
|
||||
transform: rotate(0);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* disabled */
|
||||
.zui-btn.zui-btn--disabled {
|
||||
color: #999;
|
||||
background: #f8f8f8;
|
||||
border-color: #e5e5e5;
|
||||
cursor: not-allowed;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* ::last-child */
|
||||
.zui-btn--last-child {
|
||||
margin-bottom: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
3
zui/btns.wxss
Normal file
3
zui/btns.wxss
Normal file
@ -0,0 +1,3 @@
|
||||
.zui-btns {
|
||||
margin: 15px;
|
||||
}
|
||||
48
zui/cell.wxss
Normal file
48
zui/cell.wxss
Normal file
@ -0,0 +1,48 @@
|
||||
.zui-cell {
|
||||
position: relative;
|
||||
padding: 12px 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
line-height: 1.4;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.zui-cell::after {
|
||||
position: absolute;
|
||||
left: 15px;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border-top: 1rpx solid #e5e5e5;
|
||||
background: #e5e5e5;
|
||||
content: ' ';
|
||||
}
|
||||
.zui-cell__bd {
|
||||
flex: 1;
|
||||
}
|
||||
.zui-cell__ft {
|
||||
position: relative;
|
||||
text-align: right;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.zui-cell--last-child::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.zui-cell--access .zui-cell__ft {
|
||||
padding-right: 13px;
|
||||
}
|
||||
|
||||
.zui-cell--access .zui-cell__ft::after {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 2px;
|
||||
content: " ";
|
||||
display: inline-block;
|
||||
height: 6px;
|
||||
width: 6px;
|
||||
border-width: 2px 2px 0 0;
|
||||
border-color: #c8c8c8;
|
||||
border-style: solid;
|
||||
transform: translateY(-50%) matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
|
||||
}
|
||||
27
zui/color.wxss
Normal file
27
zui/color.wxss
Normal file
@ -0,0 +1,27 @@
|
||||
.zui-c-red {
|
||||
color: #f44 !important;
|
||||
}
|
||||
|
||||
.zui-c-gray {
|
||||
color: #c9c9c9 !important;
|
||||
}
|
||||
|
||||
.zui-c-gray-dark {
|
||||
color: #999 !important;
|
||||
}
|
||||
|
||||
.zui-c-gray-darker {
|
||||
color: #666 !important;
|
||||
}
|
||||
|
||||
.zui-c-black {
|
||||
color: #333 !important;
|
||||
}
|
||||
|
||||
.zui-c-blue {
|
||||
color: #3283fa !important;
|
||||
}
|
||||
|
||||
.zui-c-green {
|
||||
color: #44BB00 !important;
|
||||
}
|
||||
41
zui/dialog.wxss
Normal file
41
zui/dialog.wxss
Normal file
@ -0,0 +1,41 @@
|
||||
.zui-dialog,
|
||||
.zui-dialog__mask {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.zui-dialog__mask {
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
0% {
|
||||
transform: translateY(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
10% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.zui-dialog__container {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 750rpx;
|
||||
background: white;
|
||||
transform: translateY(0);
|
||||
opacity: 0;
|
||||
transition: all 0.4s ease;
|
||||
animation: slideUp 0.4s ease ;
|
||||
animation-fill-mode: forwards;
|
||||
animation-delay: 0.1s;
|
||||
z-index: 11;
|
||||
}
|
||||
17
zui/form.wxss
Normal file
17
zui/form.wxss
Normal file
@ -0,0 +1,17 @@
|
||||
.zui-form {
|
||||
background-color: #fff;
|
||||
border-bottom: 1rpx solid #e5e5e5;
|
||||
}
|
||||
|
||||
.zui-form__item {
|
||||
line-height: 26px;
|
||||
}
|
||||
|
||||
.zui-form__title {
|
||||
float: left;
|
||||
width: 80px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.zui-form__input {
|
||||
}
|
||||
66
zui/helper.wxss
Normal file
66
zui/helper.wxss
Normal file
@ -0,0 +1,66 @@
|
||||
.pull-left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.pull-right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.zui-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.zui-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.zui-text-deleted {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
.zui-font-12 {
|
||||
font-size: 12px;
|
||||
}
|
||||
.zui-font-14 {
|
||||
font-size: 14px;
|
||||
}
|
||||
.zui-font-16 {
|
||||
font-size: 16px;
|
||||
}
|
||||
.zui-font-18 {
|
||||
font-size: 18px;
|
||||
}
|
||||
.zui-font-30 {
|
||||
font-size: 30px;
|
||||
}
|
||||
.zui-font-bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.zui-arrow {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 50%;
|
||||
display: inline-block;
|
||||
height: 6px;
|
||||
width: 6px;
|
||||
border-width: 2px 2px 0 0;
|
||||
border-color: #c8c8c8;
|
||||
border-style: solid;
|
||||
transform: translateY(-50%) matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
|
||||
}
|
||||
|
||||
.zui-ellipsis {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.zui-ellipsis--l2 {
|
||||
max-height: 40px;
|
||||
line-height: 20px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
16
zui/index.wxss
Normal file
16
zui/index.wxss
Normal file
@ -0,0 +1,16 @@
|
||||
@import "loadmore.wxss";
|
||||
@import "color.wxss";
|
||||
@import "helper.wxss";
|
||||
@import "panel.wxss";
|
||||
@import "btn.wxss";
|
||||
@import "btns.wxss";
|
||||
@import "cell.wxss";
|
||||
@import "namecard.wxss";
|
||||
@import "badge.wxss";
|
||||
@import "dialog.wxss";
|
||||
@import "form.wxss";
|
||||
@import "tab.wxss";
|
||||
@import "label.wxss";
|
||||
@import "quantity.wxss";
|
||||
@import "steps.wxss";
|
||||
@import "toast.wxss";
|
||||
34
zui/label.wxss
Normal file
34
zui/label.wxss
Normal file
@ -0,0 +1,34 @@
|
||||
.zui-label {
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
color: #333;
|
||||
border: 1rpx solid #999;
|
||||
padding: 0px 10px;
|
||||
border-radius: 2px;
|
||||
margin-right: 10px;
|
||||
box-sizing: border-box;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
}
|
||||
.zui-label--primary {
|
||||
color: #fff;
|
||||
background: #f44;
|
||||
border: 1rpx solid #f44;
|
||||
}
|
||||
.zui-label--disabled {
|
||||
color: #cacaca;
|
||||
background: #eee;
|
||||
border: 1rpx solid #e5e5e5;
|
||||
}
|
||||
.zui-label--small {
|
||||
font-size: 11px;
|
||||
height: 16px;
|
||||
line-height: 16px;
|
||||
padding: 0px 3px;
|
||||
}
|
||||
.zui-label--plain.zui-label--primary {
|
||||
color: #f44;
|
||||
background: #fff;
|
||||
}
|
||||
24
zui/loadmore.wxml
Normal file
24
zui/loadmore.wxml
Normal file
@ -0,0 +1,24 @@
|
||||
<template name="loadmore">
|
||||
|
||||
<block wx:if="{{nomore}}">
|
||||
<view class="zui-loadmore zui-loadmore--nomore">
|
||||
<view class="zui-loadmore__tips">
|
||||
<view class="zui-loadmore__dot"></view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<block wx:elif="{{nodata}}">
|
||||
<view class="zui-loadmore zui-loadmore--nodata">
|
||||
<view class="zui-loadmore__tips">{{ nodata_str || '暂无数据' }}</view>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<block wx:elif="{{loading}}">
|
||||
<view class="zui-loadmore">
|
||||
<view class="zui-loading"></view>
|
||||
<view class="zui-loadmore__tips">加载中...</view>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
</template>
|
||||
70
zui/loadmore.wxss
Normal file
70
zui/loadmore.wxss
Normal file
@ -0,0 +1,70 @@
|
||||
.zui-loadmore {
|
||||
position: relative;
|
||||
width: 65%;
|
||||
margin: 21px auto;
|
||||
line-height: 20px;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.zui-loading {
|
||||
width:20px;
|
||||
height:20px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
animation: weuiLoading 1s steps(12, end) infinite;
|
||||
background: transparent url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iciIgd2lkdGg9JzEyMHB4JyBoZWlnaHQ9JzEyMHB4JyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj4KICAgIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiBmaWxsPSJub25lIiBjbGFzcz0iYmsiPjwvcmVjdD4KICAgIDxyZWN0IHg9JzQ2LjUnIHk9JzQwJyB3aWR0aD0nNycgaGVpZ2h0PScyMCcgcng9JzUnIHJ5PSc1JyBmaWxsPScjRTlFOUU5JwogICAgICAgICAgdHJhbnNmb3JtPSdyb3RhdGUoMCA1MCA1MCkgdHJhbnNsYXRlKDAgLTMwKSc+CiAgICA8L3JlY3Q+CiAgICA8cmVjdCB4PSc0Ni41JyB5PSc0MCcgd2lkdGg9JzcnIGhlaWdodD0nMjAnIHJ4PSc1JyByeT0nNScgZmlsbD0nIzk4OTY5NycKICAgICAgICAgIHRyYW5zZm9ybT0ncm90YXRlKDMwIDUwIDUwKSB0cmFuc2xhdGUoMCAtMzApJz4KICAgICAgICAgICAgICAgICByZXBlYXRDb3VudD0naW5kZWZpbml0ZScvPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyM5Qjk5OUEnCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSg2MCA1MCA1MCkgdHJhbnNsYXRlKDAgLTMwKSc+CiAgICAgICAgICAgICAgICAgcmVwZWF0Q291bnQ9J2luZGVmaW5pdGUnLz4KICAgIDwvcmVjdD4KICAgIDxyZWN0IHg9JzQ2LjUnIHk9JzQwJyB3aWR0aD0nNycgaGVpZ2h0PScyMCcgcng9JzUnIHJ5PSc1JyBmaWxsPScjQTNBMUEyJwogICAgICAgICAgdHJhbnNmb3JtPSdyb3RhdGUoOTAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNBQkE5QUEnCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgxMjAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNCMkIyQjInCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgxNTAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNCQUI4QjknCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgxODAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNDMkMwQzEnCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgyMTAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNDQkNCQ0InCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgyNDAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNEMkQyRDInCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgyNzAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNEQURBREEnCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgzMDAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNFMkUyRTInCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgzMzAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0Pgo8L3N2Zz4=) no-repeat;
|
||||
-webkit-background-size: 100%;
|
||||
background-size: 100%;
|
||||
}
|
||||
|
||||
.zui-loadmore .zui-loading {
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.zui-loadmore__tips {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.zui-loadmore--nodata,
|
||||
.zui-loadmore--nomore {
|
||||
border-top: 1rpx solid #e5e5e5;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.zui-loadmore--nodata {
|
||||
margin-top: 120px;
|
||||
}
|
||||
|
||||
.zui-loadmore--nodata .zui-loadmore__tips {
|
||||
position: relative;
|
||||
top: -11px;
|
||||
background: #f9f9f9;
|
||||
padding: 0 6px;
|
||||
}
|
||||
|
||||
.zui-loadmore--nomore .zui-loadmore__tips {
|
||||
position: relative;
|
||||
top: -11px;
|
||||
background: #f9f9f9;
|
||||
padding: 0 6px;
|
||||
}
|
||||
|
||||
.zui-loadmore__dot {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 11px;
|
||||
margin-left: -2px;
|
||||
margin-top: -2px;
|
||||
content: " ";
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
border-radius: 50%;
|
||||
background-color: #E5E5E5;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
37
zui/namecard.wxss
Normal file
37
zui/namecard.wxss
Normal file
@ -0,0 +1,37 @@
|
||||
.zui-namecard {
|
||||
margin-left: 0px;
|
||||
width: auto;
|
||||
padding: 5px 15px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.zui-namecard__thumb {
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
float: left;
|
||||
position: relative;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
overflow: hidden;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.zui-namecard__img {
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: auto;
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
.zui-namecard__detail {
|
||||
margin-left: 100px;
|
||||
width: auto;
|
||||
position: relative;
|
||||
}
|
||||
7
zui/panel.wxss
Normal file
7
zui/panel.wxss
Normal file
@ -0,0 +1,7 @@
|
||||
.zui-panel {
|
||||
background: #fff;
|
||||
border-top: 1rpx solid #e5e5e5;
|
||||
border-bottom: 1rpx solid #e5e5e5;
|
||||
margin-top: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
37
zui/quantity.wxss
Normal file
37
zui/quantity.wxss
Normal file
@ -0,0 +1,37 @@
|
||||
.zui-quantity {
|
||||
color: #666;
|
||||
}
|
||||
.zui-quantity view {
|
||||
display: inline-block;
|
||||
line-height: 20px;
|
||||
padding: 5px 0;
|
||||
text-align: center;
|
||||
min-width: 40px;
|
||||
box-sizing: border-box;
|
||||
vertical-align: middle;
|
||||
font-size: 12px;
|
||||
border: 1rpx solid #999;
|
||||
}
|
||||
.zui-quantity .zui-quantity__minus {
|
||||
border-right: none;
|
||||
border-radius: 2px 0 0 2px;
|
||||
}
|
||||
.zui-quantity .zui-quantity__text {
|
||||
border: 1rpx solid #999;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
height: 30px;
|
||||
width: 40px;
|
||||
font-size: 12px;
|
||||
line-height: 30px;
|
||||
}
|
||||
.zui-quantity .zui-quantity__plus {
|
||||
border-left: none;
|
||||
border-radius: 0 2px 2px 0;
|
||||
}
|
||||
.zui-quantity .zui-quantity--disabled {
|
||||
background: #f8f8f8;
|
||||
color: #bbb;
|
||||
border-color: #e8e8e8;
|
||||
}
|
||||
117
zui/steps.wxss
Normal file
117
zui/steps.wxss
Normal file
@ -0,0 +1,117 @@
|
||||
.zui-steps {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.zui-steps-4 .zui-steps__step {
|
||||
width: 33%;
|
||||
}
|
||||
|
||||
.zui-steps-3 .zui-steps__step {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.zui-steps__step {
|
||||
position: relative;
|
||||
float: left;
|
||||
padding-bottom: 20px;
|
||||
color: #b1b1b1;
|
||||
}
|
||||
|
||||
.zui-steps__title {
|
||||
display: inline-block;
|
||||
transform: translateX(-50%);
|
||||
margin-left: 2px;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.zui-steps__icon {
|
||||
position: absolute;
|
||||
top: 28px;
|
||||
left: -8px;
|
||||
padding: 0 8px;
|
||||
background-color: #fff;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.zui-steps__circle {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
background-color: #e5e5e5;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.zui-steps__line {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 30px;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background-color: #e5e5e5;
|
||||
}
|
||||
|
||||
|
||||
/* 已完成的steps */
|
||||
.zui-steps__step--done {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.zui-steps__step--done .zui-steps__line {
|
||||
background-color: #06bf04;
|
||||
}
|
||||
|
||||
.zui-steps__step--done .zui-steps__circle {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
background: transparent url("https://b.yzcdn.cn/v2/image/wap/trade/steps/icon_green@2x.png") center no-repeat;
|
||||
background-size: 5px 5px;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
/* 正在进行中的steps */
|
||||
.zui-steps__step--cur .zui-steps__icon {
|
||||
top: 24px;
|
||||
}
|
||||
|
||||
.zui-steps__step--cur .zui-steps__circle {
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
background-image: url("https://b.yzcdn.cn/v2/image/wap/success_small@2x.png");
|
||||
background-size: 13px 13px;
|
||||
}
|
||||
|
||||
.zui-steps__step--cur .zui-steps__title {
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
.zui-steps__step--cur .zui-steps__line {
|
||||
background-color: #e5e5e5;
|
||||
}
|
||||
|
||||
/* 各种不同位置的 */
|
||||
.zui-steps__step--first-child .zui-steps__title {
|
||||
margin-left: 0;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.zui-steps__step--last-child {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.zui-steps__step--last-child .zui-steps__title {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.zui-steps__step--last-child .zui-steps__icon {
|
||||
left: auto;
|
||||
right: -6px;
|
||||
}
|
||||
|
||||
.zui-steps__step--last-child .zui-steps__line {
|
||||
display: none;
|
||||
}
|
||||
45
zui/tab.wxss
Normal file
45
zui/tab.wxss
Normal file
@ -0,0 +1,45 @@
|
||||
.zui-tab {
|
||||
height: 45px;
|
||||
}
|
||||
.zui-tab__bd {
|
||||
width: 750rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
border-bottom: 1rpx solid #e5e5e5;
|
||||
background: #fff;
|
||||
}
|
||||
.zui-tab__bd--fixed {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
.zui-tab__item {
|
||||
flex: 1;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.zui-tab__title {
|
||||
font-size: 14px;
|
||||
display: inline-block;
|
||||
color: #666;
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
box-sizing: border-box;
|
||||
margin: 0 10px;
|
||||
word-break: keep-all;
|
||||
}
|
||||
|
||||
.zui-tab__item--selected .zui-tab__title {
|
||||
color: #f44;
|
||||
border-bottom: 2px solid #f44;
|
||||
}
|
||||
|
||||
.zui-tab__bd--scroll {
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.zui-tab__bd--scroll .zui-tab__text {
|
||||
margin: 0 20px;
|
||||
}
|
||||
17
zui/toast.wxss
Normal file
17
zui/toast.wxss
Normal file
@ -0,0 +1,17 @@
|
||||
.zui-toast {
|
||||
position: fixed;
|
||||
top: 35%;
|
||||
left: 20%;
|
||||
transform: translateY(-100%);
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
width: 60%;
|
||||
line-height: 1.5em;
|
||||
margin: 0 auto;
|
||||
box-sizing: border-box;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
border-radius: 4px;
|
||||
z-index: 10;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user