123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162 |
- <template>
- <div class="start-up">
- <button
- v-show="!isBeginVideo"
- v-click-audio
- class="begin"
- :style="{
- left: beginBtnPos.x + 'px',
- top: beginBtnPos.y + 'px',
- }"
- @click="onClickBeginVideo"
- >
- <img
- class=""
- src="@/assets/images/btn-begin.png"
- alt=""
- draggable="false"
- >
- </button>
- <video
- ref="startup-video"
- v-click-audio
- src="@/assets/videos/startup-video.mp4"
- @play="onVideoPlay"
- @ended="onStartupOver"
- @click="onClickVideo"
- />
- <!-- <transition name="fade-in">
- <button
- v-show="isShowSkip"
- v-click-audio
- class="skip"
- @click="onStartupOver"
- >
- 跳 过
- </button>
- </transition> -->
- </div>
- </template>
- <script>
- import useWindowSizeAdaptor from '@/useFunctions/useWindowSizeAdaptor.js'
- import { onMounted, reactive, ref } from "vue"
- export default {
- name: 'StartUp',
- emits: ['begin', 'over'],
- setup() {
- const { windowSizeWhenDesign, unit } = useWindowSizeAdaptor()
- const beginBtnPos = ref({})
- // const beginBtnPos = reactive( utils.mapPosFromDraftToWindow({
- // x: 1850,
- // y: 630,
- // }, 'contain'))
- function computebeginBtnPos() {
- beginBtnPos.value = utils.mapPosFromDraftToWindow({
- x: 1850,
- y: 630,
- }, 'contain')
- console.log('更新屏幕', beginBtnPos.value)
- }
- onMounted(() => {
- beginBtnPos.value = utils.mapPosFromDraftToWindow({
- x: 1850,
- y: 630,
- }, 'contain')
- window.addEventListener('resize', computebeginBtnPos)
- })
- return {
- windowSizeWhenDesign,
- unit,
- beginBtnPos
- }
- },
- data() {
- return {
- isBeginVideo: false,
- isShowSkip: false,
- }
- },
- methods: {
- onClickBeginVideo() {
- this.isBeginVideo = true
- this.$refs['startup-video'].play()
- this.$emit('begin')
- },
- onVideoPlay() {
- this.isShowSkip = true
- // setTimeout(() => {
- // this.isShowSkip = true
- // }, 3000)
- },
- onStartupOver() {
- this.$emit('over')
- },
- onClickVideo() {
- if (this.isShowSkip) {
- this.onStartupOver()
- }
- }
- }
- }
- </script>
- <style lang="less" scoped>
- .start-up {
- position: absolute;
- left: 0;
- top: 0;
- width: 100%;
- height: 100%;
- background-color: #000;
- z-index: 10;
- >button.begin {
- position: absolute;
- right: 5vh;
- bottom: 5vh;
- z-index: 1;
- // left: calc(1850 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
- // top: calc(630 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
- width: calc(40 / v-bind('windowSizeWhenDesign') * v-bind('unit'));
- height: fit-content;
- >img {
- width: 100%;
- }
- &:hover {
- transform: scale(1.1);
- }
- }
- >video {
- position: absolute;
- left: 0;
- top: 0;
- width: 100%;
- height: 100%;
- }
- // >.skip {
- // position: absolute;
- // top: 70px;
- // right: 42px;
- // height: 36px;
- // width: 120px;
- // background-image: url(@/assets/images/btn-skip.png);
- // background-size: cover;
- // background-repeat: no-repeat;
- // background-position: center center;
- // font-size: 18px;
- // font-family: FZShaoEr-M11-Regular, FZShaoEr-M11;
- // font-weight: 400;
- // color: #D11414;
- // &:hover {
- // transform: scale(1.1);
- // }
- // }
- }
- </style>
|