暫存版本
This commit is contained in:
112
templates/csdn.html
Normal file
112
templates/csdn.html
Normal file
@@ -0,0 +1,112 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>第十九届全国大学生智能汽车竞赛 百度智慧交通创意组 “风雨同舟”比赛规则_全国大学生智能汽车竞赛 智慧交通创意-CSDN博客</title>
|
||||
<script src="/static/vue.js"></script>
|
||||
<script src="static/socket.io.js"></script>
|
||||
<style>
|
||||
body, html {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
#app {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
.background-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
transition: background-position 0.1s ease-out;
|
||||
}
|
||||
.floating-buttons {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
z-index: 10;
|
||||
}
|
||||
.floating-button {
|
||||
width: 160px;
|
||||
height: 40px;
|
||||
border-radius: 20px;
|
||||
background-color: #fc5531;
|
||||
border: none;
|
||||
color: white;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
.floating-button:hover {
|
||||
background-color: #fc5531;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<div class="background-container"
|
||||
:style="backgroundStyle"
|
||||
@mousemove="handleMouseMove"
|
||||
ref="container">
|
||||
</div>
|
||||
<div class="floating-buttons">
|
||||
<button class="floating-button" @click="handleButton1Click">打开 CSDN APP</button>
|
||||
<button class="floating-button" @click="handleButton2Click">小程序看全文</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
new Vue({
|
||||
el: '#app',
|
||||
data: {
|
||||
imageSrc: '/static/csdn.png', // 使用大尺寸占位图片
|
||||
backgroundPosition: '0%'
|
||||
},
|
||||
computed: {
|
||||
backgroundStyle() {
|
||||
return {
|
||||
backgroundImage: `url(${this.imageSrc})`,
|
||||
backgroundPosition: `center ${this.backgroundPosition}`
|
||||
};
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleMouseMove(event) {
|
||||
const containerRect = this.$refs.container.getBoundingClientRect();
|
||||
const mouseY = event.clientY - containerRect.top;
|
||||
const scrollPercent = (mouseY / containerRect.height) * 100;
|
||||
this.backgroundPosition = `${scrollPercent}%`;
|
||||
},
|
||||
handleButton1Click() {
|
||||
// alert('按钮 1 被点击了');
|
||||
},
|
||||
handleButton2Click() {
|
||||
this.socket.emit('operate', { type: 'skip_task', content: '' });
|
||||
},
|
||||
onImageLoad() {
|
||||
console.log('背景图片加载完成');
|
||||
// 这里可以添加图片加载完成后的额外操作
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
const img = new Image();
|
||||
img.onload = this.onImageLoad;
|
||||
img.src = this.imageSrc;
|
||||
this.socket = io('http://' + document.domain + ':5001');
|
||||
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -123,9 +123,9 @@
|
||||
</el-option>
|
||||
</el-select>
|
||||
|
||||
<el-button v-if="showConfigForm" @click="toggleConfigForm" type="primary" style="margin-bottom: 20px;">
|
||||
<!-- <el-button v-if="showConfigForm" @click="toggleConfigForm" type="primary" style="margin-bottom: 20px;">
|
||||
{{ showConfigForm ? '关闭' : '打开' }} 配置
|
||||
</el-button>
|
||||
</el-button> -->
|
||||
|
||||
<el-form v-if="showConfigForm && config" class="config-form">
|
||||
<div v-for="(section, sectionName) in config" :key="sectionName">
|
||||
@@ -133,6 +133,14 @@
|
||||
<el-row :gutter="20">
|
||||
<el-col v-for="(value, key) in section" :key="key" :xs="24" :sm="12" :md="8" :lg="6">
|
||||
<el-form-item :label="key">
|
||||
<el-select v-if="sectionName === 'kick_ass'" v-model="config[sectionName][key]">
|
||||
<el-option
|
||||
v-for="item in target_person_options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
<el-switch
|
||||
v-if="typeof value === 'boolean'"
|
||||
v-model="config[sectionName][key]">
|
||||
@@ -155,6 +163,9 @@
|
||||
</el-row>
|
||||
</div>
|
||||
<el-button @click="saveConfig" type="primary" style="margin-top: 20px;">保存配置</el-button>
|
||||
<el-button v-if="showConfigForm" @click="toggleConfigForm" type="primary" style="margin-bottom: 20px;">
|
||||
{{ showConfigForm ? '关闭' : '打开' }} 配置
|
||||
</el-button>
|
||||
</el-form>
|
||||
|
||||
<h2 class="section-title">Log Display</h2>
|
||||
@@ -183,7 +194,20 @@
|
||||
files: {},
|
||||
ServerLog: "",
|
||||
showServerLogFlag: false,
|
||||
timer: null
|
||||
timer: null,
|
||||
target_person_options: [{
|
||||
value: 1,
|
||||
label: '模式 1'
|
||||
}, {
|
||||
value: 2,
|
||||
label: '模式 2'
|
||||
}, {
|
||||
value: 3,
|
||||
label: '模式 3'
|
||||
}, {
|
||||
value: 4,
|
||||
label: '模式 4'
|
||||
}],
|
||||
},
|
||||
methods: {
|
||||
loadConfig() {
|
||||
|
||||
Reference in New Issue
Block a user