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