ytj

src/module/user/mainPage/page.scss

@@ -34,6 +34,7 @@
         text-align: center;
         line-height: .2rem;
         font-size: .1rem;
+        color: #000;
       }
     }
     a.active{

src/module/user/mainPage/userCenter/index.vue

@@ -1,6 +1,17 @@
 <template>
   <div class="mainPage">
-    用户中心
+    <div class="userTop_view">
+      <div class="gradient_bg"></div>
+      <div class="zIndex_bg"></div>
+      <div class="userAvatar_Border">
+        <div class="userAvatar">
+          <img src="" alt="" width="100%" height="100%">
+        </div>
+      </div>
+      <div>
+        <div class="user-name">Rejo Varghese</div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -10,20 +21,20 @@ export default {
   name: '',
   data () {
     return {
-      
+
     }
   },
   computed: {
-    
+
   },
   components: {
-    
+
   },
   created () {
-    
+
   },
   methods: {
-    
+
   }
 }
 </script>

src/module/user/mainPage/userCenter/page.scss

@@ -0,0 +1,51 @@
+.userTop_view {
+  position: relative;
+  height: 1.7rem;
+  .gradient_bg {
+    position: absolute;
+    width: 100%;
+    height: 1.7rem;
+    background-image: linear-gradient(24deg, #fa508c 0%, #ffc86e 100%);
+    z-index: 2;
+  }
+  .zIndex_bg {
+    position: absolute;
+    bottom: -1.5rem;
+    left: 0;
+    width: 120%;
+    height: 1.5rem;
+    transform: rotate(351.5deg);
+    transform-origin: bottom left;
+    z-index: 3;
+    background-color: #fff;
+  }
+  .userAvatar_Border {
+    position: absolute;
+    bottom: -0.25rem;
+    left: 50%;
+    border: 0.1rem solid rgba(255, 255, 255, 0.2);
+    transform: translateX(-50%);
+    width: 1rem;
+    height: 1rem;
+    z-index: 3;
+    border-radius: 50%;
+  }
+  .userAvatar {
+    width: 1rem;
+    height: 1rem;
+    background-color: #000;
+    box-sizing: border-box;
+    border-radius: 50%;
+    text-align: center;
+    img {
+      display: inline-block;
+      vertical-align: middle;
+      border-radius: 50%;
+    }
+  }
+}
+
+.user-name {
+  font-size: .24rem;
+  color:rgba(0,0,0,1);
+}