编辑器-基础-开场动画

src/views/base/Toolbar.vue

@@ -60,6 +60,7 @@
       </menu>
       <div class="settings-view-wrapper">
         <OpeningTipSettings v-show="activeTab === '开场提示'"></OpeningTipSettings>
+        <OpeningAnimationSettings v-show="activeTab === '开场动画'"></OpeningAnimationSettings>
         <PasswordSettings v-show="activeTab === '访问密码'"></PasswordSettings>
         <AutoCruiseSettings v-show="activeTab === '自动巡游'"></AutoCruiseSettings>
         <CustomLogoSettings v-show="activeTab === '自定义LOGO'"></CustomLogoSettings>
@@ -102,6 +103,7 @@
 <script>
 import { getMaterialList} from "@/api";
 import OpeningTipSettings from '@/views/base/openingTipSettings.vue'
+import OpeningAnimationSettings from '@/views/base/openingAnimationSettings.vue'
 import PasswordSettings from "@/views/base/passwordSettings.vue";
 import AutoCruiseSettings from '@/views/base/autoCruiseSettings.vue'
 import CustomLogoSettings from "@/views/base/customLogoSettings.vue";
@@ -118,6 +120,7 @@ export default {
     Table2,
     Select,
     OpeningTipSettings,
+    OpeningAnimationSettings,
     PasswordSettings,
     AutoCruiseSettings,
     CustomLogoSettings,

src/views/base/openingAnimationSettings.vue

@@ -0,0 +1,104 @@
+<template>
+  <div class="opening-animation-settings">
+    <span class="title">设置开场动画</span>
+    <br>
+    <div class="btns-and-video">
+      <div class="btn-wrapper">
+        <div
+          v-for="item of openingTypeList" :key="item"
+          class="opening-selection-btn"
+          :class="{'active-opening-type': info.openingAnimationType === item}"
+          @click="info.openingAnimationType = item"
+        >
+          {{item}}
+        </div>
+      </div>
+      <div class="video-wrapper">
+        <video
+          v-for="item of openingTypeList" :key="item"
+          v-show="item === info.openingAnimationType"
+          :src="require(`@/assets/videos/${item}.mp4`)"
+          controls controlslist="nodownload noremoteplayback noplaybackrate nofullscreen"
+          disablePictureInPicture
+        ></video>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+
+export default {
+  components: {
+  },
+  data() {
+    return {
+      openingTypeList: [
+        '小行星开场',
+        '小行星巡游开场',
+        '小行星缩放开场',
+        '水平巡游开场',
+        '水晶球开场',
+      ],
+    }
+  },
+  computed: {
+    ...mapGetters({
+      info:'info'
+    })
+  },
+  methods: {
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.opening-animation-settings {
+  padding: 24px 30px;
+  background: #252526;
+  height: 546px;
+  .title {
+    font-size: 18px;
+    color: #FFFFFF;
+  }
+  .btns-and-video {
+    margin-top: 16px;
+    display: flex;
+    align-items: flex-start;
+    .btn-wrapper {
+      .opening-selection-btn {
+        width: 180px;
+        height: 40px;
+        background: #1A1B1D;
+        border-radius: 2px;
+        border: 1px solid #404040;
+        margin-bottom: 16px;
+        text-align: center;
+        font-size: 14px;
+        color: #fff;
+        cursor: pointer;
+        &::after {
+          content: '';
+          height: 100%;
+          vertical-align: middle;
+          display: inline-block;
+        }
+      }
+      .active-opening-type {
+        color: #0076F6;
+      }
+    }
+    .video-wrapper {
+      width: 469px;
+      height: 264px;
+      margin-left: 20px;
+      video {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+    }
+  }
+}
+</style>