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
2023-10-12 18:17:46 +08:00
parent 6b7ff8e58c
commit ab92982e71
6 changed files with 53 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

117
project/fengdu/AppBIBoard/components/fengduHead.vue
View File

@@ -1,11 +1,13 @@
<template>
<section class="fengduHead">
<div flex class="content">
<b class="headerTitle" v-text="title"/>
<el-tabs class="fill" v-model="current" @tab-click="$emit('change', current)">
<el-tab-pane v-for="tab in tabs" :key="tab.id" :label="tab.label" :name="tab.id"/>
</el-tabs>
<div class="rightPane" flex>
<div class="content flex">
<ai-area class="fill" v-model="current" :mask="false">
<template slot-scope="{areaname}">
<el-input class="areaPicker" :value="areaname" readonly suffix-icon="el-icon-arrow-down"/>
</template>
</ai-area>
<div class="headerTitle" v-text="title"/>
<div class="rightPane fill" flex>
<div class="item" v-text="currentTime"/>
<div class="item setting mar-l24" @click.stop="$emit('setting',true)"/>
<div class="item fullscreen mar-l14" @click.stop="$emit('fullscreen')"/>
@@ -30,16 +32,6 @@ export default {
computed: {
tabs: v => [
...v.views,
// {label: "测试哦哦", id: 1},
// {label: "测试哦哦", id: 2},
// {label: "测试哦哦", id: 3},
// {label: "测试哦哦", id: 4},
// {label: "测试哦哦", id: 5},
// {label: "测试哦哦", id: 6},
// {label: "测试哦哦", id: 7},
// {label: "测试哦哦", id: 8},
// {label: "测试哦哦", id: 9},
// {label: "测试哦哦", id: 10},
]
},
data() {
@@ -71,12 +63,21 @@ export default {
</script>
<style lang="scss" scoped>
@font-face {
font-family: YouSheBiaoTiHei;
src: url("https://cdn.cunwuyun.cn/fonts/YouSheBiaoTiHei-2.ttf");
}
.fengduHead {
width: 100%;
height: 96px;
padding: 0 48px;
padding: 0 24px;
box-sizing: border-box;
color: #fff;
position: relative;
background-repeat: no-repeat;
background-image: url("../assets/bg-lighting.png");
background-position:top center;
.content {
height: 100%;
@@ -85,79 +86,37 @@ export default {
font-family: PingFang-SC;
.headerTitle {
font-family: fangfang;
font-size: 38px;
font-weight: 400;
line-height: 62px;
letter-spacing: 1.52px;
color: #fff;
font-family: YouSheBiaoTiHei;
font-size: 44px;
letter-spacing: 4px;
line-height: 48px;
background-image: linear-gradient(to bottom, #fff, rgba(122, 232, 254, 1));
background-size: 100% 100%;
background-repeat: no-repeat;
background-clip: text;
color: transparent;
}
:deep(.el-tabs) {
margin-left: 92px;
:deep(.areaPicker) {
max-width: 300px;
.el-tabs__header {
margin-bottom: 0;
input {
background: rgba(0, 54, 82, 0.9);
border: 1px solid rgba(42, 122, 146, 0.7);
border-radius: 2.2px;
color: #B3DDE5;
cursor: pointer;
}
.el-tabs__nav-wrap {
padding: 0 24px;
&:after {
content: none;
}
}
.el-tabs__active-bar {
width: 88px;
background: linear-gradient(270deg, #02feff00 0%, #02feffff 51%, #02feff00 100%);
}
.el-tabs__item {
color: #fff;
font-size: 20px;
font-weight: 400;
font-family: PingFang-SC;
user-select: none;
&.is-active {
color: #02FEFF;
}
}
.el-tabs__nav-prev {
padding-right: 14px;
background-image: linear-gradient(270deg, #0b0d0cff 0%, #0f3031ff 72%, #02feffff 100%);
background-repeat: no-repeat;
background-position: right center;
background-size: 6px 32px;
.el-icon-arrow-left:before {
color: #02FEFF;
content: "◀";
}
}
.el-tabs__nav-next {
padding-left: 14px;
background-image: linear-gradient(270deg, #02feffff 0%, #0f3031ff 28%, #0b0d0cff 100%);
background-repeat: no-repeat;
background-position: left center;
background-size: 6px 32px;
.el-icon-arrow-right:before {
color: #02FEFF;
content: "▶";
}
.el-input__suffix {
color: #B3DDE5;
}
}
}
.rightPane {
margin-left: 75px;
padding: 0 11px 0 0;
justify-content: flex-end;
.item {
padding-left: 30px;