书法大师 列表及创建静态页面效果

src/components/teacher-dev/TeachingTool.vue

@@ -46,6 +46,19 @@
         </div>
         <p>词句卡片</p>
       </div>
+      <div>
+        <div
+          style="background: #54cc92"
+          @click="
+            $router.push({
+              path: '/CalligraphyMaster/table',
+            })
+          "
+        >
+          <img src="../../assets/teacherdev/jygj-4.png" alt="" />
+        </div>
+        <p>书法大师</p>
+      </div>
     </div>
   </div>
 </template>

src/router/index.js

@@ -130,6 +130,18 @@ const routes = [{
     import('@/views/wordcard/cread')
 },
 {
+
+  path: '/CalligraphyMaster/table',
+  component: () =>
+    import('@/views/CalligraphyMaster/table')
+},
+{
+
+  path: '/CalligraphyMaster/cread',
+  component: () =>
+    import('@/views/CalligraphyMaster/cread')
+},
+{
   path: '*',
   redirect: '/404',
 

src/views/CalligraphyMaster/cread.vue

@@ -0,0 +1,213 @@
+<template>
+  <div class="CalligraphyMaster-cread">
+    <Header />
+    <div class="bg_main">
+      <div class="main">
+        <div class="main-top">
+          <div class="left">
+            <span>画布设置：</span>
+            <div>
+              <span>长度</span>
+              <el-input v-model="form.width" style="width: 60px"></el-input>
+            </div>
+            <div>
+              <span>宽度</span>
+              <el-input v-model="form.height" style="width: 60px"></el-input>
+            </div>
+            <div>
+              <span>背景颜色</span>
+              <el-color-picker v-model="form.bg_color"></el-color-picker>
+            </div>
+          </div>
+          <div class="right">
+            <div>
+              <img src="../../assets/teacherdev/word-save.png" alt="" />
+              保存
+            </div>
+            <div>
+              <img src="../../assets/teacherdev/sfds-fb.png" alt="" />
+              发布
+            </div>
+            <div>
+              <img src="../../assets/teacherdev/word-download.png" alt="" />
+              下载
+            </div>
+          </div>
+        </div>
+        <div class="canvas"></div>
+        <div class="bottom">
+          <div>
+            <img src="../../assets/teacherdev/sfds-tailoring.png" alt="" />
+          </div>
+          <div>
+            <img src="../../assets/teacherdev/sfds-image.png" alt="" />
+          </div>
+          <div>
+            <img src="../../assets/teacherdev/sfds-text.png" alt="" />
+          </div>
+          <div>
+            <img src="../../assets/teacherdev/sfds-delete.png" alt="" />
+          </div>
+          <div>
+            <img src="../../assets/teacherdev/sfds-sun.png" alt="" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+//例如：import 《组件名称》from ‘《组件路径》';
+import Header from "@/components/Header";
+
+export default {
+  //import引入的组件需要注入到对象中才能使用
+  components: {
+    Header,
+  },
+  props: {},
+  data() {
+    //这里存放数据
+    return {
+      form: {
+        width: "",
+        height: "",
+        bg_color: "#FF3F3F",
+      },
+    };
+  },
+  //计算属性 类似于data概念
+  computed: {},
+  //监控data中数据变化
+  watch: {},
+  //方法集合
+  methods: {},
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  //生命周期-创建之前
+  beforeCreated() {},
+  //生命周期-挂载之前
+  beforeMount() {},
+  //生命周期-更新之前
+  beforUpdate() {},
+  //生命周期-更新之后
+  updated() {},
+  //生命周期-销毁之前
+  beforeDestory() {},
+  //生命周期-销毁完成
+  destoryed() {},
+  //如果页面有keep-alive缓存功能，这个函数会触发
+  activated() {},
+};
+</script>
+<style lang="scss" scoped>
+/* @import url(); 引入css类 */
+.CalligraphyMaster-cread {
+  height: 100%;
+  position: relative;
+  .bg_main {
+    background: #f7f7f7;
+    min-height: 100%;
+    padding-top: 24px;
+    padding-bottom: 70px;
+    .main {
+      width: 1168px;
+      margin: 0 auto;
+      padding: 16px;
+      background: #ffffff;
+      .main-top {
+        display: flex;
+        justify-content: space-between;
+        .left {
+          display: flex;
+          align-items: center;
+          font-weight: 400;
+          font-size: 14px;
+          color: #000000;
+          > div {
+            display: flex;
+            align-items: center;
+            margin-right: 8px;
+          }
+          span {
+            margin-right: 8px;
+          }
+        }
+        .right {
+          display: flex;
+          div {
+            margin-left: 16px;
+            width: 96px;
+            height: 40px;
+            background: #ffffff;
+            border: 1px solid rgba(0, 0, 0, 0.08);
+            border-radius: 4px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            img {
+              width: 24px;
+              height: 24px;
+              margin-right: 8px;
+            }
+          }
+        }
+      }
+      .canvas {
+        margin-top: 32px;
+        width: 1168px;
+        height: 500px;
+        border: 1px solid rgba(0, 0, 0, 0.1);
+      }
+      .bottom {
+        margin-top: 40px;
+        display: flex;
+        justify-content: center;
+        div {
+          width: 48px;
+          height: 40px;
+          background: #ffffff;
+          border: 1px solid rgba(0, 0, 0, 0.08);
+          border-radius: 4px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          cursor: pointer;
+          margin: 0 16px;
+          img {
+            width: 32px;
+            height: 32px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
+<style lang="scss">
+.CalligraphyMaster-cread {
+  .el-color-picker__color {
+    border: none;
+  }
+  .el-icon-close:before {
+    content: "";
+  }
+  .el-icon-arrow-down:before {
+    content: "";
+  }
+  .el-color-picker__color-inner {
+    position: absolute;
+    left: 3px;
+    top: 3px;
+    right: 0;
+    bottom: 0;
+    width: 24px;
+    height: 24px;
+  }
+}
+</style>

src/views/CalligraphyMaster/table.vue

@@ -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>