<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>左图有文字的一些样式</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
padding: 0 15px;
height: 70px;
background: #ccc;
display: flex;
position: relative;
}
.box .flx {
position: absolute;
right: 15px;
height: 70px;
line-height: 70px;
}
.box .img {
width: 50px;
height: 50px;
margin: 10px 10px 10px 0;
}
.box .right {
flex: 1;
flex-direction: column;
display: flex;
justify-content: center;
}
.box .p {
height: 100%;
line-height: 35px;
}
.box .p2 {
font-size: 14px;
}
/* end------------------------------------- */
.box2 {
padding: 0 15px;
height: 70px;
background: #ccc;
display: flex;
margin-top: 20px;
}
.box2 .img {
width: 50px;
height: 50px;
margin: 10px 10px 10px 0;
}
.box2 .right {
flex: 1;
flex-direction: column;
display: flex;
justify-content: center;
}
.box2 .p {
height: 100%;
line-height: 35px;
}
.box2 .p2 {
font-size: 14px;
}
.box2 .bottom {
font-size: 13px;
}
.box2 .bottom .time{
float: right;
}
/* end------------------------------------- */
.box3 {
padding: 0 15px;
height: 70px;
background: #ccc;
display: flex;
margin-top: 20px;
font-size: 15px;
}
.box3 .img {
width: 50px;
height: 50px;
margin: 10px 10px 10px 0;
}
.box3 .right {
flex: 1;
flex-direction: column;
display: flex;
justify-content: center;
}
.box3 .p2 {
font-size: 14px;
}
.box3 .bottom {
font-size: 13px;
color: #333333;
}
.box3 .bottom .time{
float: right;
}
.box3 .bottom .price{
color: red;
}
/* end------------------------------------- */
.box4 {
padding: 0 15px;
height: 70px;
background: #ccc;
display: flex;
margin-top: 20px;
font-size: 15px;
}
.box4 .img {
width: 50px;
height: 50px;
margin: 10px 10px 10px 0;
}
.box4 .right {
flex: 1;
flex-direction: column;
display: flex;
justify-content: center;
}
.box4 .p2 {
font-size: 14px;
}
.box4 .bottom {
font-size: 13px;
color: #333333;
}
.box4 .bottom .time{
float: right;
}
.box4 .bottom .price{
color: red;
}
</style>
</head>
<body>
<div class="box">
<div class="flx">></div>
<img class="img" src="https://avatars1.githubusercontent.com/u/19720683?s=460&v=4" alt="tu" />
<div class="right">
<p class="p">古北-畅游记</p>
<p class="p p2">这是第二段段文字标题</p>
</div>
</div>
<div class="box2">
<img class="img" src="https://avatars1.githubusercontent.com/u/19720683?s=460&v=4" alt="tu" />
<div class="right">
<p class="p">古北-畅游记</p>
<div class="p bottom">
<span class="name">古北水镇</span>
<span class="time">2019-02-23</span>
</div>
</div>
</div>
<div class="box3">
<img class="img" src="https://avatars1.githubusercontent.com/u/19720683?s=460&v=4" alt="tu" />
<div class="right">
<p class="p">古北-畅游记</p>
<div class="p bottom">
<span>名胜古迹</span>
<span>4A景区</span>
<span class="price">￥20</span>
</div>
<div class="p bottom">
<span class="name">古北水镇</span>
<span class="time">2019-02-23</span>
</div>
</div>
</div>
<div class="box4">
<img class="img" src="https://avatars1.githubusercontent.com/u/19720683?s=460&v=4" alt="tu" />
<div class="right">
<p class="p">古北-畅游记<span style="float: right">某些文字</span></p>
<div class="p bottom">
<span>名胜古迹</span>
<span>4A景区</span>
<span class="price">￥20</span>
</div>
<div class="p bottom">
<span class="name">古北水镇</span>
<span class="time">2019-02-23</span>
</div>
</div>
</div>
</body>
</html>
<div class="cell" v-for="(item, index) in typeWork" :key="index">
<div class="cell-left">
<span class="type-name">{{item.name}}</span>
<span class="type-status">{{item.status}}</span>
</div>
<div class="work-age">相关工作年限：暂无</div>
<div class="btn">{{item.btn}}</div>
<image class="right" src="icon_next.png" alt=""/>
</div>
.cell {
position: relative;
border-bottom: 1rpx solid #e9e9e9;
.cell-left {
padding: 30rpx 0 17rpx 0;
.type-name {
font-size: 30rpx;
font-weight: bold;
color: #333333;
font-family: PingFang SC;
margin-right: 16rpx;
}
.type-status {
background: #F8F8F8;
border: 1rpx solid #E9E9E9;
border-radius: 4rpx;
font-size: 24rpx;
font-family: PingFang SC;
font-weight: 400;
color: #999999;
padding: 5rpx 8rpx;
}
.is-status {
opacity: 0.5;
color: $theme-color!important;
border: 1rpx solid $theme-color!important;
}
}
.work-age {
font-size: 24rpx;
font-family: PingFang SC;
font-weight: 400;
color: #999999;
padding-bottom: 30rpx;
}
.btn {
position: absolute;
top: 0;
bottom: 0;
margin: auto;
right: 50rpx;
font-size: 30rpx;
font-family: PingFang SC;
font-weight: 400;
color: #333333;
display: flex;
align-items: center;
line-height: 30rpx;
}
.right {
position: absolute;
top: 0;
bottom: 0;
margin: auto;
right: 0;
width: 12rpx;
height: 22rpx;
}
}
.cell:nth-last-child(1) {
border: none;
}
版权声明：本文为quhongqiang原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。