10 changed files with 414 additions and 43 deletions
@ -0,0 +1,52 @@ |
|||
<template> |
|||
<ElRadio v-bind="getBind" v-on="$listeners" class="Radio"> |
|||
<slot /> |
|||
</ElRadio> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'Radio', |
|||
computed: { |
|||
getBind() { |
|||
return { |
|||
border: true, |
|||
...this.$attrs |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
label.Radio { |
|||
border-color: rgba(96, 223, 254, .5); |
|||
border-radius: 2px; |
|||
padding: 0; |
|||
display: inline-flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
height: 27px; |
|||
padding: 0 6px; |
|||
margin: 0 3px !important; |
|||
|
|||
&.is-checked { |
|||
border-color: rgba(0, 0, 0, 0); |
|||
background: linear-gradient(180deg, #005C79 0%, #009BCC 100%); |
|||
} |
|||
|
|||
::v-deep { |
|||
.el-radio__input { |
|||
display: none; |
|||
} |
|||
|
|||
.el-radio__label { |
|||
font-size: 14px; |
|||
font-family: PingFang SC, PingFang SC; |
|||
font-weight: 400; |
|||
color: #FFFFFF; |
|||
padding: 0; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,71 @@ |
|||
<template> |
|||
<ElRadioButton class="RadioButton" v-bind="getBind" v-on="$listeners"> |
|||
<slot /> |
|||
</ElRadioButton> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'RadioButton', |
|||
computed: { |
|||
getBind() { |
|||
return { |
|||
border: true, |
|||
...this.$attrs |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
.RadioButton { |
|||
margin: 0; |
|||
height: 27px; |
|||
|
|||
&:first-child { |
|||
::v-deep { |
|||
span.el-radio-button__inner { |
|||
border-radius: 0; |
|||
border-left: 1px solid #00B3CC; |
|||
border-top-left-radius: 1px; |
|||
border-bottom-left-radius: 1px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
&.is-active { |
|||
::v-deep { |
|||
span.el-radio-button__inner { |
|||
background: linear-gradient(180deg, #005C79 0%, #009BCC 100%); |
|||
border-color: rgba(0, 0, 0, 0); |
|||
} |
|||
} |
|||
} |
|||
|
|||
&:last-child { |
|||
::v-deep { |
|||
span.el-radio-button__inner { |
|||
border-radius: 0; |
|||
border-right: 1px solid #00B3CC; |
|||
border-top-right-radius: 1px; |
|||
border-bottom-right-radius: 1px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
::v-deep { |
|||
span.el-radio-button__inner { |
|||
border: 0; |
|||
border-radius: 0; |
|||
|
|||
border-top: 1px solid #00B3CC; |
|||
border-bottom: 1px solid #00B3CC; |
|||
font-size: 12px; |
|||
font-family: PingFang SC, PingFang SC; |
|||
font-weight: 400; |
|||
color: #FFFFFF; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,41 @@ |
|||
<template> |
|||
<ElRadioGroup class='RadioGroup' v-bind="$attrs" v-on="$listeners"> |
|||
<component :is="type === 'button' ? 'RadioButton' : 'Radio'" v-for="item in list" :key="item.key" :label="item.key"> |
|||
{{ item.label }} |
|||
</component> |
|||
</ElRadioGroup> |
|||
</template> |
|||
|
|||
<script> |
|||
import Radio from "./Radio.vue" |
|||
import RadioButton from "./RadioButton.vue" |
|||
|
|||
export default { |
|||
name: 'RadioGroup', |
|||
components: { |
|||
Radio, |
|||
RadioButton |
|||
}, |
|||
props: { |
|||
type: { |
|||
type: String, |
|||
// button | normal |
|||
default: "normal" |
|||
}, |
|||
/** |
|||
* { |
|||
* label: string; |
|||
* key: string; |
|||
* }[] |
|||
*/ |
|||
list: { |
|||
type: Array, |
|||
default: () => [] |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
.RadioGroup {} |
|||
</style> |
|||
|
After Width: | Height: | Size: 1.3 KiB |
@ -1,20 +1,76 @@ |
|||
<template> |
|||
<Card class='ReleaseInformation' title="信息发布"> |
|||
ReleaseInformation |
|||
<Form :formList="formList" column="1" /> |
|||
|
|||
<div class="bottom"> |
|||
<ButtonGradient class="title-button special-button"> |
|||
发送 |
|||
</ButtonGradient> |
|||
<ButtonGradient class="title-button special-button"> |
|||
调度预案 |
|||
</ButtonGradient> |
|||
</div> |
|||
</Card> |
|||
</template> |
|||
|
|||
<script> |
|||
import Card from "./../../components/Card.vue" |
|||
import ButtonGradient from '@screen/components/Buttons/ButtonGradient.vue'; |
|||
import Form from '@screen/components/FormConfig'; |
|||
|
|||
export default { |
|||
name: 'ReleaseInformation', |
|||
components: { |
|||
Card |
|||
Card, |
|||
ButtonGradient, |
|||
Form |
|||
}, |
|||
data() { |
|||
return { |
|||
formList: [{ |
|||
label: "发布内容:", |
|||
key: "content", |
|||
type: "input", |
|||
options: { |
|||
// style: { |
|||
// height: "90px", |
|||
// }, |
|||
type: "textarea", |
|||
autosize: true, |
|||
maxlength: 200, |
|||
autosize: { minRows: 6, maxRows: 6 }, |
|||
showWordLimit: true |
|||
} |
|||
}, |
|||
{ |
|||
label: "发布平台:", |
|||
key: "platform", |
|||
type: "input", |
|||
}], |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
.ReleaseInformation {} |
|||
.ReleaseInformation { |
|||
|
|||
::v-deep { |
|||
.content { |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: space-between; |
|||
} |
|||
} |
|||
|
|||
.bottom { |
|||
display: flex; |
|||
gap: 9px; |
|||
justify-content: end; |
|||
|
|||
.special-button { |
|||
padding: 0 9px; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
|
|||
@ -1,20 +1,65 @@ |
|||
<template> |
|||
<Card class='TrafficControl' title="交通管制"> |
|||
TrafficControl |
|||
<RadioGroup :list="radioList" value="mainlineControl" /> |
|||
|
|||
<div class="bottom"> |
|||
<ButtonGradient class="title-button special-button" |
|||
style="background: linear-gradient(180deg, #E94D4E 0%, #FF195E 100%);"> |
|||
封闭 |
|||
</ButtonGradient> |
|||
<ButtonGradient class="title-button special-button" style=" |
|||
background: linear-gradient(82deg, #FFCD48 0%, #FE861E 100%);"> |
|||
限行 |
|||
</ButtonGradient> |
|||
</div> |
|||
</Card> |
|||
</template> |
|||
|
|||
<script> |
|||
import Card from "./../../components/Card.vue" |
|||
import RadioGroup from '@screen/components/RadioGroup/index.vue'; |
|||
import ButtonGradient from '@screen/components/Buttons/ButtonGradient.vue'; |
|||
|
|||
export default { |
|||
name: 'TrafficControl', |
|||
components: { |
|||
Card |
|||
Card, |
|||
RadioGroup, |
|||
ButtonGradient |
|||
}, |
|||
data() { |
|||
return { |
|||
radioList: [ |
|||
{ key: 'mainlineControl', label: '主线管制' }, |
|||
{ key: 'tollboothControl', label: '收费站管制' }, |
|||
{ key: 'serviceAreaControl', label: '服务区管制' }, |
|||
{ key: 'hubInterchangeControl', label: '枢纽立交管制' }, |
|||
{ key: 'otherControls', label: '其他管制' }, |
|||
] |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
.TrafficControl {} |
|||
.TrafficControl { |
|||
::v-deep { |
|||
.content { |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: space-between; |
|||
gap: 12px; |
|||
} |
|||
} |
|||
|
|||
.bottom { |
|||
display: flex; |
|||
gap: 9px; |
|||
justify-content: end; |
|||
|
|||
.special-button { |
|||
padding: 0 24px; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
|
|||
Loading…
Reference in new issue