294 lines
9.2 KiB
HTML
294 lines
9.2 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>{$result.title}</title>
|
||
<script src="/x_admin/js/jq.js"></script>
|
||
<script type="text/javascript" src="/x_admin/lib/layui/layui.js" charset="utf-8"></script>
|
||
<script type="text/javascript" src="/x_admin/js/xadmin.js"></script>
|
||
<style>
|
||
*{
|
||
margin: 0 0;
|
||
padding: 0 0;
|
||
}
|
||
/* body{
|
||
display: flex;
|
||
flex-direction: column;
|
||
flex-wrap: nowrap;
|
||
align-items: center;
|
||
} */
|
||
#big_box{
|
||
width: 90vw;
|
||
position: absolute;
|
||
top: 0;
|
||
left:0;
|
||
right: 0;
|
||
margin: 0 auto;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
/* background-color: red; */
|
||
}
|
||
.content{
|
||
width: 100%;
|
||
}
|
||
p{
|
||
margin: 2vw 0;
|
||
}
|
||
img{
|
||
max-width: 100%;
|
||
display: block;
|
||
}
|
||
video{
|
||
max-width: 100%;
|
||
}
|
||
.action_region{
|
||
width: 100%;
|
||
margin-bottom: 15vw;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
flex-direction: row;
|
||
flex-wrap: nowrap;
|
||
align-items: center;
|
||
}
|
||
.action_region span{
|
||
font-size: 6vw;
|
||
}
|
||
#is_like{
|
||
display: flex;
|
||
flex-direction: row;
|
||
flex-wrap: nowrap;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
#reading{
|
||
display: flex;
|
||
flex-direction: row;
|
||
flex-wrap: nowrap;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
.heart_full, .heart_empty {
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
position: relative;
|
||
display: inline-block;
|
||
width: 7vw; /* 心形的宽度 */
|
||
height: 7vw; /* 心形的高度 */
|
||
cursor: pointer;
|
||
}
|
||
|
||
.heart_full::before {
|
||
position: absolute;
|
||
content: "";
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background-repeat: no-repeat;
|
||
background-position: center;
|
||
background-size: contain;
|
||
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23FF0000" d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>');
|
||
}
|
||
|
||
.heart_empty::before {
|
||
position: absolute;
|
||
content: "";
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background-repeat: no-repeat;
|
||
background-position: center;
|
||
background-size: contain;
|
||
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23888888" d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>');
|
||
}
|
||
|
||
.reading {
|
||
position: relative;
|
||
display: inline-block;
|
||
width: 7vw; /* 书籍的宽度 */
|
||
height: 7vw; /* 书籍的高度 */
|
||
cursor: pointer;
|
||
}
|
||
|
||
.reading::before {
|
||
content: "";
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background-repeat: no-repeat;
|
||
background-position: center;
|
||
background-size: contain;
|
||
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23FFA500" d="M18 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 18H6V4h12v16zM8 10h4v2H8v-2zm0 4h4v2H8v-2z"/></svg>');
|
||
}
|
||
table {
|
||
border-collapse: collapse; /* 这将合并表格边框，使得单元格之间没有间距 */
|
||
}
|
||
th{
|
||
background-color: #f5f2f0;
|
||
border: 1px solid #ccc;
|
||
text-align: center;
|
||
}
|
||
td{
|
||
border: 1px solid #ccc;
|
||
}
|
||
/* 外部容器的样式 */
|
||
.table-container {
|
||
max-width: 90vw; /* 最大宽度为视口宽度的80% */
|
||
overflow-x: auto; /* 水平方向溢出时显示滚动条 */
|
||
margin: 0 auto; /* 可选：让容器水平居中 */
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div id="big_box">
|
||
<div class="content">{$result.content}</div>
|
||
<div class="action_region">
|
||
<div id="is_like">
|
||
<div id="is_like_a" class=""></div>
|
||
<span class="is_like_num">{$result.i_like}</span>
|
||
</div>
|
||
<div id="reading">
|
||
<div class="reading"></div>
|
||
<span class="reading_num">{$result.reading}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</body>
|
||
</html>
|
||
<script>
|
||
var user_like = "{$result.user_like}";
|
||
var i_like_num = parseInt("{$result.i_like}");
|
||
// 根据 user_like 的值设置初始类
|
||
var isLikeElement = document.getElementById('is_like_a');
|
||
if (user_like == 1) {
|
||
isLikeElement.classList.add('heart_full');
|
||
} else {
|
||
isLikeElement.classList.add('heart_empty');
|
||
}
|
||
document.getElementById('is_like_a').addEventListener('click', function() {
|
||
load()
|
||
if(user_like == 3){
|
||
c_load()
|
||
alert('请登录');
|
||
}else{
|
||
user_like_do()
|
||
}
|
||
});
|
||
|
||
function user_like_do(){
|
||
$.ajax({
|
||
url:"/testedition/user_like_it", //请求的url地址
|
||
dataType:"json", //返回格式为json
|
||
async:true,//请求是否异步，默认为异步，这也是ajax重要特性
|
||
data:{"id":"{$result.id}",'token':"{$result.token}"}, //参数值
|
||
type:"POST", //请求方式
|
||
success:function(req){
|
||
c_load()
|
||
//请求成功时处理
|
||
if(req.code == 0){
|
||
if(req.data.user_like == 1){
|
||
i_like_num = i_like_num + 1;
|
||
isLikeElement.classList.remove('heart_empty');
|
||
isLikeElement.classList.add('heart_full');
|
||
document.querySelector('.is_like_num').innerHTML = i_like_num;
|
||
}else if(req.data.user_like == 0){
|
||
i_like_num = i_like_num - 1;
|
||
isLikeElement.classList.remove('heart_full');
|
||
isLikeElement.classList.add('heart_empty');
|
||
document.querySelector('.is_like_num').innerHTML = i_like_num;
|
||
}
|
||
}
|
||
},
|
||
error:function(){
|
||
//请求出错处理
|
||
}
|
||
});
|
||
}
|
||
//加载提示开启
|
||
function load() {
|
||
var index = layer.load(1, {
|
||
shade: [0.1, '#fff'] //0.1透明度的白色背景
|
||
});
|
||
}
|
||
// 关闭加载提示
|
||
function c_load() {
|
||
layer.close(layer.index)
|
||
}
|
||
</script>
|
||
<script>
|
||
// 获取页面上所有的 video 元素
|
||
const videos = document.querySelectorAll('video');
|
||
let hasScrolled = false;
|
||
|
||
// 监听滑动事件
|
||
document.addEventListener('touchstart', handleScroll, { passive: true });
|
||
|
||
function handleScroll() {
|
||
if (!hasScrolled) {
|
||
hasScrolled = true;
|
||
playFirstFrameAndPause(videos);
|
||
// 移除滑动事件监听器，避免多次触发
|
||
document.removeEventListener('touchstart', handleScroll);
|
||
}
|
||
}
|
||
|
||
function playFirstFrameAndPause(videos) {
|
||
videos.forEach(video => {
|
||
video.currentTime = 0; // 设置当前时间为 0 秒
|
||
video.play().then(() => {
|
||
video.pause(); // 立即暂停，显示第一帧
|
||
}).catch(error => {
|
||
console.error('Error playing video:', error);
|
||
});
|
||
});
|
||
}
|
||
</script>
|
||
<script>
|
||
window.onload = function() {
|
||
var content_data = '{$result.content}'
|
||
document.querySelector('div.content').innerHTML = content_data.replace(/\\/g, '');
|
||
|
||
// 获取页面上的所有表格
|
||
var tables = document.getElementsByTagName('table');
|
||
|
||
// 遍历每个表格
|
||
for (var i = 0; i < tables.length; i++) {
|
||
var table = tables[i];
|
||
|
||
// 创建一个div容器
|
||
var container = document.createElement('div');
|
||
container.className = 'table-container'; // 应用CSS样式
|
||
|
||
// 将表格移动到容器中
|
||
table.parentNode.insertBefore(container, table);
|
||
container.appendChild(table);
|
||
|
||
// 强制浏览器重新计算布局，以便我们可以获取正确的宽度
|
||
// 注意：这种方法可能不是最高效的，但在这种简单场景下通常足够
|
||
var style = window.getComputedStyle(table);
|
||
var tableWidth = parseFloat(style.width.replace('px', ''));
|
||
var viewportWidth = window.innerWidth || document.documentElement.clientWidth;
|
||
var maxWidth = viewportWidth * 0.8; // 计算80vw的值
|
||
|
||
// 如果表格宽度超过了80vw，则不需要额外操作，因为容器已经设置了max-width
|
||
// 但为了演示，我们可以检查并打印出信息
|
||
if (tableWidth > maxWidth) {
|
||
console.log('Table ' + (i + 1) + ' is wider than 80vw and is wrapped in a container.');
|
||
} else {
|
||
// 实际上，如果表格没有超过宽度，你可能想要移除容器或做一些其他处理
|
||
// 但在这个例子中，我们保留容器，因为max-width会确保它不会溢出
|
||
console.log('Table ' + (i + 1) + ' fits within 80vw, but is still wrapped in a container for demonstration.');
|
||
}
|
||
|
||
// 注意：由于我们设置了容器的max-width为80vw，并且overflow-x为auto，
|
||
// 所以即使表格宽度超过容器的宽度，滚动条也会自动出现，无需额外JS处理。
|
||
}
|
||
};
|
||
</script> |