libaogang
1 year ago
30 changed files with 922 additions and 516 deletions
@ -0,0 +1,118 @@ |
|||||
|
<template> |
||||
|
<view class="im-nav-bar"> |
||||
|
<!-- #ifndef H5 --> |
||||
|
<view style="height: var(--status-bar-height)"></view> |
||||
|
<!-- #endif --> |
||||
|
<view class="im-nav-bar-content"> |
||||
|
<view class="back" @click="handleBackClick" v-if="back"> |
||||
|
<uni-icons type="back" :size="iconFontSize"></uni-icons> |
||||
|
</view> |
||||
|
<view class="title" v-if="title"> |
||||
|
<slot></slot> |
||||
|
</view> |
||||
|
<view class="btn"> |
||||
|
<uni-icons class="btn-item" v-if="search" type="search" :size="iconFontSize" @click="$emit('search')"></uni-icons> |
||||
|
<uni-icons class="btn-item" v-if="add" type="plusempty" :size="iconFontSize" @click="$emit('add')"></uni-icons> |
||||
|
<uni-icons class="btn-item" v-if="more" type="more-filled" :size="iconFontSize" @click="$emit('more')"></uni-icons> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: "nav-bar", |
||||
|
props: { |
||||
|
back: { |
||||
|
type: Boolean, |
||||
|
default: false |
||||
|
}, |
||||
|
title: { |
||||
|
type: Boolean, |
||||
|
default: true |
||||
|
}, |
||||
|
search: { |
||||
|
type: Boolean, |
||||
|
default: false |
||||
|
}, |
||||
|
add: { |
||||
|
type: Boolean, |
||||
|
default: false |
||||
|
}, |
||||
|
more: { |
||||
|
type: Boolean, |
||||
|
default: false |
||||
|
}, |
||||
|
iconFontSize: { |
||||
|
type: Number, |
||||
|
default: 24 |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return {} |
||||
|
}, |
||||
|
computed: { |
||||
|
height() { |
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
handleBackClick() { |
||||
|
uni.navigateBack({ |
||||
|
delta: 1 |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
.im-nav-bar { |
||||
|
background-color: #fff; |
||||
|
//background-color: $im-bg; |
||||
|
position: fixed; |
||||
|
top: 0; |
||||
|
width: 100%; |
||||
|
color: $im-text-color; |
||||
|
border-bottom: 1px solid $im-border-light; |
||||
|
font-size: $im-font-size-large; |
||||
|
z-index: 99; |
||||
|
|
||||
|
.im-nav-bar-content { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
box-sizing: border-box; |
||||
|
height: $im-nav-bar-height; |
||||
|
|
||||
|
.title { |
||||
|
} |
||||
|
|
||||
|
.back { |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
height: 100%; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
padding: 12px; |
||||
|
font-size: 22px; |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
|
||||
|
.btn { |
||||
|
position: absolute; |
||||
|
right: 0; |
||||
|
height: 100%; |
||||
|
display: flex; |
||||
|
padding: 12px; |
||||
|
align-items: center; |
||||
|
box-sizing: border-box; |
||||
|
|
||||
|
.btn-item { |
||||
|
margin-left: 8px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,60 @@ |
|||||
|
// 颜色 |
||||
|
$im-color-primary: #3e45d7; |
||||
|
$im-color-primary-light-1: mix(#fff, $im-color-primary, 10%); |
||||
|
$im-color-primary-light-2: mix(#fff, $im-color-primary, 20%); |
||||
|
$im-color-primary-light-3: mix(#fff, $im-color-primary, 30%); |
||||
|
$im-color-primary-light-4: mix(#fff, $im-color-primary, 40%); |
||||
|
$im-color-primary-light-5: mix(#fff, $im-color-primary, 50%); |
||||
|
$im-color-primary-light-6: mix(#fff, $im-color-primary, 60%); |
||||
|
$im-color-primary-light-7: mix(#fff, $im-color-primary, 70%); |
||||
|
$im-color-primary-light-8: mix(#fff, $im-color-primary, 80%); |
||||
|
$im-color-primary-light-9: mix(#fff, $im-color-primary, 90%); |
||||
|
$im-color-primary-dark-1: mix(#000, $im-color-primary, 10%); |
||||
|
$im-color-primary-dark-2: mix(#000, $im-color-primary, 20%); |
||||
|
$im-color-primary-dark-3: mix(#000, $im-color-primary, 30%); |
||||
|
$im-color-primary-dark-4: mix(#000, $im-color-primary, 40%); |
||||
|
|
||||
|
$im-color-success: #18bc37; |
||||
|
$im-color-warning: #f3a73f; |
||||
|
$im-color-danger: #e43d33; |
||||
|
$im-color-info: #8f939c; |
||||
|
|
||||
|
// 文字颜色 |
||||
|
$im-text-color: #000000; |
||||
|
$im-text-color-light: #6a6a6a; |
||||
|
$im-text-color-lighter: #909399; |
||||
|
$im-text-color-lighter-extra: #c7c7c7; |
||||
|
|
||||
|
// 边框颜色 |
||||
|
$im-border: #F0F0F0; |
||||
|
$im-border-light: #EDEDED; |
||||
|
$im-border-lighter: #DCDCDC; |
||||
|
$im-border-lighter-extra: #B9B9B9; |
||||
|
|
||||
|
// 文字大小 |
||||
|
$im-font-size: 30rpx; |
||||
|
$im-font-size-small: 28rpx; |
||||
|
$im-font-size-smaller: 26rpx; |
||||
|
$im-font-size-smaller-extra: 24rpx; |
||||
|
$im-font-size-large: 32rpx; |
||||
|
$im-font-size-larger: 34rpx; |
||||
|
$im-font-size-larger-extra: 36rpx; |
||||
|
|
||||
|
// 阴影 |
||||
|
$im-box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04); |
||||
|
$im-box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1); |
||||
|
$im-box-shadow-lighter: 0px 0px 6px rgba(0, 0, 0, .12); |
||||
|
$im-box-shadow-dark: 0px 1px 10px 2px rgba($color: #a5a4a4, $alpha: 0.5); |
||||
|
|
||||
|
// 背景 |
||||
|
$im-bg: #f7f7f7; |
||||
|
$im-bg-active: #f1f1f1; |
||||
|
|
||||
|
// 标题 |
||||
|
$im-title-size: 26px; |
||||
|
$im-title-size-1: 22px; |
||||
|
$im-title-size-2: 18px; |
||||
|
|
||||
|
$font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif; |
||||
|
|
||||
|
$im-nav-bar-height: 50px; |
||||
@ -0,0 +1,141 @@ |
|||||
|
/** 原生button样式 **/ |
||||
|
uni-button { |
||||
|
font-size: $im-font-size !important; |
||||
|
} |
||||
|
uni-button[type='primary'] { |
||||
|
colo: #fff !important; |
||||
|
background-color: $im-color-primary !important; |
||||
|
} |
||||
|
|
||||
|
uni-button[type='primary'][plain] { |
||||
|
color: $im-color-primary !important; |
||||
|
border: 1px solid $im-color-primary; |
||||
|
background-color: transparent; |
||||
|
} |
||||
|
|
||||
|
uni-button[type='warn'] { |
||||
|
colo: #fff !important; |
||||
|
background-color: $im-color-danger !important; |
||||
|
} |
||||
|
|
||||
|
uni-button[type='warn'][plain] { |
||||
|
color: $im-color-danger !important; |
||||
|
border: 1px solid $im-color-danger !important; |
||||
|
background-color: transparent !important; |
||||
|
} |
||||
|
|
||||
|
uni-button[size='mini'] { |
||||
|
font-size: $im-font-size-smaller !important; |
||||
|
} |
||||
|
|
||||
|
.button-hover[type='primary'] { |
||||
|
colo: #fff !important; |
||||
|
background-color: $im-color-primary-dark-1 !important; |
||||
|
} |
||||
|
|
||||
|
/** uni-ui input激活后边框、图标颜色 **/ |
||||
|
.uni-easyinput__content.is-focused:not(.is-input-error-border) { |
||||
|
border-color: $im-color-primary-light-2 !important; |
||||
|
|
||||
|
.content-clear-icon { |
||||
|
color: $im-color-primary-light-2 !important; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** 底部导航 **/ |
||||
|
.uni-tabbar-bottom .uni-tabbar { |
||||
|
box-shadow: $im-box-shadow; |
||||
|
} |
||||
|
|
||||
|
.uni-tabbar-border { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
.segmented-control { |
||||
|
border-color: $im-color-primary !important; |
||||
|
|
||||
|
.segmented-control__item--button { |
||||
|
border-color: $im-color-primary !important; |
||||
|
} |
||||
|
.segmented-control__item--button--active { |
||||
|
background-color: $im-color-primary !important; |
||||
|
|
||||
|
.segmented-control__text{ |
||||
|
color: #fff !important; |
||||
|
} |
||||
|
} |
||||
|
.segmented-control__text{ |
||||
|
color: $im-color-primary !important; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.uni-radio-input { |
||||
|
//border-color: $im-color-primary !important; |
||||
|
//background-color: $im-color-primary !important; |
||||
|
} |
||||
|
|
||||
|
.uni-section__content-title { |
||||
|
font-size: $im-font-size !important; |
||||
|
color: $im-text-color-light; |
||||
|
} |
||||
|
|
||||
|
.uni-forms-item__label { |
||||
|
color: $im-text-color; |
||||
|
font-size: $im-font-size !important; |
||||
|
} |
||||
|
.uni-forms-item { |
||||
|
//margin-bottom: 8px !important; |
||||
|
} |
||||
|
.uni-easyinput__content-input { |
||||
|
font-size: $im-font-size !important; |
||||
|
} |
||||
|
.uni-easyinput__placeholder-class { |
||||
|
color: $im-text-color-lighter; |
||||
|
font-size: $im-font-size !important;; |
||||
|
} |
||||
|
.uni-easyinput__content-textarea { |
||||
|
font-size: $im-font-size !important;; |
||||
|
} |
||||
|
.uni-input-input:disabled { |
||||
|
color: $im-text-color-light; |
||||
|
} |
||||
|
.uni-forms-item.is-direction-top .uni-forms-item__label { |
||||
|
padding: 0 !important; |
||||
|
} |
||||
|
.uni-data-checklist .checklist-group .checklist-box .checklist-content .checklist-text { |
||||
|
font-size: $im-font-size !important; |
||||
|
} |
||||
|
.uni-card .uni-card__content { |
||||
|
color: unset !important; |
||||
|
padding: 10px 0 !important; |
||||
|
} |
||||
|
.uni-tag-text--small{ |
||||
|
font-size: 10px !important; |
||||
|
font-weight: bolder !important; |
||||
|
} |
||||
|
|
||||
|
.nav-bar { |
||||
|
height: 100rpx; |
||||
|
padding: 0 20rpx; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
background-color: white; |
||||
|
border-bottom: 1px solid $im-border; |
||||
|
|
||||
|
.nav-search { |
||||
|
flex: 1; |
||||
|
} |
||||
|
|
||||
|
.nav-add { |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.bottom-btn { |
||||
|
margin: 40rpx 40rpx; |
||||
|
|
||||
|
uni-button + uni-button { |
||||
|
margin-top: 20rpx; |
||||
|
} |
||||
|
} |
||||
Loading…
Reference in new issue