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