|
@@ -1,23 +1,46 @@
|
|
|
<template>
|
|
|
<div class="opening-animation-settings">
|
|
|
- <span class="title">{{$i18n.t(`edit_settings.opening_setting`)}}</span>
|
|
|
- <br>
|
|
|
+ <span class="title">{{ $i18n.t(`edit_settings.opening_setting`) }}</span>
|
|
|
+ <br />
|
|
|
<div class="switch-wrapper">
|
|
|
- <span class="label">{{$i18n.t('edit_settings.opening_animation_show')}}</span>
|
|
|
- <Switcher :value="info.isShowOpeningAnimation" @change="onSwitcherChange"></Switcher>
|
|
|
+ <span class="label">{{
|
|
|
+ $i18n.t("edit_settings.opening_animation_show")
|
|
|
+ }}</span>
|
|
|
+ <Switcher
|
|
|
+ :value="info.isShowOpeningAnimation"
|
|
|
+ @change="onSwitcherChange"
|
|
|
+ ></Switcher>
|
|
|
</div>
|
|
|
<div class="btns-and-video">
|
|
|
<div class="btn-wrapper">
|
|
|
- <button v-for="item of openingTypeList" :key="item" class="opening-selection-btn"
|
|
|
+ <button
|
|
|
+ v-for="item of openingTypeList"
|
|
|
+ :key="item"
|
|
|
+ class="opening-selection-btn"
|
|
|
:class="{ 'active-opening-type': info.openingAnimationType === item }"
|
|
|
- @click="info.openingAnimationType = item">
|
|
|
- {{$i18n.t(`zh_key.${item}`)}}
|
|
|
+ @click="info.openingAnimationType = item"
|
|
|
+ >
|
|
|
+ {{ $i18n.t(`baseSetting.${item}`) }}
|
|
|
</button>
|
|
|
</div>
|
|
|
<div class="video-wrapper">
|
|
|
- <video ref="opvideo" :src="require(`@/assets/videos/${info.openingAnimationType || '小行星开场'}_x264.mp4`)" autoplay
|
|
|
- loop></video>
|
|
|
- <i v-if="bofanging" @click="bofang" class="iconfont iconshow_playback"></i>
|
|
|
+ <video
|
|
|
+ ref="opvideo"
|
|
|
+ :src="
|
|
|
+ require(`@/assets/videos/${
|
|
|
+ !info.openingAnimationType.match(/[\u3400-\u9FBF]/)
|
|
|
+ ? info.openingAnimationType
|
|
|
+ : 'opa1'
|
|
|
+ }_x264.mp4`)
|
|
|
+ "
|
|
|
+ autoplay
|
|
|
+ loop
|
|
|
+ ></video>
|
|
|
+ <i
|
|
|
+ v-if="playing"
|
|
|
+ @click="bofang"
|
|
|
+ class="iconfont iconshow_playback"
|
|
|
+ ></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -33,50 +56,50 @@ export default {
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- openingTypeList: [
|
|
|
- '小行星开场',
|
|
|
- '小行星巡游开场',
|
|
|
- '小行星缩放开场',
|
|
|
- '水平巡游开场',
|
|
|
- '水晶球开场',
|
|
|
- ],
|
|
|
- bofanging: true
|
|
|
- }
|
|
|
+ // openingTypeList: [
|
|
|
+ // '小行星开场',
|
|
|
+ // '小行星巡游开场',
|
|
|
+ // '小行星缩放开场',
|
|
|
+ // '水平巡游开场',
|
|
|
+ // '水晶球开场',
|
|
|
+ // ],
|
|
|
+ openingTypeList: ["opa1", "opa2", "opa3", "opa4", "opa5"],
|
|
|
+ playing: true,
|
|
|
+ };
|
|
|
},
|
|
|
computed: {
|
|
|
...mapGetters({
|
|
|
- info: 'info'
|
|
|
- })
|
|
|
+ info: "info",
|
|
|
+ }),
|
|
|
},
|
|
|
methods: {
|
|
|
- bofang(){
|
|
|
- this.$refs.opvideo.play()
|
|
|
+ bofang() {
|
|
|
+ this.$refs.opvideo.play();
|
|
|
},
|
|
|
onSwitcherChange(data) {
|
|
|
- this.info.isShowOpeningAnimation = data
|
|
|
- }
|
|
|
+ this.info.isShowOpeningAnimation = data;
|
|
|
+ },
|
|
|
},
|
|
|
mounted() {
|
|
|
if (this.info.isShowOpeningAnimation === undefined) {
|
|
|
- this.$set(this.info, 'isShowOpeningAnimation', false)
|
|
|
+ this.$set(this.info, "isShowOpeningAnimation", false);
|
|
|
}
|
|
|
if (!this.info.openingAnimationType) {
|
|
|
- this.$set(this.info, 'openingAnimationType', this.openingTypeList[0])
|
|
|
+ this.$set(this.info, "openingAnimationType", this.openingTypeList[0]);
|
|
|
}
|
|
|
|
|
|
- this.$nextTick(()=>{
|
|
|
+ this.$nextTick(() => {
|
|
|
console.log(this.$refs.opvideo);
|
|
|
|
|
|
- this.$refs.opvideo && this.$refs.opvideo.addEventListener("playing", () => {
|
|
|
- if (this.bofanging) {
|
|
|
- this.bofanging = false;
|
|
|
- }
|
|
|
-
|
|
|
+ this.$refs.opvideo &&
|
|
|
+ this.$refs.opvideo.addEventListener("playing", () => {
|
|
|
+ if (this.playing) {
|
|
|
+ this.playing = false;
|
|
|
+ }
|
|
|
+ });
|
|
|
});
|
|
|
- })
|
|
|
-
|
|
|
},
|
|
|
-}
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
@@ -87,7 +110,7 @@ export default {
|
|
|
|
|
|
.title {
|
|
|
font-size: 18px;
|
|
|
- color: #FFFFFF;
|
|
|
+ color: #ffffff;
|
|
|
}
|
|
|
|
|
|
.switch-wrapper {
|
|
@@ -110,7 +133,7 @@ export default {
|
|
|
.opening-selection-btn {
|
|
|
width: 210px;
|
|
|
height: 40px;
|
|
|
- background: #1A1B1D;
|
|
|
+ background: #1a1b1d;
|
|
|
border-radius: 2px;
|
|
|
border: 1px solid #404040;
|
|
|
margin-bottom: 16px;
|
|
@@ -121,7 +144,7 @@ export default {
|
|
|
display: block;
|
|
|
|
|
|
&::after {
|
|
|
- content: '';
|
|
|
+ content: "";
|
|
|
height: 100%;
|
|
|
vertical-align: middle;
|
|
|
display: inline-block;
|
|
@@ -129,7 +152,7 @@ export default {
|
|
|
}
|
|
|
|
|
|
.active-opening-type {
|
|
|
- color: #0076F6;
|
|
|
+ color: #0076f6;
|
|
|
}
|
|
|
}
|
|
|
|
|
@@ -143,15 +166,15 @@ export default {
|
|
|
height: 100%;
|
|
|
object-fit: cover;
|
|
|
}
|
|
|
- .iconfont{
|
|
|
+ .iconfont {
|
|
|
position: absolute;
|
|
|
font-size: 36px;
|
|
|
top: 50%;
|
|
|
left: 50%;
|
|
|
- transform: translate(-50%,-50%);
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|