static/rst/css/styles.less

///------------------------------------- ├ 布局 ┆ └------------------------------------/
 
// 盒子宽高
.size(@w, @h) { width: @w; height: @h; }
 
// 最小尺寸, 兼容IE6
.min-width(@min-w) { min-width: @min-w; _width: @min-w; }
.min-height(@min-h) { min-height: @min-h; _height: @min-h; }
 
// 内联块级元素, 兼容IE6
.dib() { display: inline-block; *display: inline; *zoom: 1; }
 
// 固定定位, 兼容IE6
.fixed() { position: fixed; _position: absolute; *zoom: 1; }
//绝对定位
.position(@position;@top;@right;@bottom;@left){
    position: @position;top: @top;right: @right;bottom:@bottom;left:@left;
} 
// 统一盒模型
.border-box() {
*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
}
 
// 文字图片居中
.center(text-x) { text-align: center; }
.center(text-y) { display: table-cell; vertical-align: middle; }
 
// 块级元素水平居中
.center(auto-x) { display: block; margin-left: auto; margin-right: auto; }
 
// 居中, 不确定尺寸, 不兼容 IE6
.center(unknown) { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; }
.center(unknown-x) { position: absolute; left: 0; right: 0; margin-left: auto; margin-right: auto; }
.center(unknown-y) { position: absolute; top: 0; bottom: 0; margin-top: auto; margin-bottom: auto; }
 
// 居中, 确定尺寸, 兼容 IE6
.center(known, @w, @h) {
.size(@w, @h);
position: absolute; top: 50%; left: 50%; margin-top: -(@w / 2); margin-left: -(@h / 2);
}
.center(known-x, @w) {
width: @w;
position: absolute; left: 50%; margin-left: -(@h / 2);
}
.center(known-y, @h) {
height: @h;
position: absolute; top: 50%; margin-top: -(@w / 2);
}
 
// 居中, CSS3 平移方式, 兼容性不行
.center(translate) { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
 
// 居中, Flex 方式, 兼容性不行
.center(flex) { display: flex; align-items: center; justify-content: center; }
 
// 多个子项布局
.list(float, @w: 25%) { float: left; width: @w; }
.list(inline, @w: 25%) { .dib(); width: @w; }
.list(flex) { flex: 1; }
//圆角（1个参数）
.radius(@width){
    .radius-t-l(@width);.radius-t-r(@width);.radius-b-l(@width);.radius-b-r(@width);
}
//圆角（四个参数）
.radius(@a,@b,@c,@d){
    .radius-t-l(@a);.radius-t-r(@b);.radius-b-l(@c);.radius-b-r(@d);
}
//圆角左上
.radius-t-l(@width){
    border-top-left-radius: @width;
}
//圆角右上
.radius-t-r(@width){
    border-top-right-radius: @width;
}
//圆角左下
.radius-b-l(@width){
    border-bottom-left-radius: @width;
}
//圆角右下
.radius-b-r(@width){
    border-bottom-right-radius: @width;
}
//隐藏
.hide(){
    display: none !important;
}
//显示
.show(@status){
    display:@status !important;
}
// 遮罩层, 全屏遮罩、区域遮罩
.over-screen(fixed) { .fixed(); top: 0; left: 0; right: 0; bottom: 0; }
.over-screen(absolute) { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
 
// 容器宽高比固定
// 100* 1/1 = 100%
// 100* 3/4 = 75%
.fixed-ratio(@padding-top: 100%) {
position: relative; width: 100%; height: 0; padding-top: @padding-top;
img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
}
 
// 扩展点击区域
.extend-click() {
position: relative;
&:before { content: ''; position: absolute; top: -10px; left: -10px; right: -10px; bottom: -10px; }
}
 
// 定宽居中页面布局
.layout-page(@width: 1200px) { width: @width; margin-left: auto; margin-right: auto; }
 
// 侧边栏
// 主要区域：overflow: hidden; margin-left: xx; margin-right: xx;
.sidebar(left, @width) { position: absolute; top: 0; left: 0; width: @width; }
.sidebar(right, @width) { position: absolute; top: 0; right: 0; width: @width; }
 
///------------------------------------- ├ 字体 ┆ └------------------------------------/
 
// 字体大小
.fz(@fz) { font-size: @fz; }
 
// 字体大小与行高
.fz(@fz, @lh) { font-size: @fz; line-height: @lh; }
 
// 字体大小、行高、高度
.fz(@fz, @h, @lh: @h) { font-size: @fz; height: @h; line-height: @lh; }
// 宽
.w(@w) {width: @w; }
// 高
.h(@h) {height: @h; } 
// 行高
.lh(@lh) {line-height: @lh; } 
// 行高与高度
.lh(@h, @lh: @h) { height: @h; line-height: @lh; }
 
// 背景颜色
.bgcolor(@color) {background-color: @color;}
 
// 字体颜色, 包括链接与非链接
.color(@color) { color: @color;}
 
// 字体颜色 + 自身 Hover
.color(@color, @hovercolor) {
color: @color;
&:hover { color: @hovercolor; }
}
 
// 字体颜色 + 链接 Hover
.color(@color, @acolor, @hovercolor) {
color: @color;
a {
color: @acolor;
&:hover { color: @hovercolor; }
}
}
 
// 正常字体样式
.normal-font() { font-weight: normal; font-style: normal; }
 
// 辅助性文字（灰色）
.assist-font(@color: #b0b0b0, @fz: 14px) { color: @color; font-size: @fz; }
 
// 禁止换行, 文本溢出省略号显示 (一行)
.ellipsis() {
white-space: normal; word-wrap: break-word; word-break: break-all;
-o-text-overflow: ellipsis; -ms-text-overflow: ellipsis; text-overflow:ellipsis; overflow:hidden;
}
 
// 文本溢出省略号显示 (多行)
// 只支持 webkit 浏览器, 解决方案：高度 = 行高*行数
// height: 90px; line-height: 30px; -webkit-line-clamp: 3;
.ellipsis-mult(@n: 3) {
display: -webkit-box; -webkit-box-orient: vertical;-webkit-line-clamp: @n; word-break: break-all;
-o-text-overflow: ellipsis; -ms-text-overflow: ellipsis; text-overflow:ellipsis; overflow: hidden;
}
 
// 书写模式：牌匾从右至左水平单行排版效果、文笺从右至左、从上至下排版效果
.retext(x) { direction: rtl; unicode-bidi: bidi-override; }
.retext(y) { writing-mode: tb-rl; writing-mode: vertical-rl; }
 
// 文字透明
.transparent-text() { font: 0/0 serif; text-shadow: none; color: transparent; }
 
// 文字隐藏（常用于SEO优化）
//
 
 
.hidden-text() { text-indent : -9999px; overflow: hidden; text-align: left; }
// 文字外发光效果
.glow-text(@r: 10px, @color: gold) { text-shadow: 0 0 @r @color; }
 
///------------------------------------- ├ 图像 ┆ └------------------------------------/
 
// 用 max-width 来防止图片撑破容器
.max-img() { display: block; max-width: 100%; height: auto; }
 
// 2x 3x 背景图片
.bg-image(@url) {
background-image: url("@url + '@2x.png'");
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
background-image: url("@url + '@3x.png'");
}
}
// 全屏大图背景
.fullscreen-bg(@url) {
width: 100vw;
height: 100vh;
background: url(@url) no-repeat 50% 50%;
background-size: cover;
}
// 滤镜: 将彩色照片显示为黑白照片
.grayscale() {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
}
///------------------------------------- ├ 动效 ┆ └------------------------------------/
// 链接默认无下划线，hover后有下划线的样式
.hover-link() {
text-decoration: none;
&:hover { text-decoration: underline; }
}
// 将链接变成默认的文字样式
.unstyled-link() {
color: inherit;
cursor: inherit;
text-decoration: inherit;
&:active, &:focus { outline: none; }
}
// 盒子阴影
// box-shadow: 水平阴影的位置, 垂直阴影的位置, 模糊距离, 阴影的大小, 阴影的颜色, 阴影开始方向（默认是从里往外，设置inset就是从外往里）;
// box-shadow: h-shadow v-shadow blur spread color inset;
.box-shadow(@h;@v;@blur;@spread;@color;@inset) {
    -webkit-box-shadow: @h @v @blur @spread @color @inset;
    -moz-box-shadow: @h @v @blur @spread @color @inset;
    -ms-box-shadow: @h @v @blur @spread @color @inset;
    box-shadow: @h @v @blur @spread @color @inset;
}
// 盒子 Hover
.box-hover() {
// box-shadow: 0px 1px 2px 0px rgba(84, 107, 107, .4);
transition: all .2s linear;
&:hover {
box-shadow: 0 15px 30px rgba(0, 0, 0, .1);
transform: translate3d(0, -2px, 0);
}
}
.box-hover2() {
transition: transform .5s ease;
&:hover {
transform: translateX(10px);
}
}
// 三维闪动 bug 处理
.transform-fix() { -webkit-backface-visibility: hidden; -webkit-transform-style: preserve-3d; }
// Animation
.ani(@name, @time: 1s, @ease: ease-in-out, @fillmode: forwards) {
animation-name: @name;
animation-duration: @time;
animation-timing-function: @ease;
animation-fill-mode: @fillmode;
}
///------------------------------------- ├ 功能 ┆ └------------------------------------/
// 浮动, 兼容 IE6
.fl() { float: left; *display: inline; _display:inline; }
.fr() { float: right; *display: inline; _display:inline; }
// 清除浮动
.clearfix() {
*zoom: 1;
&:after { display: block; clear: both; content: ''; visibility: hidden; height: 0; }
}
.clearfix(table) {
*zoom: 1;
&:before, &:after { content: " "; display: table; clear: both; }
}
// 禁止文本被选择
.user-select() { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
// 隐藏鼠标手势
.hide-cursor() { cursor: none !important; }
// 鼠标禁用样式，但仍然可以触发事件
// 
.disabled() { cursor: not-allowed; }
// 禁用元素事件
// 1. 阻止任何点击动作的执行
// 2. 使链接显示为默认光标(cursor:default)
// 3. 阻止触发hover和active状态
// 4. 阻止JavaScript点击事件的触发
.pointer-events() { pointer-events: none; }
// 模糊
.blur(@blur: 10px) {
filter: blur(@blur);
-webkit-filter: blur(@blur);
-moz-filter: blur(@blur);
-o-filter: blur(@blur);
-ms-filter: blur(@blur);
filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='@{blur}');
*zoom: 1;
}
// 透明度, 兼容 IE8
.opacity(@opacity: 20) { opacity: @opacity / 100; filter: alpha(opacity=@opacity); }
// 用伪类来显示打印时 a 标签的链接
.print-link() {
@media print {
a[href]:after { content: " (" attr(href) ") "; }
}
}
// 隔行换色
.zebra-lists(odd, @color) {
&.odd {
>li:nth-child(odd) { background-color: @color; }
}
}
.zebra-lists(even, @color) {
&.even {
>li:nth-child(even) { background: green; }
}
}
// 首字下沉
.first-letter(@font-size: 6em) {
&::first-letter{
float: left;
line-height: 1;
font-size: @font-size;
}
}
// 特殊标记段落第一行
.first-line() {
&::first-line{
color: red
}
}
// 美化选中文本
.beauty-select() {
&::selection{
color: #fff;
background-color: #6bc30d;
text-shadow: none;
}
}
// 美化占位符 placeholder 样式
.beauty-placeholder(@fz, @color: #999, @align: left) {
&:-moz-placeholder { font-size: @fz; color: @color; text-align: @align; }
&:-ms-input-placeholder { font-size: @fz; color: @color; text-align: @align; }
&::-webkit-input-placeholder { font-size: @fz; color: @color; text-align: @align; }
}
// 美化占位符 placeholder 样式（自定义属性和值）
.beauty-placeholder(custom, @property, @value) {
&:-moz-placeholder { @{property}: @value; }
&:-ms-input-placeholder { @{property}: @value; }
&::-webkit-input-placeholder { @{property}: @value; }
}
///------------------------------------- ├ 图形 ┆ └------------------------------------/
// 三角形
.triangle(@width: 4px,@color: #000) {
display: inline-block;
width: 0;
height: 0;
vertical-align: middle;
border-top: @width solid @color;
border-left: @width solid transparent;
border-right: @width solid transparent;
}
// 三角形箭头气泡效果, IE6-7 无表现
.arrow(top, @w: 10px, @color, @x: 50%) {
position: relative;
&:before { position: absolute; bottom: 100%; left: @x; content: " "; height: 0; width: 0; pointer-events: none; border-style: solid; border-color: transparent; border-bottom-color: @color; border-width: unit(@w, px); @margin: -@w; margin-left: unit(@margin, px); }
}
.arrow(right, @w: 10px, @color, @y: 50%) {
position: relative;
&:before { position: absolute; left: 100%; top: @y; content: " "; height: 0; width: 0; pointer-events: none; border-style: solid; border-color: transparent; border-left-color: @color; border-width: unit(@w, px); @margin: -@w; margin-top: unit(@margin, px); }
}
.arrow(bottom, @w: 10px, @color, @x: 50%) {
position: relative;
&:before { position: absolute; top: 100%; left: @x; content: " "; height: 0; width: 0; pointer-events: none; border-style: solid; border-color: transparent; border-top-color: @color; border-width: unit(@w, px); @margin: -@w; margin-left: unit(@margin, px); }
}
.arrow(left, @w: 10px, @color, @y: 50%) {
position: relative;
&:before { position: absolute; right: 100%; top: @y; content: " "; height: 0; width: 0; pointer-events: none; border-style: solid; border-color: transparent; border-right-color: @color; border-width: unit(@w, px); @margin: -@w; margin-top: unit(@margin, px); }
}
// 三角形箭头气泡效果, 带边框
.arrow-with-border(top, @w: 10px, @color, @border-w: 1px, @border-color, @x: 50%) {
position: relative;
&:before, &:after { bottom: 100%; left: @x; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-style: solid; border-color: transparent; }
&:after { border-bottom-color: @color; border-width: unit(@w, px); @margin: -@w; margin-left: unit(@margin, px); }
&:before { border-bottom-color: @border-color; @arrbo: @w+@border-w; border-width: unit(@arrbo, px); @margin-bo: -@arrbo; margin-left: unit(@margin-bo, px); }
}
.arrow-with-border(bottom, @w: 10px, @color, @border-w: 1px, @border-color, @x: 50%) {
position: relative;
&:before, &:after { top: 100%; left: @x; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-style: solid; border-color: transparent; }
&:after { border-top-color: @color; border-width: unit(@w, px); @margin: -@w; margin-left: unit(@margin, px); }
&:before { border-top-color: @border-color; @arrbo: @w+@border-w; border-width: unit(@arrbo, px); @margin-bo: -@arrbo; margin-left: unit(@margin-bo, px); }
}
.arrow-with-border(left, @w: 10px, @color, @border-w: 1px, @border-color, @y: 50%) {
position: relative;
&:before, &:after { top: @y; right: 100%; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-style: solid; border-color: transparent; }
&:after { border-right-color: @color; border-width: unit(@w, px); @margin: -@w; margin-top: unit(@margin, px); }
&:before { border-right-color: @border-color; @arrbo: @w+@border-w; border-width: unit(@arrbo, px); @margin-bo: -@arrbo; margin-top: unit(@margin-bo, px); }
}
.arrow-with-border(right, @w: 10px, @color, @border-w: 1px, @border-color, @y: 50%) {
position: relative;
&:before, &:after { top: @y; left: 100%; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-style: solid; border-color: transparent; }
&:after { border-left-color: @color; border-width: unit(@w, px); @margin: -@w; margin-top: unit(@margin, px); }
&:before { border-left-color: @border-color; @arrbo: @w+@border-w; border-width: unit(@arrbo, px); @margin-bo: -@arrbo; margin-top: unit(@margin-bo, px); }
}
///------------------------------------- ├ 组件 ┆ └------------------------------------/
// 吸顶导航
.fix-header(@h: 70px) {
.fixed();
top: 0;
left: 0;
width: 100%;
height: @h;
z-index: 1000;
// background-color: rgba(256, 256, 256, .92);
// border-bottom: 1px solid rgba(7, 17, 27, 0.1);
// box-shadow: 0px 0px 20px rgba(0,0,0,0.2);
}
// 吸底导航
.fix-header(@h: 70px) {
.fixed();
left: 0;
bottom: 0;
width: 100%;
height: @h;
z-index: 1000;
}
// 输入框
.input-text() {
display: block;
width: 100%;
padding: 4px 8px;
font-size: 14px;
line-height: 1.42858;
color: #333;
border: 1px solid #ddd;
background-color: #fff;
border-radius: 3px;
}
// 分割线
// |/-
.separator() {
margin: 0 10px;
color: #999;
font-size: 14px;
}
// 分割线 / (面包屑导航)
.separator2() {
&:before {
padding: 0 5px;
color: #ccc;
content: "/\00a0";
}
}
//
// 支付宝：我也是有底线的
.hr() {
height: 1px;
margin: 10px 0;
border: 0;
clear: both;
background-color: #e2e2e2;
}
// 改装的 fieldset
//
//返璞归真
.fieldset() {
border-color: #d2d2d2;
border-width: 1px 0 0;
border-style: solid;
legend {
padding: 0 20px;
text-align: center;
font-size: 20px;
font-weight: 300;
}
}
// 引用区块（模仿 Layui）
//
//Lorem ipsum dolor sit amet.
.blockquote() {
margin-bottom: 10px;
padding: 15px;
line-height: 22px;
border-left: 5px solid #009688;
border-radius: 0 2px 2px 0;
background-color: #f2f2f2;
}
// 徽章 (椭圆、小圆点)
// 10
.badge(...) {
position: relative;
display: inline-block;
font-size: 12px;
color: #fff;
background-color: #FF5722;
}
.badge(ellipse) {
min-width: 8px;
height: 18px;
padding: 2px 6px;
text-align: center;
line-height: 18px;
border-radius: 9px;
}
.badge(dot) {
width: 8px;
height: 8px;
border-radius: 50%;
}
// 关闭按钮
// ×
.close() {
position: relative;
-webkit-appearance: none;
padding: 0;
cursor: pointer;
background: 0 0;
border: 0;
font-size: 20px;
font-weight: 700;
line-height: 1;
color: #000;
text-shadow: 0 1px 0 #fff;
filter: alpha(opacity=20);
opacity: .2;
&:hover {
color: #000;
text-decoration: none;
cursor: pointer;
filter: alpha(opacity=50);
opacity: .5;
}
&:before {
content: '';
position: absolute;
top: -10px;
left: -10px;
right: -10px;
bottom: -10px;
}
}
// 1 像素边框问题
.onepx(...) {
position: relative;
&:after {
content: '';
display: block;
position: absolute;
left: 0;
width: 100%;
border-top: 1px solid rgba(7, 17, 27, 0.1);
transform: scaleY(0.5);
}
}
.border-l(@width){
    border-left:@width;
}
.border-l(@width;@style;@color){
    border-left:@width @style @color;
}
.border-r(@width){
    border-right:@width;
}
.border-r(@width;@style;@color){
    border-right:@width @style @color;
}
.border-t(@width){
    border-top:@width;
}
.border-t(@width;@style;@color){
    border-top:@width @style @color;
}
.border-b(@width){
    border-bottom:@width;
}
.border-b(@width;@style;@color){
    border-bottom:@width @style @color;
}
//边框
.border(@width) {
    border: @width;
}
.border(@width;@style;@color) {
    border: @width @style @color;
}
.p-t(@width){
    padding-top:@width;
}
.p-r(@width){
    padding-right:@width;
}
.p-b(@width){
    padding-bottom:@width;
}
.p-l(@width){
    padding-left:@width;
}
.pd(@width){
    .p-t(@width);.p-r(@width);.p-b(@width);.p-l(@width);
}
.pd(@top;@right;@bottom;@left){
    .p-t(@top);.p-r(@right);.p-b(@bottom);.p-l(@left);
}
.m-t(@width){
    margin-top: @width;
}
.m-r(@width){
    margin-right: @width;
}
.m-b(@width){
    margin-bottom: @width;
}
.m-l(@width){
    margin-left: @width;
}
.mg(@width){
    .m-t(@width);.m-r(@width);.m-b(@width);.m-l(@width);
}
.mg(@top;@right;@bottom;@left){
    .m-t(@top);.m-r(@right);.m-b(@bottom);.m-l(@left);
}
.onepx(top) { &:after { top: 0; } }
.onepx(bottom) { &:after { bottom: 0; } }
.onepx-easy(top, @color: #ccc) { box-shadow: inset 0px -1px 1px -1px @color; }
.onepx-easy(bottom, @color: #ccc) { box-shadow: inset 0px 1px 1px -1px @color; }


//页面css开始
body{.fz(15px);.bgcolor(#fff);}
.mui-content{.bgcolor(#fff);}
ul{list-style: none;.pd(0);.mg(0);}
#cnzz_stat_icon_1260421959{display:none;}
.my-slider-indicator{.pd(0,10px,0,10px);}
.my-slider-indicator .mui-indicator{.bgcolor(#fff);.box-shadow(0,0,1px,1px,rgba(0,0,0,.1),outset);.w(10px);.radius(4px);}
.chanpin-box.mui-grid-9{.bgcolor(#fff);.mg(10px);.w(auto);.border(0);.radius(3px);overflow: hidden;}
.chanpin-box.mui-grid-9 .mui-table-view-cell {
    .pd(0);vertical-align: middle;.border-r(0);.border-b(0);
}
.my-table-view-order{
  &>li{position: relative;.p-b(0);}  
  & .mui-col-xs-6{.fz(15px);}
  &>li:after{content: '';.position(absolute;auto;14px;0;14px);.h(1px);.bgcolor(#ccc);-webkit-transform: scaleY(.5);}
}
#pro-menu{
    top: 0;.border(0);.border-b(1px;solid;rgba(0,0,0,.1));.radius(0);.pd(0);
    .mui-control-item{
        span.iconfont{position: absolute;left: 50%;top: 5px;-webkit-transform: translateX(-50%);font-size: 20px;}
        .color(#999);
        .border-l(0);
        position: relative;
        vertical-align: bottom;
        .lh(64px;34px);
        .fz(14px);
        &:after{content:'';.position(absolute;auto;auto;0;50%);.m-l(-14px);.w(28px);.h(1px);.bgcolor(transparent);.h(2px);};
        &:first-child{.border-l(0)}
        &.mui-active{.bgcolor(#fff);&:after{.bgcolor(#5882f7)}.color(#5882f7);};
    }
}
.steps{
    &>li{
        float: left;position: relative;.bgcolor(#999);.size(55px;55px);.lh(55px);.center(text-x);.radius(55px);.color(#fff);.mg(0,5px,0,5px);
    }
    &>li.active{.bgcolor(#5882f7);}
}
.pro-cp-list{
    position: relative;.p-l(3.5em);
    &:before{content: '采购产品：';.position(absolute,0,auto,auto,0);.fz(2px);.color(#999);}
    &>li{.fz(12px);.color(#999);}
}
.pro-bz-list{
    position: relative;.p-l(3.5em);
    &:before{content: '提货备注：';.position(absolute,0,auto,auto,0);.fz(2px);.color(#999);}
    &>li{.fz(12px);.color(#999);}
}
.express{.color(#ed6a5e);}
.my-confirm-btn{
    min-width: 100px;
    .radius(20px);.border(1px,solid,#63ccde);.color(#63ccde);.pd(6px,14px,6px,14px);
    &:active{.bgcolor(#63ccde);.color(#fff);}
}
.pro-li-tit{.m-b(5px);}
.top-center{vertical-align:top !important;}
.middle-center{vertical-align:middle !important;}
.dalog-center{.w(320px);.h(240px);.position(absolute,50%,auto,auto,50%);.m-l(-160px);.m-t(-120px);.bgcolor(#fff);.center(text-x);.pd(15px,0,0,0);.radius(10px);
& .title{font-size: 18px;}
& .mui-table-view-cell.mui-active{.bgcolor(#fff);}
}
.dalog-btn{.border(1px,solid,#5882f7);.w(80px);.h(80px);.lh(80px,80px);display: inline-block;.radius(50%);.mg(35px,0,10px,0);
& .iconfont{font-size: 35px;}
}
.my-view-no:after,.my-view-no:before{display: none;}
.my-table-view-order{
    &>li .my-view-no{.pd(10px,10px,10px,0);}
    &>li .my-view-no:after,&>li .my-view-no:before{display: none;}
}
#pullrefresh_list{top: 125px;}
.search-text{margin-bottom: 0 !important;font-size: 14px;border: 1px solid rgba(0,0,0,.1) !important;border-radius: 7px !important;}
.search-text::-webkit-input-placeholder {color:#ddd;}
.my-sousuo{position: absolute;right:0;top: 10px;padding: 10px 15px;color: #666;font-size: 22px;}
.my-sousuo.active{color: #5882f7;}
.no-after:after{display: none;}
.mui-pull-caption{.fz(12px);}
.cl-green{.color(#62c755);}
.cl-blue{.color(#5882f7);}
.my-table-view-order .cl-green,.my-table-view-order .cl-red{font-size: 12px;}
.my-table-view-order h5{color: #333;margin: 7px 0;}
.order-content{margin: 10px 0;}
.add-btn{
    .color(#5882f7);.hide();.border(0);.bgcolor(#dee6fd);.w(60px);.center(text-x);.lh(60px,1.2);.pd(12px;10px;10px;10px);.radius(60px);.position(fixed,auto,12px,30px,auto);z-index: 3;
    &.active{.show(block);};
}
.chanpin-text{text-align: left;.pd(0,10px,0,10px);}
.chanpin-box{
    &.mui-grid-9 .mui-table-view-cell>a:not(.mui-btn){.pd(0);}
    & .mui-col-xs-6{display: inline-block;}
    & .bg-blue{.bgcolor(#a8ebf7);line-height: 0;}
}
.add-dalog{.position(fixed,0,0,0,0);.w(100%);.h(100%);.bgcolor(rgba(0,0,0,.5));z-index: 5;.hide();
&.active{.show(block);}
}


.my-btn-red{width: 90px;padding:5px 10px;line-height: 1.42 !important;background: #e4004d;color: #fff;border: 0;border-radius: 5px;}
.prev{position: absolute;left:0;top: 50%;margin-top: -20px; width: 40px;height: 40px;line-height: 30px; padding:5px 0;text-align: left;font-size:30px;color: #ccc;}
.next{position: absolute;right:0;top: 50%;margin-top: -20px; width: 40px;height: 40px;line-height: 30px; padding:5px 0;text-align: right;font-size:30px;color: #f64e78;}
.my-table-view {background-color:transparent;padding: 0 10px 0 0 !important;}
.my-table-view .mui-table-view-cell{padding: 5px 0 0 14px !important;}
.my-table-view:before{height: 0;}
.my-table-view:after{height: 0;}
.my-content-padded{overflow: hidden;}
.my-content-padded img{width: 100%;border-radius: 5px;}
.iconfont .mui-badge {font-size: 10px;line-height: 1.3;position: absolute;top:-3px;right: 28%;padding: 1px 5px;color: #fff;background: red;}
.mui-bar-tab~.mui-content{padding-bottom: 50px !important;}
#footer-bar{background-color: #fff;-webkit-box-shadow: 0 0 1px rgba(0,0,0,.45);box-shadow: 0 0 1px rgba(0,0,0,0.45)}
#footer-bar .mui-tab-label{font-size: 12px;}
#footer-bar .mui-tab-item{vertical-align: bottom;color:#a6c8ce;}
#footer-bar .mui-tab-item.mui-active{color: #24cae9;}
#footer-bar .mui-tab-item.mui-active .icon-home:before{content: "\e668";}
#footer-bar .mui-tab-item.mui-active .icon-gouwuche:before{content: "\e66a";}
#footer-bar .mui-tab-item.mui-active .icon-dingdan:before{content: "\e664";}
#footer-bar .mui-tab-item.mui-active .icon-vip:before{content: "\e669";}
.loading-bg{width: 100%;min-width:100%;height: 100%;min-height:100%; background-color:#F0F0F0;position: fixed;left: 0;top: 0;z-index: 999;}
.loading-bg .mui-loading{margin-top: 50%;text-align: center;color: #aaa;}
.go-index{float: left;width: 35%;margin-right:1%;}
.go-index img{width: 85%;padding-top: 5px;margin-left: 12px;max-height: 42px;max-width: 135px;}
.header{padding: 7px 0;height: 55px;}
.marquee-show{position: fixed;top: 0;left: 0;background: rgba(255,255,255,.7);z-index: 99;white-space: nowrap;height: 40px;line-height: 40px;padding: 0 10px;color: #ba405b;width:100%;}
.marquee-show div{position: fixed;top: 0;left: 0;;height: 40px;line-height: 40px;width:100%;background: url(http://static.iamberry.com/watero/images/shop/marquee.png) center center /100% auto no-repeat;}

.marquee_cart{padding: 8px 10px;
    background: #fff;
    color: #ba405b;
    border-top: 1px solid rgba(0,0,0,.1);}
.search-box .mui-input-row:first-child{display: inline-block;width: 58%;}
.search-box .mui-input-row:last-child{display: inline-block;width:37%;}
.search-box .mui-input-row:last-child input{height: 39px !important;}
.search-box .mui-input-row input{margin-bottom: 0;}
.my-search{width: 50%;display: inline-block;padding-top: 3px;}
.my-search.mui-active{color: #55c0dc;}
.mui-bar .my-search input[type=search]{margin:2px 0;padding:16px 25px;border-radius: 25px !important;background-color: #d8edf4;color: #000;}
.my-search .mui-placeholder .mui-icon-search{margin-left:0;margin-right:0;color: #55c0dc;}
.my-search .mui-placeholder{text-align: right;}
.box-list-card{display: inline-block;width: 14%;float: right;padding:10px 0;color: #55c0dc;text-align: center;}
.mui-bar-nav~.mui-content {padding-top: 55px;}
.wh-100{width:100px !important;max-width:100px !important; height:100px !important;line-height:100px;margin-top: 0;overflow: hidden;}
.wh-80{width: 80px !important;max-width: 80px !important; height: 80px !important;margin:5px 5px 0 5px;overflow: hidden;display: inline-block;text-align: center;}
.wh-80 img{height:80px;}
.wh-50 {width: 50px !important;max-width: 50px !important;height: 50px !important;line-height: 50px;border-radius: 50%;margin: 0;}
.icon-r-c{color:#aaa;position:absolute;right:8px;top:50%;-webkit-transform: translateY(-50%);}
.mui-icon-forward{color:#aaa;}
.gwc-tit {color: #333;font-size: 15px;}
.wt-space {white-space: pre-wrap !important;}
.gwc-pp {color: #999;}
.ft-12 {font-size: 12px;}
.ft-13 {font-size: 12px;}
.price-sp {color: #e4004d;font-size:16px;margin-right: 15px;}
.shop-price{padding:0;text-align: left;}
.shop-price s{font-size: 12px;color: #d0d0d0;}
.tab-with-chanpin-list {background: #fff;border: 0;margin-top: 55px;z-index: 10;}
.tab-with-chanpin-list .mui-control-item {
    line-height: 1;
    height: 50px;
    vertical-align: bottom;
    border: 0;
    border-bottom: 2px solid transparent;
    color: #bfbfbf;
    background-color: transparent !important;
    padding-bottom: 3px;
    position: relative;
}
.tab-with-chanpin-list .iconfont{
    min-width: 25px;
    min-height: 25px;
    position: absolute;
    top: 2px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}
.tab-with-chanpin-list .mui-control-item.mui-active {
    background-color: transparent !important;
    border-bottom: 2px solid #55c0dc !important;
    color: #55c0dc;
}
#pullrefresh_chanpin_list{padding-top: 106px;}
#pullrefresh_chanpin_list .mui-table-view-cell{border-bottom: 10px solid #f5f7f9;margin-right: 0;}
#pullrefresh_chanpin_list .mui-table-view-chevron .mui-table-view-cell:last-child{border-bottom: 0;}
#pullrefresh_chanpin_list .mui-table-view-cell:after{display: none;}

#pullrefresh_chanpin_list .mui-grid-view{padding: 0;}
#pullrefresh_chanpin_list .mui-grid-view .mui-table-view-cell>a{background: #fff;}
#pullrefresh_chanpin_list .mui-grid-view .mui-table-view-cell:nth-of-type(odd){border-right: 5px solid #f5f7f9;}
#pullrefresh_chanpin_list .mui-grid-view .mui-table-view-cell:nth-of-type(even){border-left: 5px solid #f5f7f9;}
#pullrefresh_chanpin_list .mui-grid-view .mui-table-view-cell:nth-of-type(odd):last-child{border-bottom: 0;}
#pullrefresh_chanpin_list .mui-table-view-chevron .wh-100{padding: 8px 0;}

.btn-box{display: inline-block;position: absolute;right:0;bottom:12px;width:100%;text-align: left;padding-left:120px;}
#pullrefresh_chanpin_list .mui-grid-view .btn-box{position: relative;bottom: auto;right: auto; padding-left: 0;}
.my-btn-orange{background: #fff;border: 1px solid #55c0dc;border-radius:4px;color: #55c0dc;}
.my-btn-orange:active{background:#ffa13d !important;}
#pullrefresh_chanpin_list .my-btn-danger{width: 55%;}
.my-btn-danger{background: #55c0dc;border: 1px solid transparent;border-radius: 4px;color: #fff;padding: 6px 18px;margin-right: 8px;}
#pullrefresh_chanpin_list .mui-grid-view .my-btn-danger{margin-right: 0;width: 70%;margin-bottom: 15px;}
.my-btn-danger:active{background: #236d89 !important;}
.my-btn-joincart{border:1px solid #55c0dc;color: #55c0dc;padding-left: 5px;padding-right:4px;font-size: 22px;}
#pullrefresh_chanpin_list .mui-grid-view .my-btn-joincart{float: right;margin-right: 4%;}
.mui-table-view-cell:after{left: 0;}
.mui-content>.mui-table-view:first-child{margin-top: 0;}
.food-tt {color: #333;padding: .5em 0;background: #fff;}
.food-tt>div:first-child {float:left;width: 78%;padding: 0 .8em;}
.food-tt>div:last-child {display: inline-block;width: 20%;text-align: center;position: relative;padding-top: 5px;max-width: 80px;font-size: 16px;}
.del-s {font-size: 12px;color: #ccc;position: absolute;right: 5px;}
.bg-f{background: #fff;}
.cl-baoyou{color: #e4004d; margin-left: 10px;font-size:24px;}
.food-tt>div:last-child:after {content: '';position: absolute;left: 0;top: 10%;width: 1px;height: 80%;background-color: rgba(0,0,0,.15);}
#detail-slider{border-bottom: 1px solid rgba(228,0,77,.5);}
#tabbar-chanpin-details{background: #fff;border: 0;height: 50px;}
#tabbar-chanpin-details .mui-control-item{color:#444;font-weight: 500;border-left: 0;border-bottom: 2px solid transparent;line-height: 50px;font-size: 18px;}
#tabbar-chanpin-details .mui-control-item.mui-active{color: #55c0dc;border-bottom: 2px solid #55c0dc;background-color: #fff;}
.go-video{background: #fff3cb;padding: 10px;position: relative;}
.go-video .icon-guanbi{color: #ffb72c;}
.see-2wm{background: #fef6df;padding: 10px;position: relative;color: #e4004d;}
.btn-see-2wm{position: absolute;right: 10px;top: 14px;color: #444;font-size: 14px;}
.see-2wm .icon-guanbi{color: #e4004d;}
.video-right{position: absolute;right:0;top:0;width: 52px;padding: 13px 10px 10px 30px;}
.video-right img{width: 100%;}
.chanpin-ditails-dic{padding: 10px;background: #fff;margin: 10px 0 65px 0;color: #444;}
.chanpin-ditails-dic ul li{padding: 3px 0;}
.buy-footer {position: fixed;bottom: 0;left: 0;height: 55px;background-color: #f0f0f0;width: 100%;padding: 0;display: table;text-align: center;}
.buy-footer>div:first-child {display: table-cell;width: 40%;border-top: 1px solid #55c0dc;vertical-align: middle;}
.buy-footer>div:first-child img{width: 80%;padding-top: 3px;}
.buy-footer>div:nth-of-type(2) {display: table-cell;width: 30%;background: #a6c8ce;font-size: 18px;color: #fff;vertical-align: middle;}
.buy-footer>div:last-child {display: table-cell;width: 30%;background: #55c0dc;font-size: 18px;color: #fff;vertical-align: middle;}
#gwc_list .mui-table-view-cell {padding: 15px 10px;}
.gwc_null {padding: 12% 0 8% 0;text-align: center;display: none;}
.shoping-tt {padding: 0 12px 60px 12px;position: relative;}
.shoping-tt .left img,.shoping-tt .right img{width: 100%;}
.shoping-tt .left{position: absolute;left: 0;top: 0;font-size: 0;}
.shoping-tt .right{position: absolute;right: 0;top: 0;font-size: 0;}
.tt-yf {position: relative;padding: .8em 12px;}
.tt-yf .my-btn-danger{position: absolute;right: 12px; top:6px;}
.del {position: absolute;right: 8px;bottom:16px;}
.price_sp {color: #e4004d;font-size: 18px;margin-right: 10px;}
.ft-24 {font-size: 28px;}
.mt-7 {margin-top: .7em;}
.jifen {position: absolute;left: 0;top: 0;width: 50px;height: 50px;}
.jifen img {width: 100%;}
.buy-footer1 {position: fixed;bottom: 0;left: 0;height: 50px;background-color: #f0f0f0;width: 100%;padding: 0;}
.price{padding: 4px 0;}
.price small{color: #666;}
.buy-footer1:after {position: absolute;top: 0;left: 0;content: '';height: 1px;width: 100%;background-color: #55c0dc;-webkit-transform: scaleY(.5);transform: scaleY(.5);}
.tb-clearing {width: 100%;}
.tb-clearing tr td:first-child {width: 18%;text-align: center;min-width: 2.5em;}
.quanxuan {position: relative;}
.tb-clearing tr td:nth-of-type(2) {min-width: 2.5em;}
.t-r {text-align: right !important;}
.tb-clearing tr td:nth-of-type(3) {min-width: 6em;max-width: 10em;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.count_price_box {color: #e4004d;text-align: center;padding-top: 5px;}
.tb-clearing tr:first-child td:last-child {text-align: center;}
.ft-14 {font-size: 14px;}
.quanxuan:after {content: '';position: absolute;width: 1px;height: 70%;background-color: #ababab;right: 0;top: 15%;-webkit-transform: scaleX(.5);transform: scaleX(.5);}
.mt-mr-che {margin:2.5em .3em 0 0;}
.add_gwc{padding: 18px 25px;border-radius: 0;background-color: #55c0dc !important;color: #fff;border: 0;}
.add_gwc1 {padding: 18px 25px;border-radius: 0;background-color: #ababab;color: #fff;border: 0;}
.add_gwc:active{color: #fff;background-color:#ff1b68;}
#pullrefresh_chanpin_list .mui-table-view-chevron .mui-table-view-cell>a:not(.mui-btn) {margin-right: -115px;}
#pullrefresh_chanpin_list .mui-table-view .mui-media-object.mui-pull-left {margin-right: 5px;}
#pullrefresh_chanpin_list .shop-price {padding:0;text-align: left;}
#pullrefresh_chanpin_list .mui-grid-view .shop-price {padding:0;text-align:center;}
.bd-all-1{border: 1px solid rgba(0,0,0,.1);}
.gwc_null h3 {color: #c3c3c3;padding: 0 0 20px 0;font-size:20px;}
.gwc_null img{width:80px;}
.mui-pull {font-weight: 100;}
.ml-5 {margin-left: .5em;}
.shipping_address {padding: 0 1em 0 0;margin-top: .5em;line-height: 1.5;}
.price_r {position: absolute;bottom: 8px;text-align: right;right: 1em;color: #666;}
.line-color {background: url(http://static.iamberry.com/watero/images/shop/line-color.png) left bottom no-repeat;background-size: 100% 4px;}
.line-color>a:not(.mui-btn).mui-active{background-color: transparent !important;}
.more {border-bottom: .6em solid #f0f0f0;}
.ipt-yhq {width: 38% !important;height: 30px !important;padding: 0 !important;margin-bottom: 0 !important;text-align: center;}
.how_to_get{color: #666;float: right;padding: 4px 0;}
.how_to_get .d_price{color:#e4004d;padding-left: 3px;}
.how_to_get .d_price:before{content: '妤�';}
.cl-red{color: #ed6a5e !important;}
.pay_weixin {text-align: center;background: #fff;padding:0;position: fixed;width: 100%;bottom: 0;}
.pay_weixin>div {padding: 0 0 10px 0;}
.btn-weixin-pay{margin-bottom: 0 !important;}
.my-btn-green{background: #50c747;color: #fff;padding:10px 12px;font-size: 15px;border: 0;}
.my-btn-green:active{background: #63fd57;color: #fff;}
.clearing-count{padding: 15px;text-align: center;margin-bottom: 55px;background: #fff;border-bottom: 30px solid #efeff4;color: #666;font-size: 20px;}
.fenxiao-clearing-count{padding: 10px;text-align: center;background: #fff;}
.fenxiao-clearing-count>div{padding-bottom: 8px;}
.price_l {position: absolute;bottom: 8px;text-align: left;}
.pl-win-tt {text-align: left;text-indent: 2.5em;border-top: 1px solid rgba(0,0,0,.1);padding: 1em 0 0 0;font-size: 18px;}
.pl-win-tt>div{padding:10px 0;}
.pl-win-tt .sp{color: #48990e;}
.pay_win_list{padding: 10px 10px 10px 2.5em;}
.pay_win_list li{color: #666;padding: 3px 0;}
.shopping-cart-list .mui-table-view-cell{padding: 11px 10px;}
.my-order-list {padding: 10px 0 5px 0;}
.my-order-list .mui-table-view-cell{padding: 5px 10px;}
.my-order-list .mui-table-view-cell:after{height: 0;}
.line-clamp-3{max-height: 4em;overflow: hidden; text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;}
.line-clamp-2{max-height:38px;white-space: pre-wrap; overflow: hidden; text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
.order-price{white-space: nowrap;text-align: right;padding-left: 4px;}
.order-price:before{content: '妤�';}
.my-table-order{font-size: 14px;background: #fff;width: 100%;}
.my-tb-order{font-size: 14px;background: #fff;width: 100%;}
.my-table-order tr td:last-child{padding-right: 10px;}

.icon-allorder{padding-top: 2px;position: relative;border-bottom: 2px solid rgba(0,0,0,0);}
.icon-allorder.mui-active{color:#55c0dc !important;border-bottom: 2px solid #55c0dc;}
.icon-allorder>span:first-child{min-width: 25px;min-height: 25px;position: absolute;top:2px;left: 35%;}


.icon-topay.mui-active{color:#55c0dc !important;border-bottom: 2px solid #55c0dc;}
.icon-topay>span:first-child{min-width: 25px;min-height: 25px;position: absolute;top:2px;left: 35%;}
.icon-topay{padding-top: 2px;position: relative;border-bottom: 2px solid rgba(0,0,0,0);}
.my-scroll-order:after,.my-scroll-order:before{display:none;}

.icon-todelivery.mui-active{color:#55c0dc !important;border-bottom: 2px solid #55c0dc;}
.icon-todelivery>span:first-child{min-width: 25px;min-height: 25px;position: absolute;top:2px;left: 35%;}
.icon-todelivery{padding-top: 2px;position: relative;border-bottom: 2px solid rgba(0,0,0,0);}

.icon-delivery.mui-active{color:#55c0dc !important;border-bottom: 2px solid #55c0dc;}
.icon-delivery>span:first-child{min-width: 25px;min-height: 25px;position: absolute;top:2px;left: 35%;}
.icon-delivery{padding-top: 2px;position: relative;border-bottom: 2px solid rgba(0,0,0,0);}
.mr-5{margin-right: 5px;}
.btn-zu .mui-btn{margin-right:0;}
.btn-zu .mui-btn:last-child{margin-right: 8px;}
.my-scroll-order{list-style: none;margin: 0;padding: 0;}
.my-scroll-order>li{border-bottom:8px solid #f0f0f0;}
.my-scroll-order>li:first-child{border-top:8px solid #f0f0f0;}
.vip-tt {position: relative;line-height: 0;}
.vip-tt>img {width: 100%;}
.tx {position: absolute;left:1em;top: 50%;width:80px;height:80px;display: inline-block;-webkit-transform: translateY(-50%);transform: translateY(-50%);border-radius: 50%;background-color:#55c0dc;padding: 4px;}
.tx>img {width: 100%;border-radius: 50%;}
.nikname {position: absolute;left: 30%;width:68%;top: 50%;color: #fff;-webkit-transform: translateY(-52%);transform: translateY(-52%);line-height: 1.5;}
.more_vip{}
.text-center{position: absolute;left: 50%;top: 50%;-webkit-transform: translateX(-50%) translateY(-50%);}
.my-dl-tb-order{width: 100%;font-size: 14px;white-space: nowrap;}
.my-dl-tb-order tr td:last-child{text-align: right;}
.mui-pull-bottom-pocket, .mui-pull-top-pocket{visibility: visible;}
.my-btn-link {padding-top: 6px;padding-bottom: 6px;color: #444;border: 0;background-color: transparent;}
.my-btn-link2 {padding-top: 10px;padding-bottom:10px;color: #444;border: 0;background-color: transparent;position: absolute;left: 25px;}
.my-btn-link:active{background-color: #fff !important;color: #444 !important;}
.my-input{margin-bottom: 0 !important;background-color: #fff !important;font-size:15px;text-indent: 2.5em;}
.ft-18{font-size: 18px;}
.daili-2wm-box{position: absolute;width: 100%;left: 0;top:0;}
.user-2wm{width: 50%;margin:30px auto;}
.user-2wm img{width: 100%;}
.user-2wm-dic{width: 75%;margin: 0 auto;border: 1px solid #e4004d;border-radius: 5px;padding: 10px;color: #444;background: #f0f1ec;}
.btn-share-box{width: 75%;margin:20px auto;}
.my-pull {
    font-weight: 700;
    position: absolute;
    right: 0;
    top: 0;
    left: 0;
    text-align: center;
    color: #777;
    padding: 20px 0 50PX 0;
    z-index: 100;
    background: #efeff4;
}
.my-badge-blue{color:#007aff !important;}
.my-badge-green{color:#4cd964 !important;}
.my-badge-red{color: #dd524d !important;}
.my-badge-white{color: #fff !important;}
.btn-fenxiao-weixin-pay{width: 50% !important;}
.my-table-view1{padding: 0 0 0 0 !important;}
.my-table-view1 .mui-table-view-cell{padding: 6px 0px !important;}
#chanpin-slider .tit{color: #404040;font-size: 16px;line-height: .9;padding:0 0 2px 0;}
#chanpin-slider .dic{color: #898989;font-size: 12px;padding:0 0 2px 0;}
#chanpin-slider .price_box{padding: 8px 0 12px 0;}
#chanpin-slider .dic-bt{color: #fff;border-radius:10px;padding: 3px 7px;font-size: 12px; background-color: #ff718f;}
#chanpin-slider .mui-slider-group .mui-slider-item img {width: 45%;float: right;}
.chanpin-cell{position:absolute;right:30%;top:50%;width:60%;height:130px;-webkit-transform: translateY(-50%);transform: translateY(-50%);}
.chanpin-cell>div{position: relative;}
.mui-slider-indicator .mui-indicator {
    -webkit-box-shadow: 0 0 1px 1px rgba(0,0,0,.1);
    box-shadow: 0 0 1px 1px rgba(0,0,0,.1);
    width: 10px;
    border-radius: 2px;
     background: #fff;
}
.mui-slider-indicator .mui-active.mui-indicator {
    background: #55c0dc;
    -webkit-box-shadow: 0 0 1px 1px rgba(0,0,0,0);
    box-shadow: 0 0 1px 1px rgba(0,0,0,0);
}

.my-btn-gray{background: #ccc;border: 0;border-radius: 10px;color: #fff;}
.mui-control-content .mui-loading{margin-top: 50px;text-align: center;}
.mui-popup{position: fixed;}
.wh-100 img{height: 100%;}
#chanpin-slider .opacity_0{opacity: 0;}
#chanpin-slider .mui-slider-group .mui-slider-item{background:#fff;}
#chanpin-slider .mui-slider-item:first-child .opacity_0{opacity:1;}
#banner-slider,#chanpin-slider,#jifen-daili-menu,#advs_banner{display:none;}
.icon-gouwuche .mui-badge{display:none;}
.my-btn-block {font-size: 18px;display: block;width: 100%;padding: 6px 12px;border-radius: 4px !important;}

.title1{color:#e70444;width:75px;height:25px;padding:5px 5px;}
.font_text_yahei{font-family: "Microsoft YaHei" ! important;}
.juli_span{color:#666;}
article, section, time, aside {display: block;}
.point-time {content: "";position: absolute;width: 13px;height: 13px;top: 3px;left: 20px;background: #1c87bf;margin-left: -4px;border-radius: 50%;}
.point-red {background-color: #e70444;}
.content {width: 100%;margin: 10px auto;}
.content article {position: relative;}
.content article section {padding: 0 0 7px;position: relative;}
.content article section:before {content: "";width: 1px;top: 16px;bottom: -17px;left: 22px;background: #e70444;position: absolute;}
.content article section:last-child:before {bottom:0;}
.content article section time {display: block;}
.content article section time > span {display: block;margin-left: 45px;color:#e70444;}
.content article section aside {color: #3a3a38;margin-left:45px;margin-right: 5px;}
.content article section aside p{margin-bottom: 0;font-size:13px;}
.content article section aside .things{color:#222;margin-top: 5px;}

.approval-title{font-size: 16px;font-weight: bold;padding: 10px 0;}
.approval-title.line{border-top:1px solid rgba(0,0,0,.1);}
.view-none:after,.view-none:before,.view-none .mui-table-view-cell:after{display: none;}
.radius-badge{width: 50px;height: 50px;line-height: 50px;background: #fff;border:1px solid #55c0dc;padding: 0;color: #55c0dc;font-size: 15px;margin-bottom: 10px;}
.order-Purchase{font-size: 12px;border-radius: 4px;background-color: #f7f7f7;margin: 0 5px;}
.order-Purchase .mui-table{margin:0 0 8px 0;}
.order-Purchase .mui-table:last-child{margin-bottom: 0;}
.my-btn-link{color: #55c0dc;text-decoration: underline;margin-top: 10px;}
.btn-blue-approval{border-radius: 20px;border:1px solid #55c0dc;color: #fff;background-color: #55c0dc;width: 150px;margin: 10px 0;}
.beizhu:before{content: '备注信息：';position: absolute;left: 0;top: 0;}.beizhu{white-space: pre-wrap;padding-left: 5em;font-size: 12px;position: relative;}
.a-express{font-size: 12px;margin-top: 0 !important;}
.solid-table{border-collapse:collapse;border: 1px solid rgba(0,0,0,.1);width: 100%;background-color: #fff;text-align: center;margin: 10px 0 8px 0;}
.solid-table td,.solid-table th{border-collapse:collapse;border: 1px solid rgba(0,0,0,.1);padding: 3px 0;}
.solid-table td{font-size: 12px;color: #666;}
.my-order-view{border: 1px solid rgba(0,0,0,.1);border-radius: 10px;padding: 10px;width: auto;}
.my-order-view li{font-size: 12px;margin: 7px 0;}
@media (device-height:480px) and (min-width:320px) and (-webkit-min-device-pixel-ratio:2){

}
@media (device-height:568px) and (min-width:320px) and (-webkit-min-device-pixel-ratio:2){

}