五一咯

Anuluca · May 22, 2023 · fe149ef · fe149ef
1 parent 148d48a
commit fe149ef
Show file tree

Hide file tree

Showing 32 changed files with 1,020 additions and 402 deletions.
diff --git a/README.md b/README.md
@@ -2,6 +2,19 @@
 
 基于 Vue3+Typescript 开发的个人博客网站
 
+### 使用的node版本
+
+### 推到git-pages
+cd ./dist
+git pull
+git rm -r --cached .
+git add .
+git commit -m 'a'
+git push -u 
+
+注意：不要修改CNAME文件
+CNAME文件为第一次给github pages配置Custom domain时自动生成的文件，如果删除会导致Custom domain设置清空
+
 ## Recommended IDE Setup
 
 [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
@@ -17,10 +30,6 @@ If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has a
    2. Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
 2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
 
-## Customize configuration
-
-See [Vite Configuration Reference](https://vitejs.dev/config/).
-
 ## Project Setup
 
 ```sh

diff --git a/components.d.ts b/components.d.ts
@@ -16,6 +16,7 @@ declare module '@vue/runtime-core' {
     ElCarouselItem: typeof import('element-plus/es')['ElCarouselItem']
     ElContainer: typeof import('element-plus/es')['ElContainer']
     ElHeader: typeof import('element-plus/es')['ElHeader']
+    ElIcon: typeof import('element-plus/es')['ElIcon']
     ElImage: typeof import('element-plus/es')['ElImage']
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']

diff --git a/dist/assets/bilibili_profile-45030be1.png b/dist/assets/bilibili_profile-45030be1.png
diff --git a/dist/assets/github_profile-ad6d4d5b.png b/dist/assets/github_profile-ad6d4d5b.png
diff --git a/dist/assets/index-4bee7620.css b/dist/assets/index-4bee7620.css
diff --git a/dist/assets/index-617cb813.js b/dist/assets/index-617cb813.js
diff --git a/dist/assets/index-9bb860f6.css b/dist/assets/index-9bb860f6.css
diff --git a/dist/assets/index-faab7234.js b/dist/assets/index-faab7234.js
diff --git a/dist/assets/twitter_profile-5de7debb.png b/dist/assets/twitter_profile-5de7debb.png
diff --git a/dist/index.html b/dist/index.html
@@ -5,8 +5,8 @@
     <link rel="icon" href="./favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>即将到站</title>
-    <script type="module" crossorigin src="./assets/index-617cb813.js"></script>
-    <link rel="stylesheet" href="./assets/index-4bee7620.css">
+    <script type="module" crossorigin src="./assets/index-faab7234.js"></script>
+    <link rel="stylesheet" href="./assets/index-9bb860f6.css">
   </head>
   <body>
     <div id="app"></div>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
+    "@element-plus/icons-vue": "^2.1.0",
     "@vueuse/core": "^9.13.0",
     "echarts": "^5.4.2",
     "element-plus": "^2.2.33",

diff --git a/src/App.vue b/src/App.vue
@@ -4,10 +4,22 @@ import FooterCom from '@/components/FooterCom/index.vue'
 import BackController from '@/components/BackController/index.vue'
 import { onMounted } from 'vue'
 import { visualState } from './stores'
+import { useRouter, useRoute } from 'vue-router'
 
+const $router = useRouter() // 这是路由跳转的
 const visualStateStore = visualState()
 
+const isMobile = () => {
+  let flag = navigator.userAgent.match(
+    /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
+  )
+  return flag
+}
+
 onMounted(() => {
+  if (isMobile()) {
+    $router.push('mobileTemp')
+  }
   // 主题判断
   if (localStorage.getItem('theme')) {
     visualStateStore.setTheme(localStorage.getItem('theme'))

diff --git a/src/assets/img/bilibili_profile.png b/src/assets/img/bilibili_profile.png
diff --git a/src/assets/img/github_profile.png b/src/assets/img/github_profile.png
diff --git a/src/assets/img/nintendoSwitchTitle/totk.jpg b/src/assets/img/nintendoSwitchTitle/totk.jpg
diff --git a/src/assets/img/twitter_profile.png b/src/assets/img/twitter_profile.png
diff --git a/src/components/BackStars/index.less b/src/components/BackStars/index.less
@@ -13,10 +13,10 @@
 .dawn.body-color {
   background: radial-gradient(
     220% 105% at top center,
-    #182644 10%,
-    #53355a 40%,
-    #9c5b6e 65%,
-    #c0c092
+    #162649 10%,
+    #65366f 40%,
+    #ae546f 65%,
+    #c5c581
   );
 }
 

diff --git a/src/components/FooterCom/index.less b/src/components/FooterCom/index.less
@@ -9,7 +9,7 @@
   z-index: 999;
   display: flex;
   justify-content: center;
-  overflow: hidden;
+  // overflow: hidden;
   transition: all 0.2s;
   > div {
     // border: 1px solid red;
@@ -99,17 +99,20 @@
     min-width: 595px;
     .text-links {
       margin-left: 15px;
-      transform: scale(1, 0.74);
       transition: all 1s;
       display: inline-block;
-      .el-button {
+      > span,
+      > .el-button {
+        position: relative;
         margin: 0 1px;
         span {
+          transform: scale(1, 0.74);
           font-family: 'cusContext';
           font-size: 19px;
           line-height: 20px;
         }
       }
+
       .is-disabled {
         margin-left: 15px;
       }
@@ -148,6 +151,69 @@
       }
     }
   }
+  .TWITTER_detail,
+  .WEIBO_detail,
+  .BILIBILI_detail,
+  .EMAIL_detail,
+  .GITHUB_detail {
+    position: absolute;
+    display: block;
+    bottom: -140px;
+    z-index: -1;
+    opacity: 0;
+    cursor: pointer;
+    // bottom: 40px;
+    transform: translateX(-50%) !important;
+    left: 50%;
+    width: 250px;
+    height: 100px;
+    transition: all 0.4s;
+    box-shadow: 0 1px 15px #0000003b;
+    img {
+      width: 250px;
+      height: 100px;
+    }
+  }
+  .BILIBILI_detail {
+    width: 280px !important;
+    height: 280px !important;
+    bottom: -300px;
+    img {
+      width: 280px !important;
+      height: 280px !important;
+    }
+  }
+  .GITHUB_detail {
+    width: 148px !important;
+    height: 32px !important;
+    border-radius: 16px;
+    img {
+      width: 148px !important;
+      height: 32px !important;
+      border-radius: 16px;
+    }
+  }
+  .TWITTER_detail {
+    width: 246px !important;
+    height: 62px !important;
+    border-radius: 31px;
+    img {
+      width: 246px !important;
+      height: 62px !important;
+      border-radius: 31px;
+    }
+  }
+  .WEIBO_detail {
+    width: 346px !important;
+    height: 500px !important;
+    background-color: red;
+    bottom: -540px;
+    overflow: hidden;
+    img {
+      width: 346px !important;
+      height: 500px !important;
+    }
+  }
 }
 .full-footer {
   width: 100vw;

diff --git a/src/components/FooterCom/index.vue b/src/components/FooterCom/index.vue
@@ -6,6 +6,9 @@ import { visualState } from '@/stores'
 import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
 import 'element-plus/theme-chalk/index.css'
 import { useI18n } from 'vue-i18n'
+import twitterImg from '@/assets/img/twitter_profile.png'
+import bilibiliImg from '@/assets/img/bilibili_profile.png'
+import githubImg from '@/assets/img/github_profile.png'
 
 const { locale } = useI18n()
 
@@ -66,6 +69,7 @@ onMounted(() => {
   expand_element['style'].width = '0px'
   expand_element['style'].overflow = 'hidden'
   text_element['style'].opacity = '0'
+  document.getElementsByClassName(`WEIBO_detail`)[0]['style'].opacity = '0'
   setTimeout(() => {
     expand_element['style'].width = '100%'
     expand_element['style'].overflow = 'hidden'
@@ -80,6 +84,7 @@ const changeLanguage = (lang) => {
   locale.value = lang
   nowChinese.value = localStorage.getItem('lang') === 'zhCn'
 }
+
 const changeTheme = () => {
   console.log(currentRouter.value)
 
@@ -101,23 +106,49 @@ const changeTheme = () => {
   }
 }
 
+// 点击事件
 const contact = (type: string) => {
   let url = ''
-  if (type !== 'E-MAIL') {
+  if (type !== 'EMAIL' && type !== 'WEIBO') {
     if (type === 'TWITTER') {
       url = 'https://twitter.com/TILucario'
-    } else if (type === 'WEIBO') {
-      url = 'https://weibo.com/ryugamine'
     } else if (type === 'BILIBILI') {
       url = 'https://space.bilibili.com/128735968'
     } else if (type === 'GITHUB') {
       url = 'https://github.com/Anuluca'
     }
     window.open(url)
+  } else if (type === 'EMAIL') {
+    const linkNode = document.createElement('a')
+    linkNode.href = 'mailto:[email protected]'
+    document.body.appendChild(linkNode)
+    linkNode.click()
   } else {
-    document.location.href = 'mailto:[email protected]'
+    // url = 'https://weibo.com/ryugamine'
+    let element = document.getElementsByClassName(`WEIBO_detail`)[0]
+    if (element['style'].opacity == '0') {
+      element['style'].bottom = '30px'
+      element['style'].opacity = '1'
+    } else {
+      element['style'].bottom = '-540px'
+      element['style'].opacity = '0'
+    }
   }
 }
+
+// 鼠标移入
+const mouseOver = (type: string) => {
+  let element = document.getElementsByClassName(`${type}_detail`)[0]
+  element['style'].bottom = '30px'
+  element['style'].opacity = '1'
+}
+
+// 鼠标移出
+const mouseLeave = (type: string) => {
+  let element = document.getElementsByClassName(`${type}_detail`)[0]
+  element['style'].bottom = '-140px'
+  element['style'].opacity = '0'
+}
 </script>
 
 <template>
@@ -156,11 +187,61 @@ const contact = (type: string) => {
     <!-- 右侧 -->
     <div class="right">
       <div class="text-links">
-        <el-button link type="danger" @click="contact('TWITTER')">TWITTER</el-button>
-        <el-button link type="danger" @click="contact('WEIBO')">WEIBO</el-button>
-        <el-button link type="danger" @click="contact('BILIBILI')">BILIBILI</el-button>
-        <el-button link type="danger" @click="contact('E-MAIL')">E-MAIL</el-button>
-        <el-button link type="danger" @click="contact('GITHUB')">GITHUB</el-button>
+        <span>
+          <div class="TWITTER_detail">
+            <img :src="twitterImg" alt="" />
+          </div>
+          <el-button
+            link
+            type="danger"
+            @click="contact('TWITTER')"
+            @mouseover="mouseOver('TWITTER')"
+            @mouseleave="mouseLeave('TWITTER')"
+            >TWITTER</el-button
+          >
+        </span>
+        <span>
+          <div class="WEIBO_detail">
+            <iframe
+              width="100%"
+              height="520"
+              class="share_self"
+              frameborder="0"
+              scrolling="no"
+              src="https://widget.weibo.com/weiboshow/index.php?language=&width=0&height=520&fansRow=1&ptype=1&speed=0&skin=10&isTitle=1&noborder=1&isWeibo=1&isFans=1&uid=7738638501&verifier=4838f435&dpc=1"
+            ></iframe>
+          </div>
+          <el-button link type="danger" @click="contact('WEIBO')">WEIBO</el-button>
+        </span>
+        <span>
+          <div class="BILIBILI_detail">
+            <img :src="bilibiliImg" width="220px" height="220px" alt="" />
+          </div>
+          <el-button
+            link
+            type="danger"
+            @click="contact('BILIBILI')"
+            @mouseover="mouseOver('BILIBILI')"
+            @mouseleave="mouseLeave('BILIBILI')"
+            >BILIBILI</el-button
+          >
+        </span>
+        <span>
+          <el-button link type="danger" @click="contact('EMAIL')">E-MAIL</el-button>
+        </span>
+        <span>
+          <div class="GITHUB_detail">
+            <img :src="githubImg" alt="" />
+          </div>
+          <el-button
+            link
+            type="danger"
+            @click="contact('GITHUB')"
+            @mouseover="mouseOver('GITHUB')"
+            @mouseleave="mouseLeave('GITHUB')"
+            >GITHUB</el-button
+          >
+        </span>
         <el-button link type="danger" disabled>@2018-2023 ANULUCA</el-button>
       </div>
       <el-switch

diff --git a/src/main.ts b/src/main.ts
@@ -7,9 +7,15 @@ import i18n from './locales'
 import 'reset-css'
 import 'element-plus/theme-chalk/dark/css-vars.css'
 import 'element-plus/theme-chalk/index.css'
+import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 import '@/assets/style/global.less'
 
 const app = createApp(App)
+
+for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+  app.component(key, component)
+}
+
 app.use(i18n)
 app.use(createPinia())
 app.use(router)