uniapp 我的团队页面
时间: 2023-11-29 14:45:35 浏览: 48
为了开发出美观的小程序页面,使用uniapp框架是一个不错的选择。以下是一些建议来开发团队页面:
1. 使用rpx作为单位,这样可以保证在不同设备上显示的效果基本一致。
2. 使用iconfont图标库,这是一个官方矢量图标库,提供了一系列高品质的、可定制的矢量图标资源,可以以非常简单易用的方式嵌入到网站或应用程序中,并且支持SVG、PNG、PDF等文件格式的下载方式。
3. 代码复用,可以将一些通用的组件或页面进行封装,以便在不同的页面中进行复用,这样可以减少代码量,提高开发效率。
以下是一个简单的团队页面的示例代码:
```html
<template>
<view class="team-page">
<view class="team-info">
<image class="team-avatar" :src="team.avatar"></image>
<view class="team-name">{{ team.name }}</view>
<view class="team-description">{{ team.description }}</view>
</view>
<view class="team-members">
<view class="member" v-for="(member, index) in team.members" :key="index">
<image class="member-avatar" :src="member.avatar"></image>
<view class="member-name">{{ member.name }}</view>
<view class="member-role">{{ member.role }}</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
team: {
name: 'Uniapp团队',
avatar: 'https://xxx.com/team-avatar.png',
description: '我们是一支专业的uniapp开发团队,致力于为用户提供最好的小程序开发服务。',
members: [
{
name: '张三',
avatar: 'https://xxx.com/member-avatar-1.png',
role: '前端工程师'
},
{
name: '李四',
avatar: 'https://xxx.com/member-avatar-2.png',
role: '后端工程师'
},
{
name: '王五',
avatar: 'https://xxx.com/member-avatar-3.png',
role: 'UI设计师'
}
]
}
}
}
}
</script>
<style>
.team-page {
padding: 20rpx;
}
.team-info {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 20rpx;
}
.team-avatar {
width: 200rpx;
height: 200rpx;
border-radius: 50%;
margin-bottom: 20rpx;
}
.team-name {
font-size: 36rpx;
font-weight: bold;
margin-bottom: 10rpx;
}
.team-description {
font-size: 28rpx;
color: #666;
text-align: center;
}
.team-members {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.member {
width: 300rpx;
margin-bottom: 20rpx;
display: flex;
flex-direction: column;
align-items: center;
}
.member-avatar {
width: 120rpx;
height: 120rpx;
border-radius: 50%;
margin-bottom: 10rpx;
}
.member-name {
font-size: 28rpx;
font-weight: bold;
margin-bottom: 10rpx;
}
.member-role {
font-size: 24rpx;
color: #666;
}
</style>
```
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)