商城样式注意点css

最新推荐文章于 2022-10-04 21:54:58 发布

原创最新推荐文章于 2022-10-04 21:54:58 发布

· 269 阅读

版权

该博客分享了基于Vue.js、Mint-UI和Mui开发的商城项目的样式注意点和实现细节，包括图片懒加载、点击加载更多、评论、购物车等功能。还提供了微服务后台、门户网站和后台管理源码的GitHub链接，并提到了better-scroll的使用及其滚动样式需求，如菜单盒子和商品列表的CSS布局技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考乐优商城
百度云盘提取：https://pan.baidu.com/s/1Ea1cP_fW31VZt9IRXKvEKA

提取码：53d5

GitHub上参考链接：

使用了vue全家桶和mint-ui 与mui进行开发的小商城项目（部分功能），网上的接口，实现了图片懒加载点击加载更多评论购物车点击小图片放大等：https://github.com/993305280/vue_case

微服务后台源码：https://github.com/wenpanwenpan/leyou-project

门户网站源码：https://github.com/wenpanwenpan/leyou-portal

后台管理源码：https://github.com/wenpanwenpan/leyou-manage-web

微商城基础依赖：https://blog.youkuaiyun.com/u011388098/article/details/109210131

如何复用立即购买与加购结算：
https://blog.youkuaiyun.com/sinat_31376397/article/details/109261155

左右联动滚动不了的原因！！！
在这里插入图片描述
better-scroll下载：npm i better-scroll@1.15.2

注意，要进行better-scroll滚动时得对应样式写好才可以滚动
menu大盒子必须要设置flex、flex-direction、flex-wrap。同时注意上下留空 top: 40px; bottom: 50px;
和宽度设100%： width: 100%;

  display: flex;
  position: absolute;
  flex-wrap: row wrap;
  text-align: center;
  overflow: hidden;

menu-right必须设置flex:1才能换行

item必须设置flex、flex-direction、flex-wrap

        display: flex;
        flex-flow: row wrap;

注意整个分类高度设置100%。
图片等部分宽度设置以确保美观

    .cate {
      height: 100%;
      .item {
        li {
          width: 33.3%;
          .img {
            width: 100%;
            img {
              width: 70px;
              height: 70px;

展示商品时注意要弹性盒子：display: flex;，
要换行：flex-wrap: wrap;
左边留空：padding-left: 10px;

每个商品item必须设置外间距margin，才可以使列表当行显示两列

    width: calc(calc(100% / 2) - 10px);
    margin: 10px 10px 0 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

具体信息information展示：

      display: flex;
      justify-content: space-between;
      margin-bottom: 0;

需要注意，为了让文字不拥挤。
标题设置margin: 10px 0;

格式化及eslint取消报错
.prettierrc

{
    "semi":false,
    "singleQuote":true,
    "trailingComma": none
}

eslintric.js

    'space-before-function-paren':0,
    'no-irregular-whitespace':0

js浮点数的加减乘除解决方案：https://www.jianshu.com/p/719379c65a31