今天用vue 3写了个数码展示 demo:

回答|共 20 个

legs+ 发表于 2025-4-27 20:45:44| 字数 478 | 显示全部楼层

这个布局,其实很简单

分三个部分,一、导航栏

  1. /* 固定导航栏 */
  2. .navbar {
  3.     background: white;
  4.     position: fixed;
  5.     top: 0;
  6.     left: 0;
  7.     right: 0;
  8.     z-index: 1000;
  9.     border-bottom: 1px solid #eee;
  10. }

  11. .navbar .container {
  12.     display: flex;
  13.     justify-content: space-between;
  14.     align-items: center;
  15.     height: 60px;
  16. }
复制代码


没啥技术可言,重要的就是这句:justify-content: space-between;

就是分为两边,在图中你也看到了,一个名字在左边,三个链接在右边



重点来了,就是下面的两栏,是怎么分配的


  1. .main-content {
  2.     display: grid;           /* 将容器设置为网格布局 */
  3.     grid-template-columns: 250px 1fr;  /* 定义两列布局 */
  4.     gap: 30px;              /* 设置网格间距 */
  5.     margin-top: 80px;       /* 顶部外边距 */
  6. }
复制代码


grid布局实现(重要).png


有耐心看完,这个项目完事!提前祝大家五一快乐!

legs+ 发表于 2025-4-28 14:51:02| 字数 44 | 显示全部楼层

design-webpage.png




写了一个很pretty card webpage

妙就秒在,一个card就是一个webpage

legs+ 发表于 2025-4-28 14:58:03| 字数 21 | 显示全部楼层

经过润色,就形成了下面这个页面,还是很哇塞



petty webspage.png

legs+ 发表于 2025-4-29 17:21:01| 字数 18 | 显示全部楼层

dialogs.png



老夫聊发少年,代码不多,但是很哇塞!

legs+ 发表于 2025-4-29 17:46:11| 字数 67 | 显示全部楼层

vuetitf-dialogs.png


这是我用vuetitf ui框架重写了一遍,加了翻译

这是我第一次用这个web ui框架,第一次,有点手生

写了一个json,for循环了一下

legs+ 发表于 2025-5-4 14:10:07| 字数 185 | 显示全部楼层

今天用vuetify写了两个demo,一个是面包屑、一个是精灵图






好生疑问,vuetify大量的应用插槽技术

如:

  1. <v-chip>
  2.       <template v-slot:prepend>
  3.         <v-icon>mdi-account</v-icon>
  4.       </template>
  5.       用户标签
  6.     </v-chip>
复制代码


百思不得其解

legs+ 发表于 2025-5-4 14:10:11| 字数 185 | 显示全部楼层

今天用vuetify写了两个demo,一个是面包屑、一个是精灵图


Breadcrumbs.png


Chip.png


好生疑问,vuetify大量的应用插槽技术

如:

  1. <v-chip>
  2.       <template v-slot:prepend>
  3.         <v-icon>mdi-account</v-icon>
  4.       </template>
  5.       用户标签
  6.     </v-chip>
复制代码


百思不得其解

legs+ 发表于 2025-5-6 11:05:50| 字数 75 | 显示全部楼层

card-list.png



这是用vuetify写的一个Demo。

总结vuetify的生态比element plus好,毕竟是国际化的东西。

vuetify制作出来的东西,就是精美。

legs+ 发表于 2025-5-6 11:30:15| 字数 76 | 显示全部楼层

本帖最后由 legs+ 于 2025-5-6 11:33 编辑

要实现vuetify

一、安装依赖

二、配置vuetify.ts

三、在index.html导入相应的模块

vuetify配置.png

legs+ 发表于 2025-5-8 19:26:56| 字数 30 | 显示全部楼层

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

热门推荐