报名工具小程序初始代码
This commit is contained in:
liupopo
BIN
components/firstui/.DS_Store
vendored
Normal file
BIN
components/firstui/.DS_Store
vendored
Normal file
Binary file not shown.
379
components/firstui/fui-button/fui-button.vue
Normal file
379
components/firstui/fui-button/fui-button.vue
Normal file
@@ -0,0 +1,379 @@
|
||||
<template>
|
||||
<view class="fui-button__wrap"
|
||||
:style="{width: width,height: height,marginTop:margin[0] || 0, marginRight:margin[1]||0,marginBottom:margin[2] || margin[0]||0,marginLeft:margin[3] || margin[1]||0,borderRadius: radius}"
|
||||
@touchstart="handleStart" @touchend="handleClick" @touchcancel="handleEnd" @tap="handleTap">
|
||||
<button class="fui-button" :class="[
|
||||
bold ? 'fui-text__bold' : '',
|
||||
time && (plain || type==='link') ? 'fui-button__opacity' : '',
|
||||
disabled && !disabledBackground ? 'fui-button__opacity' : '',
|
||||
!background && !disabledBackground && !plain?('fui-button__'+type):'',
|
||||
!width || width==='100%' || width==='true'?'fui-button__flex-1':'',
|
||||
time && !plain && type!=='link' ? 'fui-button__active' : ''
|
||||
]" :style="{
|
||||
width: width,
|
||||
height: height,
|
||||
lineHeight: height,
|
||||
background: disabled && disabledBackground ? disabledBackground : (plain ? 'transparent' : background),
|
||||
borderWidth:borderWidth,
|
||||
borderColor: borderColor ? borderColor : disabled && disabledBackground ? disabledBackground : (background || 'transparent'),
|
||||
borderRadius: radius,
|
||||
fontSize: size + 'rpx',
|
||||
color: disabled && disabledBackground ? disabledColor : color
|
||||
}" :loading="loading" :form-type="formType" :open-type="openType" @getuserinfo="bindgetuserinfo"
|
||||
@getphonenumber="bindgetphonenumber" @contact="bindcontact" @error="binderror"
|
||||
@opensetting="bindopensetting" :disabled="disabled" :scope="scope">
|
||||
<text class="fui-button__text"
|
||||
:class="{'fui-btn__gray-color':!background && !disabledBackground && !plain && type==='gray' && color==='#fff','fui-text__bold':bold}"
|
||||
v-if="text"
|
||||
:style="{fontSize: size + 'rpx',lineHeight:size + 'rpx',color: disabled && disabledBackground ? disabledColor : color}">{{text}}</text>
|
||||
<slot></slot>
|
||||
</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'fui-button',
|
||||
emits: ['click', 'getuserinfo', 'contact', 'getphonenumber', 'error', 'opensetting'],
|
||||
// #ifndef VUE3
|
||||
// #ifdef MP-WEIXIN
|
||||
behaviors: ['wx://form-field-button'],
|
||||
// #endif
|
||||
// #endif
|
||||
props: {
|
||||
//样式类型：primary，success， warning，danger，link，purple，gray
|
||||
type: {
|
||||
type: String,
|
||||
default: 'primary'
|
||||
},
|
||||
//按钮背景色，当传入值时type失效
|
||||
background: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
//按钮显示文本
|
||||
text: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
//按钮字体颜色
|
||||
color: {
|
||||
type: String,
|
||||
default: '#fff'
|
||||
},
|
||||
//按钮禁用背景色
|
||||
disabledBackground: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
//按钮禁用字体颜色
|
||||
disabledColor: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
borderWidth: {
|
||||
type: String,
|
||||
// #ifdef APP-NVUE
|
||||
default: '0.5px'
|
||||
// #endif
|
||||
// #ifndef APP-NVUE
|
||||
default: '1rpx'
|
||||
// #endif
|
||||
},
|
||||
borderColor: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
//宽度
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
//高度
|
||||
height: {
|
||||
type: String,
|
||||
default: '96rpx'
|
||||
},
|
||||
//字体大小，单位rpx
|
||||
size: {
|
||||
type: [Number, String],
|
||||
default: 32
|
||||
},
|
||||
bold: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
//['20rpx','30rpx','20rpx','30rpx']->[上，右，下，左]
|
||||
margin: {
|
||||
type: Array,
|
||||
default () {
|
||||
return ['0', '0']
|
||||
}
|
||||
},
|
||||
//圆角
|
||||
radius: {
|
||||
type: String,
|
||||
default: '16rpx'
|
||||
},
|
||||
plain: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
formType: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
openType: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
//支付宝小程序
|
||||
//当 open-type 为 getAuthorize 时，可以设置 scope 为：phoneNumber、userInfo
|
||||
scope: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
index: {
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
time: 0,
|
||||
trigger: false,
|
||||
tap: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleStart() {
|
||||
if (this.disabled) return;
|
||||
this.trigger = false;
|
||||
this.tap = true;
|
||||
if (new Date().getTime() - this.time <= 150) return;
|
||||
this.trigger = true;
|
||||
this.time = new Date().getTime();
|
||||
},
|
||||
handleClick() {
|
||||
if (this.disabled || !this.trigger) return;
|
||||
//如果想取消操作，比如长按再放开，这里可以做时间判断
|
||||
this.time = 0;
|
||||
this.$emit('click', {
|
||||
index: Number(this.index)
|
||||
});
|
||||
},
|
||||
handleTap() {
|
||||
// #ifdef H5
|
||||
if (this.disabled || this.tap) return;
|
||||
this.$emit('click', {
|
||||
index: Number(this.index)
|
||||
});
|
||||
// #endif
|
||||
},
|
||||
handleEnd() {
|
||||
if (this.disabled) return;
|
||||
setTimeout(() => {
|
||||
this.time = 0;
|
||||
}, 150);
|
||||
},
|
||||
bindgetuserinfo({
|
||||
detail = {}
|
||||
} = {}) {
|
||||
this.$emit('getuserinfo', detail);
|
||||
},
|
||||
bindcontact({
|
||||
detail = {}
|
||||
} = {}) {
|
||||
this.$emit('contact', detail);
|
||||
},
|
||||
bindgetphonenumber({
|
||||
detail = {}
|
||||
} = {}) {
|
||||
this.$emit('getphonenumber', detail);
|
||||
},
|
||||
binderror({
|
||||
detail = {}
|
||||
} = {}) {
|
||||
this.$emit('error', detail);
|
||||
},
|
||||
bindopensetting({
|
||||
detail = {}
|
||||
} = {}) {
|
||||
this.$emit('opensetting', detail);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.fui-button__wrap {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.fui-button {
|
||||
/* #ifdef APP-NVUE */
|
||||
border-width: 0.5px;
|
||||
/* #endif */
|
||||
/* #ifndef APP-NVUE */
|
||||
border-width: 1rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
/* #endif */
|
||||
border-style: solid;
|
||||
position: relative;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
overflow: hidden;
|
||||
/* #ifndef APP-NVUE */
|
||||
transform: translateZ(0);
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.fui-button__flex-1 {
|
||||
flex: 1;
|
||||
/* #ifndef APP-NVUE */
|
||||
width: 100%;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.fui-button::after {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/* #ifndef APP-NVUE */
|
||||
.fui-button__active {
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.fui-button__active::after {
|
||||
content: ' ';
|
||||
background-color: var(--fui-bg-color-hover, rgba(0, 0, 0, 0.2));
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
transform: none;
|
||||
z-index: 1;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
.fui-button__text {
|
||||
text-align: center;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center !important;
|
||||
padding-left: 0 !important;
|
||||
|
||||
}
|
||||
|
||||
.fui-button__opacity {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.fui-text__bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.fui-button__link {
|
||||
border-color: transparent !important;
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.fui-button__primary {
|
||||
/* #ifdef APP-NVUE */
|
||||
border-color: #465CFF !important;
|
||||
background: #465CFF !important;
|
||||
/* #endif */
|
||||
|
||||
/* #ifndef APP-NVUE */
|
||||
border-color: var(--fui-color-primary, #465CFF) !important;
|
||||
background: var(--fui-color-primary, #465CFF) !important;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.fui-button__success {
|
||||
/* #ifdef APP-NVUE */
|
||||
border-color: #09BE4F !important;
|
||||
background: #09BE4F !important;
|
||||
/* #endif */
|
||||
|
||||
/* #ifndef APP-NVUE */
|
||||
border-color: var(--fui-color-success, #09BE4F) !important;
|
||||
background: var(--fui-color-success, #09BE4F) !important;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.fui-button__warning {
|
||||
/* #ifdef APP-NVUE */
|
||||
border-color: #FFB703 !important;
|
||||
background: #FFB703 !important;
|
||||
/* #endif */
|
||||
|
||||
/* #ifndef APP-NVUE */
|
||||
border-color: var(--fui-color-warning, #FFB703) !important;
|
||||
background: var(--fui-color-warning, #FFB703) !important;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.fui-button__danger {
|
||||
/* #ifdef APP-NVUE */
|
||||
border-color: #FF2B2B !important;
|
||||
background: #FF2B2B !important;
|
||||
/* #endif */
|
||||
|
||||
/* #ifndef APP-NVUE */
|
||||
border-color: var(--fui-color-danger, #FF2B2B) !important;
|
||||
background: var(--fui-color-danger, #FF2B2B) !important;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.fui-button__purple {
|
||||
/* #ifdef APP-NVUE */
|
||||
border-color: #6831FF !important;
|
||||
background: #6831FF !important;
|
||||
/* #endif */
|
||||
|
||||
/* #ifndef APP-NVUE */
|
||||
border-color: var(--fui-color-purple, #6831FF) !important;
|
||||
background: var(--fui-color-purple, #6831FF) !important;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.fui-button__gray {
|
||||
/* #ifdef APP-NVUE */
|
||||
border-color: #F8F8F8 !important;
|
||||
background: #F8F8F8 !important;
|
||||
/* #endif */
|
||||
|
||||
/* #ifndef APP-NVUE */
|
||||
border-color: var(--fui-bg-color-content, #F8F8F8) !important;
|
||||
background: var(--fui-bg-color-content, #F8F8F8) !important;
|
||||
color: var(--fui-color-primary, #465CFF) !important;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.fui-btn__gray-color {
|
||||
/* #ifdef APP-NVUE */
|
||||
color: #465CFF !important;
|
||||
/* #endif */
|
||||
/* #ifndef APP-NVUE */
|
||||
color: var(--fui-color-primary, #465CFF) !important;
|
||||
/* #endif */
|
||||
}
|
||||
</style>
|
||||
445
components/firstui/fui-dropdown-menu/fui-dropdown-menu.vue
Normal file
445
components/firstui/fui-dropdown-menu/fui-dropdown-menu.vue
Normal file
@@ -0,0 +1,445 @@
|
||||
<template>
|
||||
<view class="fui-dropdown__menu">
|
||||
<slot></slot>
|
||||
<view class="fui-dropdown__menu-list"
|
||||
:class="{'fui-ddm__down':direction!=='up','fui-ddm__up':direction==='up','fui-ddm__down-show':isShow && direction!=='up','fui-ddm__up-show':isShow && direction==='up'}"
|
||||
:style="getStyles">
|
||||
<scroll-view class="fui-ddm__scroll" scroll-y :style="{maxHeight:maxHeight+'rpx',minWidth:minWidth+'rpx'}">
|
||||
<view class="fui-dropdown__menu-item" :style="{background:background,padding:padding}"
|
||||
:class="{'fui-ddm__reverse':isReverse,'fui-ddm__item-line':splitLine && itemList.length-1!==index}"
|
||||
v-for="(model,index) in itemList" :key="index" @tap.stop="itemClick(index)">
|
||||
<view class="fui-ddm__checkbox"
|
||||
:class="{'fui-is__checkmark':isCheckMark,'fui-ddm__checkbox-color':(!checkboxColor || checkboxColor=='true') && model.checked && !isCheckMark}"
|
||||
:style="{background:model.checked && !isCheckMark ?checkboxColor:'transparent',borderColor:model.checked && !isCheckMark ?checkboxColor:borderColor}"
|
||||
v-if="isCheckbox">
|
||||
<view class="fui-ddm__checkmark"
|
||||
:style="{borderBottomColor:checkmarkColor,borderRightColor:checkmarkColor}"
|
||||
v-if="model.checked"></view>
|
||||
</view>
|
||||
<view class="fui-ddm__flex">
|
||||
<view class="fui-ddm__icon-box"
|
||||
:class="{'fui-ddm__icon-ml':!isReverse && isCheckbox,'fui-ddm__icon-mr':isReverse}"
|
||||
:style="{width:iconWidth+'rpx',height:iconWidth+'rpx'}" v-if="model.src">
|
||||
<image src="/static/images/common/logo.png"
|
||||
:style="{width:iconWidth+'rpx',height:iconWidth+'rpx'}"></image>
|
||||
</view>
|
||||
<text class="fui-ddm__item-text"
|
||||
:class="{'fui-ddm__text-pl':!isReverse && (isCheckbox || model.src),'fui-ddm__text-pr':isReverse && (isCheckbox || model.src)}"
|
||||
:style="{fontSize:size+'rpx',color:selectedColor && model.checked?selectedColor:color}">{{model.text}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view class="fui-ddm__mask" :style="{backgrround:maskBackground}" v-if="isShow && isMask" @tap="close(1)">
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/*!
|
||||
* 下拉菜单
|
||||
* 由于weex android上overflow仅支持hidden，所以该组件不支持Nvue端
|
||||
* Nvue端使用组件fui-dropdown-list或fui-select组件替代该组件
|
||||
*/
|
||||
export default {
|
||||
name: "fui-dropdown-menu",
|
||||
emits: ['click', 'close'],
|
||||
props: {
|
||||
options: {
|
||||
type: Array,
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
maxHeight: {
|
||||
type: [Number, String],
|
||||
default: 400
|
||||
},
|
||||
minWidth: {
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
},
|
||||
left: {
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
},
|
||||
//right大于等于0时生效，left失效
|
||||
right: {
|
||||
type: [Number, String],
|
||||
default: -1
|
||||
},
|
||||
background: {
|
||||
type: String,
|
||||
default: '#fff'
|
||||
},
|
||||
radius: {
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
},
|
||||
padding: {
|
||||
type: String,
|
||||
default: '32rpx'
|
||||
},
|
||||
isCheckbox: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
//选择框选中后颜色
|
||||
checkboxColor: {
|
||||
type: String,
|
||||
// #ifdef APP-NVUE
|
||||
default: '#465CFF'
|
||||
// #endif
|
||||
// #ifndef APP-NVUE
|
||||
default: ''
|
||||
// #endif
|
||||
},
|
||||
//选择框未选中时边框颜色
|
||||
borderColor: {
|
||||
type: String,
|
||||
default: '#ccc'
|
||||
},
|
||||
//是否只展示对号，无边框背景
|
||||
isCheckMark: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
//对号颜色
|
||||
checkmarkColor: {
|
||||
type: String,
|
||||
default: '#fff'
|
||||
},
|
||||
//选择框与内容是否颠倒排列
|
||||
isReverse: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
//是否需要分割线条
|
||||
splitLine: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
iconWidth: {
|
||||
type: [Number, String],
|
||||
default: 48
|
||||
},
|
||||
size: {
|
||||
type: [Number, String],
|
||||
default: 32
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: '#181818'
|
||||
},
|
||||
selectedColor: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
isMask: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
maskBackground: {
|
||||
type: String,
|
||||
default: 'transparent'
|
||||
},
|
||||
//down/up
|
||||
direction: {
|
||||
type: String,
|
||||
default: 'down'
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
options(newVal) {
|
||||
this.initData(newVal)
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
itemList: [],
|
||||
isShow: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
getStyles() {
|
||||
let styles = `border-radius:${this.radius}rpx;background:${this.background};`
|
||||
let right = Number(this.right || 0)
|
||||
if (right >= 0) {
|
||||
styles += 'right:0;'
|
||||
} else {
|
||||
styles += 'left:0;'
|
||||
}
|
||||
return styles
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.initData(this.options)
|
||||
},
|
||||
methods: {
|
||||
initData(vals) {
|
||||
if (vals && vals.length > 0) {
|
||||
if (typeof vals[0] !== 'object') {
|
||||
vals = vals.map(item => {
|
||||
return {
|
||||
text: item,
|
||||
checked: false
|
||||
}
|
||||
})
|
||||
} else {
|
||||
vals.map(item => {
|
||||
item.checked = item.checked || false
|
||||
})
|
||||
}
|
||||
this.itemList = vals;
|
||||
}
|
||||
},
|
||||
itemClick(index) {
|
||||
let item = this.itemList[index]
|
||||
let vals = [...this.itemList]
|
||||
vals.forEach((item, idx) => {
|
||||
if (index === idx) {
|
||||
item.checked = true
|
||||
} else {
|
||||
item.checked = false
|
||||
}
|
||||
})
|
||||
this.itemList = vals;
|
||||
this.$emit('click', {
|
||||
index: index,
|
||||
...item
|
||||
})
|
||||
this.close(2)
|
||||
},
|
||||
close(type) {
|
||||
this.isShow = false;
|
||||
if (type === 1) {
|
||||
this.$emit('close', {})
|
||||
}
|
||||
},
|
||||
show() {
|
||||
this.isShow = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.fui-dropdown__menu {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.fui-ddm__scroll {
|
||||
/* #ifndef APP-NVUE */
|
||||
width: auto;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.fui-dropdown__menu-list {
|
||||
position: absolute;
|
||||
box-shadow: 0 0 10rpx rgba(2, 4, 38, 0.05);
|
||||
overflow: hidden;
|
||||
z-index: 992;
|
||||
opacity: 0;
|
||||
/* #ifndef APP-NVUE */
|
||||
visibility: hidden;
|
||||
transition: all 0.3s ease-in-out;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.fui-ddm__down {
|
||||
transform-origin: 0 0;
|
||||
bottom: 0;
|
||||
/* #ifndef APP-NVUE */
|
||||
transform: translate3d(0, 100%, 0) scaleY(0);
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.fui-ddm__down-show {
|
||||
/* #ifndef APP-NVUE */
|
||||
transform: translate3d(0, 100%, 0) scaleY(1);
|
||||
visibility: visible;
|
||||
/* #endif */
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.fui-ddm__up {
|
||||
transform-origin: 0 100%;
|
||||
top: 0;
|
||||
/* #ifndef APP-NVUE */
|
||||
transform: translate3d(0, -100%, 0) scaleY(0);
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.fui-ddm__up-show {
|
||||
/* #ifndef APP-NVUE */
|
||||
transform: translate3d(0, -100%, 0) scaleY(1);
|
||||
visibility: visible;
|
||||
/* #endif */
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.fui-ddm__mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 990;
|
||||
}
|
||||
|
||||
.fui-dropdown__menu-item {
|
||||
/* #ifndef APP-NVUE */
|
||||
width: 100%;
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
transform: scale(1) translateZ(0);
|
||||
/* #endif */
|
||||
flex: 1;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
background-color: #FFFFFF;
|
||||
position: relative;
|
||||
/* #ifdef H5 */
|
||||
cursor: pointer;
|
||||
/* #endif */
|
||||
|
||||
}
|
||||
|
||||
.fui-ddm__flex {
|
||||
/* #ifndef APP-NVUE */
|
||||
width: 100%;
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
/* #endif */
|
||||
flex: 1;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* #ifndef APP-NVUE */
|
||||
.fui-ddm__item-line {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.fui-ddm__item-line::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
border-bottom: 1px solid var(--fui-color-border, #EEEEEE);
|
||||
/* #ifdef H5 */
|
||||
transform: scaleY(0.5);
|
||||
/* #endif */
|
||||
|
||||
/* #ifndef H5 */
|
||||
transform: scaleY(0.5) translateZ(0);
|
||||
/* #endif */
|
||||
transform-origin: 0 100%;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 32rpx;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
|
||||
.fui-dropdown__menu-item:active {
|
||||
/* #ifdef APP-NVUE */
|
||||
background-color: rgba(0, 0, 0, .2) !important;
|
||||
/* #endif */
|
||||
/* #ifndef APP-NVUE */
|
||||
background-color: var(--fui-bg-color-hover, rgba(0, 0, 0, .2)) !important;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.fui-ddm__reverse {
|
||||
justify-content: space-between;
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.fui-ddm__checkbox {
|
||||
font-size: 0;
|
||||
color: rgba(0, 0, 0, 0);
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
/* #ifdef APP-NVUE */
|
||||
border-radius: 40rpx;
|
||||
/* #endif */
|
||||
/* #ifndef APP-NVUE */
|
||||
display: inline-flex;
|
||||
box-sizing: border-box;
|
||||
border-radius: 50%;
|
||||
vertical-align: top;
|
||||
flex-shrink: 0;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* #ifndef APP-NVUE */
|
||||
.fui-ddm__checkbox-color {
|
||||
background: var(--fui-color-primary, #465CFF) !important;
|
||||
border-color: var(--fui-color-primary, #465CFF) !important;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
|
||||
.fui-is__checkmark {
|
||||
border-width: 0 !important;
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.fui-ddm__checkmark {
|
||||
width: 20rpx;
|
||||
height: 40rpx;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-width: 3px;
|
||||
border-bottom-color: #FFFFFF;
|
||||
border-right-style: solid;
|
||||
border-right-width: 3px;
|
||||
border-right-color: #FFFFFF;
|
||||
/* #ifndef APP-NVUE */
|
||||
box-sizing: border-box;
|
||||
transform: rotate(45deg) scale(0.5) translateZ(0);
|
||||
/* #endif */
|
||||
/* #ifdef APP-NVUE */
|
||||
transform: rotate(45deg) scale(0.5);
|
||||
/* #endif */
|
||||
transform-origin: 54% 48%;
|
||||
}
|
||||
|
||||
.fui-ddm__item-text {
|
||||
/* #ifndef APP-NVUE */
|
||||
word-break: break-all;
|
||||
/* #endif */
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.fui-ddm__text-pl {
|
||||
padding-left: 24rpx;
|
||||
}
|
||||
|
||||
.fui-ddm__text-pr {
|
||||
padding-right: 24rpx;
|
||||
}
|
||||
|
||||
.fui-ddm__icon-box {
|
||||
overflow: hidden;
|
||||
background-color: #F1F4FA;
|
||||
/* #ifndef APP-NVUE */
|
||||
flex-shrink: 0;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.fui-ddm__icon-ml {
|
||||
margin-left: 24rpx;
|
||||
}
|
||||
|
||||
.fui-ddm__icon-mr {
|
||||
margin-right: 24rpx;
|
||||
}
|
||||
</style>
|
||||
154
components/firstui/fui-icon/fui-icon.js
Normal file
154
components/firstui/fui-icon/fui-icon.js
Normal file
@@ -0,0 +1,154 @@
|
||||
export default {
|
||||
"addressbook":"\ue80c",
|
||||
"addfriends-fill": "\ue80a",
|
||||
"addfriends": "\ue80b",
|
||||
"backspace-fill": "\ue808",
|
||||
"backspace": "\ue809",
|
||||
"bankcard-fill": "\ue806",
|
||||
"bankcard": "\ue807",
|
||||
"camera-fill": "\ue804",
|
||||
"camera": "\ue805",
|
||||
"captcha-fill": "\ue802",
|
||||
"captcha": "\ue803",
|
||||
"cart-fill": "\ue800",
|
||||
"cart": "\ue801",
|
||||
"classify": "\ue7fe",
|
||||
"classify-fill": "\ue7ff",
|
||||
"comment-fill": "\ue7fc",
|
||||
"comment": "\ue7fd",
|
||||
"community-fill": "\ue7fa",
|
||||
"community": "\ue7fb",
|
||||
"coupon-fill": "\ue7f8",
|
||||
"coupon": "\ue7f9",
|
||||
"delete": "\ue7f6",
|
||||
"delete-fill": "\ue7f7",
|
||||
"edit": "\ue7f4",
|
||||
"edit-fill": "\ue7f5",
|
||||
"fabulous-fill": "\ue7f2",
|
||||
"fabulous": "\ue7f3",
|
||||
"find": "\ue7f0",
|
||||
"find-fill": "\ue7f1",
|
||||
"help-fill": "\ue7ee",
|
||||
"help": "\ue7ef",
|
||||
"home-fill": "\ue7ec",
|
||||
"home": "\ue7ed",
|
||||
"idcard-fill": "\ue7ea",
|
||||
"idcard": "\ue7eb",
|
||||
"info": "\ue7e8",
|
||||
"info-fill": "\ue7e9",
|
||||
"invite-fill": "\ue7e6",
|
||||
"invite": "\ue7e7",
|
||||
"kefu-fill": "\ue7e4",
|
||||
"kefu": "\ue7e5",
|
||||
"like-fill": "\ue7e2",
|
||||
"like": "\ue7e3",
|
||||
"location": "\ue7e0",
|
||||
"location-fill": "\ue7e1",
|
||||
"lock": "\ue7de",
|
||||
"lock-fill": "\ue7df",
|
||||
"mail-fill": "\ue7dc",
|
||||
"mail": "\ue7dd",
|
||||
"message": "\ue7da",
|
||||
"message-fill": "\ue7db",
|
||||
"mobile-fill": "\ue7d8",
|
||||
"mobile": "\ue7d9",
|
||||
"more": "\ue7d6",
|
||||
"more-fill": "\ue7d7",
|
||||
"my-fill": "\ue7d4",
|
||||
"my": "\ue7d5",
|
||||
"principal":"\ue80d",
|
||||
"notice-fill": "\ue7d2",
|
||||
"notice": "\ue7d3",
|
||||
"order": "\ue7d0",
|
||||
"order-fill": "\ue7d1",
|
||||
"picture": "\ue7ce",
|
||||
"picture-fill": "\ue7cf",
|
||||
"setup-fill": "\ue7cc",
|
||||
"setup": "\ue7cd",
|
||||
"share": "\ue7ca",
|
||||
"share-fill": "\ue7cb",
|
||||
"shop": "\ue7c8",
|
||||
"shop-fill": "\ue7c9",
|
||||
"star-fill": "\ue7c5",
|
||||
"star": "\ue7c6",
|
||||
"starhalf": "\ue7c7",
|
||||
"stepon-fill": "\ue7c3",
|
||||
"stepon": "\ue7c4",
|
||||
"wait-fill": "\ue7c1",
|
||||
"wait": "\ue7c2",
|
||||
"warning": "\ue7bf",
|
||||
"warning-fill": "\ue7c0",
|
||||
"plus": "\ue7bc",
|
||||
"plussign-fill": "\ue7bd",
|
||||
"plussign": "\ue7be",
|
||||
"minus": "\ue7b9",
|
||||
"minussign": "\ue7ba",
|
||||
"minussign-fill": "\ue7bb",
|
||||
"close": "\ue7b8",
|
||||
"clear": "\ue7b6",
|
||||
"clear-fill": "\ue7b7",
|
||||
"checkbox-fill": "\ue7b5",
|
||||
"checkround": "\ue7b4",
|
||||
"checkbox": "\ue7b3",
|
||||
"check": "\ue7b2",
|
||||
"pulldown-fill": "\ue7ae",
|
||||
"pullup": "\ue7af",
|
||||
"pullup-fill": "\ue7b0",
|
||||
"pulldown": "\ue7b1",
|
||||
"roundright-fill": "\ue7ac",
|
||||
"roundright": "\ue7ad",
|
||||
"arrowright": "\ue7a9",
|
||||
"arrowleft": "\ue7aa",
|
||||
"arrowdown": "\ue7ab",
|
||||
"left": "\ue7a6",
|
||||
"up": "\ue7a7",
|
||||
"right": "\ue7a8",
|
||||
"back": "\ue7a3",
|
||||
"top": "\ue7a4",
|
||||
"dropdown": "\ue7a5",
|
||||
"turningleft": "\ue79f",
|
||||
"turningup": "\ue7a0",
|
||||
"turningright": "\ue7a1",
|
||||
"turningdown": "\ue7a2",
|
||||
"refresh": "\ue79c",
|
||||
"loading": "\ue79d",
|
||||
"search": "\ue79e",
|
||||
"rotate": "\ue79b",
|
||||
"screen": "\ue79a",
|
||||
"signin": "\ue799",
|
||||
"calendar": "\ue798",
|
||||
"scan": "\ue797",
|
||||
"qrcode": "\ue796",
|
||||
"wallet": "\ue795",
|
||||
"telephone": "\ue794",
|
||||
"visible": "\ue793",
|
||||
"invisible": "\ue792",
|
||||
"menu": "\ue78e",
|
||||
"operate": "\ue78f",
|
||||
"slide": "\ue790",
|
||||
"list": "\ue791",
|
||||
"nonetwork": "\ue78d",
|
||||
"partake": "\ue78c",
|
||||
"qa": "\ue78b",
|
||||
"barchart": "\ue788",
|
||||
"piechart": "\ue789",
|
||||
"linechart": "\ue78a",
|
||||
"at": "\ue787",
|
||||
"face": "\ue77f",
|
||||
"redpacket": "\ue780",
|
||||
"suspend": "\ue781",
|
||||
"link": "\ue782",
|
||||
"keyboard": "\ue783",
|
||||
"play": "\ue784",
|
||||
"video": "\ue785",
|
||||
"voice": "\ue786",
|
||||
"sina": "\ue77a",
|
||||
"browser": "\ue77b",
|
||||
"moments": "\ue77c",
|
||||
"qq": "\ue77d",
|
||||
"wechat": "\ue77e",
|
||||
"balance": "\ue779",
|
||||
"bankcardpay": "\ue778",
|
||||
"wxpay": "\ue777",
|
||||
"alipay": "\ue776"
|
||||
}
|
||||
BIN
components/firstui/fui-icon/fui-icon.ttf
Normal file
BIN
components/firstui/fui-icon/fui-icon.ttf
Normal file
Binary file not shown.
93
components/firstui/fui-icon/fui-icon.vue
Normal file
93
components/firstui/fui-icon/fui-icon.vue
Normal file
File diff suppressed because one or more lines are too long
217
components/firstui/fui-list-cell/fui-list-cell.vue
Normal file
217
components/firstui/fui-list-cell/fui-list-cell.vue
Normal file
@@ -0,0 +1,217 @@
|
||||
<template>
|
||||
<view class="fui-list__cell" :class="{'fui-highlight':highlight,'fui-list__cell-background':!background}"
|
||||
:style="{paddingTop:padding[0] || 0,paddingRight:padding[1] || 0,paddingBottom:padding[2] || padding[0] || 0,paddingLeft:padding[3] || padding[1] || 0,background:background,marginTop:marginTop+'rpx',marginBottom:marginBottom+'rpx',borderRadius:radius}"
|
||||
@tap="handleClick">
|
||||
<view v-if="topBorder" :style="{background:borderColor,left:topLeft+'rpx',right:topRight+'rpx'}"
|
||||
class="fui-cell__border-top" :class="{'fui-cell__border-color':!borderColor}"></view>
|
||||
<slot></slot>
|
||||
<view v-if="bottomBorder" :style="{background:borderColor,left:bottomLeft+'rpx',right:bottomRight+'rpx'}"
|
||||
class="fui-cell__border-bottom" :class="{'fui-cell__border-color':!borderColor}"></view>
|
||||
<view class="fui-cell__arrow" v-if="arrow" :style="{'border-color':arrowColor}">
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "fui-list-cell",
|
||||
emits: ['click'],
|
||||
props: {
|
||||
//padding值，上、右、下、左,nvue下padding-right(右)无效
|
||||
padding: {
|
||||
type: Array,
|
||||
default () {
|
||||
return ['32rpx', '32rpx']
|
||||
}
|
||||
},
|
||||
//margin-top 单位rpx
|
||||
marginTop: {
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
},
|
||||
//margin-bottom 单位rpx
|
||||
marginBottom: {
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
},
|
||||
//背景颜色
|
||||
// #ifdef APP-NVUE
|
||||
background: {
|
||||
type: String,
|
||||
default: '#fff'
|
||||
},
|
||||
// #endif
|
||||
// #ifndef APP-NVUE
|
||||
background: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// #endif
|
||||
//是否有点击效果
|
||||
highlight: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
//是否需要右侧箭头
|
||||
arrow: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
arrowColor: {
|
||||
type: String,
|
||||
default: '#B2B2B2'
|
||||
},
|
||||
//是否显示上边框
|
||||
topBorder: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
//是否显示下边框
|
||||
bottomBorder: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
//边框颜色，非nvue下传值则全局默认样式失效
|
||||
// #ifdef APP-NVUE
|
||||
borderColor: {
|
||||
type: String,
|
||||
default: '#EEEEEE'
|
||||
},
|
||||
// #endif
|
||||
// #ifndef APP-NVUE
|
||||
borderColor: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// #endif
|
||||
//上边框left值，单位rpx
|
||||
topLeft: {
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
},
|
||||
//上边框right值，单位rpx
|
||||
topRight: {
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
},
|
||||
//下边框left值，单位rpx
|
||||
bottomLeft: {
|
||||
type: [Number, String],
|
||||
default: 32
|
||||
},
|
||||
//下边框right值，单位rpx
|
||||
bottomRight: {
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
},
|
||||
//border-radius圆角值
|
||||
radius: {
|
||||
type: String,
|
||||
default: '0'
|
||||
},
|
||||
index: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClick() {
|
||||
this.$emit('click', {
|
||||
index: this.index
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.fui-list__cell {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
/* #ifndef APP-NVUE */
|
||||
width: 100%;
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
/* #ifdef APP-NVUE */
|
||||
.fui-list__item {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
.fui-cell__arrow {
|
||||
height: 40rpx;
|
||||
width: 40rpx;
|
||||
border-width: 3px 3px 0 0;
|
||||
border-style: solid;
|
||||
transform: rotate(45deg) scale(0.5);
|
||||
/* #ifndef APP-NVUE */
|
||||
border-radius: 4rpx;
|
||||
flex-shrink: 0;
|
||||
margin-left: auto;
|
||||
box-sizing: border-box;
|
||||
/* #endif */
|
||||
/* #ifdef APP-NVUE */
|
||||
border-top-right-radius: 3rpx;
|
||||
/* #endif */
|
||||
transform-origin: center center;
|
||||
margin-right: -5.8579rpx;
|
||||
}
|
||||
|
||||
.fui-cell__border-top {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
/* #ifdef APP-NVUE */
|
||||
height: 0.5px;
|
||||
z-index: -1;
|
||||
/* #endif */
|
||||
|
||||
/* #ifndef APP-NVUE */
|
||||
height: 1px;
|
||||
-webkit-transform: scaleY(0.5);
|
||||
transform: scaleY(0.5);
|
||||
transform-origin: 0 0;
|
||||
z-index: 1;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.fui-cell__border-bottom {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
/* #ifdef APP-NVUE */
|
||||
height: 0.5px;
|
||||
z-index: -1;
|
||||
/* #endif */
|
||||
/* #ifndef APP-NVUE */
|
||||
height: 1px;
|
||||
-webkit-transform: scaleY(0.5);
|
||||
transform: scaleY(0.5);
|
||||
transform-origin: 0 100%;
|
||||
z-index: 1;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
/* #ifndef APP-NVUE */
|
||||
.fui-cell__border-color {
|
||||
background-color: var(--fui-color-border, #EEEEEE) !important;
|
||||
}
|
||||
.fui-list__cell-background {
|
||||
background-color: var(--fui-bg-color, #fff);
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
.fui-highlight:active {
|
||||
/* #ifdef APP-NVUE */
|
||||
background-color: rgba(0, 0, 0, 0.2) !important;
|
||||
/* #endif */
|
||||
|
||||
/* #ifndef APP-NVUE */
|
||||
background-color: var(--fui-bg-color-hover, rgba(0, 0, 0, 0.2)) !important;
|
||||
/* #endif */
|
||||
}
|
||||
</style>
|
||||
85
components/firstui/fui-theme/fui-theme.css
Normal file
85
components/firstui/fui-theme/fui-theme.css
Normal file
@@ -0,0 +1,85 @@
|
||||
/*
|
||||
FirstUI组件内置的基础变量
|
||||
1.如果你是组件使用者，你可以通过修改这些变量的值来定制自己的组件主题，实现自定义主题功能
|
||||
2.如果全局修改需要在项目根目录下App.vue文件中引入此css文件
|
||||
3.如果组件中有props属性是针对颜色设置（默认为空值），则优先级：props变量（如果有传值）> 全局主题色
|
||||
*/
|
||||
|
||||
/* #ifndef APP-NVUE */
|
||||
page {
|
||||
/* 行为相关颜色 */
|
||||
--fui-color-primary: #465CFF;
|
||||
--fui-color-success: #09BE4F;
|
||||
--fui-color-warning: #FFB703;
|
||||
--fui-color-danger: #FF2B2B;
|
||||
--fui-color-purple: #6831FF;
|
||||
|
||||
/* 文字基本颜色、其他辅助色 */
|
||||
/* 用于重量级文字信息、标题 */
|
||||
--fui-color-title: #181818;
|
||||
/* 用于普通级段落信息、引导词 */
|
||||
--fui-color-section: #333333;
|
||||
/* 用于次要标题内容 */
|
||||
--fui-color-subtitle: #7F7F7F;
|
||||
/* 用于底部标签、描述、次要文字信息 */
|
||||
--fui-color-label: #B2B2B2;
|
||||
/* 用于辅助、次要信息、禁用文字等。如：待输入状态描述文字，已点击按钮文字 */
|
||||
--fui-color-minor: #CCCCCC;
|
||||
--fui-color-white: #FFFFFF;
|
||||
/* 链接颜色 */
|
||||
--fui-color-link: #465CFF;
|
||||
|
||||
|
||||
/* 背景颜色 */
|
||||
--fui-bg-color: #ffffff;
|
||||
/* 页面背景底色 */
|
||||
--fui-bg-color-grey: #F1F4FA;
|
||||
/* 内容模块底色 */
|
||||
--fui-bg-color-content: #F8F8F8;
|
||||
--fui-bg-color-red: rgba(255, 43, 43, .05);
|
||||
--fui-bg-color-yellow: rgba(255, 183, 3, .1);
|
||||
--fui-bg-color-purple: rgba(104, 49, 255, .05);
|
||||
--fui-bg-color-green: rgba(9, 190, 79, .05);
|
||||
/* 点击背景色 */
|
||||
--fui-bg-color-hover: rgba(0, 0, 0, 0.2);
|
||||
/* 遮罩颜色 */
|
||||
--fui-bg-color-mask: rgba(0, 0, 0, 0.6);
|
||||
|
||||
|
||||
/* 边框颜色 */
|
||||
--fui-color-border: #EEEEEE;
|
||||
|
||||
/* 阴影颜色 */
|
||||
--fui-color-shadow: rgba(2, 4, 38, 0.05);
|
||||
|
||||
/*禁用态的透明度 */
|
||||
--fui-opacity-disabled: 0.5;
|
||||
|
||||
/* 图标尺寸 */
|
||||
--fui-img-size-sm: 48rpx;
|
||||
--fui-img-size-base: 56rpx;
|
||||
--fui-img-size-middle: 64rpx;
|
||||
--fui-img-size-lg: 96rpx;
|
||||
|
||||
/* 图片尺寸 */
|
||||
--fui-img-sm: 60rpx;
|
||||
--fui-img-base: 120rpx;
|
||||
--fui-img-lg: 240rpx;
|
||||
|
||||
/* Border Radius */
|
||||
--fui-border-radius-sm: 16rpx;
|
||||
--fui-border-radius-base: 24rpx;
|
||||
--fui-border-radius-lg: 48rpx;
|
||||
--fui-border-radius-circle: 50%;
|
||||
|
||||
/* 水平间距 */
|
||||
--fui-spacing-row-sm: 16rpx;
|
||||
--fui-spacing-row-base: 24rpx;
|
||||
--fui-spacing-row-lg: 32rpx;
|
||||
|
||||
/* 垂直间距 */
|
||||
--fui-spacing-col-sm: 8rpx;
|
||||
--fui-spacing-col-base: 16rpx;
|
||||
--fui-spacing-col-lg: 24rpx;
|
||||
}
|
||||
/* #endif */
|
||||
Reference in New Issue
Block a user