29 changed files with 5337 additions and 2251 deletions
@ -1,17 +1,19 @@ |
|||
<script> |
|||
export default { |
|||
onLaunch: function() { |
|||
console.log('App Launch') |
|||
}, |
|||
onShow: function() { |
|||
console.log('App Show') |
|||
}, |
|||
onHide: function() { |
|||
console.log('App Hide') |
|||
} |
|||
} |
|||
export default { |
|||
onLaunch: function() { |
|||
console.log('App Launch'); |
|||
}, |
|||
onShow: function() { |
|||
console.log('App Show'); |
|||
}, |
|||
onHide: function() { |
|||
console.log('App Hide'); |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
@import 'common/style/uni.scss'; |
|||
@import 'colorui/main.scss'; |
|||
@import 'colorui/icon.scss'; |
|||
@import 'colorui/animation.scss'; |
|||
</style> |
|||
|
|||
@ -0,0 +1,184 @@ |
|||
/* |
|||
Animation 微动画 |
|||
基于ColorUI组建库的动画模块 by 文晓港 2019年3月26日19:52:28 |
|||
*/ |
|||
|
|||
/* css 滤镜 控制黑白底色gif的 */ |
|||
.gif-black{ |
|||
mix-blend-mode: screen; |
|||
} |
|||
.gif-white{ |
|||
mix-blend-mode: multiply; |
|||
} |
|||
|
|||
|
|||
/* Animation css */ |
|||
[class*=animation-] { |
|||
animation-duration: .5s; |
|||
animation-timing-function: ease-out; |
|||
animation-fill-mode: both |
|||
} |
|||
|
|||
.animation-fade { |
|||
animation-name: fade; |
|||
animation-duration: .8s; |
|||
animation-timing-function: linear |
|||
} |
|||
|
|||
.animation-scale-up { |
|||
animation-name: scale-up |
|||
} |
|||
|
|||
.animation-scale-down { |
|||
animation-name: scale-down |
|||
} |
|||
|
|||
.animation-slide-top { |
|||
animation-name: slide-top |
|||
} |
|||
|
|||
.animation-slide-bottom { |
|||
animation-name: slide-bottom |
|||
} |
|||
|
|||
.animation-slide-left { |
|||
animation-name: slide-left |
|||
} |
|||
|
|||
.animation-slide-right { |
|||
animation-name: slide-right |
|||
} |
|||
|
|||
.animation-shake { |
|||
animation-name: shake |
|||
} |
|||
|
|||
.animation-reverse { |
|||
animation-direction: reverse |
|||
} |
|||
|
|||
@keyframes fade { |
|||
0% { |
|||
opacity: 0 |
|||
} |
|||
|
|||
100% { |
|||
opacity: 1 |
|||
} |
|||
} |
|||
|
|||
@keyframes scale-up { |
|||
0% { |
|||
opacity: 0; |
|||
transform: scale(.2) |
|||
} |
|||
|
|||
100% { |
|||
opacity: 1; |
|||
transform: scale(1) |
|||
} |
|||
} |
|||
|
|||
@keyframes scale-down { |
|||
0% { |
|||
opacity: 0; |
|||
transform: scale(1.8) |
|||
} |
|||
|
|||
100% { |
|||
opacity: 1; |
|||
transform: scale(1) |
|||
} |
|||
} |
|||
|
|||
@keyframes slide-top { |
|||
0% { |
|||
opacity: 0; |
|||
transform: translateY(-100%) |
|||
} |
|||
|
|||
100% { |
|||
opacity: 1; |
|||
transform: translateY(0) |
|||
} |
|||
} |
|||
|
|||
@keyframes slide-bottom { |
|||
0% { |
|||
opacity: 0; |
|||
transform: translateY(100%) |
|||
} |
|||
|
|||
100% { |
|||
opacity: 1; |
|||
transform: translateY(0) |
|||
} |
|||
} |
|||
|
|||
@keyframes shake { |
|||
|
|||
0%, |
|||
100% { |
|||
transform: translateX(0) |
|||
} |
|||
|
|||
10% { |
|||
transform: translateX(-9px) |
|||
} |
|||
|
|||
20% { |
|||
transform: translateX(8px) |
|||
} |
|||
|
|||
30% { |
|||
transform: translateX(-7px) |
|||
} |
|||
|
|||
40% { |
|||
transform: translateX(6px) |
|||
} |
|||
|
|||
50% { |
|||
transform: translateX(-5px) |
|||
} |
|||
|
|||
60% { |
|||
transform: translateX(4px) |
|||
} |
|||
|
|||
70% { |
|||
transform: translateX(-3px) |
|||
} |
|||
|
|||
80% { |
|||
transform: translateX(2px) |
|||
} |
|||
|
|||
90% { |
|||
transform: translateX(-1px) |
|||
} |
|||
} |
|||
|
|||
@keyframes slide-left { |
|||
0% { |
|||
opacity: 0; |
|||
transform: translateX(-100%) |
|||
} |
|||
|
|||
100% { |
|||
opacity: 1; |
|||
transform: translateX(0) |
|||
} |
|||
} |
|||
|
|||
@keyframes slide-right { |
|||
0% { |
|||
opacity: 0; |
|||
transform: translateX(100%) |
|||
} |
|||
|
|||
100% { |
|||
opacity: 1; |
|||
transform: translateX(0) |
|||
} |
|||
} |
|||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
@ -1,25 +0,0 @@ |
|||
@import './uni/base.scss'; |
|||
@import './uni/background.scss'; |
|||
@import './uni/textColor.scss'; |
|||
@import './uni/padding.scss'; |
|||
@import 'uni/margin.scss'; |
|||
@import 'uni/border.scss'; |
|||
@import 'uni/text.scss'; |
|||
@import 'uni/ellipsis.scss'; |
|||
@import 'uni/flex.scss'; |
|||
@import 'uni/float.scss'; |
|||
@import 'uni/font.scss'; |
|||
|
|||
@import 'uni/badge.scss'; |
|||
@import 'uni/card.scss'; |
|||
@import 'uni/form.scss'; |
|||
@import 'uni/collapse.scss'; |
|||
@import 'uni/comment.scss'; |
|||
@import 'uni/grid.scss'; |
|||
@import 'uni/list.scss'; |
|||
// @import 'uni/product.scss'; |
|||
// @import 'uni/step.scss'; |
|||
// @import 'uni/swiper.scss'; |
|||
// @import 'uni/tab.scss'; |
|||
// @import 'uni/timeline.scss'; |
|||
// @import 'iconfont.scss'; |
|||
@ -1,120 +0,0 @@ |
|||
/* 颜色变量 */ |
|||
/* Color 可以自定义相关配色 */ |
|||
/* 标准色 */ |
|||
$red: #e54d42; |
|||
$orange: #f37b1d; |
|||
$yellow: #fbbd08; |
|||
$olive: #8dc63f; |
|||
$green: #39b54a; |
|||
$cyan: #1cbbb4; |
|||
$blue: #0081ff; |
|||
$purple: #6739b6; |
|||
$mauve: #9c26b0; |
|||
$pink: #e03997; |
|||
$brown: #a5673f; |
|||
$grey: #8799a3; |
|||
$black: #333333; |
|||
$darkGray: #666666; |
|||
$gray: #583939; |
|||
$ghostWhite: #f1f1f1; |
|||
$white: #ffffff; |
|||
|
|||
/* 浅色 */ |
|||
$redLight: #fadbd9; |
|||
$orangeLight: #fde6d2; |
|||
$yellowLight: #fef2ce; |
|||
$oliveLight: #e8f4d9; |
|||
$greenLight: #d7f0db; |
|||
$cyanLight: #d2f1f0; |
|||
$blueLight: #cce6ff; |
|||
$purpleLight: #e1d7f0; |
|||
$mauveLight: #ebd4ef; |
|||
$pinkLight: #f9d7ea; |
|||
$brownLight: #ede1d9; |
|||
$greyLight: #e7ebed; |
|||
|
|||
/* 渐变色 */ |
|||
$gradualRed: linear-gradient(45deg, #f43f3b, #ec008c); |
|||
$gradualOrange: linear-gradient(45deg, #ff9700, #ed1c24); |
|||
$gradualGreen: linear-gradient(45deg, #39b54a, #8dc63f); |
|||
$gradualPurple: linear-gradient(45deg, #9000ff, #5e00ff); |
|||
$gradualPink: linear-gradient(45deg, #ec008c, #6739b6); |
|||
$gradualBlue: linear-gradient(45deg, #0081ff, #1cbbb4); |
|||
|
|||
/* 阴影透明色 */ |
|||
$ShadowSize: 6rpx 6rpx 8rpx; |
|||
$redShadow: rgba(204, 69, 59, 0.2); |
|||
$orangeShadow: rgba(217, 109, 26, 0.2); |
|||
$yellowShadow: rgba(224, 170, 7, 0.2); |
|||
$oliveShadow: rgba(124, 173, 55, 0.2); |
|||
$greenShadow: rgba(48, 156, 63, 0.2); |
|||
$cyanShadow: rgba(28, 187, 180, 0.2); |
|||
$blueShadow: rgba(0, 102, 204, 0.2); |
|||
$purpleShadow: rgba(88, 48, 156, 0.2); |
|||
$mauveShadow: rgba(133, 33, 150, 0.2); |
|||
$pinkShadow: rgba(199, 50, 134, 0.2); |
|||
$brownShadow: rgba(140, 88, 53, 0.2); |
|||
$greyShadow: rgba(114, 130, 138, 0.2); |
|||
$grayShadow: rgba(114, 130, 138, 0.2); |
|||
$blackShadow: rgba(26, 26, 26, 0.2); |
|||
|
|||
/* 行为相关颜色 */ |
|||
$uni-color-primary: #007aff; |
|||
$uni-color-success: #4cd964; |
|||
$uni-color-warning: #f0ad4e; |
|||
$uni-color-error: #dd524d; |
|||
|
|||
/* 文字基本颜色 */ |
|||
$uni-text-color: #333; //基本色 |
|||
$uni-text-color-inverse: #fff; //反色 |
|||
$uni-text-color-grey: #999; //辅助灰色，如加载更多的提示信息 |
|||
$uni-text-color-placeholder: #808080; |
|||
$uni-text-color-disable: #c0c0c0; |
|||
|
|||
/* 背景颜色 */ |
|||
$uni-bg-color: #ffffff; |
|||
$uni-bg-color-grey: #f8f8f8; |
|||
$uni-bg-color-hover: #f1f1f1; //点击状态颜色 |
|||
$uni-bg-color-mask: rgba(0, 0, 0, 0.4); //遮罩颜色 |
|||
|
|||
/* 边框颜色 */ |
|||
$uni-border-color: #c8c7cc; |
|||
|
|||
/* 尺寸变量 */ |
|||
|
|||
/* 文字尺寸 */ |
|||
$uni-font-size-sm: 24rpx; |
|||
$uni-font-size-base: 28rpx; |
|||
$uni-font-size-lg: 32rpx; |
|||
|
|||
/* 图片尺寸 */ |
|||
$uni-img-size-sm: 40rpx; |
|||
$uni-img-size-base: 52rpx; |
|||
$uni-img-size-lg: 80rpx; |
|||
|
|||
/* Border Radius */ |
|||
$uni-border-radius-sm: 4rpx; |
|||
$uni-border-radius-base: 6rpx; |
|||
$uni-border-radius-lg: 12rpx; |
|||
$uni-border-radius-circle: 50%; |
|||
|
|||
/* 水平间距 */ |
|||
$uni-spacing-row-sm: 10px; |
|||
$uni-spacing-row-base: 20rpx; |
|||
$uni-spacing-row-lg: 30rpx; |
|||
|
|||
/* 垂直间距 */ |
|||
$uni-spacing-col-sm: 8rpx; |
|||
$uni-spacing-col-base: 16rpx; |
|||
$uni-spacing-col-lg: 24rpx; |
|||
|
|||
/* 透明度 */ |
|||
$uni-opacity-disabled: 0.3; // 组件禁用态的透明度 |
|||
|
|||
/* 文章场景相关 */ |
|||
$uni-color-title: #2c405a; // 文章标题颜色 |
|||
$uni-font-size-title: 40rpx; |
|||
$uni-color-subtitle: #555555; // 二级标题颜色 |
|||
$uni-font-size-subtitle: 36rpx; |
|||
$uni-color-paragraph: #3f536e; // 文章段落颜色 |
|||
$uni-font-size-paragraph: 30rpx; |
|||
@ -1,106 +0,0 @@ |
|||
.uni-bg-white { |
|||
background-color: $white !important; |
|||
} |
|||
|
|||
.uni-bg-default { |
|||
background-color: $ghostWhite !important; |
|||
} |
|||
|
|||
.uni-bg-primary { |
|||
background-color: $blue !important; |
|||
color: $white; |
|||
} |
|||
|
|||
.uni-bg-success { |
|||
background-color: $green !important; |
|||
color: $white; |
|||
} |
|||
|
|||
.uni-bg-info { |
|||
background-color: tint($blue, 10%) !important; |
|||
} |
|||
|
|||
.uni-bg-warning { |
|||
background-color: $orange !important; |
|||
} |
|||
|
|||
.uni-bg-danger { |
|||
background-color: $red !important; |
|||
color: $white; |
|||
} |
|||
|
|||
.uni-bg-pink { |
|||
background-color: $pink !important; |
|||
color: $white; |
|||
} |
|||
|
|||
.uni-bg-purple { |
|||
background-color: $purple !important; |
|||
color: $white; |
|||
} |
|||
|
|||
.uni-bg-indigo { |
|||
background-color: #3f51b5 !important; |
|||
color: $white; |
|||
} |
|||
|
|||
/*警告、成功颜色*/ |
|||
.uni-warning, |
|||
.uni-warning label, |
|||
.uni-warning .uni-input, |
|||
.uni-warning .uni-iconfont { |
|||
color: #e51c23 !important; |
|||
} |
|||
|
|||
.uni-success, |
|||
.uni-success label, |
|||
.uni-success .uni-input, |
|||
.uni-success .uni-iconfont { |
|||
color: #009688 !important; |
|||
} |
|||
|
|||
.uni-bg-grey { |
|||
background: $grey; |
|||
color: $black; |
|||
} |
|||
|
|||
.uni-bg-grey.light-1 { |
|||
background: $greyLight; |
|||
color: $black; |
|||
} |
|||
|
|||
// 渐变红色 |
|||
.uni-gradient-red { |
|||
background: $gradualRed; |
|||
color: $white; |
|||
} |
|||
|
|||
// 渐变橙色 |
|||
.uni-gradient-orange { |
|||
background: $gradualOrange; |
|||
color: $white; |
|||
} |
|||
|
|||
// 渐变绿色 |
|||
.uni-gradient-green { |
|||
background: $gradualGreen; |
|||
color: $white; |
|||
} |
|||
|
|||
// 渐变紫色 |
|||
.uni-gradient-purple { |
|||
background: $gradualPurple; |
|||
color: $white; |
|||
} |
|||
|
|||
// 渐变粉色 |
|||
.uni-gradient-pink { |
|||
background: $gradualPink; |
|||
color: $white; |
|||
} |
|||
|
|||
// 渐变蓝色 |
|||
.uni-gradient-blue { |
|||
background: $gradualBlue; |
|||
color: $white; |
|||
} |
|||
@ -1,77 +0,0 @@ |
|||
/*数字角标*/ |
|||
.uni-badge, |
|||
.uni-badge-default { |
|||
font-family: 'Helvetica Neue', Helvetica, sans-serif; |
|||
font-size: 12px; |
|||
line-height: 1; |
|||
display: inline-block; |
|||
padding: 3px 6px; |
|||
color: $black; |
|||
border-radius: 100px; |
|||
background-color: $greyLight; |
|||
} |
|||
|
|||
.uni-badge.uni-badge-inverted { |
|||
padding: 0 5px 0 0; |
|||
color: $grey; |
|||
background-color: transparent; |
|||
} |
|||
|
|||
.uni-badge-primary { |
|||
color: $white; |
|||
background-color: $blue; |
|||
} |
|||
|
|||
.uni-badge-blue.uni-badge-inverted, |
|||
.uni-badge-primary.uni-badge-inverted { |
|||
color: $blue; |
|||
background-color: transparent; |
|||
} |
|||
|
|||
.uni-badge-green, |
|||
.uni-badge-success { |
|||
color: $white; |
|||
background-color: $green; |
|||
} |
|||
|
|||
.uni-badge-green.uni-badge-inverted, |
|||
.uni-badge-success.uni-badge-inverted { |
|||
color: $green; |
|||
background-color: transparent; |
|||
} |
|||
|
|||
.uni-badge-warning, |
|||
.uni-badge-yellow { |
|||
color: $white; |
|||
background-color: $yellow; |
|||
} |
|||
|
|||
.uni-badge-warning.uni-badge-inverted, |
|||
.uni-badge-yellow.uni-badge-inverted { |
|||
color: $yellow; |
|||
background-color: transparent; |
|||
} |
|||
|
|||
.uni-badge-danger, |
|||
.uni-badge-red { |
|||
color: $white; |
|||
background-color: $red; |
|||
} |
|||
|
|||
.uni-badge-danger.uni-badge-inverted, |
|||
.uni-badge-red.uni-badge-inverted { |
|||
color: $red; |
|||
background-color: transparent; |
|||
} |
|||
|
|||
.uni-badge-purple, |
|||
.uni-badge-royal { |
|||
color: $white; |
|||
background-color: $purple; |
|||
} |
|||
|
|||
.uni-badge-purple.uni-badge-inverted, |
|||
.uni-badge-royal.uni-badge-inverted { |
|||
color: $purple; |
|||
background-color: transparent; |
|||
} |
|||
@ -1,87 +0,0 @@ |
|||
/*通用 */ |
|||
progress, |
|||
checkbox-group { |
|||
width: 100%; |
|||
} |
|||
|
|||
form { |
|||
width: 100%; |
|||
} |
|||
|
|||
.uni-container { |
|||
padding: 20upx; |
|||
} |
|||
|
|||
.uni-hide { |
|||
display: none !important; |
|||
} |
|||
|
|||
.uni-show { |
|||
display: block !important; |
|||
} |
|||
|
|||
.uni-invisible { |
|||
visibility: hidden; |
|||
} |
|||
|
|||
.uni-mask { |
|||
position: fixed; |
|||
width: 100%; |
|||
height: 100%; |
|||
top: 0; |
|||
left: 0; |
|||
background: rgba(0, 0, 0, 0.3); |
|||
opacity: 0; |
|||
z-index: 8; |
|||
visibility: hidden; |
|||
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s; |
|||
transition: opacity 0.3s, transform 0.3s; |
|||
} |
|||
|
|||
.uni-mask.uni-mask-in { |
|||
visibility: visible; |
|||
opacity: 1; |
|||
} |
|||
|
|||
.uni-mask.uni-mask-out { |
|||
opacity: 0; |
|||
} |
|||
|
|||
/* loadmore */ |
|||
.uni-loadmore { |
|||
height: 80upx; |
|||
line-height: 80upx; |
|||
text-align: center; |
|||
padding-bottom: 30upx; |
|||
} |
|||
|
|||
.uni-active { |
|||
opacity: 0.5 !important; |
|||
} |
|||
|
|||
/* page */ |
|||
.uni-page-head { |
|||
padding: 35upx; |
|||
text-align: center; |
|||
} |
|||
|
|||
.uni-page-head-title { |
|||
display: inline-block; |
|||
padding: 0 40upx; |
|||
font-size: 30upx; |
|||
height: 88upx; |
|||
line-height: 88upx; |
|||
color: #bebebe; |
|||
box-sizing: border-box; |
|||
border-bottom: 2upx solid #d8d8d8; |
|||
} |
|||
|
|||
.uni-page-body { |
|||
width: 100%; |
|||
flex-grow: 1; |
|||
overflow-x: hidden; |
|||
} |
|||
|
|||
.uni-img-round { |
|||
border-radius: 50%; |
|||
} |
|||
@ -1,142 +0,0 @@ |
|||
/*水平线*/ |
|||
.uni-hr { |
|||
width: 100%; |
|||
position: relative; |
|||
height: 1px; |
|||
} |
|||
|
|||
@media screen and (-webkit-min-device-pixel-ratio: 1.5) { |
|||
.uni-hr { |
|||
transform: scaleY(0.5); |
|||
} |
|||
} |
|||
|
|||
/*边框样式*/ |
|||
.uni-border-l { |
|||
border-left: 1upx solid #dddddd; |
|||
} |
|||
|
|||
.uni-border-r { |
|||
border-right: 1upx solid #dddddd; |
|||
} |
|||
|
|||
.uni-border-t { |
|||
border-top: 1upx solid #dddddd; |
|||
} |
|||
|
|||
.uni-border-b { |
|||
border-bottom: 1upx solid #dddddd; |
|||
} |
|||
|
|||
.uni-border { |
|||
border: 1upx solid #dddddd; |
|||
} |
|||
|
|||
@media screen and (-webkit-min-device-pixel-ratio: 1.5) { |
|||
.uni-border-l { |
|||
border: none; |
|||
background-image: -webkit-linear-gradient(0deg, #dddddd, #dddddd 50%, transparent 50%); |
|||
background-image: linear-gradient(270deg, #dddddd, #dddddd 50%, transparent 50%); |
|||
background-size: 1upx 100%; |
|||
background-repeat: no-repeat; |
|||
background-position: left; |
|||
} |
|||
|
|||
.uni-border-r { |
|||
border: none; |
|||
background-image: -webkit-linear-gradient(0deg, #dddddd, #dddddd 50%, transparent 50%); |
|||
background-image: linear-gradient(270deg, #dddddd, #dddddd 50%, transparent 50%); |
|||
background-size: 1upx 100%; |
|||
background-repeat: no-repeat; |
|||
background-position: right; |
|||
} |
|||
|
|||
.uni-border-t { |
|||
border: none; |
|||
background-size: 100% 1upx; |
|||
background-repeat: no-repeat; |
|||
background-position: top; |
|||
background-image: linear-gradient(0, #dddddd, #dddddd 50%, transparent 50%); |
|||
background-image: -webkit-linear-gradient(90deg, #dddddd, #dddddd 50%, transparent 50%); |
|||
} |
|||
|
|||
.uni-border-b { |
|||
border: none; |
|||
background-size: 100% 1upx; |
|||
background-repeat: no-repeat; |
|||
background-position: bottom; |
|||
background-image: linear-gradient(0, #dddddd, #dddddd 50%, transparent 50%); |
|||
background-image: -webkit-linear-gradient(90deg, #dddddd, #dddddd 50%, transparent 50%); |
|||
} |
|||
|
|||
.uni-border { |
|||
border: none; |
|||
background-image: -webkit-linear-gradient(270deg, #dddddd, #dddddd 50%, transparent 50%), |
|||
-webkit-linear-gradient(180deg, #dddddd, #dddddd 50%, transparent 50%), |
|||
-webkit-linear-gradient(90deg, #dddddd, #dddddd 50%, transparent 50%), |
|||
-webkit-linear-gradient(0, #dddddd, #dddddd 50%, transparent 50%); |
|||
background-image: linear-gradient(180deg, #dddddd, #dddddd 50%, transparent 50%), |
|||
linear-gradient(270deg, #dddddd, #dddddd 50%, transparent 50%), |
|||
linear-gradient(0deg, #dddddd, #dddddd 50%, transparent 50%), |
|||
linear-gradient(90deg, #dddddd, #dddddd 50%, transparent 50%); |
|||
background-size: 100% 1upx, 1upx 100%, 100% 1upx, 1upx 100%; |
|||
background-repeat: no-repeat; |
|||
background-position: top, right top, bottom, left top; |
|||
} |
|||
} |
|||
|
|||
.border, |
|||
.border--bottom, |
|||
.border--left, |
|||
.border--right, |
|||
.border--surround, |
|||
.border--top, |
|||
.border--top-bottom { |
|||
position: relative; |
|||
} |
|||
|
|||
.border--bottom::after, |
|||
.border--left::after, |
|||
.border--right::after, |
|||
.border--surround::after, |
|||
.border--top-bottom::after, |
|||
.border--top::after, |
|||
.border::after { |
|||
content: ' '; |
|||
position: absolute; |
|||
pointer-events: none; |
|||
box-sizing: border-box; |
|||
-webkit-transform-origin: center; |
|||
transform-origin: center; |
|||
top: -50%; |
|||
left: -50%; |
|||
right: -50%; |
|||
bottom: -50%; |
|||
-webkit-transform: scale(0.5); |
|||
transform: scale(0.5); |
|||
border: 0 solid #eee; |
|||
} |
|||
|
|||
.border--top::after { |
|||
border-top-width: 1px; |
|||
} |
|||
|
|||
.border--left::after { |
|||
border-left-width: 1px; |
|||
} |
|||
|
|||
.border--right::after { |
|||
border-right-width: 1px; |
|||
} |
|||
|
|||
.border--bottom::after { |
|||
border-bottom-width: 1px; |
|||
} |
|||
|
|||
.border--top-bottom::after { |
|||
border-width: 1px 0; |
|||
} |
|||
|
|||
.border--surround::after { |
|||
border-width: 1px; |
|||
} |
|||
@ -1,91 +0,0 @@ |
|||
/*卡片视图 */ |
|||
.uni-card { |
|||
background: $white; |
|||
border-radius: 8upx; |
|||
margin: 20upx 0; |
|||
position: relative; |
|||
/* box-shadow: 0 2upx 4upx rgba(0, 0, 0, .3); */ |
|||
} |
|||
|
|||
.uni-card-content { |
|||
font-size: 30upx; |
|||
} |
|||
|
|||
.uni-card-content.image-view { |
|||
width: 100%; |
|||
margin: 0; |
|||
} |
|||
|
|||
.uni-card-content-inner { |
|||
position: relative; |
|||
padding: 30upx; |
|||
} |
|||
|
|||
.uni-card-footer, |
|||
.uni-card-header { |
|||
position: relative; |
|||
display: flex; |
|||
min-height: 50upx; |
|||
padding: 20upx 30upx; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
} |
|||
|
|||
.uni-card-header { |
|||
font-size: 36upx; |
|||
} |
|||
|
|||
.uni-card-footer { |
|||
color: $darkGray; |
|||
} |
|||
|
|||
.uni-card-footer:before, |
|||
.uni-card-header:after { |
|||
position: absolute; |
|||
top: 0; |
|||
right: 0; |
|||
left: 0; |
|||
height: 2upx; |
|||
content: ''; |
|||
-webkit-transform: scaleY(0.5); |
|||
transform: scaleY(0.5); |
|||
background-color: $greyLight; |
|||
} |
|||
|
|||
.uni-card-header:after { |
|||
top: auto; |
|||
bottom: 0; |
|||
} |
|||
|
|||
.uni-card-media { |
|||
justify-content: flex-start; |
|||
} |
|||
|
|||
.uni-card-media-logo { |
|||
height: 84upx; |
|||
width: 84upx; |
|||
margin-right: 20upx; |
|||
} |
|||
|
|||
.uni-card-media-body { |
|||
height: 84upx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: space-between; |
|||
align-items: flex-start; |
|||
} |
|||
|
|||
.uni-card-media-text-top { |
|||
line-height: 36upx; |
|||
font-size: 34upx; |
|||
} |
|||
|
|||
.uni-card-media-text-bottom { |
|||
line-height: 30upx; |
|||
font-size: 28upx; |
|||
color: $grey; |
|||
} |
|||
|
|||
.uni-card-link { |
|||
color: $blue; |
|||
} |
|||
@ -1,10 +0,0 @@ |
|||
/*折叠面板 */ |
|||
.uni-collapse-content { |
|||
height: 0; |
|||
width: 100%; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.uni-collapse-content.uni-active { |
|||
height: auto; |
|||
} |
|||
@ -1,73 +0,0 @@ |
|||
/* comment */ |
|||
.uni-comment { |
|||
padding: 5rpx 0; |
|||
display: flex; |
|||
flex-grow: 1; |
|||
flex-direction: column; |
|||
} |
|||
|
|||
.uni-comment-list { |
|||
flex-wrap: nowrap; |
|||
padding: 10rpx 0; |
|||
margin: 10rpx 0; |
|||
width: 100%; |
|||
display: flex; |
|||
} |
|||
|
|||
.uni-comment-face { |
|||
width: 70upx; |
|||
height: 70upx; |
|||
border-radius: 100%; |
|||
margin-right: 20upx; |
|||
flex-shrink: 0; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.uni-comment-face image { |
|||
width: 100%; |
|||
border-radius: 100%; |
|||
} |
|||
|
|||
.uni-comment-body { |
|||
width: 100%; |
|||
} |
|||
|
|||
.uni-comment-top { |
|||
line-height: 1.5em; |
|||
justify-content: space-between; |
|||
} |
|||
|
|||
.uni-comment-top text { |
|||
color: $blue; |
|||
font-size: 24upx; |
|||
} |
|||
|
|||
.uni-comment-date { |
|||
line-height: 38upx; |
|||
flex-direction: row; |
|||
justify-content: space-between; |
|||
display: flex !important; |
|||
flex-grow: 1; |
|||
} |
|||
|
|||
.uni-comment-date view { |
|||
color: $darkGray; |
|||
font-size: 24upx; |
|||
line-height: 38upx; |
|||
} |
|||
|
|||
.uni-comment-content { |
|||
line-height: 1.6em; |
|||
font-size: 28upx; |
|||
padding: 8rpx 0; |
|||
} |
|||
|
|||
.uni-comment-replay-btn { |
|||
background: $white; |
|||
font-size: 24upx; |
|||
line-height: 28upx; |
|||
padding: 5rpx 20upx; |
|||
border-radius: 30upx; |
|||
color: $black !important; |
|||
margin: 0 10upx; |
|||
} |
|||
@ -1,50 +0,0 @@ |
|||
/*自动隐藏文字*/ |
|||
.uni-ellipsis-1 { |
|||
overflow: hidden; |
|||
white-space: nowrap; |
|||
text-overflow: ellipsis; |
|||
} |
|||
|
|||
.uni-ellipsis { |
|||
display: -webkit-box; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
word-wrap: break-word; |
|||
word-break: break-all; |
|||
white-space: normal !important; |
|||
-webkit-line-clamp: 1; |
|||
-webkit-box-orient: vertical; |
|||
} |
|||
|
|||
.uni-ellipsis-2 { |
|||
display: -webkit-box; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
word-wrap: break-word; |
|||
word-break: break-all; |
|||
white-space: normal !important; |
|||
-webkit-line-clamp: 2; |
|||
-webkit-box-orient: vertical; |
|||
} |
|||
|
|||
.uni-ellipsis-3 { |
|||
display: -webkit-box; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
word-wrap: break-word; |
|||
word-break: break-all; |
|||
white-space: normal !important; |
|||
-webkit-line-clamp: 3; |
|||
-webkit-box-orient: vertical; |
|||
} |
|||
|
|||
.uni-ellipsis-4 { |
|||
display: -webkit-box; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
word-wrap: break-word; |
|||
word-break: break-all; |
|||
white-space: normal !important; |
|||
-webkit-line-clamp: 4; |
|||
-webkit-box-orient: vertical; |
|||
} |
|||
@ -1,49 +0,0 @@ |
|||
.uni-flex { |
|||
display: flex; |
|||
flex-direction: row; |
|||
} |
|||
|
|||
.uni-flex-item { |
|||
flex: 1; |
|||
} |
|||
|
|||
.uni-row { |
|||
flex-direction: row; |
|||
} |
|||
|
|||
.uni-column { |
|||
display: flex; |
|||
flex-direction: column; |
|||
} |
|||
|
|||
.uni-flex-center { |
|||
align-items: center; |
|||
} |
|||
|
|||
.uni-flex-middle { |
|||
justify-content: center; |
|||
} |
|||
|
|||
.uni-link { |
|||
color: #576b95; |
|||
font-size: 26upx; |
|||
} |
|||
|
|||
.uni-center { |
|||
text-align: center; |
|||
} |
|||
|
|||
.uni-inline-item { |
|||
display: flex; |
|||
flex-direction: row; |
|||
align-items: center; |
|||
} |
|||
|
|||
.uni-inline-item text { |
|||
margin-right: 20upx; |
|||
} |
|||
|
|||
.uni-inline-item text:last-child { |
|||
margin-right: 0upx; |
|||
margin-left: 20upx; |
|||
} |
|||
@ -1,24 +0,0 @@ |
|||
.uni-left { |
|||
float: left; |
|||
} |
|||
|
|||
.uni-right { |
|||
float: right; |
|||
} |
|||
|
|||
.uni-clearfix { |
|||
clear: both; |
|||
} |
|||
|
|||
.uni-clearfix:before { |
|||
display: table; |
|||
content: ' '; |
|||
} |
|||
|
|||
.uni-clearfix:after { |
|||
content: ''; |
|||
display: block; |
|||
clear: both; |
|||
height: 0; |
|||
visibility: 0; |
|||
} |
|||
@ -1,379 +0,0 @@ |
|||
@font-face { |
|||
font-family: uniicons; |
|||
font-weight: normal; |
|||
font-style: normal; |
|||
src: url('https://img-cdn-qiniu.dcloud.net.cn/fonts/uni.ttf') format('truetype'); |
|||
} |
|||
|
|||
/* uni-icon */ |
|||
|
|||
.uni-icon { |
|||
font-family: uniicons; |
|||
font-size: 24px; |
|||
font-weight: normal; |
|||
font-style: normal; |
|||
line-height: 1; |
|||
display: inline-block; |
|||
text-decoration: none; |
|||
-webkit-font-smoothing: antialiased; |
|||
} |
|||
|
|||
.uni-icon.uni-active { |
|||
color: $blue; |
|||
} |
|||
|
|||
.uni-icon-contact:before { |
|||
content: '\e100'; |
|||
} |
|||
|
|||
.uni-icon-person:before { |
|||
content: '\e101'; |
|||
} |
|||
|
|||
.uni-icon-personadd:before { |
|||
content: '\e102'; |
|||
} |
|||
|
|||
.uni-icon-contact-filled:before { |
|||
content: '\e130'; |
|||
} |
|||
|
|||
.uni-icon-person-filled:before { |
|||
content: '\e131'; |
|||
} |
|||
|
|||
.uni-icon-personadd-filled:before { |
|||
content: '\e132'; |
|||
} |
|||
|
|||
.uni-icon-phone:before { |
|||
content: '\e200'; |
|||
} |
|||
|
|||
.uni-icon-email:before { |
|||
content: '\e201'; |
|||
} |
|||
|
|||
.uni-icon-chatbubble:before { |
|||
content: '\e202'; |
|||
} |
|||
|
|||
.uni-icon-chatboxes:before { |
|||
content: '\e203'; |
|||
} |
|||
|
|||
.uni-icon-phone-filled:before { |
|||
content: '\e230'; |
|||
} |
|||
|
|||
.uni-icon-email-filled:before { |
|||
content: '\e231'; |
|||
} |
|||
|
|||
.uni-icon-chatbubble-filled:before { |
|||
content: '\e232'; |
|||
} |
|||
|
|||
.uni-icon-chatboxes-filled:before { |
|||
content: '\e233'; |
|||
} |
|||
|
|||
.uni-icon-weibo:before { |
|||
content: '\e260'; |
|||
} |
|||
|
|||
.uni-icon-weixin:before { |
|||
content: '\e261'; |
|||
} |
|||
|
|||
.uni-icon-pengyouquan:before { |
|||
content: '\e262'; |
|||
} |
|||
|
|||
.uni-icon-chat:before { |
|||
content: '\e263'; |
|||
} |
|||
|
|||
.uni-icon-qq:before { |
|||
content: '\e264'; |
|||
} |
|||
|
|||
.uni-icon-videocam:before { |
|||
content: '\e300'; |
|||
} |
|||
|
|||
.uni-icon-camera:before { |
|||
content: '\e301'; |
|||
} |
|||
|
|||
.uni-icon-mic:before { |
|||
content: '\e302'; |
|||
} |
|||
|
|||
.uni-icon-location:before { |
|||
content: '\e303'; |
|||
} |
|||
|
|||
.uni-icon-mic-filled:before, |
|||
.uni-icon-speech:before { |
|||
content: '\e332'; |
|||
} |
|||
|
|||
.uni-icon-location-filled:before { |
|||
content: '\e333'; |
|||
} |
|||
|
|||
.uni-icon-micoff:before { |
|||
content: '\e360'; |
|||
} |
|||
|
|||
.uni-icon-image:before { |
|||
content: '\e363'; |
|||
} |
|||
|
|||
.uni-icon-map:before { |
|||
content: '\e364'; |
|||
} |
|||
|
|||
.uni-icon-compose:before { |
|||
content: '\e400'; |
|||
} |
|||
|
|||
.uni-icon-trash:before { |
|||
content: '\e401'; |
|||
} |
|||
|
|||
.uni-icon-upload:before { |
|||
content: '\e402'; |
|||
} |
|||
|
|||
.uni-icon-download:before { |
|||
content: '\e403'; |
|||
} |
|||
|
|||
.uni-icon-close:before { |
|||
content: '\e404'; |
|||
} |
|||
|
|||
.uni-icon-redo:before { |
|||
content: '\e405'; |
|||
} |
|||
|
|||
.uni-icon-undo:before { |
|||
content: '\e406'; |
|||
} |
|||
|
|||
.uni-icon-refresh:before { |
|||
content: '\e407'; |
|||
} |
|||
|
|||
.uni-icon-star:before { |
|||
content: '\e408'; |
|||
} |
|||
|
|||
.uni-icon-plus:before { |
|||
content: '\e409'; |
|||
} |
|||
|
|||
.uni-icon-minus:before { |
|||
content: '\e410'; |
|||
} |
|||
|
|||
.uni-icon-circle:before, |
|||
.uni-icon-checkbox:before { |
|||
content: '\e411'; |
|||
} |
|||
|
|||
.uni-icon-close-filled:before, |
|||
.uni-icon-clear:before { |
|||
content: '\e434'; |
|||
} |
|||
|
|||
.uni-icon-refresh-filled:before { |
|||
content: '\e437'; |
|||
} |
|||
|
|||
.uni-icon-star-filled:before { |
|||
content: '\e438'; |
|||
} |
|||
|
|||
.uni-icon-plus-filled:before { |
|||
content: '\e439'; |
|||
} |
|||
|
|||
.uni-icon-minus-filled:before { |
|||
content: '\e440'; |
|||
} |
|||
|
|||
.uni-icon-circle-filled:before { |
|||
content: '\e441'; |
|||
} |
|||
|
|||
.uni-icon-checkbox-filled:before { |
|||
content: '\e442'; |
|||
} |
|||
|
|||
.uni-icon-closeempty:before { |
|||
content: '\e460'; |
|||
} |
|||
|
|||
.uni-icon-refreshempty:before { |
|||
content: '\e461'; |
|||
} |
|||
|
|||
.uni-icon-reload:before { |
|||
content: '\e462'; |
|||
} |
|||
|
|||
.uni-icon-starhalf:before { |
|||
content: '\e463'; |
|||
} |
|||
|
|||
.uni-icon-spinner:before { |
|||
content: '\e464'; |
|||
} |
|||
|
|||
.uni-icon-spinner-cycle:before { |
|||
content: '\e465'; |
|||
} |
|||
|
|||
.uni-icon-search:before { |
|||
content: '\e466'; |
|||
} |
|||
|
|||
.uni-icon-plusempty:before { |
|||
content: '\e468'; |
|||
} |
|||
|
|||
.uni-icon-forward:before { |
|||
content: '\e470'; |
|||
} |
|||
|
|||
.uni-icon-back:before, |
|||
.uni-icon-left-nav:before { |
|||
content: '\e471'; |
|||
} |
|||
|
|||
.uni-icon-checkmarkempty:before { |
|||
content: '\e472'; |
|||
} |
|||
|
|||
.uni-icon-home:before { |
|||
content: '\e500'; |
|||
} |
|||
|
|||
.uni-icon-navigate:before { |
|||
content: '\e501'; |
|||
} |
|||
|
|||
.uni-icon-gear:before { |
|||
content: '\e502'; |
|||
} |
|||
|
|||
.uni-icon-paperplane:before { |
|||
content: '\e503'; |
|||
} |
|||
|
|||
.uni-icon-info:before { |
|||
content: '\e504'; |
|||
} |
|||
|
|||
.uni-icon-help:before { |
|||
content: '\e505'; |
|||
} |
|||
|
|||
.uni-icon-locked:before { |
|||
content: '\e506'; |
|||
} |
|||
|
|||
.uni-icon-more:before { |
|||
content: '\e507'; |
|||
} |
|||
|
|||
.uni-icon-flag:before { |
|||
content: '\e508'; |
|||
} |
|||
|
|||
.uni-icon-home-filled:before { |
|||
content: '\e530'; |
|||
} |
|||
|
|||
.uni-icon-gear-filled:before { |
|||
content: '\e532'; |
|||
} |
|||
|
|||
.uni-icon-info-filled:before { |
|||
content: '\e534'; |
|||
} |
|||
|
|||
.uni-icon-help-filled:before { |
|||
content: '\e535'; |
|||
} |
|||
|
|||
.uni-icon-more-filled:before { |
|||
content: '\e537'; |
|||
} |
|||
|
|||
.uni-icon-settings:before { |
|||
content: '\e560'; |
|||
} |
|||
|
|||
.uni-icon-list:before { |
|||
content: '\e562'; |
|||
} |
|||
|
|||
.uni-icon-bars:before { |
|||
content: '\e563'; |
|||
} |
|||
|
|||
.uni-icon-loop:before { |
|||
content: '\e565'; |
|||
} |
|||
|
|||
.uni-icon-paperclip:before { |
|||
content: '\e567'; |
|||
} |
|||
|
|||
.uni-icon-eye:before { |
|||
content: '\e568'; |
|||
} |
|||
|
|||
.uni-icon-arrowup:before { |
|||
content: '\e580'; |
|||
} |
|||
|
|||
.uni-icon-arrowdown:before { |
|||
content: '\e581'; |
|||
} |
|||
|
|||
.uni-icon-arrowleft:before { |
|||
content: '\e582'; |
|||
} |
|||
|
|||
.uni-icon-arrowright:before { |
|||
content: '\e583'; |
|||
} |
|||
|
|||
.uni-icon-arrowthinup:before { |
|||
content: '\e584'; |
|||
} |
|||
|
|||
.uni-icon-arrowthindown:before { |
|||
content: '\e585'; |
|||
} |
|||
|
|||
.uni-icon-arrowthinleft:before { |
|||
content: '\e586'; |
|||
} |
|||
|
|||
.uni-icon-arrowthinright:before { |
|||
content: '\e587'; |
|||
} |
|||
|
|||
.uni-icon-pulldown:before { |
|||
content: '\e588'; |
|||
} |
|||
|
|||
.uni-icon-scan:before { |
|||
content: '\e612'; |
|||
} |
|||
@ -1,118 +0,0 @@ |
|||
/* 表单 */ |
|||
.uni-form-item { |
|||
display: flex; |
|||
width: 100%; |
|||
padding: 10upx 0; |
|||
} |
|||
|
|||
.uni-form-item .title { |
|||
padding: 10upx 25upx; |
|||
} |
|||
|
|||
.uni-label { |
|||
width: 210upx; |
|||
word-wrap: break-word; |
|||
word-break: break-all; |
|||
text-indent: 20upx; |
|||
} |
|||
|
|||
.uni-input { |
|||
height: 50upx; |
|||
padding: 15upx 25upx; |
|||
line-height: 50upx; |
|||
font-size: 28upx; |
|||
background: $white; |
|||
flex: 1; |
|||
} |
|||
|
|||
radio-group, |
|||
checkbox-group { |
|||
width: 100%; |
|||
} |
|||
|
|||
radio-group label, |
|||
checkbox-group label { |
|||
padding-right: 20upx; |
|||
} |
|||
|
|||
.uni-form-item .with-fun { |
|||
display: flex; |
|||
flex-wrap: nowrap; |
|||
background: $white; |
|||
} |
|||
|
|||
.uni-form-item .with-fun .uni-icon { |
|||
width: 40px; |
|||
height: 80upx; |
|||
line-height: 80upx; |
|||
flex-shrink: 0; |
|||
} |
|||
|
|||
/* input group */ |
|||
.uni-input-group { |
|||
position: relative; |
|||
padding: 0; |
|||
border: 0; |
|||
background-color: $white; |
|||
} |
|||
|
|||
.uni-input-group:before { |
|||
position: absolute; |
|||
top: 0; |
|||
right: 0; |
|||
left: 0; |
|||
height: 2upx; |
|||
content: ''; |
|||
transform: scaleY(0.5); |
|||
background-color: $greyLight; |
|||
} |
|||
|
|||
.uni-input-group:after { |
|||
position: absolute; |
|||
right: 0; |
|||
bottom: 0; |
|||
left: 0; |
|||
height: 2upx; |
|||
content: ''; |
|||
transform: scaleY(0.5); |
|||
background-color: $greyLight; |
|||
} |
|||
|
|||
.uni-input-row { |
|||
position: relative; |
|||
display: flex; |
|||
flex-direction: row; |
|||
font-size: 28upx; |
|||
padding: 22upx 30upx; |
|||
justify-content: space-between; |
|||
} |
|||
|
|||
.uni-input-group .uni-input-row:after { |
|||
position: absolute; |
|||
right: 0; |
|||
bottom: 0; |
|||
left: 30upx; |
|||
height: 2upx; |
|||
content: ''; |
|||
transform: scaleY(0.5); |
|||
background-color: $greyLight; |
|||
} |
|||
|
|||
.uni-input-row label { |
|||
line-height: 70upx; |
|||
} |
|||
|
|||
/* textarea */ |
|||
.uni-textarea { |
|||
box-sizing: border-box; |
|||
width: 100%; |
|||
background: $white; |
|||
} |
|||
|
|||
.uni-textarea textarea { |
|||
width: 96%; |
|||
padding: 18upx 2%; |
|||
line-height: 1.6; |
|||
font-size: 28upx; |
|||
height: 150upx; |
|||
} |
|||
@ -1,43 +0,0 @@ |
|||
/* 九宫格 */ |
|||
.uni-grid-9 { |
|||
background: $ghostWhite; |
|||
width: 750upx; |
|||
display: flex; |
|||
flex-direction: row; |
|||
flex-wrap: wrap; |
|||
border-top: 2upx solid $greyLight; |
|||
} |
|||
|
|||
.uni-grid-9-item { |
|||
width: 250upx; |
|||
height: 200upx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
border-bottom: 2upx solid; |
|||
border-right: 2upx solid; |
|||
border-color: $greyLight; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.no-border-right { |
|||
border-right: none; |
|||
} |
|||
|
|||
.uni-grid-9-image { |
|||
width: 100upx; |
|||
height: 100upx; |
|||
} |
|||
|
|||
.uni-grid-9-text { |
|||
width: 250upx; |
|||
line-height: 4upx; |
|||
height: 40upx; |
|||
text-align: center; |
|||
font-size: 30upx; |
|||
} |
|||
|
|||
.uni-grid-9-item-hover { |
|||
background: rgba(0, 0, 0, 0.1); |
|||
} |
|||
@ -1,283 +0,0 @@ |
|||
/* 列表 */ |
|||
.uni-list { |
|||
background-color: $white; |
|||
position: relative; |
|||
width: 100%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
} |
|||
|
|||
.uni-list:after { |
|||
position: absolute; |
|||
z-index: 10; |
|||
right: 0; |
|||
bottom: 0; |
|||
left: 0; |
|||
height: 1upx; |
|||
content: ''; |
|||
-webkit-transform: scaleY(0.5); |
|||
transform: scaleY(0.5); |
|||
background-color: $greyLight; |
|||
} |
|||
|
|||
.uni-list:before { |
|||
position: absolute; |
|||
z-index: 10; |
|||
right: 0; |
|||
top: 0; |
|||
left: 0; |
|||
height: 1upx; |
|||
content: ''; |
|||
-webkit-transform: scaleY(0.5); |
|||
transform: scaleY(0.5); |
|||
background-color: $greyLight; |
|||
} |
|||
|
|||
.uni-list-cell { |
|||
position: relative; |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
} |
|||
|
|||
.uni-list-cell-hover { |
|||
background-color: #eee; |
|||
} |
|||
|
|||
.uni-list-cell-pd { |
|||
padding: 22upx 30upx; |
|||
} |
|||
|
|||
.uni-list-cell-left { |
|||
font-size: 28upx; |
|||
padding: 0 30upx; |
|||
} |
|||
|
|||
.uni-list-cell-db, |
|||
.uni-list-cell-right { |
|||
flex: 1; |
|||
} |
|||
|
|||
.uni-list-cell:after { |
|||
position: absolute; |
|||
z-index: 3; |
|||
right: 0; |
|||
bottom: 0; |
|||
left: 30upx; |
|||
height: 1upx; |
|||
content: ''; |
|||
-webkit-transform: scaleY(0.5); |
|||
transform: scaleY(0.5); |
|||
background-color: $greyLight; |
|||
} |
|||
|
|||
.uni-list .uni-list-cell:last-child:after { |
|||
height: 0upx; |
|||
} |
|||
|
|||
.uni-list-cell-last.uni-list-cell:after { |
|||
height: 0upx; |
|||
} |
|||
|
|||
.uni-list-cell-divider { |
|||
position: relative; |
|||
display: flex; |
|||
color: $grey; |
|||
background-color: $greyLight; |
|||
padding: 15upx 20upx; |
|||
} |
|||
|
|||
.uni-list-cell-divider:before { |
|||
position: absolute; |
|||
right: 0; |
|||
top: 0; |
|||
left: 0upx; |
|||
height: 1upx; |
|||
content: ''; |
|||
-webkit-transform: scaleY(0.5); |
|||
transform: scaleY(0.5); |
|||
background-color: $greyLight; |
|||
} |
|||
|
|||
.uni-list-cell-divider:after { |
|||
position: absolute; |
|||
right: 0; |
|||
bottom: 0; |
|||
left: 0upx; |
|||
height: 1upx; |
|||
content: ''; |
|||
-webkit-transform: scaleY(0.5); |
|||
transform: scaleY(0.5); |
|||
background-color: $greyLight; |
|||
} |
|||
|
|||
.uni-list-cell-navigate { |
|||
font-size: 30upx; |
|||
padding: 22upx 30upx; |
|||
line-height: 48upx; |
|||
position: relative; |
|||
display: flex; |
|||
box-sizing: border-box; |
|||
width: 100%; |
|||
flex: 1; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
} |
|||
|
|||
.uni-list-cell-navigate { |
|||
padding-right: 36upx; |
|||
} |
|||
|
|||
.uni-navigate-badge { |
|||
padding-right: 50upx; |
|||
} |
|||
|
|||
.uni-list-cell-navigate.uni-navigate-right:after { |
|||
font-family: uniicons; |
|||
content: '\e583'; |
|||
position: absolute; |
|||
right: 24upx; |
|||
top: 50%; |
|||
color: #bbb; |
|||
-webkit-transform: translateY(-50%); |
|||
transform: translateY(-50%); |
|||
} |
|||
|
|||
.uni-list-cell-navigate.uni-navigate-bottom:after { |
|||
font-family: uniicons; |
|||
content: '\e581'; |
|||
position: absolute; |
|||
right: 24upx; |
|||
top: 50%; |
|||
color: #bbb; |
|||
-webkit-transform: translateY(-50%); |
|||
transform: translateY(-50%); |
|||
} |
|||
|
|||
.uni-list-cell-navigate.uni-navigate-bottom.uni-active:after { |
|||
font-family: uniicons; |
|||
content: '\e580'; |
|||
position: absolute; |
|||
right: 24upx; |
|||
top: 50%; |
|||
color: #bbb; |
|||
-webkit-transform: translateY(-50%); |
|||
transform: translateY(-50%); |
|||
} |
|||
|
|||
.uni-collapse.uni-list-cell { |
|||
flex-direction: column; |
|||
} |
|||
|
|||
.uni-list-cell-navigate.uni-active { |
|||
background: #eee; |
|||
} |
|||
|
|||
.uni-list.uni-collapse { |
|||
box-sizing: border-box; |
|||
height: 0; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.uni-collapse .uni-list-cell { |
|||
padding-left: 20upx; |
|||
} |
|||
|
|||
.uni-collapse .uni-list-cell:after { |
|||
left: 52upx; |
|||
} |
|||
|
|||
.uni-list.uni-active { |
|||
height: auto; |
|||
} |
|||
|
|||
/* 三行列表 */ |
|||
.uni-triplex-row { |
|||
display: flex; |
|||
flex: 1; |
|||
width: 100%; |
|||
box-sizing: border-box; |
|||
flex-direction: row; |
|||
padding: 22upx 30upx; |
|||
} |
|||
|
|||
.uni-triplex-right, |
|||
.uni-triplex-left { |
|||
display: flex; |
|||
flex-direction: column; |
|||
} |
|||
|
|||
.uni-triplex-left { |
|||
width: 84%; |
|||
} |
|||
|
|||
.uni-triplex-left .uni-title { |
|||
padding: 8upx 0; |
|||
} |
|||
|
|||
.uni-triplex-left .uni-text, |
|||
.uni-triplex-left .uni-text-small { |
|||
color: #999999; |
|||
} |
|||
|
|||
.uni-triplex-right { |
|||
width: 16%; |
|||
text-align: right; |
|||
} |
|||
|
|||
/* 图文列表 */ |
|||
.uni-media-list { |
|||
padding: 22upx 30upx; |
|||
box-sizing: border-box; |
|||
display: flex; |
|||
width: 100%; |
|||
flex-direction: row; |
|||
} |
|||
|
|||
.uni-navigate-right.uni-media-list { |
|||
padding-right: 74upx; |
|||
} |
|||
|
|||
.uni-pull-right { |
|||
flex-direction: row-reverse; |
|||
} |
|||
|
|||
.uni-pull-right > .uni-media-list-logo { |
|||
margin-right: 0upx; |
|||
margin-left: 20upx; |
|||
} |
|||
|
|||
.uni-media-list-logo { |
|||
height: 84upx; |
|||
width: 84upx; |
|||
margin-right: 20upx; |
|||
} |
|||
|
|||
.uni-media-list-logo image { |
|||
height: 100%; |
|||
width: 100%; |
|||
} |
|||
|
|||
.uni-media-list-body { |
|||
height: 84upx; |
|||
display: flex; |
|||
flex: 1; |
|||
flex-direction: column; |
|||
justify-content: space-between; |
|||
align-items: flex-start; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.uni-media-list-text-top { |
|||
width: 100%; |
|||
line-height: 36upx; |
|||
font-size: 30upx; |
|||
} |
|||
|
|||
.uni-media-list-text-bottom { |
|||
width: 100%; |
|||
line-height: 30upx; |
|||
font-size: 26upx; |
|||
color: $grey; |
|||
} |
|||
@ -1,87 +0,0 @@ |
|||
.uni-margin-0 { |
|||
margin: 0 !important; |
|||
} |
|||
|
|||
.uni-margin-5 { |
|||
margin: 10upx !important; |
|||
} |
|||
|
|||
.uni-margin-10 { |
|||
margin: 20upx !important; |
|||
} |
|||
|
|||
.uni-margin-15 { |
|||
margin: 30upx !important; |
|||
} |
|||
|
|||
.uni-margin-t-0 { |
|||
margin-top: 0 !important; |
|||
} |
|||
|
|||
.uni-margin-t-5 { |
|||
margin-top: 10upx !important; |
|||
} |
|||
|
|||
.uni-margin-t-10 { |
|||
margin-top: 20upx !important; |
|||
} |
|||
|
|||
.uni-margin-t-15 { |
|||
margin-top: 30upx !important; |
|||
} |
|||
|
|||
.uni-margin-t-20 { |
|||
margin-top: 40upx !important; |
|||
} |
|||
|
|||
.uni-margin-t-25 { |
|||
margin-top: 50upx !important; |
|||
} |
|||
|
|||
.uni-margin-b-0 { |
|||
margin-bottom: 0 !important; |
|||
} |
|||
|
|||
.uni-margin-b-5 { |
|||
margin-bottom: 10upx !important; |
|||
} |
|||
|
|||
.uni-margin-b-10 { |
|||
margin-bottom: 20upx !important; |
|||
} |
|||
|
|||
.uni-margin-b-15 { |
|||
margin-bottom: 30upx !important; |
|||
} |
|||
|
|||
.uni-margin-l-0 { |
|||
margin-left: 0 !important; |
|||
} |
|||
|
|||
.uni-margin-l-5 { |
|||
margin-left: 10upx !important; |
|||
} |
|||
|
|||
.uni-margin-l-10 { |
|||
margin-left: 20upx !important; |
|||
} |
|||
|
|||
.uni-margin-l-15 { |
|||
margin-left: 30upx !important; |
|||
} |
|||
|
|||
.uni-margin-r-0 { |
|||
margin-right: 0 !important; |
|||
} |
|||
|
|||
.uni-margin-r-5 { |
|||
margin-right: 10upx !important; |
|||
} |
|||
|
|||
.uni-margin-r-10 { |
|||
margin-right: 20upx !important; |
|||
} |
|||
|
|||
.uni-margin-r-15 { |
|||
margin-right: 30upx !important; |
|||
} |
|||
@ -1,80 +0,0 @@ |
|||
/*内外边距类*/ |
|||
.uni-padded-0 { |
|||
padding: 0 !important; |
|||
} |
|||
|
|||
.uni-padded-5 { |
|||
padding: 10upx !important; |
|||
} |
|||
|
|||
.uni-padded-10 { |
|||
padding: 20upx !important; |
|||
} |
|||
|
|||
.uni-padded-15 { |
|||
padding: 30upx !important; |
|||
} |
|||
|
|||
.uni-padded-t-0 { |
|||
padding-top: 0 !important; |
|||
} |
|||
|
|||
.uni-padded-t-5 { |
|||
padding-top: 10upx !important; |
|||
} |
|||
|
|||
.uni-padded-t-10 { |
|||
padding-top: 20upx !important; |
|||
} |
|||
|
|||
.uni-padded-t-15 { |
|||
padding-top: 30upx !important; |
|||
} |
|||
|
|||
.uni-padded-b-0 { |
|||
padding-bottom: 0 !important; |
|||
} |
|||
|
|||
.uni-padded-b-5 { |
|||
padding-bottom: 10upx !important; |
|||
} |
|||
|
|||
.uni-padded-b-10 { |
|||
padding-bottom: 20upx !important; |
|||
} |
|||
|
|||
.uni-padded-b-15 { |
|||
padding-bottom: 30upx !important; |
|||
} |
|||
|
|||
.uni-padded-l-0 { |
|||
padding-left: 0 !important; |
|||
} |
|||
|
|||
.uni-padded-l-5 { |
|||
padding-left: 10upx !important; |
|||
} |
|||
|
|||
.uni-padded-l-10 { |
|||
padding-left: 20upx !important; |
|||
} |
|||
|
|||
.uni-padded-l-15 { |
|||
padding-left: 30upx !important; |
|||
} |
|||
|
|||
.uni-padded-r-0 { |
|||
padding-right: 0 !important; |
|||
} |
|||
|
|||
.uni-padded-r-5 { |
|||
padding-right: 10upx !important; |
|||
} |
|||
|
|||
.uni-padded-r-10 { |
|||
padding-right: 20upx !important; |
|||
} |
|||
|
|||
.uni-padded-r-15 { |
|||
padding-right: 30upx !important; |
|||
} |
|||
@ -1,61 +0,0 @@ |
|||
/* product */ |
|||
.uni-product-list { |
|||
display: flex; |
|||
width: 100%; |
|||
flex-wrap: wrap; |
|||
flex-direction: row; |
|||
} |
|||
|
|||
.uni-product { |
|||
padding: 20upx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
} |
|||
|
|||
.image-view { |
|||
height: 330upx; |
|||
width: 330upx; |
|||
margin: 12upx 0; |
|||
} |
|||
|
|||
.uni-product-image { |
|||
height: 330upx; |
|||
width: 330upx; |
|||
} |
|||
|
|||
.uni-product-title { |
|||
width: 300upx; |
|||
word-break: break-all; |
|||
display: -webkit-box; |
|||
overflow: hidden; |
|||
line-height: 1.5; |
|||
text-overflow: ellipsis; |
|||
-webkit-box-orient: vertical; |
|||
-webkit-line-clamp: 2; |
|||
} |
|||
|
|||
.uni-product-price { |
|||
margin-top: 10upx; |
|||
font-size: 28upx; |
|||
line-height: 1.5; |
|||
position: relative; |
|||
} |
|||
|
|||
.uni-product-price-original { |
|||
color: #e80080; |
|||
} |
|||
|
|||
.uni-product-price-favour { |
|||
color: #888888; |
|||
text-decoration: line-through; |
|||
margin-left: 10upx; |
|||
} |
|||
|
|||
.uni-product-tip { |
|||
position: absolute; |
|||
right: 10upx; |
|||
background-color: #ff3333; |
|||
color: #ffffff; |
|||
padding: 0 10upx; |
|||
border-radius: 5upx; |
|||
} |
|||
@ -1,60 +0,0 @@ |
|||
/* steps */ |
|||
.uni-steps { |
|||
padding: 20upx 30upx; |
|||
flex-grow: 1; |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
} |
|||
|
|||
.uni-steps view { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
float: none; |
|||
} |
|||
|
|||
.uni-steps .step { |
|||
width: 31.3%; |
|||
margin: 0 1%; |
|||
flex-wrap: nowrap; |
|||
} |
|||
|
|||
.uni-steps .step-circle { |
|||
width: 50upx; |
|||
height: 50upx; |
|||
border-radius: 50upx; |
|||
background: #f1f1f3; |
|||
justify-content: center; |
|||
line-height: 50upx; |
|||
flex-shrink: 0; |
|||
margin-right: 15upx; |
|||
color: #666; |
|||
font-size: 28upx; |
|||
} |
|||
|
|||
.uni-steps .step-content { |
|||
width: 100%; |
|||
height: 22upx; |
|||
border-bottom: 1px solid #f1f2f3; |
|||
} |
|||
|
|||
.uni-steps .step-title { |
|||
line-height: 50upx; |
|||
height: 50upx; |
|||
background: #ffffff; |
|||
width: auto; |
|||
overflow: hidden; |
|||
padding-right: 8upx; |
|||
} |
|||
|
|||
.uni-steps .current .step-circle { |
|||
background: #00b26a; |
|||
color: #ffffff; |
|||
} |
|||
|
|||
.uni-steps .current .step-content { |
|||
border-color: #00b26a; |
|||
} |
|||
|
|||
.uni-steps .current .step-title { |
|||
color: #00b26a; |
|||
} |
|||
@ -1,26 +0,0 @@ |
|||
/* swiper msg */ |
|||
.uni-swiper-msg { |
|||
width: 100%; |
|||
padding: 12rpx 0; |
|||
flex-wrap: nowrap; |
|||
display: flex; |
|||
} |
|||
|
|||
.uni-swiper-msg-icon { |
|||
width: 50upx; |
|||
margin-right: 20upx; |
|||
} |
|||
|
|||
.uni-swiper-msg-icon image { |
|||
width: 100%; |
|||
flex-shrink: 0; |
|||
} |
|||
|
|||
.uni-swiper-msg swiper { |
|||
width: 100%; |
|||
height: 50upx; |
|||
} |
|||
|
|||
.uni-swiper-msg swiper-item { |
|||
line-height: 50upx; |
|||
} |
|||
@ -1,43 +0,0 @@ |
|||
/* tab bar */ |
|||
.uni-tab-bar { |
|||
display: flex; |
|||
flex: 1; |
|||
flex-direction: column; |
|||
overflow: hidden; |
|||
height: 100%; |
|||
} |
|||
|
|||
.uni-tab-bar .list { |
|||
width: 750upx; |
|||
height: 100%; |
|||
} |
|||
|
|||
.uni-swiper-tab { |
|||
width: 100%; |
|||
white-space: nowrap; |
|||
line-height: 100upx; |
|||
height: 100upx; |
|||
/* border-bottom: 1px solid #c8c7cc; */ |
|||
} |
|||
|
|||
.swiper-tab-list { |
|||
font-size: 30upx; |
|||
width: 150upx; |
|||
display: inline-block; |
|||
text-align: center; |
|||
color: #555; |
|||
} |
|||
|
|||
.uni-tab-bar .active { |
|||
color: #1890ff; |
|||
} |
|||
|
|||
.uni-tab-bar .swiper-box { |
|||
flex: 1; |
|||
width: 100%; |
|||
height: calc(100% - 100upx); |
|||
} |
|||
|
|||
.uni-tab-bar-loading { |
|||
padding: 20upx 0; |
|||
} |
|||
@ -1,79 +0,0 @@ |
|||
/*文字对齐*/ |
|||
.uni-text-left { |
|||
text-align: left !important; |
|||
} |
|||
|
|||
.uni-text-center { |
|||
text-align: center !important; |
|||
} |
|||
|
|||
.uni-text-justify { |
|||
text-align: justify !important; |
|||
} |
|||
|
|||
.uni-text-right { |
|||
text-align: right !important; |
|||
} |
|||
|
|||
.uni-font-size-12 { |
|||
font-size: 12px !important; |
|||
} |
|||
|
|||
.uni-font-size-13 { |
|||
font-size: 13px !important; |
|||
} |
|||
|
|||
.uni-font-size-14 { |
|||
font-size: 14px !important; |
|||
} |
|||
|
|||
.uni-font-size-15 { |
|||
font-size: 15px !important; |
|||
} |
|||
|
|||
.uni-font-size-16 { |
|||
font-size: 16px !important; |
|||
} |
|||
|
|||
.uni-font-size-18 { |
|||
font-size: 18px !important; |
|||
} |
|||
|
|||
.uni-font-size-20 { |
|||
font-size: 20px !important; |
|||
} |
|||
|
|||
/* 标题 */ |
|||
.uni-h1 { |
|||
font-size: 80upx; |
|||
font-weight: 700; |
|||
} |
|||
|
|||
.uni-h2 { |
|||
font-size: 60upx; |
|||
font-weight: 700; |
|||
} |
|||
|
|||
.uni-h3 { |
|||
font-size: 48upx; |
|||
font-weight: 700; |
|||
} |
|||
|
|||
.uni-h4 { |
|||
font-size: 36upx; |
|||
font-weight: 700; |
|||
} |
|||
|
|||
.uni-h5 { |
|||
font-size: 28upx; |
|||
color: $grey; |
|||
} |
|||
|
|||
.uni-h6 { |
|||
font-size: 24upx; |
|||
color: $grey; |
|||
} |
|||
|
|||
.uni-bold { |
|||
font-weight: bold; |
|||
} |
|||
@ -1,47 +0,0 @@ |
|||
.uni-text-default { |
|||
color: $black !important; |
|||
} |
|||
|
|||
.uni-text-grey { |
|||
color: $grey !important; |
|||
} |
|||
|
|||
.uni-text-grey-dark { |
|||
color: $darkGray !important; |
|||
} |
|||
|
|||
.uni-text-white { |
|||
color: $white !important; |
|||
} |
|||
|
|||
.uni-text-primary { |
|||
color: $blue !important; |
|||
} |
|||
|
|||
.uni-text-success { |
|||
color: $green !important; |
|||
} |
|||
|
|||
.uni-text-info { |
|||
color: tint($blue, 10%) !important; |
|||
} |
|||
|
|||
.uni-text-warning { |
|||
color: $yellow !important; |
|||
} |
|||
|
|||
.uni-text-danger { |
|||
color: $red !important; |
|||
} |
|||
|
|||
.uni-text-pink { |
|||
color: $pink !important; |
|||
} |
|||
|
|||
.uni-text-purple { |
|||
color: $purple !important; |
|||
} |
|||
|
|||
.uni-text-indigo { |
|||
color: $mauve !important; |
|||
} |
|||
@ -1,78 +0,0 @@ |
|||
/* timeline */ |
|||
.uni-timeline { |
|||
margin: 35upx 0; |
|||
display: flex; |
|||
flex-direction: column; |
|||
position: relative; |
|||
} |
|||
|
|||
.uni-timeline-item { |
|||
display: flex; |
|||
flex-direction: row; |
|||
position: relative; |
|||
padding-bottom: 20upx; |
|||
box-sizing: border-box; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.uni-timeline-item .uni-timeline-item-keynode { |
|||
width: 160upx; |
|||
flex-shrink: 0; |
|||
box-sizing: border-box; |
|||
padding-right: 20upx; |
|||
text-align: right; |
|||
line-height: 65upx; |
|||
} |
|||
|
|||
.uni-timeline-item .uni-timeline-item-divider { |
|||
flex-shrink: 0; |
|||
position: relative; |
|||
width: 30upx; |
|||
height: 30upx; |
|||
top: 15upx; |
|||
border-radius: 50%; |
|||
background-color: #bbb; |
|||
} |
|||
|
|||
.uni-timeline-item-divider::before, |
|||
.uni-timeline-item-divider::after { |
|||
position: absolute; |
|||
left: 15upx; |
|||
width: 1upx; |
|||
height: 100vh; |
|||
content: ''; |
|||
background: inherit; |
|||
} |
|||
|
|||
.uni-timeline-item-divider::before { |
|||
bottom: 100%; |
|||
} |
|||
|
|||
.uni-timeline-item-divider::after { |
|||
top: 100%; |
|||
} |
|||
|
|||
.uni-timeline-last-item .uni-timeline-item-divider:after { |
|||
display: none; |
|||
} |
|||
|
|||
.uni-timeline-first-item .uni-timeline-item-divider:before { |
|||
display: none; |
|||
} |
|||
|
|||
.uni-timeline-item .uni-timeline-item-content { |
|||
padding-left: 20upx; |
|||
} |
|||
|
|||
.uni-timeline-last-item .bottom-border::after { |
|||
display: none; |
|||
} |
|||
|
|||
.uni-timeline-item-content .datetime { |
|||
color: #cccccc; |
|||
} |
|||
|
|||
/* 自定义节点颜色 */ |
|||
.uni-timeline-last-item .uni-timeline-item-divider { |
|||
background-color: #1890ff; |
|||
} |
|||
Loading…
Reference in new issue