python/FunASR-XL.git

New file
			@@ -0,0 +1,306 @@
			<template>
			<div class="page page-home">
			<header class="page-home-header">
			<img class="logo-img" src="./assets/images/logo.png" alt="">
			<ul>
			<li :ref="item.ref" v-for="(item, index) in headerList" :key="index" @click="anchorTo(item)">
			<p>{{item.name}}</p>
			</li>
			<li @click="toPage({link: 'https://github.com/alibaba-damo-academy/FunASR'})">
			Github
			</li>
			<li>
			社区交流
			</li>
			<div :style="{width: lineWidth + 'px', left: lineLeft + 'px'}" class="line"></div>
			</ul>
			<div class="search-box">
			<img src="./assets/images/ss.png" alt="">
			<a-input placeholder="请输入关键字" />
			</div>
			<div class="language-box">
			中文/EN
			</div>
			</header>

			<banner-comp ref="funasrJs" />

			<hxgn-comp ref="hxgn" />

			<mxjs-comp ref="mxjs" />

			<lxwjzxfw-comp ref="lxwj" />

			<sstx-comp ref="sstx" />

			<footer class="page-home-footer">
			<div class="gywm">
			<img src="./assets/images/footer-logo.png" alt="">
			<ul v-for="(item, index) in footerList" :key="index">
			<h3>{{item.title}}</h3>
			<li @click="toPage(cItem)" v-for="(cItem, cIndex) in item.childer" :key="cIndex">
			{{cItem.name}}
			</li>
			</ul>
			</div>

			<!-- <div class="line-box">
			<div></div>
			</div>

			<div class="ba-box">
			<ul>
			<li>
			Copyright @ 1998 - 2023 Tancant. All Rights Reserved.北科软件公司版权所有
			</li>
			<li>
			公司地址:武汉市洪山区野芷湖西路16号创意天地10号高层13楼
			</li>
			<li>
			联系电话: 400 862 6126
			</li>
			</ul>
			</div> -->
			</footer>

			</div>
			</template>

			<script>
			import bannerComp from './banner.vue'
			import hxgnComp from './hxgn.vue'
			import mxjsComp from './mxjs.vue'
			import lxwjzxfwComp from './lxwjzxfw.vue'
			import sstxComp from './sstx.vue'
			export default {
			name: 'page-home',
			components: {
			bannerComp,
			hxgnComp,
			mxjsComp,
			lxwjzxfwComp,
			sstxComp
			},
			data () {
			return {
			headerList: [
			{
			name: 'funasr介绍',
			ref: 'h-funasrJs',
			isAnchor: true
			},
			{
			name: '核心功能',
			ref: 'h-hxgn',
			isAnchor: true
			},
			{
			name: 'Paraformer模型介绍',
			ref: 'h-mxjs',
			isAnchor: true
			},
			{
			name: '离线文件转写服务',
			ref: 'h-lxwj',
			isAnchor: true
			},
			{
			name: '实时听写',
			ref: 'h-sstx',
			isAnchor: true
			}
			// {
			// name: 'Github',
			// ref: 'h-github'
			// },
			// {
			// name: '社区交流',
			// ref: 'h-sqjl'
			// }
			],
			footerList: [
			{
			title: 'Funasr介绍',
			childer: [
			{
			name: '关于我们',
			link: 'https://www.baidu.com/'
			}
			]
			},
			{
			title: '核心功能',
			childer: [
			{
			name: '核心介绍',
			link: ''
			}
			]
			},
			{
			title: 'Paraformer模型介绍',
			childer: [
			{
			name: '模型结构固',
			link: ''
			},
			{
			name: '模型介绍',
			link: ''
			}
			]
			},
			{
			title: '离线文件转写服务',
			childer: [
			{
			name: '原理图',
			link: ''
			},
			{
			name: '文字介绍',
			link: ''
			},
			{
			name: '安装',
			link: ''
			},
			{
			name: '使用',
			link: ''
			},
			{
			name: '视频教程链接',
			link: ''
			}
			]
			},
			{
			title: '实时听写',
			childer: [
			{
			name: '原理图',
			link: ''
			},
			{
			name: '文字介绍',
			link: ''
			},
			{
			name: '安装',
			link: ''
			},
			{
			name: '使用',
			link: ''
			},
			{
			name: '视频教程链接',
			link: ''
			}
			]
			}
			],
			headerActive: 'h-funasrJs',
			lineWidth: 0,
			lineLeft: 0
			}
			},
			created () {},
			mounted () {
			this.$nextTick(() => {
			this.getLineWidth()
			this.handlerNodeScroll()
			this.getAnchorDetails()
			})
			},
			methods: {
			// 底部跳转
			toPage (item) {
			if (item.link) window.open(item.link)
			},
			// 获取元素的高度，距离顶部距离
			getAnchorDetails () {
			for (let i = 0; i < this.headerList.length; i++) {
			const item = this.headerList[i]
			if (item.isAnchor) {
			const refName = item.ref.split('-')[1]
			const dom = this.$refs[refName].$el
			item.height = dom.offsetHeight
			item.top = dom.offsetTop
			}
			}
			},
			// 头部锚点按钮
			anchorTo (item) {
			this.headerActive = item.ref
			this.getLineWidth()
			if (item.isAnchor) {
			const refName = item.ref.split('-')[1]
			this.scrollToFn(refName)
			}
			},
			// 设置滚动距离
			scrollToFn (refName) {
			const dom = this.$refs[refName].$el
			const top = dom.offsetTop

			const appContentScrollbar = document.getElementsByClassName('app-content-scrollbar')[0]
			const uiModalWrap = appContentScrollbar.getElementsByClassName('ui-scrollbar__wrap')[0]

			uiModalWrap.scrollTo({
			top: top - 70,
			left: 0,
			behavior: 'smooth'
			})
			},
			// 获取头部选中样式
			getLineWidth () {
			const dom = this.$refs[this.headerActive][0]
			if (!dom) return
			this.lineWidth = dom.offsetWidth
			this.lineLeft = dom.offsetLeft
			},
			// 监听元素滚动
			handlerNodeScroll () {
			const self = this
			// 函数防抖
			const fun = self.debounce(e => {
			// 距顶部
			const scrollTop = e.target.scrollTop
			let toActive = null
			for (let i = 0; i < self.headerList.length; i++) {
			const item = self.headerList[i]
			if (scrollTop > (item.top - 90)) {
			toActive = item
			}
			}
			if (toActive && toActive.top) {
			self.headerActive = toActive.ref
			self.getLineWidth()
			}
			}, 100)

			// 监听滚动
			const appContentScrollbar = document.getElementsByClassName('app-content-scrollbar')[0]
			const uiModalWrap = appContentScrollbar.getElementsByClassName('ui-scrollbar__wrap')[0]
			uiModalWrap.addEventListener('scroll', function (e) {
			fun(e)
			})
			},
			// 函数防抖
			debounce (handle, delay) {
			let timer = null
			return function () {
			const _self = this
			const _args = arguments
			clearTimeout(timer)
			timer = setTimeout(function () {
			handle.apply(_self, _args)
			}, delay)
			}
			}
			}
			}
			</script>
			<style src="./assets/css/index.scss" lang="scss"></style>