mirror of
https://gitee.com/dromara/RuoYi-Vue-Plus.git
synced 2026-09-18 09:35:29 +08:00
324 lines
9.1 KiB
HTML
324 lines
9.1 KiB
HTML
<!--
|
||
* @Author: ly525
|
||
* @Date: 2019-12-04 20:24:04
|
||
* @LastEditors: ly525
|
||
* @LastEditTime: 2020-05-03 14:30:37
|
||
* @FilePath: /luban-h5/back-end/h5-api/views/engine.ejs
|
||
* @Github: https://github.com/ly525/luban-h5
|
||
* @Description: 手机端预览模板
|
||
* @Copyright 2018 - 2019 luban-h5. All Rights Reserved
|
||
-->
|
||
|
||
<html lang="ch" xmlns:th="http://www.thymeleaf.org">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title th:text="${work.title}">活动</title>
|
||
<meta name="viewport" id="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
|
||
<meta content="yes" name="apple-mobile-web-app-capable">
|
||
<meta content="black" name="apple-mobile-web-app-status-bar-style">
|
||
<meta content="telephone=no" name="format-detection">
|
||
<meta content="email=no" name="format-detection">
|
||
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
|
||
<script src="https://cdn.jsdelivr.net/npm/vuex/dist/vuex.js"></script>
|
||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@4.1.1/animate.min.css">
|
||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper/dist/css/swiper.min.css">
|
||
<script src="https://cdn.jsdelivr.net/npm/swiper/dist/js/swiper.min.js"></script>
|
||
<script src="https://cdn.jsdelivr.net/npm/swiper-animation@2.0.2/build/swiper-animation.min.js"></script>
|
||
<!-- <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js" async></script> -->
|
||
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
|
||
<script src="https://cdn.jsdelivr.net/npm/v-charts/lib/index.min.js"></script>
|
||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/v-charts/lib/style.min.css">
|
||
<script type="text/javascript" th:inline="javascript">
|
||
window.__work = JSON.parse([[${workString}]]);
|
||
</script>
|
||
<script src="/static/engine-assets/engine.umd.js"></script>
|
||
<style th:inline="text">
|
||
/*
|
||
scss 文件，用来生成下面一段 style 中的 css
|
||
css 在线转 css：https://www.sassmeister.com/
|
||
*/
|
||
/* * {
|
||
outline: none;
|
||
}
|
||
|
||
.bg-wrapper {
|
||
width: 100%;
|
||
height: 100%;
|
||
background-image: linear-gradient(to top, #fff1eb 0%, #ace0f9 100%);
|
||
}
|
||
|
||
.preview-wrapper {
|
||
position: relative;
|
||
display: flex;
|
||
flex-wrap: nowrap;
|
||
width: [[${work.width}]]px;
|
||
height: 568px;
|
||
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
|
||
.phone-wrapper {
|
||
position: absolute;
|
||
width: [[${work.width}]]px;
|
||
height: 568px;
|
||
display: inline-block;
|
||
background: #fff;
|
||
box-sizing: content-box;
|
||
border: 10px solid #f6f6f6;
|
||
}
|
||
|
||
.float-shortcuts {
|
||
position: absolute;
|
||
top: 100px;
|
||
right: 0;
|
||
|
||
.page-controller {
|
||
position: absolute;
|
||
left: 0 !important;
|
||
display: block;
|
||
box-sizing: border-box;
|
||
width: 22px;
|
||
height: 60px;
|
||
padding: 4px;
|
||
border-top-right-radius: 5px;
|
||
border-bottom-right-radius: 5px;
|
||
|
||
cursor: pointer;
|
||
background: #2096f9;
|
||
font-size: 12px;
|
||
border: 1px solid #2096f9;
|
||
color: #fff;
|
||
|
||
&.next {
|
||
top: 80px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.work-info {
|
||
color: #4a4a4a;
|
||
font-size: 14px;
|
||
margin-left: 380px;
|
||
|
||
.qrcode-wrapper {
|
||
.qrcode-label {
|
||
}
|
||
|
||
.qrcode-img {
|
||
}
|
||
}
|
||
}
|
||
} */
|
||
</style>
|
||
<style th:inline="text">
|
||
* {
|
||
outline: none;
|
||
}
|
||
|
||
.bg-wrapper {
|
||
width: 100%;
|
||
height: 100%;
|
||
background-image: linear-gradient(to top, #fff1eb 0%, #ace0f9 100%);
|
||
}
|
||
/* .swiper-container {
|
||
width: 100%;
|
||
height: 100vh;
|
||
} */
|
||
|
||
.preview-wrapper {
|
||
position: relative;
|
||
display: flex;
|
||
flex-wrap: nowrap;
|
||
width: [[${work.width}]]px;
|
||
height: [[${work.height}]]px;
|
||
/* position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
margin: auto; */
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
}
|
||
.preview-wrapper .phone-wrapper {
|
||
position: absolute;
|
||
width: [[${work.width}]]px;
|
||
height: [[${work.height}]]px;
|
||
display: inline-block;
|
||
background: #fff;
|
||
box-sizing: content-box;
|
||
border: 10px solid #f6f6f6;
|
||
}
|
||
.preview-wrapper .float-shortcuts {
|
||
position: absolute;
|
||
top: 100px;
|
||
right: 0;
|
||
}
|
||
.preview-wrapper .float-shortcuts .page-controller {
|
||
position: absolute;
|
||
left: 0 !important;
|
||
display: block;
|
||
box-sizing: border-box;
|
||
width: 22px;
|
||
height: 60px;
|
||
padding: 4px;
|
||
border-top-right-radius: 5px;
|
||
border-bottom-right-radius: 5px;
|
||
cursor: pointer;
|
||
background: #2096f9;
|
||
font-size: 12px;
|
||
/* border: 1px solid #2096f9; */
|
||
color: #fff;
|
||
}
|
||
.preview-wrapper .float-shortcuts .page-controller.next {
|
||
top: 80px;
|
||
}
|
||
.preview-wrapper .work-info {
|
||
color: #4a4a4a;
|
||
font-size: 14px;
|
||
margin-left: 380px;
|
||
}
|
||
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="bg-wrapper"></div>
|
||
<div class="preview-wrapper">
|
||
<div class="phone-wrapper">
|
||
<div class="float-shortcuts">
|
||
<a class="page-controller swiper-button-prev prev">上一页</a>
|
||
<a class="page-controller swiper-button-next next">下一页</a>
|
||
</div>
|
||
<div id="app">
|
||
<engine />
|
||
</div>
|
||
</div>
|
||
<div class="work-info">
|
||
<div class="qrcode-wrapper">
|
||
<div class="qrcode-label">
|
||
<span>手机扫码分享给好友</span>
|
||
</div>
|
||
<div class="qrcode-img">
|
||
<canvas style="float: left" id="qrcode-canvas"></canvas>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<script th:inline="javascript">
|
||
!function () {
|
||
function isMobile() {
|
||
var mobileDeviceReg = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Mobi/i
|
||
return mobileDeviceReg.test(navigator.userAgent) || window.innerWidth < 500
|
||
}
|
||
|
||
function updateViewport() {
|
||
var scale = 1;
|
||
var w = document.documentElement.clientWidth || window.__work.width;
|
||
// var h = document.documentElement.clientHeight || 568;
|
||
// scale = w/h >= window.__work.width/568 ? h/568 : w/window.__work.width;
|
||
scale = w/window.__work.width;
|
||
var viewport = "width=" + window.__work.width
|
||
+ ", initial-scale=" + scale + ", maximum-scale=" + scale + ", user-scalable=no";
|
||
document.getElementById("viewport").setAttribute("content", viewport)
|
||
}
|
||
|
||
function doMobileActions () {
|
||
updateViewport();
|
||
var app = document.getElementById('app');
|
||
document.body.innerHTML = '';
|
||
document.body.appendChild(app);
|
||
}
|
||
|
||
var loadJS = function (url, callback, location) {
|
||
location = location || document.head
|
||
|
||
var scriptTag = document.createElement('script');
|
||
scriptTag.onload = callback;
|
||
// scriptTag.onreadystatechange = callback;
|
||
scriptTag.src = url;
|
||
location.appendChild(scriptTag);
|
||
};
|
||
|
||
function drawQRcode () {
|
||
var canvas = document.getElementById('qrcode-canvas')
|
||
QRCode.toCanvas(canvas, window.location.href, {
|
||
scale: 4
|
||
})
|
||
}
|
||
|
||
function doPCActions() {
|
||
loadJS('https://cdn.jsdelivr.net/npm/qrcode/build/qrcode.min.js', drawQRcode);
|
||
}
|
||
|
||
isMobile() ? doMobileActions() : doPCActions();
|
||
}();
|
||
</script>
|
||
<script>
|
||
// Vue.component('engine', window.Engine)
|
||
new Vue({
|
||
el: '#app',
|
||
data: {},
|
||
});
|
||
</script>
|
||
<script>
|
||
const swiperAnimation = new SwiperAnimation();
|
||
|
||
var mySwiper = new Swiper('.swiper-container', {
|
||
// Optional parameters
|
||
direction: 'vertical',
|
||
loop: false,
|
||
// If we need pagination
|
||
pagination: {
|
||
el: '.swiper-pagination',
|
||
},
|
||
// Navigation arrows
|
||
navigation: {
|
||
nextEl: '.swiper-button-next',
|
||
prevEl: '.swiper-button-prev',
|
||
},
|
||
// And if we need scrollbar
|
||
scrollbar: {
|
||
el: '.swiper-scrollbar',
|
||
},
|
||
on: {
|
||
init: function () {
|
||
swiperAnimation.init(this).animate();
|
||
},
|
||
slideChange: function () {
|
||
swiperAnimation.init(this).animate();
|
||
}
|
||
}
|
||
});
|
||
|
||
function title(str) {
|
||
if (str.length <= 1) return str.toUpperCase()
|
||
return str.slice(0,1).toUpperCase() + str.slice(1)
|
||
}
|
||
|
||
function displayMessage ({ origin, data }) {
|
||
if (['next', 'prev'].includes(data) && origin === window.location.origin) {
|
||
// 不采用下面的原因：在移动端和小屏幕上，会移除：.swiper-button-prev, .swiper-button-next 按钮
|
||
// document.querySelector(`.swiper-button-${data}`).click()
|
||
|
||
var action = `slide${title(data)}`
|
||
mySwiper[action]()
|
||
}
|
||
}
|
||
|
||
if (window.addEventListener) {
|
||
window.addEventListener("message", displayMessage, false);
|
||
} else {
|
||
window.attachEvent("onmessage", displayMessage);
|
||
}
|
||
</script>
|
||
<!-- build:js scripts/vendor.js -->
|
||
<!-- endbuild -->
|
||
</body>
|
||
|
||
</html>
|