字体库列表页面，

创建书法大师字体配置及亮度配置功能完善

src/components/DragLine.vue

@@ -0,0 +1,221 @@
+<template>
+  <div>
+    <div class="slider" ref="slider">
+      <div class="process" :style="{ width: width + 'px' }"></div>
+
+      <div class="thunk" ref="trunk" :style="{ left }">
+        <div class="block"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+/*
+
+ * min 进度条最小值
+
+ * max 进度条最大值
+
+ * v-model 对当前值进行双向绑定实时显示拖拽进度
+
+ * */
+
+export default {
+  props: ["min", "max", "value", "width"],
+
+  data() {
+    return {
+      slider: null, //滚动条DOM元素
+
+      thunk: null, //拖拽DOM元素
+
+      per: this.value, //当前值
+    };
+  },
+
+  //渲染到页面的时候
+
+  mounted() {
+    this.slider = this.$refs.slider;
+
+    this.thunk = this.$refs.trunk;
+
+    var _this = this;
+
+    this.thunk.onmousedown = function (e) {
+      var width = parseInt(_this.width);
+
+      var disX = e.clientX;
+
+      document.onmousemove = function (e) {
+        // value, left, width
+
+        // 当value变化的时候，会通过计算属性修改left，width
+
+        // 拖拽的时候获取的新width
+
+        var newWidth = e.clientX - disX + width;
+
+        // 拖拽的时候得到新的百分比
+
+        var scale = newWidth / _this.slider.offsetWidth;
+
+        _this.per = Math.ceil((_this.max - _this.min) * scale + _this.min);
+
+        _this.per = Math.max(_this.per, _this.min);
+
+        _this.per = Math.min(_this.per, _this.max);
+
+        _this.$emit("input", _this.per);
+      };
+
+      document.onmouseup = function () {
+        document.onmousemove = document.onmouseup = null;
+      };
+
+      return false;
+    };
+  },
+
+  computed: {
+    // 设置一个百分比，提供计算slider进度宽度和trunk的left值
+
+    // 对应公式为 当前值-最小值/最大值-最小值 = slider进度width / slider总width
+
+    // trunk left = slider进度width + trunk宽度/2
+
+    scale() {
+      return (this.per - this.min) / (this.max - this.min);
+    },
+
+    left() {
+      if (this.slider) {
+        return (
+          this.slider.offsetWidth * this.scale -
+          this.thunk.offsetWidth / 2 +
+          "px"
+        );
+      } else {
+        return 0 + "px";
+      }
+    },
+  },
+};
+</script>
+
+<style>
+.box {
+  margin: 100px auto 0;
+
+  width: 80%;
+}
+
+.clear:after {
+  content: "";
+
+  display: block;
+
+  clear: both;
+}
+
+.slider {
+  user-select: none;
+
+  position: relative;
+
+  margin: 0;
+
+  width: 400px;
+
+  height: 5px;
+
+  background: #e4e7ed;
+
+  border-radius: 5px;
+
+  cursor: pointer;
+}
+
+.slider .process {
+  position: absolute;
+
+  left: 0;
+
+  top: 0;
+
+  width: 112px;
+
+  height: 5px;
+
+  border-radius: 5px;
+
+  background: #5e95ff;
+}
+
+.slider .thunk {
+  position: absolute;
+
+  left: 100px;
+
+  top: -7px;
+
+  width: 14px;
+
+  height: 14px;
+}
+
+.slider .block {
+  width: 14px;
+
+  height: 14px;
+
+  border-radius: 50%;
+
+  border: 2px solid #409eff;
+
+  background: #5e95ff;
+
+  transition: 0.2s all;
+}
+
+.slider .tips {
+  position: absolute;
+
+  left: -7px;
+
+  bottom: 30px;
+
+  min-width: 15px;
+
+  text-align: center;
+
+  padding: 4px 8px;
+
+  /* background: #000; */
+
+  border-radius: 5px;
+
+  height: 24px;
+
+  color: #fff;
+}
+
+.slider .tips i {
+  position: absolute;
+
+  margin-left: -5px;
+
+  left: 50%;
+
+  bottom: -9px;
+
+  font-size: 16px;
+
+  color: #000;
+}
+
+.slider .block:hover {
+  transform: scale(1.1);
+}
+</style>

src/router/index.js

@@ -142,6 +142,12 @@ const routes = [{
     import('@/views/CalligraphyMaster/cread')
 },
 {
+
+  path: '/CalligraphyMaster/fontFamilyList',
+  component: () =>
+    import('@/views/CalligraphyMaster/fontFamilyList')
+},
+{
   path: '*',
   redirect: '/404',
 

src/views/CalligraphyMaster/cread.vue

@@ -42,7 +42,136 @@
             </div>
           </div>
         </div>
-        <div class="canvas"></div>
+        <div
+          class="operation"
+          v-if="changeType == 'text' || changeType == 'luminance'"
+        >
+          <template v-if="changeType == 'text'">
+            <div class="text-operation">
+              <div class="font_sele">
+                <div
+                  class="font_sele_input"
+                  @click="FontFamilySele = !FontFamilySele"
+                >
+                  <span>{{ fontForm.fontFamily }}</span>
+                  <img
+                    src="../../assets/teacherdev/font-sele-down.png"
+                    alt=""
+                  />
+                </div>
+                <div v-show="FontFamilySele" class="fontFamily_list">
+                  <div class="Boutque_font">
+                    <span class="one">精品字体</span>
+                    <span
+                      v-for="(item, index) in BoutiqueFontList"
+                      :key="index + 'BoutiqueFon'"
+                      >{{ item }}</span
+                    >
+                    <span class="more">更多...</span>
+                  </div>
+                  <div
+                    class="fontFamily_one"
+                    v-for="(item, index) in fontList"
+                    :key="index + 'font'"
+                    :value="item.fontFamily"
+                  >
+                    <div class="use" v-if="item.RecentUse">
+                      <span>最近使用</span>
+                    </div>
+                    <div class="fontFamily">{{ item.fontFamily }}</div>
+                    <div class="content">
+                      <span>{{ item.content }}</span>
+                      <img
+                        v-if="item.collect"
+                        src="../../assets/teacherdev/font-collect-sele.png"
+                        alt=""
+                      />
+                      <img
+                        v-else
+                        src="../../assets/teacherdev/font-collect.png"
+                        alt=""
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <el-select
+                v-model="fontForm.fontSize"
+                style="width: 60px; margin-left: 8px"
+              >
+                <el-option
+                  v-for="(item, i) in fontSizeList"
+                  :key="i + 'fontsize'"
+                  :value="item.value"
+                  :label="item.name"
+                >
+                </el-option>
+              </el-select>
+              <el-select
+                v-model="fontForm.percent"
+                style="width: 68px; height: 32px; margin-left: 8px"
+              >
+                <el-option
+                  v-for="i in 100"
+                  :key="i + 'fontsize'"
+                  :value="i"
+                  :label="i + '%'"
+                >
+                </el-option>
+              </el-select>
+              <div class="img_dv">
+                <img src="../../assets/teacherdev/font-add.png" alt="" />
+                <img src="../../assets/teacherdev/font-remove.png" alt="" />
+                <img src="../../assets/teacherdev/font-blod.png" alt="" />
+                <img src="../../assets/teacherdev/font-red.png" alt="" />
+              </div>
+              <el-color-picker
+                v-model="fontForm.fontColor"
+                style="margin-left: 8px; width: 60px"
+              ></el-color-picker>
+              <div class="img_dv" style="margin-left: 8px">
+                <img src="../../assets/teacherdev/font-left.png" alt="" />
+                <img src="../../assets/teacherdev/font-center.png" alt="" />
+                <img src="../../assets/teacherdev/font-right.png" alt="" />
+              </div>
+              <div class="img_dv" style="margin-left: 8px">
+                <img src="../../assets/teacherdev/font-line-left-right.png" alt="" />
+                <img src="../../assets/teacherdev/font-line-top-bottom.png" alt="" />
+              </div>
+              <div class="img_dv" style="margin-left: 8px">
+                <img src="../../assets/teacherdev/font-italic.png" alt="" />
+                <img src="../../assets/teacherdev/font-blod2.png" alt="" />
+              </div>
+            </div>
+          </template>
+          <template v-else-if="changeType == 'luminance'">
+            <div class="luminance-operation">
+              <img src="../../assets/teacherdev/sun.png" alt="" />
+              <div class="line-text">
+                <div class="DragLine">
+                  <DragLine
+                    :min="-100"
+                    :max="100"
+                    :width="400"
+                    v-model="luminanceNumber"
+                  />
+                </div>
+                <div class="text">
+                  <span>-100</span>
+                  <span>0</span>
+                  <span>+100</span>
+                </div>
+              </div>
+            </div>
+          </template>
+        </div>
+        <div
+          class="canvas"
+          :style="{
+            marginTop:
+              changeType == 'text' || changeType == 'luminance' ? 0 : '32px',
+          }"
+        ></div>
         <div class="bottom">
           <div>
             <img src="../../assets/teacherdev/sfds-tailoring.png" alt="" />
@@ -50,13 +179,13 @@
           <div>
             <img src="../../assets/teacherdev/sfds-image.png" alt="" />
           </div>
-          <div>
+          <div @click="addText">
             <img src="../../assets/teacherdev/sfds-text.png" alt="" />
           </div>
           <div>
             <img src="../../assets/teacherdev/sfds-delete.png" alt="" />
           </div>
-          <div>
+          <div @click="changeluminance">
             <img src="../../assets/teacherdev/sfds-sun.png" alt="" />
           </div>
         </div>
@@ -69,11 +198,12 @@
 //这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
 //例如：import 《组件名称》from ‘《组件路径》';
 import Header from "@/components/Header";
-
+import DragLine from "@/components/DragLine";
 export default {
   //import引入的组件需要注入到对象中才能使用
   components: {
     Header,
+    DragLine,
   },
   props: {},
   data() {
@@ -84,6 +214,91 @@ export default {
         height: "",
         bg_color: "#FF3F3F",
       },
+      BoutiqueFontList: [
+        "水墨字体",
+        "古风字体",
+        "中国风字体",
+        "书协专家字体",
+        "电影海报字体",
+        "国潮字体",
+      ],
+      fontSizeList: [
+        {
+          name: "5号",
+          value: 5,
+        },
+      ],
+      fontList: [
+        {
+          fontFamily: "方正颜真卿楷书",
+          content: "忽如一夜春风来",
+          collect: true,
+          RecentUse: true,
+        },
+        {
+          fontFamily: "方正颜真卿楷书",
+          content: "忽如一夜春风来",
+          collect: false,
+          RecentUse: false,
+        },
+        {
+          fontFamily: "方正颜真卿楷书",
+          content: "忽如一夜春风来",
+          collect: true,
+          RecentUse: true,
+        },
+        {
+          fontFamily: "方正颜真卿楷书",
+          content: "忽如一夜春风来",
+          collect: false,
+          RecentUse: false,
+        },
+        {
+          fontFamily: "方正颜真卿楷书",
+          content: "忽如一夜春风来",
+          collect: true,
+          RecentUse: true,
+        },
+        {
+          fontFamily: "方正颜真卿楷书",
+          content: "忽如一夜春风来",
+          collect: false,
+          RecentUse: false,
+        },
+        {
+          fontFamily: "方正颜真卿楷书",
+          content: "忽如一夜春风来",
+          collect: true,
+          RecentUse: true,
+        },
+        {
+          fontFamily: "方正颜真卿楷书",
+          content: "忽如一夜春风来",
+          collect: false,
+          RecentUse: false,
+        },
+        {
+          fontFamily: "方正颜真卿楷书",
+          content: "忽如一夜春风来",
+          collect: true,
+          RecentUse: true,
+        },
+        {
+          fontFamily: "方正颜真卿楷书",
+          content: "忽如一夜春风来",
+          collect: false,
+          RecentUse: false,
+        },
+      ],
+      luminanceNumber: 0,
+      changeType: "",
+      fontForm: {
+        fontFamily: "方正颜真卿楷书",
+        fontSize: 5,
+        percent: 100,
+        fontColor: "#FFFFFF",
+      },
+      FontFamilySele: false,
     };
   },
   //计算属性 类似于data概念
@@ -91,7 +306,16 @@ export default {
   //监控data中数据变化
   watch: {},
   //方法集合
-  methods: {},
+  methods: {
+    // 添加文字
+    addText() {
+      this.changeType = "text";
+    },
+    // 修改亮度
+    changeluminance() {
+      this.changeType = "luminance";
+    },
+  },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
   //生命周期 - 挂载完成（可以访问DOM元素）
@@ -166,9 +390,154 @@ export default {
           }
         }
       }
+      .operation {
+        margin-top: 33px;
+      }
+      .text-operation {
+        height: 48px;
+        border: 1px solid rgba(0, 0, 0, 0.08);
+        border-radius: 8px 8px 0px 0px;
+        border-bottom: none;
+        display: flex;
+        align-items: center;
+        padding: 0 16px;
+        .font_sele {
+          position: relative;
+          .font_sele_input {
+            width: 193px;
+            height: 32px;
+            padding: 0 6px;
+            background: #ffffff;
+            border: 1px solid rgba(0, 0, 0, 0.08);
+            border-radius: 4px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            cursor: pointer;
+            > span {
+              font-weight: 400;
+              font-size: 14px;
+              line-height: 20px;
+              color: #000000;
+            }
+            > img {
+              width: 16px;
+              height: 16px;
+            }
+          }
+
+          .fontFamily_list {
+            position: absolute;
+            top: 39px;
+            left: 0;
+            width: 468px;
+            background: #ffffff;
+            border-width: 0px 1px 1px 1px;
+            border-style: solid;
+            border-color: #dbdbdb;
+            height: 520px;
+            overflow: auto;
+            .fontFamily_one {
+              padding: 12px 24px 16px 32px;
+              border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+              position: relative;
+              .use {
+                width: 80px;
+                height: 80px;
+                background: url("../../assets/teacherdev/font-use.png");
+                background-size: cover;
+                position: absolute;
+                left: -20px;
+                top: -20px;
+                -webkit-transform: scale(0.5);
+
+                span {
+                  color: #ffffff;
+                  font-weight: 400;
+                  font-size: 16px;
+                  position: absolute;
+                  transform: translateX(-3px) translateY(20px) rotate(-45deg);
+                }
+              }
+              .fontFamily {
+                font-weight: 400;
+                font-size: 14px;
+                line-height: 20px;
+                color: rgba(0, 0, 0, 0.5);
+              }
+              .content {
+                margin-top: 8px;
+                display: flex;
+                justify-content: space-between;
+                span {
+                  font-weight: 400;
+                  font-size: 32px;
+                  line-height: 150%;
+                  color: #000000;
+                }
+                img {
+                  width: 24px;
+                  height: 24px;
+                  cursor: pointer;
+                }
+              }
+            }
+          }
+        }
+        .Boutque_font {
+          padding: 16px 12px 0 12px;
+          background: #f0f0f0;
+          font-weight: 400;
+          font-size: 14px;
+          line-height: 20px;
+          color: rgba(0, 0, 0, 0.6);
+          cursor: default;
+          span {
+            display: inline-block;
+            margin: 0 12px 12px 12px;
+          }
+          .one {
+            color: #000000;
+          }
+          .more {
+            color: rgba(0, 0, 0, 0.35);
+            cursor: pointer;
+          }
+        }
+        .img_dv {
+          img {
+            width: 26px;
+            height: 26px;
+            cursor: pointer;
+            margin-left: 8px;
+          }
+        }
+      }
+      .luminance-operation {
+        width: 440px;
+        margin: 0 auto;
+        display: flex;
+        > img {
+          width: 24px;
+          height: 24px;
+        }
+        .line-text {
+          margin-left: 17px;
+          .DragLine {
+            margin-top: 7px;
+          }
+          .text {
+            margin-top: 8px;
+            display: flex;
+            justify-content: space-between;
+            font-weight: 400;
+            font-size: 12px;
+            line-height: 20px;
+            color: #919c9e;
+          }
+        }
+      }
       .canvas {
-        margin-top: 32px;
-        width: 1168px;
         height: 500px;
         border: 1px solid rgba(0, 0, 0, 0.1);
       }
@@ -199,23 +568,66 @@ export default {
 </style>
 <style lang="scss">
 .CalligraphyMaster-cread {
-  .el-color-picker__color {
-    border: none;
-  }
-  .el-icon-close:before {
-    content: "";
-  }
-  .el-icon-arrow-down:before {
-    content: "";
+  .main-top {
+    .left {
+      .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;
+      }
+    }
   }
-  .el-color-picker__color-inner {
-    position: absolute;
-    left: 3px;
-    top: 3px;
-    right: 0;
-    bottom: 0;
-    width: 24px;
-    height: 24px;
+
+  .text-operation {
+    .el-color-picker__trigger {
+      width: 60px;
+      height: 32px;
+    }
+    .el-color-picker__empty,
+    .el-color-picker__icon {
+      left: 72%;
+    }
+    .el-color-picker__color {
+      width: 28px;
+    }
+    .el-icon-close:before,
+    .el-icon-arrow-down:before {
+      color: gray;
+    }
+    .el-color-picker__color-inner {
+      position: absolute;
+      left: -1px;
+      top: -1px;
+      right: 0;
+      bottom: 0;
+      width: 100%;
+      height: 100%;
+      border: 1px solid rgba(0, 0, 0, 0.08);
+      border-radius: 2px;
+    }
+    .el-input__inner {
+      padding: 0 8px;
+    }
+    .el-input__inner,
+    .el-input__suffix {
+      height: 32px;
+    }
+    .el-input__icon {
+      line-height: 32px;
+    }
   }
 }
 </style>

src/views/CalligraphyMaster/fontFamilyList.vue

@@ -0,0 +1,184 @@
+<template>
+  <div class="fontFamilyList">
+    <Header />
+    <div class="main">
+      <div class="seek">
+        <input type="text" />
+        <div>搜索</div>
+      </div>
+      <div class="list">
+        <div v-for="(item, index) in data.list" :key="index">
+          <div class="top">国际中文教育</div>
+          <div class="bottom">
+            <span>{{ item.fontFamily }}</span>
+            <img
+              v-if="item.collect"
+              src="../../assets/teacherdev/font-collect-sele.png"
+              alt=""
+            />
+            <img v-else src="../../assets/teacherdev/font-collect.png" alt="" />
+          </div>
+        </div>
+      </div>
+      <div class="page">
+        <el-pagination
+          background
+          :page-sizes="[10, 20, 30, 40, 50]"
+          layout="prev, pager, next"
+          :current-page="page"
+          :page-size="pageSize"
+          :total="1000"
+        >
+        </el-pagination>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+//例如：import 《组件名称》from ‘《组件路径》';
+import Header from "@/components/Header";
+export default {
+  //import引入的组件需要注入到对象中才能使用
+  components: { Header },
+  props: {},
+  data() {
+    //这里存放数据
+    return {
+      page: 1,
+      pageSize: 20,
+      data: {
+        list: [
+          {
+            fontFamily: "方正柳公权楷书",
+            collect: true,
+          },
+          {
+            fontFamily: "方正柳公权楷书",
+            collect: false,
+          },
+          {
+            fontFamily: "方正柳公权楷书",
+            collect: true,
+          },
+          {
+            fontFamily: "方正柳公权楷书",
+            collect: false,
+          },
+          {
+            fontFamily: "方正柳公权楷书",
+            collect: true,
+          },
+          {
+            fontFamily: "方正柳公权楷书",
+            collect: false,
+          },
+        ],
+      },
+    };
+  },
+  //计算属性 类似于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类 */
+.fontFamilyList {
+  .main {
+    height: calc(100vh - 64px);
+    background: #f2f2f2;
+    padding-top: 40px;
+    .seek {
+      display: flex;
+      justify-content: center;
+      input {
+        width: 468px;
+        height: 51px;
+        border: 1px solid #669aff;
+        outline: none;
+      }
+      div {
+        width: 96px;
+        height: 51px;
+        background: #669aff;
+        border-width: 1px 1px 1px 0px;
+        border-style: solid;
+        border-color: #669aff;
+        font-weight: 400;
+        font-size: 16px;
+        line-height: 51px;
+        color: #ffffff;
+        text-align: center;
+      }
+    }
+    .list {
+      width: 1200px;
+      margin: 20px auto;
+      display: flex;
+      flex-wrap: wrap;
+      > div {
+        margin: 20px 25px;
+        width: 248px;
+        border-radius: 8px;
+        overflow: hidden;
+        .top {
+          height: 87px;
+          font-weight: 400;
+          font-size: 36px;
+          line-height: 87px;
+          text-align: center;
+          color: #ffffff;
+
+          background: #7881a3;
+          border-radius: 8px 8px 0px 0px;
+        }
+        .bottom {
+          background: #ffffff;
+          height: 40px;
+          padding: 0 12px;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          font-weight: 400;
+          font-size: 16px;
+          line-height: 40px;
+          color: #878787;
+          img {
+            width: 24px;
+            height: 24px;
+          }
+        }
+      }
+    }
+    .page {
+      width: 1200px;
+      margin: 0 auto;
+      display: flex;
+      justify-content: center;
+    }
+  }
+}
+</style>

src/views/CalligraphyMaster/table.vue

@@ -12,7 +12,7 @@
           <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.fontFamily }}</div>
             <div class="dv">{{ item.content }}</div>
             <div class="dv">{{ item.time }}</div>
             <el-popconfirm
@@ -75,7 +75,7 @@ export default {
         path: "/CalligraphyMaster/cread",
       });
     },
-    deleteOne() {},
+    deleteOne(item) {},
     handleCurrentChange(val) {
       this.page = val;
     },
@@ -84,14 +84,14 @@ export default {
         {
           fileName:
             "这里是文件名文件名文件名这里是文件名文件名文件名这里是文件名文件名文件名",
-          type: 1,
+          fontFamily: "方正楷体",
           content: "今天天气非常好 明天据说有雨 后天可能会有沙尘暴",
           time: "2022-06-07 06:38",
         },
         {
           fileName:
             "这里是文件名文件名文件名这里是文件名文件名文件名这里是文件名文件名文件名",
-          type: 2,
+          fontFamily: "方正颜真卿楷书",
           content: "今天天气非常好 明天据说有雨 后天可能会有沙尘暴",
           time: "2022-06-07 06:38",
         },