根据这个链接http://jmy-pic.baidu.com/0/pic/224838675_-983651663.png 使用vue把他画出来
时间: 2023-12-13 17:05:09 浏览: 41
这里是使用Vue将该图画出来的代码:
```
<template>
<div class="container">
<div class="item" v-for="(item, index) in items" :key="index">
<div class="icon-container">
<img :src="item.icon" class="icon">
</div>
<div class="text-container">
<div class="title">{{ item.title }}</div>
<div class="description">{{ item.description }}</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{
icon: 'https://img.icons8.com/color/48/000000/book.png',
title: '阅读',
description: '不断学习,持续进步'
},
{
icon: 'https://img.icons8.com/color/48/000000/meditation.png',
title: '冥想',
description: '平静内心,保持专注'
},
{
icon: 'https://img.icons8.com/color/48/000000/exercise.png',
title: '运动',
description: '强身健体,保持活力'
},
{
icon: 'https://img.icons8.com/color/48/000000/vegetarian-food.png',
title: '饮食',
description: '健康饮食,注重营养'
}
]
};
}
};
</script>
<style>
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.item {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 20px;
}
.icon-container {
width: 80px;
height: 80px;
background-color: #f5f5f5;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.icon {
width: 50px;
height: 50px;
}
.title {
font-size: 18px;
font-weight: bold;
margin-top: 15px;
}
.description {
font-size: 14px;
color: #999999;
margin-top: 5px;
text-align: center;
}
</style>
```
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)