|
|
@@ -0,0 +1,250 @@
|
|
|
+<template>
|
|
|
+ <div class="cred_table">
|
|
|
+ <Header />
|
|
|
+ <div class="main">
|
|
|
+ <div>
|
|
|
+ <div class="title">书法大师</div>
|
|
|
+ <div class="number_cread">
|
|
|
+ <span class="left">文件数量：123</span>
|
|
|
+ <div class="right" @click="Startcread">开始创建</div>
|
|
|
+ </div>
|
|
|
+ <div class="table">
|
|
|
+ <div v-for="(item, i) in data" :key="i + 'one'">
|
|
|
+ <div class="number">{{ item.number }}</div>
|
|
|
+ <div class="dv">{{ item.fileName }}</div>
|
|
|
+ <div class="dv">{{ item.type == 1 ? "字卡片" : "句卡片" }}</div>
|
|
|
+ <div class="dv">{{ item.content }}</div>
|
|
|
+ <div class="dv">{{ item.time }}</div>
|
|
|
+ <el-popconfirm
|
|
|
+ title="确定删除这一条记录吗？"
|
|
|
+ @confirm="deleteOne(item.id, i)"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ slot="reference"
|
|
|
+ src="../../assets/teacherdev/delete-one.png"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ </el-popconfirm>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="page">
|
|
|
+ <el-pagination
|
|
|
+ background
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ :page-sizes="[10, 20, 30, 40, 50]"
|
|
|
+ layout="prev, pager, next,jumper"
|
|
|
+ :current-page="page"
|
|
|
+ :page-size="pageSize"
|
|
|
+ :total="1000"
|
|
|
+ >
|
|
|
+ </el-pagination>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
|
|
|
+//例如：import 《组件名称》from ‘《组件路径》';
|
|
|
+import Header from "@/components/Header";
|
|
|
+
|
|
|
+export default {
|
|
|
+ //import引入的组件需要注入到对象中才能使用
|
|
|
+ components: {
|
|
|
+ Header,
|
|
|
+ },
|
|
|
+ props: {},
|
|
|
+ data() {
|
|
|
+ //这里存放数据
|
|
|
+ return {
|
|
|
+ data: [],
|
|
|
+ page: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ //计算属性 类似于data概念
|
|
|
+ computed: {},
|
|
|
+ //监控data中数据变化
|
|
|
+ watch: {},
|
|
|
+ //方法集合
|
|
|
+ methods: {
|
|
|
+ // 创建
|
|
|
+ Startcread() {
|
|
|
+ this.$router.push({
|
|
|
+ path: "/CalligraphyMaster/cread",
|
|
|
+ });
|
|
|
+ },
|
|
|
+ deleteOne() {},
|
|
|
+ handleCurrentChange(val) {
|
|
|
+ this.page = val;
|
|
|
+ },
|
|
|
+ getdata() {
|
|
|
+ let data = [
|
|
|
+ {
|
|
|
+ fileName:
|
|
|
+ "这里是文件名文件名文件名这里是文件名文件名文件名这里是文件名文件名文件名",
|
|
|
+ type: 1,
|
|
|
+ content: "今天天气非常好 明天据说有雨 后天可能会有沙尘暴",
|
|
|
+ time: "2022-06-07 06:38",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ fileName:
|
|
|
+ "这里是文件名文件名文件名这里是文件名文件名文件名这里是文件名文件名文件名",
|
|
|
+ type: 2,
|
|
|
+ content: "今天天气非常好 明天据说有雨 后天可能会有沙尘暴",
|
|
|
+ time: "2022-06-07 06:38",
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ let num = this.page * this.pageSize - this.pageSize + 1;
|
|
|
+ data.forEach((item) => {
|
|
|
+ item.number = num;
|
|
|
+ num++;
|
|
|
+ });
|
|
|
+ this.data = data;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ //生命周期 - 创建完成（可以访问当前this实例）
|
|
|
+ created() {
|
|
|
+ this.getdata();
|
|
|
+ },
|
|
|
+ //生命周期 - 挂载完成（可以访问DOM元素）
|
|
|
+ mounted() {},
|
|
|
+ //生命周期-创建之前
|
|
|
+ beforeCreated() {},
|
|
|
+ //生命周期-挂载之前
|
|
|
+ beforeMount() {},
|
|
|
+ //生命周期-更新之前
|
|
|
+ beforUpdate() {},
|
|
|
+ //生命周期-更新之后
|
|
|
+ updated() {},
|
|
|
+ //生命周期-销毁之前
|
|
|
+ beforeDestory() {},
|
|
|
+ //生命周期-销毁完成
|
|
|
+ destoryed() {},
|
|
|
+ //如果页面有keep-alive缓存功能，这个函数会触发
|
|
|
+ activated() {},
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+/* @import url(); 引入css类 */
|
|
|
+.cred_table {
|
|
|
+ height: 100%;
|
|
|
+ .main {
|
|
|
+ min-height: 91%;
|
|
|
+ background: #f7f7f7;
|
|
|
+ padding-top: 54px;
|
|
|
+ > div {
|
|
|
+ width: 1200px;
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
+ .title {
|
|
|
+ font-weight: 700;
|
|
|
+ font-size: 30px;
|
|
|
+ line-height: 43px;
|
|
|
+ text-transform: uppercase;
|
|
|
+ color: #2c2c2c;
|
|
|
+ }
|
|
|
+ .number_cread {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-top: 12px;
|
|
|
+ .left {
|
|
|
+ margin-top: 40px;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 24px;
|
|
|
+ color: #000000;
|
|
|
+ }
|
|
|
+ .right {
|
|
|
+ width: 112px;
|
|
|
+ height: 40px;
|
|
|
+ background: #669aff;
|
|
|
+ border-radius: 4px;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 40px;
|
|
|
+ text-align: center;
|
|
|
+ color: #ffffff;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .table {
|
|
|
+ margin-top: 16px;
|
|
|
+ > div {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ height: 48px;
|
|
|
+ background: #ffffff;
|
|
|
+ border-bottom: 1px solid rgba(0, 0, 0, 0.08);
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #000000;
|
|
|
+ padding: 0 16px;
|
|
|
+ .number {
|
|
|
+ width: 20px;
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+ .dv {
|
|
|
+ margin-left: 24px;
|
|
|
+ width: 400px;
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ img {
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ cursor: pointer;
|
|
|
+ margin-left: 24px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .page {
|
|
|
+ margin-top: 24px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style lang="scss">
|
|
|
+.cred_table {
|
|
|
+ .page {
|
|
|
+ .el-pagination.is-background .el-pager li:not(.disabled).active {
|
|
|
+ background: none;
|
|
|
+ }
|
|
|
+ .el-pagination {
|
|
|
+ .btn-prev {
|
|
|
+ padding: 0 !important;
|
|
|
+ border: 1px solid #d9d9d9 !important;
|
|
|
+ background: none;
|
|
|
+ }
|
|
|
+ .btn-next {
|
|
|
+ padding: 0 !important;
|
|
|
+ border: 1px solid #d9d9d9 !important;
|
|
|
+ background: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .el-pager {
|
|
|
+ li {
|
|
|
+ border: 1px solid #d9d9d9 !important;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 2px;
|
|
|
+ margin: 0 7.5px;
|
|
|
+ background: none;
|
|
|
+ }
|
|
|
+ .el-icon,
|
|
|
+ .more,
|
|
|
+ .btn-quicknext,
|
|
|
+ .el-icon-more {
|
|
|
+ border: none !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .active {
|
|
|
+ color: black !important;
|
|
|
+ border: 1px solid black !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
qinpeng
