Skip to content

C
cust-app
Commit f266c402 authored by liwei's avatar liwei
Browse files
Options

修改了排行榜页面样式

parent 8543f47a
Hide whitespace changes
Inline Side-by-side
Showing with 89 additions and 53 deletions
pages/tab/index.vue
View file @ f266c402
......@@ -283,6 +283,7 @@
}
noticeList(query).then(res =>{
this.notice = res.data.rows[0]
console.log('this.notice:',this.notice)
}).catch(e => {
console.log(e)
})
......
pages/tab/rank.vue
View file @ f266c402
......@@ -18,7 +18,7 @@
<view>
<view class="top">
<view class="top1">
<u-subsection bgColor="#ffffff80" buttonColor="red" :list="subList" :current="subCurrent" fontSize="15" @change="sectionChange"/>
<u-subsection bgColor="#ffffff80" :list="subList" :current="subCurrent" fontSize="15" @change="sectionChange"/>
</view>
<view class="top2">
<!-- 第二名 -->
......@@ -33,8 +33,8 @@
<text class="two-text2">{{rankList[1].user.nickname}}</text>
</view>
<view class="two-rankValue">
<view style="display: flex; justify-content: center; align-items: center;width: 136rpx;margin: auto 20rpx; height: 60rpx;">
<u--text :bold="true" size="20" color="rgb(231, 97, 97)" align="right" :text="rankList[1].hours" />
<view style="display: flex; justify-content: center; align-items: center;margin: auto 20rpx; height: 60rpx;">
<text style="font-weight: bold; font-size: 20px; color: rgb(231, 97, 97); text-align: right; display: block;">{{ rankList[1].hours }}</text>
<image src="/static/images/rank/rankRecommend2.png" class="recommend-image"/>
</view>
</view>
......@@ -42,7 +42,7 @@
<!-- 第一名 -->
<view class="one">
<view class="one-rank">
<text style="color: rgb(215, 31, 31);font-family: fantasy;font-size: 35rpx">TOP 1</text>
<text class="one-text">TOP 1</text>
</view>
<view class="one-avatar">
<u-avatar :src="rankList[0].user.avatarUrl" size="100rpx"/>
......@@ -51,8 +51,8 @@
<text style="font-weight: bold; font-size: 13px; color: #070707;">{{rankList[0].user.nickname}}</text>
</view>
<view class="one-rankValue">
<view style="display: flex; justify-content: center;align-items: center; width: 136rpx;margin: auto 20rpx; height: 60rpx;">
<u--text :bold="true" size="20" color="rgb(215, 31, 31)" align="right" :text="rankList[0].hours" />
<view style="display: flex; justify-content: center;align-items: center;margin: auto 20rpx; height: 60rpx;">
<text style="font-weight: bold; font-size: 20px; color: rgb(215, 31, 31); text-align: right; display: block;">{{ rankList[0].hours }}</text>
<image src="/static/images/rank/rankRecommend1.png" class="recommend-image"/>
</view>
</view>
......@@ -60,7 +60,7 @@
<!-- 第三名 -->
<view class="three">
<view class="three-rank">
<text style="color: rgb(229, 132, 36);font-family: fantasy;font-size: 35rpx">TOP 3</text>
<text class="three-text">TOP 3</text>
</view>
<view class="three-avatar">
<u-avatar :src="rankList[2].user.avatarUrl" size="100rpx"/>
......@@ -69,8 +69,8 @@
<text style="font-weight: bold; font-size: 13px; color: #070707;">{{rankList[2].user.nickname}}</text>
</view>
<view class="three-rankValue">
<view style="display: flex; justify-content: center;align-items: center; width: 136rpx;margin: auto 20rpx; height: 60rpx;">
<u--text :bold="true" size="20" color="rgb(229, 132, 36)" align="right" :text="rankList[2].hours" />
<view style="display: flex; justify-content: center;align-items: center;margin: auto 20rpx; height: 60rpx;">
<text style="font-weight: bold; font-size: 20px; color: rgb(229, 132, 36); text-align: right; display: block;">{{ rankList[2].hours }}</text>
<image src="/static/images/rank/rankRecommend3.png" class="recommend-image"/>
</view>
</view>
......@@ -96,7 +96,7 @@
<u--text size="12" align="left" color="rgb(115, 116, 122)" :text="'编号：'+ item.user.code + '号'"/>
</u-col>
<u-col span="4">
<u-line-progress active-color="red" percent="30" type="success"></u-line-progress>
<progress :percent="item.rankValue" activeColor="rgb(130, 147, 240)" stroke-width="10" border-radius="20rpx"/>
</u-col>
<u-col span="2">
<view style="display: flex; justify-content: flex-start;margin-left: 15rpx">
......@@ -113,17 +113,10 @@
</template>
<script>
import ELM from '@/components/elm-toast/index.vue';
import empty from '@/components/empty.vue'
import {
WS
} from '@/util/wsConfig.js'
import UText from "../../uni_modules/uview-ui/components/u--text/u--text";
export default {
components: {
UText,
empty,
ELM
},
data() {
return {
......@@ -150,43 +143,53 @@ export default {
rankList: [
{
hours:10,
user: { nickname: '测试用户1', avatarUrl: '',code:'1'}
user: { nickname: '测试用户1', avatarUrl: '',code:'1'},
rankValue:80,
},
{
hours:11,
user: { nickname: '测试用户2', avatarUrl: '',code:'2'}
user: { nickname: '测试用户2', avatarUrl: '',code:'2'},
rankValue:70,
},
{
hours:12,
user: { nickname: '测试用户3', avatarUrl: '',code:'3'}
user: { nickname: '测试用户3', avatarUrl: '',code:'3'},
rankValue:60,
},
{
hours:13,
user: { nickname: '测试用户4', avatarUrl: '',code:'4'}
user: { nickname: '测试用户4', avatarUrl: '',code:'4'},
rankValue:80,
},
{
hours:14,
user: { nickname: '测试用户5', avatarUrl: '',code:'5'}
user: { nickname: '测试用户5', avatarUrl: '',code:'5'},
rankValue:70,
},
{
hours:15,
user: { nickname: '测试用户6', avatarUrl: '',code:'6'}
user: { nickname: '测试用户6', avatarUrl: '',code:'6'},
rankValue:60,
},
{
hours:15,
user: { nickname: '测试用户7', avatarUrl: '',code:'6'}
user: { nickname: '测试用户7', avatarUrl: '',code:'6'},
rankValue:70,
},
{
hours:15,
user: { nickname: '测试用户8', avatarUrl: '',code:'6'}
user: { nickname: '测试用户8', avatarUrl: '',code:'6'},
rankValue:70,
},
{
hours:15,
user: { nickname: '测试用户9', avatarUrl: '',code:'6'}
user: { nickname: '测试用户9', avatarUrl: '',code:'6'},
rankValue:70,
},
{
hours:15,
user: { nickname: '测试用户10', avatarUrl: '',code:'6'}
user: { nickname: '测试用户10', avatarUrl: '',code:'6'},
rankValue:70,
},
],
}
......@@ -219,7 +222,12 @@ export default {
}
}
.top{
background-image: linear-gradient(to right, rgb(183, 195, 255) 0%, rgb(189, 231, 255) 100%);
background-image: linear-gradient(
to right,
#BFC5FF 0%,
#BDE9FF 50%, /* 新增的中间颜色 */
#B7C0FF 100%
);
position: relative;
height:600rpx;
.top1{
......@@ -227,7 +235,9 @@ export default {
padding-top: 50rpx;
width: 400rpx;
height: 40rpx;
border-radius: 20rpx;
::v-deep .u-subsection{
border-radius: 30rpx;
}
}
.top2 {
display: flex;
......@@ -241,46 +251,48 @@ export default {
bottom: 0rpx;
left: 0rpx;
border-radius: 20rpx 20rpx 20rpx 20rpx;
background-color: white;
background-image: linear-gradient(
to bottom,
rgba(255,255,255, 0.35) 0%,
rgba(255,255,255, 0.65) 100%
);
width: 220rpx;
height: 340rpx;
z-index: 1;
clip-path: polygon(51% 0, 100% 0, 100% 86%, 51% 100%, 51% 100%, 0 86%, 0 0);
.two-rank{
padding: 0;
margin-left: 80rpx;
display: flex;
justify-content: center;
margin-bottom: 10rpx;
margin-top: 10rpx;
.two-text1{
color: rgb(231, 97, 97);
font-family: fantasy;
font-size: 35rpx;
padding-left: 8rpx;
}
}
.two-avatar{
border: 4rpx solid #dedfdf;
width: 100rpx;
height: 100rpx;
border-radius: 100%;
margin-left: 60rpx;
display: flex;
justify-content: center;
}
.two-name{
position: relative;
width: 100%;
background-color: #ffffff;
text-align: center;
margin-top: 10rpx;
.two-text2{
font-weight: bold;
font-size: 13px;
color: #070707;
padding-left: 8rpx;
}
}
.two-rankValue{
display: flex;
justify-content: center;
margin-top: 10rpx;
background-color: #efefef;
border-radius: 40rpx;
}
.recommend-image{
......@@ -294,28 +306,35 @@ export default {
bottom: 20rpx;
left: 236rpx;
border-radius: 20rpx 20rpx 20rpx 20rpx;
background-color: #ffffff;
background-image: linear-gradient(
to bottom,
rgba(255,255,255, 0.35) 0%,
rgba(255,255,255, 0.65) 100%
);
width: 220rpx;
height: 350rpx;
z-index: 2;
clip-path: polygon(51% 0, 100% 0, 100% 86%, 51% 100%, 51% 100%, 0 86%, 0 0);
.one-rank{
padding: 0;
margin-left: 80rpx;
display: flex;
justify-content: center;
margin-bottom: 10rpx;
margin-top: 10rpx
margin-top: 10rpx;
.one-text{
color: rgb(215, 31, 31);
font-family: fantasy;
font-size: 35rpx;
padding-left: 8rpx;
}
}
.one-avatar{
border: 4rpx solid #dedfdf;
width: 100rpx;
height: 100rpx;
border-radius: 100%;
margin-left: 60rpx;
display: flex;
justify-content: center;
}
.one-name{
position: relative;
width: 100%;
background-color: #ffffff;
text-align: center;
margin-top: 10rpx
}
......@@ -323,7 +342,6 @@ export default {
display: flex;
justify-content: center;
margin-top: 10rpx;
background-color: #efefef;
border-radius: 40rpx;
}
.recommend-image{
......@@ -337,25 +355,42 @@ export default {
bottom: 0rpx;
left: 470rpx;
border-radius: 20rpx 20rpx 20rpx 20rpx;
background-color: #ffffff;
background-image: linear-gradient(
to bottom,
rgba(255,255,255, 0.35) 0%,
rgba(255,255,255, 0.65) 100%
);
width: 220rpx;
height: 340rpx;
z-index: 1;
clip-path: polygon(51% 0, 100% 0, 100% 86%, 51% 100%, 51% 100%, 0 86%, 0 0);
.three-rank{
padding: 0;margin-left: 80rpx;margin-bottom: 10rpx;margin-top: 10rpx
display: flex;
justify-content: center;
margin-bottom: 10rpx;
margin-top: 10rpx;
.three-text{
color: rgb(229, 132, 36);
font-family: fantasy;
font-size: 35rpx;
padding-left: 8rpx;
}
}
.three-avatar{
border: 4rpx solid #dedfdf; width: 100rpx; height: 100rpx;border-radius: 100%;margin-left: 60rpx;
height: 100rpx;
display: flex;
justify-content: center;
}
.three-name{
position: relative;width: 100%;background-color: #ffffff;text-align: center;margin-top: 10rpx;
position: relative;
width: 100%;
text-align: center;
margin-top: 10rpx;
}
.three-rankValue{
display: flex;
justify-content: center;
margin-top: 10rpx;
background-color: #efefef;
border-radius: 40rpx;
}
.recommend-image{
......
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