kubbo/dvcp_v2_webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

构建版本修改

Browse Source
This commit is contained in:
aixianling
2022-08-12 11:20:51 +08:00
parent c3f6fbbffe
commit 98946c1e28
167 changed files with 845 additions and 3473 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
components/layout/AiDvPanel/borders/border0.vue Normal file
View 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
components/layout/AiDvPanel/borders/border1.vue Normal file
View 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>

115
components/layout/AiDvPanel/borders/border2.vue Normal file
View 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
components/layout/AiDvPanel/borders/border3.vue Normal file
View 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
components/layout/AiDvPanel/borders/border4.vue Normal file
View 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
components/layout/AiDvPanel/borders/border5.vue Normal file
View 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>