$color:#29c8a1; .dis-flex { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .flex-x-around { justify-content: space-around; } .flex-dir-row { flex-direction: row; } .flex-dir-column { -webkit-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .flex-x-center { -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } .flex-y-center { -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .appdiy-module-container{ width:375px; height:667px; border: 1px solid #eee; display: flex; flex-direction: column; top:70px; left:711px; position: fixed; background:#fff; box-shadow:#dcdcdc 0 3px 16px; /***页面标题***/ .appdiy-title{ height:50px; position: relative; background:#fff; text-align:center; img{position: absolute; z-index:1; right:12px; top:50%; transform: translateY(-50%); width:72px; height:30px; background:rgba(0,0,0,0.2); border-radius:30px; } .tit{ font-size:15px; line-height:50px; margin:0; padding:0;position: relative; z-index:1; } .el-icon-arrow-left{ position: absolute; left:0; top:0; z-index:1; width:40px; height:100%; color:#888; cursor: pointer; font-size:20px; display: flex; justify-content: center; align-items: center;} } /**模块大框架***/ .appdiy-module{ flex:1; background:#ffffff; position: relative; height:100%; overflow-y:auto;z-index:99;} .appdiy-module::-webkit-scrollbar{ width:0;} /**无模块***/ .appdiy-nomodule{ width:100%; height:100%; display: flex; justify-content: center; align-items: center; h2{ font-size:15px;} } /***模块项***/ .appdiy-module-item{ position: relative; .xline{ z-index:2; position: absolute; display: none; &:nth-child(1){ left:0; border-left:1px dashed $color; top:0; height:100%;} &:nth-child(2){ left:0; border-top:1px dashed $color; top:0; width:100%;} &:nth-child(3){ right:0; border-right:1px dashed $color; top:0; height:100%;} &:nth-child(4){ left:0; border-bottom:1px dashed $color; bottom:0; width:100%;} } &.on { .xline{ display: block;} } } /**空白提示***/ .placeholder{ height:80px; margin:10px 0; display: flex; justify-content: center; background:#eee; color:#eee; align-items: center; border:1px dashed #eee; &.on{ color:$color; border-color:$color; background:#e4fff1; } } /***右侧操作按钮***/ .appdiy-module-option{ position: absolute; top:0; right:-25px; width:25px; background:rgba(0,0,0,0.6); z-index:20; li{ cursor: pointer; span{ height:25px; transform: scale(1); display: block; font-size:12px; display: flex; justify-content: center; align-items:center; color:#fff;} &:hover{background:$color;} } } /***模块标题***/ .module-item-title{ background:#fff; position: relative; z-index: 1; font-size:14px; padding:14px 12px; border-bottom:1px solid #eee; display: flex; justify-content: space-between; align-items: center; .mo{ color:#666;} } /***标题模块2***/ .module-item-twtit{ font-size:14px; position: relative; z-index: 1; padding:0 12px; padding-top:10px;} /***导航模块***/ .module-common{ margin-top:10px; position: relative; .mg0{ margin-top:0;} } .module-background{ width: 100%; background:#fff; position: absolute; left:0; top:0; right:0; bottom:0;background-size:100%;} .module-item-nav{ .item-nav-con{ position: relative; z-index:1; padding:0 5px; padding-bottom:10px; display: flex; flex-wrap: wrap; &.col5 { .item{ width:20%; } } .item{ padding-top:12px; width:25%; text-align: center; .item-nav-img{ width:55px; height:55px; margin:0 auto;} .item-nav-text{ font-size:12px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color:#333; padding-top:5px; } } } } /***幻灯片组***/ .module-item-slide{ margin-top:10px; position: relative; .mg0{ margin-top:0;} .item-slide-con{ position: relative; overflow: hidden;} .diy-item-slide{ position: relative; z-index: 1; padding:10px; .item{ .pic{ img { display:block; width:100%; height:100%; object-fit: cover;}} } } } /***多图级***/ .module-item-duo{ margin-top:10px; position: relative; .mg0{ margin-top:0;} .item-duo-con{ position: relative; overflow: hidden;} .item-duo-display__list{ position: relative; display:flex; flex-wrap: wrap; z-index: 1; padding-right:10px; padding-top:10px; overflow: hidden; &.col1{ .item{ width:100%; } } &.col2{ .item{ width:50%; } } &.col3{ .item{ width:33.333333%; } } &.col4{ .item{ width:25%; } } &.col5{ .item{ width:20%; } } .item{ width:33.3333333%; padding-left:10px; padding-bottom:10px; .c{ overflow:hidden; img{ object-fit: cover; display:block; width:100%;} .txt{ white-space: nowrap; padding:5px 10px; text-align:center; overflow: hidden; text-overflow: ellipsis;} } } } .item-duo-display__slide{ width: 100000px; position: relative; z-index: 1; padding-right:10px; padding-top:10px; overflow: hidden; &.col1{ .item{ width:363px } } &.col2{ .item{ width:181px; } } &.col3{ .item{ width:121px; } } &.col4{ .item{ width:90px; } } &.col5{ .item{ width:72px; } } .item{float: left; width:91px; padding-left:10px; padding-bottom:10px; .c{ overflow:hidden; img{ object-fit: cover; display:block; width:100%;} .txt{ white-space: nowrap; padding:5px 10px; text-align:center; overflow: hidden; text-overflow: ellipsis;} } } } } /***图片橱窗***/ .module-item-window{ margin-top:0px; position: relative; .mg0{ margin-top:0;} .item-window-con{ position: relative; overflow: hidden;} .item-window-style1{ position: relative; display:flex; flex-wrap: wrap; z-index: 1; overflow: hidden; .display { height: 0; width: 100%; margin: 0; padding-bottom: 50%; position: relative; } .display img { width: 100%; height: 100%; } .display .display-left { width: 50%; height: 100%; position: absolute; top: 0; left: 0; } .display .display-right { width: 50%; height: 100%; position: absolute; top: 0; left: 50%; } .display .display-right1 { width: 100%; height: 50%; position: absolute; overflow: hidden; top: 0; left: 0; } .display .display-right1-style3 { width: 100%; height: 100%; position: absolute; overflow: hidden; top: 0; left: 0; } .display .display-right2 { width: 100%; height: 50%; position: absolute; overflow: hidden; top: 50%; left: 0; } .display .display-right2 .left { width: 50%; height: 100%; position: absolute; top: 0; left: 0; } .display .display-right2 .right { width: 50%; height: 100%; position: absolute; top: 0; left: 50%; } } } /***搜索框***/ .module-item-search{position: relative; width: 100%; .mg0{ margin-top:0;} .item-search-con{ width: 100%;position: relative; overflow: hidden;} .item-search{ width: 100%;position: relative; display:flex; flex-wrap: wrap; z-index: 1;overflow: hidden; .diy-search { width: 100%; padding-top: 10px; padding-left: 10px; padding-right: 10px; } .diy-search .hotkeybox { padding-top: 5px; } .diy-search .inner { height: 30px; background: #fff; overflow: hidden; } .diy-search .inner.radius { border-radius: 5px; } .diy-search .inner.round { border-radius: 30px; } .diy-search .inner .search-input { height: 30px; width: 100%; line-height: 30px; color: #999999; padding: 0 10px; } } } /***优惠券***/ .module-item-coupon{position: relative; width: 100%; .item-coupon-con{ width: 100%;position: relative; overflow: hidden;} .item-coupon{ width: 100%;position: relative; z-index: 1;overflow: hidden; .diy-coupon {padding: 10px 0;} .diy-coupon .coupon-item { display: block; font-size: 1.3rem; width: 180px; height: 60px; position: relative; color: #fff; overflow: hidden; box-sizing: border-box; } .diy-coupon .coupon-item i.before { content: ""; position: absolute; z-index: 1; width: 1.6rem; height: 1.6rem; top: 50%; left: -.8rem; -webkit-transform: translateY(-50%); transform: translateY(-50%); -webkit-border-radius: 80%; border-radius: 80%; background-color: #fff; } .diy-coupon .coupon-item .left-content { position: relative; float: left; width: 70%; height: 100%; background-color: #E5004F; font-size: 12px; } .diy-coupon .coupon-item .left-content .content-top .price { font-size: 2rem; } .diy-coupon .coupon-item .left-content.color__blue { background: linear-gradient(-125deg, #57bdbf, #2f9de2); } .diy-coupon .coupon-item .left-content.color__red { background: linear-gradient(-128deg, #ff6d6d, #ff3636); } .diy-coupon .coupon-item .left-content.color__violet { background: linear-gradient(-113deg, #ef86ff, #b66ff5); } .diy-coupon .coupon-item .left-content.color__yellow { background: linear-gradient(-141deg, #f7d059, #fdb054); } .diy-coupon .coupon-item .right-receive { float: right; width: 30%; height: 100%; background-color: #4e4e4e; text-align: center; } .diy-coupon .coupon-item .right-receive span { font-size: 1rem; } } } /***单图模块***/ .module-item-imagesingle{ margin-top:10px; position: relative; .mg0{ margin-top:0;} .item-imagesingle-con{ position: relative; overflow: hidden;} .item-imagesingle{ position: relative; z-index: 1; overflow: hidden; .item{ position: relative; overflow: hidden; img{ object-fit: cover; display:block; width:100%;} } } } /***视频模块***/ .module-item-video{ margin-top:10px; position: relative; .mg0{ margin-top:0;} .item-video-con{ position: relative; overflow: hidden;} .item-video{ position: relative; z-index: 1; padding:10px 0; overflow: hidden; .diy-video video { display: block; width: 100%; height: 100%; } } } /***公告模块***/ .module-item-notice{ margin-top:10px; position: relative; .mg0{ margin-top:0;} .item-notice-con{ position: relative; overflow: hidden;} .item-notice{ position: relative; z-index: 1; overflow: hidden; .diy-notice { padding: 4px 10px; line-height: 26px; } .diy-notice .notice__icon img { width: 16px; height: 16px; } .diy-notice .notice__text { padding-left: 5px; } } } /***图文模块***/ .module-item-tuwen{ margin-top:10px; position: relative; .mg0{ margin-top:0;} .item-tuwen-con{ position: relative; overflow: hidden;} .item-tuwen-style1{ position: relative; z-index: 1; padding:10px 0; overflow: hidden; .tit{ white-space: nowrap; font-size:14px; font-weight: bold; padding:10px; padding-top:0; text-align:left; overflow: hidden; text-overflow: ellipsis;} .item{ margin:0 10px; position: relative; overflow: hidden; img{ object-fit: cover; display:block; height:150px; width:100%;} .note{ line-height:18px; color:#fff; background:rgba(0,0,0,0.5); position: absolute; bottom:0; padding:6px 10px; width:100%;} } } .item-tuwen-style2{ position: relative; display:flex; flex-wrap: wrap; z-index: 1; padding-bottom:10px; overflow: hidden; .item{ padding:0 10px; padding-top:10px; img{ object-fit: cover; display:block; height:150px; width:100%;} .tit{ white-space: nowrap; font-size:14px; font-weight: bold; padding-top:10px; text-align:left; overflow: hidden; text-overflow: ellipsis;} .note{ line-height:20px; color:#999; padding-top:10px;} } } } /***商品模块***/ .module-item-goods{margin-top:10px; position: relative; .mg0{ margin-top:0;} .item-goods-con{ position: relative; overflow: hidden;} .noadd{ height:200px; display: flex; align-items: center; justify-content: center; width:100%;} .item-goods-display__list{ .item-goods{ position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: space-between; padding:10px; padding-top:0; overflow: hidden; &.style2{ .item{ width: calc(100%/2 - 5px); .yh { font-size:10px;} .price{ span { b { font-size:12px;} i{ font-size:10px;} } } } } &.style3{ .item{ width: calc(100%/3 - 5px); .pic{ overflow: hidden; position: relative; height:100px; img{ object-fit: cover; display:block; height:100%; width:100%;} span{ background:red; color:#fff; padding:2px 5px; border-bottom-right-radius:5px; position: absolute; left:0; top:0;} } .yh { font-size:10px;} .price{ span { b { font-size:12px;} i{ font-size:10px;} } } } } .item{ width:100%; margin-top:12px; border-radius:3px; position: relative; overflow: hidden; .pic{ overflow: hidden; position: relative; height:150px; img{ object-fit: cover; display:block; height:100%; width:100%;} span{ background:red; color:#fff; padding:2px 5px; border-bottom-right-radius:5px; position: absolute; left:0; top:0;} } .tit{ white-space: nowrap; padding-top:5px; font-size:14px; overflow: hidden; text-overflow: ellipsis;} .yh{ display: flex; overflow: hidden; justify-content: space-between; align-items:center; color:#999; margin-top:5px; span{ padding:2px 5px; background:#F73E44; color:#fff; font-size:12px;} label{flex:1; overflow: hidden; text-align: right;} } .price{ padding-top:5px; color:#666; display: flex; overflow: hidden; justify-content: space-between; align-items:center; span{ flex:1; overflow: hidden; b{ font-size:14px; color:#F73E44; } i{ color:#bfbfbf; font-style: normal; padding-left:5px; text-decoration: line-through;} } label{ padding:2px 5px; background:#F73E44; color:#fff;} } .ju{ padding-top:5px; color:#999; font-size:11px; white-space: nowrap; overflow: hidden; text-overflow:ellipsis; } } } } .item-goods-display__slide{width: 100000px; position: relative; z-index: 1; padding-right:10px; padding-top:10px; overflow: hidden; .item-goods{ z-index: 1; flex-wrap: wrap; justify-content: space-between; padding:10px; padding-top:0; overflow: hidden; &.style2{ .item{ width:181px; .yh { font-size:10px;} .price{ span { b { font-size:12px;} i{ font-size:10px;} } } } } &.style3{ .item{ width:121px; .pic{ overflow: hidden; position: relative; height:100px; img{ object-fit: cover; display:block; height:100%; width:100%;} span{ background:red; color:#fff; padding:2px 5px; border-bottom-right-radius:5px; position: absolute; left:0; top:0;} } .yh { font-size:10px;} .price{ span { b { font-size:12px;} i{ font-size:10px;} } } } } .item{ float: left; width:353px; padding-right:10px; margin-top:12px; border-radius:3px; position: relative; overflow: hidden; .pic{ overflow: hidden; position: relative; height:150px; img{ object-fit: cover; display:block; height:100%; width:100%;} span{ background:red; color:#fff; padding:2px 5px; border-bottom-right-radius:5px; position: absolute; left:0; top:0;} } .tit{ white-space: nowrap; padding-top:5px; font-size:14px; overflow: hidden; text-overflow: ellipsis;} .yh{ display: flex; overflow: hidden; justify-content: space-between; align-items:center; color:#999; margin-top:5px; span{ padding:2px 5px; background:#F73E44; color:#fff; font-size:12px;} label{flex:1; overflow: hidden; text-align: right;} } .price{ padding-top:5px; color:#666; display: flex; overflow: hidden; justify-content: space-between; align-items:center; span{ flex:1; overflow: hidden; b{ font-size:14px; color:#F73E44; } i{ color:#bfbfbf; font-style: normal; padding-left:5px; text-decoration: line-through;} } label{ padding:2px 5px; background:#F73E44; color:#fff;} } .ju{ padding-top:5px; color:#999; font-size:11px; white-space: nowrap; overflow: hidden; text-overflow:ellipsis; } } } } .item-goods-display__li{ .item-goods{ z-index: 1; padding:10px; padding-top:0; overflow: hidden; .item{ width:353px; padding-right:10px; margin-top:12px; border-radius:3px; position: relative; overflow: hidden; .pic{ float: left; width: 100px; height:100px; img{ object-fit: cover; display:block; height:100%; width:100%;} span{ background:red; color:#fff; padding:2px 5px; border-bottom-right-radius:5px; position: absolute; left:0; top:0;} } .c{ float: left; padding-left: 10px;padding-right: 10px; width: 180px; line-height: 20px; .tit { padding-top:5px; font-size:14px; } .yh{ display: flex; overflow: hidden; justify-content: space-between; align-items:center; color:#999; margin-top:5px; span{ padding:2px 5px; background:#F73E44; color:#fff; font-size:12px;} label{flex:1; overflow: hidden; text-align: right;} } .price{ padding-top:5px; color:#666; display: flex; overflow: hidden; justify-content: space-between; align-items:center; span{ flex:1; overflow: hidden; b{ font-size:14px; color:#F73E44; } i{ color:#bfbfbf; font-style: normal; padding-left:5px; text-decoration: line-through;} } label{ padding:2px 5px; background:#F73E44; color:#fff;} } .ju{ padding-top:5px; color:#999; font-size:11px; white-space: nowrap; overflow: hidden; text-overflow:ellipsis; } } .settechnical{ float: left; width: 60px; text-align: center; padding:5px 5px; margin-top: 30px; font-size: 12px; background:#F73E44; color:#fff;} } } } } /***拼团模块***/ .module-item-tuan{margin-top:10px; position: relative; .mg0{ margin-top:0;} .item-tuan-con{ position: relative; overflow: hidden;} .noadd{ height:200px; display: flex; align-items: center; justify-content: center; width:100%;} .item-tuan{ position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: space-between; padding:10px; padding-top:0; overflow: hidden; &.style2{ .item{ width: calc(100%/2 - 5px); .yh { font-size:10px;} .price{ span { b { font-size:12px;} i{ font-size:10px;} } } } } &.style3{ .item{ width: calc(100%/3 - 5px); .pic{ overflow: hidden; position: relative; height:100px; img{ object-fit: cover; display:block; height:100%; width:100%;} span{ background:red; color:#fff; padding:2px 5px; border-bottom-right-radius:5px; position: absolute; left:0; top:0;} } .yh { font-size:10px;} .price{ span { b { font-size:12px;} i{ font-size:10px;} } } } } .item{ width:100%; margin-top:12px; border-radius:3px; position: relative; overflow: hidden; .pic{ overflow: hidden; position: relative; height:150px; img{ object-fit: cover; display:block; height:100%; width:100%;} span{ background:red; color:#fff; padding:2px 5px; border-bottom-right-radius:5px; position: absolute; left:0; top:0;} } .tit{ white-space: nowrap; padding-top:5px; font-size:14px; overflow: hidden; text-overflow: ellipsis;} .yh{ display: flex; overflow: hidden; justify-content: space-between; align-items:center; color:#999; margin-top:5px; span{ padding:2px 5px; background:#F73E44; color:#fff; font-size:12px;} label{flex:1; overflow: hidden; text-align: right;} } .price{ padding-top:5px; color:#666; display: flex; overflow: hidden; justify-content: space-between; align-items:center; span{ flex:1; overflow: hidden; b{ font-size:14px; color:#F73E44; } i{ color:#bfbfbf; font-style: normal; padding-left:5px; text-decoration: line-through;} } label{ padding:2px 5px; background:#F73E44; color:#fff;} } .ju{ padding-top:5px; color:#999; font-size:11px; white-space: nowrap; overflow: hidden; text-overflow:ellipsis; } } } } /***秒杀模块***/ .module-item-miaosha{margin-top:10px; position: relative; .mg0{ margin-top:0;} .item-miaosha-con{ position: relative; overflow: hidden;} .noadd{ height:200px; display: flex; align-items: center; justify-content: center; width:100%;} .item-miaosha{ position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: space-between; padding:10px; padding-top:0; overflow: hidden; &.style2{ .item{ width: calc(100%/2 - 5px); .yh { font-size:10px;} .price{ span { b { font-size:12px;} i{ font-size:10px;} } } } } &.style3{ .item{ width: calc(100%/3 - 5px); .pic{ overflow: hidden; position: relative; height:100px; img{ object-fit: cover; display:block; height:100%; width:100%;} span{ background:red; color:#fff; padding:2px 5px; border-bottom-right-radius:5px; position: absolute; left:0; top:0;} } .yh { font-size:10px;} .price{ span { b { font-size:12px;} i{ font-size:10px;} } } } } .item{ width:100%; margin-top:12px; border-radius:3px; position: relative; overflow: hidden; .pic{ overflow: hidden; position: relative; height:150px; img{ object-fit: cover; display:block; height:100%; width:100%;} span{ background:red; color:#fff; padding:2px 5px; border-bottom-right-radius:5px; position: absolute; left:0; top:0;} } .tit{ white-space: nowrap; padding-top:5px; font-size:14px; overflow: hidden; text-overflow: ellipsis;} .yh{ display: flex; overflow: hidden; justify-content: space-between; align-items:center; color:#999; margin-top:5px; span{ padding:2px 5px; background:#F73E44; color:#fff; font-size:12px;} label{flex:1; overflow: hidden; text-align: right;} } .price{ padding-top:5px; color:#666; display: flex; overflow: hidden; justify-content: space-between; align-items:center; span{ flex:1; overflow: hidden; b{ font-size:14px; color:#F73E44; } i{ color:#bfbfbf; font-style: normal; padding-left:5px; text-decoration: line-through;} } label{ padding:2px 5px; background:#F73E44; color:#fff;} } .ju{ padding-top:5px; color:#999; font-size:11px; white-space: nowrap; overflow: hidden; text-overflow:ellipsis; } } } } /***会员礼包模块***/ .module-item-membergoods{margin-top:10px; position: relative; .mg0{ margin-top:0;} .item-membergoods-con{ position: relative; overflow: hidden;} .noadd{ height:200px; display: flex; align-items: center; justify-content: center; width:100%;} .item-membergoods{ position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: space-between; padding:10px; padding-top:0; overflow: hidden; &.style2{ .item{ width: calc(100%/2 - 5px); .yh { font-size:10px;} .price{ span { b { font-size:12px;} i{ font-size:10px;} } } } } &.style3{ .item{ width: calc(100%/3 - 5px); .pic{ overflow: hidden; position: relative; height:100px; img{ object-fit: cover; display:block; height:100%; width:100%;} span{ background:red; color:#fff; padding:2px 5px; border-bottom-right-radius:5px; position: absolute; left:0; top:0;} } .yh { font-size:10px;} .price{ span { b { font-size:12px;} i{ font-size:10px;} } } } } .item{ width:100%; margin-top:12px; border-radius:3px; position: relative; overflow: hidden; .pic{ overflow: hidden; position: relative; height:150px; img{ object-fit: cover; display:block; height:100%; width:100%;} span{ background:red; color:#fff; padding:2px 5px; border-bottom-right-radius:5px; position: absolute; left:0; top:0;} } .tit{ white-space: nowrap; padding-top:5px; font-size:14px; overflow: hidden; text-overflow: ellipsis;} .yh{ display: flex; overflow: hidden; justify-content: space-between; align-items:center; color:#999; margin-top:5px; span{ padding:2px 5px; background:#F73E44; color:#fff; font-size:12px;} label{flex:1; overflow: hidden; text-align: right;} } .price{ padding-top:5px; color:#666; display: flex; overflow: hidden; justify-content: space-between; align-items:center; span{ flex:1; overflow: hidden; b{ font-size:14px; color:#F73E44; } i{ color:#bfbfbf; font-style: normal; padding-left:5px; text-decoration: line-through;} } label{ padding:2px 5px; background:#F73E44; color:#fff;} } .ju{ padding-top:5px; color:#999; font-size:11px; white-space: nowrap; overflow: hidden; text-overflow:ellipsis; } } } } /***师傅模块***/ .module-item-technical{margin-top:10px; position: relative; .mg0{ margin-top:0;} .item-technical-con{ position: relative; overflow: hidden;} .noadd{ height:200px; display: flex; align-items: center; justify-content: center; width:100%;} .item-technical{ position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: space-between; padding:10px; padding-top:0; overflow: hidden; &.style2{ .item{ width: calc(100%/2 - 5px); .yh { font-size:10px;} .price{ span { b { font-size:12px;} i{ font-size:10px;} } } } } &.style3{ .item{ width: calc(100%/3 - 5px); .pic{ overflow: hidden; position: relative; height:100px; img{ object-fit: cover; display:block; height:100%; width:100%;} span{ background:red; color:#fff; padding:2px 5px; border-bottom-right-radius:5px; position: absolute; left:0; top:0;} } .yh { font-size:10px;} .price{ span { b { font-size:12px;} i{ font-size:10px;} } } } } .item{ width:100%; margin-top:12px; border-radius:3px; position: relative; overflow: hidden; .pic{ overflow: hidden; position: relative; height:150px; img{ object-fit: cover; display:block; height:100%; width:100%;} span{ background:red; color:#fff; padding:2px 5px; border-bottom-right-radius:5px; position: absolute; left:0; top:0;} } .tit{ white-space: nowrap; padding-top:5px; font-size:14px; overflow: hidden; text-overflow: ellipsis;} .yh{ display: flex; overflow: hidden; justify-content: space-between; align-items:center; color:#999; margin-top:5px; span{ padding:2px 5px; background:#F73E44; color:#fff; font-size:12px;} label{flex:1; overflow: hidden; text-align: right;} } .price{ padding-top:5px; color:#666; display: flex; overflow: hidden; justify-content: space-between; align-items:center; span{ flex:1; overflow: hidden; b{ font-size:14px; color:#F73E44; } i{ color:#bfbfbf; font-style: normal; padding-left:5px; text-decoration: line-through;} } label{ padding:2px 5px; background:#F73E44; color:#fff;} } .ju{ padding-top:5px; color:#999; font-size:11px; white-space: nowrap; overflow: hidden; text-overflow:ellipsis; } } } } /***师傅模块end***/ } /**预览***/ .appdiy-preview{position: fixed; left:0; right:0; margin:auto; top:50%; width:375px; margin-top:-333px; z-index:1000; .el-icon-close{ position: absolute; width:25px; height:25px; right:-30px; top:0; cursor: pointer; color:#fff; border:1px solid #fff; border-radius:50%; display: flex; align-items: center; justify-content: center; font-size:16px; cursor: pointer;} .appdiy-module-container{ position: static; top:0; left:0; box-shadow:none; border-radius:0;} }