From c408a8847d4257f7a45cac54b512a791f450b3f4 Mon Sep 17 00:00:00 2001
From: 游雁 <zhifu.gzf@alibaba-inc.com>
Date: 星期四, 23 十一月 2023 23:24:57 +0800
Subject: [PATCH] merge
---
web-pages/src/views/home/index.vue | 306 +++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 306 insertions(+), 0 deletions(-)
diff --git a/web-pages/src/views/home/index.vue b/web-pages/src/views/home/index.vue
new file mode 100644
index 0000000..34e8483
--- /dev/null
+++ b/web-pages/src/views/home/index.vue
@@ -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>
--
Gitblit v1.9.1