<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>
在整合过程中,要注意一些静态资源的引入,并且注意目录结构的书写。