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 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<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>
<title>测试模板</title>
<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,
body {
margin: 0;
......@@ -38,10 +63,12 @@
position: relative;
}
img {
border: none;
outline: none;
}
.isEdit::after {
position: absolute;
top: 0;
......@@ -70,6 +97,7 @@
margin: 0 auto;
color: white;
box-sizing: border-box;
overflow: hidden;
}
.title {
......@@ -77,23 +105,26 @@
line-height: 50px;
padding: 0 0px;
border-bottom: #eeeeee 1px solid;
position: relative;
}
.name {
/* padding: 0 20px; */
border-bottom: #eeeeee 1px solid;
padding:10px 0px;
padding: 10px 0px;
color: white;
display: flex;
justify-content: space-between;
align-items: center;
margin: 0;
margin-bottom: 17px;
}
.name>span {
font-size: 36.25px;
}
}
.name span {
display: inline-block;
min-width: 30px;
......@@ -154,8 +185,9 @@
display: flex;
align-items: center;
font-size: 20px;
}
.h2-right img {
height: 42px;
width: 42px;
......@@ -165,17 +197,18 @@
margin-left: 25px;
/* height: 32px; */
}
/* .delay */
</style>
</head>
<body>
<div class="container" id="myApp">
<div class="title ">
<div class="title bounceInLeft" :class="isAnimeted()">
<span class="">{{date}}</span>
</div>
<h2 class="h2 name">
<span :class="isEdited(0) + ' ' + isEdit()" :style="getStyle(0)" @click="edit(0)">{{getValue(0)}}</span>
<h2 class="h2 name bounceInRight" :class="isAnimeted()">
<span :class="isEdited(0) + ' ' + isEdit()" :style="getStyle(0)" @click="edit(0)">{{getValue(0)}}</span>
<div class="h2-right">
<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>
......@@ -183,26 +216,34 @@
<!-- <img src="" alt=""> -->
</h2>
<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="">
</div>
<div class="bottom-right">
<div class="bottom-right-item">
<span class="item-name" :class="isEdited(3) + ' ' + isEdit()" :style="getStyle(3)" @click="edit(3)">{{getValue(3)}}</span>
<span class="item-des" :class="isEdited(4) + ' ' + isEdit()" :style="getStyle(4)" @click="edit(4)">{{getValue(4)}}</span>
<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-des" :class="isEdited(4) + ' ' + isEdit()" :style="getStyle(4)"
@click="edit(4)">{{getValue(4)}}</span>
</div>
<div class="bottom-right-item">
<span class="item-name" :class="isEdited(5) + ' ' + isEdit()" :style="getStyle(5)" @click="edit(5)">{{getValue(5)}}</span>
<span class="item-des" :class="isEdited(6) + ' ' + isEdit()" :style="getStyle(6)" @click="edit(6)">{{getValue(6)}}</span>
<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-des" :class="isEdited(6) + ' ' + isEdit()" :style="getStyle(6)"
@click="edit(6)">{{getValue(6)}}</span>
</div>
<div class="bottom-right-item">
<span class="item-name" :class="isEdited(7) + ' ' + isEdit()" :style="getStyle(7)" @click="edit(7)">{{getValue(7)}}</span>
<span class="item-des" :class="isEdited(8) + ' ' + isEdit()" :style="getStyle(8)" @click="edit(8)">{{getValue(8)}}</span>
<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-des" :class="isEdited(8) + ' ' + isEdit()" :style="getStyle(8)"
@click="edit(8)">{{getValue(8)}}</span>
</div>
<div class="bottom-right-item">
<span class="item-name" :class="isEdited(9) + ' ' + isEdit()" :style="getStyle(9)" @click="edit(9)">{{getValue(9)}}</span>
<span class="item-des" :class="isEdited(10) + ' ' + isEdit()" :style="getStyle(10)" @click="edit(10)">{{getValue(10)}}</span>
<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-des" :class="isEdited(10) + ' ' + isEdit()" :style="getStyle(10)"
@click="edit(10)">{{getValue(10)}}</span>
</div>
</div>
</div>
......@@ -264,7 +305,7 @@
window.parent.postMessage(data, '*')
},
edit(index) {
if(getQuery('isEdit')) {
if (getQuery('isEdit')) {
this.currentIndex = index;
var item = this.list[index]
console.log(this.currentIndex)
......@@ -292,6 +333,9 @@
isEdit(index) {
return this.isEditMode ? 'isEdit' : ''
},
isAnimeted(index) {
return this.isEditMode ? '' : 'animated'
},
timeFormate(timeStamp) {
let dateString = ''
let year = new Date(timeStamp).getFullYear();
......@@ -301,7 +345,7 @@
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();
// return year + "年" + month + "月" + date +"日"+" "+hh+":"+mm + "" + " " + hh + ":" + mm; ;
dateString = year + "." + month + "." + date
dateString = year + "." + month + "." + date
return dateString
// console.log(this.nowTime);
}
......@@ -311,6 +355,36 @@
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() {
var vm = this
console.log(getQuery('isEdit'))
......@@ -318,12 +392,11 @@
vm.date = this.timeFormate(new Date())
this.timer = setInterval(() => {
vm.date = this.timeFormate(new Date())
}, 1000*60)
}, 1000 * 60)
if (getQuery('isEdit')) {
this.isEditMode = true
} else {
this.isEditMode = false
}
if (getQuery('filmId')) {
$.get('http://39.105.231.218:8090/myequipment/get/film/info/' + getQuery('filmId'), function (result) {
......@@ -332,9 +405,9 @@
vm.filmId = result.filmId
})
} else {
if(getQuery('isPreview')) {
if (getQuery('isPreview')) {
} else {
vm.getDefaulted()
$.get("http://visual-clouds.bdideal.com/html/15613603741264cbf7bca249642b599701590785ff808.txt", function (result) {
......@@ -342,11 +415,11 @@
console.log('模板数据加载成功')
vm.list = JSON.parse(result)
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