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 {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 Title from '@/components/title' |
||||
import Card from '@/components/card' |
||||
import coinIcon from '@/assets/icon/coin-1.svg' |
||||
|
||||
function Table() { |
||||
|
||||
return ( |
||||
<View> |
||||
<Text>Table!!</Text> |
||||
</View> |
||||
) |
||||
const {username, nickname, avatar} = useSelector(state => state.user); |
||||
|
||||
const players = [1, 2, 3, 4, 5, 6]; |
||||
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 |
||||
@ -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