tangmingyou
4 years ago
17 changed files with 458 additions and 123 deletions
|
After Width: | Height: | Size: 17 KiB |
@ -1,46 +1,56 @@
|
||||
.page-top{ |
||||
.page-top { |
||||
width: 100%; |
||||
position: fixed; |
||||
z-index: 9999; |
||||
top: 0; |
||||
left: 0; |
||||
box-shadow: 0px 4px 10px rgba($color: #000000, $alpha: 0.3); |
||||
|
||||
.topHeight { |
||||
width: 100%; |
||||
position: fixed; |
||||
z-index: 9999; |
||||
top: 0; |
||||
left: 0; |
||||
.topHeight{ |
||||
width: 100%; |
||||
height: 88px; |
||||
height: 46px; |
||||
} |
||||
|
||||
.page-title { |
||||
padding: 0 32px; |
||||
height: 46px; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
font-weight: bold; |
||||
|
||||
.icon { |
||||
width: 34px; |
||||
height: 30px; |
||||
// font-size: 40px; |
||||
} |
||||
|
||||
.title { |
||||
font-size: 18px; |
||||
color: #ffffff; |
||||
} |
||||
.page-title{ |
||||
padding: 0 32px; |
||||
height: 88px; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
font-weight: bold; |
||||
.icon{ |
||||
width: 40px; |
||||
height: 40px; |
||||
font-size: 40px; |
||||
} |
||||
.title{ |
||||
font-size: 34px; |
||||
color: #ffffff; |
||||
} |
||||
.title1{ |
||||
font-size: 34px; |
||||
color: #000000; |
||||
} |
||||
.blank{ |
||||
width: 48px; |
||||
height: 48px; |
||||
} |
||||
|
||||
.avatar { |
||||
width: 41px; |
||||
height: 41px; |
||||
border-radius: 50%; |
||||
margin-top: 2px; |
||||
} |
||||
|
||||
.blank { |
||||
width: 48px; |
||||
height: 48px; |
||||
} |
||||
} |
||||
} |
||||
.hidden{ |
||||
height: 88px; //176px; |
||||
width: 100%; |
||||
opacity: 0; |
||||
// background: pink; |
||||
|
||||
.hidden { |
||||
height: 46px; //176px; |
||||
width: 100%; |
||||
opacity: 0; |
||||
// background: pink; |
||||
} |
||||
|
||||
.bgc{ |
||||
background-color: #fff; |
||||
.bgc { |
||||
background-color: #fff; |
||||
} |
||||
|
||||
@ -0,0 +1,80 @@
|
||||
|
||||
.celling { |
||||
height: 43px; |
||||
} |
||||
.tab { |
||||
// padding: 0 0 0 21px; |
||||
display: flex; |
||||
justify-content: space-evenly; |
||||
flex-wrap:wrap; |
||||
|
||||
.tab-wrap { |
||||
width: 150px; |
||||
margin: 20px 10px; |
||||
} |
||||
.circle-wrap { |
||||
height: 140px; |
||||
width: 140px; |
||||
// background-color: yellowgreen; |
||||
border-radius: 50%; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
position: relative; |
||||
} |
||||
.circle-inner { |
||||
|
||||
} |
||||
.inner-coin { |
||||
height: 80px; |
||||
width: 80px; |
||||
border-radius: 50%; |
||||
} |
||||
.circle-avatar { |
||||
height: 29px; |
||||
width: 29px; |
||||
border-radius: 50%; |
||||
} |
||||
|
||||
} |
||||
.bottom-btn-wrap { |
||||
position: fixed; |
||||
bottom: 0; |
||||
width: 100%; |
||||
height: 80px; |
||||
background-color: #E8E8E8; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
} |
||||
|
||||
.bottom-btn { |
||||
width: 360px; |
||||
background-color: #EE914E; |
||||
border-radius: 16px; |
||||
text-align: center; |
||||
height: 42px; |
||||
color: #fff; |
||||
font-size: 18px; |
||||
} |
||||
|
||||
.tab-no-wrap { |
||||
display: flex; |
||||
justify-content: center; |
||||
} |
||||
|
||||
.tab-no,.tab-sc { |
||||
width: 71px; |
||||
height: 20px; |
||||
background-color: #EE914E; |
||||
border-radius: 16px; |
||||
font-size: 12px; |
||||
color: #FFF; |
||||
text-align: center; |
||||
line-height: 20px; |
||||
} |
||||
|
||||
.tab-sc { |
||||
width: 57px; |
||||
margin-left: 5px; |
||||
} |
||||
@ -1,42 +1,75 @@
|
||||
.login { |
||||
height: 100vh; |
||||
background-color:#fff; |
||||
|
||||
.ceiling { |
||||
height: 75px; |
||||
} |
||||
.title-line { |
||||
padding: 6px 39px; |
||||
} |
||||
.title-1 { |
||||
font-size: 36px; |
||||
color: #EE914E; |
||||
font-weight: bold; |
||||
} |
||||
.title-2 { |
||||
font-size: 14px; |
||||
} |
||||
|
||||
.input-wrap { |
||||
display: flex; |
||||
justify-content: center; |
||||
// align-items: center; |
||||
margin: 37.5px 0; |
||||
} |
||||
.input-icon { |
||||
margin-right: 16px; |
||||
height: 36px; |
||||
width: 36px; |
||||
padding: 4px 0; |
||||
} |
||||
.input-1 { |
||||
box-sizing: border-box; |
||||
width: 307px; |
||||
height: 42px; |
||||
border-radius: 16px; |
||||
border: 1px solid #000; |
||||
font-size: 18px; |
||||
padding: 5px 20px; |
||||
box-shadow: 0px 4px 10px rgba($color: #000000, $alpha: 0.3); |
||||
} |
||||
height: 100vh; |
||||
background-color: #fff; |
||||
|
||||
.ceiling { |
||||
height: 75px; |
||||
} |
||||
|
||||
.title-line { |
||||
//padding: 6px 39px; |
||||
width: 359px; |
||||
margin: 0 auto; |
||||
} |
||||
|
||||
.title-1 { |
||||
font-size: 36px; |
||||
color: #EE914E; |
||||
font-weight: bold; |
||||
} |
||||
|
||||
.title-2 { |
||||
font-size: 14px; |
||||
} |
||||
|
||||
.input-wrap { |
||||
display: flex; |
||||
justify-content: center; |
||||
// align-items: center; |
||||
margin: 37.5px 0; |
||||
} |
||||
|
||||
.input-icon { |
||||
margin-right: 16px; |
||||
height: 36px; |
||||
width: 36px; |
||||
padding: 4px 0; |
||||
} |
||||
|
||||
.input-1, |
||||
.input-2, |
||||
.captcha { |
||||
box-sizing: border-box; |
||||
width: 307px; |
||||
height: 42px; |
||||
border-radius: 16px; |
||||
border: 1px solid #000; |
||||
font-size: 18px; |
||||
padding: 5px 20px; |
||||
box-shadow: 0px 4px 10px rgba($color: #000000, $alpha: 0.3); |
||||
} |
||||
|
||||
.input-2 { |
||||
width: 165px; |
||||
} |
||||
|
||||
.captcha { |
||||
width: 125px; |
||||
box-shadow: none; |
||||
padding: 0 0; |
||||
margin-left: 14px; |
||||
} |
||||
|
||||
.submit-btn { |
||||
width: 360px; |
||||
height: 42px; |
||||
border-radius: 16px; |
||||
box-shadow: 0px 4px 10px rgba($color: #000000, $alpha: 0.3); |
||||
background-color: #EE914E; |
||||
color: #fff; |
||||
font-size: 16px; |
||||
text-align: center; |
||||
line-height: 42px; |
||||
font-weight: bold; |
||||
} |
||||
} |
||||
@ -1,15 +1,59 @@
|
||||
import React, { Component, useState } from 'react' |
||||
import {View, Text} from '@tarojs/components' |
||||
import { View, Text, Image, Button } from '@tarojs/components' |
||||
import { useSelector } from 'react-redux' |
||||
|
||||
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' |
||||
|
||||
function NewTable() { |
||||
const {username, nickname, avatar} = useSelector(state => state.user); |
||||
|
||||
return ( |
||||
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="nt"> |
||||
<Title title={"Create New Table"} /> |
||||
<View className="nt-wrap"> |
||||
{ |
||||
playerRows.map((row, i) => ( |
||||
<View key={i} className="playerRow"> |
||||
{ |
||||
row.map((player, j) => ( |
||||
<View key={j} className="player-wrap"> |
||||
<View className="player-icon"><Image className="player-icon-img" src={userIcon} /></View> |
||||
<View className="close-icon"><Image className="close-icon-img" src={closeIcon} /></View> |
||||
<View className="player"> |
||||
<Text className="player-name">Player{player.item}</Text> |
||||
</View> |
||||
</View> |
||||
)) |
||||
} |
||||
</View> |
||||
)) |
||||
} |
||||
|
||||
<View className="self-wrap"> |
||||
<View className="self"> |
||||
<View className="avatar-wrap"><Image className="avatar" src={avatar} /></View> |
||||
<View className="nickname"><Text>{nickname}</Text></View> |
||||
</View> |
||||
</View> |
||||
<View> |
||||
<Text>创建新桌面NewTable!!</Text> |
||||
<Button>CREATE</Button> |
||||
</View> |
||||
) |
||||
</View> |
||||
</View> |
||||
) |
||||
} |
||||
|
||||
export default NewTable |
||||
@ -0,0 +1,70 @@
|
||||
.nt { |
||||
.nt-wrap { |
||||
padding: 0 11px 0 11px; |
||||
} |
||||
.playerRow { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
// align-content: space-around; |
||||
flex-flow: row wrap; |
||||
width: 405px; |
||||
margin: 46px auto 0 auto; |
||||
} |
||||
.player-wrap { |
||||
// flex: 0 0 50%; |
||||
position: relative; |
||||
} |
||||
.player { |
||||
width: 159px; |
||||
height: 101px; |
||||
background-color: #EE914E; |
||||
text-align: center; |
||||
line-height: 101px; |
||||
} |
||||
.player-icon { |
||||
height: 50px; |
||||
width: 50px; |
||||
background-color: #EE914E; |
||||
position: absolute; |
||||
top: -14px; |
||||
} |
||||
.player-icon-img { |
||||
width: 30px; |
||||
height: 30px; |
||||
padding: 10px; |
||||
} |
||||
.close-icon { |
||||
position: absolute; |
||||
top: 8px; |
||||
left: 127px; |
||||
} |
||||
.close-icon-img { |
||||
width: 24px; |
||||
height: 24px; |
||||
} |
||||
.player-name { |
||||
font-size: 26px; |
||||
color: #fff; |
||||
font-weight: bold; |
||||
} |
||||
|
||||
.self-wrap { |
||||
margin-top: 38px; |
||||
display: flex; |
||||
justify-content: center; |
||||
} |
||||
.self { |
||||
width: 405px; |
||||
height: 83px; |
||||
background-color: #EE914E; |
||||
} |
||||
|
||||
.avatar-wrap { |
||||
|
||||
} |
||||
.avatar { |
||||
margin: 9px 0 0 9px; |
||||
width: 66px; |
||||
height: 66px; |
||||
} |
||||
} |
||||
@ -0,0 +1,19 @@
|
||||
import { createSlice } from '@reduxjs/toolkit'; |
||||
|
||||
const userSlice = createSlice({ |
||||
name: 'user', |
||||
initialState: { |
||||
username: 'Prometheus', |
||||
nickname: 'PrometheusNick', |
||||
avatar: 'https://img0.baidu.com/it/u=2477829979,2171947490&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500', |
||||
}, |
||||
reducers: { |
||||
setUserInfo(state, action) { |
||||
return {...state, ...action.payload} |
||||
} |
||||
} |
||||
}) |
||||
|
||||
export default userSlice |
||||
|
||||
export const { setUserInfo } = userSlice.actions |
||||
Loading…
Reference in new issue