|
|
@@ -7,7 +7,7 @@
|
|
|
</section>
|
|
|
</div>
|
|
|
<div class="company-intro">
|
|
|
- <section class="company-intro-label wow animate__flipOutY">
|
|
|
+ <section class="company-intro-label wow animate__animated animate__rubberBand animate__delay-0.5s">
|
|
|
公司简介
|
|
|
</section>
|
|
|
<div class="company-intro-text ">
|
|
|
@@ -17,16 +17,428 @@
|
|
|
请进来”、“洋为中用”的全球化视野，融合中西文化，全力打造具有成长型思维模式的未来人才。
|
|
|
</div>
|
|
|
</div>
|
|
|
- <Label />
|
|
|
+ <!-- 大事记 -->
|
|
|
+ <div class="event">
|
|
|
+ <div class="label wow animate__animated animate__fadeInDown animate__delay-1s">
|
|
|
+ <div class="label-en">
|
|
|
+ EVENTS
|
|
|
+ </div>
|
|
|
+ <div class="label-zn">
|
|
|
+ 大事记
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="event-box">
|
|
|
+ <img class="event-bgimg" src="http://res.training.luojigou.vip/Fhe0g5Z_6DRjLf3-lSDXKTff-A6Q?imageView2/0/q/50|imageslim" alt="">
|
|
|
+ <div :style="{top: 139 + 240 * item.site.y + 'px' ,
|
|
|
+ left: 121 + 261 * item.site.x + 'px'}"
|
|
|
+ :class="['event-box-item wow animate__animated', 'animate__rubberBand' ]" v-for="item in eventData" :key="item.id">
|
|
|
+ <img @mouseenter="currentEventImg(item)" class="yearImgurl cp" :src="item.yearImgurl" alt="">
|
|
|
+ <img v-if="currentEventImgId === item.id" @mouseleave="currentEventImgId = ''" class="eventImgurl" :src="item.eventImgurl" alt="">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 核心团队 -->
|
|
|
+ <div class="kernel">
|
|
|
+ <div class="label wow animate__animated animate__fadeInDown animate__delay-1s">
|
|
|
+ <div class="label-en">
|
|
|
+ KERNEL
|
|
|
+ </div>
|
|
|
+ <div class="label-zn">
|
|
|
+ 核心团队
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="kernel-box">
|
|
|
+ <div :class="['kernel-box-item wow animate__animated' , (item.id + 1) % 3 === 0 ? 'animate__lightSpeedInLeft' : item.id % 3 === 0 ? 'animate__lightSpeedInRight' : '' ]" v-for="item in kernelData" :key="item.id">
|
|
|
+ <div class="top">
|
|
|
+ <img class="people-img" :src="item.imgUrl" alt="" @mouseenter="currentElement(item)" >
|
|
|
+ <img class="overlay-img"
|
|
|
+ @mouseleave="currentMouserEnter = false"
|
|
|
+ :style="{display: currentMouserEnter && currentMouserId === item.id ? 'block' : 'none'}"
|
|
|
+ src="http://res.training.luojigou.vip/FstkGdSgJ91jUeZFYT35-ZOdxXT2?imageView2/0/q/50|imageslim"
|
|
|
+ alt="">
|
|
|
+ <div class="people-intro">
|
|
|
+ <div class="name">{{item.name}}</div>
|
|
|
+ <div class="position">{{item.position}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="intro" :style="{display: currentMouserEnter && currentMouserId === item.id ? 'block' : 'none'}" >
|
|
|
+ <div class="intro-label">简历介绍</div>
|
|
|
+ <div class="resume">{{item.resume}}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="bottom">
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 文化 -->
|
|
|
+ <div class="cultrue">
|
|
|
+ <div class="label wow animate__animated animate__fadeInDown animate__delay-1s">
|
|
|
+ <div class="label-en">
|
|
|
+ CULTURE OF PRACTIVE
|
|
|
+ </div>
|
|
|
+ <div class="label-zn">
|
|
|
+ 我们努力践行的文化
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="cultrue-box">
|
|
|
+ <div class="cultrue-box-item" v-for="item in cultrueData" :key="item.id">
|
|
|
+ <img :src="item.imgUrl"
|
|
|
+ :class="['wow animate__animated',
|
|
|
+ item.id === 0 ? 'animate__lightSpeedInRight animate__delay-1s' :
|
|
|
+ item.id === 3 ? 'animate__lightSpeedInLeft animate__delay-2s' :
|
|
|
+ item.id === 1 ? 'animate__lightSpeedInRight animate__delay-3s':
|
|
|
+ item.id === 2 ? 'animate__lightSpeedInLeft animate__delay-4s' : ''
|
|
|
+ ]"
|
|
|
+ alt="">
|
|
|
+ <div class="cultrue-box-item-label">
|
|
|
+ {{ item.label }}
|
|
|
+ </div>
|
|
|
+ <div class="cultrue-box-item-text" v-html="item.text">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="cultrue-bgimg">
|
|
|
+ <img src="http://res.training.luojigou.vip/Fj4XvDNdIw6iDP8gWQuRHKijlFwM?imageView2/0/q/50|imageslim" alt="">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 理念 -->
|
|
|
+ <div class="idea">
|
|
|
+ <div class="label wow animate__animated animate__fadeInDown animate__delay-1s">
|
|
|
+ <div class="label-en">
|
|
|
+ THE PHILOSPHY
|
|
|
+ </div>
|
|
|
+ <div class="label-zn">
|
|
|
+ 我们始终秉承的理念
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="idea-box">
|
|
|
+ <div class="idea-box-item wow animate__animated animate__swing" v-for="item in ideaData" :key="item.id">
|
|
|
+ <div class="top">
|
|
|
+ <img :src="item.imgUrl" alt="">
|
|
|
+ </div>
|
|
|
+ <div class="center">
|
|
|
+ <img :src="item.numUrl" alt="">
|
|
|
+ <div>{{item.label}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="footer">
|
|
|
+ <div>{{item.resume}}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import Label from '@/components/products/label.vue'
|
|
|
+if (process.browser) {
|
|
|
+ var {WOW} = require('wowjs')
|
|
|
+}
|
|
|
+const kernelData = Object.freeze([
|
|
|
+ {
|
|
|
+ id: 0,
|
|
|
+ imgUrl: 'http://res.training.luojigou.vip/Fj7Az05kp48bQHYVKf6svfysS2Km?imageView2/0/q/50|imageslim',
|
|
|
+ position: 'CEO',
|
|
|
+ name: '张洁',
|
|
|
+ resume: '简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ imgUrl: 'http://res.training.luojigou.vip/Fj7Az05kp48bQHYVKf6svfysS2Km?imageView2/0/q/50|imageslim',
|
|
|
+ position: 'CEO',
|
|
|
+ name: '张洁',
|
|
|
+ resume: '简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2,
|
|
|
+ imgUrl: 'http://res.training.luojigou.vip/Fj7Az05kp48bQHYVKf6svfysS2Km?imageView2/0/q/50|imageslim',
|
|
|
+ position: 'CEO',
|
|
|
+ name: '张洁',
|
|
|
+ resume: '简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 3,
|
|
|
+ imgUrl: 'http://res.training.luojigou.vip/Fj7Az05kp48bQHYVKf6svfysS2Km?imageView2/0/q/50|imageslim',
|
|
|
+ position: 'CEO',
|
|
|
+ name: '张洁',
|
|
|
+ resume: '简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 4,
|
|
|
+ imgUrl: 'http://res.training.luojigou.vip/Fj7Az05kp48bQHYVKf6svfysS2Km?imageView2/0/q/50|imageslim',
|
|
|
+ position: 'CEO',
|
|
|
+ name: '张洁',
|
|
|
+ resume: '简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 5,
|
|
|
+ imgUrl: 'http://res.training.luojigou.vip/Fj7Az05kp48bQHYVKf6svfysS2Km?imageView2/0/q/50|imageslim',
|
|
|
+ position: 'CEO',
|
|
|
+ name: '张洁',
|
|
|
+ resume: '简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 6,
|
|
|
+ imgUrl: 'http://res.training.luojigou.vip/Fj7Az05kp48bQHYVKf6svfysS2Km?imageView2/0/q/50|imageslim',
|
|
|
+ position: 'CEO',
|
|
|
+ name: '张洁',
|
|
|
+ resume: '简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 7,
|
|
|
+ imgUrl: 'http://res.training.luojigou.vip/Fj7Az05kp48bQHYVKf6svfysS2Km?imageView2/0/q/50|imageslim',
|
|
|
+ position: 'CEO',
|
|
|
+ name: '张洁',
|
|
|
+ resume: '简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍简历介绍简历介绍简历介绍简历介绍 简历介绍'
|
|
|
+ },
|
|
|
+])
|
|
|
+const cultrueData = Object.freeze([
|
|
|
+ {
|
|
|
+ id: 0,
|
|
|
+ imgUrl: 'http://res.training.luojigou.vip/Fj0eXd5OYcJRX6z_yBEFbF0OW1Oy?imageView2/0/q/50|imageslim',
|
|
|
+ label: '宗旨',
|
|
|
+ text: '关注儿童成长</br>服务中国母亲',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ imgUrl: 'http://res.training.luojigou.vip/FrhQqD5x8r45P0_Dod_21toOFgle?imageView2/0/q/50|imageslim',
|
|
|
+ label: '文化',
|
|
|
+ text: '缔造愿景，追求卓越</br>共生共荣，体现价值',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2,
|
|
|
+ imgUrl: 'http://res.training.luojigou.vip/FuBgZGe-F3km2mVM4wByusZFFfAw?imageView2/0/q/50|imageslim',
|
|
|
+ label: '愿景',
|
|
|
+ text: '让中国的孩子</br>幸福成长',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 3,
|
|
|
+ imgUrl: 'http://res.training.luojigou.vip/FqOmEqUyO9YBjT65wqfSRr4gKFHD?imageView2/0/q/50|imageslim',
|
|
|
+ label: '价值观',
|
|
|
+ text: '客户第一</br>团队合力第二</br>专业专注</br>诚信公正</br>拥抱变化</br>激情快乐 ',
|
|
|
+ },
|
|
|
+])
|
|
|
+const ideaData = Object.freeze([
|
|
|
+ {
|
|
|
+ id: 0,
|
|
|
+ imgUrl: 'http://res.training.luojigou.vip/FgJw7WqbyCVkQJCgCBd07qipb_PI?imageView2/0/q/50|imageslim',
|
|
|
+ numUrl: 'http://res.training.luojigou.vip/FgX-hI1Y2fjoIvturT1uYaeVjnfB?imageView2/0/q/50|imageslim',
|
|
|
+ label: '专业技术',
|
|
|
+ resume: '我们拥有行业专业技术实力与自身 工程开发团队，为您的商业变现及 产品需求保驾护航。'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ imgUrl: 'http://res.training.luojigou.vip/Fl4S2hBlBWsTvfwdvYHaE3RKpLyO?imageView2/0/q/50|imageslim',
|
|
|
+ numUrl: 'http://res.training.luojigou.vip/Fk5hTknpr4deZWFtcfmRJSHNV3_K?imageView2/0/q/50|imageslim',
|
|
|
+ label: '贴心服务',
|
|
|
+ resume: '我们始终坚持优质的服务理念，无 论任何时候您遇到困难，我们都会 及时提供精准有效的解决方案。'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2,
|
|
|
+ imgUrl: 'http://res.training.luojigou.vip/FkRWFwiFQu4XL1BPA96jHbmK1X1D?imageView2/0/q/50|imageslim',
|
|
|
+ numUrl: 'http://res.training.luojigou.vip/FiBasqi9NpLdJ_U9jr-95yxgvL1C?imageView2/0/q/50|imageslim',
|
|
|
+ label: '创业伙伴',
|
|
|
+ resume: '我们把每一位客户都当作创业伙伴，期 盼在未来成长的道路上一路相伴，携手 前行。'
|
|
|
+ },
|
|
|
+])
|
|
|
+
|
|
|
+const eventData = Object.freeze([
|
|
|
+ {
|
|
|
+ id: 2003,
|
|
|
+ site: {
|
|
|
+ x: 3,
|
|
|
+ y: 4
|
|
|
+ },
|
|
|
+ yearImgurl: 'http://res.training.luojigou.vip/FsTtnNKFpIsYh69tIsWqEiocc0Jr?imageView2/0/q/50|imageslim',
|
|
|
+ eventImgurl: 'http://res.training.luojigou.vip/FrFfg21nonbZyNSUSpAWCiREn7lk?imageView2/0/q/50|imageslim'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2004,
|
|
|
+ site: {
|
|
|
+ x: 2,
|
|
|
+ y: 4
|
|
|
+ },
|
|
|
+ yearImgurl: 'http://res.training.luojigou.vip/Fhe4VjIQDeQtQzPnSVmsDc4yYYzE?imageView2/0/q/50|imageslim',
|
|
|
+ eventImgurl: 'http://res.training.luojigou.vip/FvnL2N118R-0Cp9OcKgK9Ru8nAyp?imageView2/0/q/50|imageslim'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2005,
|
|
|
+ site: {
|
|
|
+ x: 1,
|
|
|
+ y: 4
|
|
|
+ },
|
|
|
+ yearImgurl: 'http://res.training.luojigou.vip/FodjYYc3-VyZyJHnfuKJQGapkJzt?imageView2/0/q/50|imageslim',
|
|
|
+ eventImgurl: 'http://res.training.luojigou.vip/FqNcz_3P81MubVeHzAnn_RrkMoCQ?imageView2/0/q/50|imageslim'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2006,
|
|
|
+ site: {
|
|
|
+ x: 0,
|
|
|
+ y: 4
|
|
|
+ },
|
|
|
+ yearImgurl: 'http://res.training.luojigou.vip/Fj_2tRMk_1H9NSp9rE0XK0nEcv6g?imageView2/0/q/50|imageslim',
|
|
|
+ eventImgurl: 'http://res.training.luojigou.vip/FkvModMYKxFJcnqRrpGSULyd9Th7?imageView2/0/q/50|imageslim'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2007,
|
|
|
+ site: {
|
|
|
+ x: 0,
|
|
|
+ y: 3
|
|
|
+ },
|
|
|
+ yearImgurl: 'http://res.training.luojigou.vip/Fm4DqB0VKXcLXaa4P2suM1i-2LMZ?imageView2/0/q/50|imageslim',
|
|
|
+ eventImgurl: 'http://res.training.luojigou.vip/Fkp-2UvHIyIqEW9pu5tZKNpvcCov?imageView2/0/q/50|imageslim'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2008,
|
|
|
+ site: {
|
|
|
+ x: 1,
|
|
|
+ y: 3
|
|
|
+ },
|
|
|
+ yearImgurl: 'http://res.training.luojigou.vip/FlEj53_PWeL59J8V6qqduokmrEif?imageView2/0/q/50|imageslim',
|
|
|
+ eventImgurl: 'http://res.training.luojigou.vip/FpIzAvfIOeIhBEtzVEZYp74y7Wh3?imageView2/0/q/50|imageslim'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2009,
|
|
|
+ site: {
|
|
|
+ x: 2,
|
|
|
+ y: 3
|
|
|
+ },
|
|
|
+ yearImgurl: 'http://res.training.luojigou.vip/FtRU3rBk7D0SBEmbTujXX1o3THTU?imageView2/0/q/50|imageslim',
|
|
|
+ eventImgurl: 'http://res.training.luojigou.vip/Fnmlx106pwroL9I6UNo81BTpxGyO?imageView2/0/q/50|imageslim'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2010,
|
|
|
+ site: {
|
|
|
+ x: 3,
|
|
|
+ y: 3
|
|
|
+ },
|
|
|
+ yearImgurl: 'http://res.training.luojigou.vip/Fmx2IObHIKURUiGbrvX4cpZ-u5MB?imageView2/0/q/50|imageslim',
|
|
|
+ eventImgurl: 'http://res.training.luojigou.vip/Fg2GfiNmRknqRjTbzvCq09ewERIH?imageView2/0/q/50|imageslim'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2011,
|
|
|
+ site: {
|
|
|
+ x: 3,
|
|
|
+ y: 2
|
|
|
+ },
|
|
|
+ yearImgurl: 'http://res.training.luojigou.vip/FutAwrnX_ypeS4bUqol5xKVVqrXU?imageView2/0/q/50|imageslim',
|
|
|
+ eventImgurl: 'http://res.training.luojigou.vip/FuPF8r4-f8-_SY_v0Tky2AnFPYeH?imageView2/0/q/50|imageslim'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2012,
|
|
|
+ site: {
|
|
|
+ x: 2,
|
|
|
+ y: 2
|
|
|
+ },
|
|
|
+ yearImgurl: 'http://res.training.luojigou.vip/Fg3Jph3aJcX-hQtbvOs5UJZCzmj7?imageView2/0/q/50|imageslim',
|
|
|
+ eventImgurl: 'http://res.training.luojigou.vip/Fp5DT3Tg3CBl2rvjT9sIsCBcUSWu?imageView2/0/q/50|imageslim'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2013,
|
|
|
+ site: {
|
|
|
+ x: 1,
|
|
|
+ y: 2
|
|
|
+ },
|
|
|
+ yearImgurl: 'http://res.training.luojigou.vip/FjWOsyUqGM6eIaPW3_lCzDzw3h1M?imageView2/0/q/50|imageslim',
|
|
|
+ eventImgurl: 'http://res.training.luojigou.vip/FirCgjTps0bLqGV5-TOpuX6q8SMl?imageView2/0/q/50|imageslim'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2014,
|
|
|
+ site: {
|
|
|
+ x: 0,
|
|
|
+ y: 2
|
|
|
+ },
|
|
|
+ yearImgurl: 'http://res.training.luojigou.vip/FqI9b5_4iP6WmoVE_z7o9RLm7RZe?imageView2/0/q/50|imageslim',
|
|
|
+ eventImgurl: 'http://res.training.luojigou.vip/FlyzOxQWuiW2nYmACRUPsiCLyuw7?imageView2/0/q/50|imageslim'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2015,
|
|
|
+ site: {
|
|
|
+ x: 0,
|
|
|
+ y: 1
|
|
|
+ },
|
|
|
+ yearImgurl: 'http://res.training.luojigou.vip/FoeSNwPl-fQXqwwow99j9Rsd9tjB?imageView2/0/q/50|imageslim',
|
|
|
+ eventImgurl: 'http://res.training.luojigou.vip/FmBATtftJW08bU-5KGBFuKsAQSN1?imageView2/0/q/50|imageslim'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2016,
|
|
|
+ site: {
|
|
|
+ x: 1,
|
|
|
+ y: 1
|
|
|
+ },
|
|
|
+ yearImgurl: 'http://res.training.luojigou.vip/Fl2SA1cd8DqIzQGIQqh5qrNUMmR6?imageView2/0/q/50|imageslim',
|
|
|
+ eventImgurl: 'http://res.training.luojigou.vip/FoaOya6X8s6j3Bzc2oBNDvX-JHW2?imageView2/0/q/50|imageslim'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2017,
|
|
|
+ site: {
|
|
|
+ x: 2,
|
|
|
+ y: 1
|
|
|
+ },
|
|
|
+ yearImgurl: 'http://res.training.luojigou.vip/Fi_RKVrGct2V235xsKpwsIA51YX-?imageView2/0/q/50|imageslim',
|
|
|
+ eventImgurl: 'http://res.training.luojigou.vip/FsALqlvULFPhf-kxcPw1YtRiZjIG?imageView2/0/q/50|imageslim'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2018,
|
|
|
+ site: {
|
|
|
+ x: 3,
|
|
|
+ y: 1
|
|
|
+ },
|
|
|
+ yearImgurl: 'http://res.training.luojigou.vip/FvN4BWxIckbJmo_qrN7mlILrtQKg?imageView2/0/q/50|imageslim',
|
|
|
+ eventImgurl: 'http://res.training.luojigou.vip/FvQZtrIRkaNzGJ8KbF1-Cl-k5hfJ?imageView2/0/q/50|imageslim'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2019,
|
|
|
+ site: {
|
|
|
+ x: 3,
|
|
|
+ y: 0
|
|
|
+ },
|
|
|
+ yearImgurl: 'http://res.training.luojigou.vip/Fgr3xXoLsgpIP2wBglovLx0e89Mb?imageView2/0/q/50|imageslim',
|
|
|
+ eventImgurl: 'http://res.training.luojigou.vip/Flio74FIlTt_aYhyW-3scKmhSrHc?imageView2/0/q/50|imageslim'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2020,
|
|
|
+ site: {
|
|
|
+ x: 2,
|
|
|
+ y: 0
|
|
|
+ },
|
|
|
+ yearImgurl: 'http://res.training.luojigou.vip/FhjVzCv4CjuHsuCjJvSWGGxruzxv?imageView2/0/q/50|imageslim'
|
|
|
+ },
|
|
|
+])
|
|
|
export default {
|
|
|
name: 'BrandPage',
|
|
|
components: {
|
|
|
- Label
|
|
|
+
|
|
|
+ },
|
|
|
+ mounted () {
|
|
|
+ if (process.browser) {
|
|
|
+ new WOW({
|
|
|
+ offset: 0,
|
|
|
+ live: true
|
|
|
+ }).init()
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ kernelData,
|
|
|
+ currentMouserEnter: false,
|
|
|
+ currentMouserId: '',
|
|
|
+ cultrueData,
|
|
|
+ ideaData,
|
|
|
+ eventData,
|
|
|
+ currentEventImgId: ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ currentElement (item) {
|
|
|
+ this.currentMouserId = item.id
|
|
|
+ this.currentMouserEnter = true
|
|
|
+ },
|
|
|
+ currentEventImg (item) {
|
|
|
+ this.currentEventImgId = item.id
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
@@ -83,5 +495,320 @@ export default {
|
|
|
transform: translateX(-50%);
|
|
|
}
|
|
|
}
|
|
|
+ .event {
|
|
|
+ position: relative;
|
|
|
+ height: 1500px;
|
|
|
+ .label {
|
|
|
+ position: absolute;
|
|
|
+ // width: 600px;
|
|
|
+ // left: 778px;
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ .label-en {
|
|
|
+ font-size:78px;
|
|
|
+ font-family:PingFangSC-Semibold,PingFang SC;
|
|
|
+ font-weight:600;
|
|
|
+ color:rgba(35,106,250,1);
|
|
|
+ opacity: 0.16;
|
|
|
+ position: absolute;
|
|
|
+
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ }
|
|
|
+ .label-zn {
|
|
|
+ font-size:58px;
|
|
|
+ font-family:PingFangSC-Semibold,PingFang SC;
|
|
|
+ font-weight:600;
|
|
|
+ color:rgba(38,38,38,1);
|
|
|
+ position: absolute;
|
|
|
+ top: 45px;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .event-box {
|
|
|
+ width: 1297px;
|
|
|
+ height: 1296px;
|
|
|
+
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 259px;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ .event-bgimg {
|
|
|
+ width: 1297px;
|
|
|
+ height: 1296px;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ // object-fit: cover;
|
|
|
+ }
|
|
|
+ .event-box-item {
|
|
|
+ position: absolute;
|
|
|
+ .yearImgurl {
|
|
|
+ width: 65px;
|
|
|
+ height: 30px;
|
|
|
+ object-fit: cover;
|
|
|
+ }
|
|
|
+ .eventImgurl {
|
|
|
+ position: absolute;
|
|
|
+ z-index: 1;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .kernel {
|
|
|
+ margin: 208px;
|
|
|
+ height: 2000px;
|
|
|
+ position: relative;
|
|
|
+ .label {
|
|
|
+ position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
+ .label-en {
|
|
|
+ font-size:78px;
|
|
|
+ font-family:PingFangSC-Semibold,PingFang SC;
|
|
|
+ font-weight:600;
|
|
|
+ color:rgba(35,106,250,1);
|
|
|
+ opacity: 0.16;
|
|
|
+ }
|
|
|
+ .label-zn {
|
|
|
+ font-size:58px;
|
|
|
+ font-family:PingFangSC-Semibold,PingFang SC;
|
|
|
+ font-weight:600;
|
|
|
+ color:rgba(38,38,38,1);
|
|
|
+ // position: absolute;
|
|
|
+ // top: 45px;
|
|
|
+ // left: 32px;
|
|
|
+ margin-top: -65px;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .kernel-box {
|
|
|
+
|
|
|
+ position: absolute;
|
|
|
+ top: 300px;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: auto auto auto;
|
|
|
+ grid-template-rows: auto auto auto;
|
|
|
+ .kernel-box-item {
|
|
|
+ margin-right: 40px;
|
|
|
+ margin-bottom: 51px;
|
|
|
+ .top {
|
|
|
+ width: 373px;
|
|
|
+ height: 466px;
|
|
|
+ position: relative;
|
|
|
+ .people-img {
|
|
|
+ width: 373px;
|
|
|
+ height: 466px;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ .overlay-img {
|
|
|
+ width: 373px;
|
|
|
+ height: 466px;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ z-index: 1;
|
|
|
+ }
|
|
|
+ .people-intro {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 12px;
|
|
|
+ left: 37px;
|
|
|
+ .name {
|
|
|
+ font-size:45px;
|
|
|
+ font-family:PingFangSC-Semibold,PingFang SC;
|
|
|
+ font-weight:600;
|
|
|
+ color:rgba(255,255,255,1);
|
|
|
+ letter-spacing:1px;
|
|
|
+ }
|
|
|
+ .position {
|
|
|
+ font-size:20px;
|
|
|
+ font-family:PingFangSC-Regular,PingFang SC;
|
|
|
+ font-weight:400;
|
|
|
+ color:rgba(255,255,255,1);
|
|
|
+ letter-spacing: 0.5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .intro {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 160px;
|
|
|
+ left: 37px;
|
|
|
+ font-family:PingFangSC-Regular,PingFang SC;
|
|
|
+ font-weight:400;
|
|
|
+ color:rgba(255,255,255,1);
|
|
|
+ .intro-label {
|
|
|
+ font-size:16px;
|
|
|
+ margin-bottom: 12px;
|
|
|
+ }
|
|
|
+ .resume {
|
|
|
+ width:280px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .bottom {
|
|
|
+ width: 373px;
|
|
|
+ height: 8px;
|
|
|
+ background-color: #83ABF9;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .cultrue {
|
|
|
+ position: relative;
|
|
|
+ height: 1000px;
|
|
|
+ overflow: hidden;
|
|
|
+ .label {
|
|
|
+ position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ // left: 778px;
|
|
|
+ .label-en {
|
|
|
+ font-size:78px;
|
|
|
+ font-family:PingFangSC-Semibold,PingFang SC;
|
|
|
+ font-weight:600;
|
|
|
+ color:rgba(35,106,250,1);
|
|
|
+ opacity: 0.16;
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ }
|
|
|
+ .label-zn {
|
|
|
+ font-size:58px;
|
|
|
+ font-family:PingFangSC-Semibold,PingFang SC;
|
|
|
+ font-weight:600;
|
|
|
+ color:rgba(38,38,38,1);
|
|
|
+ position: absolute;
|
|
|
+ top: 45px;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .cultrue-box {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ margin-top: 313px;
|
|
|
+ .cultrue-box-item {
|
|
|
+ margin-right: 151px;
|
|
|
+ img {
|
|
|
+ width: 178px;
|
|
|
+ height: 159px;
|
|
|
+ }
|
|
|
+ .cultrue-box-item-label {
|
|
|
+ font-size:38px;
|
|
|
+ font-family:PingFangSC-Regular,PingFang SC;
|
|
|
+ font-weight:400;
|
|
|
+ color:rgba(0,0,0,1);
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .cultrue-box-item-text {
|
|
|
+ width: 178px;
|
|
|
+ text-align: center;
|
|
|
+ font-size:18px;
|
|
|
+ font-family:PingFangSC-Regular,PingFang SC;
|
|
|
+ font-weight:400;
|
|
|
+ color:rgba(153,153,153,1);
|
|
|
+ letter-spacing: 0.5px;
|
|
|
+ margin-top: 31px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .cultrue-bgimg {
|
|
|
+ position: absolute;
|
|
|
+ z-index: -1;
|
|
|
+ right: 226px;
|
|
|
+ bottom: 155px;
|
|
|
+ img {
|
|
|
+ width: 627px;
|
|
|
+ height: 499px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .idea {
|
|
|
+ height: 800px;
|
|
|
+ .label {
|
|
|
+ position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ // left: 778px;
|
|
|
+ .label-en {
|
|
|
+ font-size:78px;
|
|
|
+ font-family:PingFangSC-Semibold,PingFang SC;
|
|
|
+ font-weight:600;
|
|
|
+ color:rgba(35,106,250,1);
|
|
|
+ opacity: 0.16;
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ }
|
|
|
+ .label-zn {
|
|
|
+ font-size:58px;
|
|
|
+ font-family:PingFangSC-Semibold,PingFang SC;
|
|
|
+ font-weight:600;
|
|
|
+ color:rgba(38,38,38,1);
|
|
|
+ position: absolute;
|
|
|
+ top: 45px;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .idea-box {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ .idea-box-item {
|
|
|
+ margin-top: 286px;
|
|
|
+ margin-right: 40px;
|
|
|
+ width: 373px;
|
|
|
+ height: 299px;
|
|
|
+ background:rgba(255,255,255,1);
|
|
|
+ box-shadow:0px 2px 14px 0px rgba(201,199,195,0.25);
|
|
|
+ border-radius:6px;
|
|
|
+ padding: 38px 32px 51px 42px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .top {
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 67px;
|
|
|
+ height: 64px;
|
|
|
+ object-fit: cover;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .center {
|
|
|
+ margin-top: 20px;
|
|
|
+ display: flex;
|
|
|
+ img {
|
|
|
+ width: 22px;
|
|
|
+ height: 36px;
|
|
|
+ margin-right: 9px;
|
|
|
+ object-fit: fill;
|
|
|
+ }
|
|
|
+ div {
|
|
|
+ font-size:24px;
|
|
|
+ font-family:PingFangSC-Medium,PingFang SC;
|
|
|
+ font-weight:500;
|
|
|
+ color:rgba(0,0,0,1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .footer {
|
|
|
+ font-size:15px;
|
|
|
+ font-family:PingFangSC-Regular,PingFang SC;
|
|
|
+ font-weight:400;
|
|
|
+ color:rgba(153,153,153,1);
|
|
|
+
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+.cp {
|
|
|
+ cursor: pointer;
|
|
|
}
|
|
|
</style>
|
周杰伦