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