diff --git a/src/App.vue b/src/App.vue
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..07cafc9aeda29b9e65368c8941ed09db5cabfa73 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -0,0 +1,118 @@
+<script setup>
+    
+import GameChart from './components/GameChart.vue'
+import SearchGrade from './components/SearchGrade.vue'
+import Draw from './components/draw/Draw.vue'
+import Commit from './components/commit/Commit.vue'
+import { reactive, onBeforeMount,onMounted } from 'vue';
+import html2canvas from 'html2canvas';
+
+// state
+const state = reactive({
+  current: '评论'
+})
+
+/** 下载图片 */
+const downloadBase64 = (content,fileName) => {
+  const base64ToBlob = function (code) {
+    let parts = code.split(';base64,');
+    let contentType = parts[0].split(':')[1];
+    let raw = window.atob(parts[1]);
+    let rawLength = raw.length;
+    let uInt8Array = new Uint8Array(rawLength);
+    for (let i = 0; i < rawLength; ++i) {
+      uInt8Array[i] = raw.charCodeAt(i);
+    }
+
+    return new Blob([uInt8Array], {
+      type: contentType
+    });
+  };
+  let aLink = document.createElement('a');
+  let blob = base64ToBlob(content);
+  aLink.download = fileName + '.png';
+  aLink.href = URL.createObjectURL(blob);
+  aLink.click();
+};
+
+// 截图
+const shotAction=()=>{
+    html2canvas(document.getElementById('render-id'),{
+        useCORS:true,
+        proxy:'inscode.csdn.net',
+        allowTaint:true,
+        scale:2,
+    }).then(function(canvas) {
+    console.log('canvas',canvas)
+    const base64 = canvas.toDataURL().replace(/^data:image\/(png|jpg);base64,/, '');
+    const base64img = `data:image/png;base64,${base64}`;
+    downloadBase64(base64img, state.current);
+    // document.body.appendChild(canvas);
+});
+}
+
+onMounted(()=>{
+    console.log('html2canvas',html2canvas)
+})
+
+// 之前
+onBeforeMount(() => {
+  const href = window.location.href
+  const data = {}
+  const urlArray = href.split('?')
+  const urlLength = urlArray.length
+  if (urlLength > 1) {
+    urlArray[urlLength - 1].split('&').forEach(item => {
+      const itemArray = item.split('=')
+      const key = itemArray[0]
+      const value = itemArray[1]
+      data[key] = value
+    })
+    console.log('urlArray',urlArray)
+    if (data['type'] = 'csdn_game') {
+      state.current = '新星赛道选手信息可视化'
+    }
+    else if(data['type'] = 'csdn_grade'){
+      state.current = 'grade查询分数'
+    }
+    else if(data['type'] = 'draw'){
+      state.current = '抽奖'
+    }
+    else if(data['type'] = 'commit'){
+      state.current = '评论'
+    }
+  }
+})
+</script>
+
+<template>
+    <div class="container-main">
+        <div style="text-align: center;padding: 20px;">
+            <a-radio-group v-model:value="state.current" name="radioGroup">
+                <a-radio value="grade查询分数">csdn查询分数</a-radio>
+                <a-radio value="新星赛道选手信息可视化">csdn新星赛道可视化</a-radio>
+                <a-radio value="抽奖">随机抽奖</a-radio>
+                <a-radio value="评论">csdn分析评论</a-radio>
+            </a-radio-group>
+            <a-button type="primary" @click="shotAction">
+                截图
+            </a-button>
+        </div>
+        <div id="render-id">
+            <SearchGrade v-if="state.current === 'grade查询分数'" />
+            <GameChart v-else-if="state.current === '新星赛道选手信息可视化'" />
+            <Commit v-else-if="state.current === '评论'" />
+            <Draw v-else />
+        </div>
+    </div>
+</template>
+
+<style scoped>
+    .container-main {
+        position: absolute;
+        width: 100vw;
+        height: 100vh;
+        padding: 10px;
+        margin: 0;
+    }
+</style>