主页中bilibli和github链接,在新标签页中打开

This commit is contained in:
2024-08-29 13:03:26 +08:00
parent ffa70824e9
commit d9a44505bc

View File

@@ -7,21 +7,20 @@ onMounted(() => {
// 界面特效字体 // 界面特效字体
let nameElement = document.getElementById("my-name"); let nameElement = document.getElementById("my-name");
if( nameElement == null){ if (nameElement == null) {
console.error('未找到元素my-name') console.error('未找到元素my-name')
return; return;
} }
let colorNum = 66; let colorNum = 66;
let colorNumReverse = false; let colorNumReverse = false;
setInterval(() => { setInterval(() => {
if(colorNumReverse) if (colorNumReverse) {
{
colorNum--; colorNum--;
if(colorNum<=66) if (colorNum <= 66)
colorNumReverse = !colorNumReverse; colorNumReverse = !colorNumReverse;
}else{ } else {
colorNum++; colorNum++;
if(colorNum>=255) if (colorNum >= 255)
colorNumReverse = !colorNumReverse; colorNumReverse = !colorNumReverse;
} }
nameElement.style.backgroundImage = `linear-gradient(45deg, rgb(${colorNum}, 66, ${255 - (66 - colorNum)}), rgb(${255 - (66 - colorNum)}, 66, ${colorNum}))`; nameElement.style.backgroundImage = `linear-gradient(45deg, rgb(${colorNum}, 66, ${255 - (66 - colorNum)}), rgb(${255 - (66 - colorNum)}, 66, ${colorNum}))`;
@@ -35,10 +34,10 @@ onMounted(() => {
<div class="name" id="my-name">特恩(TONE)</div> <div class="name" id="my-name">特恩(TONE)</div>
<div class="self-introduction">一名计算机类专业在校本科大二学生</div> <div class="self-introduction">一名计算机类专业在校本科大二学生</div>
<div class="button-container"> <div class="button-container">
<a href="https://space.bilibili.com/474156211"> <a href="https://space.bilibili.com/474156211" target="_blank">
<button class="button" id="button-resource">哔哩哔哩</button> <button class="button" id="button-resource">哔哩哔哩</button>
</a> </a>
<a href="https://github.com/tonecn"> <a href="https://github.com/tonecn" target="_blank">
<button class="button button-style2" id="button-code">GitHub</button> <button class="button button-style2" id="button-code">GitHub</button>
</a> </a>
</div> </div>
@@ -146,6 +145,7 @@ onMounted(() => {
height: 40px; height: 40px;
} }
} }
@media screen and (max-width: 800px) { @media screen and (max-width: 800px) {
.main-container { .main-container {
height: calc(v-bind(containerHeight) + 15px); height: calc(v-bind(containerHeight) + 15px);