38 lines
1.6 KiB
React
38 lines
1.6 KiB
React
|
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 >
|
|||
|
|
)
|
|||
|
|
}
|