标签：__ flex 辅助 第十天 软件开发 header colors font my

整合模块

整合"我的"页面

导入模块

导入页面代码

<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>

总结

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

标签：__,flex,辅助,第十天,软件开发,header,colors,font,my
来源： https://www.cnblogs.com/open52000/p/16200788.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。