f9yx0du 发表于 2024-10-10 04:39:20

开箱即用的前端研发模板,扩展Layui原生UI样式,集成第三方组件


    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><a style="color: black;">#程序员#</a><a style="color: black;">#挑战30天在头条写日记#</a></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">大众</span>好,我是仁杰,今天给<span style="color: black;">大众</span>分享一款开箱即用的前端<span style="color: black;">研发</span>模板,扩展Layui原生UI样式,集成第三方开源组件,<span style="color: black;">供给</span><span style="color: black;">方便</span>快速的<span style="color: black;">研发</span>方式,延续 Admin 的设计规范。</p>
    <h1 style="color: black; text-align: left; margin-bottom: 10px;">介绍</h1>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">一款开箱即用的前端<span style="color: black;">研发</span>模版框架,项目对Layui的原生框架进行了二次<span style="color: black;">研发</span>,并且在项目中集<span style="color: black;">成为了</span>第三方开源组件,<span style="color: black;">能够</span>更好的在这个<span style="color: black;">基本</span>之上进行<span style="color: black;">研发</span>,<span style="color: black;">同期</span><span style="color: black;">亦</span>延续了Admin的设计规范。</p>
    <h1 style="color: black; text-align: left; margin-bottom: 10px;">详情</h1>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">工作台</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/bf71165e7d4d4bff9e59e8fca26efde4~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1728743746&amp;x-signature=0JTwQc%2BDWMM9T1a2fILPH9yVuOE%3D" style="width: 50%; margin-bottom: 20px;">
      <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">工作台</p>
    </div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">修改工作台颜色</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/953c28227100437c9b5472109da99132~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1728743746&amp;x-signature=3jXfR4LhC9VpBeQWnAPXjiCRNPQ%3D" style="width: 50%; margin-bottom: 20px;">
      <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">修改工作台颜色风格</p>
    </div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">数据分析</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/a3ae1f34927d49ecbcc4f7141e90ad30~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1728743746&amp;x-signature=go%2FHabNRoU0U8nVBSHL7HLiEQ1Q%3D" style="width: 50%; margin-bottom: 20px;">
      <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">数据分析</p>
    </div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">功能按钮</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/9fc1ef7c81eb48a68e09dce3fac71222~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1728743746&amp;x-signature=LjV%2Bpz8H2lqVe7oU%2FlD9M7SNq9M%3D" style="width: 50%; margin-bottom: 20px;">
      <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">功能按钮</p>
    </div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">字体图标</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/169c4b4f80cf4569b1b7e1bf8bb89a0b~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1728743746&amp;x-signature=Bx%2F9jQphyFr8dYRgQIDr6KUbLiQ%3D" style="width: 50%; margin-bottom: 20px;">
      <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">字体图标</p>
    </div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">多拉下选</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/c0e0dc2d579a4b25ac68ae324eb8673b~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1728743746&amp;x-signature=LNTjxq0cOAX7f648R3WjvnuIVCg%3D" style="width: 50%; margin-bottom: 20px;">
      <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">多拉下选</p>
    </div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">卡片组件</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/dbf90c16a83c4fa1b878bc72c38bd311~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1728743746&amp;x-signature=Kl1R1PVWIfdNCJo8sfrf1CNWx%2FM%3D" style="width: 50%; margin-bottom: 20px;">
      <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">卡片组件</p>
    </div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">折线图</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p26-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/714631281084484c9634d5f9312c6ae4~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1728743746&amp;x-signature=hVFrSDJM2wDIJMsYWBWlB9oH%2FPE%3D" style="width: 50%; margin-bottom: 20px;">
      <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">折线图</p>
    </div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">柱状图</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/3814bd80648843c3b677b8c3f36b331c~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1728743746&amp;x-signature=OoQsBw8TOirew5LvyqXk7pOF%2Bq8%3D" style="width: 50%; margin-bottom: 20px;">
      <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">柱状图</p>
    </div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">统一登录页面</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/6474fbfe6e454ffc8d05ca1cd881e979~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1728743746&amp;x-signature=qabWcNymR6Tagds8dG0BLrFOq1g%3D" style="width: 50%; margin-bottom: 20px;">
      <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">登录页面</p>
    </div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">403页面</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/584de00aa67d43d39f66a7c0799ef602~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1728743746&amp;x-signature=xNSSJzq7zP%2F%2FRShbPLkwlOYv0MM%3D" style="width: 50%; margin-bottom: 20px;">
      <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">403</p>
    </div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">404页面</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/f44c92715fef456f8afb928b142415c7~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1728743746&amp;x-signature=HYMmW02sycQU2pr4siSVxOCHGCA%3D" style="width: 50%; margin-bottom: 20px;">
      <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">404</p>
    </div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">500页面</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/3ed9d393593b414a98bfdc2e0b556e01~noop.image?_iz=58558&amp;from=article.pc_detail&amp;lk3s=953192f4&amp;x-expires=1728743746&amp;x-signature=0ZgsYM0rstOZXxQHcgC2p7m7suA%3D" style="width: 50%; margin-bottom: 20px;">
      <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">500</p>
    </div>
    <h1 style="color: black; text-align: left; margin-bottom: 10px;">结尾</h1>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">这是个前端开源组件项目,组件还是比较丰富的。<span style="color: black;">供给</span>了layui版本、boot版本、think版本、abp版本、ant版本、flask版本等。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">项目会<span style="color: black;">按时</span>的更新,<span style="color: black;">同期</span><span style="color: black;">亦</span><span style="color: black;">供给</span>了核心参数、核心配置、框架菜单等功能。</p>




页: [1]
查看完整版本: 开箱即用的前端研发模板,扩展Layui原生UI样式,集成第三方组件