<template> <div class="error-page"> <div class="error-code">4<span>0</span>3</div> <div class="error-desc">啊哦~ 你没有权限访问该页面哦</div> <div class="error-handle"> <router-link to="/"> <el-button type="primary" size="large">返回首页</el-button> </router-link> <el-button class="error-btn" type="primary" size="large" @click="goBack">返回上一页</el-button> </div> </div> </template> <script> import { useRouter } from 'vue-router'; export default { name: '404', setup() { const router = useRouter(); const goBack = () => { router.go(-1); }; return { goBack, }; }, }; </script> <style scoped> .error-page { display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100%; height: 100%; background: #f3f3f3; box-sizing: border-box; } .error-code { line-height: 1; font-size: 250px; font-weight: bolder; color: #f02d2d; } .error-code span { color: #00a854; } .error-desc { font-size: 30px; color: #777; } .error-handle { margin-top: 30px; padding-bottom: 200px; } .error-btn { margin-left: 100px; } </style>

这段代码实现了一个404页面的显示。如果用户访问了不存在的页面，就会显示这个页面。页面中包含一个错误码、错误描述和两个按钮。第一个按钮可以返回网站首页，第二个按钮可以返回上一页。代码中使用了Vue 3中的Composition API，通过useRouter()方法获取了Vue Router实例，然后在goBack()方法中调用了router.go(-1)方法返回上一页。同时，使用了CSS样式来美化页面。

相关问题

<template> <div class="contact-us-container"> <h1>联系我们</h1> <div class="form-group"> <label style="text-align: center">Name:</label> <span style="text-align: center">{{name}}</span> </div> <div class="form-group"> <label style="text-align: center">Email:</label> <span >{{email}}</span> </div> <div class="form-group"> <label>Message:</label> <span >{{message}}</span> </div> </div> </template>把这个样式调好看

<>
<div class="contact-us-container">
<h1>联系我们</h1>
<div class="form-group">
<label>姓名:</label>
<span>{{name}}</span>
</div>
<div class="form-group">
<label>邮箱:</label>
<span>{{email}}</span>
</div>
<div class="form-group">
<label>留言:</label>
<span>{{message}}</span>
</div>
</div>
</template>

<style>
.contact-us-container {
display: flex;
flex-direction: column;
align-items: center;
}
h1 {
font-size: 2rem;
margin-bottom: 2rem;
}
.form-group {
margin-bottom: 1rem;
display: flex;
flex-direction: column;
align-items: center;
}
label {
font-size: 1.2rem;
margin-bottom: 0.5rem;
}
span {
font-size: 1.2rem;
padding: 0.5rem;
border: 1px solid #ccc;
border-radius: 5px;
min-width: 300px;
text-align: center;
}
</style>

<template> <div> <div class="dialog-mask" @click="$emit('close-dialog')" v-show="dialogVisible"></div> <div class="dialog" v-show="dialogVisible">，如何用emit方式关闭资金

同样的，你可以在 `div.dialog-mask` 上绑定 `@click` 事件，然后在事件处理程序中调用 `$emit('close-funds')` 来关闭资金。具体代码实现如下：

<template>
  <div>
    <div class="dialog-mask" @click="$emit('close-funds')" v-show="dialogVisible"></div>
    <div class="dialog" v-show="dialogVisible">
      <div class="dialog-content">
        <div class="dialog-title">资金</div>
        <div class="dialog-body">
          <div id="funds-container" class="textarea">
            <!-- 对话框内容 -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

在这个例子中，我们在对话框外层包裹了一个 `<div>` 元素，并在这个元素上绑定了 `@click` 事件。当用户点击对话框外部时，事件处理程序将调用 `$emit('close-funds')` 来触发父组件的 `close-funds` 事件，从而关闭资金对话框。注意，这里的事件名称需要与父组件中相应的事件名称保持一致。