BTMuli / WechatDemo

1 stars 0 forks source link

关于标签和顶部问题 #1

Open Verdant-Grassland opened 19 hours ago

Verdant-Grassland commented 19 hours ago

https://gitee.com/liu-27749/WechatDemo/issues

我刚刚改了登录页面的grid flex改为grid了

<style lang="scss" scoped>
.content {
  position: relative;
  display: grid;
  justify-items: center;
  // justify-content: space-between;
  width: 100%;
  height: 100%;
  row-gap: 92px;
  grid-template-rows: 44fr 19fr;
}

.user-info {
  display: grid;
  // justify-content: center;
  // flex-direction: column;
  justify-items: center;
  row-gap: 16px;

  .avatar {
    width: 75px;
    height: 74px;
    border-radius: 4px;
    -webkit-app-region: no-drag;

    :deep(img) {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .username {
    font-size: 15px;
  }
}

.bottom-acts {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  row-gap: 20px;

  .login-button {
    width: 168px;
    height: 34px;
    border-radius: 4px;
    font-size: 14px;
    padding: 0;
    -webkit-app-region: no-drag;
  }

  .action-links {
    display: flex;
    align-items: center;
    -webkit-app-region: no-drag;

    .action-link {
      color: #576b95;
      font-size: 13px;
      line-height: 1;
      padding: 0;
      height: auto;

      &:hover {
        color: #7088b5;
      }

      &:active {
        color: #445a84;
      }
    }

    :deep(.el-divider--vertical) {
      height: 12px;
      margin: 0 10px;
      border-color: #d9d9d9;
    }
  }
}
</style>

autologin.vue

whitetea-bot[bot] commented 19 hours ago

待处理,当前有 0 个 issue 正在处理中,共有 1 个 issue

BTMuli commented 17 hours ago

/WIP

  1. grid 网格布局用于多行多列情况,像登录这种单列多行的采用 flex 布局是较为合适的
  2. 标签页:hover显示动画施工中...
Verdant-Grassland commented 16 hours ago

# Duplicate of # 什么时候修改完成啊

还有一个顶部需要置顶的,然后就才能实现效果即可

Verdant-Grassland commented 15 hours ago

https://gitee.com/liu-27749/WechatDemo/issues

Screenshot_20241203_175643_com.quark.browser.jpg