图片预览

src/App.vue

@@ -28,6 +28,7 @@ export default {
       })
     },
     handlePreview(url){
+      console.log("handlePreview", url)
       const { data } = this.$store.state.pages;
       const { id = 'main' } = this.$route.params;
       const page = data.pages[id];
@@ -60,7 +61,7 @@ export default {
 
 <style lang="less">
 #app {
-  font-family: STXinwei;
+  font-family: '楷体','楷体_GB2312';
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;

src/components/image.vue

@@ -1,6 +1,6 @@
 <template>
   <div v-if="!options.text" @click="click" class="image mb-6 last:mb-0 mx-auto">
-    <img :style="options.style" :src="options.image" />
+    <img :style="options.style" :src="options.image" @click="handleClick" />
     <div v-if="options.marks" class="mark flex justify-center items-center">
       <span :style="options.marksStyle" v-html="options.marks"></span>
     </div>
@@ -49,7 +49,7 @@ export default {
     right: 0;
     bottom: 0;
     color: #fff;
-    font-family: 'STXinwei', Times, serif;
+    font-family: '楷体','楷体_GB2312';
     font-size: 20px;
     font-weight: 600;
     letter-spacing: 2px;

src/tailwind.css

@@ -42,7 +42,8 @@ html {
   -o-tab-size: 4;
      tab-size: 4;
   /* 3 */
-  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-family: '楷体','楷体_GB2312';
+  /* font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; */
   /* 4 */
 }
 
@@ -183,7 +184,8 @@ input,
 optgroup,
 select,
 textarea {
-  font-family: inherit;
+  font-family: '楷体','楷体_GB2312'; 
+  /* font-family: inherit; */
   /* 1 */
   font-size: 100%;
   /* 1 */
@@ -685,4 +687,4 @@ Ensure the default browser behavior of the `hidden` attribute.
 
 .last\:mb-0:last-child {
   margin-bottom: 0px;
-}
+}