tiansf
/
SchoolPhysicalExamination
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
SchoolPhysicalExamination/application/admin/view/editortext/model_content.html

294 lines
9.2 KiB
HTML
Raw Normal View History

最新版2024-11-23
2024-11-23 16:46:38 +08:00
<!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');
2024 11 29
2024-11-29 18:46:37 +08:00
if (user_like == 1) {
最新版2024-11-23
2024-11-23 16:46:38 +08:00
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){
2024 11 29
2024-11-29 18:46:37 +08:00
if(req.data.user_like == 1){
最新版2024-11-23
2024-11-23 16:46:38 +08:00
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;
2024 11 29
2024-11-29 18:46:37 +08:00
}else if(req.data.user_like == 0){
最新版2024-11-23
2024-11-23 16:46:38 +08:00
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>