DeXun/fad-dashboard
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

初始化

Browse Source
This commit is contained in:
砂糖
2025-11-08 10:38:36 +08:00
commit 3beeec7296
1626 changed files with 198488 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

224
frontend/packages/RemoteComponents/innerComponents/diagonalBorder/index.vue Normal file
View File

@@ -0,0 +1,224 @@
<template>
<div
class="border-box"
:style="{
backgroundColor: customize.backgroundColor
}"
>
<div
v-if="customize.diagonalType === 'leftTopRightBottom'"
class="left-diagonal"
>
<div
class="top"
:style="{
width: customize.borderLength + 'px',
height: customize.borderWidth + 'px',
borderTopRightRadius: customize.borderRadius + 'px',
borderBottomRightRadius: customize.borderRadius + 'px',
backgroundColor: customize.borderColor
}"
/>
<div
class="left"
:style="{
width: customize.borderLength + 'px',
height: customize.borderWidth + 'px',
borderTopRightRadius: customize.borderRadius + 'px',
borderBottomRightRadius: customize.borderRadius + 'px',
backgroundColor: customize.borderColor
}"
/>
<div
class="right"
:style="{
width: customize.borderLength + 'px',
height: customize.borderWidth + 'px',
borderTopLeftRadius: customize.borderRadius + 'px',
borderBottomLeftRadius: customize.borderRadius + 'px',
backgroundColor: customize.borderColor
}"
/>
<div
class="bottom"
:style="{
width: customize.borderLength + 'px',
height: customize.borderWidth + 'px',
borderTopLeftRadius: customize.borderRadius + 'px',
borderBottomLeftRadius: customize.borderRadius + 'px',
backgroundColor: customize.borderColor
}"
/>
</div>
<div
v-if="customize.diagonalType === 'rightTopLeftBottom'"
class="right-diagonal"
>
<div
class="top"
:style="{
width: customize.borderLength + 'px',
height: customize.borderWidth + 'px',
borderTopLeftRadius: customize.borderRadius + 'px',
borderBottomLeftRadius: customize.borderRadius + 'px',
backgroundColor: customize.borderColor
}"
/>
<div
class="right"
:style="{
width: customize.borderLength + 'px',
height: customize.borderWidth + 'px',
borderTopLeftRadius: customize.borderRadius + 'px',
borderBottomLeftRadius: customize.borderRadius + 'px',
backgroundColor: customize.borderColor
}"
/>
<div
class="left"
:style="{
width: customize.borderLength + 'px',
height: customize.borderWidth + 'px',
borderTopRightRadius: customize.borderRadius + 'px',
borderBottomRightRadius: customize.borderRadius + 'px',
backgroundColor: customize.borderColor
}"
/>
<div
class="bottom"
:style="{
width: customize.borderLength + 'px',
height: customize.borderWidth + 'px',
borderTopRightRadius: customize.borderRadius + 'px',
borderBottomRightRadius: customize.borderRadius + 'px',
backgroundColor: customize.borderColor
}"
/>
</div>
</div>
</template>
<script>
export default {
name: 'DiagonalBorder',
components: {
},
props: {
config: {
type: Object,
default: () => ({})
}
},
data () {
return {
}
},
computed: {
option () {
return this.config.option
},
optionData () {
return this.option.data
},
customize () {
return this.option.customize
}
},
mounted () {
if (this.customize.diagonalType === 'leftTopRightBottom') {
const leftDiagonal = document.querySelector('.left-diagonal').querySelector('.left')
const rightDiagonal = document.querySelector('.left-diagonal').querySelector('.right')
leftDiagonal.style.left = `${this.customize.borderWidth / 2}px`
leftDiagonal.style.top = `${this.customize.borderWidth / 2}px`
rightDiagonal.style.right = `${this.customize.borderWidth / 2}px`
rightDiagonal.style.bottom = `${this.customize.borderWidth / 2}px`
} else {
const leftDiagonal = document.querySelector('.right-diagonal').querySelector('.left')
const rightDiagonal = document.querySelector('.right-diagonal').querySelector('.right')
leftDiagonal.style.left = `${this.customize.borderWidth / 2}px`
leftDiagonal.style.bottom = `${this.customize.borderWidth / 2}px`
rightDiagonal.style.right = `${this.customize.borderWidth / 2}px`
rightDiagonal.style.top = `${this.customize.borderWidth / 2}px`
}
},
methods: { }
}
</script>
<style lang="scss" scoped>
.border-box {
width: 100%;
height: 100%;
position: relative;
.left-diagonal {
.top {
box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
}
// 顺时针旋转90度
.left {
box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
transform: rotate(90deg);
transform-origin: left;
}
.right {
box-sizing: border-box;
position: absolute;
bottom: 0;
right: 0;
transform: rotate(90deg);
transform-origin: right;
}
.bottom {
box-sizing: border-box;
position: absolute;
bottom: 0;
right: 0;
transform-origin: right;
}
}
.right-diagonal {
.top {
box-sizing: border-box;
position: absolute;
top: 0;
right: 0;
}
.right {
box-sizing: border-box;
position: absolute;
top: 0;
right: 0;
transform: rotate(-90deg);
transform-origin: right;
}
.left {
box-sizing: border-box;
position: absolute;
bottom: 0;
left: 0;
transform: rotate(-90deg);
transform-origin: left;
}
.bottom {
box-sizing: border-box;
position: absolute;
bottom: 0;
left: 0;
transform-origin: left;
}
}
}
</style>