Joe
1 year ago
9 changed files with 159 additions and 271 deletions
@ -1,57 +0,0 @@ |
|||||
<template> |
|
||||
<ElInput class='FormInput' v-bind="getBind" v-on="$listeners" /> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
export default { |
|
||||
name: 'FormInput', |
|
||||
computed: { |
|
||||
getBind() { |
|
||||
return { |
|
||||
placeholder: "请输入", |
|
||||
...this.$attrs |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang='scss' scoped> |
|
||||
.FormInput { |
|
||||
height: 100%; |
|
||||
|
|
||||
::v-deep { |
|
||||
// .el-input__inner { |
|
||||
// background-color: #0D5F79; |
|
||||
// color: #fff; |
|
||||
// border-radius: 2px; |
|
||||
// border: 0; |
|
||||
// height: 100%; |
|
||||
// min-height: fit-content; |
|
||||
// line-height: unset; |
|
||||
|
|
||||
// font-size: 12px; |
|
||||
|
|
||||
// &::placeholder { |
|
||||
// color: #fff; |
|
||||
// } |
|
||||
// } |
|
||||
|
|
||||
.el-textarea__inner { |
|
||||
background: #0A3E54; |
|
||||
border-radius: 5px; |
|
||||
opacity: 1; |
|
||||
border: 1px solid rgba(98, 224, 254, .6); |
|
||||
} |
|
||||
|
|
||||
.el-input__count { |
|
||||
background-color: rgba(0, 0, 0, 0); |
|
||||
font-size: 12px; |
|
||||
font-family: PingFang SC, PingFang SC; |
|
||||
font-weight: 400; |
|
||||
color: #3DE8FF; |
|
||||
line-height: 14px; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,64 +0,0 @@ |
|||||
<template> |
|
||||
<ElSelect class='FormSelect' v-bind="$attrs" v-on="$listeners"> |
|
||||
<ElOption v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> |
|
||||
<slot></slot> |
|
||||
</ElOption> |
|
||||
</ElSelect> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
export default { |
|
||||
name: 'FormSelect', |
|
||||
props: { |
|
||||
// options: { |
|
||||
// /** |
|
||||
// * { |
|
||||
// * value: any; |
|
||||
// * label: any; |
|
||||
// * }[] |
|
||||
// */ |
|
||||
// type: Array, |
|
||||
// default: () => [] |
|
||||
// } |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
options: [{ |
|
||||
value: '选项1', |
|
||||
label: '黄金糕' |
|
||||
}, { |
|
||||
value: '选项2', |
|
||||
label: '双皮奶' |
|
||||
}, { |
|
||||
value: '选项3', |
|
||||
label: '蚵仔煎' |
|
||||
}, { |
|
||||
value: '选项4', |
|
||||
label: '龙须面' |
|
||||
}, { |
|
||||
value: '选项5', |
|
||||
label: '北京烤鸭' |
|
||||
}], |
|
||||
value: '' |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang='scss' scoped> |
|
||||
.FormSelect { |
|
||||
::v-deep { |
|
||||
.el-input { |
|
||||
.el-input__inner { |
|
||||
font-size: 12px; |
|
||||
} |
|
||||
|
|
||||
.el-input__suffix { |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
justify-content: center; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,131 +0,0 @@ |
|||||
<template> |
|
||||
<ElTimePicker class="TimeSelect" v-bind="getBind" v-on="$listeners" /> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
export default { |
|
||||
name: 'TimeSelect', |
|
||||
computed: { |
|
||||
getBind() { |
|
||||
return { |
|
||||
placeholder: "请选择时间", |
|
||||
...this.$attrs |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang='scss'> |
|
||||
body { |
|
||||
|
|
||||
.el-time-range-picker.el-popper, |
|
||||
.el-popper.el-time-panel { |
|
||||
background: #064258; |
|
||||
border-radius: 3px; |
|
||||
border: 0; |
|
||||
|
|
||||
.el-time-range-picker__body, |
|
||||
.el-time-panel__content { |
|
||||
border-radius: 9px; |
|
||||
|
|
||||
&::after { |
|
||||
border: 0; |
|
||||
// background-image: url(~@screen/images/active.svg); |
|
||||
} |
|
||||
|
|
||||
&::before { |
|
||||
border: 0; |
|
||||
margin-top: -12px; |
|
||||
background-repeat: no-repeat; |
|
||||
background-size: 100% 100%; |
|
||||
background-image: url(~@screen/images/active.svg); |
|
||||
width: 100%; |
|
||||
margin-left: 0; |
|
||||
padding: 0; |
|
||||
} |
|
||||
|
|
||||
.el-time-spinner__arrow { |
|
||||
color: #fff; |
|
||||
} |
|
||||
|
|
||||
.el-time-spinner__item { |
|
||||
color: rgba(0, 209, 255, .51); |
|
||||
|
|
||||
&:hover:not(.disabled):not(.active) { |
|
||||
background-color: unset; |
|
||||
color: rgba(0, 209, 255, 1); |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.active { |
|
||||
color: rgba(0, 209, 255); |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.el-time-range-picker__body { |
|
||||
border: 1px solid #00B3CC; |
|
||||
} |
|
||||
|
|
||||
.el-time-panel__content { |
|
||||
&::before { |
|
||||
margin-top: -15px; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.el-time-range-picker__content { |
|
||||
.el-time-range-picker__cell { |
|
||||
|
|
||||
.el-time-range-picker__header { |
|
||||
color: #fff; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.el-time-panel__footer { |
|
||||
border-top: 0; |
|
||||
|
|
||||
.cancel { |
|
||||
color: #FFFFFF; |
|
||||
} |
|
||||
|
|
||||
.confirm { |
|
||||
color: #01B4DE; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.popper__arrow { |
|
||||
border-bottom-color: #064258; |
|
||||
|
|
||||
&::after { |
|
||||
border-bottom-color: #064258; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
<style lang='scss' scoped> |
|
||||
.TimeSelect { |
|
||||
::v-deep { |
|
||||
.el-range-input { |
|
||||
background-color: #0D5F79; |
|
||||
} |
|
||||
|
|
||||
.el-range-separator { |
|
||||
color: #56CEFE; |
|
||||
} |
|
||||
|
|
||||
&, |
|
||||
.el-input__inner { |
|
||||
background-color: #0D5F79; |
|
||||
color: #fff; |
|
||||
border-radius: 2px; |
|
||||
border: 0; |
|
||||
|
|
||||
&::placeholder { |
|
||||
color: #fff; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,5 +1,3 @@ |
|||||
@import url(./el-reset.scss); |
|
||||
|
|
||||
body { |
body { |
||||
input, |
input, |
||||
textarea { |
textarea { |
||||
Loading…
Reference in new issue