mirror of
https://github.com/yawaflua/LuckyDiamond.git
synced 2025-12-10 04:09:29 +02:00
thesh_hzlol
This commit is contained in:
@@ -1,7 +1,16 @@
|
|||||||
|
.developer-card__content_down {
|
||||||
|
width: 1204px;
|
||||||
|
height: 443px;
|
||||||
|
background-color: aquamarine;
|
||||||
|
margin-left: 287px;
|
||||||
|
margin-right: 298px;
|
||||||
|
margin-bottom: 77px;
|
||||||
|
}
|
||||||
.developer-card__content {
|
.developer-card__content {
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
|
background-color: black;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -116,15 +125,15 @@
|
|||||||
|
|
||||||
.developer-card-height__skin {
|
.developer-card-height__skin {
|
||||||
margin-top: 6px;
|
margin-top: 6px;
|
||||||
display: flex;
|
display: inline-block;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.developer-card-height__skin-content {
|
.developer-card-height__skin {
|
||||||
width: 212px;
|
width: 212px;
|
||||||
height: 212px;
|
height: 212px;
|
||||||
background-image: url(@/assets/icons-developcard/Hepatir.png);
|
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: flex-end;
|
align-items: flex-end;
|
||||||
@@ -141,3 +150,4 @@
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -23,7 +23,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="developer-card__content" v-else>
|
<div class="developer-card__content_down" v-else>
|
||||||
<div class="developer-card__height" :style="{ background: developer.background }">
|
<div class="developer-card__height" :style="{ background: developer.background }">
|
||||||
<div class="developer-card-height__text">
|
<div class="developer-card-height__text">
|
||||||
<div class="developer-card-height__about-text">
|
<div class="developer-card-height__about-text">
|
||||||
@@ -34,15 +34,14 @@
|
|||||||
<img :src="require(`@/assets/icons-developcard/${developer.technologyIcons[index]}.png`)" :alt="techText">
|
<img :src="require(`@/assets/icons-developcard/${developer.technologyIcons[index]}.png`)" :alt="techText">
|
||||||
<p>{{ techText }}</p>
|
<p>{{ techText }}</p>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="developer-card-height__skin">
|
||||||
<div class="developer-card__socials">
|
<div class="developer-card__socials">
|
||||||
<div v-for="(socialIcon, index) in developer.socialIcons" :key="index" class="social__content">
|
<div v-for="(socialIcon, index) in developer.socialIcons" :key="index" class="social__content">
|
||||||
<img :src="require(`@/assets/icons-developcard/${developer.socialIcons[index]}.png`)">
|
<img :src="require(`@/assets/icons-developcard/${developer.socialIcons[index]}.png`)">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="developer-card-height__skin">
|
|
||||||
<img :src="`https://avatar.spworlds.ru/front/256/${developer.username}`" :alt="developer.username">
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
|
|||||||
@@ -1,136 +0,0 @@
|
|||||||
<template>
|
|
||||||
<LineChart
|
|
||||||
:chart-data="data"
|
|
||||||
:options="options"
|
|
||||||
css-classes="chart-container"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { LineChart } from "vue-chart-3";
|
|
||||||
import {
|
|
||||||
Chart,
|
|
||||||
LineController,
|
|
||||||
CategoryScale,
|
|
||||||
LinearScale,
|
|
||||||
PointElement,
|
|
||||||
LineElement,
|
|
||||||
} from "chart.js";
|
|
||||||
|
|
||||||
Chart.register(
|
|
||||||
LineController,
|
|
||||||
CategoryScale,
|
|
||||||
LinearScale,
|
|
||||||
PointElement,
|
|
||||||
LineElement
|
|
||||||
);
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: { LineChart },
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
dataValues: [1, 2, 3],
|
|
||||||
labels: [""],
|
|
||||||
data: null,
|
|
||||||
options: {
|
|
||||||
plugins: {
|
|
||||||
title: {
|
|
||||||
text: "Line",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
animation: {
|
|
||||||
duration: 200,
|
|
||||||
easing: "easeInOutQuad",
|
|
||||||
delay: 50,
|
|
||||||
onProgress: (animation) => {
|
|
||||||
const chart = animation.chart;
|
|
||||||
const ctx = chart.ctx;
|
|
||||||
const meta = chart.getDatasetMeta(0);
|
|
||||||
const points = meta.data;
|
|
||||||
const totalSteps = meta.total;
|
|
||||||
|
|
||||||
ctx.save();
|
|
||||||
ctx.beginPath();
|
|
||||||
|
|
||||||
points.forEach((point, index) => {
|
|
||||||
const prevPoint = meta.data[index - 1];
|
|
||||||
const progress = animation.progress;
|
|
||||||
|
|
||||||
if (index === 0 || progress * totalSteps > index) {
|
|
||||||
const x = prevPoint ? prevPoint.x + (point.x - prevPoint.x) * progress : point.x;
|
|
||||||
const y = prevPoint ? prevPoint.y + (point.y - prevPoint.y) * progress : point.y;
|
|
||||||
|
|
||||||
ctx.lineTo(x, y);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
ctx.lineWidth = 3;
|
|
||||||
ctx.stroke();
|
|
||||||
ctx.restore();
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
},
|
|
||||||
|
|
||||||
computed: {
|
|
||||||
chartData() {
|
|
||||||
return {
|
|
||||||
labels: this.labels,
|
|
||||||
datasets: [
|
|
||||||
{
|
|
||||||
label: "Foo",
|
|
||||||
data: this.dataValues,
|
|
||||||
borderColor: "#4E5EF2",
|
|
||||||
pointStyle: "circle",
|
|
||||||
pointRadius: 0,
|
|
||||||
pointHoverRadius: 2,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
|
||||||
updateData() {
|
|
||||||
const interval = 495;
|
|
||||||
let counter = 0;
|
|
||||||
|
|
||||||
const updateInterval = setInterval(() => {
|
|
||||||
const nextDataValue = this.dataValues[this.dataValues.length - 1] + 1;
|
|
||||||
this.dataValues.push(nextDataValue);
|
|
||||||
|
|
||||||
this.labels.push("");
|
|
||||||
this.data = this.chartData;
|
|
||||||
|
|
||||||
if (counter >= 6000 / interval) {
|
|
||||||
clearInterval(updateInterval);
|
|
||||||
}
|
|
||||||
counter++;
|
|
||||||
}, interval);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
mounted() {
|
|
||||||
this.data = this.chartData;
|
|
||||||
this.updateData();
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
|
|
||||||
.chart-container {
|
|
||||||
width: 600px;
|
|
||||||
top: 250px;
|
|
||||||
left: 30%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chart-container canvas {
|
|
||||||
width: 600px !important;
|
|
||||||
height: 400px !important;
|
|
||||||
transition: .3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
</style>
|
|
||||||
@@ -103,14 +103,13 @@
|
|||||||
<script>
|
<script>
|
||||||
import HeaderComponent from "@/components/HeaderComponent.vue";
|
import HeaderComponent from "@/components/HeaderComponent.vue";
|
||||||
import AsideBarComponent from "@/components/AsidebarComponent.vue";
|
import AsideBarComponent from "@/components/AsidebarComponent.vue";
|
||||||
import ChatComponent from "@/components/ChatComponent.vue";
|
|
||||||
import HomemobilePage from "@/pages/adaptive-pages/HomemobilePage.vue";
|
import HomemobilePage from "@/pages/adaptive-pages/HomemobilePage.vue";
|
||||||
import GameModes from "@/mocks/GameModes";
|
import GameModes from "@/mocks/GameModes";
|
||||||
import '@/assets/css/PagesStyles/home.css'
|
import '@/assets/css/PagesStyles/home.css'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'HomePage',
|
name: 'HomePage',
|
||||||
components: { AsideBarComponent, HeaderComponent, ChatComponent, HomemobilePage },
|
components: { AsideBarComponent, HeaderComponent, HomemobilePage },
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
GameModes,
|
GameModes,
|
||||||
|
|||||||
@@ -3,8 +3,7 @@ import { createRouter, createWebHistory } from "vue-router";
|
|||||||
import HomePage from "../pages/HomePage.vue";
|
import HomePage from "../pages/HomePage.vue";
|
||||||
import ProfilePage from "@/pages/ProfilePage.vue";
|
import ProfilePage from "@/pages/ProfilePage.vue";
|
||||||
import SapergamePage from "@/pages/games-pages/SapergamePage.vue";
|
import SapergamePage from "@/pages/games-pages/SapergamePage.vue";
|
||||||
import CrashGamePage from "@/pages/games-pages/CrashgamePage.vue";
|
import SettingsPage from "@/pages/SettingsPage.vue";
|
||||||
import SettingsPage from "@/pages/SettingsPage.vue"
|
|
||||||
import AboutPage from "@/pages/AboutPage.vue"
|
import AboutPage from "@/pages/AboutPage.vue"
|
||||||
export default createRouter({
|
export default createRouter({
|
||||||
history: createWebHistory(),
|
history: createWebHistory(),
|
||||||
@@ -12,7 +11,6 @@ export default createRouter({
|
|||||||
{ path: '/', component: HomePage, name: 'home' },
|
{ path: '/', component: HomePage, name: 'home' },
|
||||||
{ path: '/profile', component: ProfilePage, name: 'profile' },
|
{ path: '/profile', component: ProfilePage, name: 'profile' },
|
||||||
{ path: '/game/saper', component: SapergamePage, name: 'saper' },
|
{ path: '/game/saper', component: SapergamePage, name: 'saper' },
|
||||||
{ path: '/game/crash', component: CrashGamePage, name: 'crash' },
|
|
||||||
{ path: '/settings', component: SettingsPage, name: 'settings' },
|
{ path: '/settings', component: SettingsPage, name: 'settings' },
|
||||||
{ path: '/about', component: AboutPage, name: 'about' },
|
{ path: '/about', component: AboutPage, name: 'about' },
|
||||||
]
|
]
|
||||||
|
|||||||
Reference in New Issue
Block a user