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 { |
|||
input, |
|||
textarea { |
|||
Loading…
Reference in new issue