diff --git a/src/app.config.js b/src/app.config.js index 541f6e0..145f834 100644 --- a/src/app.config.js +++ b/src/app.config.js @@ -1,6 +1,8 @@ export default defineAppConfig({ pages: [ "pages/index/index", + "pages/game/index", + "pages/history/index", "pages/funList/index", ], diff --git a/src/assets/ai.png b/src/assets/ai.png new file mode 100644 index 0000000..37ae944 Binary files /dev/null and b/src/assets/ai.png differ diff --git a/src/assets/ble.png b/src/assets/ble.png new file mode 100644 index 0000000..439fc2a Binary files /dev/null and b/src/assets/ble.png differ diff --git a/src/assets/check.png b/src/assets/check.png new file mode 100644 index 0000000..9cc72c9 Binary files /dev/null and b/src/assets/check.png differ diff --git a/src/assets/empty.png b/src/assets/empty.png new file mode 100644 index 0000000..1fb00cc Binary files /dev/null and b/src/assets/empty.png differ diff --git a/src/assets/game.png b/src/assets/game.png new file mode 100644 index 0000000..048fd8b Binary files /dev/null and b/src/assets/game.png differ diff --git a/src/assets/nextpiece.png b/src/assets/nextpiece.png new file mode 100644 index 0000000..31747a3 Binary files /dev/null and b/src/assets/nextpiece.png differ diff --git a/src/assets/play.png b/src/assets/play.png new file mode 100644 index 0000000..3d20fca Binary files /dev/null and b/src/assets/play.png differ diff --git a/src/assets/prepiece.png b/src/assets/prepiece.png new file mode 100644 index 0000000..e3979c5 Binary files /dev/null and b/src/assets/prepiece.png differ diff --git a/src/assets/soundCard.png b/src/assets/soundCard.png new file mode 100644 index 0000000..6bd5336 Binary files /dev/null and b/src/assets/soundCard.png differ diff --git a/src/assets/triangle-l.png b/src/assets/triangle-l.png new file mode 100644 index 0000000..9486802 Binary files /dev/null and b/src/assets/triangle-l.png differ diff --git a/src/assets/triangle-r.png b/src/assets/triangle-r.png new file mode 100644 index 0000000..ee1aaac Binary files /dev/null and b/src/assets/triangle-r.png differ diff --git a/src/components/color-diy/index.jsx b/src/components/color-picker/index.jsx similarity index 98% rename from src/components/color-diy/index.jsx rename to src/components/color-picker/index.jsx index 8a23ecd..30d939c 100644 --- a/src/components/color-diy/index.jsx +++ b/src/components/color-picker/index.jsx @@ -3,6 +3,7 @@ import { View } from '@tarojs/components' import './index.less' import { useEffect, useState } from 'react' import Taro from '@tarojs/taro' +import { Popup } from "@taroify/core" export default function Index({ open, handleColorPicker }) { let [data, setData] = useState({ @@ -43,6 +44,8 @@ export default function Index({ open, handleColorPicker }) { return { ...state } }) }, []) + + useEffect(() => { if (open) { setTimeout(() => { @@ -347,8 +350,8 @@ export default function Index({ open, handleColorPicker }) { useEffect(() => { }, []) return ( - - + + 颜色选取 @@ -375,7 +378,8 @@ export default function Index({ open, handleColorPicker }) { - + + ) } diff --git a/src/components/color-diy/index.less b/src/components/color-picker/index.less similarity index 93% rename from src/components/color-diy/index.less rename to src/components/color-picker/index.less index ffb9ed8..ff64b8e 100644 --- a/src/components/color-diy/index.less +++ b/src/components/color-picker/index.less @@ -1,39 +1,13 @@ -.cp-wrapper { - position: fixed; - top: 0; - bottom: 0; - left: 0; - right: 0; - overflow: hidden; - box-sizing: border-box; - z-index: -100; - background: rgba(0, 0, 0, 0.4); - transition: all 0.3s; - opacity: 0; -} - -.wrapper_show { - opacity: 1; - z-index: 9999; -} - - .cp-box { width: 100%; - position: absolute; - bottom: 0; padding: 30rpx 0 50rpx; padding-top: 0; background: #fff; transition: all 0.3s; - transform: translate(0, 100%); border-radius: 16rpx 16rpx 0 0; overflow: hidden; } -.dialog_show { - transform: translate(0, 0); -} .cp-header { display: flex; diff --git a/src/pages/game/index.config.js b/src/pages/game/index.config.js new file mode 100644 index 0000000..932c2d2 --- /dev/null +++ b/src/pages/game/index.config.js @@ -0,0 +1,3 @@ +export default definePageConfig({ + navigationBarTitleText: "首页", +}); diff --git a/src/pages/game/index.jsx b/src/pages/game/index.jsx new file mode 100644 index 0000000..68a1692 --- /dev/null +++ b/src/pages/game/index.jsx @@ -0,0 +1,37 @@ +import { View, Image } from '@tarojs/components' +import './index.less' +import ColorPicker from "@/components/color-picker"; +import { useEffect, useState } from 'react'; +import history from "../../assets/history.png"; + +export default function Index() { + const list = ['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '',] + const [open, setOpen] = useState(false) + + + const handleColorPicker = (e) => { + setOpen(false) + } + useEffect(() => { + + }, []) + return ( + + + 像素跳动 + 历史记录 + + + {list.map((item, index) => )} + + + + setOpen(true)}> + setOpen(true)}>#EDEDED + + *请选取喜欢的颜色，再点击小方格填入颜色； + 传输画面到音响屏幕 + + + ) +} diff --git a/src/pages/game/index.less b/src/pages/game/index.less new file mode 100644 index 0000000..290402f --- /dev/null +++ b/src/pages/game/index.less @@ -0,0 +1,116 @@ +.index { + background: #F7F7F7; + + // overflow-y: scroll; + .head { + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 32rpx; + margin-top: 32rpx; + box-sizing: border-box; + + .head-left { + color: #5F93FA; + font-size: 32rpx; + display: flex; + align-items: center; + + &::before { + content: ''; + width: 6rpx; + height: 36rpx; + border-radius: 4rpx; + background: #5F93FA; + display: inline-block; + margin-right: 12rpx; + } + } + + .head-right { + width: 184rpx; + height: 50rpx; + border-radius: 44rpx; + background: #DEE9FF; + text-indent: 58rpx; + font-size: 26rpx; + color: #5F93FA; + display: flex; + align-items: center; + justify-content: center; + + .icon { + width: 26rpx; + height: 26rpx; + margin-right: 10rpx; + } + } + } + + .grid { + display: grid; + grid-template-columns: repeat(9, 1fr); + gap: 8rpx; + padding: 32rpx; + box-sizing: border-box; + + .grid-item { + width: 64px; + height: 64px; + border-radius: 8px; + background: #FAFAFA; + border: 1px solid #999999; + + &.active { + border: 1px solid #5F93FA; + } + } + } + + .hint { + color: #999999; + font-size: 26rpx; + margin: 32rpx 0 64rpx; + margin-left: 48rpx; + } + + .colorbox { + display: flex; + align-items: center; + justify-content: center; + + .colorbox-icon { + width: 54rpx; + height: 54rpx; + background: url('../../assets/chromaticCircle.png') no-repeat; + background-size: 100% 100%; + margin-right: 16rpx; + } + + .colorbox-btn { + width: 180rpx; + height: 64rpx; + border-radius: 90rpx; + background: #38F1E5; + border: 2rpx solid #EDEDED; + text-align: center; + line-height: 64rpx; + font-size: 26rpx; + color: #fff; + } + } + + .btn { + width: 686rpx; + height: 80rpx; + border-radius: 50rpx; + background: #5F93FA; + text-align: center; + line-height: 80rpx; + color: #FFFFFF; + font-size: 30rpx; + margin: 0 auto; + } + + +} diff --git a/src/pages/history/index.config.js b/src/pages/history/index.config.js new file mode 100644 index 0000000..f883668 --- /dev/null +++ b/src/pages/history/index.config.js @@ -0,0 +1,3 @@ +export default definePageConfig({ + navigationBarTitleText: "历史记录", +}); diff --git a/src/pages/history/index.jsx b/src/pages/history/index.jsx new file mode 100644 index 0000000..20a1939 --- /dev/null +++ b/src/pages/history/index.jsx @@ -0,0 +1,44 @@ +import { View, Image } from "@tarojs/components"; + +import "./index.less"; +import { useEffect, useState } from "react"; +import Taro from "@tarojs/taro"; +import empty from "@/assets/empty.png"; +import { ActionSheet } from "@taroify/core" + +export default function Index() { + const list = ['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '',] + const history = [{}] + const [open, setOpen] = useState(false) + const actions = [ + { name: "使用此套颜色方案", value: "1", style: { color: "#5A8FFA" } }, + { name: "删除此套颜色方案", value: "2", style: { color: "#FF575F" } }, + ] + return ( + + { + history.length ? + + { + history.map((item, index) => { + return setOpen(true)}> + {list.map((ite, ide) => )} + + }) + } + + : + + 暂无历史记录 + + } + setOpen(false)} + onCancel={() => setOpen(false)} + /> + + ); +} diff --git a/src/pages/history/index.less b/src/pages/history/index.less new file mode 100644 index 0000000..4b97bd0 --- /dev/null +++ b/src/pages/history/index.less @@ -0,0 +1,56 @@ +.index { + overflow: scroll; + padding: 32rpx; + display: flex; + flex-direction: column; + + .grid { + flex-shrink: 0; + border-radius: 16rpx; + background: #F9F9F9; + overflow: hidden; + border: 1px solid #999999; + display: grid; + grid-template-columns: repeat(9, 1fr); + gap: 8rpx; + padding: 32rpx; + box-sizing: border-box; + margin-bottom: 30rpx; + + .grid-item { + width: 50px; + height: 50px; + border-radius: 8px; + border: 1px solid #999999; + flex-shrink: 0; + } + } + + .empty { + position: absolute; + top: 40%; + left: 50%; + transform: translate(-40%, -50%); + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + .empty-img { + width: 120rpx; + height: 120rpx; + margin: 0 auto; + } + + .empty-text { + font-size: 30rpx; + color: #CCCCCC; + text-align: center; + margin-top: 32rpx; + } + } + + .taroify-safe-area { + padding-bottom: 60rpx; + } +} diff --git a/src/pages/index/index.jsx b/src/pages/index/index.jsx index 23cc8e3..774b2fb 100644 --- a/src/pages/index/index.jsx +++ b/src/pages/index/index.jsx @@ -1,39 +1,117 @@ -import { View, Image } from '@tarojs/components' +import { View, Image, Text } from '@tarojs/components' import './index.less' -import ColorPicker from "@/components/color-diy"; -import { useEffect, useState } from 'react'; -import history from "../../assets/history.png"; +import { Switch, Slider } from "@taroify/core" +import ble from "@/assets/ble.png"; +import soundCard from "@/assets/soundCard.png"; +import game from "@/assets/game.png"; +import ai from "@/assets/ai.png"; export default function Index() { - const list = ['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '',] - const [open, setOpen] = useState(false) - - - const handleColorPicker = (e) => { - setOpen(false) - } - useEffect(() => { - - }, []) + const sourceList = ['Line', 'OPT', 'ARC', 'USB'] return ( - - 像素跳动 - 历史记录 + + + 音乐信号(音源) + + { + sourceList.map((item, index) => { + return + + + {item} + + }) + } + + + + + + 开关状态 + + + 蓝牙 + + + + + 声卡 + + + - - {list.map((item, index) => )} - - - - setOpen(true)}> - setOpen(true)}>#EDEDED + + + + - *请选取喜欢的颜色，再点击小方格填入颜色； - - 传输画面到音响屏幕 - - - + + + 音乐音量 + + + MODE 1 + + + + + + + 超低音强度 + + + + 1 + + + + + + + 话筒音量 + + 50% + + + + + + + 话筒音量 + + 50% + + + + + 话筒混响音量 + + 50% + + + + + 话筒混响模式 + + 1 + 2 + 3 + 4 + 5 + 6 + + + + + + + GAME + + + + AI + + + ) } diff --git a/src/pages/index/index.less b/src/pages/index/index.less index 290402f..8b20bf9 100644 --- a/src/pages/index/index.less +++ b/src/pages/index/index.less @@ -1,116 +1,312 @@ .index { + padding: 24rpx 40rpx 60rpx; background: #F7F7F7; + overflow: auto; + scrollbar-width: none; + -ms-overflow-style: none; - // overflow-y: scroll; - .head { + &::-webkit-scrollbar { + display: none; + } + + .headbox { + display: flex; + justify-content: space-between; + + .source { + width: 355rpx; + height: 226rpx; + border-radius: 24rpx; + background: #FFFFFF; + padding: 24rpx 20rpx; + box-sizing: border-box; + + .list { + display: flex; + align-items: center; + justify-content: space-between; + margin-top: 24rpx; + + .list-item { + display: flex; + flex-direction: column; + align-items: center; + + &.active { + .yuan { + background: url('../../assets/check.png') no-repeat; + background-size: 56rpx 56rpx; + } + + .line { + background: #5A8FFA; + } + + .text { + color: #5A8FFA; + font-weight: 700; + } + } + + .yuan { + width: 56rpx; + height: 56rpx; + border-radius: 132rpx; + border: 5rpx solid #DBE7FF; + } + + .line { + width: 15rpx; + height: 4rpx; + border-radius: 12rpx; + transform: rotate(-90deg); + background: #DBE7FF; + margin-top: 8rpx; + } + + .text { + color: #5A8FFA; + font-size: 26rpx; + } + } + } + + .title { + font-size: 30rpx; + color: #212121; + font-weight: 700; + } + } + + .switch { + width: 291rpx; + height: 226rpx; + border-radius: 32rpx; + background: #FFFFFF; + padding: 24rpx 20rpx; + box-sizing: border-box; + + .title { + font-size: 30rpx; + color: #212121; + font-weight: 700; + + } + + .switch-item { + display: flex; + align-items: center; + margin-top: 24rpx; + + .img { + width: 38rpx; + height: 38rpx; + } + + .text { + color: #212121; + font-size: 28rpx; + margin-left: 12rpx; + margin-right: 50rpx; + } + } + } + } + + .play { + width: 670rpx; + height: 130rpx; + border-radius: 88rpx; + background: #FFFFFF; display: flex; align-items: center; justify-content: space-between; - padding: 0 32rpx; - margin-top: 32rpx; + margin: 82rpx 0; + padding: 0 90rpx; box-sizing: border-box; - .head-left { - color: #5F93FA; - font-size: 32rpx; - display: flex; - align-items: center; + .play-icon { + width: 46rpx; + height: 39rpx; - &::before { - content: ''; - width: 6rpx; - height: 36rpx; - border-radius: 4rpx; - background: #5F93FA; - display: inline-block; - margin-right: 12rpx; + &:active { + transform: scale(1.2); } } - .head-right { - width: 184rpx; - height: 50rpx; - border-radius: 44rpx; - background: #DEE9FF; - text-indent: 58rpx; - font-size: 26rpx; - color: #5F93FA; + .pre { + background: url('../../assets/prepiece.png') no-repeat; + background-size: 46rpx 39rpx; + } + + .next { + background: url('../../assets/nextpiece.png') no-repeat; + background-size: 46rpx 39rpx; + } + + .play-play { + width: 246rpx; + height: 246rpx; + background: url('../../assets/play.png') no-repeat; + background-size: 246rpx 246rpx; + + &:active { + transform: scale(0.95); + } + } + } + + .card { + width: 670rpx; + border-radius: 32rpx; + background: #FFFFFF; + margin-bottom: 24rpx; + } + + .funitem { + display: flex; + align-items: center; + justify-content: space-between; + padding: 32rpx 20rpx; + box-sizing: border-box; + + .funitem-text { + color: #212121; + font-size: 30rpx; + font-weight: 700; + width: 190rpx; + margin-right: 50rpx; + flex-shrink: 0; + } + + .funitem-right { + flex: 1; display: flex; align-items: center; - justify-content: center; + margin-right: 30rpx; - .icon { - width: 26rpx; - height: 26rpx; + .num { + width: 110rpx; + height: 58rpx; + border-radius: 32rpx; + background: #F0F5FF; + text-align: center; + line-height: 58rpx; + color: #5A8FFA; + font-size: 26rpx; + font-weight: 700; + margin-right: 40rpx; + flex-shrink: 0; + } + } + + .mode { + flex: 1; + display: flex; + align-items: center; + + .l { + width: 58rpx; + height: 58rpx; + background: url('../../assets/triangle-l.png') no-repeat; + background-size: 58rpx 58rpx; + + &:active { + transform: scale(1.2); + } + } + + .r { + width: 58rpx; + height: 58rpx; + background: url('../../assets/triangle-r.png') no-repeat; + background-size: 58rpx 58rpx; + + &:active { + transform: scale(1.2); + } + } + + .input { + width: 220rpx; + height: 58rpx; + line-height: 58rpx; + border-radius: 32rpx; + background: #F0F5FF; + text-align: center; + color: #5A8FFA; + font-size: 25rpx; + font-weight: 700; + margin: 0 20rpx; + flex-shrink: 0; + } + + } + + .numlist { + flex: 1; + border-radius: 69rpx; + background: #F0F5FF; + border: 3rpx solid #5A8FFA; + display: flex; + align-items: center; + justify-content: space-between; + padding: 7rpx 10rpx; + + .numlist-num { + width: 56rpx; + height: 56rpx; + border-radius: 132rpx; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + color: #5A8FFA; + font-size: 28rpx; + + &.active { + background-color: #5C93FF; + color: #ffffff; + font-weight: 700; + } + } + } + } + + .btns { + display: flex; + align-items: center; + justify-content: space-between; + + + .btn-item { + width: 303rpx; + height: 70rpx; + border-radius: 84rpx; + background: linear-gradient(160deg, #99C0FF 0%, #5D90F5 100%); + display: flex; + justify-content: center; + align-items: center; + color: #FFFFFF; + font-size: 28rpx; + font-weight: 700; + + &:active { + transform: scale(0.95); + } + + .img { + width: 30rpx; + height: 30rpx; margin-right: 10rpx; } } + + } - - .grid { - display: grid; - grid-template-columns: repeat(9, 1fr); - gap: 8rpx; - padding: 32rpx; - box-sizing: border-box; - - .grid-item { - width: 64px; - height: 64px; - border-radius: 8px; - background: #FAFAFA; - border: 1px solid #999999; - - &.active { - border: 1px solid #5F93FA; - } - } - } - - .hint { - color: #999999; - font-size: 26rpx; - margin: 32rpx 0 64rpx; - margin-left: 48rpx; - } - - .colorbox { - display: flex; - align-items: center; - justify-content: center; - - .colorbox-icon { - width: 54rpx; - height: 54rpx; - background: url('../../assets/chromaticCircle.png') no-repeat; - background-size: 100% 100%; - margin-right: 16rpx; - } - - .colorbox-btn { - width: 180rpx; - height: 64rpx; - border-radius: 90rpx; - background: #38F1E5; - border: 2rpx solid #EDEDED; - text-align: center; - line-height: 64rpx; - font-size: 26rpx; - color: #fff; - } - } - - .btn { - width: 686rpx; - height: 80rpx; - border-radius: 50rpx; - background: #5F93FA; - text-align: center; - line-height: 80rpx; - color: #FFFFFF; - font-size: 30rpx; - margin: 0 auto; - } - - +} + + +.custom-color { + --slider-active-background-color: #5A8FFA; }