我的web开发记录

目前开发到这样的效果

 由于图片太多这里不一个一个放了。

主要用了 vue element 以及一些ai的辅助

这里还没有接触后端，所以东西还不是太完善

这里用ai写的是下面的表格的写法，这里记录一下

结构 div el-table*

<template>
  <div class="table-container">
    <el-table :data="paginatedMembers" style="width: 100%" border>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="studentId" label="学号"></el-table-column>
      <el-table-column prop="grade" label="年级"></el-table-column>
      <el-table-column prop="points" label="积分"></el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination
          background
          layout="prev, pager, next"
          :total="members.length"
          :current-page="currentPage"
          :page-size="pageSize"
          @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

const members = ref([
  { name: '张三', studentId: '20210001', grade: '大一', points: 100 },
  { name: '李四', studentId: '20210002', grade: '大二', points: 150 },
  { name: '王五', studentId: '20210003', grade: '大三', points: 200 },
  { name: '张三', studentId: '20210001', grade: '大一', points: 100 },
  { name: '李四', studentId: '20210002', grade: '大二', points: 150 },
  { name: '王五', studentId: '20210003', grade: '大三', points: 200 },
  { name: '张三', studentId: '20210001', grade: '大一', points: 100 },
  { name: '李四', studentId: '20210002', grade: '大二', points: 150 },
  { name: '王五', studentId: '20210003', grade: '大三', points: 200 },
  { name: '张三', studentId: '20210001', grade: '大一', points: 100 },
  { name: '李四', studentId: '20210002', grade: '大二', points: 150 },
  { name: '王五', studentId: '20210003', grade: '大三', points: 200 },
  { name: '张三', studentId: '20210001', grade: '大一', points: 100 },
  { name: '李四', studentId: '20210002', grade: '大二', points: 150 },
  { name: '王五', studentId: '20210003', grade: '大三', points: 200 },
  { name: '张三', studentId: '20210001', grade: '大一', points: 100 },
  { name: '李四', studentId: '20210002', grade: '大二', points: 150 },
  { name: '王五', studentId: '20210003', grade: '大三', points: 200 },
  { name: '张三', studentId: '20210001', grade: '大一', points: 100 },
  { name: '李四', studentId: '20210002', grade: '大二', points: 150 },
  { name: '王五', studentId: '20210003', grade: '大三', points: 200 },
  { name: '张三', studentId: '20210001', grade: '大一', points: 100 },
  { name: '李四', studentId: '20210002', grade: '大二', points: 150 },
  { name: '王五', studentId: '20210003', grade: '大三', points: 200 },
  { name: '张三', studentId: '20210001', grade: '大一', points: 100 },
  { name: '李四', studentId: '20210002', grade: '大二', points: 150 },
  { name: '王五', studentId: '20210003', grade: '大三', points: 200 },
  // 可以继续添加成员数据
]);

const pageSize = ref(25); // 每页显示的条数
const currentPage = ref(1); // 当前页码

const paginatedMembers = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  return members.value.slice(start, end);
});

const handleCurrentChange = (val) => {
  currentPage.value = val;
};
</script>

<style scoped>
.table-container {
  margin-top: 20px;
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  background-color: rgba(255, 255, 255, 0.4);
}

.el-table {
  border: 1px solid #dcdcdc;
  border-radius: 4px;
  background-color: transparent !important;
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.el-table::before {
  height: 0;
  background-color: rgba(255, 255, 255, 0.1);
}

.el-table__header-wrapper th {
  background-color: rgba(245, 245, 245, 0.1); /* 半透明表头 */
}


.el-table__body-wrapper td {
  background-color: rgba(255, 255, 255, 0.1); /* 半透明表头 */
}

.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  background: rgba(255, 255, 255, 0.1);
}

.el-pagination.is-background .el-pager li {
  background: rgba(255, 255, 255, 0.1);
  color: #333;
}

.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #409EFF;
  color: #fff;
}

.el-pagination.is-background .btn-next,
.el-pagination.is-background .btn-prev {
  background: rgba(255, 255, 255, 0.1);
  color: #333;
}

.el-pagination.is-background .btn-next:disabled,
.el-pagination.is-background .btn-prev:disabled {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

</style>

这里记录一下注意点：

背景图标是放在Home.vue中的

.home {
    background-color: transparent;
    background-image: url('@/assets/images/dm1.jpg');
    background-size: cover; /* 使背景图片覆盖整个容器 */
    background-position: center; /* 使背景图片居中 */
    background-repeat: no-repeat; /* 防止背景图片重复 */
  }

记录一下这里遇到的问题：使用elment的表格 （用ai生成的一个表格），然后，只有周围的一圈可以透明化，然后表格本身缺还不行，ai此时也变成的智障，废了很多功夫，但是还没有做到一个不错的地步；

接下来：准备完善，透明化表格。

                完善功能

                 购买服务器，接入后端