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%; |
width: 100%; |
||||||
position: fixed; |
height: 46px; |
||||||
z-index: 9999; |
} |
||||||
top: 0; |
|
||||||
left: 0; |
.page-title { |
||||||
.topHeight{ |
padding: 0 32px; |
||||||
width: 100%; |
height: 46px; |
||||||
height: 88px; |
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; |
.avatar { |
||||||
height: 88px; |
width: 41px; |
||||||
display: flex; |
height: 41px; |
||||||
justify-content: space-between; |
border-radius: 50%; |
||||||
align-items: center; |
margin-top: 2px; |
||||||
font-weight: bold; |
} |
||||||
.icon{ |
|
||||||
width: 40px; |
.blank { |
||||||
height: 40px; |
width: 48px; |
||||||
font-size: 40px; |
height: 48px; |
||||||
} |
|
||||||
.title{ |
|
||||||
font-size: 34px; |
|
||||||
color: #ffffff; |
|
||||||
} |
|
||||||
.title1{ |
|
||||||
font-size: 34px; |
|
||||||
color: #000000; |
|
||||||
} |
|
||||||
.blank{ |
|
||||||
width: 48px; |
|
||||||
height: 48px; |
|
||||||
} |
|
||||||
} |
} |
||||||
|
} |
||||||
} |
} |
||||||
.hidden{ |
|
||||||
height: 88px; //176px; |
.hidden { |
||||||
width: 100%; |
height: 46px; //176px; |
||||||
opacity: 0; |
width: 100%; |
||||||
// background: pink; |
opacity: 0; |
||||||
|
// background: pink; |
||||||
} |
} |
||||||
|
|
||||||
.bgc{ |
.bgc { |
||||||
background-color: #fff; |
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 { |
.login { |
||||||
height: 100vh; |
height: 100vh; |
||||||
background-color:#fff; |
background-color: #fff; |
||||||
|
|
||||||
.ceiling { |
.ceiling { |
||||||
height: 75px; |
height: 75px; |
||||||
} |
} |
||||||
.title-line { |
|
||||||
padding: 6px 39px; |
.title-line { |
||||||
} |
//padding: 6px 39px; |
||||||
.title-1 { |
width: 359px; |
||||||
font-size: 36px; |
margin: 0 auto; |
||||||
color: #EE914E; |
} |
||||||
font-weight: bold; |
|
||||||
} |
.title-1 { |
||||||
.title-2 { |
font-size: 36px; |
||||||
font-size: 14px; |
color: #EE914E; |
||||||
} |
font-weight: bold; |
||||||
|
} |
||||||
.input-wrap { |
|
||||||
display: flex; |
.title-2 { |
||||||
justify-content: center; |
font-size: 14px; |
||||||
// align-items: center; |
} |
||||||
margin: 37.5px 0; |
|
||||||
} |
.input-wrap { |
||||||
.input-icon { |
display: flex; |
||||||
margin-right: 16px; |
justify-content: center; |
||||||
height: 36px; |
// align-items: center; |
||||||
width: 36px; |
margin: 37.5px 0; |
||||||
padding: 4px 0; |
} |
||||||
} |
|
||||||
.input-1 { |
.input-icon { |
||||||
box-sizing: border-box; |
margin-right: 16px; |
||||||
width: 307px; |
height: 36px; |
||||||
height: 42px; |
width: 36px; |
||||||
border-radius: 16px; |
padding: 4px 0; |
||||||
border: 1px solid #000; |
} |
||||||
font-size: 18px; |
|
||||||
padding: 5px 20px; |
.input-1, |
||||||
box-shadow: 0px 4px 10px rgba($color: #000000, $alpha: 0.3); |
.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 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 './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() { |
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> |
<View> |
||||||
<Text>创建新桌面NewTable!!</Text> |
<Button>CREATE</Button> |
||||||
</View> |
</View> |
||||||
) |
</View> |
||||||
|
</View> |
||||||
|
) |
||||||
} |
} |
||||||
|
|
||||||
export default NewTable |
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