///------------------------------------- ├ 布局 ┆ └------------------------------------/ // 盒子宽高 .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){ }