Skip to content

cwy007/jingdong

Repository files navigation

jingdong

移动端项目:京东到家

线上演示

Project setup

npm install
npm run serve
npm run build
npm run lint

项目页面

  • 注册
  • 登录
  • 首页
  • 购物车页
  • 商家详情页
  • 商家详情页-遮罩
  • 确认订单
  • 选择收货地址
  • 确认提交弹框
  • 我的订单
  • 个人中心
  • 地址列表
  • 新建地址
  • 修改地址

注册 登录 首页 购物车页 商家详情页 商家详情页-遮罩 确认订单 选择收货地址 确认提交弹框 我的订单 个人中心 地址列表 新建地址 修改地址

stylesheets

  • 1rem == 1 * html 元素的 font-size
  • BEM 命名: block__element--modifier 语义化的css编码

npm packages

npm i -S normalize.css

js code snippet

  code-for-project git:(cwy-branch)  node
Welcome to Node.js v12.16.2.
// Returns a string consisting of the elements of the object repeated count times.
> 'js'.repeat(5)
'jsjsjsjsjs'

参考

  • Flex 布局教程:语法篇

  • flex container

    • flex-direction
    • flex-wrap
    • flex-flow
    • justify-content
    • align-items
    • align-content
  • flex item

    • order
    • flex-grow
    • flex-shrink
    • flex-basis
    • flex
    • align-self

flex-basis 属性定义了在分配多余空间之前,项目占据的主轴空间(main size),设置元素的初始长度

// scss
  .position {
    // ...
    &__icon {
      // ...
    }
    .position__notice {
      // ...
    }
  }

// scss 编译后生成的 css
.position {
  // ...
}
.position__icon {
  // ...
}
.position .position__notice {
  // ...
}
  • css hack 避免图片下面内容的抖动
.banner {
  height: 0;
  overflow: hidden;
  // padding 的值为百分数时,是相对于容器的宽度 width 来计算的
  padding-bottom: 25.4%; // 这里 25.4% 是通过容器的 height/width 计算得到的
  &__img {
    width: 100%;
  }
}