首页
This commit is contained in:
hh
@ -17,6 +17,7 @@
|
|||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@element-plus/icons": "0.0.11",
|
"@element-plus/icons": "0.0.11",
|
||||||
"@vueuse/core": "6.4.1",
|
"@vueuse/core": "6.4.1",
|
||||||
|
"animate.css": "^4.1.1",
|
||||||
"axios": "0.24.0",
|
"axios": "0.24.0",
|
||||||
"echarts": "5.2.1",
|
"echarts": "5.2.1",
|
||||||
"element-plus": "1.2.0-beta.3",
|
"element-plus": "1.2.0-beta.3",
|
||||||
|
|||||||
9
src/components/webFooter/index.vue
Normal file
9
src/components/webFooter/index.vue
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
<template>
|
||||||
|
<div class="webFooter">
|
||||||
|
页面底部
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { onMounted, reactive, watch } from "vue";
|
||||||
|
</script>
|
||||||
@ -9,8 +9,8 @@
|
|||||||
<li class="menu-item1">
|
<li class="menu-item1">
|
||||||
<div
|
<div
|
||||||
class="menu-item-tit"
|
class="menu-item-tit"
|
||||||
:class="pagePath == '' ? 'active' : ''"
|
:class="pagePath == '/' ? 'active' : ''"
|
||||||
@click="handlePath('')"
|
@click="handlePath('/')"
|
||||||
>
|
>
|
||||||
首页
|
首页
|
||||||
</div>
|
</div>
|
||||||
@ -136,7 +136,7 @@ dt {
|
|||||||
list-style: none;
|
list-style: none;
|
||||||
}
|
}
|
||||||
.webHead {
|
.webHead {
|
||||||
position: absolute;
|
position: fixed;
|
||||||
z-index: 2001;
|
z-index: 2001;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
|
|||||||
@ -36,6 +36,8 @@ import TreeSelect from '@/components/TreeSelect'
|
|||||||
// 字典标签组件
|
// 字典标签组件
|
||||||
import DictTag from '@/components/DictTag'
|
import DictTag from '@/components/DictTag'
|
||||||
|
|
||||||
|
import 'animate.css'
|
||||||
|
|
||||||
const app = createApp(App)
|
const app = createApp(App)
|
||||||
|
|
||||||
// 全局方法挂载
|
// 全局方法挂载
|
||||||
|
|||||||
@ -37,8 +37,7 @@ export const constantRoutes = [
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '',
|
path: '',
|
||||||
name: 'index',
|
component: () => import('../views/website/index/index.vue'),
|
||||||
component: () => import('../views/website/index.vue'),
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: 'solution',
|
path: 'solution',
|
||||||
|
|||||||
@ -1,22 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="index">
|
|
||||||
index
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.index {
|
|
||||||
position: relative;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
.content {
|
|
||||||
width: 100%;
|
|
||||||
padding-top: 80px;
|
|
||||||
min-height: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
BIN
src/views/website/index/comp/img/index1-bg1.png
Normal file
BIN
src/views/website/index/comp/img/index1-bg1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 364 B |
166
src/views/website/index/comp/index1.vue
Normal file
166
src/views/website/index/comp/index1.vue
Normal file
@ -0,0 +1,166 @@
|
|||||||
|
<template>
|
||||||
|
<div class="box">
|
||||||
|
<div>
|
||||||
|
<el-row>
|
||||||
|
<el-col :push="4" :sm="10" :md="12">
|
||||||
|
<div class="tab">
|
||||||
|
<div
|
||||||
|
v-for="(v,index) in queryParams.tabList"
|
||||||
|
:class="{ active: queryParams.tabIndex == index }"
|
||||||
|
@click="queryParams.tabIndex = index"
|
||||||
|
>{{ v }}</div>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<div style="height: 16px;"></div>
|
||||||
|
<el-row>
|
||||||
|
<el-col :push="4" :sm="10" :md="12">
|
||||||
|
<el-input v-model.trim="queryParams.input3" placeholder="请输入检索词">
|
||||||
|
<template #append>
|
||||||
|
<el-button class="x_btns" icon="Search" @click="handleQuery">搜索</el-button>
|
||||||
|
</template>
|
||||||
|
</el-input>
|
||||||
|
</el-col>
|
||||||
|
<el-col :push="4" :sm="10" :md="8">
|
||||||
|
<div class="btnsWrap">
|
||||||
|
<el-button class="x_btns" @click="handleQuery">发布需求</el-button>
|
||||||
|
<el-button class="x_btns" @click="handleQuery">专家机构录入</el-button>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<div style="height: 15vh"></div>
|
||||||
|
<el-row>
|
||||||
|
<el-col :push="3" :pull="3" :span="18">
|
||||||
|
<div class="numBox">
|
||||||
|
<div>
|
||||||
|
<div class="val">9800+</div>
|
||||||
|
<div class="des">专家数量</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="val">98000+</div>
|
||||||
|
<div class="des">专利成果数量</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="val">10000+</div>
|
||||||
|
<div class="des">需求数量</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="val">120000+</div>
|
||||||
|
<div class="des">对接数量</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="val">11000+</div>
|
||||||
|
<div class="des">实验室数量</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { onMounted, reactive } from "vue";
|
||||||
|
const queryParams = reactive({
|
||||||
|
pageNum: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
input3: "",
|
||||||
|
tabList: [
|
||||||
|
'找企业', '找成果', '找实验室', '找专利', '找专家', '接需求'
|
||||||
|
],
|
||||||
|
tabIndex: 0,
|
||||||
|
});
|
||||||
|
function handleQuery() {
|
||||||
|
queryParams.pageNum = 1;
|
||||||
|
getList();
|
||||||
|
}
|
||||||
|
function getList() { }
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
console.log("onmunted");
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.x_btns {
|
||||||
|
font-size: 14px !important;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
.box {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
display: -webkit-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
& > div {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.btnsWrap {
|
||||||
|
margin: 0 0 0 40px;
|
||||||
|
.el-button {
|
||||||
|
height: 36px;
|
||||||
|
padding: 10px 25px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.numBox {
|
||||||
|
display: flex;
|
||||||
|
display: -webkit-flex;
|
||||||
|
& > div {
|
||||||
|
flex: 1;
|
||||||
|
height: 200px;
|
||||||
|
display: -webkit-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.val {
|
||||||
|
font-size: 36px;
|
||||||
|
font-family: DIN;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #333333;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
.des {
|
||||||
|
font-size: 16px;
|
||||||
|
font-family: Source Han Sans CN;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab {
|
||||||
|
width: 480px;
|
||||||
|
height: 42px;
|
||||||
|
overflow: hidden;
|
||||||
|
& > div {
|
||||||
|
width: 80px;
|
||||||
|
height: 42px;
|
||||||
|
line-height: 42px;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 14px;
|
||||||
|
font-family: Source Han Sans CN;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #333333;
|
||||||
|
float: left;
|
||||||
|
cursor: pointer;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
& > div.active {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #ffffff;
|
||||||
|
line-height: 38px;
|
||||||
|
background-image: url(./img/index1-bg1.png);
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.wrap {
|
||||||
|
padding-left: 460px;
|
||||||
|
}
|
||||||
|
.search {
|
||||||
|
width: 720px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
245
src/views/website/index/comp/index2.vue
Normal file
245
src/views/website/index/comp/index2.vue
Normal file
@ -0,0 +1,245 @@
|
|||||||
|
<template>
|
||||||
|
<div class="box">
|
||||||
|
<div class="wrap">
|
||||||
|
<div class="tit">
|
||||||
|
<div class="left">科技活动</div>
|
||||||
|
<div class="right">
|
||||||
|
<div class="publish">发布活动</div>
|
||||||
|
<div class="more">更多</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="content">
|
||||||
|
<div class="item one">
|
||||||
|
<img
|
||||||
|
src="https://t7.baidu.com/it/u=1820929524,3700012367&fm=193&f=GIF"
|
||||||
|
style="width: 100%"
|
||||||
|
alt
|
||||||
|
/>
|
||||||
|
<div class="des">
|
||||||
|
<div class="left">
|
||||||
|
<div>助力工厂公辅系统数字化及节能提效</div>
|
||||||
|
<div class="time">活动时间：2021-11-01 08:00</div>
|
||||||
|
<div>1988人已观看</div>
|
||||||
|
</div>
|
||||||
|
<div class="right">19.9元报名</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<div class="img">
|
||||||
|
<img src="https://t7.baidu.com/it/u=1820929524,3700012367&fm=193&f=GIF" />
|
||||||
|
</div>
|
||||||
|
<div class="dess">
|
||||||
|
<div class="txt">助力工厂公辅系统数字化及节能提效助力工厂公辅系统数字化及节能提效</div>
|
||||||
|
<div class="dess1">
|
||||||
|
<div class="time">活动时间：2021-11-01 08:00</div>
|
||||||
|
<div>1988人已观看</div>
|
||||||
|
</div>
|
||||||
|
<div class="enroll">19.9元报名</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<div class="img">
|
||||||
|
<img src="https://t7.baidu.com/it/u=1820929524,3700012367&fm=193&f=GIF" />
|
||||||
|
</div>
|
||||||
|
<div class="dess">
|
||||||
|
<div class="txt">助力工厂公辅系统数字化及节能提效助力工厂公辅系统数字化及节能提效</div>
|
||||||
|
<div class="dess1">
|
||||||
|
<div class="time">活动时间：2021-11-01 08:00</div>
|
||||||
|
<div>1988人已观看</div>
|
||||||
|
</div>
|
||||||
|
<div class="enroll">19.9元报名</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<div class="img">
|
||||||
|
<img src="https://t7.baidu.com/it/u=1820929524,3700012367&fm=193&f=GIF" />
|
||||||
|
</div>
|
||||||
|
<div class="dess">
|
||||||
|
<div class="txt">助力工厂公辅系统数字化及节能提效助力工厂公辅系统数字化及节能提效</div>
|
||||||
|
<div class="dess1">
|
||||||
|
<div class="time">活动时间：2021-11-01 08:00</div>
|
||||||
|
<div>1988人已观看</div>
|
||||||
|
</div>
|
||||||
|
<div class="enroll">19.9元报名</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<div class="img">
|
||||||
|
<img src="https://t7.baidu.com/it/u=1820929524,3700012367&fm=193&f=GIF" />
|
||||||
|
</div>
|
||||||
|
<div class="dess">
|
||||||
|
<div class="txt">助力工厂公辅系统数字化及节能提效助力工厂公辅系统数字化及节能提效</div>
|
||||||
|
<div class="dess1">
|
||||||
|
<div class="time">活动时间：2021-11-01 08:00</div>
|
||||||
|
<div>1988人已观看</div>
|
||||||
|
</div>
|
||||||
|
<div class="enroll end">已结束</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent, onMounted, reactive } from "vue";
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: "music",
|
||||||
|
components: {},
|
||||||
|
setup() {
|
||||||
|
let state = reactive({});
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
console.log("onmunted");
|
||||||
|
});
|
||||||
|
|
||||||
|
return {
|
||||||
|
state,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.box {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
display: -webkit-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
div.wrap {
|
||||||
|
width: 1400px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tit {
|
||||||
|
overflow: hidden;
|
||||||
|
padding: 20px 0;
|
||||||
|
.left {
|
||||||
|
float: left;
|
||||||
|
font-size: 36px;
|
||||||
|
font-family: Source Han Sans CN;
|
||||||
|
font-weight: 300;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
.right {
|
||||||
|
float: right;
|
||||||
|
font-size: 20px;
|
||||||
|
font-family: Source Han Sans CN;
|
||||||
|
.publish {
|
||||||
|
display: inline-block;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #0054ff;
|
||||||
|
margin-right: 20px;
|
||||||
|
cursor: pointer;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
.more {
|
||||||
|
display: inline-block;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #333333;
|
||||||
|
cursor: pointer;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.content {
|
||||||
|
width: 101%;
|
||||||
|
overflow: hidden;
|
||||||
|
.time {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 2px 8px;
|
||||||
|
margin: 2px 0;
|
||||||
|
background: #0054ff;
|
||||||
|
border-radius: 10px;
|
||||||
|
font-size: 14px;
|
||||||
|
font-family: Source Han Sans CN;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
.item {
|
||||||
|
position: relative;
|
||||||
|
float: left;
|
||||||
|
width: 24%;
|
||||||
|
margin: 0 1% 1% 0;
|
||||||
|
.dess {
|
||||||
|
overflow: hidden;
|
||||||
|
.txt {
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow:ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.dess1 {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
.enroll {
|
||||||
|
margin-top: 10px;
|
||||||
|
float: right;
|
||||||
|
width: 90px;
|
||||||
|
height: 30px;
|
||||||
|
line-height: 30px;
|
||||||
|
background: #0054FF;
|
||||||
|
font-size: 16px;
|
||||||
|
font-family: Source Han Sans CN;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #FFFFFF;
|
||||||
|
text-align: center;
|
||||||
|
&.end {
|
||||||
|
background: #B4B4B4;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.img {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 0;
|
||||||
|
padding-bottom: 54%;
|
||||||
|
}
|
||||||
|
&.one {
|
||||||
|
width: 49%;
|
||||||
|
height: 0;
|
||||||
|
padding-bottom: 36.75%;
|
||||||
|
overflow: hidden;
|
||||||
|
.des {
|
||||||
|
position: absolute;
|
||||||
|
height: 94px;
|
||||||
|
width: 100%;
|
||||||
|
bottom: 0;
|
||||||
|
background: rgba(0, 0, 0, 0.2);
|
||||||
|
overflow: hidden;
|
||||||
|
.left {
|
||||||
|
float: left;
|
||||||
|
font-size: 16px;
|
||||||
|
font-family: Source Han Sans CN;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #ffffff;
|
||||||
|
margin: 16px 0 0 18px;
|
||||||
|
}
|
||||||
|
.right {
|
||||||
|
margin: 27px 38px;
|
||||||
|
float: right;
|
||||||
|
width: 120px;
|
||||||
|
height: 40px;
|
||||||
|
line-height: 40px;
|
||||||
|
background: #0054ff;
|
||||||
|
font-size: 16px;
|
||||||
|
font-family: Source Han Sans CN;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #ffffff;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
19
src/views/website/index/comp/index8.vue
Normal file
19
src/views/website/index/comp/index8.vue
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
<template>
|
||||||
|
<div class="box">
|
||||||
|
<webFooter></webFooter>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { onMounted, reactive } from "vue";
|
||||||
|
import webFooter from "../../../../components/webFooter/index.vue";
|
||||||
|
onMounted(() => {
|
||||||
|
console.log("onmunted");
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.box {
|
||||||
|
}
|
||||||
|
</style>
|
||||||
146
src/views/website/index/index.vue
Normal file
146
src/views/website/index/index.vue
Normal file
@ -0,0 +1,146 @@
|
|||||||
|
<template>
|
||||||
|
<div class="home">
|
||||||
|
<transition-group
|
||||||
|
:enter-active-class="state.animate.in"
|
||||||
|
:leave-active-class="state.animate.out"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
v-for="(item, $index) in state.boxList"
|
||||||
|
class="box"
|
||||||
|
:key="$index"
|
||||||
|
:style="`z-index: ${item.zIndex};`"
|
||||||
|
v-show="state.showBox === $index"
|
||||||
|
>
|
||||||
|
<component :is="item.comp"></component>
|
||||||
|
</div>
|
||||||
|
</transition-group>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { reactive, onMounted } from "vue";
|
||||||
|
|
||||||
|
import index1 from './comp/index1.vue';
|
||||||
|
import index2 from './comp/index2.vue';
|
||||||
|
import index8 from './comp/index8.vue';
|
||||||
|
|
||||||
|
let state = reactive({
|
||||||
|
showBox: 0,
|
||||||
|
boxList: [
|
||||||
|
{
|
||||||
|
comp: index1,
|
||||||
|
zIndex: 1,
|
||||||
|
title: "index1",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
comp: index2,
|
||||||
|
zIndex: 1,
|
||||||
|
title: "index2",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
comp: index8,
|
||||||
|
zIndex: 1,
|
||||||
|
title: "index8",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
animate: {
|
||||||
|
in: "animate__animated animate__fadeInDown",
|
||||||
|
out: "animate__animated animate__fadeOutDown",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
function choice(i: number) {
|
||||||
|
if (i === state.showBox) return false;
|
||||||
|
|
||||||
|
// style 的 z-index 属性提升到最上面
|
||||||
|
state.boxList.forEach((item, idx) => {
|
||||||
|
if (idx === i) {
|
||||||
|
item.zIndex = 100;
|
||||||
|
} else {
|
||||||
|
item.zIndex = 1;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 根据判断当前显示的 box 下标和点击的下标进行对比，修改动画方向
|
||||||
|
const animateType = "fade";
|
||||||
|
if (i > state.showBox) {
|
||||||
|
state.animate.in = `animate__animated animate__${animateType}InUp`;
|
||||||
|
state.animate.out = `animate__animated animate__${animateType}OutUp`;
|
||||||
|
} else {
|
||||||
|
state.animate.in = `animate__animated animate__${animateType}InDown`;
|
||||||
|
state.animate.out = `animate__animated animate__${animateType}OutDown`;
|
||||||
|
}
|
||||||
|
|
||||||
|
state.showBox = i;
|
||||||
|
}
|
||||||
|
|
||||||
|
const mouseWheelHandler = (event: any) => {
|
||||||
|
let i = state.showBox;
|
||||||
|
if (mouseWheelFlag(event) === "up") {
|
||||||
|
i = i - 1 < 0 ? state.boxList.length - 1 : i - 1;
|
||||||
|
} else {
|
||||||
|
i = i + 1 > state.boxList.length - 1 ? 0 : i + 1;
|
||||||
|
}
|
||||||
|
choice(i);
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* mouseWheelFlag
|
||||||
|
* @param event window.event
|
||||||
|
* @returns up | down
|
||||||
|
*/
|
||||||
|
const mouseWheelFlag: (event: any) => string = (event: any) => {
|
||||||
|
let delta = 0;
|
||||||
|
if (!event) event = window.event;
|
||||||
|
if (event.wheelDelta) {
|
||||||
|
//IE、chrome浏览器使用的是wheelDelta，并且值为“正负120”
|
||||||
|
delta = event.wheelDelta / 120;
|
||||||
|
if ((window as any).opera) delta = -delta; //因为IE、chrome等向下滚动是负值，FF是正值，为了处理一致性，在此取反处理
|
||||||
|
} else if (event.detail) {
|
||||||
|
//FF浏览器使用的是detail,其值为“正负3”
|
||||||
|
delta = -event.detail / 3;
|
||||||
|
}
|
||||||
|
return delta > 0 ? "up" : "down";
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* throttle 节流
|
||||||
|
* @param func 须要包装的函数
|
||||||
|
* @param delay 延迟时间，单位ms
|
||||||
|
*/
|
||||||
|
const throttle: (func: any, delay: number, immediate?: boolean) => any = (
|
||||||
|
func,
|
||||||
|
delay = 100
|
||||||
|
) => {
|
||||||
|
let flag = false;
|
||||||
|
return (...args: any) => {
|
||||||
|
if (!flag) {
|
||||||
|
flag = true;
|
||||||
|
setTimeout(() => {
|
||||||
|
flag = false;
|
||||||
|
func.call(this, ...args);
|
||||||
|
}, delay);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
window.addEventListener("mousewheel", throttle(mouseWheelHandler, 600), true);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.box {
|
||||||
|
height: calc(100vh - 80px);
|
||||||
|
width: 100%;
|
||||||
|
backdrop-filter: blur(4rpx);
|
||||||
|
}
|
||||||
|
.home {
|
||||||
|
position: relative;
|
||||||
|
height: calc(100vh - 80px);
|
||||||
|
overflow: hidden;
|
||||||
|
width: 100%;
|
||||||
|
.box {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -1,7 +1,9 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="index">
|
<div class="index">
|
||||||
<webHead></webHead>
|
<webHead></webHead>
|
||||||
<router-view class="content" />
|
<div class="content">
|
||||||
|
<router-view />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user