hongze_yb_xcx/pages-voice/addVoice.vue

<template>
    <view class="add-voice-page">
        <van-field
            :value="form.title"
            placeholder="请输入语音标题"
            :border="false"
            clearable
            @change="inputChange"
            label="语音标题"
        />
        <van-field
            :value="form.variety_name"
            placeholder="请选择品种"
            :border="false"
            readonly
            is-link
            label="品种"
            @click-input="showFilter=true"
            @click-icon="showFilter=true"
        />
        <van-field
            :value="form.section_name"
            placeholder="请选择板块名称"
            :border="false"
            readonly
            is-link
            label="板块名称"
            @click-input="showFilter=true"
            @click-icon="showFilter=true"
        />

        <!-- 上传图片部分 -->
        <view 
            class="flex upload-img-box" 
            v-if="recorderStatus!=='doing'&&recorderStatus!=='pause'"
            :style="[{'height':recorderStatus==='stop'&&'auto'},{'border-bottom':recorderStatus==='stop'?'1px solid #E6E6E6':''}]"
        >
            <view class="item" v-for="(item,index) in imgList" :key="item" @click="handlePreViewImg(item)">
                <image :src="item" mode="aspectFill"/>
                <view class="del-btn" @click.stop="handleDelImg(index)">
                    <van-icon name="cross" size="12" style="position: absolute;left:16rpx;top:8rpx" color="#ffffff"/>
                </view>
            </view>
            <view class="item add-btn" @click="handleUploadImg" v-if="imgList.length<5">
                <image src="./static/camera.png" mode="aspectFill" />
            </view>
              
        </view>

        <view class="flex audio-box" v-if="recorderStatus==='stop'">
            <image 
                :src="temAudio.paused?'../../../static/voice/pause.png':'../../../static/voice/playing.png'" 
                mode="aspectFill" 
                @click="handlePlayAudio" 
            />
            <slider
                activeColor="#E6B77D"
                :max="temAudio.duration" 
                :value="temAudio.curTime" 
                @change="handleAudioSliderChange($event)"
                block-size="12"
                class="slider"
            />
            <text class="left-time">{{temAudio.curTime|formatTime}}</text>
            <text class="right-time">{{temAudio.duration|formatTime}}</text>
            <view class="del-btn" @click="handleDelRecord">
                <image src="./static/del.png" mode="aspectFill" />
                <text>删除</text>
            </view>
            <view class="pre_publish_time" v-if="voiceId!=0">定时发布时间：{{pre_publish_time}}</view>
        </view>
          

        <!-- <view class="empty-voice-box" v-if="recorderStatus==='start'">
            <image src="./static/record.png" mode="aspectFill" />
            <view>无录音（录音时长超过十分钟自动结束）</view>
        </view> -->

        <view class="animat-box" v-if="recorderStatus==='doing'||recorderStatus==='pause'">
            <view class="con-box">
                <image :class="['img move1',recorderStatus==='doing'?'animat-run':'animat-pause']" src="./static/record-img.png" mode="widthFix" />
                <image :class="['img move2',recorderStatus==='doing'?'animat-run':'animat-pause']" src="./static/record-img.png" mode="widthFix" />
                <image :class="['img move3',recorderStatus==='doing'?'animat-run':'animat-pause']" src="./static/record-img.png" mode="widthFix" />
            </view>
            <view class="bot-text">{{time|formatTime}}</view>
        </view> 

        <view class="sound-record-wrap" v-if="recorderStatus!=='stop'">
            <view class="top-text" v-show="recorderStatus=='start'">点击开始录音</view>
            <image class="btn" :src="btnImg" mode="aspectFill" @click="handleClickBtn" />
            <view 
                class="del-btn" 
                :style="{color:recorderStatus==='doing'&&'#999'}" 
                v-if="recorderStatus!=='start'"
                @click="handleResetRecorder"
            >删除</view>
            <view 
                class="done-btn" 
                v-if="recorderStatus!=='start'"
                @click="handleEndRecorder"
            >完成</view>
            <view style="text-align:center;color:#999;margin-top:44rpx" v-if="recorderStatus==='start'">无录音（录音时长超过十分钟自动结束）</view>
        </view>

        <view class="publish-btn" v-if="recorderStatus==='stop'">
            <text @click="handlePublish('time')">定时发布</text>
            <text @click="handlePublish">立即发布</text>
        </view>
        
        <!-- 筛选弹窗 -->
        <van-popup 
            :show="showFilter" 
            position="bottom"  
            :close-on-click-overlay="true"
            @close="showFilter = false"
            round
        >
            <view class="fliter-wrap-list">
                <view class="flex top">
                    <text style="color:#000">全部选项</text>
                    <text style="color:#E3B377" @click="showFilter=false">取消</text>
                </view>
                <van-tree-select
                    :items="options"
                    :main-active-index="mainActiveIndex"
                    :active-id="activeId"
                    @click-nav="onClickNav"
                    @click-item="onClickItem"
                    main-active-class="main-active-class"
                    content-active-class="content-active-class"
                />
            </view>
        </van-popup>

        <!-- 选择时间弹窗 -->
        <van-popup 
            :show="showTime" 
            position="bottom"  
            :close-on-click-overlay="true"
            @close="showTime = false"
            round
        >
            <van-datetime-picker
                title="设置发布时间"
                type="datetime"
                :value="selectTime"
                :min-date="minDate"
                @confirm="handleConfirmTime"
                @cancel="showTime = false"
            />
        </van-popup>

        <!-- <van-dialog id="van-dialog" /> -->
        <!-- 发布弹窗 -->
        <van-dialog
            use-slot
            :show="showPublish"
            confirm-button-text="发布且推送"
            cancel-button-text="仅发布"
            show-cancel-button
            @confirm="handleConfirmPublish(1)"
            @cancel="handleConfirmPublish(0)"
            @close="showPublish=false"
        >
            <view style="padding:40px 20px 20px;text-align:center;position: relative;">
                发布后将推送模板消息和客群，确认发布吗？
                <van-icon name="cross" size="20" style="position: absolute;right:10px;top:10px" color="#6666" @click="showPublish=false"/>
            </view>
        </van-dialog>

        <!-- 定时发布提示弹窗 -->
        <van-dialog
            use-slot
            :show="showTimeAttention"
            confirm-button-text="知道了"
            confirm-button-color="#E3B377"
            @confirm="showTime=true"
            @close="showTimeAttention=false,showTime=true"
        >
            <view style="padding:40px 20px 20px;text-align:center;position: relative;">
                设置定时发布后，会在设定的时间发布语音播报并推送模板消息
                <van-icon name="cross" size="20" style="position: absolute;right:10px;top:10px" color="#666" @click="showTimeAttention=false,showTime=true"/>
            </view>
        </van-dialog>
    </view>
</template>

<script>
import {apiVoiceSectionList,apiVoiceSendMsg,apiVoiceAdd,apiVoiceEdit,apiVoicePublish,apiVoiceDetail} from '@/api/voice'
import {baseApiUrl} from '@/utils/config.js'
import {apiGetSceneToParams} from '@/api/common'
import CryptoJS from '@/utils/crypto.js'
import uniAsync from "@/utils/uni-async.js"; // uni api async 化
import {uploadImg,commonUploadAudio} from '@/utils/upload'
const dayjs=require('@/utils/dayjs.min')
const recorderManager = wx.getRecorderManager();//录音实例
let innerAudioContext = uni.createInnerAudioContext();//播放音频实例
let TIMER=null//计时器
export default {
    filters:{
        formatTime(e){
            let m=parseInt(e/60)
            let s=parseInt(e%60)
            return `${m>9?m:'0'+m}:${s>9?s:'0'+s}`
        }
    },
    computed:{
        btnImg(){
            if(this.recorderStatus==='start'){
                return './static/voice-start.png'
            }else if(this.recorderStatus==='doing'){
                return './static/voice-doing.png'
            }else if(this.recorderStatus==='stop'){
                return './static/voice-pause.png'
            }else if(this.recorderStatus==='pause'){
                return './static/voice-pause.png'
            }
        }
    },
    data() {
        return {
            form:{
                title:'',//语音标题
                variety_name:'',
                variety_id:'',
                section_id:'',
                section_name:'',
                img_url:'',//分享时的底图
            },
            voiceId:0,
            voiceUrl:'',//编辑音频地址
            pre_publish_time:'',

            recorderStatus:'start',//当前录音状态 start开始 doing正在录音 stop停止录音 pause录音暂停
            time:0,
            isReset:false,//是否点击了重置

            temAudio:{
                url:'',//音频地址
                duration:'',//时长
                size:'',//大小
                curTime:0,//播放时当前播放的时间
                paused:true,
            },//临时音频文件信息

            showFilter:false,
            options:[],
            mainActiveIndex:0,
            activeId:0,//选择的板块id

            showPublish:false,

            imgList:[],
            showTime:false,
            showTimeAttention:false,
            selectTime:new Date().getTime(),
            minDate:new Date().getTime()+600000,
        }
    },
    onLoad(options){
        // 调取用户授权使用麦克风
        uni.authorize({
            scope: 'scope.record',
            success() {}
        })
        this.listenVoice()
        this.getOptionsList()

        this.init(options)
    },
    onShow(){
        innerAudioContext = uni.createInnerAudioContext()
        this.listenAudio()
    },
    onHide(){
        innerAudioContext.destroy()
        this.temAudio.paused=true
    },
    onUnload(){
        innerAudioContext.destroy()
        clearInterval(TIMER)
	},
    methods: {
        async init(options){
            if(options.scene){  
                const res=await apiGetSceneToParams({scene_key:options.scene})
                if(res.code===200){
                    const obj=JSON.parse(res.data)
                    this.voiceId=Number(obj.voiceId)
                    this.getVoiceDetail()
                }
            }else if(options.voiceId){
                this.voiceId=Number(options.voiceId)
                this.getVoiceDetail()
            }
        },

        //语音详情
        async getVoiceDetail(){
            uni.setNavigationBarTitle({ title: '编辑语音' })
            const res=await apiVoiceDetail({broadcast_id:Number(this.voiceId)})
            if(res.code===200){
                this.form.title=res.data.BroadcastName
                this.form.variety_name=res.data.VarietyName
                this.form.variety_id=res.data.VarietyId
                this.form.section_id=res.data.SectionId
                this.form.section_name=res.data.SectionName
                this.voiceUrl=res.data.VoiceUrl
                this.temAudio.url=res.data.VoiceUrl
                this.temAudio.duration=res.data.VoicePlaySeconds
                this.temAudio.size=res.data.VoiceSize
                this.activeId=res.data.SectionId
                this.imgList=res.data.Imgs||[]
                this.pre_publish_time=dayjs(res.data.PrePublishTime).format('YYYY-MM-DD HH:mm')
                this.selectTime=dayjs(res.data.PrePublishTime).valueOf()
                this.recorderStatus='stop'
            }
        },

        //录音事件
        listenVoice(){
            recorderManager.onStart(()=>{
                //录音开始监听事件
                console.log('开始录音');
                this.recorderStatus='doing'
                this.isReset=false
                if(!TIMER){
                    TIMER=setInterval(() => {
                        this.time++
                    }, 1000);
                }
                
            })
            recorderManager.onPause(()=>{
                //录音暂停监听事件
                console.log('录音暂停');
                this.recorderStatus='pause'
                clearInterval(TIMER)
                TIMER=null
            })
            recorderManager.onResume(()=>{
                //录音继续监听事件
                console.log('录音继续');
                this.recorderStatus='doing'

                if(!TIMER){
                    TIMER=setInterval(() => {
                        this.time++
                    }, 1000);
                }
            })
            recorderManager.onStop((e)=>{
                //录音结束监听事件
                console.log('录音结束',e);

                // 如果是点击重置(删除按钮)的 则不做结束处理
                if(!this.isReset){
                    this.recorderStatus='stop'
                    this.temAudio.url=e.tempFilePath
                    this.temAudio.size=e.fileSize
                    this.temAudio.duration=parseInt(e.duration/1000)
                }
                
                clearInterval(TIMER)
                TIMER=null
            })
            recorderManager.onError((e)=>{
                //录音事件错误监听
                console.log('录音错误哦',e);
            })
        },

        //点击录音操作按钮
        async handleClickBtn(){
            const setRes=await uniAsync.getSetting()
            console.log(setRes.authSetting['scope.record']);
            if(!setRes.authSetting['scope.record']){
                uni.showToast({
                    title:'请打开麦克风交流',
                    icon:'none'
                })
                uni.openSetting()
                return
            }
             
            if(this.recorderStatus==='start'){
                recorderManager.start({
                    duration:600000,
                    format:'mp3'
                })
            }
            if(this.recorderStatus==='doing'){
                recorderManager.pause()//暂停录音
            }
            if(this.recorderStatus==='pause'){
                recorderManager.resume()//继续录音
            }
        },

        //点击重置录音状态
        handleResetRecorder(){
            if(this.recorderStatus==='doing') return
            this.isReset=true
            recorderManager.stop()
            this.recorderStatus='start'
            this.handleDelRecord()
        },

        //点击完成录音
        handleEndRecorder(){
            //点击完成时还不是已结束录音状态
            this.isReset=false
            recorderManager.stop()
        },

        //拖动音频播放进度条
        handleAudioSliderChange(e){
            const value=e.detail.value
            innerAudioContext.seek(value)
        },

        //点击播放\暂停音频
        handlePlayAudio(){
            innerAudioContext.src=this.temAudio.url
            innerAudioContext.obeyMuteSwitch=false
            if(this.temAudio.paused){
                innerAudioContext.play()
            }else{
                innerAudioContext.pause()
            }
        },

        //音频播放事件
        listenAudio(){
            innerAudioContext.onPlay(()=>{
                console.log('开始播放录音');
                this.temAudio.paused=false
            })
            innerAudioContext.onPause(()=>{
                console.log('录音播放暂停');
                this.temAudio.paused=true
            })
            // innerAudioContext.onStop(()=>{
            //     console.log('录音播放停止');
            //     this.temAudio.paused=true
            //     innerAudioContext.src=''
            // })
            innerAudioContext.onEnded(()=>{
                console.log('录音播放自然结束');
                this.temAudio.curTime=this.temAudio.duration
                setTimeout(() => {
                    this.temAudio.paused=true
                    innerAudioContext.src=''
                    this.temAudio.curTime=0
                }, 300);
            })
            innerAudioContext.onTimeUpdate(()=>{
                this.temAudio.curTime=parseInt(innerAudioContext.currentTime)
            })
        },

        //删除录音记录
        handleDelRecord(){
            this.recorderStatus='start'
            this.isReset=true
            this.temAudio.url=''
            this.temAudio.duration=''
            this.temAudio.curTime=0
            this.temAudio.paused=true
            this.time=0
            innerAudioContext.stop()
            TIMER=null
        },

        //获取选项数据
        async getOptionsList(){
            const res=await apiVoiceSectionList()
            if(!res.code===200) return
            const arr=res.data||[]
        
            this.options=arr.filter(item=>{
                item.text=item.VarietyName
                item.children=item.Children.filter(_item=>{
                    if(_item.Status===1){
                        _item.text=_item.SectionName
                        _item.id=_item.SectionId
                        return _item
                    }
                })
                if(item.children.length>0){
                    delete item.Children
                    return item
                }
            })
        },

        onClickNav({detail}){
            console.log(detail);
            this.mainActiveIndex=detail.index
        },

        onClickItem({detail}){
            console.log(detail);
            this.activeId=detail.id
            this.form.section_id=detail.SectionId
            this.form.section_name=detail.SectionName
            this.form.variety_name=this.options[this.mainActiveIndex].VarietyName
            this.form.variety_id=this.options[this.mainActiveIndex].VarietyId
            this.form.img_url=detail.ImgUrl
            this.showFilter=false
        },

        inputChange(event) {
            this.form.title=event.detail
        },

        // 发布
        async handlePublish(type){
            if(!this.form.title||!this.form.variety_id){
                uni.showToast({
					title:'请将内容填写完整',
					icon:'none'
				})
                return
            }

            if(type==='time'){//定时发布
                this.showTimeAttention=true
            }else{
                this.showPublish=true
            }
        },

        //确认发布 publishType 发布类型: 0-仅发布 1-发布并推送 2-定时发布
        async handleConfirmPublish(publishType){

            //上传音频
            if(this.temAudio.url!=this.voiceUrl){
                const voiceRes=await commonUploadAudio(this.temAudio.url)
                if(voiceRes.code===200){
                    this.temAudio.url=voiceRes.data.audio_url
                }
            }
            
            //新增、编辑语音
            let params={
                broadcast_name:this.form.title,
                section_id:Number(this.form.section_id),
                section_name:this.form.section_name,
                variety_id:Number(this.form.variety_id),
                variety_name:this.form.variety_name,
                author_id:Number(this.$store.state.user.userInfo.user_id),
                author:this.$store.state.user.userInfo.real_name,
                imgs:this.imgList.join(','),
                voice_seconds:this.temAudio.duration.toString(),
                voice_size:this.temAudio.size.toString(),
                voice_url:this.temAudio.url
            }
            wx.showLoading({
                title: '发布中...',
                mask: true,
                success: (result) => {},
                fail: () => {},
                complete: () => {}
            });
            let addRes=null
            if(this.voiceId!=0){//编辑语音
                params.broadcast_id=this.voiceId
                addRes=await apiVoiceEdit(params)
            }else{
                addRes=await apiVoiceAdd(params)
            }
            if(addRes.code===200){
                let par={
                    broadcast_id:addRes.data.BroadcastId,
                }
                if(publishType===2){//定时发布
                    par.publish_type=2
                    par.pre_publish_time=dayjs(this.selectTime).format('YYYY-MM-DD HH:mm:ss')
                }else{
                    par.publish_type=1
                }
                //发布语音
                const publishRes=await apiVoicePublish(par)
                wx.hideLoading();
                if(publishRes.code===200){
                    if(publishType==0){//仅发布
                        uni.showToast({
                            title:'发布成功',
                            icon:'success'
                        })
                        setTimeout(() => {
                            uni.$emit('addVoiceSuccess')
                            uni.navigateBack()
                        }, 1000);
                    }else if(publishType==1){//发布并推送
                        this.handleSendMsg(addRes.data.BroadcastId)
                    }else{////定时发布
                        uni.showToast({
                            title:'定时发布成功',
                            icon:'success'
                        })
                        setTimeout(() => {
                            uni.$emit('addVoiceSuccess')
                            uni.navigateBack()
                        }, 1000);
                    }
                }else{
                    uni.showToast({
                        title:publishRes.msg,
                        icon:'none'
                    })
                }
            }else{
                wx.hideLoading();
                uni.showToast({
                    title:addRes.msg,
                    icon:'none'
                })
            }
        },

        //推送消息
        handleSendMsg(id){
            apiVoiceSendMsg({broadcast_id:id}).then(res=>{
                if(res.code===200){
                    uni.showToast({
                        title:"发布&推送成功",
                        icon:'success'
                    })
                    setTimeout(() => {
                        uni.$emit('addVoiceSuccess')
                        uni.navigateBack()
                    }, 1000);
                }
            })
        },

        //图片上传
        handleUploadImg(e){
            uploadImg({count:5-this.imgList.length}).then(res=>{
                this.imgList=[...this.imgList,...res]
            }).catch(err=>{
                console.log(err);
                if(err.errMsg=='chooseImage:fail cancel') return
                uni.showToast({
                    title:'上传失败，请重试！',
                    icon:'none'
                })
            })
        },

        //预览图片
        handlePreViewImg(item){
            wx.previewImage({
                urls:this.imgList,
                current:item
            })
        },

        //删除图片
        handleDelImg(index){
            this.imgList.splice(index,1)
        },

        //选择时间
        handleConfirmTime(e){
            this.selectTime=e.detail
            this.showTime=false
            this.handleConfirmPublish(2)
        },

    },
}
</script>

<style lang="scss">
.add-voice-page .van-cell{
    border-bottom: 1px solid #e5e5e5;
}
.add-voice-page .van-field__label{
    font-size: 32rpx;
    color: #333;
}
/* .add-voice-page .van-cell__title{
    max-width: 6.2em;
    min-width: 6.2em;
    margin-right: 12px;
    font-size: 32rpx;
    color: #333;
} */
.add-voice-page .van-cell__value{
    text-align: left;
    font-size: 32rpx;
}

.add-voice-page{
    .fliter-wrap-list{
        background-color: #fff;
        padding-top: 53rpx;
        .top{
            font-size: 32rpx;
            justify-content: space-between;
            margin-bottom: 40rpx;
            padding: 0 34rpx;
        }
        .van-sidebar{
            flex-shrink: 0;
        }
        .van-tree-select__content{
            overflow-x: hidden;
        }
        .main-active-class{
            border-color: #E3B377;
        }
        .content-active-class{
            color: #E3B377;
        }
    }
}

page{
    padding-bottom:constant(safe-area-inset-bottom);
    padding-bottom:env(safe-area-inset-bottom);
}
</style>

<style lang="scss" scoped>
.add-voice-page{
    .empty-voice-box{
        height: 36vh;
        padding-top: 150rpx;
        image{
            width: 140rpx;
            height: 140rpx;
            margin-bottom: 20rpx;
        }
        text-align: center;
        color: #999999;
    }
    .sound-record-wrap{
        border-top: 1px solid #E6E6E6;
        padding-top: 126rpx;
        position: relative;
        .top-text{
            text-align: center;
            color: #EE3636;
            position: absolute;
            top: 50rpx;
            left: 50%;
            transform: translateX(-50%);
        }
        .btn{
            width: 118rpx;
            height: 118rpx;
            display: block;
            margin-left: auto;
            margin-right: auto;
        }
        .del-btn{
            position: absolute;
            left: 122rpx;
            bottom: 40rpx;
            font-size: 32rpx;
            color: #EE3636;
        }
        .done-btn{
            position: absolute;
            right: 122rpx;
            bottom: 40rpx;
            font-size: 32rpx;
            color: #EE3636;
        }
    }

    .audio-box{
        background-color: #FDF8F2;
        height: 123rpx;
        align-items: center;
        margin-left: 34rpx;
        margin-right: 34rpx;
        margin-top: 60rpx;
        margin-bottom: 180rpx;
        padding: 0 30rpx;
        position: relative;
        border-radius: 16rpx;
        .left-time{
            position: absolute;
            bottom: 20rpx;
            left: 100rpx;
            color: #999999;
            font-size: 20rpx;
        }
        .right-time{
            position: absolute;
            bottom: 20rpx;
            right: 40rpx;
            color: #999999;
            font-size: 20rpx;
        }
        image{
            width: 40rpx;
            height: 48rpx;
            flex-shrink: 0;
            margin-right: 30rpx;
        }
        .slider{
            flex: 1;
            margin: 0 10rpx;
        }
        .del-btn{
            display: flex;
            align-items: center;
            color: #999999;
            font-size: 28rpx;
            position: absolute;
            bottom: -50rpx;
            right: 0;
            image{
                width: 32rpx;
                height: 35rpx;
                margin-right: 10rpx;
            }
        }
        .pre_publish_time{
            position: absolute;
            bottom: -50rpx;
            left: 0;
            color: #999999;
        }
    }

    .publish-btn{
        // width: 390rpx;
        // height: 80rpx;
        // text-align: center;
        // line-height: 80rpx;
        // color: #fff;
        // background: #E6B77D;
        // font-size: 32rpx;
        // border-radius: 40px;
        // margin-left: auto;
        // margin-right: auto;
        text-align: center;
        text{
            width: 300rpx;
            height: 80rpx;
            text-align: center;
            line-height: 80rpx;
            display: inline-block;
            font-size: 32rpx;
            margin: 0 15rpx;
            border-radius: 40rpx;
        }
        text:first-child{
            border: 1px solid #E6B77D;
            color: #E6B77D;
        }
        text:last-child{
            background-color: #E6B77D;
            color: #fff;
        }
    }

    .upload-img-box{
        padding: 34rpx 4rpx 34rpx 34rpx;
        flex-wrap: wrap;
        height: 50vh;
        align-content: flex-start;
        .item{
            width: 200rpx;
            height: 200rpx;
            margin-right: 30rpx;
            margin-bottom: 30rpx;
            flex-shrink: 0;
            position: relative;
            image{
                width: 100%;
                height: 100%;
            }
            .del-btn{
                position: absolute;
                right: 0;
                top: 0;
                width: 48rpx;
                height: 48rpx;
                background-color: rgba(0, 0, 0, 0.7);
                border-radius: 0 0 0 48rpx;
            }
        }
        .add-btn{
            background-color: #f7f7f7;
            image{
                width: 80rpx;
                height: 80rpx;
                position: absolute;
                left: 60rpx;
                top: 60rpx;
            }
        }
    }
}

.animat-box{
    height: 50vh;
    .con-box{
        height: 80%;
        background-color: #FAFAFA;
        position: relative;
    }
    .bot-text{
        font-size: 60rpx;
        padding-top: 36rpx;
        text-align: center;
    }
    .img{
        position: absolute;
        width: 100vw;
        top: 27%;
        transform: translateX(100vw);
    }
    .move1{
        animation: move 30s linear infinite;
    }
    .move2{
        animation: move 30s 10s linear infinite;
    }
    .move3{
        animation: move 30s 20s linear infinite;
    }
    .animat-pause{
        animation-play-state: paused;
    }
    .animat-run{
        animation-play-state: running;
    }

    @keyframes move {
        0%{
            transform: translateX(100vw);
        }
        100%{
            transform: translateX(-200vw);
        }
    }
}
</style>