50 lines
1.8 KiB
Vue
50 lines
1.8 KiB
Vue
<template>
|
||
<div style="padding: 40px; text-align: center; background: #1a1a2e; min-height: 100vh;">
|
||
<h1 style="color: #00d4ff; font-size: 32px;">车间可视化测试页面</h1>
|
||
<p style="color: #ffffff; margin: 20px 0; font-size: 18px;">
|
||
如果你能看到这个页面，说明路由配置是正确的！
|
||
</p>
|
||
|
||
<div style="background: rgba(0, 20, 40, 0.9); padding: 30px; border-radius: 8px; margin: 30px auto; max-width: 600px; border: 1px solid #00d4ff;">
|
||
<h2 style="color: #7ec8e3; margin-bottom: 20px;">测试检查清单</h2>
|
||
<ul style="color: #ffffff; text-align: left; line-height: 2; list-style: none; padding: 0;">
|
||
<li style="margin: 10px 0;">✅ Vue 组件正常加载</li>
|
||
<li style="margin: 10px 0;">✅ 样式正常显示</li>
|
||
<li style="margin: 10px 0;">✅ 路由正确配置</li>
|
||
<li style="margin: 10px 0;">✅ 页面无权限限制</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div style="margin-top: 40px;">
|
||
<a-button type="primary" size="large" @click="showMessage" style="margin-right: 10px;">
|
||
点击测试
|
||
</a-button>
|
||
<a-button size="large" @click="goToMain">
|
||
返回首页
|
||
</a-button>
|
||
</div>
|
||
|
||
<div v-if="message" style="margin-top: 30px; padding: 15px; border-radius: 4px; background: #52c41a; color: white; display: inline-block;">
|
||
{{ message }}
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { ref } from 'vue';
|
||
import { useRouter } from 'vue-router';
|
||
|
||
const message = ref('');
|
||
const router = useRouter();
|
||
|
||
const showMessage = () => {
|
||
message.value = '✅ 页面交互正常！现在可以测试完整的车间可视化页面了。';
|
||
setTimeout(() => {
|
||
message.value = '';
|
||
}, 3000);
|
||
};
|
||
|
||
const goToMain = () => {
|
||
router.push('/');
|
||
};
|
||
</script> |