Skip to content

T
TDS_Myshop_Detail
Commit b723c705 authored by 임지연_이모션's avatar 임지연_이모션
Browse files
Options

[임지연/이모션]가입정보추가

parent 9e28c32c
Hide whitespace changes
Inline Side-by-side
Showing with 691 additions and 497 deletions
.gitignore 0 → 100644
View file @ b723c705
.vscode/settings.json
src/assets/css/seller_common.css
View file @ b723c705
/* common */
.table-row-list caption {
overflow: hidden;
position: static;
width: 1px;
height: 1px;
padding: 0;
margin-top: -1px;
font-size: 0;
line-height: 0;
text-indent: -999px;
overflow: hidden;
position: static;
width: 1px;
height: 1px;
padding: 0;
margin-top: -1px;
font-size: 0;
line-height: 0;
text-indent: -999px;
}
.table-row-list {
border-top: 0;
font-family: 'Spoqa Han Sans', sans-serif;
border-top: 0;
font-family: 'Spoqa Han Sans', sans-serif;
}
.ellipsis {
overflow: hidden;
display: block;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
display: block;
text-overflow: ellipsis;
white-space: nowrap;
}
.seller-txt-style {
text-decoration: underline;
color: #429be6;
font-size: 1.2rem;
text-decoration: underline;
color: #429be6;
font-size: 1.2rem;
}
.l-grid.l-seller {
padding-left: 20px;
padding-right: 20px;
padding-left: 20px;
padding-right: 20px;
}
.seller-wrap {
font-size: 1.3rem;
background-color: #efeff1;
font-family: 'Spoqa Han Sans';
font-size: 1.3rem;
background-color: #efeff1;
font-family: 'Spoqa Han Sans';
}
.seller-wrap .content {
padding-top: 9rem;
/* padding-bottom: 4rem; */
padding-top: 9rem;
/* padding-bottom: 4rem; */
}
.seller-wrap.seller-product-detail .content {
padding-top: 6.2rem;
padding-bottom: 0;
padding-top: 6.2rem;
padding-bottom: 0;
}
/* 상단 "이전버튼 헤더"와 "프로그레스 바"가 같이 있는 경우 */
.header-sticky.bar-sticky .sticky-top {
top: 5.2rem;
top: 5.2rem;
}
.seller-wrap .sticky-top {
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 10010;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
max-height: 100%;
background-color: #f6f8fa;
box-shadow: 0 4px 10px 0 rgba(207, 207, 207, 0.88);
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 10010;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
max-height: 100%;
background-color: #f6f8fa;
box-shadow: 0 4px 10px 0 rgba(207, 207, 207, 0.88);
}
.seller-wrap .spot-step .step-list {
justify-content: space-between;
margin: 0 auto;
max-width: 28.8rem
justify-content: space-between;
margin: 0 auto;
max-width: 28.8rem
}
.seller-wrap .spot-step .step-list,
.seller-wrap .spot-step .step-list .step-item {
display: flex
display: flex
}
.seller-wrap .spot-step .step-list .step-item {
flex-direction: column;
justify-content: center;
flex-grow: 1;
padding: 2.1rem 0;
width: 0;
font-size: 1.3rem;
line-height: 1;
color: #909090;
text-align: center;
font-weight: 600;
flex-direction: column;
justify-content: center;
flex-grow: 1;
padding: 2.1rem 0;
width: 0;
font-size: 1.3rem;
line-height: 1;
color: #909090;
text-align: center;
font-weight: 600;
}
.seller-wrap .spot-step .step-list .step-item .link-block {
display: block;
display: block;
}
.seller-wrap .spot-step .step-list .step-item .link-block:before {
content: "";
display: inline-block;
border-radius: 50%;
width: 27px;
height: 27px;
line-height: 27px;
box-shadow: -4px -6px 10px 0 #ffffff, 4px 7px 10px 0 #dde0e2, -2px -2px 2px 0 #ffffff;
background-color: #f6f8fa;
text-align: center;
font-family: TgothicBlack;
content: "";
display: inline-block;
border-radius: 50%;
width: 27px;
height: 27px;
line-height: 27px;
box-shadow: -4px -6px 10px 0 #ffffff, 4px 7px 10px 0 #dde0e2, -2px -2px 2px 0 #ffffff;
background-color: #f6f8fa;
text-align: center;
font-family: TgothicBlack;
}
.seller-wrap .spot-step .step-list .step-item .link-block span {
margin-top: .6rem;
display: block;
font-weight: 600;
margin-top: .6rem;
display: block;
font-weight: 600;
}
.seller-wrap .spot-step .step-list .step-item.end .link-block span {
color: #f76252;
color: #f76252;
}
.seller-wrap .spot-step .step-list .step-item .link-block[aria-current=step] {
color: #f76252;
font-weight: 700;
color: #f76252;
font-weight: 700;
}
.seller-wrap .spot-step .step-list .step-item:nth-child(1) .link-block:before {
content: '1';
content: '1';
}
.seller-wrap .spot-step .step-list .step-item:nth-child(2) .link-block:before {
content: '2';
content: '2';
}
.seller-wrap .spot-step .step-list .step-item:nth-child(3) .link-block:before {
content: '3';
content: '3';
}
.seller-wrap .spot-step .step-list .step-item.end .link-block:before {
color: #f76252;
content: '';
background: url(../img/seller/bg_check_step.png) no-repeat center center;
background-size: 50%;
color: #f76252;
content: '';
background: url(../img/seller/bg_check_step.png) no-repeat center center;
background-size: 50%;
}
/* seller process 1 */
.seller-product-detail {
background-color: #efeff1;
font-family: 'Spoqa Han Sans';
background-color: #efeff1;
font-family: 'Spoqa Han Sans';
}
.seller-product-detail .l-grid {
padding-left: 20px;
padding-right: 20px;
padding-left: 20px;
padding-right: 20px;
}
.seller-product-detail .product-detail-header {
background-color: #efeff1;
background-color: #efeff1;
}
.header-sticky .product-detail-header {
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 10000;
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 10000;
}
.seller-product-detail .product-detail-header .top-header {
width: calc(100% - 40px);
height: 52px;
margin: 0 auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
width: calc(100% - 40px);
height: 52px;
margin: 0 auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.seller-product-detail .product-detail-header .top-header .top-header-left {
width: auto;
height: 25px;
width: auto;
height: 25px;
}
.seller-product-detail .product-detail-header .top-header .top-header-left img {
width: 18px;
height: 16px;
width: 18px;
height: 16px;
}
.seller-product-detail .product-detail-header .top-header .top-header-left span {
margin: 0 0 0 13px;
font-family: inherit;
font-size: 18px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: -0.53px;
color: #000000;
margin: 0 0 0 13px;
font-family: inherit;
font-size: 18px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: -0.53px;
color: #000000;
}
.seller-product-detail .product-detail-header .top-header .top-header-left span.blind {
display: none;
display: none;
}
.seller-product-detail .product-detail-header .top-header .top-header-right {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.seller-product-detail .product-detail-header .top-header .top-header-right .ico-cart {
width: 19px;
height: 20px;
margin-right: 17px;
padding-top: 1px;
width: 19px;
height: 20px;
margin-right: 17px;
padding-top: 1px;
}
.seller-product-detail .product-detail-header .top-header .top-header-right .ico-cart img {
width: 19px;
height: 20px;
width: 19px;
height: 20px;
}
.seller-product-detail .product-detail-header .top-header .top-header-right .ico-mypage {
width: 20px;
height: 20px;
width: 20px;
height: 20px;
}
.seller-product-detail .product-detail-header .top-header .top-header-right .ico-mypage img {
width: 20px;
height: 20px;
width: 20px;
height: 20px;
}
.seller-product-detail h1,
......@@ -242,184 +242,187 @@
.seller-product-detail h3,
.seller-product-detail strong,
.seller-product-detail em {
font-weight: 400;
font-weight: 400;
}
.seller-detail-header {
text-align: center;
padding-bottom: 2rem;
text-align: center;
padding-bottom: 2rem;
}
.seller-detail-header .product-name>h1 {
font-size: 2rem;
font-weight: 400;
color: #000;
line-height: normal;
font-size: 2rem;
font-weight: 400;
color: #000;
line-height: normal;
}
.seller-detail-header .product-name>span {
display: inline-block;
font-size: 1.3rem;
margin-top: 0.8rem;
display: inline-block;
font-size: 1.3rem;
margin-top: 0.8rem;
}
.seller-detail-header .product-key-visual {
margin: 2.5rem 0 2rem;
margin: 2.5rem 0 2rem;
}
.product-key-visual .img-area img {
border-radius: 13px;
border-radius: 13px;
}
.seller-detail-header .link-kakako-chat {
font-size: 1.3rem;
font-size: 1.3rem;
}
.seller-detail-header .link-kakako-chat:before {
content: '';
display: inline-block;
width: 20px;
height: 18px;
background: url(../img/seller/ico_kakao@2x.png) no-repeat 0 0;
background-size: 100% 100%;
vertical-align: top;
margin-right: 4px;
content: '';
display: inline-block;
width: 20px;
height: 18px;
background: url(../img/seller/ico_kakao@2x.png) no-repeat 0 0;
background-size: 100% 100%;
vertical-align: top;
margin-right: 4px;
}
.opt-group {
padding: 1.6rem 0 2rem;
border-top: 1px solid #babcbd;
clear: both;
padding: 1.6rem 0 2rem;
border-top: 1px solid #babcbd;
clear: both;
}
.opt-group .btn-popup{
float: right;
.opt-group .btn-popup {
float: right;
}
.opt-group:nth-of-type(1) {
border-top: 0;
border-top: 0;
}
.inner-opt-desc {
margin-top: 3rem;
margin-top: 3rem;
}
.discount-types-tit{
margin-top:1rem;
font-size: 1.5rem;
font-weight: 400;
.discount-types-tit {
margin-top: 1rem;
font-size: 1.5rem;
font-weight: 400;
}
.opt-group-tit {
font-size: 1.5rem;
font-weight: 400;
font-size: 1.5rem;
font-weight: 400;
}
.opt-group-con {
margin-top: 1rem;
margin-top: 1rem;
}
.opt-group-con .dsc-list-wrap{
margin-top:0.6rem;
.opt-group-con .dsc-list-wrap {
margin-top: 0.6rem;
}
.opt-group-con .txt-info {
font-size: 1.3rem;
color: #757575;
letter-spacing: -0.33px;
font-size: 1.3rem;
color: #757575;
letter-spacing: -0.33px;
}
.opt-group-con .btn-area-center {
margin-top: 4px;
text-align: center;
margin-top: 4px;
text-align: center;
}
.opt-group-notice {
color: #3B98E6;
margin-top: 1.6rem;
font-size: 1.2rem;
text-decoration: underline;
color: #3B98E6;
margin-top: 1.6rem;
font-size: 1.2rem;
text-decoration: underline;
}
.opt-capacity .product-capacities {
margin-top: 0;
margin-top: 0;
}
.opt-group .sort-lists,
.opt-group .sort-lists .sort-items {
display: flex;
display: flex;
}
.opt-group .sort-lists {
justify-content: space-between;
margin: 0 -.6rem 0 -.6rem;
flex-wrap: wrap;
justify-content: space-between;
margin: 0 -.6rem 0 -.6rem;
flex-wrap: wrap;
}
.opt-group .sort-lists .sort-items {
align-items: center;
justify-content: center;
color: #757575;
border: 1px solid #c7c7c7;
border-radius: 4px;
flex-direction: column;
margin: 0 .6rem;
width: calc(50% - 1.2rem);
padding: 2rem;
align-items: center;
justify-content: center;
color: #757575;
border: 1px solid #c7c7c7;
border-radius: 4px;
flex-direction: column;
margin: 0 .6rem;
width: calc(50% - 1.2rem);
padding: 2rem;
}
.opt-group .sort-lists .sort-items[aria-selected=true] {
color: #000;
border-color: #000
color: #000;
border-color: #000
}
.opt-group .sort-lists .sort-items.disabled,
.opt-group .sort-lists .sort-items[aria-disabled],
.opt-group .sort-lists .sort-items[disabled] {
pointer-events: none;
cursor: default;
color: hsla(0, 0%, 40%, .4)
pointer-events: none;
cursor: default;
color: hsla(0, 0%, 40%, .4)
}
.opt-delivery .sort-lists .sort-items:nth-child(n+3) {
margin-top: 1.2rem;
margin-top: 1.2rem;
}
.opt-delivery .sort-lists .sort-items>.tit {
font-size: 2rem;
font-size: 2rem;
}
.opt-delivery .sort-lists .sort-items>.desc {
font-size: 1.3rem;
margin-top: 1rem;
line-height: 1.4;
letter-spacing: -0.05em;
font-size: 1.3rem;
margin-top: 1rem;
line-height: 1.4;
letter-spacing: -0.05em;
}
.opt-delivery .sort-lists .sort-items .desc>strong {
color: #f76252;
color: #f76252;
}
.opt-delivery .buyer-info {
padding: 2rem;
background-color: #fafafa;
margin-top: 2rem;
margin-bottom: 1.7rem;
border-radius: 8px;
padding: 2rem;
background-color: #fafafa;
margin-top: 2rem;
margin-bottom: 1.7rem;
border-radius: 8px;
}
.opt-delivery .buyer-info .buyer-tit {
display: flex;
justify-content: space-between;
border-bottom: 1px solid #e1e1e1;
padding-bottom: 1.6rem;
display: flex;
justify-content: space-between;
border-bottom: 1px solid #e1e1e1;
padding-bottom: 1.6rem;
}
.opt-delivery .buyer-info .buyer-tit .tit {
font-size: 1.5rem;
font-size: 1.5rem;
}
.opt-delivery .buyer-info .buyer-tit .notice {
font-size: 1.2rem;
text-decoration: underline;
color: #8f8f90;
font-size: 1.2rem;
text-decoration: underline;
color: #8f8f90;
}
.opt-delivery .buyer-info .buyer-list {}
......@@ -427,25 +430,25 @@
.opt-delivery .buyer-info .buyer-list .buyer-item {}
.opt-delivery .buyer-info .btn-submit {
text-align: center;
height: 44px;
border: 1px solid #ccc;
width: 100%;
margin-top: 3rem;
border-radius: 4px;
font-size: 1.3rem;
text-align: center;
height: 44px;
border: 1px solid #ccc;
width: 100%;
margin-top: 3rem;
border-radius: 4px;
font-size: 1.3rem;
}
.opt-delivery .buyer-item .title {
font-size: 1.3rem;
margin: 2rem 0 .9rem;
font-size: 1.3rem;
margin: 2rem 0 .9rem;
}
.opt-delivery .buyer-item .c-input,
.opt-delivery .buyer-item .c-input-outline,
.opt-delivery .buyer-item .c-input .input,
.opt-delivery .buyer-item .c-input-outline .input {
font-size: 1.3rem;
font-size: 1.3rem;
}
.opt-delivery .buyer-item .btn-default,
......@@ -457,573 +460,634 @@
.opt-delivery .buyer-item .btn-outline-secondary,
.opt-delivery .buyer-item .btn-primary,
.btn-secondary {
font-size: 1.3rem;
font-size: 1.3rem;
}
.opt-delivery .buyer-item .c-input>span {
display: block;
color: #4f4f4f;
display: block;
color: #4f4f4f;
}
.favorite-seller {
position: relative;
border-top: 1px solid #fff;
padding: 3.6rem 0 2.4rem;
position: relative;
border-top: 1px solid #fff;
padding: 3.6rem 0 2.4rem;
}
.favorite-seller:before {
position: absolute;
top: -1px;
left: 0px;
content: "";
display: block;
width: 100%;
height: 1px;
background-color: #d8d8d8;
border-top: 1px solid #fff;
position: absolute;
top: -1px;
left: 0px;
content: "";
display: block;
width: 100%;
height: 1px;
background-color: #d8d8d8;
border-top: 1px solid #fff;
}
.favorite-seller-tit {
font-size: 1.5rem;
font-size: 1.5rem;
}
.favorite-seller-list {
display: flex;
margin-top: 1.6rem;
display: flex;
margin-top: 1.6rem;
}
.favorite-seller-item {
justify-content: space-between;
text-align: center;
padding: 1.2rem 1.3rem;
width: 33.33%;
justify-content: space-between;
text-align: center;
padding: 1.2rem 1.3rem;
width: 33.33%;
}
.favorite-seller-thumb {
width: 80px;
height: 80px;
border-radius: 8px;
width: 80px;
height: 80px;
border-radius: 8px;
}
.favorite-seller-name {
display: block;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow-wrap: break-word;
line-height: 1.3;
max-height: 36.4px;
word-break: break-all;
white-space: normal;
color: #222;
font-size: 1.2rem;
letter-spacing: -0.05em;
margin-top: .7rem;
display: block;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow-wrap: break-word;
line-height: 1.3;
max-height: 36.4px;
word-break: break-all;
white-space: normal;
color: #222;
font-size: 1.2rem;
letter-spacing: -0.05em;
margin-top: .7rem;
}
.seller-tab-area {
background-color: #fff;
margin-right: -20px;
margin-left: -20px;
background-color: #fff;
margin-right: -20px;
margin-left: -20px;
}
.seller-tab-area .tab-list {
display: flex;
border-bottom: 1px solid #e1e1e1;
display: flex;
border-bottom: 1px solid #e1e1e1;
}
.seller-tab-area .tab-item {
width: 50%;
width: 50%;
}
.seller-tab-area .tab-item>a {
display: block;
text-align: center;
padding: 14px 21px;
display: block;
text-align: center;
padding: 14px 21px;
}
.seller-tab-area .tab-item.on>a {
border-bottom: 3px solid #000;
font-weight: 600;
border-bottom: 3px solid #000;
font-weight: 600;
}
.seller-tab-area .tab-content {
padding: 40px 20px;
padding: 40px 20px;
}
.seller-tab-area .tab-content img {
max-width: 100%;
max-width: 100%;
}
.sticky-bar .layer-pay {
transition: all .3s ease;
box-shadow: 0 -2px 10px 0 rgba(207, 207, 207, 0.88);
border-top: 0;
border-radius: 10px 10px 0 0;
/* 2021.09.03 수정 */
transition: all .3s ease;
box-shadow: 0 -2px 10px 0 rgba(207, 207, 207, 0.88);
border-top: 0;
border-radius: 10px 10px 0 0;
/* 2021.09.03 수정 */
}
.sticky-bar.active .layer-pay {
transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
.sticky-bar .l-grid {
padding-left: 20px;
padding-right: 20px;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 20px;
padding-right: 20px;
padding-top: 20px;
padding-bottom: 20px;
}
.sticky-bar .layer-pay .layer-body {
position: relative;
padding-top: 2.3rem;
display: none;
position: relative;
padding-top: 2.3rem;
display: none;
}
.sticky-bar .layer-pay .layer-body.show {
display: block;
display: block;
}
.sticky-bar .layer-pay .layer-body.on {
padding-bottom: 0.8rem;
padding-bottom: 0.8rem;
}
.sticky-bar .layer-pay .layer-body .price-area {
display: none;
display: none;
}
.sticky-bar .layer-pay .layer-body .btn-toggle {
position: absolute;
left: 50%;
top: -10px;
width: 18px;
height: 6px;
background: url(../img/seller/floating_btn_up@2x.png) no-repeat center center;
background-size: 18px 6px;
transform: translateX(-50%);
padding: 10px;
position: absolute;
left: 50%;
top: -10px;
width: 18px;
height: 6px;
background: url(../img/seller/floating_btn_up@2x.png) no-repeat center center;
background-size: 18px 6px;
transform: translateX(-50%);
padding: 10px;
}
.sticky-bar .layer-pay .layer-body.on .price-area {
display: flex;
display: flex;
}
.sticky-bar .layer-pay .layer-body.on .btn-toggle {
transform: translateX(-50%) rotateX(180deg);
transform: translateX(-50%) rotateX(180deg);
}
.sticky-bar .layer-pay .layer-foot {
padding-bottom: 2.1rem;
padding-bottom: 2.1rem;
}
.sticky-bar .layer-pay .price-area {
padding-top: 0;
align-items: flex-start;
padding-top: 0;
align-items: flex-start;
}
.sticky-bar .layer-pay .price-area+.price-area {
margin-top: 0.8rem;
margin-top: 0.8rem;
}
.sticky-bar .layer-pay .btn-area {
font-size: 1.3rem;
padding-top: 0;
font-size: 1.3rem;
padding-top: 0;
}
.sticky-bar .layer-pay .btn-area .btn-primary {
box-shadow: -4px -6px 10px 0 rgba(255, 255, 255, 0.83), 4px 7px 10px 0 #d3d3d3, -1px -1px 1px 0 #ffffff;
min-width: 70%;
box-shadow: -4px -6px 10px 0 rgba(255, 255, 255, 0.83), 4px 7px 10px 0 #d3d3d3, -1px -1px 1px 0 #ffffff;
min-width: 70%;
}
.sticky-bar .layer-pay .btn-area .btn-light {
color: #f76252;
box-shadow: -4px -6px 10px 0 #ffffff, 4px 7px 10px 0 #dde0e2, -1px -1px 2px 0 #ffffff;
background-color: #f6f8fa;
color: #f76252;
box-shadow: -4px -6px 10px 0 #ffffff, 4px 7px 10px 0 #dde0e2, -1px -1px 2px 0 #ffffff;
background-color: #f6f8fa;
}
.sticky-bar .layer-pay .btn-area.disabled [class^=btn-] {
opacity: 0.6;
pointer-events: none;
opacity: 0.6;
pointer-events: none;
}
.sticky-bar .layer-pay .price-area .price .num {
font-size: 1.3rem;
color: #000;
font-size: 1.3rem;
color: #000;
}
.sticky-bar .layer-pay .price-area .price .num>strong {
color: #f76252;
font-size: 1.6rem;
color: #f76252;
font-size: 1.6rem;
}
.sticky-bar .layer-pay .price-area .price .desc {
display: block;
color: #8d8d8d;
font-size: 1rem;
display: block;
color: #8d8d8d;
font-size: 1rem;
}
/* new 가입자 정보 22.01.03 seller_subscriber_info */
.seller-wrap.seller_subscriber_info .content {
padding-top: 6.2rem;
padding-bottom: 0;
}
.subscrib-txt-msg {
font-size: 1.5rem;
letter-spacing: -0.5px;
font-weight: normal;
color: #222;
padding-bottom:4rem;
}
.bottom-btn-bar {
position: fixed;
right: 0;
bottom: 0;
left: 0;
z-index: 10010;
width: 100%;
}
.seller_subscriber_info .layer-pay {
border-top: 0;
background-color: #efeff1;
box-shadow: none;
}
.seller_subscriber_info .l-grid {
padding-left: 20px;
padding-right: 20px;
padding-top: 20px;
padding-bottom: 20px;
}
.seller_subscriber_info .layer-pay .btn-area {
font-size: 1.3rem;
padding-top: 0;
display: flex;
}
.seller_subscriber_info .layer-pay .btn-area button {
height: 44px;
line-height: 44px;
}
.seller_subscriber_info .layer-pay .btn-area .btn-primary {
min-width: auto;
margin: 0 0.4rem;
box-shadow: -4px -6px 10px 0 rgba(255, 255, 255, 0.83), 4px 7px 10px 0 #d3d3d3, -1px -1px 1px 0 #fff;
}
.seller_subscriber_info .layer-pay .btn-area .btn-middle-light {
min-width: auto;
box-shadow: -4px -6px 10px 0 rgba(255, 255, 255, 0.83), 4px 7px 10px 0 #d3d3d3, -1px -1px 1px 0 #fff;
background-color: #efeff1;
margin: 0 0.4rem;
}
/* seller_process 2 */
.type-family .product-option-col .c-ick-var,
.type-welfare .product-option-col .c-ick-var {
flex-basis: 50%;
flex-basis: 50%;
}
.type-family .product-option-col .c-ick-var .unit,
.type-welfare .product-option-col .c-ick-var .unit {
color: #666;
color: #666;
}
.type-family .product-option-col .c-ick-var label,
.type-welfare .product-option-col .c-ick-var label {
padding: 1.8rem 0;
padding: 1.8rem 0;
}
.type-discount .product-option-row .c-ick-var label {}
.type-discount .product-option-row .c-ick-var label .row {
display: flex;
justify-content: space-between;
display: flex;
justify-content: space-between;
}
.type-discount .product-option-row .c-ick-var label .row+.row {
color: #555;
color: #555;
}
.type-discount .product-option-row .c-ick-var input[type=radio]:checked+label .row:first-child {
font-weight: 600;
font-weight: 600;
}
.type-discount .product-option-row .c-ick-var input[type=radio]:checked+label .row:first-child .desc {
color: #489bdf;
color: #489bdf;
}
.type-pay-way .txt {
color: rgba(0, 0, 0, 0.4);
font-size: 1.1rem;
margin: 1rem 0;
color: rgba(0, 0, 0, 0.4);
font-size: 1.1rem;
margin: 1rem 0;
}
/* seller_process 3 */
.group-more-discount {
padding-bottom: 0;
padding-bottom: 0;
}
.type-discount-more {
margin-top: 1.2rem;
margin-top: 1.2rem;
}
.type-discount-more .item {
border-top: 1px solid #babcbd;
border-top: 1px solid #babcbd;
}
.type-discount-more .item .link {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.5rem 0;
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.5rem 0;
}
.type-discount-more .price {
font-weight: 600;
margin-right: 0.5rem;
font-size: 1.2rem;
font-weight: 600;
margin-right: 0.5rem;
font-size: 1.2rem;
}
.type-discount-more .point {
color: #3b98e6;
color: #3b98e6;
}
.type-discount-more .btn {
font-size: 1.2rem;
font-size: 1.2rem;
}
.type-discount-more .btn:after {
content: '';
display: inline-block;
width: 4px;
height: 7px;
background: url(../img/seller/btn_arrow_ico@2x.png) no-repeat 0 0;
background-size: cover;
margin-left: 0.5rem;
vertical-align: middle;
transform: translateY(-1px);
content: '';
display: inline-block;
width: 4px;
height: 7px;
background: url(../img/seller/btn_arrow_ico@2x.png) no-repeat 0 0;
background-size: cover;
margin-left: 0.5rem;
vertical-align: middle;
transform: translateY(-1px);
}
.opt-group .tgift-type {
display: flex;
align-items: center;
padding: 16px 21px;
color: #000;
border: 1px solid #000;
border-radius: 4px;
display: flex;
align-items: center;
padding: 16px 21px;
color: #000;
border: 1px solid #000;
border-radius: 4px;
}
.opt-group .tgift-type.before-selected {
border: 0;
padding: 0;
background-color: #f6f8fa;
box-shadow: 0 4px 10px 0 rgba(207, 207, 207, 0.88);
border: 0;
padding: 0;
background-color: #f6f8fa;
box-shadow: 0 4px 10px 0 rgba(207, 207, 207, 0.88);
}
.opt-group .tgift-type.before-selected .img {
max-width: 100%;
vertical-align: top;
max-width: 100%;
vertical-align: top;
}
.opt-group .tgift-type .thumb {
position: relative;
width: 54px;
min-width: 54px;
height: 54px;
margin-right: 2.4rem;
position: relative;
width: 54px;
min-width: 54px;
height: 54px;
margin-right: 2.4rem;
}
.opt-group .tgift-type .thumb img {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
max-width: 100%;
max-height: 100%;
margin: auto;
border-radius: 6px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
max-width: 100%;
max-height: 100%;
margin: auto;
border-radius: 6px;
}
.opt-group .tgift-type .cont {
position: relative;
flex: 1 1;
display: block;
position: relative;
flex: 1 1;
display: block;
}
.opt-group .tgift-type .title {
font-size: 1.3rem;
font-weight: 700;
padding-right: 2.5rem;
font-size: 1.3rem;
font-weight: 700;
padding-right: 2.5rem;
}
.opt-group .tgift-type .cont .btn-change {
position: absolute;
top: 0;
right: 0;
position: absolute;
top: 0;
right: 0;
}
.opt-group .tgift-type .option {
margin-top: .6rem;
height: 40px;
line-height: 40px;
color: #666;
margin-top: .6rem;
height: 40px;
line-height: 40px;
color: #666;
}
.group-order-confirm {
padding-bottom: 0;
padding-bottom: 0;
}
.order-confirm-type>.tit {
text-align: center;
font-size: 2rem;
margin-top: 2rem;
text-align: center;
font-size: 2rem;
margin-top: 2rem;
}
.order-confirm-type>.desc {
display: block;
text-align: center;
font-size: 1.3rem;
margin-top: 0.6rem;
display: block;
text-align: center;
font-size: 1.3rem;
margin-top: 0.6rem;
}
.order-confirm-type>.thumb-box {
position: relative;
margin: 0 auto;
width: 250px;
height: 250px;
margin-top: 1.5rem;
position: relative;
margin: 0 auto;
width: 250px;
height: 250px;
margin-top: 1.5rem;
}
.order-confirm-type>.thumb-box>img {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
max-width: 100%;
max-height: 100%;
border-radius: 13px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
max-width: 100%;
max-height: 100%;
border-radius: 13px;
}
.order-confirm-type .order-detail-area {
margin-top: 3rem;
margin-top: 3rem;
}
.order-confirm-type .order-detail-area .table-row-list th {
background-color: transparent;
font-size: 1.5rem;
padding: 6px 0;
background-color: transparent;
font-size: 1.5rem;
padding: 6px 0;
}
.order-confirm-type .order-detail-area .table-row-list td {
padding: 6px 0;
padding: 6px 0;
}
.order-confirm-type .order-detail-area .table-row-list tbody th {
color: #202020;
color: #202020;
}
.order-confirm-type .order-detail-area .table-row-list tbody td {
font-size: 1.6rem;
font-size: 1.6rem;
}
.order-confirm-type .order-detail-area .table-row-list tbody td .unit {
color: #666;
font-size: 1.3rem;
color: #666;
font-size: 1.3rem;
}
.order-confirm-type .order-detail-area .table-row-list td .block {
display: block;
display: block;
}
.order-confirm-type .order-detail-area .table-row-list td .small {
font-size: 1rem;
color: #8d8d8d;
font-size: 1rem;
color: #8d8d8d;
}
.order-confirm-type .order-detail-area .table-row-list tfoot th {
color: #000;
border-top: 1px solid #babcbd;
padding: 12px 0;
color: #000;
border-top: 1px solid #babcbd;
padding: 12px 0;
}
.order-confirm-type .order-detail-area .table-row-list tfoot td {
border-top: 1px solid #babcbd;
padding: 12px 0;
border-top: 1px solid #babcbd;
padding: 12px 0;
}
.order-confirm-type .order-detail-area .table-row-list tfoot td .price {
color: #f76252;
font-size: 1.8rem;
font-weight: 600;
color: #f76252;
font-size: 1.8rem;
font-weight: 600;
}
.order-confirm-type .order-detail-area .table-row-list tfoot td .btn-more {
margin-top: 0.8rem;
margin-top: 0.8rem;
}
.seller-notice-link {
position: relative;
display: block;
padding: 1.2rem 0;
border-top: 1px solid #babcbd;
border-bottom: 1px solid #babcbd;
margin-bottom: 3rem;
position: relative;
display: block;
padding: 1.2rem 0;
border-top: 1px solid #babcbd;
border-bottom: 1px solid #babcbd;
margin-bottom: 3rem;
}
.seller-notice-link:after {
content: '';
position: absolute;
right: 3px;
top: 50%;
width: 4px;
height: 7px;
background: url(../img/seller/btn_arrow_ico@2x.png) no-repeat 0 0;
background-size: cover;
transform: translateY(-50%);
content: '';
position: absolute;
right: 3px;
top: 50%;
width: 4px;
height: 7px;
background: url(../img/seller/btn_arrow_ico@2x.png) no-repeat 0 0;
background-size: cover;
transform: translateY(-50%);
}
.color-important {
color: #e84f01;
color: #e84f01;
}
.auth-group {
margin-top: 18px;
margin-top: 18px;
}
.auth-group .auth-title {
font-size: 1.4rem;
line-height: normal;
font-size: 1.4rem;
line-height: normal;
}
.auth-group .auth-content {
margin-top: 0.9rem;
margin-top: 0.9rem;
}
.auth-group .auth-content .txt-info {
margin-top: 0.9rem;
font-size: 1.2rem;
margin-top: 0.9rem;
font-size: 1.2rem;
}
.auth-group .auth-status,
.auth-group .form-group {
margin-top: 1.6rem;
margin-top: 1.6rem;
}
.auth-group .auth-status {
color: rgba(0, 0, 0, 0.4);
font-size: 1.4rem;
color: rgba(0, 0, 0, 0.4);
font-size: 1.4rem;
}
.auth-group .auth-status .txt-auth-status {
font-weight: 600;
font-weight: 600;
}
.auth-group .auth-status .txt-auth-status:before {
display: inline-block;
width: 1px;
height: 10px;
margin: 0 6px 0 3px;
background-color: #e1e1e1;
content: '';
display: inline-block;
width: 1px;
height: 10px;
margin: 0 6px 0 3px;
background-color: #e1e1e1;
content: '';
}
/* 제품사양(2021.08.25 수정) */
.tbl_row {
width: 100% !important;
;
margin-top: 3rem !important;
border: 0 !important;
border-spacing: 0 !important;
border-top: 1px solid #e1e1e1 !important;
width: 100% !important;
;
margin-top: 3rem !important;
border: 0 !important;
border-spacing: 0 !important;
border-top: 1px solid #e1e1e1 !important;
}
.tbl_row caption {
overflow: hidden;
height: 0;
font-size: 0;
line-height: 0;
color: transparent;
overflow: hidden;
height: 0;
font-size: 0;
line-height: 0;
color: transparent;
}
.tbl_row td,
.tbl_row th {
padding: 1.3rem 1rem 1.2rem 1.4rem !important;
font-size: 1.2rem !important;
line-height: 1.5 !important;
text-align: left !important;
border: 0 !important;
border-bottom: 1px solid #e1e1e1 !important;
padding: 1.3rem 1rem 1.2rem 1.4rem !important;
font-size: 1.2rem !important;
line-height: 1.5 !important;
text-align: left !important;
border: 0 !important;
border-bottom: 1px solid #e1e1e1 !important;
}
.tbl_row th {
color: #5e5e5e !important;
font-weight: 400 !important;
background-color: #fafafa !important;
border-right: 1px solid #e1e1e1 !important;
color: #5e5e5e !important;
font-weight: 400 !important;
background-color: #fafafa !important;
border-right: 1px solid #e1e1e1 !important;
}
.seller_subscriber_info .opt-group {
border-top: 0;
}
/* 320디바이스 대응수정(2021.08.24 추가) */
@media all and (max-width: 320px) {
.opt-group .tgift-type .thumb {
margin-right: 1.4rem;
}
.opt-group .tgift-type .thumb {
margin-right: 1.4rem;
}
.opt-group .tgift-type .title {
max-width: 142px;
}
.opt-group .tgift-type .title {
max-width: 142px;
}
.product-color .color-chips .c-ick-var {
margin-right: 8px
}
.product-color .color-chips .c-ick-var {
margin-right: 8px
}
}
\ No newline at end of file
src/assets/html/index.html
View file @ b723c705
......@@ -81,6 +81,8 @@ document.createElement("footer");
<li><a href="./seller_usim_5g_registration1.html">5G 요금제로 USIM 개통 - 옵션.혜택<span>/ ./seller_usim_5g_registration1.html</span></a></li>
<li><a href="./seller_usim_lte_registration1.html">LTE 요금제로 USIM 개통 - 옵션.혜택<span>/ ./seller_usim_lte_registration1.html</span></a></li>
<li><a href="./seller_pop_serial_number.html">[팝업] 일련번호, IMEI, Wi-Fi MAC 주소 확인방법<span>/ ./seller_pop_serial_number.html</span></a></li>
<li><a href="./seller_subscriber_info.html">가입자 정보<span>/ ./seller_subscriber_info.html</span></a></li>
</ul>
</section>
</article>
......
src/assets/html/seller_subscriber_info.html 0 → 100644
View file @ b723c705
<!--
가입자 정보 화면
-->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,viewport-fit=cover">
<title>[상품 Mobile] detail | SK텔레콤 공식 온라인 쇼핑몰 T월드 다이렉트</title>
<link rel="shortcut icon" type="image/x-icon" href="../img/favicon.ico">
<link rel="stylesheet" type="text/css" href="../css/seller.css">
<script>
document.documentElement.dataset.userAgent = navigator.userAgent;
</script>
</head>
<body>
<!-- [D] div.wrap에 클래스 product-detail-page 추가
header가 상단 고정을 경우 div.wrap에 클래스 header-sticky 추가 -->
<div class="wrap seller-wrap header-sticky seller_subscriber_info">
<header class="header header-sub">
<div class="top-menu">
<a href="#none" class="btn-back">
<span class="ico-back">이전 페이지로 돌아가기</span>
</a>
<div class="top-header-title"><span class="txt-head">가입자 정보</span></div>
</div>
</header>
<main role="main" class="content">
<div class="l-grid">
<p class="subscrib-txt-msg">신청서로 이동하기 전 가입자 정보를 확인해 주세요</p>
<!-- [D] Case: 비회원 -->
<div class="opt-group">
<h2 class="opt-group-tit">가입자명</h2>
<div class="opt-group-con">
<div class="form-group">
<span class="c-input">
<input type="text" placeholder="가입하실 분의 이름을 입력하세요" title="가입하실 분의 이름을 입력하세요" class="input">
</span>
</div>
</div>
</div>
<div class="opt-group">
<h2 class="opt-group-tit">휴대폰번호</h2>
<div class="opt-group-con">
<div class="form-group">
<span class="c-input">
<input type="text" placeholder="‘-’ 없이 숫자만 입력해 주세요" title="‘-’ 없이 숫자만 입력해 주세요" maxlength="11" class="input" numberOnly>
</span>
</div>
</div>
</div>
<!-- [D] Case: 회원(서비스관리번호有) -->
<div class="opt-group">
<h2 class="opt-group-tit">가입자명</h2>
<div class="opt-group-con">
<div class="form-group">
<span class="c-input">
<input type="text" placeholder="가입하실 분의 이름을 입력하세요" title="가입하실 분의 이름을 입력하세요" value="최부열" class="input">
</span>
</div>
</div>
</div>
<div class="opt-group">
<h2 class="opt-group-tit">휴대폰번호</h2>
<div class="opt-group-con">
<div class="form-group">
<span class="c-input">
<input type="text" placeholder="‘-’ 없이 숫자만 입력해 주세요" title="‘-’ 없이 숫자만 입력해 주세요" maxlength="11" onfocus="this.value=''" value="010-8912-1706"
class="input" numberOnly>
</span>
</div>
</div>
</div>
<!-- [D] Case: 언택트플랜 case (비회원 or 회원&다른번호 입력)-->
<div class="opt-group">
<h2 class="opt-group-tit">가입자명</h2>
<div class="opt-group-con">
<div class="form-group">
<span class="c-input">
<input type="text" placeholder="가입하실 분의 이름을 입력하세요" title="가입하실 분의 이름을 입력하세요" class="input">
</span>
</div>
</div>
</div>
<div class="opt-group">
<h2 class="opt-group-tit">휴대폰번호</h2>
<div class="opt-group-con">
<div class="form-group">
<span class="c-input">
010-8912-1706
</span>
</div>
</div>
</div>
</div>
</main>
<!-- s: 하단 버튼 바 -->
<div class="sticky-bar">
<div class="layer-pay">
<h2 class="g-invisible">가입자정보</h2>
<div class="l-grid">
<!-- [D] 활성/비활성 여부는 클래스 disabled 추가/삭제로 컨트롤 -->
<div class="btn-area">
<button type="button" class="btn-middle-light">취소</button>
<button type="button" class="btn-primary">확인</button>
</div>
</div>
</div>
</div>
<!-- //e: 하단 버튼 바 -->
</div>
<!-- <script>
$("input").on("click", function(){
$(this).val($(this).val().replace(/[^0-9]/g,""));
})
</script> -->
<script src="../js/jquery.min.js"></script>
<script src="../js/swiper.min.js"></script>
<script src="../js/tdirect-ui.js"></script>
</body>
</html>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment