通过微信开发者工具 商城模板 创建新小程序

mini-program/pages/usercenter/components/user-center-card/index.wxss

@@ -0,0 +1,48 @@
+.user-center-card {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 480rpx;
+  background-image: url('https://cdn-we-retail.ym.tencent.com/miniapp/template/user-center-bg-v1.png');
+  background-size: cover;
+  background-repeat: no-repeat;
+  padding: 0 24rpx;
+}
+.user-center-card__header {
+  margin-top: 192rpx;
+  margin-bottom: 48rpx;
+  height: 96rpx;
+  line-height: 48rpx;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  color: #333;
+  position: relative;
+}
+.user-center-card__header__avatar {
+  width: 96rpx;
+  height: 96rpx;
+  border-radius: 48rpx;
+  overflow: hidden;
+}
+
+.user-center-card__header__name {
+  font-size: 36rpx;
+  line-height: 48rpx;
+  color: #333;
+  font-weight: bold;
+  margin-left: 24rpx;
+  margin-right: 16rpx;
+}
+.user-center-card__header__transparent {
+  position: absolute;
+  left: 0;
+  top: 0;
+  background-color: transparent;
+  height: 100%;
+  width: 100%;
+}
+.user-center-card__icon {
+  line-height: 96rpx;
+}