Skip to content

visualcloud / Vmatrix-client

Go to a project
Commit 09e98fed by hank
Options

animated

parent c173b9a5
Showing with 104 additions and 31 deletions
public/template.html
...@@ -6,9 +6,34 @@ ...@@ -6,9 +6,34 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://cdn.jsdelivr.net/npm/vue"></script> <script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/17.4.0/Tween.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<title>测试模板</title> <title>测试模板</title>
<style> <style>
.delay100 {
animation-delay: 100ms;
}
.delay200 {
animation-delay: 200ms;
}
.delay300 {
animation-delay: 300ms;
}
.delay400 {
animation-delay: 400ms;
}
.delay500 {
animation-delay: 500ms;
}
.delay600 {
animation-delay: 600ms;
}
.delay700 {
animation-delay: 700ms;
}
</style>
<style>
html, html,
body { body {
margin: 0; margin: 0;
...@@ -38,10 +63,12 @@ ...@@ -38,10 +63,12 @@
position: relative; position: relative;
} }
img { img {
border: none; border: none;
outline: none; outline: none;
} }
.isEdit::after { .isEdit::after {
position: absolute; position: absolute;
top: 0; top: 0;
...@@ -70,6 +97,7 @@ ...@@ -70,6 +97,7 @@
margin: 0 auto; margin: 0 auto;
color: white; color: white;
box-sizing: border-box; box-sizing: border-box;
overflow: hidden;
} }
.title { .title {
...@@ -77,23 +105,26 @@ ...@@ -77,23 +105,26 @@
line-height: 50px; line-height: 50px;
padding: 0 0px; padding: 0 0px;
border-bottom: #eeeeee 1px solid; border-bottom: #eeeeee 1px solid;
position: relative;
} }
.name { .name {
/* padding: 0 20px; */ /* padding: 0 20px; */
border-bottom: #eeeeee 1px solid; border-bottom: #eeeeee 1px solid;
padding:10px 0px; padding: 10px 0px;
color: white; color: white;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin: 0; margin: 0;
margin-bottom: 17px; margin-bottom: 17px;
} }
.name>span { .name>span {
font-size: 36.25px; font-size: 36.25px;
} }
.name span { .name span {
display: inline-block; display: inline-block;
min-width: 30px; min-width: 30px;
...@@ -154,8 +185,9 @@ ...@@ -154,8 +185,9 @@
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 20px; font-size: 20px;
} }
.h2-right img { .h2-right img {
height: 42px; height: 42px;
width: 42px; width: 42px;
...@@ -165,17 +197,18 @@ ...@@ -165,17 +197,18 @@
margin-left: 25px; margin-left: 25px;
/* height: 32px; */ /* height: 32px; */
} }
/* .delay */
</style> </style>
</head> </head>
<body> <body>
<div class="container" id="myApp"> <div class="container" id="myApp">
<div class="title "> <div class="title bounceInLeft" :class="isAnimeted()">
<span class="">{{date}}</span> <span class="">{{date}}</span>
</div> </div>
<h2 class="h2 name"> <h2 class="h2 name bounceInRight" :class="isAnimeted()">
<span :class="isEdited(0) + ' ' + isEdit()" :style="getStyle(0)" @click="edit(0)">{{getValue(0)}}</span> <span :class="isEdited(0) + ' ' + isEdit()" :style="getStyle(0)" @click="edit(0)">{{getValue(0)}}</span>
<div class="h2-right"> <div class="h2-right">
<span :class="isEdited(1) + ' ' + isEdit()" :style="getStyle(1)" @click="edit(1)">{{getValue(1)}}</span> <span :class="isEdited(1) + ' ' + isEdit()" :style="getStyle(1)" @click="edit(1)">{{getValue(1)}}</span>
<span class="right-icon" :class="isEdited(11) + ' ' + isEdit()"><img :src="getValue(11)" class=" "></img></span> <span class="right-icon" :class="isEdited(11) + ' ' + isEdit()"><img :src="getValue(11)" class=" "></img></span>
...@@ -183,26 +216,34 @@ ...@@ -183,26 +216,34 @@
<!-- <img src="" alt=""> --> <!-- <img src="" alt=""> -->
</h2> </h2>
<div class="bottom"> <div class="bottom">
<div class="bottom-left" @click="edit(2)" :class="isEdited(2) + ' ' + isEdit()" > <div class="bottom-left rollIn" :class="isAnimeted()" @click="edit(2)" :class="isEdited(2) + ' ' + isEdit()">
<img :src="getValue(2)" alt=""> <img :src="getValue(2)" alt="">
</div> </div>
<div class="bottom-right"> <div class="bottom-right">
<div class="bottom-right-item"> <div class="bottom-right-item flipInX delay100" :class="isAnimeted()">
<span class="item-name" :class="isEdited(3) + ' ' + isEdit()" :style="getStyle(3)" @click="edit(3)">{{getValue(3)}}</span> <span class="item-name" :class="isEdited(3) + ' ' + isEdit()" :style="getStyle(3)"
<span class="item-des" :class="isEdited(4) + ' ' + isEdit()" :style="getStyle(4)" @click="edit(4)">{{getValue(4)}}</span> @click="edit(3)">{{getValue(3)}}</span>
<span class="item-des" :class="isEdited(4) + ' ' + isEdit()" :style="getStyle(4)"
@click="edit(4)">{{getValue(4)}}</span>
</div> </div>
<div class="bottom-right-item"> <div class="bottom-right-item flipInX delay200" :class="isAnimeted()">
<span class="item-name" :class="isEdited(5) + ' ' + isEdit()" :style="getStyle(5)" @click="edit(5)">{{getValue(5)}}</span> <span class="item-name" :class="isEdited(5) + ' ' + isEdit()" :style="getStyle(5)"
<span class="item-des" :class="isEdited(6) + ' ' + isEdit()" :style="getStyle(6)" @click="edit(6)">{{getValue(6)}}</span> @click="edit(5)">{{getValue(5)}}</span>
<span class="item-des" :class="isEdited(6) + ' ' + isEdit()" :style="getStyle(6)"
@click="edit(6)">{{getValue(6)}}</span>
</div> </div>
<div class="bottom-right-item"> <div class="bottom-right-item flipInX delay300" :class="isAnimeted()">
<span class="item-name" :class="isEdited(7) + ' ' + isEdit()" :style="getStyle(7)" @click="edit(7)">{{getValue(7)}}</span> <span class="item-name" :class="isEdited(7) + ' ' + isEdit()" :style="getStyle(7)"
<span class="item-des" :class="isEdited(8) + ' ' + isEdit()" :style="getStyle(8)" @click="edit(8)">{{getValue(8)}}</span> @click="edit(7)">{{getValue(7)}}</span>
<span class="item-des" :class="isEdited(8) + ' ' + isEdit()" :style="getStyle(8)"
@click="edit(8)">{{getValue(8)}}</span>
</div> </div>
<div class="bottom-right-item"> <div class="bottom-right-item flipInX delay400" :class="isAnimeted()">
<span class="item-name" :class="isEdited(9) + ' ' + isEdit()" :style="getStyle(9)" @click="edit(9)">{{getValue(9)}}</span> <span class="item-name" :class="isEdited(9) + ' ' + isEdit()" :style="getStyle(9)"
<span class="item-des" :class="isEdited(10) + ' ' + isEdit()" :style="getStyle(10)" @click="edit(10)">{{getValue(10)}}</span> @click="edit(9)">{{getValue(9)}}</span>
<span class="item-des" :class="isEdited(10) + ' ' + isEdit()" :style="getStyle(10)"
@click="edit(10)">{{getValue(10)}}</span>
</div> </div>
</div> </div>
</div> </div>
...@@ -264,7 +305,7 @@ ...@@ -264,7 +305,7 @@
window.parent.postMessage(data, '*') window.parent.postMessage(data, '*')
}, },
edit(index) { edit(index) {
if(getQuery('isEdit')) { if (getQuery('isEdit')) {
this.currentIndex = index; this.currentIndex = index;
var item = this.list[index] var item = this.list[index]
console.log(this.currentIndex) console.log(this.currentIndex)
...@@ -292,6 +333,9 @@ ...@@ -292,6 +333,9 @@
isEdit(index) { isEdit(index) {
return this.isEditMode ? 'isEdit' : '' return this.isEditMode ? 'isEdit' : ''
}, },
isAnimeted(index) {
return this.isEditMode ? '' : 'animated'
},
timeFormate(timeStamp) { timeFormate(timeStamp) {
let dateString = '' let dateString = ''
let year = new Date(timeStamp).getFullYear(); let year = new Date(timeStamp).getFullYear();
...@@ -301,7 +345,7 @@ ...@@ -301,7 +345,7 @@
let mm = new Date(timeStamp).getMinutes() < 10 ? "0" + new Date(timeStamp).getMinutes() : new Date(timeStamp).getMinutes(); let mm = new Date(timeStamp).getMinutes() < 10 ? "0" + new Date(timeStamp).getMinutes() : new Date(timeStamp).getMinutes();
// let ss =new Date(timeStamp).getSeconds() < 10? "0" + new Date(timeStamp).getSeconds(): new Date(timeStamp).getSeconds(); // let ss =new Date(timeStamp).getSeconds() < 10? "0" + new Date(timeStamp).getSeconds(): new Date(timeStamp).getSeconds();
// return year + "年" + month + "月" + date +"日"+" "+hh+":"+mm + "" + " " + hh + ":" + mm; ; // return year + "年" + month + "月" + date +"日"+" "+hh+":"+mm + "" + " " + hh + ":" + mm; ;
dateString = year + "." + month + "." + date dateString = year + "." + month + "." + date
return dateString return dateString
// console.log(this.nowTime); // console.log(this.nowTime);
} }
...@@ -311,6 +355,36 @@ ...@@ -311,6 +355,36 @@
clearInterval(this.timer); // 在Vue实例销毁前，清除我们的定时器 clearInterval(this.timer); // 在Vue实例销毁前，清除我们的定时器
} }
}, },
mounted() {
// if(!this.isEditMode) {
// var DOM = document.querySelector(".title");
// var H2 = document.querySelector(".h2");
// var t = 0,//开始时间
// b = 0,//开始位置
// c = 1000,//变化值
// d = 100;//持续时间
// let appNow = {
// y: 1000
// }
// let appEnd = {
// y: 0
// }
// value = new TWEEN.Tween(appNow).to(appEnd, 1000).easing(TWEEN.Easing.Quadratic.Out).onUpdate(function () {
// DOM.style.setProperty('transform', 'translate(' + appNow.y + 'px' + ', ' + 0 + 'px' +')');
// H2.style.setProperty('transform', 'translate(' + -appNow.y + 'px' + ', ' + 0 + 'px' +')');
// // console.log('translate(' + appNow.y + 'px' + ', ' + appNow.y + 'px' +')')
// }).start()
// var step = function (time) {
// requestAnimationFrame(step);
// TWEEN.update(time);
// // requestAnimationFrame(step);
// };
// requestAnimationFrame(step);
// }
},
created() { created() {
var vm = this var vm = this
console.log(getQuery('isEdit')) console.log(getQuery('isEdit'))
...@@ -318,12 +392,11 @@ ...@@ -318,12 +392,11 @@
vm.date = this.timeFormate(new Date()) vm.date = this.timeFormate(new Date())
this.timer = setInterval(() => { this.timer = setInterval(() => {
vm.date = this.timeFormate(new Date()) vm.date = this.timeFormate(new Date())
}, 1000*60) }, 1000 * 60)
if (getQuery('isEdit')) { if (getQuery('isEdit')) {
this.isEditMode = true this.isEditMode = true
} else { } else {
this.isEditMode = false this.isEditMode = false
} }
if (getQuery('filmId')) { if (getQuery('filmId')) {
$.get('http://39.105.231.218:8090/myequipment/get/film/info/' + getQuery('filmId'), function (result) { $.get('http://39.105.231.218:8090/myequipment/get/film/info/' + getQuery('filmId'), function (result) {
...@@ -332,9 +405,9 @@ ...@@ -332,9 +405,9 @@
vm.filmId = result.filmId vm.filmId = result.filmId
}) })
} else { } else {
if(getQuery('isPreview')) { if (getQuery('isPreview')) {
} else { } else {
vm.getDefaulted() vm.getDefaulted()
$.get("http://visual-clouds.bdideal.com/html/15613603741264cbf7bca249642b599701590785ff808.txt", function (result) { $.get("http://visual-clouds.bdideal.com/html/15613603741264cbf7bca249642b599701590785ff808.txt", function (result) {
...@@ -342,11 +415,11 @@ ...@@ -342,11 +415,11 @@
console.log('模板数据加载成功') console.log('模板数据加载成功')
vm.list = JSON.parse(result) vm.list = JSON.parse(result)
vm.getDefaulted() vm.getDefaulted()
}) })
} }
} }
}, },
......
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 sign in to comment