bingxue-wechat/app.wxss

@import "lib/style/icon.wxss";

/* init tags */

page {
  /* size */
  --sizehgr: 48rpx;
  --sizehg: 44rpx;
  --sizelgr: 40rpx;
  --sizelg: 36rpx;
  --sizenor: 30rpx;
  --sizesm: 28rpx;
  --sizesmr: 24rpx;
  --sizetn: 20rpx;
  --sizetnr: 16rpx;
  /* color */
  --tit: #666;
  --theme: #e51b35;
  --dark: #333;
  --darkgray: #666;
  --lightgray: #999;
  --bg: #e6e6e6;
  --fg: #fff;
  --raduis: 10rpx;
  --wrp: 20rpx;
  --txtsub: 0.88em;
  --themecolor: #002063;
  --themeborcolor: #e6e6e6;
  --themebor: 1rpx solid var(--themeborcolor);
  --themerad: 10rpx;
  --themedanger: #e6233c;
  --colorattr: #036eb8;
  --colorp: #9d9d9d;
  --shadow: 0 2px 4px #666;
  width: 100vw;
  /* height: 100vh; */
  color: var(--dark);
  font-size: var(--sizenor);
  overflow-x: hidden;
  background-color: var(--themeborcolor);
}

view, page {
  box-sizing: border-box;
}

.both {
  margin: 0 10rpx;
}

button {
  margin-left: 0;
  margin-right: 0;
  font-size: inherit;
  line-height: normal;
  padding: 12rpx 32rpx;
  background-color: transparent;
}

.button-hover {
  background-color: transparent;
}

image {
  display: block;
}

textarea {
  width: 100%
}

/*****************************/

/******* embellishment *******/

.assetsbg {
  /* Safari 5.1 - 6.0 */
  background: -webkit-linear-gradient(left, #ff4a76, #ff9605);
  /* Opera 11.1 - 12.0  */
  background: -o-linear-gradient(left, #ff4a76, #ff9605);
  /* Firefox 3.6 - 15 */
  background: -moz-linear-gradient(left, #ff4a76, #ff9605);
  background: linear-gradient(left, #ff4a76, #ff9605);
}

.shadow {
  box-shadow: var(--shadow);
}

/* 反色 anti-color */

.acolorw {
  color: #fff;
}

.subtxt {
  color: darkgray;
}

.txtdanger {
  color: var(--theme);
}

.themerad {
  border-radius: var(--raduis)
}

/* 不换行 */

.nowrap, .nowrap-ell {
  white-space: nowrap;
}

.nowrap-ell, .txtelldup {
  text-overflow: ellipsis;
}

.txtelldup {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical
}

.txtt, .txty {
  margin-top: .4em;
}

.txtb, .txty {
  margin-bottom: .4em;
}

.txtl, .txtx {
  margin-left: .4em;
}

.txtr, .txtx {
  margin-right: .4em
}

/* 文字 */

.txtanti {
  color: #fff;
}

.txtcenter {
  text-align: center;
}

.txtbold {
  font-weight: bold;
}

.txtpro {
  font-size: 1.12em;
}

.txtsub {
  font-size: 0.88em;
}

.txthgr {
  font-size: var(--sizehgr);
}

.txthg {
  font-size: var(--sizehg);
}

.txtlgr {
  font-size: var(--sizelgr);
}

.txt-large, .txtlg, .txt-opt {
  font-size: var(--sizelg);
}

.txt-normal, .txt {
  font-size: var(--sizenor);
}

.txt-small, .txtsm {
  font-size: var(--sizesm);
}

.txt-smaller, .txtsmr {
  font-size: var(--sizesmr);
}

.txttn, .txttn {
  font-size: var(--sizetn);
}

.txtbold {
  font-weight: bold;
}

.txt-opt, .txt-highlight, .txtboldr {
  font-weight: bolder;
}

.txt-lighter {
  font-weight: lighter;
}

/* 文字状态 */

.active, .txt-highlight, .discounts {
  color: var(--theme);
}

.note {
  color: var(--gray);
}

.inactive, .notetit {
  color: #666;
}

.common {
  color: initial;
}

/* 背景色，前景色 */

.bg {
  background-color: var(--bg);
}

.fg {
  background-color: var(--fg);
}

/* cover */

.cover {
  background-color: rgba(0, 0, 0, 0.8);
}

.danger {
  border-color: red;
}

/* 超链接颜色 */

.hyperlink {
  color: #00f;
}

/* 删除线 */

.s {
  text-decoration-line: line-through;
}

/* 图标大小 */

.icon-huge image, .temp-box, .imghg image, .boxhg {
  width: 180rpx;
  height: 180rpx;
}

.icon-larger image, .imglgr image, .boxlgr {
  width: 160rpx;
  height: 160rpx;
}

.icon-head, .icon-large image, .imglg image, .boxlg {
  width: 140rpx;
  height: 140rpx;
}

.icon, .icon-normal image, .img image, .box {
  width: 44rpx;
  height: 44rpx;
}

.icon-common image, .icon-small image, .imgsm image, .boxsm {
  width: 32rpx;
  height: 32rpx;
}

.icon-smaller image, .imgsmr image, .boxsmr {
  width: 28rpx;
  height: 28rpx;
}

/**********************/

/******* layout *******/

/* 盒子 */

.boxpro {
  height: 1.12em !important;
  width: 1.12em !important;
}

.boxsub {
  height: 0.88em !important;
  width: 0.88em !important;
}

/* 定位 */

.posabswrp, .posrel {
  position: relative;
}

.posabs {
  position: absolute;
}

.posfix {
  position: fixed;
}

::-webkit-scrollbar, .hide {
  display: none;
}

/* 圆 */

.circle {
  border-radius: 50%;
}

/* 填充圆 */

.circle .filled, .full, .col.scroll, .fully {
  height: 100%;
}

.circle .filled, .full, .row.scroll, .fullx {
  width: 100%;
}

/* 行布局，列布局 */

/* lv : listview */

.row, .col, .lv, .lv .li {
  display: -webkit-box;
  display: flex;
}

.col {
  flex-direction: column;
}

.col.reverse {
  flex-direction: column-reverse;
}

.row.wrap, .col.wrap {
  flex-wrap: wrap;
}

/* 弹性格，收缩格，扩展格 */

.flexible, .shrinkable, .growable {
  min-width: 0;
}

.flexible {
  flex: 1;
  -prefix-box-flex: 1;
  -webkit-box-flex: 1;
  /*  -webkit-flex: 1; *//*  -moz-box-flex: 1; *//*  -ms-flex: 1; */
}

.shrinkable {
  flex-shrink: 1;
}

.growable {
  flex-grow: 1;
}

/* 内容包裹方式 包裹wrapped:wrp 插入inserted:in 结合combined:comb 单边side */

/* 垂直方向vertical:ver,水平方向horizontal:hor */

/* normal */

.wrp, .inright, .inleft, .wrpy, .wrptop, .inbot {
  padding-top: 24rpx;
}

.wrp, .inright, .intop, .wrpleft, .inbot {
  padding-left: 24rpx;
}

.wrp, .inleft, .intop, .wrpright, .inbot {
  padding-right: 24rpx;
}

.wrp, .inright, .inleft, .intop, .wrpy, .wrpbot {
  padding-bottom: 24rpx;
}

/* little */

.wrplit, .combverlit {
  padding-top: 10rpx;
}

.wrplit, .combhorlit {
  padding-left: 10rpx;
}

.wrplit, .combhorlit {
  padding-right: 10rpx;
}

.wrplit, .combverlit, .sidebotlit {
  padding-bottom: 10rpx;
}

.inrightlit {
  padding: 10rpx 10rpx 10rpx 0;
}

.insertedbot-lit {
  padding: 10rpx 10rpx 0;
}

/* large */

.wrplg, .combinedhorlg, .combhorlg, .insertedtoplg, .intoplg, .inbotlg,
.sideleftlg {
  padding-left: 32rpx;
}

.wrplg, .combinedhorlg, .combhorlg, .insertedtoplg, .intoplg, .insertedleftlg,
.inleftlg, .inbotlg, .wrprlg {
  padding-right: 32rpx;
}

.wrplg, .combinedverlg, .combverlg, .insertedleftlg, .inleftlg, .inbotlg,
.sidetoplg {
  padding-top: 32rpx;
}

.wrplg, .combinedverlg, .combverlg, .insertedtoplg, .intoplg, .insertedleftlg,
.inleftlg, .sidebotlg {
  padding-bottom: 32rpx;
}

.wrplgr {
  padding: 40rpx;
}

/* 垂直居中，水平居中，水平锤子居中，倒序 */

.row.center, .col.center, .row.main-center, .row.maincenter, .col.main-center,
.col.maincenter {
  justify-content: center;
}

.row.center, .col.center, .row.cross-center, .row.crosscenter, .col.crosscenter,
.col.cross-center {
  align-items: center;
}

/* 两端对齐 */

.between {
  justify-content: space-between;
}

/* 平铺 */

.around {
  justify-content: space-around;
}

/* 左对齐 */

.row.left {
  justify-content: flex-start;
}

.col.left {
  align-items: flex-start;
}

/* 右对齐 */

.row.right {
  justify-content: flex-end;
}

.col.right {
  align-items: flex-end;
}

/* 底部对齐 */

.row.bot {
  align-items: flex-end;
}

.col.bot {
  justify-content: flex-end;
}

/* 滚动 */

.circle, .nowrap-ell, .scrolly, .noscroll {
  overflow: hidden;
}

.scrolly {
  overflow-y: scroll;
}

.row.scroll {
  overflow-x: scroll;
  overflow-y: hidden;
}

/* 边 bor */

.bor, .bortop, .bory {
  border-top: var(--themebor);
}

.bor, .borleft, .borx {
  border-left: var(--themebor);
}

.bor, .borright, .borx {
  border-right: var(--themebor);
}

.bor, .borbot, .bory {
  border-bottom: var(--themebor);
}

/* 块间距 gap */

/* less:ls */

.gapbot, .gaprb, .gaplb, .gapy {
  margin-bottom: 24rpx;
}

.gaptop, .gaprt, .gaplt, .gapy {
  margin-top: 24rpx;
}

.gapleft, .gaplt, .gaplb{
  margin-left: 24rpx;
}

.gapright, .gaprt, .gaprb {
  margin-right: 24rpx;
}

.gaptoplit {
  margin-top: 20rpx;
}

.gapbotlit {
  margin-bottom: 20rpx;
}

.gapleftlit {
  margin-left: 20rpx;
}

.gaprightlit {
  margin-right: 20rpx;
}

.gaptopls {
  margin-top: 10rpx;
}

.gapbotls {
  margin-bottom: 10rpx;
}

.gapleftls {
  margin-left: 10rpx;
}

.gaprightls {
  margin-right: 10rpx;
}

/* 组件样式 */

/* .banner {
  margin: var(--wrp);
  height: 20%;
  overflow: hidden;
  border-radius: var(--raduis);
}

.banner image {
  width: 100%;
}

.personalPanel {
  margin: var(--wrp);
  padding: var(--wrp);
  background-color: var(--fg);
  border-radius: var(--raduis);
}

.personalPanel .avatar {
  height: 112rpx;
  width: 112rpx;
  display: inline-block;
  margin-right: var(--wrp);
}

.personalPanel .subinfo {
  color: darkgray;
  font-size: var(--sizesmr);
}

.article {
  padding: var(--wrp);
}

.article .title {
  font-weight: bold;
}

.article .more {
  font-size: var(--txtsub);
  color: darkgray;
}

.article .empty {
  font-size: var(--sizesmr);
  color: darkgray;
  height: 420rpx;
}

.article .empty image {
  width: 290rpx;
  height: 190rpx;
  margin-bottom: calc(var(--wrp) * 2);
}

.btngroup {
}

.btn {
  color: #fff;
  background-color: #e3485a;
  width: 80%;
  padding: var(--wrp);
}

.btnround {
  border-radius: 40rpx;
} */

/* main style */