qiaobi/src/views/home/components/downLoad/introduction/introduction.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="menu">
        <div class="top" @click="currentType = 'document'">
            <div>
                <svg-icon class="xiaoshiIcon" iconClass="说明书" iconName="说明书"></svg-icon>
            </div>
            <div>查看文档</div>
        </div>
        <div class="bottom" @click="currentType = 'video'">
            <div>
                <svg-icon class="xiaoshiIcon" iconClass="视频" iconName="视频"></svg-icon>
            </div>
            <div>查看演示视频</div>
        </div>
    </div>
    <div class="introduction_container">
        <!-- <div v-if="files && files.length" class="height_100 introduction_item_warp" >
            <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>
        </div> -->
        <div v-show="currentType == 'document'" class="height_100 introduction_item_warp">
            <div v-if="documents && videos.length" class="height_100">
                <div class="introduction_item title" >
                    <div v-for="(item,index) in documents" :key="index+'a'" class="title_item" @click="documentIndex = index">{{ (index + 1) + '、' + item.name }}
                        <div v-if="index<documents.length-1" class="line"></div>
                    </div>
                </div>
                <!-- <div v-for="(item,index) in documents" :key="index+'d'" class="introduction_item " >
                    <iframe id="checkIframe" :src="getUrl(item)" frameborder="0" width="100%" :height="height - 200"></iframe>
                </div> -->
                <div class="introduction_item" >
                    <iframe id="checkIframe" :src="getUrl(documents[documentIndex])" frameborder="0" width="100%" :height="height - 200"></iframe>
                </div>
            </div>
            <div class="empty" v-else>暂无介绍</div>
        </div>
        <div v-show="currentType == 'video'" class="height_100 introduction_item_warp">
            <div v-if="videos && videos.length">
                <div class="introduction_item title1">窍笔演示视频</div>
                <div v-for="(item,index) in videos" :key="index+'v'" class="introduction_item " >
                    <myVideo :url="`${baseUrl}${item.url}`" :title="(index + 1) + '、'+item.name"></myVideo>
                </div>
            </div>
            <div class="empty" v-else>暂无介绍</div>
        </div>
    </div>
    
  </div>
</template>

<script>
import { Base64 } from 'js-base64';
export default {
  components: {},
  props: {},
  data() {
    return {
        files:[],
        documents:[],
        documentIndex:0,
        videos:[],
        currentType:'document',
        baseUrl:'https://qiaobi-ai.com/static/',
        height:document.documentElement.clientHeight,
    };
  },
  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)
                    if(type == 'mp4'){
                        this.videos.push(
                            {
                                type:type,
                                url:item,
                                name:item.slice(0, item.length - type.length - 1)
                            }
                        )
                    }else{
                       this.documents.push(
                            {
                                type:type,
                                url:item,
                                name:item.slice(0, item.length - type.length - 1)
                            }
                        ) 
                    }
                    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%;
        }
    }
    .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_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;
        .title{
            border-bottom: 1px solid gray;
            display: flex;
            align-items: center;
            .title_item{
                min-width: 200px;
                
                overflow: hidden;
                white-space: nowrap;
                text-overflow:ellipsis;
                cursor: pointer;
                .line{
                    width: 1px;
                    height: 100%;
                    background: gray;
                }
            }
        }
        .title1{
            position: sticky;
            top: 0;
            background: white;
            text-align: center;
            font-weight: bold;
            font-size: 18px;
            border-bottom: 1px solid gray;
        }
    }
    .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>