mirror of
https://gitee.com/dromara/RuoYi-Vue-Plus.git
synced 2026-09-18 09:35:29 +08:00
去除 thymeleaf
This commit is contained in:
lizhengwei
parent
d012f42c66
commit
213107dae0
@ -15,11 +15,6 @@ spring:
|
||||
servlet:
|
||||
multipart:
|
||||
max-file-size: 10MB
|
||||
thymeleaf:
|
||||
cache: false
|
||||
prefix: classpath:/templates/
|
||||
check-template-location: true
|
||||
mode: HTML
|
||||
datasource:
|
||||
type: com.zaxxer.hikari.HikariDataSource
|
||||
# 动态数据源文档 https://www.kancloud.cn/tracy5546/dynamic-datasource/content
|
||||
|
||||
@ -15,11 +15,6 @@ spring:
|
||||
servlet:
|
||||
multipart:
|
||||
max-file-size: 10MB
|
||||
thymeleaf:
|
||||
cache: false
|
||||
prefix: classpath:/templates/
|
||||
check-template-location: true
|
||||
mode: HTML
|
||||
datasource:
|
||||
type: com.zaxxer.hikari.HikariDataSource
|
||||
# 动态数据源文档 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