Joe
1 year ago
29 changed files with 1296 additions and 426 deletions
@ -0,0 +1,45 @@ |
|||||
|
/** |
||||
|
* |
||||
|
* @param {HTMLElement} container |
||||
|
* @param {{ target: HTMLElement }} param1 |
||||
|
*/ |
||||
|
export function moveable(container, { target } = {}) { |
||||
|
if (!target) target = container; |
||||
|
|
||||
|
target.style.cursor = "move"; |
||||
|
|
||||
|
/** |
||||
|
* @type { { clientX: number; clientY: number } } |
||||
|
*/ |
||||
|
let lastPosition = { clientX: 0, clientY: 0 }; |
||||
|
|
||||
|
const down = (e) => { |
||||
|
const { clientX: x, clientY: y } = e; |
||||
|
|
||||
|
const move = (e) => { |
||||
|
const { clientX, clientY } = e; |
||||
|
|
||||
|
console.log(clientX, clientY, "move"); |
||||
|
|
||||
|
container.style.transform = `translate3d(${ |
||||
|
clientX - x + lastPosition.clientX |
||||
|
}px, ${clientY - y + lastPosition.clientY}px, 0)`;
|
||||
|
}; |
||||
|
|
||||
|
const up = (e) => { |
||||
|
const { clientX, clientY } = e; |
||||
|
lastPosition.clientX += clientX - x; |
||||
|
lastPosition.clientY += clientY - y; |
||||
|
|
||||
|
document.removeEventListener("pointermove", move); |
||||
|
document.removeEventListener("pointerup", up); |
||||
|
}; |
||||
|
|
||||
|
document.addEventListener("pointermove", move); |
||||
|
document.addEventListener("pointerup", up); |
||||
|
}; |
||||
|
|
||||
|
target.addEventListener("pointerdown", down); |
||||
|
|
||||
|
return () => target.removeEventListener("pointerdown", down); |
||||
|
} |
||||
@ -0,0 +1,32 @@ |
|||||
|
<template> |
||||
|
<video controls autoplay muted class="video-stream" v-bind="$attrs" ref="videoContainerRef" /> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { HttpLivePlayer } from "./videoStream.js" |
||||
|
|
||||
|
export default { |
||||
|
name: 'Video', |
||||
|
props: { |
||||
|
camId: { |
||||
|
type: String, |
||||
|
default: null |
||||
|
}, |
||||
|
url: { |
||||
|
type: String, |
||||
|
default: null |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
const player = new HttpLivePlayer(this.$refs.videoContainerRef, { camId: this.camId, url: this.url }); |
||||
|
|
||||
|
this.$once("hook:beforeDestroy", () => player.destroy()); |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang='scss' scoped> |
||||
|
.video-stream { |
||||
|
background-color: #000; |
||||
|
} |
||||
|
</style> |
||||
|
After Width: | Height: | Size: 994 B |
|
Before Width: | Height: | Size: 950 B |
|
Before Width: | Height: | Size: 572 B |
|
Before Width: | Height: | Size: 584 B |
|
Before Width: | Height: | Size: 595 B |
|
After Width: | Height: | Size: 2.4 KiB |
@ -0,0 +1,193 @@ |
|||||
|
<template> |
||||
|
<Dialog v-model="modelVisible" title="广播发布"> |
||||
|
<div class='BroadcastReleases'> |
||||
|
<div class="body"> |
||||
|
<div class="left"> |
||||
|
<div class="title">路测广播列表</div> |
||||
|
<CheckboxGroup class="checkbox-group" :value="[]" :options="options" /> |
||||
|
</div> |
||||
|
<div class="right"> |
||||
|
<div class="top-content"> |
||||
|
<Video class="item-video" /> |
||||
|
|
||||
|
<label>发布内容: </label> |
||||
|
<ElInput type="textarea" :autosize="{ minRows: 3, maxRows: 3 }" :maxlength="150" showWordLimit /> |
||||
|
</div> |
||||
|
|
||||
|
<div class="footer"> |
||||
|
<Button style="background-color: rgba(0, 179, 204, .3);" |
||||
|
@click.native="modelVisible = false, submitting = false"> |
||||
|
取消 |
||||
|
</Button> |
||||
|
<Button @click.native="handleSubmit" :loading="submitting"> |
||||
|
确定 |
||||
|
</Button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<!-- <Form class="form" ref="FormConfigRef" :formList="formList" column="1" style="flex: 1;" labelWidth="120px" /> --> |
||||
|
|
||||
|
</div> |
||||
|
</Dialog> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import Dialog from "@screen/components/Dialog/index.vue"; |
||||
|
import Button from "@screen/components/Buttons/Button.vue" |
||||
|
import Form from '@screen/components/FormConfig'; |
||||
|
import Video from "@screen/components/Video" |
||||
|
import CheckboxGroup from "@screen/components/FormConfig/components/ElCheckboxGroup.vue" |
||||
|
|
||||
|
import { delay } from "@screen/utils/common.js" |
||||
|
import request from "@/utils/request"; |
||||
|
|
||||
|
import { Message } from "element-ui"; |
||||
|
// import { axiosIns } from "@screen/utils/axios/auth.js"; |
||||
|
|
||||
|
export default { |
||||
|
name: 'BroadcastReleases', |
||||
|
components: { |
||||
|
Dialog, |
||||
|
Button, |
||||
|
Form, |
||||
|
Video, |
||||
|
CheckboxGroup |
||||
|
}, |
||||
|
model: { |
||||
|
prop: 'visible', |
||||
|
event: "update:value" |
||||
|
}, |
||||
|
props: { |
||||
|
visible: Boolean, |
||||
|
deviceId: String |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
submitting: false, |
||||
|
options: Array.from({ length: 24 }).map((_, index) => ({ |
||||
|
key: index, |
||||
|
label: "阿发" |
||||
|
})) |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
modelVisible: { |
||||
|
get() { |
||||
|
return this.visible |
||||
|
}, |
||||
|
set(val) { |
||||
|
this.$emit('update:value', val) |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
watch: { |
||||
|
modelVisible: { |
||||
|
immediate: true, |
||||
|
handler(bool) { |
||||
|
if (!bool) return; |
||||
|
|
||||
|
this.reDisplay(); |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
reDisplay() { |
||||
|
}, |
||||
|
handleSubmit() { |
||||
|
const result = {}, formData = this.$refs.FormConfigRef?.formData; |
||||
|
|
||||
|
let functionId = 51; |
||||
|
|
||||
|
result.mode = formData.controlType === 'manual' ? "00" : "01"; |
||||
|
|
||||
|
delete result.controlType; |
||||
|
|
||||
|
if (result.mode === '01') { |
||||
|
if (!formData.displayTime?.length) return Message.error(`时间不能为空!`); |
||||
|
result.startDisplayTime = formData.displayTime[0]; |
||||
|
result.endDisplayTime = formData.displayTime[1]; |
||||
|
delete result.displayTime; |
||||
|
} else { |
||||
|
if (!formData.onWorkStatus || !formData.inWorkStatus) return Message.error(`工作状态不能为空!`); |
||||
|
|
||||
|
result.onWorkStatus = formData.onWorkStatus |
||||
|
result.inWorkStatus = formData.inWorkStatus |
||||
|
} |
||||
|
|
||||
|
this.submitting = true; |
||||
|
|
||||
|
// this.submitting = false; |
||||
|
// return; |
||||
|
} |
||||
|
}, |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang='scss' scoped> |
||||
|
.BroadcastReleases { |
||||
|
// width: 450px; |
||||
|
height: 397px; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 15px; |
||||
|
|
||||
|
.body { |
||||
|
display: flex; |
||||
|
gap: 9px; |
||||
|
height: 100%; |
||||
|
|
||||
|
.left { |
||||
|
width: 251px; |
||||
|
border-radius: 3px 3px 3px 3px; |
||||
|
border: 1px solid #3DE8FF; |
||||
|
padding: 3px 12px; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 9px; |
||||
|
|
||||
|
.checkbox-group { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 6px; |
||||
|
overflow: auto; |
||||
|
height: 100%; |
||||
|
flex: 1; |
||||
|
flex-wrap: nowrap; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.right { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: space-between; |
||||
|
|
||||
|
.top-content { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 9px; |
||||
|
|
||||
|
.item-video { |
||||
|
width: 545px; |
||||
|
height: 216px; |
||||
|
} |
||||
|
|
||||
|
label { |
||||
|
font-size: 16px; |
||||
|
font-family: PingFang SC, PingFang SC; |
||||
|
font-weight: 400; |
||||
|
color: #3DE8FF; |
||||
|
line-height: 19px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.footer { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: flex-end; |
||||
|
gap: 9px; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,157 @@ |
|||||
|
<template> |
||||
|
<Dialog v-model="obverseVisible" title="行车诱导"> |
||||
|
<Video class="item-video" /> |
||||
|
|
||||
|
<div class="Broadcast"> |
||||
|
<ElTabs v-model="activeName" @tab-click="handleClickTabs" class="tabs"> |
||||
|
<ElTabPane label="详细设计" name="first"> |
||||
|
<Descriptions :list="list" :data="data" style="gap: 18px" /> |
||||
|
</ElTabPane> |
||||
|
<ElTabPane label="设备参数" name="second">设备参数</ElTabPane> |
||||
|
</ElTabs> |
||||
|
|
||||
|
<div class="bottom"> |
||||
|
<Button @click.native="releaseVisible = true">广播发布</Button> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<BroadcastReleases v-model="releaseVisible" :deviceId="dialogData.iotDeviceId || '8697-1'" /> |
||||
|
</Dialog> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import Dialog from "@screen/components/Dialog/index.vue"; |
||||
|
import Button from "@screen/components/Buttons/Button.vue" |
||||
|
import Descriptions from '@screen/components/Descriptions.vue'; |
||||
|
import CustomControlVideo from '@screen/components/CustomControlVideo/index.vue'; |
||||
|
import BroadcastReleases from "./components/BroadcastReleases.vue" |
||||
|
import Video from "@screen/components/Video" |
||||
|
|
||||
|
import { getRoadInfoByStakeMark, getOrganizationName, getProduct } from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js" |
||||
|
import { dialogDelayVisible } from "./../mixin" |
||||
|
|
||||
|
// 广播发布 |
||||
|
export default { |
||||
|
name: 'Broadcast', |
||||
|
mixins: [dialogDelayVisible], |
||||
|
components: { |
||||
|
Dialog, |
||||
|
Button, |
||||
|
Descriptions, |
||||
|
CustomControlVideo, |
||||
|
BroadcastReleases, |
||||
|
Video |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
activeName: 'first', |
||||
|
releaseVisible: false, |
||||
|
data: { |
||||
|
deviceName: "LH24", |
||||
|
roadName: "G35济泽高速", |
||||
|
stakeMarkId: "k094+079", |
||||
|
direction: "1", |
||||
|
organizationName: "山东高速济南发展公司", |
||||
|
brand: "XXX厂家", |
||||
|
deviceState: "0", |
||||
|
}, |
||||
|
list: [ |
||||
|
{ |
||||
|
label: '设备名称', |
||||
|
key: "deviceName", |
||||
|
}, |
||||
|
{ |
||||
|
label: '道路名称', |
||||
|
key: "roadName", |
||||
|
}, |
||||
|
{ |
||||
|
label: '设备桩号', |
||||
|
key: "stakeMarkId", |
||||
|
}, |
||||
|
{ |
||||
|
label: '所属方向', |
||||
|
key: "direction", |
||||
|
enum: "CameraDirectionEnum" |
||||
|
}, |
||||
|
{ |
||||
|
label: '所属机构', |
||||
|
key: "organizationName", |
||||
|
}, |
||||
|
{ |
||||
|
label: '设备厂商', |
||||
|
key: "brand", |
||||
|
}, |
||||
|
{ |
||||
|
label: '设备状态', |
||||
|
key: "deviceState", |
||||
|
enum: "DeviceTypeEnum" |
||||
|
}, |
||||
|
] |
||||
|
} |
||||
|
}, |
||||
|
async created() { |
||||
|
this.data = { ...this.dialogData, roadName: null } |
||||
|
|
||||
|
getProduct(this.dialogData.productId) |
||||
|
.then(data => { |
||||
|
this.dialogData.brand = data.brand; |
||||
|
}) |
||||
|
|
||||
|
getOrganizationName(this.dialogData.iotDeviceId) |
||||
|
.then(data => { |
||||
|
this.dialogData.organizationName = data.organizationName; |
||||
|
}) |
||||
|
|
||||
|
const roadInfo = await getRoadInfoByStakeMark(this.dialogData.stakeMarkId); |
||||
|
console.log("%c [ roadInfo ]-103-「index.vue」", "font-size:15px; background:#36347c; color:#7a78c0;", roadInfo.roadName); |
||||
|
|
||||
|
if (roadInfo) this.data.roadName = roadInfo.roadName; |
||||
|
}, |
||||
|
methods: { |
||||
|
handleClickTabs() { } |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang='scss' scoped> |
||||
|
.Broadcast { |
||||
|
width: 600px; |
||||
|
height: 240px; |
||||
|
color: #fff; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
|
||||
|
.camera-video { |
||||
|
flex: 1.5; |
||||
|
} |
||||
|
|
||||
|
.tabs { |
||||
|
flex: 1; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
|
||||
|
::v-deep { |
||||
|
.el-tabs__content { |
||||
|
flex: 1; |
||||
|
|
||||
|
.el-tab-pane { |
||||
|
height: 100%; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.bottom { |
||||
|
margin-top: 12px; |
||||
|
display: flex; |
||||
|
gap: 9px; |
||||
|
align-items: center; |
||||
|
justify-content: end; |
||||
|
|
||||
|
>div { |
||||
|
font-size: 16px; |
||||
|
padding: 6px 12px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -1,122 +0,0 @@ |
|||||
<template> |
|
||||
<div class='Descriptions'> |
|
||||
<p class="desc-item"> |
|
||||
<span>设备类型：</span> |
|
||||
<span> |
|
||||
{{ cameraType || '-' }} |
|
||||
<img src="@screen/images/dialog/icon-control.png"> |
|
||||
</span> |
|
||||
</p> |
|
||||
<p class="desc-item"> |
|
||||
<span>道路名称：</span> |
|
||||
<span>{{ roadName || '-' }}</span> |
|
||||
</p> |
|
||||
<p class="desc-item"> |
|
||||
<span>所属机构：</span> |
|
||||
<span>{{ organizationName || '-' }}</span> |
|
||||
</p> |
|
||||
<p class="desc-item"> |
|
||||
<span>设备桩号：</span> |
|
||||
<span>{{ data.stakeMarkId || '-' }}</span> |
|
||||
</p> |
|
||||
<p class="desc-item"> |
|
||||
<span>上行相机：</span> |
|
||||
<span> |
|
||||
米 |
|
||||
<img src="@screen/images/dialog/icon-monitor.png"> |
|
||||
</span> |
|
||||
</p> |
|
||||
<p class="desc-item"> |
|
||||
<span>下行相机：</span> |
|
||||
<span> |
|
||||
米 |
|
||||
<img src="@screen/images/dialog/icon-monitor.png"> |
|
||||
</span> |
|
||||
</p> |
|
||||
<p class="desc-item singleline"> |
|
||||
<span>设备状态：</span> |
|
||||
<span :style="{ color: statusEnum.color || '#19E1B1' }">{{ statusEnum.text }}</span> |
|
||||
</p> |
|
||||
<p class="desc-item singleline"> |
|
||||
<span>状态更新时间:</span> |
|
||||
<span>{{ data.updateTime }}</span> |
|
||||
</p> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import { CameraStatusEnum, CameraControlTypeEnum } from "@screen/utils/enum.js" |
|
||||
import { getRoadInfoByStakeMark } from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js" |
|
||||
import request from "@/utils/request"; |
|
||||
|
|
||||
export default { |
|
||||
name: 'Descriptions', |
|
||||
props: { |
|
||||
data: { |
|
||||
type: Object, |
|
||||
default: () => ({}) |
|
||||
} |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
statusEnum: CameraStatusEnum[this.data.status] || {}, |
|
||||
cameraType: CameraControlTypeEnum[this.data.ptzCtrl]?.text, |
|
||||
organizationName: null, |
|
||||
roadName: "" |
|
||||
} |
|
||||
}, |
|
||||
async created() { |
|
||||
request({ |
|
||||
url: `/business/organization/${id}`, |
|
||||
method: "get", |
|
||||
}) |
|
||||
.then(({ code, data }) => { |
|
||||
if (code != 200) return; |
|
||||
|
|
||||
this.organizationName = data.organizationName; |
|
||||
}) |
|
||||
.catch((err) => { |
|
||||
|
|
||||
}); |
|
||||
|
|
||||
|
|
||||
const roadInfo = await getRoadInfoByStakeMark(this.dialogData.stakeMarkId); |
|
||||
|
|
||||
if (roadInfo) this.roadName = roadInfo.roadName; |
|
||||
}, |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang='scss' scoped> |
|
||||
.Descriptions { |
|
||||
height: 100%; |
|
||||
display: grid; |
|
||||
grid-template-columns: repeat(2, 1fr); |
|
||||
font-size: 16px; |
|
||||
// font-family: PingFang SC, PingFang SC; |
|
||||
font-weight: 400; |
|
||||
line-height: 19px; |
|
||||
grid-auto-rows: min-content; |
|
||||
gap: 15px; |
|
||||
// -webkit-background-clip: text; |
|
||||
// -webkit-text-fill-color: transparent; |
|
||||
|
|
||||
>p { |
|
||||
>span { |
|
||||
&:first-child { |
|
||||
color: #3DE8FF; |
|
||||
} |
|
||||
|
|
||||
&:last-child { |
|
||||
display: inline-flex; |
|
||||
align-items: center; |
|
||||
gap: 9px; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.singleline { |
|
||||
grid-column: span 2; |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -0,0 +1,202 @@ |
|||||
|
<template> |
||||
|
<Dialog v-model="modelVisible" title="相机控制" noneMask> |
||||
|
<div class='CameraControlDialog'> |
||||
|
<div class="direction"> |
||||
|
<div class="control-container top" @click="controlClick(21)"> |
||||
|
<div class="icon-horizontal" /> |
||||
|
<img src="../images/top.svg"> |
||||
|
</div> |
||||
|
<div class="control-container right" @click="controlClick(24)"> |
||||
|
<div class="icon-vertical" /> |
||||
|
<img src="../images/right.svg"> |
||||
|
</div> |
||||
|
<div class="center"></div> |
||||
|
<div class="control-container bottom" @click="controlClick(22)"> |
||||
|
<div class="icon-horizontal" style="transform: rotate(180deg);" /> |
||||
|
<img src="../images/bottom.svg"> |
||||
|
</div> |
||||
|
<div class="control-container left" @click="controlClick(23)"> |
||||
|
<div class="icon-vertical" style="transform: rotate(180deg);" /> |
||||
|
<img src="../images/left.svg"> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="options"> |
||||
|
<div v-for="item in options" :key="item.key"> |
||||
|
<img src="../images/sub.svg" @click="controlClick(item.sub)"> |
||||
|
<span>{{ item.label }}</span> |
||||
|
<img src="../images/add.svg" @click="controlClick(item.add)"> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</Dialog> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import Dialog from "@screen/components/Dialog/index.vue"; |
||||
|
import { controlCamera } from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js" |
||||
|
import { throttle } from "lodash" |
||||
|
|
||||
|
export default { |
||||
|
name: 'CameraControlDialog', |
||||
|
components: { |
||||
|
Dialog |
||||
|
}, |
||||
|
model: { |
||||
|
prop: 'visible', |
||||
|
event: "update:value" |
||||
|
}, |
||||
|
props: { |
||||
|
visible: Boolean, |
||||
|
deviceId: String |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
options: [ |
||||
|
{ |
||||
|
label: "变倍", |
||||
|
key: "zoom", |
||||
|
add: "12", |
||||
|
sub: "11" |
||||
|
}, |
||||
|
{ |
||||
|
label: "光圈", |
||||
|
key: "aperture", |
||||
|
add: "15", |
||||
|
sub: "16" |
||||
|
}, |
||||
|
{ |
||||
|
label: "聚焦", |
||||
|
key: "focus", |
||||
|
add: "13", |
||||
|
sub: "14" |
||||
|
}, |
||||
|
] |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
modelVisible: { |
||||
|
get() { |
||||
|
return this.visible |
||||
|
}, |
||||
|
set(val) { |
||||
|
this.$emit('update:value', val) |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
controlClick: throttle(function (type) { |
||||
|
controlCamera(this.deviceId, type) |
||||
|
}, 150) |
||||
|
}, |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang='scss' scoped> |
||||
|
.CameraControlDialog { |
||||
|
width: 360px; |
||||
|
height: 210px; |
||||
|
display: flex; |
||||
|
|
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-around; |
||||
|
gap: 36px; |
||||
|
|
||||
|
img { |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
|
||||
|
.control-container { |
||||
|
position: relative; |
||||
|
width: min-content; |
||||
|
|
||||
|
&:active { |
||||
|
[class^="icon"] { |
||||
|
background-color: #48B0CB; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.icon-horizontal, |
||||
|
.icon-vertical { |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
top: 0; |
||||
|
background-color: #006A96; |
||||
|
z-index: -1; |
||||
|
} |
||||
|
|
||||
|
.icon-horizontal { |
||||
|
clip-path: path('M53.807 19.0734C51.1049 21.3657 47.1722 21.2685 44.0948 19.512C35.7042 14.7227 25.2544 13.7636 15.6704 17.82C14.5092 18.3114 13.3921 18.8632 12.321 19.4703C9.23352 21.2201 5.29428 21.3087 2.59447 19.0054V19.0054C-0.433686 16.4219 -0.827317 11.8122 2.24787 9.28482C4.93936 7.07281 7.91063 5.2081 11.093 3.74265C16.4653 1.26882 22.3109 -0.00817108 28.2253 6.86646e-05C34.1398 0.0083065 39.9818 1.30157 45.3471 3.79036C48.527 5.26539 51.4944 7.13947 54.1807 9.36039C57.2464 11.8949 56.8402 16.5002 53.807 19.0734V19.0734Z'); |
||||
|
width: 57px; |
||||
|
height: 21px; |
||||
|
} |
||||
|
|
||||
|
.icon-vertical { |
||||
|
clip-path: path('M2.33992 53.8068C0.0475853 51.1047 0.14481 47.172 1.90137 44.0945C6.69064 35.7039 7.64974 25.2542 3.59338 15.6702C3.10192 14.509 2.55008 13.3918 1.94307 12.3208C0.193261 9.23327 0.1046 5.29403 2.40796 2.59423V2.59423C4.99146 -0.433928 9.60116 -0.827561 12.1285 2.24762C14.3405 4.93912 16.2052 7.91038 17.6707 11.0928C20.1445 16.465 21.4215 22.3106 21.4133 28.2251C21.405 34.1395 20.1117 39.9816 17.623 45.3469C16.1479 48.5267 14.2738 51.4941 12.0529 54.1805C9.51843 57.2461 4.91315 56.84 2.33992 53.8068V53.8068Z'); |
||||
|
width: 21px; |
||||
|
height: 57px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.direction { |
||||
|
display: grid; |
||||
|
grid-template-columns: 0.3fr 1fr 0.3fr; |
||||
|
grid-template-rows: 0.3fr 1fr 0.3fr; |
||||
|
align-items: center; |
||||
|
justify-items: center; |
||||
|
|
||||
|
gap: 3px; |
||||
|
|
||||
|
|
||||
|
.top { |
||||
|
grid-area: 1/2/1/2; |
||||
|
} |
||||
|
|
||||
|
.right { |
||||
|
grid-area: 2/3/2/3; |
||||
|
} |
||||
|
|
||||
|
.bottom { |
||||
|
grid-area: 3/2/3/2; |
||||
|
} |
||||
|
|
||||
|
.left { |
||||
|
grid-area: 2/1/2/1; |
||||
|
} |
||||
|
|
||||
|
.center { |
||||
|
grid-area: 2/2/2/2; |
||||
|
|
||||
|
width: 66px; |
||||
|
height: 66px; |
||||
|
background: #006A96; |
||||
|
border-radius: 50%; |
||||
|
opacity: 1; |
||||
|
border: 1px solid #3DE8FF |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.options { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
|
||||
|
gap: 18px; |
||||
|
|
||||
|
>div { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
gap: 9px; |
||||
|
|
||||
|
img { |
||||
|
background-color: #006A96; |
||||
|
border-radius: 50%; |
||||
|
|
||||
|
&:active { |
||||
|
background-color: #48B0CB; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 3.8 KiB After Width: | Height: | Size: 3.3 KiB |
|
Before Width: | Height: | Size: 3.7 KiB After Width: | Height: | Size: 3.1 KiB |
|
Before Width: | Height: | Size: 3.7 KiB After Width: | Height: | Size: 3.1 KiB |
|
Before Width: | Height: | Size: 657 B After Width: | Height: | Size: 643 B |
|
Before Width: | Height: | Size: 3.8 KiB After Width: | Height: | Size: 3.2 KiB |
Loading…
Reference in new issue