Skip to content

N
NEWYEARPARTY
Commit 4f1d6a85 authored by 华国豪's avatar 华国豪 🙄
Browse files
Options

1

parent 2add1b27
Hide whitespace changes
Inline Side-by-side
Showing with 25 additions and 32 deletions
src/assets/css/GameRanking.css
View file @ 4f1d6a85
.Ranking { .Ranking{
width: 100%; width: 100%;
height: 100%; height: 100%;
background: url(/static/image/gamerank/bg.png); background: url(/static/image/gamerank/bg.png);
...@@ -9,79 +9,72 @@ ...@@ -9,79 +9,72 @@
top: 0; top: 0;
z-index: 10009; z-index: 10009;
} }
.Ranking .logo{
.Ranking .logo {
position: relative; position: relative;
left: 4rem; left: 4rem;
top: 2rem; top: 2rem;
} }
.Ranking p.tit{
.Ranking p.tit {
text-align: center; text-align: center;
font-size: 4rem; font-size: 4rem;
color: white; color: white;
position: relative; position: relative;
top: -28px; top: -20px;
} }
.Ranking .rank-box{
.Ranking .rank-box {
width: 80%; width: 80%;
margin: 0 auto; margin: 0 auto;
display: flex; display: flex;
padding-top: 4rem; padding-top: 4rem;
} }
.Ranking .rank-box .item { .Ranking .rank-box .item {
width: 9rem; width: 9rem;
padding: 6rem 0;
} }
.Ranking .rank-box .item .head{
.Ranking .rank-box .item .head {
position: relative; position: relative;
width: 5rem; width: 5rem;
height: 5rem; height: 5rem;
border-radius: 50%; border-radius: 50%;
background: linear-gradient(0deg, rgba(247, 213, 23, 1), rgba(255, 171, 2, 1)); background:linear-gradient(0deg,rgba(247,213,23,1),rgba(255,171,2,1));
padding: .4rem; padding: .4rem;
margin: 0 auto; margin: 0 auto;
} }
.Ranking .rank-box .item .head .maozi{
.Ranking .rank-box .item .head .maozi {
position: absolute; position: absolute;
left: -23px; left: -12px;
top: -21px; top: -20px;
box-sizing: border-box; box-sizing: border-box;
} }
.Ranking .rank-box .item .head .user-img{
.Ranking .rank-box .item .head .user-img {
width: 5rem; width: 5rem;
height: 5rem; height: 5rem;
border-radius: 50%; border-radius: 50%;
} }
.Ranking .rank-box .item .body{
.Ranking .rank-box .item .body {
width: 60px; width: 60px;
margin: 2rem auto; margin: 0 auto;
height: 292px; height: 292px;
position: relative; position: relative;
} margin-bottom: 3rem;
}
.Ranking .rank-box .item .body .color { .Ranking .rank-box .item .body .color{
position: absolute; position: absolute;
left: 5%; left: 5%;
bottom: 0; bottom: 0;
width: 89%; width: 89%;
background: linear-gradient(90deg, rgba(186, 76, 11, 1), rgba(233, 154, 53, 1), rgba(253, 244, 139, 1), rgba(209, 151, 25, 1)); border-radius:0px 0px 30px 30px;
border-radius: 0px 0px 30px 30px; background: url(/static/image/gamerank/tiao2.png);
background-repeat: no-repeat;
background-size: 100% 100%;
} }
.Ranking .rank-box .item .name{
.Ranking .rank-box .item .name {
text-align: center; text-align: center;
font-family: 'PingFangR'; font-family: 'PingFangR';
font-size: 2.4rem; font-size: 2.4rem;
color: white; color: white;
font-weight: 600;
} }
.Ranking .rank-box .item .name p:nth-child(1) { .Ranking .rank-box .item .name p:nth-child(1) {
padding: .4rem; padding: .4rem;
} }
\ No newline at end of file
src/components/playGame/GameRanking.vue
View file @ 4f1d6a85
...@@ -4,10 +4,10 @@ ...@@ -4,10 +4,10 @@
<p class="tit"><span>排</span> <span>行</span> <span>榜</span></p> <p class="tit"><span>排</span> <span>行</span> <span>榜</span></p>
<div class="rank-box"> <div class="rank-box">
<div class="item" v-for="(item, index) in rankingList"> <div class="item" v-for="(item, index) in rankingList">
<div class="head"> <!-- <div class="head">
<img v-if="index < 3" class="maozi" :class="`maozi${index}`" :src="`/static/image/gamerank/maozi_${index+1}.png`" alt=""> <img v-if="index < 3" class="maozi" :class="`maozi${index}`" :src="`/static/image/gamerank/maozi_${index+1}.png`" alt="">
<img class="user-img" :src="item.photo" alt=""> <img class="user-img" :src="item.photo" alt="">
</div> </div> -->
<div class="body"> <div class="body">
<div class="color" :style="{'height': item.height + '%'}"></div> <div class="color" :style="{'height': item.height + '%'}"></div>
</div> </div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment