110 lines
1.9 KiB
Vue
110 lines
1.9 KiB
Vue
<template>
|
|
<div class="lessonitem">
|
|
<div class="fengmian">
|
|
<div class="content">
|
|
<h1>工程造价</h1>
|
|
<h2>电路工程技术</h2>
|
|
</div>
|
|
<div class="jiaobiao">
|
|
<div class="ad">
|
|
<img src="../static/img/jiaobiao.png" class="freeicon">
|
|
<p class="free">免费</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p class="lessonname">工程造价电路工程技术</p>
|
|
<div class="auth">
|
|
<div class="left">
|
|
<img src="../static/img/tx.png" class="touxiang">
|
|
<span>张三</span>
|
|
</div>
|
|
<div class="date">2019-07-15 09:00</div>
|
|
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "lessonitem"
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.lessonitem{
|
|
width:405px;
|
|
height:297px;
|
|
background: white;
|
|
border-radius: 8px;
|
|
|
|
.fengmian{
|
|
width: 100%;
|
|
height: 182px;
|
|
position: relative;
|
|
background: linear-gradient(-32deg, #F65934, #FF7F46);
|
|
margin-bottom: 5px;
|
|
.content{
|
|
padding-top: 43px;
|
|
padding-left: 41px;
|
|
color: white;
|
|
h1{
|
|
font-size: 38px;
|
|
}
|
|
h2{
|
|
font-size: 21px;
|
|
margin-top:9px;
|
|
}
|
|
}
|
|
.jiaobiao{
|
|
position: absolute;
|
|
top:0;
|
|
right:20px;
|
|
//color:white;
|
|
font-size: 15px;
|
|
.ad{
|
|
position: relative;
|
|
}
|
|
.freeicon{
|
|
width:76px;
|
|
//height: 49px;
|
|
}
|
|
.free{
|
|
position: absolute;
|
|
top:3px;
|
|
left:5px;
|
|
color:white;
|
|
}
|
|
}
|
|
}
|
|
|
|
.lessonname{
|
|
font-size:20px;
|
|
color: #333333;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
}
|
|
|
|
.auth{
|
|
width:400px;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-size: 20px;
|
|
.left{
|
|
line-height:80px;
|
|
}
|
|
.touxiang{
|
|
width:38px;
|
|
height:38px;
|
|
margin-right:20px;
|
|
}
|
|
.date{
|
|
font-size: 20px;
|
|
color: #666666;
|
|
|
|
}
|
|
}
|
|
}
|
|
</style>
|