upcoming events dynamaic
This commit is contained in:
srikanth_M
parent
d214b2733d
commit
2a7aa7d2ff
@ -1,31 +1,60 @@
|
||||
import UpcomingEventSinglePage from "@/components/events/UpcomingEventSinglePage";
|
||||
import { events } from "@/utility/constant.utils";
|
||||
|
||||
const getEvent = (slug) => events.find((event) => event.slug === slug);
|
||||
export const dynamic = 'force-dynamic';
|
||||
export const revalidate = 0;
|
||||
|
||||
export function generateStaticParams() {
|
||||
return events
|
||||
.filter((event) => event.slug)
|
||||
.map((event) => ({
|
||||
slug: event.slug,
|
||||
}));
|
||||
export async function generateStaticParams() {
|
||||
try {
|
||||
const API_BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL || 'http://localhost:3006/api';
|
||||
const res = await fetch(`${API_BASE_URL}/upcoming-events`);
|
||||
const data = await res.json();
|
||||
if (data && data.success && data.data && data.data.length > 0) {
|
||||
const paramsList = [];
|
||||
data.data.forEach(event => {
|
||||
if (event.slug && String(event.slug).trim()) {
|
||||
paramsList.push({ slug: String(event.slug).trim() });
|
||||
}
|
||||
if (event.id) {
|
||||
paramsList.push({ slug: String(event.id) });
|
||||
}
|
||||
const title = event.title || event.eventtitle || '';
|
||||
if (title) {
|
||||
const titleSlug = String(title).toLowerCase().trim().replace(/\s+/g, '-').replace(/[^\w\-]+/g, '');
|
||||
if (titleSlug) {
|
||||
paramsList.push({ slug: titleSlug });
|
||||
}
|
||||
}
|
||||
});
|
||||
return paramsList.length > 0 ? paramsList : [{ slug: 'default' }];
|
||||
}
|
||||
} catch (e) {
|
||||
console.error("Error in generateStaticParams:", e);
|
||||
}
|
||||
return [{ slug: 'default' }];
|
||||
}
|
||||
|
||||
export async function generateMetadata({ params }) {
|
||||
const event = getEvent(params.slug);
|
||||
|
||||
if (!event) {
|
||||
try {
|
||||
const API_BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL || 'http://localhost:3006/api';
|
||||
const res = await fetch(`${API_BASE_URL}/upcoming-events/slug/${params.slug}`);
|
||||
const data = await res.json();
|
||||
if (data && data.success && data.data) {
|
||||
const event = data.data;
|
||||
return {
|
||||
title: "Upcoming Event | Tamil Culture Waterloo",
|
||||
title: `${event.title || event.eventtitle} | Tamil Culture Waterloo`,
|
||||
description: event.description || event.eventdescription || `Details for ${event.title || event.eventtitle}.`,
|
||||
};
|
||||
}
|
||||
} catch (e) {
|
||||
console.error("Error in generateMetadata:", e);
|
||||
}
|
||||
|
||||
return {
|
||||
title: `${event.title} | Tamil Culture Waterloo`,
|
||||
description: event.desc || `Details for ${event.title}.`,
|
||||
title: "Upcoming Event | Tamil Culture Waterloo",
|
||||
};
|
||||
}
|
||||
|
||||
export default function Page({ params }) {
|
||||
return <UpcomingEventSinglePage slug={params.slug} />;
|
||||
}
|
||||
|
||||
|
||||
@ -1,11 +1,37 @@
|
||||
'use client'
|
||||
import Link from 'next/link'
|
||||
import moment from "moment";
|
||||
import { useState } from "react"
|
||||
import { events } from "@/utility/constant.utils"; // <-- import the events array here
|
||||
import { useState, useEffect } from "react"
|
||||
import axios from "axios";
|
||||
|
||||
export default function UpcomingEventData() {
|
||||
const [currentMonth, setCurrentMonth] = useState(moment());
|
||||
const [events, setEvents] = useState([]);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchEvents = async () => {
|
||||
try {
|
||||
const API_BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL || 'http://localhost:3006/api';
|
||||
const response = await axios.get(`${API_BASE_URL}/upcoming-events`);
|
||||
if (response.data && response.data.success) {
|
||||
const normalizedEvents = response.data.data.map(e => ({
|
||||
...e,
|
||||
title: e.title || e.eventtitle,
|
||||
date: e.date || e.eventdate,
|
||||
image: e.image || e.eventimageurl,
|
||||
desc: e.description || e.eventdescription,
|
||||
btnText: e.btn_text || e.btnText,
|
||||
link: e.link || (e.slug ? `/upcoming-event/${e.slug}` : `/upcoming-event/${e.id}`),
|
||||
location: e.location || e.venue,
|
||||
}));
|
||||
setEvents(normalizedEvents);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error fetching upcoming events:", error);
|
||||
}
|
||||
};
|
||||
fetchEvents();
|
||||
}, []);
|
||||
|
||||
// Get start and end of current month
|
||||
const startOfMonth = currentMonth.clone().startOf("month");
|
||||
@ -135,11 +161,10 @@ export default function UpcomingEventData() {
|
||||
return (
|
||||
<div key={event.id} className="mb-5">
|
||||
<div className="row align-items-center">
|
||||
<div className="col-lg-1" />
|
||||
<div className="col-lg-10 m-auto">
|
||||
<div className="event2-boxarea box1 d-flex flex-wrap align-items-center">
|
||||
<h1 className="active me-3">{String(idx + 1).padStart(2, "0")}</h1>
|
||||
|
||||
<div className="col-lg-12">
|
||||
<div className="event2-boxarea box1">
|
||||
<h1 className="active">{String(idx + 1).padStart(2, "0")}</h1>
|
||||
<div className="row align-items-center">
|
||||
{!isEven ? (
|
||||
<>
|
||||
<div className="col-lg-5">
|
||||
@ -148,9 +173,9 @@ export default function UpcomingEventData() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-lg-1" />
|
||||
<div className="col-lg-2" />
|
||||
|
||||
<div className="col-lg-6">
|
||||
<div className="col-lg-5">
|
||||
<div className="content-area">
|
||||
<ul>
|
||||
<li>
|
||||
@ -199,7 +224,7 @@ export default function UpcomingEventData() {
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<div className="col-lg-6">
|
||||
<div className="col-lg-5">
|
||||
<div className="content-area">
|
||||
<ul>
|
||||
<li>
|
||||
@ -245,7 +270,7 @@ export default function UpcomingEventData() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-lg-1" />
|
||||
<div className="col-lg-2" />
|
||||
|
||||
<div className="col-lg-5">
|
||||
<div className="img1">
|
||||
@ -258,6 +283,7 @@ export default function UpcomingEventData() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
@ -1,7 +1,9 @@
|
||||
'use client'
|
||||
import Layout from "@/components/layout/Layout";
|
||||
import Link from "next/link";
|
||||
import moment from "moment";
|
||||
import { events } from "@/utility/constant.utils";
|
||||
import { useState, useEffect } from "react";
|
||||
import axios from "axios";
|
||||
|
||||
const formatEventDate = (dateStr) => {
|
||||
if (!dateStr) return "Details will be announced";
|
||||
@ -12,11 +14,79 @@ const formatEventDate = (dateStr) => {
|
||||
});
|
||||
};
|
||||
|
||||
export default function UpcomingEventSinglePage({ slug }) {
|
||||
const event = events.find((item) => item.slug === slug);
|
||||
import { useSearchParams } from "next/navigation";
|
||||
|
||||
export default function UpcomingEventSinglePage({ slug: propSlug }) {
|
||||
const searchParams = useSearchParams();
|
||||
const [event, setEvent] = useState(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
let activeSlug = propSlug;
|
||||
if (!activeSlug && searchParams) {
|
||||
activeSlug = searchParams.get('slug') || searchParams.get('id');
|
||||
}
|
||||
if (!activeSlug && typeof window !== 'undefined') {
|
||||
const parts = window.location.pathname.split('/').filter(Boolean);
|
||||
if (parts.length > 0) {
|
||||
activeSlug = parts[parts.length - 1];
|
||||
}
|
||||
}
|
||||
|
||||
const fetchEvent = async () => {
|
||||
try {
|
||||
const API_BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL || 'http://localhost:3006/api';
|
||||
const response = await axios.get(`${API_BASE_URL}/upcoming-events/slug/${activeSlug}`);
|
||||
if (response.data && response.data.success) {
|
||||
const e = response.data.data;
|
||||
setEvent({
|
||||
...e,
|
||||
title: e.title || e.eventtitle,
|
||||
date: e.date || e.eventdate,
|
||||
image: e.image || e.eventimageurl,
|
||||
desc: e.description || e.eventdescription,
|
||||
btnText: e.btn_text || e.btnText,
|
||||
link: e.link || `/upcoming-event/${e.slug}`,
|
||||
location: e.location || e.venue,
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error fetching event details:", error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
if (activeSlug) {
|
||||
fetchEvent();
|
||||
} else {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [propSlug, searchParams]);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<Layout headerStyle={1} footerStyle={1}>
|
||||
<div style={{ padding: '150px 0', textAlign: 'center' }}>
|
||||
<div className="spinner-border" role="status">
|
||||
<span className="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
||||
if (!event) {
|
||||
return null;
|
||||
return (
|
||||
<Layout headerStyle={1} footerStyle={1}>
|
||||
<div style={{ padding: '150px 0', textAlign: 'center' }}>
|
||||
<h2>Event not found</h2>
|
||||
<div className="space20" />
|
||||
<Link href="/upcoming-event" className="vl-btn3">
|
||||
<span className="demo">Back to Events</span>
|
||||
</Link>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
||||
const eventDate = formatEventDate(event.date);
|
||||
|
||||
@ -1,16 +1,40 @@
|
||||
'use client'
|
||||
import Link from 'next/link'
|
||||
import { useState } from "react"
|
||||
import { events } from "@/utility/constant.utils" // import your events array
|
||||
import { useState, useEffect } from "react"
|
||||
import axios from "axios"
|
||||
import { events as staticEvents } from "@/utility/constant.utils"
|
||||
|
||||
export default function HomeUpcomingEvent() {
|
||||
const [isTab, setIsTab] = useState(1)
|
||||
const handleTab = (i: number) => {
|
||||
setIsTab(i)
|
||||
}
|
||||
const [liveEvents, setLiveEvents] = useState<any[]>([])
|
||||
|
||||
// Take only the first 3 events
|
||||
const displayEvents = events.slice(0, 3) as any[];
|
||||
useEffect(() => {
|
||||
const fetchEvents = async () => {
|
||||
try {
|
||||
const API_BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL || 'http://localhost:3006/api';
|
||||
const response = await axios.get(`${API_BASE_URL}/upcoming-events`);
|
||||
if (response.data && response.data.success && response.data.data.length > 0) {
|
||||
const normalizedEvents = response.data.data.map((e: any) => ({
|
||||
...e,
|
||||
title: e.title || e.eventtitle,
|
||||
date: e.date || e.eventdate,
|
||||
image: e.image || e.eventimageurl,
|
||||
desc: e.description || e.desc || e.eventdescription,
|
||||
btnText: e.btn_text || e.btnText,
|
||||
link: e.link || `/upcoming-event/${e.slug || e.id}`,
|
||||
location: e.location || e.venue,
|
||||
}));
|
||||
setLiveEvents(normalizedEvents);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error fetching homepage upcoming events:", error);
|
||||
}
|
||||
};
|
||||
fetchEvents();
|
||||
}, []);
|
||||
|
||||
// Take only the first 3 events from API or fallback
|
||||
const displayEvents = (liveEvents.length > 0 ? liveEvents : staticEvents).slice(0, 3) as any[];
|
||||
|
||||
return (
|
||||
<>
|
||||
@ -50,8 +74,8 @@ export default function HomeUpcomingEvent() {
|
||||
<img src={event.image} alt={event.title} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-1" />
|
||||
<div className="col-lg-6">
|
||||
<div className="col-lg-2" />
|
||||
<div className="col-lg-5">
|
||||
<div className="content-area">
|
||||
<ul>
|
||||
<li>
|
||||
@ -100,7 +124,7 @@ export default function HomeUpcomingEvent() {
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<div className="col-lg-6 order-2 order-lg-1">
|
||||
<div className="col-lg-5 order-2 order-lg-1">
|
||||
<div className="content-area">
|
||||
<ul>
|
||||
<li>
|
||||
@ -147,7 +171,8 @@ export default function HomeUpcomingEvent() {
|
||||
</div>
|
||||
<div className="space30 d-lg-none d-block" />
|
||||
</div>
|
||||
<div className="col-lg-5 order-1 order-lg-2">
|
||||
<div className="col-lg-2 order-1 order-lg-2" />
|
||||
<div className="col-lg-5 order-1 order-lg-3">
|
||||
<div className="img1">
|
||||
<img src={event.image} alt={event.title} />
|
||||
</div>
|
||||
|
||||
@ -1,11 +1,31 @@
|
||||
'use client'
|
||||
import { useState } from 'react';
|
||||
import { useState, useEffect } from 'react';
|
||||
import Link from 'next/link'
|
||||
import { events } from "@/utility/constant.utils";
|
||||
import axios from "axios";
|
||||
|
||||
export default function MobileMenu({ isMobileMenu, handleMobileMenu }: any) {
|
||||
const [isAccordion, setIsAccordion] = useState<number | null>(null);
|
||||
const upcomingEvents = events.filter((event: any) => event.link);
|
||||
const [upcomingEvents, setUpcomingEvents] = useState<any[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchEvents = async () => {
|
||||
try {
|
||||
const API_BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL || 'http://localhost:3006/api';
|
||||
const response = await axios.get(`${API_BASE_URL}/upcoming-events`);
|
||||
if (response.data && response.data.success) {
|
||||
const evts = response.data.data.map((e: any) => ({
|
||||
id: e.id,
|
||||
title: e.title || e.eventtitle,
|
||||
link: e.link || (e.slug ? `/upcoming-event/${e.slug}` : `/upcoming-event/${e.id}`)
|
||||
}));
|
||||
setUpcomingEvents(evts);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error fetching upcoming events for mobile menu:", error);
|
||||
}
|
||||
};
|
||||
fetchEvents();
|
||||
}, []);
|
||||
|
||||
const handleAccordion = (key: any) => {
|
||||
setIsAccordion(prevState => prevState === key ? null : key)
|
||||
@ -105,13 +125,8 @@ export default function MobileMenu({ isMobileMenu, handleMobileMenu }: any) {
|
||||
</ul>
|
||||
</li>
|
||||
<li className="has-sub hash-has-sub"><span className={`submenu-button ${isAccordion == 5 ? "submenu-opened" : ""}`} onClick={() => handleAccordion(5)}><em /></span>
|
||||
<Link href="#" className="hash-nav">Events</Link>
|
||||
<Link href="/upcoming-event" className="hash-nav">Upcoming Event</Link>
|
||||
<ul className={`sub-menu ${isAccordion === 5 ? "open-sub" : ""}`} style={{ display: `${isAccordion === 5 ? "block" : "none"}` }}>
|
||||
<li className={`hash-has-sub ${subAccordion === 1 ? "open-sub" : ""}`}>
|
||||
<Link href="/upcoming-event" className="hash-nav" onClick={() => setSubAccordion(subAccordion === 1 ? 0 : 1)}>
|
||||
Upcoming Event
|
||||
</Link>
|
||||
<ul className={`sub-menu ${subAccordion === 1 ? "open-sub" : ""}`} style={{ display: subAccordion === 1 ? "block" : "none" }}>
|
||||
{upcomingEvents.map((event: any) => (
|
||||
<li key={event.id}>
|
||||
<Link href={event.link} className="hash-nav">
|
||||
@ -121,11 +136,6 @@ export default function MobileMenu({ isMobileMenu, handleMobileMenu }: any) {
|
||||
))}
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/photo-gallery" className="hash-nav">Photos Gallery</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li className="has-sub hash-has-sub"><span className={`submenu-button ${isAccordion == 2 ? "submenu-opened" : ""}`} onClick={() => handleAccordion(2)}><em /></span>
|
||||
<Link href="#" className="hash-nav">Registration </Link>
|
||||
<ul className={`sub-menu ${isAccordion == 2 ? "open-sub" : ""}`} style={{ display: `${isAccordion == 2 ? "block" : "none"}` }}>
|
||||
|
||||
@ -1,17 +1,37 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import React, { useState } from "react";
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { Swiper, SwiperSlide } from "swiper/react";
|
||||
import { Autoplay, Pagination } from "swiper/modules";
|
||||
import { events } from "@/utility/constant.utils";
|
||||
import axios from "axios";
|
||||
import "swiper/css";
|
||||
import "swiper/css/pagination";
|
||||
|
||||
export default function Header1({ scroll, isMobileMenu, handleMobileMenu, isSearch, handleSearch }: any) {
|
||||
|
||||
const [mobileMenu, setMobileMenu] = useState(false);
|
||||
const upcomingEvents = events.filter((event: any) => event.link);
|
||||
const [upcomingEvents, setUpcomingEvents] = useState<any[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchEvents = async () => {
|
||||
try {
|
||||
const API_BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL || 'http://localhost:3006/api';
|
||||
const response = await axios.get(`${API_BASE_URL}/upcoming-events`);
|
||||
if (response.data && response.data.success) {
|
||||
const evts = response.data.data.map((e: any) => ({
|
||||
id: e.id,
|
||||
title: e.title || e.eventtitle,
|
||||
link: e.link || (e.slug ? `/upcoming-event/${e.slug}` : `/upcoming-event/${e.id}`)
|
||||
}));
|
||||
setUpcomingEvents(evts);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error fetching upcoming events for header:", error);
|
||||
}
|
||||
};
|
||||
fetchEvents();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
@ -55,7 +75,7 @@ export default function Header1({ scroll, isMobileMenu, handleMobileMenu, isSear
|
||||
style={{ background: "#000000ff", borderTop: "1px solid #cbc5c557" }}
|
||||
>
|
||||
|
||||
<div className="container">
|
||||
<div className="container-fluid px-3 px-xl-5">
|
||||
<div className="row">
|
||||
<div className="col-lg-12">
|
||||
<div className="header-elements">
|
||||
@ -63,7 +83,7 @@ export default function Header1({ scroll, isMobileMenu, handleMobileMenu, isSear
|
||||
<Link href="/"><img src="/assets/img/logo-tca.png" alt="logo" /></Link>
|
||||
</div>
|
||||
<div className="main-menu">
|
||||
<ul>
|
||||
<ul style={{ display: 'flex', alignItems: 'center', flexWrap: 'nowrap', whiteSpace: 'nowrap' }}>
|
||||
<li>
|
||||
<Link href="/#">Home</Link>
|
||||
{/* <div className="tp-submenu">
|
||||
@ -235,13 +255,8 @@ export default function Header1({ scroll, isMobileMenu, handleMobileMenu, isSear
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="#">Events <i className="fa-solid fa-angle-down" /></Link>
|
||||
<Link href="/upcoming-event">Upcoming Event <i className="fa-solid fa-angle-down" /></Link>
|
||||
<ul className="dropdown-padding">
|
||||
<li className="dropdown-submenu">
|
||||
<Link href="/upcoming-event">
|
||||
Upcoming Event <i className="fa-solid fa-angle-down" />
|
||||
</Link>
|
||||
<ul className="submenu">
|
||||
{upcomingEvents.map((event: any) => (
|
||||
<li key={event.id}>
|
||||
<Link href={event.link}>
|
||||
@ -251,9 +266,6 @@ export default function Header1({ scroll, isMobileMenu, handleMobileMenu, isSear
|
||||
))}
|
||||
</ul>
|
||||
</li>
|
||||
{/* <li><Link href="/photo-gallery">Photos Gallery</Link></li> */}
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/photo-gallery">Photos Gallery</Link>
|
||||
</li>
|
||||
|
||||
@ -1,8 +1,7 @@
|
||||
/** @type {import('next').NextConfig} */
|
||||
const nextConfig = {
|
||||
output: "export",
|
||||
reactStrictMode: false,
|
||||
trailingSlash: true, // if needed for static export
|
||||
trailingSlash: true,
|
||||
};
|
||||
|
||||
export default nextConfig;
|
||||
|
||||
@ -9762,7 +9762,7 @@ html {
|
||||
color: #000000cf;
|
||||
display: inline-block;
|
||||
transition: all 0.4s;
|
||||
padding: 0 20px;
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.homepage1-body .header-area.homepage1 .header-elements .main-menu ul li:hover>a {
|
||||
@ -9795,7 +9795,9 @@ html {
|
||||
position: absolute;
|
||||
background: var(--ztc-text-text-1);
|
||||
top: 100px;
|
||||
width: 225px;
|
||||
min-width: 360px;
|
||||
width: max-content;
|
||||
max-width: 440px;
|
||||
z-index: 1;
|
||||
transition: all 0.4s;
|
||||
border-radius: 5px;
|
||||
@ -9875,11 +9877,13 @@ html {
|
||||
font-weight: var(--ztc-weight-medium);
|
||||
transition: all 0.4s;
|
||||
padding: 8px;
|
||||
display: inline-block;
|
||||
display: block;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
border-radius: 4px;
|
||||
color: var(--ztc-text-text-2);
|
||||
white-space: normal;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.homepage1-body .header-area.homepage1 .header-elements .main-menu ul li ul.dropdown-padding li a::after {
|
||||
@ -10252,7 +10256,9 @@ html {
|
||||
background: var(--ztc-text-text-1);
|
||||
top: 201.3%;
|
||||
transform: scale(1, 0);
|
||||
width: 225px;
|
||||
min-width: 360px;
|
||||
width: max-content;
|
||||
max-width: 440px;
|
||||
z-index: 0;
|
||||
transition: all 0.4s;
|
||||
border-radius: 5px;
|
||||
@ -18048,7 +18054,8 @@ html {
|
||||
content: "";
|
||||
height: 93%;
|
||||
width: 1px;
|
||||
left: 45.7%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: 0;
|
||||
transition: all 0.4s;
|
||||
background: #E6E7E8;
|
||||
@ -18082,7 +18089,8 @@ html {
|
||||
background: #FFBA00;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
left: 43%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: 88px;
|
||||
z-index: 1;
|
||||
}
|
||||
@ -24348,7 +24356,8 @@ html {
|
||||
content: "";
|
||||
height: 93%;
|
||||
width: 1px;
|
||||
left: 45.7%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: 0;
|
||||
transition: all 0.4s;
|
||||
background: #E6E7E8;
|
||||
@ -24382,7 +24391,8 @@ html {
|
||||
background: var(--ztc-text-text-15);
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
left: 43%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: 88px;
|
||||
z-index: 1;
|
||||
}
|
||||
@ -25296,7 +25306,8 @@ html {
|
||||
content: "";
|
||||
height: 93%;
|
||||
width: 1px;
|
||||
left: 45.7%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: 0;
|
||||
transition: all 0.4s;
|
||||
background: #E6E7E8;
|
||||
@ -25330,7 +25341,8 @@ html {
|
||||
background: #FFBA00;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
left: 43%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: 88px;
|
||||
z-index: 1;
|
||||
}
|
||||
@ -25610,7 +25622,8 @@ html {
|
||||
content: "";
|
||||
height: 93%;
|
||||
width: 1px;
|
||||
left: 45.7%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: 0;
|
||||
transition: all 0.4s;
|
||||
background: #5D9BFA;
|
||||
@ -25644,7 +25657,8 @@ html {
|
||||
background: linear-gradient(135deg, #FF7A00 0%, #F00 100%);
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
left: 43%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: 88px;
|
||||
z-index: 1;
|
||||
}
|
||||
@ -26989,7 +27003,8 @@ html {
|
||||
content: "";
|
||||
height: 93%;
|
||||
width: 1px;
|
||||
left: 45.7%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: 0;
|
||||
transition: all 0.4s;
|
||||
background: #E6E7E8;
|
||||
@ -27023,7 +27038,8 @@ html {
|
||||
background: var(--LLL, linear-gradient(135deg, #FF5000 0%, #FF00B8 100%));
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
left: 43%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: 88px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 757 KiB |
@ -158,7 +158,7 @@ html {
|
||||
color: var(--ztc-text-text-2);
|
||||
display: inline-block;
|
||||
transition: all .4s;
|
||||
padding: 0 20px;
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
&:hover>a {
|
||||
@ -192,7 +192,9 @@ html {
|
||||
position: absolute;
|
||||
background: var(--ztc-text-text-1);
|
||||
top: 100px;
|
||||
width: 225px;
|
||||
min-width: 360px;
|
||||
width: max-content;
|
||||
max-width: 440px;
|
||||
z-index: 1;
|
||||
transition: all .4s;
|
||||
border-radius: 5px;
|
||||
|
||||
@ -597,7 +597,8 @@
|
||||
content: "";
|
||||
height: 93%;
|
||||
width: 1px;
|
||||
left: 45.7%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: 0;
|
||||
transition: all 0.4s;
|
||||
background: #E6E7E8;
|
||||
@ -627,7 +628,8 @@
|
||||
background: var(--LLL, linear-gradient(135deg, #FF5000 0%, #FF00B8 100%));
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
left: 43%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: 88px;
|
||||
z-index: 1;
|
||||
|
||||
@ -1558,7 +1560,8 @@
|
||||
content: "";
|
||||
height: 93%;
|
||||
width: 1px;
|
||||
left: 45.7%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: 0;
|
||||
transition: all 0.4s;
|
||||
background: #E6E7E8;
|
||||
@ -1588,7 +1591,8 @@
|
||||
background: #FFBA00;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
left: 43%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: 88px;
|
||||
z-index: 1;
|
||||
|
||||
@ -1871,7 +1875,8 @@
|
||||
content: "";
|
||||
height: 93%;
|
||||
width: 1px;
|
||||
left: 45.7%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: 0;
|
||||
transition: all 0.4s;
|
||||
background: #5D9BFA;
|
||||
@ -1901,7 +1906,8 @@
|
||||
background: linear-gradient(135deg, #FF7A00 0%, #F00 100%);
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
left: 43%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: 88px;
|
||||
z-index: 1;
|
||||
|
||||
@ -2967,7 +2973,8 @@
|
||||
content: "";
|
||||
height: 93%;
|
||||
width: 1px;
|
||||
left: 45.7%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: 0;
|
||||
transition: all 0.4s;
|
||||
background: #E6E7E8;
|
||||
@ -2997,7 +3004,8 @@
|
||||
background: var(--LLL, linear-gradient(135deg, #FF5000 0%, #FF00B8 100%));
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
left: 43%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: 88px;
|
||||
z-index: 1;
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user