Przeglądaj źródła

style(profile): 调整头像样式为圆形并添加边框

- 将头像的 border-radius 从固定值改为 50% 实现圆形效果
- 移除背景颜色设置,改为添加灰色半透明边框
- 同步调整头像容器的 border-radius 为 50% 保持一致
- 保留裁切超出部分的样式避免内容溢出
mcbaiyun 2 miesięcy temu
rodzic
commit
fb76a4c2b4
1 zmienionych plików z 4 dodań i 3 usunięć
  1. 4 3
      src/pages/profile/index.vue

+ 4 - 3
src/pages/profile/index.vue

@@ -191,8 +191,9 @@ const onLogout = () => {
 .avatar {
 .avatar {
   width: 120rpx;
   width: 120rpx;
   height: 120rpx;
   height: 120rpx;
-  border-radius: 60rpx;
-  background-color: #007aff;
+  border-radius: 50%;
+  /* background-color: #007aff; */
+  border: 1px solid rgba(128, 128, 128, 0.5);
   display: flex;
   display: flex;
   align-items: center;
   align-items: center;
   justify-content: center;
   justify-content: center;
@@ -202,7 +203,7 @@ const onLogout = () => {
 .avatar-frame {
 .avatar-frame {
   width: 100%;
   width: 100%;
   height: 100%;
   height: 100%;
-  border-radius: 60rpx;
+  border-radius: 50%;
   overflow: hidden; /* 裁切超出部分,避免溢出 */
   overflow: hidden; /* 裁切超出部分,避免溢出 */
   display: flex;
   display: flex;
   align-items: center;
   align-items: center;