🎨 Style: fix style
This commit is contained in:
cheliangzhao
parent
508feec47b
commit
81cd2ed02c
|
|
@ -1,40 +1,38 @@
|
|||
'use client'
|
||||
"use client";
|
||||
|
||||
import Image from "next/image"
|
||||
import Image from "next/image";
|
||||
|
||||
export default function Component() {
|
||||
|
||||
return (
|
||||
<div className="w-full bg-linear-gradient">
|
||||
<div
|
||||
className='w-full bg-linear-gradient'
|
||||
>
|
||||
<div
|
||||
className='flex justify-between items-end m-auto max-w-7xl h-20 px-3 /* small */
|
||||
className="flex justify-between items-end m-auto max-w-7xl h-20 px-3 /* small */
|
||||
md:px-3 md:h-calc-2 /* middle */
|
||||
xl:max-w-7xl xl:h-96 /* xlarge */
|
||||
'>
|
||||
"
|
||||
>
|
||||
<h1
|
||||
className='self-center text-center text-lg leading-normal font-bold w-full /* small */
|
||||
className="self-center text-center text-lg leading-normal font-bold w-full /* small */
|
||||
md:text-left md:text-calc-1 md:w-2/5 /* middle */
|
||||
xl:text-left xl:text-4xl xl:leading-normal xl:w-2/5 /* xlarge */
|
||||
'
|
||||
"
|
||||
// style={{ fontSize: 'calc((100vw - 8px) / 1024 * 36)' }}
|
||||
>
|
||||
|
||||
Free, official online office tutorials by WPS Academy
|
||||
</h1>
|
||||
<div
|
||||
className='hidden
|
||||
className="hidden
|
||||
md:flex md:h-calc-1 /* midle */
|
||||
xl:h-80 xl:w-3/5 /* xlarge */
|
||||
'>
|
||||
"
|
||||
>
|
||||
<Image
|
||||
className='w-full h-full'
|
||||
className="w-full h-full"
|
||||
src="https://res-academy.cache.wpscdn.com/images/57a4a45ff9748ff9cdef334582053ed9.png"
|
||||
alt={'big img'}
|
||||
alt={"big img"}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
'use client'
|
||||
"use client";
|
||||
import { useHover } from "usehooks-ts";
|
||||
import { useRef } from "react";
|
||||
import Image from "next/image";
|
||||
|
|
@ -8,38 +8,41 @@ export default function Page() {
|
|||
const isHover = useHover(ref);
|
||||
|
||||
return (
|
||||
<div className='bg-white rounded-lg cursor-pointer w-64'>
|
||||
<div className='relative w-full h-auto' ref={ref}>
|
||||
<div className="bg-white rounded-lg cursor-pointer w-64">
|
||||
<div className="relative w-full h-auto" ref={ref}>
|
||||
<Image
|
||||
width={500}
|
||||
height={250}
|
||||
className={'object-cover w-full rounded-t-lg'}
|
||||
src={!isHover ?
|
||||
'https://res-academy.cache.wpscdn.com/static/cover/xls_v2.png' :
|
||||
'https://res-academy.cache.wpscdn.com/youtube-gif/20220419/144426_H3Ns3Os0zqE_72_10.gif'}
|
||||
alt={'img'}
|
||||
className={"object-cover w-full rounded-t-lg"}
|
||||
src={
|
||||
!isHover
|
||||
? "https://res-academy.cache.wpscdn.com/static/cover/xls_v2.png"
|
||||
: "https://res-academy.cache.wpscdn.com/youtube-gif/20220419/144426_H3Ns3Os0zqE_72_10.gif"
|
||||
}
|
||||
alt={"img"}
|
||||
/>
|
||||
<div className={`absolute bottom-2 right-2
|
||||
<div
|
||||
className={`absolute bottom-2 right-2
|
||||
bg-gray-600 text-white text-xs
|
||||
px-1 py-0.5 rounded-md
|
||||
${isHover ? 'hidden' : 'flex'}`}
|
||||
${isHover ? "hidden" : "flex"}`}
|
||||
>
|
||||
03:14
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex justify-between text-xs mt-2 text-gray-500 px-2'>
|
||||
<div className='flex items-center gap-1 my-1'>
|
||||
<div className="flex justify-between text-xs mt-2 text-gray-500 px-2">
|
||||
<div className="flex items-center gap-1 my-1">
|
||||
<Image
|
||||
width={32}
|
||||
height={38}
|
||||
alt={''}
|
||||
src='https://res-academy.cache.wpscdn.com/static/images/icon_excel.png'
|
||||
alt={""}
|
||||
src="https://res-academy.cache.wpscdn.com/static/images/icon_excel.png"
|
||||
/>
|
||||
<span>Spread</span>
|
||||
</div>
|
||||
<div>18.0K views</div>
|
||||
</div>
|
||||
<h1 className='text-md font-semibold mt-2 px-2 pb-3'>How use WPS</h1>
|
||||
<h1 className="text-md font-semibold mt-2 px-2 pb-3">How use WPS</h1>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,12 +19,36 @@ import classNames from "classnames";
|
|||
import Image from "next/image";
|
||||
|
||||
const products = [
|
||||
{ name: "Analytics", description: "Get a better understanding of your traffic", href: "#", icon: ChartPieIcon, },
|
||||
{ name: "Engagement", description: "Speak directly to your customers", href: "#", icon: CursorArrowRaysIcon, },
|
||||
{ name: "Security", description: "Your customers’ data will be safe and secure", href: "#", icon: FingerPrintIcon, },
|
||||
{ name: "Integrations", description: "Connect with third-party tools", href: "#", icon: SquaresPlusIcon, },
|
||||
{ name: "Automations", description: "Build strategic funnels that will convert", href: "#", icon: ArrowPathIcon, },
|
||||
|
||||
{
|
||||
name: "Analytics",
|
||||
description: "Get a better understanding of your traffic",
|
||||
href: "#",
|
||||
icon: ChartPieIcon,
|
||||
},
|
||||
{
|
||||
name: "Engagement",
|
||||
description: "Speak directly to your customers",
|
||||
href: "#",
|
||||
icon: CursorArrowRaysIcon,
|
||||
},
|
||||
{
|
||||
name: "Security",
|
||||
description: "Your customers’ data will be safe and secure",
|
||||
href: "#",
|
||||
icon: FingerPrintIcon,
|
||||
},
|
||||
{
|
||||
name: "Integrations",
|
||||
description: "Connect with third-party tools",
|
||||
href: "#",
|
||||
icon: SquaresPlusIcon,
|
||||
},
|
||||
{
|
||||
name: "Automations",
|
||||
description: "Build strategic funnels that will convert",
|
||||
href: "#",
|
||||
icon: ArrowPathIcon,
|
||||
},
|
||||
];
|
||||
const callsToAction = [
|
||||
{ name: "Watch demo", href: "#", icon: PlayCircleIcon },
|
||||
|
|
@ -35,6 +59,7 @@ export default function Example() {
|
|||
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<div className="h-full w-full">
|
||||
<header className="bg-white relative w-full">
|
||||
<nav
|
||||
className="mx-auto flex max-w-7xl items-center justify-between p-6 lg:px-8"
|
||||
|
|
@ -62,7 +87,10 @@ export default function Example() {
|
|||
</button>
|
||||
</div>
|
||||
<Popover.Group className="hidden lg:flex lg:gap-x-12">
|
||||
<a href="#" className="text-sm font-semibold leading-6 text-gray-900">
|
||||
<a
|
||||
href="#"
|
||||
className="text-sm font-semibold leading-6 text-gray-900"
|
||||
>
|
||||
Home
|
||||
</a>
|
||||
|
||||
|
|
@ -105,7 +133,9 @@ export default function Example() {
|
|||
{item.name}
|
||||
<span className="absolute inset-0" />
|
||||
</a>
|
||||
<p className="mt-1 text-gray-600">{item.description}</p>
|
||||
<p className="mt-1 text-gray-600">
|
||||
{item.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
|
@ -147,7 +177,7 @@ export default function Example() {
|
|||
leaveFrom="opacity-100 translate-y-0"
|
||||
leaveTo="opacity-0 translate-y-1"
|
||||
>
|
||||
<Popover.Panel className="absolute left-0.5 right-0.5 mt-1 top-full z-10 w-screen overflow-hidden rounded-3xl bg-white shadow-lg ring-1 ring-gray-900/5">
|
||||
<Popover.Panel className="absolute left-0.5 right-0.5 mt-1 top-full z-10 overflow-hidden rounded-3xl bg-white shadow-lg ring-1 ring-gray-900/5">
|
||||
<div className="p-4">
|
||||
{products.map((item) => (
|
||||
<div
|
||||
|
|
@ -168,7 +198,9 @@ export default function Example() {
|
|||
{item.name}
|
||||
<span className="absolute inset-0" />
|
||||
</a>
|
||||
<p className="mt-1 text-gray-600">{item.description}</p>
|
||||
<p className="mt-1 text-gray-600">
|
||||
{item.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
|
@ -239,7 +271,7 @@ export default function Example() {
|
|||
<ChevronDownIcon
|
||||
className={classNames(
|
||||
open ? "rotate-180" : "",
|
||||
"h-5 w-5 flex-none"
|
||||
"h-5 w-5 flex-none",
|
||||
)}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
|
|
@ -291,5 +323,6 @@ export default function Example() {
|
|||
</Dialog.Panel>
|
||||
</Dialog>
|
||||
</header>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -75,6 +75,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
html, body {
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
}
|
||||
|
|
@ -21,7 +21,7 @@ export default function RootLayout({
|
|||
<body
|
||||
className={cn(
|
||||
inter.className,
|
||||
"flex flex-col justify-start items-center h-full"
|
||||
"flex flex-col justify-center items-center h-full",
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
|
|
|
|||
|
|
@ -4,14 +4,25 @@ export default function NotFound() {
|
|||
<main className="grid min-h-full place-items-center px-6 py-24 sm:py-32 lg:px-8">
|
||||
<div className="text-center">
|
||||
<p className="text-base font-semibold text-indigo-600">404</p>
|
||||
<h1 className="mt-4 text-3xl font-bold tracking-tight sm:text-5xl">Page not found</h1>
|
||||
<p className="mt-6 text-base leading-7 text-gray-600">Sorry, we couldn’t find the page you’re looking for.</p>
|
||||
<h1 className="mt-4 text-3xl font-bold tracking-tight sm:text-5xl">
|
||||
Page not found
|
||||
</h1>
|
||||
<p className="mt-6 text-base leading-7 text-gray-600">
|
||||
Sorry, we couldn’t find the page you’re looking for.
|
||||
</p>
|
||||
<div className="mt-10 flex items-center justify-center gap-x-6">
|
||||
<a href="/" className="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Go back home</a>
|
||||
<a href="#" className="text-sm font-semibold">Contact support <span aria-hidden="true">→</span></a>
|
||||
<a
|
||||
href="/"
|
||||
className="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
|
||||
>
|
||||
Go back home
|
||||
</a>
|
||||
<a href="#" className="text-sm font-semibold">
|
||||
Contact support <span aria-hidden="true">→</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
|
@ -2,12 +2,11 @@ import { Button } from "@/components/ui/button";
|
|||
import Link from "next/link";
|
||||
|
||||
export default function Home() {
|
||||
|
||||
return (
|
||||
<div className='flex-1 flex justify-center items-center'>
|
||||
<Link href={'/components'}>
|
||||
<div className="flex-1 flex justify-center items-center">
|
||||
<Link href={"/components"}>
|
||||
<Button>components</Button>
|
||||
</Link>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
import * as React from "react"
|
||||
import { Slot } from "@radix-ui/react-slot"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
import * as React from "react";
|
||||
import { Slot } from "@radix-ui/react-slot";
|
||||
import { cva, type VariantProps } from "class-variance-authority";
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const buttonVariants = cva(
|
||||
"inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
|
||||
|
|
@ -30,27 +30,27 @@ const buttonVariants = cva(
|
|||
variant: "default",
|
||||
size: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
},
|
||||
);
|
||||
|
||||
export interface ButtonProps
|
||||
extends React.ButtonHTMLAttributes<HTMLButtonElement>,
|
||||
VariantProps<typeof buttonVariants> {
|
||||
asChild?: boolean
|
||||
asChild?: boolean;
|
||||
}
|
||||
|
||||
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
|
||||
({ className, variant, size, asChild = false, ...props }, ref) => {
|
||||
const Comp = asChild ? Slot : "button"
|
||||
const Comp = asChild ? Slot : "button";
|
||||
return (
|
||||
<Comp
|
||||
className={cn(buttonVariants({ variant, size, className }))}
|
||||
ref={ref}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
)
|
||||
Button.displayName = "Button"
|
||||
);
|
||||
},
|
||||
);
|
||||
Button.displayName = "Button";
|
||||
|
||||
export { Button, buttonVariants }
|
||||
export { Button, buttonVariants };
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { type ClassValue, clsx } from "clsx"
|
||||
import { twMerge } from "tailwind-merge"
|
||||
import { type ClassValue, clsx } from "clsx";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
|
||||
export function cn(...inputs: ClassValue[]) {
|
||||
return twMerge(clsx(inputs))
|
||||
return twMerge(clsx(inputs));
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
/** @type {import('next').NextConfig} */
|
||||
const nextConfig = {
|
||||
images: {
|
||||
domains: ['res-academy.cache.wpscdn.com']
|
||||
}
|
||||
}
|
||||
domains: ["res-academy.cache.wpscdn.com"],
|
||||
},
|
||||
};
|
||||
|
||||
module.exports = nextConfig
|
||||
module.exports = nextConfig;
|
||||
|
|
|
|||
|
|
@ -32,5 +32,8 @@
|
|||
"tailwindcss-animate": "^1.0.7",
|
||||
"typescript": "5.2.2",
|
||||
"usehooks-ts": "^2.9.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"prettier": "^3.0.3"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
3057
pnpm-lock.yaml
3057
pnpm-lock.yaml
File diff suppressed because it is too large
Load Diff
|
|
@ -3,4 +3,4 @@ module.exports = {
|
|||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -2,10 +2,10 @@
|
|||
module.exports = {
|
||||
darkMode: ["class"],
|
||||
content: [
|
||||
'./pages/**/*.{ts,tsx}',
|
||||
'./components/**/*.{ts,tsx}',
|
||||
'./app/**/*.{ts,tsx}',
|
||||
'./src/**/*.{ts,tsx}',
|
||||
"./pages/**/*.{ts,tsx}",
|
||||
"./components/**/*.{ts,tsx}",
|
||||
"./app/**/*.{ts,tsx}",
|
||||
"./src/**/*.{ts,tsx}",
|
||||
],
|
||||
theme: {
|
||||
container: {
|
||||
|
|
@ -70,7 +70,23 @@ module.exports = {
|
|||
"accordion-down": "accordion-down 0.2s ease-out",
|
||||
"accordion-up": "accordion-up 0.2s ease-out",
|
||||
},
|
||||
// custom
|
||||
backgroundImage: {
|
||||
"gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
|
||||
"gradient-conic":
|
||||
"conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
|
||||
"linear-gradient":
|
||||
"linear-gradient(222deg, #ECFEF1 0%, #EAF1F9 53%, #E8E8FE 100%)", // big img background
|
||||
},
|
||||
|
||||
fontSize: {
|
||||
"calc-1": "calc((100vw - 8px) / 1280 * 36)", // big img title font size
|
||||
},
|
||||
height: {
|
||||
"calc-1": "calc((100vw - 8px) / 1280 * 320)", // big img img height
|
||||
"calc-2": "calc((100vw - 8px) / 1280 * 384)", // big img total height
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [require("tailwindcss-animate")],
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,29 +0,0 @@
|
|||
import type { Config } from 'tailwindcss'
|
||||
|
||||
const config: Config = {
|
||||
content: [
|
||||
'./pages/**/*.{js,ts,jsx,tsx,mdx}',
|
||||
'./components/**/*.{js,ts,jsx,tsx,mdx}',
|
||||
'./app/**/*.{js,ts,jsx,tsx,mdx}',
|
||||
],
|
||||
theme: {
|
||||
extend: {
|
||||
backgroundImage: {
|
||||
'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
|
||||
'gradient-conic':
|
||||
'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
|
||||
'linear-gradient': 'linear-gradient(222deg, #ECFEF1 0%, #EAF1F9 53%, #E8E8FE 100%)', // big img background
|
||||
},
|
||||
|
||||
fontSize: {
|
||||
'calc-1': 'calc((100vw - 8px) / 1280 * 36)', // big img title font size
|
||||
},
|
||||
height: {
|
||||
'calc-1': 'calc((100vw - 8px) / 1280 * 320)', // big img img height
|
||||
'calc-2': 'calc((100vw - 8px) / 1280 * 384)', // big img total height
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
export default config
|
||||
Loading…
Reference in New Issue
Block a user