react实现一个stream游戏电竞首页ui效果代码
代码语言：html
所属分类：布局界面
代码描述：react实现一个stream游戏电竞首页ui效果代码
代码标签： react stream 游戏 电竞 首页 ui
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/normalize.5.0.css">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/tailwind.2.01.css">
<style>
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
body {
font-family: "Poppins", sans-serif;
background: linear-gradient(180deg, #c1b8e7 0%, #a79fda 100%);
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
min-width: 1380px;
min-height: 900px;
}
.color-base {
color: #595284;
}
.dashboard {
background: #2b2549;
width: 1280px;
height: 800px;
margin: 40px;
}
.sidebar-right {
background-color: #272042;
}
.sidebar-left {
background-color: #342e59;
}
.sidebar-left-active {
background-color: #3b3363;
}
.mini-icon {
color: #514a7b;
}
.input-search {
background-color: transparent;
border-bottom: 1px solid #383061;
}
.input-search::-moz-placeholder {
color: #383061;
opacity: 1;
}
.input-search:-ms-input-placeholder {
color: #383061;
opacity: 1;
}
.input-search::placeholder {
color: #383061;
opacity: 1;
}
.input-search-icon {
transform: translate(0, -50%);
}
.tag-red {
background: #f65164;
}
.tag-red-dot {
background: #ff96a2;
}
.top-selection-active {
color: #d99a51;
}
.player {
border-top: 16px solid #2b2549;
border-right: 16px solid #2b2549;
}
.avatar-ring {
background: conic-gradient(from 0deg at 50% 50%, #2ea1cb -0.27deg, #6432c5 95.62deg, #c25d8d 169.05deg, #a9ceb2 330.58deg, #2ea1cb 359.73deg, #6432c5 455.63deg);
-webkit-clip-path: path("M28 1.52794C28 0.684082 28.6847 -0.00434746 29.5273 0.0416656C35.4595 0.365612 41.1501 2.57002 45.763 6.35571C50.7705 10.4653 54.1982 16.184 55.462 22.5375C56.7258 28.8909 55.7475 35.4861 52.6938 41.1991C49.6401 46.9122 44.7 51.3896 38.7151 53.8686C32.7303 56.3476 26.071 56.6748 19.872 54.7943C13.673 52.9139 8.3178 48.9422 4.71885 43.556C1.11989 38.1697 -0.500123 31.7023 0.134828 25.2555C0.71974 19.3168 3.18486 13.7342 7.15049 9.31045C7.71377 8.68211 8.68474 8.68472 9.28143 9.28142V9.28142C9.87813 9.87812 9.87417 10.8426 9.31511 11.4747C5.8472 15.3957 3.6916 20.3201 3.17599 25.555C2.61034 31.2982 4.05355 37.0598 7.25972 41.8582C10.4659 46.6566 15.2366 50.1948 20.7591 51.87C26.2816 53.5453 32.214 53.2538 37.5457 51.0454C42.8774 48.8369 47.2783 44.8481 49.9987 39.7586C52.7192 34.6691 53.5907 28.7937 52.4648 23.1336C51.339 17.4736 48.2854 12.379 43.8244 8.71794C39.7581 5.38083 34.7518 3.42299 29.5271 3.10264C28.6848 3.051 28 2.3718 28 1.52794V1.52794Z");
clip-path: path("M28 1.52794C28 0.684082 28.6847 -0.00434746 29.5273 0.0416656C35.4595 0.365612 41.1501 2.57002 45.763 6.35571C50.7705 10.4653 54.1982 16.184 55.462 22.5375C56.7258 28.8909 55.7475 35.4861 52.6938 41.1991C49.6401 46.9122 44.7 51.3896 38.7151 53.8686C32.7303 56.3476 26.071 56.6748 19.872 54.7943C13.673 52.9139 8.3178 48.9422 4.71885 43.556C1.11989 38.1697 -0.500123 31.7023 0.134828 25.2555C0.71974 19.3168 3.18486 13.7342 7.15049 9.31045C7.71377 8.68211 8.68474 8.68472 9.28143 9.28142V9.28142C9.87813 9.87812 9.87417 10.8426 9.31511 11.4747C5.8472 15.3957 3.6916 20.3201 3.17599 25.555C2.61034 31.2982 4.05355 37.0598 7.25972 41.8582C10.4659 46.6566 15.2366 50.1948 20.7591 51.87C26.2816 53.5453 32.214 53.2538 37.5457 51.0454C42.8774 48.8369 47.2783 44.8481 49.9987 39.7586C52.7192 34.6691 53.5907 28.7937 52.4648 23.1336C51.339 17.4736 48.2854 12.379 43.8244 8.71794C39.7581 5.38083 34.7518 3.42299 29.5271 3.10264C28.6848 3.051 28 2.3718 28 1.52794V1.52794Z");
}
.fadeInUp {
-webkit-animation: animationFadeUp 1s;
animation: animationFadeUp 1s;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
@-webkit-keyframes animationFadeUp {
from {
opacity: 0;
transform: translate3d(0, 10%, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
@keyframes animationFadeUp {
from {
opacity: 0;
transform: translate3d(0, 10%, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
.fadeInDown {
-webkit-animation: animationFadeDown 1s;
animation: animationFadeDown 1s;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
opacity: 0;
transform: translate3d(0, -50%, 0);
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
@-webkit-keyframes animationFadeDown {
from {
opacity: 0;
transform: translate3d(0, -50%, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
@keyframes animationFadeDown {
from {
opacity: 0;
transform: translate3d(0, -50%, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
.ping-outer {
position: absolute;
right: 15px;
top: 15px;
width: 10px;
height: 10px;
border-radius: 999px;
background-color: #ea4d5f;
z-index: 99;
-webkit-animation: ping-online 1s cubic-bezier(0, 0, 0.2, 1) infinite;
animation: ping-online 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@-webkit-keyframes ping-online {
75%, to {
transform: scale(3.5);
opacity: 0;
}
}
@keyframes ping-online {
75%, to {
transform: scale(3.5);
opacity: 0;
}
}
</style>
</head>
<body>
<div id="root"></div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react.production.17.1.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react-dom.production.17.1.js"></script>
<script type="module" >
import clsx from "//repo.bfw.wiki/bfwrepo/js/module/clsx/clsx.js";
const { useState } = React;
const sidebarRightIcons = [
{ background: '#4a8cda', icon: 'react-streaming-dashboard-fortnite.svg' },
{ background: '#de4f5f', icon: 'react-streaming-dashboard-reddit.svg' },
{ background: '#d99b52', icon: 'react-streaming-dashboard-snapchat.svg' },
{ background: '#6348b1', icon: 'react-streaming-dashboard-twitch.svg' }];
const newsList = [
{
key: 0,
title: 'Tips 4 Watching',
subTitle: 'Available via desktop app, mobile apps, set-top',
image: 'react-streaming-dashboard-news-item-1.jpg',
tags: [{ text: 'kids', color: '#d94b87' }] },
{
key: 1,
title: 'Game Betting - Live',
subTitle: 'Dungeons & Dragons On...',
image: 'react-streaming-dashboard-news-item-2.jpg',
tags: [
{ text: 'game', color: '#6647bf' },
{ text: 'multi', color: '#4696b9' }] }];
const topSelectionItemList = [
{
key: '1',
title: 'Pop Off Q&A',
subTitle: 'Dungeons & Dragons On...',
image: 'react-streaming-dashboard-selection-item-image-1.jpg',
avatar: 'react-streaming-dashboard-selection-item-avatar-1.jpg',
tags: [
{ text: 'kids', color: '#d94b87' },
{ text: 'tweens', color: '#eb8052' }] },
{
key: '2',
title: 'Squishy Muffinz',
subTitle: 'Squads on NEW MAP',
image: 'react-streaming-dashboard-selection-item-image-2.jpg',
avatar: 'react-streaming-dashboard-selection-item-avatar-2.jpg',
tags: [{ text: 'teens', color: '#70b944' }] },
{
key: '3',
title: 'Enter a title',
subTitle: 'Pop Off Q&A',
image: 'react-streaming-dashboard-selection-item-image-3.jpg',
avatar: 'react-streaming-dashboard-selection-item-avatar-3.jpg',
tags: [{ text: 'game', color: '#6647bf' }] }];
const topSelectionCategories = [
'featured & recommended',
'top sellers',
'upcoming',
'virtual reality',
'free to play'];
const topSelectIcons = [/*#__PURE__*/
React.createElement("path", { d: "M2 11a1 1 0 011-1h2a1 1 0 011 1v5a1 1 0 01-1 1H3a1 1 0 01-1-1v-5zM8 7a1 1 0 011-1h2a1 1 0 011 1v9a1 1 0 01-1 1H9a1 1 0 01-1-1V7zM14 4a1 1 0 011-1h2a1 1 0 011 1v12a1 1 0 01-1 1h-2a1 1 0 01-1-1V4z" }), /*#__PURE__*/
React.createElement("path", { d: "M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" }), /*#__PURE__*/
React.createElement("path", {
fillRule: "evenodd",
d: "M12.395 2.553a1 1 0 00-1.45-.385c-.345.23-.614.558-.822.88-.214.33-.403.713-.57 1.116-.334.804-.614 1.768-.84 2.734a31.365 31.365 0 00-.613 3.58 2.64 2.64 0 01-.945-1.067c-.328-.68-.398-1.534-.398-2.654A1 1 0 005.05 6.05 6.981 6.981 0 003 11a7 7 0 1011.95-4.95c-.592-.591-.98-.985-1.348-1.467-.363-.476-.724-1.063-1.207-2.03zM12.12 15.12A3 3 0 017 13s.879.5 2.5.5c0-1 .5-4 1.25-4.5.5 1 .786 1.293 1.371 1.879A2.99 2.99 0 0113 13a2.99 2.99 0 01-.879 2.121z",
clipRule: "evenodd" }), /*#__PURE__*/
React.createElement("path", {
fillRule: "evenodd",
d: "M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10A1 1 0 018 18v-5H4a1 1 0 01-.82-1.573l7-10a1 1 0 011.12-.38z",
clipRule: "evenodd" }), /*#__PURE__*/
React.createElement("path", { d: "M10 3.5a1.5 1.5 0 013 0V4a1 1 0 001 1h3a1 1 0 011 1v3a1 1 0 01-1 1h-.5a1.5 1.5 0 000 3h.5a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1v-.5a1.5 1.5 0 00-3 0v.5a1 1 0 01-1 1H6a1 1 0 01-1-1v-3a1 1 0 00-1-1h-.5a1.5 1.5 0 010-3H4a1 1 0 001-1V6a1 1 0 011-1h3a1 1 0 001-1v-.5z" })];
function App() {
return /*#__PURE__*/(
React.createElement("div", { className: "dashboard rounded-3xl shadow-xl flex color-base flex-shrink-0" }, /*#__PURE__*/
React.createElement(Content, null), /*#__PURE__*/
React.createElement("div", { className: "flex-grow" }), /*#__PURE__*/
React.createElement(SidebarRight, null)));
}
function Content() {
return /*#__PURE__*/(
React.createElement("div", { className: "h-full flex flex-col" }, /*#__PURE__*/
React.createElement(Header, null), /*#__PURE__*/
React.createElement("div", { className: "flex flex-grow" }, /*#__PURE__*/
React.createElement(SidebarLeft, null), /*#__PURE__*/
React.createElement("div", { className: "flex flex-col h-full pb-8 pr-8" }, /*#__PURE__*/
React.createElement("div", { className: "flex items-start" }, /*#__PURE__*/
React.createElement(Video, null), /*#__PURE__*/
React.createElement("div", { className: "flex-grow" }), /*#__PURE__*/
React.createElement(News, null)), /*#__PURE__*/
React.createElement(TopSelection, null)))));
}
function SidebarRight() {
return /*#__PURE__*/(
React.createElement("div", { className: "w-20 h-full flex-shrink-0 sidebar-right rounded-r-3xl self-center flex flex-col items-center py-4" }, /*#__PURE__*/
React.createElement("div", { className: "w-14 h-14 rounded-full mb-10 p-1.5 relative" }, /*#__PURE__*/
React.createElement("div", { className: "avatar-ring inset-0 absolute" }), /*#__PURE__*/
React.createElement("div", { className: "absolute inset-0 p-1.5" }, /*#__PURE__*/
React.createElement("img", {
src: "//repo.bfw.wiki/bfwrepo/images/stream/react-streaming-dashboard-selection-item-avatar-1.jpg",
alt: "",
className: "rounded-full" }))),
sidebarRightIcons.map(({ background, icon }, index) => /*#__PURE__*/
React.createElement("div", {
className: "w-11 h-11 rounded-xl mt-4 flex justify-center items-center fadeInDown",
style: { background, animationDelay: `${0.1 * index}s` } }, /*#__PURE__*/
React.createElement("img", {
src: `//repo.bfw.wiki/bfwrepo/images/stream/${icon}`,
alt: "",
className: "w-5 h-5" }))), /*#__PURE__*/
React.createElement("div", { className: "w-10 h-10 mt-10 overflow-hidden relative fadeInDown", style: { animationDelay: '0.4s' } }, /*#__PURE__*/
React.createElement("img", {
src: "//repo.bfw.wiki/bfwrepo/images/stream/react-streaming-dashboard-selection-item-avatar-2.jpg",
alt: "",
className: " rounded-full" }), /*#__PURE__*/
React.createElement("svg", {
className: "absolute inset-0",
viewBox: "0 0 100 100",
fill: "none",
xmlns: "http://www.w3.org/2000/svg" }, /*#__PURE__*/
React.createElement("circle", {
cx: "80",
cy: "20",
r: "16",
fill: "#8AD35D",
stroke: "#272042",
strokeWidth: "8" }))), /*#__PURE__*/
React.createElement("div", { className: "w-10 h-10 mt-4 overflow-hidden relative fadeInDown", style: { animationDelay: '0.5s' } }, /*#__PURE__*/
React.createElement("img", {
src: "//repo.bfw.wiki/bfwrepo/images/stream/react-streaming-dashboard-selection-item-avatar-4.jpg",
alt: "",
className: " rounded-full" }), /*#__PURE__*/
React.createElement("svg", {
className: "absolute inset-0",
viewBox: "0 0 100 100",
fill: "none",
xmlns: "http://www.w3.org/2000/svg" }, /*#__PURE__*/
React.createElement("circle", {
cx: "80",
cy: "20",
r: "16",
fill: "#8AD35D",
stroke: "#272042",
strokeWidth: "8" })))));
}
function Header() {
return /*#__PURE__*/(
React.createElement("div", { className: "h-24 flex items-center justify-between pr-8" }, /*#__PURE__*/
React.createElement("div", { className: "pl-4 py-5 h-full flex" },.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0