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; |
||||
.topHeight{ |
||||
box-shadow: 0px 4px 10px rgba($color: #000000, $alpha: 0.3); |
||||
|
||||
.topHeight { |
||||
width: 100%; |
||||
height: 88px; |
||||
height: 46px; |
||||
} |
||||
.page-title{ |
||||
|
||||
.page-title { |
||||
padding: 0 32px; |
||||
height: 88px; |
||||
height: 46px; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
font-weight: bold; |
||||
.icon{ |
||||
width: 40px; |
||||
height: 40px; |
||||
font-size: 40px; |
||||
|
||||
.icon { |
||||
width: 34px; |
||||
height: 30px; |
||||
// font-size: 40px; |
||||
} |
||||
.title{ |
||||
font-size: 34px; |
||||
|
||||
.title { |
||||
font-size: 18px; |
||||
color: #ffffff; |
||||
} |
||||
.title1{ |
||||
font-size: 34px; |
||||
color: #000000; |
||||
|
||||
.avatar { |
||||
width: 41px; |
||||
height: 41px; |
||||
border-radius: 50%; |
||||
margin-top: 2px; |
||||
} |
||||
.blank{ |
||||
|
||||
.blank { |
||||
width: 48px; |
||||
height: 48px; |
||||
} |
||||
} |
||||
} |
||||
.hidden{ |
||||
height: 88px; //176px; |
||||
|
||||
.hidden { |
||||
height: 46px; //176px; |
||||
width: 100%; |
||||
opacity: 0; |
||||
// background: pink; |
||||
} |
||||
|
||||
.bgc{ |
||||
.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; |
||||
} |
||||
@ -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