更改样式。增加UI动画
This commit is contained in:
parent
cc6ccb2f39
commit
3ebd866600
147
.gitignore
vendored
147
.gitignore
vendored
@ -1,143 +1,24 @@
|
||||
# ---> Vue
|
||||
# gitignore template for Vue.js projects
|
||||
#
|
||||
# Recommended template: Node.gitignore
|
||||
|
||||
# TODO: where does this rule come from?
|
||||
docs/_book
|
||||
|
||||
# TODO: where does this rule come from?
|
||||
test/
|
||||
|
||||
# ---> Node
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
.pnpm-debug.log*
|
||||
|
||||
# Diagnostic reports (https://nodejs.org/api/report.html)
|
||||
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
|
||||
|
||||
# Runtime data
|
||||
pids
|
||||
*.pid
|
||||
*.seed
|
||||
*.pid.lock
|
||||
|
||||
# Directory for instrumented libs generated by jscoverage/JSCover
|
||||
lib-cov
|
||||
|
||||
# Coverage directory used by tools like istanbul
|
||||
coverage
|
||||
*.lcov
|
||||
|
||||
# nyc test coverage
|
||||
.nyc_output
|
||||
|
||||
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
|
||||
.grunt
|
||||
|
||||
# Bower dependency directory (https://bower.io/)
|
||||
bower_components
|
||||
|
||||
# node-waf configuration
|
||||
.lock-wscript
|
||||
|
||||
# Compiled binary addons (https://nodejs.org/api/addons.html)
|
||||
build/Release
|
||||
|
||||
# Dependency directories
|
||||
node_modules/
|
||||
jspm_packages/
|
||||
|
||||
# Snowpack dependency directory (https://snowpack.dev/)
|
||||
web_modules/
|
||||
|
||||
# TypeScript cache
|
||||
*.tsbuildinfo
|
||||
|
||||
# Optional npm cache directory
|
||||
.npm
|
||||
|
||||
# Optional eslint cache
|
||||
.eslintcache
|
||||
|
||||
# Optional stylelint cache
|
||||
.stylelintcache
|
||||
|
||||
# Microbundle cache
|
||||
.rpt2_cache/
|
||||
.rts2_cache_cjs/
|
||||
.rts2_cache_es/
|
||||
.rts2_cache_umd/
|
||||
|
||||
# Optional REPL history
|
||||
.node_repl_history
|
||||
|
||||
# Output of 'npm pack'
|
||||
*.tgz
|
||||
|
||||
# Yarn Integrity file
|
||||
.yarn-integrity
|
||||
|
||||
# dotenv environment variable files
|
||||
.env
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
.env.local
|
||||
|
||||
# parcel-bundler cache (https://parceljs.org/)
|
||||
.cache
|
||||
.parcel-cache
|
||||
|
||||
# Next.js build output
|
||||
.next
|
||||
out
|
||||
|
||||
# Nuxt.js build / generate output
|
||||
.nuxt
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Gatsby files
|
||||
.cache/
|
||||
# Comment in the public line in if your project uses Gatsby and not Next.js
|
||||
# https://nextjs.org/blog/next-9-1#public-directory-support
|
||||
# public
|
||||
|
||||
# vuepress build output
|
||||
.vuepress/dist
|
||||
|
||||
# vuepress v2.x temp and cache directory
|
||||
.temp
|
||||
.cache
|
||||
|
||||
# Docusaurus cache and generated files
|
||||
.docusaurus
|
||||
|
||||
# Serverless directories
|
||||
.serverless/
|
||||
|
||||
# FuseBox cache
|
||||
.fusebox/
|
||||
|
||||
# DynamoDB Local files
|
||||
.dynamodb/
|
||||
|
||||
# TernJS port file
|
||||
.tern-port
|
||||
|
||||
# Stores VSCode versions used for testing VSCode extensions
|
||||
.vscode-test
|
||||
|
||||
# yarn v2
|
||||
.yarn/cache
|
||||
.yarn/unplugged
|
||||
.yarn/build-state.yml
|
||||
.yarn/install-state.gz
|
||||
.pnp.*
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
||||
3
.vscode/extensions.json
vendored
Normal file
3
.vscode/extensions.json
vendored
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"recommendations": ["Vue.volar"]
|
||||
}
|
||||
19
index.html
Normal file
19
index.html
Normal file
@ -0,0 +1,19 @@
|
||||
<!doctype html>
|
||||
<html lang="zh">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<title>内向基金｜NX Fund</title>
|
||||
<meta name="description" content="内向基金（NX Fund）是专注于消费升级领域的风险投资机构，致力于发现和陪跑中国未来消费行业创新领袖，成为新消费创业者最可信赖的「第一站」。">
|
||||
<meta name="keywords" content="nxfund,内向基金,fund,基金,NX Fund,nx fund">
|
||||
<link rel="icon" type="image/svg+xml" href="https://cdn.sya.org.cn/NXCaseLogo/favicon-brand.svg">
|
||||
<link rel="icon" type="image/svg+xml" href="https://cdn.sya.org.cn/NXCaseLogo/favicon-brand.png">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
1441
package-lock.json
generated
Normal file
1441
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
24
package.json
Normal file
24
package.json
Normal file
@ -0,0 +1,24 @@
|
||||
{
|
||||
"name": "web2",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vue-tsc -b && vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"swiper": "^11.1.14",
|
||||
"vue": "^3.4.37"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^22.5.5",
|
||||
"@vitejs/plugin-vue": "^5.1.2",
|
||||
"less": "^4.5.1",
|
||||
"typescript": "^5.5.3",
|
||||
"vite": "^5.4.1",
|
||||
"vue-tsc": "^2.0.29"
|
||||
},
|
||||
"packageManager": "pnpm@10.12.4+sha512.5ea8b0deed94ed68691c9bad4c955492705c5eeb8a87ef86bc62c74a26b037b08ff9570f108b2e4dbd1dd1a9186fea925e527f141c648e85af45631074680184"
|
||||
}
|
||||
15
public/vite.svg
Normal file
15
public/vite.svg
Normal file
@ -0,0 +1,15 @@
|
||||
<svg width="32" height="48" viewBox="0 0 32 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_7_15)">
|
||||
<path opacity="0.9" d="M0 45.175L10.6667 48V42.3583L0 45.175Z" fill="#494973"/>
|
||||
<path opacity="0.9" d="M0 31.0583L10.6667 33.8833V28.2417L0 31.0583Z" fill="#494973"/>
|
||||
<path opacity="0.9" d="M0 16.9417L10.6667 19.7667V14.125L0 16.9417Z" fill="#494973"/>
|
||||
<path opacity="0.7" d="M32 28.2333L0 36.7083V45.175L32 36.7083V28.2333Z" fill="#494973"/>
|
||||
<path opacity="0.7" d="M21.3333 16.9417L0 22.5917V31.0583L21.3333 25.4083V16.9417Z" fill="#494973"/>
|
||||
<path opacity="0.7" d="M32 0L0 8.46667V16.9417L32 8.46667V0Z" fill="#494973"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_7_15">
|
||||
<rect width="32" height="48" fill="#494973"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 764 B |
26
src/App.vue
Normal file
26
src/App.vue
Normal file
@ -0,0 +1,26 @@
|
||||
<script setup lang="ts">
|
||||
import Index from './pages/index/Index.vue'
|
||||
// import SwiperWin from './components/swiper/SwiperWin.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<Index />
|
||||
<!-- <SwiperWin /> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* .logo {
|
||||
height: 6em;
|
||||
padding: 1.5em;
|
||||
will-change: filter;
|
||||
transition: filter 300ms;
|
||||
}
|
||||
.logo:hover {
|
||||
filter: drop-shadow(0 0 2em #646cffaa);
|
||||
}
|
||||
.logo.vue:hover {
|
||||
filter: drop-shadow(0 0 2em #42b883aa);
|
||||
} */
|
||||
</style>
|
||||
BIN
src/assets/fonts/DINCond-Bold.otf
Normal file
BIN
src/assets/fonts/DINCond-Bold.otf
Normal file
Binary file not shown.
BIN
src/assets/imgs/logo-test.png
Normal file
BIN
src/assets/imgs/logo-test.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 240 KiB |
1
src/assets/vue.svg
Normal file
1
src/assets/vue.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 496 B |
41
src/components/HelloWorld.vue
Normal file
41
src/components/HelloWorld.vue
Normal file
@ -0,0 +1,41 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
|
||||
defineProps<{ msg: string }>()
|
||||
|
||||
const count = ref(0)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<h1>{{ msg }}</h1>
|
||||
|
||||
<div class="card">
|
||||
<button type="button" @click="count++">count is {{ count }}</button>
|
||||
<p>
|
||||
Edit
|
||||
<code>components/HelloWorld.vue</code> to test HMR
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
Check out
|
||||
<a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
|
||||
>create-vue</a
|
||||
>, the official Vue + Vite starter
|
||||
</p>
|
||||
<p>
|
||||
Learn more about IDE Support for Vue in the
|
||||
<a
|
||||
href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
|
||||
target="_blank"
|
||||
>Vue Docs Scaling up Guide</a
|
||||
>.
|
||||
</p>
|
||||
<p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.read-the-docs {
|
||||
color: #888;
|
||||
}
|
||||
</style>
|
||||
75
src/components/swiper/SwiperWin.css
Normal file
75
src/components/swiper/SwiperWin.css
Normal file
@ -0,0 +1,75 @@
|
||||
.max-bg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.global-font {
|
||||
font-family: 'DIN';
|
||||
/* font-weight: normal; */
|
||||
}
|
||||
|
||||
.global-font-bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "DIN";
|
||||
src: url('@/assets/fonts/DINCond-Bold.otf');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.page-font {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
font-size: 24px;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
.slide-container-path {
|
||||
margin-top: 4%;
|
||||
height: 87%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.swiper-size {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.swiper-img {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.swiper-slide {
|
||||
width: 90% !important;
|
||||
margin: 0 5%;
|
||||
}
|
||||
|
||||
.swiper-slide-prev {
|
||||
right: -30%;
|
||||
}
|
||||
|
||||
.swiper-slide-next {
|
||||
left: -30%;
|
||||
}
|
||||
|
||||
.down-arraw-left {
|
||||
position: absolute;
|
||||
left: 14.2%;
|
||||
top: 50%;
|
||||
z-index: 100;
|
||||
transform: rotateZ(90deg);
|
||||
}
|
||||
|
||||
.down-arraw-right {
|
||||
position: absolute;
|
||||
right: 14.2%;
|
||||
top: 50%;
|
||||
z-index: 100;
|
||||
transform: rotateZ(270deg);
|
||||
}
|
||||
76
src/components/swiper/SwiperWin.ts
Normal file
76
src/components/swiper/SwiperWin.ts
Normal file
@ -0,0 +1,76 @@
|
||||
|
||||
import { defineComponent, ref } from 'vue';
|
||||
// Import Swiper Vue.js components
|
||||
import { Swiper, SwiperSlide } from 'swiper/vue';
|
||||
import { Navigation, Pagination, Scrollbar, A11y, Autoplay, Mousewheel } from 'swiper/modules';
|
||||
|
||||
// Import Swiper styles
|
||||
import 'swiper/css';
|
||||
import 'swiper/css/navigation';
|
||||
import 'swiper/css/pagination';
|
||||
import 'swiper/css/scrollbar';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'SwiperWin',
|
||||
props: {
|
||||
images: Array<string>
|
||||
},
|
||||
components: {
|
||||
Swiper,
|
||||
SwiperSlide
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
// setup(props, context) {
|
||||
setup(props: any) {
|
||||
|
||||
// const images = [
|
||||
// util.getAssetsFile('imgs/swiper/swiper1.jpg'),
|
||||
// util.getAssetsFile('imgs/swiper/swiper1.jpg'),
|
||||
// util.getAssetsFile('imgs/swiper/swiper1.jpg')
|
||||
// ]
|
||||
|
||||
|
||||
const images = props.images as Array<string>
|
||||
const refImages = ref(images)
|
||||
const swiper = ref()
|
||||
let realSwiperPage = ref(1)
|
||||
const onSwiper = (swiperInst: any) => {
|
||||
// swiper.activeIndex = 0
|
||||
swiper.value = swiperInst
|
||||
swiper.value.slideNext(0)
|
||||
};
|
||||
const onSlideChange = (swiper: any) => {
|
||||
// console.log('slide change');
|
||||
// console.log(swiper)
|
||||
realSwiperPage.value = swiper.realIndex + 1
|
||||
}
|
||||
|
||||
const slideNext = () => {
|
||||
swiper.value.slideNext()
|
||||
}
|
||||
|
||||
const slidePrev = () => {
|
||||
swiper.value.slidePrev()
|
||||
}
|
||||
|
||||
// const toNext = () => {
|
||||
// swiper.value.slideNext(swiper.value.realIndex + 1)
|
||||
// }
|
||||
|
||||
return {
|
||||
// onSwiper,
|
||||
images,
|
||||
refImages,
|
||||
realSwiperPage,
|
||||
onSlideChange,
|
||||
onSwiper,
|
||||
slideNext,
|
||||
slidePrev,
|
||||
modules: [Navigation, Pagination, Scrollbar, A11y, Autoplay, Mousewheel]
|
||||
// modules: [Navigation, Pagination, Scrollbar, A11y]
|
||||
}
|
||||
}
|
||||
})
|
||||
53
src/components/swiper/SwiperWin.vue
Normal file
53
src/components/swiper/SwiperWin.vue
Normal file
@ -0,0 +1,53 @@
|
||||
<script lang="ts">
|
||||
import swiperWin from './SwiperWin'
|
||||
export default swiperWin
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<!-- <swiper :options="swiperOptions">
|
||||
<swiper-slide>
|
||||
<img src="@/assets/imgs/swiper/swiper1.jpg"
|
||||
/></swiper-slide>
|
||||
<swiper-slide>
|
||||
<img src="@/assets/imgs/swiper/swiper1.jpg"
|
||||
/></swiper-slide>
|
||||
<swiper-slide>
|
||||
<img src="@/assets/imgs/swiper/swiper1.jpg"
|
||||
/></swiper-slide>
|
||||
</swiper> -->
|
||||
|
||||
<!-- :autoplay="{ delay: 5000 }" -->
|
||||
<swiper
|
||||
class="swiper-size"
|
||||
@swiper="onSwiper"
|
||||
:modules="modules"
|
||||
:slides-per-view="'auto'"
|
||||
:loop="true"
|
||||
:mousewheel="true"
|
||||
:autoplay="{ delay: 5000, disableOnInteraction: false }"
|
||||
@slideChange="onSlideChange"
|
||||
>
|
||||
<swiper-slide v-for="(img, index) in refImages" :key="index">
|
||||
<div class="slide-container-path">
|
||||
<img :src="img" class="swiper-img" />
|
||||
</div>
|
||||
</swiper-slide>
|
||||
</swiper>
|
||||
<img
|
||||
src="@/assets/imgs/Down Arraw Purple.svg"
|
||||
class="down-arraw-left"
|
||||
@click="slidePrev"
|
||||
/>
|
||||
<img
|
||||
src="@/assets/imgs/Down Arraw Purple.svg"
|
||||
class="down-arraw-right"
|
||||
@click="slideNext"
|
||||
/>
|
||||
<!-- <div class="global-font page-font">
|
||||
{{ realSwiperPage }}/{{ refImages.length }}
|
||||
</div> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped src="./SwiperWin.css"></style>
|
||||
5
src/main.ts
Normal file
5
src/main.ts
Normal file
@ -0,0 +1,5 @@
|
||||
import { createApp } from 'vue'
|
||||
import './style.css'
|
||||
import App from './App.vue'
|
||||
|
||||
createApp(App).mount('#app')
|
||||
1
src/module.d.ts
vendored
Normal file
1
src/module.d.ts
vendored
Normal file
@ -0,0 +1 @@
|
||||
declare module 'vue-awesome-swiper2'
|
||||
1966
src/pages/index/Index.less
Normal file
1966
src/pages/index/Index.less
Normal file
File diff suppressed because it is too large
Load Diff
294
src/pages/index/Index.ts
Normal file
294
src/pages/index/Index.ts
Normal file
@ -0,0 +1,294 @@
|
||||
import { defineComponent, onMounted, onBeforeUnmount, ref } from 'vue'
|
||||
import SwiperWin from '../../components/swiper/SwiperWin.vue'
|
||||
import utils from '../../util/utils'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'Index',
|
||||
components: {
|
||||
SwiperWin
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
// setup(props, context) {
|
||||
setup() {
|
||||
|
||||
const fullPageEl = ref<HTMLElement>()
|
||||
const fullPageContainerEl = ref<HTMLElement>()
|
||||
|
||||
const swiperWindowEl = ref<HTMLElement>()
|
||||
|
||||
const fullpage = {
|
||||
current: 1, // 当前的页面编号
|
||||
isScrolling: false, // 是否在滚动,是为了防止滚动多页，需要通过一个变量来控制是否滚动
|
||||
deltaY: 0 // 返回鼠标滚轮的垂直滚动量，保存的鼠标滚动事件的deleteY,用来判断是往下还是往上滚
|
||||
};
|
||||
let startTime: number; // 记录触摸开始的时间
|
||||
// let startX: number; // 记录触摸开始的X坐标，本次主要实现的是上下滑动，所以当前坐标不做强制要求
|
||||
let startY: number; // 记录触摸开始的Y坐标
|
||||
let len = 4; // 页面的个数
|
||||
const showArraw = ref(true);
|
||||
const showOptionsPortrait = ref(false);
|
||||
const showOptionsLandspace = ref(false);
|
||||
const showDetailWinPortrait = ref(false);
|
||||
const showDetailWinLandspace = ref(false);
|
||||
const aboutusimg = ref<HTMLElement>()
|
||||
const contactus = ref<HTMLElement>()
|
||||
|
||||
let isLandspaceTag = true
|
||||
const resizeHandler = () => {
|
||||
if (isLandspaceTag) {
|
||||
if (!isLandspace()) {
|
||||
move(1)
|
||||
fullPageContainerEl.value!.style.transform = "translateY(0)"
|
||||
isLandspaceTag = isLandspace()
|
||||
}
|
||||
}
|
||||
else {
|
||||
if (isLandspace()) {
|
||||
move(1)
|
||||
fullPageContainerEl.value!.style.transform = "translateY(0)"
|
||||
isLandspaceTag = isLandspace()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
isLandspaceTag = isLandspace()
|
||||
resizeHandler()
|
||||
window.addEventListener("resize", resizeHandler)
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener("resize", resizeHandler)
|
||||
})
|
||||
|
||||
|
||||
const hideOptionsPage = () => {
|
||||
|
||||
showOptionsPortrait.value = false
|
||||
showOptionsLandspace.value = false
|
||||
|
||||
showArraw.value = true
|
||||
}
|
||||
|
||||
const showOptionsPage = () => {
|
||||
|
||||
hideOptionsPage()
|
||||
if (isLandspace()) {//横屏
|
||||
showOptionsLandspace.value = true
|
||||
}
|
||||
else {
|
||||
showOptionsPortrait.value = true
|
||||
}
|
||||
|
||||
showArraw.value = false
|
||||
}
|
||||
const showSwiperMaskWin = (images: Array<string>) => {
|
||||
|
||||
bannerImages.value = images
|
||||
if (isLandspace()) {//横屏
|
||||
showDetailWinPortrait.value = false
|
||||
showDetailWinLandspace.value = true
|
||||
}
|
||||
else {//竖屏
|
||||
showDetailWinLandspace.value = false
|
||||
showDetailWinPortrait.value = true
|
||||
}
|
||||
showArraw.value = false
|
||||
}
|
||||
|
||||
const stopEvent = (ev: Event) => {
|
||||
|
||||
ev.stopPropagation()
|
||||
// ev.preventDefault()
|
||||
}
|
||||
|
||||
const hideSwiperMaskWin = () => {
|
||||
|
||||
// bannerImages.value = []
|
||||
showDetailWinPortrait.value = false
|
||||
showDetailWinLandspace.value = false
|
||||
|
||||
showArraw.value = true
|
||||
}
|
||||
|
||||
// 往下切换
|
||||
const next = () => {
|
||||
if (!isLandspace()) {
|
||||
return
|
||||
}
|
||||
if (fullpage.current + 1 <= len) { // 如果当前页面编号+1 小于总个数，则可以执行向下滑动
|
||||
fullpage.current += 1; // 页面+1
|
||||
move(fullpage.current); // 执行切换
|
||||
}
|
||||
if (fullpage.current >= len) {
|
||||
showArraw.value = false
|
||||
}
|
||||
else {
|
||||
showArraw.value = true
|
||||
}
|
||||
}
|
||||
|
||||
// 往上切换
|
||||
const pre = () => {
|
||||
if (!isLandspace()) {
|
||||
return
|
||||
}
|
||||
if (fullpage.current - 1 > 0) { // 如果当前页面编号-1 大于0，则可以执行向下滑动
|
||||
fullpage.current -= 1;// 页面+1
|
||||
move(fullpage.current);// 执行切换
|
||||
showArraw.value = true
|
||||
}
|
||||
}
|
||||
|
||||
// 滚动事件
|
||||
const move = (index: number) => {
|
||||
fullpage.current = index;
|
||||
fullpage.isScrolling = true; // 为了防止滚动多页，需要通过一个变量来控制是否滚动
|
||||
directToMove(index); //执行滚动
|
||||
setTimeout(() => { //这里的动画是1s执行完，使用setTimeout延迟1s后解锁
|
||||
fullpage.isScrolling = false;
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
// 执行滚动
|
||||
const directToMove = (index: number) => {
|
||||
let height = fullPageEl.value!.clientHeight; //获取屏幕的宽度
|
||||
let scrollPage = fullPageContainerEl.value!; // 获取执行tarnsform的元素
|
||||
let scrollHeight; // 计算滚动的告诉，是往上滚还往下滚
|
||||
scrollHeight = -(index - 1) * height + "px";
|
||||
scrollPage.style.transform = `translateY(${scrollHeight})`;
|
||||
fullpage.current = index;
|
||||
}
|
||||
|
||||
// 监听鼠标监听
|
||||
const mouseWheelHandle = (event: any) => {
|
||||
// 添加冒泡阻止
|
||||
let evt = event || window.event;
|
||||
if (evt.stopPropagation) {
|
||||
evt.stopPropagation();
|
||||
} else {
|
||||
evt.returnValue = false;
|
||||
}
|
||||
if (fullpage.isScrolling) { // 判断是否可以滚动
|
||||
return false;
|
||||
}
|
||||
let e = event.originalEvent || event;
|
||||
fullpage.deltaY = e.deltaY || e.detail; // Firefox使用detail
|
||||
if (fullpage.deltaY > 0) {
|
||||
next();
|
||||
} else if (fullpage.deltaY < 0) {
|
||||
pre();
|
||||
}
|
||||
}
|
||||
// 清除触摸事件
|
||||
const handleTouchmove = (event: any) => {
|
||||
if (isLandspace()) {
|
||||
event.preventDefault()
|
||||
}
|
||||
}
|
||||
|
||||
//手指按下屏幕
|
||||
const handleTouchstart = (event: any) => {
|
||||
startTime = Date.now()
|
||||
// startX = event.changedTouches[0].clientX
|
||||
startY = event.changedTouches[0].clientY
|
||||
}
|
||||
|
||||
//手指离开屏幕
|
||||
const handleTouchend = (event: any) => {
|
||||
const endTime = Date.now()
|
||||
// const endX = event.changedTouches[0].clientX
|
||||
const endY = event.changedTouches[0].clientY
|
||||
//判断按下的时长
|
||||
if (endTime - startTime > 2000) {
|
||||
return
|
||||
}
|
||||
//滑动的方向
|
||||
let direction = "";
|
||||
//先判断用户滑动的距离，是否合法，合法:判断滑动的方向 注意 距离要加上绝对值
|
||||
if (Math.abs(endY - startY) > 10) {
|
||||
//滑动方向
|
||||
direction = endY - startY > 0 ? "down" : "up"
|
||||
} else {
|
||||
return
|
||||
}
|
||||
//用户做了合法的滑动操作
|
||||
// console.log('方向'+direction)
|
||||
if (direction === 'up') {
|
||||
next();
|
||||
}
|
||||
if (direction === 'down') {
|
||||
pre();
|
||||
}
|
||||
}
|
||||
|
||||
const hotelImages = [
|
||||
utils.getAssetsFile('imgs/banners/hotel/3.jpg'),
|
||||
utils.getAssetsFile('imgs/banners/hotel/1.jpg'),
|
||||
utils.getAssetsFile('imgs/banners/hotel/2.jpg')
|
||||
]
|
||||
|
||||
const restaurantImages = [
|
||||
utils.getAssetsFile('imgs/banners/restaurant/3.jpg'),
|
||||
utils.getAssetsFile('imgs/banners/restaurant/1.jpg'),
|
||||
utils.getAssetsFile('imgs/banners/restaurant/2.jpg')
|
||||
]
|
||||
|
||||
|
||||
const schoolImages = [
|
||||
utils.getAssetsFile('imgs/banners/school/3.jpg'),
|
||||
utils.getAssetsFile('imgs/banners/school/1.jpg'),
|
||||
utils.getAssetsFile('imgs/banners/school/2.jpg')
|
||||
]
|
||||
|
||||
|
||||
const franchiseImages = [
|
||||
utils.getAssetsFile('imgs/banners/franchise/3.jpg'),
|
||||
utils.getAssetsFile('imgs/banners/franchise/1.jpg'),
|
||||
utils.getAssetsFile('imgs/banners/franchise/2.jpg')
|
||||
]
|
||||
|
||||
const bannerImages = ref<Array<string>>([])
|
||||
|
||||
const isLandspace = () => {
|
||||
return document.body.clientWidth > document.body.clientHeight
|
||||
}
|
||||
|
||||
return {
|
||||
fullPageEl,
|
||||
fullPageContainerEl,
|
||||
mouseWheelHandle,
|
||||
handleTouchmove,
|
||||
handleTouchstart,
|
||||
handleTouchend,
|
||||
showOptionsPage,
|
||||
hideOptionsPage,
|
||||
showArraw,
|
||||
showOptionsPortrait,
|
||||
showOptionsLandspace,
|
||||
move,
|
||||
pre,
|
||||
next,
|
||||
swiperWindowEl,
|
||||
|
||||
hotelImages,
|
||||
restaurantImages,
|
||||
schoolImages,
|
||||
franchiseImages,
|
||||
bannerImages,
|
||||
|
||||
showDetailWinPortrait,
|
||||
showDetailWinLandspace,
|
||||
showSwiperMaskWin,
|
||||
hideSwiperMaskWin,
|
||||
isLandspace,
|
||||
aboutusimg,
|
||||
// calcOneImageSize,
|
||||
contactus,
|
||||
stopEvent
|
||||
}
|
||||
}
|
||||
})
|
||||
698
src/pages/index/Index.vue
Normal file
698
src/pages/index/Index.vue
Normal file
@ -0,0 +1,698 @@
|
||||
<template>
|
||||
<div class="max-bg" ref="fullPageEl">
|
||||
<main class="bg-brand">
|
||||
<div class="relative w-full h-screen overflow-hidden">
|
||||
<div class="bg-brand movement scale_rotate h-screen z-0 overflow-hidden">
|
||||
<img src="https://cdn.sya.org.cn/NXCaseLogo/bgd.svg" alt="背景图片"
|
||||
class="absolute h-full w-full object-cover" />
|
||||
</div>
|
||||
|
||||
<!-- 封面页 -->
|
||||
<section class="absolute top-0 left-0 w-full h-screen transform-gpu transition-all duration-1000">
|
||||
<div
|
||||
class="flex flex-col justify-center items-center w-full h-full bg-brand bg-white transition-colors cover-content">
|
||||
<div
|
||||
class="text-white text-black text-sm font-light leading-8 text-center transition-colors cover-text transform-gpu opacity-0 translate-y-20">
|
||||
<div style="width: 162px; height: auto; margin: auto"
|
||||
class="cover-logo-container transform-gpu opacity-0 translate-y-20">
|
||||
<img src="@/assets/imgs/logo-test.png" alt="内向基金LOGO" class="CoverSlide_logo__2K2qV opacity-100"
|
||||
style="width: 162px; height: auto" />
|
||||
</div>
|
||||
<div
|
||||
class="w-32 h-auto m-auto mt-8 mb-32 CoverSlide_opacityContent__3oJ1x cover-title transform-gpu opacity-0 translate-y-20">
|
||||
<p class="text-white flex-nowrap" style="font-family: insight-fund; font-size: 32px">
|
||||
内向基金
|
||||
</p>
|
||||
</div>
|
||||
<p class="CoverSlide_opacityContent__3oJ1x cover-info transform-gpu opacity-0 translate-y-20">上海 · 中国</p>
|
||||
<p class="CoverSlide_opacityContent__3oJ1x cover-info transform-gpu opacity-0 translate-y-20">
|
||||
<span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" stroke="currentColor" fill="transparent"
|
||||
class="inline-block align-text-bottom w-4 h-4">
|
||||
<circle cx="5.5" cy="5.5" r="5"></circle>
|
||||
<path d="M4.012943033121648 3.490357848456956L5.5 5.5L2.07648339743168 4.772309082137843"></path>
|
||||
</svg>
|
||||
{{ currentDate }}
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<a href="#" class="absolute animate-bounce md:bottom-12 bottom-7 left-1/2 w-16 h-4 -ml-8 z-50 cursor-pointer" @click="handleScroll(100);">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 16" fill="currentColor"
|
||||
class="w-full h-full text-white">
|
||||
<path d="M64 0L48 6L32 12L16 6L0 0V4L32 16L64 4V0Z"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</section>
|
||||
|
||||
<!-- 使命声明页 -->
|
||||
<section
|
||||
class="absolute top-0 left-0 w-full h-screen transform-gpu translate-y-full transition-all duration-1000 flex flex-col items-center justify-center px-6 md:px-8 mission-section">
|
||||
<div
|
||||
class="z-10 text-center text-2xl md:text-3xl text-white transform-gpu mission-text text-animate transform-gpu"
|
||||
style="font-family: slogan-handwrite">
|
||||
<div class="mission-line text-animate transform-gpu">
|
||||
以
|
||||
<span class="transform-gpu inline-block text-gold -translate-y-4 opacity-0 quote-mark quote-left"
|
||||
style="text-shadow: -0.15em -0.15em 0 #ecc129">
|
||||
「
|
||||
</span>
|
||||
专业
|
||||
<span class="transform-gpu inline-block text-gold translate-y-4 opacity-0 quote-mark quote-right"
|
||||
style="text-shadow: 0.15em 0.15em 0 #ecc129">
|
||||
」
|
||||
</span>
|
||||
和
|
||||
<span class="transform-gpu inline-block text-gold -translate-y-4 opacity-0 quote-mark quote-left"
|
||||
style="text-shadow: -0.15em -0.15em 0 #ecc129">
|
||||
「
|
||||
</span>
|
||||
友好
|
||||
<span class="transform-gpu inline-block text-gold translate-y-4 opacity-0 quote-mark quote-right"
|
||||
style="text-shadow: 0.15em 0.15em 0 #ecc129">
|
||||
」
|
||||
</span>
|
||||
</div>
|
||||
<div class="opacity-0 translate-y-20 mt-4 mission-line text-animate transform-gpu">
|
||||
做新消费创业者最可信赖的
|
||||
<span class="transform-gpu inline-block text-gold -translate-y-4 opacity-0 quote-mark quote-left"
|
||||
style="text-shadow: -0.15em -0.15em 0 #ecc129">
|
||||
「
|
||||
</span>
|
||||
第一站
|
||||
<span class="transform-gpu inline-block text-gold translate-y-4 opacity-0 quote-mark quote-right"
|
||||
style="text-shadow: 0.15em 0.15em 0 #ecc129">
|
||||
」
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 介绍页 -->
|
||||
<section
|
||||
class="absolute top-0 left-0 w-full h-screen transform-gpu translate-y-full transition-all duration-1000 flex flex-col items-center justify-center px-6 md:px-8 intro-section">
|
||||
<div class="absolute min-h-screen min-w-screen w-full h-full"></div>
|
||||
<div
|
||||
class="max-w-4xl px-4 md:px-6 z-10 md:text-2xl text-lg font-normal md:leading-15 leading-9 text-white intro-text text-animate transform-gpu">
|
||||
<p class="intro-paragraph text-animate transform-gpu">
|
||||
<span class="transform-gpu inline-block -translate-y-4 opacity-0 text-gold quote-mark quote-left"
|
||||
style="text-shadow: -0.15em -0.15em 0 #ecc129">「</span>
|
||||
内向基金
|
||||
<span class="transform-gpu inline-block translate-y-4 opacity-0 text-gold quote-mark quote-right"
|
||||
style="text-shadow: 0.15em 0.15em 0 #ecc129">」</span>
|
||||
2020年夏天诞生于新消费时代，专注早期消费投资。<br />
|
||||
</p>
|
||||
<p class="transform-gpu opacity-0 translate-y-20 intro-paragraph text-animate">
|
||||
我们持续寻找和发掘新消费领域的优秀创业者，助力
|
||||
<span class="transform-gpu inline-block -translate-y-4 opacity-0 text-gold quote-mark quote-left"
|
||||
style="text-shadow: -0.15em -0.15em 0 #ecc129">「</span>
|
||||
务实的理想主义者
|
||||
<span class="transform-gpu inline-block translate-y-4 opacity-0 text-gold quote-mark quote-right"
|
||||
style="text-shadow: 0.15em 0.15em 0 #ecc129">」</span>
|
||||
成长为未来商业领袖，以创新和爱让世界更美好。
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 孙婷婷页 -->
|
||||
<section
|
||||
class="absolute top-0 left-0 w-full h-screen transform-gpu translate-y-full transition-all duration-1000 flex items-center justify-center px-8 partner-section">
|
||||
<div class="partner-content flex flex-col md:flex-row items-center gap-6 md:gap-16">
|
||||
<div class="partner-image">
|
||||
<img class="transform-gpu translate-y-20 opacity-0 partner-img-animation text-animate"
|
||||
src="https://cdn.sya.org.cn/NXCaseLogo/Tingting.png" alt="孙婷婷" loading="eager" />
|
||||
</div>
|
||||
<div class="partner-text">
|
||||
<div class="text-brand text-fxl font-bold mb-3">
|
||||
<div class="w-auto h-auto overflow-hidden">
|
||||
<div class="transform-gpu incline translate-y-10 opacity-0 text-animate partner-text-1">
|
||||
孙婷婷 / 内向基金合伙人
|
||||
</div>
|
||||
</div>
|
||||
<div class="line-container">
|
||||
<div class="line-static" style="height: 4px; background-color: #ECC129; width: 73px;"></div>
|
||||
<div class="line-animated transform-gpu" style="height: 4px; background-color: #2E3192;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<p
|
||||
class="my-3 md:my-4 text-xs md:leading-8 transform-gpu text-grayy text-base opacity-0 translate-y-20 text-animate">
|
||||
2016年至今担任穆棉资本合伙人。穆棉资本是中国领先的新经济精品投行，专注并深耕于消费和科技领域。
|
||||
</p>
|
||||
<p
|
||||
class="my-3 md:my-4 text-xs md:leading-8 transform-gpu text-grayy text-base opacity-0 translate-y-20 text-animate">
|
||||
在联合创立穆棉资本之前，孙婷婷曾在挚信资本从事私募股权投资工作多年，在新零售、消费品牌、企业服务、文化娱乐、教育和医疗等领域有丰富的直接投资和投后管理经验；此前，曾在中海信托股份有限公司工作，从事股权投资工作。
|
||||
</p>
|
||||
<p
|
||||
class="my-3 md:my-4 text-xs md:leading-8 transform-gpu text-grayy text-base opacity-0 translate-y-20 text-animate">
|
||||
2020年联合创立
|
||||
<span class="transform-gpu inline-block -translate-y-4 opacity-0 text-gold quote-mark quote-left"
|
||||
style="text-shadow: -0.15em -0.15em 0 #ecc129">「</span>
|
||||
内向基金
|
||||
<span class="transform-gpu inline-block translate-y-4 opacity-0 text-gold quote-mark quote-right "
|
||||
style="text-shadow: 0.15em 0.15em 0 #ecc129">」</span>
|
||||
，专注早期消费投资。
|
||||
</p>
|
||||
<p
|
||||
class="my-3 md:my-4 text-xs md:leading-8 transform-gpu text-grayy text-base opacity-0 translate-y-20 text-animate">
|
||||
复旦大学 金融学学士。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 应金凤页 -->
|
||||
<section
|
||||
class="absolute top-0 left-0 w-full h-screen transform-gpu translate-y-full transition-all duration-1000 flex items-center justify-center px-8 partner-section">
|
||||
<div class="partner-content flex flex-col md:flex-row-reverse items-center gap-6 md:gap-16">
|
||||
<div class="partner-image">
|
||||
<img class="transform-gpu translate-y-20 opacity-0 partner-img-animation"
|
||||
src="https://cdn.sya.org.cn/NXCaseLogo/Stefanie.png" alt="应金凤" loading="eager" />
|
||||
</div>
|
||||
<div class="partner-text">
|
||||
<div class="text-brand text-fxl font-bold mb-3">
|
||||
<div class="w-auto h-auto overflow-hidden">
|
||||
<div class="transform-gpu incline translate-y-10 opacity-0 partner-text-1">
|
||||
应金凤 / 内向基金合伙人
|
||||
</div>
|
||||
</div>
|
||||
<div class="line-container">
|
||||
<div class="line-static" style="height: 4px; background-color: #ECC129; width: 73px;"></div>
|
||||
<div class="line-animated transform-gpu" style="height: 4px; background-color: #2E3192;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<p
|
||||
class="my-3 md:my-4 text-xs md:leading-8 transform-gpu text-grayy text-base opacity-0 translate-y-20 text-animate">
|
||||
2015年创立穆棉资本。穆棉资本是中国领先的新经济精品投行，致力于打造研究驱动的价值创造型精品投行。
|
||||
</p>
|
||||
<p
|
||||
class="my-3 md:my-4 text-xs md:leading-8 transform-gpu text-grayy text-base opacity-0 translate-y-20 text-animate">
|
||||
在创立穆棉资本之前，Stefanie曾在挚信资本从事私募股权投资工作多年，在消费、教育、社区社交、医疗、企业服务和金融科技等领域有丰富的直接投资和投后管理经验；此前，曾在普华永道会计师事务所工作，参与多个知名私募基金的审计工作。
|
||||
</p>
|
||||
<p
|
||||
class="my-3 md:my-4 text-xs md:leading-8 transform-gpu text-grayy text-base opacity-0 translate-y-20 text-animate">
|
||||
2020年联合创立
|
||||
<span class="transform-gpu inline-block -translate-y-4 opacity-0 text-gold quote-mark quote-left"
|
||||
style="text-shadow: -0.15em -0.15em 0 #ecc129">「</span>
|
||||
内向基金
|
||||
<span class="transform-gpu inline-block translate-y-4 opacity-0 text-gold quote-mark quote-right"
|
||||
style="text-shadow: 0.15em 0.15em 0 #ecc129">」</span>
|
||||
，专注早期消费投资。
|
||||
</p>
|
||||
<p
|
||||
class="my-3 md:my-4 text-xs md:leading-8 transform-gpu text-grayy text-base opacity-0 translate-y-20 text-animate">
|
||||
浙江大学 经济学学士和硕士。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 投资案例页 -->
|
||||
<section
|
||||
class="absolute top-0 left-0 w-full h-screen translate-y-full transition-all duration-1000 flex items-center justify-center px-4 bg-white">
|
||||
<div class="cases-content w-full max-w-5xl flex flex-col justify-center">
|
||||
<div
|
||||
class="text-brand text-2xl md:text-3xl leading-10 text-center font-bold mb-8 text-animate transform-gpu case-title">
|
||||
投资案例
|
||||
<div class="bg-brand flex h-1 mt-3 mx-auto"></div>
|
||||
</div>
|
||||
<div class="cases-grid" v-show="isAnimateInited">
|
||||
<!-- 第一行 -->
|
||||
<div class="cases-row transform-gpu">
|
||||
<a href="#" class="case-item">
|
||||
<img src="@/assets/imgs/logo-test.png" alt="sweet7" />
|
||||
</a>
|
||||
<a href="#" class="case-item">
|
||||
<img src="@/assets/imgs/logo-test.png" alt="acacia" />
|
||||
</a>
|
||||
<a href="#" class="case-item">
|
||||
<img src="@/assets/imgs/logo-test.png" alt="霸蛮" />
|
||||
</a>
|
||||
<a href="#" class="case-item">
|
||||
<img src="@/assets/imgs/logo-test.png" alt="sweet7" />
|
||||
</a>
|
||||
<a href="#" class="case-item">
|
||||
<img src="@/assets/imgs/logo-test.png" alt="acacia" />
|
||||
</a>
|
||||
<a href="#" class="case-item">
|
||||
<img src="@/assets/imgs/logo-test.png" alt="霸蛮" />
|
||||
</a>
|
||||
<a href="#" class="case-item">
|
||||
<img src="@/assets/imgs/logo-test.png" alt="sweet7" />
|
||||
</a>
|
||||
<a href="#" class="case-item">
|
||||
<img src="@/assets/imgs/logo-test.png" alt="acacia" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 联系我们页 -->
|
||||
<section
|
||||
class="absolute top-0 left-0 w-full h-screen transform-gpu translate-y-full transition-all duration-1000 flex items-center justify-center px-8 bg-white">
|
||||
<div class="flex flex-col items-center justify-center text-center z-20 font-light">
|
||||
<div
|
||||
class="flex flex-col text-brand text-2xl leading-10 text-center text-animate transform-gpu font-bold justify-center items-center mb-6 opacity-0 translate-y-20">
|
||||
联系我们
|
||||
<div class="bg-brand flex h-1 mt-3 mx-auto"></div>
|
||||
</div>
|
||||
<div
|
||||
class="text-xs leading-loose md:text-sm md:leading-8 transform-gpu opacity-0 translate-y-20 text-animate transform-gpu">
|
||||
<div class="font-normal font-black text-animate transform-gpu">
|
||||
上海市 静安区<br />南京西路1266号 恒隆广场2期 2802室<br />
|
||||
</div>
|
||||
<br />
|
||||
<span class="font-normal font-black text-animate transform-gpu">项目投递：</span><span
|
||||
class="font-black text-animate transform-gpu">bp@nxfund.com</span><br />
|
||||
<span class="font-normal font-black text-animate transform-gpu">招聘投递：</span><span
|
||||
class="font-black text-animate transform-gpu">hr@nxfund.com</span><br />
|
||||
<span class="font-normal font-black text-animate transform-gpu">商务合作：</span><span
|
||||
class="font-black text-animate transform-gpu">pr@nxfund.com</span>
|
||||
</div>
|
||||
<div class="mt-6">
|
||||
<div
|
||||
class="text-xs font-normal font-black leading-loose md:text-sm md:leading-8 transform-gpu opacity-0 translate-y-20 gongzhonghao-title">
|
||||
内向基金微信公众号
|
||||
</div>
|
||||
<div style="
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
">
|
||||
<div style="
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
">
|
||||
<img style="
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
margin: 0;
|
||||
border: none;
|
||||
padding: 0;
|
||||
" alt="" aria-hidden="true"
|
||||
src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTI4IiBoZWlnaHQ9IjEyOCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiLz4=" />
|
||||
</div>
|
||||
<img alt="内向基金微信公众号" srcset="
|
||||
https://cdn.sya.org.cn/NXCaseLogo/QRcode.png?auto=format&fit=max&w=128 1x,
|
||||
https://cdn.sya.org.cn/NXCaseLogo/QRcode.png?auto=format&fit=max&w=256 2x
|
||||
" src="https://cdn.sya.org.cn/NXCaseLogo/QRcode.png?auto=format&fit=max&w=256" decoding="async"
|
||||
style="
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
border: none;
|
||||
margin: auto;
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
min-width: 100%;
|
||||
max-width: 100%;
|
||||
min-height: 100%;
|
||||
max-height: 100%;
|
||||
" />
|
||||
</div>
|
||||
<div class="absolute text-xxs bottom-5 font-black text-animate transform-gpu"
|
||||
style="left: 50%; transform: translate(-50%)">
|
||||
© NX FUND 2021 ICP : 沪ICP备2021034894号-2
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="absolute md:right-auto -right-32 top-20">
|
||||
<div style="
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 1000px;
|
||||
height: 530px;
|
||||
">
|
||||
<img alt="" srcset="
|
||||
https://cdn.sya.org.cn/NXCaseLogo/WorldMap.png?auto=format&fit=max&w=1080 1x,
|
||||
https://cdn.sya.org.cn/NXCaseLogo/WorldMap.png?auto=format&fit=max&w=2048 2x
|
||||
" src="https://cdn.sya.org.cn/NXCaseLogo/WorldMap.png?auto=format&fit=max&w=2048" decoding="async"
|
||||
style="
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
border: none;
|
||||
margin: auto;
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
min-width: 100%;
|
||||
max-width: 100%;
|
||||
min-height: 100%;
|
||||
max-height: 100%;
|
||||
" />
|
||||
</div>
|
||||
<div class="absolute" style="top: 180px; right: 150px">
|
||||
<div class="w-8 h-8 flex flex-wrap ml-auto text-brand animate-pulse">
|
||||
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M18.0521 18.0576H22.1736L32.0002 27.8784C30.8415 29.4516 29.452 30.8411 27.8788 31.9998L18.0521 22.1791V18.0576Z"
|
||||
fill="#2E3192"></path>
|
||||
<path
|
||||
d="M18.0521 13.9481H22.1736L32.0002 4.12144C30.8415 2.54821 29.452 1.15876 27.8788 0L18.0521 9.83846V13.9481Z"
|
||||
fill="#2E3192"></path>
|
||||
<path
|
||||
d="M13.9481 13.9481H9.82669L0 4.12144C1.15876 2.54821 2.54821 1.15876 4.12144 0L13.9481 9.82669V13.9481Z"
|
||||
fill="#2E3192"></path>
|
||||
<path
|
||||
d="M13.9481 18.0576H9.82669L0 27.8784C1.15876 29.4516 2.54821 30.8411 4.12144 31.9998L13.9481 22.1791V18.0576Z"
|
||||
fill="#ECC129"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import {
|
||||
defineComponent,
|
||||
onMounted,
|
||||
onBeforeUnmount,
|
||||
ref,
|
||||
nextTick,
|
||||
} from "vue";
|
||||
|
||||
export default defineComponent({
|
||||
name: "Index",
|
||||
setup() {
|
||||
const fullPageEl = ref<HTMLElement | null>(null);
|
||||
const currentIndex = ref(0);
|
||||
const totalSections = 7;
|
||||
let isScrolling = false;
|
||||
let startY = 0;
|
||||
let isTouching = false;
|
||||
let animationFrameId: number | null = null;
|
||||
const isAnimateInited = ref(false);
|
||||
|
||||
const formatDate = () => {
|
||||
const now = new Date();
|
||||
const days = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
|
||||
const year = now.getFullYear();
|
||||
const month = now.getMonth() + 1;
|
||||
const date = now.getDate();
|
||||
const day = days[now.getDay()];
|
||||
const hours = now.getHours();
|
||||
const minutes = now.getMinutes().toString().padStart(2, "0");
|
||||
const ampm = hours >= 12 ? "PM" : "AM";
|
||||
const displayHours = hours % 12 || 12;
|
||||
return `${year}年${month}月${date}日 ${day} ${displayHours}:${minutes} ${ampm}`;
|
||||
};
|
||||
|
||||
const currentDate = ref(formatDate());
|
||||
|
||||
// 更新时间
|
||||
const timer = setInterval(() => {
|
||||
currentDate.value = formatDate();
|
||||
}, 60000);
|
||||
|
||||
let isAnimating = false;
|
||||
|
||||
const handleScroll = (delta: number) => {
|
||||
// 防抖处理，避免快速滚动和动画冲突
|
||||
if (isScrolling || isAnimating) return;
|
||||
|
||||
// 设置最小滚动距离阈值
|
||||
const scrollThreshold = 50;
|
||||
if (Math.abs(delta) < scrollThreshold) return;
|
||||
|
||||
if (delta > 0 && currentIndex.value < totalSections - 1) {
|
||||
currentIndex.value++;
|
||||
isAnimating = true;
|
||||
isScrolling = true;
|
||||
|
||||
// 同步CSS和JS动画时间，CSS动画1000ms
|
||||
const animationDuration = 1000;
|
||||
setTimeout(() => {
|
||||
isAnimating = false;
|
||||
}, animationDuration);
|
||||
|
||||
// JS锁定时间稍短，避免与CSS冲突
|
||||
setTimeout(() => {
|
||||
isScrolling = false;
|
||||
}, animationDuration * 0.8);
|
||||
|
||||
animateToSection(currentIndex.value);
|
||||
} else if (delta < 0 && currentIndex.value > 0) {
|
||||
currentIndex.value--;
|
||||
isAnimating = true;
|
||||
isScrolling = true;
|
||||
|
||||
const animationDuration = 1000;
|
||||
setTimeout(() => {
|
||||
isAnimating = false;
|
||||
}, animationDuration);
|
||||
|
||||
setTimeout(() => {
|
||||
isScrolling = false;
|
||||
}, animationDuration * 0.8);
|
||||
|
||||
animateToSection(currentIndex.value);
|
||||
}
|
||||
};
|
||||
|
||||
const animateToSection = (sectionIndex: number) => {
|
||||
const sections = document.querySelectorAll("section");
|
||||
|
||||
// 清除之前的动画帧
|
||||
if (animationFrameId) {
|
||||
cancelAnimationFrame(animationFrameId);
|
||||
}
|
||||
|
||||
// 设置所有section的初始状态
|
||||
sections.forEach((section, index) => {
|
||||
const el = section as HTMLElement;
|
||||
el.classList.remove("active", "prev", "next");
|
||||
|
||||
if (index < sectionIndex) {
|
||||
el.classList.add("prev");
|
||||
// 重置上方页面的元素状态
|
||||
setTimeout(() => animateElements(el, false), 600);
|
||||
} else if (index === sectionIndex) {
|
||||
el.classList.add("active");
|
||||
// 触发当前页面的元素动画
|
||||
setTimeout(() => animateElements(el, true), 600);
|
||||
} else {
|
||||
el.classList.add("next");
|
||||
// 重置下方页面的元素状态
|
||||
setTimeout(() => animateElements(el, false), 100);
|
||||
}
|
||||
});
|
||||
|
||||
isScrolling = false;
|
||||
};
|
||||
|
||||
const animateLine = (line: HTMLElement) => {
|
||||
// 为线条元素添加动画类以触发动画
|
||||
requestAnimationFrame(() => {
|
||||
line.classList.remove('animate-in');
|
||||
// 强制重排
|
||||
void line.offsetWidth;
|
||||
line.classList.add('animate-in');
|
||||
});
|
||||
};
|
||||
|
||||
const resetLine = (line: HTMLElement) => {
|
||||
// 重置线条动画状态
|
||||
line.classList.remove('animate-in');
|
||||
};
|
||||
|
||||
const animateElements = (section: Element, isActive: boolean) => {
|
||||
// 使用requestAnimationFrame优化动画性能
|
||||
requestAnimationFrame(() => {
|
||||
const animatedElements = section.querySelectorAll(".transform-gpu");
|
||||
|
||||
animatedElements.forEach((el) => {
|
||||
const htmlEl = el as HTMLElement;
|
||||
|
||||
if (isActive) {
|
||||
// 显示动画 - 先强制重排确保状态更新
|
||||
htmlEl.classList.remove(
|
||||
"opacity-0",
|
||||
"-translate-y-4",
|
||||
"-translate-y-5",
|
||||
"translate-y-4",
|
||||
"translate-y-5",
|
||||
"translate-y-10",
|
||||
"translate-y-20",
|
||||
"translate-y-40",
|
||||
"-translate-y-20",
|
||||
"translate-y-96"
|
||||
);
|
||||
void htmlEl.offsetWidth; // 强制重排
|
||||
htmlEl.classList.add("opacity-100", "translate-y-0");
|
||||
|
||||
// 特定元素的动画类
|
||||
if (htmlEl.classList.contains("quote-mark")) {
|
||||
htmlEl.classList.add("animate-in");
|
||||
}
|
||||
if (htmlEl.classList.contains("partner-img-animation")) {
|
||||
htmlEl.classList.add("animate-in");
|
||||
}
|
||||
if (htmlEl.classList.contains("cases-row")) {
|
||||
htmlEl.classList.add("animate-in");
|
||||
}
|
||||
if (htmlEl.classList.contains("cover-logo-container")) {
|
||||
htmlEl.classList.add("animate-in");
|
||||
}
|
||||
if (htmlEl.classList.contains("cover-title")) {
|
||||
htmlEl.classList.add("animate-in");
|
||||
}
|
||||
if (htmlEl.classList.contains("text-animate")) {
|
||||
htmlEl.classList.add("animate-in");
|
||||
}
|
||||
if (htmlEl.classList.contains("quote-left")) {
|
||||
setTimeout(() => {
|
||||
htmlEl.classList.add("animate-in");
|
||||
}, 1200);
|
||||
}
|
||||
if (htmlEl.classList.contains("quote-right")) {
|
||||
setTimeout(() => {
|
||||
htmlEl.classList.add("animate-in");
|
||||
}, 1200);
|
||||
}
|
||||
if (htmlEl.classList.contains("line-animated")) {
|
||||
// 对于线条元素，触发动画
|
||||
animateLine(htmlEl);
|
||||
}
|
||||
} else {
|
||||
// 隐藏并重置状态
|
||||
htmlEl.classList.remove("opacity-100", "translate-y-0", "animate-in");
|
||||
void htmlEl.offsetWidth; // 强制重排
|
||||
htmlEl.classList.add("opacity-0");
|
||||
|
||||
// 根据元素类型设置初始位置
|
||||
if (htmlEl.classList.contains("incline")) {
|
||||
htmlEl.classList.add("translate-y-10");
|
||||
} else if (htmlEl.classList.contains("quote-left")) {
|
||||
htmlEl.classList.add("-translate-y-4");
|
||||
} else if (htmlEl.classList.contains("quote-right")) {
|
||||
htmlEl.classList.add("translate-y-4");
|
||||
} else if (htmlEl.classList.contains("line-animated")) {
|
||||
// 对于线条元素，重置动画
|
||||
resetLine(htmlEl);
|
||||
} else {
|
||||
htmlEl.classList.add("translate-y-20");
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const onWheel = (e: WheelEvent) => {
|
||||
if (isTouching) return;
|
||||
e.preventDefault();
|
||||
const delta = e.deltaY;
|
||||
handleScroll(delta);
|
||||
};
|
||||
|
||||
const onTouchStart = (e: TouchEvent) => {
|
||||
isTouching = true;
|
||||
startY = e.touches[0].clientY;
|
||||
};
|
||||
|
||||
const onTouchMove = (e: TouchEvent) => {
|
||||
if (!isTouching) return;
|
||||
e.preventDefault(); // 防止页面整体滚动干扰
|
||||
};
|
||||
|
||||
const onTouchEnd = (e: TouchEvent) => {
|
||||
if (!isTouching) return;
|
||||
const endY = e.changedTouches[0].clientY;
|
||||
const delta = startY - endY;
|
||||
|
||||
if (Math.abs(delta) > 50) {
|
||||
handleScroll(delta);
|
||||
}
|
||||
|
||||
isTouching = false;
|
||||
};
|
||||
|
||||
const onKeyDown = (e: KeyboardEvent) => {
|
||||
if (e.key === "ArrowDown" || e.key === "PageDown") {
|
||||
handleScroll(100);
|
||||
} else if (e.key === "ArrowUp" || e.key === "PageUp") {
|
||||
handleScroll(-100);
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
await nextTick();
|
||||
if (fullPageEl.value) {
|
||||
fullPageEl.value.addEventListener("wheel", onWheel, { passive: false });
|
||||
fullPageEl.value.addEventListener("touchstart", onTouchStart, {
|
||||
passive: false,
|
||||
});
|
||||
fullPageEl.value.addEventListener("touchmove", onTouchMove, {
|
||||
passive: false,
|
||||
});
|
||||
fullPageEl.value.addEventListener("touchend", onTouchEnd, {
|
||||
passive: false,
|
||||
});
|
||||
window.addEventListener("keydown", onKeyDown);
|
||||
|
||||
// 初始化页面状态 - 不触发动画
|
||||
const sections = document.querySelectorAll("section");
|
||||
sections.forEach((section, index) => {
|
||||
const el = section as HTMLElement;
|
||||
if (index === 0) {
|
||||
el.classList.add("active");
|
||||
setTimeout(() => {
|
||||
animateElements(el, true);
|
||||
isAnimateInited.value = true;
|
||||
}, 300);
|
||||
}
|
||||
else {
|
||||
el.classList.add("next");
|
||||
animateElements(el, false);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
if (animationFrameId) {
|
||||
cancelAnimationFrame(animationFrameId);
|
||||
}
|
||||
if (timer) {
|
||||
clearInterval(timer);
|
||||
}
|
||||
if (fullPageEl.value) {
|
||||
fullPageEl.value.removeEventListener("wheel", onWheel);
|
||||
fullPageEl.value.removeEventListener("touchstart", onTouchStart);
|
||||
fullPageEl.value.removeEventListener("touchmove", onTouchMove);
|
||||
fullPageEl.value.removeEventListener("touchend", onTouchEnd);
|
||||
}
|
||||
window.removeEventListener("keydown", onKeyDown);
|
||||
});
|
||||
|
||||
return {
|
||||
fullPageEl,
|
||||
currentIndex,
|
||||
currentDate,
|
||||
isAnimateInited,
|
||||
handleScroll,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style src="./Index.less" lang="less"></style>
|
||||
238
src/style.css
Normal file
238
src/style.css
Normal file
@ -0,0 +1,238 @@
|
||||
:root {
|
||||
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
|
||||
color-scheme: light dark;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
background-color: #242424;
|
||||
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: 500;
|
||||
color: #646cff;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #535bf2;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
place-items: center;
|
||||
min-width: 320px;
|
||||
min-height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3.2em;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: 8px;
|
||||
border: 1px solid transparent;
|
||||
padding: 0.6em 1.2em;
|
||||
font-size: 1em;
|
||||
font-weight: 500;
|
||||
font-family: inherit;
|
||||
background-color: #1a1a1a;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.25s;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
border-color: #646cff;
|
||||
}
|
||||
|
||||
button:focus,
|
||||
button:focus-visible {
|
||||
outline: 4px auto -webkit-focus-ring-color;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 2em;
|
||||
}
|
||||
|
||||
#app {
|
||||
/* max-width: 1280px; */
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
color: #213547;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #747bff;
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
}
|
||||
|
||||
/* 竖屏响应式优化 */
|
||||
@media screen and (orientation: portrait) and (max-width: 768px) {
|
||||
body {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
place-items: center;
|
||||
min-width: 320px;
|
||||
min-height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#app {
|
||||
margin: 0 auto;
|
||||
padding: 1rem;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 文字大小自适应 */
|
||||
h1 {
|
||||
font-size: 2.2em;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.8em;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.4em;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1rem;
|
||||
line-height: 1.6;
|
||||
max-width: 100%;
|
||||
margin: 0 auto;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
/* 容器居中 */
|
||||
.partner-section,
|
||||
.mission-section,
|
||||
.intro-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
/* 合伙人内容居中 */
|
||||
.partner-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 合伙人文字放大 */
|
||||
.partner-text p {
|
||||
font-size: 1.1rem;
|
||||
line-height: 1.7;
|
||||
max-width: 90%;
|
||||
margin: 0.5rem auto;
|
||||
}
|
||||
|
||||
.partner-text .text-fxl {
|
||||
font-size: 1.8rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
/* 投资案例区域居中 */
|
||||
.cases-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
max-width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.case-item {
|
||||
flex: 0 1 calc(33.333% - 1rem);
|
||||
margin: 0.5rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* 图片响应式 */
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
/* 文字区域宽度自适应 */
|
||||
.text-center {
|
||||
max-width: 95%;
|
||||
margin: 0 auto;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* 横屏优化 */
|
||||
@media screen and (orientation: landscape) and (max-height: 500px) {
|
||||
body {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
place-items: center;
|
||||
min-width: 320px;
|
||||
min-height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#app {
|
||||
margin: 0 auto;
|
||||
padding: 0.5rem;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* 文字大小调整 */
|
||||
h1 {
|
||||
font-size: 2.5em;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.partner-text p {
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.partner-text .text-fxl {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
/* 合伙人内容横向排列 */
|
||||
.partner-content {
|
||||
flex-direction: row;
|
||||
gap: 2rem;
|
||||
max-width: 90%;
|
||||
}
|
||||
}
|
||||
7
src/util/utils.ts
Normal file
7
src/util/utils.ts
Normal file
@ -0,0 +1,7 @@
|
||||
// 获取assets静态资源
|
||||
const getAssetsFile = (url: string) => {
|
||||
return new URL(`../assets/${url}`, import.meta.url).href;
|
||||
};
|
||||
export default {
|
||||
getAssetsFile,
|
||||
};
|
||||
1
src/vite-env.d.ts
vendored
Normal file
1
src/vite-env.d.ts
vendored
Normal file
@ -0,0 +1 @@
|
||||
/// <reference types="vite/client" />
|
||||
24
tsconfig.app.json
Normal file
24
tsconfig.app.json
Normal file
@ -0,0 +1,24 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2020",
|
||||
"useDefineForClassFields": true,
|
||||
"module": "ESNext",
|
||||
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||
"skipLibCheck": true,
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"isolatedModules": true,
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
"jsx": "preserve",
|
||||
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noFallthroughCasesInSwitch": true
|
||||
},
|
||||
"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
|
||||
}
|
||||
1
tsconfig.app.tsbuildinfo
Normal file
1
tsconfig.app.tsbuildinfo
Normal file
@ -0,0 +1 @@
|
||||
{"root":["./src/main.ts","./src/module.d.ts","./src/vite-env.d.ts","./src/components/swiper/swiperwin.ts","./src/pages/index/index.ts","./src/util/utils.ts","./src/app.vue","./src/components/helloworld.vue","./src/components/swiper/swiperwin.vue","./src/pages/index/index.vue"],"version":"5.6.2"}
|
||||
7
tsconfig.json
Normal file
7
tsconfig.json
Normal file
@ -0,0 +1,7 @@
|
||||
{
|
||||
"files": [],
|
||||
"references": [
|
||||
{ "path": "./tsconfig.app.json" },
|
||||
{ "path": "./tsconfig.node.json" }
|
||||
]
|
||||
}
|
||||
22
tsconfig.node.json
Normal file
22
tsconfig.node.json
Normal file
@ -0,0 +1,22 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2022",
|
||||
"lib": ["ES2023"],
|
||||
"module": "ESNext",
|
||||
"skipLibCheck": true,
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"isolatedModules": true,
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noFallthroughCasesInSwitch": true
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
||||
1
tsconfig.node.tsbuildinfo
Normal file
1
tsconfig.node.tsbuildinfo
Normal file
@ -0,0 +1 @@
|
||||
{"root":["./vite.config.ts"],"version":"5.6.2"}
|
||||
14
vite.config.ts
Normal file
14
vite.config.ts
Normal file
@ -0,0 +1,14 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import path from 'path';
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [vue()],
|
||||
base: './',
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': path.resolve(__dirname, 'src')
|
||||
}
|
||||
}
|
||||
})
|
||||
Loading…
x
Reference in New Issue
Block a user