tangmingyou
4 years ago
16 changed files with 261 additions and 16 deletions
@ -0,0 +1,25 @@ |
|||||||
|
import React from 'react' |
||||||
|
import { View, Text, Image } from '@tarojs/components' |
||||||
|
import Taro from '@tarojs/taro' |
||||||
|
|
||||||
|
import './style/card.scss' |
||||||
|
import suit0Icon from '@/assets/icon/suit-0.svg' |
||||||
|
import suit1Icon from '@/assets/icon/suit-1.svg' |
||||||
|
import suit2Icon from '@/assets/icon/suit-2.svg' |
||||||
|
import suit3Icon from '@/assets/icon/suit-3.svg' |
||||||
|
|
||||||
|
const suits = [suit0Icon, suit1Icon, suit2Icon, suit3Icon]; |
||||||
|
const dots = ["2", "3", "4", "5", "6", "7", "8", "9", "10", "J", "Q", "K", "A"]; |
||||||
|
|
||||||
|
function Card(props) { |
||||||
|
const {w, h, dot, suit} = props; |
||||||
|
|
||||||
|
return ( |
||||||
|
<View className="card" style={{width: Taro.pxTransform(w || 42), height: h || 58}}> |
||||||
|
<View className="dot"><Text style={{color: suit%2===0?'#FF4A0E':'#000'}}>{dots[dot || 0]}</Text></View> |
||||||
|
<View className="suit-wrap"><Image className="suit" src={suits[suit || 0]} /></View> |
||||||
|
</View> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
export default Card |
||||||
@ -0,0 +1,24 @@ |
|||||||
|
.card { |
||||||
|
border-radius: 5px; |
||||||
|
border: 1px solid #000; |
||||||
|
position: relative; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
background-color: #fff; |
||||||
|
|
||||||
|
.dot { |
||||||
|
position: absolute; |
||||||
|
font-size: 14px; |
||||||
|
left: 6px; |
||||||
|
top: 2px; |
||||||
|
font-weight: bold; |
||||||
|
} |
||||||
|
.suit-wrap { |
||||||
|
margin-top: 5px; |
||||||
|
} |
||||||
|
.suit { |
||||||
|
height: 18px; |
||||||
|
width: auto; |
||||||
|
} |
||||||
|
} |
||||||
@ -1,15 +1,58 @@ |
|||||||
import React, { Component, useState } from 'react' |
import React, { Component, useState } from 'react' |
||||||
import {View, Text} from '@tarojs/components' |
import { View, Text, Image } from '@tarojs/components' |
||||||
|
import { useSelector } from 'react-redux' |
||||||
|
import cnames from 'classnames' |
||||||
|
|
||||||
import './table.scss' |
import './table.scss' |
||||||
|
import Title from '@/components/title' |
||||||
|
import Card from '@/components/card' |
||||||
|
import coinIcon from '@/assets/icon/coin-1.svg' |
||||||
|
|
||||||
function Table() { |
function Table() { |
||||||
|
|
||||||
return ( |
const {username, nickname, avatar} = useSelector(state => state.user); |
||||||
<View> |
|
||||||
<Text>Table!!</Text> |
const players = [1, 2, 3, 4, 5, 6]; |
||||||
</View> |
const playerRows = players.reduce((arr, item, idx) => { |
||||||
) |
const row = parseInt(idx / 2); |
||||||
|
let rowArr = arr[row] || []; |
||||||
|
rowArr[idx % 2] = { index: idx, item }; |
||||||
|
arr[row] = rowArr; |
||||||
|
parseInt() |
||||||
|
return arr; |
||||||
|
}, []); |
||||||
|
|
||||||
|
return ( |
||||||
|
<View className="tab"> |
||||||
|
<Title title="GAME" /> |
||||||
|
{ |
||||||
|
playerRows.map((row, i) => ( |
||||||
|
<View key={i} className="playerRow"> |
||||||
|
{ |
||||||
|
row.map((player, j) => ( |
||||||
|
<View key={j} className="player-wrap"> |
||||||
|
<View className={cnames("player-no",{"player-no-running": player.index===1})}><Text>#{player.index}</Text></View> |
||||||
|
<View className="card1"><Card w={42} h={48} dot={12} suit={2} /></View> |
||||||
|
<View className="card2"><Card w={42} h={48} dot={12} suit={3} /></View> |
||||||
|
<View className="player"> |
||||||
|
<View className="avatar-wrap"><Image className="avatar" src={avatar} /></View> |
||||||
|
<View className="player-name"><Text>Player{player.item}</Text></View> |
||||||
|
</View> |
||||||
|
<View className="wallet-wrap"> |
||||||
|
<View className="wallet"> |
||||||
|
<View className="wallet-icon"><Image className="wallet-icon-img" src={coinIcon} /></View> |
||||||
|
<View className="wallet-amount"><Text>3,000,000</Text></View> |
||||||
|
</View> |
||||||
|
<View className="pct"><Text>25%</Text></View> |
||||||
|
</View> |
||||||
|
</View> |
||||||
|
)) |
||||||
|
} |
||||||
|
</View> |
||||||
|
)) |
||||||
|
} |
||||||
|
</View> |
||||||
|
) |
||||||
} |
} |
||||||
|
|
||||||
export default Table |
export default Table |
||||||
@ -0,0 +1,111 @@ |
|||||||
|
.tab { |
||||||
|
.playerRow { |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
// align-content: space-around; |
||||||
|
flex-flow: row wrap; |
||||||
|
// width: 405px; |
||||||
|
margin: 46px 26px 0 26px; |
||||||
|
} |
||||||
|
.player-wrap { |
||||||
|
// flex: 0 0 50%; |
||||||
|
position: relative; |
||||||
|
} |
||||||
|
.player-no { |
||||||
|
position: absolute; |
||||||
|
top: -25px; |
||||||
|
color: #fff; |
||||||
|
font-size: 14px; |
||||||
|
height: 23px; |
||||||
|
width: 23px; |
||||||
|
line-height: 23px; |
||||||
|
background-color: #807878; |
||||||
|
border-radius: 50%; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
.player-no-running { |
||||||
|
font-weight: bold; |
||||||
|
color: #fff; |
||||||
|
background-color: #EE914E; |
||||||
|
} |
||||||
|
|
||||||
|
.card1, .card2 { |
||||||
|
position: absolute; |
||||||
|
z-index: 999; |
||||||
|
top: -27px; |
||||||
|
} |
||||||
|
.card1 { |
||||||
|
left: 60px; |
||||||
|
} |
||||||
|
.card2 { |
||||||
|
left: 104px; |
||||||
|
} |
||||||
|
.player { |
||||||
|
width: 153px; |
||||||
|
height: 69px; |
||||||
|
background-color: #EE914E; |
||||||
|
// text-align: center; |
||||||
|
// line-height: 114px; |
||||||
|
display: flex; |
||||||
|
// padding: 10px 4px; |
||||||
|
border: 1px solid #000; |
||||||
|
border-radius: 5px; |
||||||
|
} |
||||||
|
.avatar-wrap { |
||||||
|
margin: 10px 0 10px 4px; |
||||||
|
} |
||||||
|
.avatar { |
||||||
|
border-radius: 5px; |
||||||
|
height: 50px; |
||||||
|
width: 50px; |
||||||
|
} |
||||||
|
.player-name { |
||||||
|
font-size: 12px; |
||||||
|
line-height: 20px; |
||||||
|
height: 22px; |
||||||
|
color: #fff; |
||||||
|
font-weight: bold; |
||||||
|
width: 82px; |
||||||
|
border-bottom: 1px solid #fff; |
||||||
|
margin-top: 36px; |
||||||
|
margin-left: 8px; |
||||||
|
} |
||||||
|
|
||||||
|
.wallet-wrap { |
||||||
|
display: flex; |
||||||
|
margin-top: 3px; |
||||||
|
} |
||||||
|
.wallet { |
||||||
|
display: flex; |
||||||
|
background-color: #EE914E; |
||||||
|
width: 100px; |
||||||
|
height: 18px; |
||||||
|
border-radius: 5px; |
||||||
|
justify-content: space-between; |
||||||
|
box-sizing: border-box; |
||||||
|
padding: 0 4px; |
||||||
|
} |
||||||
|
.wallet-icon { |
||||||
|
//margin: 2px 0 2px 4px; |
||||||
|
line-height: 22px; |
||||||
|
} |
||||||
|
.wallet-icon-img { |
||||||
|
width: 14px; |
||||||
|
height: 14px; |
||||||
|
} |
||||||
|
.wallet-amount { |
||||||
|
font-size: 12px; |
||||||
|
color: #fff; |
||||||
|
line-height: 18px; |
||||||
|
} |
||||||
|
.pct { |
||||||
|
background-color: #807878; |
||||||
|
font-size: 12px; |
||||||
|
line-height: 18px; |
||||||
|
width: 50px; |
||||||
|
border-radius: 5px; |
||||||
|
text-align: center; |
||||||
|
color: #fff; |
||||||
|
margin-left: 5px; |
||||||
|
} |
||||||
|
} |
||||||
Loading…
Reference in new issue