发表于： 2019-10-24 23:14:42
1 937
今天完成的事情：
1.今天写了几个小页面，然后大家开了一个会，沟通了一下所有页面的功能和流程
<template>
<div class="introduce">
<div class="nav">
<div class="navName">
<h5>{{introduce.name}}</h5>
<span>{{introduce.student}}学习</span>
<span>好评{{introduce.good}}</span>
</div>
<div class="navPrice">
<span>￥{{introduce.price}}</span>
<span class="oldPrice">￥{{introduce.oldPrice}}</span>
</div>
</div>
<div class="teacher">
<img :src="introduce.teacherImg" alt />
<p>{{introduce.teacherName}}</p>
<p>{{introduce.teacherPost}}</p>
</div>
<div class="intro">
<p :class="{'teacherIntro':word==true}" @click="word=!word">{{introduce.teacherIntro}}</p>
</div>
</div>
</template>
<script>
export default {
name: "introduce",
data() {
return {
word:true,
introduce: {
name: "《函数模型及其应用》",
student: 1234,
good: "98%",
price: 58,
oldPrice: 70,
teacherImg: "",
teacherName: "文桦",
teacherPost: "高级数学讲师",
teacherIntro:
"北京科技大学直博在读，大三学年加权99.62,曾获全国大学生计算机博弈大赛一等奖、全国大学生物联网创新创业大赛北京赛区一等奖等，累计共获10余次国家级、市级竞赛奖项,在培训机构担任数学讲师的教职和高中课程负责人的管理教职"
}
};
}
};
</script>
<style lang="scss" scope>
.introduce {
font-size: 12px;
.nav {
display: flex;
justify-content: space-between;
padding: 0 20px;
.navName {
h5 {
font-size: 14px;
margin: 10px 0;
}
span {
padding: 0 10px;
}
}
.navPrice {
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
padding: 10px;
.oldPrice {
text-decoration: line-through;
color: #7f7f7f;
}
}
}
.teacher {
display: flex;
align-items: center;
img {
width: 25px;
height: 25px;
border: 1px solid #000;
border-radius: 50%;
margin-left: 25px;
}
p {
padding: 0 10px;
}
}
.intro {
.teacherIntro {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
</style>
返回列表
评论