updata
This commit is contained in:
parent
d824aa43f0
commit
47e4e9718a
File diff suppressed because it is too large
Load Diff
@ -1,34 +1,83 @@
|
|||||||
.dialog-tit {
|
.check-tit {
|
||||||
font-size: 0.405rem;
|
font-size: 0.16rem;
|
||||||
/* 增大35%: .3rem * 1.35 = .405rem */
|
color: #333;
|
||||||
color: #000;
|
line-height: 0.1rem;
|
||||||
padding: 0.2rem 0;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
.url_box {
|
.url_btn {
|
||||||
font-size: 0.24rem;
|
display: flex;
|
||||||
margin-top: 0.1rem;
|
justify-content: flex-end;
|
||||||
|
margin-left: 0.1rem;
|
||||||
|
}
|
||||||
|
.url_btn .copy-hint {
|
||||||
|
font-size: 0.26rem;
|
||||||
|
color: #000;
|
||||||
|
margin-top: 0.16rem;
|
||||||
|
padding: 0.04rem 0.12rem;
|
||||||
|
border-radius: 0.12rem;
|
||||||
|
border: 1px solid #000;
|
||||||
|
transition: all 0.2s;
|
||||||
|
}
|
||||||
|
.url:hover .url_btn {
|
||||||
|
color: #275aff;
|
||||||
|
border-color: #275aff;
|
||||||
|
}
|
||||||
|
.url.copied .url_btn {
|
||||||
|
color: #67c23a;
|
||||||
|
border-color: #67c23a;
|
||||||
|
}
|
||||||
|
* {
|
||||||
|
touch-action: manipulation;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.dialog-tit {
|
||||||
|
font-size: 0.4rem;
|
||||||
|
color: #333;
|
||||||
|
padding: 0.2rem 0 0.4rem;
|
||||||
|
border-bottom: 1px solid #f0f0f0;
|
||||||
|
margin-bottom: 0.4rem;
|
||||||
|
}
|
||||||
|
.dialog-tit .pc-tip {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
margin-bottom: 0.3rem;
|
||||||
|
color: #ff6b35;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
.dialog-tit .pc-tip i {
|
||||||
|
margin-right: 0.2rem;
|
||||||
|
font-size: 0.42rem;
|
||||||
|
}
|
||||||
|
.dialog-tit .pc-tip span {
|
||||||
|
font-size: 0.36rem;
|
||||||
|
}
|
||||||
|
.url_box {
|
||||||
|
font-size: 0.32rem;
|
||||||
|
margin-top: 0.2rem;
|
||||||
}
|
}
|
||||||
.url-container {
|
.url-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
position: relative;
|
||||||
}
|
}
|
||||||
.url-container .url {
|
.url-container .url {
|
||||||
position: relative;
|
display: inline-flex;
|
||||||
display: inline-block;
|
align-items: center;
|
||||||
color: #275aff;
|
color: #275aff;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
padding: 0.04rem 0.1rem;
|
padding: 0.12rem 0.24rem;
|
||||||
border-radius: 0.04rem;
|
border-radius: 0.24rem;
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
background: #f5f7ff;
|
||||||
}
|
}
|
||||||
.url-container .url:hover {
|
.url-container .url:hover {
|
||||||
background-color: #e8edff;
|
background-color: #e8edff;
|
||||||
border-color: #275aff;
|
border-color: #275aff;
|
||||||
transform: translateY(-1px);
|
transform: translateY(-0.04rem);
|
||||||
box-shadow: 0 2px 8px rgba(39, 90, 255, 0.1);
|
box-shadow: 0 0.08rem 0.32rem rgba(39, 90, 255, 0.15);
|
||||||
}
|
}
|
||||||
.url-container .url.copied {
|
.url-container .url.copied {
|
||||||
background-color: #e1f3d8;
|
background-color: #e1f3d8;
|
||||||
@ -39,38 +88,16 @@
|
|||||||
background-color: #d1edc4;
|
background-color: #d1edc4;
|
||||||
border-color: #5daf34;
|
border-color: #5daf34;
|
||||||
}
|
}
|
||||||
.url-container .url .copy-hint {
|
|
||||||
display: inline-block;
|
|
||||||
margin-left: 0.1rem;
|
|
||||||
font-size: 0.189rem;
|
|
||||||
/* 增大35%: .14rem * 1.35 = .189rem */
|
|
||||||
color: #999;
|
|
||||||
background-color: #fff;
|
|
||||||
padding: 0.02rem 0.06rem;
|
|
||||||
border-radius: 0.02rem;
|
|
||||||
border: 1px solid #eee;
|
|
||||||
transition: all 0.2s;
|
|
||||||
}
|
|
||||||
.url:hover .url-container .url .copy-hint {
|
|
||||||
color: #275aff;
|
|
||||||
border-color: #275aff;
|
|
||||||
}
|
|
||||||
.url.copied .url-container .url .copy-hint {
|
|
||||||
content: '✓ 已复制';
|
|
||||||
color: #67c23a;
|
|
||||||
border-color: #67c23a;
|
|
||||||
}
|
|
||||||
.url-container .tooltip {
|
.url-container .tooltip {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 100%;
|
bottom: 100%;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translateX(-50%) translateY(-8px);
|
transform: translateX(-50%) translateY(-0.16rem);
|
||||||
background-color: rgba(0, 0, 0, 0.8);
|
background-color: rgba(0, 0, 0, 0.85);
|
||||||
color: white;
|
color: white;
|
||||||
font-size: 0.162rem;
|
font-size: 0.24rem;
|
||||||
/* 增大35%: .12rem * 1.35 = .162rem */
|
padding: 0.08rem 0.16rem;
|
||||||
padding: 0.04rem 0.08rem;
|
border-radius: 0.16rem;
|
||||||
border-radius: 0.04rem;
|
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
z-index: 1000;
|
z-index: 1000;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
@ -83,192 +110,374 @@
|
|||||||
top: 100%;
|
top: 100%;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
border-width: 0.04rem;
|
border-width: 0.08rem;
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
border-color: rgba(0, 0, 0, 0.8) transparent transparent transparent;
|
border-color: rgba(0, 0, 0, 0.85) transparent transparent transparent;
|
||||||
}
|
}
|
||||||
.url-container .tooltip.tooltip-visible {
|
.url-container .tooltip.tooltip-visible {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transform: translateX(-50%) translateY(0);
|
transform: translateX(-50%) translateY(0);
|
||||||
}
|
}
|
||||||
::v-deep .product-consult-dialog.el-dialog {
|
::v-deep .product-consult-dialog.el-dialog {
|
||||||
width: var(--dialog-width, 6rem) !important;
|
border-radius: 0.32rem;
|
||||||
max-width: 90%;
|
overflow: hidden;
|
||||||
border-radius: 0.08rem;
|
box-shadow: 0 0.4rem 1.6rem rgba(0, 0, 0, 0.15);
|
||||||
z-index: 9999;
|
|
||||||
}
|
}
|
||||||
::v-deep .product-consult-dialog.el-dialog .el-dialog__header {
|
::v-deep .product-consult-dialog.el-dialog .el-dialog__header {
|
||||||
padding: 0.2rem 0.3rem 0.1rem;
|
padding: 0.4rem 0.6rem 0.3rem;
|
||||||
border-bottom: 1px solid #eee;
|
border-bottom: 1px solid #f0f0f0;
|
||||||
|
background: linear-gradient(135deg, #f8f9ff 0%, #ffffff 100%);
|
||||||
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
::v-deep .product-consult-dialog.el-dialog .el-dialog__header .el-dialog__title {
|
::v-deep .product-consult-dialog.el-dialog .el-dialog__header .el-dialog__title {
|
||||||
font-size: 0.243rem;
|
font-size: 0.4rem;
|
||||||
/* 增大35%: .18rem * 1.35 = .243rem */
|
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #333;
|
color: #1a1a1a;
|
||||||
|
}
|
||||||
|
::v-deep .product-consult-dialog.el-dialog .el-dialog__header .el-dialog__headerbtn {
|
||||||
|
top: 0.4rem;
|
||||||
|
right: 0.4rem;
|
||||||
|
}
|
||||||
|
::v-deep .product-consult-dialog.el-dialog .el-dialog__header .el-dialog__headerbtn .el-dialog__close {
|
||||||
|
font-size: 0.36rem;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
::v-deep .product-consult-dialog.el-dialog .el-dialog__header .el-dialog__headerbtn .el-dialog__close:hover {
|
||||||
|
color: #275aff;
|
||||||
}
|
}
|
||||||
::v-deep .product-consult-dialog.el-dialog .el-dialog__body {
|
::v-deep .product-consult-dialog.el-dialog .el-dialog__body {
|
||||||
padding: 0.2rem 0.3rem;
|
padding: 0.2rem 0.6rem;
|
||||||
max-height: 65vh;
|
max-height: 70vh;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
}
|
}
|
||||||
::v-deep .product-consult-dialog.el-dialog .el-dialog__footer {
|
::v-deep .product-consult-dialog.el-dialog .el-dialog__footer {
|
||||||
padding: 0.15rem 0.3rem 0.2rem;
|
padding: 0.4rem 0.6rem;
|
||||||
border-top: 1px solid #eee;
|
border-top: 1px solid #f0f0f0;
|
||||||
display: flex;
|
background: #fafbfc;
|
||||||
justify-content: flex-end;
|
|
||||||
}
|
}
|
||||||
::v-deep .el-form .el-form-item {
|
::v-deep .el-form .el-form-item {
|
||||||
margin-bottom: 0.4rem;
|
margin-bottom: 0.4rem;
|
||||||
}
|
}
|
||||||
::v-deep .el-form .el-form-item:last-child {
|
|
||||||
margin-bottom: 0.1rem;
|
|
||||||
}
|
|
||||||
::v-deep .el-form .el-form-item .el-form-item__label {
|
::v-deep .el-form .el-form-item .el-form-item__label {
|
||||||
padding-bottom: 0.06rem;
|
padding-bottom: 0.12rem;
|
||||||
font-size: 0.27rem;
|
font-size: 0.32rem;
|
||||||
/* 增大35%: .2rem * 1.35 = .27rem */
|
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
color: #333;
|
color: #333;
|
||||||
line-height: 1.4;
|
line-height: 1.5;
|
||||||
}
|
}
|
||||||
::v-deep .el-form .el-form-item .el-input .el-input__inner,
|
::v-deep .el-form .el-form-item .el-input .el-input__inner,
|
||||||
::v-deep .el-form .el-form-item .el-textarea .el-input__inner,
|
::v-deep .el-form .el-form-item .el-textarea .el-input__inner,
|
||||||
::v-deep .el-form .el-form-item .el-input .el-textarea__inner,
|
::v-deep .el-form .el-form-item .el-input .el-textarea__inner,
|
||||||
::v-deep .el-form .el-form-item .el-textarea .el-textarea__inner {
|
::v-deep .el-form .el-form-item .el-textarea .el-textarea__inner {
|
||||||
font-size: 0.189rem;
|
font-size: 0.32rem;
|
||||||
/* 增大35%: .14rem * 1.35 = .189rem */
|
|
||||||
border: 1px solid #dcdfe6;
|
border: 1px solid #dcdfe6;
|
||||||
border-radius: 0.04rem;
|
border-radius: 0.24rem;
|
||||||
transition: border-color 0.2s;
|
transition: all 0.3s;
|
||||||
|
padding: 0.24rem 0.32rem;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
::v-deep .el-form .el-form-item .el-input .el-input__inner:hover,
|
||||||
|
::v-deep .el-form .el-form-item .el-textarea .el-input__inner:hover,
|
||||||
|
::v-deep .el-form .el-form-item .el-input .el-textarea__inner:hover,
|
||||||
|
::v-deep .el-form .el-form-item .el-textarea .el-textarea__inner:hover {
|
||||||
|
border-color: #c0c4cc;
|
||||||
}
|
}
|
||||||
::v-deep .el-form .el-form-item .el-input .el-input__inner:focus,
|
::v-deep .el-form .el-form-item .el-input .el-input__inner:focus,
|
||||||
::v-deep .el-form .el-form-item .el-textarea .el-input__inner:focus,
|
::v-deep .el-form .el-form-item .el-textarea .el-input__inner:focus,
|
||||||
::v-deep .el-form .el-form-item .el-input .el-textarea__inner:focus,
|
::v-deep .el-form .el-form-item .el-input .el-textarea__inner:focus,
|
||||||
::v-deep .el-form .el-form-item .el-textarea .el-textarea__inner:focus {
|
::v-deep .el-form .el-form-item .el-textarea .el-textarea__inner:focus {
|
||||||
border-color: #409eff;
|
border-color: #275aff;
|
||||||
|
box-shadow: 0 0 0 0.04rem rgba(39, 90, 255, 0.1);
|
||||||
|
}
|
||||||
|
::v-deep .el-form .el-form-item .el-input .el-input__inner::placeholder,
|
||||||
|
::v-deep .el-form .el-form-item .el-textarea .el-input__inner::placeholder,
|
||||||
|
::v-deep .el-form .el-form-item .el-input .el-textarea__inner::placeholder,
|
||||||
|
::v-deep .el-form .el-form-item .el-textarea .el-textarea__inner::placeholder {
|
||||||
|
color: #999;
|
||||||
|
font-size: 0.28rem;
|
||||||
}
|
}
|
||||||
::v-deep .el-form .el-form-item .el-textarea__inner {
|
::v-deep .el-form .el-form-item .el-textarea__inner {
|
||||||
min-height: 0.9rem !important;
|
min-height: 2.4rem;
|
||||||
|
line-height: 1.5;
|
||||||
resize: vertical;
|
resize: vertical;
|
||||||
padding: 0.08rem 0.12rem;
|
|
||||||
}
|
}
|
||||||
::v-deep .el-form .el-form-item .el-radio {
|
::v-deep .el-form .el-form-item .el-radio {
|
||||||
margin-right: 0.2rem;
|
margin-right: 0.6rem;
|
||||||
}
|
}
|
||||||
::v-deep .el-form .el-form-item .el-radio .el-radio__label {
|
::v-deep .el-form .el-form-item .el-radio .el-radio__label {
|
||||||
font-size: 0.189rem;
|
font-size: 0.32rem;
|
||||||
/* 增大35%: .14rem * 1.35 = .189rem */
|
color: #666;
|
||||||
|
}
|
||||||
|
::v-deep .el-form .el-form-item .el-radio .el-radio__inner {
|
||||||
|
width: 0.36rem;
|
||||||
|
height: 0.36rem;
|
||||||
|
}
|
||||||
|
::v-deep .el-form .el-form-item .el-radio .el-radio__inner::after {
|
||||||
|
width: 0.18rem;
|
||||||
|
height: 0.18rem;
|
||||||
}
|
}
|
||||||
.agreement-checkbox {
|
.agreement-checkbox {
|
||||||
margin-top: 0.15rem;
|
margin: 0.4rem 0 0.6rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
font-size: 0.26rem;
|
|
||||||
/* 增大35%: .18rem * 1.35 = .243rem */
|
|
||||||
line-height: 1.6;
|
|
||||||
color: #666;
|
color: #666;
|
||||||
|
width: 100%;
|
||||||
|
overflow: visible;
|
||||||
}
|
}
|
||||||
.agreement-checkbox ::v-deep .el-checkbox__label {
|
.agreement-checkbox ::v-deep .el-checkbox {
|
||||||
font-size: 0.13rem;
|
display: flex;
|
||||||
/* 增大35%: .12rem * 1.35 = .162rem */
|
align-items: flex-start;
|
||||||
line-height: 1.6;
|
width: 100%;
|
||||||
|
}
|
||||||
|
.agreement-checkbox ::v-deep .el-checkbox .el-checkbox__label {
|
||||||
color: #666;
|
color: #666;
|
||||||
|
padding-left: 0.16rem;
|
||||||
|
white-space: normal;
|
||||||
|
word-wrap: break-word;
|
||||||
|
word-break: break-word;
|
||||||
|
overflow-wrap: break-word;
|
||||||
|
width: calc(100% - 0.48rem);
|
||||||
}
|
}
|
||||||
.agreement-checkbox span {
|
.agreement-checkbox ::v-deep .el-checkbox .el-checkbox__label .agreement-text span {
|
||||||
color: #275aff;
|
color: #275aff;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
|
margin: 0 0.08rem;
|
||||||
|
white-space: normal;
|
||||||
|
}
|
||||||
|
.agreement-checkbox ::v-deep .el-checkbox .el-checkbox__inner {
|
||||||
|
flex-shrink: 0;
|
||||||
|
width: 0.32rem;
|
||||||
|
height: 0.32rem;
|
||||||
|
border-radius: 0.08rem;
|
||||||
|
margin-top: 0.04rem;
|
||||||
|
}
|
||||||
|
.agreement-checkbox ::v-deep .el-checkbox .el-checkbox__inner::after {
|
||||||
|
border-width: 0.04rem;
|
||||||
|
left: 0.1rem;
|
||||||
|
top: 0.04rem;
|
||||||
}
|
}
|
||||||
.qrcode-section {
|
.qrcode-section {
|
||||||
margin-top: 0.2rem;
|
margin: 0.4rem 0 0.6rem;
|
||||||
padding: 0.15rem;
|
padding: 0.4rem;
|
||||||
background: #f8f9fa;
|
background: #f8f9ff;
|
||||||
border-radius: 0.06rem;
|
border-radius: 0.32rem;
|
||||||
border: 1px solid #eee;
|
border: 1px solid #e8edff;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
.qrcode-section img {
|
.qrcode-section img {
|
||||||
width: 1.2rem;
|
width: 3.2rem;
|
||||||
height: 1.2rem;
|
height: 3.2rem;
|
||||||
object-fit: contain;
|
object-fit: contain;
|
||||||
margin-right: 0.15rem;
|
margin-bottom: 0.4rem;
|
||||||
|
border-radius: 0.16rem;
|
||||||
|
box-shadow: 0 0.08rem 0.32rem rgba(0, 0, 0, 0.1);
|
||||||
}
|
}
|
||||||
.qrcode-section span {
|
.qrcode-section span {
|
||||||
font-size: 0.1755rem;
|
font-size: 0.28rem;
|
||||||
/* 增大35%: .13rem * 1.35 = .1755rem */
|
|
||||||
color: #666;
|
color: #666;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
}
|
}
|
||||||
.dialog-footer ::v-deep .el-button {
|
.dialog-footer ::v-deep .el-button {
|
||||||
min-width: 1rem;
|
min-width: 2.4rem;
|
||||||
font-size: 0.189rem;
|
height: 0.88rem;
|
||||||
/* 增大35%: .14rem * 1.35 = .189rem */
|
font-size: 0.32rem;
|
||||||
border-radius: 0.04rem;
|
border-radius: 0.44rem;
|
||||||
|
padding: 0 0.8rem;
|
||||||
|
font-weight: 500;
|
||||||
|
border: none;
|
||||||
|
background: linear-gradient(135deg, #275aff 0%, #5a7dff 100%);
|
||||||
|
box-shadow: 0 0.08rem 0.32rem rgba(39, 90, 255, 0.3);
|
||||||
|
transition: all 0.3s;
|
||||||
|
}
|
||||||
|
.dialog-footer ::v-deep .el-button:hover {
|
||||||
|
transform: translateY(-0.04rem);
|
||||||
|
box-shadow: 0 0.16rem 0.48rem rgba(39, 90, 255, 0.4);
|
||||||
|
}
|
||||||
|
.dialog-footer ::v-deep .el-button:active {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
.dialog-footer ::v-deep .el-button .el-icon-loading {
|
||||||
|
font-size: 0.32rem;
|
||||||
|
}
|
||||||
|
:deep(.el-message) {
|
||||||
|
font-size: 0.32rem !important;
|
||||||
|
min-width: auto !important;
|
||||||
|
padding: 0.24rem 0.4rem !important;
|
||||||
|
border-radius: 0.32rem !important;
|
||||||
|
box-shadow: 0 0.16rem 0.48rem rgba(0, 0, 0, 0.15) !important;
|
||||||
|
border: none !important;
|
||||||
|
}
|
||||||
|
:deep(.el-message__content) {
|
||||||
|
font-size: 0.32rem !important;
|
||||||
|
line-height: 1.5 !important;
|
||||||
|
}
|
||||||
|
:deep(.el-message--success) {
|
||||||
|
background: linear-gradient(135deg, #e1f3d8 0%, #f0f9eb 100%) !important;
|
||||||
|
}
|
||||||
|
:deep(.el-message--success) .el-message__content {
|
||||||
|
color: #67c23a !important;
|
||||||
|
}
|
||||||
|
:deep(.el-message--error) {
|
||||||
|
background: linear-gradient(135deg, #fde2e2 0%, #fef0f0 100%) !important;
|
||||||
|
}
|
||||||
|
:deep(.el-message--error) .el-message__content {
|
||||||
|
color: #f56c6c !important;
|
||||||
|
}
|
||||||
|
:deep(.el-message--warning) {
|
||||||
|
background: linear-gradient(135deg, #faecd8 0%, #fdf6ec 100%) !important;
|
||||||
|
}
|
||||||
|
:deep(.el-message--warning) .el-message__content {
|
||||||
|
color: #e6a23c !important;
|
||||||
}
|
}
|
||||||
@media screen and (max-width: 750px) {
|
@media screen and (max-width: 750px) {
|
||||||
|
.dialog-tit {
|
||||||
|
font-size: 0.36rem;
|
||||||
|
padding: 0.16rem 0 0.32rem;
|
||||||
|
}
|
||||||
|
.dialog-tit .pc-tip i {
|
||||||
|
font-size: 0.38rem;
|
||||||
|
}
|
||||||
|
.dialog-tit .pc-tip span {
|
||||||
|
font-size: 0.32rem;
|
||||||
|
}
|
||||||
|
.url_box {
|
||||||
|
font-size: 0.28rem;
|
||||||
|
}
|
||||||
|
.url-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.url-container .url {
|
||||||
|
width: 100%;
|
||||||
|
padding: 0.1rem 0.2rem;
|
||||||
|
font-size: 0.28rem;
|
||||||
|
margin-top: 0.1rem;
|
||||||
|
}
|
||||||
|
.url-container .url .copy-hint {
|
||||||
|
font-size: 0.22rem;
|
||||||
|
}
|
||||||
|
.url-container .tooltip {
|
||||||
|
font-size: 0.2rem;
|
||||||
|
padding: 0.06rem 0.12rem;
|
||||||
|
transform: translateX(-50%) translateY(-0.12rem);
|
||||||
|
}
|
||||||
::v-deep .product-consult-dialog.el-dialog {
|
::v-deep .product-consult-dialog.el-dialog {
|
||||||
width: 90% !important;
|
width: 90% !important;
|
||||||
margin-top: 10vh !important;
|
margin-top: 10vh !important;
|
||||||
|
border-radius: 0.24rem;
|
||||||
}
|
}
|
||||||
::v-deep .product-consult-dialog.el-dialog .el-dialog__header {
|
::v-deep .product-consult-dialog.el-dialog .el-dialog__header {
|
||||||
padding: 0.15rem 0.2rem 0.08rem;
|
padding: 0.32rem 0.4rem 0.24rem;
|
||||||
|
}
|
||||||
|
::v-deep .product-consult-dialog.el-dialog .el-dialog__header .el-dialog__title {
|
||||||
|
font-size: 0.36rem;
|
||||||
}
|
}
|
||||||
::v-deep .product-consult-dialog.el-dialog .el-dialog__body {
|
::v-deep .product-consult-dialog.el-dialog .el-dialog__body {
|
||||||
padding: 0.15rem 0.2rem;
|
padding: 0.2rem 0.4rem;
|
||||||
max-height: 60vh;
|
|
||||||
}
|
}
|
||||||
.url-container {
|
::v-deep .product-consult-dialog.el-dialog .el-dialog__footer {
|
||||||
display: block;
|
padding: 0.32rem 0.4rem;
|
||||||
margin-top: 0.05rem;
|
|
||||||
}
|
}
|
||||||
.url-container .url {
|
::v-deep .el-form .el-form-item {
|
||||||
display: inline-flex;
|
margin-bottom: 0.32rem;
|
||||||
align-items: center;
|
|
||||||
padding: 0.06rem 0.12rem;
|
|
||||||
font-size: 0.297rem;
|
|
||||||
/* 增大35%: .22rem * 1.35 = .297rem */
|
|
||||||
}
|
}
|
||||||
.url-container .url .copy-hint {
|
::v-deep .el-form .el-form-item .el-form-item__label {
|
||||||
font-size: 0.162rem;
|
font-size: 0.28rem;
|
||||||
/* 增大35%: .12rem * 1.35 = .162rem */
|
|
||||||
margin-left: 0.08rem;
|
|
||||||
}
|
}
|
||||||
.url-container .tooltip {
|
::v-deep .el-form .el-form-item .el-input .el-input__inner,
|
||||||
font-size: 0.135rem;
|
::v-deep .el-form .el-form-item .el-textarea .el-input__inner,
|
||||||
/* 增大35%: .1rem * 1.35 = .135rem */
|
::v-deep .el-form .el-form-item .el-input .el-textarea__inner,
|
||||||
padding: 0.03rem 0.06rem;
|
::v-deep .el-form .el-form-item .el-textarea .el-textarea__inner {
|
||||||
|
font-size: 0.28rem;
|
||||||
|
padding: 0.2rem 0.24rem;
|
||||||
|
}
|
||||||
|
::v-deep .el-form .el-form-item .el-radio .el-radio__label {
|
||||||
|
font-size: 0.28rem;
|
||||||
|
}
|
||||||
|
.agreement-checkbox {
|
||||||
|
margin: 0.32rem 0 0.4rem;
|
||||||
|
}
|
||||||
|
.agreement-checkbox ::v-deep .el-checkbox .el-checkbox__label {
|
||||||
|
font-size: 0.24rem !important;
|
||||||
|
padding-left: 0.12rem;
|
||||||
|
}
|
||||||
|
.agreement-checkbox ::v-deep .el-checkbox .el-checkbox__label .agreement-text {
|
||||||
|
font-size: 0.24rem !important;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
.agreement-checkbox ::v-deep .el-checkbox .el-checkbox__inner {
|
||||||
|
width: 0.28rem;
|
||||||
|
height: 0.28rem;
|
||||||
|
margin-top: 0.02rem;
|
||||||
|
}
|
||||||
|
.agreement-checkbox ::v-deep .el-checkbox .el-checkbox__inner::after {
|
||||||
|
left: 0.08rem;
|
||||||
|
top: 0.02rem;
|
||||||
|
border-width: 0.03rem;
|
||||||
}
|
}
|
||||||
.qrcode-section {
|
.qrcode-section {
|
||||||
flex-direction: column;
|
padding: 0.32rem;
|
||||||
text-align: center;
|
margin: 0.32rem 0 0.4rem;
|
||||||
}
|
}
|
||||||
.qrcode-section img {
|
.qrcode-section img {
|
||||||
margin-right: 0;
|
width: 2.4rem;
|
||||||
margin-bottom: 0.1rem;
|
height: 2.4rem;
|
||||||
|
margin-bottom: 0.32rem;
|
||||||
|
}
|
||||||
|
.qrcode-section span {
|
||||||
|
font-size: 0.24rem;
|
||||||
|
}
|
||||||
|
.dialog-footer ::v-deep .el-button {
|
||||||
|
min-width: 2rem;
|
||||||
|
height: 0.8rem;
|
||||||
|
font-size: 0.28rem;
|
||||||
|
padding: 0 0.6rem;
|
||||||
|
}
|
||||||
|
:deep(.el-message) {
|
||||||
|
font-size: 0.28rem !important;
|
||||||
|
padding: 0.2rem 0.32rem !important;
|
||||||
|
}
|
||||||
|
:deep(.el-message__content) {
|
||||||
|
font-size: 0.28rem !important;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
:deep(.el-message) {
|
|
||||||
font-size: 0.216rem !important;
|
|
||||||
/* 增大35%: .16rem * 1.35 = .216rem */
|
|
||||||
min-width: auto !important;
|
|
||||||
padding: 0.12rem 0.2rem !important;
|
|
||||||
border-radius: 0.08rem !important;
|
|
||||||
}
|
|
||||||
:deep(.el-message__content) {
|
|
||||||
font-size: 0.216rem !important;
|
|
||||||
/* 增大35%: .16rem * 1.35 = .216rem */
|
|
||||||
line-height: 1.4 !important;
|
|
||||||
}
|
|
||||||
:deep(.el-message--success) {
|
|
||||||
background-color: #f0f9eb !important;
|
|
||||||
border-color: #e1f3d8 !important;
|
|
||||||
}
|
|
||||||
:deep(.el-message--success .el-message__content) {
|
|
||||||
color: #67c23a !important;
|
|
||||||
}
|
}
|
||||||
@media screen and (min-width: 751px) and (max-width: 1200px) {
|
@media screen and (min-width: 751px) and (max-width: 1200px) {
|
||||||
::v-deep .product-consult-dialog.el-dialog {
|
::v-deep .product-consult-dialog.el-dialog {
|
||||||
width: 70% !important;
|
width: 70% !important;
|
||||||
}
|
}
|
||||||
|
.agreement-checkbox ::v-deep .el-checkbox .el-checkbox__label {
|
||||||
|
font-size: 0.28rem !important;
|
||||||
|
}
|
||||||
|
.agreement-checkbox ::v-deep .el-checkbox .el-checkbox__label .agreement-text {
|
||||||
|
font-size: 0.28rem !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 750px) {
|
||||||
|
.url,
|
||||||
|
.el-input__inner,
|
||||||
|
.el-textarea__inner,
|
||||||
|
.el-radio__inner,
|
||||||
|
.el-checkbox__inner,
|
||||||
|
.el-button {
|
||||||
|
cursor: pointer;
|
||||||
|
-webkit-tap-highlight-color: transparent;
|
||||||
|
}
|
||||||
|
.el-input__inner,
|
||||||
|
.el-textarea__inner {
|
||||||
|
font-size: 16px !important;
|
||||||
|
}
|
||||||
|
.product-consult-dialog {
|
||||||
|
pointer-events: auto !important;
|
||||||
|
}
|
||||||
|
::v-deep .el-dialog__wrapper {
|
||||||
|
-webkit-overflow-scrolling: touch;
|
||||||
|
}
|
||||||
|
::v-deep .el-form-item {
|
||||||
|
margin-bottom: 0.32rem !important;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,36 +1,96 @@
|
|||||||
.dialog-tit{
|
.check-tit {
|
||||||
font-size: .405rem; /* 增大35%: .3rem * 1.35 = .405rem */
|
font-size: 0.16rem;
|
||||||
color: #000;
|
color: #333;
|
||||||
padding: .2rem 0;
|
line-height: .1rem;
|
||||||
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
.url_box{
|
|
||||||
font-size: .24rem;
|
.url_btn {
|
||||||
margin-top: .1rem;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
justify-content: flex-end;
|
||||||
|
margin-left: 0.1rem;
|
||||||
|
|
||||||
|
.copy-hint {
|
||||||
|
font-size: 0.26rem;
|
||||||
|
color: #000;
|
||||||
|
margin-top: .16rem;
|
||||||
|
padding: 0.04rem 0.12rem;
|
||||||
|
border-radius: 0.12rem;
|
||||||
|
border: 1px solid #000;
|
||||||
|
transition: all 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.url:hover & {
|
||||||
|
color: #275aff;
|
||||||
|
border-color: #275aff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.url.copied & {
|
||||||
|
color: #67c23a;
|
||||||
|
border-color: #67c23a;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 基础样式
|
||||||
|
* {
|
||||||
|
touch-action: manipulation;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 头部样式
|
||||||
|
.dialog-tit {
|
||||||
|
font-size: 0.4rem;
|
||||||
|
color: #333;
|
||||||
|
padding: 0.2rem 0 0.4rem;
|
||||||
|
border-bottom: 1px solid #f0f0f0;
|
||||||
|
margin-bottom: 0.4rem;
|
||||||
|
|
||||||
|
.pc-tip {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 0.3rem;
|
||||||
|
color: #ff6b35;
|
||||||
|
font-weight: 500;
|
||||||
|
|
||||||
|
i {
|
||||||
|
margin-right: 0.2rem;
|
||||||
|
font-size: 0.42rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
font-size: 0.36rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.url_box {
|
||||||
|
font-size: 0.32rem;
|
||||||
|
margin-top: 0.2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.url-container {
|
.url-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
// position: relative;
|
align-items: center;
|
||||||
// cursor: pointer;
|
position: relative;
|
||||||
|
|
||||||
.url {
|
.url {
|
||||||
position: relative;
|
display: inline-flex;
|
||||||
display: inline-block;
|
align-items: center;
|
||||||
color: #275aff;
|
color: #275aff;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
padding: .04rem .1rem;
|
padding: 0.12rem 0.24rem;
|
||||||
border-radius: .04rem;
|
border-radius: 0.24rem;
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
background: #f5f7ff;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: #e8edff;
|
background-color: #e8edff;
|
||||||
border-color: #275aff;
|
border-color: #275aff;
|
||||||
transform: translateY(-1px);
|
transform: translateY(-0.04rem);
|
||||||
box-shadow: 0 2px 8px rgba(39, 90, 255, 0.1);
|
box-shadow: 0 0.08rem 0.32rem rgba(39, 90, 255, 0.15);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.copied {
|
&.copied {
|
||||||
@ -44,40 +104,19 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.copy-hint {
|
|
||||||
display: inline-block;
|
|
||||||
margin-left: .1rem;
|
|
||||||
font-size: .189rem; /* 增大35%: .14rem * 1.35 = .189rem */
|
|
||||||
color: #999;
|
|
||||||
background-color: #fff;
|
|
||||||
padding: .02rem .06rem;
|
|
||||||
border-radius: .02rem;
|
|
||||||
border: 1px solid #eee;
|
|
||||||
transition: all 0.2s;
|
|
||||||
|
|
||||||
.url:hover & {
|
|
||||||
color: #275aff;
|
|
||||||
border-color: #275aff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.url.copied & {
|
|
||||||
content: '✓ 已复制';
|
|
||||||
color: #67c23a;
|
|
||||||
border-color: #67c23a;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.tooltip {
|
.tooltip {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 100%;
|
bottom: 100%;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translateX(-50%) translateY(-8px);
|
transform: translateX(-50%) translateY(-0.16rem);
|
||||||
background-color: rgba(0, 0, 0, 0.8);
|
background-color: rgba(0, 0, 0, 0.85);
|
||||||
color: white;
|
color: white;
|
||||||
font-size: .162rem; /* 增大35%: .12rem * 1.35 = .162rem */
|
font-size: 0.24rem;
|
||||||
padding: .04rem .08rem;
|
padding: 0.08rem 0.16rem;
|
||||||
border-radius: .04rem;
|
border-radius: 0.16rem;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
z-index: 1000;
|
z-index: 1000;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
@ -90,9 +129,9 @@
|
|||||||
top: 100%;
|
top: 100%;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
border-width: .04rem;
|
border-width: 0.08rem;
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
border-color: rgba(0, 0, 0, 0.8) transparent transparent transparent;
|
border-color: rgba(0, 0, 0, 0.85) transparent transparent transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.tooltip-visible {
|
&.tooltip-visible {
|
||||||
@ -102,56 +141,65 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 弹窗样式优化
|
// 表单样式优化
|
||||||
::v-deep .product-consult-dialog {
|
::v-deep .product-consult-dialog {
|
||||||
&.el-dialog {
|
&.el-dialog {
|
||||||
width: var(--dialog-width, 6rem) !important;
|
border-radius: 0.32rem;
|
||||||
max-width: 90%;
|
overflow: hidden;
|
||||||
border-radius: .08rem;
|
box-shadow: 0 0.4rem 1.6rem rgba(0, 0, 0, 0.15);
|
||||||
z-index: 9999;
|
|
||||||
|
|
||||||
.el-dialog__header {
|
.el-dialog__header {
|
||||||
padding: .2rem .3rem .1rem;
|
padding: 0.4rem 0.6rem 0.3rem;
|
||||||
border-bottom: 1px solid #eee;
|
border-bottom: 1px solid #f0f0f0;
|
||||||
|
background: linear-gradient(135deg, #f8f9ff 0%, #ffffff 100%);
|
||||||
|
margin-bottom: 0;
|
||||||
|
|
||||||
.el-dialog__title {
|
.el-dialog__title {
|
||||||
font-size: .243rem; /* 增大35%: .18rem * 1.35 = .243rem */
|
font-size: 0.4rem;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #333;
|
color: #1a1a1a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-dialog__headerbtn {
|
||||||
|
top: 0.4rem;
|
||||||
|
right: 0.4rem;
|
||||||
|
|
||||||
|
.el-dialog__close {
|
||||||
|
font-size: 0.36rem;
|
||||||
|
color: #999;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: #275aff;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.el-dialog__body {
|
.el-dialog__body {
|
||||||
padding: .2rem .3rem;
|
padding: 0.2rem .6rem;
|
||||||
max-height: 65vh;
|
max-height: 70vh;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-dialog__footer {
|
.el-dialog__footer {
|
||||||
padding: .15rem .3rem .2rem;
|
padding: 0.4rem 0.6rem;
|
||||||
border-top: 1px solid #eee;
|
border-top: 1px solid #f0f0f0;
|
||||||
display: flex;
|
background: #fafbfc;
|
||||||
justify-content: flex-end;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 表单样式优化
|
// 表单项样式
|
||||||
::v-deep .el-form {
|
::v-deep .el-form {
|
||||||
.el-form-item {
|
.el-form-item {
|
||||||
margin-bottom: .4rem;
|
margin-bottom: 0.4rem;
|
||||||
|
|
||||||
&:last-child {
|
|
||||||
margin-bottom: .1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-form-item__label {
|
.el-form-item__label {
|
||||||
padding-bottom: .06rem;
|
padding-bottom: 0.12rem;
|
||||||
font-size: .27rem; /* 增大35%: .2rem * 1.35 = .27rem */
|
font-size: 0.32rem;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
color: #333;
|
color: #333;
|
||||||
line-height: 1.4;
|
line-height: 1.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-input,
|
.el-input,
|
||||||
@ -159,157 +207,358 @@
|
|||||||
|
|
||||||
.el-input__inner,
|
.el-input__inner,
|
||||||
.el-textarea__inner {
|
.el-textarea__inner {
|
||||||
font-size: .189rem; /* 增大35%: .14rem * 1.35 = .189rem */
|
font-size: 0.32rem;
|
||||||
border: 1px solid #dcdfe6;
|
border: 1px solid #dcdfe6;
|
||||||
border-radius: .04rem;
|
border-radius: 0.24rem;
|
||||||
transition: border-color 0.2s;
|
transition: all 0.3s;
|
||||||
|
padding: 0.24rem 0.32rem;
|
||||||
|
color: #333;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-color: #c0c4cc;
|
||||||
|
}
|
||||||
|
|
||||||
&:focus {
|
&:focus {
|
||||||
border-color: #409eff;
|
border-color: #275aff;
|
||||||
|
box-shadow: 0 0 0 0.04rem rgba(39, 90, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
&::placeholder {
|
||||||
|
color: #999;
|
||||||
|
font-size: 0.28rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-textarea__inner {
|
.el-textarea__inner {
|
||||||
min-height: .9rem !important;
|
min-height: 2.4rem;
|
||||||
|
line-height: 1.5;
|
||||||
resize: vertical;
|
resize: vertical;
|
||||||
padding: .08rem .12rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-radio {
|
.el-radio {
|
||||||
margin-right: .2rem;
|
margin-right: 0.6rem;
|
||||||
|
|
||||||
.el-radio__label {
|
.el-radio__label {
|
||||||
font-size: .189rem; /* 增大35%: .14rem * 1.35 = .189rem */
|
font-size: 0.32rem;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-radio__inner {
|
||||||
|
width: 0.36rem;
|
||||||
|
height: 0.36rem;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
width: 0.18rem;
|
||||||
|
height: 0.18rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 协议复选框样式
|
// 协议复选框样式 - 修改字体大小和防止横向滚动条
|
||||||
.agreement-checkbox {
|
.agreement-checkbox {
|
||||||
margin-top: .15rem;
|
margin: 0.4rem 0 0.6rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
font-size: .26rem; /* 增大35%: .18rem * 1.35 = .243rem */
|
|
||||||
line-height: 1.6;
|
|
||||||
color: #666;
|
color: #666;
|
||||||
|
width: 100%;
|
||||||
|
overflow: visible;
|
||||||
|
|
||||||
::v-deep .el-checkbox__label {
|
::v-deep .el-checkbox {
|
||||||
font-size: .13rem; /* 增大35%: .12rem * 1.35 = .162rem */
|
display: flex;
|
||||||
line-height: 1.6;
|
align-items: flex-start;
|
||||||
color: #666;
|
width: 100%;
|
||||||
}
|
|
||||||
|
|
||||||
span {
|
.el-checkbox__label {
|
||||||
color: #275aff;
|
color: #666;
|
||||||
font-weight: 500;
|
padding-left: 0.16rem;
|
||||||
|
white-space: normal;
|
||||||
|
word-wrap: break-word;
|
||||||
|
word-break: break-word;
|
||||||
|
overflow-wrap: break-word;
|
||||||
|
width: calc(100% - 0.48rem);
|
||||||
|
|
||||||
|
.agreement-text {
|
||||||
|
span {
|
||||||
|
color: #275aff;
|
||||||
|
font-weight: 500;
|
||||||
|
margin: 0 0.08rem;
|
||||||
|
white-space: normal;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-checkbox__inner {
|
||||||
|
flex-shrink: 0;
|
||||||
|
width: 0.32rem;
|
||||||
|
height: 0.32rem;
|
||||||
|
border-radius: 0.08rem;
|
||||||
|
margin-top: 0.04rem;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
border-width: 0.04rem;
|
||||||
|
left: 0.1rem;
|
||||||
|
top: 0.04rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 二维码区域样式
|
// 二维码区域样式
|
||||||
.qrcode-section {
|
.qrcode-section {
|
||||||
margin-top: .2rem;
|
margin: 0.4rem 0 0.6rem;
|
||||||
padding: .15rem;
|
padding: 0.4rem;
|
||||||
background: #f8f9fa;
|
background: #f8f9ff;
|
||||||
border-radius: .06rem;
|
border-radius: 0.32rem;
|
||||||
border: 1px solid #eee;
|
border: 1px solid #e8edff;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
width: 1.2rem;
|
width: 3.2rem;
|
||||||
height: 1.2rem;
|
height: 3.2rem;
|
||||||
object-fit: contain;
|
object-fit: contain;
|
||||||
margin-right: .15rem;
|
margin-bottom: 0.4rem;
|
||||||
|
border-radius: 0.16rem;
|
||||||
|
box-shadow: 0 0.08rem 0.32rem rgba(0, 0, 0, 0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
span {
|
span {
|
||||||
font-size: .1755rem; /* 增大35%: .13rem * 1.35 = .1755rem */
|
font-size: 0.28rem;
|
||||||
color: #666;
|
color: #666;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 提交按钮样式
|
// 提交按钮样式 - 移除禁用状态
|
||||||
.dialog-footer {
|
.dialog-footer {
|
||||||
::v-deep .el-button {
|
::v-deep .el-button {
|
||||||
min-width: 1rem;
|
min-width: 2.4rem;
|
||||||
font-size: .189rem; /* 增大35%: .14rem * 1.35 = .189rem */
|
height: 0.88rem;
|
||||||
border-radius: .04rem;
|
font-size: 0.32rem;
|
||||||
|
border-radius: 0.44rem;
|
||||||
|
padding: 0 0.8rem;
|
||||||
|
font-weight: 500;
|
||||||
|
border: none;
|
||||||
|
background: linear-gradient(135deg, #275aff 0%, #5a7dff 100%);
|
||||||
|
box-shadow: 0 0.08rem 0.32rem rgba(39, 90, 255, 0.3);
|
||||||
|
transition: all 0.3s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
transform: translateY(-0.04rem);
|
||||||
|
box-shadow: 0 0.16rem 0.48rem rgba(39, 90, 255, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-icon-loading {
|
||||||
|
font-size: 0.32rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 消息提示样式优化
|
||||||
|
:deep(.el-message) {
|
||||||
|
font-size: 0.32rem !important;
|
||||||
|
min-width: auto !important;
|
||||||
|
padding: 0.24rem 0.4rem !important;
|
||||||
|
border-radius: 0.32rem !important;
|
||||||
|
box-shadow: 0 0.16rem 0.48rem rgba(0, 0, 0, 0.15) !important;
|
||||||
|
border: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-message__content) {
|
||||||
|
font-size: 0.32rem !important;
|
||||||
|
line-height: 1.5 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-message--success) {
|
||||||
|
background: linear-gradient(135deg, #e1f3d8 0%, #f0f9eb 100%) !important;
|
||||||
|
|
||||||
|
.el-message__content {
|
||||||
|
color: #67c23a !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-message--error) {
|
||||||
|
background: linear-gradient(135deg, #fde2e2 0%, #fef0f0 100%) !important;
|
||||||
|
|
||||||
|
.el-message__content {
|
||||||
|
color: #f56c6c !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-message--warning) {
|
||||||
|
background: linear-gradient(135deg, #faecd8 0%, #fdf6ec 100%) !important;
|
||||||
|
|
||||||
|
.el-message__content {
|
||||||
|
color: #e6a23c !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 响应式适配
|
// 响应式适配
|
||||||
@media screen and (max-width: 750px) {
|
@media screen and (max-width: 750px) {
|
||||||
::v-deep .product-consult-dialog {
|
.dialog-tit {
|
||||||
&.el-dialog {
|
font-size: 0.36rem;
|
||||||
width: 90% !important;
|
padding: 0.16rem 0 0.32rem;
|
||||||
margin-top: 10vh !important;
|
|
||||||
|
|
||||||
.el-dialog__header {
|
.pc-tip {
|
||||||
padding: .15rem .2rem .08rem;
|
i {
|
||||||
|
font-size: 0.38rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-dialog__body {
|
span {
|
||||||
padding: .15rem .2rem;
|
font-size: 0.32rem;
|
||||||
max-height: 60vh;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.url_box {
|
||||||
|
font-size: 0.28rem;
|
||||||
|
}
|
||||||
|
|
||||||
.url-container {
|
.url-container {
|
||||||
display: block;
|
display: flex;
|
||||||
margin-top: .05rem;
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
.url {
|
.url {
|
||||||
display: inline-flex;
|
width: 100%;
|
||||||
align-items: center;
|
padding: 0.1rem 0.2rem;
|
||||||
padding: .06rem .12rem;
|
font-size: 0.28rem;
|
||||||
font-size: .297rem; /* 增大35%: .22rem * 1.35 = .297rem */
|
margin-top: .1rem;
|
||||||
|
|
||||||
.copy-hint {
|
.copy-hint {
|
||||||
font-size: .162rem; /* 增大35%: .12rem * 1.35 = .162rem */
|
font-size: 0.22rem;
|
||||||
margin-left: .08rem;
|
// padding: 0.03rem 0.08rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.tooltip {
|
.tooltip {
|
||||||
font-size: .135rem; /* 增大35%: .1rem * 1.35 = .135rem */
|
font-size: 0.2rem;
|
||||||
padding: .03rem .06rem;
|
padding: 0.06rem 0.12rem;
|
||||||
|
transform: translateX(-50%) translateY(-0.12rem);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .product-consult-dialog {
|
||||||
|
&.el-dialog {
|
||||||
|
width: 90% !important;
|
||||||
|
margin-top: 10vh !important;
|
||||||
|
border-radius: 0.24rem;
|
||||||
|
|
||||||
|
.el-dialog__header {
|
||||||
|
padding: 0.32rem 0.4rem 0.24rem;
|
||||||
|
|
||||||
|
.el-dialog__title {
|
||||||
|
font-size: 0.36rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-dialog__body {
|
||||||
|
padding: 0.2rem .4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-dialog__footer {
|
||||||
|
padding: 0.32rem 0.4rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .el-form {
|
||||||
|
.el-form-item {
|
||||||
|
margin-bottom: 0.32rem;
|
||||||
|
|
||||||
|
.el-form-item__label {
|
||||||
|
font-size: 0.28rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-input,
|
||||||
|
.el-textarea {
|
||||||
|
|
||||||
|
.el-input__inner,
|
||||||
|
.el-textarea__inner {
|
||||||
|
font-size: 0.28rem;
|
||||||
|
padding: 0.2rem 0.24rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-radio {
|
||||||
|
.el-radio__label {
|
||||||
|
font-size: 0.28rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 移动端协议复选框字体调整
|
||||||
|
.agreement-checkbox {
|
||||||
|
margin: 0.32rem 0 0.4rem;
|
||||||
|
|
||||||
|
::v-deep .el-checkbox {
|
||||||
|
.el-checkbox__label {
|
||||||
|
font-size: 0.24rem !important;
|
||||||
|
padding-left: 0.12rem;
|
||||||
|
|
||||||
|
.agreement-text {
|
||||||
|
font-size: 0.24rem !important;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-checkbox__inner {
|
||||||
|
width: 0.28rem;
|
||||||
|
height: 0.28rem;
|
||||||
|
margin-top: 0.02rem;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
left: 0.08rem;
|
||||||
|
top: 0.02rem;
|
||||||
|
border-width: 0.03rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.qrcode-section {
|
.qrcode-section {
|
||||||
flex-direction: column;
|
padding: 0.32rem;
|
||||||
text-align: center;
|
margin: 0.32rem 0 0.4rem;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
margin-right: 0;
|
width: 2.4rem;
|
||||||
margin-bottom: .1rem;
|
height: 2.4rem;
|
||||||
|
margin-bottom: 0.32rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
font-size: 0.24rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.el-message) {
|
.dialog-footer {
|
||||||
font-size: .216rem !important; /* 增大35%: .16rem * 1.35 = .216rem */
|
::v-deep .el-button {
|
||||||
min-width: auto !important;
|
min-width: 2rem;
|
||||||
padding: .12rem .2rem !important;
|
height: 0.8rem;
|
||||||
border-radius: .08rem !important;
|
font-size: 0.28rem;
|
||||||
}
|
padding: 0 0.6rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
:deep(.el-message__content) {
|
:deep(.el-message) {
|
||||||
font-size: .216rem !important; /* 增大35%: .16rem * 1.35 = .216rem */
|
font-size: 0.28rem !important;
|
||||||
line-height: 1.4 !important;
|
padding: 0.2rem 0.32rem !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
:deep(.el-message--success) {
|
:deep(.el-message__content) {
|
||||||
background-color: #f0f9eb !important;
|
font-size: 0.28rem !important;
|
||||||
border-color: #e1f3d8 !important;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.el-message--success .el-message__content) {
|
|
||||||
color: #67c23a !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (min-width: 751px) and (max-width: 1200px) {
|
@media screen and (min-width: 751px) and (max-width: 1200px) {
|
||||||
@ -318,4 +567,48 @@
|
|||||||
width: 70% !important;
|
width: 70% !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 平板端协议复选框字体
|
||||||
|
.agreement-checkbox {
|
||||||
|
::v-deep .el-checkbox {
|
||||||
|
.el-checkbox__label {
|
||||||
|
font-size: 0.28rem !important;
|
||||||
|
|
||||||
|
.agreement-text {
|
||||||
|
font-size: 0.28rem !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 移动端优化
|
||||||
|
@media screen and (max-width: 750px) {
|
||||||
|
|
||||||
|
.url,
|
||||||
|
.el-input__inner,
|
||||||
|
.el-textarea__inner,
|
||||||
|
.el-radio__inner,
|
||||||
|
.el-checkbox__inner,
|
||||||
|
.el-button {
|
||||||
|
cursor: pointer;
|
||||||
|
-webkit-tap-highlight-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-input__inner,
|
||||||
|
.el-textarea__inner {
|
||||||
|
font-size: 16px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-consult-dialog {
|
||||||
|
pointer-events: auto !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .el-dialog__wrapper {
|
||||||
|
-webkit-overflow-scrolling: touch;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .el-form-item {
|
||||||
|
margin-bottom: 0.32rem !important;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -81,6 +81,8 @@
|
|||||||
background: linear-gradient(135deg, #f0f7ff 0%, #ffffff 100%);
|
background: linear-gradient(135deg, #f0f7ff 0%, #ffffff 100%);
|
||||||
border: 1px solid rgba(39, 90, 255, 0.1);
|
border: 1px solid rgba(39, 90, 255, 0.1);
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
|
position: relative;
|
||||||
|
padding-bottom: 1.2rem;
|
||||||
}
|
}
|
||||||
.base-box .content .item-box:hover,
|
.base-box .content .item-box:hover,
|
||||||
.journey-box .content .item-box:hover,
|
.journey-box .content .item-box:hover,
|
||||||
@ -147,6 +149,8 @@
|
|||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: #d4d6e1;
|
color: #d4d6e1;
|
||||||
margin: 0.15rem 0;
|
margin: 0.15rem 0;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0.6rem;
|
||||||
}
|
}
|
||||||
.base-box .content .item-box .item-price .price,
|
.base-box .content .item-box .item-price .price,
|
||||||
.journey-box .content .item-box .item-price .price,
|
.journey-box .content .item-box .item-price .price,
|
||||||
@ -188,6 +192,9 @@
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
margin-top: auto;
|
margin-top: auto;
|
||||||
|
width: 100%;
|
||||||
|
position: relative;
|
||||||
|
bottom: -0.9rem;
|
||||||
}
|
}
|
||||||
.base-box .content .item-box .item-button .item-button-text,
|
.base-box .content .item-box .item-button .item-button-text,
|
||||||
.journey-box .content .item-box .item-button .item-button-text,
|
.journey-box .content .item-box .item-button .item-button-text,
|
||||||
|
|||||||
@ -87,7 +87,8 @@
|
|||||||
background: linear-gradient(135deg, #f0f7ff 0%, #ffffff 100%);
|
background: linear-gradient(135deg, #f0f7ff 0%, #ffffff 100%);
|
||||||
border: 1px solid rgba(39, 90, 255, 0.1);
|
border: 1px solid rgba(39, 90, 255, 0.1);
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
|
position: relative;
|
||||||
|
padding-bottom: 1.2rem;
|
||||||
&:hover {
|
&:hover {
|
||||||
box-shadow: 0 .04rem .16rem rgba(39, 90, 255, 0.12);
|
box-shadow: 0 .04rem .16rem rgba(39, 90, 255, 0.12);
|
||||||
transform: translateY(-2px);
|
transform: translateY(-2px);
|
||||||
@ -144,7 +145,8 @@
|
|||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: #d4d6e1;
|
color: #d4d6e1;
|
||||||
margin: 0.15rem 0;
|
margin: 0.15rem 0;
|
||||||
|
position: absolute;
|
||||||
|
bottom: .6rem;
|
||||||
.price {
|
.price {
|
||||||
font-size: .38rem;
|
font-size: .38rem;
|
||||||
color: #f52220;
|
color: #f52220;
|
||||||
@ -180,7 +182,9 @@
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
margin-top: auto;
|
margin-top: auto;
|
||||||
|
width: 100%;
|
||||||
|
position: relative;
|
||||||
|
bottom: -0.9rem;
|
||||||
.item-button-text {
|
.item-button-text {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-size: 0.182rem; /* 增大30%: 0.14rem * 1.3 = 0.182rem */
|
font-size: 0.182rem; /* 增大30%: 0.14rem * 1.3 = 0.182rem */
|
||||||
|
|||||||
@ -355,7 +355,7 @@ export default {
|
|||||||
background-color: #000;
|
background-color: #000;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
width: 2.8rem;
|
width: 2.8rem;
|
||||||
font-size: .2rem;
|
font-size: .18rem;
|
||||||
padding: .1rem .2rem;
|
padding: .1rem .2rem;
|
||||||
border-radius: .2rem;
|
border-radius: .2rem;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user