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> |