左边图标，右边多行文字

小橘子皮__兜兜

已于 2024-01-23 11:01:57 修改

阅读量248

点赞数

文章标签： javascript html 前端

于 2023-04-13 11:50:07 首次发布

本文链接：https://blog.csdn.net/weixin_43657954/article/details/130127121

版权

效果：

代码：

   <div v-for="item in answerList" :key="item.id">
          <div class="answerBox">
            <div class="title">{{ item.hotspotIssues }}</div>
            <img :src="leftImgUrl[0]" class="imgAns" />
            <div class="textAns" v-html="item.hotAnswers"></div>
          </div>
        </div>
、、、

data(){
    return {
        answerList:[],
    }    
}
、、、
    async getHotspots() {
      const res = await getHotspots({});
      this.answerList = res.data.data;
      this.answerList = this.answerList.map((item) => {
        return {
          hotAnswers: item.hotAnswers.replace(/；/g, "<br/>"),
          hotspotIssues: item.hotspotIssues,
          id: item.id,
        };
      });
    },
、、、

.answerBox {
  margin: 20px 100px;
  border-bottom: 1px solid #f6f7f9;
  position: relative;
  .title {
    font-size: 14px;
    font-weight: 700;
  }
  .imgAns {
    position: absolute;
    top: 30px;
  }
  .textAns {
    color: #bcbcbc;
    margin-left: 30px;
    margin-top: 10px;
  }
}