mirror of
https://github.com/linux-odyssey/linux-odyssey.git
synced 2026-11-06 03:20:13 +08:00
modify background, change color when completed
This commit is contained in:
Annie Huang committed
1 parent
46efb15273
commit
c272fe61a8
2 files changed
+230
-32
No files matched your search
+224
-25
@@ -1,32 +1,218 @@
|
||||
<template>
|
||||
<div class="p-2.5 bg-black w-full h-full flex">
|
||||
<div class="text-slate-600 absolute w-full z-0 p-2">
|
||||
<h1 class="relative left-1/3">01010111 01100101 01101100 01100011</h1>
|
||||
<h1 class="relative left-1/4">
|
||||
01101111 01101101 01100101 00100000 01110100 01101111
|
||||
<div class="relative bg-black w-full h-full flex">
|
||||
<div
|
||||
class="text-slate-500 relative flex flex-col blur-[2px] w-1/2 h-full flex-wrap"
|
||||
>
|
||||
<h1 class="relative flex w-fit" style="left: 38%; height: 3%">
|
||||
01111000 00100000 01001111 01100100 01111001 01110011
|
||||
</h1>
|
||||
<h1 class="relative left-1/4">
|
||||
00100000 01001100 01101001 01101110 01110101 01111000 00100000
|
||||
<h1 class="relative flex w-fit" style="left: 26%; height: 3%">
|
||||
01110011 01100101 01111001 00100001 01010111 01100101
|
||||
</h1>
|
||||
<h1 class="relative left-1/4">
|
||||
01001111 01100100 01111001 01110011 01110011 01100101 01111001
|
||||
<h1 class="relative flex w-fit" style="left: 20%; height: 3%">
|
||||
01101100 01100011 01101111 01101101 01100101 00100000
|
||||
</h1>
|
||||
<h1 class="relative left-1/4">
|
||||
00100001 01010111 01100101 01101100 01100011 01101111 01101101 01100101
|
||||
<h1 class="relative flex w-fit" style="left: 15%; height: 3%">
|
||||
01110100 01101111 00100000 01001100 01101001 01101110
|
||||
</h1>
|
||||
<h1 class="relative left-1/4">
|
||||
00100000 01110100 01101111 00100000 01001100 01101001 01101110 01110101
|
||||
<h1 class="relative flex w-fit" style="left: 5%; height: 3%">
|
||||
01101101 01100101 00100000 01110100 01101111 01101111
|
||||
<h1 class="relative flex w-fit" style="left: 13%; height: 3%">
|
||||
01101110 01110101 01111000 00100000 01001111 01100100
|
||||
</h1>
|
||||
<h1 class="relative flex w-fit" style="left: 5%; height: 3%">
|
||||
01010111 01100101 01101100 01100011 01111000
|
||||
</h1>
|
||||
<h1 class="relative flex w-fit" style="left: 3%; height: 3%">
|
||||
01101111 01101101 01100101 00100000 01110100
|
||||
</h1>
|
||||
<h1 class="relative flex w-fit" style="left: 13%; height: 3%">
|
||||
00100000 01001100 01101001 01101110 01110101
|
||||
</h1>
|
||||
<h1 class="relative flex w-fit" style="left: 16%; height: 3%">
|
||||
00100000 01001111 01100100 01111001 01110011
|
||||
</h1>
|
||||
<h1 class="relative flex w-fit" style="left: 17%; height: 3%">
|
||||
01110011 01100101 01111001 00100001 01010111
|
||||
</h1>
|
||||
<h1 class="relative flex w-fit" style="left: 12%; height: 3%">
|
||||
01100101 01101100 01100011 01101111 01101101
|
||||
</h1>
|
||||
<h1 class="relative flex w-fit" style="left: 8%; height: 3%">
|
||||
01100101 00100000 01110100 01101111 01010111
|
||||
</h1>
|
||||
<h1 class="relative flex w-fit" style="left: 8%; height: 3%">
|
||||
00100000 01001100 01101001 01101110 01110101
|
||||
</h1>
|
||||
<h1 class="relative flex w-fit" style="left: 9%; height: 3%">
|
||||
01111000 00100000 01001111 01100100 01111001
|
||||
</h1>
|
||||
<h1 class="relative flex w-fit" style="left: 6%; height: 3%">
|
||||
01110011 01110011 01100101 01101100 01101100 01101001
|
||||
</h1>
|
||||
<h1 class="relative flex w-fit" style="left: 5%; height: 3%">
|
||||
01111001 00100001 01010111 01100011 01100101 01101001
|
||||
</h1>
|
||||
<h1 class="relative flex w-fit" style="left: 9%; height: 3%">
|
||||
01100101 01101100 01110101 01111000 01001100
|
||||
</h1>
|
||||
<h1 class="relative flex w-fit" style="left: 7%; height: 3%">
|
||||
00100000 01001111 01100100 01111001 01110011 01110011
|
||||
</h1>
|
||||
<h1 class="relative flex w-fit" style="left: 3%; height: 3%">
|
||||
01100101 01111001 00100001 01010111 01100101
|
||||
</h1>
|
||||
<h1 class="relative flex w-fit" style="left: 6%; height: 3%">
|
||||
01101111 01101101 01010111 01100101 01101100 01100011
|
||||
</h1>
|
||||
<h1 class="relative flex w-fit" style="left: 5%; height: 3%">
|
||||
01101101 01100101 00100000 01110100 01101111 00100000
|
||||
</h1>
|
||||
<h1 class="relative flex w-fit" style="left: 3%; height: 3%">
|
||||
01101110 01110101 01111000 00100000 01001111 01100100
|
||||
</h1>
|
||||
<h1 class="relative flex w-fit" style="left: 6%; height: 3%">
|
||||
01100011 01101111 01101101 01111001 01110011
|
||||
</h1>
|
||||
<h1 class="relative flex w-fit" style="left: 9%; height: 3%">
|
||||
01100101 00100000 01110100 01001100
|
||||
</h1>
|
||||
<h1 class="relative flex w-fit" style="left: 7%; height: 3%">
|
||||
01101111 00100000 01001100 01101111 01101111
|
||||
</h1>
|
||||
<h1 class="relative flex w-fit" style="left: 5%; height: 3%">
|
||||
01101001 01101110 011101010 1111001 01110011
|
||||
</h1>
|
||||
<h1 class="relative flex w-fit" style="left: 6%; height: 3%">
|
||||
01111000 00100000 01001111 00100000
|
||||
</h1>
|
||||
</h1>
|
||||
<h1 class="relative left-1/4">
|
||||
01111000 00100000 01001111 01100100 01111001 01110011 01110011 01100101
|
||||
<h1 class="relative flex w-fit" style="left: 4%; height: 3%">
|
||||
01100100 01111001 01110011 01110011
|
||||
</h1>
|
||||
<h1 class="relative flex w-fit" style="left: 3%; height: 3%">
|
||||
01100101 01111001 00100001
|
||||
</h1>
|
||||
<h1 class="relative flex w-fit" style="left: 5%; height: 3%">
|
||||
01100101 01101100 01100011 01101111
|
||||
</h1>
|
||||
<h1 class="relative flex w-fit" style="left: 2%; height: 3%">
|
||||
01101101 01100101 00100000 01110100
|
||||
</h1>
|
||||
<h1 class="relative flex w-fit" style="left: 3%; height: 3%">
|
||||
00100000 01001100 01101001 01101110 01110101
|
||||
</h1>
|
||||
<h1 class="relative left-1/4">01111001 00100001</h1>
|
||||
</div>
|
||||
<h1 class="text-text-primary text-xl absolute left-2 w-full z-1">
|
||||
<div
|
||||
class="text-slate-500 relative flex flex-col blur-[2px] w-1/2 h-full flex-wrap"
|
||||
>
|
||||
<h1 class="relative flex w-fit" style="left: 7%; height: 3%">
|
||||
01010111 01100101 01101100 01100011 01001100 01101001 00100000
|
||||
</h1>
|
||||
<h1 class="relative flex w-fit" style="left: 14%; height: 3%">
|
||||
01101111 01101101 01100101 00100000 01110100 01101111 01100100
|
||||
</h1>
|
||||
<h1 class="relative flex w-fit" style="left: 18%; height: 3%">
|
||||
00100000 01001100 01101001 01101110 01110101 01111000
|
||||
</h1>
|
||||
<h1 class="relative flex w-fit" style="left: 19%; height: 3%">
|
||||
00100000 01001111 01100100 01111001 01110011 01101111
|
||||
</h1>
|
||||
<h1 class="relative flex w-fit" style="left: 25%; height: 3%">
|
||||
01110011 01100101 01111001 00100001 01010111 01100100
|
||||
</h1>
|
||||
<h1 class="relative flex w-fit" style="left: 24%; height: 3%">
|
||||
01100101 01101100 01100011 01101111 01101101 01110011
|
||||
</h1>
|
||||
<h1 class="relative flex w-fit" style="left: 23%; height: 3%">
|
||||
01100101 00100000 01110100 01101111 00100000 01111001
|
||||
</h1>
|
||||
<h1 class="relative flex w-fit" style="left: 23%; height: 3%">
|
||||
00100000 01001100 01101001 01101110 01110101 01111001 01110011
|
||||
</h1>
|
||||
<h1 class="relative flex w-fit" style="left: 27%; height: 3%">
|
||||
01111000 00100000 01001111 01100100 01111001 01100100
|
||||
</h1>
|
||||
<h1 class="relative flex w-fit" style="left: 29%; height: 3%">
|
||||
01110011 01110011 01100101 01111001 01110011
|
||||
</h1>
|
||||
<h1 class="relative flex w-fit" style="left: 35%; height: 3%">
|
||||
01111001 00100001 01010111 01101110 01110011
|
||||
</h1>
|
||||
<h1 class="relative flex w-fit" style="left: 30%; height: 3%">
|
||||
01100101 01101100 01100011 01100101 01101100
|
||||
</h1>
|
||||
<h1 class="relative flex w-fit" style="left: 20%; height: 3%">
|
||||
01100011 01101111 01101101 01100100 01111001 01110011
|
||||
</h1>
|
||||
<h1 class="relative flex w-fit" style="left: 23%; height: 3%">
|
||||
01100101 00100000 01110100 01101111 01100101 01101001
|
||||
</h1>
|
||||
<h1 class="relative flex w-fit" style="left: 27%; height: 3%">
|
||||
01101111 00100000 01001100 01100101 01101100 01101111
|
||||
</h1>
|
||||
<h1 class="relative flex w-fit" style="left: 28%; height: 3%">
|
||||
01101001 01101110 01110101 01001100 01101001 01001111
|
||||
</h1>
|
||||
<h1 class="relative flex w-fit" style="left: 35%; height: 3%">
|
||||
01111000 00100000 01001111 00100000 01100011
|
||||
</h1>
|
||||
<h1 class="relative flex w-fit" style="left: 32%; height: 3%">
|
||||
01100100 01111001 01110011 01110011 01010111 01100101
|
||||
</h1>
|
||||
<h1 class="relative flex w-fit" style="left: 29%; height: 3%">
|
||||
01100101 01111001 00100001 01010111 01010111 01101100
|
||||
</h1>
|
||||
<h1 class="relative flex w-fit" style="left: 43%; height: 3%">
|
||||
01100101 01101100 01100011 01101111 01001111
|
||||
</h1>
|
||||
<h1 class="relative flex w-fit" style="left: 46%; height: 3%">
|
||||
01101101 01100101 00100000 01110100
|
||||
</h1>
|
||||
<h1 class="relative flex w-fit" style="left: 43%; height: 3%">
|
||||
00100000 01001100 01101001 01101110 01110101
|
||||
</h1>
|
||||
<h1 class="relative flex w-fit" style="left: 45%; height: 3%">
|
||||
01111000 00100000 01001111 01100100 01111001
|
||||
</h1>
|
||||
<h1 class="relative flex w-fit" style="left: 52%; height: 3%">
|
||||
01110011 01100101 01111001 00100001
|
||||
</h1>
|
||||
<h1 class="relative flex w-fit" style="left: 48%; height: 3%">
|
||||
01101100 01100011 01101111 01101101
|
||||
</h1>
|
||||
<h1 class="relative flex w-fit" style="left: 53%; height: 3%">
|
||||
01110100 01101111 00100000 01001100
|
||||
</h1>
|
||||
<h1 class="relative flex w-fit" style="left: 52%; height: 3%">
|
||||
01110101 01111000 00100000 01001111
|
||||
</h1>
|
||||
<h1 class="relative flex w-fit" style="left: 59%; height: 3%">
|
||||
01100101 01111001 00100001
|
||||
</h1>
|
||||
<h1 class="relative flex w-fit" style="left: 50%; height: 3%">
|
||||
01101111 01101101 01010111 01100101
|
||||
</h1>
|
||||
<h1 class="relative flex w-fit" style="left: 51%; height: 3%">
|
||||
01101101 01100101 00100000 01110100
|
||||
</h1>
|
||||
<h1 class="relative flex w-fit" style="left: 50%; height: 3%">
|
||||
01101110 01110101 01111000 00100000
|
||||
</h1>
|
||||
<h1 class="relative flex w-fit" style="left: 52%; height: 3%">
|
||||
01101101 01100101 00100000 01110100
|
||||
</h1>
|
||||
<h1 class="relative flex w-fit" style="left: 43%; height: 3%">
|
||||
01101110 01110101 01111000 00100000 01101111
|
||||
</h1>
|
||||
</div>
|
||||
<h1
|
||||
class="text-text-primary text-xl p-2.5 absolute w-fit z-2 font-mono font-bold flex flax-wrap"
|
||||
>
|
||||
Get through your linux journey!
|
||||
</h1>
|
||||
<div class="p-2.5 relative w-full h-full z-2">
|
||||
<div ref="chartContainer" class="p-2.5 w-full h-full"></div>
|
||||
<div class="flex flex-wrap absolute w-full h-full z-1">
|
||||
<div ref="chartContainer" class="w-full h-full flex flex-wrap"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -44,7 +230,7 @@ import api from '../utils/api'
|
||||
import { NodeImage } from '../img/svg.js'
|
||||
|
||||
const marginX = 100
|
||||
const marginY = 70
|
||||
const marginY = 65
|
||||
const chartContainer = ref(null)
|
||||
let chartInstance = null
|
||||
|
||||
@@ -63,6 +249,7 @@ async function getQuests() {
|
||||
async function getProgress() {
|
||||
try {
|
||||
const res = await api.get('/users/me')
|
||||
console.log(res.data.progress)
|
||||
return res.data.progress
|
||||
} catch (err) {
|
||||
console.error(err)
|
||||
@@ -86,10 +273,10 @@ const genOption = (nodes, edges) => ({
|
||||
roam: true,
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: 20,
|
||||
fontSize: 22,
|
||||
},
|
||||
edgeSymbol: ['circle', 'arrow'],
|
||||
edgeSymbolSize: [5, 12],
|
||||
edgeSymbol: ['pin', 'arrow'],
|
||||
edgeSymbolSize: [2, 15],
|
||||
edgeLabel: {
|
||||
fontSize: 25,
|
||||
},
|
||||
@@ -99,9 +286,21 @@ const genOption = (nodes, edges) => ({
|
||||
lineStyle: {
|
||||
opacity: 4,
|
||||
width: 3,
|
||||
curveness: 0,
|
||||
curveness: 0.08,
|
||||
},
|
||||
itemStyle: {
|
||||
color: (params) => {
|
||||
const {
|
||||
data: { completed },
|
||||
} = params
|
||||
switch (completed) {
|
||||
case true:
|
||||
return '#ADADB5'
|
||||
default:
|
||||
return '#454552'
|
||||
}
|
||||
},
|
||||
},
|
||||
itemStyle: { color: '#454552' },
|
||||
},
|
||||
],
|
||||
})
|
||||
|
||||
Reference in new issue
Block a user