19 changed files with 398 additions and 433 deletions
@ -1,145 +1,97 @@ |
|||
page { |
|||
// background-color: #FFF8F8; |
|||
background-color: #F1F1F1; |
|||
// min-height: 100%; |
|||
height: 100%; |
|||
font-size: 28rpx; |
|||
line-height: 1.2; // |
|||
color: #000; |
|||
} |
|||
|
|||
page .tabpage{ |
|||
// 怪异盒模型 |
|||
-webkit-overflow-scrolling: touch; |
|||
box-sizing: border-box; |
|||
/* #ifdef H5 */ |
|||
//貌似不需要了，已经是去除了tabbar的高度了 |
|||
//自定义tabbar的时候需要 |
|||
// 底部tab栏高度 |
|||
margin-bottom: 0;//var(--window-bottom); |
|||
/* #endif */ |
|||
/* #ifndef H5 */ |
|||
margin-bottom: 0; |
|||
/* #endif */ |
|||
// 触发BFC |
|||
// overflow-x: hidden; |
|||
// overflow-y: scroll; |
|||
min-height: 100%; |
|||
} |
|||
page .page{ |
|||
// 怪异盒模型 |
|||
-webkit-overflow-scrolling: touch; |
|||
box-sizing: border-box; |
|||
// 触发BFC |
|||
// overflow-x: hidden; |
|||
// overflow-y: scroll; |
|||
min-height: 100%; |
|||
} |
|||
|
|||
::-webkit-scrollbar { |
|||
width: 0; |
|||
height: 0; |
|||
color: transparent; |
|||
display: none; |
|||
} |
|||
|
|||
page *{ |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.a-flexbox{ |
|||
display: flex; |
|||
&.a-flexbox--fixed{ |
|||
flex-shrink: 0; |
|||
flex-grow: 0; |
|||
} |
|||
&.a-flexbox--inline{ |
|||
display: inline-flex; |
|||
} |
|||
&.a-flexbox__column{ |
|||
flex-direction: column; |
|||
} |
|||
&.a-flexbox__row{ |
|||
flex-direction: row; |
|||
} |
|||
&.a-flexbox__wrap{ |
|||
flex-wrap: wrap; |
|||
} |
|||
&.a-flexbox__center{ |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
&.a-flexbox__center--x{ |
|||
justify-content: center; |
|||
} |
|||
&.a-flexbox--around{ |
|||
justify-content: space-around; |
|||
} |
|||
&.a-flexbox--between{ |
|||
justify-content: space-between; |
|||
} |
|||
&.a-flexbox__start--x{ |
|||
justify-content: flex-start; |
|||
} |
|||
&.a-flexbox__end--x{ |
|||
justify-content: flex-end; |
|||
} |
|||
&.a-flexbox__center--y{ |
|||
align-items: center; |
|||
} |
|||
&.a-flexbox__start--y{ |
|||
align-items: flex-start; |
|||
} |
|||
&.a-flexbox__end--y{ |
|||
align-items: flex-end; |
|||
} |
|||
.a-flexbox__noshrink{ |
|||
flex-shrink: 0; |
|||
} |
|||
.a-flexbox__full{ |
|||
flex: 1; |
|||
width: 0; |
|||
} |
|||
.a-flexbox__full--h{ |
|||
flex: 1; |
|||
height: 0; |
|||
} |
|||
} |
|||
// 单行省略号 |
|||
.a-ov{ |
|||
@include ellipsis(1) |
|||
} |
|||
// 两行省略号 |
|||
.a-ov2{ |
|||
@include ellipsis(2) |
|||
} |
|||
// .a-flexbox{ |
|||
// display: flex; |
|||
// &.a-flexbox--fixed{ |
|||
// flex-shrink: 0; |
|||
// flex-grow: 0; |
|||
// } |
|||
// &.a-flexbox--inline{ |
|||
// display: inline-flex; |
|||
// } |
|||
// &.a-flexbox__column{ |
|||
// flex-direction: column; |
|||
// } |
|||
// &.a-flexbox__row{ |
|||
// flex-direction: row; |
|||
// } |
|||
// &.a-flexbox__wrap{ |
|||
// flex-wrap: wrap; |
|||
// } |
|||
// &.a-flexbox__center{ |
|||
// align-items: center; |
|||
// justify-content: center; |
|||
// } |
|||
// &.a-flexbox__center--x{ |
|||
// justify-content: center; |
|||
// } |
|||
// &.a-flexbox--around{ |
|||
// justify-content: space-around; |
|||
// } |
|||
// &.a-flexbox--between{ |
|||
// justify-content: space-between; |
|||
// } |
|||
// &.a-flexbox__start--x{ |
|||
// justify-content: flex-start; |
|||
// } |
|||
// &.a-flexbox__end--x{ |
|||
// justify-content: flex-end; |
|||
// } |
|||
// &.a-flexbox__center--y{ |
|||
// align-items: center; |
|||
// } |
|||
// &.a-flexbox__start--y{ |
|||
// align-items: flex-start; |
|||
// } |
|||
// &.a-flexbox__end--y{ |
|||
// align-items: flex-end; |
|||
// } |
|||
// .a-flexbox__noshrink{ |
|||
// flex-shrink: 0; |
|||
// } |
|||
// .a-flexbox__full{ |
|||
// flex: 1; |
|||
// width: 0; |
|||
// } |
|||
// .a-flexbox__full--h{ |
|||
// flex: 1; |
|||
// height: 0; |
|||
// } |
|||
// } |
|||
// // 单行省略号 |
|||
// .a-ov{ |
|||
// @include ellipsis(1) |
|||
// } |
|||
// // 两行省略号 |
|||
// .a-ov2{ |
|||
// @include ellipsis(2) |
|||
// } |
|||
|
|||
// 包裹输入框 |
|||
.a-wrapinput{ |
|||
position:relative; |
|||
display: flex; |
|||
align-items: center; |
|||
// height: 100%; |
|||
>input{ |
|||
width: 0; |
|||
flex: 1; |
|||
// height: 100%; |
|||
font-size: inherit; |
|||
line-height: inherit; |
|||
} |
|||
.sub{ |
|||
display: flex; |
|||
align-items: center; |
|||
margin-right: 8rpx; |
|||
} |
|||
} |
|||
// 包裹文本域 |
|||
.a-wraptextarea{ |
|||
min-height: 160rpx; |
|||
height: 160rpx; |
|||
>textarea{ |
|||
font-size: inherit; |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
} |
|||
// // 包裹输入框 |
|||
// .a-wrapinput{ |
|||
// position:relative; |
|||
// display: flex; |
|||
// align-items: center; |
|||
// // height: 100%; |
|||
// >input{ |
|||
// width: 0; |
|||
// flex: 1; |
|||
// // height: 100%; |
|||
// font-size: inherit; |
|||
// line-height: inherit; |
|||
// } |
|||
// .sub{ |
|||
// display: flex; |
|||
// align-items: center; |
|||
// margin-right: 8rpx; |
|||
// } |
|||
// } |
|||
// // 包裹文本域 |
|||
// .a-wraptextarea{ |
|||
// min-height: 160rpx; |
|||
// height: 160rpx; |
|||
// >textarea{ |
|||
// font-size: inherit; |
|||
// width: 100%; |
|||
// height: 100%; |
|||
// } |
|||
// } |
|||
|
|||
@ -1,112 +1,113 @@ |
|||
/* |
|||
* 内部通用scss |
|||
*/ |
|||
// /* |
|||
// * 内部通用scss |
|||
// */ |
|||
|
|||
@mixin clearfix { |
|||
&:after { |
|||
clear: both; |
|||
content: '.'; |
|||
display: block; |
|||
height: 0; |
|||
line-height: 0; |
|||
overflow: hidden; |
|||
} |
|||
// *height: 1%; |
|||
} |
|||
// @mixin clearfix { |
|||
// &:after { |
|||
// clear: both; |
|||
// content: '.'; |
|||
// display: block; |
|||
// height: 0; |
|||
// line-height: 0; |
|||
// overflow: hidden; |
|||
// } |
|||
// // *height: 1%; |
|||
// } |
|||
|
|||
|
|||
@mixin hairline { |
|||
&::after { |
|||
content: " "; |
|||
box-sizing: border-box; |
|||
pointer-events: none; |
|||
border: 0 solid #ebedf0; |
|||
position: absolute; |
|||
top: -50%; |
|||
right: -50%; |
|||
bottom: -50%; |
|||
left: -50%; |
|||
-webkit-transform: scale(0.5); |
|||
transform: scale(0.5); |
|||
@content |
|||
} |
|||
}; |
|||
@mixin hairline--no { |
|||
@include hairline{ |
|||
border: 0; |
|||
}; |
|||
} |
|||
@mixin hairline--all { |
|||
@include hairline{ |
|||
border-width: 1px; |
|||
}; |
|||
} |
|||
@mixin hairline--right { |
|||
@include hairline{ |
|||
border-right-width: 1px; |
|||
}; |
|||
} |
|||
@mixin hairline--left { |
|||
@include hairline{ |
|||
border-left-width: 1px; |
|||
}; |
|||
} |
|||
@mixin hairline--bottom { |
|||
@include hairline{ |
|||
border-bottom-width: 1px; |
|||
}; |
|||
} |
|||
// @mixin hairline { |
|||
// &::after { |
|||
// content: " "; |
|||
// box-sizing: border-box; |
|||
// pointer-events: none; |
|||
// border: 0 solid #ebedf0; |
|||
// position: absolute; |
|||
// top: -50%; |
|||
// right: -50%; |
|||
// bottom: -50%; |
|||
// left: -50%; |
|||
// -webkit-transform: scale(0.5); |
|||
// transform: scale(0.5); |
|||
// @content |
|||
// } |
|||
// }; |
|||
// @mixin hairline--no { |
|||
// @include hairline{ |
|||
// border: 0; |
|||
// }; |
|||
// } |
|||
// @mixin hairline--all { |
|||
// @include hairline{ |
|||
// border-width: 1px; |
|||
// }; |
|||
// } |
|||
// @mixin hairline--right { |
|||
// @include hairline{ |
|||
// border-right-width: 1px; |
|||
// }; |
|||
// } |
|||
// @mixin hairline--left { |
|||
// @include hairline{ |
|||
// border-left-width: 1px; |
|||
// }; |
|||
// } |
|||
|
|||
@mixin hairline--top { |
|||
@include hairline{ |
|||
border-top-width: 1px; |
|||
}; |
|||
} |
|||
@mixin hairline--right--bottom { |
|||
@include hairline{ |
|||
border-left-width: 0; |
|||
border-top-width: 0; |
|||
border-right-width: 1px; |
|||
border-bottom-width: 1px; |
|||
}; |
|||
} |
|||
@mixin hairline--left--top { |
|||
@include hairline{ |
|||
border-right-width: 0; |
|||
border-bottom-width: 0; |
|||
border-left-width: 1px; |
|||
border-top-width: 1px; |
|||
}; |
|||
} |
|||
//一行溢出 |
|||
@mixin text-overflow{ |
|||
white-space: nowrap; |
|||
text-overflow: ellipsis; |
|||
overflow: hidden; |
|||
word-break: break-all; |
|||
}; |
|||
// @mixin hairline--bottom { |
|||
// @include hairline{ |
|||
// border-bottom-width: 1px; |
|||
// }; |
|||
// } |
|||
|
|||
//两行溢出 |
|||
@mixin ov($num: 2){ |
|||
text-overflow: -o-ellipsis-lastline; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
display: -webkit-box; |
|||
-webkit-line-clamp: $num; |
|||
line-clamp: $num; |
|||
-webkit-box-orient: vertical; |
|||
} |
|||
@mixin ellipsis($lines: 1) { |
|||
@if ($lines==1) { |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
white-space: nowrap; |
|||
} @else { |
|||
display: -webkit-box; |
|||
-webkit-box-orient: vertical; |
|||
-webkit-line-clamp: $lines; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
word-break: break-all; |
|||
} |
|||
} |
|||
// @mixin hairline--top { |
|||
// @include hairline{ |
|||
// border-top-width: 1px; |
|||
// }; |
|||
// } |
|||
// @mixin hairline--right--bottom { |
|||
// @include hairline{ |
|||
// border-left-width: 0; |
|||
// border-top-width: 0; |
|||
// border-right-width: 1px; |
|||
// border-bottom-width: 1px; |
|||
// }; |
|||
// } |
|||
// @mixin hairline--left--top { |
|||
// @include hairline{ |
|||
// border-right-width: 0; |
|||
// border-bottom-width: 0; |
|||
// border-left-width: 1px; |
|||
// border-top-width: 1px; |
|||
// }; |
|||
// } |
|||
// //一行溢出 |
|||
// @mixin text-overflow{ |
|||
// white-space: nowrap; |
|||
// text-overflow: ellipsis; |
|||
// overflow: hidden; |
|||
// word-break: break-all; |
|||
// }; |
|||
|
|||
// //两行溢出 |
|||
// @mixin ov($num: 2){ |
|||
// text-overflow: -o-ellipsis-lastline; |
|||
// overflow: hidden; |
|||
// text-overflow: ellipsis; |
|||
// display: -webkit-box; |
|||
// -webkit-line-clamp: $num; |
|||
// line-clamp: $num; |
|||
// -webkit-box-orient: vertical; |
|||
// } |
|||
// @mixin ellipsis($lines: 1) { |
|||
// @if ($lines==1) { |
|||
// overflow: hidden; |
|||
// text-overflow: ellipsis; |
|||
// white-space: nowrap; |
|||
// } @else { |
|||
// display: -webkit-box; |
|||
// -webkit-box-orient: vertical; |
|||
// -webkit-line-clamp: $lines; |
|||
// overflow: hidden; |
|||
// text-overflow: ellipsis; |
|||
// word-break: break-all; |
|||
// } |
|||
// } |
|||
@ -0,0 +1,8 @@ |
|||
# niu-ui |
|||
|
|||
第一个版本，目前仅供个人使用 |
|||
|
|||
``` |
|||
import niuUI, {toast} from '@/uni_modules/niu-ui' |
|||
Vue.use(niuUI) |
|||
``` |
|||
@ -0,0 +1,4 @@ |
|||
## 0.0.1.alpha.1（2022-07-18） |
|||
版本修改 |
|||
## 0.0.1（2022-07-18） |
|||
第一个版本 |
|||
@ -0,0 +1,8 @@ |
|||
<template> |
|||
</template> |
|||
|
|||
<script> |
|||
</script> |
|||
|
|||
<style> |
|||
</style> |
|||
@ -1 +1,8 @@ |
|||
# niu-ui |
|||
# niu-ui |
|||
|
|||
第一个版本，目前仅供个人使用 |
|||
|
|||
``` |
|||
import niuUI, {toast} from '@/uni_modules/niu-ui' |
|||
Vue.use(niuUI) |
|||
``` |
|||
Loading…
Reference in new issue