qiaobi/src/views/home/components/downLoad/introduction/introduction copy.vue

<template>
  <div class="introduction" :style="`background-image:url(${require('@/assets/image/background_home.jpg')})`">
    <div class="logo">
        <el-image :src="require('@/assets/image/logo3.png')" class="img" fit="contain"></el-image>
    </div>
   
    <div class="introduction_container">
        <div v-if="files && files.length" class="height_100 introduction_item_warp" >
            <div class="menu">
                <div class="top">
                    <div>
                        <svg-icon class="xiaoshiIcon" iconClass="说明书" iconName="说明书"></svg-icon>
                    </div>
                    <div>查看文档</div>
                </div>
                <div class="bottom">
                    <div>
                        <svg-icon class="xiaoshiIcon" iconClass="视频" iconName="视频"></svg-icon>
                    </div>
                    <div>查看演示视频</div>
                </div>
            </div>
            <div v-for="(item,index) in files" :key="index" class="introduction_item " >
                <div v-if="item.type != 'mp4'" style="width:100%;height:100%">
                    <div class="title" >{{ (index + 1) + '、' + item.name }}</div>
                    <iframe id="checkIframe" :src="getUrl(item)" frameborder="0" width="100%" height="800px"></iframe>
                </div>
                <div v-else class="video">
                    <myVideo :url="`${baseUrl}${item.url}`" :title="(index + 1) + '、'+item.name"></myVideo>
                </div>
            </div>
            <!-- <el-carousel :autoplay="false"  arrow="hover">
                <el-carousel-item v-for="(item,index) in files" :key="index" class="introduction_item height_100" >
                    <div v-if="item.type != 'mp4'" style="width:100%;height:100%">
                        <div class="title" >{{ item.url }}</div>
                        <iframe id="checkIframe" :src="getUrl(item)" frameborder="0" width="100%" height="90%"></iframe>
                    </div>
                    <div v-else class="height_100">
                        <myVideo :url="`${baseUrl}${item.url}`" :title="item.url"></myVideo>
                    </div>
                </el-carousel-item>
            </el-carousel> -->
        </div>
        <div class="empty" v-else>暂无介绍</div>
    </div>
    
  </div>
</template>

<script>
import { Base64 } from 'js-base64';
export default {
  components: {},
  props: {},
  data() {
    return {
        files:[],
        baseUrl:'https://xsip.cn/static/'
    };
  },
  watch: {},
  computed: {},
  created() {
    this.init()
  },
  mounted() {},
  methods: {
    async init(){
        await this.getIntroduction()
    },
    async getIntroduction(){
        let url = `/static/qiaobiConfig.json`
        await fetch(url).then(res =>  res.json() ).then(data => {
            if(data && data.length){
                data.forEach(item => {
                    let type = this.getFileType(item)
                    this.files.push(
                        {
                            type:type,
                            url:item,
                            name:item.slice(0, item.length - type.length - 1)
                        }
                    )
                });
                
            }
        })
    },
    getFileType(file){
        let arr = file.split('.')
        if(arr && arr.length>0){
          return arr[arr.length-1]  
        }
        return '';
    },
    getUrl(file){
        return `https://xsip.cn/onlinePreview/onlinePreview?url=` + encodeURIComponent(Base64.encode(this.baseUrl+file.url))
    },
  },
};
</script>
<style lang="scss">
.introduction{
    .el-carousel{
        height: calc(100% - 0px);
        width: 100%;
    }
    .el-carousel__container{
        height: calc(100% - 20px);
        width: 100%;
    }
}
    
</style>
<style lang="scss" scoped>
.introduction{
    position: relative;
    background: white;
    padding-bottom: 30px;
    padding-top: 10px;
    height:calc(100% - 50px);
    width: calc(100% - 0px);
    .logo{
        position: absolute;
        // top: 50px;
        // left: 50px;
        inset: 0;
        height: 100px;
        width: fit-content;
        z-index: 9999;
        .img{
            width: 100%;
            height: 100%;
        }
    }
    
    .introduction_container{
        margin-top: 30px;
        overflow-y: auto;
        
        padding: 0 30px;
        height:calc(100% - 30px);
        width: calc(100% - 60px);
        
    }
    .introduction_item_warp{
        border-radius: 8px;
        width: calc(75% + 40px);
        margin: auto;
       
        .menu{
            width: 100px;
            height: 180px !important;
            position: absolute;
            left:calc((100% - 75%) / 2);
            top: calc(50% - 90px);
            margin: auto;
            font-size: 12px;
            cursor: pointer;
            .top{
                color: white;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
                height: 75px;
                background: #316192;
                border-radius: 8px 8px 0 0;
                border-bottom: 1px solid white;
            }
            .bottom{
                color: white;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
                height: 75px;
                background: #b31d28;
                border-radius: 0 0 8px 8px ;
                border-top: 1px solid white;
            }
            .xiaoshiIcon{
                font-size: 24px;
                color: white !important;
            }
        }
    }
    .introduction_item{
        margin-top: 20px;
        background: white;
        width: 75%;
        margin: auto;
        padding: 20px;
        // &:first-child{
        //     border-radius: 8px 8px 0 0;
        // }
        // &:last-child{
        //     border-radius:0 0 8px 8px ;
        // }
        .title{
            line-height: 35px;
            font-weight: bold;
            // color: white;
            color: black;
        }
        
    }
    .empty{
        font-size: 20px;
        color:#c2c5c9;
        text-align: center;
        line-height: 250px;
    }
}
</style>