Commit 6547261b authored by Damon's avatar Damon

Merge branch 'dev-v1.0.0' of git.banshouhui.com:wuzhenzhe/study into dev-v1.0.0

parents b3cf3c85 2ebefd8a
<template> <template>
<view class="u-flex statis"> <view class="statis">
<view class="u-flex top"> <image class="background-image" :src="meiriyilianImage"></image>
<view class="u-flex avatar"> <view class="content-view">
<view <view class="u-flex top">
class="avatar-list" <view class="u-flex avatar">
v-for="(item, index) in info.avatar" <view
:key="index" class="avatar-list"
><image :src="item" mode="scaleToFill" v-for="(item, index) in info.avatar"
/></view> :key="index"
</view> ><image :src="item" mode="scaleToFill"
<view class="notice"> /></view>
<u-notice-bar
mode="horizontal"
type="none"
font-size="24"
:list="info.dynamic"
bg-color="#fff"
color="#2953FF"
:volume-icon="false"
autoplay
padding="0 10rpx"
></u-notice-bar>
</view>
</view>
<view class="u-flex center">
<view class="u-flex topics">
<view class="topics-lists">
今日做题:
<u-count-to
:start-val="0"
:end-val="info.today"
:font-size="32"
color="#191C27"
></u-count-to>
</view> </view>
<view class="topics-lists"> <view class="notice">
累计做题: <u-notice-bar
<u-count-to mode="horizontal"
:start-val="0" type="none"
:end-val="info.total" font-size="26"
:font-size="32" :list="info.dynamic"
color="#191C27" color="#FFFFFF"
></u-count-to> :volume-icon="false"
autoplay
padding="0 10rpx"
></u-notice-bar>
</view> </view>
</view> </view>
<view class="u-flex days"> <view class="u-flex center">
<view class="days-lists"> <view v-for="(value, key) in detailLabels" :key="key" class="item-view">
<u-count-to <view v-if="key == 'total'" class="line-view"></view>
:start-val="0" <view class="left-view">
:end-val="info.days" <view class="count-view">{{ info[key] }}</view>
:font-size="60" <view>{{ value }}</view>
color="#191C27" </view>
></u-count-to> <view v-if="key == 'total'" class="line-view"></view>
<text class="unit">Days</text>
</view> </view>
<view class="days-lists">累计坚持</view>
</view> </view>
</view> <view class="bottom">
<view class="bottom"> <view
<u-button class="bottom-button"
:custom-style="btnStyle" type="primary"
type="primary" shape="circle"
shape="circle" @click="$u.throttle(answer, 500)"
@click="answer" ><image class="button-image" :src="lianxianniuImage"></image
>去练习</u-button >每日一练</view
> >
</view>
</view> </view>
</view> </view>
</template> </template>
...@@ -94,25 +73,23 @@ export default { ...@@ -94,25 +73,23 @@ export default {
} }
}, },
computed: { computed: {
btnStyle() { detailLabels() {
return this.buttonDisabled return {
? { today: '今日做题',
width: '320rpx', total: '累计做题',
height: '104rpx', days: '累计天数',
fontSize: '32rpx', }
fontWeight: 'bold',
backgroundColor: '#D2D5DE',
}
: {
width: '320rpx',
height: '104rpx',
fontSize: '32rpx',
fontWeight: 'bold',
backgroundColor: '#2953FF',
}
}, },
buttonDisabled() { avatars() {
return this.$u.test.isEmpty(this.info.selected) return this.info.avatar.length > 4
? this.info.avatar.slice(0, 4)
: this.info.avatar
},
meiriyilianImage() {
return process.uniEnv.qn_base_url + 'meiriyilianquyu.png'
},
lianxianniuImage() {
return process.uniEnv.qn_base_url + 'lianxianniu.png'
}, },
}, },
created() {}, created() {},
...@@ -126,65 +103,104 @@ export default { ...@@ -126,65 +103,104 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.statis { .statis {
flex-flow: column; // flex-flow: column;
background: #fff; // background: #fff;
padding: 30rpx 30rpx 40rpx 30rpx; // padding: 30rpx 30rpx 40rpx 30rpx;
border-radius: 24rpx; border-radius: 24rpx;
.top { overflow: hidden;
width: 100%; position: relative;
margin-left: 6rpx; box-shadow: 0px 10px 16px rgba(29, 53, 155, 0.2);
.avatar { margin-bottom: 56rpx;
padding-right: 16rpx; z-index: 0;
.avatar-list { height: 472rpx;
width: 40rpx; .background-image {
height: 40rpx; position: absolute;
margin-left: -6rpx; z-index: -1;
image { height: 472rpx;
width: 50rpx; width: 702rpx;
height: 50rpx; }
border: 2rpx solid #ccc; .content-view {
background: #fff; padding: 40rpx 30rpx;
border-radius: 50%;
margin-right: 1px; .top {
width: 100%;
margin-left: 15rpx;
display: flex;
align-items: center;
.avatar {
.avatar-list {
margin-left: -15rpx;
display: flex;
justify-content: flex-start;
align-items: center;
image {
width: 44rpx;
height: 44rpx;
border: 2rpx solid #ccc;
background: #fff;
border-radius: 50%;
margin-right: 1px;
}
} }
} }
.notice {
flex: 1;
width: 100%;
}
} }
.notice { .center {
flex: 1;
width: 100%; width: 100%;
} justify-content: space-around;
} padding-top: 56rpx;
.center { padding-bottom: 66rpx;
width: 100%; .item-view {
justify-content: space-around; display: flex;
padding-top: 20rpx; align-items: center;
.days { justify-content: center;
flex-flow: column; .left-view {
flex: 1; text-align: center;
.days-lists { color: #ffffff;
color: #9ea5bb; font-size: 26rpx;
padding: 5rpx 0rpx; width: 240rpx;
.unit {
color: #5a6073; .count-view {
font-size: 36rpx; font-weight: bold;
font-weight: bold; font-size: 48rpx;
padding-left: 10rpx; margin-bottom: 6rpx;
}
}
.line-view {
width: 2rpx;
background-color: #ffffff;
height: 70rpx;
} }
} }
} }
.topics { .bottom {
flex-flow: column; display: flex;
flex: 1; justify-content: center;
border-right: 2rpx solid #e8ebf3; align-items: center;
.topics-lists { .bottom-button {
width: 100%; display: flex;
padding: 10rpx 0rpx; justify-content: center;
color: #9ea5bb; align-items: center;
position: relative;
overflow: hidden;
z-index: 0;
border-radius: 52rpx;
font-size: 32rpx;
font-weight: bold;
color: #2953ff;
height: 104rpx;
width: 400rpx;
.button-image {
width: 400rpx;
height: 104rpx;
position: absolute;
z-index: -1;
}
} }
} }
} }
.bottom {
margin-top: 54rpx;
}
} }
</style> </style>
This diff is collapsed.
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