新版大屏顶部

components/layout/AiDvWrapper/AiDvWrapper.vue

@@ -2,7 +2,8 @@
   <section class="AiDvWrapper" :class="'AiDvWrapper' + theme">
     <dv-full-screen-container>
       <div class="viewPanel column" flex>
-        <component :is="headerComponent" v-bind="{...$props,...$data}" @fullscreen="handleFullScreen" @setting="e=>dialog=e"/>
+        <component :is="headerComponent" v-bind="{...$props,...$data}"
+                   @fullscreen="handleFullScreen" @setting="e=>dialog=e" @change="e=>$emit('change',e)"/>
         <div class="fill">
           <slot/>
         </div>
@@ -23,10 +24,11 @@ import {fullScreenContainer} from '@jiaminghi/data-view'
 import AiSprite from "../../AiSprite";
 import Classic from "./layout/classic";
 import Vue from "vue"
+import Primary from "./layout/primary";
 
 export default {
   name: "AiDvWrapper",
-  components: {Classic, AiSprite},
+  components: {Primary, Classic, AiSprite},
   model: {
     prop: 'value',
     event: 'change'
@@ -44,7 +46,7 @@ export default {
     /**
      * 布局方案:black,classic
      */
-    type: {default: "classic"}
+    type: {default: "black"}
   },
   computed: {
     active: {
@@ -56,7 +58,8 @@ export default {
       }
     },
     headerComponent: v => ({
-      classic: Classic
+      classic: Classic,
+      black: Primary
     }[v.type])
   },
   watch: {

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>