disaster_web3/src/view/index/animation.vue

<template>
   <el-collapse accordion v-model="activeNames" class="bganimation">
          <el-collapse-item name="1" class="imgneon">
            <template #title>
              <el-icon class="iconimg Frame3" fit="contain"></el-icon>
              动画展示
            </template>
            <div class="rg_content">
              <div class="rg-padding">
            
              <div class="animation_s">
              <el-slider
                :max="100"
                :min="0"
                v-model="count"
                @change="sliderchange"
              >
              </el-slider>
              <!-- <el-progress type="line" :percentage="percentage" :color="customColor" :stroke-width="4"/> -->
              <div class="tanniu">
                <div><el-image :src="t1" fit="contain" ></el-image></div>
                <div>  <el-image :src="t4" fit="contain"></el-image>  </div>
                <div><el-image :src="t2" fit="contain" ></el-image></div>
                <div><el-image :src="t3" fit="contain" ></el-image></div>
                
              </div>
            </div>
          
            
            </div>
          </div>
            <!-- <div class="mgsnoe" style="height: 200px"></div> -->
          </el-collapse-item>
        </el-collapse>

     </template>
   <script setup>
import { ref, onMounted, reactive, } from "vue";
import {RouterView,RouterLink } from "vue-router"
import { request, uploadFile } from "@/utils/request";
import { ElMessage, ElButton, ElDialog, ElSelect } from 'element-plus'
import t1 from "@/assets/img/t1.png";
import t2 from "@/assets/img/t2.png";
import t3 from "@/assets/img/t3.png";
import t4 from "@/assets/img/t4.png";
   </script>