blue
1 year ago
committed by
Gitee
Gitee
142 changed files with 11303 additions and 10535 deletions
@ -0,0 +1,40 @@ |
|||||
|
<template> |
||||
|
<view class="arrow-bar"> |
||||
|
<text class="title">{{ title }}</text> |
||||
|
<uni-icons class="arrow" type="right" size="16"></uni-icons> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: "arrow-bar", |
||||
|
props: { |
||||
|
title: { |
||||
|
type: String, |
||||
|
required: true |
||||
|
} |
||||
|
}, |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.arrow-bar { |
||||
|
width: 100%; |
||||
|
height: 90rpx; |
||||
|
font-size: 30rpx; |
||||
|
color: black; |
||||
|
margin-top: 5rpx; |
||||
|
background-color: white; |
||||
|
line-height: 90rpx; |
||||
|
display: flex; |
||||
|
|
||||
|
.title { |
||||
|
flex: 1; |
||||
|
margin-left: 40rpx; |
||||
|
} |
||||
|
|
||||
|
.arrow { |
||||
|
margin-right: 40rpx; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,17 @@ |
|||||
|
<template> |
||||
|
<view class="bar-group"> |
||||
|
<slot></slot> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: "bar-group" |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.bar-group { |
||||
|
margin: 20rpx 0; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,68 @@ |
|||||
|
<template> |
||||
|
<view class="btn-bar" :style="style"> |
||||
|
<text v-if="icon" class="icon iconfont" :class="icon"></text> |
||||
|
<text class="title">{{ title }}</text> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: "btn-bar", |
||||
|
props: { |
||||
|
title: { |
||||
|
type: String, |
||||
|
required: true |
||||
|
}, |
||||
|
icon: { |
||||
|
type: String, |
||||
|
required: false |
||||
|
}, |
||||
|
type: { |
||||
|
type: String, |
||||
|
default: "normal" |
||||
|
}, |
||||
|
color: { |
||||
|
type: String, |
||||
|
default: "#000" |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
style() { |
||||
|
let color = "#000"; |
||||
|
switch (this.type) { |
||||
|
case 'danger': |
||||
|
color = "#f14747"; |
||||
|
break; |
||||
|
case 'primary': |
||||
|
color = "#35567f"; |
||||
|
break; |
||||
|
} |
||||
|
return `color: ${color};` |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.btn-bar { |
||||
|
width: 100%; |
||||
|
height: 100rpx; |
||||
|
margin-top: 5rpx; |
||||
|
background-color: white; |
||||
|
line-height: 100rpx; |
||||
|
text-align: center; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
|
||||
|
.icon { |
||||
|
font-size: 40rpx; |
||||
|
font-weight: 600; |
||||
|
margin-right: 10rpx; |
||||
|
} |
||||
|
|
||||
|
.title { |
||||
|
font-size: 32rpx; |
||||
|
font-weight: 600; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,61 @@ |
|||||
|
<template> |
||||
|
<view class="switch-bar"> |
||||
|
<text class="title">{{ title }}</text> |
||||
|
<switch class="switch" :checked="checked" color="#18bc37" @change="onChange"></switch> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: "switch-bar", |
||||
|
props: { |
||||
|
title: { |
||||
|
type: String, |
||||
|
required: true |
||||
|
}, |
||||
|
checked: { |
||||
|
type: Boolean, |
||||
|
default: false |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
value: this.checked |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
onChange(e) { |
||||
|
this.value = true; |
||||
|
setTimeout(() => { |
||||
|
this.value = false; |
||||
|
}, 100) |
||||
|
//this.value = false; |
||||
|
|
||||
|
this.$emit('change', e); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.switch-bar { |
||||
|
width: 100%; |
||||
|
height: 100rpx; |
||||
|
font-size: 34rpx; |
||||
|
color: black; |
||||
|
margin-top: 5rpx; |
||||
|
background-color: white; |
||||
|
line-height: 100rpx; |
||||
|
display: flex; |
||||
|
|
||||
|
.title { |
||||
|
flex: 1; |
||||
|
margin-left: 40rpx; |
||||
|
} |
||||
|
|
||||
|
.switch { |
||||
|
margin-right: 40rpx; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,121 @@ |
|||||
|
<template> |
||||
|
<view> |
||||
|
<view @longpress.stop="onLongPress($event)" @touchmove="onTouchMove" @touchend="onTouchEnd"> |
||||
|
<slot></slot> |
||||
|
</view> |
||||
|
<view v-if="isShowMenu" class="menu-mask" @touchstart="onClose()" @contextmenu.prevent=""></view> |
||||
|
<view v-if="isShowMenu" class="menu" :style="menuStyle"> |
||||
|
<view class="menu-item" v-for="(item) in items" :key="item.key" @click.prevent="onSelectMenu(item)"> |
||||
|
<text :style="itemStyle(item)"> {{ item.name }}</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: "long-press-menu", |
||||
|
data() { |
||||
|
return { |
||||
|
isShowMenu: false, |
||||
|
isTouchMove: false, |
||||
|
style: "" |
||||
|
} |
||||
|
}, |
||||
|
props: { |
||||
|
items: { |
||||
|
type: Array |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
onLongPress(e) { |
||||
|
if (this.isTouchMove) { |
||||
|
// 屏幕移动时不弹出 |
||||
|
return; |
||||
|
} |
||||
|
uni.getSystemInfo({ |
||||
|
success: (res) => { |
||||
|
let touches = e.touches[0]; |
||||
|
let style = ""; |
||||
|
/* 因 非H5端不兼容 style 属性绑定 Object ，所以拼接字符 */ |
||||
|
if (touches.clientY > (res.windowHeight / 2)) { |
||||
|
style = `bottom:${res.windowHeight - touches.clientY}px;`; |
||||
|
} else { |
||||
|
style = `top:${touches.clientY}px;`; |
||||
|
} |
||||
|
if (touches.clientX > (res.windowWidth / 2)) { |
||||
|
style += `right:${res.windowWidth - touches.clientX}px;`; |
||||
|
} else { |
||||
|
style += `left:${touches.clientX}px;`; |
||||
|
} |
||||
|
this.menuStyle = style; |
||||
|
// |
||||
|
this.$nextTick(() => { |
||||
|
this.isShowMenu = true; |
||||
|
}); |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
onTouchMove() { |
||||
|
this.onClose(); |
||||
|
this.isTouchMove = true; |
||||
|
}, |
||||
|
onTouchEnd() { |
||||
|
this.isTouchMove = false; |
||||
|
}, |
||||
|
onSelectMenu(item) { |
||||
|
this.$emit("select", item); |
||||
|
this.isShowMenu = false; |
||||
|
}, |
||||
|
onClose() { |
||||
|
this.isShowMenu = false; |
||||
|
}, |
||||
|
itemStyle(item) { |
||||
|
if (item.color) { |
||||
|
return `color:${item.color};` |
||||
|
} |
||||
|
return `color:#000;`; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.menu-mask { |
||||
|
position: fixed; |
||||
|
left: 0; |
||||
|
top: 0; |
||||
|
right: 0; |
||||
|
bottom: 0; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
z-index: 999; |
||||
|
} |
||||
|
|
||||
|
.menu { |
||||
|
position: fixed; |
||||
|
border-radius: 4px; |
||||
|
overflow: hidden; |
||||
|
background-color: #fff; |
||||
|
z-index: 1000; |
||||
|
box-shadow: $im-box-shadow-dark; |
||||
|
|
||||
|
.menu-item { |
||||
|
height: 28px; |
||||
|
min-width: 120rpx; |
||||
|
line-height: 28px; |
||||
|
font-size: $im-font-size-small; |
||||
|
display: flex; |
||||
|
padding: 6px 20px; |
||||
|
justify-content: flex-start; |
||||
|
|
||||
|
&:hover { |
||||
|
background: $im-bg-active; |
||||
|
} |
||||
|
|
||||
|
.menu-icon { |
||||
|
margin-right: 10rpx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,119 @@ |
|||||
|
<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> |
||||
@ -1,121 +0,0 @@ |
|||||
<template> |
|
||||
<view> |
|
||||
<view @longpress.stop="onLongPress($event)" @touchmove="onTouchMove" @touchend="onTouchEnd"> |
|
||||
<slot></slot> |
|
||||
</view> |
|
||||
<view v-if="isShowMenu" class="pop-menu" @touchstart="onClose()" @contextmenu.prevent=""></view> |
|
||||
<view v-if="isShowMenu" class="menu" :style="menuStyle"> |
|
||||
<view class="menu-item" v-for="(item) in items" :key="item.key" @click.prevent="onSelectMenu(item)"> |
|
||||
<uni-icons class="menu-icon" :type="item.icon" :style="itemStyle(item)" size="22"></uni-icons> |
|
||||
<text :style="itemStyle(item)"> {{item.name}}</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
export default { |
|
||||
name: "pop-menu", |
|
||||
data() { |
|
||||
return { |
|
||||
isShowMenu : false, |
|
||||
isTouchMove: false, |
|
||||
style : "" |
|
||||
} |
|
||||
}, |
|
||||
props: { |
|
||||
items: { |
|
||||
type: Array |
|
||||
} |
|
||||
}, |
|
||||
methods: { |
|
||||
onLongPress(e){ |
|
||||
if(this.isTouchMove){ |
|
||||
// 屏幕移动时不弹出 |
|
||||
return; |
|
||||
} |
|
||||
uni.getSystemInfo({ |
|
||||
success: (res) => { |
|
||||
let touches = e.touches[0]; |
|
||||
let style = ""; |
|
||||
/* 因 非H5端不兼容 style 属性绑定 Object ，所以拼接字符 */ |
|
||||
if (touches.clientY > (res.windowHeight / 2)) { |
|
||||
style = `bottom:${res.windowHeight-touches.clientY}px;`; |
|
||||
} else { |
|
||||
style = `top:${touches.clientY}px;`; |
|
||||
} |
|
||||
if (touches.clientX > (res.windowWidth / 2)) { |
|
||||
style += `right:${res.windowWidth-touches.clientX}px;`; |
|
||||
} else { |
|
||||
style += `left:${touches.clientX}px;`; |
|
||||
} |
|
||||
this.menuStyle = style; |
|
||||
// |
|
||||
this.$nextTick(() => { |
|
||||
this.isShowMenu = true; |
|
||||
}); |
|
||||
} |
|
||||
}) |
|
||||
}, |
|
||||
onTouchMove(){ |
|
||||
this.onClose(); |
|
||||
this.isTouchMove = true; |
|
||||
}, |
|
||||
onTouchEnd(){ |
|
||||
this.isTouchMove = false; |
|
||||
}, |
|
||||
onSelectMenu(item) { |
|
||||
this.$emit("select", item); |
|
||||
this.isShowMenu = false; |
|
||||
}, |
|
||||
onClose() { |
|
||||
this.isShowMenu = false; |
|
||||
}, |
|
||||
itemStyle(item){ |
|
||||
if(item.color){ |
|
||||
return `color:${item.color};` |
|
||||
} |
|
||||
return `color:#4f76e6;`; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.pop-menu { |
|
||||
position: fixed; |
|
||||
left: 0; |
|
||||
top: 0; |
|
||||
right: 0; |
|
||||
bottom: 0; |
|
||||
width: 100%; |
|
||||
height: 100%; |
|
||||
background-color: #333; |
|
||||
z-index: 999; |
|
||||
opacity: 0.5; |
|
||||
|
|
||||
} |
|
||||
|
|
||||
.menu { |
|
||||
position: fixed; |
|
||||
border: 1px solid #b4b4b4; |
|
||||
border-radius: 7px; |
|
||||
overflow: hidden; |
|
||||
background-color: #f5f6ff; |
|
||||
z-index: 1000; |
|
||||
.menu-item { |
|
||||
height: 25px; |
|
||||
min-width: 150rpx; |
|
||||
line-height: 25px; |
|
||||
font-size: 18px; |
|
||||
display: flex; |
|
||||
padding: 10px; |
|
||||
justify-content: center; |
|
||||
border-bottom: 1px solid #d0d0d8; |
|
||||
|
|
||||
.menu-icon { |
|
||||
margin-right: 10rpx; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</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'] { |
||||
|
color: #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'] { |
||||
|
color: #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'] { |
||||
|
color: #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; |
||||
|
} |
||||
|
} |
||||
|
Before Width: | Height: | Size: 162 KiB After Width: | Height: | Size: 238 KiB |
|
Before Width: | Height: | Size: 9.0 KiB After Width: | Height: | Size: 9.1 KiB |
|
Before Width: | Height: | Size: 6.1 KiB After Width: | Height: | Size: 8.4 KiB |
|
After Width: | Height: | Size: 205 KiB |
|
After Width: | Height: | Size: 7.6 KiB |
|
After Width: | Height: | Size: 9.8 KiB |
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 839 B |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 2.9 KiB |
|
After Width: | Height: | Size: 3.1 KiB |
|
After Width: | Height: | Size: 3.9 KiB |
|
After Width: | Height: | Size: 4.3 KiB |
|
After Width: | Height: | Size: 4.6 KiB |
|
After Width: | Height: | Size: 5.1 KiB |
|
After Width: | Height: | Size: 5.7 KiB |
|
Before Width: | Height: | Size: 62 KiB After Width: | Height: | Size: 141 KiB |
|
Before Width: | Height: | Size: 2.7 KiB |
|
Before Width: | Height: | Size: 3.4 KiB |
@ -0,0 +1,112 @@ |
|||||
|
/* 改变 icon 字体路径变量，必需 */ |
||||
|
$--font-path: '~element-ui/lib/theme-chalk/fonts'; |
||||
|
|
||||
|
// 文字 |
||||
|
$--font-family: Microsoft YaHei, 'Avenir', Helvetica, Arial, sans-serif; |
||||
|
@import "thems"; |
||||
|
@import "~element-ui/packages/theme-chalk/src/index"; |
||||
|
|
||||
|
.el-message { |
||||
|
z-index: 99999999 !important; |
||||
|
background: #fff !important; |
||||
|
box-shadow: 0 4px 12px 0 rgb(0 0 0 / 15%); |
||||
|
border: none !important; |
||||
|
min-width: unset !important; |
||||
|
border-radius: 3px !important; |
||||
|
padding: 14px 18px 14px 16px !important; |
||||
|
|
||||
|
.el-message__content { |
||||
|
color: #000 !important; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.el-scrollbar__thumb { |
||||
|
background-color: #A0A8AF !important; |
||||
|
} |
||||
|
|
||||
|
.el-dialog__title { |
||||
|
font-size: var(--im-font-size-larger); |
||||
|
color: var(--im-text-color); |
||||
|
} |
||||
|
|
||||
|
.el-dialog__header { |
||||
|
padding: 12px 18px !important; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.el-dialog__headerbtn { |
||||
|
top: 15px; |
||||
|
right: 20px; |
||||
|
font-size: 18px; |
||||
|
} |
||||
|
|
||||
|
.el-checkbox__inner { |
||||
|
border-radius: 50% !important; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.el-button--success { |
||||
|
//background-color: #688758 !important; |
||||
|
//border-color: #4cae1b !important; |
||||
|
} |
||||
|
|
||||
|
.el-button--danger { |
||||
|
//background-color: #ea4949 !important; |
||||
|
//border-color: #ea4949 !important; |
||||
|
} |
||||
|
|
||||
|
.el-button { |
||||
|
padding: 8px 15px !important; |
||||
|
} |
||||
|
|
||||
|
.el-checkbox { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
|
||||
|
//修改选中框的大小 |
||||
|
.el-checkbox__inner { |
||||
|
width: 16px; |
||||
|
height: 16px; |
||||
|
|
||||
|
//修改选中框中的对勾的大小和位置 |
||||
|
&::after { |
||||
|
height: 7px; |
||||
|
left: 5px; |
||||
|
top: 2px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 修改点击文字颜色不变 |
||||
|
.el-checkbox__input.is-checked + .el-checkbox__label { |
||||
|
color: #333333; |
||||
|
} |
||||
|
|
||||
|
.el-checkbox__label { |
||||
|
line-height: 20px; |
||||
|
padding-left: 8px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.el-form-item { |
||||
|
margin-bottom: 15px !important; |
||||
|
} |
||||
|
|
||||
|
.el-input--small { |
||||
|
font-size: $--font-size-base; |
||||
|
} |
||||
|
|
||||
|
.el-input__inner { |
||||
|
padding: 0 10px; |
||||
|
} |
||||
|
|
||||
|
.el-textarea__inner { |
||||
|
padding: 5px 10px; |
||||
|
font-family: $--font-family; |
||||
|
} |
||||
|
|
||||
|
.el-tag--mini { |
||||
|
height: 18px; |
||||
|
padding: 0 2px; |
||||
|
line-height: 16px; |
||||
|
border-radius: 2px; |
||||
|
} |
||||
@ -1,43 +0,0 @@ |
|||||
@charset "UTF-8"; |
|
||||
|
|
||||
html { |
|
||||
height: 100%; |
|
||||
overflow: hidden; |
|
||||
|
|
||||
} |
|
||||
|
|
||||
body { |
|
||||
height: 100%; |
|
||||
margin: 0; |
|
||||
overflow: hidden; |
|
||||
|
|
||||
} |
|
||||
|
|
||||
section { |
|
||||
height: 100%; |
|
||||
} |
|
||||
|
|
||||
.el-dialog__body{ |
|
||||
padding: 10px 15px !important; |
|
||||
} |
|
||||
|
|
||||
::-webkit-scrollbar { |
|
||||
width: 6px; |
|
||||
height: 1px; |
|
||||
} |
|
||||
|
|
||||
::-webkit-scrollbar-thumb { |
|
||||
/*滚动条里面小方块*/ |
|
||||
border-radius: 2px; |
|
||||
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); |
|
||||
background: #535353; |
|
||||
} |
|
||||
|
|
||||
::-webkit-scrollbar-track { |
|
||||
/*滚动条里面轨道*/ |
|
||||
-webkit-box-shadow: inset 0 0 5px transparent; |
|
||||
border-radius: 2px; |
|
||||
background: #ededed; |
|
||||
} |
|
||||
|
|
||||
/*# sourceMappingURL=v-im.cssss.map */ |
|
||||
@ -0,0 +1,91 @@ |
|||||
|
@charset "UTF-8"; |
||||
|
@import "element"; |
||||
|
|
||||
|
// im全局样式变量 |
||||
|
:root { |
||||
|
// 主色 |
||||
|
--im-color-primary: #{$--color-primary}; |
||||
|
--im-color-primary-light-1: #{$--color-primary-light-1}; |
||||
|
--im-color-primary-light-2: #{$--color-primary-light-2}; |
||||
|
--im-color-primary-light-3: #{$--color-primary-light-3}; |
||||
|
--im-color-primary-light-4: #{$--color-primary-light-4}; |
||||
|
--im-color-primary-light-5: #{$--color-primary-light-5}; |
||||
|
--im-color-primary-light-6: #{$--color-primary-light-6}; |
||||
|
--im-color-primary-light-7: #{$--color-primary-light-7}; |
||||
|
--im-color-primary-light-8: #{$--color-primary-light-8}; |
||||
|
--im-color-primary-light-9: #{$--color-primary-light-9}; |
||||
|
|
||||
|
--im-color-sucess: #{$--color-success}; |
||||
|
--im-color-warning: #{$--color-warning}; |
||||
|
--im-color-danger: #{$--color-danger}; |
||||
|
--im-color-info: #{$--color-info}; |
||||
|
|
||||
|
// 文字颜色 |
||||
|
--im-text-color: #{$--color-text-regular}; |
||||
|
--im-text-color-light: #999999; |
||||
|
--im-text-color-lighter: #C0C4CC; |
||||
|
|
||||
|
// 文字大小 |
||||
|
--im-font-size: #{$--font-size-base}; |
||||
|
--im-font-size-small: #{$--font-size-small}; |
||||
|
--im-font-size-smaller: #{$--font-size-extra-small}; |
||||
|
--im-font-size-large: #{$--font-size-medium}; |
||||
|
--im-font-size-larger: #{$--font-size-large}; |
||||
|
--im-font-family: #{$--font-family}; |
||||
|
|
||||
|
|
||||
|
// 边框颜色 |
||||
|
--im-border: 1px solid #EBEEF5; |
||||
|
|
||||
|
// 阴影 |
||||
|
--im-box-shadow: #{$--box-shadow-base}; |
||||
|
--im-box-shadow-light: #{$--box-shadow-light}; |
||||
|
--im-box-shadow-lighter: 0px 0px 6px rgba(0, 0, 0, .12); |
||||
|
--im-box-shadow-dark: 0px 16px 48px 16px rgba(0, 0, 0, .08), 0px 12px 32px rgba(0, 0, 0, .12), 0px 8px 16px -8px rgba(0, 0, 0, .16); |
||||
|
|
||||
|
// 背景色 |
||||
|
--im-background: #F3F3F3; |
||||
|
--im-background-active: #F1F1F1; |
||||
|
--im-background-active-dark: #E9E9E9; |
||||
|
} |
||||
|
|
||||
|
html { |
||||
|
height: 100%; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
|
||||
|
body { |
||||
|
height: 100%; |
||||
|
margin: 0; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
|
||||
|
section { |
||||
|
height: 100%; |
||||
|
} |
||||
|
|
||||
|
.el-dialog__body { |
||||
|
padding: 10px 20px !important; |
||||
|
} |
||||
|
|
||||
|
// 滚动条样式 |
||||
|
::-webkit-scrollbar { |
||||
|
width: 8px; |
||||
|
height: 1px; |
||||
|
} |
||||
|
|
||||
|
::-webkit-scrollbar-thumb { |
||||
|
border-radius: 4px; |
||||
|
background: hsla(0, 0%, 73%, .5); |
||||
|
} |
||||
|
|
||||
|
::-webkit-scrollbar-track { |
||||
|
border-radius: 4px; |
||||
|
} |
||||
|
|
||||
|
.search-input { |
||||
|
.el-input__inner { |
||||
|
border: unset !important; |
||||
|
} |
||||
|
|
||||
|
} |
||||
@ -0,0 +1,6 @@ |
|||||
|
// 主题色 |
||||
|
$--color-primary: #2830d3; |
||||
|
//$--color-primary: #687ff0; |
||||
|
//$--color-primary: #096bff; |
||||
|
$--font-size-base: 14px; |
||||
|
$--color-text-regular: #000000; |
||||
Some files were not shown because too many files changed in this diff
Loading…
Reference in new issue