html { font-size: 20px; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; font-family: sans-serif; } .text-yellow { color: #feb312; } .text-orange { color: #ff741d; } .text-blue { color: #50b6fe; } .text-red { color: #fd5454; } .diy-richtext { min-height: 20px; display: block; margin: 0; padding: 0; height: auto; overflow: hidden; } .diy-banner { display: block; width: 375px; overflow: hidden; position: relative; } .diy-banner img { width: 100%; object-fit: initial; display: none; } .diy-banner img:first-child { display: block; } .diy-banner .dots { height: 14px; padding: 0 10px; position: absolute; left: 0; right: 0; bottom: 10px; opacity: 0.5; } .diy-banner .dots.left { text-align: left; } .diy-banner .dots.center { text-align: center; } .diy-banner .dots.right { text-align: right; } .diy-banner .dots.rectangle span { height: 10px; width: 16px; } .diy-banner .dots.square span { height: 10px; width: 10px; } .diy-banner .dots.round span { height: 10px; width: 10px; border-radius: 10px; } .diy-banner .dots span { display: inline-block; } .tips-text{ font-size: 12px; color: #aaaaaa; padding: 2px 5px; } #diy-editor .item-image .selectButton{ position: absolute; bottom: 0px; width: 100%; text-align: center; cursor: pointer; height: 25px; line-height: 25px; background: rgba(0,0,0,.5); color: #FFF; } /*配置栏 小标题*/ .diy-editor .help-block-title{ color: #333; font-size: 15px; text-align: left; padding-left: 20px; position: relative; height: 20px; line-height: 20px; } .diy-editor .help-block-title:after{ content: ''; position: absolute; width: 5px; height: 20px; background: #1AB394; -webkit-border-radius: 30%; -moz-border-radius: 30%; border-radius: 30%; top: 0px; left: 10px; } /*轮播风格2*/ .diy-banner2 .haodiantoutiao { padding: 15px; } .diy-banner2 .hdtt-t { border-top: 0 solid #f6f6f6; display: -webkit-flex; display: flex; justify-content: space-between; } .diy-banner2 .hdtt-t .h1 { font-weight: normal; font-size: 18px; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .diy-banner2 .hdtt-t .p { color: #999; font-size: 12px; margin: 0; margin-top: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .diy-banner2 .hdtt-t-r { display: -webkit-flex; display: flex; align-items: center; } .diy-banner2 .hdtt-t-r .span { font-size: 18px; display: inline-block; } .diy-banner2 .hdtt-t-r .span .em { font-size: 21px; font-style: normal; display: inline; } .diy-banner2 .hdtt-c { width: calc(375px - 30px); margin-top: 15px; overflow: hidden; } .diy-banner2 .goodstop-i { width: 100%; padding: 0; display: -webkit-flex; display: flex; -webkit-justify-content: flex-start; justify-content: flex-start; overflow: hidden; display: none; } .diy-banner2 .goodstop-i:first-child { display: block; } .diy-banner2 .goodstop-i .goodstop-i-a { width: 100%; margin-left: 8px; } .diy-banner2 .goodstop-i .goodstop-i-a:first-child { margin-left: 0; } .diy-banner2 .goodstop-i-t { width: calc(375px - 30px); position: relative; } .diy-banner2 .goodstop-i-t img { width: 100%; display: block; } .diy-banner2 .goodstop-i-c .h1 { height: 21px; line-height: 21px; font-size: 16px; font-weight: normal; margin: 0; margin-top: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .diy-banner2 .goodstop-i-c .h2 { height: 21px; line-height: 21px; font-size: 12px; color: #888; font-weight: normal; margin: 0; margin-top: 10px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } .diy-search { background: #f1f1f2; padding: 10px 10px; } .diy-search .inners { height: 28px; background: #fff; overflow: hidden; } .diy-search.radius .inners { border-radius: 5px; } .diy-search.round .inners { border-radius: 30px; } .diy-search .inners .search-icon { width: 28px; height: 28px; line-height: 24px; text-align: center; font-size: 18px; color: #b4b4b4; } .diy-search .inners .icon { font-size: 17px; } .diy-search { display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; } .diy-search .diy-search-l { height: 28px; line-height: 28px; color: #666; font-size: 15px; padding-right: 40px; -webkit-flex-shrink: 0; flex-shrink: 0; } .diy-search .diy-search-l i { font-size: 16px; font-weight: 600; padding-left: 10px; } .diy-search .diy-search-r { -webkit-flex: 1; flex: 1; display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; } .diy-search .diy-search-r .search-input { -webkit-flex: 1; flex: 1; } .diy-search .inners .search-input { height: 28px; width: 100%; line-height: 28px; font: 12px; color: #999999; } .diy-search .inners .search-input span { padding: 0; } .diy-search .inners.left .search-icon { float: left; } .diy-search .inners.right .search-icon { float: right; } /*搜索风格三*/ .diy-search3 { background-color: #f1f1f1; } .diy-search3-d { height: 40px; line-height: 34px; padding: 5px 15px; display: flex; justify-content: space-between; position: relative; box-sizing: initial; } @keyframes move_wave { 0% {transform: translateX(0) translateZ(0) scaleY(1);} 100% {transform: translateX(-66.66666%) translateZ(0) scaleY(1);} } .search-wave { width: 100%; height: 14px; position: absolute; left: 0; bottom: 0; overflow: hidden; } .search-wave-d { width: 300%; height: 100%; animation: move_wave 4s linear infinite; animation-delay: 0s; display: -webkit-flex; display: flex; justify-content: flex-start; } .search-wave-i { width: 100%; height: 100%; position: relative; } .search-wave-i .image { width: 100%; height: 100%; display: block; } .diy-search3 { overflow: hidden; position: relative; } .diy-search3-l { color: #000; font-size: 16px; font-style: italic; font-family: SimHei; } .diy-search3-r-d { width: 90px; height: 28px; line-height: 28px; color: #808080; font-size: 14px; text-align: center; margin-top: 3px; background-color: #d9d9d9; border-radius: 20px; } .diy-search3-r-d .i { color: #333; font-size: 16px; margin-right: 5px; vertical-align: -1px; } /**/ .fui-goods-group { height: auto; overflow: hidden; background: #f9f9f9; } .fui-goods-item { position: relative; height: auto; padding: 10px; margin-bottom: 1px; border-bottom: 1px solid #e7e7e7; background: #fff; overflow: hidden; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .fui-goods-item .image img { height: 100%; width: 100%; display: block; } .fui-goods-item .detail { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; background: #fff; padding-left: 10px; } .fui-goods-item .detail .name { height: 60px; font-size: 14px; color: #262626; overflow: hidden; } .fui-goods-item .detail .price { position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; font-size: 14px; margin-top: 6px; } .fui-goods-item .detail .price .text { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; color: #ed2822; } .fui-goods-item .detail .price .minprice { font-size: 15px; } .fui-goods-group.block.three .fui-goods-item .detail .price .minprice { font-size: 12px } .fui-goods-group.block.three .fui-goods-item .detail .price .buy { font-size: 12px; padding: 0 0.2rem; } .fui-goods-item .detail .price .productprice { color: #777; font-size: 11px; } .color { color: #fd5454; } .bgcolor { background: #fd5454 } .fui-goods-group.block .fui-goods-item { width: 50%; float: left; border-bottom: 0; background: none; padding: 5px 3px; display: block; } .fui-goods-group.block .fui-goods-item .image { width: 100%; height: 0; overflow: hidden; margin: 0; height:100%; /*padding-bottom: 100%; !* 关键就在这里 *!*/ background-position: center; background-repeat: no-repeat; background-size: cover; } .fui-goods-group.block { padding: 4px; } .fui-goods-group.block .fui-goods-item .image { float: none; } .fui-goods-group.block .fui-goods-item .detail { padding: 4px; overflow: hidden; } .fui-goods-group.block .fui-goods-item .detail .name { height: 40px; overflow: hidden; } .fui-goods-group.block .fui-goods-item .center-image { max-width: 100%; height: 0; padding-bottom: 100%; background-size: contain; } .fui-goods-group.block .fui-goods-item .detail .name { height: 40px; overflow: hidden; } .fui-goods-group.block.one .fui-goods-item { width: 100%; float: none; } .fui-goods-group.block.three .fui-goods-item { width: 33.33%; } .fui-goods-group .fui-goods-item .detail .productprice { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; height: 1.1rem; } .fui-goods-group.block .fui-goods-item .detail .productprice.noheight { display: none; } /**/ .fui-cube { height: 0; width: 100%; margin: 0; padding-bottom: 50%; position: relative; } .fui-cube .fui-cube-left { width: 50%; height: 100%; position: absolute; top: 0; left: 0; } .fui-cube .fui-cube-right { width: 50%; height: 100%; position: absolute; top: 0; left: 50%; } .fui-cube .fui-cube-right1 { width: 100%; height: 50%; position: absolute; top: 0; left: 0; } .fui-cube .fui-cube-right2 { width: 100%; height: 50%; position: absolute; top: 50%; left: 0; } .fui-cube .fui-cube-right2 .left { width: 50%; height: 100%; position: absolute; top: 0; left: 0; } .fui-cube .fui-cube-right2 .right { width: 50%; height: 100%; position: absolute; top: 0; left: 50%; } .fui-cube img { width: 100%; height: 100%; } .diy-followbar { position: absolute; top: 0; left: 0; right: 0; height: 50px; background: #444444; position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; padding: 6px; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; overflow: hidden; z-index: 887; } .diy-followbar .logo { width: 38px; height: 38px; background: #f4f4f4; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-shrink: 0; -ms-flex: 0 0 auto; -webkit-flex-shrink: 0; flex-shrink: 0; -webkit-box-lines: single; -moz-box-lines: single; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; box-sizing: border-box; -webkit-box-align: center; -webkit-align-items: center; align-items: center; margin-right: 8px; position: relative; overflow: hidden; } .diy-followbar .logo img { height: inherit; width: inherit; display: block; } .diy-followbar .logo.radius { border-radius: 5px; } .diy-followbar .logo.circle { border-radius: 40px; } .diy-followbar .text { height: 38px; position: relative; width: 100%; overflow: hidden; box-sizing: border-box; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-flex: 1; -ms-flex: 1; -webkit-box-align: center; -webkit-align-items: center; align-items: center; color: #fff; } .diy-followbar .text .inner { height: auto; max-height: 38px; overflow: hidden; } .diy-followbar .btn { background: #04be02; height: 10px; margin-left: 4px; height: 24px; padding: 0 6px; line-height: 22px; font-size: 12px; color: #fff; } .fui-cell-group { margin-top: 10px; background-color: #fff; line-height: 1.4; font-size: 16px; overflow: hidden; position: relative; } .fui-cell-group.sm * { font-size: 14px; } .fui-cell-group.fui-cell-group-o { margin: 0 10px; margin-top: 10px; border-radius: 10px; } .fui-cell-group.fui-cell-group-o:active a:last-child { border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; } .fui-cell-group.fui-cell-group-o:active a:first-child { border-top-left-radius: 6px; border-top-right-radius: 6px; } .fui-cell-group:not(.fui-cell-group-o):before { content: " "; position: absolute; left: 0; top: 0; width: 100%; height: 1px; border-top: 1px solid #D9D9D9; color: #D9D9D9; -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scaleY(0.5); -ms-transform: scaleY(0.5); transform: scaleY(0.5); } .fui-cell-group:after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; border-bottom: 1px solid #D9D9D9; color: #D9D9D9; -webkit-transform-origin: 0 100%; -ms-transform-origin: 0 100%; transform-origin: 0 100%; -webkit-transform: scaleY(0.5); -ms-transform: scaleY(0.5); transform: scaleY(0.5); } .fui-cell-group.transparent { background: transparent; } .fui-cell-group.transparent:before, .fui-cell-group.transparent:after { display: none; } .fui-cell.btn-logout:before { display: none; } .fui-cell-group .fui-cell.btn-logout, .fui-cell-group .fui-cell.changepwd { padding: 0 0.5rem; } .fui-cell-group .fui-cell.btn-logout .fui-cell-text, .fui-cell-group .fui-cell.changepwd .fui-cell-text { line-height: 30px; border-radius: 0.25rem; border: 1px solid transparent; margin: 5px 0; } .fui-cell-group .fui-cell.btn-logout .fui-cell-text { text-align: center; border-color: #ff5555; color: #ff5555; background: #ffffff; } .fui-cell-group .fui-cell.changepwd .fui-cell-text { text-align: center; color: #ffffff; background: #ff5555; } .fui-cell-group .fui-cell { position: relative; padding: 8px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -moz-transition-duration: 300ms; -webkit-transition-duration: 300ms; transition-duration: 300ms; -webkit-transition-property: background-color; transition-property: background-color; } .fui-cell-group .fui-cell:before { content: " "; position: absolute; left: 10px; right: 10px; top: 0; height: 1px; border-top: 1px solid #D9D9D9; color: #D9D9D9; -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scaleY(0.5); -ms-transform: scaleY(0.5); transform: scaleY(0.5); } .fui-cell-group .fui-cell.must .fui-cell-label:after { content: "*"; position: absolute; right: 4px; top: 4px; color: #f30; font-size: 16px } .fui-cell-group-o:after, .fui-cell-group .fui-cell:first-child:before { display: none; } .fui-cell-group.fui-cell-click .fui-cell:active, .fui-cell-group .fui-cell.fui-cell-click:active { background: #ececec; } .fui-cell-title { color: #333; font-size: 15px; padding: 10px 14px; } .fui-cell-tip { color: #999; font-size: 12px; padding: 6px 14px; } .fui-cell-group .fui-cell .fui-cell-info { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; font-size: 15px; color: #666; } .fui-cell-group .fui-cell .fui-cell-info.overflow { word-break: break-all; overflow: auto; white-space: normal; height: auto; } .fui-cell-group .fui-cell .fui-cell-info .checkbox-inline, .fui-cell-group .fui-cell .fui-cell-info .radio-inline { float: left; margin-bottom: 4px; } .fui-cell-group .fui-cell .fui-cell-label { position: relative; display: block; width: 56px; padding: 0 4px; font-size: 13px; } .fui-cell-group .fui-cell .fui-cell-label.top { -webkit-align-self: flex-start; align-self: flex-start; padding-top: 4px; } .fui-cell-group .fui-cell .fui-cell-label.big { display: block; width: 90px; padding: 0 4px; font-size: 16px; } .fui-cell-group .fui-cell .sale-line { height: 24px; line-height: 24px; vertical-align: middle; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; } .fui-cell-group .fui-cell .sale-line span:not(.text-danger) { vertical-align: middle; } .fui-cell-group .fui-cell .sale-tip { height: 18px; line-height: 16px; padding: 0 4px; border: 1px solid #ff5555; color: #ff5555; display: inline-block; vertical-align: middle; border-radius: 4px; font-size: 11px; margin-right: 2px; } .fui-cell-group .fui-cell .coupon-mini { background: #ff5555; color: #fff; padding: 4px; position: relative; } .fui-cell-group .fui-cell .coupon-mini:before, .fui-cell-group .fui-cell .coupon-mini:after { content: ''; position: relative; top: 0; left: -4px; bottom: 0; border-left: 1px dotted #fff; } .fui-cell-group .fui-cell .coupon-mini:after { left: auto; right: -4px; } .fui-cell-group .fui-cell .fui-cell-info select { -webkit-appearance: none; border: 0; outline: 0; background-color: transparent; width: 100%; font-size: inherit; height: 24px; position: relative; z-index: 1; padding-left: 15px; } .fui-cell-group .fui-cell .fui-cell-info select { padding: 0; } .fui-cell-group .fui-cell .fui-cell-icon { color: #333; margin-right: 6px; width: 16px; color: #999; text-align: center; } .fui-cell-group .fui-cell .fui-cell-icon.pull-left { font-size: 17px; } .fui-cell-group .fui-cell .fui-cell-text { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; color: #333; font-size: 14px; } .fui-cell-group .fui-cell .fui-cell-remark { color: #888; text-align: right; font-size: 12px; margin-right: 4px; } .fui-cell-group .fui-cell .fui-cell-remark:after { content: " "; display: inline-block; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); height: 8px; width: 8px; border-width: 1px 1px 0 0; border-color: #C8C8CD; border-style: solid; position: relative; top: -1px; margin-left: 6px; } .fui-cell-group .fui-cell .fui-cell-remark.noremark:after { display: none; margin-left: 0; } .fui-cell-group .fui-cell.fui-cell-textarea .fui-cell-label { margin-top: -30px; } .headinfo { position: relative; height: auto; padding-top: 20px; border-top: 1px #b2423f solid; border-bottom: 1px #fa9d9d solid; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; } .headinfo .setbtn { height: 24px; width: 24px; position: absolute; top: 4px; right: 10px; font-size: 24px; color: #fff; line-height: 24px; text-align: center; } .headinfo .child { width: 30%; height: auto; padding-bottom: 24px; text-align: center; } .headinfo .child.userinfo { width: 40%; color: #fff; } .headinfo .child.userinfo .face { height: 56px; width: 56px; background: #fff; margin: auto; border-radius: 56px; border: 2px solid #fff; } .headinfo .child.userinfo .face img { height: 52px; width: 52px; border-radius: 52px; display: block; } .headinfo .child.userinfo .face.radius { border-radius: 10px; } .headinfo .child.userinfo .face.radius img { border-radius: 10px; } .headinfo .child.userinfo .name { height: 20px; padding-top: 4px; font-size: 12px; color: inherit; text-align: center; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .headinfo .child.userinfo .level { font-size: 12px; color: inherit; text-align: center; } .headinfo .child .title { padding-top: 24px; font-size: 14px; color: #fff; text-align: center; } .headinfo .child .num { font-size: 14px; color: #fef31f; text-align: center; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .headinfo .child .btn { width: 52px; height: 20px; padding: 0; margin: 4px auto 0; color: #fff; font-size: 12px; line-height: 18px; text-align: center; border-radius: 20px; border: 1px solid #fff; } .headinfo.style-2 { padding: 15px 15px; } .headinfo.style-2 .face { height: 60px; width: 60px; border-radius: 60px; float: left; position: relative; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-shrink: 0; -ms-flex: 0 0 auto; -webkit-flex-shrink: 0; flex-shrink: 0; -webkit-box-lines: single; -moz-box-lines: single; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; box-sizing: border-box; -webkit-box-align: center; -webkit-align-items: center; align-items: center; } .headinfo.style-2 .face img { height: 60px; width: 60px; border-radius: 60px; display: block; } .headinfo.style-2 .face.radius { border-radius: 10px; } .headinfo.style-2 .face.radius img { border-radius: 10px; } .headinfo.style-2 .inner { height: auto; position: relative; width: 100%; overflow: hidden; box-sizing: border-box; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-flex: 1; -ms-flex: 1; display: block; padding-left: 10px; color: #fff; } .headinfo.style-2 .inner .name { font-size: 16px; } .headinfo.style-2 .inner .level, .headinfo.style-2 .inner .credit { font-size: 14px; } .headinfo.style-2 .inner span { color: #fef31f; } .headinfo.commission { height: auto; background: #FE5455; border-top: 1px #b94749 solid; border-bottom: 1px #fa9d9d solid; display: block; padding-top: 0; } .headinfo.commission .userinfo { height: 4rem; padding: 0.3rem 0.6rem; border-bottom: 1px solid #fe9292; position: relative } .headinfo.commission .userinfo .fui-list { padding: 0rem; padding-top: .2rem; } .headinfo.commission .userinfo .fui-list:active { background: transparent } .headinfo.commission .userinfo .fui-list-media img { height: 2.5rem; width: 2.5rem; border-radius: 2.5rem; border: 2px solid #fff; } .headinfo.commission .userinfo .fui-list .fui-list-info .title { color: #fff; font-size: 0.7rem; line-height: 1rem; } .headinfo.commission .userinfo .fui-list .fui-list-info .subtitle { color: #fef31f; font-size: 0.65rem; } .headinfo.commission .userinfo .fui-list .fui-list-info .text { color: #fff; font-size: 0.6rem; } .headinfo.commission .userinfo .setbtn { position: absolute; height: 1.4rem; width: 1.2rem; font-size: 1.2rem; color: #fff; line-height: 1.4rem; text-align: center; right: .5rem; top: .5rem; } .headinfo.commission .userblock { height: auto; padding: 0 0.6rem; } .headinfo.commission .userblock .line { height: auto; padding: 0.9rem 0 0; color: #fff; overflow: hidden; } .headinfo.commission .userblock .line.total { height: auto; } .headinfo.commission .userblock .line.total .title { font-size: 0.7rem; } .headinfo.commission .userblock .line.total .num { font-size: 1.4rem; line-height: 1.7rem; font-weight: 100; } .headinfo.commission .userblock .line.usable { height: auto; padding-bottom: 0.9rem; padding-top: 1.1rem; } .headinfo.commission .userblock .line.usable .btn { height: 1.2rem; width: auto; padding: 0 0.4rem; border: 1px solid #fff; line-height: 1.2rem; border-radius: 0.6rem; font-size: 0.7rem; float: right; color: inherit; } .headinfo.commission .userblock .line.usable .btn.disabled { height: 1.2rem; width: auto; padding: 0 0.4rem; border: 1px solid #ccc; line-height: 1.2rem; border-radius: 0.6rem; font-size: 0.7rem; float: right; color: #ccc; } .headinfo.commission .userblock .line.usable .text { padding-right: 4rem; } .headinfo.commission .userblock .line.usable .text .title { font-size: 0.6rem; line-height: 0.6rem; } .headinfo.commission .userblock .line.usable .text .num { font-size: 1rem; font-weight: 100; line-height: 1.4rem; } /* tab */ .fui-tab { -webkit-align-self: center; align-self: center; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-lines: single; -moz-box-lines: single; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; margin-bottom: 2px; background: white; position: relative; } .fui-tab:after { content: ''; position: absolute; left: 0; bottom: 0; right: auto; top: auto; height: 1px; width: 100%; background-color: #d0d0d0; display: block; z-index: 0; -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; } .fui-tab nav { text-align: center; cursor: default; color: #666; font-size: 0.8rem; width: 100%; height: 2rem; line-height: 2rem; -webkit-box-flex: 1; -ms-flex: 1; border: 0; border-bottom: 2px solid transparent; border-radius: 0; } .fui-tab.fui-tab-danger nav.active { color: #ef4f4f; border-color: #ef4f4f; z-index: 100; } .diy-swipe { height: auto; overflow: hidden; } .diy-swipe img { height: auto; width: 100%; display: block; } .diy-swipe .dots { height: 14px; padding: 0 10px; position: absolute; left: 0; right: 0; bottom: 10px; opacity: 0.5; } .diy-swipe .dots.left { text-align: left; } .diy-swipe .dots.center { text-align: center; } .diy-swipe .dots.right { text-align: right; } .diy-swipe .dots.rectangle span { height: 12px; width: 20px; } .diy-swipe .dots.square span { height: 12px; width: 12px; } .diy-swipe .dots.round span { height: 12px; width: 12px; border-radius: 12px; } .diy-swipe .dots span { display: inline-block; } .fui-navbar, .fui-footer { width: 100%; bottom: 0; height: 2.5rem; background: #fff; box-shadow: 0 0 4px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.1); } .fui-navbar .nav-item.btn { color: #fff; border-radius: 0; } .fui-navbar .nav-item { position: relative; display: table-cell; height: 2.5rem; text-align: center; vertical-align: middle; width: 1%; color: #999; } .fui-navbar .nav-item.active, .fui-navbar .nav-item:active { color: red } .fui-navbar .nav-item .label { display: block; font-size: 0.55rem; position: relative; top: -0.1rem; background: none; color: #999; } .fui-navbar .nav-item .icon { font-size: 1rem; padding: 0; } .fui-navbar .nav-item .badge { background: red none repeat scroll 0 0; border-radius: 0.5rem; color: white; font-size: 0.6rem; height: 0.8rem; left: 50%; line-height: 0.8rem; margin-left: 0.1rem; min-width: 0.8rem; padding: 0 0.2rem; position: absolute; top: 0.1rem; vertical-align: top; z-index: 100; } .fui-navbar .cartbtn { background: #fe9402; } .fui-navbar .buybtn { background: #fd5555; } .fui-detail-group { margin-top: 0 } .fui-detail-group .fui-cell { padding: 0 0.5rem; } .fui-detail-group .fui-cell:before { border: 0; } .fui-detail-group .fui-cell .price { font-size: 1rem; color: #fd5454; line-height: 1.4rem; } .fui-detail-group .fui-cell .price .original { font-size: 0.6rem; color: #C0C0C0; text-decoration: line-through; padding-left: 0.2rem; font-weight: normal } .fui-detail-group .fui-cell .name { padding: 0.4rem 0 0; font-size: 0.75rem; } .fui-detail-group .fui-cell .share { padding-left: 0.8rem; margin-top: 0.4rem; position: relative; text-align: center; } .fui-detail-group .fui-cell .share:after { display: none; } .fui-detail-group .fui-cell .flex { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; font-size: 0.6rem; color: #C0C0C0; padding-bottom: 0.4rem; } .fui-detail-group .fui-cell .flex span { width: 100%; text-align: center; } .fui-detail-group .fui-cell .flex span:first-child { text-align: left; } .fui-detail-group .fui-cell .flex span:last-child { text-align: right; } .goods-subtitle span { font-size: .65rem; padding: .2rem 0 } .fui-cell-group .fui-cell .row-time { padding: 0 0 .5rem .5rem; overflow: hidden; } .fui-cell-group .fui-cell .fui-labeltext .text .number { } .fui-cell-group .fui-cell .fui-labeltext .text .time { font-size: .65rem; padding: 0 .1rem; } .fui-cell-group.fui-sale-group:before { border: 0; } .fui-cell-group.fui-sale-group .fui-cell .fui-cell-text, .fui-cell-group.fui-sale-group .fui-according-header .text { font-size: 0.65rem; color: #666; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .fui-cell-group.fui-sale-group .fui-according-header .text .title { font-weight: bold; } /* 限时购 */ .fui-labeltext { position: relative; border: 1px solid #d9d9d9; display: table-cell; border-radius: .2rem; height: 1.5rem; } .fui-labeltext.fui-labeltext-success { border: 1px solid #04ab02 } .fui-labeltext.fui-labeltext-primary { border: 1px solid #0290be } .fui-labeltext.fui-labeltext-warning { border: 1px solid #ff9326 } .fui-labeltext.fui-labeltext-danger { border: 1px solid #ef4f4f } .fui-labeltext .label { background: #d9d9d9; font-size: 0.75rem; float: left; height: 1.5rem; line-height: 1.5rem; padding: 0 .2rem; } .fui-labeltext.fui-labeltext-success .label { background: #04ab02; color: #fff; } .fui-labeltext.fui-labeltext-primary .label { background: #0290be; color: #fff; } .fui-labeltext.fui-labeltext-warning .label { background: #ff9326; color: #fff; } .fui-labeltext.fui-labeltext-danger .label { background: #ef4f4f; color: #fff; } .fui-labeltext .text { float: left; height: 1.5rem; line-height: 1.5rem; padding: 0 .2rem; color: #000; } /* 店铺信息 */ .fui-shop-group .fui-cell:before { display: none; } .fui-shop-group .fui-cell { padding: 0 0.5rem; } .fui-shop-group .fui-cell .shopname { height: 2rem; width: 100%; padding-left: 0.5rem; margin-top: 0.5rem; font-size: 0.8rem; line-height: 1rem; } .fui-shop-group .fui-cell .center { text-align: center; margin: 0.4rem 0; position: relative; font-size: 0.7rem; } .fui-shop-group .fui-cell .center:before { height: 100%; width: 1px; content: " "; position: absolute; left: 0; top: 0; background: #dbdbdb; } .fui-shop-group .fui-cell .center:first-child:before { background: none; } .fui-shop-group .fui-cell .center p { color: #7c7c7c; font-size: 0.6rem; } .fui-shop-group .fui-cell .btn-default-o { width: 4rem; height: 1.2rem; border-color: #7c7c7c; color: #7c7c7c; font-size: 0.7rem; padding: 0; margin: 0 0.5rem 0.2rem; line-height: 1.2rem; display: inline-block; } .fui-shop-group .fui-list:after { display: none } .fui-shop-group .title { font-size: 0.8rem; } .fui-shop-group .subtitle { font-size: 0.7rem; } .fui-list-media.radius img { border-radius: 0.3rem; } .fui-list-media.circle img { border-radius: 2.5rem; } /*评论组*/ .fui-comment-group .fui-cell:before { border: 0; } .fui-comment-group .fui-cell { padding: 0 0.5rem; } .fui-comment-group .fui-cell .comment { padding: 0; position: relative; } .fui-comment-group .fui-cell .comment:before { content: " "; width: 100%; height: 1px; border-top: 1px solid #eee; top: 0; left: 0; position: absolute; } .fui-comment-group .fui-cell .comment .info { color: #7C7C7C; font-size: 0.6rem; line-height: 0.9rem; margin-bottom: 0.3rem; width: 100%; } .fui-comment-group .fui-cell .comment .info.head { height: 1.3rem; line-height: 1.2rem; } .fui-comment-group .fui-cell .comment .info .img { float: left; } .fui-comment-group .fui-cell .comment .info .img img { width: 1.2rem; height: 1.2rem; border-radius: .6rem; } .fui-comment-group .fui-cell .comment .info .nickname { float: left; padding-left: .3rem; } .fui-comment-group .fui-cell .comment .info .star { float: left; color: #666; } .fui-comment-group .fui-cell .comment .info .star span { padding: 0; margin: 0 } .fui-comment-group .fui-cell .comment .info .star .shine { color: #fd5454; float: left; } .fui-comment-group .fui-cell .comment .info .star.star1 { clear: both } .fui-comment-group .fui-cell .comment .info .date { text-align: right; } .fui-comment-group .fui-cell .comment .remark { font-size: 0.65rem; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; width: 100%; } .fui-comment-group .fui-cell .comment .remark .img { padding: 0.2rem 0.2rem 0 0; } .fui-comment-group .fui-cell .comment .remark .img img { height: 50px; } .fui-comment-group .fui-cell .desc.label { font-size: 0.6rem; text-align: right; background: none; font-weight: 100; color: #ff5555; } .fui-comment-group .fui-cell .desc.label span { color: #fd5454; } .fui-comment-group .fui-cell .desc { font-size: 0.7rem; color: #000; line-height: 1.5rem; padding: .2rem 0 } .comment-block.in { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .comment-block .fui-icon-group { font-size: .65rem; } .fui-comment-group .show-allshop { text-align: center; } .fui-comment-group .show-allshop .btn { padding: 6px 16px; display: inline-block; border: 1px solid #ff5555; color: #ff5555; -webkit-border-radius: 1rem; -moz-border-radius: 1rem; border-radius: 1rem; margin: 5px 0 15px; } /** According **/ .fui-according-group { margin-top: 0.5rem; background-color: #fff; line-height: 1.4; font-size: 0.8rem; overflow: hidden; position: relative; } .fui-according-group.fui-according-group-o { margin: 0 .5rem; border-radius: .5rem; margin-top: 0.5rem; } .fui-according-group:not(.fui-according-group-o):before { content: " "; position: absolute; left: 0; top: 0; width: 100%; height: 1px; border-top: 1px solid #D9D9D9; color: #D9D9D9; -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scaleY(0.5); -ms-transform: scaleY(0.5); transform: scaleY(0.5); } .fui-according-group:after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; border-bottom: 1px solid #D9D9D9; color: #D9D9D9; -webkit-transform-origin: 0 100%; -ms-transform-origin: 0 100%; transform-origin: 0 100%; -webkit-transform: scaleY(0.5); -ms-transform: scaleY(0.5); transform: scaleY(0.5); } .fui-according { position: relative; } .fui-according:before { content: " "; position: absolute; left: 0; top: 0; width: 100%; height: 1px; border-top: 1px solid #D9D9D9; color: #D9D9D9; -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scaleY(0.5); -ms-transform: scaleY(0.5); transform: scaleY(0.5); left: .5rem; } .fui-according:first-child:before { display: none; } .fui-according-header { position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; width: 100%; padding: 0.5rem 0.5rem; -moz-transition-duration: 300ms; -webkit-transition-duration: 300ms; transition-duration: 300ms; -webkit-transition-property: background-color; transition-property: background-color; } .fui-according-header:active { background: #d9d9d9; } .fui-according-header .text { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; color: #333; font-size: 0.75rem; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; padding: 0 0.2rem; } .fui-according-header .remark { color: #888; text-align: right; font-size: 0.75rem; } .fui-according-header .remark:after { content: " "; display: inline-block; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); height: 0.3rem; width: 0.3rem; border-width: 2px 2px 0 0; border-color: #C8C8CD; border-style: solid; position: relative; top: -1px; margin-left: .3em; } .fui-according.expanded .remark:after, .fui-according-header:active .remark:after { content: " "; display: inline-block; -webkit-transform: rotate(135deg); -ms-transform: rotate(135deg); transform: rotate(135deg); height: 0.3rem; width: 0.3rem; border-width: 2px 2px 0 0; border-color: #C8C8CD; border-style: solid; position: relative; top: -1px; margin-left: .3em; } .fui-according-content .content-block { padding: .5rem .5rem; color: #666; box-sizing: border-box; } .package-goods { padding: 0.2rem 0.5rem; } .package-goods .package-goods-img { width: 6.4rem; width: 6.4rem; } .package-goods p { color: #fd5454; font-size: 0.6rem; } .package-goods span { height: 1.6rem; line-height: 0.8rem; overflow: hidden; display: block; color: #333; font-size: 0.6rem; } .package-list { padding: 0; overflow-y: auto; } .package-buy { height: 2.4rem; } .package-buy a.package-buy-a { height: 2.4rem; display: block; line-height: 2.4rem; color: #fff; text-align: center; background: #ef4f4f; } .package-list-inner { white-space: nowrap; height: 7rem; } .package-list-inner .package-goods { width: 33.33333333%; float: left; } /* 按钮组2*/ .fui-menu-group { height: auto; background: #fff; margin-top: 0.5rem; } .fui-menu-group .fui-menu-item { padding: 0.5rem; text-align: center; position: relative; color: #666; font-size: 0.75rem; width: 1%; display: table-cell; -webkit-user-select: none; -moz-user-select: none; transition: background-color 300ms; -webkit-transition: background-color 300ms; } .fui-menu-group .fui-menu-item:active { background: #ececec; } .fui-menu-group .fui-menu-item:before { content: ''; position: absolute; left: 0; top: 0.5rem; bottom: 0.5rem; border-left: 1px solid #eee; } .fui-menu-group .fui-menu-item:first-child:before { border: 0; } .fui-menu-group .fui-menu-item i { vertical-align: top; } /*LIST*/ .fui-list-group { background-color: #fff; position: relative; display: block; } .fui-list-group.fui-list-group-o { margin: 0 .5rem; border-radius: .5rem; margin-top: 0.5rem; } .fui-list-group:not(.fui-list-group-o):before { content: " "; position: absolute; left: 0; top: 0; width: 100%; height: 1px; border-top: 1px solid #d9d9d9; color: #D9D9D9; -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scaleY(0.5); -ms-transform: scaleY(0.5); transform: scaleY(0.5); } .fui-list-group:not(.fui-list-group-o):after { content: " "; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; border-top: 1px solid #d9d9d9; color: #D9D9D9; -webkit-transform-origin: 0 100%; -ms-transform-origin: 0 100%; transform-origin: 0 100%; -webkit-transform: scaleY(0.5); -ms-transform: scaleY(0.5); transform: scaleY(0.5); } .fui-list { position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; padding: .5rem; -webkit-transition-duration: 300ms; transition-duration: 300ms; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; overflow: hidden; } .fui-list:before { content: " "; position: absolute; left: 0; top: 0; width: 100%; height: 1px; border-top: 1px solid #D9D9D9; color: #D9D9D9; -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scaleY(0.5); -ms-transform: scaleY(0.5); transform: scaleY(0.5); left: .5rem; } .fui-list:first-child:before { display: none; } .fui-list:active { background: #ECECEC; } .fui-list-media { position: relative; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-shrink: 0; -ms-flex: 0 0 auto; -webkit-flex-shrink: 0; flex-shrink: 0; -webkit-box-lines: single; -moz-box-lines: single; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; box-sizing: border-box; -webkit-box-align: center; -webkit-align-items: center; align-items: center; margin-right: .5rem; padding-left: 0; border: none; } .fui-list-media img { display: block; width: 2.5rem; } .fui-list-media img.round { border-radius: .3rem; } .fui-list-media .badge { background: red none repeat scroll 0 0; border-radius: 0.5rem; color: white; font-size: 0.7rem; height: 0.9rem; right: -.35rem; line-height: 0.9rem; min-width: 0.9rem; padding: 0 0.15rem; position: absolute; top: -.3rem; text-align: center; vertical-align: top; z-index: 100; } .fui-list-inner { position: relative; width: 100%; overflow: hidden; box-sizing: border-box; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-flex: 1; -ms-flex: 1; text-align: left; display: block; } .fui-list-inner .subtitle { position: relative; font-size: 0.6rem; color: #666; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .fui-list-inner .text { position: relative; font-size: 0.65rem; color: #666; } .fui-list-inner .title { position: relative; font-size: 0.7rem; color: #333; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; height: 1rem; line-height: 1rem; } .fui-list-inner .row { position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; margin: 0; height: 1rem; line-height: 1rem; } .fui-list-inner .row .row-text { font-size: 0.85rem; color: #333; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } .fui-list-inner .row .row-remark { font-size: 0.75rem; color: #666; text-align: right; } .fui-list .angle:after { content: " "; display: inline-block; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); height: 0.3rem; width: 0.3rem; border-width: 2px 2px 0 0; border-color: #C8C8CD; border-style: solid; position: relative; top: -.2rem; margin-right: .1rem; } .fui-list-angle { position: relative; vertical-align: middle; margin-right: .5rem; } .fui-list-angle .angle:after { position: absolute; top: 50%; margin-top: -.3rem; } /* 秒杀组 */ .seckill-group { margin-top: 0.5rem; background-color: #fff; line-height: 1.4; font-size: 0.8rem; overflow: hidden; position: relative; } .seckill-group:before { content: " "; position: absolute; left: 0; top: 0; width: 100%; height: 1px; border-top: 1px solid #D9D9D9; color: #D9D9D9; -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scaleY(0.5); -ms-transform: scaleY(0.5); transform: scaleY(0.5); } .seckill-group:after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; border-bottom: 1px solid #D9D9D9; color: #D9D9D9; -webkit-transform-origin: 0 100%; -ms-transform-origin: 0 100%; transform-origin: 0 100%; -webkit-transform: scaleY(0.5); -ms-transform: scaleY(0.5); transform: scaleY(0.5); } .seckill-group.noborder:before, .seckill-group.noborder:after { border: 0; } .seckill-group .seckill-title { position: relative; padding: 0.5rem 0.5rem; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -moz-transition-duration: 300ms; -webkit-transition-duration: 300ms; transition-duration: 300ms; -webkit-transition-property: background-color; transition-property: background-color; } .seckill-group .seckill-title .seckill-text { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; font-size: .75rem; color: #666; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .seckill-group .seckill-title .seckill-remark { color: #888; text-align: right; font-size: 0.7rem; margin-right: .2rem; } .seckill-group .seckill-title .seckill-remark:after { content: " "; display: inline-block; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); height: 0.4rem; width: 0.4rem; border-width: 1px 1px 0 0; border-color: #C8C8CD; border-style: solid; position: relative; top: -1px; margin-left: .3em; } .seckill-group .seckill-goods { padding: 0 0.5rem 0.5rem; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .seckill-group .seckill-goods .swiper-wrapper { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .swiper-container-autoheight .swiper-wrapper { -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .seckill-group .seckill-goods .item { height: auto; width: 4rem; float: left; } .seckill-group .seckill-goods .item.last-item { height: auto; width: 1.5rem; font-size: 0.55rem; color: #666; text-align: center; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; margin-left: -0.5rem; } .seckill-group .seckill-goods .item.last-item .inner { width: 1rem; text-align: right; } .seckill-group .seckill-goods .item .thumb { height: 4rem; width: 4rem; margin: auto; position: relative; } .seckill-group .seckill-goods .item .thumb img { height: 4rem; width: 4rem; display: block; } .seckill-group .seckill-goods .item .thumb .tag { position: absolute; bottom: 0; left: 0; background: #ef4f4f; color: #fff; font-size: 0.5rem; padding: 0 0.1rem; line-height: 0.65rem; } .seckill-group .seckill-goods .item .thumb .tag.orange { background: #fe9402; } .seckill-group .seckill-goods .item .thumb .tag.purple { background: #7e42fd; } .seckill-group .seckill-goods .item .thumb .tag.green { background: #4fd88a; } .seckill-group .seckill-goods .item .marketprice { color: #ef4f4f; text-align: center; font-size: 0.8rem; line-height: 1.2rem; } .seckill-group .seckill-goods .item .productprice { color: #999; text-decoration: line-through; font-size: 0.6rem; text-align: center; line-height: 0.6rem; } .seckill-group .killtime { display: inline-block; font-size: 0.65rem; color: #444; } .seckill-group { height: auto; } .seckill-group img { height: 0.7rem; max-width: 5rem; margin-right: 0.2rem; line-height: 0.7rem; } .seckill-group .title { font-size: 0.7rem; color: #444; margin-right: 0.2rem; } .seckill-group .killtime span { display: inline-block; padding: 0; margin: 0; } .seckill-group .killtime .item { height: 0.8rem; line-height: 0.75rem; border: 1px solid #ddd; padding: 0 0.1rem; margin: 0 1px; } .fui-audio { height: auto; background: #f1f1f1; margin: 0.8rem; padding: 0.6rem; border: 1px solid #ededed; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; position: relative; } .fui-audio .horn { width: 1.4rem; height: 1.25rem; background-image: url(../images/icon_audio_reading_3.png); background-size: auto 100%; background-repeat: no-repeat; } .fui-audio .horn.playing { -webkit-animation: audio_playing 1s infinite; } .fui-audio .center { width: 100%; padding-right: 0.2rem; font-size: 0.75rem; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } .fui-audio .center p { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .fui-audio .time { font-size: 0.7rem; color: #666; } .fui-audio .speed { position: absolute; bottom: -1px; left: -1px; width: 20%; height: 0.1rem; background: #44b549; -webkit-transition: width .3s; transition: width .3s; } .fui-chat-item { height: 2.2rem; margin: 0.8rem; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; justify-content: flex-start; } .fui-chat-item .face { height: 2.2rem; width: 2.2rem; background: #eee; -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 0 2px rgba(0, 0, 0, 0.1); box-shadow: 0 0 2px rgba(0, 0, 0, 0.1); } .fui-chat-item .face img { height: inherit; width: inherit; display: block; } .fui-chat-item .msg { margin: 0 2.7rem 0 0.5rem; background: #fefefe; padding: 0 0.8rem; position: relative; border-radius: 0.25rem; border: 1px solid rgba(195, 195, 195, 0.3); -webkit-box-shadow: 0 0 1px rgba(195, 195, 195, 0.1); -moz-box-shadow: 0 0 1px rgba(195, 195, 195, 0.1); box-shadow: 0 0 1px rgba(195, 195, 195, 0.1); display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; justify-content: flex-start; min-width: 4rem; } .fui-chat-item .msg:before { content: ""; position: absolute; top: 50%; left: -0.28rem; height: 0.4rem; width: 0.4rem; background: #fefefe; margin-top: -0.2rem; transform: rotate(45deg); -ms-transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); border: 1px solid rgba(195, 195, 195, 0.3); -webkit-box-shadow: 0 0 1px rgba(195, 195, 195, 0.1); -moz-box-shadow: 0 0 1px rgba(195, 195, 195, 0.1); box-shadow: 0 0 1px rgba(195, 195, 195, 0.1); } .fui-chat-item .msg:after { content: ""; position: absolute; top: 50%; left: -0.2rem; height: 0.45rem; width: 0.45rem; background: #fefefe; margin-top: -0.18rem; transform: rotate(45deg); -ms-transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); } .fui-chat-item .msg .horn { height: 1rem; width: 1.4rem; background-image: url(../images/icon_audio_reading_gray_3.png); background-size: auto 100%; background-repeat: no-repeat; } .fui-chat-item .msg .horn.playing { -webkit-animation: chat_playing_gray 1s infinite; } .fui-chat-item.right { justify-content: flex-end; } .fui-chat-item.right .msg { border: 1px solid rgba(20, 80, 36, 0.15); -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.1); box-shadow: 0 0 1px rgba(0, 0, 0, 0.1); background: #a0e75a; margin: 0 0.5rem 0 2.7rem; transform: rotate(180deg); -ms-transform: rotate(180deg); -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -o-transform: rotate(180deg); } .fui-chat-item.right .msg:before { content: ""; position: absolute; top: 50%; left: -0.28rem; height: 0.4rem; width: 0.4rem; background: #a0e75a; margin-top: -0.2rem; transform: rotate(45deg); -ms-transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); border: 1px solid rgba(20, 80, 36, 0.15); -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.1); box-shadow: 0 0 1px rgba(0, 0, 0, 0.1); } .fui-chat-item.right .msg:after { content: ""; position: absolute; top: 50%; left: -0.2rem; height: 0.5rem; width: 0.5rem; background: #a0e75a; margin-top: -0.20rem; transform: rotate(45deg); -ms-transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); } .fui-chat-item.right .msg .horn { height: 1rem; width: 1.4rem; background-image: url(../images/icon_audio_reading_green_3.png); background-size: auto 100%; background-repeat: no-repeat; } .fui-chat-item.right .msg .horn.playing { -webkit-animation: chat_playing_green 1s infinite; } .seckill-page { position: relative; overflow: hidden; } .seckill-page .swiper-container.room-container { width: 100%; position: relative; } .seckill-page .swiper-container.room-container .swiper-wrapper { display: flex; } .seckill-page .swiper-container.room-container:after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; border-bottom: 1px solid #D9D9D9; -webkit-transform-origin: 0 100%; -ms-transform-origin: 0 100%; transform-origin: 0 100%; -webkit-transform: scaleY(0.5); -ms-transform: scaleY(0.5); transform: scaleY(0.5); } .seckill-page .swiper-container.room-container .room-slide { text-align: center; font-size: .7rem; color: #666; float: left; width: 20%; padding: 5px 0; } .seckill-page .swiper-container.time-container { width: 100%; padding-top: .1rem; text-align: center; } .seckill-page .swiper-container.time-container .swiper-wrapper { } .seckill-page .swiper-slide.time-slide { width: 20%; text-align: center; padding: .1rem 0; float: left; } .seckill-page .swiper-slide.time-slide.current { color: #ff3300; } .seckill-page .swiper-slide.time-slide .text, .seckill-page .swiper-slide.time-slide .time { display: block; -moz-transition-duration: 100ms; -webkit-transition-duration: 100ms; transition-duration: 100ms; -webkit-transition-property: color, font-size; transition-property: color, font-size; } .seckill-page .swiper-slide.time-slide .time { font-size: .7rem; height: 1.2rem; padding-top: .2rem; } .seckill-page .swiper-slide.time-slide .text { font-size: .5rem; height: 1rem; } .seckill-page .swiper-slide.time-slide.current .time { font-size: .9rem; height: 1.2rem; padding-top: 0rem; } .seckill-page .swiper-slide.time-slide.current .text { padding-top: -.2rem; } .seckill-page .swiper-container.adv-container { width: 100%; } .seckill-page .swiper-slide.adv-slide { width: 33.33%; text-align: center; background: #fff; padding: 2px; float: left; } .seckill-page .swiper-slide.adv-slide img { width: 100%; } .seckill-page .fui-list { padding-top: .2rem; padding-bottom: .5rem; } .seckill-page .fui-list .fui-list-media { -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: start } .seckill-page .fui-list .fui-list-media img { width: 4rem; height: 4rem; } .seckill-page .fui-list .fui-list-inner .text { color: #444; display: block; font-size: .7rem; padding-bottom: .5rem; } .seckill-page .fui-list .fui-list-inner .info { display: block; width: 100%; } .seckill-page .fui-list .fui-list-inner .info .button { float: right; margin-top: -.2rem; } .seckill-page .fui-list .fui-list-inner .info .price { color: #f02b2b; font-size: .9rem; } .seckill-page .fui-list .fui-list-inner .info .price1 { color: #949598; font-size: .6rem; text-decoration: line-through; } .seckill-page .fui-list .fui-list-inner .info.info1 { height: .4rem; line-height: .4rem; } .seckill-page .fui-list-group-title { padding: 5px 0; } .seckill-page .fui-list-group-title .timer { float: right; color: #6b6b6b; } .seckill-page .fui-list-group-title .timer span { display: inline-block; background: #464553; color: #fff; width: 20px; height: 20px; border-radius: .1rem; line-height: 20px; margin: 0 2px; font-size: 12px; text-align: center; } .seckill-page .fui-list:before { left: 0; right: 0; } .seckill-page .fui-list .fui-list-inner .info .process-text { float: left; font-size: 10px; color: #d0d1d2; padding-right: 5px; padding-top: 1px; height: 10px; } .seckill-page .fui-list .fui-list-inner .info .process { float: left; width: 80px; height: 8px; border: 1px solid #ff8f8f; border-radius: 2px; overflow: hidden; margin-top: 2px; } .seckill-page .fui-list .fui-list-inner .info .process .inner { width: 5rem; height: .5rem; background: #ff8f8f; } .seckill-page .fui-list .fui-list-inner .btn.btn-success { background: #04be02; border: 1px solid #04ab02; color: #fff; } .seckill-page .swiper-container.goods-container { width: 100%; } .seckill-page .fui-list-group .fui-list.align-start { -webkit-box-align: start; -webkit-align-items: start; -ms-flex-align: start; align-items: start } .page-goods-detail .seckill-container { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } .page-goods-detail .seckill-container .seckill-list, .page-goods-detail .seckill-container .seckill-list1 { } .page-goods-detail .seckill-container.notstart .seckill-list, .page-goods-detail .seckill-container.notstart .seckill-list1, .page-goods-detail .seckill-container.notstart .seckill-list2 { } .page-goods-detail .seckill-container .seckill-list { flex: 1; color: #fff; padding: 0em .5rem; margin-top: -1px; } .page-goods-detail .seckill-container .seckill-list .fui-list-inner .text { color: #fff; height: .9rem; } .page-goods-detail .seckill-container .seckill-list .seckill-price { font-size: 1rem; color: #fff; -webkit-box-align: baseline; -webkit-align-items: baseline; -ms-flex-align: baseline; align-items: baseline; width: auto; } .page-goods-detail .seckill-container .seckill-list .seckill-price span { font-size: 1.85rem; } .page-goods-detail .seckill-container .seckill-list .oldprice { color: rgba(255, 255, 255, .5); } .page-goods-detail .seckill-container .seckill-list .fui-list-media { } .page-goods-detail .seckill-container .seckill-list .stitle { display: inline-block; border: 1px solid #fff; border-radius: .2rem; font-size: .4rem; padding: 0 .2rem; } .page-goods-detail .seckill-container .seckill-list1 .fui-list-inner .text { text-align: center; color: #fff; } .page-goods-detail .seckill-container .seckill-list1 .fui-list-inner .text .process { float: left; width: 4rem; height: .6rem; border: 1px solid #efd74f; border-radius: .5rem; overflow: hidden; margin-top: .3rem; } .page-goods-detail .seckill-container .seckill-list1 .fui-list-inner .text .process .inner { width: 5rem; height: .6rem; background: #efd74f; } .page-goods-detail .seckill-container .seckill-list2 .fui-list-inner .text { font-size: .6rem; text-align: center; height: .95rem; color: #ef4f4f } .page-goods-detail .seckill-container .seckill-list2 .fui-list-inner .text.timer span { display: inline-block; background: #582e19; color: #fff; width: .9rem; height: .9rem; border-radius: .1rem; line-height: .9rem; font-size: .5rem; text-align: center; } .page-goods-detail .seckill-container .seckill-list2 { padding: 0; width: 5rem; background: #ffef32; } .page-goods-detail .seckill-container .seckill-list2, .page-goods-detail .seckill-container .seckill-list1 { margin-top: -.1rem; } .page-goods-detail .seckill-container.notstart .seckill-list2 .fui-list-inner .text { color: #fff; } .page-goods-detail .seckill-container.notstart .seckill-list2 .fui-list-inner .text.timer span { background: rgba(0, 0, 0, .7); } .page-goods-detail .buybtn.seckill-notstart { background: #00b950; } /* 兑换页面 兑换规则 */ .diy-exchange-rule { padding: 0.5rem 0 1.4rem; background: #fafafa; } .diy-exchange-rule .head { height: 2rem; line-height: 2rem; text-align: center; position: relative; } .diy-exchange-rule .head:before { position: absolute; top: 50%; left: 0; right: 0; border-top: 1px solid #efefef; content: ""; height: 0; z-index: 1; } .diy-exchange-rule .head .title { height: 2rem; background: #f9f9f9; max-width: 80%; padding: 0 0.6rem; position: relative; z-index: 2; display: inline-block; position: relative; overflow: hidden; color: #555; } .diy-exchange-rule .head .title:before, .diy-exchange-rule .head .title:after { content: ''; position: absolute; top: 50%; left: 0; height: 0.2rem; width: 0.2rem; background: #cdcdcd; border-radius: 0.2rem; margin-top: -0.07rem; } .diy-exchange-rule .head .title:after { left: auto; right: 0; } .diy-exchange-rule .info { padding: 0 1rem; color: #666; font-size: 0.7rem; } /* 兑换中心 中部区域 */ .diy-exchange-input { height: auto; overflow: hidden; padding-bottom: 10px; background: #fafafa; } .diy-exchange-input .title { text-align: center; font-size: 16px; padding: 12px 18px 14px; line-height: 16px; } .diy-exchange-input .title .num { font-size: 12px; color: #999; } .diy-exchange-input .input { height: auto; overflow: hidden; border: 1px solid #efefef; margin: 0 48px 12px; border-radius: 4px; } .diy-exchange-input .input input { height: 30px; width: 100%; border-radius: 0.2rem; border: 0; padding: 0 0.4rem; font-size: 0.7rem; text-align: center; color: #666; -webkit-appearance: none; } .diy-exchange-input .btn-danger { margin: 0 2.4rem; border: 0; } .diy-exchange-input .btn-default { margin: 0.5rem 1rem 0; overflow: hidden; } .diy-exchange-input .list { background: #fff; margin: 0 1rem; border-radius: 0.2rem; } .diy-exchange-input .list .item { padding: 0.6rem; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; position: relative; } .diy-exchange-input .list .item:after { content: ''; position: absolute; bottom: 0; right: 0.5rem; left: 3rem; border-bottom: 1px solid #efefef; -webkit-transform: scaleY(0.5); -ms-transform: scaleY(0.5); transform: scaleY(0.5); } .diy-exchange-input .list .item:last-child:after { display: none; } .diy-exchange-input .list .item .ico { height: 2rem; width: 2rem; background-repeat: no-repeat; background-size: 100% auto; background-position: center; } .diy-exchange-input .list .item .ico.money { background-image: url("../images/default/icon_money.png"); } .diy-exchange-input .list .item .ico.credit { background-image: url("../images/default/icon_credit.png"); } .diy-exchange-input .list .item .ico.coupon { background-image: url("../images/default/icon_coupon.png"); } .diy-exchange-input .list .item .ico.redbag { background-image: url("../images/default/icon_redbag.png"); } .diy-exchange-input .list .item .info { width: 100%; -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; padding: 0 0.5rem; line-height: 0.9rem; } .diy-exchange-input .list .item .info .t1 { font-size: 0.75rem; color: #444; } .diy-exchange-input .list .item .info .t2 { color: #aaa; font-size: 0.65rem; } .diy-exchange-input .list .item .btn-exc { margin: 0; padding: 0; text-align: center; width: 3.2rem; } .diy-exchange-input .list .item .btn-exc.disabled { background: #ccc; color: #fff; border: 0; } .fui-danmu { height: 32px; max-width: 240px; border-radius: 16px; position: absolute; top: 20px; left: 10px; z-index: 999; padding: 3px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; font-size: 14px; color: #fff; overflow: hidden; } .fui-danmu:before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #000; z-index: 1; opacity: 0.7; } .fui-danmu.style2 { border-radius: 4px; } .fui-danmu.style2 .thumb { border-radius: 4px; } .fui-danmu .thumb { height: 26px; width: 26px; border-radius: 50%; background: #fff; position: relative; z-index: 2; } .fui-danmu .text { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; padding-left: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; position: relative; z-index: 2; } .fui-danmu .time { text-align: right; padding: 0 4px; font-size: 13px; position: relative; z-index: 2; } .fui-startadv { position: absolute; top: 0; left: 0; top: 0; right: 0; bottom: 0; z-index: 200; } .fui-startadv:before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #000; opacity: 0.6; } .fui-startadv .inner { position: absolute; top: 0; left: 0; right: 0; bottom: 0; /*background: #fff;*/ z-index: 201; } .fui-startadv .inner img { width: 100%; display: none; } .fui-startadv .inner img:first-child { display: block; } .fui-startadv.small-bot .inner, .fui-startadv.small-top .inner { width: 80%; height: 70%; position: relative; margin: 14% auto 0; } .fui-startadv.small-top .inner { margin: 22% auto 0; } .fui-startadv.default .inner .close-adv { position: absolute; top: 14px; right: 14px; z-index: 10002; background: rgba(0, 0, 0, 0.5); color: #fff; font-size: 14px; padding: 2px 8px; border-radius: 20px; } .fui-startadv.small-bot .inner .close-adv, .fui-startadv.small-top .inner .close-adv { width: 100%; height: 90px; position: absolute; bottom: -90px; } .fui-startadv.small-top .inner .close-adv { top: -60px; height: 60px; bottom: 0; } .fui-startadv.small-bot .inner .close-adv:before, .fui-startadv.small-top .inner .close-adv:before { position: absolute; height: 42px; content: ""; width: 1px; background: #fff; left: 50%; margin-left: -0.5px; display: none; } .fui-startadv.small-top .inner .close-adv:before { left: auto; right: 18px; bottom: 0; height: 24px; } .fui-startadv.small-bot .inner .close-adv .close-btn, .fui-startadv.small-top .inner .close-adv .close-btn { height: 48px; width: 48px; position: absolute; bottom: 0; left: 50%; margin-left: -24px; } .fui-startadv.small-top .inner .close-adv .close-btn { height: 36px; width: 36px; top: 0; left: auto; right: 0; } .fui-startadv.small-bot .inner .close-adv .close-btn:before, .fui-startadv.small-top .inner .close-adv .close-btn:before { height: 48px; width: 48px; position: absolute; content: "×"; color: #fff; line-height: 48px; text-align: center; font-size: 56px; font-weight: 100; border: 1px solid #fff; border-radius: 48px; left: -1px; top: -1px; } .fui-startadv.small-top .inner .close-adv .close-btn:before { height: 36px; width: 36px; line-height: 30px; font-size: 42px; } .fui-startadv .fui-swipe { height: 100%; } .fui-startadv .fui-swipe-bullet { background: #fff; margin: 0 3px; } .fui-startadv .dots { height: 14px; padding: 0 10px; position: absolute; left: 0; right: 0; bottom: 10px; text-align: center; } .fui-startadv .dots span { height: 10px; width: 10px; background: #fff; display: inline-block; opacity: 0.5; border-radius: 10px; } .fui-startadv .dots span:first-child { opacity: 1; } .fui-tab a { color: #666; font-size: 14px; width: 100%; height: 38px; line-height: 38px; -webkit-box-flex: 1; -ms-flex: 1; border: 0; border-bottom: 2px solid transparent; border-radius: 0; text-align: center; } .fui-tab.fui-tab-danger a.active { color: #ef4f4f; border-color: #ef4f4f; z-index: 2; } .fui-icon-group.selecter { border-top: 0; } .banner-ul { width: 1000px; padding: 14px 10px; overflow: hidden; } .banner-ul li { border: 2px solid #77cd44; position: relative; overflow: hidden; width: 160px; border-radius: 4px; text-align: center; margin-left: 5px; float: left; } .banner-ul li:first-child { margin-left: 0; } .banner-ul li div { width: 100px; height: 33px; position: absolute; top: 0; left: 0; background: #77cd44; transform: rotate(-25deg); transform-origin: left bottom; } .banner-ul li span { position: absolute; top: 2px; left: 2px; font-size: 10px; color: #fff; } .banner-ul li img { margin: 8px 0 4px; width: 21px; height: 21px; vertical-align: middle; border-radius: 21px; } .banner-ul li p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; padding: 0 14px !important; line-height: 1; padding-bottom: 8px !important; } .banner-ul.style2 li { background: #77cd44; border: 0; padding: 2px; } .banner-ul.style2 li div { width: 40px; height: 18px; transform: rotate(0deg); background: rgba(0, 0, 0, 0.3); position: absolute; left: 0; top: 8px; } .banner-ul.style2 li span { width: 40px; height: 18px; line-height: 18px; text-align: center; top: 8px; left: 0; } .banner-ul.style2 .banner-li-blue { background: #68bfe7; } .banner-ul .banner-li-blue { border: 2px solid #68bfe7; } .banner-ul .banner-li-blue div { background: #68bfe7; } .banner-ul a { color: #000 !important; } .fui-icon-group::-webkit-scrollbar { display: none } .fui-goods-group .fui-goods-item .salez { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; background-repeat: no-repeat; background-position: bottom right; } .fui-swipe .salez { position: absolute; bottom: 0; right: 0; height: auto; width: auto; z-index: 10; } .fui-swipe .salez img { height: auto; width: auto; display: block; } .badge { background: #ff5555; } /*会员中心样式*/ .member_header { position: absolute; width: 7rem; height: 3rem; background: #ff5555; z-index: 80; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; bottom: 0; left: 50%; margin-left: -3.5rem; overflow: hidden; transform: scale(10, 10); transform-origin: center bottom; border: 2px solid #ff5555; } /*组件群组件样式设置*/ #diy-editor .drag { margin-bottom: 15px; cursor: pointer; position: relative; } #diy-editor .public_title_content { text-align: center; height: 25px; line-height: 25px; font-size: 15px; color: #CCC; } /****************************************** 公告群样式 **************************************************************/ .fui-notice { height: auto; font-size: 16px; background: #fff; padding: 10px 16px; overflow: hidden; position: relative; } .fui-notice .image { display: inline-block; height: 1rem; width: auto; position: relative; float: left; padding-right: 0.5rem; vertical-align: middle; } .fui-notice .image img { height: 70%; width: auto; float: left; margin-top: 0.15rem; } .fui-notice .i { float: left; color: #ff9900; font-size: 18px; line-height: 18px; padding-right: 10px; display: inline-block; position: relative; width: 65px; height: 16px; background-image: url("../images/diynotice.png"); background-size: 65px 16px; background-repeat: no-repeat; } .fui-notice .text { height: 20px; padding-left: 10px; font-size: 14px; color: #333; line-height: 20px; overflow: hidden; } .fui-notice .text1 { padding-left: 10px; position: relative; } .fui-notice .text1:before { content: ""; width: 1px; height: 66%; background-color: #e2e2e2; position: absolute; top: 16%; left: 0; } .fui-notice .text ul li { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fui-notice a { color: #333; } .fui-notice .title{ display: inline-block; height: 1rem; width: 2.5rem; position: relative; float: left; vertical-align: middle; text-align: center; border: 0.05rem solid #fff7f7; border-radius: 0.75rem; font-size: 0.7rem; line-height: 1rem; background: #ffe1e1; color: #ff4f4f; padding: 1px; } .fui-notice .title3 { color: #FE433F; font-weight: 700; font-size: 16px; display: inline-block; height: 1rem; position: relative; float: left; vertical-align: middle; line-height: 1rem; } /****************************************** 标题群样式 **************************************************************/ .fui-title2 { width: 100%; padding: 0 15px; } .fui-title2 .main_title{ height: 30px; font-size: 18px; line-height: 30px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fui-title2 .vice_title{ height: 21px; font-size: 12px; line-height: 21px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /****************************************** 图片橱窗群样式 **********************************************************/ .fui-picturew2-i { width: 100%; } .fui-picturew2 img{ width: 100%; height: 100%; object-fit: cover; display: block; } .fui-picturew3:after { content: ""; clear: both; display: block; } .fui-picturew3-i { width: 50%; float: left; } .fui-picturew3 img { width: 100%; height: 100%; object-fit: cover; display: block; } .fui-picturew4:after { content: ""; clear: both; display: block; } .fui-picturew4-i { float: left; } .fui-picturew4-i:nth-child(1) { width: 50%; height: 100%; } .fui-picturew4-i:nth-child(2) { width: 100%; height: 50%; } .fui-picturew4-i:nth-child(3) { width: 100%; height: 50%; } .fui-picturew4 img { width: 100%; height: 100%; object-fit: cover; display: block; } .fui-picturew5:after { content: ""; clear: both; display: block; } .fui-picturew5-i { width: calc(375px / 2); height: calc(375px / 2); float: left; } .fui-picturew5-i:nth-child(1) { width: 375px; height: calc(375px / 2); } .fui-picturew5 img { width: 100%; height: 100%; object-fit: cover; display: block; } .fui-picturew6:after { content: ""; clear: both; display: block; } .fui-picturew6-i { width: 33.33%; float: left; } .fui-picturew6 img { width: 100%; height: 100%; object-fit: cover; display: block; } .fui-picturew7:after { content: ""; clear: both; display: block; } .fui-picturew7-i { width: calc(375px / 2); height: calc(375px / 2); float: left; } .fui-picturew7 img { width: 100%; height: 100%; object-fit: cover; display: block; } /****************************************** 商品样式 ****************************************************************/ .isolating-line{ width:100%; float: left; } #SelectGoodsContent img, #SelectHeadlineContent img, #SelectShopContent img{ height: 35px; width: 35px; } .paging{ height: 35px; line-height: 35px; text-align: right; } .paging .paging_button{ display: inline-block; height: 35px; padding: 2px 15px; border: 1px solid #CCC; margin: 0 10px; font-size: 16px; line-height: 30px; cursor: pointer; moz-user-select: -moz-none; -moz-user-select: none; -o-user-select:none; -khtml-user-select:none; -webkit-user-select:none; -ms-user-select:none; user-select:none; } .paging .paging_active{ background: #CCCCCC; color: #FFF; } /*设置右侧宽度*/ #diy-editor #createNavContent{ width: 375px; margin: 0 auto; overflow: hidden; box-sizing: initial; display: none; } /*卡卷2*/ .jjrm-c { padding: 15px; background-color: #fff; } .jjrm-c-d { margin: -25px 0 0 -15px; } .jjrm-c-d:after { content: ""; display: block; clear: both; } .jjrm-c-i { width: calc((375px - 45px) / 2); margin: 25px 0 0 15px; float: left; } .jjrm-c-i-t { width: 100%; height: calc((375px - 45px) / 2); } .jjrm-c-i-t img { width: 100%; height: 100%; object-fit: cover; border-radius: 2px; display: block; } .jjrm-c-i-c { line-height: 18px; margin-top: 10px; height: 35px; text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .jjrm-c-i-b { margin-top: 6px; } .jjrm-c-i-b .h1 { font-size: 16px; color: #FF4040; font-weight: 600; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .jjrm-c-i-b .h1 .i { font-size: 11px; font-style: normal; font-weight: normal; vertical-align: 1px; margin-left: 3px; } .jjrm-c-i-b .h1 .span { color: #363636; font-size: 11px; font-style: normal; font-weight: normal; vertical-align: 1px; margin-left: 10px; display: inline; } .jjrm-c-i-b .h1 .span .i { height: 14px; line-height: 13px; color: #DDCDA0; font-size: 11px; vertical-align: 0; margin-left: 0; margin-right: 2px; padding: 2px 2px 0 2px; background-color: #363636; border-radius: 3px; display: inline-block; } .jjrm-c-i-b .p { color: #999; font-size: 12px; margin: 0; margin-top: 0; display: -webkit-flex; display: flex; justify-content: space-between; } .jjrm-c-i-b .p .span { text-decoration: line-through; } .jjrm-c-i-b .p .em { font-style: normal; } /*卡卷3*/ .goodslist { padding: 25px 15px 15px 15px; padding-bottom: 0; background-color: #fff; } .goodslist:first-child { padding-top: 15px; } .goodslist:last-child { padding-bottom: 15px; } .goodslist-i-t { width: calc(375px - 30px); height: calc((375px - 30px) / 1.8); } .goodslist-i-t img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 2px; } .goodslist-i-c-t { color: #999; font-size: 12px; margin-top: 10px; display: -webkit-flex; display: flex; justify-content: space-between; } .goodslist-i-c-t-l { padding-right: 10px; -webkit-flex-shrink: 1; flex-shrink: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .goodslist-i-c-t-l { -webkit-flex: 1; flex: 1; } .goodslist-i-c-c { line-height: 24px; font-size: 16px; margin-top: 10px; } .goodslist-i-c-c .i { height: 24px; line-height: 24px; font-size: 14px; font-style: normal; margin-right: 5px; padding: 0 9px; background-color: #FFD93F; border-radius: 2px; display: inline-block; } .goodslist-i-c-c2 { margin-top: 10px; display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; } .goodslist-i-c-c2 .h1 { color: #FF4040; font-size: 20px; font-weight: 600; margin: 0; -webkit-flex-shrink: 1; flex-shrink: 1; overflow: hidden; text-overflow: ellipsis; white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; } .goodslist-i-c-c2 .h1 .i { font-size: 12px; font-weight: normal; vertical-align: 1px; margin-left: 3px; } .goodslist-i-c-c2 .h1 .span { color: #363636; font-size: 11px; font-style: normal; font-weight: normal; vertical-align: 1px; margin-left: 10px; display: inline; } .goodslist-i-c-c2 .h1 .span .i { height: 14px; line-height: 13px; color: #DDCDA0; font-size: 11px; vertical-align: 0; margin-left: 0; margin-right: 2px; padding: 2px 2px 0 2px; background-color: #363636; border-radius: 3px; display: inline-block; } .goodslist-i-c-c2 .h2 { width: 72px; height: 28px; line-height: 28px; color: #fff; font-size: 14px; text-align: center; font-weight: normal; margin: 0; background-color: #FF4040; border-radius: 4px; -webkit-flex-shrink: 0; flex-shrink: 0; } .goodslist-i-c-c2 .sell-out { color: #808080; background-color: #D2D2D2; } .goodslist-i-c-b{ margin-top: 10px; } .goodslist-i-c-b .p { color: #999; font-size: 12px; margin: 0; margin-top: 3px; display: -webkit-flex; display: flex; justify-content: space-between; } .goodslist-i-c-b .span { text-decoration: line-through; } .goodslist-i-c-b .em { font-style: normal; } /*抢购与团购风格4*/ .qiangoulist { padding: 15px; padding-bottom: 0; } .qiangoulist:last-child { padding-bottom: 15px; } .qglist-i-t { height: calc((375px - 30px) / 1.8); background-color: #fff; border-radius: 5px 5px 0 0; overflow: hidden; position: relative; } .qglist-i-t img { width: 100%; height: 100%; border-radius: 5px 5px 0 0; object-fit: cover; display: block; position: relative; } .qglist-i-t-bar { height: 36px; line-height: 36px; padding-top: 36px; background: -webkit-linear-gradient(90deg, #FF7E42, #FB2F52); background: linear-gradient(90deg, #FF7E42, #FB2F52); border-radius: 70px 0 0 70px; box-sizing: initial; position: absolute; top: -36px; right: 0; } .qglist-i-t-bar-d { display: -webkit-flex; display: flex; justify-content: flex-start; } .qglist-i-t-bar-l { color: #fff; font-size: 14px; padding: 0 20px 0 15px; } .qglist-i-t-bar-l .i { font-size: 16px; vertical-align: -1px; margin-right: 4px; display: inline; } .qglist-i-t-bar-l .em { font-style: normal; font-weight: 600; display: inline; } .qglist-i-t-bar-r { padding: 5.4px 10px 5.4px 0; } .qglist-i-t-bar-r:after { content: ""; display: block; clear: both; } .qglist-i-t-bar-r .i { width: 24px; height: 24px; margin-left: -8px; border: .6px solid #fff; border-radius: 50%; float: left; } .qglist-i-t-bar-r .i img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; } .qglist-i-c { padding: 10px 15px; background-color: #fff; border-radius: 0 0 5px 5px; } .qglist-i-c-t { line-height: 21px; font-size: 16px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .qglist-i-c-c { color: #FF4040; font-size: 24px; font-weight: 600; margin-top: 10px; position: relative; } .qglist-i-c-c .i { font-size: 12px; font-weight: normal; vertical-align: 1px; margin-left: 3px; } .qglist-i-c-c .span { color: #999; font-size: 14px; font-weight: normal; margin-left: 15px; text-decoration: line-through; display: inline; } .qglist-i-c-c .h1 { height: 36px; line-height: 36px; color: #FFE200; font-size: 14px; margin: 0; margin-right: -22.5px; padding: 0 10px 0 3px; background-color: #2D2D2D; border-radius: 1px 0 5px 2px; position: absolute; top: 0; right: 0; display: inline-block; } .qglist-i-c-c .h1:before { content: ""; width: 0; height: 0; border-width: 18px; border-style: solid; border-color: transparent #2D2D2D transparent transparent; position: absolute; top: 0; left: -35px; } .qglist-i-c-c .h1:after { content: ""; width: 2px; height: 2px; border-width: 7.5px; border-style: solid; border-color: transparent transparent transparent #2D2D2D; position: absolute; top: -7px; right: -7px; } /*超级券风格1*/ .fui-coupon_goods-c { padding: 15px; background-color: #fff; display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; position: relative; } .fui-coupon_goods-c:after { content: ""; height: 1px; width: calc(100% - 30px); background-color: #f3f3f3; position: absolute; left: 15px; bottom: 0; } .fui-coupon_goods-c:last-child { padding-bottom: 15px; } .fui-coupon_goods-c:last-child:after { height: 0; } .fui-coupon_goods-c-l { width: 100px; height: 100px; -webkit-flex-shrink: 0; flex-shrink: 0; } .fui-coupon_goods-c-l img { width: 100%; height: 100%; object-fit: cover; display: block; } .fui-coupon_goods-c-r { margin-left: 10px; -webkit-flex: 1; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fui-coupon_goods-c-r-h1 { height: 34px; line-height: 17px; font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .fui-coupon_goods-c-r-h3 { padding-top: 20px; display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; } .fui-coupon_goods-c-r-h3-l { padding-top: 12px; -webkit-flex-shrink: 1; flex-shrink: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fui-coupon_goods-c-r-h3-l .h1 { height: 18px; line-height: 18px; color: #F02B2B; font-size: 16px; font-weight: 600; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fui-coupon_goods-c-r-h3-l .h1 span { font-size: 13px; font-weight: normal; } .fui-coupon_goods-c-r-h3-l .p { height: 16px; line-height: 16px; color: #999; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fui-coupon_goods-c-r-h3-r { -webkit-flex-shrink: 0; flex-shrink: 0; } .fui-coupon_goods-c-r-h3-r .h1 { margin: 0; margin-top: -14px; text-align: right; } .fui-coupon_goods-c-r-h3-r .h1 span { min-width: 70px; height: 30px; line-height: 30px; color: #fff; font-size: 14px; text-align: center; padding: 0 10px; background-color: #F12B2B; -webkit-border-radius: 3px; border-radius: 3px; display: inline-block; } .fui-coupon_goods-c-r-h3-r .p { height: 16px; line-height: 16px; text-align: right; margin: 0; margin-top: 1px; } .fui-coupon_goods-c-r-h3-r .p span { color: #999; font-size: 12px; } .fui-coupon_goods-c-r-h3-r .p .p-d { width: 70px; height: 7px; background-color: #fff; border: 1px solid #FF8989; -webkit-border-radius: 30px; border-radius: 30px; display: inline-block; vertical-align: 1px; } .fui-coupon_goods-c-r-h3-r .p .p-d .p-d-sc { height: 100%; background-color: #FF8989; } /*拼团风格1*/ .fui-fightgroup_goods{ padding: 16px; background: #f6f6f6; } .fui-fightgroup_goods-i { padding: 15px; padding-bottom: 16px; background-color: #fff; display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; position: relative; border-radius: 5px; margin-bottom: 11px; } .fui-fightgroup_goods-i:after { content: ""; height: 1px; width: calc(375px - 30px); background-color: #f3f3f3; position: absolute; left: 15px; bottom: 0; } .fui-fightgroup_goods-i:last-child { padding-bottom: 15px; } .fui-fightgroup_goods-i:last-child:after { height: 0; } .fui-fightgroup_goods-i-l { width: 100px; height: 100px; -webkit-flex-shrink: 0; flex-shrink: 0; position: relative; } .fui-fightgroup_goods-i-l i { height: 17px; line-height: 18px; color: #fff; font-size: 12px; font-style: normal; padding: 0 5px; background: -webkit-linear-gradient(0deg,#FE85C1,#F562CD); background: linear-gradient(0deg,#FE85C1,#F562CD); -webkit-border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px; position: absolute; top: 0; left: 5px; z-index: 1; display: inline-block; } .fui-fightgroup_goods-i-l img { width: 100%; height: 100%; object-fit: cover; display: block; } .fui-fightgroup_goods-i-r { margin-left: 10px; -webkit-flex: 1; flex: 1; } .fui-fightgroup_goods-i-r-h1 { height: 34px; line-height: 17px; font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .fui-fightgroup_goods-i-r-h2 i { color: #F12B2B; font-size: 12px; font-style: normal; margin: 5px 5px 0 0; padding: 2px 5px 0 5px; background-color: #FFEDED; -webkit-border-radius: 3px; border-radius: 3px; display: inline-block; } .fui-fightgroup_goods-i-r-h2 i:nth-child(2) { background-color: #fff; } .fui-fightgroup_goods-i-r-h3 { padding-top: 6px; display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; } .fui-fightgroup_goods-i-r-h3-l { -webkit-flex-shrink: 1; flex-shrink: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fui-fightgroup_goods-i-r-h3-l .h1 { height: 18px; line-height: 18px; color: #F02B2B; font-size: 16px; font-weight: 600; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fui-fightgroup_goods-i-r-h3-l .h1 span { font-size: 13px; font-weight: normal; } .fui-fightgroup_goods-i-r-h3-l .p { height: 16px; line-height: 16px; color: #999; font-size: 12px; text-decoration: line-through; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fui-fightgroup_goods-i-r-h3-r { -webkit-flex-shrink: 0; flex-shrink: 0; } .fui-fightgroup_goods-i-r-h3-r span { min-width: 70px; height: 30px; line-height: 30px; color: #fff; font-size: 14px; text-align: center; padding: 0 10px; background-color: #F12B2B; -webkit-border-radius: 50px; border-radius: 50px; display: inline-block; } /*拼团风格2*/ .fui-fightgroup_goods2-d { margin: 0; } .fui-fightgroup_goods2-d:after { content: ""; clear: both; display: block; } .fui-fightgroup_goods2-i { width: calc((375px - 30px) / 2); margin: 0 0 10px 10px; background-color: #fff; border: 1px solid #f3f3f3; -webkit-border-radius: 3px; border-radius: 3px; overflow: hidden; float: left; } .fui-fightgroup_goods2-i:nth-child(1) { margin-top: 10PX; } .fui-fightgroup_goods2-i:nth-child(2) { margin-top: 10PX; } .fui-fightgroup_goods2-i-t { height: calc((375px - 34px) / 2); position: relative; } .fui-fightgroup_goods2-i-t i { height: 17px; line-height: 18px; color: #fff; font-size: 12px; font-style: normal; padding: 0 5px; background: -webkit-linear-gradient(0deg,#FE85C1,#F562CD); background: linear-gradient(0deg,#FE85C1,#F562CD); -webkit-border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px; position: absolute; top: 0; left: 5px; z-index: 1; display: inline-block; } .fui-fightgroup_goods2-i-t img { width: 100%; height: 100%; object-fit: cover; display: block; } .fui-fightgroup_goods2-i-c { padding: 10px; } .fui-fightgroup_goods2-i-c-h1 { height: 36px; line-height: 18px; text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .fui-fightgroup_goods2-i-c-h2 i { color: #F12B2B; font-size: 12px; font-style: normal; margin: 5px 5px 0 0; padding: 2px 5px 0 5px; background-color: #FFEDED; -webkit-border-radius: 3px; border-radius: 3px; display: inline-block; } .fui-fightgroup_goods2-i-c-h2 i:nth-child(2) { margin-right: 0; background-color: #fff; } .fui-fightgroup_goods2-i-c-h3 { color: #F02B2B; font-size: 14px; font-weight: 600; margin-top: 1px; } .fui-fightgroup_goods2-i-c-h3 i { font-size: 18px; font-style: normal; } /*头条风格1*/ .fui-headline .goodstop-i { margin-bottom: 10px; padding: 15px; background-color: #fff; } .fui-headline .goodstop-i:last-child { margin-bottom: 0; } .fui-headline .goodstop-i .h1 { line-height: 24px; font-size: 18px; letter-spacing: 2px; font-weight: normal; margin: 0; } .fui-headline .goodstop-i-t { width: calc(375px - 30px); height: calc((375px - 30px) / 1.8); margin-top: 10px; position: relative; } .fui-headline .goodstop-i-t-tag { position: absolute; top: 10px; left: 10px; } .fui-headline .goodstop-i-t-tag .i { height: 26px; line-height: 26px; font-size: 12px; font-style: normal; margin-left: 5px; padding: 1px 6px; background-color: #FFD93F; border-radius: 2px; display: inline; } .fui-headline .goodstop-i-t-tag .i:first-child { margin-left: 0; } .fui-headline .goodstop-i-t img { width: 100%; height: 100%; object-fit: cover; display: block; } .fui-headline .goodstop-i-c .h2 { height: 42px; line-height: 21px; font-size: 12px; color: #888; font-weight: normal; margin-top: 10px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .fui-headline .goodstop-i-c .p { height: 30px; line-height: 30px; font-size: 14px; color: #888; margin-top: 10px; display: -webkit-flex; display: flex; justify-content: space-between; } .fui-headline .goodstop-i-c .p .span { line-height: 30px; -webkit-flex-shrink: 1; flex-shrink: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: -webkit-flex; display: flex; justify-content: flex-start; } .fui-headline .goodstop-i-c .p .span .i { width: 30px; height: 30px; margin-right: 10px; border-radius: 50%; display: block; } .fui-headline .goodstop-i-c .p .span .b { font-weight: normal; display: block; } .fui-headline .goodstop-i-c img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; } .fui-headline .goodstop-i-c .p .em { font-style: normal; -webkit-flex-shrink: 0; flex-shrink: 0; } /*通用商品*/ .transverse .transverse_list::-webkit-scrollbar { width: 0; height: 0; color: transparent; } .transverse { font-size: 15px; background-color: #fff; } .transverse .transverse_list { width: auto; overflow-x: auto; } .goods_father { padding: 15px 0 5px 0; display: -webkit-flex; display: flex; -webkit-justify-content: flex-start; justify-content: flex-start; } .transverse .transverse_list .goods_item { width: calc(375px / 3); padding: 0 5px; -webkit-flex: 0 0 auto; flex: 0 0 auto; box-sizing: initial; } .transverse .transverse_list .goods_item:first-child { padding-left: 15px; } .transverse .transverse_list .goods_item:last-child { padding-right: 15px; } .transverse .transverse_list .goods_item .goods_img { width: calc(375px / 3); height: calc(375px / 3); } .transverse .transverse_list .goods_item .goods_img .image { display: block; width: 100%; height: 100%; object-fit: cover; } .transverse .transverse_list .goods_item .goods_tit { line-height: 21px; color: #333; margin: 10px 0 2.5px 0; overflow: hidden; text-overflow: ellipsis; white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .transverse .transverse_list .goods_item .goods_price { display: flex; align-items: baseline; } .transverse .transverse_list .goods_item .goods_price .present_price { color: #FF4040; display: flex; align-items: baseline; font-size: 13px; } .transverse .transverse_list .goods_item .goods_price .present_price .span { font-size: 16px; font-weight: 600; } .transverse .transverse_list .goods_item .goods_price .original_price { color: #cccccc; text-decoration: line-through; padding-left: 10px; font-size: 13px; } /*通用商品2*/ .diy-public_goods2 .hdtt-t { border-top: 0 solid #f6f6f6; display: -webkit-flex; display: flex; justify-content: space-between; } .diy-public_goods2 .hdtt-t .h1 { font-weight: normal; font-size: 18px; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .diy-public_goods2 .hdtt-t .p { color: #999; font-size: 12px; margin: 0; margin-top: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .diy-public_goods2 .hdtt-t-r { display: -webkit-flex; display: flex; align-items: center; } .diy-public_goods2 .hdtt-t-r .span { font-size: 18px; display: inline-block; } .diy-public_goods2 .hdtt-t-r .span .em { font-size: 21px; font-style: normal; display: inline; } .diy-public_goods2 .goodslist { padding-top: 15px; } .diy-public_goods2 .goodslist-d { margin-top: 15px; } .diy-public_goods2 .goodslist-i { display: none; } .diy-public_goods2 .goodslist-i:first-child { display: block; } .diy-public_goods2 .goodslist-i-c-c { max-height: 48px; text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } /*商家信息*/ .shangjia:first-child .shangjia-i{ margin-top: 0; } .shangjia-i { margin-top: 3px; padding: 15px 15px 0 15px; position: relative; background-color: #fff; } .shangjia-i-l { width: 90px; height: 90px; border-radius: 3px; background-position: center; background-size: cover; position: absolute; } .shangjia-i-l img{ width: 100%; height: 100%; } .shangjia-i-r { padding-left: 100px; } .shangjia-i-r-d { padding-bottom: 7px; border-bottom: 1px solid #f3f3f3; } .shangjia-i-r-t1 { height: 21px; line-height: 21px; font-size: 15px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: inline-block; width: calc(100% - 45px); } .shangjia-i-r-d .shopPosition{ float: right; color: #f02020; } .shop-i-r-t1 { height: 42px; line-height: 21px; font-size: 15px; width: calc(100% - 45px); display: inline-block; } .shop-i-r-t1 .shopName{ width:100%; text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; } .shangjia-i-r-t2 { position: relative; height: 21px; line-height: 21px; top: -10px; } .shangjia-i-r-t2 .icon-shoucangxiao { font-size: 14px; display: inline; margin-right: 5px; float: left; } .shangjia-i-r-t2 .star { display: inline-block; position: absolute; height: 21px; } .shangjia-i-r-t2 .star:after { content: ""; clear: both; display: block; } .shangjia-i-r-t2 .star-dark .icon-shoucangxiao { z-index: 1; } .star-dark .icon-shoucangxiao { color: #eee; } .star-light .icon-shoucangxiao { color: #ff9900; } .shangjia-i-r-t2 .star-light { z-index: 1; } .shangjia-i-r-t2 .star-width { overflow: hidden; word-break: keep-all; white-space: nowrap; } .shangjia-i-r-t2 .star-width .score{ color: red; font-size: 15px; } .shangjia-i-r-t2 .monthSalenNum{ left:50px; } .shangjia-i-r-t3 { position: relative; height: 21px; line-height: 21px; color: #999; font-size: 13px; margin-top: 2px; top: -12px; } .shangjia-i-r-t4 { position: relative; height: 21px; line-height: 21px; color: #999; font-size: 13px; margin-top: 2px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; top: -14px; height: 25px; } .shangjia-i-r-t4 span{ display: inline-block; padding: 1px 5px; margin-right: 5px; border-radius: 11px 11px 11px 0px; border: 1px solid hsla(0,0%,60%,.4); font-size: 11px; } .shangjia-i-b { line-height: 20px; color: #999; font-size: 13px; padding: 6px 0; position: relative; } .shangjia-i-b-i { height: 21px; margin-top: 3px; padding-right: 21px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .shangjia-i-b-i:first-child { margin-top: 0; } .shangjia-i-b i { width: 21px; height: 21px; line-height: 21px; text-align: right; position: absolute; top: 5px; right: 0; display: inline-block; } .shangjia-i-b em { width: 17px; height: 17px; line-height: 17px; text-align: center; color: #fff; font-style: normal; border-radius: 2px; display: inline-block; } .shangjia-i-b .qiang { background-color: #ff6d6c; } .shangjia-i-b .li { background-color: #c56dfd; } .shangjia-i-b .ka { background-color: #b9976f; } .shangjia-i-b .hui { background-color: #ff8400; } .shangjia-i-b .pin { background-color: #fe433f; } .shangjia-i-b .tuan { background-color: #46C8D8; } .shangjia-i-b-i { height: 21px; line-height: 21px; } .shangjia-i-b-i span { margin-left: 4px; } .shangjia-i-b-t2 { height: 21px; line-height: 21px; margin-top: 3px; } .shangjia-i-b-t2 em { margin-right: 7px; } .shangjia-i-b-t2 em:last-child { margin-right: 0; } /*头条风格2*/ .fui-headline2 .haodiantoutiao { padding: 15px 0 15px 15px; } .fui-headline2 .hdtt-t { margin-right: 15px; border-top: 0 solid #f6f6f6; display: -webkit-flex; display: flex; justify-content: space-between; } .fui-headline2 .hdtt-t .h1 { font-weight: normal; font-size: 18px; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fui-headline2 .hdtt-t .p { color: #999; font-size: 12px; margin: 0; margin-top: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fui-headline2 .hdtt-t-r { display: -webkit-flex; display: flex; align-items: center; } .fui-headline2 .hdtt-t-r .span { font-size: 18px; display: inline-block; } .fui-headline2 .hdtt-t-r .span .em { font-size: 21px; font-style: normal; display: inline; } .fui-headline2 .hdtt-c { width: calc(375px - 30px); margin-top: 15px; overflow: hidden; } .fui-headline2 .goodstop-i { width: 765px; padding: 0; display: -webkit-flex; display: flex; -webkit-justify-content: flex-start; justify-content: flex-start; overflow: hidden; } .fui-headline2 .goodstop-i .goodstop-i-a { width: 375px; margin-left: 15px; } .fui-headline2 .goodstop-i .goodstop-i-a:first-child { margin-left: 0; } .fui-headline2 .goodstop-i-t { width: 375px; height: calc(375px / 1.8); position: relative; } .fui-headline2 .goodstop-i-t img { width: 100%; height: 100%; object-fit: cover; display: block; } .fui-headline2 .goodstop-i-c .h1 { height: 21px; line-height: 21px; font-size: 16px; font-weight: normal; margin: 0; margin-top: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fui-headline2 .goodstop-i-c .h2 { height: 42px; line-height: 21px; font-size: 12px; color: #888; font-weight: normal; margin: 0; margin-top: 10px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .fui-headline2 .goodstop-i-c .p { height: 21px; line-height: 21px; font-size: 13px; color: #888; margin: 0; margin-top: 10px; display: -webkit-flex; display: flex; justify-content: space-between; } .fui-headline2 .goodstop-i-c .p .span { -webkit-flex-shrink: 1; flex-shrink: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fui-headline2 .goodstop-i-c .p .span .a .i { width: 18px; height: 18px; line-height: 18px; color: #fff; text-align: center; font-style: normal; margin-right: 5px; background-color: #38C286; border-radius: 2px; display: inline-block; } .fui-headline2 .goodstop-i-c .p .span .song { color: #999; } .fui-headline2 .goodstop-i-c .p .em { font-style: normal; -webkit-flex-shrink: 0; flex-shrink: 0; } /****************************************** 图片魔方样式 ************************************************************/ /*组件*/ .fui-magic_cube{ width: 375px; height: 375px; padding:0; border:0; position: relative; } .fui-magic_cube .block img{ width: 100%; height: 100%; object-fit: inherit; display: block; } /*配置*/ #edit_magic_cube .cube_block{ text-align: center; box-sizing: content-box; cursor: pointer; float: left; position: relative; z-index: 2; } #edit_magic_cube .cube_block:after { content: ""; width: 100%; height: 100%; border: 1px solid #f2f2f2; position: absolute; top: 0; left: 0; } #edit_magic_cube #cube_table{ margin-top: 15px!important; background-color: #fff; position: relative; } #edit_magic_cube .cube_block span{ font-size: 20px; color: #BBB; position: relative; z-index: 2; } #edit_magic_cube .active{ background: rgba(232, 247, 253, 1); position: relative; z-index: 1; } #edit_magic_cube .active .active-hover { width: 100%; height: 100%; background: rgba(232, 247, 253, 1); border: 1px dashed #99CCFF; position: absolute; top: 0; left: 0; z-index: 1; } #edit_magic_cube .active:after { content: ""; width: 100%; height: 100%; border: 1px dashed #99CCFF; position: absolute; top: 0; left: 0; } #edit_magic_cube #canvas_area{ position: absolute; top: 0; left: 0; z-index: 999; cursor: pointer; } .creat-p {text-align: center;background-color: rgba(232, 247, 253, 1); position: absolute;z-index: 2;overflow: hidden;position: relative;} .creat-p:after {content: "";width: 100%;height: 100%;border: 1px solid #99CCFF;position: absolute;top: 0;left: 0;} .creat-p-act:after {border: 1px dashed #f10;} .creat-p span {height: 20px;line-height: 20px;color: #88c4dc;font-size: 12px;position: absolute;top: 50%;left: 50%;-webkit-transform: translateX(-50%) translateY(-50%);transform: translateX(-50%) translateY(-50%);} .creat-p-act-del {width: 46px;height: 46px;line-height: 65px;text-indent: 7px;text-align: left;color: #fff;background-color: #f10;border-radius: 50%;position: absolute;top: -23px;right: -23px;z-index: 1;cursor: pointer;} .creat-p-act-del i {font-size: 15px;font-weight: 600;} #edit_magic_cube #create-cube .cude-del{ height: 0; width: 100%; display: block; position: relative; } #edit_magic_cube #create-cube .cude-del:before { content: "×"; position: absolute; height: 16px; width: 16px; text-align: center; line-height: 14px; color: #fff; cursor: pointer; background: rgba(0,0,0,0.3); border-radius: 16px; top: -6px; right: -6px; z-index: 10; } /******** 列表页面弹框样式(页面管理列表,菜单管理列表,页面广告列表) *************************************************/ #select_pageClass{ display: none; position: absolute; top: 15%; left: 25%; background: #FFF; z-index: 9999; overflow: hidden; padding-right: 0!important; max-width: 730px; } #select_pageClass .pageClass_title{ width: 100%; height: 50px; line-height: 50px; padding: 0 10px; text-align: left; background: #f6f6f6; } #select_pageClass .pageClass_del{ position: absolute; top: 12px; right: 10px; font-size: 20px; height: 25px; line-height: 25px; width: 25px; text-align: center; cursor: pointer; } #select_pageClass .pageClass_content{ float: left; margin: 10px 15px; } #select_pageClass .pageClass_block{ float: left; width: 120px; text-align: center; margin: 10px; color: #FFFFFF; } #select_pageClass .pageClass_block .title{ display: inline-block; width: 100%; height: 100px; line-height: 100px; font-size: 16px; } #select_pageClass .pageClass_block .createButton{ display: inline-block; width: 100%; height: 55px; line-height: 55px; } #select_pageClass .pageClass_block .createButton span{ width: 80px; height: 30px; line-height: 30px; display: inline-block; cursor: pointer; border: 1px solid; border-color: inherit; } #select_pageClass a { color: inherit; } /*颜色*/ #select_pageClass .pageClass_block:nth-of-type(1){ background: linear-gradient(14deg,#4A4A4A,#da0000); } #select_pageClass .pageClass_block:nth-of-type(2){ background: linear-gradient(14deg,#4A4A4A,#da0097); } #select_pageClass .pageClass_block:nth-of-type(3){ background: linear-gradient(14deg,#4A4A4A,#da00d3); } #select_pageClass .pageClass_block:nth-of-type(4){ background: linear-gradient(14deg,#4A4A4A,#9a00da); } #select_pageClass .pageClass_block:nth-of-type(5){ background: linear-gradient(14deg,#4A4A4A,#3600da); } #select_pageClass .pageClass_block:nth-of-type(6){ background: linear-gradient(14deg,#4A4A4A,#00dada); } #select_pageClass .pageClass_block:nth-of-type(7){ background: linear-gradient(14deg,#4A4A4A,#00da94); } #select_pageClass .pageClass_block:nth-of-type(8){ background: linear-gradient(14deg,#4A4A4A,#00da1a); } #select_pageClass .pageClass_block:nth-of-type(9){ background: linear-gradient(14deg,#4A4A4A,#87bf00); } #select_pageClass .pageClass_block:nth-of-type(10){ background: linear-gradient(14deg,#4A4A4A,#d7da00); } #select_pageClass .pageClass_block:nth-of-type(11){ background: linear-gradient(14deg,#4A4A4A,#da6e00); } #select_pageClass .pageClass_block:nth-of-type(12){ background: linear-gradient(14deg,#4A4A4A,#da0000) } #select_wechat{ display: none; position: absolute; top: 40%; left: 40%; background: #FFF; z-index: 9999; } #select_wechat .pageClass_title{ width: 100%; height: 50px; line-height: 50px; padding: 0 10px; text-align: left; background: #f6f6f6; } #select_wechat .pageClass_del{ position: absolute; top: 0; right: 0px; font-size: 20px; height: 25px; line-height: 25px; width: 25px; text-align: center; cursor: pointer; } #select_wechat .pageClass_content{ float: left; margin: 10px 15px 0px 15px; } #select_wechat .pageClass_block{ float: left; width: 120px; text-align: center; margin: 10px; } #select_wechat .pageClass_block .title{ display: inline-block; width: 100%; height: 100px; line-height: 100px; font-size: 16px; } #select_wechat .pageClass_block .createButton{ display: inline-block; width: 100%; height: 55px; line-height: 55px; } #select_wechat .pageClass_block .createButton span{ width: 80px; height: 30px; line-height: 30px; display: inline-block; cursor: pointer; border: 1px solid; border-color: inherit; } #select_wechat a { color: inherit; } /*颜色*/ #select_wechat .pageClass_block:nth-of-type(1){ background: #e9fae4; color: #7ecf6b; } #select_wechat .pageClass_block:nth-of-type(2){ background: #fff3f3; color: #ff5555; } /*社群组件样式*/ .fui-community{ padding: 15px; display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; } .fui-community .images{ width: 46px; height: 46px; -webkit-flex-shrink: 0; flex-shrink: 0; } .fui-community .images img{ width: 100%; height: 100%; display: block; border-radius: 5px; } .fui-community .textarea{ padding: 0 10px; -webkit-flex: 1; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fui-community .textarea p{ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; height: 23px; line-height: 23px; color: #999; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fui-community .textarea p:first-child { height: 23px; line-height: 23px; color: #333; font-size: 15px; } .fui-community .add_button{ display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-flex-shrink: 0; flex-shrink: 0; } .fui-community .add_button span{ color: #fff; font-size: .7rem; padding: .15rem .8rem; background-color: #FE433F; display: inline-block; -webkit-border-radius: 3px; border-radius: 3px; } #backTop{ position: fixed; z-index: 0; bottom: 50px; left: calc((100% - 300px - 407px) / 2 + 500px); cursor: pointer; color: #fff; background: #ddd; -webkit-border-radius: 4px; border-radius: 4px; width: 50px; height: 50px; line-height: 50px; text-align: center; font-size: 16px; font-weight: 600; } #backTop:hover { color: #666; } /****************************************** 商户组件样式 **************************************************************/ /*风格三*/ .model-shop3{ width: 100%; padding: 10px; background-color: #FFF; } .model-shop3 .shop-list{ display: -webkit-box; justify-content: flex-start; overflow: hidden; } .model-shop3 .shop-block{ margin-right: 10px; border-radius: 10px; overflow: auto; width: 150px; } .model-shop3 .shop-block .shop-logo{ width: 150px; height: 150px; position: relative; } .model-shop3 .shop-block .shop-logo img{ width: 100%; height: 100%; } .model-shop3 .shop-block .shop-logo .shop-distance{ position: absolute; bottom: 10px; left: 10px; color: #FFF; background: #797678; padding: 2px 5px; font-size: 13px; height: 20px; line-height: 15px; border-radius: 5px; opacity: .6; } .model-shop3 .shop-block .shop-logo .shop-distance i{ display: inline-block; font-size: 13px; } .model-shop3 .shop-block .shop-info{ width: 100%; } .model-shop3 .shop-block .shop-info .shop-title{ font-size: 13px; height: 30px; line-height: 30px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; } .model-shop3 .shop-block .shop-info .shop-sales{ font-size: 13px; color: #AEAEAE; height: 20px; line-height: 15px; } .model-shop3 .shop-block .shop-info .shop-tag{ overflow: hidden; white-space: nowrap; } .model-shop3 .shop-block .shop-info .shop-tag .shop-tag-label{ color: #FF7474; border: 1px solid #FF7474; padding: 0px 3px; font-size: 12px; height: 18px; line-height: 18px; border-radius: 3px; } /*风格四*/ .model-shop4{ width: 100%; padding: 10px; background-color: #FFF; } .model-shop4 .shop-list{ justify-content: flex-start; overflow: hidden; width: 100%; } .model-shop4 .shop-block{ margin-right: 10px; border-radius: 10px; overflow: auto; width: 170px; float: left; margin-bottom: 10px; } .model-shop4 .shop-block:nth-child(2n){ margin-right: 0px; } .model-shop4 .shop-block .shop-logo{ width: 170px; height: 170px; position: relative; } .model-shop4 .shop-block .shop-logo img{ width: 100%; height: 100%; } .model-shop4 .shop-block .shop-logo .shop-business-hours{ position: absolute; bottom: 10px; left: 10px; color: #FFF; background: #797678; padding: 2px 5px; font-size: 13px; height: 20px; line-height: 15px; border-radius: 5px; opacity: .6; } .model-shop4 .shop-block .shop-info{ width: 100%; } .model-shop4 .shop-block .shop-info .shop-title{ font-size: 13px; height: 30px; line-height: 30px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; } .model-shop4 .shop-block .shop-info .shop-sales{ font-size: 13px; color: #AEAEAE; height: 20px; line-height: 15px; } .model-shop4 .shop-block .shop-info .shop-address{ height: 22px; width: 100%; color: #AEAEAE; } .model-shop4 .shop-block .shop-info .shop-address .shop-address-city{ height: 20px; line-height: 20px; font-size: 13px; width: calc(100% - 45px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; float: left; } .model-shop4 .shop-block .shop-info .shop-address .shop-address-city i{ display: inline-block; font-size: 13px; } .model-shop4 .shop-block .shop-info .shop-address .shop-address-distance{ float: left; width: 45px; font-size: 13px; height: 20px; line-height: 20px; text-align: center; } .model-shop4 .shop-block .shop-info .shop-tag{ overflow: hidden; white-space: nowrap; height: 25px; } .model-shop4 .shop-block .shop-info .shop-tag .shop-tag-label{ color: #FF7474; border: 1px solid #FF7474; padding: 0px 3px; font-size: 12px; height: 18px; line-height: 18px; border-radius: 3px; } /*风格五*/ .model-shop5{ width: 100%; background-color: #FFF; overflow: hidden; border-top-left-radius: 10px; border-top-right-radius: 10px; } .model-shop5 .shop-list{ justify-content: flex-start; overflow: hidden; width: 100%; position: relative; padding-top: 60px; } .model-shop5 .shop-list .shop-top{ height: 120px; width: 100%; border-top-left-radius: 10px; border-top-right-radius: 10px; overflow: hidden; position: absolute; top: 0px; } .model-shop5 .shop-list .shop-top img{ width: 100%; height: 100%; position: relative; } .model-shop5 .shop-list .shop-top .shop-top-title{ position: absolute; top: 20px; left: 10px; font-size: 20px; font-weight: 600; width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .model-shop5 .shop-list .shop-top .shop-more{ position: absolute; top: 20px; right: 10px; font-size: 15px; width: 80px; height: 30px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; line-height: 30px; } .model-shop5 .shop-list .shop-top .shop-more i{ font-size: 15px; } .model-shop5 .shop-list .shop-content{ float: left; } .model-shop5 .shop-block{ margin-left: 10px; /* border-radius: 10px; */ border-top-left-radius: 10px; border-top-right-radius: 10px; overflow: auto; width: 111px; float: left; margin-bottom: 10px; background-color: #F8F8F8; } .model-shop5 .shop-block .shop-logo{ width: 111px; height: 111px; position: relative; } .model-shop5 .shop-block .shop-logo img{ width: 100%; height: 100%; } .model-shop5 .shop-block .shop-logo .shop-distance{ position: absolute; bottom: 10px; left: 10px; color: #FFF; background: #797678; padding: 2px 5px; font-size: 13px; height: 20px; line-height: 15px; border-radius: 5px; opacity: .6; } .model-shop5 .shop-block .shop-logo .shop-distance i{ display: inline-block; font-size: 13px; } .model-shop5 .shop-block .shop-info{ width: 100%; padding: 5px; } .model-shop5 .shop-block .shop-info .shop-title{ font-size: 13px; height: 30px; line-height: 30px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; } .model-shop5 .shop-block .shop-info .shop-sales{ font-size: 13px; color: #AEAEAE; height: 20px; line-height: 15px; } .model-shop5 .shop-block .shop-info .shop-tag{ overflow: hidden; white-space: nowrap; height: 25px; } .model-shop5 .shop-block .shop-info .shop-tag .shop-tag-label{ color: #FF7474; border: 1px solid #FF7474; padding: 0px 3px; font-size: 12px; height: 18px; line-height: 18px; border-radius: 3px; } /*风格六*/ .model-shop6{ width: 100%; padding: 15px; background-color: #f6f6f6; } .model-shop6 .shop-list{ display: -webkit-box; justify-content: flex-start; overflow: hidden; background-color: #FFF; padding: 10px; } .model-shop6 .shop-list .shop-block{ height: 280px; width: 280px; margin-right: 15px; position: relative; border-radius: 10px; overflow: hidden; } .model-shop6 .shop-list .shop-block img{ width: 100%; height: 100%; } .model-shop6 .shop-list .shop-block .shop-info{ background-color: #FFFFFF; position: absolute; bottom: 15px; left: 15px; border-radius: 10px; width: calc(100% - 30px); padding: 10px; } .model-shop6 .shop-list .shop-block .shop-info .shop-title{ font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; height: 25px; line-height: 25px; } .model-shop6 .shop-list .shop-block .shop-info .shop-address{ color: #999999; height: 20px; line-height: 20px; font-size: 13px; } .model-shop6 .shop-list .shop-block .shop-info .shop-address .shop-city{ float: left; max-width: calc(100% - 45px); margin-right: 5px; height: 20px; line-height: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .model-shop6 .shop-list .shop-block .shop-info .shop-address .shop-city i{ font-size: 13px; } .model-shop6 .shop-list .shop-block .shop-info .shop-address .shop-distance{ float: left; width: 40px; text-align: center; height: 20px; line-height: 21px; } .model-shop6 .shop-list .shop-block .shop-info .shop-desc{ margin-top: 5px; border-top: 1px solid #EEEEEE; height: 30px; line-height: 30px; font-size: 13px; color: #333333; display: -webkit-box; justify-content: flex-start; overflow: hidden; width: 100%; } .model-shop6 .shop-list .shop-block .shop-info .shop-desc .shop-desc-block{ padding-right: 13px; } .model-shop6 .shop-list .shop-block .shop-info .shop-desc .shop-desc-block i{ font-size: 13px; } .model-shop6 .shop-list .shop-block .shop-info .shop-desc .shop-desc-block .icon-favorfill{ color: #FF4444; } .model-shop6 .shop-list .shop-block .shop-info .shop-tag{ overflow: hidden; white-space: nowrap; } .model-shop6 .shop-list .shop-block .shop-info .shop-tag .shop-tag-label{ color: #FF7474; border: 1px solid #FF7474; padding: 0px 3px; font-size: 12px; height: 18px; line-height: 18px; border-radius: 3px; margin: 0!important; } /****************************************** 地区选择组件样式 **********************************************************/ /*风格一*/ .model-area .area_global { padding: 10px 15px; } .model-area .area_global .area_image{ height: 30px; width: 30px; display: inline-block; float: left; } .model-area .area_global .area_image img{ width: 100%; height: 100%; } .model-area .area_global .area_userName{ display: inline-block; font-size: 16px; height: 30px; line-height: 30px; clear: left; margin-left: 5px; } .model-area .area_global .area_areaName{ float: right; height: 30px; line-height: 30px; font-size: 15px; } /****************************************** 选项卡组件样式 ************************************************************/ /*风格一*/ .model-options{ background: #FFF; } .model-options ul{ margin: 0; height: 43px; line-height: 43px; font-size: 13px; width: 100%; overflow-x: auto; display: -webkit-flex; display: flex; -webkit-justify-content: flex-start; justify-content: flex-start; } .model-options ul::-webkit-scrollbar { display: none; } .model-options ul li{ display: inline-block; text-align: center; padding: 0 10px; flex: 0 0 20%; position: relative; } .model-options ul li:first-child span{ content: ""; display: inline-block; position: absolute; height: 2px; width: 44px; background: #FE433F; bottom: 0; left: 50%; margin-left: -22px; } /*选项卡风格一配置信息样式*/ .config-optionName{ height: 50px; line-height: 50px; width: 75px; display: inline-block; float: left; } .config-option{ height: 50px; } .config-option .option_show{ height: 35px; line-height: 35px; width: 60px; display: inline-block; text-align: center; margin-right: 5px; } .config-option .option_checkbox{ margin: 0; margin-bottom: 4px; cursor: pointer; } .config-option .option_sort{ display: inline-block; width: 40px; height: 35px; line-height: 35px; text-align: center; border-left: 1px solid #d6d3d3; } .config-option .option_input{ width: 30px; display: inline-block; height: 35px; line-height: 35px; } .config-option .option_nickname{ width: 100px; display: inline-block; height: 35px; line-height: 35px; } /*风格风格二*/ .model-options2{ background: #FFF; } .model-options2 ul{ margin: 0; height: 30px; line-height: 30px; font-size: 15px; width: calc(75px * 12); } .model-options2 ul li{ display: inline-block; text-align: center; padding: 0 10px; } .model-options2 ul li span{ display: block; height: 3px; position: relative; bottom: 3px; } /*选项卡风格二配置信息样式*/ .config-option2 .option_title{ display: inline-block; width: 50px; height: 35px; line-height: 35px; text-align: center; } .config-option2 .option_name{ width: 150px; display: inline-block; height: 35px; line-height: 35px; } .config-option2 .option_sort{ width: 90px; display: inline-block; height: 35px; line-height: 35px; } /*风格三:商户选项卡*/ .diy-shop ul{ width: 100%; display: block; height: 30px; line-height: 30px; background: #FFFFFF; margin: 0; font-size: 15px; overflow-x: auto; display: -webkit-flex; display: flex; -webkit-justify-content: flex-start; justify-content: flex-start; } .diy-shop ul li:nth-of-type(1){ color: red; border-bottom: 1px solid red; } /****************************************** 各个商品中的排行榜风格样式 ************************************************/ .topList{ background: #FFF; } .topList { padding: 25px 15px 15px 15px; padding-bottom: 0; background-color: #fff; } .topList:first-child { padding-top: 15px; } .topList:last-child { padding-bottom: 15px; } .topList .rushGoods_top{ height: 200px; } .topList .rushGoods_top-wrap { } .topList .rushGoods_top .top_image{ width: 100%; height: 100%; position: relative; } .topList .rushGoods_top .top_image img{ height: 100%; width: 100%; border-top-left-radius: 5px; border-top-right-radius: 5px; } .topList .rushGoods_top .top_top{ position: absolute; top: -6px; background: #f92929; padding: 2px 5px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; color: #FFF; } .topList .rushGoods_footer{ height: auto; padding: 0; } .topList .rushGoods_footer .footer_shop{ height: 18px; line-height: 18px; font-size: 12px; color: #999; margin-top: 10px; } .topList .rushGoods_footer .footer_shop .shop_name{ display: inline-block; width: 35%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; word-break: break-all; } .topList .rushGoods_footer .footer_shop .shop_address{ height: 18px; line-height: 18px; float: right; width: 60%; text-align: right; display: -webkit-flex; display: flex; -webkit-justify-content: flex-end; justify-content: flex-end; } .topList .rushGoods_footer .footer_shop .shop_address span{ white-space: nowrap; text-overflow: ellipsis; overflow: hidden; word-break: break-all; display: inline-block; -webkit-flex-shrink: 1; flex-shrink: 1; } .topList .rushGoods_footer .footer_shop .shop_address i { height: 18px; line-height: 18px; display: inline-block; float: right; -webkit-flex-shrink: 0; flex-shrink: 0; } .topList .rushGoods_footer .footer_goods{ /*height: 75px;*/ line-height: 24px; font-size: 16px; margin-top: 10px; /* overflow: hidden; text-overflow: ellipsis; display: block; -webkit-line-clamp: 3; -webkit-box-orient: vertical;*/ position: relative; } .topList .rushGoods_footer .footer_goods .goods_type{ display: inline-block; background: #ffe847; float: left; margin-right: 10px; position: absolute; height: 24px; line-height: 24px; overflow: hidden; width: 46px; font-size: 14px; text-align: center; border-radius: 2px; } .topList .rushGoods_footer .footer_goods .goods_name{ width: 100%; text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; text-indent: 51px; } .topList .rushGoods_footer .footer_price{ height: 30px; line-height: 30px; font-size: 20px; margin-top: 10px; } .topList .rushGoods_footer .footer_price .price_price{ font-size: 20px; font-weight: 600; display: inline-block; } .topList .rushGoods_footer .footer_price .price_price span { font-size: 12px; font-weight: normal; vertical-align: 1px; margin-left: 3px; } .topList .rushGoods_footer .footer_price .discount{ color: #363636; font-size: 11px; font-style: normal; font-weight: normal; vertical-align: 1px; margin-left: 2px; display: inline; } .topList .rushGoods_footer .footer_price .discount .i{ height: 14px; line-height: 13px; color: #DDCDA0; font-size: 11px; vertical-align: 0; margin-left: 0; margin-right: 2px; padding: 2px 2px 0 2px; background-color: #363636; border-radius: 3px; display: inline-block; } .topList .rushGoods_footer .footer_price .buy_but{ float: right; width: 72px; height: 28px; line-height: 28px; color: #fff; font-size: 14px; text-align: center; font-weight: normal; background-color: #FF4040; border-radius: 4px; } .topList .rushGoods_footer .footer_old{ height: 18px; line-height: 18px; color: #999; font-size: 12px; margin-top: 10px; } .topList .rushGoods_footer .footer_old .old_price{ float: left; text-decoration: line-through; } .topList .rushGoods_footer .footer_old .buy_user{ float: right; } /*取消弹出框的宽高限制*/ .modal-dialog .modal-content, .we7-modal-dialog .modal-content{ max-height: 1700px; max-width: 2000px; } /****************************************** 商户入驻组件样式 **********************************************************/ .model-shop_join{ margin-bottom: 0px; padding: 15px; } .model-shop_join .detail{ height: 40px; line-height: 40px; border-radius: 20px; width: 100%; background: #f5f5f5; padding-left: 10px; } .model-shop_join .detail .title{ float: left; width: 40px; font-size: 14px; line-height: 16px; text-align: center; border-radius: 10px; color: red; padding-top: 4px; } .model-shop_join .detail .vertical_line { float: left; width: 1px; margin-right: 10px; margin-top: 5px; font-size: 1px; height: 30px; background: #bdbdbd; } .model-shop_join .detail .info{ float: left; background: whitesmoke; width: calc(100% - 155px); z-index: 100; } .model-shop_join .detail .join{ float: right; background: linear-gradient(90deg,#ff8032,#fe453f); border-radius: 0px 40px 40px 0px; width: 100px; text-align: center; color: #FFFFFF; } /****************************************** 图片展播组件样式 **********************************************************/ .fui-picturew { height: auto; display: block; overflow: hidden; } .fui-picturew .item { height: auto; width: 100%; display: block; float: left; } .fui-picturew .item img { width: 100%; height: 100%; object-fit: cover; display: block; } .fui-picturew .item .image { position: relative; } .fui-picturew .item .image .title { position: absolute; height: 25px; line-height: 25px; width: 100%; background: rgba(0,0,0,.3); color: #fff; padding: 0 5px; bottom: 0; left: 0; right: 0; font-size: 0.7rem; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fui-picturew .item .text { font-size: 0.7rem; height: 25px; line-height: 25px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 5px; } .fui-picturew.row-2 .item { width: 50%; } .fui-picturew.row-3 .item { width: 33.33%; } .fui-picturew.row-4 .item { width: 25%; } .fui-picturew.row-5 .item { width: 20%; } /****************************************** 用户信息组件样式 **********************************************************/ .diy-user_info{ float: left; width: 100%; height: 170px; background: -webkit-gradient(linear, left bottom, right bottom, color-stop(0%,#F33A28), color-stop(100%,#FA5F2F)); } .diy-user_info .member{ float: left; width: 100%; } .diy-user_info .member .avatar{ width: 65px; height: 65px; float: left; margin: 10px; padding: 5px; background: #F5847E; border-radius: 50%; } .diy-user_info .member .avatar .img{ width: 100%; height: 100%; border-radius: 50%; background: #FFFFFF; } .diy-user_info .member .info{ float: left; width: calc(100% - 100px); height: 85px; line-height: 30px; padding: 15px 0; color: #FFFFFF; font-size: 18px; } .diy-user_info .member .info .username{ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .diy-user_info .member .info .phone{ color: #FDD0CD; } .diy-user_info .wealth{ float: left; width: 100%; height: 70px; padding-left: 10px; margin-top: 10px; } .diy-user_info .wealth .title{ font-size: 17px; color: #FDD0CD; height: 25px; line-height: 25px; } .diy-user_info .wealth .number{ height: 45px; line-height: 45px; } .diy-user_info .wealth .number .price{ float: left; font-size: 25px; color: #FFFFFF; } .diy-user_info .wealth .number .link{ float: right; height: 30px; margin: 5px 0; padding: 0PX 15px; line-height: 30px; background-color: #F8775A; border-radius: 20px 0px 0px 20px; color: #FFF3EF; } .diy-user_info .wealth .number .link i{ float: right; line-height: 27px; height: 30px; } /****************************************** 公众号跳转小程序 **********************************************************/ .diy-jump_wxapp{ width: 100%; height: 150px; } .diy-jump_wxapp img{ width: 100%; height: 100%; } /****************************************** 流量主组件样式 ***************************************************************/ /*流量主 公共提示样式*/ .flow-help-block{ color: #d64040; background-color: #fff7cc!important; padding: 10px; } /*风格一*/ .model-flow{ padding: 10px; background-color: #FFF; } .model-flow .flow-info{ width: 100%; background: #222; height: 120px; border-radius: 10px; color: #e0e0e0; position: relative; font-size: 13px; } .model-flow .flow-info .flow-top{ position: absolute; top: 10px; left: 10px; background-color: #5d5d5d; height: 20px; line-height: 20px; text-align: center; border-radius: 5px; padding: 0px 10px; } .model-flow .flow-info .flow-content{ position: absolute; top: 35px; height: 50px; line-height: 50px; width: 100%; text-align: center; font-size: 25px; font-family: cursive; }