feat: 图片更好的支持marks，text支持html， 增加 宁德简介

src/components/image.vue

@@ -1,8 +1,8 @@
 <template>
   <div v-if="!options.desc" @click="click" class="image mb-6 last:mb-0 mx-auto">
     <img :style="options.style" :src="options.image" />
-    <div class="image-marks" v-if="options.marks">
-      <span style="margin: 0 auto" v-html="options.marks"></span>
+    <div v-if="options.marks" class="mark flex justify-center items-center">
+      <span :style="options.marksStyle" v-html="options.marks"></span>
     </div>
   </div>
   <div v-else class="image mb-6 last:mb-0 mx-auto">
@@ -39,19 +39,19 @@ export default {
 }
 </script>
 <style lang="less">
-.image-marks {
-  opacity: 1;
-  filter: alpha(opacity=100);
-  width: 60%;
-  text-align: center;
-  height: 100%;
-  color: #fff;
-  font-family: 'Times New Roman', Times, serif;
-  font-size: 20px;
-  font-weight: 600;
-  letter-spacing: 2px;
-  position: absolute;
-  top: 35px;
-  left: 20%;
+.image {
+  position: relative;
+  .mark {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    color: #fff;
+    font-family: 'Times New Roman', Times, serif;
+    font-size: 20px;
+    font-weight: 600;
+    letter-spacing: 2px;
+  }
 }
 </style>

src/components/text.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="text-center mb-4 last:mb-0" :style="styles" @click="click">{{ options.text }}</div>
+  <div class="text-center mb-4 last:mb-0" :style="styles" @click="click">
+    <div v-if="options.html" v-html="options.html"></div>
+    <template v-else>{{ options.text }}</template>
+  </div>
 </template>
 <script>
 import Base from './base';

src/tailwind.css

@@ -476,10 +476,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   position: relative;
 }
 
-.m-auto {
-  margin: auto;
-}
-
 .mx-auto {
   margin-left: auto;
   margin-right: auto;
@@ -497,14 +493,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   margin-bottom: 1rem;
 }
 
-.mt-1 {
-  margin-top: 0.25rem;
-}
-
-.-mt-16 {
-  margin-top: -4rem;
-}
-
 .-mt-48 {
   margin-top: -12rem;
 }
@@ -525,58 +513,22 @@ Ensure the default browser behavior of the `hidden` attribute.
   height: 24rem;
 }
 
-.h-64 {
-  height: 16rem;
-}
-
-.h-60 {
-  height: 15rem;
-}
-
 .h-full {
   height: 100%;
 }
 
-.h-48 {
-  height: 12rem;
-}
-
 .h-52 {
   height: 13rem;
 }
 
-.h-56 {
-  height: 14rem;
-}
-
 .w-full {
   width: 100%;
 }
 
-.w-96 {
-  width: 24rem;
-}
-
-.w-64 {
-  width: 16rem;
-}
-
-.w-60 {
-  width: 15rem;
-}
-
-.w-48 {
-  width: 12rem;
-}
-
 .w-52 {
   width: 13rem;
 }
 
-.w-56 {
-  width: 14rem;
-}
-
 .flex-auto {
   flex: 1 1 auto;
 }
@@ -645,14 +597,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   border-radius: 0.5rem;
 }
 
-.rounded-sm {
-  border-radius: 0.125rem;
-}
-
-.rounded-xl {
-  border-radius: 0.75rem;
-}
-
 .border {
   border-width: 1px;
 }
@@ -690,6 +634,10 @@ Ensure the default browser behavior of the `hidden` attribute.
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.filter {
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
 .last\:mb-0:last-child {
   margin-bottom: 0px;
 }