大屏顶部旧样式归档处理

components/layout/AiDvWrapper/AiDvWrapper.vue

@@ -2,42 +2,7 @@
   <section class="AiDvWrapper" :class="'AiDvWrapper' + theme">
     <dv-full-screen-container>
       <div class="viewPanel column" flex>
-        <el-row type="flex" class="headerPane">
+        <component :is="headerComponent" v-bind="{...$props,...$data}" @fullscreen="handleFullScreen" @setting="e=>dialog=e"/>
-          <div class="fill topPane">
-            <div class="viewTabs" flex>
-              <div v-for="view in tabs" :key="view.id" class="btn" :class="{active:view.id==active}" flex
-                   @click="$emit('change',view.id)">{{ view.label }}
-              </div>
-              <div v-if="hasMoreDvs" class="btn more" :class="{active:isMoreTabs}" flex>更多
-                <div class="moreViews">
-                  <div v-for="view in moreTabs" :key="view.id" v-text="view.label"
-                       class="moreViewItem" :class="{active:view.id==active}"
-                       :popper-options="{boundariesElement:'AiDvWrapper'}"
-                       @click="$emit('change',view.id)"/>
-                </div>
-              </div>
-            </div>
-            <div class="headerBottomBorder">
-              <div class="breatheLights"/>
-            </div>
-          </div>
-          <div class="headerCenter">
-            <div class="headerZone">
-              <ai-sprite width="600" height="90" class="fly" @init="initFly"/>
-              <span>{{ title }}</span>
-            </div>
-          </div>
-          <div class="fill topPane">
-            <div class="settingZone" flex>
-              <right-top-border class="time">{{ currentTime }}</right-top-border>
-              <right-top-border class="setting" @click.native.stop="dialog=true"/>
-              <right-top-border class="fullscreen" @click.native.stop="handleFullScreen"/>
-            </div>
-            <div class="headerBottomBorder right">
-              <div class="breatheLights"/>
-            </div>
-          </div>
-        </el-row>
         <div class="fill">
           <slot/>
         </div>
@@ -55,15 +20,13 @@
 
 <script>
 import {fullScreenContainer} from '@jiaminghi/data-view'
-import Vue from "vue";
-import RightTopBorder from "./rightTopBorder";
 import AiSprite from "../../AiSprite";
-
+import Classic from "./layout/classic";
-Vue.use(fullScreenContainer)
+import Vue from "vue"
 
 export default {
   name: "AiDvWrapper",
-  components: {AiSprite, RightTopBorder},
+  components: {Classic, AiSprite},
   model: {
     prop: 'value',
     event: 'change'
@@ -77,7 +40,11 @@ export default {
       default: '0',
       type: String
     },
-    value: {default: ''}
+    value: {default: ''},
+    /**
+     * 布局方案:black,classic
+     */
+    type: {default: "classic"}
   },
   computed: {
     active: {
@@ -88,18 +55,9 @@ export default {
         return this.value || this.views?.[0]?.id
       }
     },
-    hasMoreDvs() {
+    headerComponent: v => ({
-      return this.views.length > 4
+      classic: Classic
-    },
+    }[v.type])
-    tabs() {
-      return !this.hasMoreDvs ? this.views : this.views.slice(0, 3)
-    },
-    moreTabs() {
-      return this.views?.slice(3) || []
-    },
-    isMoreTabs() {
-      return this.moreTabs?.some(e => e.id == this.active)
-    }
   },
   watch: {
     title: {
@@ -132,36 +90,6 @@ export default {
         cfs.call(el)
       }
     },
-    initFly({layer, lib: {Arc}}) {
-      const rand = (min, max) => min + (max - min) * Math.random()
-      const startFly = (p) => {
-        let scaleNum = rand(1, 3)
-        const pos = [rand(0, 600), 90 - rand(8, 50)]
-        p.attr({
-          pos,
-          scale: [scaleNum, scaleNum],
-          radius: 1,
-          fillColor: '#0aa5ff',
-          filter: 'drop-shadow( 0, 2px, 2px, #0aa5ff)'
-        })
-        p.animate([
-          pos,
-          {y: 0}
-        ], {
-          opacity: 0,
-          duration: rand(1, 1.5) * 1000,
-          iterations: Infinity,
-          easing: 'ease-out'
-        })
-        setTimeout(() => layer.append(p), rand(1, 5) * 1000)
-      }
-      //初始化标题萤火效果
-      let numP = 70;
-      for (let i = 0; i <= numP; i++) {
-        const p = new Arc()
-        startFly(p)
-      }
-    },
     handleSetting() {
       if (this.setting.timer) clearInterval(this.setting.timer)
       let count = 0
@@ -181,17 +109,14 @@ export default {
     setInterval(() => {
       this.currentTime = this.$moment().format("YYYY/MM/DD HH:mm:ss")
     }, 1000)
+    Vue.use(fullScreenContainer)
   },
 }
 </script>
 
 <style lang="scss" scoped>
-@font-face {
-  font-family: DIN;
-  src: url("assets/D-DINExp.otf");
-}
-
 @import "../../animation";
+
 .AiDvWrapper {
   .viewPanel {
     display: flex;
@@ -212,247 +137,6 @@ export default {
     }
   }
 
-  :deep(.headerPane ){
-    display: flex;
-    align-items: center;
-    height: 120px;
-    width: 100%;
-    padding: 0 10px;
-    position: relative;
-    color: #fff;
-
-    .topPane {
-      z-index: 5;
-    }
-
-    .viewTabs {
-      display: flex;
-      align-items: center;
-      height: 60px;
-      font-size: 15px;
-      overflow: visible;
-
-      .btn {
-        display: flex;
-        align-items: center;
-        cursor: pointer;
-        justify-content: center;
-        min-width: 120px;
-        height: 48px;
-        background-repeat: no-repeat;
-        background-position: center;
-        background-image: url("assets/viewTabBtn.svg");
-
-        &.more {
-          position: relative;
-          overflow: visible;
-
-          &:hover {
-            background-image: url("assets/moreViewsBtn.svg");
-
-            .moreViews {
-              display: block;
-            }
-          }
-        }
-
-        &.active {
-          position: relative;
-          background-image: none;
-
-          &:before {
-            content: " ";
-            display: block;
-            position: absolute;
-            width: 126px;
-            height: 38px;
-            left: 50%;
-            top: 50%;
-            transform: translate(-50%, -50%);
-            background-image: url("assets/viewTabBtn-active.svg");
-          }
-        }
-
-        & + .btn, & + .moreTabs {
-          margin-left: 10px;
-        }
-      }
-    }
-
-    .settingZone {
-      display: flex;
-      align-items: center;
-      font-family: DIN, serif;
-      height: 60px;
-      justify-content: flex-end;
-      font-size: 18px;
-      z-index: 5;
-
-      .rightTopBorder + .rightTopBorder {
-        margin-left: 10px;
-      }
-
-      .time {
-        width: 200px;
-      }
-
-      .setting {
-        background-image: url("assets/setting.svg");
-      }
-
-      .fullscreen {
-        background-image: url("assets/fullscreen.svg");
-      }
-    }
-
-    .headerCenter {
-      width: 880px;
-      height: 90px;
-      z-index: 3;
-      background-repeat: no-repeat;
-      background-position: center -32px;
-      background-image: url("assets/headerCenterBg1.svg");
-
-      &:before {
-        content: " ";
-        display: block;
-        position: absolute;
-        background: linear-gradient(180deg, #040718 0%, rgba(4, 7, 24, 0) 100%);
-        top: 0;
-        left: 0;
-        right: 0;
-        pointer-events: none;
-        height: 64px;
-        z-index: 4;
-      }
-
-      .headerZone {
-        position: relative;
-        margin: 0 auto;
-        width: 760px;
-        height: 124px;
-        background-repeat: no-repeat;
-        background-image: url("./assets/headerCenterBorderLight.svg"), url("./assets/headerCenterBorder.svg"), url("./assets/headerCenterBg2.png");
-        background-position: center bottom, center 0, center -20px;
-        overflow: visible;
-
-        & > span {
-          position: absolute;
-          left: 50%;
-          top: calc(50% - 20px);
-          transform: translate(-50%, -50%);
-          white-space: nowrap;
-          font-size: 40px;
-          line-height: 47px;
-          letter-spacing: 5px;
-          text-shadow: 0 0 8px #1365FF, 0 0 2px rgba(133, 181, 255, .5);
-          z-index: 9;
-          font-weight: bold;
-        }
-
-        .fly {
-          position: absolute;
-          top: 0;
-          width: 600px;
-          height: 90px;
-          left: 50%;
-          transform: translateX(-50%);
-          z-index: 3;
-        }
-      }
-    }
-
-    .headerBottomBorder {
-      position: relative;
-      width: 538px;
-      height: 15px;
-      background-image: url("assets/headerBottomBorder.svg");
-
-      &:before {
-        content: " ";
-        display: block;
-        position: absolute;
-        left: -3px;
-        bottom: -3px;
-        width: 40px;
-        height: 12px;
-        background-image: url("assets/headerBottomLight.svg");
-      }
-
-      .breatheLights {
-        position: absolute;
-        right: -7px;
-        bottom: -20px;
-        transform: translateX(100%);
-        width: 132px;
-        height: 20px;
-        animation: breathes 1.5s ease-in-out infinite alternate;
-        animation-delay: .5s;
-        display: flex;
-        background-repeat: no-repeat;
-
-        &:before {
-          transform: translateX(calc(6px - 100%));
-          display: block;
-          content: " ";
-          width: 44px;
-          height: 20px;
-          animation: breathes 1.5s ease-in-out infinite alternate;
-        }
-
-        &:after {
-          transform: translateX(-6px);
-          display: block;
-          content: " ";
-          width: 44px;
-          height: 20px;
-          animation: breathes 1.5s infinite alternate;
-          animation-delay: 1s;
-        }
-      }
-
-      &.right {
-        float: right;
-        transform: rotateY(180deg);
-      }
-    }
-
-    .moreViews {
-      display: none;
-      position: absolute;
-      bottom: 0;
-      transform: translateY(100%);
-      width: 120px;
-      min-width: 120px;
-      padding: 0;
-      background: rgba(9, 43, 75, 0.5);
-      box-shadow: 0 0 8px 0 #20B8FF inset;
-      border: 1px solid #66DBFF;
-      border-radius: 0;
-      z-index: 2;
-
-      .moreViewItem {
-        height: 44px;
-        width: 100px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        border-bottom: 1px solid #0C5369;
-        margin: 0 10px;
-        color: #fff;
-        cursor: pointer;
-
-        &:last-of-type {
-          border-bottom: none;
-        }
-
-        &.active, &:hover {
-          color: #FFDB52;
-        }
-      }
-    }
-  }
-
   :deep(.settingDialog ) {
     .ai-dialog {
       background: #1D2127;
@@ -514,7 +198,7 @@ export default {
     }
   }
 
-  &.AiDvWrapper1 {
+  :deep(&.AiDvWrapper1) {
     .headerBottomBorder {
       display: none;
       background-image: none;
@@ -606,31 +290,4 @@ export default {
     }
   }
 }
-
-@keyframes breatheList {
-  0% {
-    border-color: rgba(#FFC24A, 1);
-    box-shadow: 0 0 8px 0 #FFC24A, 0 0 4px 0 #FFFAE7;
-  }
-  50% {
-    border-color: rgba(#FFC24A, .4);
-    box-shadow: 0 0 8px 0 rgba(#FFC24A, .4), 0 0 4px 0 rgba(#FFFAE7, .4);
-  }
-  100% {
-    border-color: rgba(#FFC24A, .2);
-    box-shadow: 0 0 8px 0 rgba(#FFC24A, .2), 0 0 4px 0 rgba(#FFFAE7, .2);
-  }
-}
-
-@keyframes breathes {
-  0% {
-    background-image: url("assets/parallelogram.svg");
-  }
-  50% {
-    background-image: url("assets/parallelogram1.svg");
-  }
-  100% {
-    background-image: url("assets/parallelogram2.svg");
-  }
-}
 </style>

components/layout/AiDvWrapper/layout/classic.vue

@@ -0,0 +1,343 @@
+<template>
+  <section class="classic">
+    <div class="fill topPane">
+      <div class="viewTabs" flex>
+        <div v-for="view in tabs" :key="view.id" class="btn" :class="{active:view.id==active}" flex
+             @click="$emit('change',view.id)">{{ view.label }}
+        </div>
+        <div v-if="hasMoreDvs" class="btn more" :class="{active:isMoreTabs}" flex>更多
+          <div class="moreViews">
+            <div v-for="view in moreTabs" :key="view.id" v-text="view.label"
+                 class="moreViewItem" :class="{active:view.id==active}"
+                 :popper-options="{boundariesElement:'AiDvWrapper'}"
+                 @click="$emit('change',view.id)"/>
+          </div>
+        </div>
+      </div>
+      <div class="headerBottomBorder">
+        <div class="breatheLights"/>
+      </div>
+    </div>
+    <div class="headerCenter">
+      <div class="headerZone">
+        <ai-sprite width="600" height="90" class="fly" @init="initFly"/>
+        <span>{{ title }}</span>
+      </div>
+    </div>
+    <div class="fill topPane">
+      <div class="settingZone" flex>
+        <right-top-border class="time">{{ currentTime }}</right-top-border>
+        <right-top-border class="setting" @click.native.stop="$emit('setting',true)"/>
+        <right-top-border class="fullscreen" @click.native.stop="$emit('fullscreen')"/>
+      </div>
+      <div class="headerBottomBorder right">
+        <div class="breatheLights"/>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+import RightTopBorder from "../rightTopBorder";
+export default {
+  name: "classic",
+  components: {RightTopBorder},
+  props: {
+    title: String,
+    views: {default: () => []},
+    active: String,
+    currentTime: {default: null}
+  },
+  computed: {
+    hasMoreDvs: v => v.views.length > 4,
+    tabs: v => !v.hasMoreDvs ? v.views : v.views.slice(0, 3),
+    moreTabs: v => v.views?.slice(3) || [],
+    isMoreTabs: v => v.moreTabs?.some(e => e.id == this.active),
+  },
+  data() {
+    return {}
+  },
+  methods: {
+    initFly({layer, lib: {Arc}}) {
+      const rand = (min, max) => min + (max - min) * Math.random()
+      const startFly = (p) => {
+        let scaleNum = rand(1, 3)
+        const pos = [rand(0, 600), 90 - rand(8, 50)]
+        p.attr({
+          pos,
+          scale: [scaleNum, scaleNum],
+          radius: 1,
+          fillColor: '#0aa5ff',
+          filter: 'drop-shadow( 0, 2px, 2px, #0aa5ff)'
+        })
+        p.animate([
+          pos,
+          {y: 0}
+        ], {
+          opacity: 0,
+          duration: rand(1, 1.5) * 1000,
+          iterations: Infinity,
+          easing: 'ease-out'
+        })
+        setTimeout(() => layer.append(p), rand(1, 5) * 1000)
+      }
+      //初始化标题萤火效果
+      let numP = 70;
+      for (let i = 0; i <= numP; i++) {
+        const p = new Arc()
+        startFly(p)
+      }
+    },
+  },
+  created() {
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@font-face {
+  font-family: DIN;
+  src: url("../assets/D-DINExp.otf");
+}
+
+.classic {
+  display: flex;
+  align-items: center;
+  height: 120px;
+  width: 100%;
+  padding: 0 10px;
+  position: relative;
+  color: #fff;
+
+  .topPane {
+    z-index: 5;
+  }
+
+  .viewTabs {
+    display: flex;
+    align-items: center;
+    height: 60px;
+    font-size: 15px;
+    overflow: visible;
+
+    .btn {
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+      justify-content: center;
+      min-width: 120px;
+      height: 48px;
+      background-repeat: no-repeat;
+      background-position: center;
+      background-image: url("../assets/viewTabBtn.svg");
+
+      &.more {
+        position: relative;
+        overflow: visible;
+
+        &:hover {
+          background-image: url("../assets/moreViewsBtn.svg");
+
+          .moreViews {
+            display: block;
+          }
+        }
+      }
+
+      &.active {
+        position: relative;
+        background-image: none;
+
+        &:before {
+          content: " ";
+          display: block;
+          position: absolute;
+          width: 126px;
+          height: 38px;
+          left: 50%;
+          top: 50%;
+          transform: translate(-50%, -50%);
+          background-image: url("../assets/viewTabBtn-active.svg");
+        }
+      }
+
+      & + .btn, & + .moreTabs {
+        margin-left: 10px;
+      }
+    }
+  }
+
+  .settingZone {
+    display: flex;
+    align-items: center;
+    font-family: DIN, serif;
+    height: 60px;
+    justify-content: flex-end;
+    font-size: 18px;
+    z-index: 5;
+
+    .rightTopBorder + .rightTopBorder {
+      margin-left: 10px;
+    }
+
+    .time {
+      width: 200px;
+    }
+
+    .setting {
+      background-image: url("../assets/setting.svg");
+    }
+
+    .fullscreen {
+      background-image: url("../assets/fullscreen.svg");
+    }
+  }
+
+  .headerCenter {
+    width: 880px;
+    height: 90px;
+    z-index: 3;
+    background-repeat: no-repeat;
+    background-position: center -32px;
+    background-image: url("../assets/headerCenterBg1.svg");
+
+    &:before {
+      content: " ";
+      display: block;
+      position: absolute;
+      background: linear-gradient(180deg, #040718 0%, rgba(4, 7, 24, 0) 100%);
+      top: 0;
+      left: 0;
+      right: 0;
+      pointer-events: none;
+      height: 64px;
+      z-index: 4;
+    }
+
+    .headerZone {
+      position: relative;
+      margin: 0 auto;
+      width: 760px;
+      height: 124px;
+      background-repeat: no-repeat;
+      background-image: url("./../assets/headerCenterBorderLight.svg"), url("./../assets/headerCenterBorder.svg"), url("./../assets/headerCenterBg2.png");
+      background-position: center bottom, center 0, center -20px;
+      overflow: visible;
+
+      & > span {
+        position: absolute;
+        left: 50%;
+        top: calc(50% - 20px);
+        transform: translate(-50%, -50%);
+        white-space: nowrap;
+        font-size: 40px;
+        line-height: 47px;
+        letter-spacing: 5px;
+        text-shadow: 0 0 8px #1365FF, 0 0 2px rgba(133, 181, 255, .5);
+        z-index: 9;
+        font-weight: bold;
+      }
+
+      .fly {
+        position: absolute;
+        top: 0;
+        width: 600px;
+        height: 90px;
+        left: 50%;
+        transform: translateX(-50%);
+        z-index: 3;
+      }
+    }
+  }
+
+  .headerBottomBorder {
+    position: relative;
+    width: 538px;
+    height: 15px;
+    background-image: url("../assets/headerBottomBorder.svg");
+
+    &:before {
+      content: " ";
+      display: block;
+      position: absolute;
+      left: -3px;
+      bottom: -3px;
+      width: 40px;
+      height: 12px;
+      background-image: url("../assets/headerBottomLight.svg");
+    }
+
+    .breatheLights {
+      position: absolute;
+      right: -7px;
+      bottom: -20px;
+      transform: translateX(100%);
+      width: 132px;
+      height: 20px;
+      animation: breathes 1.5s ease-in-out infinite alternate;
+      animation-delay: .5s;
+      display: flex;
+      background-repeat: no-repeat;
+
+      &:before {
+        transform: translateX(calc(6px - 100%));
+        display: block;
+        content: " ";
+        width: 44px;
+        height: 20px;
+        animation: breathes 1.5s ease-in-out infinite alternate;
+      }
+
+      &:after {
+        transform: translateX(-6px);
+        display: block;
+        content: " ";
+        width: 44px;
+        height: 20px;
+        animation: breathes 1.5s infinite alternate;
+        animation-delay: 1s;
+      }
+    }
+
+    &.right {
+      float: right;
+      transform: rotateY(180deg);
+    }
+  }
+
+  .moreViews {
+    display: none;
+    position: absolute;
+    bottom: 0;
+    transform: translateY(100%);
+    width: 120px;
+    min-width: 120px;
+    padding: 0;
+    background: rgba(9, 43, 75, 0.5);
+    box-shadow: 0 0 8px 0 #20B8FF inset;
+    border: 1px solid #66DBFF;
+    border-radius: 0;
+    z-index: 2;
+
+    .moreViewItem {
+      height: 44px;
+      width: 100px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-bottom: 1px solid #0C5369;
+      margin: 0 10px;
+      color: #fff;
+      cursor: pointer;
+
+      &:last-of-type {
+        border-bottom: none;
+      }
+
+      &.active, &:hover {
+        color: #FFDB52;
+      }
+    }
+  }
+}
+</style>