commit
d79b342555
41 changed files with 3295 additions and 0 deletions
@ -0,0 +1,23 @@ |
|||
/* |
|||
* Copyright (c) 2019. |
|||
* author: wally |
|||
* email: 18603454788@163.com |
|||
*/ |
|||
|
|||
module.exports = { |
|||
root: true, |
|||
|
|||
env: { browser: true, node: true }, |
|||
extends: ['plugin:vue/recommended', 'plugin:vue/essential', '@vue/prettier'], |
|||
rules: { |
|||
'vue/html-self-closing': 'off', |
|||
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', |
|||
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', |
|||
'no-param-reassign': ['error', { props: true, ignorePropertyModificationsFor: ['state'] }], |
|||
'max-len': ['error', { code: 120, tabWidth: 2 }], |
|||
'object-curly-newline': ['error', { multiline: true }], |
|||
'arrow-parens': ['error', 'as-needed'], |
|||
}, |
|||
|
|||
parserOptions: { parser: 'babel-eslint' }, |
|||
}; |
@ -0,0 +1,17 @@ |
|||
.DS_Store |
|||
node_modules/ |
|||
dist/ |
|||
unpackage/ |
|||
unpackage/* |
|||
|
|||
npm-debug.log* |
|||
yarn-debug.log* |
|||
yarn-error.log* |
|||
|
|||
# Editor directories and files |
|||
.idea |
|||
.vscode |
|||
*.suo |
|||
*.ntvs* |
|||
*.njsproj |
|||
*.sln |
@ -0,0 +1,12 @@ |
|||
{ |
|||
"printWidth": 100, |
|||
"singleQuote": true, |
|||
"semi": true, |
|||
"trailingComma": "all", |
|||
"arrowParens": "avoid", |
|||
"tabWidth": 2, |
|||
"useTabs": false, |
|||
"bracketSpacing": true, |
|||
"jsxBracketSameLine": false, |
|||
"proseWrap": "always" |
|||
} |
@ -0,0 +1,17 @@ |
|||
<script> |
|||
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'; |
|||
</style> |
@ -0,0 +1,25 @@ |
|||
@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'; |
@ -0,0 +1,120 @@ |
|||
/* 颜色变量 */ |
|||
/* 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; |
@ -0,0 +1,106 @@ |
|||
.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; |
|||
} |
@ -0,0 +1,77 @@ |
|||
/*数字角标*/ |
|||
.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; |
|||
} |
@ -0,0 +1,87 @@ |
|||
/*通用 */ |
|||
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%; |
|||
} |
@ -0,0 +1,142 @@ |
|||
/*水平线*/ |
|||
.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; |
|||
} |
@ -0,0 +1,91 @@ |
|||
/*卡片视图 */ |
|||
.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; |
|||
} |
@ -0,0 +1,10 @@ |
|||
/*折叠面板 */ |
|||
.uni-collapse-content { |
|||
height: 0; |
|||
width: 100%; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.uni-collapse-content.uni-active { |
|||
height: auto; |
|||
} |
@ -0,0 +1,73 @@ |
|||
/* 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; |
|||
} |
@ -0,0 +1,50 @@ |
|||
/*自动隐藏文字*/ |
|||
.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; |
|||
} |
@ -0,0 +1,49 @@ |
|||
.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; |
|||
} |
@ -0,0 +1,24 @@ |
|||
.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; |
|||
} |
@ -0,0 +1,379 @@ |
|||
@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'; |
|||
} |
@ -0,0 +1,118 @@ |
|||
/* 表单 */ |
|||
.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; |
|||
} |
@ -0,0 +1,43 @@ |
|||
/* 九宫格 */ |
|||
.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); |
|||
} |
@ -0,0 +1,283 @@ |
|||
/* 列表 */ |
|||
.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; |
|||
} |
@ -0,0 +1,87 @@ |
|||
.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; |
|||
} |
@ -0,0 +1,80 @@ |
|||
/*内外边距类*/ |
|||
.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; |
|||
} |
@ -0,0 +1,61 @@ |
|||
/* 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; |
|||
} |
@ -0,0 +1,60 @@ |
|||
/* 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; |
|||
} |
@ -0,0 +1,26 @@ |
|||
/* 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; |
|||
} |
@ -0,0 +1,43 @@ |
|||
/* 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; |
|||
} |
@ -0,0 +1,79 @@ |
|||
/*文字对齐*/ |
|||
.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; |
|||
} |
@ -0,0 +1,47 @@ |
|||
.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; |
|||
} |
@ -0,0 +1,78 @@ |
|||
/* 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; |
|||
} |
@ -0,0 +1,5 @@ |
|||
// api基础地质
|
|||
export const BASE_URL = ``; |
|||
|
|||
// 错误码
|
|||
export const ERR_CODE = 200; |
@ -0,0 +1,15 @@ |
|||
import Vue from 'vue'; |
|||
import { http } from 'plugins/request/index'; |
|||
import App from './App'; |
|||
// import store from './store';
|
|||
|
|||
Vue.config.productionTip = false |
|||
Vue.prototype.$http = http; |
|||
|
|||
App.mpType = 'app' |
|||
|
|||
const app = new Vue({ |
|||
// store,
|
|||
...App |
|||
}) |
|||
app.$mount() |
@ -0,0 +1,78 @@ |
|||
{ |
|||
"name" : "healthyCode", |
|||
"appid" : "__UNI__4CABB72", |
|||
"description" : "", |
|||
"versionName" : "1.0.0", |
|||
"versionCode" : "100", |
|||
"transformPx" : false, |
|||
/* 5+App特有相关 */ |
|||
"app-plus" : { |
|||
"usingComponents" : true, |
|||
"nvueCompiler" : "uni-app", |
|||
"compilerVersion" : 3, |
|||
"splashscreen" : { |
|||
"alwaysShowBeforeRender" : true, |
|||
"waiting" : true, |
|||
"autoclose" : true, |
|||
"delay" : 0 |
|||
}, |
|||
/* 模块配置 */ |
|||
"modules" : {}, |
|||
/* 应用发布信息 */ |
|||
"distribute" : { |
|||
/* android打包配置 */ |
|||
"android" : { |
|||
"permissions" : [ |
|||
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>", |
|||
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>", |
|||
"<uses-permission android:name=\"android.permission.READ_CONTACTS\"/>", |
|||
"<uses-permission android:name=\"android.permission.VIBRATE\"/>", |
|||
"<uses-permission android:name=\"android.permission.READ_LOGS\"/>", |
|||
"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>", |
|||
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>", |
|||
"<uses-permission android:name=\"android.permission.WRITE_CONTACTS\"/>", |
|||
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>", |
|||
"<uses-permission android:name=\"android.permission.CAMERA\"/>", |
|||
"<uses-permission android:name=\"android.permission.RECORD_AUDIO\"/>", |
|||
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>", |
|||
"<uses-permission android:name=\"android.permission.MODIFY_AUDIO_SETTINGS\"/>", |
|||
"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>", |
|||
"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>", |
|||
"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>", |
|||
"<uses-permission android:name=\"android.permission.CALL_PHONE\"/>", |
|||
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>", |
|||
"<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\"/>", |
|||
"<uses-feature android:name=\"android.hardware.camera\"/>", |
|||
"<uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\"/>", |
|||
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>" |
|||
] |
|||
}, |
|||
/* ios打包配置 */ |
|||
"ios" : {}, |
|||
/* SDK配置 */ |
|||
"sdkConfigs" : {} |
|||
} |
|||
}, |
|||
/* 快应用特有相关 */ |
|||
"quickapp" : {}, |
|||
/* 小程序特有相关 */ |
|||
"mp-weixin" : { |
|||
"appid" : "wx2f9ef33e08053bbf", |
|||
"setting" : { |
|||
"urlCheck" : false, |
|||
"es6" : true, |
|||
"postcss" : true, |
|||
"minified" : true |
|||
}, |
|||
"usingComponents" : true |
|||
}, |
|||
"mp-alipay" : { |
|||
"usingComponents" : true |
|||
}, |
|||
"mp-baidu" : { |
|||
"usingComponents" : true |
|||
}, |
|||
"mp-toutiao" : { |
|||
"usingComponents" : true |
|||
} |
|||
} |
@ -0,0 +1,16 @@ |
|||
{ |
|||
"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages |
|||
{ |
|||
"path": "pages/index/index", |
|||
"style": { |
|||
"navigationBarTitleText": "uni-app" |
|||
} |
|||
} |
|||
], |
|||
"globalStyle": { |
|||
"navigationBarTextStyle": "black", |
|||
"navigationBarTitleText": "uni-app", |
|||
"navigationBarBackgroundColor": "#F8F8F8", |
|||
"backgroundColor": "#F8F8F8" |
|||
} |
|||
} |
@ -0,0 +1,52 @@ |
|||
<template> |
|||
<view class="content"> |
|||
<image class="logo" src="/static/logo.png"></image> |
|||
<view class="text-area"> |
|||
<text class="title">{{title}}</text> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
title: 'Hello' |
|||
} |
|||
}, |
|||
onLoad() { |
|||
|
|||
}, |
|||
methods: { |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.content { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.logo { |
|||
height: 200rpx; |
|||
width: 200rpx; |
|||
margin-top: 200rpx; |
|||
margin-left: auto; |
|||
margin-right: auto; |
|||
margin-bottom: 50rpx; |
|||
} |
|||
|
|||
.text-area { |
|||
display: flex; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.title { |
|||
font-size: 36rpx; |
|||
color: #8f8f94; |
|||
} |
|||
</style> |
@ -0,0 +1,93 @@ |
|||
import { BASE_URL, ERR_CODE } from 'api/base'; |
|||
import Request from './request'; |
|||
|
|||
const test = new Request(); |
|||
|
|||
/** |
|||
* 获取token |
|||
* @return {string} 本地保存的token |
|||
*/ |
|||
export const getToken = () => uni.getStorageSync('token'); |
|||
|
|||
test.setConfig((config) => { /* 设置全局配置 */ |
|||
config.baseUrl = BASE_URL; |
|||
config.header = { |
|||
...config.header, |
|||
} |
|||
return config |
|||
}) |
|||
|
|||
test.interceptor.request((config, cancel) => { /* 请求之前拦截器 */ |
|||
config.header = { |
|||
...config.header, |
|||
} |
|||
/* |
|||
if (!token) { // 如果token不存在,调用cancel 会取消本次请求,但是该函数的catch() 仍会执行
|
|||
cancel('token 不存在') // 接收一个参数,会传给catch((err) => {}) err.errMsg === 'token 不存在'
|
|||
} |
|||
*/ |
|||
return config |
|||
}) |
|||
|
|||
/** |
|||
* 自定义验证器,如果返回true 则进入响应拦截器的响应成功函数(resolve),否则进入响应拦截器的响应错误函数(reject) |
|||
* @param { Number } statusCode - 请求响应体statusCode(只读) |
|||
* @return { Boolean } 如果为true,则 resolve, 否则 reject |
|||
*/ |
|||
test.validateStatus = (statusCode) => { |
|||
return statusCode === ERR_CODE |
|||
} |
|||
|
|||
test.interceptor.response((response) => { /* 请求之后拦截器 */ |
|||
return response |
|||
}, (response) => { // 请求错误做点什么
|
|||
return response |
|||
}) |
|||
|
|||
const http = new Request() |
|||
|
|||
http.setConfig((config) => { // 设置全局配置
|
|||
config.baseUrl = BASE_URL; // 根域名不同
|
|||
|
|||
config.header = { |
|||
...config.header, |
|||
}; |
|||
return config |
|||
}) |
|||
|
|||
/** |
|||
* 自定义验证器,如果返回true 则进入响应拦截器的响应成功函数(resolve),否则进入响应拦截器的响应错误函数(reject) |
|||
* @param { Number } statusCode - 请求响应体statusCode(只读) |
|||
* @return { Boolean } 如果为true,则 resolve, 否则 reject |
|||
*/ |
|||
http.validateStatus = (statusCode) => { |
|||
return statusCode === ERR_CODE |
|||
} |
|||
|
|||
http.interceptor.request((config, cancel) => { /* 请求之前拦截器 */ |
|||
const token = getToken() ? { Authorization: `Bearer ${getToken()}` } : {}; |
|||
config.header = { |
|||
...config.header, |
|||
...token, |
|||
} |
|||
/* |
|||
if (!token) { // 如果token不存在,调用cancel 会取消本次请求,但是该函数的catch() 仍会执行
|
|||
cancel('token 不存在') // 接收一个参数,会传给catch((err) => {}) err.errMsg === 'token 不存在'
|
|||
} |
|||
*/ |
|||
return config |
|||
}) |
|||
|
|||
http.interceptor.response((response) => { /* 请求之后拦截器 */ |
|||
if (response.data.code !== ERR_CODE) { // 服务端返回的状态码不等于200,则reject()
|
|||
return Promise.reject(response) |
|||
} |
|||
return response |
|||
}, (response) => { // 请求错误做点什么
|
|||
return response |
|||
}) |
|||
|
|||
export { |
|||
http, |
|||
test |
|||
} |
@ -0,0 +1,273 @@ |
|||
**插件使用说明** |
|||
|
|||
- 基于 Promise 对象实现更简单的 request 使用方式,支持请求和响应拦截 |
|||
- 支持全局挂载 |
|||
- 支持多个全局配置实例 |
|||
- 支持自定义验证器 |
|||
- 支持文件上传(如不使用可以删除class里upload 方法) |
|||
- 支持` typescript `、` javascript ` 版本(如果不使用ts版本,则可以把luch-request-ts 文件夹删除) |
|||
- 下载后把 http-request 文件夹放到项目 utils/ 目录下 |
|||
|
|||
|
|||
**Example** |
|||
--- |
|||
创建实例 |
|||
|
|||
``` javascript |
|||
const http = new Request(); |
|||
``` |
|||
|
|||
执行` GET `请求 |
|||
|
|||
``` javascript |
|||
http.get('/user/login', {params: {userName: 'name', password: '123456'}}).then(res => { |
|||
|
|||
}).catch(err => { |
|||
|
|||
}) |
|||
// 局部修改配置,局部配置优先级高于全局配置 |
|||
http.get('/user/login', { |
|||
params: {userName: 'name', password: '123456'}, /* 会加在url上 */ |
|||
header: {}, /* 会覆盖全局header */ |
|||
dataType: 'json', |
|||
responseType: 'text' |
|||
}).then(res => { |
|||
|
|||
}).catch(err => { |
|||
|
|||
}) |
|||
``` |
|||
执行` POST `请求 |
|||
|
|||
``` javascript |
|||
http.post('/user/login', {userName: 'name', password: '123456'} ).then(res => { |
|||
|
|||
}).catch(err => { |
|||
|
|||
}) |
|||
// 局部修改配置,局部配置优先级高于全局配置 |
|||
http.post('/user/login', {userName: 'name', password: '123456'}, { |
|||
params: {}, /* 会加在url上 */ |
|||
header: {}, /* 会覆盖全局header */ |
|||
dataType: 'json', |
|||
responseType: 'text' |
|||
}).then(res => { |
|||
|
|||
}).catch(err => { |
|||
|
|||
}) |
|||
``` |
|||
执行` upload `请求 |
|||
|
|||
``` javascript |
|||
http.upload('api/upload/img', { |
|||
files: [], // 仅5+App支持 |
|||
fileType:'image/video/audio', // 仅支付宝小程序,且必填。 |
|||
filePath: '', // 要上传文件资源的路径。 |
|||
name: 'file', // 文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容 |
|||
header: {}, |
|||
formData: {}, // HTTP 请求中其他额外的 form data |
|||
}).then(res => { |
|||
|
|||
}).catch(err => { |
|||
|
|||
}) |
|||
``` |
|||
**luch-request API** |
|||
-- |
|||
``` javascript |
|||
http.request({ |
|||
method: 'POST', // 请求方法必须大写 |
|||
url: '/user/12345', |
|||
data: { |
|||
firstName: 'Fred', |
|||
lastName: 'Flintstone' |
|||
}, |
|||
params: { // 会拼接到url上 |
|||
token: '1111' |
|||
} |
|||
}) |
|||
|
|||
具体参数说明:[uni.uploadFile](https://uniapp.dcloud.io/api/request/network-file) |
|||
http.upload('api/upload/img', { |
|||
files: [], // 仅5+App支持 |
|||
fileType:'image/video/audio', // 仅支付宝小程序,且必填。 |
|||
filePath: '', // 要上传文件资源的路径。 |
|||
name: 'file', // 文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容 |
|||
header: {}, // 如填写,会覆盖全局header |
|||
formData: {}, // HTTP 请求中其他额外的 form data |
|||
}) |
|||
``` |
|||
|
|||
|
|||
请求方法别名 / 实例方法 |
|||
|
|||
``` javascript |
|||
http.request(config) |
|||
http.get(url[, config]) |
|||
http.upload(url[, config]) |
|||
http.delete(url[, data[, config]]) |
|||
http.head(url[, data[, config]]) |
|||
http.post(url[, data[, config]]) |
|||
http.put(url[, data[, config]]) |
|||
http.connect(url[, data[, config]]) |
|||
http.options(url[, data[, config]]) |
|||
http.trace(url[, data[, config]]) |
|||
``` |
|||
|
|||
**全局请求配置** |
|||
-- |
|||
``` javascript |
|||
{ |
|||
baseUrl: '', /* 全局根路径,需要注意,如果请求的路径为绝对路径,则不会应用baseUrl */ |
|||
header: { |
|||
'Content-Type': 'application/json;charset=UTF-8' |
|||
}, |
|||
method: 'GET', |
|||
dataType: 'json', |
|||
responseType: 'text' |
|||
} |
|||
``` |
|||
|
|||
|
|||
全局配置修改` setConfig ` |
|||
|
|||
``` javascript |
|||
/** |
|||
* @description 修改全局默认配置 |
|||
* @param {Function} |
|||
*/ |
|||
http.setConfig((config) => { /* config 为默认全局配置*/ |
|||
config.baseUrl = 'http://www.bbb.cn'; /* 根域名 */ |
|||
config.header = { |
|||
a: 1, |
|||
b: 2 |
|||
} |
|||
return config |
|||
}) |
|||
``` |
|||
|
|||
自定义验证器` validateStatus ` |
|||
|
|||
``` javascript |
|||
/** |
|||
* 自定义验证器,如果返回true 则进入响应拦截器的响应成功函数(resolve),否则进入响应拦截器的响应错误函数(reject) |
|||
* @param { Number } statusCode - 请求响应体statusCode(只读) |
|||
* @return { Boolean } 如果为true,则 resolve, 否则 reject |
|||
*/ |
|||
http.validateStatus = (statusCode) => { // 默认 |
|||
return statusCode === 200 |
|||
} |
|||
|
|||
// 举个栗子 |
|||
http.validateStatus = (statusCode) => { |
|||
return statusCode >= 200 && statusCode < 300 |
|||
} |
|||
``` |
|||
|
|||
**拦截器** |
|||
-- |
|||
|
|||
在请求之前拦截 |
|||
|
|||
``` javascript |
|||
/** |
|||
* @param { Function} cancel - 取消请求,调用cancel 会取消本次请求,但是该函数的catch() 仍会执行; 不会进入响应拦截器 |
|||
* |
|||
* @param {String} text ['handle cancel'| any] - catch((err) => {}) err.errMsg === 'handle cancel'。非必传,默认'handle cancel' |
|||
* @cancel {Object} config - catch((err) => {}) err.config === config; 非必传,默认为request拦截器修改之前的config |
|||
* function cancel(text, config) {} |
|||
*/ |
|||
http.interceptor.request((config, cancel) => { /* cancel 为函数,如果调用会取消本次请求。需要注意:调用cancel,本次请求的catch仍会执行。必须return config */ |
|||
config.header = { |
|||
...config.header, |
|||
a: 1 |
|||
} |
|||
/* |
|||
if (!token) { // 如果token不存在,调用cancel 会取消本次请求,但是该函数的catch() 仍会执行 |
|||
cancel('token 不存在', config) // 把修改后的config传入,之后响应就可以拿到修改后的config。 如果调用了cancel但是不传修改后的config,则catch((err) => {}) err.config 为request拦截器修改之前的config |
|||
} |
|||
*/ |
|||
return config; |
|||
}) |
|||
``` |
|||
|
|||
在请求之后拦截 |
|||
|
|||
``` javascript |
|||
http.interceptor.response((response) => { /* 对响应成功做点什么 (statusCode === 200),必须return response*/ |
|||
// if (response.data.code !== 200) { // 服务端返回的状态码不等于200,则reject() |
|||
// return Promise.reject(response) |
|||
// } |
|||
console.log(response) |
|||
return response |
|||
}, (response) => { /* 对响应错误做点什么 (statusCode !== 200),必须return response*/ |
|||
console.log(response) |
|||
return response |
|||
}) |
|||
``` |
|||
|
|||
**typescript使用** |
|||
-- |
|||
在` request.ts `里还暴露了五个接口 |
|||
```javascript |
|||
{ |
|||
options, // request 方法配置参数 |
|||
handleOptions, // get/post 方法配置参数 |
|||
config, // init 全局config接口(setConfig 参数接口) |
|||
requestConfig, // 请求之前参数配置项 |
|||
response // 响应体 |
|||
} |
|||
``` |
|||
|
|||
**常见问题** |
|||
-- |
|||
1. 为什么会请求两次? |
|||
- 总有些小白问这些很那啥的问题,有两种可能,一种是‘post三次握手’(不知道的请先给个五星好评,然后打自己一巴掌,并问自己,为什么这都不知道),还有一种可能是`本地访问接口时跨域请求,所以浏览器会先发一个option 去预测能否成功,然后再发一个真正的请求`(没有自己观察请求头,Request Method,就跑来问的,请再打自己一巴掌,并问自己,为什么这都不知道,不知道也行,为什么不百度)。 |
|||
2. 如何跨域? |
|||
- 问的人不少,可以先百度了解一下。<a href="https://ask.dcloud.net.cn/article/35267" target="_blank">如何跨域</a> |
|||
3. post 怎么传不了数组的参数啊? |
|||
- <a href="https://uniapp.dcloud.io/api/request/request">uni-request</a> <br> |
|||
可以点击看一下uni-request 的api 文档,data支持的文件类型只有<code>Object/String/ArrayBuffer</code>这个真跟我没啥关系 0.0 |
|||
4. 'Content-Type' 为什么要小写? |
|||
- hbuilderX 更新至‘2.3.0.20190919’ 后,uni.request post请求,如果 ‘Content-Type’ 大写,就会在后面自动拼接‘ application/json’,请求头变成 |
|||
`Content-Type: application/json;charset=UTF-8 application/json`,导致后端无法解析类型,`Status Code 415`,post 请求失败。但是小写就不会出现这个问题。至于为什么我也没有深究,我现在也不清楚这是他们的bug,还是以后就这样规范了。我能做的只有立马兼容,至于后边uni官方会不会继续变动也不清楚。 |
|||
|
|||
|
|||
**tip** |
|||
-- |
|||
- 不想使用upload 可把class 里的upload 删除 |
|||
|
|||
|
|||
**issue** |
|||
-- |
|||
有任何问题或者建议可以=> <a href="https://ask.dcloud.net.cn/question/74922" target="_blank">issue提交</a>,先给个五星好评QAQ!! |
|||
|
|||
|
|||
**作者想说** |
|||
-- |
|||
- 主体代码3kb |
|||
- 目前该插件已经上项目,遇到任何问题请先检查自己的代码(排除新版本发布的情况)。最近新上了` typescript ` 版本,因为本人没使用过ts,所以写的不好的地方,还请见谅~ |
|||
- 写代码很容易,为了让你们看懂写文档真的很lei 0.0 |
|||
- 最近发现有插件与我雷同,当初接触uni-app 就发现插件市场虽然有封装的不错的request库,但是都没有对多全局配置做处理,都是通过修改源码的方式配置。我首先推出通过class类,并仿照axios的api实现request请求库,并起名‘仿axios封装request网络请求库,支持拦截器全局配置’。他们虽然修改了部分代码,但是功能与性能并没有优化,反而使代码很冗余。希望能推出新的功能,和性能更加强悍的请求库。 |
|||
- 任何形式的‘参考’、‘借鉴’,请标明作者 |
|||
```javascript |
|||
<a href="https://ext.dcloud.net.cn/plugin?id=392">luch-request</a> |
|||
``` |
|||
- 关于问问题 |
|||
1. 首先请善于利用搜索引擎,不管百度,还是Google,遇到问题请先自己尝试解决。自己尝试过无法解决,再问。 |
|||
2. 不要问类似为什么我的xx无法使用这种问题。请仔细阅读文档,检查代码,或者说明运行环境,把相关代码贴至评论或者发送至我的邮箱,还可以点击上面的issue提交,在里面提问,可能我在里面已经回答了。 |
|||
3. 我的代码如果真的出现bug,或者你有好的建议、需求,可以提issue,我看到后会立即解决 |
|||
4. 不要问一些弱智问题!!! |
|||
- 如何问问题 |
|||
1. 仔细阅读文档,检查代码 |
|||
2. 说明运行环境,比如:app端 ios、android 版本号、手机机型、普遍现象还是个别现象(越详细越好) |
|||
3. 发出代码片段或者截图至邮箱(很重要) |
|||
4. 或者可以在上方的'issue提交' 里发出详细的问题描述 |
|||
5. 以上都觉得解决不了你的问题,可以加QQ:`370306150` |
|||
|
|||
**土豪赞赏** |
|||
-- |
|||
<img src="https://img-cdn-qiniu.dcloud.net.cn/uploads/answer/20191014/0d9fff1e6a57a83024787224593b39c1.png" width="150"> |
|||
|
|||
####创作不易,五星好评你懂得! |
@ -0,0 +1,316 @@ |
|||
/** |
|||
* Request 1.0.2 |
|||
* @Class Request |
|||
* @description luch-request 1.0.2 http请求插件 |
|||
* @Author lu-ch |
|||
* @Date 2019-10-14 |
|||
* @Email webwork.s@qq.com |
|||
* http://ext.dcloud.net.cn/plugin?id=392
|
|||
*/ |
|||
export default class Request { |
|||
config = { |
|||
baseUrl: '', |
|||
header: { |
|||
'content-type': 'application/json;charset=UTF-8' |
|||
}, |
|||
method: 'GET', |
|||
dataType: 'json', |
|||
responseType: 'text' |
|||
} |
|||
|
|||
static posUrl (url) { /* 判断url是否为绝对路径 */ |
|||
return /(http|https):\/\/([\w.]+\/?)\S*/.test(url) |
|||
} |
|||
|
|||
static addQueryString (params) { |
|||
let paramsData = '' |
|||
Object.keys(params).forEach(function (key) { |
|||
paramsData += key + '=' + params[key] + '&' |
|||
}) |
|||
return paramsData.substring(0, paramsData.length - 1) |
|||
} |
|||
|
|||
/** |
|||
* @property {Function} request 请求拦截器 |
|||
* @property {Function} response 响应拦截器 |
|||
* @type {{request: Request.interceptor.request, response: Request.interceptor.response}} |
|||
*/ |
|||
interceptor = { |
|||
/** |
|||
* @param {Request~requestCallback} cb - 请求之前拦截,接收一个函数(config, cancel)=> {return config}。第一个参数为全局config,第二个参数为函数,调用则取消本次请求。 |
|||
*/ |
|||
request: (cb) => { |
|||
if (cb) { |
|||
this.requestBeforeFun = cb |
|||
} |
|||
}, |
|||
/** |
|||
* @param {Request~responseCallback} cb 响应拦截器,对响应数据做点什么 |
|||
* @param {Request~responseErrCallback} ecb 响应拦截器,对响应错误做点什么 |
|||
*/ |
|||
response: (cb, ecb) => { |
|||
if (cb && ecb) { |
|||
this.requestComFun = cb |
|||
this.requestComFail = ecb |
|||
} |
|||
} |
|||
} |
|||
|
|||
requestBeforeFun (config) { |
|||
return config |
|||
} |
|||
|
|||
requestComFun (response) { |
|||
return response |
|||
} |
|||
|
|||
requestComFail (response) { |
|||
return response |
|||
} |
|||
|
|||
/** |
|||
* 自定义验证器,如果返回true 则进入响应拦截器的响应成功函数(resolve),否则进入响应拦截器的响应错误函数(reject) |
|||
* @param { Number } statusCode - 请求响应体statusCode(只读) |
|||
* @return { Boolean } 如果为true,则 resolve, 否则 reject |
|||
*/ |
|||
validateStatus (statusCode) { |
|||
return statusCode === 200 |
|||
} |
|||
|
|||
/** |
|||
* @Function |
|||
* @param {Request~setConfigCallback} f - 设置全局默认配置 |
|||
*/ |
|||
setConfig (f) { |
|||
this.config = f(this.config) |
|||
} |
|||
|
|||
/** |
|||
* @Function |
|||
* @param {Object} options - 请求配置项 |
|||
* @prop {String} options.url - 请求路径 |
|||
* @prop {Object} options.data - 请求参数 |
|||
* @prop {Object} [options.responseType = config.responseType] [text|arraybuffer] - 响应的数据类型 |
|||
* @prop {Object} [options.dataType = config.dataType] - 如果设为 json,会尝试对返回的数据做一次 JSON.parse |
|||
* @prop {Object} [options.header = config.header] - 请求header |
|||
* @prop {Object} [options.method = config.method] - 请求方法 |
|||
* @returns {Promise<unknown>} |
|||
*/ |
|||
async request (options = {}) { |
|||
options.baseUrl = this.config.baseUrl |
|||
options.dataType = options.dataType || this.config.dataType |
|||
options.responseType = options.responseType || this.config.responseType |
|||
options.url = options.url || '' |
|||
options.data = options.data || {} |
|||
options.params = options.params || {} |
|||
options.header = options.header || this.config.header |
|||
options.method = options.method || this.config.method |
|||
return new Promise((resolve, reject) => { |
|||
let next = true |
|||
|
|||
let handleRe = {} |
|||
options.complete = (response) => { |
|||
response.config = handleRe |
|||
if (this.validateStatus(response.statusCode)) { // 成功
|
|||
response = this.requestComFun(response) |
|||
resolve(response) |
|||
} else { |
|||
response = this.requestComFail(response) |
|||
reject(response) |
|||
} |
|||
} |
|||
const cancel = (t = 'handle cancel', config = options) => { |
|||
const err = { |
|||
errMsg: t, |
|||
config: config |
|||
} |
|||
reject(err) |
|||
next = false |
|||
} |
|||
|
|||
handleRe = { ...this.requestBeforeFun(options, cancel) } |
|||
const _config = { ...handleRe } |
|||
if (!next) return |
|||
|
|||
let mergeUrl = Request.posUrl(options.url) ? options.url : (options.baseUrl + options.url) |
|||
if (JSON.stringify(options.params) !== '{}') { |
|||
const paramsH = Request.addQueryString(options.params) |
|||
mergeUrl += mergeUrl.indexOf('?') === -1 ? `?${paramsH}` : `&${paramsH}` |
|||
} |
|||
_config.url = mergeUrl |
|||
uni.request(_config) |
|||
}) |
|||
} |
|||
|
|||
get (url, options = {}) { |
|||
return this.request({ |
|||
url, |
|||
method: 'GET', |
|||
...options |
|||
}) |
|||
} |
|||
|
|||
post (url, data, options = {}) { |
|||
return this.request({ |
|||
url, |
|||
data, |
|||
method: 'POST', |
|||
...options |
|||
}) |
|||
} |
|||
|
|||
// #ifndef MP-ALIPAY
|
|||
put (url, data, options = {}) { |
|||
return this.request({ |
|||
url, |
|||
data, |
|||
method: 'PUT', |
|||
...options |
|||
}) |
|||
} |
|||
|
|||
// #endif
|
|||
|
|||
// #ifdef APP-PLUS || H5 || MP-WEIXIN || MP-BAIDU
|
|||
delete (url, data, options = {}) { |
|||
return this.request({ |
|||
url, |
|||
data, |
|||
method: 'DELETE', |
|||
...options |
|||
}) |
|||
} |
|||
|
|||
// #endif
|
|||
|
|||
// #ifdef APP-PLUS || H5 || MP-WEIXIN
|
|||
connect (url, data, options = {}) { |
|||
return this.request({ |
|||
url, |
|||
data, |
|||
method: 'CONNECT', |
|||
...options |
|||
}) |
|||
} |
|||
|
|||
// #endif
|
|||
|
|||
// #ifdef APP-PLUS || H5 || MP-WEIXIN || MP-BAIDU
|
|||
head (url, data, options = {}) { |
|||
return this.request({ |
|||
url, |
|||
data, |
|||
method: 'HEAD', |
|||
...options |
|||
}) |
|||
} |
|||
|
|||
// #endif
|
|||
|
|||
// #ifdef APP-PLUS || H5 || MP-WEIXIN || MP-BAIDU
|
|||
options (url, data, options = {}) { |
|||
return this.request({ |
|||
url, |
|||
data, |
|||
method: 'OPTIONS', |
|||
...options |
|||
}) |
|||
} |
|||
|
|||
// #endif
|
|||
|
|||
// #ifdef APP-PLUS || H5 || MP-WEIXIN
|
|||
trace (url, data, options = {}) { |
|||
return this.request({ |
|||
url, |
|||
data, |
|||
method: 'TRACE', |
|||
...options |
|||
}) |
|||
} |
|||
|
|||
// #endif
|
|||
|
|||
upload (url, { |
|||
// #ifdef APP-PLUS
|
|||
files, |
|||
// #endif
|
|||
// #ifdef MP-ALIPAY
|
|||
fileType, |
|||
// #endif
|
|||
filePath, |
|||
name, |
|||
header, |
|||
formData |
|||
}) { |
|||
return new Promise((resolve, reject) => { |
|||
let next = true |
|||
let handleRe = {} |
|||
const pubConfig = { |
|||
baseUrl: this.config.baseUrl, |
|||
url, |
|||
// #ifdef APP-PLUS
|
|||
files, |
|||
// #endif
|
|||
// #ifdef MP-ALIPAY
|
|||
fileType, |
|||
// #endif
|
|||
filePath, |
|||
method: 'UPLOAD', |
|||
name, |
|||
header: header || this.config.header, |
|||
formData, |
|||
complete: (response) => { |
|||
response.config = handleRe |
|||
if (response.statusCode === 200) { // 成功
|
|||
response = this.requestComFun(response) |
|||
resolve(response) |
|||
} else { |
|||
response = this.requestComFail(response) |
|||
reject(response) |
|||
} |
|||
} |
|||
} |
|||
const cancel = (t = 'handle cancel', config = pubConfig) => { |
|||
const err = { |
|||
errMsg: t, |
|||
config: config |
|||
} |
|||
reject(err) |
|||
next = false |
|||
} |
|||
|
|||
handleRe = { ...this.requestBeforeFun(pubConfig, cancel) } |
|||
const _config = { ...handleRe } |
|||
if (!next) return |
|||
_config.url = Request.posUrl(url) ? url : (this.config.baseUrl + url) |
|||
uni.uploadFile(_config) |
|||
}) |
|||
} |
|||
} |
|||
|
|||
/** |
|||
* setConfig回调 |
|||
* @return {Object} - 返回操作后的config |
|||
* @callback Request~setConfigCallback |
|||
* @param {Object} config - 全局默认config |
|||
*/ |
|||
/** |
|||
* 请求拦截器回调 |
|||
* @return {Object} - 返回操作后的config |
|||
* @callback Request~requestCallback |
|||
* @param {Object} config - 全局config |
|||
* @param {Function} [cancel] - 取消请求钩子,调用会取消本次请求 |
|||
*/ |
|||
/** |
|||
* 响应拦截器回调 |
|||
* @return {Object} - 返回操作后的response |
|||
* @callback Request~responseCallback |
|||
* @param {Object} response - 请求结果 response |
|||
*/ |
|||
/** |
|||
* 响应错误拦截器回调 |
|||
* @return {Object} - 返回操作后的response |
|||
* @callback Request~responseErrCallback |
|||
* @param {Object} response - 请求结果 response |
|||
*/ |
After Width: | Height: | Size: 3.9 KiB |
@ -0,0 +1,120 @@ |
|||
/* 颜色变量 */ |
|||
/* 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; |
@ -0,0 +1,20 @@ |
|||
const path = require('path'); |
|||
const resolve = dir => path.join(__dirname, dir); |
|||
|
|||
module.exports = { |
|||
lintOnSave: true, |
|||
configureWebpack: { |
|||
resolve: { |
|||
alias: { |
|||
config: resolve('config'), |
|||
api: resolve('config/api'), |
|||
store: resolve('store'), |
|||
components: resolve('components'), |
|||
pages: resolve('pages'), |
|||
common: resolve('common'), |
|||
plugins: resolve('plugins'), |
|||
utils: resolve('utils'), |
|||
}, |
|||
}, |
|||
}, |
|||
}; |
Loading…
Reference in new issue