react打造AA制结账付费app 可拖动ui交互页面代码
代码语言:html
所属分类:布局界面
代码描述:react打造AA制结账付费app 可拖动ui交互页面代码,每个人的结账费用可拖动,babel+react实现。
代码标签: react AA制 结账 付费 app 拖动 ui 交互 页面 代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap");
body {
font-family: "Inter", sans-serif;
background:#ded9cf;
}
.yellow-text {
color: #fcd3bc;
}
.custom-border {
border-radius: 19px;
}
.blue-shadow {
box-shadow: 4px 4px 4px rgba(47, 43, 79, 0.68);
}
.screen-shadow {
box-shadow: 11px 11px 10px rgba(72, 66, 109, 0.43);
}
.blue-shadow-inner {
box-shadow: inset -4px 4px 4px #2d284ade;
}
:root {
--thumb-size: 24px;
--thumb-color: transparent;
}
input[type="range"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 100%;
outline: none;
position: absolute;
margin: auto;
top: 0;
height: var(--thumb-size);
background-color: transparent;
pointer-events: none;
}
input[type="range"]::-webkit-slider-runnable-track {
-webkit-appearance: none;
height: var(--thumb-size);
}
input[type="range"]::-moz-range-track {
-moz-appearance: none;
height: var(--thumb-size);
}
input[type="range"]::-ms-track {
appearance: none;
height: var(--thumb-size);
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
height: var(--thumb-size);
width: var(--thumb-size);
background-color: var(--thumb-color);
cursor: pointer;
pointer-events: auto;
}
input[type="range"]::-moz-range-thumb {
border: none;
outline: none;
-webkit-appearance: none;
height: var(--thumb-size);
width: var(--thumb-size);
cursor: pointer;
background-color: var(--thumb-color);
pointer-events: auto;
}
input[type="range"]::-ms-thumb {
border: none;
outline: none;
appearance: none;
height: var(--thumb-size);
width: var(--thumb-size);
cursor: pointer;
background-color: var(--thumb-color);
pointer-events: auto;
}
input[type="range"]:active::-webkit-slider-thumb {
background-color: none;
}
input[type="range"]:focus::-moz-range-thumb {
border: none;
outline: none;
}
input[type="range"]:active::-moz-range-thumb {
border: none;
outline: none;
}
.arrow {
animation: arrow-load 2s infinite;
}
.arrow:nth-child(1) {
animation-delay: -0.6s;
}
.arrow:nth-child(2) {
animation-delay: -0.6s;
}
.arrow:nth-child(3) {
animation-delay: -0.4s;
}
.arrow:nth-child(4) {
animation-delay: -0.2s;
}
@keyframes arrow-load {
0% {
opacity: 0;
transform: translate(-15px, 0px);
}
50% {
opacity: 1;
}
100% {
opacity: 0;
transform: translate(15px, 0px);
}
}
</style>
</head>
<body translate="no">
<div id="root" class="h-screen w-screen grid place-items-center text-zinc-300"></div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/babel.7.18.13.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react.production.18.2.0.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react-dom.production.18.2.0.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tailwindcss.3.4.3.js"></script>
<script type="text/babel">
const { useEffect, useRef, useState} = window.React;
const { render } = window.ReactDOM;
const splitWith = ["1", "2", "3"];
const imageBase = `https://repo.bfw.wiki/bfwrepo/images/split/bill-splitter-app-`
function App() {
return (
<>
<div className="h-[700px] flex space-x-12 items-center">
<ScreenA />
<ScreenB />
</div>
</>
);
}
function Screen({ children, className }) {
return (
<>
<div
className={`bg-[#48426d] screen-shadow w-80 h-[640px] p-7 rounded-3xl ${className}`}
>
{children}
</div>
</>
);
}
function ScreenA() {
return (
<Screen className="-translate-y-5">
<Header />
<TotalBill />
<PrvSplit />
<Ne.........完整代码请登录后点击上方下载按钮下载查看
网友评论0