641 lines
12 KiB
Plaintext
641 lines
12 KiB
Plaintext
// 基础样式
|
|
* {
|
|
touch-action: manipulation;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
// 修复移动端输入框点击问题
|
|
::v-deep .el-dialog__wrapper {
|
|
.el-dialog {
|
|
.el-dialog__body {
|
|
.el-input,
|
|
.el-textarea {
|
|
.el-input__inner,
|
|
.el-textarea__inner {
|
|
// 确保移动端点击区域正常
|
|
touch-action: manipulation;
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 头部样式
|
|
.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 {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-top: 0.2rem;
|
|
}
|
|
|
|
.url-container {
|
|
display: flex;
|
|
align-items: center;
|
|
position: relative;
|
|
flex: 1;
|
|
|
|
.url {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
color: #275aff;
|
|
text-decoration: none;
|
|
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;
|
|
margin-left: 0.2rem;
|
|
|
|
&:hover {
|
|
background-color: #e8edff;
|
|
border-color: #275aff;
|
|
transform: translateY(-0.04rem);
|
|
box-shadow: 0 0.08rem 0.32rem rgba(39, 90, 255, 0.15);
|
|
}
|
|
|
|
&.copied {
|
|
background-color: #e1f3d8;
|
|
border-color: #67c23a;
|
|
color: #67c23a;
|
|
|
|
&:hover {
|
|
background-color: #d1edc4;
|
|
border-color: #5daf34;
|
|
}
|
|
}
|
|
}
|
|
|
|
.tooltip {
|
|
position: absolute;
|
|
bottom: 100%;
|
|
left: 50%;
|
|
transform: translateX(-50%) translateY(-0.16rem);
|
|
background-color: rgba(0, 0, 0, 0.85);
|
|
color: white;
|
|
font-size: 0.24rem;
|
|
padding: 0.08rem 0.16rem;
|
|
border-radius: 0.16rem;
|
|
white-space: nowrap;
|
|
z-index: 1000;
|
|
opacity: 0;
|
|
transition: opacity 0.2s, transform 0.2s;
|
|
pointer-events: none;
|
|
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
border-width: 0.08rem;
|
|
border-style: solid;
|
|
border-color: rgba(0, 0, 0, 0.85) transparent transparent transparent;
|
|
}
|
|
|
|
&.tooltip-visible {
|
|
opacity: 1;
|
|
transform: translateX(-50%) translateY(0);
|
|
}
|
|
}
|
|
}
|
|
|
|
.url_btn {
|
|
margin-left: 0.4rem;
|
|
|
|
.copy-hint {
|
|
display: inline-block;
|
|
font-size: 0.26rem;
|
|
color: #000;
|
|
padding: 0.1rem 0.2rem;
|
|
border-radius: 0.12rem;
|
|
border: 1px solid #000;
|
|
transition: all 0.2s;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
min-width: 1.2rem;
|
|
text-align: center;
|
|
|
|
&:hover {
|
|
color: #275aff;
|
|
border-color: #275aff;
|
|
}
|
|
}
|
|
|
|
.url.copied & .copy-hint {
|
|
color: #67c23a;
|
|
border-color: #67c23a;
|
|
}
|
|
}
|
|
|
|
.check-tit {
|
|
font-size: 0.16rem;
|
|
color: #666;
|
|
line-height: 1;
|
|
margin: 0.08rem 0;
|
|
font-weight: normal;
|
|
|
|
span {
|
|
color: #275aff;
|
|
font-weight: 500;
|
|
margin: 0 0.04rem;
|
|
}
|
|
}
|
|
|
|
// 表单样式优化
|
|
::v-deep .product-consult-dialog {
|
|
&.el-dialog {
|
|
border-radius: 0.32rem;
|
|
overflow: hidden;
|
|
box-shadow: 0 0.4rem 1.6rem rgba(0, 0, 0, 0.15);
|
|
|
|
.el-dialog__header {
|
|
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: 0.4rem;
|
|
font-weight: 600;
|
|
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: 0.2rem .6rem;
|
|
max-height: 70vh;
|
|
overflow-y: auto;
|
|
|
|
// 移动端滚动优化
|
|
-webkit-overflow-scrolling: touch;
|
|
|
|
// 防止弹窗内部滚动穿透
|
|
&.is-mobile-scroll {
|
|
touch-action: pan-y;
|
|
}
|
|
}
|
|
|
|
.el-dialog__footer {
|
|
padding: 0.4rem 0.6rem;
|
|
border-top: 1px solid #f0f0f0;
|
|
background: #fafbfc;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 表单项样式
|
|
::v-deep .el-form {
|
|
.el-form-item {
|
|
margin-bottom: 0.4rem;
|
|
|
|
.el-form-item__label {
|
|
padding-bottom: 0.12rem;
|
|
font-size: 0.32rem;
|
|
font-weight: 500;
|
|
color: #333;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.el-input,
|
|
.el-textarea {
|
|
.el-input__inner,
|
|
.el-textarea__inner {
|
|
font-size: 0.32rem;
|
|
border: 1px solid #dcdfe6;
|
|
border-radius: 0.24rem;
|
|
transition: all 0.3s;
|
|
padding: 0.24rem 0.32rem;
|
|
color: #333;
|
|
// 修复移动端点击问题
|
|
touch-action: manipulation;
|
|
-webkit-tap-highlight-color: transparent;
|
|
|
|
&:hover {
|
|
border-color: #c0c4cc;
|
|
}
|
|
|
|
&:focus {
|
|
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: 2.4rem;
|
|
line-height: 1.5;
|
|
resize: vertical;
|
|
}
|
|
|
|
.el-radio {
|
|
margin-right: 0.6rem;
|
|
|
|
.el-radio__label {
|
|
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: 0.4rem 0 0.6rem;
|
|
display: flex;
|
|
align-items: center;
|
|
color: #666;
|
|
width: 100%;
|
|
overflow: visible;
|
|
|
|
::v-deep .el-checkbox {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
width: 100%;
|
|
|
|
.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);
|
|
font-size: 0.16rem;
|
|
line-height: 1.5;
|
|
|
|
.agreement-text {
|
|
width: 100%;
|
|
font-size: 0.16rem;
|
|
|
|
p {
|
|
margin: 0.08rem 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.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: 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: 3.2rem;
|
|
height: 3.2rem;
|
|
object-fit: contain;
|
|
margin-bottom: 0.4rem;
|
|
border-radius: 0.16rem;
|
|
box-shadow: 0 0.08rem 0.32rem rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
span {
|
|
font-size: 0.28rem;
|
|
color: #666;
|
|
line-height: 1.5;
|
|
}
|
|
}
|
|
|
|
// 提交按钮样式
|
|
.dialog-footer {
|
|
::v-deep .el-button {
|
|
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;
|
|
}
|
|
|
|
// 响应式适配
|
|
@media screen and (max-width: 750px) {
|
|
.dialog-tit {
|
|
font-size: 0.32rem;
|
|
padding: 0.15rem 0 0.3rem;
|
|
|
|
.pc-tip {
|
|
i {
|
|
font-size: 0.34rem;
|
|
}
|
|
|
|
span {
|
|
font-size: 0.3rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.url_box {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 0.2rem;
|
|
}
|
|
|
|
.url-container {
|
|
width: 100%;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
|
|
.url {
|
|
width: 100%;
|
|
padding: 0.1rem 0.2rem;
|
|
font-size: 0.28rem;
|
|
margin: 0.1rem 0 0;
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
|
|
.url_btn {
|
|
margin-left: 0;
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
|
|
.copy-hint {
|
|
width: 100%;
|
|
max-width: 3rem;
|
|
font-size: 0.24rem;
|
|
padding: 0.12rem 0.24rem;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.check-tit {
|
|
font-size: 0.16rem;
|
|
line-height: 1.6;
|
|
font-weight: 600;
|
|
}
|
|
|
|
::v-deep .product-consult-dialog {
|
|
&.el-dialog {
|
|
width: 90% !important;
|
|
margin-top: 10vh !important;
|
|
border-radius: 0.24rem;
|
|
|
|
.el-dialog__header {
|
|
padding: 0.25rem 0.3rem 0.2rem;
|
|
|
|
.el-dialog__title {
|
|
font-size: 0.34rem;
|
|
}
|
|
}
|
|
|
|
.el-dialog__body {
|
|
padding: 0.2rem .3rem;
|
|
// 移动端优化
|
|
-webkit-overflow-scrolling: touch;
|
|
max-height: 60vh;
|
|
}
|
|
|
|
.el-dialog__footer {
|
|
padding: 0.25rem 0.3rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
::v-deep .el-form {
|
|
.el-form-item {
|
|
margin-bottom: 0.3rem;
|
|
|
|
.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;
|
|
// 修复iOS输入框点击问题
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
}
|
|
}
|
|
|
|
.el-radio {
|
|
.el-radio__label {
|
|
font-size: 0.28rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 移动端协议复选框字体调整
|
|
.agreement-checkbox {
|
|
margin: 0.3rem 0 0.4rem;
|
|
|
|
::v-deep .el-checkbox {
|
|
.el-checkbox__label {
|
|
font-size: 0.22rem !important;
|
|
padding-left: 0.12rem;
|
|
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 {
|
|
padding: 0.3rem;
|
|
margin: 0.3rem 0 0.4rem;
|
|
|
|
img {
|
|
width: 2.4rem;
|
|
height: 2.4rem;
|
|
margin-bottom: 0.3rem;
|
|
}
|
|
|
|
span {
|
|
font-size: 0.24rem;
|
|
}
|
|
}
|
|
|
|
.dialog-footer {
|
|
::v-deep .el-button {
|
|
min-width: 100%;
|
|
height: 0.8rem;
|
|
font-size: 0.28rem;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
@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.26rem !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 移动端优化 - 修复点击问题
|
|
@media screen and (max-width: 750px) {
|
|
// 确保所有可点击元素都能正常响应
|
|
.url,
|
|
.url_btn .copy-hint,
|
|
.el-checkbox__inner,
|
|
.el-radio__inner,
|
|
.el-button {
|
|
cursor: pointer;
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
|
|
// 修复iOS输入框点击问题
|
|
.el-input__inner,
|
|
.el-textarea__inner {
|
|
font-size: 16px !important;
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
}
|
|
|
|
// 确保弹窗内容区域可点击
|
|
.product-consult-dialog {
|
|
pointer-events: auto !important;
|
|
}
|
|
|
|
// 防止弹窗背景滚动
|
|
.el-dialog__wrapper {
|
|
position: fixed;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
overflow: hidden;
|
|
|
|
&.el-dialog__wrapper--fixed {
|
|
touch-action: none;
|
|
}
|
|
}
|
|
}
|