hui
1 year ago
24 changed files with 609 additions and 434 deletions
@ -1,54 +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: fit-content; |
|
||||
line-height: unset; |
|
||||
|
|
||||
&::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,50 +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 {} |
|
||||
</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,47 +0,0 @@ |
|||||
<template> |
|
||||
<ElPopover class='Popover' v-bind="getBind" v-on="$listeners"> |
|
||||
<slot /> |
|
||||
<template #reference> |
|
||||
<slot name="reference" /> |
|
||||
</template> |
|
||||
</ElPopover> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
export default { |
|
||||
name: 'Popover', |
|
||||
computed: { |
|
||||
getBind() { |
|
||||
return { |
|
||||
trigger: 'hover', |
|
||||
placement: "left", |
|
||||
...this.$attrs, |
|
||||
popperClass: "Popover-Scope-Screen" |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang='scss'> |
|
||||
div.el-popper.Popover-Scope-Screen { |
|
||||
background: linear-gradient(180deg, #005C79 0%, #009BCC 100%); |
|
||||
border: 0; |
|
||||
color: #fff; |
|
||||
font-size: 14px; |
|
||||
font-family: PingFang SC, PingFang SC; |
|
||||
font-weight: 400; |
|
||||
color: #FFFFFF; |
|
||||
|
|
||||
div.popper__arrow { |
|
||||
border-left-color: #00799f; |
|
||||
|
|
||||
&::after { |
|
||||
border-left-color: #00799f; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
<style lang='scss' scoped> |
|
||||
.Popover {} |
|
||||
</style> |
|
||||
@ -0,0 +1,28 @@ |
|||||
|
<template> |
||||
|
<video controls class="video-stream" v-bind="$attrs" ref="videoContainerRef" /> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { openVideoStream } from "./videoStream.js" |
||||
|
|
||||
|
export default { |
||||
|
name: 'Video', |
||||
|
props: { |
||||
|
camId: { |
||||
|
type: String, |
||||
|
default: null |
||||
|
}, |
||||
|
url: { |
||||
|
type: String, |
||||
|
default: null |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
openVideoStream(this.$refs.videoContainerRef, { camId: this.camId, url: this.url }) |
||||
|
}, |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang='scss' scoped> |
||||
|
.video-stream {} |
||||
|
</style> |
||||
@ -0,0 +1,41 @@ |
|||||
|
import flvJs from "flv.js"; |
||||
|
import { getCameraStream } from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js"; |
||||
|
|
||||
|
/** |
||||
|
* |
||||
|
* @param {HTMLElement} container 容器 |
||||
|
* @param {{camId?: string; url?: string}?} options {camId: 相机ID; url: 直播地址} |
||||
|
* @returns |
||||
|
*/ |
||||
|
export async function openVideoStream(container, { camId, url } = {}) { |
||||
|
if (camId) { |
||||
|
const { code, data } = await getCameraStream(camId).catch(() => ({})); |
||||
|
|
||||
|
if (code != 200) return; |
||||
|
|
||||
|
url = data.liveUrl; |
||||
|
} |
||||
|
|
||||
|
if (!url) return; |
||||
|
|
||||
|
const flvPlayer = flvJs.createPlayer({ |
||||
|
type: "flv", |
||||
|
url: url, |
||||
|
isLive: true, |
||||
|
hasVideo: true, |
||||
|
hasAudio: true, |
||||
|
}); |
||||
|
|
||||
|
console.log( |
||||
|
"%c [ flvPlayer ]-26-「videoStream.js」", |
||||
|
"font-size:15px; background:#b2b540; color:#f6f984;", |
||||
|
flvPlayer |
||||
|
); |
||||
|
|
||||
|
flvPlayer.attachMediaElement(container); |
||||
|
|
||||
|
flvPlayer.load(); |
||||
|
flvPlayer.play(); |
||||
|
|
||||
|
return flvPlayer; |
||||
|
} |
||||
@ -1,47 +0,0 @@ |
|||||
import flvJs from "flv.js"; |
|
||||
import { getCameraStream } from "./httpList"; |
|
||||
|
|
||||
/** |
|
||||
* |
|
||||
* @param {string} camId 相机ID |
|
||||
* @param {HTMLElement} container 容器 |
|
||||
* @param {DPlayerOptions?} options 配置项 |
|
||||
* @returns |
|
||||
*/ |
|
||||
export async function openVideoStream(camId, container) { |
|
||||
const { code, data } = await getCameraStream(camId).catch(() => ({})); |
|
||||
|
|
||||
if (code != 200) return; |
|
||||
|
|
||||
const flvPlayer = flvJs.createPlayer({ |
|
||||
type: "flv", |
|
||||
url: data.liveUrl, |
|
||||
isLive: true, |
|
||||
hasVideo: true, |
|
||||
hasAudio: true, |
|
||||
}); |
|
||||
|
|
||||
console.log( |
|
||||
"%c [ flvPlayer ]-26-「videoStream.js」", |
|
||||
"font-size:15px; background:#b2b540; color:#f6f984;", |
|
||||
flvPlayer |
|
||||
); |
|
||||
|
|
||||
flvPlayer.attachMediaElement(container); |
|
||||
|
|
||||
flvPlayer.load(); |
|
||||
flvPlayer.play(); |
|
||||
|
|
||||
return flvPlayer; |
|
||||
// return new DPlayer({
|
|
||||
// container,
|
|
||||
// autoplay: true,
|
|
||||
// ...options,
|
|
||||
// hotkey: false,
|
|
||||
// video: {
|
|
||||
// url: data.liveUrl,
|
|
||||
// type: "hls",
|
|
||||
// // type: "flv",
|
|
||||
// },
|
|
||||
// });
|
|
||||
} |
|
||||
@ -1,20 +1,37 @@ |
|||||
<template> |
<template> |
||||
<Card class='RealTimeVideo' title="实时视频"> |
<Card class='RealTimeVideo' title="实时视频"> |
||||
RealTimeVideo |
<Video class="item-video" /> |
||||
|
<Video class="item-video" /> |
||||
</Card> |
</Card> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
import Card from "./../../components/Card.vue" |
import Card from "./../../components/Card.vue"; |
||||
|
import Video from "@screen/components/Video" |
||||
export default { |
export default { |
||||
name: 'RealTimeVideo', |
name: 'RealTimeVideo', |
||||
components: { |
components: { |
||||
Card |
Card, |
||||
|
Video |
||||
} |
} |
||||
} |
} |
||||
</script> |
</script> |
||||
|
|
||||
<style lang='scss' scoped> |
<style lang='scss' scoped> |
||||
.RealTimeVideo {} |
.RealTimeVideo { |
||||
|
::v-deep { |
||||
|
.content { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
gap: 9px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.item-video { |
||||
|
flex: 1; |
||||
|
width: calc(50% - 4.5px); |
||||
|
height: 100%; |
||||
|
} |
||||
|
} |
||||
</style> |
</style> |
||||
|
|||||
@ -0,0 +1,15 @@ |
|||||
|
<template> |
||||
|
<div class='InformationReleaseManagement'> |
||||
|
InformationReleaseManagement |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: 'InformationReleaseManagement', |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang='scss' scoped> |
||||
|
.InformationReleaseManagement {} |
||||
|
</style> |
||||
@ -0,0 +1,15 @@ |
|||||
|
<template> |
||||
|
<div class='PublishingChannelManagement'> |
||||
|
PublishingChannelManagement |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: 'PublishingChannelManagement', |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang='scss' scoped> |
||||
|
.PublishingChannelManagement {} |
||||
|
</style> |
||||
@ -0,0 +1,295 @@ |
|||||
|
div.el-popper { |
||||
|
background: linear-gradient(180deg, #005c79 0%, #009bcc 100%); |
||||
|
color: #fff; |
||||
|
font-size: 15px; |
||||
|
font-family: PingFang SC, PingFang SC; |
||||
|
font-weight: 500; |
||||
|
border: 0; |
||||
|
|
||||
|
&[x-placement^="top"] { |
||||
|
div.popper__arrow { |
||||
|
border-top-color: #00799f; |
||||
|
|
||||
|
&::after { |
||||
|
border-top-color: #00799f; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
&[x-placement^="left"] { |
||||
|
div.popper__arrow { |
||||
|
border-left-color: #00799f; |
||||
|
|
||||
|
&::after { |
||||
|
border-left-color: #00799f; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
&[x-placement^="right"] { |
||||
|
div.popper__arrow { |
||||
|
border-right-color: #00799f; |
||||
|
|
||||
|
&::after { |
||||
|
border-right-color: #00799f; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
&[x-placement^="bottom"] { |
||||
|
div.popper__arrow { |
||||
|
border-bottom-color: #00799f; |
||||
|
|
||||
|
&::after { |
||||
|
border-bottom-color: #00799f; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
div.el-popper.el-select-dropdown { |
||||
|
background: #123542; |
||||
|
box-shadow: 2px 2px 8px 0px rgba(82, 90, 102, 0.08), |
||||
|
1px 1px 2px 0px rgba(82, 90, 102, 0.04); |
||||
|
border-radius: 4px; |
||||
|
|
||||
|
.el-select-dropdown__list { |
||||
|
.el-select-dropdown__item { |
||||
|
font-size: 15px; |
||||
|
font-family: PingFang SC, PingFang SC; |
||||
|
color: #fff; |
||||
|
font-family: PingFang SC, PingFang SC; |
||||
|
font-weight: 500; |
||||
|
/** |
||||
|
-webkit-background-clip: text; |
||||
|
-webkit-text-fill-color: transparent; |
||||
|
*/ |
||||
|
&:hover { |
||||
|
background: #0d5f79; |
||||
|
} |
||||
|
&.hover { |
||||
|
background: #0d5f79; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&.el-select-dropdown { |
||||
|
&[x-placement^="top"] { |
||||
|
div.popper__arrow { |
||||
|
border-top-color: #1a3442; |
||||
|
|
||||
|
&::after { |
||||
|
border-top-color: #1a3442; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
&[x-placement^="left"] { |
||||
|
div.popper__arrow { |
||||
|
border-left-color: #1a3442; |
||||
|
|
||||
|
&::after { |
||||
|
border-left-color: #1a3442; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
&[x-placement^="right"] { |
||||
|
div.popper__arrow { |
||||
|
border-right-color: #1a3442; |
||||
|
|
||||
|
&::after { |
||||
|
border-right-color: #1a3442; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
&[x-placement^="bottom"] { |
||||
|
div.popper__arrow { |
||||
|
border-bottom-color: #1a3442; |
||||
|
|
||||
|
&::after { |
||||
|
border-bottom-color: #1a3442; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
div.el-scrollbar { |
||||
|
.el-scrollbar__wrap { |
||||
|
/** |
||||
|
overflow: auto; |
||||
|
*/ |
||||
|
overflow-x: hidden; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
body { |
||||
|
input.el-input__inner { |
||||
|
background-color: #0d5f79; |
||||
|
color: #fff; |
||||
|
border-radius: 2px; |
||||
|
border: 0; |
||||
|
height: 100%; |
||||
|
min-height: fit-content; |
||||
|
line-height: unset; |
||||
|
|
||||
|
&::placeholder { |
||||
|
color: #fff; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
div.el-input { |
||||
|
input.el-input__inner { |
||||
|
font-size: 12px; |
||||
|
} |
||||
|
|
||||
|
.el-input__suffix { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
} |
||||
|
div.el-textarea { |
||||
|
textarea.el-textarea__inner { |
||||
|
background: #0a3e54; |
||||
|
border-radius: 5px; |
||||
|
opacity: 1; |
||||
|
border: 1px solid rgba(98, 224, 254, 0.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; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
div.el-time-panel.el-popper, |
||||
|
div.el-time-range-picker.el-popper { |
||||
|
background: #064258; |
||||
|
border-radius: 3px; |
||||
|
border: 0; |
||||
|
|
||||
|
.el-time-range-picker__body, |
||||
|
.el-time-panel__content { |
||||
|
border-radius: 9px; |
||||
|
|
||||
|
&::after { |
||||
|
border: 0; |
||||
|
} |
||||
|
|
||||
|
&::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, 0.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; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.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; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&[x-placement^="top"] { |
||||
|
div.popper__arrow { |
||||
|
border-top-color: #275e79; |
||||
|
|
||||
|
&::after { |
||||
|
border-top-color: #275e79; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
&[x-placement^="left"] { |
||||
|
div.popper__arrow { |
||||
|
border-left-color: #275e79; |
||||
|
|
||||
|
&::after { |
||||
|
border-left-color: #275e79; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
&[x-placement^="right"] { |
||||
|
div.popper__arrow { |
||||
|
border-right-color: #275e79; |
||||
|
|
||||
|
&::after { |
||||
|
border-right-color: #275e79; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
&[x-placement^="bottom"] { |
||||
|
div.popper__arrow { |
||||
|
border-bottom-color: #275e79; |
||||
|
|
||||
|
&::after { |
||||
|
border-bottom-color: #275e79; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,37 @@ |
|||||
|
body { |
||||
|
input, |
||||
|
textarea { |
||||
|
caret-color: white; |
||||
|
} |
||||
|
|
||||
|
div { |
||||
|
/* 滚动条整体部分 */ |
||||
|
&::-webkit-scrollbar { |
||||
|
width: 6px !important; |
||||
|
height: 6px !important; |
||||
|
padding: 15px; |
||||
|
} |
||||
|
|
||||
|
/* 滚动条的轨道 */ |
||||
|
&::-webkit-scrollbar-track { |
||||
|
background: rgba(17, 72, 90, 0.4); |
||||
|
border-radius: 4px; |
||||
|
} |
||||
|
|
||||
|
/* 滚动条的滑块按钮 */ |
||||
|
&::-webkit-scrollbar-thumb { |
||||
|
background: #3785a0; |
||||
|
border-radius: 4px; |
||||
|
} |
||||
|
|
||||
|
/* 上下箭头 */ |
||||
|
&::-webkit-scrollbar-button { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
/* 滚动条角 */ |
||||
|
&::-webkit-scrollbar-corner { |
||||
|
display: none; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
Loading…
Reference in new issue