单独构建大屏ui库,避免引入混乱
This commit is contained in:
aixianling
42
ui/dv/layout/AiDvPanel/borders/border0.vue
Normal file
42
ui/dv/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
ui/dv/layout/AiDvPanel/borders/border1.vue
Normal file
65
ui/dv/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>
|
||||
63
ui/dv/layout/AiDvPanel/borders/border10.vue
Normal file
63
ui/dv/layout/AiDvPanel/borders/border10.vue
Normal file
@@ -0,0 +1,63 @@
|
||||
<template>
|
||||
<section class="border10" :class="'border10-' + theme">
|
||||
<div class="border10-title">
|
||||
<!-- <img src="../asset/ic-badge.png" v-if="theme === '1'" /> -->
|
||||
<h2>{{ title }}</h2>
|
||||
</div>
|
||||
<div class="slot">
|
||||
<slot/>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'border10',
|
||||
|
||||
props: ['title', 'theme']
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.border10 {
|
||||
height: 100%;
|
||||
|
||||
.border10-title {
|
||||
display: flex;
|
||||
height: 41px;
|
||||
padding: 0 23px;
|
||||
box-sizing: border-box;
|
||||
background-image: url(../asset/border10.png);
|
||||
background-size: 100% 41px;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
h2 {
|
||||
position: relative;
|
||||
top: -3px;
|
||||
font-size: 24px;
|
||||
color: #E2EBF1;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
&.border10-1 .border10-title {
|
||||
// background-image: url(../asset/border8.png);
|
||||
// background-position: bottom;
|
||||
|
||||
&:after {
|
||||
background: #FFA086;
|
||||
}
|
||||
}
|
||||
|
||||
.slot {
|
||||
height: calc(100% - 41px);
|
||||
padding-top: 19px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
64
ui/dv/layout/AiDvPanel/borders/border11.vue
Normal file
64
ui/dv/layout/AiDvPanel/borders/border11.vue
Normal file
@@ -0,0 +1,64 @@
|
||||
<template>
|
||||
<section class="border11" :class="'border11-' + theme">
|
||||
<div class="border11-title">
|
||||
<!-- <img src="../asset/ic-badge.png" v-if="theme === '1'" /> -->
|
||||
<h2>{{ title }}</h2>
|
||||
</div>
|
||||
<div class="slot">
|
||||
<slot/>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'border11',
|
||||
|
||||
props: ['title', 'theme']
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.border11 {
|
||||
height: 100%;
|
||||
|
||||
.border11-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 50px;
|
||||
padding: 0 66px;
|
||||
box-sizing: border-box;
|
||||
background-image: url(../asset/border11.png);
|
||||
background-size: 100% 50px;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
h2 {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: #FFFFFF;
|
||||
letter-spacing: 2px;
|
||||
text-shadow: 0 0 10px #0671E2;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
&.border11-1 .border11-title {
|
||||
// background-image: url(../asset/border8.png);
|
||||
// background-position: bottom;
|
||||
|
||||
&:after {
|
||||
background: #FFA086;
|
||||
}
|
||||
}
|
||||
|
||||
.slot {
|
||||
height: calc(100% - 50px);
|
||||
padding-top: 19px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
64
ui/dv/layout/AiDvPanel/borders/border12.vue
Normal file
64
ui/dv/layout/AiDvPanel/borders/border12.vue
Normal file
@@ -0,0 +1,64 @@
|
||||
<template>
|
||||
<section class="border12" :class="'border12-' + theme">
|
||||
<div class="border12-title">
|
||||
<!-- <img src="../asset/ic-badge.png" v-if="theme === '1'" /> -->
|
||||
<h2>{{ title }}</h2>
|
||||
</div>
|
||||
<div class="slot">
|
||||
<slot/>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'border12',
|
||||
|
||||
props: ['title', 'theme']
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.border12 {
|
||||
height: 100%;
|
||||
|
||||
.border12-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 50px;
|
||||
padding: 0 39px;
|
||||
box-sizing: border-box;
|
||||
background-image: url(../asset/border12.png);
|
||||
background-size: 100% 50px;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
h2 {
|
||||
font-weight: 600;
|
||||
font-size: 24px;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
letter-spacing: 2px;
|
||||
text-shadow: 0 2px 24px #1b7ef2e8;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
&.border12-1 .border12-title {
|
||||
// background-image: url(../asset/border8.png);
|
||||
// background-position: bottom;
|
||||
|
||||
&:after {
|
||||
background: #FFA086;
|
||||
}
|
||||
}
|
||||
|
||||
.slot {
|
||||
height: calc(100% - 50px);
|
||||
padding-top: 19px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
63
ui/dv/layout/AiDvPanel/borders/border13.vue
Normal file
63
ui/dv/layout/AiDvPanel/borders/border13.vue
Normal file
@@ -0,0 +1,63 @@
|
||||
<template>
|
||||
<section class="border13" :class="'border13-' + theme">
|
||||
<div class="border13-title">
|
||||
<!-- <img src="../asset/ic-badge.png" v-if="theme === '1'" /> -->
|
||||
<h2>{{ title }}</h2>
|
||||
</div>
|
||||
<div class="slot">
|
||||
<slot/>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'border13',
|
||||
|
||||
props: ['title', 'theme']
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.border13 {
|
||||
height: 100%;
|
||||
background: #7583900f;
|
||||
|
||||
.border13-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 68px;
|
||||
padding: 0 54px;
|
||||
box-sizing: border-box;
|
||||
background-image: url(../asset/border13.png);
|
||||
background-size: 100% 68px;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
h2 {
|
||||
font-size: 24px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
||||
img {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
&.border13-1 .border13-title {
|
||||
// background-image: url(../asset/border8.png);
|
||||
// background-position: bottom;
|
||||
|
||||
&:after {
|
||||
background: #FFA086;
|
||||
}
|
||||
}
|
||||
|
||||
.slot {
|
||||
height: calc(100% - 68px);
|
||||
padding-top: 19px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
64
ui/dv/layout/AiDvPanel/borders/border14.vue
Normal file
64
ui/dv/layout/AiDvPanel/borders/border14.vue
Normal file
@@ -0,0 +1,64 @@
|
||||
<template>
|
||||
<section class="border14">
|
||||
<div class="border14-title">
|
||||
<div class="icon left"/>
|
||||
<h2>{{ title }}</h2>
|
||||
<div class="icon"/>
|
||||
</div>
|
||||
<div class="slot">
|
||||
<slot/>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'border14',
|
||||
props: ['title', 'theme']
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.border14 {
|
||||
height: 100%;
|
||||
background-image: linear-gradient(180deg, rgba(61, 88, 161, 0) 0%, rgba(13, 36, 119, 0.9) 99%);
|
||||
background-size: 100% 100%;
|
||||
background-color: rgba(#0D2477, .3);
|
||||
|
||||
.border14-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 68px;
|
||||
box-sizing: border-box;
|
||||
background-image: url(../asset/border14.svg);
|
||||
background-size: 1478px 142px;
|
||||
background-repeat: no-repeat;
|
||||
padding-top: 30px;
|
||||
background-position: center -20px;
|
||||
|
||||
h2 {
|
||||
font-size: 26px;
|
||||
color: #09F0FE;
|
||||
margin: 0 20px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 20px;
|
||||
height: 8px;
|
||||
background-image: url("../asset/border14-icon.svg");
|
||||
background-size: 35px 22px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
|
||||
&.left {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.slot {
|
||||
height: calc(100% - 68px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
34
ui/dv/layout/AiDvPanel/borders/border15.vue
Normal file
34
ui/dv/layout/AiDvPanel/borders/border15.vue
Normal file
@@ -0,0 +1,34 @@
|
||||
<template>
|
||||
<section class="border15">
|
||||
<h2>{{ title }}</h2>
|
||||
<div class="slot">
|
||||
<slot/>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'border15',
|
||||
props: ['title', 'theme']
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.border15 {
|
||||
height: 100%;
|
||||
|
||||
h2 {
|
||||
font-size: 14px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
padding: 0 10px;
|
||||
background-image: linear-gradient(270deg, rgba(31, 67, 102, 0), rgba(31, 78, 102, 0.4));
|
||||
margin-bottom: 12px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.slot {
|
||||
height: calc(100% - 30px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
115
ui/dv/layout/AiDvPanel/borders/border2.vue
Normal file
115
ui/dv/layout/AiDvPanel/borders/border2.vue
Normal file
@@ -0,0 +1,115 @@
|
||||
<template>
|
||||
<section class="border2">
|
||||
<div class="corner left-bottom"></div>
|
||||
<div class="corner right-bottom"></div>
|
||||
<div class="bg">
|
||||
<div class="header">
|
||||
<img src="https://cdn.cunwuyun.cn/dvcp/dv/img/sanjiaoxing.svg" />
|
||||
<h2>{{ title }}</h2>
|
||||
<img class="header-right" src="https://cdn.cunwuyun.cn/dvcp/dv/img/sanjiaoxing.svg" />
|
||||
</div>
|
||||
<div class="slot">
|
||||
<slot/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'border2',
|
||||
props: {title: String},
|
||||
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</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
ui/dv/layout/AiDvPanel/borders/border3.vue
Normal file
140
ui/dv/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
ui/dv/layout/AiDvPanel/borders/border4.vue
Normal file
45
ui/dv/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>
|
||||
79
ui/dv/layout/AiDvPanel/borders/border5.vue
Normal file
79
ui/dv/layout/AiDvPanel/borders/border5.vue
Normal file
@@ -0,0 +1,79 @@
|
||||
<template>
|
||||
<section class="border5">
|
||||
<div class="title">
|
||||
<div class="title-left">
|
||||
<h2>{{ title }}</h2>
|
||||
</div>
|
||||
<img src="https://cdn.cunwuyun.cn/dvcp/dv/img/gz.svg" />
|
||||
</div>
|
||||
<div class="slot">
|
||||
<slot/>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'border5',
|
||||
props: {title: String}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.border5 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-top: 10px;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
|
||||
.slot {
|
||||
width: 100%;
|
||||
height: calc(100% - 0px);
|
||||
padding: 40px 10px 20px;
|
||||
background: rgba(120, 0, 0, 0.2);
|
||||
border: 1px solid rgba(203, 45, 0, 0.5);
|
||||
}
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 111;
|
||||
width: 100%;
|
||||
|
||||
.title-left {
|
||||
width: 180px;
|
||||
height: 38px;
|
||||
padding-left: 32px;
|
||||
background: url(./../asset/dq.svg);
|
||||
background-size: 100% 100%;
|
||||
|
||||
h2 {
|
||||
padding-top: 4px;
|
||||
font-size: 18px;
|
||||
font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
line-height: 24px;
|
||||
text-shadow: 0px 2px 4px rgba(117, 9, 9, 0.5);
|
||||
background: linear-gradient(180deg, #FFF6C7 0%, #FF9A02 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
width: 64px;
|
||||
height: 26px;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
79
ui/dv/layout/AiDvPanel/borders/border6.vue
Normal file
79
ui/dv/layout/AiDvPanel/borders/border6.vue
Normal file
@@ -0,0 +1,79 @@
|
||||
<template>
|
||||
<section class="border6" :class="'border6-' + theme">
|
||||
<div class="border6-title">
|
||||
<img src="../asset/ic-badge.png" v-if="theme === '1'" />
|
||||
<h2>{{ title }}</h2>
|
||||
</div>
|
||||
<div class="slot">
|
||||
<slot/>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'border6',
|
||||
|
||||
props: ['title', 'theme']
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.border6 {
|
||||
height: 100%;
|
||||
|
||||
.border6-title {
|
||||
display: flex;
|
||||
position: relative;
|
||||
height: 40px;
|
||||
// line-height: 26px;
|
||||
padding: 4px 0 0 22px;
|
||||
box-sizing: border-box;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
background-image: url(../asset/title6.png);
|
||||
background-position: bottom;
|
||||
background-size: 100% 7px;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
h2 {
|
||||
line-height: 1;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
font-weight: normal;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
&:after {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: #52575aff;
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
|
||||
&.border6-1 .border6-title {
|
||||
background-image: url(../asset/title-6-dj.png);
|
||||
background-position: bottom;
|
||||
|
||||
&:after {
|
||||
background: #FFA086;
|
||||
}
|
||||
}
|
||||
|
||||
.slot {
|
||||
height: calc(100% - 40px);
|
||||
padding-top: 19px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
66
ui/dv/layout/AiDvPanel/borders/border7.vue
Normal file
66
ui/dv/layout/AiDvPanel/borders/border7.vue
Normal file
@@ -0,0 +1,66 @@
|
||||
<template>
|
||||
<section class="border7" :class="'border7-' + theme">
|
||||
<div class="border7-title">
|
||||
<!-- <img src="../asset/ic-badge.png" v-if="theme === '1'" /> -->
|
||||
<h2>{{ title }}</h2>
|
||||
</div>
|
||||
<div class="slot">
|
||||
<slot/>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'border7',
|
||||
|
||||
props: ['title', 'theme']
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.border7 {
|
||||
height: 100%;
|
||||
|
||||
.border7-title {
|
||||
display: flex;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
height: 42px;
|
||||
// line-height: 26px;
|
||||
padding: 0 36px;
|
||||
box-sizing: border-box;
|
||||
background-image: url(../asset/border7.png);
|
||||
background-position: bottom;
|
||||
background-size: 100% 42px;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
h2 {
|
||||
font-weight: 600;
|
||||
font-size: 22px;
|
||||
color: #FFFFFF;
|
||||
text-shadow: 0 0 8px #006BFF;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
&.border7-1 .border7-title {
|
||||
// background-image: url(../asset/border7.png);
|
||||
// background-position: bottom;
|
||||
|
||||
&:after {
|
||||
background: #FFA086;
|
||||
}
|
||||
}
|
||||
|
||||
.slot {
|
||||
height: calc(100% - 42px);
|
||||
padding-top: 19px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
64
ui/dv/layout/AiDvPanel/borders/border8.vue
Normal file
64
ui/dv/layout/AiDvPanel/borders/border8.vue
Normal file
@@ -0,0 +1,64 @@
|
||||
<template>
|
||||
<section class="border8" :class="'border8-' + theme">
|
||||
<div class="border8-title">
|
||||
<!-- <img src="../asset/ic-badge.png" v-if="theme === '1'" /> -->
|
||||
<h2>{{ title }}</h2>
|
||||
</div>
|
||||
<div class="slot">
|
||||
<slot/>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'border8',
|
||||
|
||||
props: ['title', 'theme']
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.border8 {
|
||||
height: 100%;
|
||||
|
||||
.border8-title {
|
||||
display: flex;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
height: 34px;
|
||||
padding: 0 44px;
|
||||
box-sizing: border-box;
|
||||
background-image: url(../asset/border8.png);
|
||||
background-size: 100% 34px;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
h2 {
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
color: #FFFFFF;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
&.border8-1 .border8-title {
|
||||
// background-image: url(../asset/border8.png);
|
||||
// background-position: bottom;
|
||||
|
||||
&:after {
|
||||
background: #FFA086;
|
||||
}
|
||||
}
|
||||
|
||||
.slot {
|
||||
height: calc(100% - 34px);
|
||||
padding-top: 19px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
63
ui/dv/layout/AiDvPanel/borders/border9.vue
Normal file
63
ui/dv/layout/AiDvPanel/borders/border9.vue
Normal file
@@ -0,0 +1,63 @@
|
||||
<template>
|
||||
<section class="border9" :class="'border9-' + theme">
|
||||
<div class="border9-title">
|
||||
<!-- <img src="../asset/ic-badge.png" v-if="theme === '1'" /> -->
|
||||
<h2>{{ title }}</h2>
|
||||
</div>
|
||||
<div class="slot">
|
||||
<slot/>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'border9',
|
||||
|
||||
props: ['title', 'theme']
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.border9 {
|
||||
height: 100%;
|
||||
|
||||
.border9-title {
|
||||
display: flex;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
height: 40px;
|
||||
padding: 0 23px;
|
||||
box-sizing: border-box;
|
||||
background-image: url(../asset/border9.png);
|
||||
background-size: 100% 40px;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
h2 {
|
||||
font-size: 24px;
|
||||
color: #E2EBF1;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
&.border9-1 .border9-title {
|
||||
// background-image: url(../asset/border8.png);
|
||||
// background-position: bottom;
|
||||
|
||||
&:after {
|
||||
background: #FFA086;
|
||||
}
|
||||
}
|
||||
|
||||
.slot {
|
||||
height: calc(100% - 40px);
|
||||
padding-top: 19px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user