🎉 init:
This commit is contained in:
commit
9c8766a1a4
|
|
@ -0,0 +1,13 @@
|
||||||
|
# editorconfig.org
|
||||||
|
root = true
|
||||||
|
|
||||||
|
[*]
|
||||||
|
indent_style = space
|
||||||
|
indent_size = 2
|
||||||
|
end_of_line = lf
|
||||||
|
charset = utf-8
|
||||||
|
trim_trailing_whitespace = true
|
||||||
|
insert_final_newline = true
|
||||||
|
|
||||||
|
[*.md]
|
||||||
|
trim_trailing_whitespace = false
|
||||||
|
|
@ -0,0 +1,92 @@
|
||||||
|
# Created by .ignore support plugin (hsz.mobi)
|
||||||
|
### Node template
|
||||||
|
# Logs
|
||||||
|
/logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
|
||||||
|
/server
|
||||||
|
*.zip
|
||||||
|
# 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
|
||||||
|
|
||||||
|
# nyc test coverage
|
||||||
|
.nyc_output
|
||||||
|
|
||||||
|
# Grunt intermediate storage (http://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/
|
||||||
|
|
||||||
|
# TypeScript v1 declaration files
|
||||||
|
typings/
|
||||||
|
|
||||||
|
# Optional npm cache directory
|
||||||
|
.npm
|
||||||
|
|
||||||
|
# Optional eslint cache
|
||||||
|
.eslintcache
|
||||||
|
|
||||||
|
# Optional REPL history
|
||||||
|
.node_repl_history
|
||||||
|
|
||||||
|
# Output of 'npm pack'
|
||||||
|
*.tgz
|
||||||
|
|
||||||
|
# Yarn Integrity file
|
||||||
|
.yarn-integrity
|
||||||
|
|
||||||
|
# dotenv environment variables file
|
||||||
|
.env
|
||||||
|
|
||||||
|
# parcel-bundler cache (https://parceljs.org/)
|
||||||
|
.cache
|
||||||
|
|
||||||
|
# next.js build output
|
||||||
|
.next
|
||||||
|
|
||||||
|
# nuxt.js build output
|
||||||
|
.nuxt
|
||||||
|
|
||||||
|
# Nuxt generate
|
||||||
|
dist
|
||||||
|
|
||||||
|
# vuepress build output
|
||||||
|
.vuepress/dist
|
||||||
|
|
||||||
|
# Serverless directories
|
||||||
|
.serverless
|
||||||
|
|
||||||
|
# IDE / Editor
|
||||||
|
.idea
|
||||||
|
|
||||||
|
# Service worker
|
||||||
|
sw.*
|
||||||
|
|
||||||
|
# macOS
|
||||||
|
.DS_Store
|
||||||
|
|
||||||
|
# Vim swap files
|
||||||
|
*.swp
|
||||||
|
|
@ -0,0 +1,69 @@
|
||||||
|
# demo
|
||||||
|
|
||||||
|
## Build Setup
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# install dependencies
|
||||||
|
$ yarn install
|
||||||
|
|
||||||
|
# serve with hot reload at localhost:3000
|
||||||
|
$ yarn dev
|
||||||
|
|
||||||
|
# build for production and launch server
|
||||||
|
$ yarn build
|
||||||
|
$ yarn start
|
||||||
|
|
||||||
|
# generate static project
|
||||||
|
$ yarn generate
|
||||||
|
```
|
||||||
|
|
||||||
|
For detailed explanation on how things work, check out the [documentation](https://nuxtjs.org).
|
||||||
|
|
||||||
|
## Special Directories
|
||||||
|
|
||||||
|
You can create the following extra directories, some of which have special behaviors. Only `pages` is required; you can delete them if you don't want to use their functionality.
|
||||||
|
|
||||||
|
### `assets`
|
||||||
|
|
||||||
|
The assets directory contains your uncompiled assets such as Stylus or Sass files, images, or fonts.
|
||||||
|
|
||||||
|
More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/assets).
|
||||||
|
|
||||||
|
### `components`
|
||||||
|
|
||||||
|
The components directory contains your Vue.js components. Components make up the different parts of your page and can be reused and imported into your pages, layouts and even other components.
|
||||||
|
|
||||||
|
More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/components).
|
||||||
|
|
||||||
|
### `layouts`
|
||||||
|
|
||||||
|
Layouts are a great help when you want to change the look and feel of your Nuxt app, whether you want to include a sidebar or have distinct layouts for mobile and desktop.
|
||||||
|
|
||||||
|
More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/layouts).
|
||||||
|
|
||||||
|
|
||||||
|
### `pages`
|
||||||
|
|
||||||
|
This directory contains your application views and routes. Nuxt will read all the `*.vue` files inside this directory and setup Vue Router automatically.
|
||||||
|
|
||||||
|
More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/get-started/routing).
|
||||||
|
|
||||||
|
### `plugins`
|
||||||
|
|
||||||
|
The plugins directory contains JavaScript plugins that you want to run before instantiating the root Vue.js Application. This is the place to add Vue plugins and to inject functions or constants. Every time you need to use `Vue.use()`, you should create a file in `plugins/` and add its path to plugins in `nuxt.config.js`.
|
||||||
|
|
||||||
|
More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/plugins).
|
||||||
|
|
||||||
|
### `static`
|
||||||
|
|
||||||
|
This directory contains your static files. Each file inside this directory is mapped to `/`.
|
||||||
|
|
||||||
|
Example: `/static/robots.txt` is mapped as `/robots.txt`.
|
||||||
|
|
||||||
|
More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/static).
|
||||||
|
|
||||||
|
### `store`
|
||||||
|
|
||||||
|
This directory contains your Vuex store files. Creating a file in this directory automatically activates Vuex.
|
||||||
|
|
||||||
|
More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/store).
|
||||||
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
|
|
@ -0,0 +1,128 @@
|
||||||
|
export const tabs=[
|
||||||
|
{
|
||||||
|
name:'index',
|
||||||
|
title:'Home',
|
||||||
|
icon:'home'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name:'startups',
|
||||||
|
icon:'startups',
|
||||||
|
title:'Startups'
|
||||||
|
}, {
|
||||||
|
name:'innovation',
|
||||||
|
icon:'innovationInsights',
|
||||||
|
title:'Innovation Insights'
|
||||||
|
}, {
|
||||||
|
name:'LPLogin',
|
||||||
|
icon:'LPLogin',
|
||||||
|
title:'LP Login'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name:'joinUs',
|
||||||
|
icon:'joinLightLimX',
|
||||||
|
title:'Join LightLimX'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name:'contact',
|
||||||
|
icon:'contactUs',
|
||||||
|
title:'Contact Us'
|
||||||
|
},
|
||||||
|
]
|
||||||
|
export const footerLink=[
|
||||||
|
{
|
||||||
|
name:'startups',
|
||||||
|
title:'Startups',
|
||||||
|
type:'link'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name:'LPLogin',
|
||||||
|
title:'LP Login',
|
||||||
|
type:'link'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name:'partners',
|
||||||
|
title:'Partners',
|
||||||
|
type:'href',
|
||||||
|
link:'/'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name:'portfolio',
|
||||||
|
title:'Portfolio',
|
||||||
|
type:'href',
|
||||||
|
link:'/'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name:'focusAreas',
|
||||||
|
title:'Focus Areas',
|
||||||
|
type:'href',
|
||||||
|
link:'/'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name:'aboutUs',
|
||||||
|
title:'About Us',
|
||||||
|
type:'href',
|
||||||
|
link:'/'
|
||||||
|
}, {
|
||||||
|
name:'innovation',
|
||||||
|
title:'Innovation Insights',
|
||||||
|
type:'link'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name:'joinUs',
|
||||||
|
title:'Join LightLimX',
|
||||||
|
type:'link'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name:'contact',
|
||||||
|
title:'Contact Us',
|
||||||
|
type:'link'
|
||||||
|
},
|
||||||
|
]
|
||||||
|
export const portfolios=[
|
||||||
|
{
|
||||||
|
time:'.3s',
|
||||||
|
img:'Accelerator',
|
||||||
|
title:'Accelerator',
|
||||||
|
content:'We leverage proprietary processes to build market-leading companies from scratch. Our extensive operational support team accelerates the growth of ventures we partner with.',
|
||||||
|
link:'/startups'
|
||||||
|
},{
|
||||||
|
time:'.6s',
|
||||||
|
img:'Investment',
|
||||||
|
title:'Investment',
|
||||||
|
content:'We bring our wealth of venture experience and leverage our global resources to help projects and maximize their potential.',
|
||||||
|
link:'/startups'
|
||||||
|
},{
|
||||||
|
time:'.9s',
|
||||||
|
img:'Growth',
|
||||||
|
title:'Growth',
|
||||||
|
content:'We drive strategic growth, shorten the time to reach global scale, facilitate introductions, but we don’t stop there. ',
|
||||||
|
link:'/startups'
|
||||||
|
},
|
||||||
|
]
|
||||||
|
export const partners=[
|
||||||
|
{
|
||||||
|
img:'images/1.png',
|
||||||
|
link:''
|
||||||
|
}, {
|
||||||
|
img:'images/2.png',
|
||||||
|
link:''
|
||||||
|
}, {
|
||||||
|
img:'images/3.png',
|
||||||
|
link:''
|
||||||
|
}, {
|
||||||
|
img:'images/4.png',
|
||||||
|
link:''
|
||||||
|
}, {
|
||||||
|
img:'images/5.png',
|
||||||
|
link:''
|
||||||
|
}
|
||||||
|
]
|
||||||
|
export const banners=[
|
||||||
|
{
|
||||||
|
img:'images/b.png',
|
||||||
|
},{
|
||||||
|
img:'images/1.png',
|
||||||
|
},{
|
||||||
|
img:'images/2.png',
|
||||||
|
},
|
||||||
|
]
|
||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,63 @@
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Manrope'; /*给自定义字体命名*/
|
||||||
|
src: url('~/assets/fonts/Manrope-Regular.ttf') format('truetype');
|
||||||
|
font-weight:normal;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Manrope'; /*给自定义字体命名*/
|
||||||
|
src: url('~/assets/fonts/Manrope-Bold.ttf') format('truetype');
|
||||||
|
font-weight:Bold;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
body,dl,dt,dd,ul,ol,li,pre,form,fieldset,input,p,blockquote,th,td{;font-weight:400;margin:0;padding:0}h1,h2,h3,h4,h4,h5{margin:0;padding:0}body{background-color:#f7f7f7;color:#666;font-family:Helvetica,Arial,sans-serif;font-size:14px;text-align:left}select{font-size:14px}table{border-collapse:collapse}fieldset,img{border:0 none}fieldset{margin:0;padding:0}fieldset p{margin:0;padding:0 0 0 8px}legend{display:none}address,caption,em,strong,th,i{font-style:normal;font-weight:400}table caption{margin-left:-1px}hr{border-bottom:1px solid #fff;border-top:1px solid #eee;border-width:1px 0;clear:both;height:2px;margin:5px 0;overflow:hidden}ol,ul{list-style-image:none;list-style-position:outside;list-style-type:none}caption,th{text-align:left}q:before,q:after,blockquote:before,blockquote:after{content:''}.clearfix{clear: both;}.fl{float: left;}.fr{float: right;}html,body{height: 100%}
|
||||||
|
#__layout,#__nuxt{
|
||||||
|
height: 100%;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
body{
|
||||||
|
overflow-x: hidden !important;
|
||||||
|
}
|
||||||
|
div[class*="-h5-wrap"]{
|
||||||
|
width: 100%;
|
||||||
|
max-width: 13rem;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 1300px) {
|
||||||
|
div[class*="-h5-wrap"]{
|
||||||
|
padding: 0 .15rem;
|
||||||
|
box-sizing: border-box;
|
||||||
|
white-space:pre-wrap;
|
||||||
|
//overflow--y: visible;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
div[class*="-h5-wrap"]{
|
||||||
|
padding: 0 .15rem;
|
||||||
|
box-sizing: border-box;
|
||||||
|
white-space:pre-wrap;
|
||||||
|
overflow-x:hidden ;
|
||||||
|
height: auto !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.h5-scroll-bar{
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
.h5-scroll-bar::-webkit-scrollbar{
|
||||||
|
width:4px;
|
||||||
|
height:4px;
|
||||||
|
}
|
||||||
|
.h5-scroll-bar::-webkit-scrollbar-track{
|
||||||
|
background: #f6f6f6;
|
||||||
|
border-radius:2px;
|
||||||
|
}
|
||||||
|
.h5-scroll-bar::-webkit-scrollbar-thumb{
|
||||||
|
background: #aaa;
|
||||||
|
border-radius:2px;
|
||||||
|
}
|
||||||
|
.h5-scroll-bar::-webkit-scrollbar-thumb:hover{
|
||||||
|
background: #747474;
|
||||||
|
}
|
||||||
|
.h5-scroll-bar::-webkit-scrollbar-corner{
|
||||||
|
background: #f6f6f6;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="34.001" height="28.237" viewBox="0 0 34.001 28.237"><g transform="translate(-0.007 -86.803)"><path d="M297.4,421.875l-7.347,7.9,2.14,1.992,3.679-3.959v11.174h3.06V427.814l3.679,3.957,2.139-1.992Z" transform="translate(-280.419 -323.946)"/><path d="M29.3,86.8H4.713A4.706,4.706,0,0,0,.007,91.509v18.825a4.706,4.706,0,0,0,4.706,4.706H9.948v-2.656H4.713a2.052,2.052,0,0,1-2.05-2.05V91.509a2.052,2.052,0,0,1,2.05-2.05H29.3a2.052,2.052,0,0,1,2.05,2.05v18.825a2.052,2.052,0,0,1-2.05,2.05H24.067v2.656H29.3a4.706,4.706,0,0,0,4.706-4.706V91.509A4.706,4.706,0,0,0,29.3,86.8Z"/></g></svg>
|
||||||
|
After Width: | Height: | Size: 625 B |
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="7.121" height="11.414" viewBox="0 0 7.121 11.414"><defs><style>.a{fill:none;stroke:#000;stroke-width:2px;}</style></defs><path class="a" d="M378.216,431.015l5,5,5-5" transform="translate(437.429 -377.509) rotate(90)"/></svg>
|
||||||
|
After Width: | Height: | Size: 271 B |
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="34" height="34" viewBox="0 0 34 34"><defs><style>.a{fill:#929292;}</style></defs><path class="a" d="M43.977,42.025,29.335,27.383a1.38,1.38,0,1,0-1.952,1.952L42.025,43.977,27.383,58.619a1.38,1.38,0,1,0,1.952,1.952L43.977,45.929,58.619,60.571a1.38,1.38,0,1,0,1.952-1.952L45.929,43.977,60.571,29.335a1.38,1.38,0,1,0-1.952-1.952Z" transform="translate(-26.977 -26.977)"/></svg>
|
||||||
|
After Width: | Height: | Size: 420 B |
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="34" height="30.385" viewBox="0 0 34 30.385"><g transform="translate(-95.645 -160.6)"><path d="M585.8,697.5m-1.6,0a1.6,1.6,0,1,0,1.6-1.6A1.6,1.6,0,0,0,584.2,697.5Z" transform="translate(-469.015 -513.89)"/><path d="M129.468,168.271l-.644-2.06a8.521,8.521,0,0,0-2.576-3.892,6.865,6.865,0,0,0-4.412-1.72H103.454a6.873,6.873,0,0,0-4.412,1.72,8.552,8.552,0,0,0-2.576,3.892l-.644,2.06a3.823,3.823,0,0,0,3.648,4.964h2.344l-2.544,9.015a6.5,6.5,0,0,0,6.1,8.735h14.539a6.5,6.5,0,0,0,6.1-8.735l-2.544-9.015h2.344a3.828,3.828,0,0,0,3.652-4.964Zm-6.187,14.811a.985.985,0,0,0,.04.116,3.638,3.638,0,0,1-3.4,4.924H105.378a3.638,3.638,0,0,1-3.4-4.924c.016-.04.028-.076.04-.116l2.78-9.851h1.4a3.829,3.829,0,0,0,3.78-4.412h5.36a3.829,3.829,0,0,0,3.78,4.412h1.4Zm3.48-12.979a1.152,1.152,0,0,1-.94.476H119.1a1.166,1.166,0,0,1-1.112-1.516l.364-1.168a1.323,1.323,0,0,0-1.264-1.72H108.21a1.326,1.326,0,0,0-1.268,1.72l.364,1.168a1.166,1.166,0,0,1-1.112,1.516H99.475a1.166,1.166,0,0,1-1.112-1.516l.644-2.06a5.127,5.127,0,0,1,4.452-3.752h18.386A5.127,5.127,0,0,1,126.3,167l.644,2.06A1.168,1.168,0,0,1,126.76,170.1Z" transform="translate(0)"/><path d="M373.127,482a6.327,6.327,0,1,0,0,12.655,1.216,1.216,0,1,0,0-2.432,3.9,3.9,0,1,1,3.9-3.9,1.216,1.216,0,0,0,2.432,0A6.339,6.339,0,0,0,373.127,482Z" transform="translate(-260.31 -308.545)"/></g></svg>
|
||||||
|
After Width: | Height: | Size: 1.3 KiB |
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24.21" height="24.319" viewBox="0 0 24.21 24.319"><defs><style>.a{fill:#7b7b7b;}</style></defs><path class="a" d="M83.819,66.311A2.188,2.188,0,0,1,86.008,68.5V82.13a2.188,2.188,0,0,1-2.188,2.188H70.188A2.188,2.188,0,0,1,68,82.13V68.5a2.188,2.188,0,0,1,2.188-2.188H83.819Zm-6.8,4a.813.813,0,0,0-.813.8v3.406H72.8a.813.813,0,0,0,.006,1.625h3.406v3.38a.813.813,0,0,0,1.625-.006V76.143h3.38a.813.813,0,0,0-.006-1.625H77.832V71.106a.813.813,0,0,0-.813-.794ZM89.206,60a3,3,0,0,1,3,2.954V73.018a3,3,0,0,1-2.954,3h-1.14A.814.814,0,0,1,88.1,74.4h1.11a1.377,1.377,0,0,0,1.377-1.354V63a1.377,1.377,0,0,0-1.354-1.377H79.192a1.377,1.377,0,0,0-1.377,1.354V64.29a.814.814,0,0,1-1.627.019V63a3,3,0,0,1,2.954-3H89.206Z" transform="translate(-68 -60)"/></svg>
|
||||||
|
After Width: | Height: | Size: 788 B |
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="21.414" height="12.121" viewBox="0 0 21.414 12.121"><defs><style>.a{fill:none;stroke:#f49f00;stroke-miterlimit:10;stroke-width:2px;}</style></defs><path class="a" d="M871.933,321.933l10,10-10,10" transform="translate(342.64 -871.226) rotate(90)"/></svg>
|
||||||
|
After Width: | Height: | Size: 300 B |
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30"><defs><style>.a,.b{fill:none;}.b{stroke:#000;stroke-width:2px;}</style></defs><g transform="translate(-373 -411)"><g transform="translate(373 411)"><rect class="a" width="30" height="30"/></g><path class="b" d="M378.216,431.015l5,5,5-5" transform="translate(5.096 -7.203)"/></g></svg>
|
||||||
|
After Width: | Height: | Size: 367 B |
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><defs><style>.a{fill:none;}.b{fill:#1c1717;}</style></defs><g transform="translate(-373 -411)"><rect class="a" width="48" height="48" transform="translate(373 411)"/><path class="b" d="M156.915,265.944v-1.657h6.629v1.657H176.8v3.315H163.544v1.657h-6.629v-1.657H153.6v-3.315Zm9.944-8.287V256h6.629v1.657H176.8v3.315h-3.315v1.657h-6.629v-1.657H153.6v-3.315Z" transform="translate(231.601 171.629)"/></g></svg>
|
||||||
|
After Width: | Height: | Size: 490 B |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 8.5 KiB |
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="154.197" height="26.408" viewBox="0 0 154.197 26.408"><defs><style>.a{fill:#fff;}.b{fill:#f49f00;}</style></defs><g transform="translate(3127.067 -1675.422)"><path class="a" d="M-3127.067,1680.121h2.115v17.1h11.68l-.349,1.886h-13.447Z" transform="translate(0 -3.588)"/><rect class="a" width="2.014" height="2.922" transform="translate(-3110.01 1675.422)"/><rect class="a" width="2.014" height="13.408" transform="translate(-3110.01 1682.108)"/><path class="a" d="M-3018.195,1714.083c0,5.11-1.531,8.142-7.019,8.142-5.06,0-6.148-2.95-6.41-4.555h2.067c.427,1.512,1.479,2.858,4.453,2.858,4.264,0,4.926-2.749,4.926-6.362v-.78c-.822,1.707-2.376,2.775-5.216,2.775-3.756,0-6.381-2.948-6.381-6.791,0-4.331,3.155-7.239,6.7-7.239,3.143,0,4.461,1.473,4.892,2.6,0-.7.031-1.836.08-2.223h1.93c-.027,1.292-.027,2.584-.027,3.877Zm-11.5-4.806a4.752,4.752,0,0,0,4.765,5.1c3,0,4.814-1.875,4.814-5.255,0-3.4-1.733-5.219-4.663-5.219C-3028.164,1703.9-3029.7,1706.653-3029.7,1709.277Z" transform="translate(-72.766 -20.395)"/><path class="a" d="M-2952.7,1675.422v9.31c.466-1.055,1.728-3,5.1-3,2.995,0,5.038,1.878,5.038,5.67v8.11h-2.022v-7.76c0-2.413-.915-4.249-3.586-4.249-3.079,0-4.53,2.5-4.53,5.377v6.632h-2.014v-20.094Z" transform="translate(-131.614)"/><path class="a" d="M-2893.207,1689.418h2.739V1685h2.018v4.423h3.611v1.666h-3.611v7.836c0,1.652.437,2.382,1.945,2.382a6.205,6.205,0,0,0,1.37-.125v1.547a5.37,5.37,0,0,1-1.9.231c-2.623,0-3.434-1.183-3.434-3.83v-8.04h-2.739Z" transform="translate(-178.578 -7.31)"/><path class="a" d="M-2844.413,1681.016h4.552v15.12h10.509l-.6,3.651h-14.463Z" transform="translate(-215.838 -4.272)"/><path class="a" d="M-2769.927,1676.477h4.355v3.479h-4.355Zm0,6.072h4.355v13.772h-4.355Z" transform="translate(-272.716 -0.806)"/><path class="a" d="M-2736.067,1704.517c0-1.194,0-2.363-.026-3.556h4.164c.077.536.1,1.131.124,1.629a4.914,4.914,0,0,1,4.193-2c2.434,0,3.612,1.066,4.155,2.256a5.222,5.222,0,0,1,4.637-2.256c2.884,0,5.154,1.721,5.154,5.826v8.319h-4.284v-8.215c0-1.2-.419-2.64-2.226-2.64-1.564,0-2.512.981-2.512,3.251v7.6H-2727V1706.5c0-1.36-.493-2.621-2.229-2.621-1.765,0-2.532,1.272-2.532,3.262v7.593h-4.308Z" transform="translate(-298.552 -19.217)"/><g transform="translate(-3005.732 1678.467)"><path class="b" d="M-2606.187,1691.912c.386.318.886.766,1.487,1.328l1.848,1.886,4.236-4.125-2.771-2.7s-.005,0-.009,0h-12.385a17.619,17.619,0,0,1,3.334,1.033A18.454,18.454,0,0,1-2606.187,1691.912Z" transform="translate(2613.781 -1688.303)"/><path class="b" d="M-2589.642,1699.35l-3.042-2.963.026-.026,3.058-3.122c.6-.562,1.1-1.01,1.487-1.328a18.449,18.449,0,0,1,4.26-2.575,17.63,17.63,0,0,1,3.334-1.033H-2592.9s-.009,0-.009,0l-11.345,11.047q-1.485,1.367-2.97,2.5a17.686,17.686,0,0,1-6.029,2.532s.963.974.963.974h10.46l4.86-4.763.024-.023.023.023,4.86,4.763h10.46s.967-.974.963-.974a17.69,17.69,0,0,1-6.029-2.532Q-2588.157,1700.722-2589.642,1699.35Z" transform="translate(2613.381 -1688.303)"/></g></g></svg>
|
||||||
|
After Width: | Height: | Size: 2.9 KiB |
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="34" height="32.818" viewBox="0 0 34 32.818"><defs><style>.a{fill:#2e2c2c;}</style></defs><path class="a" d="M33.567,34.168,18.1,18.258a1.509,1.509,0,0,0-1.091-.46h-.032a1.51,1.51,0,0,0-1.119.462L.443,34.17a1.852,1.852,0,0,0-.32,1.843,1.672,1.672,0,0,0,1.415,1.119H3.852v11.6a2.082,2.082,0,0,0,1.782,1.884h6.79c.873,0,1.414-.93,1.414-1.791V43.36H19.3v5.372a1.973,1.973,0,0,0,.609,1.259,1.931,1.931,0,0,0,1.251.625h6.686a1.344,1.344,0,0,0,1.135-.725,2.323,2.323,0,0,0,.336-1.158v-11.6h3.161a1.673,1.673,0,0,0,1.415-1.12,1.854,1.854,0,0,0-.322-1.844ZM26.2,35.508V47.5H22.41v-6a1.223,1.223,0,0,0-.328-.949,1.3,1.3,0,0,0-.926-.273H12.28a1.924,1.924,0,0,0-.956.2,1.116,1.116,0,0,0-.569,1.025v6H6.935V35.253a1.13,1.13,0,0,0-1.3-1.236H5.182l11.8-12.178,11.84,12.178h-.806A1.732,1.732,0,0,0,26.2,35.508Z" transform="translate(-0.006 -17.798)"/></svg>
|
||||||
|
After Width: | Height: | Size: 888 B |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 388 KiB |
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="34" height="34" viewBox="0 0 34 34"><defs><style>.a{fill:#333;}</style></defs><g transform="translate(-102.4 -102.4)"><path class="a" d="M127.9,130.557V102.4H108.244a5.844,5.844,0,0,0-5.844,5.844v22.313a5.844,5.844,0,0,0,5.844,5.844h13.813A5.844,5.844,0,0,0,127.9,130.557Zm-19.656-24.969h16.469v24.969a2.657,2.657,0,0,1-2.656,2.656H108.244a2.657,2.657,0,0,1-2.656-2.656V108.244A2.657,2.657,0,0,1,108.244,105.588Z" transform="translate(0 0)"/><path class="a" d="M716.8,102.4h2.125v2.125H716.8Z" transform="translate(-588.9 0)"/><path class="a" d="M258.712,115.6a1.594,1.594,0,0,1,.021,2.253l-6.4,6.524-.03.023-.145.132-.006.006.181-.159a1.587,1.587,0,0,1-.344.266l-.051.028a1.581,1.581,0,0,1-1.577-.051l-.076-.051a1.233,1.233,0,0,1-.113-.085l-.07-.064-2.871-2.716a1.594,1.594,0,1,1,2.189-2.317l1.732,1.641,5.306-5.406a1.594,1.594,0,0,1,2.253-.021ZM268.9,102.4a5.844,5.844,0,0,0-5.844,5.844v10.094H268.9a5.844,5.844,0,0,0,5.844-5.844v-4.25A5.844,5.844,0,0,0,268.9,102.4Zm0,3.188a2.657,2.657,0,0,1,2.656,2.656v4.25l-.013.272a2.656,2.656,0,0,1-2.644,2.384h-2.656v-6.906A2.657,2.657,0,0,1,268.9,105.588Z" transform="translate(-138.343 0)"/></g></svg>
|
||||||
|
After Width: | Height: | Size: 1.2 KiB |
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="34" height="33.301" viewBox="0 0 34 33.301"><g transform="translate(-131.586 -139.307)"><path d="M162.248,318.732H134.924a3.337,3.337,0,0,1-2.431-1.068,3.429,3.429,0,0,1-.9-2.6l1.592-19.678a3.384,3.384,0,0,1,3.327-3.118h24.139a3.384,3.384,0,0,1,3.327,3.118l1.592,19.668a3.429,3.429,0,0,1-.9,2.6,3.31,3.31,0,0,1-2.431,1.077Zm-25.731-23.605a.506.506,0,0,0-.477.486l-1.583,19.678a.593.593,0,0,0,.143.439.46.46,0,0,0,.334.153h27.314a.46.46,0,0,0,.334-.153.577.577,0,0,0,.143-.439l-1.592-19.668a.5.5,0,0,0-.477-.486H136.516Z" transform="translate(0 -146.124)"/><path d="M236.691,147.573h-2.86V144.2a2.233,2.233,0,0,0-2.383-2.031h-9.534a2.226,2.226,0,0,0-2.383,2.031v3.375h-2.86V144.2a5.083,5.083,0,0,1,5.244-4.891h9.534a5.083,5.083,0,0,1,5.244,4.891v3.375Zm-23.358,6.035h26.694v2.86H213.333Z" transform="translate(-78.094)"/><path d="M380.17,507.743a6.209,6.209,0,0,1-6.2-6.2h2.86a3.337,3.337,0,1,0,6.674,0h2.86a6.2,6.2,0,0,1-6.2,6.2Z" transform="translate(-231.555 -346.051)"/></g></svg>
|
||||||
|
After Width: | Height: | Size: 1.0 KiB |
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 750.26 389.25"><defs><style>.cls-1{fill:#f49f00;}</style></defs><title>资源 17</title><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><path class="cls-1" d="M173.39,82.39c8.82,7.27,20.23,17.49,33.94,30.33l42.19,43.06,96.71-94.17L283,0s-.12.07-.19,0H0A403,403,0,0,1,76.12,23.6C107.08,37.62,144.32,57.53,173.39,82.39Z"/><path class="cls-1" d="M542,252.22,472.5,184.58l.6-.59,69.83-71.27c13.71-12.84,25.12-23.06,33.94-30.33,29.07-24.86,66.3-44.77,97.27-58.79A403,403,0,0,1,750.26,0H467.49c-.07.07-.19,0-.19,0l-259,252.22q-33.9,31.21-67.81,57A403.66,403.66,0,0,1,2.83,367c-.09,0,22,22.25,22,22.25H263.63l111-108.73.54-.53.53.53,111,108.73H725.44s22.08-22.25,22-22.25a403.66,403.66,0,0,1-137.65-57.82Q575.88,283.53,542,252.22Z"/></g></g></svg>
|
||||||
|
After Width: | Height: | Size: 823 B |
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="154.197" height="26.408" viewBox="0 0 154.197 26.408"><defs><style>.a{fill:#fff;}.b{fill:#f49f00;}</style></defs><g transform="translate(3127.067 -1675.422)"><path class="a" d="M-3127.067,1680.121h2.115v17.1h11.68l-.349,1.886h-13.447Z" transform="translate(0 -3.588)"/><rect class="a" width="2.014" height="2.922" transform="translate(-3110.01 1675.422)"/><rect class="a" width="2.014" height="13.408" transform="translate(-3110.01 1682.108)"/><path class="a" d="M-3018.195,1714.083c0,5.11-1.531,8.142-7.019,8.142-5.06,0-6.148-2.95-6.41-4.555h2.067c.427,1.512,1.479,2.858,4.453,2.858,4.264,0,4.926-2.749,4.926-6.362v-.78c-.822,1.707-2.376,2.775-5.216,2.775-3.756,0-6.381-2.948-6.381-6.791,0-4.331,3.155-7.239,6.7-7.239,3.143,0,4.461,1.473,4.892,2.6,0-.7.031-1.836.08-2.223h1.93c-.027,1.292-.027,2.584-.027,3.877Zm-11.5-4.806a4.752,4.752,0,0,0,4.765,5.1c3,0,4.814-1.875,4.814-5.255,0-3.4-1.733-5.219-4.663-5.219C-3028.164,1703.9-3029.7,1706.653-3029.7,1709.277Z" transform="translate(-72.766 -20.395)"/><path class="a" d="M-2952.7,1675.422v9.31c.466-1.055,1.728-3,5.1-3,2.995,0,5.038,1.878,5.038,5.67v8.11h-2.022v-7.76c0-2.413-.915-4.249-3.586-4.249-3.079,0-4.53,2.5-4.53,5.377v6.632h-2.014v-20.094Z" transform="translate(-131.614)"/><path class="a" d="M-2893.207,1689.418h2.739V1685h2.018v4.423h3.611v1.666h-3.611v7.836c0,1.652.437,2.382,1.945,2.382a6.205,6.205,0,0,0,1.37-.125v1.547a5.37,5.37,0,0,1-1.9.231c-2.623,0-3.434-1.183-3.434-3.83v-8.04h-2.739Z" transform="translate(-178.578 -7.31)"/><path class="a" d="M-2844.413,1681.016h4.552v15.12h10.509l-.6,3.651h-14.463Z" transform="translate(-215.838 -4.272)"/><path class="a" d="M-2769.927,1676.477h4.355v3.479h-4.355Zm0,6.072h4.355v13.772h-4.355Z" transform="translate(-272.716 -0.806)"/><path class="a" d="M-2736.067,1704.517c0-1.194,0-2.363-.026-3.556h4.164c.077.536.1,1.131.124,1.629a4.914,4.914,0,0,1,4.193-2c2.434,0,3.612,1.066,4.155,2.256a5.222,5.222,0,0,1,4.637-2.256c2.884,0,5.154,1.721,5.154,5.826v8.319h-4.284v-8.215c0-1.2-.419-2.64-2.226-2.64-1.564,0-2.512.981-2.512,3.251v7.6H-2727V1706.5c0-1.36-.493-2.621-2.229-2.621-1.765,0-2.532,1.272-2.532,3.262v7.593h-4.308Z" transform="translate(-298.552 -19.217)"/><g transform="translate(-3005.732 1678.467)"><path class="b" d="M-2606.187,1691.912c.386.318.886.766,1.487,1.328l1.848,1.886,4.236-4.125-2.771-2.7s-.005,0-.009,0h-12.385a17.619,17.619,0,0,1,3.334,1.033A18.454,18.454,0,0,1-2606.187,1691.912Z" transform="translate(2613.781 -1688.303)"/><path class="b" d="M-2589.642,1699.35l-3.042-2.963.026-.026,3.058-3.122c.6-.562,1.1-1.01,1.487-1.328a18.449,18.449,0,0,1,4.26-2.575,17.63,17.63,0,0,1,3.334-1.033H-2592.9s-.009,0-.009,0l-11.345,11.047q-1.485,1.367-2.97,2.5a17.686,17.686,0,0,1-6.029,2.532s.963.974.963.974h10.46l4.86-4.763.024-.023.023.023,4.86,4.763h10.46s.967-.974.963-.974a17.69,17.69,0,0,1-6.029-2.532Q-2588.157,1700.722-2589.642,1699.35Z" transform="translate(2613.381 -1688.303)"/></g></g></svg>
|
||||||
|
After Width: | Height: | Size: 2.9 KiB |
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="34" height="29.055" viewBox="0 0 34 29.055"><defs><style>.a{fill:#929292;}</style></defs><path class="a" d="M186.756,235.667h30.7a1.648,1.648,0,0,0,0-3.3h-30.7a1.517,1.517,0,0,0-1.649,1.648A1.625,1.625,0,0,0,186.756,235.667Zm30.7,9.685h-30.7A1.517,1.517,0,0,0,185.107,247a1.625,1.625,0,0,0,1.649,1.648h30.7a1.648,1.648,0,0,0,0-3.3Zm0,12.776h-30.7a1.517,1.517,0,0,0-1.649,1.648,1.625,1.625,0,0,0,1.649,1.648h30.7a1.648,1.648,0,1,0,0-3.3Z" transform="translate(-185.107 -232.37)"/></svg>
|
||||||
|
After Width: | Height: | Size: 532 B |
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="331.023" height="243.18" viewBox="0 0 331.023 243.18"><defs><style>.a,.b,.c,.d,.e,.f{fill:none;stroke:#f49f00;stroke-miterlimit:10;}.a,.b,.c,.d,.e{stroke-width:0.75px;}.a{opacity:0.1;}.b{opacity:0.2;}.c{opacity:0.3;}.d{opacity:0.4;}.e{opacity:0.5;}.g{fill:#f49f00;}</style></defs><g transform="translate(0.91 0.375)"><path class="a" d="M-2110.917-3433.463l-122.114-121.215,122.114-121.215h-84.974l-79.627,79.04-79.627-79.04h-84.974l122.114,121.215-122.114,121.215h84.974l79.627-79.041,79.627,79.041Z" transform="translate(2440.12 3675.894)"/><path class="b" d="M-2123.787-3442.941l-103.644-102.881,103.644-102.882h-72.122l-67.583,67.086-67.583-67.086H-2403.2l103.644,102.882L-2403.2-3442.941h72.122l67.583-67.085,67.583,67.085Z" transform="translate(2428.094 3667.038)"/><path class="c" d="M-2136.658-3452.419l-85.174-84.546,85.174-84.548h-59.269l-55.539,55.131-55.539-55.131h-59.27l85.174,84.548-85.174,84.546h59.27l55.539-55.13,55.539,55.13Z" transform="translate(2416.068 3658.181)"/><path class="d" d="M-2149.528-3461.9l-66.7-66.213,66.7-66.213h-46.417l-43.5,43.175-43.5-43.175h-46.417l66.7,66.213-66.7,66.213h46.417l43.5-43.175,43.5,43.175Z" transform="translate(2404.042 3649.325)"/><path class="e" d="M-2162.4-3471.375l-48.234-47.878,48.234-47.879h-33.564l-31.452,31.22-31.452-31.22h-33.564l48.233,47.879-48.233,47.878h33.564l31.452-31.22,31.452,31.22Z" transform="translate(2392.016 3640.469)"/><path class="f" d="M-2175.27-3539.942h-20.711l-19.407,19.265-19.408-19.265h-20.711l29.764,29.544-29.764,29.544h20.711l19.408-19.264,19.407,19.264h20.711l-29.764-29.544Z" transform="translate(2379.99 3631.612)"/><g transform="translate(118.095 86.968)"><path class="g" d="M-2171.967-3478.422h-24.009l-69-68.5h24.009Z" transform="translate(2264.98 3546.917)"/><path class="g" d="M-2264.98-3478.422h24.009l69-68.5h-24.009Z" transform="translate(2264.98 3546.917)"/></g></g></svg>
|
||||||
|
After Width: | Height: | Size: 1.9 KiB |
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="34" height="35.976" viewBox="0 0 34 35.976"><defs><style>.a{fill:#2e2c2c;}</style></defs><g transform="translate(-85.334 -64.643)"><path class="a" d="M559.115,312.532l14.254,2.818a.857.857,0,0,1,.677.691l.014.149v21.5a.858.858,0,0,1-.7.844l-.154.014H559.1l.01-26.011Zm3.427,4.173-.007,18.408h8.1V318.3l-8.088-1.6Z" transform="translate(-454.726 -237.924)"/><path class="a" d="M107.793,65.288a.858.858,0,0,1,.026.213V99.8a.818.818,0,0,1-.818.816H86.191a.858.858,0,0,1-.858-.858V70.823a.858.858,0,0,1,.645-.83l20.77-5.322a.858.858,0,0,1,1.045.617Zm-3.4,3.528-15.625,4v24.37h15.625Z" transform="translate(0)"/><path class="a" d="M400.983,288.384h3.087v8.576h-3.43v-8.576Z" transform="translate(-302.631 -214.747)"/></g></svg>
|
||||||
|
After Width: | Height: | Size: 769 B |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 460 KiB |
|
|
@ -0,0 +1,202 @@
|
||||||
|
<template>
|
||||||
|
<section class="section-view" :style="isCssStyle" >
|
||||||
|
<div class="section-view-h5-wrap">
|
||||||
|
<h1 class="section-view-title wow fadeInUpBig">About Us</h1>
|
||||||
|
<div class="section-view-content">
|
||||||
|
<div class="section-view-circle wow fadeInUpBig" data-wow-delay=".5s">
|
||||||
|
<slot></slot>
|
||||||
|
</div>
|
||||||
|
<div class="section-view-article">
|
||||||
|
<h1 class="section-view-title wow fadeInUpBig" style="text-align: center">About Us</h1>
|
||||||
|
<p class="section-view-article-p wow fadeInUpBig" data-wow-delay=".3s" >LightLimX is an early-stage investment platform. We focus on markets where technology, innovation, and LightLimX can unlock long-term value and drive economic growth.</p>
|
||||||
|
<p class="section-view-article-w wow fadeInUpBig" data-wow-delay=".4s">"To create miracles and give insight into the future together with entrepreneurs" is the original aspiration of LightLimX. As an investment institution with strong curiosity and corporate responsibility, we catalyze technological advancement by connecting blue chip corporations with the brightest startups across the globe.</p>
|
||||||
|
<p class="section-view-article-w wow fadeInUpBig" data-wow-delay=".5s">In addition to making direct venture investments,LightLimX provides financing& insigths& operating expertise to promising the most compelling companies to flourish.To-date, LightLimX has provided advice and support for more than 20 companies, raised more than $15 million in seed and later-stage funding,valued at over $1 billion dollars.</p>
|
||||||
|
<div class="section-view-flower-wrap wow fadeInUpBig" data-wow-delay=".5s">
|
||||||
|
<svg-icon icon-class="flower"></svg-icon>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "AboutUs",
|
||||||
|
props:{
|
||||||
|
cssStyle:{
|
||||||
|
type:Object,
|
||||||
|
default:()=>{
|
||||||
|
return {}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed:{
|
||||||
|
isCssStyle(){
|
||||||
|
return this.cssStyle
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.section-view{
|
||||||
|
width: 100%;
|
||||||
|
min-height: 100vh;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background-color: #fff;
|
||||||
|
&-content{
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
&-flower-wrap{
|
||||||
|
margin-top: 0;
|
||||||
|
.svg-icon{
|
||||||
|
width: 1.76rem;
|
||||||
|
height: .21rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-title{
|
||||||
|
padding-top: 1.21rem;
|
||||||
|
margin-bottom: .74rem;
|
||||||
|
font-size: .6rem;
|
||||||
|
font-family: Manrope;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: .84rem;
|
||||||
|
color: #302D2C;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
&-flower-wrap{
|
||||||
|
margin-top: 1.28rem;
|
||||||
|
.svg-icon{
|
||||||
|
width: 1.76rem;
|
||||||
|
height: .21rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-article{
|
||||||
|
padding-top: .39rem;
|
||||||
|
padding-bottom: 1.55rem;
|
||||||
|
.section-view-title{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
&-w{
|
||||||
|
margin-top: .27rem;
|
||||||
|
width: 6.12rem;
|
||||||
|
font-size: .16rem;
|
||||||
|
font-family: Manrope;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: .32rem;
|
||||||
|
color: #302D2C;
|
||||||
|
}
|
||||||
|
&-p{
|
||||||
|
width: 5.79rem;
|
||||||
|
position: relative;
|
||||||
|
padding-left: .33rem;
|
||||||
|
font-size: .16rem;
|
||||||
|
font-family: Manrope;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: .32rem;
|
||||||
|
color: #302D2C;
|
||||||
|
&:before{
|
||||||
|
position: absolute;
|
||||||
|
content: '';
|
||||||
|
display: block;
|
||||||
|
width: .08rem;
|
||||||
|
height: .77rem;
|
||||||
|
background-color: #F49F00;
|
||||||
|
left: 0;
|
||||||
|
top: .1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-circle{
|
||||||
|
margin-right: 1.96rem;
|
||||||
|
>div{
|
||||||
|
transition: all 1s ease-in;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
max-width: 5.92rem;
|
||||||
|
max-height: 5.92rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 1250px) {
|
||||||
|
.section-view{
|
||||||
|
&-circle{
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
&-content{
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 830px) {
|
||||||
|
.section-view{
|
||||||
|
&-content{
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 768px){
|
||||||
|
.section-view{
|
||||||
|
margin-top: 0;
|
||||||
|
&-content{
|
||||||
|
flex-direction: column;
|
||||||
|
padding-top: 1rem;
|
||||||
|
padding-bottom: 1rem;
|
||||||
|
}
|
||||||
|
&-flower-wrap{
|
||||||
|
margin-top: .9rem;
|
||||||
|
.svg-icon{
|
||||||
|
width: 3.43rem;
|
||||||
|
height: .41rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-title{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
&-article{
|
||||||
|
padding: 0 .3rem ;
|
||||||
|
box-sizing: border-box;
|
||||||
|
.section-view-title{
|
||||||
|
display: block;
|
||||||
|
padding-top: 0;
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: .47rem;
|
||||||
|
font-size: .6rem;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height:.84rem;
|
||||||
|
}
|
||||||
|
&-w{
|
||||||
|
margin-top: .39rem;
|
||||||
|
width: 100%;
|
||||||
|
font-size: .24rem;
|
||||||
|
line-height: .34rem;
|
||||||
|
}
|
||||||
|
&-p{
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 100%;
|
||||||
|
padding-left: .25rem;
|
||||||
|
font-size: .24rem;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: .34rem;
|
||||||
|
&:before{
|
||||||
|
width: .08rem;
|
||||||
|
height: .9rem;
|
||||||
|
left: 0;
|
||||||
|
top: .05rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-circle{
|
||||||
|
margin: 0 .3rem;
|
||||||
|
>div{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,160 @@
|
||||||
|
<template>
|
||||||
|
<div class="axchange-banner">
|
||||||
|
<div class="banner-prev" @click="handleChange('prev')">
|
||||||
|
<van-icon name="arrow-left" class="banner-prev-icon" />
|
||||||
|
</div>
|
||||||
|
<div class="axchange-banner-container">
|
||||||
|
<van-swipe class="axchange-banner" ref="myVanSwipe" :autoplay="6000" :loop="true" >
|
||||||
|
<van-swipe-item v-for="(item, index) in images" :key="index+'_'" @click="handleLink(item.id)">
|
||||||
|
<img v-lazy="assetsUri(item.logo)" style="width: 100%;height: 100%" />
|
||||||
|
</van-swipe-item>
|
||||||
|
<template #indicator>
|
||||||
|
<div ></div>
|
||||||
|
</template>
|
||||||
|
</van-swipe>
|
||||||
|
</div>
|
||||||
|
<div class="banner-next" @click="handleChange('next')">
|
||||||
|
<van-icon name="arrow" class="banner-next-icon" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {assetsUri} from "../../utils";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'Banner',
|
||||||
|
data(){
|
||||||
|
return {
|
||||||
|
assetsUri
|
||||||
|
}
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
images: {
|
||||||
|
default: () => {
|
||||||
|
return []
|
||||||
|
},
|
||||||
|
type: Array
|
||||||
|
}
|
||||||
|
},
|
||||||
|
beforeDestroy(){
|
||||||
|
window.removeEventListener('resize',this.handleResize)
|
||||||
|
},
|
||||||
|
mounted(){
|
||||||
|
window.addEventListener('resize',this.handleResize)
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleResize(){
|
||||||
|
this.$refs.myVanSwipe.resize();
|
||||||
|
},
|
||||||
|
handleChange(method){
|
||||||
|
this.$nextTick(()=>{
|
||||||
|
if(method==='next'){
|
||||||
|
this.$refs.myVanSwipe.next()
|
||||||
|
}else{
|
||||||
|
this.$refs.myVanSwipe.prev()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleLink (id) {
|
||||||
|
return
|
||||||
|
// this.$router.push({ path: 'detail', query: { type: 'banner', id } })
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.axchange-banner{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.banner-prev,.banner-next{
|
||||||
|
cursor: pointer;
|
||||||
|
flex-shrink: 0;
|
||||||
|
width: .9rem;
|
||||||
|
height: .9rem;
|
||||||
|
background-color: #342927;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
&:hover{
|
||||||
|
background-color: #F49F00;
|
||||||
|
.banner-next-icon{
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
.banner-prev-icon{
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-icon{
|
||||||
|
font-size: .4rem;
|
||||||
|
color: #9B9B9B ;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.banner-prev{
|
||||||
|
margin-right: .74rem;
|
||||||
|
} .banner-next{
|
||||||
|
margin-left: .74rem;
|
||||||
|
}
|
||||||
|
.axchange-banner{
|
||||||
|
justify-content: center;
|
||||||
|
width: 100%;
|
||||||
|
position: relative;
|
||||||
|
height: 100%;
|
||||||
|
.van-swipe-item{
|
||||||
|
width: 100% !important;
|
||||||
|
}
|
||||||
|
.van-icon-volume-o:before{
|
||||||
|
color: #0f4493;
|
||||||
|
}
|
||||||
|
.axchange-banner-container{
|
||||||
|
max-width: 9.72rem;
|
||||||
|
max-height: 6.28rem;
|
||||||
|
flex: 1;
|
||||||
|
height: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 1280px) {
|
||||||
|
.axchange-banner{
|
||||||
|
.axchange-banner-container{
|
||||||
|
max-width: 8rem;
|
||||||
|
}
|
||||||
|
.banner-prev,.banner-next{
|
||||||
|
width: .7rem;
|
||||||
|
height: .7rem;
|
||||||
|
&-icon{
|
||||||
|
font-size: .3rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.banner-prev{
|
||||||
|
margin-right: .35rem;
|
||||||
|
}
|
||||||
|
.banner-next{
|
||||||
|
margin-left: .35rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
.axchange-banner{
|
||||||
|
.axchange-banner-container{
|
||||||
|
max-width: 5.20rem;
|
||||||
|
max-height: 3.35rem;
|
||||||
|
}
|
||||||
|
.banner-prev,.banner-next{
|
||||||
|
width: .5rem;
|
||||||
|
height: .5rem;
|
||||||
|
&-icon{
|
||||||
|
font-size: .4rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.banner-prev{
|
||||||
|
margin-right: .35rem;
|
||||||
|
}
|
||||||
|
.banner-next{
|
||||||
|
margin-left: .35rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,173 @@
|
||||||
|
<template>
|
||||||
|
<div class="email-footer">
|
||||||
|
<h1 class="situation-h1">info@lightlimx.com</h1>
|
||||||
|
<span class="situation-tips">Email us to connect</span>
|
||||||
|
<ul class="situation-ul">
|
||||||
|
<li class="situation-li wow fadeInUp" data-wow-delay=".5s" @click="handleLink('https://t.me/lightlimx')">
|
||||||
|
<div class="situation-li-d">
|
||||||
|
<img class="situation-li-img" v-lazy="assetsUri('images/tw.png')" alt="">
|
||||||
|
<span class="situation-li-s">Twitter</span>
|
||||||
|
</div>
|
||||||
|
<p class="situation-li-p">Follow our latest news on Twitter</p>
|
||||||
|
</li> <li class="situation-li wow fadeInUp" data-wow-delay=".5s" @click="handleLink('https://twitter.com/LimXCapital')">
|
||||||
|
<div class="situation-li-d">
|
||||||
|
<img class="situation-li-img" v-lazy="assetsUri('images/te.png')" alt="">
|
||||||
|
<span class="situation-li-s">Telegram</span>
|
||||||
|
</div>
|
||||||
|
<p class="situation-li-p">Subscribe to our Telegram Channel</p>
|
||||||
|
</li> <li class="situation-li wow fadeInUp" data-wow-delay=".5s" @click="handleLink('https://medium.com/@lightlimx')">
|
||||||
|
<div class="situation-li-d">
|
||||||
|
<img class="situation-li-img" v-lazy="assetsUri('images/me.png')" alt="">
|
||||||
|
<span class="situation-li-s">Medium</span>
|
||||||
|
</div>
|
||||||
|
<p class="situation-li-p">Browse our content on Medium</p>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {
|
||||||
|
assetsUri
|
||||||
|
} from "../../utils";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "EmailFooter",
|
||||||
|
data(){
|
||||||
|
return {
|
||||||
|
assetsUri
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
handleLink(link){
|
||||||
|
if(!link){
|
||||||
|
return
|
||||||
|
}
|
||||||
|
window.location.href=link
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.situation{
|
||||||
|
&-h1,&-tips{
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
&-h1{
|
||||||
|
margin-top: 1.28rem;
|
||||||
|
font-size: .68rem;
|
||||||
|
font-family: Manrope;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #302D2C;
|
||||||
|
cursor: pointer;
|
||||||
|
&:hover{
|
||||||
|
/*text-shadow: 0 0 .05rem #FF0000, 0 0 .05rem #6bf403;*/
|
||||||
|
text-stroke:1px #F49F00;
|
||||||
|
-webkit-text-stroke:1px #F49F00;
|
||||||
|
color: #Fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-ul{
|
||||||
|
margin-top: 1rem;
|
||||||
|
padding-bottom: 1.48rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-around;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
&-li{
|
||||||
|
margin-bottom: .3rem;
|
||||||
|
cursor: pointer;
|
||||||
|
width: 3.46rem;
|
||||||
|
height: 1.86rem;
|
||||||
|
background: #FFFFFF;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
padding-left: .56rem;
|
||||||
|
box-sizing: border-box;
|
||||||
|
transition: all .3s ease-in;
|
||||||
|
&-d{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
&-img{
|
||||||
|
display: block;
|
||||||
|
width: .36rem;
|
||||||
|
height: .36rem;
|
||||||
|
margin-right: .12rem;
|
||||||
|
}
|
||||||
|
&-s{
|
||||||
|
font-size: .18rem;
|
||||||
|
font-family: Manrope;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #302D2C;
|
||||||
|
}
|
||||||
|
&-p{
|
||||||
|
margin-top: .1rem;
|
||||||
|
font-size: .16rem;
|
||||||
|
font-family: Manrope;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #302D2C;
|
||||||
|
}
|
||||||
|
&:hover{
|
||||||
|
box-shadow: 0 .03rem .2rem rgba(0, 0, 0, 0.06);
|
||||||
|
border-radius:.1rem;
|
||||||
|
transform: scale(1.01);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-tips{
|
||||||
|
display: block;
|
||||||
|
margin-top: .35rem;
|
||||||
|
font-size: .24rem;
|
||||||
|
font-family: Manrope;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: .48rem;
|
||||||
|
color: #302D2C;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
.situation{
|
||||||
|
&-h1{
|
||||||
|
margin-top: 1.49rem;
|
||||||
|
font-size: .6rem;
|
||||||
|
line-height: .62rem;
|
||||||
|
}
|
||||||
|
&-ul{
|
||||||
|
margin-top: .49rem;
|
||||||
|
padding-bottom: 1.01rem;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
&-li{
|
||||||
|
margin-bottom: .3rem;
|
||||||
|
width: 6.90rem;
|
||||||
|
height: 2.60rem;
|
||||||
|
padding-left: .6rem;
|
||||||
|
&-img{
|
||||||
|
width: .86rem;
|
||||||
|
height: .86rem;
|
||||||
|
margin-right: .29rem;
|
||||||
|
}
|
||||||
|
&-s{
|
||||||
|
font-size: .43rem;
|
||||||
|
}
|
||||||
|
&-p{
|
||||||
|
margin-top: .21rem;
|
||||||
|
font-size: .3rem;
|
||||||
|
}
|
||||||
|
&:hover{
|
||||||
|
box-shadow: 0 .03rem .2rem rgba(0, 0, 0, 0.06);
|
||||||
|
border-radius:.1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-tips{
|
||||||
|
margin-top: .2rem;
|
||||||
|
font-size: .3rem;
|
||||||
|
line-height: .48rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,231 @@
|
||||||
|
<template>
|
||||||
|
<div class="filter-input-wrap">
|
||||||
|
<van-field class="filter-input" readonly label-width="auto" placeholder="Filter" v-model="text" >
|
||||||
|
<template #label>
|
||||||
|
<div class="filter-input-label">
|
||||||
|
<svg-icon icon-class="filter"></svg-icon>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template #extra>
|
||||||
|
<div class="filter-input-extra" >
|
||||||
|
<div class="filter-input-icon-wrap" @click="handleOptionsShow">
|
||||||
|
<svg-icon icon-class="filter-ar" :class="{active:blockShow}"></svg-icon>
|
||||||
|
</div>
|
||||||
|
<span @click="handleOptionsShow">{{activeText}}</span>
|
||||||
|
<ul class="filter-options" :style="{'display':!blockShow?'none':'block'}" >
|
||||||
|
<li class="filter-options-item" @click="handleItemClick(item)" :class="{'active':active===item.id}" v-for="(item,index) in locations" :key="'local_'+index">{{item.name}}</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</van-field>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "FilterInput",
|
||||||
|
props:{
|
||||||
|
locations:{
|
||||||
|
default:()=>[],
|
||||||
|
type:Array
|
||||||
|
},
|
||||||
|
active:{
|
||||||
|
default:'',
|
||||||
|
type:String
|
||||||
|
},
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
handleOptionsShow(){
|
||||||
|
this.blockShow=!this.blockShow
|
||||||
|
},
|
||||||
|
handleItemClick(item){
|
||||||
|
this.blockShow=false
|
||||||
|
this.$emit('select',item)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed:{
|
||||||
|
activeText(){
|
||||||
|
if(!this.locations){
|
||||||
|
return 'Locations'
|
||||||
|
}
|
||||||
|
const location= this.locations.find((item)=>{
|
||||||
|
return item.id===this.active
|
||||||
|
})
|
||||||
|
return location?location.name:'Locations'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data(){
|
||||||
|
return {
|
||||||
|
blockShow:false,
|
||||||
|
text:''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.filter-options{
|
||||||
|
min-width: 100%;
|
||||||
|
position: absolute;
|
||||||
|
min-height: 1.6rem;
|
||||||
|
background: #FFFFFF;
|
||||||
|
padding-left: .24rem;
|
||||||
|
box-shadow: 0 .03rem .06rem rgba(0, 0, 0, 0.16);
|
||||||
|
bottom: 0;
|
||||||
|
transform: translateY(100%);
|
||||||
|
box-sizing: content-box;
|
||||||
|
left: -.2rem;
|
||||||
|
transition: all .3s ease-in;
|
||||||
|
z-index: 1;
|
||||||
|
&-item{
|
||||||
|
width: 100%;
|
||||||
|
font-family: Manrope;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: .4rem;
|
||||||
|
color: #302D2C;
|
||||||
|
box-sizing: content-box;
|
||||||
|
padding-left: .24rem;
|
||||||
|
min-height: .4rem;
|
||||||
|
font-size: .16rem;
|
||||||
|
margin-left: -.24rem;
|
||||||
|
background-color: #fff;
|
||||||
|
cursor: pointer;
|
||||||
|
&.active{
|
||||||
|
background-color: #F49F00;
|
||||||
|
color: #Fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.filter-input{
|
||||||
|
height: .6rem;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: .06rem 0 .06rem .14rem;
|
||||||
|
overflow: initial;
|
||||||
|
|
||||||
|
&-wrap{
|
||||||
|
margin-top: -.3rem;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
width: 100%;
|
||||||
|
height: .6rem;
|
||||||
|
background: #FFFFFF;
|
||||||
|
box-shadow: 0 .03rem .06rem rgba(0, 0, 0, 0.16);
|
||||||
|
}
|
||||||
|
&-extra{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
position: relative;
|
||||||
|
padding-right: .14rem;
|
||||||
|
box-sizing: border-box;
|
||||||
|
min-width: 1.53rem;
|
||||||
|
>span{
|
||||||
|
cursor: pointer;
|
||||||
|
user-select: unset;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-label{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
.svg-icon{
|
||||||
|
width: .48rem;
|
||||||
|
height: .48rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-icon-wrap{
|
||||||
|
cursor: pointer;
|
||||||
|
margin-right: .17rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
.svg-icon{
|
||||||
|
transition: all .3s ease-in;
|
||||||
|
width: .3rem;
|
||||||
|
height: .3rem;
|
||||||
|
&.active{
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
.filter-options{
|
||||||
|
min-height: 3.2rem;
|
||||||
|
padding-left: 0;
|
||||||
|
left: 50%;
|
||||||
|
min-width: 2rem;
|
||||||
|
transform: translateX(-50%) translateY(100%);
|
||||||
|
box-sizing: border-box;
|
||||||
|
&-item{
|
||||||
|
line-height: .8rem;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding-left: .5rem;
|
||||||
|
margin-left: 0;
|
||||||
|
min-height: .8rem;
|
||||||
|
font-size: .26rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.filter-input{
|
||||||
|
height: 100%;
|
||||||
|
min-height: .8rem;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
&-extra{
|
||||||
|
min-width: 2.46rem;
|
||||||
|
padding-right: .32rem;
|
||||||
|
}
|
||||||
|
&-wrap{
|
||||||
|
margin-top: -.4rem;
|
||||||
|
margin-left: .15rem;
|
||||||
|
margin-right: .15rem;
|
||||||
|
box-sizing: border-box;
|
||||||
|
height: .8rem;
|
||||||
|
width: auto;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
&-label{
|
||||||
|
.svg-icon{
|
||||||
|
width: .8rem;
|
||||||
|
height: .8rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-icon-wrap{
|
||||||
|
margin-right: 0;
|
||||||
|
.svg-icon{
|
||||||
|
width: .8rem;
|
||||||
|
height: .8rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<style lang="less">
|
||||||
|
.filter-input{
|
||||||
|
.van-field__body{
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.van-field__control{
|
||||||
|
font-size: .18rem;
|
||||||
|
font-family: Manrope;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #302D2C;
|
||||||
|
&::placeholder{
|
||||||
|
font-size: .16rem;
|
||||||
|
font-family: Manrope;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #302D2C;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
.filter-input{
|
||||||
|
.van-field__control{
|
||||||
|
font-size: .26rem;
|
||||||
|
&::placeholder{
|
||||||
|
font-size: .26rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,264 @@
|
||||||
|
#home-circles,.spin-circle-container{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
#home-hero {
|
||||||
|
overflow-x: hidden;
|
||||||
|
overflow-y: hidden;
|
||||||
|
min-height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: relative;
|
||||||
|
padding-top: 0;
|
||||||
|
// background-color: #010101;
|
||||||
|
color: #fff;
|
||||||
|
// background-image: url("../images/home-hero-mobile.jpg");
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center bottom;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
// min-height: 1000px;
|
||||||
|
}
|
||||||
|
#home-hero .primary {
|
||||||
|
font-size: 1.125rem;
|
||||||
|
line-height: 1.8125rem;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 0.06em;
|
||||||
|
}
|
||||||
|
#home-hero .hero-circle-text {
|
||||||
|
text-align: center;
|
||||||
|
z-index: 1;
|
||||||
|
// padding: 4rem 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#home-hero .hero-circle-text p {
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
margin-bottom: 0;
|
||||||
|
font-size: 0.2rem;
|
||||||
|
font-family: Manrope;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #FFFFFF;
|
||||||
|
opacity: 1;
|
||||||
|
line-height: 0.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 991px) {
|
||||||
|
#home-content {
|
||||||
|
// padding-top: 8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-circle-text-container {
|
||||||
|
// padding-top: 18rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#home-hero .hero-circle-text{
|
||||||
|
bottom: 0.5rem !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.home-hero-mobile {
|
||||||
|
padding: 0 1rem;
|
||||||
|
}
|
||||||
|
.home-hero-mobile img {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.heading {
|
||||||
|
max-width: 490px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.primary,
|
||||||
|
.secondary {
|
||||||
|
max-width: 500px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
#home-hero .container {
|
||||||
|
max-width: 80%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
@media (min-width: 992px) {
|
||||||
|
#home-hero {
|
||||||
|
//overflow: hidden;
|
||||||
|
// background-image: url("../images/home-hero.jpg");
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center bottom;
|
||||||
|
}
|
||||||
|
#home-hero .heading {
|
||||||
|
max-width: 560px;
|
||||||
|
}
|
||||||
|
#home-hero .primary {
|
||||||
|
max-width: 540px;
|
||||||
|
}
|
||||||
|
#home-hero .secondary {
|
||||||
|
max-width: 500px;
|
||||||
|
}
|
||||||
|
#home-hero .hero-circle-text {
|
||||||
|
background: none;
|
||||||
|
position: absolute;
|
||||||
|
// max-width: 520px;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0.7rem ;
|
||||||
|
margin: 0 auto;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
#home-hero .hero-circle-text p {
|
||||||
|
max-width: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* Spin Circle Containers */
|
||||||
|
.spin-circle-container {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-grow: 1;
|
||||||
|
text-align: center;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spin-outer-container,
|
||||||
|
.spin-inner-container {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
#spinOuterCircle,
|
||||||
|
#spinInnerCircle {
|
||||||
|
margin: 10px auto;
|
||||||
|
border: 2px solid #F49F00;
|
||||||
|
position: relative;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inner-item,
|
||||||
|
.outer-item {
|
||||||
|
text-align: center;
|
||||||
|
border-radius: 50%;
|
||||||
|
position: absolute;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.inner-item img,
|
||||||
|
.outer-item img {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
border-radius: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#spinOuterCircle {
|
||||||
|
width: 600px;
|
||||||
|
height: 600px;
|
||||||
|
}
|
||||||
|
#spinInnerCircle {
|
||||||
|
width: 600px;
|
||||||
|
height: 600px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.outer-item,
|
||||||
|
.inner-item {
|
||||||
|
width: 42px;
|
||||||
|
height: 42px;
|
||||||
|
line-height: 42px;
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 768px){
|
||||||
|
#home-hero .hero-circle-text{
|
||||||
|
bottom: 0.65rem !important
|
||||||
|
}
|
||||||
|
#home-hero{
|
||||||
|
min-height: 530px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.outer-item {
|
||||||
|
width: 68px;
|
||||||
|
height: 68px;
|
||||||
|
line-height: 68px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inner-item {
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
line-height: 48px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 992px) {
|
||||||
|
.outer-item {
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
line-height: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inner-item {
|
||||||
|
width: 51px;
|
||||||
|
height: 51px;
|
||||||
|
line-height: 51px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 1024px) {
|
||||||
|
.outer-item {
|
||||||
|
width: 80px;
|
||||||
|
height: 80px;
|
||||||
|
line-height: 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inner-item {
|
||||||
|
width: 68px;
|
||||||
|
height: 68px;
|
||||||
|
line-height: 68px;
|
||||||
|
}
|
||||||
|
#home-hero .hero-circle-text{
|
||||||
|
// bottom: 5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 1399px) {
|
||||||
|
.outer-item {
|
||||||
|
width: 109px;
|
||||||
|
height: 109px;
|
||||||
|
line-height: 109px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inner-item {
|
||||||
|
width: 93px;
|
||||||
|
height: 93px;
|
||||||
|
line-height: 93px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#home-hero .hero-circle-text {
|
||||||
|
background: none;
|
||||||
|
position: absolute;
|
||||||
|
// max-width: 520px;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
margin: 0 auto;
|
||||||
|
z-index: 1;
|
||||||
|
text-align: center;
|
||||||
|
// bottom: 2.8rem;
|
||||||
|
}
|
||||||
|
#home-hero .hero-circle-text p {
|
||||||
|
max-width: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1500px) {
|
||||||
|
#home-hero {
|
||||||
|
// min-height: 790px;
|
||||||
|
}
|
||||||
|
#home-hero .container {
|
||||||
|
width: 90%;
|
||||||
|
max-width: 1500px;
|
||||||
|
}
|
||||||
|
#home-hero .hero-circle-text{
|
||||||
|
bottom: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,331 @@
|
||||||
|
<template>
|
||||||
|
<section class="focus-areas-view" :style="isCssStyle">
|
||||||
|
<div class="focus-areas-view-wrap">
|
||||||
|
<h1 class="focus-areas-view-h1 wow fadeInUpBig">Focus Areas</h1>
|
||||||
|
<h6 class="focus-areas-view-h6 wow fadeInUp" data-wow-delay=".3s">The future is crafted by people who understand where things are heading.</h6>
|
||||||
|
<p class="focus-areas-view-p wow fadeIn" data-wow-delay=".5s">The next innovation is already here.We believe that decentralization has the power to transform the global economy and create the largest one time shift in wealth.</p>
|
||||||
|
<div class="focus-areas-view-wheel">
|
||||||
|
<div id="home-hero" class="hero">
|
||||||
|
<div id="home-circles" class="container flex-grow-1 d-flex">
|
||||||
|
<div class="spin-circle-container">
|
||||||
|
<div class="spin-outer-container">
|
||||||
|
<div id="spinOuterCircle">
|
||||||
|
<div class="outer-item">
|
||||||
|
<img v-lazy="assetsUri('images/FocusAreas/5.png')">
|
||||||
|
</div>
|
||||||
|
<div class="outer-item">
|
||||||
|
<img v-lazy="assetsUri('images/FocusAreas/2.png')">
|
||||||
|
</div>
|
||||||
|
<div class="outer-item">
|
||||||
|
<img v-lazy="assetsUri('images/FocusAreas/3.png')">
|
||||||
|
</div>
|
||||||
|
<div class="outer-item">
|
||||||
|
<img v-lazy="assetsUri('images/FocusAreas/4.png')">
|
||||||
|
</div>
|
||||||
|
<div class="outer-item">
|
||||||
|
<img v-lazy="assetsUri('images/FocusAreas/5.png')">
|
||||||
|
</div>
|
||||||
|
<div class="outer-item">
|
||||||
|
<img v-lazy="assetsUri('images/FocusAreas/6.png')">
|
||||||
|
</div>
|
||||||
|
<div class="outer-item">
|
||||||
|
<img v-lazy="assetsUri('images/FocusAreas/1.png')">
|
||||||
|
</div>
|
||||||
|
<div class="outer-item">
|
||||||
|
<img v-lazy="assetsUri('images/FocusAreas/2.png')">
|
||||||
|
</div>
|
||||||
|
<div class="outer-item">
|
||||||
|
<img v-lazy="assetsUri('images/FocusAreas/4.png')">
|
||||||
|
</div>
|
||||||
|
<div class="outer-item">
|
||||||
|
<img v-lazy="assetsUri('images/FocusAreas/6.png')">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="spin-inner-container">
|
||||||
|
<div id="spinInnerCircle">
|
||||||
|
<div class="inner-item">
|
||||||
|
<img v-lazy="assetsUri('images/FocusAreas/7.png')">
|
||||||
|
</div>
|
||||||
|
<div class="inner-item">
|
||||||
|
<img v-lazy="assetsUri('images/FocusAreas/8.png')">
|
||||||
|
</div>
|
||||||
|
<div class="inner-item">
|
||||||
|
<img v-lazy="assetsUri('images/FocusAreas/9.png')">
|
||||||
|
</div>
|
||||||
|
<div class="inner-item">
|
||||||
|
<img v-lazy="assetsUri('images/FocusAreas/10.png')">
|
||||||
|
</div>
|
||||||
|
<div class="inner-item">
|
||||||
|
<img v-lazy="assetsUri('images/FocusAreas/8.png')">
|
||||||
|
</div>
|
||||||
|
<div class="inner-item">
|
||||||
|
<img v-lazy="assetsUri('images/FocusAreas/9.png')">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="hero-circle-text-container">
|
||||||
|
<div class="hero-circle-text">
|
||||||
|
<div id="hero-text-1">
|
||||||
|
<p class="wow fadeInUp" data-wow-delay=".3s">We focused exclusively on disruptive innovations related</p>
|
||||||
|
<p class="wow fadeInUp" data-wow-delay=".3s">to the Public chain ecosystem, Web3, NFT, GameFi, Layer2,</p>
|
||||||
|
<p class="wow fadeInUp" data-wow-delay=".3s">DeFi , Metaverse and other fields.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import { assetsUri } from "../../utils";
|
||||||
|
import gsap from 'gsap'
|
||||||
|
import ScrollTrigger from './ScrollTrigger.js'
|
||||||
|
import Jquery from 'jquery'
|
||||||
|
gsap.registerPlugin(ScrollTrigger)
|
||||||
|
export default {
|
||||||
|
name: "FocusAreas",
|
||||||
|
props:{
|
||||||
|
cssStyle:{
|
||||||
|
type:Object,
|
||||||
|
default:()=>{
|
||||||
|
return {}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
assetsUri,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted () {
|
||||||
|
const _this = this// 赋值vue的this
|
||||||
|
Jquery(window).on('resize', function () {
|
||||||
|
_this.setCircleSizes()
|
||||||
|
ScrollTrigger.refresh()
|
||||||
|
|
||||||
|
if (window.innerWidth < 992) {
|
||||||
|
Jquery('.remove-for-mobile').remove()
|
||||||
|
}
|
||||||
|
}).resize()
|
||||||
|
|
||||||
|
/* Register ScrollTrigger */
|
||||||
|
|
||||||
|
/* Circle Timeline - Always & First for Speed Controls on Desktop */
|
||||||
|
const circleTimeline = gsap.timeline({
|
||||||
|
repeat: -1
|
||||||
|
})
|
||||||
|
|
||||||
|
circleTimeline
|
||||||
|
.to('#spinInnerCircle', {
|
||||||
|
duration: 120,
|
||||||
|
rotation: 360,
|
||||||
|
ease: 'none'
|
||||||
|
})
|
||||||
|
.to('#spinOuterCircle', {
|
||||||
|
duration: 120,
|
||||||
|
rotation: -360,
|
||||||
|
ease: 'none'
|
||||||
|
}, 0)
|
||||||
|
.to('.inner-item', {
|
||||||
|
duration: 120,
|
||||||
|
rotation: -360,
|
||||||
|
ease: 'none'
|
||||||
|
}, 0)
|
||||||
|
.to('.outer-item', {
|
||||||
|
duration: 120,
|
||||||
|
rotation: 360,
|
||||||
|
ease: 'none'
|
||||||
|
}, 0)
|
||||||
|
|
||||||
|
ScrollTrigger.matchMedia({
|
||||||
|
// DESKTOP
|
||||||
|
'(min-width: 992px)': function () {
|
||||||
|
/* Testimonials */
|
||||||
|
|
||||||
|
ScrollTrigger.create({
|
||||||
|
trigger: '#home-testimonials',
|
||||||
|
markers: false,
|
||||||
|
toggleClass: 'active',
|
||||||
|
pin: '#home-testimonials .content',
|
||||||
|
scrub: true,
|
||||||
|
invalidateOnRefresh: true
|
||||||
|
})
|
||||||
|
|
||||||
|
/* Posts */
|
||||||
|
gsap.defaults({ ease: 'power3' })
|
||||||
|
gsap.set('.post-item', { y: 100 })
|
||||||
|
|
||||||
|
ScrollTrigger.batch('.post-item', {
|
||||||
|
onEnter: batch => gsap.to(batch, { opacity: 1, y: 0, stagger: { each: 0.15, grid: [1, 3] }, overwrite: true }),
|
||||||
|
onLeave: batch => gsap.set(batch, { opacity: 0, y: -100, overwrite: true }),
|
||||||
|
onEnterBack: batch => gsap.to(batch, { opacity: 1, y: 0, stagger: 0.15, overwrite: true }),
|
||||||
|
onLeaveBack: batch => gsap.set(batch, { opacity: 0, y: 100, overwrite: true }),
|
||||||
|
markers: false,
|
||||||
|
end: 'bottom+=100px',
|
||||||
|
invalidateOnRefresh: true
|
||||||
|
})
|
||||||
|
|
||||||
|
},
|
||||||
|
// TABLET OR PHONE
|
||||||
|
'(min-width: 400px) and (max-width: 991px)': function () {
|
||||||
|
/* Testimonials */
|
||||||
|
gsap.set('.testimonials-container', { y: 0 })
|
||||||
|
|
||||||
|
ScrollTrigger.create({
|
||||||
|
trigger: '#home-testimonials .content',
|
||||||
|
markers: false,
|
||||||
|
pin: true,
|
||||||
|
anticipatePin: true,
|
||||||
|
start: 'top-=120',
|
||||||
|
invalidateOnRefresh: true
|
||||||
|
})
|
||||||
|
|
||||||
|
gsap.set('.testimonial-item', { y: 200 })
|
||||||
|
|
||||||
|
ScrollTrigger.batch('.testimonial-item', {
|
||||||
|
onEnter: batch => gsap.to(batch, { y: 0, overwrite: true }),
|
||||||
|
onLeave: batch => gsap.set(batch, { y: 200, overwrite: true }),
|
||||||
|
onEnterBack: batch => gsap.to(batch, { y: 0, overwrite: true }),
|
||||||
|
onLeaveBack: batch => gsap.set(batch, { y: 200, overwrite: true }),
|
||||||
|
invalidateOnRefresh: true
|
||||||
|
})
|
||||||
|
|
||||||
|
/* Posts */
|
||||||
|
gsap.defaults({ ease: 'power3' })
|
||||||
|
gsap.set('.post-item', { y: 50, opacity: 0 })
|
||||||
|
|
||||||
|
ScrollTrigger.batch('.post-item', {
|
||||||
|
onEnter: batch => gsap.to(batch, { opacity: 1, y: 0, stagger: { each: 0.15, grid: [1, 3] }, overwrite: true }),
|
||||||
|
invalidateOnRefresh: true
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
setCircleSizes () {
|
||||||
|
const containerWidth = Jquery('.spin-circle-container').width()
|
||||||
|
const innerCircleSize = containerWidth * 0.75
|
||||||
|
const outerCircleOverflow = containerWidth * 0.1
|
||||||
|
const innerCircleOverflow = Math.round((containerWidth - innerCircleSize) * 0.9)
|
||||||
|
const circleSize = containerWidth * 0.05
|
||||||
|
|
||||||
|
Jquery('#spinOuterCircle').css({ width: containerWidth, height: containerWidth })
|
||||||
|
Jquery('.spin-outer-container').css({ top: outerCircleOverflow })
|
||||||
|
|
||||||
|
Jquery('#spinInnerCircle').css({ width: innerCircleSize, height: innerCircleSize })
|
||||||
|
Jquery('.spin-inner-container').css({ top: innerCircleOverflow })
|
||||||
|
|
||||||
|
this.setupSpinContainer('#spinOuterCircle', '.outer-item', containerWidth / 2)
|
||||||
|
this.setupSpinContainer('#spinInnerCircle', '.inner-item', innerCircleSize / 2)
|
||||||
|
},
|
||||||
|
setupSpinContainer (spinContainer, spinContainerItem, spinRadius) {
|
||||||
|
const radius = spinRadius
|
||||||
|
const fields = Jquery(spinContainerItem)
|
||||||
|
const container = Jquery(spinContainer)
|
||||||
|
const width = container.width()
|
||||||
|
const height = container.height()
|
||||||
|
let angle = 0
|
||||||
|
const step = (2 * Math.PI) / fields.length
|
||||||
|
|
||||||
|
fields.each(function () {
|
||||||
|
const x = Math.round(width / 2 + radius * Math.cos(angle) - Jquery(this).width() / 2)
|
||||||
|
const y = Math.round(height / 2 + radius * Math.sin(angle) - Jquery(this).height() / 2)
|
||||||
|
|
||||||
|
Jquery(this).css({
|
||||||
|
left: x + 'px',
|
||||||
|
top: y + 'px'
|
||||||
|
})
|
||||||
|
angle += step
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed:{
|
||||||
|
isCssStyle(){
|
||||||
|
return this.cssStyle
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style scoped lang="less">
|
||||||
|
@import './index.less';
|
||||||
|
.focus-areas-view{
|
||||||
|
background: url("~/static/images/FocusAreas/FocusAreas_bj.png") no-repeat;
|
||||||
|
width: 100%;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
min-height: 100vh;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding-top: .77rem;
|
||||||
|
&-wrap{
|
||||||
|
width: 100%;
|
||||||
|
max-width: 13rem;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
&-wheel{
|
||||||
|
margin-top: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 7.32rem;
|
||||||
|
}
|
||||||
|
&-h1{
|
||||||
|
font-size: .6rem;
|
||||||
|
font-family: Manrope;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: .82rem;
|
||||||
|
color: #FFFFFF;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
&-h6{
|
||||||
|
margin-top: .1rem;
|
||||||
|
margin-bottom: 0;
|
||||||
|
font-size: .16rem;
|
||||||
|
font-family: Manrope;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: .22rem;
|
||||||
|
color: #FFFFFF;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
&-p{
|
||||||
|
font-size: .22rem;
|
||||||
|
font-family: Manrope;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: .44rem;
|
||||||
|
color: #FFFFFF;
|
||||||
|
text-align: center;
|
||||||
|
max-width: 11.22rem;
|
||||||
|
margin: .74rem auto 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 768px){
|
||||||
|
.focus-areas-view{
|
||||||
|
padding-top: .88rem;
|
||||||
|
&-wheel{
|
||||||
|
margin-top: 1.5rem;
|
||||||
|
height: auto;
|
||||||
|
min-height: 5.30rem;
|
||||||
|
}
|
||||||
|
&-h1{
|
||||||
|
font-size: .6rem;
|
||||||
|
line-height: .82rem;
|
||||||
|
}
|
||||||
|
&-h6{
|
||||||
|
max-width: 5.5rem;
|
||||||
|
margin: 0 auto;
|
||||||
|
margin-top: .27rem;
|
||||||
|
font-size: .24rem;
|
||||||
|
line-height: .32rem;
|
||||||
|
}
|
||||||
|
&-p{
|
||||||
|
max-width: 6.9rem;
|
||||||
|
font-size: .3rem;
|
||||||
|
line-height: .4rem;
|
||||||
|
text-align: center;
|
||||||
|
margin: .29rem auto 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,162 @@
|
||||||
|
<template>
|
||||||
|
<div class="innovation-block">
|
||||||
|
<h3 class="innovation-block-h3">Articles</h3>
|
||||||
|
<div class="innovation-block-lists">
|
||||||
|
<div class="innovation-block-item wow fadeInUp" v-for="(item,index) in staticData" :key="'in_'+index" @click="handleLink(item.url)">
|
||||||
|
<img v-lazy="item.logo" class="innovation-block-item-img" alt="">
|
||||||
|
<h4 class="innovation-block-item-t">{{item.title}}</h4>
|
||||||
|
<p class="innovation-block-item-p">{{item.introduce}}</p>
|
||||||
|
<span>{{item.auth}}</span>
|
||||||
|
<small>{{item.created_at}}</small>
|
||||||
|
</div>
|
||||||
|
<div class="innovation-block-item" v-if="staticData.length%3>0">
|
||||||
|
<img src="" style="opacity: 0" class="innovation-block-item-img" alt="">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "InnovationBlock",
|
||||||
|
props:{
|
||||||
|
staticData:{
|
||||||
|
default:()=>[],
|
||||||
|
type:Array
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data(){
|
||||||
|
return {
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
handleLink(link){
|
||||||
|
if(!link){
|
||||||
|
return
|
||||||
|
}
|
||||||
|
window.location.href=link
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.innovation-block{
|
||||||
|
padding-top: 1.17rem;
|
||||||
|
&-h3{
|
||||||
|
font-size: .2rem;
|
||||||
|
font-family: Manrope;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #302D2C;
|
||||||
|
}
|
||||||
|
&-lists{
|
||||||
|
margin-top: .58rem;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
&-item{
|
||||||
|
margin-bottom: .72rem;
|
||||||
|
&-img{
|
||||||
|
display: block;
|
||||||
|
width: 3.9rem;
|
||||||
|
height: 2.92rem;
|
||||||
|
}
|
||||||
|
&-t{
|
||||||
|
margin-top: .33rem;
|
||||||
|
font-size: .2rem;
|
||||||
|
font-family: Manrope;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: .36rem;
|
||||||
|
color: #302D2C;
|
||||||
|
max-width: 3.45rem;
|
||||||
|
}
|
||||||
|
&-p{
|
||||||
|
max-width: 3.74rem;
|
||||||
|
margin-top: .16rem;
|
||||||
|
font-size: .16rem;
|
||||||
|
font-family: Manrope;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: .26rem;
|
||||||
|
color: #9B9B9B;
|
||||||
|
}
|
||||||
|
>span{
|
||||||
|
margin-top: .24rem;
|
||||||
|
display: block;
|
||||||
|
font-size: .14rem;
|
||||||
|
font-family: Manrope;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: .3rem;
|
||||||
|
color: #9B9B9B;
|
||||||
|
}
|
||||||
|
>small{
|
||||||
|
font-size: .14rem;
|
||||||
|
font-family: Manrope;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: .3rem;
|
||||||
|
color: #9B9B9B;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (max-width:1200px ) {
|
||||||
|
.innovation-block{
|
||||||
|
&-h3{
|
||||||
|
padding-left: .3rem;
|
||||||
|
}
|
||||||
|
&-lists{
|
||||||
|
justify-content: space-around;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (max-width:802px ) {
|
||||||
|
.innovation-block{
|
||||||
|
&-lists{
|
||||||
|
justify-content: space-around;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (max-width:768px ) {
|
||||||
|
.innovation-block{
|
||||||
|
padding-top: .5rem;
|
||||||
|
&-h3{
|
||||||
|
margin-top: 0;
|
||||||
|
font-size: .4rem;
|
||||||
|
padding-left: .3rem;
|
||||||
|
}
|
||||||
|
&-lists{
|
||||||
|
margin-top: .42rem;
|
||||||
|
justify-content: space-around;
|
||||||
|
}
|
||||||
|
&-item{
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
padding: 0 .3rem;
|
||||||
|
&-img{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
&-t{
|
||||||
|
margin-top: .2rem;
|
||||||
|
font-size: .2rem;
|
||||||
|
line-height: .36rem;
|
||||||
|
max-width: 6.21rem;
|
||||||
|
}
|
||||||
|
&-p{
|
||||||
|
max-width: 6.62rem;
|
||||||
|
margin-top: .18rem;
|
||||||
|
font-size: .28rem;
|
||||||
|
line-height: .34rem;
|
||||||
|
}
|
||||||
|
>span{
|
||||||
|
margin-top: .5rem;
|
||||||
|
font-size: .24rem;
|
||||||
|
line-height: .3rem;
|
||||||
|
}
|
||||||
|
>small{
|
||||||
|
font-size: .24rem;
|
||||||
|
line-height: .3rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,188 @@
|
||||||
|
<template>
|
||||||
|
<div class="join-us-tabs " :class="{'mask':isMobile,'expand':isExpand}" >
|
||||||
|
<div class="join-us-tabs-options">
|
||||||
|
<h3 class="join-us-tabs-title">Position</h3>
|
||||||
|
<ul>
|
||||||
|
<li class="join-us-tabs-item" @click="handleSelect(item)" v-for="(item,index) in options" :key="'option_'+index" :class="{'active':active===item.id}">
|
||||||
|
{{item.name}}
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<!-- <div class='join-mask' :class="{'isExpand':isExpand}" v-if="isMobile" @click="isExpand=!isExpand">-->
|
||||||
|
<!-- <van-icon name="arrow-down" class="join-mask-arrow" />-->
|
||||||
|
<!-- </div>-->
|
||||||
|
<div class="join-us-tabs-content" v-html="content"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "JoinUsTabs",
|
||||||
|
data(){
|
||||||
|
return {
|
||||||
|
isMobile:false,
|
||||||
|
isExpand:true,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted(){
|
||||||
|
this.handleIsMobile()
|
||||||
|
window.addEventListener('resize',this.handleIsMobile)
|
||||||
|
},
|
||||||
|
props:{
|
||||||
|
options:{
|
||||||
|
default:()=>[],
|
||||||
|
type:Array
|
||||||
|
},
|
||||||
|
active:{
|
||||||
|
default:'',
|
||||||
|
type:String
|
||||||
|
},
|
||||||
|
content:{
|
||||||
|
default:'',
|
||||||
|
type:String
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
handleSelect(item){
|
||||||
|
this.$emit('handleSelect',item)
|
||||||
|
},
|
||||||
|
handleIsMobile(){
|
||||||
|
const clientWidth=document.documentElement.clientWidth;
|
||||||
|
this.isMobile=clientWidth<=750
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.join-us-tabs{
|
||||||
|
padding-top: .97rem;
|
||||||
|
padding-bottom: 1.57rem;
|
||||||
|
&-options{
|
||||||
|
display: inline-block;
|
||||||
|
max-width: 3.02rem;
|
||||||
|
width: 100%;
|
||||||
|
margin-right: 1.28rem;
|
||||||
|
}
|
||||||
|
&-content{
|
||||||
|
padding-top: .5rem;
|
||||||
|
vertical-align: top;
|
||||||
|
max-width: 8.7rem;
|
||||||
|
display: inline-block;
|
||||||
|
width: calc( 100% - 4.38rem );
|
||||||
|
min-height: 2rem;
|
||||||
|
}
|
||||||
|
.join-mask{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
&-item{
|
||||||
|
font-size: .16rem;
|
||||||
|
font-family: Manrope;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #302D2C;
|
||||||
|
border-bottom: 1px solid #EDEDED;
|
||||||
|
min-height: .7rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding-left: .14rem;
|
||||||
|
cursor: pointer;
|
||||||
|
&.active,&:hover{
|
||||||
|
color: #F49F00;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-title{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 100%;
|
||||||
|
height: .58rem;
|
||||||
|
background: #342927;
|
||||||
|
font-size: .16rem;
|
||||||
|
font-family: Manrope;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 768px){
|
||||||
|
.join-us-tabs{
|
||||||
|
padding-top: .5rem;
|
||||||
|
&.mask{
|
||||||
|
height: 3.5rem;
|
||||||
|
position: relative;
|
||||||
|
overflow-y: hidden;
|
||||||
|
overflow-x: visible;
|
||||||
|
&.expand{
|
||||||
|
height:auto;
|
||||||
|
overflow-y: visible;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.join-mask{
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
text-align: center;
|
||||||
|
&.isExpand{
|
||||||
|
.join-mask-arrow{
|
||||||
|
transform: rotate(-180deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-arrow{
|
||||||
|
transition: all .3s ease-in;
|
||||||
|
line-height: .4rem;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
&:before{
|
||||||
|
content: '';
|
||||||
|
display: block;
|
||||||
|
height: .85rem;
|
||||||
|
background: linear-gradient(to bottom,transparent 2%,#F8F9F9);
|
||||||
|
background: -ms-linear-gradient(to bottom,transparent 2%,#F8F9F9);
|
||||||
|
background:-moz-linear-gradient(to bottom,transparent 2%,#F8F9F9);/*火狐*/
|
||||||
|
background: -webkit-linear-gradient(to bottom,transparent 2%,#F8F9F9);
|
||||||
|
background: -o-linear-gradient(to bottom,transparent 2%,#F8F9F9)
|
||||||
|
}
|
||||||
|
&:after{
|
||||||
|
content: '';
|
||||||
|
display: block;
|
||||||
|
min-height: .4rem;
|
||||||
|
background-color: #eee;
|
||||||
|
border-radius: .5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-options{
|
||||||
|
display: block;
|
||||||
|
max-width: 100%;
|
||||||
|
width: 5.18rem;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
&-content{
|
||||||
|
max-width: 100%;
|
||||||
|
padding-left: .15rem;
|
||||||
|
padding-right: .15rem;
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 0 auto;
|
||||||
|
min-height: 2rem;
|
||||||
|
}
|
||||||
|
&-item{
|
||||||
|
font-size: .26rem;
|
||||||
|
min-height: .88rem;
|
||||||
|
padding-left: .16rem;
|
||||||
|
border-color: #EDEDED;
|
||||||
|
&.active,&:hover{
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-title{
|
||||||
|
height: .96rem;
|
||||||
|
font-size: .38rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,96 @@
|
||||||
|
<template lang="html">
|
||||||
|
<div class="public-loading" v-if="loading">
|
||||||
|
<div class="public-loading-block">
|
||||||
|
<div class="public-loading-block-loader"></div>
|
||||||
|
<div class="public-loading-block-img">
|
||||||
|
<svg-icon icon-class="loading"></svg-icon>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'loading',
|
||||||
|
components: { },
|
||||||
|
data: () => ({
|
||||||
|
loading: false
|
||||||
|
}),
|
||||||
|
methods: {
|
||||||
|
start() {
|
||||||
|
this.loading = true
|
||||||
|
},
|
||||||
|
finish() {
|
||||||
|
this.loading = false
|
||||||
|
},
|
||||||
|
getLoadingState(){
|
||||||
|
return this.loading
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.public-loading-block-loader {
|
||||||
|
display: block;
|
||||||
|
border: .04rem solid rgba(252,228,199,.3);
|
||||||
|
border-radius: 50%;
|
||||||
|
width: 1.28rem;
|
||||||
|
height: 1.28rem;
|
||||||
|
box-sizing: border-box;
|
||||||
|
-webkit-animation: spin 2s linear infinite;
|
||||||
|
animation: spin 2s linear infinite;
|
||||||
|
&:after{
|
||||||
|
content: '';
|
||||||
|
display: block;
|
||||||
|
width: .12rem;
|
||||||
|
height:.12rem;
|
||||||
|
border-radius: 50%;
|
||||||
|
overflow: hidden;
|
||||||
|
background-color: #F5A23D ;
|
||||||
|
margin-top: .22rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes spin {
|
||||||
|
0% { -webkit-transform: rotate(0deg); }
|
||||||
|
100% { -webkit-transform: rotate(360deg); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes spin {
|
||||||
|
0% { transform: rotate(0deg); }
|
||||||
|
100% { transform: rotate(360deg); }
|
||||||
|
}
|
||||||
|
.public-loading{
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
margin: 0 auto;
|
||||||
|
height: 100%;
|
||||||
|
align-items: center;
|
||||||
|
background-color: #292727;
|
||||||
|
position: fixed;
|
||||||
|
z-index: 100;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
&-block{
|
||||||
|
/*margin-top: -100%;*/
|
||||||
|
position: relative;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
&-block-img{
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateX(-50%) translateY(-50%);
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
.svg-icon{
|
||||||
|
width: .76rem;
|
||||||
|
height: .76rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,161 @@
|
||||||
|
<template>
|
||||||
|
<section class="layout-footer">
|
||||||
|
<div class="layout-footer-h5-wrap">
|
||||||
|
<div class="layout-footer-d">
|
||||||
|
<div class="layout-footer-d-l">
|
||||||
|
<div class="layout-footer-d-l-l-w">
|
||||||
|
<svg-icon icon-class="footerLogo"></svg-icon>
|
||||||
|
</div>
|
||||||
|
<p>© 2022 LightLimX Ventures Management Co Ltd. All Rights Reserved.</p>
|
||||||
|
</div>
|
||||||
|
<ul class="layout-footer-d-r">
|
||||||
|
<li class="layout-footer-d-r-i" v-for="item in tabs" :key="item.name" @click="handleClick(item)">{{item.title}}</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {footerLink} from "~/assets/js/static";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "MyFooter",
|
||||||
|
mounted(){
|
||||||
|
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
handleClick(item){
|
||||||
|
if(item.name==='innovation'){
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if(item.type==='href'){
|
||||||
|
if(item.link&&this.$route.path!==item.link){
|
||||||
|
this.$router.push({path:'/#'+item.name})
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
document.getElementById(item.name).scrollIntoView();
|
||||||
|
// console.log(document.getElementById(item.name))
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.$router.push({path:'/'+item.name})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data(){
|
||||||
|
return {
|
||||||
|
tabs:[
|
||||||
|
...footerLink
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.layout-footer{
|
||||||
|
background: #292727;
|
||||||
|
min-height: 2.33rem;
|
||||||
|
&-h5-wrap{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
&-d{
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
&-r{
|
||||||
|
padding-top: .64rem;
|
||||||
|
padding-bottom: .4rem;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
&-i{
|
||||||
|
font-size: .14rem;
|
||||||
|
font-family: Manrope;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #9B9B9B;
|
||||||
|
width: 25%;
|
||||||
|
margin-bottom: .24rem;
|
||||||
|
cursor: pointer;
|
||||||
|
&:active{
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-l{
|
||||||
|
&-l-w{
|
||||||
|
padding-bottom: .17rem;
|
||||||
|
.svg-icon{
|
||||||
|
width: 1.54rem;
|
||||||
|
height: .26rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
>p{
|
||||||
|
font-size: .12rem;
|
||||||
|
font-family: Manrope;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #9B9B9B;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
.layout-footer{
|
||||||
|
&-h5-wrap{
|
||||||
|
}
|
||||||
|
&-d{
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
&-r{
|
||||||
|
align-self: flex-start;
|
||||||
|
padding-top: .98rem;
|
||||||
|
padding-bottom: .37rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
box-sizing: border-box;
|
||||||
|
&-i{
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: flex-start;
|
||||||
|
font-size: .24rem;
|
||||||
|
font-weight: bold;
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin-bottom: .3rem;
|
||||||
|
height: .33rem;
|
||||||
|
line-height: .33rem;
|
||||||
|
padding-left: .15rem;
|
||||||
|
&:active{
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-l{
|
||||||
|
padding-top: .5rem;
|
||||||
|
&-l-w{
|
||||||
|
padding-bottom: .3rem;
|
||||||
|
text-align: center;
|
||||||
|
.svg-icon{
|
||||||
|
width: 3rem;
|
||||||
|
height: .5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
>p{
|
||||||
|
text-align: center;
|
||||||
|
max-width: 4.5rem;
|
||||||
|
font-size: .24rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,273 @@
|
||||||
|
<template>
|
||||||
|
<div class="layout-header" id="layout-header" >
|
||||||
|
<div class="layout-header-h5-wrap" :style="{'position':'relative','z-index':'100'}">
|
||||||
|
<div class="layout-header-nav">
|
||||||
|
<div class="logo">
|
||||||
|
<svg-icon icon-class="logo"></svg-icon>
|
||||||
|
</div>
|
||||||
|
<div class="layout-header-tabs" >
|
||||||
|
<van-tabs v-model="active" @change="handleChange"
|
||||||
|
background="transparent"
|
||||||
|
title-inactive-color="#9B9B9B"
|
||||||
|
color="#F49F00"
|
||||||
|
title-active-color="#FFFFFF" >
|
||||||
|
<van-tab
|
||||||
|
:title="item.title"
|
||||||
|
:name="item.name"
|
||||||
|
v-for="(item) in tabs "
|
||||||
|
:key="item.name"></van-tab>
|
||||||
|
</van-tabs>
|
||||||
|
</div>
|
||||||
|
<div class="layout-header-menu" @click="handleToggle">
|
||||||
|
<svg-icon v-if="!isShow" icon-class="menu"></svg-icon>
|
||||||
|
<svg-icon v-if="isShow" icon-class="close"></svg-icon>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<van-popup v-model="isShow" class="layout-header-popup" :overlay="false" :get-container="getContainer" position="top" :style="{ 'min-height': 'auto' ,'z-index':'99 !important'}" >
|
||||||
|
<div class="layout-header-menu-lists">
|
||||||
|
<van-cell-group>
|
||||||
|
<van-cell
|
||||||
|
clickable
|
||||||
|
:class="{'active':item.name===active}"
|
||||||
|
class="layout-header-menu-item"
|
||||||
|
title-class="layout-header-menu-t"
|
||||||
|
:is-link="false"
|
||||||
|
:title="item.title"
|
||||||
|
:name="item.name"
|
||||||
|
v-for="(item) in tabs"
|
||||||
|
@click="handleClick(item)"
|
||||||
|
:key="item.name">
|
||||||
|
<template #icon>
|
||||||
|
<div class="layout-header-menu-icon">
|
||||||
|
<svg-icon :icon-class="item.icon"></svg-icon>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template #extra>
|
||||||
|
<div class="layout-header-menu-extra">
|
||||||
|
<van-icon name="arrow" size=".2rem" color="#CBCBCB" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</van-cell>
|
||||||
|
</van-cell-group>
|
||||||
|
</div>
|
||||||
|
</van-popup>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {tabs} from "~/assets/js/static";
|
||||||
|
export default {
|
||||||
|
name: "MyHeader",
|
||||||
|
watch:{
|
||||||
|
'$route'(old,val){
|
||||||
|
if(old!==val){
|
||||||
|
if(this.$route.name == 'contact-id'){
|
||||||
|
return;
|
||||||
|
}else{
|
||||||
|
this.active=this.$route.name;
|
||||||
|
this.isShow=false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
handleMenu(){
|
||||||
|
const clientWidth=document.documentElement.clientWidth;
|
||||||
|
if(clientWidth>768){
|
||||||
|
this.isShow=false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
getContainer() {
|
||||||
|
return document.querySelector('.layout-header');
|
||||||
|
},
|
||||||
|
handleClick(item){
|
||||||
|
if(item.name==='innovation'){
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if(this.$route.name===item.name){
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.isShow=!this.isShow
|
||||||
|
this.$router.push({name:item.name})
|
||||||
|
},
|
||||||
|
handleChange(name,title){
|
||||||
|
if(name==='innovation'){
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if(this.$route.name===name){
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.$router.push({name:name})
|
||||||
|
},
|
||||||
|
handleToggle(){
|
||||||
|
this.isShow=!this.isShow
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created(){
|
||||||
|
this.active=this.$route.name
|
||||||
|
},
|
||||||
|
destroyed(){
|
||||||
|
this.handleMenu()
|
||||||
|
window.removeEventListener('resize',this.handleMenu)
|
||||||
|
},
|
||||||
|
mounted(){
|
||||||
|
window.addEventListener('resize',this.handleMenu)
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
isShow:false,
|
||||||
|
active: '',
|
||||||
|
tabs:tabs
|
||||||
|
};
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.layout-header{
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
height: .96rem;
|
||||||
|
z-index: 2;
|
||||||
|
overflow: hidden;
|
||||||
|
background-color: #363231;
|
||||||
|
&-menu{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
&-popup{
|
||||||
|
z-index: 99 !important;
|
||||||
|
}
|
||||||
|
&-nav{
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
height: 100%;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-tabs{
|
||||||
|
display: flex;
|
||||||
|
height: 100%;
|
||||||
|
align-items: flex-end;
|
||||||
|
}
|
||||||
|
.logo{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
height: 100%;
|
||||||
|
.svg-icon{
|
||||||
|
width: 1.54rem;
|
||||||
|
height: .26rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-h5-wrap{
|
||||||
|
height: 100% !important;
|
||||||
|
display: block;
|
||||||
|
background-color: #363231;
|
||||||
|
overflow-x: initial;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
.layout-header{
|
||||||
|
height: .88rem;
|
||||||
|
&-menu{
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
padding: .3rem;
|
||||||
|
&-item{
|
||||||
|
padding-left: .3rem;
|
||||||
|
min-height: 1.09rem;
|
||||||
|
&:after{
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
border-color: #E3E3E3;
|
||||||
|
}
|
||||||
|
&:active,&.active{
|
||||||
|
background-color: #F1F1F1;
|
||||||
|
.layout-header-menu-t{
|
||||||
|
font-family: Manrope;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: .4rem;
|
||||||
|
color: #2E2C2C;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-t{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-size: .3rem;
|
||||||
|
font-family: Manrope;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #302D2C;
|
||||||
|
}
|
||||||
|
&-extra{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
&-icon{
|
||||||
|
padding-right: .3rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
.svg-icon{
|
||||||
|
width: .34rem;
|
||||||
|
height: .34rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-lists{
|
||||||
|
padding-top: .88rem;
|
||||||
|
padding-bottom: .89rem;
|
||||||
|
&-item{
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.svg-icon{
|
||||||
|
width: .34rem;
|
||||||
|
height: .3rem;
|
||||||
|
}
|
||||||
|
&:active{
|
||||||
|
background-color: #eee;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-nav{
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
&-tabs{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.logo{
|
||||||
|
.svg-icon{
|
||||||
|
width: 2.12rem;
|
||||||
|
height: .36rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<style lang="less">
|
||||||
|
.layout-header-tabs{
|
||||||
|
.van-tab{
|
||||||
|
font-size: .14rem;
|
||||||
|
font-weight: bold;
|
||||||
|
font-family: Manrope;
|
||||||
|
color: #9B9B9B;
|
||||||
|
&:hover .van-tab__text{
|
||||||
|
font-family: Manrope;
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
&.van-tab--active .van-tab__text{
|
||||||
|
color: #9B9B9B !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.van-tabs{
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.van-tabs__wrap{
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,101 @@
|
||||||
|
<template>
|
||||||
|
<div class="pagination">
|
||||||
|
<el-pagination
|
||||||
|
background
|
||||||
|
:hide-on-single-page="true"
|
||||||
|
@current-change="handleCurrentChange"
|
||||||
|
layout="prev, pager, next"
|
||||||
|
:total="total">
|
||||||
|
</el-pagination>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "MyPagination",
|
||||||
|
props:{
|
||||||
|
pagerCount:{
|
||||||
|
type:Number,
|
||||||
|
default:6
|
||||||
|
},
|
||||||
|
// 限制 每页 多少条
|
||||||
|
limit:{
|
||||||
|
type:Number,
|
||||||
|
default:10
|
||||||
|
},
|
||||||
|
// 页数
|
||||||
|
page:{
|
||||||
|
type:Number,
|
||||||
|
default:1
|
||||||
|
},
|
||||||
|
// 总 数
|
||||||
|
total:{
|
||||||
|
type:Number,
|
||||||
|
default:100
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed:{
|
||||||
|
isCurrent:{
|
||||||
|
get(){
|
||||||
|
return this.page
|
||||||
|
},
|
||||||
|
set(val){
|
||||||
|
return this.$emit('update:current',val)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
handleClick(item){
|
||||||
|
this.$emit('update:current',item)
|
||||||
|
},
|
||||||
|
handleCurrentChange(val) {
|
||||||
|
this.$emit('change',val)
|
||||||
|
},
|
||||||
|
myCallback(VAL){
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.pagination{
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
&-lists{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
&-prev{
|
||||||
|
margin-right: .1rem;
|
||||||
|
}
|
||||||
|
&-next{
|
||||||
|
margin-left: .1rem;
|
||||||
|
.svg-icon{
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-prev,&-next,&-list{
|
||||||
|
width: .48rem;
|
||||||
|
height: .48rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
cursor: pointer;
|
||||||
|
&:active,&:hover{
|
||||||
|
background: #F3F3F3;
|
||||||
|
border-radius: .05rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-list{
|
||||||
|
margin-right: .08rem;
|
||||||
|
&:last-child{
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
&.active{
|
||||||
|
background: #F3F3F3;
|
||||||
|
border-radius: .05rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,62 @@
|
||||||
|
<template>
|
||||||
|
<div class="our-founders">
|
||||||
|
<h2 class="our-founders-t">Our Founders Are Global</h2>
|
||||||
|
<p class="our-founders-d">LightLimX now has offices located in Tokyo,Dubai,Singapore,North America, Asia , allowing us to reach out resources globally.</p>
|
||||||
|
<slot></slot>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "OurFounders"
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.our-founders{
|
||||||
|
padding-top: 2rem;
|
||||||
|
padding-bottom: 1.92rem;
|
||||||
|
&-banners{
|
||||||
|
width: 100%;
|
||||||
|
padding: 0 ;
|
||||||
|
}
|
||||||
|
&-t,&-d{
|
||||||
|
text-align: center;
|
||||||
|
font-family: Manrope;
|
||||||
|
}
|
||||||
|
&-t{
|
||||||
|
font-size: .48rem;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: .84rem;
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
&-d{
|
||||||
|
max-width: 9rem;
|
||||||
|
width: 100%;
|
||||||
|
margin: 0 auto 1.08rem;
|
||||||
|
font-size: .24rem;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: .48rem;
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
.our-founders{
|
||||||
|
padding-bottom: .44rem;
|
||||||
|
padding-top: .7rem;
|
||||||
|
&-banners{
|
||||||
|
padding: 0 .3rem;
|
||||||
|
}
|
||||||
|
&-t{
|
||||||
|
font-size: .4rem;
|
||||||
|
line-height: .84rem;
|
||||||
|
}
|
||||||
|
&-d{
|
||||||
|
max-width: 5.6rem;
|
||||||
|
font-size: .24rem;
|
||||||
|
line-height: .34rem;
|
||||||
|
margin-bottom: .49rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,92 @@
|
||||||
|
<template>
|
||||||
|
<section class="our-portfolio-view" :style="isCssStyle">
|
||||||
|
<div class="our-portfolio-view-wrap">
|
||||||
|
<h1 class="our-portfolio-view-h1-1 wow fadeInUp" data-wow-delay=".4s" >We Drive Real Value To</h1>
|
||||||
|
<h1 class="our-portfolio-view-h1-1 wow fadeInUp" data-wow-delay=".5s">Our Portfolio</h1>
|
||||||
|
<div class="our-portfolio-view-card">
|
||||||
|
<slot></slot>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "OurPortfolio",
|
||||||
|
props:{
|
||||||
|
cssStyle:{
|
||||||
|
type:Object,
|
||||||
|
default:()=>{
|
||||||
|
return {}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed:{
|
||||||
|
isCssStyle(){
|
||||||
|
return this.cssStyle
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.our-portfolio-view{
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding-top: 1.65rem;
|
||||||
|
padding-bottom: 1.57rem;
|
||||||
|
&-card{
|
||||||
|
margin-top: 1.40rem;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
&-h1-1{
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: center;
|
||||||
|
height: .65rem;
|
||||||
|
font-size: .48rem;
|
||||||
|
font-family: Manrope;
|
||||||
|
color: #302D2C;
|
||||||
|
&:last-child{
|
||||||
|
margin-top: .16rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-wrap{
|
||||||
|
width: 100%;
|
||||||
|
max-width: 13rem;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 1250px) {
|
||||||
|
.our-portfolio-view{
|
||||||
|
&-card{
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-around;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 768px){
|
||||||
|
.our-portfolio-view{
|
||||||
|
padding-top: .51rem;
|
||||||
|
padding-bottom: .51rem;
|
||||||
|
&-h5-wrap{
|
||||||
|
height: 100% !important;
|
||||||
|
}
|
||||||
|
&-card{
|
||||||
|
margin-top: .47rem;
|
||||||
|
flex-direction: column;
|
||||||
|
padding-left: .3rem;
|
||||||
|
padding-right: .3rem;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
&-h1-1{
|
||||||
|
height: .82rem;
|
||||||
|
font-size: .6rem;
|
||||||
|
&:last-child{
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,156 @@
|
||||||
|
<template>
|
||||||
|
<div class="our-portfolio-item wow fadeInUp" :data-wow-delay="item.time" >
|
||||||
|
<img v-lazy="assetsUri('images/'+item.img+'.png')" class="our-portfolio-item-img" alt="">
|
||||||
|
<h3 class="our-portfolio-item-title">{{item.title}}</h3>
|
||||||
|
<p class="our-portfolio-item-content">{{item.content}}</p>
|
||||||
|
<nuxt-link :to="item.link" tag="a" class="our-portfolio-item-a">Read more<van-icon name="arrow" color="#F49F00" ></van-icon></nuxt-link>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {
|
||||||
|
assetsUri
|
||||||
|
} from "../../utils";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "OurPortfolioItem",
|
||||||
|
data(){
|
||||||
|
return {
|
||||||
|
assetsUri
|
||||||
|
}
|
||||||
|
},
|
||||||
|
props:{
|
||||||
|
item:{
|
||||||
|
default:()=>{},
|
||||||
|
type:Object
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.our-portfolio-item{
|
||||||
|
max-width: 4.09rem;
|
||||||
|
width: 100%;
|
||||||
|
min-height: 4.97rem;
|
||||||
|
opacity: 1;
|
||||||
|
text-align: center;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all .3s ease-in;
|
||||||
|
&-a{
|
||||||
|
display: block;
|
||||||
|
margin: 0 auto;
|
||||||
|
font-size: .16rem;
|
||||||
|
font-family: Manrope;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: .32rem;
|
||||||
|
color: #F49F00;
|
||||||
|
text-decoration: underline;
|
||||||
|
padding-bottom: .70rem;
|
||||||
|
margin-top: .32rem;
|
||||||
|
>i{
|
||||||
|
font-size: .12rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:hover{
|
||||||
|
box-shadow: 0 3px 20px rgba(0, 0, 0, 0.06);
|
||||||
|
transform: scale(1.05);
|
||||||
|
}
|
||||||
|
&-title{
|
||||||
|
margin-top: .25rem;
|
||||||
|
font-size: .24rem;
|
||||||
|
font-family: Manrope;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: .84rem;
|
||||||
|
color: #342927;
|
||||||
|
}
|
||||||
|
&-content{
|
||||||
|
margin: 0 auto;
|
||||||
|
max-width: 3.52rem;
|
||||||
|
min-height: 1.18rem;
|
||||||
|
padding-left: .3rem;
|
||||||
|
padding-right: .3rem;
|
||||||
|
font-size: .16rem;
|
||||||
|
font-family: Manrope;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: .32rem;
|
||||||
|
color: #302D2C;
|
||||||
|
}
|
||||||
|
&-img{
|
||||||
|
display: block;
|
||||||
|
width: .88rem;
|
||||||
|
height: .88rem;
|
||||||
|
margin: 77px auto 0;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 1250px) {
|
||||||
|
.our-portfolio-item{
|
||||||
|
margin-top: .5rem;
|
||||||
|
width: 4.09rem;
|
||||||
|
&:first-child{
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 830px) {
|
||||||
|
.our-portfolio-item{
|
||||||
|
margin-top: .5rem;
|
||||||
|
width: 100%;
|
||||||
|
&:first-child{
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
.our-portfolio-item{
|
||||||
|
margin-top: .5rem;
|
||||||
|
max-width: 100%;
|
||||||
|
min-height: 4.97rem;
|
||||||
|
text-align: center;
|
||||||
|
&:first-child{
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
&-a{
|
||||||
|
margin: .45rem auto 0;
|
||||||
|
font-size: .3rem;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: .32rem;
|
||||||
|
padding-bottom: 1.1rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
>i{
|
||||||
|
font-size: .24rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:hover{
|
||||||
|
box-shadow: 0 .03rem .2rem rgba(0, 0, 0, 0.06);
|
||||||
|
}
|
||||||
|
&-title{
|
||||||
|
margin-top: .52rem;
|
||||||
|
font-size: .4rem;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: .84rem;
|
||||||
|
}
|
||||||
|
&-content{
|
||||||
|
margin: .6rem auto 0;
|
||||||
|
max-width: 6.30rem;
|
||||||
|
min-height: 1.35rem;
|
||||||
|
padding-left: .3rem;
|
||||||
|
padding-right: .3rem;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: .24rem;
|
||||||
|
line-height: .34rem;
|
||||||
|
}
|
||||||
|
&-img{
|
||||||
|
display: block;
|
||||||
|
width: 2.42rem;
|
||||||
|
height: 2.42rem;
|
||||||
|
margin: .99rem auto 0;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,122 @@
|
||||||
|
<template>
|
||||||
|
<div class="partners" id="partners">
|
||||||
|
<h2 class="partners-t">Partners</h2>
|
||||||
|
<h3 class="partners-t-sub">We Partner With The Extraordinary</h3>
|
||||||
|
<p class="partners-d">We are well versed within crypto space with strong partner backing</p>
|
||||||
|
<ul class="partners-l">
|
||||||
|
<li class="partners-l-i wow flipInX" data-wow-delay="0.6s" v-for="(item,index) in partners" :key="'partners_'+index">
|
||||||
|
<img class="partners-l-i-img " v-lazy="assetsUri(item.logo)" alt="">
|
||||||
|
</li>
|
||||||
|
<li class="partners-l-i" v-if="partners.length%4<3||partners.length%3<2"></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {
|
||||||
|
assetsUri
|
||||||
|
} from "../../utils";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "Partners",
|
||||||
|
props:{
|
||||||
|
partners:{
|
||||||
|
default:()=>[],
|
||||||
|
type:Array
|
||||||
|
},
|
||||||
|
showPartners:{
|
||||||
|
default:false,
|
||||||
|
type:Boolean
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data(){
|
||||||
|
return {
|
||||||
|
assetsUri,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.partners{
|
||||||
|
width: 100%;
|
||||||
|
&-t,&-t-sub,&-d{
|
||||||
|
text-align: center;
|
||||||
|
color: #Fff;
|
||||||
|
}
|
||||||
|
&-t{
|
||||||
|
font-size: .6rem;
|
||||||
|
font-family: Manrope;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: .84rem;
|
||||||
|
color: #FFFFFF;
|
||||||
|
&-sub{
|
||||||
|
font-size: .36rem;
|
||||||
|
font-family: Manrope;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: .84rem;
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-d{
|
||||||
|
font-size: .24rem;
|
||||||
|
font-family: Manrope;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: .33rem;
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
&-l{
|
||||||
|
padding-top: 1rem;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
&-i{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
max-width: 2.80rem;
|
||||||
|
max-height: 1.8rem;
|
||||||
|
margin-bottom: .6rem;
|
||||||
|
cursor: pointer;
|
||||||
|
&-img{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 1200px){
|
||||||
|
.partners{
|
||||||
|
&-l{
|
||||||
|
justify-content: space-around;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 768px){
|
||||||
|
.partners{
|
||||||
|
&-t{
|
||||||
|
font-size: .6rem;
|
||||||
|
line-height: .84rem;
|
||||||
|
&-sub{
|
||||||
|
font-size: .36rem;
|
||||||
|
line-height: .84rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-d{
|
||||||
|
max-width: 4.54rem;
|
||||||
|
font-size: .24rem;
|
||||||
|
line-height: .32rem;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
&-l{
|
||||||
|
padding-top: .5rem;
|
||||||
|
&-i{
|
||||||
|
margin-bottom: .3rem;
|
||||||
|
max-width: 2.06rem;
|
||||||
|
max-height: 1.33rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,343 @@
|
||||||
|
<template>
|
||||||
|
<div class="portfolio" >
|
||||||
|
<h2 class="portfolio-t wow fadeInUp" >Portfolio</h2>
|
||||||
|
<div class="portfolio-c" id="iPortfolio">
|
||||||
|
<div class="portfolio-c-l">
|
||||||
|
<!-- :style="{'position':position}"-->
|
||||||
|
<div class="portfolio-c-l-fixed" id="ball"
|
||||||
|
:style="{'position':position,'top':top,'bottom':bottom}"
|
||||||
|
>
|
||||||
|
<img class="portfolio-c-l-fixed-img" v-lazy="assetsUri('images/ball.png')" alt="">
|
||||||
|
<span>At LightLimX we believe tomorrow is built today.</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="portfolio-c-r">
|
||||||
|
<ul class="portfolio-c-r-u">
|
||||||
|
<li class="portfolio-c-r-l" v-for="(group,index) in staticData" :key="'_'+index">
|
||||||
|
<h5 class="portfolio-c-r-l-t wow fadeInUp">{{group.title}}</h5>
|
||||||
|
<div class="portfolio-c-r-l-d" >
|
||||||
|
<img v-lazy="assetsUri(item)" data-wow-delay=".4s" class="wow fadeInRight" v-for="(item,ind) in group.images" :key="ind+'_'" alt="">
|
||||||
|
<img v-if="group.images&&(group.images.length%3<3)" style="opacity: 0" alt="">
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="portfolio-card">
|
||||||
|
<div class="portfolio-card-item wow fadeInUp" :data-wow-delay="`${0.4+(index*0.2)}s`" v-for="(item,index) in cards" :key="'cards_'+index">
|
||||||
|
<img v-lazy="assetsUri(item.img)" v-if="item.img" class="portfolio-card-item-img" alt="">
|
||||||
|
<span class="portfolio-card-item-btn" @click="$router.push({path:item.link})">
|
||||||
|
{{item.btnText}}
|
||||||
|
<van-icon name="arrow" class="portfolio-card-item-btn-icon"></van-icon>
|
||||||
|
</span>
|
||||||
|
<p>{{item.text}}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {assetsUri} from "../../utils";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "Portfolio",
|
||||||
|
props:{
|
||||||
|
// staticData:{
|
||||||
|
// default:()=>[],
|
||||||
|
// type:Array
|
||||||
|
// },
|
||||||
|
position:{
|
||||||
|
default:'sticky',
|
||||||
|
type:String
|
||||||
|
},
|
||||||
|
top:{
|
||||||
|
default:'0px',
|
||||||
|
type:String
|
||||||
|
},
|
||||||
|
bottom:{
|
||||||
|
default:'initial',
|
||||||
|
type:String
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data(){
|
||||||
|
return {
|
||||||
|
assetsUri,
|
||||||
|
cards:[
|
||||||
|
{
|
||||||
|
img:'images/apply.png',
|
||||||
|
btnText:'Apply For Investment',
|
||||||
|
text:'We invert and partner with projects outside of our accelerator',
|
||||||
|
link:'/contact'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img:'images/invest.png',
|
||||||
|
btnText:'Invest With Us',
|
||||||
|
text:'Join our 1000-strong deal-sharing investor network',
|
||||||
|
link:'/contact'
|
||||||
|
},
|
||||||
|
],
|
||||||
|
staticData:[
|
||||||
|
{
|
||||||
|
title:'Infrastructure',
|
||||||
|
images:[
|
||||||
|
'images/portfolio/组 723@2x.png',
|
||||||
|
'images/portfolio/组 698@2x.png',
|
||||||
|
'images/portfolio/组 699@2x.png',
|
||||||
|
'images/portfolio/组 722@2x.png',
|
||||||
|
]
|
||||||
|
}, {
|
||||||
|
title:'Web 3.0',
|
||||||
|
images:[
|
||||||
|
'images/portfolio/组 713@2x.png',
|
||||||
|
'images/portfolio/组 714@2x.png',
|
||||||
|
'images/portfolio/组 715@2x.png',
|
||||||
|
'images/portfolio/组 718@2x.png',
|
||||||
|
'images/portfolio/组 717@2x.png',
|
||||||
|
'images/portfolio/组 716@2x.png',
|
||||||
|
'images/portfolio/组 864@2x.png',
|
||||||
|
'images/portfolio/组 719@2x.png',
|
||||||
|
]
|
||||||
|
}, {
|
||||||
|
title:'GameFi',
|
||||||
|
images:[
|
||||||
|
'images/portfolio/组 712@2x.png',
|
||||||
|
'images/portfolio/组 711@2x.png',
|
||||||
|
'images/portfolio/组 710@2x.png',
|
||||||
|
'images/portfolio/组 707@2x.png',
|
||||||
|
'images/portfolio/组 708@2x.png',
|
||||||
|
'images/portfolio/组 709@2x.png',
|
||||||
|
'images/portfolio/组 706@2x.png',
|
||||||
|
'images/portfolio/组 705@2x.png'
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title:'SocialFi',
|
||||||
|
images:[
|
||||||
|
'images/portfolio/组 702@2x.png',
|
||||||
|
'images/portfolio/组 703@2x.png',
|
||||||
|
'images/portfolio/组 704@2x.png',
|
||||||
|
'images/portfolio/组 701@2x.png',
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.portfolio{
|
||||||
|
padding-bottom: 1.04rem;
|
||||||
|
&-card{
|
||||||
|
margin-top: 1.86rem;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
&-item{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: .99rem;
|
||||||
|
>p{
|
||||||
|
text-align: center;
|
||||||
|
max-width: 4.76rem;
|
||||||
|
margin-top: .42rem;
|
||||||
|
font-size: .24rem;
|
||||||
|
font-family: Manrope;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: .48rem;
|
||||||
|
color: #9B9B9B;
|
||||||
|
}
|
||||||
|
&-img{
|
||||||
|
display: block;
|
||||||
|
width: 2.24rem;
|
||||||
|
height: 2.24rem;
|
||||||
|
}
|
||||||
|
&-btn{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin-top: .67rem;
|
||||||
|
width: 3.80rem;
|
||||||
|
height: .6rem;
|
||||||
|
background: #EDEDED;
|
||||||
|
border-radius: .1rem;
|
||||||
|
font-size: .24rem;
|
||||||
|
font-family: Manrope;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #302D2C;
|
||||||
|
line-height: .6rem;
|
||||||
|
cursor: pointer;
|
||||||
|
&-icon{
|
||||||
|
display: inline-block;
|
||||||
|
margin-left: .2rem;
|
||||||
|
color: #342927 ;
|
||||||
|
font-size: .12rem;
|
||||||
|
}
|
||||||
|
&:hover{
|
||||||
|
background-color: #F49F00;
|
||||||
|
transition: background-color .3s ease-in;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
&-t{
|
||||||
|
padding-top: 1.38rem;
|
||||||
|
padding-bottom: .94rem;
|
||||||
|
text-align: center;
|
||||||
|
font-size: .6rem;
|
||||||
|
font-family: Manrope;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: .84rem;
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
&-c{
|
||||||
|
display: flex;
|
||||||
|
position: relative;
|
||||||
|
justify-content: flex-end;
|
||||||
|
&-l{
|
||||||
|
&-fixed{
|
||||||
|
width: calc(100% - 7.8rem);
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
transition: all .3s ease-in;
|
||||||
|
&-img{
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
max-width: 5.53rem;
|
||||||
|
max-height: 5.53rem;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
>span{
|
||||||
|
display: block;
|
||||||
|
max-width: 3.07rem;
|
||||||
|
font-size: .30rem;
|
||||||
|
font-family: Manrope;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: .6rem;
|
||||||
|
color: #9B9B9B;
|
||||||
|
margin: 0 auto;
|
||||||
|
margin-top: -.6rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-r{
|
||||||
|
max-width: 7.8rem;
|
||||||
|
flex: 1;
|
||||||
|
&-u{
|
||||||
|
overflow-x: hidden;
|
||||||
|
padding: 0 .3rem;
|
||||||
|
padding-top: .37rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
&-l{
|
||||||
|
margin-top: .27rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
&-t{
|
||||||
|
display: inline-block;
|
||||||
|
margin: 0 auto .54rem;
|
||||||
|
border: 1px solid #393939;
|
||||||
|
border-radius: .29rem;
|
||||||
|
font-size: .24rem;
|
||||||
|
font-family: Manrope;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #F49F00;
|
||||||
|
padding: 10px .35rem;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
&-d{
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
img{
|
||||||
|
display: block;
|
||||||
|
width: 2.06rem;
|
||||||
|
height: 1.33rem;
|
||||||
|
margin-bottom: .36rem;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all .3s ease-in;
|
||||||
|
&:hover{
|
||||||
|
transform: scale(1.1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 1250px) {
|
||||||
|
.portfolio{
|
||||||
|
&-c{
|
||||||
|
&-l{
|
||||||
|
&-fixed{
|
||||||
|
>span{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
.portfolio{
|
||||||
|
padding-bottom: 1.04rem;
|
||||||
|
&-card{
|
||||||
|
margin-top: 1.43rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-around;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
&-t{
|
||||||
|
padding-top: 1.43rem;
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
&-c{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
position: relative;
|
||||||
|
&-l{
|
||||||
|
&-fixed{
|
||||||
|
width: 100% !important;
|
||||||
|
img{
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
>span{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-r{
|
||||||
|
flex: 1;
|
||||||
|
&-u{
|
||||||
|
padding-top: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
&-l{
|
||||||
|
margin-top: .6rem;
|
||||||
|
&:first-child{
|
||||||
|
margin-top: -0rem;
|
||||||
|
}
|
||||||
|
&-t{
|
||||||
|
margin: 0 auto .54rem;
|
||||||
|
border-radius: .4rem;
|
||||||
|
font-size: .4rem;
|
||||||
|
padding: .10rem .35rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,103 @@
|
||||||
|
<template>
|
||||||
|
<div class="select-div">
|
||||||
|
<div class="select-div-text-wrap" @click="isShow=!isShow">
|
||||||
|
<span class="select-div-text">{{text}}</span>
|
||||||
|
<slot></slot>
|
||||||
|
</div>
|
||||||
|
<ul class="select-ul" :style="{'display':!isShow?'none':'block'}" >
|
||||||
|
<li class="select-item" :class="{'active':select===item.id}" @click="handleSelect(item)" v-for="(item,index) in options" :key="'select_'+index">{{item.name}}</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props:{
|
||||||
|
options:{
|
||||||
|
default:()=>[],
|
||||||
|
type:Array
|
||||||
|
},
|
||||||
|
select:{
|
||||||
|
default:'',
|
||||||
|
type:String
|
||||||
|
}
|
||||||
|
},
|
||||||
|
name: "PublicSelect",
|
||||||
|
computed:{
|
||||||
|
text(){
|
||||||
|
const findItem=this.options.find((item)=>item.id===this.select);
|
||||||
|
return findItem?findItem.name:''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
handleSelect(item){
|
||||||
|
this.isShow=false
|
||||||
|
this.$emit('select',item)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data(){
|
||||||
|
return {
|
||||||
|
isShow:false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.select{
|
||||||
|
&-div{
|
||||||
|
display: block;
|
||||||
|
position: relative;
|
||||||
|
&-text{
|
||||||
|
&-wrap{
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-ul{
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
transform: translateY(100%);
|
||||||
|
min-height: 2rem;
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
box-shadow: 0 .03rem .06rem rgba(0, 0, 0, 0.16);
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
&-item{
|
||||||
|
cursor: pointer;
|
||||||
|
height: .4rem;
|
||||||
|
background-color: #fff;
|
||||||
|
font-size: .16rem;
|
||||||
|
font-family: Manrope;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: .4rem;
|
||||||
|
color: #302D2C;
|
||||||
|
padding-left: .33rem;
|
||||||
|
box-sizing: border-box;
|
||||||
|
&.active{
|
||||||
|
background-color: #F49F00;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
.select{
|
||||||
|
&-ul{
|
||||||
|
bottom: -.06rem;
|
||||||
|
min-height: 4rem;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
&-item{
|
||||||
|
height: .8rem;
|
||||||
|
font-size: .26rem;
|
||||||
|
line-height: .8rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,178 @@
|
||||||
|
<template>
|
||||||
|
<div class="section-limit" >
|
||||||
|
<div class="section-limit-h5-wrap">
|
||||||
|
<!-- <ball class="b-ball"></ball>-->
|
||||||
|
<!-- <svg-icon icon-class="hstart" ></svg-icon>-->
|
||||||
|
<img v-lazy="'/images/hstart.png'" class="section-limit-start b-ball" alt="">
|
||||||
|
<div class="section-limit-div">
|
||||||
|
<h1 class="section-limit-title wow fadeInDown" >
|
||||||
|
<span>We are LightLimX</span>
|
||||||
|
<!-- <svg-icon icon-class="start" class="section-limit-title-img"></svg-icon>-->
|
||||||
|
</h1>
|
||||||
|
<div class="section-limit-c">
|
||||||
|
<p class="section-limit-title-desc wow fadeInDownBig">
|
||||||
|
We Make The
|
||||||
|
<br/>Impossible Possible.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="section-limit-flower-wrap wow fadeInDownBig">
|
||||||
|
<svg-icon icon-class="hstart" class="section-limit-start c-ball"></svg-icon>
|
||||||
|
</div>
|
||||||
|
<!-- <div class="section-limit-flower-wrap wow fadeInDown">-->
|
||||||
|
<!-- <svg-icon icon-class="flower"></svg-icon>-->
|
||||||
|
<!-- </div>-->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {assetsUri} from '~/utils/index.js'
|
||||||
|
export default {
|
||||||
|
name: "SectionLimitX",
|
||||||
|
data(){
|
||||||
|
return {
|
||||||
|
assetsUri
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.section-limit{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
/*min-height: 100vh;*/
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding-top: .96rem;
|
||||||
|
&-div{
|
||||||
|
margin-right: .16rem;
|
||||||
|
}
|
||||||
|
&-start{
|
||||||
|
}
|
||||||
|
&-flower-wrap{
|
||||||
|
margin-top: 1rem;
|
||||||
|
.svg-icon{
|
||||||
|
width: 8.95rem;
|
||||||
|
height: 6.59rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.b-ball{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.c-ball{
|
||||||
|
/*transform: scale(2.2);*/
|
||||||
|
}
|
||||||
|
&-c{
|
||||||
|
padding-top: 1.1rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
&-h5-wrap{
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
/*overflow: hidden;*/
|
||||||
|
}
|
||||||
|
&-title{
|
||||||
|
padding-top: 1.05rem;
|
||||||
|
font-size: 1.10rem;
|
||||||
|
font-family: Manrope;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #FFFFFF;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
word-break: keep-all;
|
||||||
|
white-space: nowrap;
|
||||||
|
&-img{
|
||||||
|
display: block;
|
||||||
|
width: 3.29rem;
|
||||||
|
height: 2.42rem;
|
||||||
|
margin-left: -.88rem;
|
||||||
|
}
|
||||||
|
>span{
|
||||||
|
font-size: .68rem;
|
||||||
|
font-family: Manrope;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: 1.31rem;
|
||||||
|
color: #FFFFFF;
|
||||||
|
position: relative;
|
||||||
|
word-break: keep-all;
|
||||||
|
}
|
||||||
|
&-desc{
|
||||||
|
word-break: keep-all;
|
||||||
|
white-space: nowrap;
|
||||||
|
margin-top: 0;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #FFFFFF;
|
||||||
|
font-size: .44rem;
|
||||||
|
font-family: Manrope;
|
||||||
|
line-height: .72rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 768px){
|
||||||
|
.section-limit{
|
||||||
|
padding-top: .88rem;
|
||||||
|
&-c{
|
||||||
|
padding-top: .57rem;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.b-ball{
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
&-flower-wrap{
|
||||||
|
.c-ball{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-h5-wrap{
|
||||||
|
padding-left: 0;
|
||||||
|
padding-right: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding-top: .78rem;
|
||||||
|
flex-direction: column;
|
||||||
|
.b-ball{
|
||||||
|
width: calc( 7.49rem - .3rem);
|
||||||
|
height: 5.51rem;
|
||||||
|
margin: 0 auto;
|
||||||
|
box-sizing: content-box;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-flower-wrap{
|
||||||
|
margin-top: .77rem;
|
||||||
|
.svg-icon{
|
||||||
|
width: 1.57rem;
|
||||||
|
height: .2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-title{
|
||||||
|
padding-top: 1.03rem;
|
||||||
|
font-size: .62rem;
|
||||||
|
color: #FFFFFF;
|
||||||
|
&-img{
|
||||||
|
width: 2.32rem;
|
||||||
|
height: 1.64rem;
|
||||||
|
margin-left: -.6rem;
|
||||||
|
}
|
||||||
|
>span{
|
||||||
|
font-size: .6rem;
|
||||||
|
font-family: Manrope;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: 1.31rem;
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
&-desc{
|
||||||
|
margin-top: 0;
|
||||||
|
text-align: center;
|
||||||
|
font-size: .42rem;
|
||||||
|
font-family: Manrope;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: .68rem;
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,52 @@
|
||||||
|
<template>
|
||||||
|
<div class="section-view" :style="isCssStyle">
|
||||||
|
<div class="section-view-h5-wrap">
|
||||||
|
<slot></slot>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "SectionView",
|
||||||
|
props:{
|
||||||
|
cssStyle:{
|
||||||
|
type:Object,
|
||||||
|
default:()=>{
|
||||||
|
return {}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed:{
|
||||||
|
isCssStyle(){
|
||||||
|
return this.cssStyle
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
// First we get the viewport height and we multiple it by 1% to get a value for a vh unit
|
||||||
|
// let vh = window.innerHeight * 0.01
|
||||||
|
// // Then we set the value in the --vh custom property to the root of the document
|
||||||
|
// document.documentElement.style.setProperty('--vh', `${vh}px`)
|
||||||
|
//
|
||||||
|
// // We listen to the resize event
|
||||||
|
// window.addEventListener('resize', () => {
|
||||||
|
// // We execute the same script as before
|
||||||
|
// let vh = window.innerHeight * 0.01
|
||||||
|
// console.log(vh);
|
||||||
|
// document.documentElement.style.setProperty('--vh', `${vh}px`)
|
||||||
|
// })
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.section-view{
|
||||||
|
width: 100%;
|
||||||
|
min-height: 100vh;
|
||||||
|
box-sizing: border-box;
|
||||||
|
&-h5-wrap{
|
||||||
|
display: block;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,85 @@
|
||||||
|
<template>
|
||||||
|
<div class="situation">
|
||||||
|
<h2 class="situation-t wow fadeInUp" data-wow-delay=".8s">Win-win Situation</h2>
|
||||||
|
<h3 class="situation-t situation-t-h3 wow fadeInUp" data-wow-delay=".8s">Not Just An Investor But A Partner</h3>
|
||||||
|
<p class="situation-d situation-d-first wow fadeInUp" data-wow-delay=".8s">Follow us for worthwhile content. Each week we uncover insights and learnings by entrepreneurs for entrepreneurs.</p>
|
||||||
|
<p class="situation-d situation-d-second wow fadeInUp" data-wow-delay=".8s">In order to ensure multi-party benefits, we will pool our capabilities and resources with our partners to gain insight into market opportunities, and to provide differentiated investment programs to our investors, as well as innovative solutions to our target enterprises.
|
||||||
|
</p>
|
||||||
|
<slot></slot>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {
|
||||||
|
assetsUri
|
||||||
|
} from "../../utils";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "situation",
|
||||||
|
data(){
|
||||||
|
return {
|
||||||
|
assetsUri
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.situation{
|
||||||
|
&-t,&-d{
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-t{
|
||||||
|
font-size: .48rem;
|
||||||
|
font-family: Manrope;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: .84rem;
|
||||||
|
color: #000000;
|
||||||
|
&:first-child{
|
||||||
|
padding-top: 1.38rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-d{
|
||||||
|
margin: 0 auto;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 9.19rem;
|
||||||
|
font-size: .24rem;
|
||||||
|
font-family: Manrope;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: .48rem;
|
||||||
|
color: #302D2C;
|
||||||
|
&-first{
|
||||||
|
padding-top: .55rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
.situation{
|
||||||
|
&-t{
|
||||||
|
margin: 0 auto;
|
||||||
|
max-width: 6.86rem;
|
||||||
|
font-size: .6rem;
|
||||||
|
line-height: .62rem;
|
||||||
|
&-h3{
|
||||||
|
margin-top: -.3rem;
|
||||||
|
}
|
||||||
|
&:first-child{
|
||||||
|
padding-top: 1.43rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-d{
|
||||||
|
font-size: .24rem;
|
||||||
|
line-height: .34rem;
|
||||||
|
max-width: 6.9rem;
|
||||||
|
&-first{
|
||||||
|
padding-top: .27rem;
|
||||||
|
}
|
||||||
|
&-second{
|
||||||
|
margin-top: -.28rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,72 @@
|
||||||
|
<template>
|
||||||
|
<div class="startup-block">
|
||||||
|
<h2 class="startup-block-h2 wow fadeInUp" data-wow-delay=".3s">
|
||||||
|
Accelerator Your Startup
|
||||||
|
</h2>
|
||||||
|
<p class="startup-block-p wow fadeInUp" data-wow-delay=".3s">Investing Beyond Investment. From aspiring founders to early stage entrepreneurs,LightLimX are dedicated to creating a thriving atmosphere for all pioneers within our ecosystem.</p>
|
||||||
|
<small class="startup-block-small wow fadeInUp" data-wow-delay=".3s">As serial entrepreneurs, we know what it takes to build innovative businesses from scratch in the difficult markets of Crypto,and we have built a team of 40+ experts, including economists, quants, developers, lawyers, UX experts, and more to provide active investor side support through mentorship and network integration. We know the landscape and keep up with the latest developments.Therefore, we can guide teams when it comes to ideation, tokenomics, and communication.We strive to leverage our experience to help ventures grow from Seed Stage to later round of capital and maximise their value creation.The blockchain world is moving fast,and we help you move faster.</small>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "StartupBlock"
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style scoped lang="less">
|
||||||
|
.startup-block{
|
||||||
|
&-h2{
|
||||||
|
padding-top: 1.83rem;
|
||||||
|
max-width:8.12rem;
|
||||||
|
margin: 0 auto;
|
||||||
|
font-size: .76rem;
|
||||||
|
font-family: Manrope;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: 1.1rem;
|
||||||
|
color: #FFFFFF;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
&-p{
|
||||||
|
max-width: 6.34rem;
|
||||||
|
text-align: center;
|
||||||
|
margin: 0 auto;
|
||||||
|
margin-top: 1rem;
|
||||||
|
font-size: .24rem;
|
||||||
|
font-family: Manrope;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: .44rem;
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
&-small{
|
||||||
|
display: block;
|
||||||
|
margin-top: .54rem;
|
||||||
|
text-align: center;
|
||||||
|
font-size: .14rem;
|
||||||
|
font-family: Manrope;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: .28rem;
|
||||||
|
color: #9B9B9B;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
.startup-block{
|
||||||
|
&-h2{
|
||||||
|
padding-top: 1.6rem;
|
||||||
|
max-width:6.12rem;
|
||||||
|
font-size: .6rem;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
&-p{
|
||||||
|
max-width: 6.9rem;
|
||||||
|
margin-top: 1.77rem;
|
||||||
|
font-size: .24rem;
|
||||||
|
line-height: .4rem;
|
||||||
|
}
|
||||||
|
&-small{
|
||||||
|
margin-top: 2.26rem;
|
||||||
|
font-size: .24rem;
|
||||||
|
line-height: .34rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,207 @@
|
||||||
|
<template>
|
||||||
|
<div class="startup-content">
|
||||||
|
<h2 class="startup-content-h2 wow fadeInUp" data-wow-delay=".3s">Join Accelerator</h2>
|
||||||
|
<p class="startup-content-p wow fadeInUp" data-wow-delay=".3s">Each year,we choose over 30 early-stage programs to join our 3-month mentorship-driven accelerators.Once you're selected for an accelerator, you'll be part of the LightLimX community for life.That means you have a hyperconnected platform to expand your business and expand your network with access to a talented group of founders, investors, mentors, and industry leaders.</p>
|
||||||
|
<span class="startup-content-btn wow fadeInUp" @click="$router.push({path:'/contact'})" data-wow-delay=".3s">Apply Now</span>
|
||||||
|
<h2 class="startup-content-h2 startup-content-h2-2 wow fadeInUp" data-wow-delay=".3s">
|
||||||
|
Your Startup Needs Are Covered
|
||||||
|
</h2>
|
||||||
|
<p class="startup-content-desc wow fadeInUp" data-wow-delay=".3s">
|
||||||
|
Modeled after the most effective global programs and built by accelerator veterans, LightLimX will bring you exactly what you need, when you need it.
|
||||||
|
</p>
|
||||||
|
<ul class="startup-content-ul">
|
||||||
|
<li class="startup-content-li wow fadeInUp" data-wow-delay=".5s" v-for="(item,index) in staticData" :key="index+'_startup'">
|
||||||
|
<img v-lazy="assetsUri(item.img)" v-if="item.img" class="startup-content-li-img" alt="" />
|
||||||
|
<h3 class="startup-content-li-h3" >{{item.title}}</h3>
|
||||||
|
<p class="startup-content-li-p" v-html="item.desc"></p>
|
||||||
|
</li>
|
||||||
|
<li class="startup-content-li" style="opacity: 0" v-if="staticData.length%3==2">
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {
|
||||||
|
assetsUri
|
||||||
|
} from "../../utils";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "StartupContent",
|
||||||
|
props:{
|
||||||
|
staticData:{
|
||||||
|
type:Array,
|
||||||
|
default:()=>[]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data(){
|
||||||
|
return {
|
||||||
|
assetsUri,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.startup-content{
|
||||||
|
&-desc{
|
||||||
|
font-size: .24rem;
|
||||||
|
font-family: Manrope;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: .44rem;
|
||||||
|
text-align: center;
|
||||||
|
color: #302D2C;
|
||||||
|
max-width: 9.67rem;
|
||||||
|
margin: .72rem auto 0;
|
||||||
|
}
|
||||||
|
&-h2{
|
||||||
|
padding-top: 1.5rem;
|
||||||
|
font-size: .6rem;
|
||||||
|
font-family: Manrope;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: 1.1rem;
|
||||||
|
color: #302D2C;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
&-p{
|
||||||
|
margin-top: .72rem;
|
||||||
|
font-size: .2rem;
|
||||||
|
font-family: Manrope;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: .4rem;
|
||||||
|
color: #302D2C;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
&-btn{
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
margin: 1.22rem auto 0;
|
||||||
|
width: 3.24rem;
|
||||||
|
height: .6rem;
|
||||||
|
border: 1px solid #9B9B9B;
|
||||||
|
border-radius: .1rem;
|
||||||
|
font-size: .24rem;
|
||||||
|
font-family: Manrope;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #302D2C;
|
||||||
|
cursor: pointer;
|
||||||
|
margin-bottom: .7rem;
|
||||||
|
&:hover{
|
||||||
|
background-color: #F49F00;
|
||||||
|
transition: background-color .3s ease-in;
|
||||||
|
border-color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-ul{
|
||||||
|
margin-top: .93rem;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
&-li{
|
||||||
|
cursor: pointer;
|
||||||
|
width: 4.09rem;
|
||||||
|
height: 4.23rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
padding-top: .76rem;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding-left: .29rem;
|
||||||
|
padding-right: .29rem;
|
||||||
|
margin-bottom: .32rem;
|
||||||
|
transition: all .3s ease-in;
|
||||||
|
&-h3{
|
||||||
|
margin-top: .32rem;
|
||||||
|
font-size: .24rem;
|
||||||
|
font-family: Manrope;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #342927;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
&-p{
|
||||||
|
margin-top: .32rem;
|
||||||
|
font-size: .16rem;
|
||||||
|
font-family: Manrope;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: .32rem;
|
||||||
|
color: #302D2C;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
&-img{
|
||||||
|
display: block;
|
||||||
|
width: .88rem;
|
||||||
|
height: .88rem;
|
||||||
|
}
|
||||||
|
&:hover{
|
||||||
|
transform: scale(1.01);
|
||||||
|
box-shadow: 0 .03rem .2rem rgba(0, 0, 0, 0.06);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 820px) {
|
||||||
|
.startup-content{
|
||||||
|
&-ul{
|
||||||
|
justify-content: space-around;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
.startup-content{
|
||||||
|
&-desc{
|
||||||
|
font-size: .3rem;
|
||||||
|
line-height: .4rem;
|
||||||
|
max-width: 6.9rem;
|
||||||
|
margin: .28rem auto 0;
|
||||||
|
}
|
||||||
|
&-h2{
|
||||||
|
padding-top: .5rem;
|
||||||
|
&-2{
|
||||||
|
max-width: 6.5rem;
|
||||||
|
margin: 0 auto;
|
||||||
|
line-height: .7rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-p{
|
||||||
|
margin-top: .28rem;
|
||||||
|
font-size: .24rem;
|
||||||
|
line-height: .4rem;
|
||||||
|
padding: 0 .3rem;
|
||||||
|
}
|
||||||
|
&-btn{
|
||||||
|
margin: .65rem auto 0;
|
||||||
|
width: 5.18rem;
|
||||||
|
height: .96rem;
|
||||||
|
font-size: .24rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
&-ul{
|
||||||
|
margin-top: .49rem;
|
||||||
|
}
|
||||||
|
&-li{
|
||||||
|
margin: 0 .3rem;
|
||||||
|
width: 100%;
|
||||||
|
min-height: 7rem;
|
||||||
|
padding-top: 1.2rem;
|
||||||
|
padding-left: .29rem;
|
||||||
|
padding-right: .29rem;
|
||||||
|
margin-bottom: .32rem;
|
||||||
|
&-h3{
|
||||||
|
margin-top: .73rem;
|
||||||
|
font-size: .4rem;
|
||||||
|
}
|
||||||
|
&-p{
|
||||||
|
margin-top: .6rem;
|
||||||
|
font-size: .24rem;
|
||||||
|
line-height: .34rem;
|
||||||
|
}
|
||||||
|
&-img{
|
||||||
|
width: 2rem;
|
||||||
|
height: 2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,43 @@
|
||||||
|
<template>
|
||||||
|
<svg :class="svgClass" v-on="$listeners">
|
||||||
|
<use :xlink:href="iconName" />
|
||||||
|
</svg>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'SvgIcon',
|
||||||
|
props: {
|
||||||
|
iconClass: {
|
||||||
|
type: String,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
className: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
iconName () {
|
||||||
|
return `#icon-${this.iconClass}`
|
||||||
|
},
|
||||||
|
svgClass () {
|
||||||
|
if (this.className) {
|
||||||
|
return 'svg-icon ' + this.className
|
||||||
|
} else {
|
||||||
|
return 'svg-icon'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.svg-icon {
|
||||||
|
width: 1em;
|
||||||
|
height: 1em;
|
||||||
|
vertical-align: -0.15em;
|
||||||
|
fill:currentColor;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,22 @@
|
||||||
|
module.exports = {
|
||||||
|
apps : [{
|
||||||
|
name: "Limix",
|
||||||
|
script: "./node_modules/nuxt/bin/nuxt.js",
|
||||||
|
// watch: ["src"],
|
||||||
|
//ignore_watch: ["node_modules", "logger"],
|
||||||
|
//max_memory_restart: "300M",
|
||||||
|
exec_mode: "cluster", // 开启多线程模式，用于负载均衡
|
||||||
|
instances: "max", // 启用多少个实例，可用于负载均衡
|
||||||
|
//autorestart: true,
|
||||||
|
//pm2:true,
|
||||||
|
args: 'start',
|
||||||
|
//kill_timeout: 3000,
|
||||||
|
//instance_var: "INSTANCE_ID",
|
||||||
|
//env: {
|
||||||
|
// NODE_ENV: "development",
|
||||||
|
//},
|
||||||
|
//env_production: {
|
||||||
|
// NODE_ENV: "production",
|
||||||
|
//}
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,44 @@
|
||||||
|
<template>
|
||||||
|
<div class="my-layout" v-if="loading" >
|
||||||
|
<my-header ></my-header>
|
||||||
|
<Nuxt />
|
||||||
|
<my-footer></my-footer>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
import MyHeader from "../components/MyHeader/index";
|
||||||
|
import MyFooter from "../components/MyFooter/index";
|
||||||
|
export default {
|
||||||
|
name: "index",
|
||||||
|
components: {MyFooter, MyHeader },
|
||||||
|
data(){
|
||||||
|
return {
|
||||||
|
loading:false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mixins:[],
|
||||||
|
mounted(){
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.$nuxt.$loading.start()
|
||||||
|
setTimeout(async () =>{
|
||||||
|
await this.$nuxt.$loading.finish();
|
||||||
|
this.loading=!this.$nuxt.$loading.getLoadingState();
|
||||||
|
}, 2000)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
async asyncData(data) {
|
||||||
|
const { params, $http }=data;
|
||||||
|
// const post = await $http.$get(`https://api.nuxtjs.dev/posts/${params.id}`)
|
||||||
|
return { post:'121' }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.my-layout{
|
||||||
|
display: block;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
export default function ({ store, redirect }) {
|
||||||
|
// If the user is not authenticated
|
||||||
|
// if (store.state.loading) {
|
||||||
|
// return redirect('/loading')
|
||||||
|
// }
|
||||||
|
// if (!store.state.loading) {
|
||||||
|
// return redirect('/')
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,21 @@
|
||||||
|
export default function ({ isHMR, app, store, route, params, error, redirect }) {
|
||||||
|
const defaultLocale = app.i18n.fallbackLocale
|
||||||
|
// If middleware is called from hot module replacement, ignore it
|
||||||
|
if (isHMR) return
|
||||||
|
// Get locale from params
|
||||||
|
const locale = params.lang || defaultLocale
|
||||||
|
if (store.state.locales.indexOf(locale) === -1) {
|
||||||
|
return error({ message: 'This page could not be found.', statusCode: 404 })
|
||||||
|
}
|
||||||
|
// Set locale
|
||||||
|
store.commit('SET_LANG', locale || 'en-US')
|
||||||
|
app.i18n.locale = store.state.locale
|
||||||
|
// If route is /<defaultLocale>/... -> redirect to /...
|
||||||
|
if (locale === defaultLocale && route.fullPath.indexOf('/' + defaultLocale) === 0) {
|
||||||
|
const toReplace = '^/' + defaultLocale + (route.fullPath.indexOf('/' + defaultLocale + '/') === 0 ? '/' : '')
|
||||||
|
const re = new RegExp(toReplace)
|
||||||
|
return redirect(
|
||||||
|
route.fullPath.replace(re, '/')
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,130 @@
|
||||||
|
import redirectSSL from 'redirect-ssl'
|
||||||
|
import serveStatic from 'serve-static'
|
||||||
|
import {resolve} from "path";
|
||||||
|
const baseUrl = process.env.BASE_URL || 'https://api.lightlimx.live/api'
|
||||||
|
export default {
|
||||||
|
loading: '~/components/Loading/index.vue',
|
||||||
|
serverMiddleware: [
|
||||||
|
// redirectSSL.create({
|
||||||
|
// enabled: process.env.NODE_ENV === 'production'
|
||||||
|
// }),
|
||||||
|
{ path: '/static', handler: serveStatic(__dirname + '/static') }
|
||||||
|
],
|
||||||
|
telemetry:false,
|
||||||
|
publicRuntimeConfig: {
|
||||||
|
baseURL: baseUrl,
|
||||||
|
axios: {
|
||||||
|
baseURL: baseUrl
|
||||||
|
}
|
||||||
|
},
|
||||||
|
env: {
|
||||||
|
baseUrl: process.env.BASE_URL || 'http://localhost:3000',
|
||||||
|
apiUrl: '/api'
|
||||||
|
},
|
||||||
|
alias: {
|
||||||
|
'@': resolve(__dirname),
|
||||||
|
'~': resolve(__dirname),
|
||||||
|
style: resolve(__dirname, './assets/style'),
|
||||||
|
images: resolve(__dirname, './assets/images'),
|
||||||
|
data: resolve(__dirname, './assets/data')
|
||||||
|
},
|
||||||
|
// Global page headers: https://go.nuxtjs.dev/config-head
|
||||||
|
head: {
|
||||||
|
title: 'LightLimX',
|
||||||
|
htmlAttrs: {
|
||||||
|
lang: 'en',
|
||||||
|
},
|
||||||
|
bodyAttrs: {
|
||||||
|
class: 'h5-scroll-bar'
|
||||||
|
},
|
||||||
|
meta: [
|
||||||
|
{ charset: 'utf-8' },
|
||||||
|
//width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no
|
||||||
|
{ name: 'viewport', content: 'width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui,viewport-fit=cover' },
|
||||||
|
{ hid: 'description', name: 'description', content: '' },
|
||||||
|
{ name: 'format-detection', content: 'telephone=no' }
|
||||||
|
],
|
||||||
|
link: [
|
||||||
|
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.png' }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
|
||||||
|
// Global CSS: https://go.nuxtjs.dev/config-css
|
||||||
|
css: [
|
||||||
|
'~/assets/style/reset.less',
|
||||||
|
'~/assets/style/animate.css',
|
||||||
|
'vant/lib/index.css'
|
||||||
|
],
|
||||||
|
|
||||||
|
// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
|
||||||
|
plugins: [
|
||||||
|
{ src: '~/plugins/remJs.js', mode: 'client' },
|
||||||
|
'@/plugins/vant',
|
||||||
|
'~/plugins/axios.js',
|
||||||
|
'~/plugins/vueTooltip.js',
|
||||||
|
// { src: '~/plugins/vueAnimate.js', mode: 'client' },
|
||||||
|
{ src: '~/plugins/vueClipboard.js', mode: 'client' },
|
||||||
|
{ src: '~/plugins/lottieWeb.js', mode: 'client' },
|
||||||
|
{ src: '~/plugins/svgIcon.js', mode: 'client' },
|
||||||
|
{ src: '~/plugins/wow.js', mode: 'client' },
|
||||||
|
{ src: '~/plugins/element.js', mode: 'client' },
|
||||||
|
],
|
||||||
|
router: {
|
||||||
|
// base: '/assets/',
|
||||||
|
middleware: ['authenticated']
|
||||||
|
},
|
||||||
|
// Auto import components: https://go.nuxtjs.dev/config-components
|
||||||
|
components: true,
|
||||||
|
|
||||||
|
// Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
|
||||||
|
buildModules: [
|
||||||
|
],
|
||||||
|
|
||||||
|
// Modules: https://go.nuxtjs.dev/config-modules
|
||||||
|
modules: [
|
||||||
|
['nuxt-svg-sprite-loader', {
|
||||||
|
symbolId: 'icon-[name]'
|
||||||
|
}],
|
||||||
|
'@nuxtjs/axios'
|
||||||
|
],
|
||||||
|
|
||||||
|
// Build Configuration: https://go.nuxtjs.dev/config-build
|
||||||
|
build: {
|
||||||
|
transpile: ['vue-tooltip'],
|
||||||
|
extractCSS: {
|
||||||
|
// allChunks: true,
|
||||||
|
filename: '[name].css',
|
||||||
|
chunkFilename: '[id].css',
|
||||||
|
ignoreOrder: true
|
||||||
|
},
|
||||||
|
babel: {
|
||||||
|
plugins: [
|
||||||
|
[
|
||||||
|
'component',
|
||||||
|
{
|
||||||
|
'libraryName': 'element-ui',
|
||||||
|
// 'style': false // 不引入对应的css文件
|
||||||
|
'styleLibraryName': 'theme-chalk'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
]
|
||||||
|
},
|
||||||
|
extend (config, { isDev, isClient }) {
|
||||||
|
if (isClient) {
|
||||||
|
// 排除 nuxt 原配置的影响,Nuxt 默认有vue-loader,会处理svg,img等
|
||||||
|
// 找到匹配.svg的规则,然后将存放svg文件的目录排除
|
||||||
|
const svgRule = config.module.rules.find(rule => rule.test.test('.svg'))
|
||||||
|
svgRule.exclude = [resolve('assets/svg')]
|
||||||
|
// 添加loader规则
|
||||||
|
}
|
||||||
|
config.module.rules.push({
|
||||||
|
test: /\.(mpg|ts|pm4)$/i,
|
||||||
|
loader: 'url-loader',
|
||||||
|
options: {
|
||||||
|
outputPath: '/static/video/',
|
||||||
|
publicPath: '/static/video/'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,49 @@
|
||||||
|
{
|
||||||
|
"name": "demo",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"dev": "nuxt",
|
||||||
|
"build": "nuxt build",
|
||||||
|
"start": "nuxt start",
|
||||||
|
"generate": "nuxt generate",
|
||||||
|
"pm2": "pm2 start",
|
||||||
|
"deylop": "node ./script/deploy/index.js"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@nuxtjs/axios": "^5.13.6",
|
||||||
|
"animate.css": "^4.1.1",
|
||||||
|
"core-js": "^3.19.3",
|
||||||
|
"element-ui": "^2.15.6",
|
||||||
|
"gsap": "^3.9.1",
|
||||||
|
"jquery": "^3.6.0",
|
||||||
|
"js-cookie": "^3.0.1",
|
||||||
|
"nuxt": "^2.15.8",
|
||||||
|
"vant": "^2.12.36",
|
||||||
|
"vue": "^2.6.14",
|
||||||
|
"vue-pagination-2": "^3.0.91",
|
||||||
|
"vue-server-renderer": "^2.6.14",
|
||||||
|
"vue-template-compiler": "^2.6.14",
|
||||||
|
"webpack": "^4.46.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"archiver": "^4.0.1",
|
||||||
|
"babel-plugin-component": "^1.1.1",
|
||||||
|
"chalk": "^4.0.0",
|
||||||
|
"crypto-js": "^4.1.1",
|
||||||
|
"fs-extra": "^9.0.0",
|
||||||
|
"less": "^4.1.2",
|
||||||
|
"less-loader": "^7.1.0",
|
||||||
|
"lottie-web": "^5.8.1",
|
||||||
|
"lottie-web-vue": "^1.2.1",
|
||||||
|
"moment": "^2.29.1",
|
||||||
|
"node-cmd": "^5.0.0",
|
||||||
|
"node-ssh": "^8.0.0",
|
||||||
|
"nuxt-svg-sprite-loader": "^2.0.7",
|
||||||
|
"redirect-ssl": "^3.0.0",
|
||||||
|
"svg-sprite-loader": "^6.0.11",
|
||||||
|
"v-tooltip": "^2.1.3",
|
||||||
|
"vue-animate-plugin": "^1.0.1",
|
||||||
|
"vue-clipboard2": "^0.3.3"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,229 @@
|
||||||
|
<template>
|
||||||
|
<div class="fullpage-container">
|
||||||
|
<SectionView>
|
||||||
|
<div class="LP-login-conten">
|
||||||
|
<h1>Sign In</h1>
|
||||||
|
<div class="LP-login-input-conten">
|
||||||
|
<div class="LP-login-input"><p>Email address <span style="color:#F49F00">*</span></p><input type="text" name="" id=""></div>
|
||||||
|
<div class="LP-login-input"><p class="Password">Password<span style="color:#F49F00">*</span></p><input class="password-font" type="password" name="" id=""></div></div>
|
||||||
|
<div class="LP-login-confirm-conten">
|
||||||
|
<div class="confirm">
|
||||||
|
<span>LOGIN</span>
|
||||||
|
</div>
|
||||||
|
<p>Forgot password?</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</SectionView>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import animateMixin from '../../utils/animateMixin'
|
||||||
|
import SectionView from "../../components/SectionView/index";
|
||||||
|
export default {
|
||||||
|
name: 'IndexPage',
|
||||||
|
layout:'index',
|
||||||
|
components:{
|
||||||
|
SectionView
|
||||||
|
},
|
||||||
|
mixins:[animateMixin],
|
||||||
|
head() {
|
||||||
|
return {
|
||||||
|
title: this.title,
|
||||||
|
meta: [
|
||||||
|
{
|
||||||
|
hid: 'description',
|
||||||
|
name: 'description',
|
||||||
|
content: 'My custom description'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
async asyncData(data) {
|
||||||
|
const { params, $http }=data;
|
||||||
|
// const post = await $http.$get(`https://api.nuxtjs.dev/posts/${params.id}`)
|
||||||
|
return { post:'121' }
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
title:'LightLimX-LPLogin',
|
||||||
|
|
||||||
|
opts: {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.LP-login-conten{
|
||||||
|
margin-top: 1.9rem;
|
||||||
|
h1{
|
||||||
|
font-size: 0.36rem;
|
||||||
|
font-family: Manrope;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #302D2C;
|
||||||
|
opacity: 1;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.LP-login-input-conten{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 1.2rem;
|
||||||
|
.LP-login-input{
|
||||||
|
margin: 0 auto;
|
||||||
|
input{
|
||||||
|
padding-left: 0.2rem;
|
||||||
|
font-size: 0.2rem;
|
||||||
|
font-family: Manrope;
|
||||||
|
font-weight: 400;
|
||||||
|
width: 4.3rem;
|
||||||
|
height: 0.58rem;
|
||||||
|
display: block;
|
||||||
|
background: #FFFFFF;
|
||||||
|
border: 1px solid #9B9B9B;
|
||||||
|
opacity: 1;
|
||||||
|
border-radius: 0.1rem;
|
||||||
|
margin-top: 0.15rem;
|
||||||
|
}
|
||||||
|
.password-font{
|
||||||
|
font-family: none;
|
||||||
|
}
|
||||||
|
input:focus {
|
||||||
|
border: 1px solid #F49F00;
|
||||||
|
box-shadow: 0px 3px 6px rgba(244, 159, 0, 0.12);
|
||||||
|
}
|
||||||
|
p{
|
||||||
|
font-size: 0.16rem;
|
||||||
|
font-family: Manrope;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #302D2C;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
.Password{
|
||||||
|
margin-top: 0.35rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.LP-login-confirm-conten{
|
||||||
|
margin-top: 0.95rem;
|
||||||
|
.confirm{
|
||||||
|
margin: 0 auto;
|
||||||
|
cursor: pointer;
|
||||||
|
width: 2.42rem;
|
||||||
|
height: 0.58rem;
|
||||||
|
background: #F49F00;
|
||||||
|
opacity: 1;
|
||||||
|
border-radius: 0.1rem;
|
||||||
|
span{
|
||||||
|
display: block;
|
||||||
|
font-size: 0.2rem;
|
||||||
|
font-family: Manrope;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 0.58rem;
|
||||||
|
color: #302D2C;
|
||||||
|
opacity: 1;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
p{
|
||||||
|
text-align: center;
|
||||||
|
font-size: 0.14rem;
|
||||||
|
font-family: Manrope;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #000000;
|
||||||
|
opacity: 1;
|
||||||
|
margin-top: 0.25rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
.LP-login-conten{
|
||||||
|
margin-top: 1.9rem;
|
||||||
|
h1{
|
||||||
|
font-size: 0.6rem;
|
||||||
|
font-family: Manrope;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #302D2C;
|
||||||
|
opacity: 1;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.LP-login-input-conten{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
.LP-login-input{
|
||||||
|
margin: 0 auto;
|
||||||
|
input{
|
||||||
|
padding-left: 0.2rem;
|
||||||
|
font-size: 0.2rem;
|
||||||
|
font-family: Manrope;
|
||||||
|
font-weight: 400;
|
||||||
|
width: 6.5rem;
|
||||||
|
height: 0.8rem;
|
||||||
|
display: block;
|
||||||
|
background: #FFFFFF;
|
||||||
|
border: 1px solid #9B9B9B;
|
||||||
|
opacity: 1;
|
||||||
|
border-radius: 0.1rem;
|
||||||
|
margin-top: 0.15rem;
|
||||||
|
}
|
||||||
|
.password-font{
|
||||||
|
font-family: none;
|
||||||
|
}
|
||||||
|
input:focus {
|
||||||
|
border: 1px solid #F49F00;
|
||||||
|
box-shadow: 0px 3px 6px rgba(244, 159, 0, 0.12);
|
||||||
|
}
|
||||||
|
p{
|
||||||
|
font-size: 0.3rem;
|
||||||
|
font-family: Manrope;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #302D2C;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
.Password{
|
||||||
|
margin-top: 0.35rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.LP-login-confirm-conten{
|
||||||
|
margin-top: 0.95rem;
|
||||||
|
.confirm{
|
||||||
|
margin: 0 auto;
|
||||||
|
cursor: pointer;
|
||||||
|
width: 5.18rem;
|
||||||
|
height: 0.96rem;
|
||||||
|
background: #F49F00;
|
||||||
|
opacity: 1;
|
||||||
|
border-radius: 0.1rem;
|
||||||
|
span{
|
||||||
|
display: block;
|
||||||
|
font-size: 0.38rem;
|
||||||
|
font-family: Manrope;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: 0.96rem;
|
||||||
|
color: #302D2C;
|
||||||
|
opacity: 1;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
p{
|
||||||
|
text-align: center;
|
||||||
|
font-size: 0.24rem;
|
||||||
|
font-family: Manrope;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #000000;
|
||||||
|
opacity: 1;
|
||||||
|
margin-top: 0.25rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,115 @@
|
||||||
|
<template>
|
||||||
|
<div class="fullpage-container">
|
||||||
|
|
||||||
|
<section-view :css-style="{'background-color':'#fff'}">
|
||||||
|
<div class="Details-conten-img">
|
||||||
|
<img v-lazy="assetsUri('images/ContactUs/Details.png')" alt="">
|
||||||
|
<div class="Details-text">
|
||||||
|
<p>Thank you for submitting</p>
|
||||||
|
<p>the information.</p>
|
||||||
|
<p>We will contact you as soon as possible.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</section-view>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import animateMixin from '../../utils/animateMixin'
|
||||||
|
import SectionView from "../../components/SectionView/index";
|
||||||
|
import {assetsUri} from '~/utils/index.js'
|
||||||
|
export default {
|
||||||
|
name: 'IndexPage',
|
||||||
|
layout:'index',
|
||||||
|
components:{
|
||||||
|
SectionView
|
||||||
|
},
|
||||||
|
mixins:[animateMixin],
|
||||||
|
head() {
|
||||||
|
return {
|
||||||
|
title: this.title,
|
||||||
|
meta: [
|
||||||
|
{
|
||||||
|
hid: 'description',
|
||||||
|
name: 'description',
|
||||||
|
content: 'My custom description'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
async asyncData(data) {
|
||||||
|
const { params, $http }=data;
|
||||||
|
// const post = await $http.$get(`https://api.nuxtjs.dev/posts/${params.id}`)
|
||||||
|
return { post:'121' }
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
assetsUri,
|
||||||
|
title:'LightLimX',
|
||||||
|
|
||||||
|
opts: {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.Details-conten-img{
|
||||||
|
margin-top: 0.96rem;
|
||||||
|
padding-top: 2rem;
|
||||||
|
img{
|
||||||
|
display: block;
|
||||||
|
width: 20%;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
.Details-text{
|
||||||
|
margin-top: .6rem;
|
||||||
|
p{
|
||||||
|
font-size: 0.28rem;
|
||||||
|
font-family: Manrope;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: 0.5rem;
|
||||||
|
color: #302D2C;
|
||||||
|
opacity: 1;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@media screen and (max-width: 768px){
|
||||||
|
.section-view{
|
||||||
|
min-height: 0vh;
|
||||||
|
}
|
||||||
|
.Details-conten-img{
|
||||||
|
margin-top: 0.96rem;
|
||||||
|
padding-top: 2rem;
|
||||||
|
padding-bottom: 3rem;
|
||||||
|
img{
|
||||||
|
display: block;
|
||||||
|
width: 30%;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
.Details-text{
|
||||||
|
margin-top: .6rem;
|
||||||
|
p{
|
||||||
|
font-size: 0.28rem;
|
||||||
|
font-family: Manrope;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: 0.5rem;
|
||||||
|
color: #302D2C;
|
||||||
|
opacity: 1;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,487 @@
|
||||||
|
<template>
|
||||||
|
<div class="fullpage-container">
|
||||||
|
<section-view :css-style="{'background-color':'#000'}" v-lazy:background-image="assetsUri('images/ContactUs/ContactUs_banner.png')" class="contactUs-section-view">
|
||||||
|
<div class="contactUs-div wow fadeInUp">
|
||||||
|
<img v-lazy="assetsUri('images/ContactUs/ContactUs_c.png')" alt="">
|
||||||
|
<h2 class="contactUs-div-t">Contact Us</h2>
|
||||||
|
</div>
|
||||||
|
</section-view>
|
||||||
|
<section-view :css-style="{'background-color':'#fff'}">
|
||||||
|
<div class="contactUs-Why-conten wow fadeInUpBig" data-wow-delay=".8s" >
|
||||||
|
<h1 >Why Partner with us?</h1><p >The original intention of LightLimX is "Create miracles and lead the future together with entrepreneurs". We are investors and entrepreneurs,full of passion, active exploration and persistence in entrepreneurship.Such spirit makes LightLimX and investees the most solid partners. Such core value is also reflected in the value we live by.</p>
|
||||||
|
</div>
|
||||||
|
<div class="contactUs-Why-brie wow fadeInUpBig" data-wow-delay=".8s" >
|
||||||
|
<p >Please contact us if you have an innovative idea.</p>
|
||||||
|
<p >We are willing to turn your dream into real business with our support.</p>
|
||||||
|
</div>
|
||||||
|
<div class="situation-h1 wow fadeInUpBig">Email:info@lightlimx.com</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="LP-login-input-conten ">
|
||||||
|
<div class="LP-login-input wow fadeInUpBig" data-wow-delay=".3s" >
|
||||||
|
<p>Name<span style="color:#F49F00">*</span></p>
|
||||||
|
<input class="inputClass" v-model="from.name" type="text" name="" id="">
|
||||||
|
</div>
|
||||||
|
<div class="LP-login-input wow fadeInUpBig" data-wow-delay=".3s">
|
||||||
|
<p class="Password">mail<span style="color:#F49F00">*</span></p>
|
||||||
|
<input v-model="from.email" class="password-font inputClass" name="" id="">
|
||||||
|
</div>
|
||||||
|
<div class="LP-login-input wow fadeInUpBig" data-wow-delay=".3s">
|
||||||
|
<p class="Password">Organization<span style="color:#F49F00">*</span></p>
|
||||||
|
<input v-model="from.company" class="password-font inputClass" name="" id="">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="LP-login-input wow fadeInUpBig" data-wow-delay=".3s">
|
||||||
|
<p class="Password">Project<span style="color:#F49F00">*</span></p>
|
||||||
|
<public-select @select="handleSelect" class="password-font inputClass" :select.sync="from.project_id" :options="staticData">
|
||||||
|
<div class="svg-icon-wrap" style="padding-right: .35rem">
|
||||||
|
<svg-icon icon-class="cuarr"></svg-icon>
|
||||||
|
</div>
|
||||||
|
</public-select>
|
||||||
|
</div>
|
||||||
|
<div class="LP-login-input wow fadeInUpBig" data-wow-delay=".3s">
|
||||||
|
<p class="Password">More informationt<span style="color:#F49F00">*</span></p>
|
||||||
|
<div class="input-btn-conten">
|
||||||
|
<van-field
|
||||||
|
v-model="from.information"
|
||||||
|
class="input-btn-conten-textarea"
|
||||||
|
rows="1"
|
||||||
|
autosize
|
||||||
|
label=""
|
||||||
|
type="textarea"
|
||||||
|
placeholder=""
|
||||||
|
/>
|
||||||
|
<div class="input-btn-conten-box">
|
||||||
|
<img v-lazy="assetsUri('images/ContactUs/file.png')" alt="">
|
||||||
|
<van-uploader :after-read="onRead" :accept="'.pdf'">
|
||||||
|
<span class="btnx_hover">{{file_name}}</span>
|
||||||
|
</van-uploader>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="LP-login-input-btnFile wow fadeInUp" data-wow-delay=".3s">
|
||||||
|
<span @click="contactUsBtn">Submit</span>
|
||||||
|
</div>
|
||||||
|
</section-view>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import animateMixin from '../../utils/animateMixin'
|
||||||
|
import SectionView from "../../components/SectionView/index";
|
||||||
|
import {assetsUri} from '~/utils/index.js'
|
||||||
|
import PublicSelect from "../../components/PublicSelect/index";
|
||||||
|
export default {
|
||||||
|
name: 'IndexPage',
|
||||||
|
layout:'index',
|
||||||
|
mixins:[animateMixin],
|
||||||
|
components:{
|
||||||
|
PublicSelect,
|
||||||
|
SectionView
|
||||||
|
},
|
||||||
|
head() {
|
||||||
|
return {
|
||||||
|
title: this.title,
|
||||||
|
meta: [
|
||||||
|
{
|
||||||
|
hid: 'description',
|
||||||
|
name: 'description',
|
||||||
|
content: 'My custom description'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
async asyncData(data) {
|
||||||
|
const { params, $http }=data;
|
||||||
|
// const post = await $http.$get(`https://api.nuxtjs.dev/posts/${params.id}`)
|
||||||
|
return { post:'121' }
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
staticData:[],
|
||||||
|
from:{
|
||||||
|
name:'',
|
||||||
|
email:'',
|
||||||
|
company:'',
|
||||||
|
project_id:'',
|
||||||
|
logo:'',
|
||||||
|
information:''
|
||||||
|
},
|
||||||
|
file_name:'Attachment Files(.PDF)',
|
||||||
|
assetsUri,
|
||||||
|
title:'LightLimX-Contract Us',
|
||||||
|
opts: {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created(){
|
||||||
|
this.handleLists()
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
handleSelect(item){
|
||||||
|
this.from.project_id=item.id
|
||||||
|
},
|
||||||
|
async handleLists(){
|
||||||
|
const {baseURL}=this.$config;
|
||||||
|
const res= await this.$axios(baseURL+'/projectType/index?page=1&size=100')
|
||||||
|
if(res.status!==200){
|
||||||
|
return this.$toast(res.data.msg)
|
||||||
|
}
|
||||||
|
const {content,totalElements}=res.data
|
||||||
|
this.staticData=content.map((item)=>{return {...item,id:item.id.toString()}});
|
||||||
|
},
|
||||||
|
// 文件提交
|
||||||
|
contactUsBtn(){
|
||||||
|
if(this.from.name == ''){
|
||||||
|
return this.$toast('Please enter name');
|
||||||
|
}
|
||||||
|
if(this.from.email == ''){
|
||||||
|
return this.$toast('Please enter mail');
|
||||||
|
}
|
||||||
|
if(this.from.company == ''){
|
||||||
|
return this.$toast('Please enter Organization');
|
||||||
|
}
|
||||||
|
if(this.from.project_id == ''){
|
||||||
|
return this.$toast('Please select Project');
|
||||||
|
}
|
||||||
|
if(this.from.information==''){
|
||||||
|
return this.$toast('Please enter More informationt text');
|
||||||
|
}
|
||||||
|
if(this.from.logo == ''){
|
||||||
|
return this.$toast('Please enter More informationt');
|
||||||
|
}
|
||||||
|
const {baseURL}=this.$config;
|
||||||
|
console.log('this.form',this.from)
|
||||||
|
this.$axios.post(baseURL+'/contact/save', this.from, {headers: {
|
||||||
|
'Content-Type': 'application/json'
|
||||||
|
}}).then(res => {
|
||||||
|
this.$toast('Submitted successfully');
|
||||||
|
setTimeout(() => {
|
||||||
|
this.$router.push('/contact/one')
|
||||||
|
}, 500);
|
||||||
|
}).catch(err => {
|
||||||
|
alert(err)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 返回布尔值
|
||||||
|
onRead(file) {
|
||||||
|
const {baseURL}=this.$config;
|
||||||
|
let fd = new FormData()
|
||||||
|
fd.append('file', file.file)
|
||||||
|
this.$axios.post(baseURL+'/uploads/store', fd, {headers: {
|
||||||
|
'Content-Type': 'multipart/form-data'
|
||||||
|
}}).then(res => {
|
||||||
|
this.file_name = res.data.data.name;
|
||||||
|
this.from.logo= res.data.data.image.uri;
|
||||||
|
}).catch(err => {
|
||||||
|
alert(err)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.contactUs-section-view{
|
||||||
|
background-position: center bottom;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
margin-top: 0.95rem;
|
||||||
|
min-height:6.25rem !important;
|
||||||
|
.contactUs-div{
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
padding-top: 1.6rem;
|
||||||
|
img{
|
||||||
|
display: block;
|
||||||
|
width: 15%;
|
||||||
|
}
|
||||||
|
.contactUs-div-t{
|
||||||
|
font-size: 0.72rem;
|
||||||
|
font-family: Manrope;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #FFFFFF;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.contactUs-Why-conten{
|
||||||
|
padding-top: 1.5rem;
|
||||||
|
h1{
|
||||||
|
font-size: 0.48rem;
|
||||||
|
font-family: Manrope;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #302D2C;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 0.7rem;
|
||||||
|
}
|
||||||
|
p{
|
||||||
|
font-size: 0.2rem;
|
||||||
|
font-family: Manrope;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #302D2C;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 0.4rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.contactUs-Why-brie{
|
||||||
|
margin-top: 1rem;
|
||||||
|
p{
|
||||||
|
text-align: center;
|
||||||
|
font-size: 0.2rem;
|
||||||
|
font-family: Manrope;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: 0.4rem;
|
||||||
|
color: #302D2C;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.situation-h1{
|
||||||
|
margin-top: 1.5rem;
|
||||||
|
font-size: 0.62rem;
|
||||||
|
font-family: Manrope;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #302D2C;
|
||||||
|
cursor: pointer;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.situation-h1:hover{
|
||||||
|
/*text-shadow: 0 0 5px #FF0000, 0 0 5px #6bf403;*/
|
||||||
|
text-stroke:1px #F49F00;
|
||||||
|
-webkit-text-stroke:1px #F49F00;
|
||||||
|
color: #Fff;
|
||||||
|
}
|
||||||
|
.LP-login-input-conten{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 2rem;
|
||||||
|
.LP-login-input{
|
||||||
|
margin: 0 auto;
|
||||||
|
.inputClass{
|
||||||
|
padding-left: 0.2rem;
|
||||||
|
font-size: 0.2rem;
|
||||||
|
font-family: Manrope;
|
||||||
|
font-weight: 400;
|
||||||
|
width: 8.8rem;
|
||||||
|
height: 0.58rem;
|
||||||
|
display: block;
|
||||||
|
background: #FFFFFF;
|
||||||
|
border: 1px solid #9B9B9B;
|
||||||
|
opacity: 1;
|
||||||
|
border-radius: 0.1rem;
|
||||||
|
margin-top: 0.15rem;
|
||||||
|
}
|
||||||
|
select{
|
||||||
|
outline: none;
|
||||||
|
padding: 0 .2rem;
|
||||||
|
appearance:none;
|
||||||
|
-moz-appearance:none;
|
||||||
|
-webkit-appearance:none;
|
||||||
|
font-size: 0.2rem;
|
||||||
|
font-family: Manrope;
|
||||||
|
font-weight: 400;
|
||||||
|
height: 0.58rem;
|
||||||
|
width: 9rem;
|
||||||
|
margin-top: 0.15rem;
|
||||||
|
border-radius: 0.1rem;
|
||||||
|
border: solid 1px #9B9B9B;
|
||||||
|
background: url("~/static/images/ContactUs/arrow.png") no-repeat 95% center !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
select::-ms-expand { display: none; }
|
||||||
|
select:focus{
|
||||||
|
border: 1px solid #F49F00;
|
||||||
|
box-shadow: 0px 3px 6px rgba(244, 159, 0, 0.12);
|
||||||
|
}
|
||||||
|
.password-font{
|
||||||
|
// font-family: none;
|
||||||
|
}
|
||||||
|
input:focus {
|
||||||
|
border: 1px solid #F49F00;
|
||||||
|
box-shadow: 0px 3px 6px rgba(244, 159, 0, 0.12);
|
||||||
|
}
|
||||||
|
p{
|
||||||
|
font-size: 0.16rem;
|
||||||
|
font-family: Manrope;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #302D2C;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
.Password{
|
||||||
|
margin-top: 0.35rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.input-btn-conten{
|
||||||
|
margin-top: 0.15rem;
|
||||||
|
width: 9rem;
|
||||||
|
min-height: 1.94rem;
|
||||||
|
border: 1px solid #9B9B9B;
|
||||||
|
border-radius: 0.1rem;
|
||||||
|
display: flex;
|
||||||
|
position: relative;
|
||||||
|
&-textarea{
|
||||||
|
padding:.2rem .2rem 1rem;
|
||||||
|
background-color: transparent;
|
||||||
|
font-size: 0.2rem;
|
||||||
|
font-family: Manrope;
|
||||||
|
font-weight: 400;
|
||||||
|
&:after{
|
||||||
|
border-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.input-btn-conten-box{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 0.2rem;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
img{
|
||||||
|
margin-left: 0.25rem;
|
||||||
|
width: 10%;
|
||||||
|
}
|
||||||
|
span{
|
||||||
|
font-size: 0.2rem;
|
||||||
|
font-family: Manrope;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #302D2C;
|
||||||
|
opacity: 1;
|
||||||
|
cursor: pointer;
|
||||||
|
margin-left: 0.15rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.LP-login-input-btnFile{
|
||||||
|
margin-top: 1.2rem;
|
||||||
|
padding-bottom: 2.2rem;
|
||||||
|
span{
|
||||||
|
margin: 0 auto;
|
||||||
|
cursor: pointer;
|
||||||
|
display: block;
|
||||||
|
width: 3.5rem;
|
||||||
|
height: .6rem;
|
||||||
|
background: #F49F00;
|
||||||
|
border-radius: .1rem;
|
||||||
|
text-align: center;
|
||||||
|
line-height: .6rem;
|
||||||
|
font-size: .24rem;
|
||||||
|
font-family: Manrope;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #302D2C;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@media screen and (max-width: 768px){
|
||||||
|
.contactUs-section-view{
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
background-image: url('~/static/images/ContactUs/ContactUs_banner_h5.jpg') !important;
|
||||||
|
}
|
||||||
|
.contactUs-section-view .contactUs-div img{
|
||||||
|
width: 28%;
|
||||||
|
}
|
||||||
|
.contactUs-Why-conten{
|
||||||
|
padding: 0 0.3rem;
|
||||||
|
padding-top: 0.5rem;
|
||||||
|
}
|
||||||
|
.contactUs-Why-conten h1{
|
||||||
|
font-size: 0.6rem;
|
||||||
|
}
|
||||||
|
.contactUs-Why-conten p{
|
||||||
|
font-size: 0.24rem;
|
||||||
|
font-family: Manrope;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 0.35rem;
|
||||||
|
color: #302D2C;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
.contactUs-Why-brie{
|
||||||
|
padding: 0 0.3rem;
|
||||||
|
}
|
||||||
|
.contactUs-Why-brie p{
|
||||||
|
font-size: 0.3rem;
|
||||||
|
font-family: Manrope;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: 0.4rem;
|
||||||
|
color: #302D2C;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
.situation-h1{
|
||||||
|
font-size: 0.52rem;
|
||||||
|
}
|
||||||
|
.LP-login-input-conten .LP-login-input{
|
||||||
|
width: 85%;
|
||||||
|
}
|
||||||
|
.LP-login-input-conten .LP-login-input .inputClass{
|
||||||
|
width: 100%;
|
||||||
|
height: 0.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.LP-login-input-conten{
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
.LP-login-input-conten .LP-login-input p{
|
||||||
|
font-size: 0.3rem;
|
||||||
|
font-family: Manrope;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
.input-btn-conten{
|
||||||
|
width: 100%;
|
||||||
|
padding-right: 0.2rem;
|
||||||
|
}
|
||||||
|
.LP-login-input-btnFile{
|
||||||
|
margin-top: 1rem;
|
||||||
|
padding-bottom: 1rem;
|
||||||
|
}
|
||||||
|
.input-btn-conten .input-btn-conten-box span{
|
||||||
|
font-size: 0.22rem;
|
||||||
|
}
|
||||||
|
.LP-login-input-btnFile span{
|
||||||
|
|
||||||
|
width: 70%;
|
||||||
|
height: 0.96rem;
|
||||||
|
|
||||||
|
line-height: 0.96rem;
|
||||||
|
font-size: 0.38rem;
|
||||||
|
|
||||||
|
}
|
||||||
|
select{
|
||||||
|
height: 0.96rem !important;
|
||||||
|
width: 104% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.LP-login-input-conten .LP-login-input input{
|
||||||
|
font-size: 0.24rem;
|
||||||
|
}
|
||||||
|
.LP-login-input-conten .LP-login-input select{
|
||||||
|
font-size: 0.24rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
<style lang="less">
|
||||||
|
.van-uploader:hover span.btnx_hover{
|
||||||
|
color: #F49F00;
|
||||||
|
text-decoration: underline;
|
||||||
|
font-size: .2rem;
|
||||||
|
font-family: Manrope;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #F49F00;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,310 @@
|
||||||
|
<template>
|
||||||
|
<div class="fullpage-container">
|
||||||
|
<section-view :css-style="{'background-color':bgColors[0],'transition': 'background-color .3s ease-in'}">
|
||||||
|
<section-limit-x >
|
||||||
|
</section-limit-x>
|
||||||
|
</section-view>
|
||||||
|
<about-us id="aboutUs" :css-style="{'background-color':activeColor,'transition': 'background-color .3s ease-in'}" >
|
||||||
|
<lottie-animation
|
||||||
|
:style="{'opacity':activeColor===bgColors[1]?'1':'0'}"
|
||||||
|
:loop="true"
|
||||||
|
:speed="1000"
|
||||||
|
:autoPlay="true"
|
||||||
|
ref="anim"
|
||||||
|
:animationData="require('@/assets/data/q3.json')"
|
||||||
|
/>
|
||||||
|
</about-us>
|
||||||
|
<focus-areas id="focusAreas" :css-style="{backgroundColor:bgColors[2],'transition': 'background-color .3s ease-in'}"></focus-areas>
|
||||||
|
<our-portfolio id="ourPortfolio" :css-style="{'position':'relative','z-index':'1',backgroundColor:activeColor2,'transition': 'background-color .3s ease-in'}">
|
||||||
|
<our-portfolio-item :style="{'opacity':activeColor2==='#fff'?'1':'0'}" v-for="(item) in portfolios" :key="item.title" :item="item"></our-portfolio-item>
|
||||||
|
</our-portfolio>
|
||||||
|
<div id="portfolio" :style="{'background-color':bgColors[4],'transition': 'background-color .3s ease-in'}">
|
||||||
|
<div class="home-wrap">
|
||||||
|
<portfolio :position="position" :top="top" :bottom="bottom" :staticData="portfolio"></portfolio>
|
||||||
|
<partners :partners="partners" :showPartners="showPartners" ></partners>
|
||||||
|
<our-founders><banner :images="banners"></banner></our-founders>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<section-view id="situation" :css-style="{'background-color':activeColor3,'transition': 'background-color .3s ease-in'}">
|
||||||
|
<situation :style="{'opacity':activeColor3=='#fff'?'1':'0'}">
|
||||||
|
<email-footer ></email-footer>
|
||||||
|
</situation>
|
||||||
|
</section-view>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import LottieAnimation from 'lottie-web-vue'
|
||||||
|
import SectionLimitX from "../components/SectionLimitX/index";
|
||||||
|
import AboutUs from "../components/AboutUs/index";
|
||||||
|
import FocusAreas from "../components/FocusAreas/index";
|
||||||
|
import OurPortfolio from "../components/OurPortfolio/index";
|
||||||
|
import {portfolios} from "../assets/js/static";
|
||||||
|
import OurPortfolioItem from "../components/OurPortfolioItem/index";
|
||||||
|
import SectionView from "../components/SectionView/index";
|
||||||
|
import Portfolio from "../components/Portfolio/index";
|
||||||
|
import Partners from "../components/Partners/index";
|
||||||
|
import OurFounders from "../components/OurFounders/index";
|
||||||
|
import Banner from "../components/Banners/index";
|
||||||
|
import Situation from "../components/Situation/index";
|
||||||
|
import EmailFooter from "../components/EmailFooter/index";
|
||||||
|
import {hanldePortflioData} from "../utils/filter";
|
||||||
|
import animateMixin from '../utils/animateMixin'
|
||||||
|
export default {
|
||||||
|
name: 'IndexPage',
|
||||||
|
layout:'index',
|
||||||
|
mixins:[animateMixin],
|
||||||
|
components:{
|
||||||
|
EmailFooter,
|
||||||
|
Situation,
|
||||||
|
Banner,
|
||||||
|
OurFounders,
|
||||||
|
Partners,
|
||||||
|
Portfolio,
|
||||||
|
SectionView,
|
||||||
|
OurPortfolioItem,
|
||||||
|
OurPortfolio,
|
||||||
|
FocusAreas,
|
||||||
|
AboutUs,
|
||||||
|
SectionLimitX,
|
||||||
|
LottieAnimation
|
||||||
|
},
|
||||||
|
head() {
|
||||||
|
return {
|
||||||
|
|
||||||
|
title: this.title,
|
||||||
|
meta: [
|
||||||
|
{
|
||||||
|
hid: 'description',
|
||||||
|
name: 'description',
|
||||||
|
content: 'My custom description'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created(){
|
||||||
|
this.activeColor=this.bgColors[1]
|
||||||
|
this.activeColor2=this.bgColors[3]
|
||||||
|
this.activeColor3=this.bgColors[5]
|
||||||
|
},
|
||||||
|
mounted(){
|
||||||
|
this.handleScroll()
|
||||||
|
window.addEventListener('scroll',this.handleScroll)
|
||||||
|
|
||||||
|
},
|
||||||
|
async asyncData(config) {
|
||||||
|
const {$axios,$config,payload}=config;
|
||||||
|
if(payload){
|
||||||
|
return
|
||||||
|
}
|
||||||
|
// const {baseURL}=$config
|
||||||
|
// const result=await Promise.all([
|
||||||
|
// $axios.$get(`${baseURL}/partners/index?page=1&size=10`),
|
||||||
|
// $axios.$get(`${baseURL}/portfolio/index?page=1&size=99`),
|
||||||
|
// $axios.$get(`${baseURL}/carousel/index?page=1&size=10`),
|
||||||
|
// ])
|
||||||
|
// if(!result.length){
|
||||||
|
// return {}
|
||||||
|
// }
|
||||||
|
// console.log(result[1].content,'result',result[2].content)
|
||||||
|
// if(!result[1].content){
|
||||||
|
// return {partners:result[0].content, banners:result[2].content,}
|
||||||
|
// }
|
||||||
|
// const myPortfolio=await hanldePortflioData(result[1].content)
|
||||||
|
// return {partners:result[0].content, banners:result[2].content,portfolio:myPortfolio}
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
handleScroll(){
|
||||||
|
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
|
||||||
|
// const opacity = Math.abs(Math.round(scrollTop)) / 300;
|
||||||
|
const clientWidth=document.documentElement.clientWidth;
|
||||||
|
if(clientWidth>768){
|
||||||
|
if(scrollTop>300){
|
||||||
|
this.activeColor=this.bgColors[1]
|
||||||
|
}else if(scrollTop<=300){
|
||||||
|
this.activeColor=this.bgColors[0]
|
||||||
|
}
|
||||||
|
}else{
|
||||||
|
this.activeColor=this.bgColors[1]
|
||||||
|
}
|
||||||
|
if(clientWidth<751){
|
||||||
|
this.position='sticky'
|
||||||
|
this.top='0'
|
||||||
|
this.bottom='initial';
|
||||||
|
return
|
||||||
|
}
|
||||||
|
const focusAreasDom= document.getElementById('focusAreas');
|
||||||
|
const ourPortfolioDom= document.getElementById('ourPortfolio');
|
||||||
|
const situationDom= document.getElementById('situation');
|
||||||
|
const focusAreasSetTop=focusAreasDom.offsetTop;
|
||||||
|
const ourPortfolioDomSetTop=ourPortfolioDom.offsetTop;
|
||||||
|
const situationDomTop=situationDom.offsetTop;
|
||||||
|
if(scrollTop>(focusAreasSetTop-300)){
|
||||||
|
this.activeColor=this.bgColors[0]
|
||||||
|
this.activeColor2=this.bgColors[4]
|
||||||
|
}
|
||||||
|
if(scrollTop>(ourPortfolioDomSetTop-300)){
|
||||||
|
this.activeColor2='#fff'
|
||||||
|
}
|
||||||
|
if(scrollTop<(situationDomTop-300)){
|
||||||
|
this.activeColor3=this.bgColors[4]
|
||||||
|
}
|
||||||
|
if(scrollTop>(situationDomTop-300)){
|
||||||
|
this.activeColor3='#fff'
|
||||||
|
}
|
||||||
|
// else if(scrollTop<=300){
|
||||||
|
// this.activeColor=this.bgColors[0]
|
||||||
|
// }
|
||||||
|
const portfolioDom= document.getElementById('iPortfolio');
|
||||||
|
const portfolioOffSetTop=portfolioDom.offsetTop;
|
||||||
|
|
||||||
|
const portfolioHeight=portfolioDom.offsetHeight;
|
||||||
|
const partnersDom= document.getElementById('partners');
|
||||||
|
const partnersSetTop=partnersDom.offsetTop;
|
||||||
|
this.showPartners=scrollTop>(partnersSetTop-300)
|
||||||
|
const layoutHeight= document.getElementById('layout-header').offsetHeight;
|
||||||
|
const ballHeight= document.getElementById('ball').offsetHeight;
|
||||||
|
const portfolioTop=portfolioOffSetTop;
|
||||||
|
if(scrollTop>portfolioTop){
|
||||||
|
if(scrollTop>(portfolioHeight+portfolioTop-ballHeight)){
|
||||||
|
this.position='absolute'
|
||||||
|
this.bottom=0+'px';
|
||||||
|
this.top='initial';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.position='fixed'
|
||||||
|
this.top=layoutHeight+'px';
|
||||||
|
this.bottom='initial';
|
||||||
|
}else if(scrollTop<=portfolioTop){
|
||||||
|
this.position='absolute'
|
||||||
|
this.top='0'
|
||||||
|
this.bottom='initial';
|
||||||
|
}
|
||||||
|
// console.log(portfolioTop,'offSetTop',scrollTop,'clientWidth')
|
||||||
|
}
|
||||||
|
},
|
||||||
|
destroyed(){
|
||||||
|
window.removeEventListener('scroll',this.handleScroll)
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
top:'0',
|
||||||
|
bottom:'initial',
|
||||||
|
position:'sticky',
|
||||||
|
activeColor:'#2E2C2C',
|
||||||
|
activeColor2:'#2E2C2C',
|
||||||
|
activeColor3:'#2E2C2C',
|
||||||
|
showPartners:false,
|
||||||
|
bgColors:[
|
||||||
|
'#2E2C2C','#fff','#000','#fff','#292727','#fff'
|
||||||
|
],
|
||||||
|
partners:[
|
||||||
|
{
|
||||||
|
logo:'images/partners/组 764@2x.png',
|
||||||
|
}, {
|
||||||
|
logo:'images/partners/组 761@2x.png',
|
||||||
|
}, {
|
||||||
|
logo:'images/partners/组 762@2x.png',
|
||||||
|
}, {
|
||||||
|
logo:'images/partners/组 763@2x.png',
|
||||||
|
}, {
|
||||||
|
logo:'images/partners/组 756@2x.png',
|
||||||
|
}, {
|
||||||
|
logo:'images/partners/组 757@2x.png',
|
||||||
|
}, {
|
||||||
|
logo:'images/partners/组 758@2x.png',
|
||||||
|
}, {
|
||||||
|
logo:'images/partners/组 759@2x.png',
|
||||||
|
}, {
|
||||||
|
logo:'images/partners/组 755@2x.png',
|
||||||
|
}, {
|
||||||
|
logo:'images/partners/组 752@2x.png',
|
||||||
|
}, {
|
||||||
|
logo:'images/partners/组 753@2x.png',
|
||||||
|
}, {
|
||||||
|
logo:'images/partners/组 754@2x.png',
|
||||||
|
}, {
|
||||||
|
logo:'images/partners/组 751@2x.png',
|
||||||
|
}, {
|
||||||
|
logo:'images/partners/组 750@2x.png',
|
||||||
|
}, {
|
||||||
|
logo:'images/partners/组 749@2x.png',
|
||||||
|
}, {
|
||||||
|
logo:'images/partners/组 748@2x.png',
|
||||||
|
}, {
|
||||||
|
logo:'images/partners/组 744@2x.png',
|
||||||
|
}, {
|
||||||
|
logo:'images/partners/组 745@2x.png',
|
||||||
|
}, {
|
||||||
|
logo:'images/partners/组 746@2x.png',
|
||||||
|
}, {
|
||||||
|
logo:'images/partners/组 747@2x.png',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
logo:'images/partners/组 743@2x.png',
|
||||||
|
},
|
||||||
|
// ------------------------------------
|
||||||
|
{
|
||||||
|
logo:'images/partners/组 742@2x.png',
|
||||||
|
},{
|
||||||
|
logo:'images/partners/组 741@2x.png',
|
||||||
|
},{
|
||||||
|
logo:'images/partners/组 740@2x.png',
|
||||||
|
},{
|
||||||
|
logo:'images/partners/组 736@2x.png',
|
||||||
|
},{
|
||||||
|
logo:'images/partners/组 737@2x.png',
|
||||||
|
},{
|
||||||
|
logo:'images/partners/组 738@2x.png',
|
||||||
|
},{
|
||||||
|
logo:'images/partners/组 739@2x.png',
|
||||||
|
},{
|
||||||
|
logo:'images/partners/组 732@2x.png',
|
||||||
|
},{
|
||||||
|
logo:'images/partners/组 733@2x.png',
|
||||||
|
},{
|
||||||
|
logo:'images/partners/组 734@2x.png',
|
||||||
|
},{
|
||||||
|
logo:'images/partners/组 735@2x.png',
|
||||||
|
},{
|
||||||
|
logo:'images/partners/组 731@2x.png',
|
||||||
|
},{
|
||||||
|
logo:'images/partners/组 730@2x.png',
|
||||||
|
},
|
||||||
|
// --------------------------------
|
||||||
|
{
|
||||||
|
logo:'images/partners/组 729@2x.png',
|
||||||
|
},{
|
||||||
|
logo:'images/partners/组 728@2x.png',
|
||||||
|
},{
|
||||||
|
logo:'images/partners/组 727@2x.png',
|
||||||
|
},{
|
||||||
|
logo:'images/partners/组 726@2x.png',
|
||||||
|
},{
|
||||||
|
logo:'images/partners/组 725@2x.png',
|
||||||
|
}
|
||||||
|
],
|
||||||
|
banners:[
|
||||||
|
{
|
||||||
|
logo:'images/banners/图层 1@2x.png'
|
||||||
|
}, {
|
||||||
|
logo:'images/banners/图层 2@2x.png'
|
||||||
|
}, {
|
||||||
|
logo:'images/banners/图层 3@2x.png'
|
||||||
|
}, {
|
||||||
|
logo:'images/banners/图层-4@2x.png'
|
||||||
|
},
|
||||||
|
],
|
||||||
|
portfolio:[],
|
||||||
|
title:'LightLimX',
|
||||||
|
portfolios
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.home-wrap{
|
||||||
|
/*max-width: 12;*/
|
||||||
|
max-width: 13rem;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,123 @@
|
||||||
|
<template>
|
||||||
|
<div class="fullpage-container">
|
||||||
|
<section-view :css-style="{'background-color':'#000'}" v-lazy:background-image="assetsUri('images/innovation/innovation.png')" class="innovation-section-view">
|
||||||
|
<div class="innovation-div">
|
||||||
|
<h2 class="innovation-div-t">Innovation Insights</h2>
|
||||||
|
</div>
|
||||||
|
</section-view>
|
||||||
|
<section-view :css-style="{'background-color':'#fff'}">
|
||||||
|
<p v-if="$fetchState.pending">Fetching mountains...</p>
|
||||||
|
<p v-else-if="$fetchState.error">An error occurred :</p>
|
||||||
|
<innovation-block v-else :static-data="staticData"></innovation-block>
|
||||||
|
<my-pagination @change="handleLists" v-if="staticData.length" :page.sync="page" :total="total" :pager-count="9"></my-pagination>
|
||||||
|
<email-footer></email-footer>
|
||||||
|
</section-view>
|
||||||
|
<div class="windows">
|
||||||
|
<span></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import animateMixin from '../../utils/animateMixin'
|
||||||
|
import {
|
||||||
|
assetsUri
|
||||||
|
} from "../../utils";
|
||||||
|
import SectionView from "../../components/SectionView/index";
|
||||||
|
import EmailFooter from "../../components/EmailFooter/index";
|
||||||
|
import InnovationBlock from "../../components/InnovationBlock/index";
|
||||||
|
import MyPagination from "../../components/MyPagination/index";
|
||||||
|
export default {
|
||||||
|
name: "innovation",
|
||||||
|
components: {MyPagination, InnovationBlock, EmailFooter, SectionView},
|
||||||
|
layout:'index',
|
||||||
|
watch: {
|
||||||
|
'$route.query': '$fetch'
|
||||||
|
},
|
||||||
|
mixins:[animateMixin],
|
||||||
|
async fetch() {
|
||||||
|
const {query:{page,size}}=this.$route;
|
||||||
|
if(page){
|
||||||
|
this.page=page
|
||||||
|
}
|
||||||
|
if(size){
|
||||||
|
this.size=size
|
||||||
|
}
|
||||||
|
await this.handleLists(this.page)
|
||||||
|
},
|
||||||
|
fetchOnServer: false,
|
||||||
|
methods:{
|
||||||
|
async handleLists(val){
|
||||||
|
this.page=val;
|
||||||
|
const {baseURL}=this.$config;
|
||||||
|
const res= await this.$axios(baseURL+'/innovation/index?page='+this.page+'&size='+this.size)
|
||||||
|
if(res.status!==200){
|
||||||
|
return this.$toast(res.data.msg)
|
||||||
|
}
|
||||||
|
const {content,totalElements}=res.data
|
||||||
|
this.total=totalElements;
|
||||||
|
this.staticData=content;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
head() {
|
||||||
|
return {
|
||||||
|
title: this.title,
|
||||||
|
meta: [
|
||||||
|
{
|
||||||
|
hid: 'description',
|
||||||
|
name: 'description',
|
||||||
|
content: 'My custom description'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data(){
|
||||||
|
return {
|
||||||
|
title:'LightLimX-Innovation Insights',
|
||||||
|
assetsUri,
|
||||||
|
page:1,
|
||||||
|
size:9,
|
||||||
|
total:0,
|
||||||
|
staticData:[]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.innovation{
|
||||||
|
&-section-view{
|
||||||
|
background-position: center bottom;
|
||||||
|
background-size: 100% 2.92rem;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
/*background-size: ;*/
|
||||||
|
padding-top: .95rem;
|
||||||
|
min-height:3.87rem !important;
|
||||||
|
}
|
||||||
|
&-div{
|
||||||
|
padding-top: 1.14rem;
|
||||||
|
text-align: center;
|
||||||
|
&-t{
|
||||||
|
font-size: .48rem;
|
||||||
|
font-family: Manrope;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: .32rem;
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 768px){
|
||||||
|
.innovation{
|
||||||
|
&-section-view{
|
||||||
|
background-size: auto 6.24rem;
|
||||||
|
padding-top: .88rem;
|
||||||
|
min-height: 6.24rem !important;
|
||||||
|
}
|
||||||
|
&-div{
|
||||||
|
padding-top: 1.99rem;
|
||||||
|
&-t{
|
||||||
|
font-size: .6rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,156 @@
|
||||||
|
<template>
|
||||||
|
<div class="fullpage-container">
|
||||||
|
<section-view :css-style="{'background-color':'#000'}" v-lazy:background-image="assetsUri('images/join/join.png')" class="join-section-view">
|
||||||
|
<div class="join-div">
|
||||||
|
<h2 class="join-div-t">Join LightLimX</h2>
|
||||||
|
</div>
|
||||||
|
</section-view>
|
||||||
|
<div class="join-2-section-view" :style="{'position':'relative','z-index':'1','min-height':'100%','padding-bottom':'.5rem','box-sizing':'border-box'}" >
|
||||||
|
<div class="join-2-section-view-wrap">
|
||||||
|
<filter-input :locations="locations" @select="handleFilterSelect" :active.sync="activeLocation"></filter-input>
|
||||||
|
<join-us-tabs @handleSelect="handleSelect" :active="active" :content="content" :options="positionType"></join-us-tabs>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import animateMixin from '../../utils/animateMixin'
|
||||||
|
import {
|
||||||
|
assetsUri
|
||||||
|
} from "../../utils";
|
||||||
|
import SectionView from "../../components/SectionView/index";
|
||||||
|
import JoinUsTabs from "../../components/JoinUsTabs/index";
|
||||||
|
import FilterInput from "../../components/FilterInput/index";
|
||||||
|
export default {
|
||||||
|
name: "join",
|
||||||
|
components: {FilterInput, JoinUsTabs, SectionView},
|
||||||
|
layout:'index',
|
||||||
|
mixins:[animateMixin],
|
||||||
|
async asyncData(config) {
|
||||||
|
const {$axios,$config,payload}=config;
|
||||||
|
if(payload){
|
||||||
|
return
|
||||||
|
}
|
||||||
|
const {baseURL}=$config
|
||||||
|
const {content} =await $axios.$get(`${baseURL}/locations/index?page=1&size=99`)
|
||||||
|
const locations=content.map((item)=>{
|
||||||
|
return {
|
||||||
|
...item,
|
||||||
|
id:item.id.toString()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
return {locations}
|
||||||
|
},
|
||||||
|
mounted(){
|
||||||
|
this.activeLocation=this.locations[0].id;
|
||||||
|
this.handlePositions().then((type)=>{
|
||||||
|
this.active=type.length?type[0].id:''
|
||||||
|
this.handlePositionOne()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
async handlePositions(){
|
||||||
|
const {baseURL}=this.$config;
|
||||||
|
const {data:{content,msg},status} = await this.$axios(`${baseURL}/join/index?page=1&size=99&locations_id=${this.activeLocation}`)
|
||||||
|
if(status!==200){
|
||||||
|
return this.$toast(msg)
|
||||||
|
}
|
||||||
|
this.positionType=content.map((item)=>{
|
||||||
|
return {
|
||||||
|
...item.position_type,
|
||||||
|
id:item.id.toString()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
return this.positionType
|
||||||
|
},
|
||||||
|
async handlePositionOne(){
|
||||||
|
const {baseURL}=this.$config;
|
||||||
|
const res= await this.$axios(baseURL+'/join/one?id='+this.active)
|
||||||
|
if(res.status!==200){
|
||||||
|
return this.$toast(res.data.msg)
|
||||||
|
}
|
||||||
|
const {data}=res.data
|
||||||
|
this.content=data?data.introduce:'';
|
||||||
|
},
|
||||||
|
handleSelect(item){
|
||||||
|
this.active=item.id;
|
||||||
|
this.handlePositionOne()
|
||||||
|
},
|
||||||
|
handleFilterSelect(item){
|
||||||
|
this.activeLocation=item.id;
|
||||||
|
this.handlePositions().then((type)=>{
|
||||||
|
this.active=type.length?type[0].id:''
|
||||||
|
this.handlePositionOne()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
head() {
|
||||||
|
return {
|
||||||
|
title: this.title,
|
||||||
|
meta: [
|
||||||
|
{
|
||||||
|
hid: 'description',
|
||||||
|
name: 'description',
|
||||||
|
content: 'My custom description'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data(){
|
||||||
|
return {
|
||||||
|
title:'LightLimX-Join Us',
|
||||||
|
active:'',
|
||||||
|
locations:[],
|
||||||
|
activeLocation:'1',
|
||||||
|
content:'',
|
||||||
|
assetsUri,
|
||||||
|
positionType:[]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.join-2-section-view{
|
||||||
|
.join-2-section-view-wrap{
|
||||||
|
max-width: 13rem;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.join{
|
||||||
|
&-section-view{
|
||||||
|
background-position: center bottom;
|
||||||
|
background-size: 100% 4.4rem;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
/*background-size: ;*/
|
||||||
|
padding-top: .95rem;
|
||||||
|
min-height:5.35rem !important;
|
||||||
|
}
|
||||||
|
&-div{
|
||||||
|
padding-top: 1.78rem;
|
||||||
|
text-align: center;
|
||||||
|
&-t{
|
||||||
|
font-size: .48rem;
|
||||||
|
font-family: Manrope;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 768px){
|
||||||
|
.join{
|
||||||
|
&-section-view{
|
||||||
|
background-size: auto 6.24rem;
|
||||||
|
padding-top: .88rem;
|
||||||
|
min-height: 6.24rem !important;
|
||||||
|
}
|
||||||
|
&-div{
|
||||||
|
padding-top: 1.99rem;
|
||||||
|
&-t{
|
||||||
|
font-size: .6rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,116 @@
|
||||||
|
<template>
|
||||||
|
<div class="fullpage-container">
|
||||||
|
<section-view class="startup-section-view" :css-style="{'background-color':'#000000','background-repeat':'no-repeat'}" v-lazy:background-image="assetsUri('images/startUp.png')">
|
||||||
|
<startup-block></startup-block>
|
||||||
|
</section-view>
|
||||||
|
<section-view :css-style="{'background-color':'#fff'}">
|
||||||
|
<startup-content :static-data="staticData"></startup-content>
|
||||||
|
<email-footer></email-footer>
|
||||||
|
</section-view>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import animateMixin from '../../utils/animateMixin'
|
||||||
|
import {assetsUri} from "../../utils";
|
||||||
|
import SectionView from "../../components/SectionView/index";
|
||||||
|
import StartupBlock from "../../components/StartUpBlock/index";
|
||||||
|
import EmailFooter from "../../components/EmailFooter/index";
|
||||||
|
import StartupContent from "../../components/StartupContent/index";
|
||||||
|
export default {
|
||||||
|
name: "StartupsPage",
|
||||||
|
mixins:[animateMixin],
|
||||||
|
head() {
|
||||||
|
return {
|
||||||
|
|
||||||
|
title: this.title,
|
||||||
|
meta: [
|
||||||
|
{
|
||||||
|
hid: 'description',
|
||||||
|
name: 'description',
|
||||||
|
content: 'My custom description'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
components: {StartupContent, EmailFooter, StartupBlock, SectionView},
|
||||||
|
layout:'index',
|
||||||
|
// async asyncData(config) {
|
||||||
|
// const {$axios,$config,payload}=config;
|
||||||
|
// if(payload){
|
||||||
|
// return
|
||||||
|
// }
|
||||||
|
// const {baseURL}=$config
|
||||||
|
// const {content} = await $axios.$get(`${baseURL}/startup/index?page=1&size=10`)
|
||||||
|
// return { staticData:content }
|
||||||
|
// },
|
||||||
|
data(){
|
||||||
|
return {
|
||||||
|
title:'LightLimX-Startups',
|
||||||
|
assetsUri,
|
||||||
|
isMobile:false,
|
||||||
|
staticData:[
|
||||||
|
{
|
||||||
|
img:'images/startup/1.png',
|
||||||
|
title:'Enterprise & Startup',
|
||||||
|
desc:'Advising well-established enterprises and newly-founded startups for zero-to-one market entry and market expansion strategies.'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img:'images/startup/2.png',
|
||||||
|
title:'Strategic Planning',
|
||||||
|
desc:'Define your target market,branding & marketing Strategy and plan your roadmap.'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img:'images/startup/3.png',
|
||||||
|
title:'Tokenomics',
|
||||||
|
desc:'Design mechanisms to create and capture value with tokenomics.'
|
||||||
|
},{
|
||||||
|
img:'images/startup/4.png',
|
||||||
|
title:'Governance',
|
||||||
|
desc:'Set up robust community governance with progressive decentralization.'
|
||||||
|
},{
|
||||||
|
img:'images/startup/5.png',
|
||||||
|
title:'Fundraising',
|
||||||
|
desc:'Pitch Coaching,pitch Deck Design Support,fundraising Strategy.'
|
||||||
|
},{
|
||||||
|
img:'images/startup/6.png',
|
||||||
|
title:'Developer Hub',
|
||||||
|
desc:`Receive guidance from more than 60+top-class</br>developers from leading ecosystems.`
|
||||||
|
},{
|
||||||
|
img:'images/startup/7.png',
|
||||||
|
title:'Community growth',
|
||||||
|
desc:'Build communities while monitoring and improving their social media performance, protecting their reputation.'
|
||||||
|
},{
|
||||||
|
img:'images/startup/8.png',
|
||||||
|
title:'Workshops With Experts',
|
||||||
|
desc:'Get a front-row seat to learn from crypto experts, authors, and successful entrepreneurs.'
|
||||||
|
},{
|
||||||
|
img:'images/startup/9.png',
|
||||||
|
title:'Network of 30+ Mentors',
|
||||||
|
desc:'Our mentors bring a diverse set of skills from various industries to give you key feedback and push you to the next level. They are your long-term allies and champions.'
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.fullpage-container{
|
||||||
|
.startup-section-view{
|
||||||
|
background-size:100% calc(100% - .15rem);
|
||||||
|
background-position: center .96rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
.fullpage-container{
|
||||||
|
.startup-section-view{
|
||||||
|
background-size:300% 100%;
|
||||||
|
padding-bottom: .65rem;
|
||||||
|
background-position: center .88rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,53 @@
|
||||||
|
export default function ({ store, redirect, req, router, app: { $axios } }) {
|
||||||
|
// 数据访问前缀
|
||||||
|
$axios.defaults.headers = {
|
||||||
|
Authorization: store.getters.myAuthorization||''
|
||||||
|
}
|
||||||
|
// request拦截器
|
||||||
|
// $axios.onRequest(config => {
|
||||||
|
// if(process.client){
|
||||||
|
// 客户端下，请求进度条开始
|
||||||
|
// NProgress.start();
|
||||||
|
// }
|
||||||
|
// 将获取到token加入到请求头中
|
||||||
|
// });
|
||||||
|
// response拦截器，数据返回后，可以先在这里进行一个简单的判断
|
||||||
|
$axios.interceptors.response.use(
|
||||||
|
response => {
|
||||||
|
if (process.client) {
|
||||||
|
// 客户端下， 请求进度条结束
|
||||||
|
// NProgress.done();
|
||||||
|
}
|
||||||
|
// return response
|
||||||
|
if (response.data.code == 401) {
|
||||||
|
// 返回401，token验证失败，清除客户端cookie
|
||||||
|
// Cookie.remove("token");
|
||||||
|
// 重定向到登录页面， 这里做一个判断，容错：req.url 未定义
|
||||||
|
// if(req.url){
|
||||||
|
// redirect("/sign?ref="+req.url)
|
||||||
|
// }else{
|
||||||
|
// redirect("/sign")
|
||||||
|
// }
|
||||||
|
} else if (response.data.code == 404) {
|
||||||
|
// 重定向到404页面
|
||||||
|
// redirect("/")
|
||||||
|
} else {
|
||||||
|
// 请求接口数据正常，返回数据
|
||||||
|
return response
|
||||||
|
}
|
||||||
|
},
|
||||||
|
error => {
|
||||||
|
if (process.client) {
|
||||||
|
// NProgress.done();
|
||||||
|
}
|
||||||
|
if (error.response.status == 500) {
|
||||||
|
// http状态500，服务器内部错误，重定向到500页面
|
||||||
|
// redirect("/500.htm")
|
||||||
|
}
|
||||||
|
if (error.response.status == 404) {
|
||||||
|
// http状态500，请求API找不到，重定向到404页面
|
||||||
|
// redirect("/404.html")
|
||||||
|
}
|
||||||
|
return Promise.reject(error.response) // 返回接口返回的错误信息
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
import Vue from 'vue';
|
||||||
|
import { Pagination as ElPagination } from 'element-ui';
|
||||||
|
Vue.use(ElPagination)
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
import Vue from 'vue'
|
||||||
|
import LottieAnimation from 'lottie-web-vue'
|
||||||
|
Vue.use(LottieAnimation); // add lottie-animation to your global scope
|
||||||
|
|
@ -0,0 +1,25 @@
|
||||||
|
(function(){
|
||||||
|
function bindEvent(type){
|
||||||
|
return (data)=>{
|
||||||
|
const e = new Event(type);
|
||||||
|
e.data = data;
|
||||||
|
window.dispatchEvent(e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const event_trigger = bindEvent("hadSetRem")
|
||||||
|
function remCurrent(){
|
||||||
|
const clientWidth=document.documentElement.clientWidth;
|
||||||
|
let fontSize = clientWidth / 19.2 +'px';
|
||||||
|
if(clientWidth<=750){
|
||||||
|
fontSize = clientWidth / 7.5 + 'px';
|
||||||
|
}else if(750<clientWidth&&clientWidth<=1920){
|
||||||
|
fontSize=clientWidth / 19.2 +'px';
|
||||||
|
}
|
||||||
|
document.documentElement.style.fontSize = fontSize;
|
||||||
|
}
|
||||||
|
window.addEventListener('resize',remCurrent)
|
||||||
|
remCurrent()
|
||||||
|
setTimeout(()=>{
|
||||||
|
event_trigger(true)
|
||||||
|
},1000)
|
||||||
|
})()
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
// plugins/svgIcon.js
|
||||||
|
import Vue from 'vue'
|
||||||
|
import SvgIcon from '@/components/SvgIcon.vue'// Nuxt 默认@指向根目录
|
||||||
|
|
||||||
|
// 注册组件
|
||||||
|
Vue.component('svg-icon', SvgIcon)
|
||||||
|
// 预请求svg组件(通过之前的svg-sprite-loader加载)
|
||||||
|
const req = require.context('@/assets/svg', false, /\.svg$/)
|
||||||
|
req.keys().map(req)
|
||||||
|
|
@ -0,0 +1,8 @@
|
||||||
|
import Vue from 'vue'
|
||||||
|
import Vant,{Lazyload } from 'vant'
|
||||||
|
|
||||||
|
Vue.use(Vant)
|
||||||
|
Vue.use(Lazyload)
|
||||||
|
Vue.use(Lazyload, {
|
||||||
|
lazyComponent: true,
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
import Vue from 'vue';
|
||||||
|
import VueAnimate from 'vue-animate-plugin';
|
||||||
|
|
||||||
|
Vue.use(VueAnimate, {
|
||||||
|
valueof: ':', // 表示v-animate指令修饰符中键与值使用什么字符分割，默认使用':'
|
||||||
|
begin: 'begin', // 表示v-animate指令修饰符中动画开始之前的挂钩点的名称，可以通过方式`.begin:onBegin`注入钩子函数，它可以是async function
|
||||||
|
after: 'complete', // 表示v-animate指令修饰符中动画结束之后的挂钩点的名称，`.complete:onComplete`方式注入钩子，它可以是async function
|
||||||
|
callback: null // 表示v-animate指令中，动画部分（包括之后的衔接部分）完全执行完毕后的钩子函数注入口
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
import Vue from 'vue'
|
||||||
|
import VueClipboard from 'vue-clipboard2'
|
||||||
|
VueClipboard.config.autoSetContainer = true
|
||||||
|
Vue.use(VueClipboard)
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
import 'animate.css'
|
||||||
|
import 'vue-fullpage/vue-fullpage.css'
|
||||||
|
import VueFullpage from 'vue-fullpage'
|
||||||
|
Vue.use(VueFullpage)
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
import Vue from 'vue'
|
||||||
|
import VTooltip from 'v-tooltip'
|
||||||
|
|
||||||
|
Vue.use(VTooltip)
|
||||||
|
|
@ -0,0 +1,514 @@
|
||||||
|
(function () {
|
||||||
|
var MutationObserver; var Util; var WeakMap; var getComputedStyle; var getComputedStyleRX
|
||||||
|
var bind = function (fn, me) { return function () { return fn.apply(me, arguments) } }
|
||||||
|
var indexOf = [].indexOf || function (item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i } return -1 }
|
||||||
|
|
||||||
|
Util = (function () {
|
||||||
|
function Util () {}
|
||||||
|
|
||||||
|
Util.prototype.extend = function (custom, defaults) {
|
||||||
|
var key, value
|
||||||
|
for (key in defaults) {
|
||||||
|
value = defaults[key]
|
||||||
|
if (custom[key] == null) {
|
||||||
|
custom[key] = value
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return custom
|
||||||
|
}
|
||||||
|
|
||||||
|
Util.prototype.isMobile = function (agent) {
|
||||||
|
return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(agent)
|
||||||
|
}
|
||||||
|
|
||||||
|
Util.prototype.createEvent = function (event, bubble, cancel, detail) {
|
||||||
|
var customEvent
|
||||||
|
if (bubble == null) {
|
||||||
|
bubble = false
|
||||||
|
}
|
||||||
|
if (cancel == null) {
|
||||||
|
cancel = false
|
||||||
|
}
|
||||||
|
if (detail == null) {
|
||||||
|
detail = null
|
||||||
|
}
|
||||||
|
if (document.createEvent != null) {
|
||||||
|
customEvent = document.createEvent('CustomEvent')
|
||||||
|
customEvent.initCustomEvent(event, bubble, cancel, detail)
|
||||||
|
} else if (document.createEventObject != null) {
|
||||||
|
customEvent = document.createEventObject()
|
||||||
|
customEvent.eventType = event
|
||||||
|
} else {
|
||||||
|
customEvent.eventName = event
|
||||||
|
}
|
||||||
|
return customEvent
|
||||||
|
}
|
||||||
|
|
||||||
|
Util.prototype.emitEvent = function (elem, event) {
|
||||||
|
if (elem.dispatchEvent != null) {
|
||||||
|
return elem.dispatchEvent(event)
|
||||||
|
} else if (event in (elem != null)) {
|
||||||
|
return elem[event]()
|
||||||
|
} else if (('on' + event) in (elem != null)) {
|
||||||
|
return elem['on' + event]()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Util.prototype.addEvent = function (elem, event, fn) {
|
||||||
|
if (elem.addEventListener != null) {
|
||||||
|
return elem.addEventListener(event, fn, false)
|
||||||
|
} else if (elem.attachEvent != null) {
|
||||||
|
return elem.attachEvent('on' + event, fn)
|
||||||
|
} else {
|
||||||
|
return elem[event] = fn
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Util.prototype.removeEvent = function (elem, event, fn) {
|
||||||
|
if (elem.removeEventListener != null) {
|
||||||
|
return elem.removeEventListener(event, fn, false)
|
||||||
|
} else if (elem.detachEvent != null) {
|
||||||
|
return elem.detachEvent('on' + event, fn)
|
||||||
|
} else {
|
||||||
|
return delete elem[event]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Util.prototype.innerHeight = function () {
|
||||||
|
if ('innerHeight' in window) {
|
||||||
|
return window.innerHeight
|
||||||
|
} else {
|
||||||
|
return document.documentElement.clientHeight
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return Util
|
||||||
|
|
||||||
|
})()
|
||||||
|
|
||||||
|
WeakMap = this.WeakMap || this.MozWeakMap || (WeakMap = (function () {
|
||||||
|
function WeakMap () {
|
||||||
|
this.keys = []
|
||||||
|
this.values = []
|
||||||
|
}
|
||||||
|
|
||||||
|
WeakMap.prototype.get = function (key) {
|
||||||
|
var i, item, j, len, ref
|
||||||
|
ref = this.keys
|
||||||
|
for (i = j = 0, len = ref.length; j < len; i = ++j) {
|
||||||
|
item = ref[i]
|
||||||
|
if (item === key) {
|
||||||
|
return this.values[i]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
WeakMap.prototype.set = function (key, value) {
|
||||||
|
var i, item, j, len, ref
|
||||||
|
ref = this.keys
|
||||||
|
for (i = j = 0, len = ref.length; j < len; i = ++j) {
|
||||||
|
item = ref[i]
|
||||||
|
if (item === key) {
|
||||||
|
this.values[i] = value
|
||||||
|
return
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.keys.push(key)
|
||||||
|
return this.values.push(value)
|
||||||
|
}
|
||||||
|
|
||||||
|
return WeakMap
|
||||||
|
|
||||||
|
})())
|
||||||
|
|
||||||
|
MutationObserver = this.MutationObserver || this.WebkitMutationObserver || this.MozMutationObserver || (MutationObserver = (function () {
|
||||||
|
function MutationObserver () {
|
||||||
|
if (typeof console !== 'undefined' && console !== null) {
|
||||||
|
console.warn('MutationObserver is not supported by your browser.')
|
||||||
|
}
|
||||||
|
if (typeof console !== 'undefined' && console !== null) {
|
||||||
|
console.warn('WOW.js cannot detect dom mutations, please call .sync() after loading new content.')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
MutationObserver.notSupported = true
|
||||||
|
|
||||||
|
MutationObserver.prototype.observe = function () {}
|
||||||
|
|
||||||
|
return MutationObserver
|
||||||
|
|
||||||
|
})())
|
||||||
|
|
||||||
|
getComputedStyle = this.getComputedStyle || function (el, pseudo) {
|
||||||
|
this.getPropertyValue = function (prop) {
|
||||||
|
var ref
|
||||||
|
if (prop === 'float') {
|
||||||
|
prop = 'styleFloat'
|
||||||
|
}
|
||||||
|
if (getComputedStyleRX.test(prop)) {
|
||||||
|
prop.replace(getComputedStyleRX, function (_, _char) {
|
||||||
|
return _char.toUpperCase()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
return ((ref = el.currentStyle) != null ? ref[prop] : void 0) || null
|
||||||
|
}
|
||||||
|
return this
|
||||||
|
}
|
||||||
|
|
||||||
|
getComputedStyleRX = /(\-([a-z]){1})/g
|
||||||
|
|
||||||
|
this.WOW = (function () {
|
||||||
|
WOW.prototype.defaults = {
|
||||||
|
boxClass: 'wow',
|
||||||
|
animateClass: 'animated',
|
||||||
|
offset: 0,
|
||||||
|
mobile: true,
|
||||||
|
live: true,
|
||||||
|
callback: null,
|
||||||
|
scrollContainer: null
|
||||||
|
}
|
||||||
|
|
||||||
|
function WOW (options) {
|
||||||
|
if (options == null) {
|
||||||
|
options = {}
|
||||||
|
}
|
||||||
|
this.scrollCallback = bind(this.scrollCallback, this)
|
||||||
|
this.scrollHandler = bind(this.scrollHandler, this)
|
||||||
|
this.resetAnimation = bind(this.resetAnimation, this)
|
||||||
|
this.start = bind(this.start, this)
|
||||||
|
this.scrolled = true
|
||||||
|
this.config = this.util().extend(options, this.defaults)
|
||||||
|
if (options.scrollContainer != null) {
|
||||||
|
this.config.scrollContainer = document.querySelector(options.scrollContainer)
|
||||||
|
}
|
||||||
|
this.animationNameCache = new WeakMap()
|
||||||
|
this.wowEvent = this.util().createEvent(this.config.boxClass)
|
||||||
|
}
|
||||||
|
|
||||||
|
WOW.prototype.init = function () {
|
||||||
|
var ref
|
||||||
|
this.element = window.document.documentElement
|
||||||
|
if ((ref = document.readyState) === 'interactive' || ref === 'complete') {
|
||||||
|
this.start()
|
||||||
|
} else {
|
||||||
|
this.util().addEvent(document, 'DOMContentLoaded', this.start)
|
||||||
|
}
|
||||||
|
return this.finished = []
|
||||||
|
}
|
||||||
|
|
||||||
|
WOW.prototype.start = function () {
|
||||||
|
var box, j, len, ref
|
||||||
|
this.stopped = false
|
||||||
|
this.boxes = (function () {
|
||||||
|
var j, len, ref, results
|
||||||
|
ref = this.element.querySelectorAll('.' + this.config.boxClass)
|
||||||
|
results = []
|
||||||
|
for (j = 0, len = ref.length; j < len; j++) {
|
||||||
|
box = ref[j]
|
||||||
|
results.push(box)
|
||||||
|
}
|
||||||
|
return results
|
||||||
|
}.call(this))
|
||||||
|
this.all = (function () {
|
||||||
|
var j, len, ref, results
|
||||||
|
ref = this.boxes
|
||||||
|
results = []
|
||||||
|
for (j = 0, len = ref.length; j < len; j++) {
|
||||||
|
box = ref[j]
|
||||||
|
results.push(box)
|
||||||
|
}
|
||||||
|
return results
|
||||||
|
}.call(this))
|
||||||
|
if (this.boxes.length) {
|
||||||
|
if (this.disabled()) {
|
||||||
|
this.resetStyle()
|
||||||
|
} else {
|
||||||
|
ref = this.boxes
|
||||||
|
for (j = 0, len = ref.length; j < len; j++) {
|
||||||
|
box = ref[j]
|
||||||
|
this.applyStyle(box, true)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (!this.disabled()) {
|
||||||
|
this.util().addEvent(this.config.scrollContainer || window, 'scroll', this.scrollHandler)
|
||||||
|
this.util().addEvent(window, 'resize', this.scrollHandler)
|
||||||
|
this.interval = setInterval(this.scrollCallback, 50)
|
||||||
|
}
|
||||||
|
if (this.config.live) {
|
||||||
|
return new MutationObserver((function (_this) {
|
||||||
|
return function (records) {
|
||||||
|
var k, len1, node, record, results
|
||||||
|
results = []
|
||||||
|
for (k = 0, len1 = records.length; k < len1; k++) {
|
||||||
|
record = records[k]
|
||||||
|
results.push(function () {
|
||||||
|
var l, len2, ref1, results1
|
||||||
|
ref1 = record.addedNodes || []
|
||||||
|
results1 = []
|
||||||
|
for (l = 0, len2 = ref1.length; l < len2; l++) {
|
||||||
|
node = ref1[l]
|
||||||
|
results1.push(this.doSync(node))
|
||||||
|
}
|
||||||
|
return results1
|
||||||
|
}.call(_this))
|
||||||
|
}
|
||||||
|
return results
|
||||||
|
}
|
||||||
|
})(this)).observe(document.body, {
|
||||||
|
childList: true,
|
||||||
|
subtree: true
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
WOW.prototype.stop = function () {
|
||||||
|
this.stopped = true
|
||||||
|
this.util().removeEvent(this.config.scrollContainer || window, 'scroll', this.scrollHandler)
|
||||||
|
this.util().removeEvent(window, 'resize', this.scrollHandler)
|
||||||
|
if (this.interval != null) {
|
||||||
|
return clearInterval(this.interval)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
WOW.prototype.sync = function (element) {
|
||||||
|
if (MutationObserver.notSupported) {
|
||||||
|
return this.doSync(this.element)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
WOW.prototype.doSync = function (element) {
|
||||||
|
var box, j, len, ref, results
|
||||||
|
if (element == null) {
|
||||||
|
element = this.element
|
||||||
|
}
|
||||||
|
if (element.nodeType !== 1) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
element = element.parentNode || element
|
||||||
|
ref = element.querySelectorAll('.' + this.config.boxClass)
|
||||||
|
results = []
|
||||||
|
for (j = 0, len = ref.length; j < len; j++) {
|
||||||
|
box = ref[j]
|
||||||
|
if (indexOf.call(this.all, box) < 0) {
|
||||||
|
this.boxes.push(box)
|
||||||
|
this.all.push(box)
|
||||||
|
if (this.stopped || this.disabled()) {
|
||||||
|
this.resetStyle()
|
||||||
|
} else {
|
||||||
|
this.applyStyle(box, true)
|
||||||
|
}
|
||||||
|
results.push(this.scrolled = true)
|
||||||
|
} else {
|
||||||
|
results.push(void 0)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return results
|
||||||
|
}
|
||||||
|
|
||||||
|
WOW.prototype.show = function (box) {
|
||||||
|
this.applyStyle(box)
|
||||||
|
box.className = box.className + ' ' + this.config.animateClass
|
||||||
|
if (this.config.callback != null) {
|
||||||
|
this.config.callback(box)
|
||||||
|
}
|
||||||
|
this.util().emitEvent(box, this.wowEvent)
|
||||||
|
this.util().addEvent(box, 'animationend', this.resetAnimation)
|
||||||
|
this.util().addEvent(box, 'oanimationend', this.resetAnimation)
|
||||||
|
this.util().addEvent(box, 'webkitAnimationEnd', this.resetAnimation)
|
||||||
|
this.util().addEvent(box, 'MSAnimationEnd', this.resetAnimation)
|
||||||
|
return box
|
||||||
|
}
|
||||||
|
|
||||||
|
WOW.prototype.applyStyle = function (box, hidden) {
|
||||||
|
var delay, duration, iteration
|
||||||
|
duration = box.getAttribute('data-wow-duration')
|
||||||
|
delay = box.getAttribute('data-wow-delay')
|
||||||
|
iteration = box.getAttribute('data-wow-iteration')
|
||||||
|
return this.animate((function (_this) {
|
||||||
|
return function () {
|
||||||
|
return _this.customStyle(box, hidden, duration, delay, iteration)
|
||||||
|
}
|
||||||
|
})(this))
|
||||||
|
}
|
||||||
|
|
||||||
|
WOW.prototype.animate = (function () {
|
||||||
|
if ('requestAnimationFrame' in window) {
|
||||||
|
return function (callback) {
|
||||||
|
return window.requestAnimationFrame(callback)
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
return function (callback) {
|
||||||
|
return callback()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})()
|
||||||
|
|
||||||
|
WOW.prototype.resetStyle = function () {
|
||||||
|
var box, j, len, ref, results
|
||||||
|
ref = this.boxes
|
||||||
|
results = []
|
||||||
|
for (j = 0, len = ref.length; j < len; j++) {
|
||||||
|
box = ref[j]
|
||||||
|
results.push(box.style.visibility = 'visible')
|
||||||
|
}
|
||||||
|
return results
|
||||||
|
}
|
||||||
|
|
||||||
|
WOW.prototype.resetAnimation = function (event) {
|
||||||
|
var target
|
||||||
|
if (event.type.toLowerCase().indexOf('animationend') >= 0) {
|
||||||
|
target = event.target || event.srcElement
|
||||||
|
return target.className = target.className.replace(this.config.animateClass, '').trim()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
WOW.prototype.customStyle = function (box, hidden, duration, delay, iteration) {
|
||||||
|
if (hidden) {
|
||||||
|
this.cacheAnimationName(box)
|
||||||
|
}
|
||||||
|
box.style.visibility = hidden ? 'hidden' : 'visible'
|
||||||
|
if (duration) {
|
||||||
|
this.vendorSet(box.style, {
|
||||||
|
animationDuration: duration
|
||||||
|
})
|
||||||
|
}
|
||||||
|
if (delay) {
|
||||||
|
this.vendorSet(box.style, {
|
||||||
|
animationDelay: delay
|
||||||
|
})
|
||||||
|
}
|
||||||
|
if (iteration) {
|
||||||
|
this.vendorSet(box.style, {
|
||||||
|
animationIterationCount: iteration
|
||||||
|
})
|
||||||
|
}
|
||||||
|
this.vendorSet(box.style, {
|
||||||
|
animationName: hidden ? 'none' : this.cachedAnimationName(box)
|
||||||
|
})
|
||||||
|
return box
|
||||||
|
}
|
||||||
|
|
||||||
|
WOW.prototype.vendors = ['moz', 'webkit']
|
||||||
|
|
||||||
|
WOW.prototype.vendorSet = function (elem, properties) {
|
||||||
|
var name, results, value, vendor
|
||||||
|
results = []
|
||||||
|
for (name in properties) {
|
||||||
|
value = properties[name]
|
||||||
|
elem['' + name] = value
|
||||||
|
results.push(function () {
|
||||||
|
var j, len, ref, results1
|
||||||
|
ref = this.vendors
|
||||||
|
results1 = []
|
||||||
|
for (j = 0, len = ref.length; j < len; j++) {
|
||||||
|
vendor = ref[j]
|
||||||
|
results1.push(elem['' + vendor + (name.charAt(0).toUpperCase()) + (name.substr(1))] = value)
|
||||||
|
}
|
||||||
|
return results1
|
||||||
|
}.call(this))
|
||||||
|
}
|
||||||
|
return results
|
||||||
|
}
|
||||||
|
|
||||||
|
WOW.prototype.vendorCSS = function (elem, property) {
|
||||||
|
var j, len, ref, result, style, vendor
|
||||||
|
style = getComputedStyle(elem)
|
||||||
|
result = style.getPropertyCSSValue(property)
|
||||||
|
ref = this.vendors
|
||||||
|
for (j = 0, len = ref.length; j < len; j++) {
|
||||||
|
vendor = ref[j]
|
||||||
|
result = result || style.getPropertyCSSValue('-' + vendor + '-' + property)
|
||||||
|
}
|
||||||
|
return result
|
||||||
|
}
|
||||||
|
|
||||||
|
WOW.prototype.animationName = function (box) {
|
||||||
|
var animationName, error
|
||||||
|
try {
|
||||||
|
animationName = this.vendorCSS(box, 'animation-name').cssText
|
||||||
|
} catch (error) {
|
||||||
|
animationName = getComputedStyle(box).getPropertyValue('animation-name')
|
||||||
|
}
|
||||||
|
if (animationName === 'none') {
|
||||||
|
return ''
|
||||||
|
} else {
|
||||||
|
return animationName
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
WOW.prototype.cacheAnimationName = function (box) {
|
||||||
|
return this.animationNameCache.set(box, this.animationName(box))
|
||||||
|
}
|
||||||
|
|
||||||
|
WOW.prototype.cachedAnimationName = function (box) {
|
||||||
|
return this.animationNameCache.get(box)
|
||||||
|
}
|
||||||
|
|
||||||
|
WOW.prototype.scrollHandler = function () {
|
||||||
|
return this.scrolled = true
|
||||||
|
}
|
||||||
|
|
||||||
|
WOW.prototype.scrollCallback = function () {
|
||||||
|
var box
|
||||||
|
if (this.scrolled) {
|
||||||
|
this.scrolled = false
|
||||||
|
this.boxes = (function () {
|
||||||
|
var j, len, ref, results
|
||||||
|
ref = this.boxes
|
||||||
|
results = []
|
||||||
|
for (j = 0, len = ref.length; j < len; j++) {
|
||||||
|
box = ref[j]
|
||||||
|
if (!(box)) {
|
||||||
|
continue
|
||||||
|
}
|
||||||
|
if (this.isVisible(box)) {
|
||||||
|
this.show(box)
|
||||||
|
continue
|
||||||
|
}
|
||||||
|
results.push(box)
|
||||||
|
}
|
||||||
|
return results
|
||||||
|
}.call(this))
|
||||||
|
if (!(this.boxes.length || this.config.live)) {
|
||||||
|
return this.stop()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
WOW.prototype.offsetTop = function (element) {
|
||||||
|
var top
|
||||||
|
while (element.offsetTop === void 0) {
|
||||||
|
element = element.parentNode
|
||||||
|
}
|
||||||
|
top = element.offsetTop
|
||||||
|
while (element = element.offsetParent) {
|
||||||
|
top += element.offsetTop
|
||||||
|
}
|
||||||
|
return top
|
||||||
|
}
|
||||||
|
|
||||||
|
WOW.prototype.isVisible = function (box) {
|
||||||
|
var bottom, offset, top, viewBottom, viewTop
|
||||||
|
offset = box.getAttribute('data-wow-offset') || this.config.offset
|
||||||
|
viewTop = (this.config.scrollContainer && this.config.scrollContainer.scrollTop) || window.pageYOffset
|
||||||
|
viewBottom = viewTop + Math.min(this.element.clientHeight, this.util().innerHeight()) - offset
|
||||||
|
top = this.offsetTop(box)
|
||||||
|
bottom = top + box.clientHeight
|
||||||
|
return top <= viewBottom && bottom >= viewTop
|
||||||
|
}
|
||||||
|
|
||||||
|
WOW.prototype.util = function () {
|
||||||
|
return this._util != null ? this._util : this._util = new Util()
|
||||||
|
}
|
||||||
|
|
||||||
|
WOW.prototype.disabled = function () {
|
||||||
|
return !this.config.mobile && this.util().isMobile(navigator.userAgent)
|
||||||
|
}
|
||||||
|
|
||||||
|
return WOW
|
||||||
|
|
||||||
|
})()
|
||||||
|
|
||||||
|
}).call(this)
|
||||||
|
window.WOW=this.WOW
|
||||||
|
|
@ -0,0 +1,63 @@
|
||||||
|
/* eslint-disable */
|
||||||
|
const path = require('path');
|
||||||
|
const fsEx = require('fs-extra');
|
||||||
|
const chalk = require('chalk')
|
||||||
|
const archiver = require('archiver');
|
||||||
|
const fs = require('fs');
|
||||||
|
const root = process.cwd()
|
||||||
|
const moment=require('moment')
|
||||||
|
console.log(chalk.green(`root path :${root}`))
|
||||||
|
const resolve = (url) => {
|
||||||
|
return path.join(root, url)
|
||||||
|
}
|
||||||
|
|
||||||
|
const copy = async (from, to) => {
|
||||||
|
try {
|
||||||
|
await fsEx.copy(resolve(from), resolve(to));
|
||||||
|
console.log(chalk.green(`success:${from}===>${to}`));
|
||||||
|
} catch (error) {
|
||||||
|
console.log(chalk.red(`errors:=>${error}`));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const copyFile = async () => {
|
||||||
|
await Promise.all([
|
||||||
|
copy('/static/', '/server/static/'),
|
||||||
|
copy('/.nuxt/', '/server/.nuxt/'),
|
||||||
|
copy('/ecosystem.config.js', '/server/ecosystem.config.js'),
|
||||||
|
copy('/package.json', '/server/package.json'),
|
||||||
|
copy('/nuxt.config.js', '/server/nuxt.config.js'),
|
||||||
|
]);
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
function zipFile() {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
const archive = archiver('zip', {
|
||||||
|
zlib: {
|
||||||
|
level: 5,
|
||||||
|
},
|
||||||
|
}).on('error', (err) => {
|
||||||
|
reject(err)
|
||||||
|
});
|
||||||
|
const output = fs.createWriteStream(`${root}/Limx${moment(new Date()).format('HH时mm分ss秒')}.zip`)
|
||||||
|
.on('close', (err) => {
|
||||||
|
if (err) {
|
||||||
|
reject(err)
|
||||||
|
}
|
||||||
|
resolve();
|
||||||
|
});
|
||||||
|
archive.pipe(output);
|
||||||
|
archive.directory(path.join(root, `/server`), `/server`);
|
||||||
|
archive.finalize();
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// copyFile();
|
||||||
|
module.exports = {
|
||||||
|
copy,
|
||||||
|
copyFile,
|
||||||
|
zipFile
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,47 @@
|
||||||
|
/* eslint-disable */
|
||||||
|
const {
|
||||||
|
copyFile,
|
||||||
|
zipFile,
|
||||||
|
} = require('./file');
|
||||||
|
const chalk = require('chalk');
|
||||||
|
const path = require('path');
|
||||||
|
|
||||||
|
const root = process.cwd();
|
||||||
|
const node_ssh = require('node-ssh');
|
||||||
|
|
||||||
|
const ssh = new node_ssh();
|
||||||
|
|
||||||
|
const deploy = async() => {
|
||||||
|
await copyFile();
|
||||||
|
await zipFile();
|
||||||
|
// await ssh.connect({
|
||||||
|
// host : '---',
|
||||||
|
// username: '----',
|
||||||
|
// password: '----',
|
||||||
|
// port : --,
|
||||||
|
// });
|
||||||
|
//
|
||||||
|
// await ssh.putFile(`${root}/server/server.zip`, '/usr/local/smart-library/server-pkg/server.zip').then(() => {
|
||||||
|
// console.log('The File thing is done');
|
||||||
|
// }, (error) => {
|
||||||
|
// console.log('Something\'s wrong');
|
||||||
|
// console.log(error);
|
||||||
|
// });
|
||||||
|
//
|
||||||
|
//
|
||||||
|
// await ssh.exec('sh', ['./deploy.sh'], {
|
||||||
|
// cwd: '/usr/local/smart-library/server-pkg',
|
||||||
|
// onStdout(chunk) {
|
||||||
|
// console.log(chalk.green(chunk.toString('utf8')));
|
||||||
|
// },
|
||||||
|
// onStderr(chunk) {
|
||||||
|
// console.log(chalk.red(chunk.toString('utf8')));
|
||||||
|
// },
|
||||||
|
// });
|
||||||
|
// console.log('success');
|
||||||
|
process.exit(0);
|
||||||
|
};
|
||||||
|
deploy().catch((e) => {
|
||||||
|
console.log(e);
|
||||||
|
process.exit(0);
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,2 @@
|
||||||
|
const cmd=require('node-cmd');
|
||||||
|
cmd.run('yarn start');
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 293 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 65 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 194 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue