词汇卡片

package-lock.json

@@ -4895,6 +4895,12 @@
         "domelementtype": "1"
       }
     },
+    "domready": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmmirror.com/domready/-/domready-1.0.8.tgz",
+      "integrity": "sha512-uIzsOJUNk+AdGE9a6VDeessoMCzF8RrZvJCX/W8QtyfgdR6Uofn/MvRonih3OtCO79b2VDzDOymuiABrQ4z3XA==",
+      "dev": true
+    },
     "domutils": {
       "version": "1.7.0",
       "resolved": "https://registry.npm.taobao.org/domutils/download/domutils-1.7.0.tgz?cache=0&sync_timestamp=1618566243068&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fdomutils%2Fdownload%2Fdomutils-1.7.0.tgz",
@@ -6958,6 +6964,12 @@
       "integrity": "sha1-dQ49tYYgh7RzfrrIIH/9HvJ7Jfw=",
       "dev": true
     },
+    "image-size": {
+      "version": "0.5.5",
+      "resolved": "https://registry.npmmirror.com/image-size/-/image-size-0.5.5.tgz",
+      "integrity": "sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==",
+      "dev": true
+    },
     "import-cwd": {
       "version": "2.1.0",
       "resolved": "https://registry.npm.taobao.org/import-cwd/download/import-cwd-2.1.0.tgz",
@@ -8245,6 +8257,23 @@
       "integrity": "sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E=",
       "dev": true
     },
+    "merge-options": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/merge-options/-/merge-options-1.0.1.tgz",
+      "integrity": "sha512-iuPV41VWKWBIOpBsjoxjDZw8/GbSfZ2mk7N1453bwMrfzdrIk7EzBd+8UVR6rkw67th7xnk9Dytl3J+lHPdxvg==",
+      "dev": true,
+      "requires": {
+        "is-plain-obj": "^1.1"
+      },
+      "dependencies": {
+        "is-plain-obj": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmmirror.com/is-plain-obj/-/is-plain-obj-1.1.0.tgz",
+          "integrity": "sha512-yvkRyxmFKEOQ4pNXCmJG5AEQNlXJS5LaONXo5/cLdTZdWvsZ1ioJEonLGAosKlMWE8lwUy/bJzMjcw8az73+Fg==",
+          "dev": true
+        }
+      }
+    },
     "merge-source-map": {
       "version": "1.1.0",
       "resolved": "https://registry.npm.taobao.org/merge-source-map/download/merge-source-map-1.1.0.tgz",
@@ -8486,6 +8515,12 @@
         "through2": "^2.0.0"
       }
     },
+    "mitt": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmmirror.com/mitt/-/mitt-1.1.2.tgz",
+      "integrity": "sha512-3btxP0O9iGADGWAkteQ8mzDtEspZqu4I32y4GZYCV5BrwtzdcRpF4dQgNdJadCrbBx7Lu6Sq9AVrerMHR0Hkmw==",
+      "dev": true
+    },
     "mixin-deep": {
       "version": "1.3.2",
       "resolved": "https://registry.npm.taobao.org/mixin-deep/download/mixin-deep-1.3.2.tgz",
@@ -10142,6 +10177,12 @@
         }
       }
     },
+    "postcss-prefix-selector": {
+      "version": "1.16.0",
+      "resolved": "https://registry.npmmirror.com/postcss-prefix-selector/-/postcss-prefix-selector-1.16.0.tgz",
+      "integrity": "sha512-rdVMIi7Q4B0XbXqNUEI+Z4E+pueiu/CS5E6vRCQommzdQ/sgsS4dK42U7GX8oJR+TJOtT+Qv3GkNo6iijUMp3Q==",
+      "dev": true
+    },
     "postcss-reduce-initial": {
       "version": "4.0.3",
       "resolved": "https://registry.npm.taobao.org/postcss-reduce-initial/download/postcss-reduce-initial-4.0.3.tgz",
@@ -10220,6 +10261,64 @@
       "integrity": "sha1-RD9qIM7WSBor2k+oUypuVdeJoss=",
       "dev": true
     },
+    "posthtml": {
+      "version": "0.9.2",
+      "resolved": "https://registry.npmmirror.com/posthtml/-/posthtml-0.9.2.tgz",
+      "integrity": "sha512-spBB5sgC4cv2YcW03f/IAUN1pgDJWNWD8FzkyY4mArLUMJW+KlQhlmUdKAHQuPfb00Jl5xIfImeOsf6YL8QK7Q==",
+      "dev": true,
+      "requires": {
+        "posthtml-parser": "^0.2.0",
+        "posthtml-render": "^1.0.5"
+      }
+    },
+    "posthtml-parser": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmmirror.com/posthtml-parser/-/posthtml-parser-0.2.1.tgz",
+      "integrity": "sha512-nPC53YMqJnc/+1x4fRYFfm81KV2V+G9NZY+hTohpYg64Ay7NemWWcV4UWuy/SgMupqQ3kJ88M/iRfZmSnxT+pw==",
+      "dev": true,
+      "requires": {
+        "htmlparser2": "^3.8.3",
+        "isobject": "^2.1.0"
+      },
+      "dependencies": {
+        "isobject": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmmirror.com/isobject/-/isobject-2.1.0.tgz",
+          "integrity": "sha512-+OUdGJlgjOBZDfxnDjYYG6zp487z0JGNQq3cYQYg5f5hKR+syHMsaztzGeml/4kGG55CSpKSpWTY+jYGgsHLgA==",
+          "dev": true,
+          "requires": {
+            "isarray": "1.0.0"
+          }
+        }
+      }
+    },
+    "posthtml-rename-id": {
+      "version": "1.0.12",
+      "resolved": "https://registry.npmmirror.com/posthtml-rename-id/-/posthtml-rename-id-1.0.12.tgz",
+      "integrity": "sha512-UKXf9OF/no8WZo9edRzvuMenb6AD5hDLzIepJW+a4oJT+T/Lx7vfMYWT4aWlGNQh0WMhnUx1ipN9OkZ9q+ddEw==",
+      "dev": true,
+      "requires": {
+        "escape-string-regexp": "1.0.5"
+      }
+    },
+    "posthtml-render": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmmirror.com/posthtml-render/-/posthtml-render-1.4.0.tgz",
+      "integrity": "sha512-W1779iVHGfq0Fvh2PROhCe2QhB8mEErgqzo1wpIt36tCgChafP+hbXIhLDOM8ePJrZcFs0vkNEtdibEWVqChqw==",
+      "dev": true
+    },
+    "posthtml-svg-mode": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/posthtml-svg-mode/-/posthtml-svg-mode-1.0.3.tgz",
+      "integrity": "sha512-hEqw9NHZ9YgJ2/0G7CECOeuLQKZi8HjWLkBaSVtOWjygQ9ZD8P7tqeowYs7WrFdKsWEKG7o+IlsPY8jrr0CJpQ==",
+      "dev": true,
+      "requires": {
+        "merge-options": "1.0.1",
+        "posthtml": "^0.9.2",
+        "posthtml-parser": "^0.2.1",
+        "posthtml-render": "^1.0.6"
+      }
+    },
     "prelude-ls": {
       "version": "1.1.2",
       "resolved": "https://registry.npm.taobao.org/prelude-ls/download/prelude-ls-1.1.2.tgz",
@@ -12019,6 +12118,245 @@
         "has-flag": "^3.0.0"
       }
     },
+    "svg-baker": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmmirror.com/svg-baker/-/svg-baker-1.7.0.tgz",
+      "integrity": "sha512-nibslMbkXOIkqKVrfcncwha45f97fGuAOn1G99YwnwTj8kF9YiM6XexPcUso97NxOm6GsP0SIvYVIosBis1xLg==",
+      "dev": true,
+      "requires": {
+        "bluebird": "^3.5.0",
+        "clone": "^2.1.1",
+        "he": "^1.1.1",
+        "image-size": "^0.5.1",
+        "loader-utils": "^1.1.0",
+        "merge-options": "1.0.1",
+        "micromatch": "3.1.0",
+        "postcss": "^5.2.17",
+        "postcss-prefix-selector": "^1.6.0",
+        "posthtml-rename-id": "^1.0",
+        "posthtml-svg-mode": "^1.0.3",
+        "query-string": "^4.3.2",
+        "traverse": "^0.6.6"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmmirror.com/ansi-regex/-/ansi-regex-2.1.1.tgz",
+          "integrity": "sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA==",
+          "dev": true
+        },
+        "ansi-styles": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-2.2.1.tgz",
+          "integrity": "sha512-kmCevFghRiWM7HB5zTPULl4r9bVFSWjz62MhqizDGUrq2NWuNMQyuv4tHHoKJHs69M/MF64lEcHdYIocrdWQYA==",
+          "dev": true
+        },
+        "chalk": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npmmirror.com/chalk/-/chalk-1.1.3.tgz",
+          "integrity": "sha512-U3lRVLMSlsCfjqYPbLyVv11M9CPW4I728d6TCKMAOJueEeB9/8o+eSsMnxPJD+Q+K909sdESg7C+tIkoH6on1A==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^2.2.1",
+            "escape-string-regexp": "^1.0.2",
+            "has-ansi": "^2.0.0",
+            "strip-ansi": "^3.0.0",
+            "supports-color": "^2.0.0"
+          },
+          "dependencies": {
+            "supports-color": {
+              "version": "2.0.0",
+              "resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-2.0.0.tgz",
+              "integrity": "sha512-KKNVtd6pCYgPIKU4cp2733HWYCpplQhddZLBUryaAHou723x+FRzQ5Df824Fj+IyyuiQTRoub4SnIFfIcrp70g==",
+              "dev": true
+            }
+          }
+        },
+        "clone": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmmirror.com/clone/-/clone-2.1.2.tgz",
+          "integrity": "sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==",
+          "dev": true
+        },
+        "define-property": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmmirror.com/define-property/-/define-property-1.0.0.tgz",
+          "integrity": "sha512-cZTYKFWspt9jZsMscWo8sc/5lbPC9Q0N5nBLgb+Yd915iL3udB1uFgS3B8YCx66UVHq018DAVFoee7x+gxggeA==",
+          "dev": true,
+          "requires": {
+            "is-descriptor": "^1.0.0"
+          }
+        },
+        "extend-shallow": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmmirror.com/extend-shallow/-/extend-shallow-2.0.1.tgz",
+          "integrity": "sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==",
+          "dev": true,
+          "requires": {
+            "is-extendable": "^0.1.0"
+          }
+        },
+        "has-flag": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmmirror.com/has-flag/-/has-flag-1.0.0.tgz",
+          "integrity": "sha512-DyYHfIYwAJmjAjSSPKANxI8bFY9YtFrgkAfinBojQ8YJTOuOuav64tMUJv584SES4xl74PmuaevIyaLESHdTAA==",
+          "dev": true
+        },
+        "is-accessor-descriptor": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmmirror.com/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz",
+          "integrity": "sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==",
+          "dev": true,
+          "requires": {
+            "kind-of": "^6.0.0"
+          },
+          "dependencies": {
+            "kind-of": {
+              "version": "6.0.3",
+              "resolved": "https://registry.npmmirror.com/kind-of/-/kind-of-6.0.3.tgz",
+              "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
+              "dev": true
+            }
+          }
+        },
+        "is-data-descriptor": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmmirror.com/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz",
+          "integrity": "sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==",
+          "dev": true,
+          "requires": {
+            "kind-of": "^6.0.0"
+          },
+          "dependencies": {
+            "kind-of": {
+              "version": "6.0.3",
+              "resolved": "https://registry.npmmirror.com/kind-of/-/kind-of-6.0.3.tgz",
+              "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
+              "dev": true
+            }
+          }
+        },
+        "is-descriptor": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmmirror.com/is-descriptor/-/is-descriptor-1.0.2.tgz",
+          "integrity": "sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==",
+          "dev": true,
+          "requires": {
+            "is-accessor-descriptor": "^1.0.0",
+            "is-data-descriptor": "^1.0.0",
+            "kind-of": "^6.0.2"
+          },
+          "dependencies": {
+            "kind-of": {
+              "version": "6.0.3",
+              "resolved": "https://registry.npmmirror.com/kind-of/-/kind-of-6.0.3.tgz",
+              "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
+              "dev": true
+            }
+          }
+        },
+        "kind-of": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmmirror.com/kind-of/-/kind-of-5.1.0.tgz",
+          "integrity": "sha512-NGEErnH6F2vUuXDh+OlbcKW7/wOcfdRHaZ7VWtqCztfHri/++YKmP51OdWeGPuqCOba6kk2OTe5d02VmTB80Pw==",
+          "dev": true
+        },
+        "micromatch": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmmirror.com/micromatch/-/micromatch-3.1.0.tgz",
+          "integrity": "sha512-3StSelAE+hnRvMs8IdVW7Uhk8CVed5tp+kLLGlBP6WiRAXS21GPGu/Nat4WNPXj2Eoc24B02SaeoyozPMfj0/g==",
+          "dev": true,
+          "requires": {
+            "arr-diff": "^4.0.0",
+            "array-unique": "^0.3.2",
+            "braces": "^2.2.2",
+            "define-property": "^1.0.0",
+            "extend-shallow": "^2.0.1",
+            "extglob": "^2.0.2",
+            "fragment-cache": "^0.2.1",
+            "kind-of": "^5.0.2",
+            "nanomatch": "^1.2.1",
+            "object.pick": "^1.3.0",
+            "regex-not": "^1.0.0",
+            "snapdragon": "^0.8.1",
+            "to-regex": "^3.0.1"
+          }
+        },
+        "postcss": {
+          "version": "5.2.18",
+          "resolved": "https://registry.npmmirror.com/postcss/-/postcss-5.2.18.tgz",
+          "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
+          "dev": true,
+          "requires": {
+            "chalk": "^1.1.3",
+            "js-base64": "^2.1.9",
+            "source-map": "^0.5.6",
+            "supports-color": "^3.2.3"
+          }
+        },
+        "strip-ansi": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-3.0.1.tgz",
+          "integrity": "sha512-VhumSSbBqDTP8p2ZLKj40UjBCV4+v8bUSEpUb4KjRgWk9pbqGF4REFj6KEagidb2f/M6AzC0EmFyDNGaw9OCzg==",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^2.0.0"
+          }
+        },
+        "supports-color": {
+          "version": "3.2.3",
+          "resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-3.2.3.tgz",
+          "integrity": "sha512-Jds2VIYDrlp5ui7t8abHN2bjAu4LV/q4N2KivFPpGH0lrka0BMq/33AmECUXlKPcHigkNaqfXRENFju+rlcy+A==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^1.0.0"
+          }
+        }
+      }
+    },
+    "svg-baker-runtime": {
+      "version": "1.4.7",
+      "resolved": "https://registry.npmmirror.com/svg-baker-runtime/-/svg-baker-runtime-1.4.7.tgz",
+      "integrity": "sha512-Zorfwwj5+lWjk/oxwSMsRdS2sPQQdTmmsvaSpzU+i9ZWi3zugHLt6VckWfnswphQP0LmOel3nggpF5nETbt6xw==",
+      "dev": true,
+      "requires": {
+        "deepmerge": "1.3.2",
+        "mitt": "1.1.2",
+        "svg-baker": "^1.7.0"
+      },
+      "dependencies": {
+        "deepmerge": {
+          "version": "1.3.2",
+          "resolved": "https://registry.npmmirror.com/deepmerge/-/deepmerge-1.3.2.tgz",
+          "integrity": "sha512-qjMjTrk+RKv/sp4RPDpV5CnKhxjFI9p+GkLBOls5A8EEElldYWCWA9zceAkmfd0xIo2aU1nxiaLFoiya2sb6Cg==",
+          "dev": true
+        }
+      }
+    },
+    "svg-sprite-loader": {
+      "version": "6.0.11",
+      "resolved": "https://registry.npmmirror.com/svg-sprite-loader/-/svg-sprite-loader-6.0.11.tgz",
+      "integrity": "sha512-TedsTf8wsHH6HgdwKjUveDZRC6q5gPloYV8A8/zZaRWP929J7x6TzQ6MvZFl+YYDJuJ0Akyuu/vNVJ+fbPuYXg==",
+      "dev": true,
+      "requires": {
+        "bluebird": "^3.5.0",
+        "deepmerge": "1.3.2",
+        "domready": "1.0.8",
+        "escape-string-regexp": "1.0.5",
+        "loader-utils": "^1.1.0",
+        "svg-baker": "^1.5.0",
+        "svg-baker-runtime": "^1.4.7",
+        "url-slug": "2.0.0"
+      },
+      "dependencies": {
+        "deepmerge": {
+          "version": "1.3.2",
+          "resolved": "https://registry.npmmirror.com/deepmerge/-/deepmerge-1.3.2.tgz",
+          "integrity": "sha512-qjMjTrk+RKv/sp4RPDpV5CnKhxjFI9p+GkLBOls5A8EEElldYWCWA9zceAkmfd0xIo2aU1nxiaLFoiya2sb6Cg==",
+          "dev": true
+        }
+      }
+    },
     "svg-tags": {
       "version": "1.0.0",
       "resolved": "https://registry.npm.taobao.org/svg-tags/download/svg-tags-1.0.0.tgz",
@@ -12405,6 +12743,12 @@
         "punycode": "^2.1.1"
       }
     },
+    "traverse": {
+      "version": "0.6.7",
+      "resolved": "https://registry.npmmirror.com/traverse/-/traverse-0.6.7.tgz",
+      "integrity": "sha512-/y956gpUo9ZNCb99YjxG7OaslxZWHfCHAUUfshwqOXmxUIvqLjVO581BT+gM59+QV9tFe6/CGG53tsA1Y7RSdg==",
+      "dev": true
+    },
     "trim-newlines": {
       "version": "1.0.0",
       "resolved": "https://registry.nlark.com/trim-newlines/download/trim-newlines-1.0.0.tgz",
@@ -12550,6 +12894,12 @@
       "integrity": "sha1-3Vepn2IHvt/0Yoq++5TFDblByPQ=",
       "dev": true
     },
+    "unidecode": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmmirror.com/unidecode/-/unidecode-0.1.8.tgz",
+      "integrity": "sha512-SdoZNxCWpN2tXTCrGkPF/0rL2HEq+i2gwRG1ReBvx8/0yTzC3enHfugOf8A9JBShVwwrRIkLX0YcDUGbzjbVCA==",
+      "dev": true
+    },
     "union-value": {
       "version": "1.0.1",
       "resolved": "https://registry.npm.taobao.org/union-value/download/union-value-1.0.1.tgz",
@@ -12715,6 +13065,15 @@
         "requires-port": "^1.0.0"
       }
     },
+    "url-slug": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/url-slug/-/url-slug-2.0.0.tgz",
+      "integrity": "sha512-aiNmSsVgrjCiJ2+KWPferjT46YFKoE8i0YX04BlMVDue022Xwhg/zYlnZ6V9/mP3p8Wj7LEp0myiTkC/p6sxew==",
+      "dev": true,
+      "requires": {
+        "unidecode": "0.1.8"
+      }
+    },
     "use": {
       "version": "3.1.1",
       "resolved": "https://registry.npm.taobao.org/use/download/use-3.1.1.tgz",

package.json

@@ -47,8 +47,9 @@
         "compression-webpack-plugin": "^6.1.1",
         "eslint": "^6.7.2",
         "eslint-plugin-vue": "^6.2.2",
-        "vue-template-compiler": "^2.6.11",
-        "svgo": "1.2.2"
+        "svg-sprite-loader": "^6.0.11",
+        "svgo": "1.2.2",
+        "vue-template-compiler": "^2.6.11"
     },
     "eslintConfig": {
         "root": true,

src/assets/Scss/_handle.scss

@@ -1,48 +1,45 @@
-@import "./themes.scss";
-
-
 @mixin themeify {
-  @each $theme-name, $theme-map in $themes {
-      //!global 把局部变量强升为全局变量
-      $theme-map: $theme-map !global;
-      //判断html的data-theme的属性值  #{}是sass的插值表达式
-      //& sass嵌套里的父容器标识   @content是混合器插槽，像vue的slot
-      [data-theme="#{$theme-name}"] & {
-          @content;
-      }
-  }
+    @each $theme-name,
+    $theme-map in $themes {
+        //!global 把局部变量强升为全局变量
+        $theme-map: $theme-map !global;
+        //判断html的data-theme的属性值  #{}是sass的插值表达式
+        //& sass嵌套里的父容器标识   @content是混合器插槽，像vue的slot
+        [data-theme="#{$theme-name}"] & {
+            @content;
+        }
+    }
 }
 
-
 //声明一个根据Key获取颜色的function
 @function themed($key) {
-  @return map-get($theme-map, $key);
+    @return map-get($theme-map, $key);
 }
 
 //字体颜色
 @mixin font_color($color) {
-  @include themeify {
-    color: themed($color)!important;
-  }
+    @include themeify {
+        color: themed($color)!important;
+    }
 }
 
 //背景颜色
 @mixin background_color($color) {
-  @include themeify {
-    background-color: themed($color)!important;
-  }
+    @include themeify {
+        background-color: themed($color)!important;
+    }
 }
 
 //border颜色
 @mixin border_color($color) {
-  @include themeify {
-    border-color: themed($color)!important;
-  }
+    @include themeify {
+        border-color: themed($color)!important;
+    }
 }
 
 //stroke颜色
 @mixin stroke_color($color) {
-  @include themeify {
-    stroke: themed($color)!important;
-  }
-}
+    @include themeify {
+        stroke: themed($color)!important;
+    }
+}

src/components/SvgIcon/index.vue

@@ -5,7 +5,13 @@
     class="svg-external-icon svg-icon"
     v-on="$listeners"
   />
-  <svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners">
+  <svg
+    v-else
+    :class="svgClass"
+    aria-hidden="true"
+    v-on="$listeners"
+    :style="style"
+  >
     <use :xlink:href="iconName" />
   </svg>
 </template>
@@ -25,6 +31,14 @@ export default {
       type: String,
       default: "",
     },
+    color: {
+      type: String,
+      default: "",
+    },
+    stroke: {
+      type: String,
+      default: "",
+    },
   },
   computed: {
     isExternal() {
@@ -40,6 +54,9 @@ export default {
         return "svg-icon";
       }
     },
+    style() {
+      return { "--color": this.color, "--stroke": this.stroke };
+    },
     styleExternalIcon() {
       return {
         mask: `url(${this.iconClass}) no-repeat 50% 50%`,
@@ -58,6 +75,8 @@ export default {
   fill: currentColor;
   stroke: currentStroke;
   overflow: hidden;
+  color: var(--color);
+  stroke: var(--stroke);
 }
 
 .svg-external-icon {

src/components/corpus/Strockplay.vue

@@ -1,20 +1,33 @@
 <!--  -->
 <template>
   <div class="strockplayInner" :class="className">
-    <div @click="playHanzi" class="strock-play-box" v-if="playStorkes">
+    <div @click="playHanzi" class="strock-play-box" :style="{width:palyWidth,height:palyWidth}" v-if="playStorkes">
       <svg-icon
         icon-class="playStorkes"
         className="playStorkes-btn"
         v-if="playStorkes"
         @click="playHanzi"
-        :style="{fill:strokePlayColor}"
+        :style="{color:strokePlayColor,width:palyWidth,height:palyWidth}"
       />
     </div>
     <div
       :class="wordNum == '2' ? 'morewords' : ''"
       :id="targetDiv"
       class="character-target-div"
-    ></div>
+    >
+        <svg-icon
+            icon-class="tian"
+            className="tian-bg"
+            v-if="BoxbgType==0"
+            :style="{color:'#DEDEDE'}"
+        />
+        <svg-icon
+            icon-class="mi"
+            className="tian-bg"
+            v-if="BoxbgType==1"
+            :style="{color:'#DEDEDE'}"
+        />
+    </div>
   </div>
 </template>
 
@@ -30,7 +43,9 @@ export default {
     "strokeColor",
     "wordNum",
     "className",
-    "strokePlayColor"
+    "strokePlayColor",
+    "palyWidth",
+    "BoxbgType"
   ],
   data() {
     return {
@@ -112,7 +127,6 @@ export default {
     top: 0;
     right: 0;
     z-index: 9999;
-    background: #0f0;
   }
 }
 .character-target-div {
@@ -125,18 +139,29 @@ export default {
   display: flex;
   justify-content: center;
   align-items: center;
-  z-index: 99999;
+  z-index: 999;
+  position: relative;
   &.morewords {
     // background: url("../../../../assets/NPC/chinaTianRed.png") center no-repeat;
     background-size: 100% 100%;
   }
 }
+.tian-bg {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: -1;
+}
 .animate-butto {
   width: 240px;
   height: 160px;
   font-size: 28px;
 }
 .playStorkes-btn{
-    
+    position: absolute;
+    top: 0;
+    right: 0;
 }
 </style>

src/components/corpus/Strockplayredline.vue

@@ -1,7 +1,7 @@
 <!--  -->
 <template>
   <div
-    :class="[isHighlight ? 'strockplayRedInner_xiao' : 'strockplayRedInner']"
+    :class="['strockplayRedInner']"
   >
     <!-- <div
       @click="playHanzi"
@@ -18,28 +18,23 @@
       v-if="playStorkes"
     ></div> -->
     <template v-if="Book_text != '〇'">
-      <!-- <svg-icon
-        icon-class="play-stroke-icon"
-        :className="tianColor ? 'strock-play-red' : 'strock-play-box'"
-        v-if="playStorkes"
-        @click="playHanzi"
-      /> -->
-      <img
-        v-if="playStorkes"
-        class="strock-play-red"
-        src="../../assets/teacherdev/strock-play-red-click-big.png"
-        alt=""
-        @click="playHanzi"
-      />
+      <div :id="targetDivGray" class="character-target-div character-target-div-gray"></div>
       <div :id="targetDiv" class="character-target-div"></div>
     </template>
     <template v-else>
       <span class="book-text">{{ Book_text }}</span>
     </template>
-    <img
-      class="tian-bg"
-      src="../../assets/teacherdev/chinaTianRed.png"
-      alt=""
+    <svg-icon
+        icon-class="tian"
+        className="tian-bg"
+        v-if="BoxbgType==0"
+        :style="{color:'#DEDEDE'}"
+    />
+    <svg-icon
+        icon-class="mi"
+        className="tian-bg"
+        v-if="BoxbgType==1"
+        :style="{color:'#DEDEDE'}"
     />
     <!-- <svg-icon
       icon-class="tian"
@@ -59,13 +54,11 @@ export default {
     "Book_text",
     "playStorkes",
     "strokeColor",
-    "wordNum",
-    "themeColor",
-    "tianColor",
+    "strokeColorgray",
     "curItem",
-    "type",
-    "judgeAnswer",
-    "isHighlight",
+    "strokeNumber",
+    "targetDivGray",
+    "BoxbgType"
   ],
   data() {
     return {
@@ -100,28 +93,46 @@ export default {
         {
           padding: 5,
           showOutline: true,
-          strokeColor: _this.isHighlight ? "#AAAAAA" : "#000000",
-          radicalColor: _this.isHighlight ? "#000000" : "#AAAAAA",
+          strokeColor: _this.strokeColor,
           charDataLoader: function (char, onComplete) {
-            if (_this.isHighlight) {
-              let charData = _this.handleData();
-              onComplete(charData);
-            } else {
-              let charData = JSON.parse(JSON.stringify(_this.curItem.hz_json));
-              charData.radStrokes = [];
-              onComplete(charData);
-              return;
-            }
+            let charData = _this.handleData(_this.strokeNumber);
+            onComplete(charData);
+          },
+        }
+      );
+      _this.writer = HanziWriter.default.create(
+        _this.targetDivGray,
+        _this.Book_text,
+        {
+          padding: 5,
+          showOutline: true,
+          strokeColor: _this.strokeColorgray,
+          charDataLoader: function (char, onComplete) {
+            onComplete(JSON.parse(JSON.stringify(_this.curItem)));
           },
         }
       );
     },
-    handleData() {
-      if (this.curItem.hz_json) {
-        let charData = JSON.parse(JSON.stringify(this.curItem.hz_json));
-        charData.radStrokes = [];
-        for (let i = 0; i < this.judgeAnswer; i++) {
-          charData.radStrokes.push(i);
+    handleData(stroke_num) {
+      if (this.curItem) {
+        let charData = JSON.parse(JSON.stringify(this.curItem));
+        if (stroke_num) {
+            let stroke_arr = [];
+            for(let i = 0; i<stroke_num;i++){
+                stroke_arr.push(i+1)
+            }
+            stroke_arr = stroke_arr.map((item) => (item = Number(item) - 1));
+            let strokes = [],
+                medians = [];
+            for (let i = 0; i < stroke_arr.length; i++) {
+                let stroke_num = stroke_arr[i];
+                strokes.push(charData.strokes[stroke_num]);
+                medians.push(charData.medians[stroke_num]);
+            }
+            charData.strokes = strokes;
+            charData.medians = medians;
+        } else if (charData) {
+          charData.radStrokes = [];
         }
         return charData;
       }
@@ -156,54 +167,20 @@ export default {
 .strockplayRedInner {
   position: relative;
 
-  width: 128px; //444px
-  height: 128px; //480px
-}
-.strockplayRedInner_xiao {
-  position: relative;
-  width: 64px; //444px
-  height: 64px; //480px
+  width: 62px; //444px
+  height: 62px; //480px
 }
 
+
 .character-target-div {
   width: 100%;
   height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
   z-index: 99999;
-  font-family: "FZJCGFKTK";
-  border: 2px solid #de4444;
-  border-radius: 8px;
-  box-sizing: border-box;
-}
-.strock-play-box {
   position: absolute;
-  right: -2px;
-  top: -2px;
-  z-index: 998;
-  width: 22px;
-  height: 22px;
-  // color: #346CDA;
-
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
 }
-.strock-play-red {
-  position: absolute;
-  right: 0;
-  top: 0;
-  z-index: 999;
-  width: 22px;
-  height: 22px;
-  color: #d47064;
-
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
+.character-target-div-gray{
+    top: 0;
+    left: 0;
 }
 .tian-bg {
   width: 100%;
@@ -211,15 +188,6 @@ export default {
   position: absolute;
   left: 0;
   top: 0;
-  stroke: rgba(157, 202, 255, 0.2);
-}
-.tian-bg-red {
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  left: 0;
-  top: 0;
-  stroke: rgba(212, 112, 100, 0.2);
 }
 .animate-butto {
   width: 240px;

src/components/corpus/Strockred.vue

@@ -0,0 +1,164 @@
+<!--  -->
+<template>
+  <div class="strockredBox">
+    <div class="strockred">
+      <div @click="resetHanzi" class="strock-play-box" v-if="1 == 2">
+        <!-- <img src="../../assets/common/strock-play.png" class="strock-play" /> -->
+      </div>
+      <div
+        :class="wordNum == '2' ? 'character-target-div_220' : ''"
+        :id="targetDiv"
+        class="character-target-div"
+      >
+        <svg-icon
+            icon-class="tian"
+            className="tian-bg"
+            v-if="BoxbgType==0"
+            :style="{color:'#DEDEDE'}"
+        />
+        <svg-icon
+            icon-class="mi"
+            className="tian-bg"
+            v-if="BoxbgType==1"
+            :style="{color:'#DEDEDE'}"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getContentFile } from "@/api/api";
+const HanziWriter = require("hanzi-writer");
+export default {
+  name: "Strockred",
+  components: {},
+  props: [
+    "targetDiv",
+    "hanzicolor",
+    "Book_text",
+    "wordNum",
+    "tianColor",
+    "drawingColor",
+    "BoxbgType"
+  ],
+  data() {
+    return {
+      writer: null,
+      colorsList: ["#404040", "#f65d4d", "#19b068", "#52a1ea", "#ff8c49"],
+    };
+  },
+  computed: {},
+  watch: {
+    hanzicolor(newVal, oldVal) {
+      this.updateColor(newVal);
+    },
+    Book_text: {
+      handler: function (val, oldVal) {
+        if (val != oldVal) {
+          let _this = this;
+          _this.$nextTick(() => {
+            _this.initHanziwrite();
+          });
+        }
+      },
+      // 深度观察监听
+      deep: true,
+    },
+  },
+  //方法集合
+  methods: {
+    initHanziwrite() {
+      let _this = this;
+      let options = {
+        charDataLoader: function (char, onComplete) {
+          let MethodName = "hz_resource_manager-GetHZStrokesContent";
+          let data = {
+            hz: char,
+          };
+          getContentFile(MethodName, data).then((res) => {
+            onComplete(res);
+          });
+        },
+        padding: 5,
+        showCharacter: false,
+        outlineColor: _this.hanzicolor,
+        strokeColor: _this.drawingColor,
+        drawingWidth: 6,
+      };
+      _this.writer = HanziWriter.default.create(
+        _this.targetDiv,
+        _this.Book_text,
+        options
+      );
+      _this.writer.quiz();
+    },
+    resetHanzi() {
+      let _this = this;
+      _this.writer.quiz();
+    },
+    updateColor(color) {
+      let _this = this;
+      _this.writer.updateColor("strokeColor", color);
+      _this.writer.updateColor("drawingColor", color);
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+    let _this = this;
+    _this.$nextTick(() => {
+      _this.initHanziwrite();
+    });
+  },
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='scss' scoped>
+@import "../../assets/Scss/_handle.scss";
+
+//@import url(); 引入公共css类
+.strockredBox {
+  width: 100%;
+  height: 100%;
+}
+.tian-bg {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: -1;
+}
+.strockred {
+  position: relative;
+  margin: 0 auto;
+  width: 100%;
+  height: 100%;
+  //chinawrite220.png
+  .character-target-div {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    background: #fff;
+    // background-size: 100% 100%;
+    border-radius: 24px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 99999;
+  }
+  .animate-butto {
+    width: 240px;
+    height: 160px;
+    font-size: 28px;
+  }
+}
+</style>

src/icons/svg/tian.svg

@@ -0,0 +1,3 @@
+<svg width="62" height="62" viewBox="0 0 62 62" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 31H62M31 62V0" stroke="currentColor" stroke-dasharray="3 6"/>
+</svg>

src/views/wordcard/cread.vue

@@ -16,7 +16,7 @@
             <el-input
               type="textarea"
               :placeholder="
-                typeIndex == 0 ? '每行输出一个字' : '每行输入一个句子/词汇'
+                typeIndex == 0 ? '每行输入一个字' : '每行输入一个句子/词汇'
               "
               v-model="from.content"
               maxlength="100"
@@ -188,6 +188,10 @@ export default {
         this.$message.warning("请先输入内容");
         return;
       }
+      if(!(this.from.writeBoxNumber!=''&&this.from.miaoRedBoxNumber!=''&&this.from.lastNullrow!='')){
+        this.$message.warning("请先输入配置内容");
+        return;
+      }
       // 大 一行8个    中 一行10个  小 一行12个
       let data = {
         option: [],
@@ -209,25 +213,40 @@ export default {
         data.rowNumber = 8;
         data.pageNumber = 9;
         data.marginBottom = "15px";
+        data.playWidth = "11px"
       } else if (this.from.fontSize == "center") {
         data.width = "49px";
         data.fontSize = "38px";
         data.rowNumber = 10;
         data.pageNumber = 12;
         data.marginBottom = "8px";
+        data.playWidth = "9px"
       } else {
         data.width = "41px";
         data.fontSize = "31px";
         data.rowNumber = 12;
         data.pageNumber = 14;
         data.marginBottom = "7px";
+        data.playWidth = "8px"
       }
       let contentArr = this.from.content.split("\n");
       for (let i = 0; i < contentArr.length; i++) {
-        let obj = {
-          con: contentArr[i],
-        };
-        data.option.push(obj);
+        if(contentArr[i].length==1){
+            if(/^[\u4e00-\u9fa5]/.test(contentArr[i])){
+                let obj = {
+                    con: contentArr[i],
+                };
+                data.option.push(obj);
+            }
+            
+        }else{
+            for(let m=0;m<contentArr[i].length;m++){
+                let obj = {
+                    con: contentArr[i][m],
+                };
+                data.option.push(obj);
+            }
+        }
       }
       //   字模式 笔顺打开
       if (data.typeIndex == 0 && data.StorkesUnfold) {
@@ -267,6 +286,7 @@ export default {
                 });
                 item.hzDetail.hz_json.medians.forEach((items, indexs) => {
                   arr.push({
+                    con: item.con,
                     answer: indexs + 1,
                     hzDetail: JSON.parse(JSON.stringify(item.hzDetail.hz_json)),
                   });

src/views/wordcard/writeTable.vue

@@ -3,15 +3,64 @@
     <div class="writeTop">
         <div class="writeTop-row" v-for="(itemR,indexR) in data" :key="indexR" :style="{marginBottom:dataConfig.marginBottom}">
             <div class="writeTop-item" :class="[indexI!==0?'writeTop-item-noLeft':'']" v-for="(itemI,indexI) in itemR" :key="indexI" :style="{width:dataConfig.width,height:dataConfig.width,borderColor:dataConfig.borderColor}">
-                <template v-if="itemI.con">
+                <template v-if="itemI&&itemI.con&&!itemI.write&&!itemI.answer">
                     <Strockplay
                         className="adult-strockplay"
                         :strokePlayColor="dataConfig.borderColor"
                         :Book_text="itemI.con"
                         :playStorkes="dataConfig.playStorkes"
+                        :strokeColor="dataConfig.fontColor"
+                        :palyWidth="dataConfig.playWidth"
+                        :BoxbgType="dataConfig.BoxbgType"
                         :targetDiv="'writeTop-item-' + pageNumber + '-' + indexR + '-' + indexI"
                      />
                 </template>
+                <template v-else-if="itemI&&itemI.answer">
+                    <Strockplayredline
+                        :Book_text="itemI.con"
+                        :playStorkes="false"
+                        :strokeColorgray="dataConfig.miaoRedBgcolor"
+                        :strokeColor="dataConfig.fontColor"
+                        :strokeNumber="itemI.answer"
+                        :curItem="itemI.hzDetail"
+                        :BoxbgType="dataConfig.BoxbgType"
+                        :targetDiv="
+                            'write-item-miaohong-' +
+                            pageNumber + '-' + indexR + '-' + indexI
+                        "
+                        :targetDivGray="'write-item-miaohong-gray-'+
+                            pageNumber + '-' + indexR + '-' + indexI"
+                    />
+                </template>
+                <template v-else-if="itemI&&itemI.miaoRed">
+                    <Strockred
+                        className="adult-strockplay"
+                        :strokePlayColor="dataConfig.borderColor"
+                        :Book_text="itemI.con"
+                        :curItem="itemI.hzDetail"
+                        :hanzicolor="dataConfig.miaoRedBgcolor"
+                        :drawingColor="dataConfig.writeColor"
+                        :BoxbgType="dataConfig.BoxbgType"
+                        :targetDiv="'write-item-' + pageNumber + '-' + indexR + '-' + indexI"
+                     />
+                </template>
+                <template v-else-if="itemI&&itemI.write">
+                    {{123}}
+                </template>
+                <div v-else class="tian-div">
+                    <svg-icon
+                        icon-class="tian"
+                        className="tian"
+                        v-if="dataConfig.BoxbgType==0"
+                        :style="{color:'#DEDEDE'}"
+                    />
+                    <svg-icon
+                        icon-class="mi"
+                        className="tian"
+                        v-if="dataConfig.BoxbgType==1"
+                        :style="{color:'#DEDEDE'}"
+                    />
+                </div>
             </div>
         </div>
     </div>
@@ -27,12 +76,14 @@
 //这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
 import Strockplayredline from "../../components/corpus/Strockplayredline.vue";
 import Strockplay from "../../components/corpus/Strockplay.vue"
+import Strockred from "../../components/corpus/Strockred.vue"
 
 export default {
   //import引入的组件需要注入到对象中才能使用
   components: {
     Strockplayredline,
-    Strockplay
+    Strockplay,
+    Strockred
   },
   props: [
     "dataConfig",
@@ -131,5 +182,13 @@ export default {
             opacity: 0.2;
         }
     }
+    .tian-div{
+        width: 100%;
+        height: 100%;
+        .tian{
+            width: 100%;
+            height: 100%;
+        }
+    }
 }
 </style>