mirror of
https://gitee.com/dromara/RuoYi-Vue-Plus.git
synced 2026-09-18 17:38:48 +08:00
去除 thymeleaf
This commit is contained in:
lizhengwei
parent
d012f42c66
commit
213107dae0
@ -15,11 +15,6 @@ spring:
|
|||||||
servlet:
|
servlet:
|
||||||
multipart:
|
multipart:
|
||||||
max-file-size: 10MB
|
max-file-size: 10MB
|
||||||
thymeleaf:
|
|
||||||
cache: false
|
|
||||||
prefix: classpath:/templates/
|
|
||||||
check-template-location: true
|
|
||||||
mode: HTML
|
|
||||||
datasource:
|
datasource:
|
||||||
type: com.zaxxer.hikari.HikariDataSource
|
type: com.zaxxer.hikari.HikariDataSource
|
||||||
# 动态数据源文档 https://www.kancloud.cn/tracy5546/dynamic-datasource/content
|
# 动态数据源文档 https://www.kancloud.cn/tracy5546/dynamic-datasource/content
|
||||||
|
|||||||
@ -15,11 +15,6 @@ spring:
|
|||||||
servlet:
|
servlet:
|
||||||
multipart:
|
multipart:
|
||||||
max-file-size: 10MB
|
max-file-size: 10MB
|
||||||
thymeleaf:
|
|
||||||
cache: false
|
|
||||||
prefix: classpath:/templates/
|
|
||||||
check-template-location: true
|
|
||||||
mode: HTML
|
|
||||||
datasource:
|
datasource:
|
||||||
type: com.zaxxer.hikari.HikariDataSource
|
type: com.zaxxer.hikari.HikariDataSource
|
||||||
# 动态数据源文档 https://www.kancloud.cn/tracy5546/dynamic-datasource/content
|
# 动态数据源文档 https://www.kancloud.cn/tracy5546/dynamic-datasource/content
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
@ -1,323 +0,0 @@
|
|||||||
<!--
|
|
||||||
* @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>
|
|
||||||
Loading…
Reference in New Issue
Block a user