Skip to content

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

修改了排行榜页面样式

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