42 lines
969 B
Vue
42 lines
969 B
Vue
|
<template>
|
|||
|
|
<!-- 模板部分：只能有一个根元素，用div包裹 -->
|
|||
|
|
<div class="sys-home-container">
|
|||
|
|
<el-card title="系统首页" shadow="hover">
|
|||
|
|
<div class="home-content">
|
|||
|
|
<h2>欢迎使用后台管理系统</h2>
|
|||
|
|
<p>当前访问路径：/syshome</p>
|
|||
|
|
<p>这是 Layout 子路由的正常渲染内容，不会展示代码</p>
|
|||
|
|
<el-button type="primary" @click="testBtn">测试按钮</el-button>
|
|||
|
|
</div>
|
|||
|
|
</el-card>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup>
|
|||
|
|
// 脚本部分：使用setup语法糖，无语法错误
|
|||
|
|
import { ElMessage } from 'element-plus'
|
|||
|
|
|
|||
|
|
// 测试方法
|
|||
|
|
const testBtn = () => {
|
|||
|
|
ElMessage.success('按钮点击成功！')
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
/* 样式部分：scoped确保样式隔离 */
|
|||
|
|
.sys-home-container {
|
|||
|
|
padding: 10px;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.home-content {
|
|||
|
|
margin-top: 20px;
|
|||
|
|
font-size: 16px;
|
|||
|
|
color: #333;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.home-content h2 {
|
|||
|
|
color: #409eff;
|
|||
|
|
margin-bottom: 15px;
|
|||
|
|
}
|
|||
|
|
</style>
|