170 lines
3.8 KiB
Vue
170 lines
3.8 KiB
Vue
<template>
|
|
<section class="primary">
|
|
<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.name"/>
|
|
</el-tabs>
|
|
<div class="rightPane" 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')"/>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "primary",
|
|
props: {
|
|
title: String,
|
|
views: {default: () => []},
|
|
active: String,
|
|
currentTime: {default: null}
|
|
},
|
|
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() {
|
|
return {
|
|
current: ""
|
|
}
|
|
},
|
|
methods: {
|
|
getWeather() {
|
|
this.$request.post("/app/weather/queryWeather").then(res => {
|
|
if (res?.data) {
|
|
|
|
}
|
|
})
|
|
}
|
|
},
|
|
created() {
|
|
// this.getWeather()
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.primary {
|
|
width: 100%;
|
|
height: 96px;
|
|
padding: 0 48px;
|
|
box-sizing: border-box;
|
|
color: #fff;
|
|
|
|
.content {
|
|
height: 100%;
|
|
background-image: url("../assets/headerPrimaryBG_lb.png"), url("../assets/headerPrimaryBg_rb.png");
|
|
background-repeat: no-repeat;
|
|
background-position: left bottom, right bottom;
|
|
font-family: PingFang-SC;
|
|
|
|
.headerTitle {
|
|
font-family: fangfang;
|
|
font-size: 38px;
|
|
font-weight: 400;
|
|
line-height: 62px;
|
|
letter-spacing: 1.52px;
|
|
color: #fff;
|
|
}
|
|
|
|
:deep(.el-tabs) {
|
|
margin-left: 92px;
|
|
|
|
.el-tabs__header {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.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: "▶";
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.rightPane {
|
|
margin-left: 75px;
|
|
padding: 0 11px 0 0;
|
|
|
|
.item {
|
|
padding-left: 30px;
|
|
height: 30px;
|
|
line-height: 30px;
|
|
background-image: url("../assets/timeIcon.png");
|
|
background-repeat: no-repeat;
|
|
background-position: left center;
|
|
|
|
&.setting {
|
|
background-image: url("../assets/settingIcon.png")!important;
|
|
}
|
|
|
|
&.fullscreen {
|
|
background-image: url("../assets/fullscreenIcon.png")!important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|