页面优化

xiangpei

2024-06-26 6c472dfd39e90d1d479c2c0ced8ce317fc4a2bfe

 src/views/train/index.vue

@@ -1,12 +1,12 @@
<template>
  <div class="train-container w-screen h-screen bg-slate-50 flex flex-col items-center">
  <div class="train-container ">

    <div class="list-container container grow relative">
    <div class="list-container">
      <div class="list-content absolute top-0 bottom-0 left-0 right-0 py-4">
        <div class="list-wrapper w-full h-full">
          <el-card clasdivs="h-full" :body-style="{ height: '100%' }">
            <div class="card-wrapper w-full h-full flex flex-col px-8 box-border">
              <div class="card-header flex justify-between items-center shrink-0">
        <div class="list-wrapper">
          <el-card :body-style="{ height: '100%' }">
            <div class="card-wrapper">
              <div class="card-header">
                <div class="header-tab">
                  <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane label="全部" name="1"></el-tab-pane>
@@ -15,8 +15,8 @@
                    <el-tab-pane label="已结束" name="4"></el-tab-pane>
                  </el-tabs>
                </div>
                <div class="header-search flex items-center">
                  <el-input v-model="searchText" placeholder="请输入考试名称"/>
                <div class="header-search">
                  <el-input v-model="searchText" placeholder="请输入课程名称"/>
                  <el-button type="primary" class="ml-4">搜索</el-button>
                </div>
                <div>
@@ -39,7 +39,7 @@

          <!-- 添加题目对话框 -->
          <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
            <el-form ref="form" :model="form" :rules="rules" >
            <el-form label-width="80px" ref="form" :model="form" :rules="rules" >
              <el-form-item label="房间名" prop="meetName" >
                <el-input v-model="form.meetName" placeholder="请输入房间名" style="width: 300px"></el-input>
              </el-form-item>
@@ -102,4 +102,25 @@
:deep(.el-tabs__nav-wrap:after) {
  display: none;
}
.train-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  .list-container {
    flex: 1;
    position: relative;
  }
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}
.header-search {
  display: flex;
  align-items: center;
}
</style>