lubanPagePreview.html
3.36 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<!doctype html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title th:text="${work.title}">标题</title>
<!-- jQuery -->
<script src="/works/asserts/js/jquery/v1.11.1/jquery.min.js"></script>
<!-- d3 -->
<script src="/works/asserts/js/d3/v4.9.1/d3.min.js"></script>
<!-- vue -->
<script src="/works/asserts/js/vue/v2.6.12/vue.min.js"></script>
<!-- vuex -->
<script src="/works/asserts/js/vuex/v3.6.2/vuex.min.js"></script>
<!-- ant-design-vue css -->
<link rel="stylesheet" href="/works/asserts/css/antd/v1.7.4/antd.min.css">
<!-- ant-design-vue js -->
<script src="/works/asserts/js/antd/v1.7.4/antd.min.js"></script>
<!-- animate css -->
<link rel="stylesheet" href="/works/asserts/css/animate/v4.1.1/animate.min.css">
<!-- echarts -->
<script src="/works/asserts/js/echarts/v5.0.2/echarts.min.js"></script>
<!-- v-charts -->
<script src="/works/asserts/js/v-charts/v1.19.0/index.min.js"></script>
<!-- v-charts css -->
<link rel="stylesheet" href="/works/asserts/css/v-charts/v1.19.0/v-charts.min.css">
<!-- 导入鲁班引擎 -->
<script src="/works/asserts/js/luban-engine/v1.14.1/engine.umd.min.js"></script>
<!-- 自定义的样式 -->
<style>
* {
outline: none;
}
html,body {
height: 100%;
}
.swiper-container {
height: 100%;
}
.swiper-container .swiper-wrapper {
height: 100%;
}
.swiper-container .swiper-wrapper .swiper-slide {
height: 100%;
}
</style>
</head>
<body>
<div id="app" style="width: 100%; height: 100%; border: 0px solid black;">
<engine />
</div>
<!-- 处理后台work对象 -->
<script type="text/javascript" th:inline="javascript">
(function() {
var work = [[${work}]];
// 长页面模式，暂时不用 h5_swipper模式
work.pageMode = 'h5_long_page';
// 按比例修正所有组件的 top left width height
var $jQuery = jQuery.noConflict();
var page_width = work.width;
var page_height = work.height;
var current_width = $jQuery('#app').width();
var current_height = $jQuery('#app').height();
var elements = work.pages[0].elements;
var top;
var left;
var width;
var height;
$jQuery.each(elements, function(index, element) {
top = element.commonStyle.top
left = element.commonStyle.left
width = element.commonStyle.width
height = element.commonStyle.height
// 按比例缩放
element.commonStyle.top = (top * current_height) / page_height;
element.commonStyle.left = (left * current_width) / page_width;
element.commonStyle.width = (width * current_width) / page_width;
element.commonStyle.height = (height * current_height) / page_height;
});
// console.log(work);
window.__work = work;
}());
</script>
<script>
// Vue.component('engine', window.Engine)
new Vue({
el: '#app',
data: {},
});
</script>
</body>
</html>