lubanPageForZip.html
4.26 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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<!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="asserts/jquery.min.js"></script>
<!-- d3 -->
<script src="asserts/d3.min.js"></script>
<!-- vue -->
<script src="asserts/vue.min.js"></script>
<!-- vuex -->
<script src="asserts/vuex.min.js"></script>
<!-- ant-design-vue css -->
<link rel="stylesheet" href="asserts/antd.min.css">
<!-- ant-design-vue js -->
<script src="asserts/antd.min.js"></script>
<!-- animate css -->
<link rel="stylesheet" href="asserts/animate.min.css">
<!-- echarts -->
<script src="asserts/echarts.min.js"></script>
<!-- v-charts -->
<script src="asserts/v-charts_index.min.js"></script>
<!-- v-charts css -->
<link rel="stylesheet" href="asserts/v-charts.min.css">
<!-- 鲁班引擎 -->
<script src="asserts/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">
// 获取url查询参数，queryName：参数名
function getQueryValue(queryName) {
var reg = new RegExp("(^|&)" + queryName + "=([^&]*)(&|$)", "i");
// window.location.search(设置或获取 href 属性中跟在问号后面的部分)
var r = window.location.search.substr(1).match(reg);
if (r != null) {
return decodeURIComponent(r[2]);
}
return null;
}
(function() {
var work = [[${work}]];
var urlItems = [[${urlItems}]];
// 长页面模式，暂时不用 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;
});
// 替换url属性
$jQuery.each(elements, function(index, element) {
$jQuery.each(urlItems, function(index, urlItem) {
if (urlItem.uuid === element.uuid) {
$jQuery.each(urlItem.localUrls, function(index, localUrl) {
element.pluginProps.items[index].url = localUrl
})
}
})
});
// 替换deviceId属性
var actualDeviceId = getQueryValue("id");
$jQuery.each(elements, function(index, element) {
if (element.pluginProps.device_id && actualDeviceId) {
element.pluginProps.device_id = actualDeviceId;
}
});
// console.log(work);
window.__work = work;
}());
</script>
<script>
// Vue.component('engine', window.Engine)
new Vue({
el: '#app',
data: {},
});
</script>
</body>
</html>