公共样式封装(基于flex布局)

html,

body {

  height: 100%;

  // overflow-y: auto;

  // position: relative;

}

 

#root {

  height: 100%;

  position: relative;

}

 

* {

  margin: 0;

  padding: 0;

  border: 0;

  font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif !important;

}

 

/* 为元素设定的宽度和高度决定了元素的边框盒 */

 

div {

  box-sizing: border-box;

  -webkit-tap-highlight-color: rgba(0);

}

 

a {

  text-decoration: none;

}

 

/* 默认图片是行内元素 */

 

img {

  display: inline-block;

}

 

/* 关闭滚动条  */

 

::-webkit-scrollbar {

  width: 0;

  height: 0;

  color: transparent;

}

 

/* 超过一行显示省略号 */

 

.ellipsis {

  overflow: hidden;

  white-space: nowrap;

  text-overflow: ellipsis;

}

 

/* 去除边框 */

 

button {

  margin: 0;

  padding: 0;

  font: 400 15px/1.4 '';

  /*移动端和H5需要自己调试一下 px 或 rpx 大小*/

  background: unset;

}

 

button::after {

  border: none;

}

 

/* 弹性布局盒模型 */

 

.flex {

  display: -moz-box;

  /* Firefox */

  display: -ms-flexbox;

  /* IE10 */

  display: -webkit-box;

  /* Safari */

  display: -webkit-flex;

  /* Chrome, WebKit */

  display: box;

  display: flexbox;

  display: flex;

}

 

/* 弹性布局盒模型可换行 */

 

.rowW {

  display: -moz-box;

  /* Firefox */

  display: -ms-flexbox;

  /* IE10 */

  display: -webkit-box;

  /* Safari */

  display: -webkit-flex;

  /* Chrome, WebKit */

  display: box;

  display: flexbox;

  display: flex;

  flex-wrap: wrap;

}

 

/* 水平垂直居中 */

 

.centerXY {

  display: -moz-box;

  /* Firefox */

  display: -ms-flexbox;

  /* IE10 */

  display: -webkit-box;

  /* Safari */

  display: -webkit-flex;

  /* Chrome, WebKit */

  display: box;

  display: flexbox;

  display: flex;

  justify-content: center;

  align-items: center;

}

 

/* 上下居中 */

 

.centerY {

  display: -moz-box;

  /* Firefox */

  display: -ms-flexbox;

  /* IE10 */

  display: -webkit-box;

  /* Safari */

  display: -webkit-flex;

  /* Chrome, WebKit */

  display: box;

  display: flexbox;

  display: flex;

  flex-direction: row;

  justify-content: flex-start;

  align-items: center;

}

 

/* 横向排列 */

.rowX {

  display: -moz-box;

  /* Firefox */

  display: -ms-flexbox;

  /* IE10 */

  display: -webkit-box;

  /* Safari */

  display: -webkit-flex;

  /* Chrome, WebKit */

  display: box;

  display: flexbox;

  display: flex;

  flex-direction: row;

  justify-content: flex-start;

}

 

/* 横向排列,所有元素放置于底部 */

.bottomY {

  display: -moz-box;

  /* Firefox */

  display: -ms-flexbox;

  /* IE10 */

  display: -webkit-box;

  /* Safari */

  display: -webkit-flex;

  /* Chrome, WebKit */

  display: box;

  display: flexbox;

  display: flex;

  flex-direction: row;

  align-items: flex-end;

}

 

/* 左右居中 */

 

.centerX {

  display: -moz-box;

  /* Firefox */

  display: -ms-flexbox;

  /* IE10 */

  display: -webkit-box;

  /* Safari */

  display: -webkit-flex;

  /* Chrome, WebKit */

  display: box;

  display: flexbox;

  display: flex;

  flex-direction: column;

  justify-content: flex-start;

  align-items: center;

}

 

/* 纵向排列 */

 

.columnY {

  display: -moz-box;

  /* Firefox */

  display: -ms-flexbox;

  /* IE10 */

  display: -webkit-box;

  /* Safari */

  display: -webkit-flex;

  /* Chrome, WebKit */

  display: box;

  display: flexbox;

  display: flex;

  flex-direction: column;

  justify-content: flex-start;

}

 

/* 向左向右 */

 

.betweenX {

  display: -moz-box;

  /* Firefox */

  display: -ms-flexbox;

  /* IE10 */

  display: -webkit-box;

  /* Safari */

  display: -webkit-flex;

  /* Chrome, WebKit */

  display: box;

  display: flexbox;

  display: flex;

  flex-direction: row;

  justify-content: space-between;

}

 

/* 向上向下 */

 

.betweenY {

  display: -moz-box;

  /* Firefox */

  display: -ms-flexbox;

  /* IE10 */

  display: -webkit-box;

  /* Safari */

  display: -webkit-flex;

  /* Chrome, WebKit */

  display: box;

  display: flexbox;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

}

 

.rightX {

  display: -moz-box;

  /* Firefox */

  display: -ms-flexbox;

  /* IE10 */

  display: -webkit-box;

  /* Safari */

  display: -webkit-flex;

  /* Chrome, WebKit */

  display: box;

  display: flexbox;

  display: flex;

  flex-direction: column;

  align-items: flex-end;

  /* justify-content: flex-end; */

}

 

/*定位全屏*/

 

.allcover {

  position: absolute;

  top: 0;

  right: 0;

}

 

/*定位上下左右居中*/

 

.centerAXY {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

}

 

/*定位上下居中*/

 

.centerAY {

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

}

 

/*定位左右居中*/

 

.centerAX {

  position: absolute;

  left: 50%;

  transform: translateX(-50%);

}

 

/* 清楚浮动 */

 

.clearfix::after {

  content: '';

  display: block;

  clear: both;

}

 

.clearfix {

  zoom: 1;

}

 

/* 左浮动 */

 

.fl {

  float: left;

}

 

/* 右浮动 */

 

.fr {

  float: right;

}

 

.am-modal-mask {

  z-index: 9999999;

}

 

.am-modal-wrap {

  z-index: 9999999;

}

 

.am-list-header {

  padding: 0 !important;

}

 

.am-list-footer {

  padding: 0 !important;

}

 

.am-list-view-scrollview{

  height: 100vh;

}

 

//enter是入场前的刹那（点击按钮），appear指页面第一次加载前的一刹那（自动）

.fade-enter,

.fade-appear {

  position: relative;

  opacity: 0;

  left: 300px;

}

 

//enter-active指入场后到入场结束的过程，appear-active则是页面第一次加载自动执行

.fade-enter-active,

.fade-appear-active {

  position: relative;

  opacity: 1;

  left: 0px;

  transition: opacity 1s ease, left 1s ease;

}

 

//入场动画执行完毕后，保持状态

.fade-enter-done {

  position: relative;

  opacity: 1;

  left: 0px;

}

 

//同理，出场前的一刹那，以下就不详细解释了，一样的道理

.fade-exit {

  opacity: 1;

  left: 0px;

  position: relative;

}

 

//exit-active指出场后到出场结束的过程

.fade-exit-active {

  opacity: 0;

  left: -300px;

  position: relative;

  transition: opacity 1s ease, left 1s ease;

}

 

//出场动画执行完毕后，保持状态

.fade-exit-done {

  opacity: 0;

  left: -300px;

  position: relative;

}

 

//enter是入场前的刹那（点击按钮），appear指页面第一次加载前的一刹那（自动）

.back-enter,

.back-appear {

  position: relative;

  opacity: 0;

  right: 300px;

}

 

//enter-active指入场后到入场结束的过程，appear-active则是页面第一次加载自动执行

.back-enter-active,

.back-appear-active {

  position: relative;

  opacity: 1;

  right: 0px;

  transition: opacity 1s ease, right 1s ease;

}

 

//入场动画执行完毕后，保持状态

.back-enter-done {

  position: relative;

  opacity: 1;

  right: 0px;

}

 

//同理，出场前的一刹那，以下就不详细解释了，一样的道理

.back-exit {

  opacity: 1;

  right: 0px;

  position: relative;

}

 

//exit-active指出场后到出场结束的过程

.back-exit-active {

  opacity: 0;

  right: -300px;

  position: relative;

  transition: opacity 1s ease, left 1s ease;

}

 

//出场动画执行完毕后，保持状态

.back-exit-done {

  opacity: 0;

  right: -300px;

  position: relative;

}