Skip to content

Z
zhongtong-avi-web
Commit 8378017c authored by 李志鸣's avatar 李志鸣
Browse files
Options

fea(Led Avi): Led Avi轮播页面开发

parent 9888482a
Hide whitespace changes
Inline Side-by-side
Showing with 500 additions and 18 deletions
src/views/LedCarouselAvi/components/ComplexionPaintJump.vue 0 → 100644
View file @ 8378017c
<template>
<!-- 面/色漆工作区跳转页面 -->
<div class="page-pack">
<div class="container">
<!-- 显示区域 -->
<div class="view-pack">
<div class="complexion-paint-left-pack"></div>
<div class="complexion-paint-middle-pack"></div>
<div class="complexion-paint-right-pack"></div>
</div>
</div>
</div>
</template>
<script>
export default {
data () {
return {}
}
}
</script>
<style lang="scss" scoped>
.page-pack {
width: 100%;
height: 100%;
.container {
width: 1556px;
height: 1037px;
background: url("../../../assets/images/LedCarouselAvi/led_avi_jump_bg.png");
overflow: hidden;
// 显示区域
.view-pack {
height: 896px;
width: 1298px;
margin-top: 106px;
margin-left: 130px;
position: relative;
// 边缘闪光特效
@keyframes shine {
0% {
border-color: rgba(255,255,255,0);
box-shadow: 0px 0px 0px inset rgba(255,255,255,0);
}
100% {
border-color: rgba(255,255,255,1);
box-shadow: 0px 0px 200px inset rgba(255,255,255,1);
}
}
.complexion-paint-left-pack {
width: 175px;
height: 291px;
position: absolute;
top: 498px;
right: 575px;
animation: shine 1000ms ease-out infinite alternate;
}
.complexion-paint-middle-pack {
width: 265px;
height: 291px;
position: absolute;
top: 498px;
right: 224px;
animation: shine 1000ms ease-out infinite alternate;
}
.complexion-paint-right-pack {
width: 108px;
height: 291px;
position: absolute;
top: 498px;
right: 29px;
animation: shine 1000ms ease-out infinite alternate;
}
}
}
}
</style>
\ No newline at end of file
src/views/LedCarouselAvi/components/ElectrophoresisJump.vue
View file @ 8378017c
......@@ -45,7 +45,6 @@
box-shadow: 0px 0px 200px inset rgba(255,255,255,1);
}
}
.edectroppresis-pack {
width: 546px;
height: 333px;
......
src/views/LedCarouselAvi/components/FinishedJump.vue 0 → 100644
View file @ 8378017c
<template>
<div class="page-pack">
<div class="container">
<!-- 显示区域 -->
<div class="view-pack">
<div class="finished-left-pack"></div>
<div class="finished-middle-pack"></div>
<div class="finished-right-pack"></div>
</div>
</div>
</div>
</template>
<script>
export default {
data () {
return {}
}
}
</script>
<style lang="scss" scoped>
.page-pack {
width: 100%;
height: 100%;
.container {
width: 1556px;
height: 1037px;
background: url("../../../assets/images/LedCarouselAvi/led_avi_jump_bg.png");
overflow: hidden;
// 显示区域
.view-pack {
height: 896px;
width: 1298px;
margin-top: 106px;
margin-left: 130px;
position: relative;
// 边缘闪光特效
@keyframes shine {
0% {
border-color: rgba(255,255,255,0);
box-shadow: 0px 0px 0px inset rgba(255,255,255,0);
}
100% {
border-color: rgba(255,255,255,1);
box-shadow: 0px 0px 200px inset rgba(255,255,255,1);
}
}
.finished-left-pack {
width: 177px;
height: 45px;
position: absolute;
bottom: 61px;
left: 546px;
animation: shine 1000ms ease-out infinite alternate;
}
.finished-middle-pack {
width: 263px;
height: 45px;
position: absolute;
bottom: 61px;
left: 810px;
animation: shine 1000ms ease-out infinite alternate;
}
.finished-right-pack {
width: 110px;
height: 45px;
position: absolute;
bottom: 61px;
left: 1160px;
animation: shine 1000ms ease-out infinite alternate;
}
}
}
}
</style>
\ No newline at end of file
src/views/LedCarouselAvi/components/MiddleCoatJump.vue 0 → 100644
View file @ 8378017c
<template>
<!-- 中涂工作区跳转页面 -->
<div class="page-pack">
<div class="container">
<!-- 显示区域 -->
<div class="view-pack">
<div class="middle-coat-left-pack"></div>
<div class="middle-coat-right-pack"></div>
</div>
</div>
</div>
</template>
<script>
export default {
data () {
return {}
}
}
</script>
<style lang="scss" scoped>
.page-pack {
width: 100%;
height: 100%;
.container {
width: 1556px;
height: 1037px;
background: url("../../../assets/images/LedCarouselAvi/led_avi_jump_bg.png");
overflow: hidden;
// 显示区域
.view-pack {
height: 896px;
width: 1298px;
margin-top: 106px;
margin-left: 130px;
position: relative;
// 边缘闪光特效
@keyframes shine {
0% {
border-color: rgba(255,255,255,0);
box-shadow: 0px 0px 0px inset rgba(255,255,255,0);
}
100% {
border-color: rgba(255,255,255,1);
box-shadow: 0px 0px 200px inset rgba(255,255,255,1);
}
}
.middle-coat-left-pack {
width: 438px;
height: 85px;
position: absolute;
top: 405px;
right: 225px;
animation: shine 1000ms ease-out infinite alternate;
}
.middle-coat-right-pack {
width: 109px;
height: 67px;
position: absolute;
top: 429px;
right: 29px;
animation: shine 1000ms ease-out infinite alternate;
}
}
}
}
</style>
\ No newline at end of file
src/views/LedCarouselAvi/components/PuttyJump.vue 0 → 100644
View file @ 8378017c
<template>
<!-- 腻子工作区跳转页面 -->
<div class="page-pack">
<div class="container">
<!-- 显示区域 -->
<div class="view-pack">
<div class="putty-left-pack"></div>
<div class="putty-right-pack"></div>
</div>
</div>
</div>
</template>
<script>
export default {
data () {
return {}
}
}
</script>
<style lang="scss" scoped>
.page-pack{
width: 100%;
height: 100%;
.container {
width: 1556px;
height: 1037px;
background: url("../../../assets/images/LedCarouselAvi/led_avi_jump_bg.png");
overflow: hidden;
// 显示区域
.view-pack {
height: 896px;
width: 1298px;
margin-top: 106px;
margin-left: 130px;
position: relative;
// 边缘闪光特效
@keyframes shine {
0% {
border-color: rgba(255,255,255,0);
box-shadow: 0px 0px 0px inset rgba(255,255,255,0);
}
100% {
border-color: rgba(255,255,255,1);
box-shadow: 0px 0px 200px inset rgba(255,255,255,1);
}
}
.putty-left-pack {
width: 438px;
height: 94px;
position: absolute;
top: 309px;
right: 225px;
animation: shine 1000ms ease-out infinite alternate;
}
.putty-right-pack {
width: 109px;
height: 119px;
position: absolute;
top: 309px;
right: 29px;
animation: shine 1000ms ease-out infinite alternate;
}
}
}
}
</style>
\ No newline at end of file
src/views/LedCarouselAvi/components/SealedAnticorrosionJump.vue 0 → 100644
View file @ 8378017c
<template>
<!-- 密封防腐工作区跳转页面 -->
<div class="page-pack">
<div class="container">
<!-- 显示区域 -->
<div class="view-pack">
<div class="sealed-anticorrosion-left-pack"></div>
<div class="sealed-anticorrosion-right-pack"></div>
</div>
</div>
</div>
</template>
<script>
export default {
data () {
return {}
}
}
</script>
<style lang="scss" scoped>
.page-pack{
width: 100%;
height: 100%;
.container {
width: 1556px;
height: 1037px;
background: url("../../../assets/images/LedCarouselAvi/led_avi_jump_bg.png");
overflow: hidden;
// 显示区域
.view-pack {
height: 896px;
width: 1298px;
margin-top: 106px;
margin-left: 130px;
position: relative;
// 边缘闪光特效
@keyframes shine {
0% {
border-color: rgba(255,255,255,0);
box-shadow: 0px 0px 0px inset rgba(255,255,255,0);
}
100% {
border-color: rgba(255,255,255,1);
box-shadow: 0px 0px 200px inset rgba(255,255,255,1);
}
}
.sealed-anticorrosion-left-pack {
width: 438px;
height: 144px;
position: absolute;
top: 147px;
right: 225px;
animation: shine 1000ms ease-out infinite alternate;
}
.sealed-anticorrosion-right-pack {
width: 109px;
height: 144px;
position: absolute;
top: 147px;
right: 30px;
animation: shine 1000ms ease-out infinite alternate;
}
}
}
}
</style>
\ No newline at end of file
src/views/LedCarouselAvi/components/SheetMetalJump.vue 0 → 100644
View file @ 8378017c
<template>
<!-- 钣金工作区跳转页面 -->
<div class="page-pack">
<div class="container">
<!-- 显示区域 -->
<div class="view-pack">
<div class="sheet-metal-pack"></div>
</div>
</div>
</div>
</template>
<script>
export default {
data () {
return {}
}
}
</script>
<style lang="scss" scoped>
.page-pack {
width: 100%;
height: 100%;
.container {
width: 1556px;
height: 1037px;
background: url("../../../assets/images/LedCarouselAvi/led_avi_jump_bg.png");
overflow: hidden;
// 显示区域
.view-pack {
height: 896px;
width: 1298px;
margin-top: 106px;
margin-left: 130px;
position: relative;
// 边缘闪光特效
@keyframes shine {
0% {
border-color: rgba(255,255,255,0);
box-shadow: 0px 0px 0px inset rgba(255,255,255,0);
}
100% {
border-color: rgba(255,255,255,1);
box-shadow: 0px 0px 200px inset rgba(255,255,255,1);
}
}
.sheet-metal-pack {
width: 438px;
height: 128px;
position: absolute;
top: 18px;
right: 225px;
animation: shine 1000ms ease-out infinite alternate;
}
}
}
}
</style>
\ No newline at end of file
src/views/LedCarouselAvi/index.vue
View file @ 8378017c
<template>
<div class="page-pack">
<div class="container">
<!-- 电泳工作区跳转页面 -->
<ElectrophoresisJump></ElectrophoresisJump>
<!-- 电泳工作区 -->
<!-- <Electrophoresis></Electrophoresis> -->
<!-- 钣金工作区 -->
<!-- <SheetMetal></SheetMetal> -->
<!-- 密封防腐工作区 -->
<!-- <SealedAnticorrosion></SealedAnticorrosion> -->
<!-- 腻子工作区 -->
<!-- <Putty></Putty> -->
<!-- 中涂工作区 -->
<!-- <MiddleCoat></MiddleCoat> -->
<!-- 面/色漆工作区 -->
<!-- <ComplexionPaint></ComplexionPaint> -->
<!-- 成品车存放区 -->
<!-- <finished></finished> -->
<swiper
:options="swiperOption"
ref="mySwiper">
<swiper-slide>
<!-- 电泳工作区跳转页面 -->
<ElectrophoresisJump></ElectrophoresisJump>
</swiper-slide>
<swiper-slide>
<!-- 电泳工作区 -->
<Electrophoresis></Electrophoresis>
</swiper-slide>
<swiper-slide>
<!-- 钣金工作区跳转页面 -->
<SheetMetalJump></SheetMetalJump>
</swiper-slide>
<swiper-slide>
<!-- 钣金工作区 -->
<SheetMetal></SheetMetal>
</swiper-slide>
<swiper-slide>
<!-- 密封防腐工作区跳转页面 -->
<SealedAnticorrosionJump></SealedAnticorrosionJump>
</swiper-slide>
<swiper-slide>
<!-- 密封防腐工作区 -->
<SealedAnticorrosion></SealedAnticorrosion>
</swiper-slide>
<swiper-slide>
<!-- 腻子工作区跳转页面 -->
<PuttyJump></PuttyJump>
</swiper-slide>
<swiper-slide>
<!-- 腻子工作区 -->
<Putty></Putty>
</swiper-slide>
<swiper-slide>
<!-- 中涂工作区跳转页面 -->
<MiddleCoatJump></MiddleCoatJump>
</swiper-slide>
<swiper-slide>
<!-- 中涂工作区 -->
<MiddleCoat></MiddleCoat>
</swiper-slide>
<swiper-slide>
<!-- 面/色漆工作区跳转页面 -->
<ComplexionPaintJump></ComplexionPaintJump>
</swiper-slide>
<swiper-slide>
<!-- 面/色漆工作区 -->
<ComplexionPaint></ComplexionPaint>
</swiper-slide>
<swiper-slide>
<!-- 成品车存放区跳转页面 -->
<finishedJump></finishedJump>
</swiper-slide>
<swiper-slide>
<!-- 成品车存放区 -->
<finished></finished>
</swiper-slide>
</swiper>
</div>
</div>
</template>
<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper';
import ElectrophoresisJump from './components/ElectrophoresisJump';
import Electrophoresis from './components/Electrophoresis';
import SheetMetalJump from './components/SheetMetalJump';
import SheetMetal from './components/SheetMetal';
import SealedAnticorrosionJump from './components/SealedAnticorrosionJump';
import SealedAnticorrosion from './components/SealedAnticorrosion';
import PuttyJump from './components/PuttyJump';
import Putty from './components/Putty';
import MiddleCoatJump from './components/MiddleCoatJump';
import MiddleCoat from './components/MiddleCoat';
import ComplexionPaintJump from './components/ComplexionPaintJump';
import ComplexionPaint from './components/ComplexionPaint';
import finishedJump from './components/FinishedJump';
import finished from './components/Finished';
export default {
components: {
swiper,
swiperSlide,
ElectrophoresisJump,
Electrophoresis,
SheetMetalJump,
SheetMetal,
SealedAnticorrosionJump,
SealedAnticorrosion,
PuttyJump,
Putty,
MiddleCoatJump,
MiddleCoat,
ComplexionPaintJump,
ComplexionPaint,
finishedJump,
finished
},
data () {
return {}
return {
// swiper配置信息
swiperOption: {
autoplay: {
delay: 10000,
loop: true
}
}
}
}
}
</script>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment