更新英文文档

xhuajin · Sep 9, 2024 · d4f6665 · d4f6665
1 parent 53bc350
commit d4f6665
Show file tree

Hide file tree

Showing 148 changed files with 1,554 additions and 697 deletions.
diff --git a/docs/.vitepress/components/DownloadChart.vue b/docs/.vitepress/components/DownloadChart.vue
@@ -1,57 +1,78 @@
 <template>
   <div class="download-chart">
-    <div
-      v-for="(item, index) in downloadData"
-      class="download-data"
-      :key="item.date"
-    >
-    <div
-      class="chart-block-tooltip"
-      :ref="el => tooltipRefs.push(el)"
-    >{{ item.number }}</div>
-    <div class="chart-block-wrapper" :style="{ height: `${item.number / current * 100}%`}">
-      <div 
-      class="chart-block"
-      :download=item.number
-      @click="toggleTooltip(index)"
-      ></div>
-    </div>
-    <div class="download-date">{{ item.date }}</div>
+    <div v-for="(item, index) in downloadData" class="download-data" :key="item.date">
+      <div class="chart-block-tooltip" :ref="el => tooltipRefs.push(el)" @click="toggleTooltip(index)">{{ item.number }}
+      </div>
+      <div class="chart-block-wrapper" :style="{ height: `${item.number / current * 80}%` }">
+        <div class="chart-block" :download=item.number @click="toggleTooltip(index)"></div>
+      </div>
+      <div class="download-date">{{ item.date }}</div>
     </div>
   </div>
 </template>
 
 <script setup>
 import { ref } from 'vue';
 
-const current = ref(5487);
 const downloadData = ref([
-  { date: '2024-06-09', number: 124  },
-  { date: '2024-06-16', number: 406  },
-  { date: '2024-06-23', number: 610  },
-  { date: '2024-06-30', number: 905  },
+  { date: '2024-06-09', number: 124 },
+  { date: '2024-06-16', number: 406 },
+  { date: '2024-06-23', number: 610 },
+  { date: '2024-06-30', number: 905 },
   { date: '2024-07-07', number: 1338 },
   { date: '2024-07-14', number: 1896 },
   { date: '2024-07-21', number: 3019 },
   { date: '2024-07-28', number: 4135 },
   { date: '2024-08-04', number: 5487 },
+  { date: '2024-08-11', number: 6066 },
+  { date: '2024-08-18', number: 6383 },
+  { date: '2024-08-25', number: 6656 },
+  { date: '2024-09-01', number: 6901 },
+  { date: '2024-09-08', number: 7199 },
 ]);
+const current = ref(6901);
 
 const tooltipRefs = ref([]);
 
 const toggleTooltip = (index) => {
-  tooltipRefs.value[index].style.opacity = tooltipRefs.value[index].style.opacity === '1' ? '0' : '1';
+  const tooltip = tooltipRefs.value[index];
+  tooltip.classList.toggle('visible-tooltip');
 };
 </script>
 
 
 <style>
+.download-chart::before,
+.download-chart::after {
+  content: '';
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-style: solid;
+}
+
+.download-chart::before {
+  bottom: 398px;
+  left: -6px;
+  border-width: 0 6px 10px;
+  border-color: transparent transparent var(--vp-c-default-1) transparent;
+}
+
+.download-chart::after {
+  top: 395px;
+  right: -10px;
+  border-width: 6px 0 6px 10px;
+  border-color: transparent transparent transparent var(--vp-c-default-1);
+}
+
+
 .download-chart {
   display: grid;
   position: relative;
   width: 100%;
-  height: 300px;
+  height: 400px;
   border-bottom: 1px solid var(--vp-c-default-1);
+  border-left: 1px solid var(--vp-c-default-1);
   grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
   align-items: end;
 }
@@ -84,6 +105,7 @@ const toggleTooltip = (index) => {
   0% {
     height: 0;
   }
+
   100% {
     height: 100%;
   }
@@ -93,13 +115,18 @@ const toggleTooltip = (index) => {
   opacity: 0;
   /* margin-top: auto;
   margin-bottom: 10px; */
+  color: var(--vp-button-brand-text);
   margin: auto auto 10px;
   border-radius: 8px;
   font-size: 12px;
   text-align: center;
   background: var(--vp-c-default-3);
 }
 
+.visible-tooltip {
+  opacity: 1;
+}
+
 .chart-block-tooltip:has(+.chart-block-wrapper:hover) {
   opacity: 1;
   transition: opacity 0.3s;
@@ -115,16 +142,16 @@ const toggleTooltip = (index) => {
   /* Modify size here: */
   --size: 50px;
   position: relative;
-  width: 80%;
-  /* height: calc(var(--size) * 0.66); */
+  width: 100%;
+  height: 24px;
   background: #333;
   border-radius: 10px;
 }
 
 .chart-block-tooltip:after {
   content: '';
   position: absolute;
-  bottom: 0;
+  bottom: 1px;
   left: 50%;
   width: 0;
   height: 0;
@@ -134,5 +161,4 @@ const toggleTooltip = (index) => {
   margin-left: calc(var(--size) * 0.13 * -1);
   margin-bottom: calc(var(--size) * 0.13 * -1);
 }
-
 </style>