console
new Vue({
el: '#app',
data: {
msg: [],
score : '',
integral: '',
ab: [0, 1, 100, 230, 370, 500, 800, 1100, 1500, 2000, 2500, 3100, 3800, 4500, 5300, 6200, 7300],
bc: ['普通', '童生Lv.1', '童生Lv.2', '童生Lv.3', '秀才Lv.1','秀才Lv.2','秀才Lv.3', '举人Lv.1', '举人Lv.2', '举人Lv.3', '探花Lv.3', '探花Lv.3', '探花Lv.3', '榜眼Lv.3', '榜眼Lv.3', '榜眼Lv.3', '状元']
},
created () {
axios.get('http://www.jiazhangmooc.com/WisdomMOOC/rest/member/getMemberInfo.do?memberId=41784&key=web&beMemberId=807869').then(response => {
this.msg = response.data.data,
this.integral = response.data.data.integral
}).catch(err => {
console.log(err)
})
}
})
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/axios/0.16.2/axios.js"></script>
<div id="app" v-cloak>
<div class="navs">
<div class="nav-top">
<a class="icon icon-left back"></a>
<i class="av-label"><i class="icon-gload"></i>
<i v-for="(item, index) in ab">
<span v-if="integral<ab[index]&&integral>ab[index-1]">{{bc[index]}}</span>
</i>
<span v-if="integral>7300">状元</span>
</i>
</div>
<div class="pers-avg">
<img :src="msg.image" />
<i class="icon-woman" v-if="msg.gender===0"></i>
<i class="icon-man" v-if="msg.gender===1"></i>
</div>
<div class="per-name">
王八蛋
</div>
<div class="per-fs">
<span class="f1"> <a href=""> 关注 {{msg.attentionCount}} </a></span> <span class="f1"><a href="">粉丝 {{msg.fansCount}}</a></span>
</div>
<div class="per-sign">
个性签名:{{msg.signature}}
</div>
</div>
<div class="content">
<div class="buttons-tab">
<a href="#tab1" class="tab-link active button">TA的笔记</a>
<a href="#tab2" class="tab-link button">TA的评论</a>
</div>
<div class="">
<div class="tabs">
<div id="tab1" class="tab active">
<div class="content-top">
<ul class="line-av">
<li>
<i class="icon-dian-big"></i> <span class="f16">2010年9月</span>
</li>
<li>
<i class="icon-dian-small"></i> <span class="f12">25日</span>
<div class="live">
<img src="http://mooc-10050339.cos.myqcloud.com/image/201708/1503539861066.png" alt="">
<div class="live-title"> <i class="label-red">直播回看</i>直播 </div>
</div>
</li>
<li>
<i class="icon-dian-small"></i> <span class="f12">25日</span>
<div class="love">
<p class="n1">我爱学习! </p>
<p class="n2">我来自《如何正确培养孩子学习习惯》</p>
</div>
</li>
<li>
<i class="icon-dian-small"></i> <span class="f12">25日</span>
<div class="love">
<p class="n1">我爱学习! </p>
<p class="n2">我来自《如何正确培养孩子学习习惯》</p>
</div>
</li>
<li>
<i class="icon-dian-small"></i> <span class="f12">25日</span>
<div class="love">
<p class="n1">我爱学习! </p>
<p class="n2">我来自《如何正确培养孩子学习习惯》</p>
</div>
</li>
</ul>
</div>
</div>
<div id="tab2" class="tab">
<div class="content-top">
<p>This is tab 2 content</p>
</div>
</div>
</div>
</div>
<footer class="fasr">+关注</footer>
</div>
</div>
.icon-left {
color: #fff;
margin-left: 0.5rem;
margin-top: 0.5rem;
}
.icon-left a {
color: #fff;
}
.navs {
background: #288f93;
height: 9.75rem;
}
.navs .nav-top {
height: 1.3rem;
}
.av-label {
width: 3.3rem;
height: 1.3rem;
line-height: 1.3rem;
background: rgba(255, 255, 255, 0.5);
color: #fff;
text-align: center;
position: absolute;
right: 0;
top: 0.5rem;
font-size: 10px;
border-top-left-radius: 0.7rem;
border-bottom-left-radius: 0.7rem;
}
i {
font-style: normal;
}
.icon-gload {
background: url("../../img/my/wode_jifen_quanyi_icon@2x@2x.png") no-repeat;
width: 0.55rem;
height: 0.75rem;
display: inline-block;
background-size: contain;
vertical-align: -4px;
margin-right: 0.1rem;
}
.pers-avg {
text-align: center;
position: relative;
}
.pers-avg img {
width: 3rem;
height: 3rem;
border-radius: 100%;
}
.icon-man,
.icon-woman {
background: url("../../img/my/kecheng_gerenzhuye_male_icon@2x.png") no-repeat;
width: 0.825rem;
height: 0.825rem;
display: inline-block;
background-size: contain;
position: absolute;
bottom: 0.4rem;
left: 9rem;
}
.icon-woman {
background: url("../../img/my/kecheng_gerenzhuye_female_icon@2x.png") no-repeat;
background-size: contain;
}
.per-name {
font-size: 15px;
color: #fff;
text-align: center;
}
.per-fs {
font-size: 14px;
color: #fff;
text-align: center;
margin-top: 0.2rem;
}
.per-fs a {
color: #fff;
}
.per-sign {
padding: 0 1.175rem;
font-size: 12px;
color: #fff;
margin-top: 0.2rem;
}
.f1 {
border-right: 1px solid #fff;
padding-right: 0.625rem;
padding-left: 0.625rem;
}
.f1:last-child {
border-right: 0;
}
.content {
margin-top: 9.7rem;
background: #f8f8f8;
}
.buttons-tab .button {
font-size: 15px;
}
.content-block {
background: #f8f8f8;
}
.buttons-tab {
position: fixed;
width: 100%;
background: #fff;
z-index: 9999;
}
.icon-dian-big {
background: url("../../img/my/gerenzhuye_dian_big_icon@2x.png") no-repeat;
width: 0.65rem;
height: 0.65rem;
display: inline-block;
background-size: contain;
vertical-align: -4px;
margin-right: 0.1rem;
position: absolute;
left: -6px;
top: 0.1rem;
}
.icon-dian-small {
background: url("../../img/my/gerenzhuye_dian_small_icon@2x.png") no-repeat;
width: 0.325rem;
height: 0.325rem;
display: inline-block;
background-size: contain;
vertical-align: -4px;
margin-right: 0.1rem;
position: absolute;
left: -4px;
top: 0.5rem;
}
.content-top {
margin-top: 40px;
padding-right: 0.3rem;
}
.line-av {
padding-top: 0.575rem;
}
.line-av li {
margin-left: 19px;
position: relative;
padding-left: 0.7rem;
}
.line-av li:before {
content: "";
width: 1px;
height: 100%;
background: #e9e9e9;
position: absolute;
left: 0.01rem;
top: 4px;
}
.line-av .f16 {
font-size: 14px;
color: #2eafb3;
vertical-align: top;
}
.line-av .f12 {
font-size: 12px;
color: #707070;
}
ul {
margin: 0;
padding: 0;
}
.buttons-tab:after {
width: 97%;
background-color: #e9e9e9;
}
.love {
background: #fff;
border-radius: 10px;
padding: 0.525rem 0.475rem;
}
.love p {
margin: 0;
}
.love .n1 {
color: #000;
font-size: 14px;
}
.love .n2 {
color: #a3a3a3;
font-size: 10px;
}
.live {
background: #fff;
border-radius: 10px;
width: 13.625rem;
overflow: hidden;
position: relative;
}
.live img {
width: 13.625rem;
height: 7.25rem;
}
.live .live-title {
font-size: 14px;
height: 2rem;
line-height: 2rem;
padding: 0 0.4rem;
}
@media only screen and (min-width: 325px) {
.icon-man,
.icon-woman {
left: 10rem;
}
}
@media only screen and (min-width: 375px) {
.icon-man,
.icon-woman {
left: 10rem;
}
}
@media only screen and (min-width: 400px) {
.icon-man,
.icon-woman {
left: 10.5rem;
}
}
@media only screen and (min-width: 414px) {
left: 10.4rem;
}
.fasr {
position: fixed;
bottom: 0;
width: 100%;
height: 2.325rem;
line-height: 2.325rem;
font-size: 15px;
color: #2eafb3;
text-align: center;
background: #fff;
border-top: 1px solid #e9e9e9;
}
.label-red {
border: 1px solid #ff8c99;
color: #ff8c99;
font-size: 12px;
padding: 0.175rem;
}