文章目录
- 一、圆形序号
- 1.实现效果：
- 2.使用方法
- 二、应用案例
- 1.案例效果展示
- 2.案例代码
一、圆形序号
1.实现效果：
2.使用方法
我使用的是<div>标签加圆角边框的办法，圆角边框的值： border-radius: 50%;
详细代码:
<style lang="scss" scoped>
.title1 {height: 22px; //高width: 22px; //宽background-color: #1074BD; //背景颜色display: inline-block; //显示方式：行内块标签border-radius: 50%; //圆角边框的弧度line-height: 22px; //数字的行高text-align: center; //调整位置，使数字居中margin-right: 15px; //调整外边距，使位置更美观
}
</style>
二、应用案例
1.案例效果展示
2.案例代码
代码如下（示例）：
<template>
<vue3ScrollSeamless class="scroll-wrap wrapSpec" :classOptions="classOptions" :dataList="state.yhzlListData"><ul class="ui-wrap"><li style="height: 72px;width: 100%;color: white;" v-for="(item, i) of state.yhzlListData" :key="i" :title="item.dangerDesc"><div style=" width: 100%;display: flex;"><div class="title1">{{ i+1 }}</div><div class="title2">{{ item.startTime}}</div></div><div style="margin-left:30px">小区租客通过电话向网格员反映楼层噪音问题，表示近一个月来有人一直半夜弹钢琴，产生的噪音...</div></li></ul>
</vue3ScrollSeamless>
</template><style lang="scss" scoped>
.title1 {height: 22px; //高width: 22px; //宽background-color: #1074BD; //背景颜色display: inline-block; //显示方式：行内块标签border-radius: 50%; //圆角边框的弧度line-height: 22px; //数字的行高text-align: center; //调整位置，使数字居中margin-right: 15px; //调整外边距，使位置更美观}</style>
