@charset "UTF-8"; .xcx-module-attr { width: 400px; position: fixed; right: 0; top: 0; height: 100%; overflow: hidden auto; background: #fff; box-shadow: #ddd 0 0 10px; z-index: 21; } .xcx-module-attr .module-attr-tab { margin-top: 65px; border-top: 1px solid #eee; display: flex; border-bottom: 1px solid #f1f1f1; } .xcx-module-attr .module-attr-tab li { flex: 1; padding: 12px 0; cursor: pointer; border-right: 1px solid #f1f1f1; text-align: center; font-size: 14px; color: #333; position: relative; } .xcx-module-attr .module-attr-tab li.on { color: #29c8a1; } .xcx-module-attr .module-attr-tab li.on:after { width: 56px; height: 2px; background: #29c8a1; content: ""; position: absolute; bottom: 0; left: 0; right: 0; margin: auto; } .xcx-module-attr .attr-con-item { padding: 12px; font-weight: bold; border-bottom: 1px solid #eee; font-size: 14px; } .xcx-module-attr .att-con-box { font-size: 13px; color: #555; /***导航***/ } .xcx-module-attr .att-con-box .attr-nav-item .ht { height: 40px; padding: 0 12px; overflow: hidden; display: flex; border-bottom: 1px solid #eee; justify-content: space-between; align-items: center; } .xcx-module-attr .att-con-box .attr-nav-item .ht .t { font-size: 14px; flex: 1; cursor: pointer; height: 40px; line-height: 40px; } .xcx-module-attr .att-con-box .attr-nav-item .ht .t.on span { transform: rotate(-180deg); } .xcx-module-attr .att-con-box .attr-nav-item .ht .opt .el-button.is-circle { padding: 5px; transform: scale(0.8); font-size: 12px; margin-left: 0; } .xcx-module-attr .att-con-box .attr-nav-item .ht .opt .el-button--primary { background-color: #29c8a1; border-color: #29c8a1; } .xcx-module-attr .att-con-box .attr-nav-item .hm { padding: 12px; padding-top: 15px; padding-bottom: 0; border-bottom: 1px solid #eee; } .xcx-module-attr .att-con-box .attr-nav-item .goods { display: flex; background: #f1f1f1; margin-bottom: 12px; margin-top: -5px; } .xcx-module-attr .att-con-box .attr-nav-item .goods img { width: 80px; height: 80px; margin-right: 12px; } .xcx-module-attr .att-con-box .attr-nav-item .goods .text { height: 80px; overflow: hidden; } .xcx-module-attr .att-con-box .attr-nav-item .goods .text .p1 { color: #333; } .xcx-module-attr .att-con-box .attr-nav-item .goods .text p { padding-top: 5px; white-space: nowrap; text-overflow: ellipsis; color: #999; } .xcx-module-attr .att-con-box .attr-nav-add { height: 40px; display: flex; cursor: pointer; border-bottom: 1px solid #eee; justify-content: center; align-items: center; } .xcx-module-attr .att-con-box .attr-nav-add:hover { color: #29c8a1; } .xcx-module-attr .att-con-box .attr-nav-add span { margin: 2px 5px 0 0; font-size: 15px; } .xcx-module-attr .att-con-box .att-con-pd { padding: 20px; } .xcx-module-attr .att-con-box .item { margin-bottom: 20px; display: flex; } .xcx-module-attr .att-con-box .item.c { align-items: center; } .xcx-module-attr .att-con-box .item .tit.mg { margin-top: -4px; } .xcx-module-attr .att-con-box .item .input { flex: 1; } .xcx-module-attr .att-con-box .item .input.flex { display: flex; align-items: center; } .xcx-module-attr .att-con-box .item .input .intxt { padding: 6px 10px; color: #555; border: 1px solid #eee; border-radius: 2px; width: 180px; margin-right: 20px; } .xcx-module-attr .att-con-box .item .input .colorBtn { width: 16px; height: 16px; border-radius: 50%; border: 1px solid #ddd; cursor: pointer; } .xcx-module-attr .att-con-box .item .input .module-upload { border: 1px dashed #eee; overflow: hidden; margin-right: 12px; cursor: pointer; position: relative; display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; background: #f7f8fa; border-radius: 2px; } .xcx-module-attr .att-con-box .item .input .module-upload.c { width: 150px; height: 100px; } .xcx-module-attr .att-con-box .item .input .module-upload .el-icon-camera-solid { font-size: 25px; color: #bfbfbf; opacity: 0.8; } .xcx-module-attr .att-con-box .item .input .module-upload .el-icon-close { width: 15px; height: 14px; font-size: 12px; line-height: 14px; text-align: center; background-color: rgba(0, 0, 0, 0.7); border-radius: 0 0 0 12px; position: absolute; right: 0; top: 0; color: #fff; z-index: 1; } .xcx-module-attr .att-con-box .item .input .module-upload img { display: block; width: 100%; object-fit: cover; height: 100%; } .xcx-module-attr .att-con-box .item .input .tips { color: #bfbfbf; } .xcx-module-attr .att-con-box .item .input .el-textarea__inner { font-family: Avenir, Helvetica, Arial, sans-serif; } .xcx-module-attr .att-con-box .item .input .input-line { margin-bottom: 15px; display: flex; align-items: center; } .xcx-module-attr .att-con-box .item .input .input-line:last-child { margin-bottom: 0; } .xcx-module-attr .att-con-box .item .input .input-line .sp1 { display: flex; min-width: 70px; align-items: center; margin-right: 20px; } .xcx-module-attr .att-con-box .item .input .input-line .tit { margin-top: -4px; } .xcx-module-attr .att-con-box .item .input .input-line .el-input { width: 180px; } .xcx-module-attr .att-con-box .item .input .input-line .el-input__inner { height: 29px; line-height: 29px; } .xcx-module-attr .att-con-box .item .input .input-line .el-input__icon { line-height: 29px; } .xcx-module-attr .att-con-box .item .input .input-line .input.f { display: flex; align-items: center; } .xcx-module-attr .att-con-box .item .input .input-line .input.f .font { margin-left: 12px; width: 16px; border-radius: 50%; height: 16px; cursor: pointer; } .xcx-module-attr .att-con-box .item .input .input-line .input.f .font:hover, .xcx-module-attr .att-con-box .item .input .input-line .input.f .font.on { color: #29c8a1; } .xcx-module-attr .att-con-box .item .input .input-line .el-button { padding: 0 5px; height: 29px; line-height: 29px; margin-top: 5px; margin-right: 5px; } .xcx-module-attr .att-con-box .item .attr-style { display: flex; flex-wrap: wrap; } .xcx-module-attr .att-con-box .item .style { width: 120px; margin-right: 12px; margin-bottom: 12px; cursor: pointer; } .xcx-module-attr .att-con-box .item .style img { width: 100%; display: block; margin-bottom: 5px; } .xcx-module-attr .att-con-box .item .style dd { font-size: 12px; text-align: center; } .xcx-module-attr .att-con-box .item .style dd .el-radio__input.is-checked .el-radio__inner { background: #29c8a1; border-color: #29c8a1; } .xcx-module-attr .att-con-box .item .style dd .el-radio__input.is-checked + .el-radio__label { color: #29c8a1; }