open
/
texas-poker-front
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

static pages

master
tangmingyou 4 years ago
parent
db2ad36c9f
commit
97cad133d5
6 changed files with 238 additions and 6 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      config/dev.js
  2. 1
      src/assets/icon/coin-2.svg
  3. 15
      src/components/card.jsx
  4. 2
      src/components/style/card.scss
  5. 56
      src/pages/table/table.jsx
  6. 166
      src/pages/table/table.scss

4
config/dev.js
Unescape View File

@ -9,8 +9,8 @@ module.exports = {
mini: {},
h5: {
devServer: {
// host: '0.0.0.0',
host: '192.168.3.102',
host: '0.0.0.0',
// host: '192.168.3.102',
port: 10086,
// 设置代理来解决 H5 请求的跨域问题
proxy: {

1
src/assets/icon/coin-2.svg
Unescape View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="15" height="15" viewBox="0 0 15 15"><g><path d="M8.99757,7.15334e-7C11.8253,-0.00134858,14.27,1.9727,14.8651,4.73787C15.4601,7.50304,14.044,10.3084,11.4661,11.471C9.73803,15.2927,4.72345,16.207,1.75839,13.2411C-1.20667,10.2752,-0.292568,5.25924,3.528,3.53064C4.49871,1.38134,6.63865,8.94168e-7,8.99757,7.15334e-7ZM6.74795,5.25058L5.24821,5.25058L5.24821,6.00066C4.23503,5.99819,3.40322,6.8014,3.36998,7.81432C3.33673,8.82724,4.11407,9.6833,5.12523,9.74732L5.24821,9.75107L6.74795,9.75107L6.81544,9.75707C6.99384,9.78938,7.12358,9.94475,7.12358,10.1261C7.12358,10.3075,6.99384,10.4628,6.81544,10.4952L6.74795,10.5012L3.74847,10.5012L3.74847,12.0013L5.24821,12.0013L5.24821,12.7514L6.74795,12.7514L6.74795,12.0013C7.76113,12.0038,8.59294,11.2006,8.62619,10.1877C8.65944,9.17473,7.88209,8.31867,6.87093,8.25465L6.74795,8.2509L5.24821,8.2509L5.18072,8.2449C5.00232,8.21259,4.87259,8.05722,4.87259,7.87586C4.87259,7.69451,5.00232,7.53913,5.18072,7.50682L5.24821,7.50082L8.2477,7.50082L8.2477,6.00066L6.74795,6.00066L6.74795,5.25058ZM8.99757,1.50016C7.71232,1.49866,6.48811,2.0484,5.63514,3.01008C9.22974,2.79181,12.2052,5.76844,11.9866,9.36403C13.3824,8.12262,13.8664,6.14764,13.2026,4.40127C12.5385,2.65469,10.8651,1.50017,8.99757,1.50016Z" fill="#FFC300" fill-opacity="1"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

15
src/components/card.jsx
Unescape View File

@ -16,8 +16,19 @@ function Card(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 className="dot" style={{
lineHeight: Taro.pxTransform(w / 3),
left: Taro.pxTransform(w / 8),
}}>
<Text style={{
color: suit % 2 === 0?'#FF4A0E':'#000', fontSize: Taro.pxTransform(w / 3)
}}>{dots[dot || 0]}</Text>
</View>
<View className="suit-wrap">
<Image className="suit" src={suits[suit || 0]} style={{
height: Taro.pxTransform((w || 42) / 2.3333)
}}/>
</View>
</View>
)
}

2
src/components/style/card.scss
Unescape View File

@ -9,7 +9,7 @@
.dot {
position: absolute;
font-size: 14px;
// font-size: 14px;
left: 6px;
top: 2px;
font-weight: bold;

56
src/pages/table/table.jsx
Unescape View File

@ -1,5 +1,5 @@
import React, { Component, useState } from 'react'
import { View, Text, Image } from '@tarojs/components'
import { View, Text, Image, Input, Button } from '@tarojs/components'
import { useSelector } from 'react-redux'
import cnames from 'classnames'
@ -7,6 +7,7 @@ import './table.scss'
import Title from '@/components/title'
import Card from '@/components/card'
import coinIcon from '@/assets/icon/coin-1.svg'
import coin2Icon from '@/assets/icon/coin-2.svg'
function Table() {
@ -51,6 +52,59 @@ function Table() {
</View>
))
}
<View className="desktop-box">
<View className="desktop-wrap">
<View className="desktop-cards">
{
[1,2,3,4,5].map((item, i) => (
<Card key={i} w={42} h={48} dot={12} suit={2} />
))
}
</View>
<View className="desktop-wallet">
<View className="d-wallet-icon">
<Image className="d-wallet-icon-img" src={coinIcon} />
<Text className="d-wallet-icon-text">POT</Text>
</View>
<View className="d-wallet-amount">22,088,000</View>
</View>
</View>
<View className="chatbox" style={{display: 'none'}}>
<View className='chat-window'>
<View className="line">Kelly(#1)进入了游戏</View>
<View className="line">Apollo(#2)进入了游戏</View>
</View>
<View className='chat-panel'>
<View><Input name="chat" type="text" placeholder="" /></View>
<View><Button>OK</Button></View>
</View>
</View>
</View>
<View className="self-box">
<View className="self-wrap">
<View className="hand-card1"><Card w={42} h={48} dot={12} suit={3} /></View>
<View className="hand-card2"><Card w={42} h={48} dot={12} suit={3} /></View>
<View className="hand-five">
{
[1,2,3,4,5].map((_, i) => (
<View key={i} className="hand-five-item"><Card w={30} h={36} dot={12} suit={2} /></View>
))
}
</View>
<View className="s-info-wrap">
<View className="s-avatar"><Image className="s-avatar-img" src={avatar} /></View>
<View className="s-username"><Text>Prometheus</Text></View>
</View>
<View className="s-wallet-wrap">
<View className="s-w-amount-wrap">
<View className="s-w-amount-icon"><Image className="s-w-amount-icon-img" src={coin2Icon}/></View>
<View className="s-w-amount"><Text>3,000,000</Text></View>
</View>
<View className="s-w-pct"><Text>0%</Text></View>
</View>
</View>
</View>
</View>
)
}

166
src/pages/table/table.scss
Unescape View File

@ -108,4 +108,170 @@
color: #fff;
margin-left: 5px;
}
.desktop-box {
display: flex;
justify-content: space-between;
flex-wrap: nowrap;
margin: 33px 26px 0 26px;
}
.desktop-wrap {
}
.desktop-cards {
width: 250px;
height: 95px;
border-radius: 5px;
background-color: #584D4D;
display: flex;
justify-content: space-evenly;
align-items: center;
flex-wrap: nowrap;
}
.desktop-wallet {
margin-top: 4px;
width: 250px;
height: 36px;
background-color: #EE914E;
border-radius: 5px;
display: flex;
justify-content: space-between;
box-sizing: border-box;
padding: 0 5px;
}
.d-wallet-icon {
font-size: 18px;
color: #fff;
font-weight: bold;
line-height: 36px;
display: flex;
align-items: center;
}
.d-wallet-icon-img {
height: 28px;
width: 28px;
}
.d-wallet-icon-text {
margin-left: 7px;
}
.d-wallet-amount {
font-size: 18px;
color: #fff;
font-weight: bold;
line-height: 36px;
}
.chatbox {
width: 159px;
height: 134px;
border: 1px solid #000;
border-radius: 5px;
padding: 5px;
}
.chat-window {
.line {
font-size: 10px;
line-height: 12px;
}
}
.chat-panel {
}
.self-box {
// width: 100%;
height: 109px;
background-color: #EE914E;
margin: 30px 26px 0 26px;
border-radius: 5px;;
}
.self-wrap {
position: relative;
}
.s-info-wrap {
display: flex;
height: 89px;
}
.s-avatar {
align-self: center;
margin-left: 6px;
}
.s-avatar-img {
width: 65px;
height: 65px;
}
.s-username {
font-size: 12px;
font-weight: bold;
border-bottom: 1px solid #fff;
color: #fff;
height: 26px;
align-self: flex-end;
margin-bottom: 16px;
margin-left: 10px;
}
.s-wallet-wrap {
display: flex;
width: 156px;
}
.s-w-amount-wrap {
width: 97px;
height: 18px;
background-color: #fff;
margin-left: 4px;
border-radius: 5px;
display: flex;
justify-content: space-between;
// align-items: flex-start;
box-sizing: border-box;
padding: 0 5px 0 3px;
}
.s-w-amount-icon {
width: 14px;
height: 14px;
margin-top: -2px;
}
.s-w-amount-icon-img {
width: 15px;
height: 15px;
}
.s-w-amount {
color: #3D3D3D;
font-size: 12px;
line-height: 18px;
}
.s-w-pct {
width: 50px;
height: 18px;
border-radius: 5px;
font-size: 12px;
line-height: 18px;
color: #3D3D3D;
text-align: center;
background-color: #fff;
margin-left: 8px;
}
.hand-card1,.hand-card2 {
position: absolute;
top: -20px;
left: 80px;
}
.hand-card2 {
left: 126px;
}
.hand-five {
position: absolute;
left: 188px;
top: -10px;
z-index: 999;
width: 166px;
height: 46px;
align-items: center;
display: flex;
justify-content: space-evenly;
// background-color: #807878;
}
.hand-five-item {
}
}

Write Preview
Loading…
Cancel
Save