<el-button type="primary" @click="handleLogin" class="login-button">登录</el-button>怎么让这个按钮居中

要让这个`<el-button>`元素居中，你可以考虑在CSS样式中调整其布局。这里有一个基本的例子：

1. 添加一个包含按钮的容器，并设置该容器的宽度为自适应（例如，100%），然后将其定位为`display: flex; justify-content: center; align-items: center;`。这会使内部内容水平和垂直居中。

HTML:

<div class="container">
  <el-button type="primary" @click="handleLogin" class="login-button">登录</el-button>
</div>

CSS:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%; /* 或者根据需要设定容器宽度 */
  height: 100%; /* 如果需要整个视口高度居中 */
}

这样，点击按钮“登录”时，它会在其容器内水平和垂直居中显示。

相关问题

在Aside添加预约挂号按钮，点击后跳转AppointForm界面，并将其中的预约挂号改到头顶居中。提交预约挂号后跳转至医生列表选择医生

为了实现您的需求，您需要对现有代码进行以下修改：

### 1. 修改 Aside 部分
在 `Src/App.vue` 文件中的 `<el-aside>` 标签内添加一个新的菜单项，用于跳转到预约挂号表单页面。

<template>
  <div id="app">
    <el-container>
      <el-header>预约挂号</el-header>
      <el-container>
        <el-aside width="200px" style="position: fixed;z-index: 1;">
          <el-menu>
            <el-menu-item index="1" @click="$router.push('/home')">首页</el-menu-item>
            <el-menu-item index="2" @click="$router.push('/login')">用户登录</el-menu-item>
            <el-menu-item index="3" @click="$router.push('/register')">用户注册</el-menu-item>
            <el-menu-item index="4" @click="$router.push('/appointment')">预约挂号</el-menu-item>
            <el-menu-item index="5" @click="$router.push('/doctors')">医生列表</el-menu-item>
            <!-- 新增预约挂号按钮 -->
            <el-menu-item index="6" @click="$router.push('/appointment/form')">预约挂号</el-menu-item>
          </el-menu>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
      <el-footer>
        <div style="display: flex; justify-content: space-between;">
          <span>地址：x市南泉路</span>
          <span>联系电话：123456780</span>
          <span id="dynamic-clock"></span>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'App',
  mounted() {
    this.updateClock();
    setInterval(this.updateClock, 1000);
  },
  methods: {
    updateClock() {
      const now = new Date();
      const timeString = now.toLocaleTimeString();
      const dateString = now.toDateString();
      document.getElementById('dynamic-clock').innerText = `${dateString} ${timeString}`;
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

.el-header, .el-footer {
  background-color: #B3C0D1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  position: fixed;
  top: 60px;
  bottom: 60px;
  left: 0;
  width: 250px;
  height: 100%;
  overflow-y: auto;
  background-color: #D3DCE6;
  color: #333;
  text-align: center;
  z-index: 1;
}

.el-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
  padding: 20px;
  margin-left: 200px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>

### 2. 修改路由配置
在 `Src/router/index.js` 文件中添加新的路由规则，以便能够访问预约挂号表单页面。

import Vue from 'vue';
import Router from 'vue-router';
import Home from '../components/Home.vue';
import Login from '../components/Login.vue';
import Register from '../components/Register.vue';
import DoctorList from '../components/DoctorList.vue';
import AppointmentForm from '../components/AppointmentForm.vue';
import AppointmentList from '../components/AppointmentList.vue';

Vue.use(Router);

export default new Router({
  routes: [
    { path: '/', redirect: '/login' },
    { path: '/home', component: Home },
    { path: '/login', component: Login },
    { path: '/register', component: Register },
    { path: '/doctors', component: DoctorList },
    { path: '/appointment/:doctorId', component: AppointmentForm },
    { path: '/appointments', component: AppointmentList },
    // 新增预约挂号表单路由
    { path: '/appointment/form', component: AppointmentForm }
  ]
});

### 3. 修改预约挂号表单页面
在 `Src/components/AppointmentForm.vue` 中，修改表单标题的位置，使其居中显示在顶部。

<template>
  <div class="appointment-form-container">
    <h2 style="text-align: center;">预约挂号</h2>
    <el-form @submit.native.prevent="handleSubmit">
      <el-form-item label="姓名">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="性别">
        <el-select v-model="form.gender" placeholder="请选择性别">
          <el-option label="男" value="male"></el-option>
          <el-option label="女" value="female"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="年龄">
        <el-input v-model.number="form.age"></el-input>
      </el-form-item>
      <el-form-item label="联系电话">
        <el-input v-model="form.phone"></el-input>
      </el-form-item>
      <el-form-item label="预约时间">
        <el-date-picker v-model="form.date" type="datetime" placeholder="选择日期时间"></el-date-picker>
      </el-form-item>
      <el-button type="primary" native-type="submit">提交</el-button>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: '',
        gender: '',
        age: '',
        phone: '',
        date: ''
      }
    };
  },
  methods: {
    handleSubmit() {
      const appointment = { ...this.form, doctorId: this.$route.params.doctorId };
      this.$store.dispatch('createAppointment', appointment);
      this.$router.push('/doctors');
    }
  }
};
</script>

<style scoped>
.appointment-form-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.box-card {
  width: 400px;
}
</style>

### 4. 修改提交后的跳转路径
在 `Src/components/AppointmentForm.vue` 的 `handleSubmit` 方法中，将提交成功后的跳转路径改为 `/doctors`，即医生列表页面。

methods: {
  handleSubmit() {
    const appointment = { ...this.form, doctorId: this.$route.params.doctorId };
    this.$store.dispatch('createAppointment', appointment);
    this.$router.push('/doctors');
  }
}

通过以上步骤，您可以实现新增预约挂号按钮并将其放在侧边栏中，点击后跳转到预约挂号表单页面，同时将表单标题居中显示在顶部，并在提交预约挂号后跳转到医生列表页面。

vue2.0 element-ui登录样式

Vue2.0和Element-UI是两个独立的框架，Vue是一种渐进式JavaScript框架，而Element-UI是基于Vue的组件库，提供了大量的UI组件，使得开发者可以快速搭建美观、易用的Web应用程序。

以下是使用Vue2.0和Element-UI进行登录的样式示例代码：

<template>
  <el-form ref="loginForm" :model="loginForm" :rules="rules" label-width="80px" class="login-form">
    <el-form-item label="用户名" prop="username">
      <el-input v-model="loginForm.username" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input type="password" v-model="loginForm.password" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">登录</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
  export default {
    data() {
      return {
        loginForm: {
          username: '',
          password: ''
        },
        rules: {
          username: [
            { required: true, message: '请输入用户名', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' }
          ]
        }
      };
    },
    methods: {
      submitForm() {
        this.$refs.loginForm.validate(valid => {
          if (valid) {
            // 执行登录逻辑
          }
        });
      }
    }
  };
</script>

<style>
  .login-form {
    width: 400px;
    margin: 50px auto;
  }
</style>

在这个示例中，我们使用了Element-UI的el-form、el-form-item、el-input和el-button组件来构建登录表单。通过定义loginForm数据属性和rules校验规则，我们实现了简单的表单验证。当用户单击“登录”按钮时，我们通过validate方法对表单进行验证，如果验证成功，则可以执行实际的登录逻辑。在样式方面，我们使用了一个简单的CSS样式，将表单居中显示在页面上。

希望这个示例可以帮助你开始使用Vue2.0和Element-UI构建更丰富、更强大的Web应用程序。