git init
This commit is contained in:
15
tonecn/src/App.vue
Normal file
15
tonecn/src/App.vue
Normal file
@@ -0,0 +1,15 @@
|
||||
<script setup lang="ts">
|
||||
import { RouterLink, RouterView } from 'vue-router'
|
||||
import HeaderVue from '@/components/Common/Header.vue'
|
||||
import FooterVue from '@/components/Common/Footer.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<header>
|
||||
<HeaderVue />
|
||||
</header>
|
||||
<main>
|
||||
<RouterView />
|
||||
<FooterVue />
|
||||
</main>
|
||||
</template>
|
||||
BIN
tonecn/src/assets/logo.jpg
Normal file
BIN
tonecn/src/assets/logo.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.6 MiB |
15
tonecn/src/assets/main.css
Normal file
15
tonecn/src/assets/main.css
Normal file
@@ -0,0 +1,15 @@
|
||||
body{
|
||||
margin: 0 0;
|
||||
padding: 0 0;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
#app {
|
||||
margin: 0 0;
|
||||
padding: 0 0;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #000;
|
||||
}
|
||||
201
tonecn/src/components/Blog/BlogToolBar.vue
Normal file
201
tonecn/src/components/Blog/BlogToolBar.vue
Normal file
@@ -0,0 +1,201 @@
|
||||
<script setup>
|
||||
import { Star, Edit, StarFilled, Watch } from '@element-plus/icons-vue'
|
||||
import { ref, onMounted, onUnmounted, watch } from 'vue';
|
||||
import FingerprintJS from '@fingerprintjs/fingerprintjs';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { request } from '@/lib/request';
|
||||
import { ElMessage, ElMessageBox } from 'element-plus';
|
||||
let showToolBar = defineModel();
|
||||
const emit = defineEmits(['loadComment'])
|
||||
watch(showToolBar, (newData, oldData) => {
|
||||
if (newData)
|
||||
isScrollingUp.value = true;
|
||||
})
|
||||
const route = useRoute();
|
||||
const uuid = route.params.uuid;
|
||||
let input_comment = ref('')
|
||||
let input_comment_name = ref('')
|
||||
let isStarted = ref(false)
|
||||
let fgId;
|
||||
let CommentDialogVisible = ref(false)
|
||||
let isScrollingUp = ref(true);
|
||||
onMounted(async () => {
|
||||
window.addEventListener('wheel', handleWheel);
|
||||
|
||||
const fp = await FingerprintJS.load();
|
||||
const result = await fp.get();
|
||||
fgId = result.visitorId;
|
||||
});
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('wheel', handleWheel);
|
||||
});
|
||||
function handleWheel(event) {
|
||||
// deltaY > 0 表示向下滚动，deltaY < 0 表示向上滚动
|
||||
isScrollingUp.value = event.deltaY < 0;
|
||||
showToolBar.value = isScrollingUp.value;
|
||||
}
|
||||
|
||||
let blogLike = async () => {
|
||||
if (isStarted.value) {
|
||||
ElMessage({
|
||||
message: '你已经点过赞啦！',
|
||||
type: 'success',
|
||||
})
|
||||
return;
|
||||
}
|
||||
let res = await ServerAPI.async_getRequest(`BlogLike?uuid=${uuid}&fgId=${fgId}`);
|
||||
try {
|
||||
if (res && res.status == 'OK') {
|
||||
if (res.code == 1) {
|
||||
// 点赞成功
|
||||
isStarted.value = true;
|
||||
ElMessage({
|
||||
message: '点赞成功！',
|
||||
type: 'success',
|
||||
})
|
||||
} else if (res.code == 0) {
|
||||
// 重复点赞
|
||||
isStarted.value = true;
|
||||
ElMessage({
|
||||
message: '你已经点过赞啦！',
|
||||
type: 'success',
|
||||
})
|
||||
}
|
||||
} else {
|
||||
throw new Error('点赞失败')
|
||||
}
|
||||
} catch (error) {
|
||||
// 网络错误等原因
|
||||
console.log(error)
|
||||
ElMessage({
|
||||
message: '点赞失败',
|
||||
type: 'error',
|
||||
})
|
||||
}
|
||||
}
|
||||
// 评论按钮触发事件
|
||||
let blogComment = async () => {
|
||||
if (!input_comment.value) {
|
||||
ElMessage({
|
||||
message: '请先填写评论内容呀～',
|
||||
type: 'warning'
|
||||
})
|
||||
return;
|
||||
}
|
||||
if (input_comment.value.length >= 65535) {
|
||||
ElMessage({
|
||||
message: '评论内容太长啦～',
|
||||
type: 'warning'
|
||||
})
|
||||
return;
|
||||
}
|
||||
CommentDialogVisible.value = true;
|
||||
}
|
||||
// 提交评论
|
||||
let sendComment = async () => {
|
||||
if (input_comment_name.value.length >= 255) {
|
||||
ElMessage({
|
||||
message: '昵称太长啦～',
|
||||
type: 'warning'
|
||||
})
|
||||
return;
|
||||
}
|
||||
let res = await ServerAPI.async_postRequest(`PostBlogComment`, {
|
||||
'uuid': uuid,
|
||||
'fgId': fgId,
|
||||
'comment': input_comment.value,
|
||||
'comment_name': input_comment_name.value ? input_comment_name.value : '匿名',
|
||||
});
|
||||
try {
|
||||
if (res && res.status == 'OK') {
|
||||
if (res.code == 1) {
|
||||
// 评论成功
|
||||
ElMessage({
|
||||
message: '评论成功！',
|
||||
type: 'success',
|
||||
})
|
||||
CommentDialogVisible.value = false;
|
||||
// 重新加载评论区内容
|
||||
emit('loadComment');
|
||||
return;
|
||||
} else if (res.code == 0) {
|
||||
// 评论3次机会用完
|
||||
ElMessage({
|
||||
message: '您的评论次数已达上限',
|
||||
type: 'warning',
|
||||
})
|
||||
CommentDialogVisible.value = false;
|
||||
return;
|
||||
}
|
||||
}
|
||||
throw new Error('评论失败')
|
||||
} catch (error) {
|
||||
// 网络错误等原因
|
||||
console.log(error)
|
||||
ElMessage({
|
||||
message: '评论失败',
|
||||
type: 'error',
|
||||
})
|
||||
CommentDialogVisible.value = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<transition name="el-zoom-in-bottom">
|
||||
<div class="tool-bar-container" v-show="isScrollingUp">
|
||||
<div class="tool-bar">
|
||||
<el-input v-model="input_comment" autosize type="textarea" class="input-comment"
|
||||
placeholder="快来留下你的评论吧～" clearable />
|
||||
<el-button type="primary" :icon="Edit" class="button" circle @click="blogComment"></el-button>
|
||||
<el-button type="danger" :icon="isStarted ? StarFilled : Star" class="button" @click="blogLike"
|
||||
circle></el-button>
|
||||
</div>
|
||||
<el-dialog v-model="CommentDialogVisible" title="提示">
|
||||
<div style="display: flex;flex-direction: column;gap: 5px;">
|
||||
<div>每篇文章最多可发布3条评论，确认要现在发布吗？</div>
|
||||
<div>另外，您可选择留下昵称：</div>
|
||||
<el-input v-model="input_comment_name" placeholder="昵称（可选）" />
|
||||
</div>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="CommentDialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="sendComment">确认</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
<style scoped>
|
||||
.tool-bar-container {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
/* height: 60px; */
|
||||
background-color: #ffffff;
|
||||
box-shadow: 0px 0px 9px 1px #ddd;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.tool-bar {
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 12px 20px;
|
||||
}
|
||||
|
||||
.input-comment {
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 570px) {
|
||||
.button {
|
||||
background-color: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
78
tonecn/src/components/Common/Agreement.vue
Normal file
78
tonecn/src/components/Common/Agreement.vue
Normal file
@@ -0,0 +1,78 @@
|
||||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<div @click="$emit('closeAgreement')" class="agreement-bcc">
|
||||
<div class="agreement-container" onclick="event.stopPropagation()">
|
||||
<div class="title">网站使用协议</div>
|
||||
<li class="content">欢迎使用本网站。在使用本网站之前，请仔细阅读以下使用协议。</li>
|
||||
<li class="content">关于网站：本网站是个人创建和维护的，主要用于收藏各类资源和工具，编写关于合法计算机技术的日记，并提供与我交流的联系方式。</li>
|
||||
<li class="content">资源收藏声明：本网站的“个人收藏资源”“个人收藏工具”栏目包含但不限于第三方链接，这些资源仅供个人学习和参考。本站对这些第三方链接及其内容不作任何形式的推广或认可。链接内容、观点或相关信息归原作者或所有者所有，与本网站无关。</li>
|
||||
<li class="content">风险和责任：访问者在使用这些第三方链接时，应自行判断其内容的适用性，并自行承担相关风险。本网站及其所有者不承担因使用这些链接而产生的任何直接或间接损失的责任。</li>
|
||||
<li class="content">内容和交流：本网站的日记部分包含对合法计算机技术的个人见解和经验分享。访问者可以通过提供的联系方式与我就计算机技术话题进行合法交流。</li>
|
||||
<li class="content">版权和知识产权：本网站的内容，包括文本、图像和代码，除非另有声明，均为本网站所有者个人创作并拥有版权。未经许可，不得复制、分发或以其他方式使用这些内容。</li>
|
||||
<li class="content">同意协议：通过使用或浏览本网站，您表示您已阅读、理解并同意遵守本协议的条款。如果您不同意本协议的任何部分，请<u>停止使用</u>本网站。</li>
|
||||
<li class="content">变更和更新：本网站的所有者保留随时更新或修改本使用协议的权利。任何此类更改将在本网站上发布并生效。</li>
|
||||
<div class="subtitle">本使用协议的目的是确保网站的有效运行并保护访问者及网站所有者的合法权益。感谢您的理解和支持。</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped>
|
||||
.agreement-bcc{
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.15);
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.agreement-container{
|
||||
height: 75%;
|
||||
width: 80%;
|
||||
max-width: 700px;
|
||||
padding: 40px;
|
||||
border-radius: 12px;
|
||||
box-sizing: border-box;
|
||||
margin: auto;
|
||||
background-color: #fff;
|
||||
overflow-y: scroll;
|
||||
transition: all 0.4s;
|
||||
}
|
||||
.agreement-container>.title{
|
||||
font-size: 42px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 2px solid #ddd;
|
||||
margin-bottom: 20px;
|
||||
transition: all 0.4s;
|
||||
}
|
||||
.agreement-container>.subtitle{
|
||||
font-size: 18px;
|
||||
color: #666;
|
||||
margin-top: 20px;
|
||||
transition: all 0.4s;
|
||||
}
|
||||
.agreement-container>.content{
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
margin: 15px 0;
|
||||
line-height: 20px;
|
||||
}
|
||||
.agreement-container>.content>u{
|
||||
text-decoration-thickness: 2px;
|
||||
text-underline-offset: 3px;
|
||||
}
|
||||
@media screen and (max-width: 450px) {
|
||||
.agreement-container{
|
||||
padding: 25px;
|
||||
}
|
||||
.agreement-container>.title{
|
||||
font-size: 28px;
|
||||
}
|
||||
.agreement-container>.subtitle{
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
162
tonecn/src/components/Common/Footer.vue
Normal file
162
tonecn/src/components/Common/Footer.vue
Normal file
@@ -0,0 +1,162 @@
|
||||
<script setup lang="ts">
|
||||
import copyText from '@/lib/copyText';
|
||||
|
||||
let copyTextwithMsg = (text : string) => {
|
||||
if(copyText(text)){
|
||||
ElMessage({
|
||||
message: '复制成功',
|
||||
type: 'success',
|
||||
})
|
||||
}else{
|
||||
ElMessage({
|
||||
message: '复制失败',
|
||||
type: 'error',
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<div class="footer-divider"></div>
|
||||
<div class="footer-container">
|
||||
<div class="left-container">
|
||||
<a href="https://beian.miit.gov.cn/">
|
||||
<div class="fillings">备案号：渝ICP备2023009516号-1</div>
|
||||
</a>
|
||||
<div class="copyright">Copyright ©2020-2024 TONE All Rights Reserved.</div>
|
||||
</div>
|
||||
<div class="right-container">
|
||||
<el-popover trigger="click" placement="top" :width="160">
|
||||
<p>QQ号：3341154833</p>
|
||||
<div style="text-align: center; margin: 0">
|
||||
<el-button size="small" type="primary" @click="copyTextwithMsg('3341154833')">复制</el-button>
|
||||
</div>
|
||||
<template #reference>
|
||||
<div class="icon">
|
||||
<svg t="1705909811918" class="icon" viewBox="0 0 1024 1024" version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg" p-id="5851" width="24" height="24">
|
||||
<path
|
||||
d="M824.8 613.2c-16-51.4-34.4-94.6-62.7-165.3C766.5 262.2 689.3 112 511.5 112 331.7 112 256.2 265.2 261 447.9c-28.4 70.8-46.7 113.7-62.7 165.3-34 109.5-23 154.8-14.6 155.8 18 2.2 70.1-82.4 70.1-82.4 0 49 25.2 112.9 79.8 159-26.4 8.1-85.7 29.9-71.6 53.8 11.4 19.3 196.2 12.3 249.5 6.3 53.3 6 238.1 13 249.5-6.3 14.1-23.8-45.3-45.7-71.6-53.8 54.6-46.2 79.8-110.1 79.8-159 0 0 52.1 84.6 70.1 82.4 8.5-1.1 19.5-46.4-14.5-155.8z"
|
||||
p-id="5852" fill="#8a8a8a"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</template>
|
||||
</el-popover>
|
||||
<el-popover trigger="click" placement="top" :width="130">
|
||||
<p>微信号：tone0121</p>
|
||||
<div style="text-align: center; margin: 0">
|
||||
<el-button size="small" type="primary" @click="copyTextwithMsg('tone0121')">复制</el-button>
|
||||
</div>
|
||||
<template #reference>
|
||||
<div class="icon">
|
||||
<svg t="1705909888071" class="icon" viewBox="0 0 1024 1024" version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg" p-id="7135" width="24" height="24">
|
||||
<path
|
||||
d="M664.250054 368.541681c10.015098 0 19.892049 0.732687 29.67281 1.795902-26.647917-122.810047-159.358451-214.077703-310.826188-214.077703-169.353083 0-308.085774 114.232694-308.085774 259.274068 0 83.708494 46.165436 152.460344 123.281791 205.78483l-30.80868 91.730191 107.688651-53.455469c38.558178 7.53665 69.459978 15.308661 107.924012 15.308661 9.66308 0 19.230993-0.470721 28.752858-1.225921-6.025227-20.36584-9.521864-41.723264-9.521864-63.862493C402.328693 476.632491 517.908058 368.541681 664.250054 368.541681zM498.62897 285.87389c23.200398 0 38.557154 15.120372 38.557154 38.061874 0 22.846334-15.356756 38.156018-38.557154 38.156018-23.107277 0-46.260603-15.309684-46.260603-38.156018C452.368366 300.994262 475.522716 285.87389 498.62897 285.87389zM283.016307 362.090758c-23.107277 0-46.402843-15.309684-46.402843-38.156018 0-22.941502 23.295566-38.061874 46.402843-38.061874 23.081695 0 38.46301 15.120372 38.46301 38.061874C321.479317 346.782098 306.098002 362.090758 283.016307 362.090758zM945.448458 606.151333c0-121.888048-123.258255-221.236753-261.683954-221.236753-146.57838 0-262.015505 99.348706-262.015505 221.236753 0 122.06508 115.437126 221.200938 262.015505 221.200938 30.66644 0 61.617359-7.609305 92.423993-15.262612l84.513836 45.786813-23.178909-76.17082C899.379213 735.776599 945.448458 674.90216 945.448458 606.151333zM598.803483 567.994292c-15.332197 0-30.807656-15.096836-30.807656-30.501688 0-15.190981 15.47546-30.477129 30.807656-30.477129 23.295566 0 38.558178 15.286148 38.558178 30.477129C637.361661 552.897456 622.099049 567.994292 598.803483 567.994292zM768.25071 567.994292c-15.213493 0-30.594809-15.096836-30.594809-30.501688 0-15.190981 15.381315-30.477129 30.594809-30.477129 23.107277 0 38.558178 15.286148 38.558178 30.477129C806.808888 552.897456 791.357987 567.994292 768.25071 567.994292z"
|
||||
fill="#8a8a8a" p-id="7136"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</template>
|
||||
</el-popover>
|
||||
<el-popover trigger="click" placement="top" :width="180">
|
||||
<p>邮箱号：3341154833@qq.com</p>
|
||||
<div style="text-align: center; margin: 0">
|
||||
<el-button size="small" type="primary" @click="copyTextwithMsg('3341154833@qq.com')">复制</el-button>
|
||||
</div>
|
||||
<template #reference>
|
||||
<div class="icon">
|
||||
<svg t="1705909952800" class="icon" viewBox="0 0 1024 1024" version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg" p-id="8336" width="24" height="24">
|
||||
<path
|
||||
d="M677.288 536.903l-167.315 156.052-170.532-156.052-246.146 230.058h831.748l-247.756-230.058zM954.002 287.541v423.114l-238.1-209.145 238.1-213.969zM64.336 290.756l231.666 212.361-231.666 207.534v-419.895zM93.294 234.45l418.287 389.33 413.461-389.33h-831.748z"
|
||||
fill="#8a8a8a" p-id="8337"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</template>
|
||||
</el-popover>
|
||||
<a class="icon" href="https://github.com/tonecn">
|
||||
<svg t="1705909977594" class="icon" viewBox="0 0 1024 1024" version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg" p-id="9342" width="24" height="24">
|
||||
<path
|
||||
d="M511.957333 21.333333C241.024 21.333333 21.333333 240.981333 21.333333 512c0 216.832 140.544 400.725333 335.573334 465.664 24.490667 4.394667 32.256-10.069333 32.256-23.082667 0-11.690667 0.256-44.245333 0-85.205333-136.448 29.610667-164.736-64.64-164.736-64.64-22.314667-56.704-54.4-71.765333-54.4-71.765333-44.586667-30.464 3.285333-29.824 3.285333-29.824 49.194667 3.413333 75.178667 50.517333 75.178667 50.517333 43.776 75.008 114.816 53.333333 142.762666 40.789333 4.522667-31.658667 17.152-53.376 31.189334-65.536-108.970667-12.458667-223.488-54.485333-223.488-242.602666 0-53.546667 19.114667-97.322667 50.517333-131.669334-5.034667-12.330667-21.930667-62.293333 4.778667-129.834666 0 0 41.258667-13.184 134.912 50.346666a469.802667 469.802667 0 0 1 122.88-16.554666c41.642667 0.213333 83.626667 5.632 122.88 16.554666 93.653333-63.488 134.784-50.346667 134.784-50.346666 26.752 67.541333 9.898667 117.504 4.864 129.834666 31.402667 34.346667 50.474667 78.122667 50.474666 131.669334 0 188.586667-114.730667 230.016-224.042666 242.090666 17.578667 15.232 33.578667 44.672 33.578666 90.453334v135.850666c0 13.141333 7.936 27.605333 32.853334 22.869334C862.250667 912.597333 1002.666667 728.746667 1002.666667 512 1002.666667 240.981333 783.018667 21.333333 511.957333 21.333333z"
|
||||
p-id="9343" fill="#8a8a8a"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped>
|
||||
.footer-divider {
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
.footer-container {
|
||||
/* height: 100%; */
|
||||
height: 100px;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
max-width: 1170px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.left-container {
|
||||
font-size: 12px;
|
||||
margin-left: 25px;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.fillings {
|
||||
margin-bottom: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.right-container {
|
||||
margin-right: 25px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.right-container>.icon {
|
||||
cursor: pointer;
|
||||
margin: 0 8px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
/* background-color: #aaa; */
|
||||
border: 1.5px solid #eee;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 10px;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
.right-container>.icon:hover {
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
.right-container>.icon>.icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 550px) {
|
||||
.footer-container {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.left-container {
|
||||
margin: 20px 0px;
|
||||
margin-bottom: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.right-container {
|
||||
margin: 0 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
180
tonecn/src/components/Common/Header.vue
Normal file
180
tonecn/src/components/Common/Header.vue
Normal file
@@ -0,0 +1,180 @@
|
||||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<div class="main-container">
|
||||
<div class="header-container">
|
||||
<div class="header-left">
|
||||
<div>
|
||||
<RouterLink :to="{ name: 'home' }" v-if="$route.name == 'home'">
|
||||
<div class="emoji">🍭</div>
|
||||
</RouterLink>
|
||||
<RouterLink :to="{ name: 'home' }" v-else>
|
||||
<div class="title">特恩(TONE)</div>
|
||||
</RouterLink>
|
||||
</div>
|
||||
<div class="more" tabindex="0" id="header-more">
|
||||
<svg t="1705913460674" class="icon" viewBox="0 0 1024 1024" version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg" p-id="10513" width="20" height="20">
|
||||
<path
|
||||
d="M150.528 431.104q37.888 0 58.368 24.064t20.48 51.712l0 11.264q0 34.816-17.92 58.88t-59.904 24.064l-7.168 0q-38.912 0-61.952-21.504t-23.04-59.392l0-14.336q0-13.312 5.632-26.624t15.872-24.064 25.6-17.408 33.792-6.656l10.24 0zM519.168 431.104q37.888 0 58.368 24.064t20.48 51.712l0 11.264q0 34.816-17.92 58.88t-59.904 24.064l-7.168 0q-38.912 0-61.952-21.504t-23.04-59.392l0-14.336q0-13.312 5.632-26.624t15.872-24.064 25.6-17.408 33.792-6.656l10.24 0zM887.808 431.104q37.888 0 58.368 24.064t20.48 51.712l0 11.264q0 34.816-17.92 58.88t-59.904 24.064l-7.168 0q-38.912 0-61.952-21.504t-23.04-59.392l0-14.336q0-13.312 5.632-26.624t15.872-24.064 25.6-17.408 33.792-6.656l10.24 0z"
|
||||
p-id="10514"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-right header-right-hidden" id="header-right">
|
||||
<div class="link-list">
|
||||
<RouterLink :to="{ name: 'resource' }" v-show="true">
|
||||
<div class="link" :class="{ 'link-chosen': $route.name === 'resource' }">资源</div>
|
||||
</RouterLink>
|
||||
<RouterLink :to="{ name: 'download' }" v-show="true">
|
||||
<div class="link" :class="{ 'link-chosen': $route.name === 'download' }">下载</div>
|
||||
</RouterLink>
|
||||
<RouterLink :to="{ name: 'blog' }" v-show="true">
|
||||
<div class="link" :class="{ 'link-chosen': $route.name === 'blog' }">博客</div>
|
||||
</RouterLink>
|
||||
<RouterLink :to="{ name: 'login' }" v-show="true">
|
||||
<div class="link" :class="{ 'link-chosen': $route.name === 'login' || $route.name === 'dashboard'}">控制台</div>
|
||||
</RouterLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-divider"></div>
|
||||
</div>
|
||||
<div class="main-container-block"></div>
|
||||
</template>
|
||||
<style scoped>
|
||||
.main-container {
|
||||
/* height: 69px; */
|
||||
z-index: 500;
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
backdrop-filter: blur(5px);
|
||||
-webkit-backdrop-filter: blur(5px);
|
||||
background-color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
.header-container {
|
||||
/* height: 100%; */
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
padding: 22px 0;
|
||||
max-width: 1170px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
transition: padding 0.2s;
|
||||
}
|
||||
|
||||
.header-left,
|
||||
.header-right {
|
||||
margin: 0 25px;
|
||||
}
|
||||
|
||||
.header-left .emoji {
|
||||
font-size: 25px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.header-left .title {
|
||||
/* 因为棒棒糖的高度为35，需要保持统一 */
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 5px;
|
||||
cursor: pointer;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.header-left .more {
|
||||
/* 因为棒棒糖的高度为35，需要保持统一 */
|
||||
height: 35px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.link-list {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.link-list .link {
|
||||
margin: 0 20px;
|
||||
cursor: pointer;
|
||||
color: #666;
|
||||
transition: color 0.2s;
|
||||
border-bottom: 3px solid rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
.link-list .link:hover {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.link-list .link-chosen {
|
||||
border-bottom: 3px solid #e03ebf;
|
||||
}
|
||||
|
||||
.header-divider {
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
.main-container-block {
|
||||
height: 80px;
|
||||
width: 100%;
|
||||
transition: height 0.2s;
|
||||
/* background-color: #fff; */
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
.header-container {
|
||||
padding: 15px 0;
|
||||
}
|
||||
|
||||
.main-container-block {
|
||||
height: 65px;
|
||||
}
|
||||
|
||||
.header-container {
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.header-left {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.header-left .more {
|
||||
display: flex;
|
||||
align-content: center;
|
||||
flex-wrap: wrap;
|
||||
margin-right: 50px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.header-right-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.header-right {
|
||||
/* width: 100%; */
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.link-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 20px 10px;
|
||||
}
|
||||
|
||||
.link-list .link {
|
||||
font-size: 23px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
259
tonecn/src/components/Common/RotationVerification.vue
Normal file
259
tonecn/src/components/Common/RotationVerification.vue
Normal file
@@ -0,0 +1,259 @@
|
||||
<script setup>
|
||||
import ServerSDK from '@/assets/ServerSDK';
|
||||
import { onBeforeMount, onMounted, ref } from 'vue';
|
||||
let imageBase64 = ref('');
|
||||
const emit = defineEmits(['fail', 'success'])
|
||||
let onVerifying = ref(false);
|
||||
let onVerifyFail = ref(false);
|
||||
onBeforeMount(async () => {
|
||||
try {
|
||||
let res = await ServerSDK.GetRotationVerification();
|
||||
imageBase64.value = res;
|
||||
} catch (error) {
|
||||
console.log("获取图像验证码失败："+error);
|
||||
emit('fail');
|
||||
}
|
||||
})
|
||||
onMounted(() => {
|
||||
let slider = document.getElementById('RV-slider');
|
||||
let imageEle = document.getElementById('RV-image');
|
||||
let isDragging = false;// 正在移动标志位
|
||||
let silderMoveable = true;// 是否可以开始移动标识位
|
||||
let startX;
|
||||
let deltaX;// 拖动距离
|
||||
slider.addEventListener('mousedown', function(e) {
|
||||
if(silderMoveable)
|
||||
{
|
||||
isDragging = true;
|
||||
startX = e.clientX;
|
||||
onVerifyFail.value = false;
|
||||
}
|
||||
})
|
||||
|
||||
slider.addEventListener('touchstart', function(e) {
|
||||
if(silderMoveable) {
|
||||
e.preventDefault();
|
||||
isDragging = true;
|
||||
startX = e.touches[0].clientX;
|
||||
onVerifyFail.value = false;
|
||||
}
|
||||
}, { passive: false });
|
||||
|
||||
document.addEventListener('mousemove', function(e) {
|
||||
if (isDragging) {
|
||||
silderMoveable = false;// 产生了位移，则需等待验证后才可再次移动
|
||||
deltaX = e.clientX - startX;
|
||||
// 对位移距离限幅
|
||||
if(deltaX < 0)
|
||||
deltaX = 0;
|
||||
if(deltaX > 200)
|
||||
deltaX = 200;
|
||||
// 调整滑块条位置样式
|
||||
slider.style.transform = ` translateX(${deltaX}px)`;
|
||||
// 调整图片旋转样式 （200 -> 360）映射 y = 9/5x
|
||||
imageEle.style.transform = `rotate(${deltaX*9/5}deg)`
|
||||
}
|
||||
});
|
||||
|
||||
document.addEventListener('touchmove', function(e) {
|
||||
if (isDragging) {
|
||||
e.preventDefault();
|
||||
silderMoveable = false;
|
||||
deltaX = e.touches[0].clientX - startX;
|
||||
if(deltaX < 0) deltaX = 0;
|
||||
if(deltaX > 200) deltaX = 200;
|
||||
slider.style.transform = `translateX(${deltaX}px)`;
|
||||
imageEle.style.transform = `rotate(${deltaX*9/5}deg)`;
|
||||
}
|
||||
}, { passive: false });
|
||||
|
||||
|
||||
document.addEventListener('mouseup', async () => {
|
||||
if(isDragging)
|
||||
{
|
||||
isDragging = false;
|
||||
if(!deltaX)
|
||||
{
|
||||
silderMoveable = true;// 位移距离为0，无需验证可以继续移动
|
||||
}else{
|
||||
try {
|
||||
onVerifying.value = true;
|
||||
let res = await ServerSDK.CheckRotationVerification(deltaX * 9 / 5);
|
||||
switch (res) {
|
||||
case 1:
|
||||
// 验证成功
|
||||
emit('success');
|
||||
break;
|
||||
case -2:
|
||||
// 可以再试一次
|
||||
onVerifyFail.value = true;
|
||||
slider.style.transition = "transform 0.6s";
|
||||
slider.style.transform = "translateX(0px)";
|
||||
imageEle.style.transition = "transform 0.6s";
|
||||
imageEle.style.transform = "rotate(0deg)";
|
||||
setTimeout(() => {
|
||||
isDragging = false;
|
||||
silderMoveable = true;
|
||||
slider.style.transition = "transform 0s";
|
||||
imageEle.style.transition = "transform 0s";
|
||||
}, 600);
|
||||
break;
|
||||
case -1:
|
||||
console.log('验证次数过多，请重试')
|
||||
emit('fail');
|
||||
break;
|
||||
default:
|
||||
// 大概率是0，过期和不存在
|
||||
console.log('验证session过期或不存在')
|
||||
emit('fail');
|
||||
break;
|
||||
}
|
||||
} catch (error) {
|
||||
console.log("图像验证码错误："+error);
|
||||
emit('fail');
|
||||
}finally{
|
||||
onVerifying.value = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
document.addEventListener('touchend', async () => {
|
||||
if(isDragging)
|
||||
{
|
||||
isDragging = false;
|
||||
if(!deltaX)
|
||||
{
|
||||
silderMoveable = true;// 位移距离为0，无需验证可以继续移动
|
||||
}else{
|
||||
try {
|
||||
onVerifying.value = true;
|
||||
let res = await ServerSDK.CheckRotationVerification(deltaX * 9 / 5);
|
||||
switch (res) {
|
||||
case 1:
|
||||
// 验证成功
|
||||
emit('success');
|
||||
break;
|
||||
case -2:
|
||||
// 可以再试一次
|
||||
onVerifyFail.value = true;
|
||||
slider.style.transition = "transform 0.6s";
|
||||
slider.style.transform = "translateX(0px)";
|
||||
imageEle.style.transition = "transform 0.6s";
|
||||
imageEle.style.transform = "rotate(0deg)";
|
||||
setTimeout(() => {
|
||||
isDragging = false;
|
||||
silderMoveable = true;
|
||||
slider.style.transition = "transform 0s";
|
||||
imageEle.style.transition = "transform 0s";
|
||||
}, 600);
|
||||
break;
|
||||
case -1:
|
||||
console.log('验证次数过多，请重试')
|
||||
emit('fail');
|
||||
break;
|
||||
default:
|
||||
// 大概率是0，过期和不存在
|
||||
console.log('验证session过期或不存在')
|
||||
emit('fail');
|
||||
break;
|
||||
}
|
||||
} catch (error) {
|
||||
console.log("图像验证码错误："+error);
|
||||
emit('fail');
|
||||
}finally{
|
||||
onVerifying.value = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<transition name="el-fade-in-linear">
|
||||
<div class="verification-bcc" @click="$emit('fail')">
|
||||
<div class="verification-container" onclick="event.stopPropagation()">
|
||||
<div class="title">安全验证</div>
|
||||
<div class="subtitle">{{ onVerifying ? "正在验证，请稍后..." : (onVerifyFail?"验证失败，请再试一次":"拖动滑块，使图片角度为水平") }}</div>
|
||||
<div class="image-container">
|
||||
<img :src="imageBase64" alt="" id="RV-image">
|
||||
</div>
|
||||
<div class="slide-container">
|
||||
<div class="slider" id="RV-slider">
|
||||
<svg t="1706696449802" class="icon" viewBox="0 0 1024 1024" fill="#666" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1924" width="18" height="18"><path d="M567.32505 547.18536c20.970614-21.479197 20.970614-56.307424 0-77.790714L185.251168 77.115332c-20.971637-21.47715-54.975079-21.47715-75.948763 0-20.973684 21.484314-20.973684 56.30947 0 77.793784l344.188016 353.383446-344.188016 353.384469c-20.973684 21.484314-20.973684 56.311517 0 77.79276 20.971637 21.482267 54.975079 21.482267 75.948763 0l382.072858-392.280337 0.001024-0.004094zM440.60802 154.908092l344.18597 353.383446-344.18597 353.385493c-20.973684 21.484314-20.973684 56.311517 0 77.79276 20.972661 21.482267 54.975079 21.482267 75.949786 0l382.074905-392.281361c20.966521-21.478174 20.966521-56.307424 0-77.790714L516.555759 77.115332c-20.972661-21.47715-54.975079-21.47715-75.949786 0-20.971637 21.48329-20.971637 56.30947 0.002047 77.79276z" p-id="1925"></path></svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
<style scoped>
|
||||
.verification-bcc{
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background-color: #00000022;
|
||||
z-index: 2000;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.verification-container{
|
||||
width: 300px;
|
||||
height: 400px;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
border-radius: 15px;
|
||||
}
|
||||
.verification-container>.title{
|
||||
margin-top: 25px;
|
||||
color: #888;
|
||||
}
|
||||
.verification-container>.subtitle{
|
||||
margin-top: 8px;
|
||||
}
|
||||
.verification-container>.image-container{
|
||||
display: flex;
|
||||
margin-top: 28px;
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
.verification-container>.image-container>img{
|
||||
width: 226px;
|
||||
height: 226px;
|
||||
transform: rotate(0deg);
|
||||
background-color: gray;
|
||||
}
|
||||
.verification-container>.slide-container{
|
||||
width: 240px;
|
||||
height: 40px;
|
||||
border-radius: 20px;
|
||||
background-color: #eeeeee;
|
||||
margin-top: 25px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.verification-container>.slide-container>.slider{
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
background-color: #fff;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0px 1px 5px 3px #ccc;
|
||||
text-align: center;
|
||||
line-height: 50px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
</style>
|
||||
27
tonecn/src/lib/copyText.ts
Normal file
27
tonecn/src/lib/copyText.ts
Normal file
@@ -0,0 +1,27 @@
|
||||
/**
|
||||
*
|
||||
* @param textToCopy 需要被复制的文本
|
||||
* @returns 成功返回 true, 不成功返回 false
|
||||
*/
|
||||
const copyText = (textToCopy: string): boolean => {
|
||||
// 创建一个<textarea>元素，将文本放入其中
|
||||
const textArea = document.createElement("textarea");
|
||||
textArea.value = textToCopy;
|
||||
// 将<textarea>元素添加到DOM中
|
||||
document.body.appendChild(textArea);
|
||||
// 选择<textarea>元素中的文本
|
||||
textArea.select();
|
||||
let copyStatus = false; // true成功, false失败
|
||||
try {
|
||||
// 尝试将选定的文本复制到剪贴板
|
||||
document.execCommand("copy");
|
||||
copyStatus = true;
|
||||
} catch (err) {
|
||||
console.error("复制文本失败：", err);
|
||||
}
|
||||
// 从DOM中移除<textarea>元素
|
||||
document.body.removeChild(textArea);
|
||||
return copyStatus;
|
||||
}
|
||||
|
||||
export default copyText;
|
||||
23
tonecn/src/lib/request.ts
Normal file
23
tonecn/src/lib/request.ts
Normal file
@@ -0,0 +1,23 @@
|
||||
import axios from "axios";
|
||||
|
||||
axios.defaults.baseURL = "http://localhost:8080";
|
||||
|
||||
interface ResponseData<T> {
|
||||
code: number;
|
||||
msg: string;
|
||||
data: T;
|
||||
}
|
||||
|
||||
axios.interceptors.response.use((response) => {
|
||||
// 确保响应数据符合ResponseData接口的结构
|
||||
const responseData: ResponseData<any> = response.data;
|
||||
// 根据code值做不同的处理
|
||||
if (responseData.code === 200) { // 假设200为成功的code
|
||||
return responseData.data; // 当成功时，只返回data字段
|
||||
} else {
|
||||
// 当不成功时，抛出整个responseData或创建一个Error对象
|
||||
throw new Error(`请求错误: ${responseData.msg}`);
|
||||
}
|
||||
});
|
||||
|
||||
export { axios as request };
|
||||
14
tonecn/src/main.ts
Normal file
14
tonecn/src/main.ts
Normal file
@@ -0,0 +1,14 @@
|
||||
import './assets/main.css'
|
||||
|
||||
import { createApp } from 'vue'
|
||||
import { createPinia } from 'pinia'
|
||||
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
|
||||
const app = createApp(App)
|
||||
|
||||
app.use(createPinia())
|
||||
app.use(router)
|
||||
|
||||
app.mount('#app')
|
||||
42
tonecn/src/router/index.ts
Normal file
42
tonecn/src/router/index.ts
Normal file
@@ -0,0 +1,42 @@
|
||||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
import HomeView from '../views/HomeView.vue'
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(import.meta.env.BASE_URL),
|
||||
routes: [
|
||||
{
|
||||
path: '/',
|
||||
name: 'home',
|
||||
component: HomeView
|
||||
},
|
||||
{
|
||||
path: '/resource',
|
||||
name: 'resource',
|
||||
component: () => import('../views/Resource.vue')
|
||||
},
|
||||
{
|
||||
path: '/download',
|
||||
name: 'download',
|
||||
component: () => import('../views/Download.vue')
|
||||
},
|
||||
{
|
||||
path: '/blog',
|
||||
name: 'blog',
|
||||
component: () => import('../views/Blog.vue')
|
||||
},
|
||||
{
|
||||
path: '/console',
|
||||
name: 'console',
|
||||
component: () => import('../views/Console/Console.vue'),
|
||||
children: [
|
||||
{
|
||||
path: 'login',
|
||||
name: 'login',
|
||||
component: () => import('../views/Console/Login.vue')
|
||||
},
|
||||
],
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
export default router
|
||||
12
tonecn/src/stores/counter.ts
Normal file
12
tonecn/src/stores/counter.ts
Normal file
@@ -0,0 +1,12 @@
|
||||
import { ref, computed } from 'vue'
|
||||
import { defineStore } from 'pinia'
|
||||
|
||||
export const useCounterStore = defineStore('counter', () => {
|
||||
const count = ref(0)
|
||||
const doubleCount = computed(() => count.value * 2)
|
||||
function increment() {
|
||||
count.value++
|
||||
}
|
||||
|
||||
return { count, doubleCount, increment }
|
||||
})
|
||||
110
tonecn/src/views/Blog.vue
Normal file
110
tonecn/src/views/Blog.vue
Normal file
@@ -0,0 +1,110 @@
|
||||
<script setup>
|
||||
// import ServerAPI from '@/assets/ServerAPI';
|
||||
// import router from '@/router';
|
||||
// import { nextTick, onBeforeMount, onMounted, reactive, ref } from 'vue';
|
||||
// let load_fail = ref(false);
|
||||
// let load_ok = ref(false);
|
||||
|
||||
// let urlTo = (url) => {
|
||||
// window.location.href = url;
|
||||
// }
|
||||
// let blog_list = reactive([])
|
||||
// onBeforeMount(async () => {
|
||||
// let res = await ServerAPI.async_getRequest('GetBlogList');
|
||||
// try {
|
||||
// if(res.status == 'OK')
|
||||
// {
|
||||
// blog_list.push(...res.data);
|
||||
// load_ok.value = true;
|
||||
// }else{
|
||||
// throw new Error('获取列表失败');
|
||||
// }
|
||||
// } catch (error) {
|
||||
// console.log('获取列表发生错误：' + error)
|
||||
// load_fail.value = true;
|
||||
// }
|
||||
// })
|
||||
// let formatTimestamp = (timestamp) => {
|
||||
// const date = new Date(timestamp);
|
||||
// // 获取日期的各个部分
|
||||
// const year = date.getFullYear();
|
||||
// const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份是从0开始的
|
||||
// const day = String(date.getDate()).padStart(2, '0');
|
||||
// const hours = String(date.getHours()).padStart(2, '0');
|
||||
// const minutes = String(date.getMinutes()).padStart(2, '0');
|
||||
// const seconds = String(date.getSeconds()).padStart(2, '0');
|
||||
// // 组装最终的字符串
|
||||
// if(hours == '00' && minutes == '00' && seconds == '00')
|
||||
// return `${year}/${month}/${day}`;
|
||||
// else
|
||||
// return `${year}/${month}/${day} ${hours}:${minutes}:${seconds}`;
|
||||
// }
|
||||
// let blogto = (uuid) => {
|
||||
// // router.push({name:'blogcontent',params: { 'uuid': uuid }})
|
||||
// let url = '/blogcontent/' + uuid;
|
||||
// window.open(url, '_blank');
|
||||
// }
|
||||
</script>
|
||||
<template>
|
||||
<div class="bcc"></div>
|
||||
<div class="content-container">
|
||||
<el-empty description="加载失败，刷新后重试" style="margin: 0 auto;" v-if="load_fail"/>
|
||||
<div style="gap: 30px;display: flex;flex-direction: column;" v-else>
|
||||
<div class="coding" v-if="!load_ok">加载中，请稍后...</div>
|
||||
<el-empty description="暂无数据" style="margin: 0 auto;" v-if="load_ok && !blog_list.length"/>
|
||||
<div class="blog-container" v-for="item of blog_list">
|
||||
<div class="title" @click="blogto(item.uuid)">{{ item.title }}</div>
|
||||
<div class="description">{{ item.description }}</div>
|
||||
<div class="publish-time">{{ formatTimestamp(+item.publish_time) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped>
|
||||
.bcc{
|
||||
position: fixed;
|
||||
z-index: -1;
|
||||
background-color: #f6f8f9;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.content-container{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 800px;
|
||||
margin: 50px auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
.coding{
|
||||
text-align: center;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 300px;
|
||||
}
|
||||
.blog-container{
|
||||
margin: 0 auto;
|
||||
max-width: 400px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.blog-container .title{
|
||||
font-size: 26px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
}
|
||||
.blog-container .title:hover{
|
||||
text-decoration: underline;
|
||||
text-decoration-thickness: 3px;
|
||||
}
|
||||
.blog-container .description{
|
||||
color: #666;
|
||||
}
|
||||
.blog-container .publish-time{
|
||||
color: #888;
|
||||
margin-top: 15px;
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
6
tonecn/src/views/Console/Console.vue
Normal file
6
tonecn/src/views/Console/Console.vue
Normal file
@@ -0,0 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<router-view></router-view>
|
||||
</template>
|
||||
296
tonecn/src/views/Console/Login.vue
Normal file
296
tonecn/src/views/Console/Login.vue
Normal file
@@ -0,0 +1,296 @@
|
||||
<script setup>
|
||||
// import { ref, watch } from 'vue';
|
||||
// import { ElMessage } from 'element-plus'
|
||||
// import VerificationProcessVue from '@/components/RotationVerification.vue';
|
||||
// import router from '@/router';
|
||||
// import ServerAPI from '@/assets/ServerAPI';
|
||||
// import ServerSDK from '@/assets/ServerSDK';
|
||||
// let phone = ref("");
|
||||
// let code = ref("");
|
||||
// let sendSIMCodeCoolingTime = ref(-1);
|
||||
// let ShowVerificationProcessVue = ref(false);
|
||||
// // 监听phone，使其保持3-4-4分割格式
|
||||
// watch(phone,(newData)=>{
|
||||
// newData = newData.replace(/\D/g,'');
|
||||
// let newDatalen = newData.split('').length;
|
||||
// if(newDatalen >= 4 && newDatalen <= 7)
|
||||
// {
|
||||
// let part1 = newData.slice(0, 3);
|
||||
// let part2 = newData.slice(3);
|
||||
// newData = part1+ " " +part2;
|
||||
// }else if(newDatalen >= 8){
|
||||
// let part1 = newData.slice(0, 3);
|
||||
// let part2 = newData.slice(3, 7);
|
||||
// let part3 = newData.slice(7);
|
||||
// newData = part1 + " " + part2 + " " + part3;
|
||||
// }
|
||||
// phone.value = newData;
|
||||
// })
|
||||
// // 监听code，使其只能是数字
|
||||
// watch(code,(newData)=>{
|
||||
// code.value = newData.replace(/\D/g,'');
|
||||
// })
|
||||
|
||||
// // 按钮 - 发送验证码，先获取图像验证码，发短信由其他函数触发
|
||||
// let sendSIMCode = async () => {
|
||||
// // 冷却判定
|
||||
// if(sendSIMCodeCoolingTime.value >= 0)
|
||||
// {
|
||||
// // 还在冷却中，不允许发送
|
||||
// ElMessage({
|
||||
// message: '冷却中，稍后再来获取吧',
|
||||
// type: 'warning',
|
||||
// });
|
||||
// return;
|
||||
// }
|
||||
// // 手机号合法性验证
|
||||
// const regex = /^1[3-9]\d{9}$/;
|
||||
// if(!regex.test(phone.value.replace(/\D/g,'')))
|
||||
// {
|
||||
// ElMessage({
|
||||
// message: '请输入正确的手机号',
|
||||
// type: 'warning',
|
||||
// });
|
||||
// return;
|
||||
// }
|
||||
|
||||
// // 准备发送验证码
|
||||
// // 滑动验证码验证
|
||||
// ShowVerificationProcessVue.value = true;
|
||||
// }
|
||||
|
||||
// // 按钮 - 登录
|
||||
// let login = async () => {
|
||||
// // 是否已经发送验证码
|
||||
// if(sendSIMCodeCoolingTime.value == -1)
|
||||
// {
|
||||
// // 其他情况（冷却倒数，冷却结束）都可以发送
|
||||
// ElMessage({
|
||||
// message: '请先获取验证码',
|
||||
// type: 'warning',
|
||||
// });
|
||||
// return;
|
||||
// }
|
||||
// // 手机号合法性验证
|
||||
// const regex = /^1[3-9]\d{9}$/;
|
||||
// if(!regex.test(phone.value.replace(/\D/g,'')))
|
||||
// {
|
||||
// ElMessage({
|
||||
// message: '请输入正确的手机号',
|
||||
// type: 'warning',
|
||||
// });
|
||||
// return;
|
||||
// }
|
||||
// // 验证码合法性验证
|
||||
// const regex2 = /\d{6}$/;
|
||||
// if(!regex2.test(code.value))
|
||||
// {
|
||||
// ElMessage({
|
||||
// message: '请输入正确的验证码',
|
||||
// type: 'warning',
|
||||
// });
|
||||
// return;
|
||||
// }
|
||||
// // ...可以登录
|
||||
// // console.log(localStorage.getItem('login_session'))
|
||||
// let loginRes = await ServerSDK.Login(
|
||||
// phone.value.replace(/\D/g,''),
|
||||
// code.value
|
||||
// )
|
||||
// if(loginRes == 1)
|
||||
// {
|
||||
// ElMessage({
|
||||
// message: '登录成功',
|
||||
// type: 'success',
|
||||
// });
|
||||
// setTimeout(() => {
|
||||
// router.push({name: 'console_console'});
|
||||
// }, 1000);
|
||||
// }else if(loginRes == 0){
|
||||
// ElMessage({
|
||||
// message: '验证码已过期',
|
||||
// type: 'warning',
|
||||
// });
|
||||
// }else if(loginRes == -1){
|
||||
// ElMessage({
|
||||
// message: '验证码已失效',
|
||||
// type: 'warning',
|
||||
// });
|
||||
// }else if(loginRes == -2){
|
||||
// ElMessage({
|
||||
// message: '验证码错误',
|
||||
// type: 'warning',
|
||||
// });
|
||||
// }else{
|
||||
// ElMessage({
|
||||
// message: '登录失败，请重试',
|
||||
// type: 'error',
|
||||
// });
|
||||
// }
|
||||
// }
|
||||
|
||||
// // 短信验证码发送成功，修改界面交互
|
||||
// let verify_success = async () => {
|
||||
// // 验证成功，等待接收验证码后登录
|
||||
// let sendSIMCodeRes = await ServerAPI.async_postRequest('SendSMSCode',{
|
||||
// 'phone': phone.value.replace(/\D/g,''),
|
||||
// 'session': localStorage.getItem('RVSession')
|
||||
// })
|
||||
// console.log(sendSIMCodeRes)
|
||||
// if(sendSIMCodeRes && sendSIMCodeRes.status == 'OK')
|
||||
// {
|
||||
// // 发送成功，等待接收验证码后登录
|
||||
// ElMessage({
|
||||
// message: '发送成功',
|
||||
// type: 'success',
|
||||
// });
|
||||
// }else{
|
||||
// // 发送失败
|
||||
// ElMessage({
|
||||
// message: '发送失败，请重试',
|
||||
// type: 'error',
|
||||
// });
|
||||
// }
|
||||
// ShowVerificationProcessVue.value = false;// 关闭验证码界面
|
||||
// sendSIMCodeCoolingTime.value = 59;// 冷却倒计时
|
||||
// let SIMCodeCoolingTimer = setInterval(() => {
|
||||
// sendSIMCodeCoolingTime.value--;
|
||||
// if(sendSIMCodeCoolingTime.value <= 0)
|
||||
// {
|
||||
// clearInterval(SIMCodeCoolingTimer);
|
||||
// sendSIMCodeCoolingTime.value = -2;
|
||||
// }
|
||||
// }, 1000);
|
||||
// }
|
||||
// // 图像验证码验证失败，短信验证码未发送
|
||||
// let verify_fail = () => {
|
||||
// ShowVerificationProcessVue.value = false;
|
||||
// ElMessage({
|
||||
// message: '发送失败，请重试',
|
||||
// type: 'error',
|
||||
// });
|
||||
// }
|
||||
|
||||
// let onDev = () => {
|
||||
// ElMessage({
|
||||
// message: '抱歉，当前内容暂未开放',
|
||||
// type: 'warning',
|
||||
// });
|
||||
// }
|
||||
</script>
|
||||
<template>
|
||||
<div class="bcc"></div>
|
||||
<div class="main-container">
|
||||
<h1>登录到控制台</h1>
|
||||
<el-popover
|
||||
placement="bottom"
|
||||
:width="300"
|
||||
trigger="click"
|
||||
>
|
||||
<!-- <p>控制台是特恩(TONE)网页中的一个控制器界面，您可以使用其中开放的一些控制器功能。普通访客可通过登录后的界面暂存合法文件（图片、视频、文档、音频、压缩包等），管理员可通过登录后编辑本网页中的内容（资源、工具、日记等），详情请见<strong style="cursor: pointer;">《特恩(TONE)控制台使用协议》</strong></p> -->
|
||||
<p>控制台是特恩(TONE)网页中的一个控制器界面，如果您是管理员，可通过登录后编辑本网页中的内容（资源、工具、日记等），详情请见<strong style="cursor: pointer;" @click="onDev">《特恩(TONE)控制台使用协议》</strong></p>
|
||||
<template #reference>
|
||||
<h3>控制台是什么？</h3>
|
||||
</template>
|
||||
</el-popover>
|
||||
<div class="form-container">
|
||||
<el-input
|
||||
v-model="phone"
|
||||
class="input"
|
||||
placeholder="请输入手机号"
|
||||
maxlength="13"
|
||||
inputmode="tel"
|
||||
clearable>
|
||||
<template #prepend> <div class="phone-prepend">+86</div></template>
|
||||
</el-input>
|
||||
<el-input
|
||||
v-model="code"
|
||||
class="input"
|
||||
maxlength="6"
|
||||
inputmode="numeric"
|
||||
placeholder="验证码">
|
||||
<template #append>
|
||||
<el-button class="sendSIMCode-button" :class="{ 'sendSIMCode-button-cooling' : (sendSIMCodeCoolingTime > 0) }" @click="sendSIMCode">{{ sendSIMCodeCoolingTime > 0 ? `${sendSIMCodeCoolingTime}秒后再获取` : "获取验证码"}}</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
<el-button class="login-botton" @click="login">登录</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<VerificationProcessVue v-if="ShowVerificationProcessVue" @fail="verify_fail" @success="verify_success" :phone="phone" />
|
||||
</template>
|
||||
<style scoped>
|
||||
.bcc{
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
background-color: #f6f8f9;
|
||||
}
|
||||
.main-container{
|
||||
padding: 30px;
|
||||
margin-bottom: 160px;
|
||||
}
|
||||
.main-container>h1{
|
||||
text-align: center;
|
||||
font-size: 42px;
|
||||
font-weight: 400;
|
||||
margin-top: 50px;
|
||||
cursor: default;
|
||||
}
|
||||
.main-container>h3{
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
.main-container .form-container{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.phone-prepend{
|
||||
width: 20px;
|
||||
margin-left: -10px;
|
||||
cursor: default;
|
||||
text-align: center;
|
||||
font-size: 15px;
|
||||
}
|
||||
.form-container .input{
|
||||
width: 260px;
|
||||
height: 35px;
|
||||
font-size: 16px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.input .sendSIMCode-button{
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #333;
|
||||
width: 120px;
|
||||
}
|
||||
.input .sendSIMCode-button:hover{
|
||||
color: #333;
|
||||
}
|
||||
.input .sendSIMCode-button-cooling{
|
||||
color: #888;
|
||||
}
|
||||
.input .sendSIMCode-button-cooling:hover{
|
||||
color: #888;
|
||||
}
|
||||
.login-botton{
|
||||
margin-top: 10px;
|
||||
width: 260px;
|
||||
height: 35px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.login-botton:hover{
|
||||
background-color: #fff;
|
||||
border-color: rgb(220, 223, 230);
|
||||
color: #222;
|
||||
}
|
||||
.login-botton:focus{
|
||||
background-color: #fff;
|
||||
border-color: rgb(220, 223, 230);
|
||||
color: #606266;
|
||||
}
|
||||
</style>
|
||||
266
tonecn/src/views/Download.vue
Normal file
266
tonecn/src/views/Download.vue
Normal file
@@ -0,0 +1,266 @@
|
||||
<script setup>
|
||||
// import { onBeforeMount, reactive, ref } from 'vue';
|
||||
// import Agreement from '../components/agreement.vue'
|
||||
// import ServerAPI from '@/assets/ServerAPI';
|
||||
// let urlTo = (url) => {
|
||||
// // window.location.href = url;
|
||||
// window.open(url, '_blank');
|
||||
// }
|
||||
// let showAgreement = ref(false);
|
||||
// let ResourceDatas = reactive({});
|
||||
// let loadStatus = ref(0);// 0加载中，1加载成功，2加载失败
|
||||
// onBeforeMount(async ()=>{
|
||||
// let res = await ServerAPI.async_getRequest('GetDownloadList');
|
||||
// try {
|
||||
// if(res.status == 'OK')
|
||||
// {
|
||||
// Object.assign(ResourceDatas, res.data);
|
||||
// loadStatus.value = 1;
|
||||
// }else{
|
||||
// console.log("获取资源失败：" + res.data)
|
||||
// loadStatus.value = 2;
|
||||
// }
|
||||
// } catch (error) {
|
||||
// console.log("获取资源失败：" + error)
|
||||
// loadStatus.value = 2;
|
||||
// }
|
||||
// })
|
||||
</script>
|
||||
<template>
|
||||
<div class="main-container">
|
||||
<div class="bcc"></div>
|
||||
<div class="title">一些可以直接下载的工具</div>
|
||||
<div class="subtitle" v-if="loadStatus != 2">请在浏览此部分内容前阅读并同意<a
|
||||
@click="showAgreement = true">《网站使用协议》</a>，继续使用或浏览表示您接受协议条款。</div>
|
||||
<div class="load-fail" v-if="loadStatus == 2">加载失败，请刷新界面重试。</div>
|
||||
<div class="load-fail" v-if="loadStatus == 0">加载中，请稍后...</div>
|
||||
<div class="content-container" v-if="loadStatus == 1">
|
||||
<div class="content" @click="urlTo(`${item.src}`)" v-for="item of ResourceDatas">
|
||||
<div class="icon-container">
|
||||
<img :src="item.icon_src" alt="" class="icon">
|
||||
</div>
|
||||
<div class="describe-container">
|
||||
<div class="title">{{ item.title }}</div>
|
||||
<div class="describe">{{ item.describe }}</div>
|
||||
<div class="lable-container">
|
||||
<div class="lable" :class="{ 'lable-OS': lable.type === 'OS' }" v-for="lable of item.addition.lables">{{
|
||||
lable.text }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lable-relative" v-if="item.addition.lable.text">
|
||||
<div class="lable" :class="{ 'lable-2': (item.addition.lable.class.indexOf('lable-2') != -1) }">{{
|
||||
item.addition.lable.text }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content content-hidden"></div>
|
||||
</div>
|
||||
</div>
|
||||
<Agreement v-if="showAgreement" @closeAgreement="showAgreement = false" />
|
||||
</template>
|
||||
<style scoped>
|
||||
.main-container {
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bcc {
|
||||
position: fixed;
|
||||
z-index: -1;
|
||||
background-color: #f6f8f9;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.main-container>.title {
|
||||
margin-top: 80px;
|
||||
font-size: 42px;
|
||||
cursor: default;
|
||||
transition: all 0.4s;
|
||||
}
|
||||
|
||||
.main-container>.subtitle {
|
||||
margin-top: 20px;
|
||||
color: #666;
|
||||
cursor: default;
|
||||
font-size: 12px;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.main-container>.subtitle>a {
|
||||
color: #222;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
border-bottom: 1px solid #f7f8f9;
|
||||
}
|
||||
|
||||
.main-container>.subtitle>a:hover {
|
||||
border-bottom: 1px solid #222;
|
||||
}
|
||||
|
||||
.load-fail {
|
||||
text-align: center;
|
||||
margin-top: 80px;
|
||||
cursor: default;
|
||||
margin-bottom: 380px;
|
||||
transition: all 0.4s;
|
||||
}
|
||||
|
||||
.content-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
max-width: 1000px;
|
||||
margin: 50px auto;
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 380px;
|
||||
/* height: 135px; */
|
||||
margin: 20px 30px;
|
||||
padding: 30px;
|
||||
background-color: #fff;
|
||||
border-radius: 15px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0px 2px 5px 0px #ccc;
|
||||
transition: all 0.4s;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.content>.lable-relative {
|
||||
position: relative;
|
||||
width: 0;
|
||||
height: 0;
|
||||
bottom: 18px;
|
||||
right: 38px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.content>.lable-relative>.lable {
|
||||
width: 100px;
|
||||
height: 18px;
|
||||
line-height: 18px;
|
||||
background-color: rgba(255, 25, 0, 0.7);
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.content>.lable-relative>.lable-2 {
|
||||
background-color: rgba(255, 128, 0, 0.7);
|
||||
}
|
||||
|
||||
.content-hidden {
|
||||
opacity: 0;
|
||||
height: 1px;
|
||||
margin: 0 30px;
|
||||
padding: 0 30px;
|
||||
}
|
||||
|
||||
.content:hover {
|
||||
box-shadow: 0px 5px 12px 0px #ccc;
|
||||
}
|
||||
|
||||
.content .icon-container .icon {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin-left: 10px;
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
box-shadow: 0px 1px 4px 1px #ccc;
|
||||
border-radius: 10px;
|
||||
transition: all 0.4s;
|
||||
}
|
||||
|
||||
.content .describe-container {
|
||||
margin-left: 20px;
|
||||
/* width: 200px; */
|
||||
flex: 1;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.describe-container .title {
|
||||
font-size: 23px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.describe-container .describe {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.describe-container .lable-container {
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
margin-top: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.describe-container .lable-container .lable {
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
color: #666;
|
||||
background-color: #eceef1;
|
||||
padding: 1px 6px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.describe-container .lable-container .lable-OS {
|
||||
background-color: #d6eeff;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1200px) {
|
||||
.content {
|
||||
width: 410px;
|
||||
margin-left: 40px;
|
||||
margin-right: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 550px) {
|
||||
.main-container>.title {
|
||||
font-size: 28px;
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
.content-container {
|
||||
flex-direction: column;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.load-fail {
|
||||
margin-top: 40px;
|
||||
margin-bottom: 450px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 450px) {
|
||||
.content {
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
border-radius: 0;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.content .icon-container .icon {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
}
|
||||
|
||||
.describe-container .title {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
154
tonecn/src/views/HomeView.vue
Normal file
154
tonecn/src/views/HomeView.vue
Normal file
@@ -0,0 +1,154 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue';
|
||||
let containerHeight = ref('800px');
|
||||
onMounted(() => {
|
||||
// 主盒子高度根据初始视窗高度自适应
|
||||
containerHeight.value = window.innerHeight > 500 ? window.innerHeight - 90 + 'px' : '390px';
|
||||
|
||||
// 界面特效字体
|
||||
let nameElement = document.getElementById("my-name");
|
||||
if( nameElement == null){
|
||||
console.error('未找到元素my-name')
|
||||
return;
|
||||
}
|
||||
let colorNum = 66;
|
||||
let colorNumReverse = false;
|
||||
setInterval(() => {
|
||||
if(colorNumReverse)
|
||||
{
|
||||
colorNum--;
|
||||
if(colorNum<=66)
|
||||
colorNumReverse = !colorNumReverse;
|
||||
}else{
|
||||
colorNum++;
|
||||
if(colorNum>=255)
|
||||
colorNumReverse = !colorNumReverse;
|
||||
}
|
||||
nameElement.style.backgroundImage = `linear-gradient(45deg, rgb(${colorNum}, 66, ${255 - (66 - colorNum)}), rgb(${255 - (66 - colorNum)}, 66, ${colorNum}))`;
|
||||
}, 20);
|
||||
})
|
||||
</script>
|
||||
<template>
|
||||
<div class="bcc"></div>
|
||||
<div class="main-container" id="home-main">
|
||||
<img src="../assets/logo.jpg" alt="" class="logo">
|
||||
<div class="name" id="my-name">特恩(TONE)</div>
|
||||
<div class="self-introduction">一名计算机类专业在校本科大二学生</div>
|
||||
<div class="button-container">
|
||||
<a href="https://space.bilibili.com/474156211">
|
||||
<button class="button" id="button-resource">哔哩哔哩</button>
|
||||
</a>
|
||||
<a href="https://github.com/tonecn">
|
||||
<button class="button button-style2" id="button-code">GitHub</button>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped>
|
||||
.bcc {
|
||||
background-color: #fafafa;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.main-container {
|
||||
margin: 0 auto;
|
||||
max-width: 800px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: height 0.2s;
|
||||
height: v-bind(containerHeight);
|
||||
}
|
||||
|
||||
.logo {
|
||||
border-radius: 50%;
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 42px;
|
||||
font-weight: 800;
|
||||
margin-top: 25px;
|
||||
cursor: default;
|
||||
background: linear-gradient(45deg, rgb(66, 66, 255), rgb(255, 66, 66));
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
transition: font-size 0.2s;
|
||||
}
|
||||
|
||||
.self-introduction {
|
||||
margin-top: 10px;
|
||||
font-size: 23px;
|
||||
cursor: default;
|
||||
color: #888;
|
||||
transition: font-size 0.2s;
|
||||
}
|
||||
|
||||
.button-container {
|
||||
margin-top: 28px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.button {
|
||||
cursor: pointer;
|
||||
width: 130px;
|
||||
height: 46px;
|
||||
background-color: #2591f0;
|
||||
color: #fff;
|
||||
border: none;
|
||||
font-size: 16px;
|
||||
border-radius: 23px;
|
||||
margin: 0 10px;
|
||||
transition: background-color 0.2s;
|
||||
box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.button-style2 {
|
||||
background-color: #e87f29;
|
||||
}
|
||||
|
||||
#button-resource:hover {
|
||||
background-color: #1d74c0;
|
||||
}
|
||||
|
||||
#button-code:hover {
|
||||
background-color: #d5782c;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 470px) {
|
||||
.name {
|
||||
font-size: 34px;
|
||||
}
|
||||
|
||||
.self-introduction {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.button-container {
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.button {
|
||||
width: 180px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 800px) {
|
||||
.main-container {
|
||||
height: calc(v-bind(containerHeight) + 15px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
257
tonecn/src/views/Resource.vue
Normal file
257
tonecn/src/views/Resource.vue
Normal file
@@ -0,0 +1,257 @@
|
||||
<script setup lang="ts">
|
||||
import { request } from '@/lib/request';
|
||||
import Agreement from '@/components/Common/Agreement.vue';
|
||||
import { ref, onMounted, reactive } from 'vue';
|
||||
let showAgreement = ref(false);
|
||||
let loadStatus = ref(0);// 0加载中 1加载成功 2加载失败
|
||||
let ResourceDatas: any[] = reactive([])
|
||||
onMounted(async () => {
|
||||
// 用于获取数据的函数
|
||||
let res = await request.get('resource/list');
|
||||
console.log(res)
|
||||
if (res && res.code == 0) {
|
||||
loadStatus.value = 1;
|
||||
ResourceDatas.push(...res.data)
|
||||
} else {
|
||||
loadStatus.value = 2;
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<template>
|
||||
<div class="main-container">
|
||||
<div class="bcc"></div>
|
||||
<div class="title">精心挑选并收藏的资源</div>
|
||||
<div class="subtitle" v-if="loadStatus != 2">请在浏览此部分内容前阅读并同意<a
|
||||
@click="showAgreement = true">《网站使用协议》</a>，继续使用或浏览表示您接受协议条款。</div>
|
||||
<div class="load-fail" v-if="loadStatus == 2">加载失败，请刷新界面重试。</div>
|
||||
<div class="load-fail" v-if="loadStatus == 0">加载中，请稍后...</div>
|
||||
<div class="content-container" v-if="loadStatus == 1">
|
||||
<div class="content" v-for="item of ResourceDatas">
|
||||
<div class="icon-container">
|
||||
<img :src="item.icon_src" alt="" class="icon">
|
||||
</div>
|
||||
<div class="describe-container">
|
||||
<div class="title">{{ item.title }}</div>
|
||||
<div class="describe">{{ item.describe }}</div>
|
||||
<div class="lable-container">
|
||||
<div class="lable" :class="{ 'lable-OS': lable.type === 'OS' }" v-for="lable of item.addition.lables">{{
|
||||
lable.text }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lable-relative" v-if="item.addition.lable.text">
|
||||
<div class="lable" :class="{ 'lable-2': (item.addition.lable.class.indexOf('lable-2') != -1) }">{{
|
||||
item.addition.lable.text }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content content-hidden"></div>
|
||||
</div>
|
||||
</div>
|
||||
<Agreement v-if="showAgreement" @closeAgreement="showAgreement = false" />
|
||||
</template>
|
||||
<style scoped>
|
||||
.main-container {
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bcc {
|
||||
position: fixed;
|
||||
z-index: -1;
|
||||
background-color: #f6f8f9;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.main-container>.title {
|
||||
margin-top: 80px;
|
||||
font-size: 42px;
|
||||
cursor: default;
|
||||
transition: all 0.4s;
|
||||
}
|
||||
|
||||
.main-container>.subtitle {
|
||||
margin-top: 20px;
|
||||
color: #666;
|
||||
cursor: default;
|
||||
font-size: 12px;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.main-container>.subtitle>a {
|
||||
color: #222;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
border-bottom: 1px solid #f7f8f9;
|
||||
}
|
||||
|
||||
.main-container>.subtitle>a:hover {
|
||||
border-bottom: 1px solid #222;
|
||||
}
|
||||
|
||||
.load-fail {
|
||||
text-align: center;
|
||||
margin-top: 80px;
|
||||
cursor: default;
|
||||
margin-bottom: 380px;
|
||||
transition: all 0.4s;
|
||||
}
|
||||
|
||||
.content-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
max-width: 1000px;
|
||||
margin: 50px auto;
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 380px;
|
||||
/* height: 135px; */
|
||||
margin: 20px 30px;
|
||||
padding: 30px;
|
||||
background-color: #fff;
|
||||
border-radius: 15px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0px 2px 5px 0px #ccc;
|
||||
transition: all 0.4s;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.content>.lable-relative {
|
||||
position: relative;
|
||||
width: 0;
|
||||
height: 0;
|
||||
bottom: 18px;
|
||||
right: 38px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.content>.lable-relative>.lable {
|
||||
width: 100px;
|
||||
height: 18px;
|
||||
line-height: 18px;
|
||||
background-color: rgba(255, 25, 0, 0.7);
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.content>.lable-relative>.lable-2 {
|
||||
background-color: rgba(255, 128, 0, 0.7);
|
||||
}
|
||||
|
||||
.content-hidden {
|
||||
opacity: 0;
|
||||
height: 1px;
|
||||
margin: 0 30px;
|
||||
padding: 0 30px;
|
||||
}
|
||||
|
||||
.content:hover {
|
||||
box-shadow: 0px 5px 12px 0px #ccc;
|
||||
}
|
||||
|
||||
.content .icon-container .icon {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin-left: 10px;
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
box-shadow: 0px 1px 4px 1px #ccc;
|
||||
border-radius: 10px;
|
||||
transition: all 0.4s;
|
||||
}
|
||||
|
||||
.content .describe-container {
|
||||
margin-left: 20px;
|
||||
/* width: 200px; */
|
||||
flex: 1;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.describe-container .title {
|
||||
font-size: 23px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.describe-container .describe {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.describe-container .lable-container {
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
margin-top: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.describe-container .lable-container .lable {
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
color: #666;
|
||||
background-color: #eceef1;
|
||||
padding: 1px 6px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.describe-container .lable-container .lable-OS {
|
||||
background-color: #d6eeff;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1200px) {
|
||||
.content {
|
||||
width: 410px;
|
||||
margin-left: 40px;
|
||||
margin-right: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 550px) {
|
||||
.main-container>.title {
|
||||
font-size: 28px;
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
.content-container {
|
||||
flex-direction: column;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.load-fail {
|
||||
margin-top: 40px;
|
||||
margin-bottom: 450px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 450px) {
|
||||
.content {
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
border-radius: 0;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.content .icon-container .icon {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
}
|
||||
|
||||
.describe-container .title {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user