fix ads css

Author: xhofe

docs/.vuepress/components/HomePage.vue

@@ -43,9 +43,14 @@ const spStr = computed(() => {
   }
 
   .mingdao {
+    display: flex;
+    justify-content: center;
+
     a {
+      max-width: min(500px, 100%);
+
       img {
-        max-width: 500px;
+        width: 100%;
       }
     }
   }
@@ -56,21 +61,4 @@ const spStr = computed(() => {
   padding-bottom: 0 !important;
 }
 
-.wwads-cn,
-.wwads {
-  background-color: #f4f8fa;
-}
-
-.wwads-text {
-  color: #0e1011;
-}
-
-html[data-theme="dark"] .wwads-cn,
-html[data-theme="dark"] .wwads {
-  background-color: #272829 !important;
-}
-
-html[data-theme="dark"] .wwads-text {
-  color: #9e9e9e !important;
-}
 </style>

docs/.vuepress/components/NormalPage.vue

@@ -4,8 +4,10 @@
       <div class="theme-hope-content ads-container">
         <div class="mingdao" v-if="!enableSidebar">
           <a href="https://www.mingdao.com?s=utm_51=utm_source=liteflow&utm_medium=banner&utm_campaign=%E5%93%81%E7%89%8C%E6%8E%A8%E5%B9%BF&utm_content=IT%E8%B5%8B%E8%83%BD%E4%B8%9A%E5%8A%A1"
-            target="_blank"><img src="/img/ads/mingdao-h.png" alt="" /></a>
-          <span>{{ spStr }}</span>
+            target="_blank">
+            <img src="/img/ads/mingdao-h.png" alt="" />
+            <span>{{ spStr }}</span>
+          </a>
         </div>
         <div class="wwads wwads-cn wwads-horizontal" data-id="213" style="width:100% !important" v-else>
         </div>
@@ -42,38 +44,25 @@ const spStr = computed(() => {
   justify-content: center;
 
   a {
-    max-width: 500px;
+    max-width: min(500px, 100%);
+    position: relative;
 
     img {
       width: 100%;
     }
-  }
 
-  span {
-    font-size: small;
+    span {
+      font-size: small;
+      color: #999;
+      position: absolute;
+      right: 10px;
+      bottom: 10px;
+    }
   }
 }
 
 .ads-container {
   padding-top: 0 !important;
   padding-bottom: 0 !important;
 }
-
-.wwads-cn,
-.wwads {
-  background-color: #f4f8fa;
-}
-
-.wwads-text {
-  color: #0e1011;
-}
-
-html[data-theme="dark"] .wwads-cn,
-html[data-theme="dark"] .wwads {
-  background-color: #272829 !important;
-}
-
-html[data-theme="dark"] .wwads-text {
-  color: #9e9e9e !important;
-}
 </style>

docs/.vuepress/components/Sidebar.vue

@@ -46,5 +46,6 @@ const spStr = computed(() => {
     width: 70%;
     text-align: right;
     font-size: small;
+    color: #999;
   }
 }</style>

docs/.vuepress/styles/index.scss

@@ -1,9 +1,27 @@
-.ads-card{
+.ads-card {
   background-color: #f4f8fa;
   padding: 14px;
   border-radius: 8px;
 }
 
 html[data-theme="dark"] .ads-card {
   background-color: #272829;
-}
+}
+
+.wwads-cn,
+.wwads {
+  background-color: #f4f8fa;
+}
+
+.wwads-text {
+  color: #0e1011;
+}
+
+html[data-theme="dark"] .wwads-cn,
+html[data-theme="dark"] .wwads {
+  background-color: #272829 !important;
+}
+
+html[data-theme="dark"] .wwads-text {
+  color: #9e9e9e !important;
+}