迁移大屏UI库和应用
This commit is contained in:
aixianling
42
project/dvui/layout/AiDvPanel/borders/border0.vue
Normal file
42
project/dvui/layout/AiDvPanel/borders/border0.vue
Normal file
@@ -0,0 +1,42 @@
|
||||
<template>
|
||||
<section class="border0">
|
||||
<div class="title">
|
||||
<slot v-if="$slots.title" name="title"/>
|
||||
<b v-else v-text="title"/>
|
||||
</div>
|
||||
<div class="slot">
|
||||
<slot />
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "border0",
|
||||
props: {title: String}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.border0 {
|
||||
height: 100%;
|
||||
.title {
|
||||
padding-left: 30px;
|
||||
background-image: url("../asset/titleBg.svg");
|
||||
background-repeat: no-repeat;
|
||||
height: 41px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
& > b {
|
||||
font-size: 24px;
|
||||
color: #fff;
|
||||
line-height: 32px;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.slot {
|
||||
height: calc(100% - 51px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
65
project/dvui/layout/AiDvPanel/borders/border1.vue
Normal file
65
project/dvui/layout/AiDvPanel/borders/border1.vue
Normal file
@@ -0,0 +1,65 @@
|
||||
<template>
|
||||
<section class="border1">
|
||||
<dv-border-box1 :color="['#2B6EFF']">
|
||||
<div class="bg">
|
||||
<div class="header" v-text="title"/>
|
||||
<div class="slot">
|
||||
<slot/>
|
||||
</div>
|
||||
</div>
|
||||
</dv-border-box1>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {borderBox1} from '@jiaminghi/data-view'
|
||||
import Vue from "vue";
|
||||
|
||||
Vue.use(borderBox1)
|
||||
|
||||
export default {
|
||||
name: "border1",
|
||||
props: {title: String}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.border1 {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
|
||||
.bg {
|
||||
position: relative;
|
||||
margin: 15px 20px;
|
||||
background-image: url("../asset/border1Bg.svg");
|
||||
background-size: 100% calc(100%);
|
||||
background-repeat: no-repeat;
|
||||
padding: 30px 20px 0 20px;
|
||||
box-sizing: border-box;
|
||||
height: calc(100% - 40px);
|
||||
|
||||
.header {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
height: 48px;
|
||||
min-width: 166px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
background-image: url("../asset/border1Title.svg");
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
}
|
||||
|
||||
.slot {
|
||||
height: calc(100% - 20px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
110
project/dvui/layout/AiDvPanel/borders/border2.vue
Normal file
110
project/dvui/layout/AiDvPanel/borders/border2.vue
Normal file
@@ -0,0 +1,110 @@
|
||||
<template>
|
||||
<section class="border2">
|
||||
<div class="corner left-bottom"></div>
|
||||
<div class="corner right-bottom"></div>
|
||||
<div class="bg">
|
||||
<div class="header">
|
||||
<img src="../asset/sanjiaoxing.svg" />
|
||||
<h2>{{ title }}</h2>
|
||||
<img class="header-right" src="../asset/sanjiaoxing.svg" />
|
||||
</div>
|
||||
<div class="slot">
|
||||
<slot/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'border2',
|
||||
props: {title: String}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.border2 {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(180deg, rgba(7, 29, 62, 0.2) 0%, rgba(15, 69, 124, 0.2) 100%);
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
.corner {
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
position: absolute;
|
||||
display: block;
|
||||
background-image: url(../asset/corner.svg);
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.corner.left-top {
|
||||
left: -6px;
|
||||
top: -6px;
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
.corner.right-top {
|
||||
right: -6px;
|
||||
top: -6px;
|
||||
}
|
||||
.corner.left-bottom {
|
||||
left: -6px;
|
||||
bottom: -6px;
|
||||
transform: rotateX(180deg) rotateY(180deg);
|
||||
}
|
||||
.corner.right-bottom {
|
||||
right: -6px;
|
||||
bottom: -6px;
|
||||
transform: rotateX(180deg);
|
||||
}
|
||||
.bg {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
background-repeat: no-repeat;
|
||||
box-sizing: border-box;
|
||||
|
||||
&:after {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: 28px;
|
||||
background-size: 100% 100%;
|
||||
content: ' ';
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
background: url(../asset/border2Title.svg) no-repeat;
|
||||
background-size: cover;
|
||||
|
||||
.header-right {
|
||||
position: relative;
|
||||
transform-origin: center;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 18px;
|
||||
color: #fff;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.slot {
|
||||
height: calc(100% - 40px);
|
||||
padding: 0 20px 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
140
project/dvui/layout/AiDvPanel/borders/border3.vue
Normal file
140
project/dvui/layout/AiDvPanel/borders/border3.vue
Normal file
@@ -0,0 +1,140 @@
|
||||
<template>
|
||||
<section class="border3">
|
||||
<div class="bg">
|
||||
<div class="bg-wrapper"></div>
|
||||
<div class="header">
|
||||
<div class="header-border">
|
||||
<div class="point"></div>
|
||||
<div class="point"></div>
|
||||
<div class="point"></div>
|
||||
</div>
|
||||
<h2>{{ title }}</h2>
|
||||
<div class="header-border">
|
||||
<div class="point"></div>
|
||||
<div class="point"></div>
|
||||
<div class="point"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<div class="bottom-left">
|
||||
<div class="point"></div>
|
||||
<div class="point"></div>
|
||||
<div class="point"></div>
|
||||
</div>
|
||||
<div class="bottom-right">
|
||||
<div class="point"></div>
|
||||
<div class="point"></div>
|
||||
<div class="point"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="slot">
|
||||
<slot/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'border3',
|
||||
props: {title: String}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.border3 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.bg {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
|
||||
.bg-wrapper {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
width: 100%;
|
||||
height: calc(100% - 12px);
|
||||
background: rgba(11, 24, 73, 0.3);
|
||||
}
|
||||
|
||||
.bottom-left, .bottom-right, .header-border {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
justify-content: space-between;
|
||||
width: 24%;
|
||||
height: 1px;
|
||||
|
||||
.point {
|
||||
width: 4px;
|
||||
height: 1px;
|
||||
background: #FFCD68;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: rgba(0, 133, 255, 0.5);
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
|
||||
.header-border {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 30%;
|
||||
height: 1px;
|
||||
background: rgba(0, 133, 255, 0.5);
|
||||
}
|
||||
|
||||
h2 {
|
||||
position: relative;
|
||||
font-size: 18px;
|
||||
color: #fff;
|
||||
letter-spacing: 2px;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 120px;
|
||||
height: 12px;
|
||||
transform: translate(-50%, -50%);
|
||||
content: ' ';
|
||||
background: url(../asset/border3Title.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.slot {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
height: calc(100% - 34px);
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
45
project/dvui/layout/AiDvPanel/borders/border4.vue
Normal file
45
project/dvui/layout/AiDvPanel/borders/border4.vue
Normal file
@@ -0,0 +1,45 @@
|
||||
<template>
|
||||
<section class="border4">
|
||||
<div class="slot">
|
||||
<slot/>
|
||||
</div>
|
||||
<div class="title">{{ title }}</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'border4',
|
||||
props: {title: String}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.border4 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(33, 73, 157, 0.15);
|
||||
border-radius: 6px;
|
||||
border: 1px solid #274A7E;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
|
||||
.slot {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
}
|
||||
|
||||
.title {
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
padding: 0 10px;
|
||||
color: #82C5FF;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user