From db2ad36c9f483b3a704f3008465b95312dab2efc Mon Sep 17 00:00:00 2001 From: tangmingyou <234767776@qq.com> Date: Tue, 17 Jan 2023 00:13:23 +0800 Subject: [PATCH] table static page --- config/dev.js | 3 +- package.json | 1 + src/assets/icon/add-2.svg | 1 + src/assets/icon/coin-1.svg | 1 + src/assets/icon/suit-0.svg | 1 + src/assets/icon/suit-1.svg | 1 + src/assets/icon/suit-2.svg | 1 + src/assets/icon/suit-3.svg | 1 + src/components/card.jsx | 25 +++++++ src/components/style/card.scss | 24 +++++++ src/components/title.jsx | 2 - src/pages/new_table/new_table.jsx | 9 ++- src/pages/new_table/new_table.scss | 37 +++++++++- src/pages/table/table.jsx | 57 +++++++++++++-- src/pages/table/table.scss | 111 +++++++++++++++++++++++++++++ yarn.lock | 2 +- 16 files changed, 261 insertions(+), 16 deletions(-) create mode 100644 src/assets/icon/add-2.svg create mode 100644 src/assets/icon/coin-1.svg create mode 100644 src/assets/icon/suit-0.svg create mode 100644 src/assets/icon/suit-1.svg create mode 100644 src/assets/icon/suit-2.svg create mode 100644 src/assets/icon/suit-3.svg create mode 100644 src/components/card.jsx create mode 100644 src/components/style/card.scss diff --git a/config/dev.js b/config/dev.js index b81c2e7..add4171 100644 --- a/config/dev.js +++ b/config/dev.js @@ -9,7 +9,8 @@ module.exports = { mini: {}, h5: { devServer: { - host: '0.0.0.0', + // host: '0.0.0.0', + host: '192.168.3.102', port: 10086, // 设置代理来解决 H5 请求的跨域问题 proxy: { diff --git a/package.json b/package.json index f7881ab..14a8e4f 100644 --- a/package.json +++ b/package.json @@ -47,6 +47,7 @@ "@tarojs/shared": "3.5.11", "@tarojs/taro": "3.5.11", "@tarojs/taro-h5": "3.5.11", + "classnames": "^2.3.2", "promise.prototype.finally": "^3.1.4", "protobufjs": "^7.1.2", "react": "^18.0.0", diff --git a/src/assets/icon/add-2.svg b/src/assets/icon/add-2.svg new file mode 100644 index 0000000..9f6acf1 --- /dev/null +++ b/src/assets/icon/add-2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icon/coin-1.svg b/src/assets/icon/coin-1.svg new file mode 100644 index 0000000..19c689c --- /dev/null +++ b/src/assets/icon/coin-1.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icon/suit-0.svg b/src/assets/icon/suit-0.svg new file mode 100644 index 0000000..6106c6d --- /dev/null +++ b/src/assets/icon/suit-0.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icon/suit-1.svg b/src/assets/icon/suit-1.svg new file mode 100644 index 0000000..aec4a20 --- /dev/null +++ b/src/assets/icon/suit-1.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icon/suit-2.svg b/src/assets/icon/suit-2.svg new file mode 100644 index 0000000..495344f --- /dev/null +++ b/src/assets/icon/suit-2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icon/suit-3.svg b/src/assets/icon/suit-3.svg new file mode 100644 index 0000000..5f6b4ef --- /dev/null +++ b/src/assets/icon/suit-3.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/card.jsx b/src/components/card.jsx new file mode 100644 index 0000000..c1a15d9 --- /dev/null +++ b/src/components/card.jsx @@ -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 ( + + {dots[dot || 0]} + + + ) +} + +export default Card diff --git a/src/components/style/card.scss b/src/components/style/card.scss new file mode 100644 index 0000000..0e24265 --- /dev/null +++ b/src/components/style/card.scss @@ -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; + } +} diff --git a/src/components/title.jsx b/src/components/title.jsx index 31d181f..c9f37ee 100644 --- a/src/components/title.jsx +++ b/src/components/title.jsx @@ -1,7 +1,5 @@ import React from 'react' import { View, Text, Image } from '@tarojs/components' -// import { AtIcon } from 'taro-ui' -import { Icon } from '@nutui/nutui-react-taro'; import { navigateBack } from '@/utils/application' import left from '@/assets/icon/left-1.svg' import './style/title.scss' diff --git a/src/pages/new_table/new_table.jsx b/src/pages/new_table/new_table.jsx index 78c9f51..eba20af 100644 --- a/src/pages/new_table/new_table.jsx +++ b/src/pages/new_table/new_table.jsx @@ -6,6 +6,7 @@ import './new_table.scss' import Title from '@/components/title' import userIcon from '@/assets/icon/user-2.svg' import closeIcon from '@/assets/icon/close-1.svg' +import addIcon from '@/assets/icon/add-2.svg' function NewTable() { const {username, nickname, avatar} = useSelector(state => state.user); @@ -29,7 +30,9 @@ function NewTable() { { row.map((player, j) => ( - + player.index === 5 + ? + : @@ -48,8 +51,8 @@ function NewTable() { {nickname} - - + + diff --git a/src/pages/new_table/new_table.scss b/src/pages/new_table/new_table.scss index 7219fbf..60042da 100644 --- a/src/pages/new_table/new_table.scss +++ b/src/pages/new_table/new_table.scss @@ -16,10 +16,18 @@ } .player { width: 159px; - height: 101px; + height: 114px; background-color: #EE914E; text-align: center; - line-height: 101px; + line-height: 114px; + } + .empty-player { + background-color: #D8D8D8; + } + .empty-icon { + width: 85px; + height: 85px; + margin: 14.5px 0; } .player-icon { height: 50px; @@ -57,6 +65,7 @@ width: 405px; height: 83px; background-color: #EE914E; + display: flex; } .avatar-wrap { @@ -67,4 +76,28 @@ width: 66px; height: 66px; } + .nickname { + font-size: 12px; + color: #fff; + // line-height: 40px; + // text-decoration: underline; + border-bottom: 1px solid #fff; + height: 26px; + margin-left: 13px; + margin-top: 10px; + } + .submit-btn-wrap { + + } + .submit-btn { + width: 360px; + height: 42px; + background-color: #EE914E; + border-radius: 16px; + font-size: 16px; + line-height: 42px; + color: #fff; + font-weight: bold; + margin-top: 29px; + } } diff --git a/src/pages/table/table.jsx b/src/pages/table/table.jsx index 2c3293e..e08405b 100644 --- a/src/pages/table/table.jsx +++ b/src/pages/table/table.jsx @@ -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 ( - - Table!! - - ) + 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 ( + + + { + 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 \ No newline at end of file +export default Table diff --git a/src/pages/table/table.scss b/src/pages/table/table.scss index e69de29..a5bda56 100644 --- a/src/pages/table/table.scss +++ b/src/pages/table/table.scss @@ -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; + } +} diff --git a/yarn.lock b/yarn.lock index e1308e5..afec766 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3825,7 +3825,7 @@ class-utils@^0.3.5: isobject "^3.0.0" static-extend "^0.1.1" -classnames@^2.2.5, classnames@^2.3.1: +classnames@^2.2.5, classnames@^2.3.1, classnames@^2.3.2: version "2.3.2" resolved "https://registry.npmmirror.com/classnames/-/classnames-2.3.2.tgz#351d813bf0137fcc6a76a16b88208d2560a0d924" integrity sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==