feat:swiper 学习

CHANGELOG.md

+## 2022-12-02
+
+- swiper 学习
+
+## 2022-11-30
+
+- 优化拖拽上传
+
 ## 2022-11-22
 
 - 新增方法深拷贝

package-lock.json

@@ -20,6 +20,7 @@
         "mitt": "^3.0.0",
         "pinia": "^2.0.14",
         "quasar": "^2.6.0",
+        "swiper": "^8.4.5",
         "vue": "^3.0.0",
         "vue-i18n": "^9.2.2",
         "vue-router": "^4.0.0",
@@ -5189,6 +5190,14 @@
         "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
       }
     },
+    "node_modules/dom7": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/dom7/-/dom7-4.0.4.tgz",
+      "integrity": "sha512-DSSgBzQ4rJWQp1u6o+3FVwMNnT5bzQbMb+o31TjYYeRi05uAcpF8koxdfzeoe5ElzPmua7W7N28YJhF7iEKqIw==",
+      "dependencies": {
+        "ssr-window": "^4.0.0"
+      }
+    },
     "node_modules/domelementtype": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
@@ -10202,6 +10211,11 @@
         "wbuf": "^1.7.3"
       }
     },
+    "node_modules/ssr-window": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-4.0.2.tgz",
+      "integrity": "sha512-ISv/Ch+ig7SOtw7G2+qkwfVASzazUnvlDTwypdLoPoySv+6MqlOV10VwPSE6EWkGjhW50lUmghPmpYZXMu/+AQ=="
+    },
     "node_modules/stable": {
       "version": "0.1.8",
       "resolved": "https://registry.npmjs.org/stable/-/stable-0.1.8.tgz",
@@ -10362,6 +10376,29 @@
         "node": ">= 10"
       }
     },
+    "node_modules/swiper": {
+      "version": "8.4.5",
+      "resolved": "https://registry.npmjs.org/swiper/-/swiper-8.4.5.tgz",
+      "integrity": "sha512-zveyEFBBv4q1sVkbJHnuH4xCtarKieavJ4SxP0QEHvdpPLJRuD7j/Xg38IVVLbp7Db6qrPsLUePvxohYx39Agw==",
+      "funding": [
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/swiperjs"
+        },
+        {
+          "type": "open_collective",
+          "url": "http://opencollective.com/swiper"
+        }
+      ],
+      "hasInstallScript": true,
+      "dependencies": {
+        "dom7": "^4.0.4",
+        "ssr-window": "^4.0.2"
+      },
+      "engines": {
+        "node": ">= 4.7.0"
+      }
+    },
     "node_modules/table": {
       "version": "6.8.0",
       "resolved": "https://registry.npmjs.org/table/-/table-6.8.0.tgz",
@@ -15187,6 +15224,14 @@
         "entities": "^2.0.0"
       }
     },
+    "dom7": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/dom7/-/dom7-4.0.4.tgz",
+      "integrity": "sha512-DSSgBzQ4rJWQp1u6o+3FVwMNnT5bzQbMb+o31TjYYeRi05uAcpF8koxdfzeoe5ElzPmua7W7N28YJhF7iEKqIw==",
+      "requires": {
+        "ssr-window": "^4.0.0"
+      }
+    },
     "domelementtype": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
@@ -18596,6 +18641,11 @@
         "wbuf": "^1.7.3"
       }
     },
+    "ssr-window": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-4.0.2.tgz",
+      "integrity": "sha512-ISv/Ch+ig7SOtw7G2+qkwfVASzazUnvlDTwypdLoPoySv+6MqlOV10VwPSE6EWkGjhW50lUmghPmpYZXMu/+AQ=="
+    },
     "stable": {
       "version": "0.1.8",
       "resolved": "https://registry.npmjs.org/stable/-/stable-0.1.8.tgz",
@@ -18703,6 +18753,15 @@
         }
       }
     },
+    "swiper": {
+      "version": "8.4.5",
+      "resolved": "https://registry.npmjs.org/swiper/-/swiper-8.4.5.tgz",
+      "integrity": "sha512-zveyEFBBv4q1sVkbJHnuH4xCtarKieavJ4SxP0QEHvdpPLJRuD7j/Xg38IVVLbp7Db6qrPsLUePvxohYx39Agw==",
+      "requires": {
+        "dom7": "^4.0.4",
+        "ssr-window": "^4.0.2"
+      }
+    },
     "table": {
       "version": "6.8.0",
       "resolved": "https://registry.npmjs.org/table/-/table-6.8.0.tgz",

package.json

@@ -23,6 +23,7 @@
     "mitt": "^3.0.0",
     "pinia": "^2.0.14",
     "quasar": "^2.6.0",
+    "swiper": "^8.4.5",
     "vue": "^3.0.0",
     "vue-i18n": "^9.2.2",
     "vue-router": "^4.0.0",

src/App.vue

@@ -4,8 +4,9 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
+import 'swiper/css';
 
 export default defineComponent({
-  name: 'App'
-})
+  name: 'App',
+});
 </script>

src/assets/is-dragenter.svg

+<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><defs><style>.cls-1,.cls-3{fill:none;}.cls-2{fill:#fff;}.cls-2,.cls-3,.cls-4,.cls-5,.cls-6{stroke:#101129;stroke-linecap:round;stroke-linejoin:round;stroke-width:8px;}.cls-4,.cls-8{fill:#80adff;}.cls-5{fill:#ffdc8a;}.cls-6{fill:#81e6c1;}.cls-7{fill:#ccdeff;}</style></defs><g id="图层_2"><g id="缺省页"><g id="储存"><rect height="1024" width="1024" class="cls-1"></rect><polygon points="864 800 160 800 240 512 784 512 864 800" class="cls-2"></polygon><rect height="128" width="544" y="384" x="240" class="cls-2"></rect><polygon points="864 800 784 512 784 384 896 640 864 800" class="cls-2"></polygon><polygon points="160 800 240 512 240 384 128 640 160 800" class="cls-2"></polygon><path d="M257,608.14l9.27-39.46A32,32,0,0,1,297.42,544H352" class="cls-3"></path><line y2="544" x2="417" y1="544" x1="385" class="cls-3"></line><path d="M656,656v32a32,32,0,0,1-32,32H400a32,32,0,0,1-32-32V656a16,16,0,0,0-16-16H128V800a64,64,0,0,0,64,64H832a64,64,0,0,0,64-64V640H672A16,16,0,0,0,656,656Z" class="cls-4"></path><circle r="32" cy="448" cx="704" class="cls-5"></circle><circle r="32" cy="448" cx="576" class="cls-6"></circle><path d="M488.62,126.4,495,152.14a8,8,0,0,0,5.85,5.85l25.74,6.34a2,2,0,0,1,0,3.89l-25.74,6.34a8,8,0,0,0-5.85,5.86l-6.35,25.74a2,2,0,0,1-3.88,0l-6.35-25.74a8,8,0,0,0-5.85-5.86l-25.74-6.34a2,2,0,0,1,0-3.89L472.54,158a8,8,0,0,0,5.85-5.85l6.35-25.74A2,2,0,0,1,488.62,126.4Z" class="cls-7"></path><path d="M928.2,397.66l5.12,20.75a6.44,6.44,0,0,0,4.71,4.71l20.74,5.12a1.61,1.61,0,0,1,0,3.13L938,436.48a6.44,6.44,0,0,0-4.71,4.71l-5.12,20.75a1.61,1.61,0,0,1-3.13,0L920,441.19a6.44,6.44,0,0,0-4.71-4.71l-20.75-5.11a1.61,1.61,0,0,1,0-3.13l20.75-5.12a6.44,6.44,0,0,0,4.71-4.71l5.11-20.75A1.61,1.61,0,0,1,928.2,397.66Z" class="cls-7"></path><path d="M120.47,372.41l5.87,23.79a7.38,7.38,0,0,0,5.41,5.41l23.8,5.87a1.85,1.85,0,0,1,0,3.59l-23.8,5.87a7.38,7.38,0,0,0-5.41,5.41l-5.87,23.79a1.85,1.85,0,0,1-3.59,0L111,422.35a7.38,7.38,0,0,0-5.41-5.41l-23.8-5.87a1.85,1.85,0,0,1,0-3.59l23.8-5.87A7.38,7.38,0,0,0,111,396.2l5.86-23.79A1.85,1.85,0,0,1,120.47,372.41Z" class="cls-7"></path><circle r="24" cy="248" cx="600" class="cls-7"></circle><path d="M929,271a28.23,28.23,0,0,0,23.44-44,28.1,28.1,0,0,0-15.74-4.8c-.63,0-1.31,0-2.11.08a2.56,2.56,0,0,1-2.52-1.47,26.29,26.29,0,0,0-4.18-6.29l-1,.06a2.56,2.56,0,0,1-2.52-1.48,24.61,24.61,0,0,0-2-3.51c-7-5-16.53-7.94-26.74-7.94-21.24,0-38.52,12.67-38.52,28.25a2.57,2.57,0,0,1-2.57,2.57c-15.57,0-28.25,10.37-28.25,23.11A19.68,19.68,0,0,0,829.32,266a32.21,32.21,0,0,0,17.5,5Z" class="cls-8"></path><path d="M918.72,273.59H929A30.82,30.82,0,0,0,929,212c-.78,0-1.55,0-2.31.1-5.6-12-20.85-20.64-38.78-20.64-22.7,0-41.09,13.8-41.09,30.82-17,0-30.82,11.49-30.82,25.68s13.8,25.68,30.82,25.68h51.36" class="cls-3"></path><path d="M278.86,220.57a37.7,37.7,0,0,0,31.3-58.73,37.48,37.48,0,0,0-21-6.41c-.85,0-1.74,0-2.82.12a3.42,3.42,0,0,1-3.36-2,34.8,34.8,0,0,0-5.58-8.4c-.42,0-.86,0-1.35.08a3.42,3.42,0,0,1-3.36-2A33.71,33.71,0,0,0,270,138.6C260.6,132,247.91,128,234.29,128c-28.36,0-51.43,16.92-51.43,37.71a3.43,3.43,0,0,1-3.43,3.43c-20.8,0-37.72,13.85-37.72,30.86a26.29,26.29,0,0,0,4.07,13.91,43,43,0,0,0,23.36,6.66Z" class="cls-8"></path><path d="M265.14,224h13.72a41.15,41.15,0,0,0,0-82.29c-1,0-2.06.06-3.08.13-7.48-16-27.83-27.55-51.78-27.55-30.3,0-54.86,18.42-54.86,41.14-22.72,0-41.14,15.35-41.14,34.28S146.42,224,169.14,224h68.57" class="cls-3"></path></g></g></g></svg>
\ No newline at end of file

src/boot/vue-i18n.ts

@@ -9,8 +9,8 @@ export default boot(({ app }) => {
     legacy: false, // you must set `false`, to use Composition API
     locale: 'zh-CN', // set current locale
     formatFallbackMessages: true,
-    // missingWarn: false,
-    // fallbackWarn: false,
+    missingWarn: false,
+    fallbackWarn: false,
     messages: globalLang,
   });
 

src/components/uploader-page/UpLoader.vue

@@ -2,7 +2,14 @@
  * 上传器
   -->
 <script setup lang="ts">
-import { ref, reactive, computed, nextTick } from 'vue';
+import {
+  ref,
+  reactive,
+  onMounted,
+  computed,
+  nextTick,
+  onBeforeUnmount,
+} from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useMessage } from 'src/common/hooks';
 
@@ -38,9 +45,11 @@ const imageTypeList = ['png', 'jpg', 'gif', 'svg'];
 const excelTypeList = ['xlsx', 'xls'];
 const otherTypeList = ['pdf'];
 
+const dragContentRef = ref<any>(null);
 const viewModel = ref(false);
 const fileType = ref('');
 const viewDialogTitle = ref('');
+const isDragenter = ref(false); // 拖动元素是否进入有效放置目标
 
 const state = reactive({
   fileList: [] as any[],
@@ -82,67 +91,135 @@ const totalSize = computed(() => {
   return size + unit;
 });
 
+onMounted(() => {
+  document.addEventListener('drop', windowDrop, false);
+  document.addEventListener('dragover', windowDragover, false);
+
+  if (dragContentRef.value) {
+    dragContentRef.value.addEventListener('dragenter', onDragEnter, false);
+    dragContentRef.value.addEventListener('dragover', onDragOver, false);
+    dragContentRef.value.addEventListener('dragleave', onDragleave, false);
+    dragContentRef.value.addEventListener('drop', onDrop, false);
+  }
+});
+
+onBeforeUnmount(() => {
+  dragContentRef.value.removeEventListener('dragenter', onDragEnter, false);
+  dragContentRef.value.removeEventListener('dragover', onDragOver, false);
+  dragContentRef.value.removeEventListener('dragleave', onDragleave, false);
+  dragContentRef.value.removeEventListener('drop', onDrop, false);
+
+  document.removeEventListener('drop', windowDrop, false);
+  document.removeEventListener('dragover', windowDragover, false);
+});
+
+function windowDrop(e: any) {
+  e.preventDefault();
+}
+function windowDragover(e: any) {
+  e.preventDefault();
+  isDragenter.value = false;
+}
+
+// 当拖动的元素或被选择的文本进入有效的放置目标时， dragenter 事件被触发。
+function onDragEnter(e: any) {
+  e.stopPropagation();
+  e.preventDefault();
+  isDragenter.value = true;
+}
+
+// 当元素或者选择的文本被拖拽到一个有效的放置目标上时，触发 dragover 事件（每几百毫秒触发一次）。
+function onDragOver(e: any) {
+  e.stopPropagation();
+  e.preventDefault();
+
+  return false;
+}
+
+// dragleave 事件在拖动的元素或选中的文本离开一个有效的放置目标时被触发。
+function onDragleave(e: any) {
+  e.stopPropagation();
+  e.preventDefault();
+}
+
+// drop 事件在元素或选中的文本被放置在有效的放置目标上时被触发。
+function onDrop(e: any) {
+  e.stopPropagation();
+  e.preventDefault();
+  console.log('放置');
+
+  // 当文件拖拽到dropBox区域时,可以在该事件取到files
+
+  handleFile(e.dataTransfer.files);
+  isDragenter.value = false;
+}
+
 function selectFile() {
   let _input: HTMLInputElement = document.createElement('input'); // 创建一个隐藏的input
   _input.setAttribute('type', 'file');
   if (props.multiple) {
-    _input.setAttribute('multiple', true); // 多选
+    _input.setAttribute('multiple', 'multiple'); // 多选
   }
   // _input.setAttribute('accept', 'image/*'); // 上传类型
   if (props.accept) {
     _input.setAttribute('accept', props.accept);
   }
   _input.onchange = function (e: any) {
-    let arr = [] as any[];
-    for (let i = 0; i < e.target.files.length; i++) {
-      const _file = e.target.files[i];
-      const typeArr = _file.name.split('.');
-
-      const type = typeArr.length > 1 ? typeArr[typeArr.length - 1] : '';
-
-      let unit: string; // 单位
-      let size: number | string = 0;
-      if (_file.size < 1000) {
-        unit = 'B';
-        size = _file.size.toFixed(3);
+    handleFile(e.target.files);
+  };
+  _input.click();
+}
+
+function handleFile(data: any) {
+  let arr = [] as any[];
+  for (let i = 0; i < data.length; i++) {
+    const _file = data[i];
+    const typeArr = _file.name.split('.');
+
+    const type = typeArr.length > 1 ? typeArr[typeArr.length - 1] : '';
+
+    let unit: string; // 单位
+    let size: number | string = 0;
+    if (_file.size < 1000) {
+      unit = 'B';
+      size = _file.size.toFixed(3);
+    } else {
+      const KB_size = _file.size * 0.0009765625;
+      if (KB_size < 1000) {
+        unit = 'KB';
+        size = KB_size.toFixed(3);
       } else {
-        const KB_size = _file.size * 0.0009765625;
-        if (KB_size < 1000) {
-          unit = 'KB';
-          size = KB_size.toFixed(3);
+        const MB_size = KB_size * 0.0009765625;
+        if (MB_size < 1000) {
+          unit = 'MB';
+          size = MB_size.toFixed(2);
         } else {
-          const MB_size = KB_size * 0.0009765625;
-          if (MB_size < 1000) {
-            unit = 'MB';
-            size = MB_size.toFixed(2);
+          const GB_size = MB_size * 0.0009765625;
+          if (GB_size <= 2) {
+            unit = 'GB';
+            size = GB_size.toFixed(2);
           } else {
-            const GB_size = MB_size * 0.0009765625;
-            if (GB_size <= 2) {
-              unit = 'GB';
-              size = GB_size.toFixed(2);
-            } else {
-              const msg = '文件过大，请选择不超过2GB的文件';
-              warn(msg);
-              console.warn(msg);
-              return;
-            }
+            const msg = '文件过大，请选择不超过2GB的文件';
+            warn(msg);
+            console.warn(msg);
+            isDragenter.value = false;
+            return;
           }
         }
       }
-
-      arr.push({
-        file: _file,
-        name: _file.name,
-        sizeFormat: size + unit,
-        fileType: type,
-        size: _file.size,
-      });
     }
-    nextTick(() => {
-      state.fileList = state.fileList.concat(arr);
+
+    arr.push({
+      file: _file,
+      name: _file.name,
+      sizeFormat: size + unit,
+      fileType: type,
+      size: _file.size,
     });
-  };
-  _input.click();
+  }
+  nextTick(() => {
+    state.fileList = state.fileList.concat(arr);
+  });
 }
 
 function removeItem(index: number) {
@@ -255,7 +332,12 @@ function closeViewDialog() {
         />
       </div>
     </div>
-    <div class="uploader-content">
+    <div
+      id="drag-content"
+      class="uploader-content"
+      :class="{ 'active-dragenter': isDragenter }"
+      ref="dragContentRef"
+    >
       <div class="uploader-main-content">
         <div
           class="file-item"
@@ -333,6 +415,7 @@ function closeViewDialog() {
   border: 1px solid;
   display: flex;
   flex-flow: column nowrap;
+  position: relative;
   // box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
   //   rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
   .total-file-size {
@@ -351,11 +434,20 @@ function closeViewDialog() {
     flex: 1;
     overflow: auto;
   }
+  .active-dragenter {
+    box-shadow: rgb(204, 219, 232) 3px 3px 6px 0px inset,
+      rgba(255, 255, 255, 0.5) -3px -3px 6px 1px inset;
+
+    opacity: 0.5;
+    background-color: rgba(128, 128, 128, 0.808);
+    // border: 1px solid red;
+  }
   .uploader-main-content {
     display: grid;
     grid-template-columns: 100%;
     row-gap: 4px;
     margin: 4px;
+
     .file-item {
       height: 40px;
       box-sizing: border-box;

src/layouts/MainLayout.vue

@@ -164,6 +164,13 @@ export default defineComponent({
           link: '/page7',
           active: false,
         },
+        {
+          title: '八',
+          caption: '动画',
+          icon: require('./menuListIcons/page8.svg'),
+          link: '/page8',
+          active: false,
+        },
       ];
 
       for (const item of lists) {

src/layouts/TopLeftLoading.vue

 <script lang="ts" setup>
-import { onMounted } from 'vue';
+import { ref, onMounted } from 'vue';
+
+import * as echarts from 'echarts';
+
+type EChartsOption = echarts.EChartsOption;
+
+const titleChartRef = ref<HTMLElement | null>(null);
 
 onMounted(() => {
-  //
+  initDom();
 });
+
+function initDom() {
+  var myChart = echarts.init(titleChartRef.value as HTMLElement);
+  let option: EChartsOption = {
+    graphic: {
+      elements: [
+        {
+          type: 'group',
+          left: 'center',
+          top: 'center',
+          children: new Array(10).fill(0).map((val, i) => ({
+            type: 'rect',
+            x: i * 14,
+            shape: {
+              x: 0,
+              y: -20,
+              width: 5,
+              height: 30,
+            },
+            style: {
+              fill: '#FED049',
+            },
+            keyframeAnimation: {
+              duration: 1000,
+              delay: i * 200,
+              loop: true,
+              keyframes: [
+                {
+                  percent: 0.5,
+                  scaleY: 0.3,
+                  easing: 'cubicIn',
+                },
+                {
+                  percent: 1,
+                  scaleY: 1,
+                  easing: 'cubicOut',
+                },
+              ],
+            },
+          })),
+        },
+      ],
+    },
+  };
+  myChart.setOption(option);
+}
 </script>
 <template>
   <div class="top-left-box row items-center justify-center overflow-hidden">
-    <span>间谍过家家</span>
+    <div style="width: 100%; height: 100%" ref="titleChartRef"></div>
   </div>
 </template>
 <style lang="scss" scoped>

src/layouts/menuListIcons/page8.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1669795186371" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1531" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M666.4192 906.496c368.64-62.7712 235.3152-466.688 223.5392-517.6832s4.9152-77.4656 15.6672-110.7968c18.944-63.232 2.048-134.5024-6.6048-170.9056-1.9456-8.2432-11.264-12.3392-18.5856-8.0896-7.9872 4.6592-18.2272 8.9088-29.44 11.9808-20.2752 5.5808-53.248 1.3312-89.5488 31.6928-28.5696 23.9104-59.3408 37.9392-71.168 42.8032-3.1232 1.28-6.656 1.2288-9.7792-0.1536-154.112-66.6624-312.2688-10.8032-340.6848 0.3072-3.0208 1.1776-6.3488 1.1264-9.3184-0.1024-11.6736-4.8128-42.5984-18.8416-71.3216-42.8544-36.3008-30.4128-69.2736-26.1632-89.5488-31.6928-11.2128-3.072-21.4016-7.3728-29.44-11.9808-7.3216-4.2496-16.5888-0.1536-18.5856 8.0896-8.6528 36.4032-25.5488 107.6736-6.6048 170.9056 10.8032 33.3312 27.4432 59.8016 15.6672 110.7968S-14.2848 843.776 354.3552 906.496c0 0 126.0544 71.5776 312.064 0z" fill="#FFFFFF" p-id="1532"></path><path d="M653.2608 854.7328c-137.472 58.8288-248.1152 15.6672-296.4992 0-199.4752-36.4544-248.0128-248.2688-257.1264-301.8752-10.9056 137.1648 21.0944 313.9072 254.72 353.6896 0 0 126.0544 71.5776 312.064 0 245.6064-41.7792 268.3904-235.008 252.7744-374.4256-61.184 293.6832-208.1792 309.504-265.9328 322.6112z" fill="#EBE6EF" p-id="1533"></path><path d="M750.2336 236.6464c-4.4544-3.1744-5.5296-9.3184-2.56-13.9264 8.2432-12.7488 24.5248-35.2768 41.3184-43.1104 23.9616-11.1616 41.5232-21.2992 51.6608-29.2864 6.0416-4.7616 14.3872-7.2704 20.992-8.96 5.7344-1.4336 11.4688 2.1504 12.6464 7.936 6.7584 32.1536 15.2576 117.504-31.5904 164.352-4.1984 4.1984-11.008 4.096-15.0528-0.256-12.9536-13.9264-22.6304-15.7184-35.4816-23.0912-14.8992-8.4992-27.5968-37.0176-29.7984-41.0112-2.9696-5.3248-7.8848-9.6256-12.1344-12.6464z" fill="#FFA29E" p-id="1534"></path><path d="M482.7648 636.8256c-5.632 0-10.24-4.608-10.24-10.24v-34.7648c0-5.632 4.608-10.24 10.24-10.24s10.24 4.608 10.24 10.24v34.7648c0 5.6832-4.5568 10.24-10.24 10.24z" fill="#29343F" p-id="1535"></path><path d="M328.3456 603.0848s39.8336-125.184 153.7536-125.184 162.2016 125.184 162.2016 125.184c-64.9728-52.9408-203.2128-122.5728-315.9552 0zM370.4832 705.6896s39.2192 40.4992 72.5504 18.944 39.7312-41.8304 39.7312-41.8304 39.3216 39.8848 49.8176 43.1616c10.4448 3.2768 53.6064 5.888 71.2192-29.3888-25.4976 7.8336-33.3312 26.1632-77.7728-20.2752-37.888-44.4416-43.9808-44.4416-43.9808-44.4416l-48.8448 60.7744s-15.6672 25.4464-62.72 13.056z" fill="#EBE6EF" p-id="1536"></path><path d="M493.7216 593.2544a16.10752 16.10752 0 0 1-22.1184 0.0512c-11.1616-10.3936-29.2352-22.3744-51.4048-19.8144-6.3488 0.7168-9.9328-9.5232 3.5328-18.2784 13.4656-8.8064 27.2896-41.3696 60.2112-41.3696s44.8512 31.488 54.4256 36.9664c9.5744 5.4784 16.64 17.5616 6.0416 18.688-8.3456 0.8192-35.1744 9.216-50.688 23.7568z" fill="#F99595" p-id="1537"></path><path d="M416.8192 511.6416c2.6624-3.4816 2.4064-8.192-0.3584-11.5712-3.1232-3.84-6.8608-10.752-9.216-23.1936-4.7104-24.832-23.6032-78.7968-90.368-78.7968s-90.368 43.6224-93.0816 78.7968c-2.7136 35.1744 16.1792 99.6352 72.8576 99.6352 54.2208-0.0512 81.2544-13.9776 120.1664-64.8704z" fill="#EF9C37" p-id="1538"></path><path d="M313.9584 483.3792m-67.1744 0a67.1744 67.1744 0 1 0 134.3488 0 67.1744 67.1744 0 1 0-134.3488 0Z" fill="#0C0C05" p-id="1539"></path><path d="M276.5824 481.8432a17.152 14.848 90 1 0 29.696 0 17.152 14.848 90 1 0-29.696 0Z" fill="#FFFFFF" p-id="1540"></path><path d="M548.5568 506.368c-2.6624-3.4816-2.4064-8.192 0.3584-11.5712 3.1232-3.84 6.8608-10.752 9.216-23.1936 4.7104-24.832 23.6032-78.7968 90.368-78.7968s90.368 43.6224 93.0816 78.7968c2.7136 35.1744-16.1792 99.6352-72.8576 99.6352-54.2208-0.0512-81.2544-13.9776-120.1664-64.8704z" fill="#EF9C37" p-id="1541"></path><path d="M653.2608 477.8496m-67.1744 0a67.1744 67.1744 0 1 0 134.3488 0 67.1744 67.1744 0 1 0-134.3488 0Z" fill="#0C0C05" p-id="1542"></path><path d="M659.0976 476.7232a17.152 14.848 90 1 0 29.696 0 17.152 14.848 90 1 0-29.696 0Z" fill="#FFFFFF" p-id="1543"></path><path d="M861.696 141.3632c-6.6048 1.6896-14.9504 4.1984-20.992 8.96-10.1376 7.9872-27.6992 18.1248-51.6608 29.2864-16.7936 7.8336-33.1264 30.3616-41.3184 43.1104-2.9696 4.608-1.8944 10.752 2.56 13.9264 4.2496 3.0208 9.1648 7.3728 12.1856 12.6976 0.5632 0.9728 1.7408 3.4816 3.4816 6.8096 8.9088-24.32 31.8976-55.6032 46.9504-60.3136 16.8448-5.2224 43.264-33.3312 45.8752-41.8304 1.4336-4.5568 7.3728-7.9872 12.5952-10.1888-2.56-2.304-6.0928-3.3792-9.6768-2.4576z" fill="#FC8383" p-id="1544"></path><path d="M270.8992 236.6464c4.4544-3.1744 5.5296-9.3184 2.56-13.9264-8.2432-12.7488-24.5248-35.2768-41.3184-43.1104-23.9616-11.1616-41.5232-21.2992-51.6608-29.2864-6.0416-4.7616-14.3872-7.2704-20.992-8.96-5.7344-1.4336-11.4688 2.1504-12.6464 7.936-6.7584 32.1536-15.2576 117.504 31.5904 164.352 4.1984 4.1984 11.008 4.096 15.0528-0.256 12.9536-13.9264 22.6304-15.7184 35.4816-23.0912 14.8992-8.4992 27.5968-37.0176 29.7984-41.0112 2.9696-5.3248 7.8848-9.6256 12.1344-12.6464z" fill="#FFA29E" p-id="1545"></path><path d="M159.488 141.3632c6.6048 1.6896 14.9504 4.1984 20.992 8.96 10.1376 7.9872 27.6992 18.1248 51.6608 29.2864 16.7936 7.8336 33.1264 30.3616 41.3184 43.1104 2.9696 4.608 1.8944 10.752-2.56 13.9264-4.2496 3.0208-9.1648 7.3728-12.1856 12.6976-0.5632 0.9728-1.7408 3.4816-3.4816 6.8096-8.9088-24.32-31.8976-55.6032-46.9504-60.3136-16.8448-5.2224-43.264-33.3312-45.8752-41.8304-1.4336-4.5568-7.3728-7.9872-12.5952-10.1888 2.5088-2.304 6.0928-3.3792 9.6768-2.4576z" fill="#FC8383" p-id="1546"></path><path d="M502.272 948.7872c-85.8112 0-140.8512-26.88-151.3472-32.4608-98.7648-17.152-170.8544-60.2112-214.4256-127.9488-86.528-134.5536-35.7888-325.5808-19.1488-388.352 1.536-5.7856 2.7648-10.2912 3.4816-13.4656 8.9088-38.656 0.6144-61.0816-9.0112-87.0912-2.1504-5.8368-4.4032-11.9296-6.4512-18.2272-19.8144-66.0992-2.1504-140.5952 6.4-176.4352a22.75328 22.75328 0 0 1 13.2608-15.7696c6.7072-2.8672 14.1312-2.4064 20.3776 1.2288 7.5264 4.352 17.1008 8.2432 26.9824 10.9568 4.4032 1.2288 9.8816 1.9456 16.1792 2.7648 20.1728 2.6624 47.8208 6.2976 77.2608 30.976 27.5456 23.04 57.1904 36.5056 68.608 41.2672 0.5632 0.256 1.1264 0.256 1.6896 0 30.6176-11.9296 191.1808-68.1984 348.4672-0.1536 0.6144 0.256 1.28 0.3072 1.8432 0.0512 11.4688-4.7104 41.0624-18.176 68.5056-41.1648 29.44-24.6784 57.088-28.3136 77.2608-30.976 6.2976-0.8192 11.7248-1.536 16.1792-2.7648 9.8816-2.7136 19.456-6.6048 26.9824-10.9568 6.2976-3.6352 13.7216-4.096 20.3776-1.2288a22.7328 22.7328 0 0 1 13.2608 15.7696c8.4992 35.7888 26.2144 110.336 6.4512 176.2304-2.0992 6.5024-4.352 12.5952-6.5024 18.432-9.6256 26.0096-17.92 48.4352-9.0112 87.0912 0.7168 3.1744 1.9456 7.7312 3.4816 13.4656 16.64 62.7712 67.3792 253.7984-19.1488 388.352-43.6736 67.8912-116.0192 111.0016-215.1424 128.0512-63.3344 24.2176-119.7568 32.3584-166.8608 32.3584zM134.0416 107.6224c-0.3584 0-0.6656 0.1024-0.9216 0.2048-0.4096 0.2048-1.1776 0.6656-1.4336 1.6896-8.704 36.7104-24.9344 104.96-6.7584 165.5808 1.8432 5.6832 3.9936 11.5712 6.0928 17.2032 9.8304 26.624 20.0192 54.1696 9.728 98.816-0.768 3.328-2.048 8.0896-3.6352 14.1312-16.0768 60.6208-65.0752 245.0432 16.5888 372.0192 40.5504 63.0784 108.6464 103.168 202.3424 119.0912 1.1776 0.2048 2.304 0.6144 3.328 1.1776 1.2288 0.6656 124.4672 68.1472 303.3088-0.6656 0.6144-0.256 1.28-0.4096 1.9456-0.5632 93.696-15.9744 161.792-56.0128 202.3424-119.0912 81.6128-126.976 32.6656-311.4496 16.5888-372.0192-1.5872-6.0416-2.8672-10.8032-3.6352-14.1312-10.2912-44.5952-0.1024-72.1408 9.728-98.816 2.0992-5.6832 4.2496-11.52 6.1952-17.4592 18.1248-60.416 1.8944-128.7168-6.8096-165.376-0.256-1.0752-1.024-1.536-1.4336-1.6896a2.2528 2.2528 0 0 0-2.048 0.1024c-9.1136 5.3248-20.1216 9.7792-31.8464 13.0048-5.7856 1.5872-12.1344 2.4064-18.8928 3.328-18.6368 2.4576-41.8816 5.5296-66.7648 26.368-29.6448 24.832-61.4912 39.3216-73.8304 44.3904-5.632 2.304-12.0832 2.2528-17.7664-0.2048-149.9136-64.8704-303.5648-11.008-332.8512 0.4096-5.4784 2.1504-11.52 2.0992-16.9984-0.1536-12.3392-5.0688-44.2368-19.6096-73.984-44.4928-24.8832-20.8384-48.128-23.9104-66.7648-26.368-6.7584-0.8704-13.1584-1.7408-18.8928-3.328-11.7248-3.2256-22.7328-7.7312-31.8464-13.0048a4.18816 4.18816 0 0 0-1.0752-0.1536z" fill="#29343F" p-id="1547"></path><path d="M399.36 718.7456c-12.288 0-23.1936-4.3008-29.696-8.5504a10.1888 10.1888 0 0 1-2.9696-14.1824 10.2912 10.2912 0 0 1 14.1312-3.0208c2.5088 1.5872 24.4224 14.4896 42.9056-6.912 24.4736-28.2624 50.2784-66.6112 50.5344-66.9696 1.792-2.6112 4.6592-4.3008 7.8336-4.5056 3.1744-0.1024 6.2464 1.0752 8.3456 3.4304 22.1696 25.1392 55.552 62.208 60.2112 65.9968 0.8192 0.6144 1.9456 1.5872 3.2768 2.7648 8.9088 7.9872 20.0192 17.8688 39.3216-2.9184 3.84-4.1472 10.3424-4.4032 14.4896-0.5632s4.4032 10.3424 0.5632 14.4896c-21.8624 23.6032-44.7488 25.0368-67.9936 4.2496-0.8192-0.7168-1.4848-1.3312-1.9968-1.7408-5.6832-4.2496-36.7104-38.9632-54.4768-58.9312-9.6256 13.7728-27.1872 38.0416-44.5952 58.112-12.5952 14.4896-27.0336 19.2512-39.8848 19.2512z" fill="#29343F" p-id="1548"></path></svg>
\ No newline at end of file

src/modules/page6/element/table-study/TableStudy.vue

@@ -51,7 +51,7 @@ const columns: any[] = [
   },
 ];
 
-console.log('lll', t('No file selected'));
+console.log('翻译', t('No file selected'));
 
 const hasUploadXlsxMsg = ref(false);
 const uploadXlsxMsg = ref(t('No file selected'));
@@ -98,6 +98,7 @@ function uploadXlsx() {
     'accept',
     'application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
   );
+  // _input.setAttribute('accept', '');
 
   _input.onchange = async function (e: any) {
     const file = e.target.files[0];
@@ -105,37 +106,37 @@ function uploadXlsx() {
     const fileType = fileTypeArr[fileTypeArr.length - 1];
     // console.log('上传文件 >>>>', fileType, file);
 
-    let unit: string; // 单位
-    let size: number | string = 0;
-    if (file.size < 1000) {
-      unit = 'B';
-      size = file.size.toFixed(3);
-    } else {
-      const KB_size = file.size * 0.0009765625;
-      if (KB_size < 1000) {
-        unit = 'KB';
-        size = KB_size.toFixed(3);
+    if (excelTypeList.includes(fileType)) {
+      let unit: string; // 单位
+      let size: number | string = 0;
+      if (file.size < 1000) {
+        unit = 'B';
+        size = file.size.toFixed(3);
       } else {
-        const MB_size = KB_size * 0.0009765625;
-        if (MB_size < 1000) {
-          unit = 'MB';
-          size = MB_size.toFixed(2);
+        const KB_size = file.size * 0.0009765625;
+        if (KB_size < 1000) {
+          unit = 'KB';
+          size = KB_size.toFixed(3);
         } else {
-          const GB_size = MB_size * 0.0009765625;
-          if (GB_size <= 2) {
-            unit = 'GB';
-            size = GB_size.toFixed(2);
+          const MB_size = KB_size * 0.0009765625;
+          if (MB_size < 1000) {
+            unit = 'MB';
+            size = MB_size.toFixed(2);
           } else {
-            const msg = '文件过大，请选择不超过2GB的文件';
-            warn(msg);
-            console.warn(msg);
-            return;
+            const GB_size = MB_size * 0.0009765625;
+            if (GB_size <= 2) {
+              unit = 'GB';
+              size = GB_size.toFixed(2);
+            } else {
+              const msg = t('Select files smaller than 2GB');
+              warn(msg);
+              console.warn(msg);
+              return;
+            }
           }
         }
       }
-    }
 
-    if (excelTypeList.includes(fileType)) {
       uploadXlsxMsg.value = `${file.name}&nbsp;&nbsp;${size}${unit}`;
       hasUploadXlsxMsg.value = true;
       const data = await file.arrayBuffer();
@@ -144,7 +145,7 @@ function uploadXlsx() {
       const asd = utils.sheet_to_html(ws, { id: 'tabeller' });
       state.viewTableHtml = asd;
     } else {
-      const msg = `文件格式 ${fileType} 错误`;
+      const msg = t('File format error', { type: fileType });
       warn(msg);
       console.warn(msg);
     }
@@ -205,7 +206,7 @@ function exportTableData() {
     <div class="my-table q-mt-md q-gutter-sm">
       <div>
         <q-btn
-          label="导出表格数据"
+          :label="t('Export table data')"
           square
           push
           :icon="ICON.export"
@@ -223,7 +224,12 @@ function exportTableData() {
         <com-up-loader bg-color="#FAD4D4" dark multiple @on-ok="uploadOk" />
       </div>
       <div style="width: 400px; height: 232px" class="q-my-md">
-        <com-up-loader bg-color="#A4BE7B" multiple @on-ok="uploadOk" />
+        <com-up-loader
+          bg-color="#A4BE7B"
+          multiple
+          accept="image/*"
+          @on-ok="uploadOk"
+        />
       </div>
       <div>
         <div class="upload-xlsx-box">
@@ -254,7 +260,7 @@ function exportTableData() {
     <div class="table-box q-mt-md q-pb-md">
       <div class="q-mb-sm">
         <q-btn
-          label="导出库存表"
+          :label="t('Export inventory table')"
           square
           push
           :icon="ICON.export"

src/modules/page6/lang/en-US.ts

 export default {
-  hello: 'hello',
+  'Export table data': 'Export table data',
+  'Export inventory table': 'Export inventory table',
+  'Select files smaller than 2GB':
+    'The file is too large, please select a file not exceeding 2GB',
+  'File format error': 'File format `{type}` Error',
 };

src/modules/page6/lang/ja.ts

 export default {
-  hello: 'こんにちは',
+  'Export table data': 'テーブル データのエクスポート',
+  'Export inventory table': 'インベントリ テーブルのエクスポート',
+  'Select files smaller than 2GB':
+    'ファイルが大きすぎます。2GB以下のファイルを選択してください。',
+  'File format error': 'ファイル形式 `{type}` エラー',
 };

src/modules/page6/lang/ko.ts

 export default {
-  hello: '안녕하십니까',
+  'Export table data': '테이블 데이터 내보내기',
+  'Export inventory table': '인벤토리 테이블 내보내기',
+  'Select files smaller than 2GB':
+    '파일이 너무 큽니다. 2GB 이하의 파일을 선택하세요.',
+  'File format error': '파일 형식 `{type}` 오류',
 };

src/modules/page6/lang/zh-CN.ts

 export default {
-  hello: '你好',
+  'Export table data': '导出表格数据',
+  'Export inventory table': '导出库存表',
+  'Select files smaller than 2GB': '文件过大，请选择不超过2GB的文件',
+  'File format error': '文件格式 `{type}` 错误',
 };

src/modules/page6/lang/zh-TW.ts

 export default {
-  hello: '你好',
+  'Export table data': '導出表格數據',
+  'Export inventory table': '導出庫存表',
+  'Select files smaller than 2GB': '文件過大，請選擇不超過2GB的文件',
+  'File format error': '文件格式 `{type}` 錯誤',
 };

src/modules/page7/IndexPage.vue

@@ -14,6 +14,8 @@ import {
   PROVINCE_INNER_INFECTED,
   PROVINCE_OUT_INFECTED,
   OFFSHORE_INPUT_INFECTED,
+  LABEL_DATA,
+  COLOR_LIST,
 } from './config';
 import * as echarts from 'echarts';
 type EChartsOption = echarts.EChartsOption;
@@ -23,7 +25,6 @@ const chartMainRef = ref<any>(null);
 
 onMounted(() => {
   initDom();
-
   let abc = false;
   let type = Object.prototype.toString.call(abc);
   console.log(type);
@@ -35,19 +36,15 @@ function initDom() {
     tooltip: {
       trigger: 'axis',
     },
+    color: COLOR_LIST,
     legend: {
-      data: [
-        '本土感染者',
-        '省内感染者',
-        '外省来（返）蓉感染者',
-        '境外输入感染者',
-      ],
-      show: false,
+      data: LABEL_DATA,
+      show: true,
     },
     grid: {
-      left: '3%',
-      right: '4%',
-      bottom: '3%',
+      left: 80,
+      right: 100,
+      bottom: 80,
       top: 40,
       containLabel: true,
     },
@@ -61,37 +58,25 @@ function initDom() {
     },
     series: [
       {
-        name: '本土感染者',
+        name: LABEL_DATA[0],
         type: 'line',
         data: LOCAL_INFECTED,
-        itemStyle: {
-          color: '#E8110F',
-        },
       },
       {
-        name: '省内感染者',
+        name: LABEL_DATA[1],
         type: 'line',
         data: PROVINCE_INNER_INFECTED,
-        itemStyle: {
-          color: '#FBC723',
-        },
       },
       {
-        name: '外省来（返）蓉感染者',
+        name: LABEL_DATA[2],
         type: 'line',
         data: PROVINCE_OUT_INFECTED,
-        itemStyle: {
-          color: '#1B6AA5',
-        },
       },
 
       {
-        name: '境外输入感染者',
+        name: LABEL_DATA[3],
         type: 'line',
         data: OFFSHORE_INPUT_INFECTED,
-        itemStyle: {
-          color: '#333333',
-        },
       },
     ],
   };
@@ -100,47 +85,48 @@ function initDom() {
 }
 </script>
 <template>
-  <div>
+  <div class="box container-height">
     <div class="title">
       成都市新冠疫情 {{ X_DATA[X_DATA.length - 1] }} 新增情况
     </div>
     <div class="single-box">
-      <div class="single" style="color: #e8110f">
-        <div class="single-label">本土感染者</div>
+      <div class="single" :style="{ color: COLOR_LIST[0] }">
+        <div class="single-label">{{ LABEL_DATA[0] }}</div>
         <div class="single-value">
           + {{ LOCAL_INFECTED[LOCAL_INFECTED.length - 1] }}
         </div>
       </div>
-      <div class="single" style="color: #fbc723">
-        <div class="single-label">省内感染者</div>
+      <div class="single" :style="{ color: COLOR_LIST[1] }">
+        <div class="single-label">{{ LABEL_DATA[1] }}</div>
         <div class="single-value">
           + {{ PROVINCE_INNER_INFECTED[PROVINCE_INNER_INFECTED.length - 1] }}
         </div>
       </div>
-      <div class="single" style="color: #1b6aa5">
-        <div class="single-label">外省来（返）蓉感染者</div>
+      <div class="single" :style="{ color: COLOR_LIST[2] }">
+        <div class="single-label">{{ LABEL_DATA[2] }}</div>
         <div class="single-value">
           + {{ PROVINCE_OUT_INFECTED[PROVINCE_OUT_INFECTED.length - 1] }}
         </div>
       </div>
-      <div class="single" style="color: #333333">
-        <div class="single-label">境外输入感染者</div>
+      <div class="single" :style="{ color: COLOR_LIST[3] }">
+        <div class="single-label">{{ LABEL_DATA[3] }}</div>
         <div class="single-value">
           + {{ OFFSHORE_INPUT_INFECTED[OFFSHORE_INPUT_INFECTED.length - 1] }}
         </div>
       </div>
     </div>
     <div class="content">
-      <div
-        class="chart-main"
-        ref="chartMainRef"
-        style="width: 1400px; height: 700px"
-      ></div>
+      <div class="chart-main" ref="chartMainRef"></div>
     </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
+.box {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+}
 .title {
   text-align: center;
   margin: $padding-md auto;
@@ -150,6 +136,10 @@ function initDom() {
 .content {
   display: flex;
   justify-content: center;
+  flex: 1;
+  .chart-main {
+    flex: 1;
+  }
 }
 .single-box {
   display: flex;

src/modules/page7/config.ts

@@ -13,24 +13,45 @@ export const X_DATA = [
   '2022-11-19',
   '2022-11-20',
   '2022-11-21',
+  '2022-11-22',
+  '2022-11-23',
+  '2022-11-24',
+  '2022-11-25',
+  '2022-11-26',
+  '2022-11-27',
+  '2022-11-28',
+  '2022-11-29',
+  '2022-11-30',
 ];
 
 // 本土感染者
 export const LOCAL_INFECTED = [
-  30, 35, 50, 48, 57, 99, 133, 100, 121, 176, 211, 200, 316, 383,
+  30, 35, 50, 48, 57, 99, 133, 100, 121, 176, 211, 200, 316, 383, 473, 537, 591,
+  735, 770, 910, 829, 705, 764,
 ];
 
 // 省感染者
 export const PROVINCE_INNER_INFECTED = [
-  16, 22, 28, 29, 40, 79, 115, 82, 107, 157, 192, 184, 280, 346,
+  16, 22, 28, 29, 40, 79, 115, 82, 107, 157, 192, 184, 280, 346, 428, 509, 547,
+  690, 718, 853, 763, 660, 716,
 ];
 
 // 外省来（返）蓉感染者
 export const PROVINCE_OUT_INFECTED = [
-  14, 13, 22, 19, 17, 20, 18, 18, 14, 19, 19, 16, 36, 37,
+  14, 13, 22, 19, 17, 20, 18, 18, 14, 19, 19, 16, 36, 37, 45, 28, 44, 45, 52,
+  57, 66, 45, 48,
 ];
 
 // 境外输入感染者
 export const OFFSHORE_INPUT_INFECTED = [
-  7, 15, 26, 10, 5, 9, 9, 8, 21, 17, 17, 12, 20, 8,
+  7, 15, 26, 10, 5, 9, 9, 8, 21, 17, 17, 12, 20, 8, 13, 11, 13, 22, 16, 13, 15,
+  16, 20,
 ];
+
+export const LABEL_DATA = [
+  '本土感染者',
+  '省内感染者',
+  '外省来（返）蓉感染者',
+  '境外输入感染者',
+];
+export const COLOR_LIST = ['#E8110F', '#f29c2b', '#eec60a', '#95E1D3'];

src/modules/page8/IndexPage.vue

+<!--
+ * 草稿
+  -->
+<script setup lang="ts">
+// import { ref } from 'vue';
+import LoadingCircle from './element/LoadingCircle.vue';
+import ButtonHover from './element/ButtonHover.vue';
+import Text3D from './element/Text3D.vue';
+import LightedText from './element/LightedText.vue';
+import Rotate3D from './element/Rotate3D.vue';
+import TypewritersText from './element/TypewritersText.vue';
+import BoderAnimation from './element/BoderAnimation.vue';
+import RangeSlider from './element/RangeSlider.vue';
+import SearchInput from './element/SearchInput.vue';
+import SwiperCard from './element/SwiperCard.vue';
+</script>
+<template>
+  <div class="box">
+    <div class="row wrap items-center">
+      <div class="my-card">
+        <loading-circle />
+      </div>
+      <div class="my-card">
+        <button-hover />
+      </div>
+      <div class="my-card" style="width: 600px">
+        <Text3D />
+      </div>
+
+      <div class="column items-center">
+        <div class="my-card" style="width: 460px; height: 160px">
+          <lighted-text />
+        </div>
+        <div class="my-card" style="height: 140px">
+          <typewriters-text />
+        </div>
+      </div>
+
+      <div class="my-card" style="width: 680px; height: 360px">
+        <Rotate3D />
+      </div>
+
+      <div class="my-card">
+        <boder-animation />
+      </div>
+      <div class="my-card" style="width: 500px">
+        <range-slider />
+      </div>
+      <div class="my-card" style="width: 480px">
+        <search-input />
+      </div>
+      <div class="my-card"></div>
+      <div class="row no-wrap">
+        <div class="my-card"></div>
+
+        <div class="my-card" style="width: 900px; height: 500px">
+          <swiper-card />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.box {
+  padding: $padding-sm;
+}
+.my-card {
+  margin: $padding-sm;
+  width: 380px;
+  height: 240px;
+  background-color: #fff;
+  border-radius: 8px;
+  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
+  scale: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  transition: all 0.4s;
+  &:hover {
+    box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
+    // scale: 1.1;
+    z-index: 99;
+  }
+}
+</style>

src/modules/page8/element/BoderAnimation.vue

+<script setup lang="ts"></script>
+<template>
+  <div class="content fit center">
+    <div class="box">
+      <span></span>
+      <h2>02</h2>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@import url('https://fonts.googleapis.com/css2?family=Fjalla+One&display=swap');
+@keyframes animate {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+.content {
+  background-color: #0c1022;
+  font-family: 'Fjalla One', cursive;
+}
+.box {
+  position: relative;
+  width: 340px;
+  height: 195px;
+  background-color: rgba(0, 0, 0, 0.75);
+  border-radius: 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+
+  &::before {
+    content: '';
+    position: absolute;
+    width: 600px;
+    height: 400px;
+    background-image: conic-gradient(
+      transparent,
+      transparent,
+      transparent,
+      #00ccff
+    );
+    animation: animate 3s linear infinite;
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    width: 600px;
+    height: 400px;
+    background-image: conic-gradient(
+      transparent,
+      transparent,
+      transparent,
+      #d400d4
+    );
+    animation: animate 3s linear infinite;
+    animation-delay: -1.5s;
+  }
+
+  span {
+    position: absolute;
+    inset: 5px;
+    background: #0c1022;
+    border-radius: 8px;
+    z-index: 1;
+  }
+  h2 {
+    position: relative;
+    z-index: 2;
+    color: #fff;
+    font-size: 8em;
+  }
+}
+</style>

src/modules/page8/element/ButtonHover.vue

+<script setup lang="ts"></script>
+<template>
+  <div class="content fit center">
+    <button class="btn">Hover To See Magic</button>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@keyframes glow {
+  from {
+    background-position: 0%;
+  }
+  to {
+    background-position: 260%;
+  }
+}
+.content {
+  font-family: 'Arial', sans-serif;
+  background-color: #100f13;
+}
+button {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  outline: 0;
+  box-sizing: border-box;
+}
+.btn {
+  cursor: pointer;
+  position: relative;
+  padding: 10px 18px;
+  font-size: 16px;
+  text-transform: uppercase;
+  color: #ffffff;
+  background-color: rgba(255, 255, 255, 0.1);
+  border: 3px solid rgba(255, 255, 255, 0.2);
+  border-radius: 10px;
+  transition: 0.4s;
+
+  &:hover {
+    z-index: 1;
+    border-color: transparent;
+    background: linear-gradient(
+      90deg,
+      #fbb454,
+      #f7ec09,
+      #3ec70b,
+      #3b44f6,
+      #a149fa,
+      #fbb454
+    );
+    background-size: 260%;
+    box-shadow: 0 0 15px rgb(2, 4, 24);
+    animation: glow 8s linear forwards;
+
+    &::before {
+      opacity: 1;
+      z-index: -1;
+    }
+  }
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: -1px;
+    left: -1px;
+    right: -1px;
+    bottom: -1px;
+    background: inherit;
+    filter: blur(26px);
+    opacity: 0;
+    transition: 0.4s ease-out;
+  }
+}
+</style>

src/modules/page8/element/LightedText.vue

+<script setup lang="ts"></script>
+<template>
+  <div class="content fit center">
+    <h2>
+      <span style="--i: 1">H</span>
+      <span style="--i: 2">a</span>
+      <span style="--i: 3">p</span>
+      <span style="--i: 4">p</span>
+      <span style="--i: 5">y</span>
+      <span style="--i: 7; margin-left: 10px">D</span>
+      <span style="--i: 8">i</span>
+      <span style="--i: 9">w</span>
+      <span style="--i: 10">a</span>
+      <span style="--i: 11">l</span>
+      <span style="--i: 12">i</span>
+    </h2>
+  </div>
+</template>
+<style lang="scss" scoped>
+@keyframes animate {
+  0% {
+    color: #fff;
+    filter: blur(0px) hue-rotate(0deg);
+    text-shadow: 0 0 10px #00b3ff, 0 0 20px #00b3ff, 0 0 40px #00b3ff,
+      0 0 80px #00b3ff, 0 0 120px #00b3ff, 0 0 200px #00b3ff, 0 0 300px #00b3ff;
+  }
+
+  30%,
+  70% {
+    color: #fff;
+    filter: blur(0px) hue-rotate(360deg);
+    text-shadow: 0 0 10px #00b3ff, 0 0 20px #00b3ff, 0 0 40px #00b3ff,
+      0 0 80px #00b3ff, 0 0 120px #00b3ff, 0 0 200px #00b3ff, 0 0 300px #00b3ff;
+  }
+
+  100% {
+    color: transparent;
+    box-shadow: none;
+    filter: blur(0px) hue-rotate(0deg);
+  }
+}
+.content {
+  font-family: 'Ink Free', sans-serif;
+  background: #111;
+
+  h2 {
+    color: transparent;
+    span {
+      animation: animate 3s linear infinite;
+      animation-delay: calc(0.1s * var(--i));
+    }
+  }
+}
+</style>

src/modules/page8/element/LoadingCircle.vue

+<script setup lang="ts"></script>
+<template>
+  <div class="content fit center">
+    <div class="loading center">
+      <span>Loading...</span>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@keyframes a1 {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@keyframes a2 {
+  to {
+    transform: rotate(-360deg);
+  }
+}
+.content {
+  background-color: #34495e;
+  font-family: 'Comic Sans MS', sans-serif;
+}
+.loading {
+  width: 180px;
+  height: 180px;
+  box-sizing: border-box;
+  border-radius: 50%;
+  border-top: 10px solid #ff6d28;
+  position: relative;
+  animation: a1 2s linear infinite;
+
+  > span {
+    color: #fff;
+    animation: a2 2s linear infinite;
+  }
+
+  &::before,
+  &::after {
+    content: '';
+    width: 180px;
+    height: 180px;
+    box-sizing: border-box;
+    border-radius: 50%;
+    position: absolute;
+    left: 0;
+    top: -10px;
+  }
+
+  &::before {
+    border-top: 10px solid #0096ff;
+    transform: rotate(120deg);
+  }
+
+  &::after {
+    border-top: 10px solid #ff4a4a;
+    transform: rotate(240deg);
+  }
+}
+</style>

src/modules/page8/element/RangeSlider.vue

+<script setup lang="ts">
+import { ref } from 'vue';
+const rangeValue = ref(25);
+function onChange(e: any) {
+  rangeValue.value = e.target.value;
+}
+</script>
+<template>
+  <div class="content fit center">
+    <div class="box">
+      <input
+        type="range"
+        class="range"
+        value="25"
+        min="0"
+        max="100"
+        @mousemove="onChange"
+        @change="onChange"
+      />
+      <span id="rangeValue">{{ rangeValue }}</span>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.content {
+  background: #edf1f4;
+}
+.box {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 20px;
+  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.05), #edf1f4);
+  border-radius: 40px;
+  box-shadow: 15px 15px 20px rgba(0, 0, 0, 0.1), -15px -15px 20px #fff;
+}
+.range {
+  width: 360px;
+  height: 15px;
+  appearance: none;
+  background: #edf1f4;
+  outline: none;
+  border-radius: 15px;
+  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1), -5px -5px 10px #fff;
+  inset: 5px 5px 5px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+
+  &::-webkit-slider-thumb {
+    appearance: none;
+    width: 15px;
+    height: 15px;
+    background: #fff;
+    border-radius: 50%;
+    border: 2px solid #f7b32d;
+    box-shadow: -367px 0 0 360px #f7b32d;
+    cursor: pointer;
+  }
+}
+#rangeValue {
+  position: relative;
+  text-align: center;
+  width: 50px;
+  font-size: 1.25em;
+  font-weight: 500;
+  color: #fff;
+  background: #f8bc46;
+  margin-left: 15px;
+  border-radius: 25px;
+
+  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1), -5px -5px 10px #fff,
+    inset 5px 5px 10px rgba(0, 0, 0, 0.1),
+    inset -5px -5px 5px rgba(255, 255, 255, 0.25);
+}
+</style>

src/modules/page8/element/Rotate3D.vue

+<script setup lang="ts"></script>
+<template>
+  <div class="content fit center">
+    <section>
+      <div><img src="../imgs/1.png" alt="" /></div>
+      <div><img src="../imgs/2.jpg" alt="" /></div>
+      <div><img src="../imgs/3.jpg" alt="" /></div>
+      <div><img src="../imgs/4.jpg" alt="" /></div>
+      <div><img src="../imgs/5.jpg" alt="" /></div>
+      <div><img src="../imgs/6.jpg" alt="" /></div>
+    </section>
+  </div>
+</template>
+<style lang="scss" scoped>
+@keyframes rotate {
+  0% {
+    transform: rotateY(0);
+  }
+  100% {
+    transform: rotateY(360deg);
+  }
+}
+.content {
+  background: #000;
+  // 视距
+  perspective: 900px;
+}
+section {
+  position: relative;
+  width: 200px;
+  height: 140px;
+  cursor: pointer;
+  transform-style: preserve-3d;
+  animation: rotate 20s linear infinite;
+
+  div {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    text-align: center;
+    // 设置元素倒影效果 below 是倒影效果在元素下方
+    // 15px是元素和倒影的距离
+    // 后面的属性设置的倒影背景渐变
+    -webkit-box-reflect: below 15px -webkit-linear-gradient(transparent 10%, rgba(255, 255, 255, 0.3));
+    img {
+      width: 100%;
+      height: 100%;
+    }
+
+    &:nth-child(1) {
+      transform: translateZ(200px);
+    }
+    &:nth-child(2) {
+      transform: rotateY(60deg) translateZ(200px);
+    }
+    &:nth-child(3) {
+      transform: rotateY(120deg) translateZ(200px);
+    }
+    &:nth-child(4) {
+      transform: rotateY(180deg) translateZ(200px);
+    }
+    &:nth-child(5) {
+      transform: rotateY(240deg) translateZ(200px);
+    }
+    &:nth-child(6) {
+      transform: rotateY(300deg) translateZ(200px);
+    }
+  }
+  &:hover {
+    // 停止动画
+    animation-play-state: paused;
+  }
+}
+</style>

src/modules/page8/element/SearchInput.vue

+<script setup lang="ts">
+import { ref } from 'vue';
+
+const inputRef = ref<any>(null);
+const isActive = ref(false);
+
+function iconClick() {
+  isActive.value = !isActive.value;
+}
+
+function onClear() {
+  inputRef.value.value = null;
+}
+
+function onSerch() {
+  console.log('onSerch', inputRef.value.value);
+}
+</script>
+
+<template>
+  <div class="content fit center">
+    <div class="search" :class="{ active: isActive }">
+      <div class="icon" @click="iconClick"></div>
+      <div class="input">
+        <input
+          type="text"
+          ref="inputRef"
+          placeholder="搜索..."
+          @keyup.enter="onSerch"
+        />
+      </div>
+      <span class="clear" @click="onClear"></span>
+    </div>
+  </div>
+</template>
+<style lang="scss" scoped>
+.content {
+  background: #d3e397;
+}
+.search {
+  position: relative;
+  width: 60px;
+  height: 60px;
+  background: #fff;
+  border-radius: 60px;
+  transition: 0.4s;
+  box-shadow: 0 0 5px #bad35b;
+  overflow: hidden;
+  .icon {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 60px;
+    height: 60px;
+    background: #fff;
+    border-radius: 60px;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
+    cursor: pointer;
+
+    &::before {
+      content: '';
+      position: absolute;
+      width: 20px;
+      height: 20px;
+      border: 3px solid #d3e397;
+      border-radius: 50%;
+      transform: translate(-4px, -4px);
+    }
+
+    &::after {
+      content: '';
+      position: absolute;
+      width: 3px;
+      height: 18px;
+      background: #d3e397;
+      border-radius: 50%;
+      transform: translate(7px, 7px) rotate(315deg);
+    }
+  }
+
+  .input {
+    position: relative;
+    width: 300px;
+    height: 60px;
+    left: 60px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    input {
+      position: absolute;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      border: none;
+      outline: none;
+      font-size: 18px;
+      padding: 10px 0;
+    }
+  }
+
+  .clear {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 20px;
+    height: 20px;
+    right: 20px;
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 50%;
+    transition: 0.25s;
+    &::before {
+      position: absolute;
+      content: '';
+      width: 1px;
+      height: 15px;
+      transform: rotate(45deg);
+      background-color: #999;
+    }
+    &::after {
+      position: absolute;
+      content: '';
+      width: 1px;
+      height: 15px;
+      transform: rotate(316deg);
+      background-color: #999;
+    }
+    &:hover {
+      background-color: rgba(0, 0, 0, 0.05);
+    }
+  }
+}
+.active {
+  width: 360px;
+}
+</style>

src/modules/page8/element/SwiperCard.vue

+<script setup lang="ts">
+import { onMounted } from 'vue';
+import Swiper from 'swiper/bundle';
+
+onMounted(() => {
+  // init Swiper:
+  new Swiper('.mySwiper', {
+    effect: 'coverflow',
+    grabCursor: true,
+    centeredSlides: true,
+    slidesPerView: 'auto',
+    coverflowEffect: {
+      rotate: 0,
+      stretch: 0,
+      depth: 100,
+      modifier: 2,
+      slideShadows: true,
+    },
+    loop: true,
+  });
+});
+</script>
+<template>
+  <div class="content fit center">
+    <div class="section">
+      <!-- Slider main container -->
+      <div class="swiper mySwiper">
+        <!-- Additional required wrapper -->
+        <div class="swiper-wrapper">
+          <!-- Slides -->
+          <div class="swiper-slide">
+            <div class="mycard">
+              <div class="item">
+                <p>
+                  远游越山川，山川修且广。 <br />
+                  振策陟崇丘，案辔遵平莽。<br />
+                  夕息抱影寐，朝徂衔思往。 <br />
+                  顿辔倚嵩岩，侧听悲风响。<br />
+                  清露坠素辉，明月一何朗。 <br />
+                  抚枕不能寐，振衣独长想。
+                </p>
+                <div class="details">
+                  <h3>
+                    <span>晋⋅ 陆机</span><br />
+                    赴洛道中作二首 · 其二
+                  </h3>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="swiper-slide">
+            <div class="mycard">
+              <div class="item">
+                <p>
+                  韶华争肯偎人住？已是滔滔去。 <br />
+                  西风无赖过江来，<br />
+                  历尽千山万水几时回？ <br />
+                  秋声带叶萧萧落，莫响城头角！<br />
+                  浮云遮月不分明， <br />
+                  谁挽长江一洗放天青？
+                </p>
+                <div class="details">
+                  <h3>
+                    <span>清⋅ 董士锡</span><br />
+                    虞美人 · 韶华争肯偎人住
+                  </h3>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="swiper-slide">
+            <div class="mycard">
+              <div class="item">
+                <p>
+                  秦孝公据崤函之固，拥雍州之地， <br />
+                  君臣固守以窥周室，<br />
+                  有席卷天下，包举宇内， <br />
+                  囊括四海之意，并吞八荒之心。<br />
+                  当是时也，商君佐之，<br />
+                  内立法度，务耕织，<br />
+                  修守战之具；<br />
+                  外连衡而斗诸侯。<br />
+                  于是秦人拱手而取西河之外。<br />
+                </p>
+                <div class="details">
+                  <h3>
+                    <span>汉⋅ 贾谊</span><br />
+                    过秦论
+                  </h3>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="swiper-slide">
+            <div class="mycard">
+              <div class="item">
+                <p>
+                  秦孝公据崤函之固，拥雍州之地， <br />
+                  君臣固守以窥周室，<br />
+                  有席卷天下，包举宇内， <br />
+                  囊括四海之意，并吞八荒之心。<br />
+                  当是时也，商君佐之，<br />
+                  内立法度，务耕织，<br />
+                  修守战之具；<br />
+                  外连衡而斗诸侯。<br />
+                  于是秦人拱手而取西河之外。<br />
+                </p>
+                <div class="details">
+                  <h3>
+                    <span>汉⋅ 贾谊</span><br />
+                    过秦论
+                  </h3>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="swiper-slide">
+            <div class="mycard">
+              <div class="item">
+                <p>
+                  有一美人兮，见之不忘。 <br />
+                  一日不见兮，思之如狂。<br />
+                  凤飞翱翔兮，四海求凰。 <br />
+                  无奈佳人兮，不在东墙。<br />
+                  将琴代语兮，聊写衷肠。<br />
+                  何日见许兮，慰我彷徨。<br />
+                  愿言配德兮，携手相将。<br />
+                  不得於飞兮，使我沦亡。<br />
+                </p>
+                <div class="details">
+                  <h3>
+                    <span>汉⋅ 司马相如</span><br />
+                    凤求凰
+                  </h3>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.content {
+  :deep(.swiper-3d .swiper-slide-shadow-left) {
+    background-image: none;
+  }
+  :deep(.swiper-3d .swiper-slide-shadow-right) {
+    background-image: none;
+  }
+  :deep(.swiper-slide-active) {
+    filter: blur(0);
+    background-color: #fff;
+  }
+}
+.section {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  background-color: #7abed1;
+}
+.swiper {
+  width: 100%;
+  padding-top: 40px;
+  padding-bottom: 40px;
+}
+
+.swiper-slide {
+  background-position: center;
+  background-size: cover;
+  width: 280px;
+  height: 370px;
+  overflow: hidden;
+  background-color: #d1ebff;
+  border-radius: 10px;
+  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2);
+  filter: blur(4px);
+}
+.mycard {
+  box-sizing: border-box;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  padding: 20px;
+  color: #999;
+
+  display: grid;
+  align-items: center;
+
+  .details {
+    display: flex;
+    align-items: center;
+    justify-content: end;
+    margin-top: 10px;
+
+    h3 {
+      font-size: 16px;
+      font-weight: 400;
+      letter-spacing: 1px;
+      color: #7abed1;
+      line-height: 1.1em;
+      text-align: right;
+      margin-bottom: 0px;
+      span {
+        font-size: 12px;
+        color: #666;
+      }
+    }
+  }
+}
+</style>

src/modules/page8/element/Text3D.vue

+<script setup lang="ts"></script>
+<template>
+  <div class="content fit center">
+    <div class="container">
+      <div class="text" style="--j: 0">
+        <span style="--i: 0">2</span>
+        <span style="--i: 1">你</span>
+        <span style="--i: 2">4</span>
+        <span style="--i: 3">5</span>
+      </div>
+      <div class="text" style="--j: 1">
+        <span style="--i: 0">0</span>
+        <span style="--i: 1">好</span>
+        <span style="--i: 2">2</span>
+        <span style="--i: 3">3</span>
+      </div>
+      <div class="text" style="--j: 2">
+        <span style="--i: 0">2</span>
+        <span style="--i: 1">明</span>
+        <span style="--i: 2">4</span>
+        <span style="--i: 3">5</span>
+      </div>
+      <div class="text" style="--j: 3">
+        <span style="--i: 0">2</span>
+        <span style="--i: 1">天</span>
+        <span style="--i: 2">4</span>
+        <span style="--i: 3">5</span>
+      </div>
+    </div>
+  </div>
+</template>
+<style lang="scss" scoped>
+.content {
+  background: #3d3d3d;
+  font-family: 'Impact', sans-serif;
+}
+.container {
+  display: flex;
+  transform-style: preserve-3d;
+  gap: 10px;
+  transform: rotateY(30deg) rotateX(10deg);
+  .text {
+    position: relative;
+    width: 100px;
+    height: 100px;
+    transform-style: preserve-3d;
+    transition: 2.5s ease-in-out;
+    transition-delay: calc(0.25s * var(--j));
+    span {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: linear-gradient(#434343, #535353);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-size: 4em;
+      color: #fff;
+      transform-style: preserve-3d;
+      transform: rotateX(calc(90deg * var(--i))) translateZ(50px);
+    }
+    &::before {
+      content: '';
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      background: #373737;
+      transform-origin: left;
+      transform: rotateY(90deg) translateX(-50px);
+    }
+    &:last-child {
+      span {
+        background: linear-gradient(#29c040, #32ed4e);
+        color: #333;
+      }
+      &::before {
+        background: #29ab3c;
+      }
+    }
+  }
+  &:hover {
+    .text {
+      transform: rotateX(-450deg);
+      &:last-child {
+        transform: rotateX(630deg);
+      }
+    }
+  }
+}
+</style>

src/modules/page8/element/TypewritersText.vue

+<script setup lang="ts"></script>
+<template>
+  <div class="content fit center">
+    <p class="line">出来混，迟早是要胖的。</p>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@keyframes grow {
+  from {
+    width: 0;
+  }
+  to {
+    width: 200px;
+  }
+}
+@keyframes blink {
+  from {
+    border-right-color: #eee;
+  }
+  to {
+    border-right-color: transparent;
+  }
+}
+.content {
+  font-family: '宋体', cursive;
+  background-color: #222;
+  color: #eee;
+
+  &:hover {
+    .line {
+      animation: grow 1.5s steps(11) 1s normal both,
+        blink 700ms steps(11) infinite normal;
+    }
+  }
+}
+.line {
+  font-size: 18px;
+  width: 200px;
+  border-right: 2px solid #eee;
+  text-align: center;
+  white-space: nowrap;
+  overflow: hidden;
+  animation: blink 700ms steps(11) infinite normal;
+}
+</style>

src/router/routes.ts

@@ -82,6 +82,16 @@ const routes: RouteRecordRaw[] = [
               keepalive: true,
             },
           },
+          {
+            path: 'page8',
+            name: 'PAGE8',
+            component: () => import('../modules/page8/IndexPage.vue'),
+            meta: {
+              title: '动画',
+              permission: ['*'],
+              keepalive: true,
+            },
+          },
         ],
       },
     ],

tsconfig.json

@@ -3,7 +3,7 @@
   "compilerOptions": {
     "baseUrl": ".",
     "paths": {
-      "@/*": ["./src/*"]
+      "@/*": ["src/*"]
     }
   }
 }

yarn.lock

@@ -2749,6 +2749,13 @@
     "domhandler" "^4.2.0"
     "entities" "^2.0.0"
 
+"dom7@^4.0.4":
+  "integrity" "sha512-DSSgBzQ4rJWQp1u6o+3FVwMNnT5bzQbMb+o31TjYYeRi05uAcpF8koxdfzeoe5ElzPmua7W7N28YJhF7iEKqIw=="
+  "resolved" "https://registry.npmjs.org/dom7/-/dom7-4.0.4.tgz"
+  "version" "4.0.4"
+  dependencies:
+    "ssr-window" "^4.0.0"
+
 "domelementtype@^2.0.1", "domelementtype@^2.2.0":
   "integrity" "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw=="
   "resolved" "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz"
@@ -5502,6 +5509,11 @@
     "select-hose" "^2.0.0"
     "spdy-transport" "^3.0.0"
 
+"ssr-window@^4.0.0", "ssr-window@^4.0.2":
+  "integrity" "sha512-ISv/Ch+ig7SOtw7G2+qkwfVASzazUnvlDTwypdLoPoySv+6MqlOV10VwPSE6EWkGjhW50lUmghPmpYZXMu/+AQ=="
+  "resolved" "https://registry.npmjs.org/ssr-window/-/ssr-window-4.0.2.tgz"
+  "version" "4.0.2"
+
 "stable@^0.1.8":
   "integrity" "sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w=="
   "resolved" "https://registry.npmjs.org/stable/-/stable-0.1.8.tgz"
@@ -5597,6 +5609,14 @@
     "picocolors" "^1.0.0"
     "stable" "^0.1.8"
 
+"swiper@^8.4.5":
+  "integrity" "sha512-zveyEFBBv4q1sVkbJHnuH4xCtarKieavJ4SxP0QEHvdpPLJRuD7j/Xg38IVVLbp7Db6qrPsLUePvxohYx39Agw=="
+  "resolved" "https://registry.npmjs.org/swiper/-/swiper-8.4.5.tgz"
+  "version" "8.4.5"
+  dependencies:
+    "dom7" "^4.0.4"
+    "ssr-window" "^4.0.2"
+
 "table@6.8.0":
   "integrity" "sha512-s/fitrbVeEyHKFa7mFdkuQMWlH1Wgw/yEXMt5xACT4ZpzWFluehAxRtUUQKPuWhaLAWhFcVx6w3oC8VKaUfPGA=="
   "resolved" "https://registry.npmjs.org/table/-/table-6.8.0.tgz"