整合模块

整合"我的"页面

导入模块

导入页面代码

<template>
	<view>
		<view class="my-header">
			<view class="my-header__background">
				<image src="../../../static/VCG211275464206.webp" mode=""></image>
			</view>
			<view class="my-header__logo">
				<view class="my-header__logo-box">
					<fullnameavatar :username="name" :background-color="extractColorByName(name)"  color="#fff"   :inline="true" />
				</view>
				<text class="my-header__name">{{name}}</text>
			</view>
			<view class="my-header__info">
				<view class="my-header__info-box">
					<text class="my-header__info-title">历史</text>
					<text>666</text>
				</view>
				<view class="my-header__info-box">
					<text class="my-header__info-title">喜欢</text>
					<text>666</text>
				</view>
				<view class="my-header__info-box">
					<text class="my-header__info-title">收藏</text>
					<text>666</text>
				</view>
			</view>
		</view>
		<view class="my-content">
			<view class="my-content__list">
				<view class="my-content__list-title">
					<uni-icons class="icons" type="contact" size="16" color="#666"></uni-icons>
					<text>编辑资料</text>
				</view>
				<uni-icons type="arrowright" size="18" color="#666"></uni-icons>
			</view>
			<view class="my-content__list">
				<view class="my-content__list-title">
					<uni-icons class="icons" type="chatboxes" size="16" color="#666"></uni-icons>
					<text>好友中心</text>
				</view>
				<uni-icons type="arrowright" size="18" color="#666"></uni-icons>
			</view>
			<view class="my-content__list">
				<view class="my-content__list-title">
					<uni-icons class="icons" type="map" size="16" color="#666"></uni-icons>
					<text>每日一题</text>
				</view>
				<uni-icons type="arrowright" size="18" color="#666"></uni-icons>
			</view>
			<view class="my-content__list">
				<view class="my-content__list-title">
					<uni-icons class="icons" type="download" size="16" color="#666"></uni-icons>
					<text>我的下载</text>
				</view>
				<uni-icons type="arrowright" size="18" color="#666"></uni-icons>
			</view>
			<view class="my-content__list">
				<view class="my-content__list-title">
					<uni-icons class="icons" type="help" size="16" color="#666"></uni-icons>
					<text>意见反馈</text>
				</view>
				<uni-icons type="arrowright" size="18" color="#666"></uni-icons>
			</view>
			<view class="my-content__list">
				<view class="my-content__list-title">
					<uni-icons class="icons" type="gear" size="16" color="#666"></uni-icons>
					<text>设置</text>
				</view>
				<uni-icons type="arrowright" size="18" color="#666"></uni-icons>
			</view>
		</view>
	</view>
</template>

<script>
	import fullnameavatar from "../../../components/fullname-avatar/fullname-avatar.vue"
	export default {
	    components: {fullnameavatar},
	    data() {
	        return {
	            name:'fuzhiqi'
	        }
	    },
	    methods: {
	        extractColorByName(name,bgcolor) {
	            var colors = [
	                "#31bc9f", "#33cc70", "#4a94db", "#9b5fb6", "#34495e", "#16a085", "#27ae60", "#2980b9", "#8e44ad", "#2c3e50",
	                "#f1cb1e", "#e6761b", "#e7363b", "#00bcd4", "#95a5a6", "#f39c12", "#d35400", "#c0392b", "#bdc3c7", "#7f8c8d"
	            ];
	            var avatarColor = bgcolor==null?colors[Math.floor((Math.random()*colors.length))]:bgcolor==""?bgcolor:colors[Math.floor((Math.random()*colors.length))];
	            return avatarColor;
	        }
	    }
	}
</script>

<style lang="scss">
	page{
		background-color: #f5f5f5;
	}
	.my-header{
		position: relative;
		padding-bottom: 15px;
		.my-header__background{
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			filter: blur(8px);
			opacity: 0.2;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.my-header__logo{
			display: flex;
			flex-direction: column;
			align-items: center;
			padding-top: 30px;
			.my-header__logo-box{
				margin-left: 12px;
				width:60px;
				height: 60px;
				overflow: hidden;
			}
			.my-header__name{
				margin-top: 15px;
				font-size: 16px;
				font-weight: bold;
			}
		}
		.my-header__info{
			margin-top: 15px;
			display: flex;
			.my-header__info-box{
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				width: 100%;
				font-size: 12px;
				color: #999;
				.my-header__info-title{
					font-size: 14px;
					font-weight: bold;
					color: #333;
				}
			}
		}
	}
	.my-content{
		.my-content__list{
			display: flex;
			justify-content: space-between;
			padding: 15px;
			margin-bottom: 10px;
			background-color: #FFFFFF;
			color: #333;
			font-size: 14px;
			.my-content__list-title{
				display: flex;
				align-items: center;
				.icons{
					margin-right: 5px;
				}
			}
		}
	}
</style>

总结

在整合过程中，要注意一些静态资源的引入，并且注意目录结构的书写。