/* uni-app 组件在 H5 环境下的兼容样式 */

/* 基础组件 */
view {
  display: block;
  box-sizing: border-box;
}

text {
  display: inline;
  white-space: pre-wrap;
}

image {
  display: inline-block;
  width: auto;
  height: auto;
  vertical-align: middle;
}

/* 滚动组件 */
scroll-view {
  display: block;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
}

scroll-view[scroll-x="true"] {
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
}

scroll-view[scroll-y="true"] {
  overflow-x: hidden;
  overflow-y: auto;
}

scroll-view[enable-flex="true"] {
  display: flex;
}

/* 轮播组件 */
swiper {
  display: block;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 150px;
}

swiper[vertical] {
  height: 100%;
}

swiper-item {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  overflow: hidden;
}

/* 输入组件 */
input {
  display: inline-block;
  width: 100%;
  height: auto;
  padding: 0;
  margin: 0;
  border: none;
  outline: none;
  background: transparent;
  font-size: inherit;
  color: inherit;
  line-height: inherit;
}

textarea {
  display: block;
  width: 100%;
  height: auto;
  padding: 0;
  margin: 0;
  border: none;
  outline: none;
  background: transparent;
  font-size: inherit;
  color: inherit;
  line-height: inherit;
  resize: none;
}

/* 按钮组件 */
button {
  display: inline-block;
  padding: 0;
  margin: 0;
  border: none;
  outline: none;
  background: transparent;
  font-size: inherit;
  color: inherit;
  line-height: inherit;
  cursor: pointer;
}

/* rpx 单位转换 - 基于 750px 设计稿 */
/* 这里使用 CSS 变量来实现 rpx 到 px 的转换 */
:root {
  --rpx-ratio: calc(100vw / 750);
}

/* 修复常见的布局问题 */
view,
scroll-view,
swiper,
swiper-item {
  flex-shrink: 0;
}