2025年04月19日18:21:31

src/app.config.js

@@ -1,6 +1,8 @@
 export default defineAppConfig({
   pages: [
     "pages/index/index",
+    "pages/game/index",
+    "pages/history/index",
     "pages/funList/index",
   ],
 

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 (
-    <View className={`cp-wrapper ${open ? 'wrapper_show' : ''}`} >
-      <View className={`cp-box ${open ? 'dialog_show' : ''}`}>
+    <Popup open={open} rounded placement="bottom"  >
+      <View className="cp-box">
         <View className="cp-header">
           <View className="cp-header-icon cancel" onClick={close}></View>
           <View className="cp-header-title" >颜色选取</View>
@@ -375,7 +378,8 @@ export default function Index({ open, handleColorPicker }) {
           </View>
         </View>
       </View>
-    </View>
+    </Popup>
+
 
   )
 }

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;

src/pages/game/index.config.js

@@ -0,0 +1,3 @@
+export default definePageConfig({
+  navigationBarTitleText: "首页",
+});

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 (
+    <View className="index">
+      <View className='head'>
+        <View className='head-left'>像素跳动</View>
+        <View className='head-right'>  <Image className='icon' src={history} />历史记录</View>
+      </View>
+      <View className="grid">
+        {list.map((item, index) => <View className={`grid-item ${index == 0 ? 'active' : ''}`} key={index}></View>)}
+      </View >
+
+      <View className='colorbox'>
+        <View className='colorbox-icon' onClick={() => setOpen(true)}></View>
+        <View className='colorbox-btn' onClick={() => setOpen(true)}>#EDEDED</View>
+      </View>
+      <View className='hint'>*请选取喜欢的颜色，再点击小方格填入颜色；</View>
+      <View className='btn' >传输画面到音响屏幕</View>
+      <ColorPicker open={open} handleColorPicker={handleColorPicker} />
+    </View >
+  )
+}

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;
+  }
+
+
+}

src/pages/history/index.config.js

@@ -0,0 +1,3 @@
+export default definePageConfig({
+  navigationBarTitleText: "历史记录",
+});

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 (
+    <View className="index">
+      {
+        history.length ?
+          <View>
+            {
+              history.map((item, index) => {
+                return <View className="grid" key={index} onClick={() => setOpen(true)}>
+                  {list.map((ite, ide) => <View className="grid-item" key={`${index}_${ide}`}></View>)}
+                </View >
+              })
+            }
+          </View>
+          : <View className="empty">
+            <Image src={empty} className="empty-img" />
+            <View className="empty-text">暂无历史记录</View>
+          </View>
+      }
+      <ActionSheet
+        cancelText="取消"
+        actions={actions}
+        open={open}
+        onSelect={() => setOpen(false)}
+        onCancel={() => setOpen(false)}
+      />
+    </View>
+  );
+}

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;
+  }
+}

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 (
     <View className="index">
-      <View className='head'>
-        <View className='head-left'>像素跳动</View>
-        <View className='head-right'>  <Image className='icon' src={history} />历史记录</View>
+      <View className="headbox">
+        <View className="source">
+          <View className="title">音乐信号(音源)</View>
+          <View className="list">
+            {
+              sourceList.map((item, index) => {
+                return <View className={`list-item ${index == 0 ? 'active' : ''}`} key={index}>
+                  <View className="yuan"></View>
+                  <View className="line"></View>
+                  <View className="text">{item}</View>
+                </View>
+              })
+            }
+
           </View>
-      <View className="grid">
-        {list.map((item, index) => <View className={`grid-item ${index == 0 ? 'active' : ''}`} key={index}></View>)}
         </View>
 
-      <View className='colorbox'>
-        <View className='colorbox-icon' onClick={() => setOpen(true)}></View>
-        <View className='colorbox-btn' onClick={() => setOpen(true)}>#EDEDED</View>
+        <View className="switch">
+          <View className="title">开关状态</View>
+          <View className="switch-item">
+            <Image className='img' src={ble} />
+            <Text className='text'>蓝牙</Text>
+            <Switch size="20" />
+          </View>
+          <View className="switch-item">
+            <Image className='img' src={soundCard} />
+            <Text className='text'>声卡</Text>
+            <Switch size="20" />
+          </View>
+        </View>
+      </View>
+      <View className='play'>
+        <View className='play-icon pre'></View>
+        <View className='play-play'></View>
+        <View className='play-icon next'></View>
+      </View>
+      <View className='card'>
+        <View className='funitem'>
+          <View className='funitem-text'>音乐音量</View>
+          <View className='mode'>
+            <View className='icon l'></View>
+            <View className='input'>MODE 1</View>
+            <View className='icon r'></View>
+          </View>
+        </View>
+      </View>
+      <View className='card'>
+        <View className='funitem'>
+          <View className='funitem-text'>超低音强度</View>
+          <View className='mode'>
+            <View className='icon l'></View>
+            <View className='input'>+ 1</View>
+            <View className='icon r'></View>
+          </View>
+        </View>
+      </View>
+      <View className='card'>
+        <View className='funitem'>
+          <View className='funitem-text'>话筒音量</View>
+          <View className='funitem-right'>
+            <View className='num'>50%</View>
+            <Slider className="custom-color" size={4} defaultValue={50} />
+          </View>
+        </View>
+      </View>
+      <View className='card'>
+        <View className='funitem'>
+          <View className='funitem-text'>话筒音量</View>
+          <View className='funitem-right'>
+            <View className='num'>50%</View>
+            <Slider className="custom-color" size={4} defaultValue={50} />
+          </View>
+        </View>
+        <View className='funitem'>
+          <View className='funitem-text'>话筒混响音量</View>
+          <View className='funitem-right'>
+            <View className='num'>50%</View>
+            <Slider className="custom-color" size={4} defaultValue={50} />
+          </View>
+        </View>
+        <View className='funitem'>
+          <View className='funitem-text'>话筒混响模式</View>
+          <View className='numlist'>
+            <View className='numlist-num active'>1</View>
+            <View className='numlist-num'>2</View>
+            <View className='numlist-num'>3</View>
+            <View className='numlist-num'>4</View>
+            <View className='numlist-num'>5</View>
+            <View className='numlist-num'>6</View>
+          </View>
+        </View>
+      </View>
+      <View className='btns'>
+        <View className='btn-item'>
+          <Image src={game} className='img' />
+          GAME
+        </View>
+        <View className='btn-item'>
+          <Image src={ai} className='img' />
+          AI
+        </View>
       </View>
-      <View className='hint'>*请选取喜欢的颜色，再点击小方格填入颜色；</View>
-
-      <View className='btn' >传输画面到音响屏幕</View>
-
-      <ColorPicker open={open} handleColorPicker={handleColorPicker} />
     </View>
   )
 }

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;
-    padding: 0 32rpx;
-    margin-top: 32rpx;
+        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;
 
-    .head-left {
-      color: #5F93FA;
-      font-size: 32rpx;
+      .title {
+        font-size: 30rpx;
+        color: #212121;
+        font-weight: 700;
+
+      }
+
+      .switch-item {
         display: flex;
         align-items: center;
+        margin-top: 24rpx;
 
-      &::before {
-        content: '';
-        width: 6rpx;
-        height: 36rpx;
-        border-radius: 4rpx;
-        background: #5F93FA;
-        display: inline-block;
-        margin-right: 12rpx;
+        .img {
+          width: 38rpx;
+          height: 38rpx;
+        }
+
+        .text {
+          color: #212121;
+          font-size: 28rpx;
+          margin-left: 12rpx;
+          margin-right: 50rpx;
+        }
+      }
     }
   }
 
-    .head-right {
-      width: 184rpx;
-      height: 50rpx;
-      border-radius: 44rpx;
-      background: #DEE9FF;
-      text-indent: 58rpx;
+  .play {
+    width: 670rpx;
+    height: 130rpx;
+    border-radius: 88rpx;
+    background: #FFFFFF;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin: 82rpx 0;
+    padding: 0 90rpx;
+    box-sizing: border-box;
+
+    .play-icon {
+      width: 46rpx;
+      height: 39rpx;
+
+      &:active {
+        transform: scale(1.2);
+      }
+    }
+
+    .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;
+      margin-right: 30rpx;
+
+      .num {
+        width: 110rpx;
+        height: 58rpx;
+        border-radius: 32rpx;
+        background: #F0F5FF;
+        text-align: center;
+        line-height: 58rpx;
+        color: #5A8FFA;
         font-size: 26rpx;
-      color: #5F93FA;
+        font-weight: 700;
+        margin-right: 40rpx;
+        flex-shrink: 0;
+      }
+    }
+
+    .mode {
+      flex: 1;
       display: flex;
       align-items: center;
-      justify-content: center;
 
-      .icon {
-        width: 26rpx;
-        height: 26rpx;
+      .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;
+}