字体

src/views/CalligraphyMaster/cread.vue

@@ -635,28 +635,34 @@ export default {
         usageStatistics: false,
       });
       $(".tie-mask-apply").css("display", "none");
-      let fontArray = [
-        {
-            value: 'FZLTH',
-            img: require('../../assets/teacherdev/img1.png')
-        },
-        {
-            value: 'FZJCGFKTK',
-            img: require('../../assets/teacherdev/img2.png')
-        },
-        {
-            value: 'sourceR',
-            img: require('../../assets/teacherdev/img1.png')
-        },
-        {
-            value: 'robot',
-            img: require('../../assets/teacherdev/img2.png')
-        },
-        {
-            value: 'iconFont',
-            img: require('../../assets/teacherdev/img1.png')
-        },
-      ]
+      let fontArray = null
+      if(sessionStorage.getItem("fontSelectList")){
+        fontArray = JSON.parse(sessionStorage.getItem("fontSelectList"))
+      }else{
+        fontArray = [
+            {
+                value: 'FZJCGFKTK',
+                img: require('../../assets/teacherdev/img1.png')
+            },
+            {
+                value: 'FZLTH',
+                img: require('../../assets/teacherdev/img2.png')
+            },
+            {
+                value: 'sourceR',
+                img: require('../../assets/teacherdev/img1.png')
+            },
+            {
+                value: 'robot',
+                img: require('../../assets/teacherdev/img2.png')
+            },
+            {
+                value: 'iconFont',
+                img: require('../../assets/teacherdev/img1.png')
+            },
+        ]
+      }
+      
     //   let fontArray = [
     //     "FZLTH",
     //     "Arial",
@@ -692,12 +698,12 @@ export default {
         fontSelectHTML +=
           '<li value="' +
           fontArray[i].value +
-          '" class="'+classname+'"><img src="'+fontArray[i].img+'" /></li>';
+          '" class="'+classname+'"><img src="'+fontArray[i].img+'" /><p>'+fontArray[i].value+'</p></li>';
       }
       fontSelectHTML += "</ul></div>";
 
       let textMenuAlign = document.querySelector(
-        ".tui-image-editor-menu-text .tie-text-effect-button"
+        ".tui-image-editor-menu-text .tui-image-editor-submenu-item"
       );
       textMenuAlign.insertAdjacentHTML("afterbegin", fontSelectHTML);
       let _this = this
@@ -706,6 +712,11 @@ export default {
         $(".font-select-box input").val($(this).attr("value"))
         $(".font-selector").css("display","none")
         $(this).addClass('active').siblings().removeClass('active')
+        let index = $(this).index()
+        let arr = JSON.parse(JSON.stringify(fontArray[index]))
+        fontArray.splice(index, 1)
+        fontArray.unshift(arr)
+        sessionStorage.setItem("fontSelectList", JSON.stringify(fontArray));
       });
       $(".font-select-box input").click(function(){
         if($(".font-selector").css("display")=='flex'){
@@ -1158,7 +1169,7 @@ export default {
         border: none;
         outline: none;
         display: block;
-        margin-bottom: 2px;
+        margin-bottom: 5px;
         border-radius: 2px;
         padding: 0 3px;
     }
@@ -1182,6 +1193,12 @@ export default {
         img{
             width: 100%;
         }
+        p{
+            color: #0f0f0f;
+            font-size: 14px;
+            text-align: left;
+            line-height: 20px;
+        }
         &:hover{
             background: #cfcfcf;
         }