新版大屏顶部

components/layout/AiDvWrapper/layout/classic.vue

@@ -220,7 +220,7 @@ export default {
       width: 760px;
       height: 124px;
       background-repeat: no-repeat;
-      background-image: url("./../assets/headerCenterBorderLight.svg"), url("./../assets/headerCenterBorder.svg"), url("./../assets/headerCenterBg2.png");
+      background-image: url("../assets/headerCenterBorderLight.svg"), url("../assets/headerCenterBorder.svg"), url("../assets/headerCenterBg2.png");
       background-position: center bottom, center 0, center -20px;
       overflow: visible;
 

components/layout/AiDvWrapper/layout/primary.vue

@@ -0,0 +1,163 @@
+<template>
+  <section class="primary">
+    <div flex class="content">
+      <b class="headerTitle" v-text="title"/>
+      <el-tabs class="fill">
+        <el-tab-pane v-for="tab in tabs" :key="tab.id" :label="tab.label" @click.native="$emit('change',tab.id)"/>
+      </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},
+    ]
+  },
+  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;
+
+    .headerTitle {
+      font-size: 38px;
+      font-weight: 400;
+      font-family: "zihun100hao-fangfangxianfengti";
+      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";
+        padding: 0 16px;
+
+        &.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");
+      }
+
+      &.fullscreen {
+        background-image: url("../assets/fullscreenIcon.png");
+      }
+    }
+  }
+}
+</style>