This commit is contained in:
hrx 2025-12-22 15:18:52 +08:00
parent d824aa43f0
commit 47e4e9718a
6 changed files with 1604 additions and 378 deletions

File diff suppressed because it is too large Load Diff

View File

@ -1,34 +1,83 @@
.dialog-tit {
font-size: 0.405rem;
/* 增大35%: .3rem * 1.35 = .405rem */
color: #000;
padding: 0.2rem 0;
.check-tit {
font-size: 0.16rem;
color: #333;
line-height: 0.1rem;
font-weight: 600;
}
.url_box {
font-size: 0.24rem;
margin-top: 0.1rem;
.url_btn {
display: flex;
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;
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 {
display: flex;
align-items: center;
position: relative;
}
.url-container .url {
position: relative;
display: inline-block;
display: inline-flex;
align-items: center;
color: #275aff;
text-decoration: none;
padding: 0.04rem 0.1rem;
border-radius: 0.04rem;
padding: 0.12rem 0.24rem;
border-radius: 0.24rem;
transition: all 0.3s ease;
cursor: pointer;
user-select: none;
border: 1px solid transparent;
background: #f5f7ff;
}
.url-container .url:hover {
background-color: #e8edff;
border-color: #275aff;
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(39, 90, 255, 0.1);
transform: translateY(-0.04rem);
box-shadow: 0 0.08rem 0.32rem rgba(39, 90, 255, 0.15);
}
.url-container .url.copied {
background-color: #e1f3d8;
@ -39,38 +88,16 @@
background-color: #d1edc4;
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 {
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%) translateY(-8px);
background-color: rgba(0, 0, 0, 0.8);
transform: translateX(-50%) translateY(-0.16rem);
background-color: rgba(0, 0, 0, 0.85);
color: white;
font-size: 0.162rem;
/* 增大35%: .12rem * 1.35 = .162rem */
padding: 0.04rem 0.08rem;
border-radius: 0.04rem;
font-size: 0.24rem;
padding: 0.08rem 0.16rem;
border-radius: 0.16rem;
white-space: nowrap;
z-index: 1000;
opacity: 0;
@ -83,192 +110,374 @@
top: 100%;
left: 50%;
transform: translateX(-50%);
border-width: 0.04rem;
border-width: 0.08rem;
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 {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
::v-deep .product-consult-dialog.el-dialog {
width: var(--dialog-width, 6rem) !important;
max-width: 90%;
border-radius: 0.08rem;
z-index: 9999;
border-radius: 0.32rem;
overflow: hidden;
box-shadow: 0 0.4rem 1.6rem rgba(0, 0, 0, 0.15);
}
::v-deep .product-consult-dialog.el-dialog .el-dialog__header {
padding: 0.2rem 0.3rem 0.1rem;
border-bottom: 1px solid #eee;
padding: 0.4rem 0.6rem 0.3rem;
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 {
font-size: 0.243rem;
/* 增大35%: .18rem * 1.35 = .243rem */
font-size: 0.4rem;
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 {
padding: 0.2rem 0.3rem;
max-height: 65vh;
padding: 0.2rem 0.6rem;
max-height: 70vh;
overflow-y: auto;
}
::v-deep .product-consult-dialog.el-dialog .el-dialog__footer {
padding: 0.15rem 0.3rem 0.2rem;
border-top: 1px solid #eee;
display: flex;
justify-content: flex-end;
padding: 0.4rem 0.6rem;
border-top: 1px solid #f0f0f0;
background: #fafbfc;
}
::v-deep .el-form .el-form-item {
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 {
padding-bottom: 0.06rem;
font-size: 0.27rem;
/* 增大35%: .2rem * 1.35 = .27rem */
padding-bottom: 0.12rem;
font-size: 0.32rem;
font-weight: 500;
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-textarea .el-input__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 {
font-size: 0.189rem;
/* 增大35%: .14rem * 1.35 = .189rem */
font-size: 0.32rem;
border: 1px solid #dcdfe6;
border-radius: 0.04rem;
transition: border-color 0.2s;
border-radius: 0.24rem;
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-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-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 {
min-height: 0.9rem !important;
min-height: 2.4rem;
line-height: 1.5;
resize: vertical;
padding: 0.08rem 0.12rem;
}
::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 {
font-size: 0.189rem;
/* 增大35%: .14rem * 1.35 = .189rem */
font-size: 0.32rem;
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 {
margin-top: 0.15rem;
margin: 0.4rem 0 0.6rem;
display: flex;
align-items: center;
font-size: 0.26rem;
/* 增大35%: .18rem * 1.35 = .243rem */
line-height: 1.6;
color: #666;
width: 100%;
overflow: visible;
}
.agreement-checkbox ::v-deep .el-checkbox__label {
font-size: 0.13rem;
/* 增大35%: .12rem * 1.35 = .162rem */
line-height: 1.6;
.agreement-checkbox ::v-deep .el-checkbox {
display: flex;
align-items: flex-start;
width: 100%;
}
.agreement-checkbox ::v-deep .el-checkbox .el-checkbox__label {
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;
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 {
margin-top: 0.2rem;
padding: 0.15rem;
background: #f8f9fa;
border-radius: 0.06rem;
border: 1px solid #eee;
margin: 0.4rem 0 0.6rem;
padding: 0.4rem;
background: #f8f9ff;
border-radius: 0.32rem;
border: 1px solid #e8edff;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.qrcode-section img {
width: 1.2rem;
height: 1.2rem;
width: 3.2rem;
height: 3.2rem;
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 {
font-size: 0.1755rem;
/* 增大35%: .13rem * 1.35 = .1755rem */
font-size: 0.28rem;
color: #666;
line-height: 1.5;
}
.dialog-footer ::v-deep .el-button {
min-width: 1rem;
font-size: 0.189rem;
/* 增大35%: .14rem * 1.35 = .189rem */
border-radius: 0.04rem;
min-width: 2.4rem;
height: 0.88rem;
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;
}
.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) {
.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 {
width: 90% !important;
margin-top: 10vh !important;
border-radius: 0.24rem;
}
::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 {
padding: 0.15rem 0.2rem;
max-height: 60vh;
padding: 0.2rem 0.4rem;
}
.url-container {
display: block;
margin-top: 0.05rem;
::v-deep .product-consult-dialog.el-dialog .el-dialog__footer {
padding: 0.32rem 0.4rem;
}
.url-container .url {
display: inline-flex;
align-items: center;
padding: 0.06rem 0.12rem;
font-size: 0.297rem;
/* 增大35%: .22rem * 1.35 = .297rem */
::v-deep .el-form .el-form-item {
margin-bottom: 0.32rem;
}
.url-container .url .copy-hint {
font-size: 0.162rem;
/* 增大35%: .12rem * 1.35 = .162rem */
margin-left: 0.08rem;
::v-deep .el-form .el-form-item .el-form-item__label {
font-size: 0.28rem;
}
.url-container .tooltip {
font-size: 0.135rem;
/* 增大35%: .1rem * 1.35 = .135rem */
padding: 0.03rem 0.06rem;
::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-input .el-textarea__inner,
::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 {
flex-direction: column;
text-align: center;
padding: 0.32rem;
margin: 0.32rem 0 0.4rem;
}
.qrcode-section img {
margin-right: 0;
margin-bottom: 0.1rem;
width: 2.4rem;
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) {
::v-deep .product-consult-dialog.el-dialog {
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;
}
}

View File

@ -1,36 +1,96 @@
.dialog-tit{
font-size: .405rem; /* 增大35%: .3rem * 1.35 = .405rem */
color: #000;
padding: .2rem 0;
.check-tit {
font-size: 0.16rem;
color: #333;
line-height: .1rem;
font-weight: 600;
}
.url_box{
font-size: .24rem;
margin-top: .1rem;
.url_btn {
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 {
display: flex;
// position: relative;
// cursor: pointer;
align-items: center;
position: relative;
.url {
position: relative;
display: inline-block;
display: inline-flex;
align-items: center;
color: #275aff;
text-decoration: none;
padding: .04rem .1rem;
border-radius: .04rem;
padding: 0.12rem 0.24rem;
border-radius: 0.24rem;
transition: all 0.3s ease;
cursor: pointer;
user-select: none;
border: 1px solid transparent;
background: #f5f7ff;
&:hover {
background-color: #e8edff;
border-color: #275aff;
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(39, 90, 255, 0.1);
transform: translateY(-0.04rem);
box-shadow: 0 0.08rem 0.32rem rgba(39, 90, 255, 0.15);
}
&.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 {
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%) translateY(-8px);
background-color: rgba(0, 0, 0, 0.8);
transform: translateX(-50%) translateY(-0.16rem);
background-color: rgba(0, 0, 0, 0.85);
color: white;
font-size: .162rem; /* 增大35%: .12rem * 1.35 = .162rem */
padding: .04rem .08rem;
border-radius: .04rem;
font-size: 0.24rem;
padding: 0.08rem 0.16rem;
border-radius: 0.16rem;
white-space: nowrap;
z-index: 1000;
opacity: 0;
@ -90,9 +129,9 @@
top: 100%;
left: 50%;
transform: translateX(-50%);
border-width: .04rem;
border-width: 0.08rem;
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 {
@ -102,56 +141,65 @@
}
}
// 弹窗样式优化
// 表单样式优化
::v-deep .product-consult-dialog {
&.el-dialog {
width: var(--dialog-width, 6rem) !important;
max-width: 90%;
border-radius: .08rem;
z-index: 9999;
border-radius: 0.32rem;
overflow: hidden;
box-shadow: 0 0.4rem 1.6rem rgba(0, 0, 0, 0.15);
.el-dialog__header {
padding: .2rem .3rem .1rem;
border-bottom: 1px solid #eee;
padding: 0.4rem 0.6rem 0.3rem;
border-bottom: 1px solid #f0f0f0;
background: linear-gradient(135deg, #f8f9ff 0%, #ffffff 100%);
margin-bottom: 0;
.el-dialog__title {
font-size: .243rem; /* 增大35%: .18rem * 1.35 = .243rem */
font-size: 0.4rem;
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 {
padding: .2rem .3rem;
max-height: 65vh;
padding: 0.2rem .6rem;
max-height: 70vh;
overflow-y: auto;
}
.el-dialog__footer {
padding: .15rem .3rem .2rem;
border-top: 1px solid #eee;
display: flex;
justify-content: flex-end;
padding: 0.4rem 0.6rem;
border-top: 1px solid #f0f0f0;
background: #fafbfc;
}
}
}
// 表单样式优化
// 表单样式
::v-deep .el-form {
.el-form-item {
margin-bottom: .4rem;
&:last-child {
margin-bottom: .1rem;
}
margin-bottom: 0.4rem;
.el-form-item__label {
padding-bottom: .06rem;
font-size: .27rem; /* 增大35%: .2rem * 1.35 = .27rem */
padding-bottom: 0.12rem;
font-size: 0.32rem;
font-weight: 500;
color: #333;
line-height: 1.4;
line-height: 1.5;
}
.el-input,
@ -159,157 +207,358 @@
.el-input__inner,
.el-textarea__inner {
font-size: .189rem; /* 增大35%: .14rem * 1.35 = .189rem */
font-size: 0.32rem;
border: 1px solid #dcdfe6;
border-radius: .04rem;
transition: border-color 0.2s;
border-radius: 0.24rem;
transition: all 0.3s;
padding: 0.24rem 0.32rem;
color: #333;
&:hover {
border-color: #c0c4cc;
}
&: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 {
min-height: .9rem !important;
min-height: 2.4rem;
line-height: 1.5;
resize: vertical;
padding: .08rem .12rem;
}
.el-radio {
margin-right: .2rem;
margin-right: 0.6rem;
.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 {
margin-top: .15rem;
margin: 0.4rem 0 0.6rem;
display: flex;
align-items: center;
font-size: .26rem; /* 增大35%: .18rem * 1.35 = .243rem */
line-height: 1.6;
color: #666;
width: 100%;
overflow: visible;
::v-deep .el-checkbox__label {
font-size: .13rem; /* 增大35%: .12rem * 1.35 = .162rem */
line-height: 1.6;
color: #666;
}
::v-deep .el-checkbox {
display: flex;
align-items: flex-start;
width: 100%;
span {
color: #275aff;
font-weight: 500;
.el-checkbox__label {
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-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 {
margin-top: .2rem;
padding: .15rem;
background: #f8f9fa;
border-radius: .06rem;
border: 1px solid #eee;
margin: 0.4rem 0 0.6rem;
padding: 0.4rem;
background: #f8f9ff;
border-radius: 0.32rem;
border: 1px solid #e8edff;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
img {
width: 1.2rem;
height: 1.2rem;
width: 3.2rem;
height: 3.2rem;
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 {
font-size: .1755rem; /* 增大35%: .13rem * 1.35 = .1755rem */
font-size: 0.28rem;
color: #666;
line-height: 1.5;
}
}
// 提交按钮样式
// 提交按钮样式 - 移除禁用状态
.dialog-footer {
::v-deep .el-button {
min-width: 1rem;
font-size: .189rem; /* 增大35%: .14rem * 1.35 = .189rem */
border-radius: .04rem;
min-width: 2.4rem;
height: 0.88rem;
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) {
::v-deep .product-consult-dialog {
&.el-dialog {
width: 90% !important;
margin-top: 10vh !important;
.dialog-tit {
font-size: 0.36rem;
padding: 0.16rem 0 0.32rem;
.el-dialog__header {
padding: .15rem .2rem .08rem;
.pc-tip {
i {
font-size: 0.38rem;
}
.el-dialog__body {
padding: .15rem .2rem;
max-height: 60vh;
span {
font-size: 0.32rem;
}
}
}
.url_box {
font-size: 0.28rem;
}
.url-container {
display: block;
margin-top: .05rem;
display: flex;
flex-direction: column;
align-items: flex-start;
width: 100%;
.url {
display: inline-flex;
align-items: center;
padding: .06rem .12rem;
font-size: .297rem; /* 增大35%: .22rem * 1.35 = .297rem */
width: 100%;
padding: 0.1rem 0.2rem;
font-size: 0.28rem;
margin-top: .1rem;
.copy-hint {
font-size: .162rem; /* 增大35%: .12rem * 1.35 = .162rem */
margin-left: .08rem;
font-size: 0.22rem;
// padding: 0.03rem 0.08rem;
}
}
.tooltip {
font-size: .135rem; /* 增大35%: .1rem * 1.35 = .135rem */
padding: .03rem .06rem;
font-size: 0.2rem;
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 {
flex-direction: column;
text-align: center;
padding: 0.32rem;
margin: 0.32rem 0 0.4rem;
img {
margin-right: 0;
margin-bottom: .1rem;
width: 2.4rem;
height: 2.4rem;
margin-bottom: 0.32rem;
}
span {
font-size: 0.24rem;
}
}
}
:deep(.el-message) {
font-size: .216rem !important; /* 增大35%: .16rem * 1.35 = .216rem */
min-width: auto !important;
padding: .12rem .2rem !important;
border-radius: .08rem !important;
}
.dialog-footer {
::v-deep .el-button {
min-width: 2rem;
height: 0.8rem;
font-size: 0.28rem;
padding: 0 0.6rem;
}
}
:deep(.el-message__content) {
font-size: .216rem !important; /* 增大35%: .16rem * 1.35 = .216rem */
line-height: 1.4 !important;
}
:deep(.el-message) {
font-size: 0.28rem !important;
padding: 0.2rem 0.32rem !important;
}
:deep(.el-message--success) {
background-color: #f0f9eb !important;
border-color: #e1f3d8 !important;
}
:deep(.el-message--success .el-message__content) {
color: #67c23a !important;
:deep(.el-message__content) {
font-size: 0.28rem !important;
}
}
@media screen and (min-width: 751px) and (max-width: 1200px) {
@ -318,4 +567,48 @@
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;
}
}

View File

@ -81,6 +81,8 @@
background: linear-gradient(135deg, #f0f7ff 0%, #ffffff 100%);
border: 1px solid rgba(39, 90, 255, 0.1);
transition: all 0.3s ease;
position: relative;
padding-bottom: 1.2rem;
}
.base-box .content .item-box:hover,
.journey-box .content .item-box:hover,
@ -147,6 +149,8 @@
font-weight: bold;
color: #d4d6e1;
margin: 0.15rem 0;
position: absolute;
bottom: 0.6rem;
}
.base-box .content .item-box .item-price .price,
.journey-box .content .item-box .item-price .price,
@ -188,6 +192,9 @@
text-align: center;
cursor: pointer;
margin-top: auto;
width: 100%;
position: relative;
bottom: -0.9rem;
}
.base-box .content .item-box .item-button .item-button-text,
.journey-box .content .item-box .item-button .item-button-text,

View File

@ -87,7 +87,8 @@
background: linear-gradient(135deg, #f0f7ff 0%, #ffffff 100%);
border: 1px solid rgba(39, 90, 255, 0.1);
transition: all 0.3s ease;
position: relative;
padding-bottom: 1.2rem;
&:hover {
box-shadow: 0 .04rem .16rem rgba(39, 90, 255, 0.12);
transform: translateY(-2px);
@ -144,7 +145,8 @@
font-weight: bold;
color: #d4d6e1;
margin: 0.15rem 0;
position: absolute;
bottom: .6rem;
.price {
font-size: .38rem;
color: #f52220;
@ -180,7 +182,9 @@
text-align: center;
cursor: pointer;
margin-top: auto;
width: 100%;
position: relative;
bottom: -0.9rem;
.item-button-text {
color: #fff;
font-size: 0.182rem; /* 增大30%: 0.14rem * 1.3 = 0.182rem */

View File

@ -355,7 +355,7 @@ export default {
background-color: #000;
color: #fff;
width: 2.8rem;
font-size: .2rem;
font-size: .18rem;
padding: .1rem .2rem;
border-radius: .2rem;
cursor: pointer;