updata
This commit is contained in:
parent
aad0b377b1
commit
5416dac356
@ -1,28 +1,32 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
:title="title"
|
||||
:visible.sync="dialogVisible"
|
||||
:width="responsiveWidth"
|
||||
:center="center"
|
||||
:top="responsiveTop"
|
||||
@close="handleClose"
|
||||
custom-class="product-consult-dialog"
|
||||
>
|
||||
<el-form
|
||||
ref="ruleForm"
|
||||
:rules="rules"
|
||||
label-position="top"
|
||||
:model="formData"
|
||||
:disabled="loading"
|
||||
<el-dialog :title="title" :visible.sync="dialogVisible" :width="responsiveWidth" :center="center" :top="responsiveTop"
|
||||
@close="handleClose" custom-class="product-consult-dialog">
|
||||
|
||||
<div class="dialog-tit">
|
||||
如需购买资源请移步PC端哦~
|
||||
<div class="url_box">
|
||||
|
||||
<div class="url-container" @mouseenter="showTooltip = true" @mouseleave="showTooltip = false">
|
||||
官网地址:
|
||||
<span
|
||||
class="url"
|
||||
ref="urlElement"
|
||||
@click="copyUrl"
|
||||
:class="{ 'copied': isCopied }"
|
||||
>
|
||||
https://www.opencomputing.cn
|
||||
<span class="copy-hint">点击复制</span>
|
||||
</span>
|
||||
<div v-if="showTooltip" class="tooltip" :class="{ 'tooltip-visible': showTooltip }">
|
||||
点击复制链接
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-form ref="ruleForm" :rules="rules" label-position="top" :model="formData" :disabled="loading">
|
||||
<el-form-item label="需求描述">
|
||||
<el-input
|
||||
:autosize="{ minRows: 3, maxRows: 3 }"
|
||||
type="textarea"
|
||||
size="mini"
|
||||
v-model="formData.content"
|
||||
placeholder="请输入您的具体需求"
|
||||
></el-input>
|
||||
<el-input :autosize="{ minRows: 6, maxRows: 6 }" type="textarea" size="mini" v-model="formData.content"
|
||||
placeholder="请输入您的具体需求"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="客户类型">
|
||||
@ -31,61 +35,32 @@
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="name" label="联系人姓名">
|
||||
<el-input
|
||||
size="mini"
|
||||
v-model="formData.name"
|
||||
placeholder="请输入联系人姓名"
|
||||
></el-input>
|
||||
<el-input size="mini" v-model="formData.name" placeholder="请输入联系人姓名"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="phone" label="联系人手机">
|
||||
<el-input
|
||||
size="mini"
|
||||
v-model="formData.phone"
|
||||
placeholder="请输入联系人手机"
|
||||
type="number"
|
||||
></el-input>
|
||||
<el-input size="mini" v-model="formData.phone" placeholder="请输入联系人手机" type="number"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item
|
||||
v-show="formData.custom_type === '1'"
|
||||
label="公司名称"
|
||||
>
|
||||
<el-input
|
||||
size="mini"
|
||||
v-model="formData.company"
|
||||
placeholder="请输入公司名称"
|
||||
></el-input>
|
||||
<el-form-item v-show="formData.custom_type === '1'" label="公司名称">
|
||||
<el-input size="mini" v-model="formData.company" placeholder="请输入公司名称"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="联系人邮箱">
|
||||
<el-input
|
||||
size="mini"
|
||||
v-model="formData.email"
|
||||
placeholder="请输入联系人邮箱"
|
||||
type="email"
|
||||
></el-input>
|
||||
<el-input size="mini" v-model="formData.email" placeholder="请输入联系人邮箱" type="email"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-checkbox v-model="formData.checked" class="agreement-checkbox">
|
||||
勾选表示：您同意
|
||||
<span v-if="platformName">{{ platformName }}</span>
|
||||
及其授权的合作伙伴通过您填写的联系方式联系您，且数据仅用于与您沟通。当您注销平台账号后，您的数据会被销毁。
|
||||
<p>勾选表示：您同意<span v-if="platformName">{{ platformName }}</span>
|
||||
及其授权的合作伙伴通过您填写的联系方式联系您，且数据仅用于与您沟通。
|
||||
</p>
|
||||
<p>
|
||||
当您注销平台账号后，您的数据会被销毁。
|
||||
</p>
|
||||
</el-checkbox>
|
||||
|
||||
<div v-if="qrCode" class="qrcode-section">
|
||||
<img :src="qrCode" alt="客服二维码">
|
||||
<span>扫码添加官方客服</span>
|
||||
</div>
|
||||
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="primary"
|
||||
:loading="loading"
|
||||
@click="handleSubmit"
|
||||
>
|
||||
<el-button size="mini" type="primary" :loading="loading" @click="handleSubmit">
|
||||
提 交
|
||||
</el-button>
|
||||
</span>
|
||||
@ -188,7 +163,10 @@ export default {
|
||||
{ required: true, validator: validatePhone, trigger: 'blur' }
|
||||
]
|
||||
},
|
||||
formData: { ...this.defaultFormData }
|
||||
formData: { ...this.defaultFormData },
|
||||
showTooltip: false, // 控制提示显示
|
||||
isCopied: false, // 复制状态
|
||||
copyTimer: null // 复制状态定时器
|
||||
}
|
||||
},
|
||||
|
||||
@ -253,6 +231,75 @@ export default {
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 复制URL到剪贴板
|
||||
copyUrl() {
|
||||
const urlToCopy = 'https://www.opencomputing.cn'
|
||||
|
||||
// 使用现代剪贴板API
|
||||
if (navigator.clipboard && window.isSecureContext) {
|
||||
navigator.clipboard.writeText(urlToCopy)
|
||||
.then(() => {
|
||||
this.handleCopySuccess()
|
||||
})
|
||||
.catch(err => {
|
||||
console.error('复制失败:', err)
|
||||
this.fallbackCopy(urlToCopy)
|
||||
})
|
||||
} else {
|
||||
// 使用旧的document.execCommand方法作为备选
|
||||
this.fallbackCopy(urlToCopy)
|
||||
}
|
||||
},
|
||||
|
||||
// 备选复制方法
|
||||
fallbackCopy(text) {
|
||||
// 创建一个临时的textarea元素
|
||||
const textArea = document.createElement('textarea')
|
||||
textArea.value = text
|
||||
textArea.style.position = 'fixed'
|
||||
textArea.style.left = '-999999px'
|
||||
textArea.style.top = '-999999px'
|
||||
document.body.appendChild(textArea)
|
||||
textArea.focus()
|
||||
textArea.select()
|
||||
|
||||
try {
|
||||
const successful = document.execCommand('copy')
|
||||
if (successful) {
|
||||
this.handleCopySuccess()
|
||||
} else {
|
||||
this.$message.error('复制失败，请手动复制链接')
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('复制失败:', err)
|
||||
this.$message.error('复制失败，请手动复制链接')
|
||||
}
|
||||
|
||||
document.body.removeChild(textArea)
|
||||
},
|
||||
|
||||
// 处理复制成功
|
||||
handleCopySuccess() {
|
||||
// 显示成功消息
|
||||
this.$message.success('链接已复制到剪贴板')
|
||||
|
||||
// 设置复制状态
|
||||
this.isCopied = true
|
||||
|
||||
// 清除之前的定时器
|
||||
if (this.copyTimer) {
|
||||
clearTimeout(this.copyTimer)
|
||||
}
|
||||
|
||||
// 3秒后重置复制状态
|
||||
this.copyTimer = setTimeout(() => {
|
||||
this.isCopied = false
|
||||
}, 3000)
|
||||
|
||||
// 隐藏提示框
|
||||
this.showTooltip = false
|
||||
},
|
||||
|
||||
// 重置表单
|
||||
resetForm() {
|
||||
this.formData = {
|
||||
@ -325,215 +372,31 @@ export default {
|
||||
|
||||
// 默认提交接口（如果没有传入自定义函数）
|
||||
async defaultSubmitApi(data) {
|
||||
|
||||
// 这里可以添加默认的提交逻辑
|
||||
// 例如：return await this.$http.post('/api/consult', data)
|
||||
},
|
||||
|
||||
// 处理响应结果
|
||||
handleResponse(response) {
|
||||
if (response.status) {
|
||||
|
||||
if (response && response.status) {
|
||||
this.handleClose()
|
||||
this.$emit('success', response)
|
||||
} else {
|
||||
this.$message.error(response.msg || '提交失败，请稍后再试！')
|
||||
this.$message.error(response?.msg || '提交失败，请稍后再试！')
|
||||
this.$emit('error', response)
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
beforeDestroy() {
|
||||
// 清除定时器
|
||||
if (this.copyTimer) {
|
||||
clearTimeout(this.copyTimer)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
// 弹窗样式优化
|
||||
::v-deep .product-consult-dialog {
|
||||
&.el-dialog {
|
||||
width: var(--dialog-width, 6rem) !important;
|
||||
max-width: 90%;
|
||||
border-radius: .08rem;
|
||||
z-index: 99999;
|
||||
|
||||
.el-dialog__header {
|
||||
padding: .2rem .3rem .1rem;
|
||||
border-bottom: 1px solid #eee;
|
||||
|
||||
.el-dialog__title {
|
||||
font-size: .18rem;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.el-dialog__body {
|
||||
padding: .2rem .3rem;
|
||||
max-height: 65vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.el-dialog__footer {
|
||||
padding: .15rem .3rem .2rem;
|
||||
border-top: 1px solid #eee;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 表单样式优化
|
||||
::v-deep .el-form {
|
||||
.el-form-item {
|
||||
margin-bottom: .4rem;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: .1rem;
|
||||
}
|
||||
|
||||
.el-form-item__label {
|
||||
padding-bottom: .06rem;
|
||||
font-size: .14rem;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.el-input,
|
||||
.el-textarea {
|
||||
.el-input__inner,
|
||||
.el-textarea__inner {
|
||||
font-size: .14rem;
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: .04rem;
|
||||
transition: border-color 0.2s;
|
||||
|
||||
&:focus {
|
||||
border-color: #409eff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-textarea__inner {
|
||||
min-height: .9rem !important;
|
||||
resize: vertical;
|
||||
padding: .08rem .12rem;
|
||||
}
|
||||
|
||||
.el-radio {
|
||||
margin-right: .2rem;
|
||||
|
||||
.el-radio__label {
|
||||
font-size: .14rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 协议复选框样式
|
||||
.agreement-checkbox {
|
||||
margin-top: .15rem;
|
||||
display: block;
|
||||
font-size: .12rem;
|
||||
line-height: 1.6;
|
||||
color: #666;
|
||||
|
||||
::v-deep .el-checkbox__label {
|
||||
font-size: .12rem;
|
||||
line-height: 1.6;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #275aff;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
// 二维码区域样式
|
||||
.qrcode-section {
|
||||
margin-top: .2rem;
|
||||
padding: .15rem;
|
||||
background: #f8f9fa;
|
||||
border-radius: .06rem;
|
||||
border: 1px solid #eee;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
width: 1.2rem;
|
||||
height: 1.2rem;
|
||||
object-fit: contain;
|
||||
margin-right: .15rem;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: .13rem;
|
||||
color: #666;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
|
||||
// 提交按钮样式
|
||||
.dialog-footer {
|
||||
::v-deep .el-button {
|
||||
min-width: 1rem;
|
||||
// height: .36rem;
|
||||
font-size: .14rem;
|
||||
border-radius: .04rem;
|
||||
}
|
||||
}
|
||||
|
||||
// 响应式适配
|
||||
@media screen and (max-width: 750px) {
|
||||
::v-deep .product-consult-dialog {
|
||||
&.el-dialog {
|
||||
width: 90% !important;
|
||||
margin-top: 10vh !important;
|
||||
|
||||
.el-dialog__header {
|
||||
padding: .15rem .2rem .08rem;
|
||||
}
|
||||
|
||||
.el-dialog__body {
|
||||
padding: .15rem .2rem;
|
||||
max-height: 60vh;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.qrcode-section {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
|
||||
img {
|
||||
margin-right: 0;
|
||||
margin-bottom: .1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
:deep(.el-message) {
|
||||
font-size: .16rem !important; /* 调整大小 */
|
||||
min-width: auto !important;
|
||||
padding: .12rem .2rem !important;
|
||||
border-radius: .08rem !important;
|
||||
}
|
||||
|
||||
:deep(.el-message__content) {
|
||||
font-size: .16rem !important;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
<style scoped lang="less">
|
||||
@import url('../less/dialog/index.less');
|
||||
</style>
|
||||
|
||||
@ -185,119 +185,5 @@ export default {
|
||||
}
|
||||
</style>
|
||||
<style lang="less" scoped>
|
||||
.top-tit {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
background: linear-gradient(90deg, #275AFF 0%, #2EBDFA 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
font-size: .3rem;
|
||||
font-weight: bold;
|
||||
margin-bottom: .3rem;
|
||||
}
|
||||
|
||||
.supplier-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap; /* 允许换行 */
|
||||
padding: .2rem .22rem;
|
||||
gap: .15rem; /* 使用gap控制间距 */
|
||||
}
|
||||
|
||||
.supplier {
|
||||
flex-shrink: 0; /* 防止收缩 */
|
||||
|
||||
.supplier-title {
|
||||
font-size: .2rem;
|
||||
color: #000;
|
||||
padding: .12rem .2rem;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 0.12rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
white-space: nowrap; /* 防止文字换行 */
|
||||
|
||||
&:hover {
|
||||
background-color: #e0e0e0;
|
||||
transform: translateY(-0.02rem);
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: linear-gradient(90deg, #275aff, #2ebdfa);
|
||||
color: #fff;
|
||||
box-shadow: 0 .04rem .12rem rgba(39, 90, 255, 0.3);
|
||||
transform: translateY(-0.02rem);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
padding: 0 .3rem;
|
||||
.box-item {
|
||||
display: flex;
|
||||
width: 48%;
|
||||
flex-direction: column;
|
||||
align-items: self-start;
|
||||
border: .02rem solid #f0f0f0;
|
||||
border-radius: .2rem;
|
||||
padding: .15rem .2rem;
|
||||
margin: .34rem 0;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-0.05rem);
|
||||
box-shadow: 0 .08rem .2rem rgba(0, 0, 0, 0.1);
|
||||
border-color: #1f70ff;
|
||||
}
|
||||
|
||||
.item-tit{
|
||||
font-size: .16rem;
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
margin-bottom: .1rem;
|
||||
}
|
||||
.item-detail{
|
||||
color: #666;
|
||||
font-size: .13rem;
|
||||
margin: .15rem 0;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.item-desc{
|
||||
color: #666;
|
||||
background-color: #f8f9fa;
|
||||
font-size: .12rem;
|
||||
padding: .08rem .12rem;
|
||||
border-radius: .1rem;
|
||||
margin-bottom: .15rem;
|
||||
border: .01rem solid #e9ecef;
|
||||
}
|
||||
.item-btn{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
.btn{
|
||||
background: linear-gradient(90deg, #1f70ff, #3a8cff);
|
||||
color: #fff;
|
||||
padding: .08rem .2rem;
|
||||
border-radius: .15rem;
|
||||
font-size: 0.14rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
border: none;
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(90deg, #0d5aff, #2a7aff);
|
||||
transform: translateY(-0.02rem);
|
||||
box-shadow: 0 .04rem .1rem rgba(31, 112, 255, 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@import url('../less/all/index.less');
|
||||
</style>
|
||||
|
||||
@ -251,132 +251,5 @@ body {
|
||||
}
|
||||
</style>
|
||||
<style lang="less" scoped>
|
||||
.top-tit {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
background: linear-gradient(90deg, #275AFF 0%, #2EBDFA 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
font-size: .3rem;
|
||||
font-weight: bold;
|
||||
margin-bottom: .3rem;
|
||||
}
|
||||
|
||||
.supplier-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
/* 允许换行 */
|
||||
padding: .2rem .22rem;
|
||||
gap: .15rem;
|
||||
/* 使用gap控制间距 */
|
||||
}
|
||||
|
||||
.supplier {
|
||||
flex-shrink: 0;
|
||||
/* 防止收缩 */
|
||||
|
||||
.supplier-title {
|
||||
font-size: .2rem;
|
||||
color: #000;
|
||||
padding: .12rem .2rem;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 0.12rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
white-space: nowrap;
|
||||
/* 防止文字换行 */
|
||||
|
||||
&:hover {
|
||||
background-color: #e0e0e0;
|
||||
transform: translateY(-0.02rem);
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: linear-gradient(90deg, #275aff, #2ebdfa);
|
||||
color: #fff;
|
||||
box-shadow: 0 .04rem .12rem rgba(39, 90, 255, 0.3);
|
||||
transform: translateY(-0.02rem);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
padding: 0 .3rem;
|
||||
|
||||
.box-item {
|
||||
display: flex;
|
||||
width: 48%;
|
||||
flex-direction: column;
|
||||
align-items: self-start;
|
||||
border: .02rem solid #f0f0f0;
|
||||
border-radius: .2rem;
|
||||
padding: .15rem .2rem;
|
||||
margin: .34rem 0;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-0.05rem);
|
||||
box-shadow: 0 .08rem .2rem rgba(0, 0, 0, 0.1);
|
||||
border-color: #1f70ff;
|
||||
}
|
||||
|
||||
.item-tit {
|
||||
font-size: .16rem;
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
margin-bottom: .1rem;
|
||||
}
|
||||
|
||||
.item-detail {
|
||||
color: #666;
|
||||
font-size: .13rem;
|
||||
margin: .15rem 0;
|
||||
line-height: 1.4;
|
||||
min-height: .4rem; // 确保有最小高度
|
||||
}
|
||||
|
||||
.item-desc {
|
||||
color: #666;
|
||||
background-color: #f8f9fa;
|
||||
font-size: .12rem;
|
||||
padding: .08rem .12rem;
|
||||
border-radius: .1rem;
|
||||
margin-bottom: .15rem;
|
||||
border: .01rem solid #e9ecef;
|
||||
min-height: .32rem; // 确保有最小高度
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.item-btn {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
.btn {
|
||||
background: linear-gradient(90deg, #1f70ff, #3a8cff);
|
||||
color: #fff;
|
||||
padding: .08rem .2rem;
|
||||
border-radius: .15rem;
|
||||
font-size: 0.14rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
border: none;
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(90deg, #0d5aff, #2a7aff);
|
||||
transform: translateY(-0.02rem);
|
||||
box-shadow: 0 .04rem .1rem rgba(31, 112, 255, 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@import url('../less/cloud/cloud.less');
|
||||
</style>
|
||||
|
||||
@ -1,11 +1,23 @@
|
||||
<template>
|
||||
<div class="h5-container">
|
||||
<!-- 主要内容区域 -->
|
||||
<div class="main">
|
||||
<div ref="mainContent" class="main" @scroll="handleScroll">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
<div style="height: 0.8rem;">
|
||||
<div style="height: 1.4rem;"></div>
|
||||
|
||||
<!-- 返回顶部按钮 -->
|
||||
<transition name="fade">
|
||||
<div
|
||||
v-show="showBackToTop"
|
||||
class="back-to-top"
|
||||
@click="scrollToTop"
|
||||
>
|
||||
<div class="back-to-top-icon">↑</div>
|
||||
<div class="back-to-top-text">顶部</div>
|
||||
</div>
|
||||
</transition>
|
||||
|
||||
<!-- 底部导航栏 -->
|
||||
<div class="tabBar">
|
||||
<!-- 首页 -->
|
||||
@ -109,7 +121,9 @@ export default {
|
||||
{ id: 'calculate', name: '算', path: '/h5HomePage/calculate' },
|
||||
{ id: 'net', name: '网', path: '/h5HomePage/net' },
|
||||
{ id: 'use', name: '用', path: '/h5HomePage/use' }
|
||||
]
|
||||
],
|
||||
showBackToTop: false, // 是否显示返回顶部按钮
|
||||
scrollThreshold: 200, // 滚动多少距离后显示按钮（可根据需要调整）
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
@ -154,6 +168,29 @@ export default {
|
||||
if (this.tabList.some(item => item.id === tabId)) {
|
||||
this.activeTab = tabId;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 处理滚动事件
|
||||
*/
|
||||
handleScroll() {
|
||||
if (this.$refs.mainContent) {
|
||||
const scrollTop = this.$refs.mainContent.scrollTop;
|
||||
// 当滚动距离超过阈值时显示返回顶部按钮
|
||||
this.showBackToTop = scrollTop > this.scrollThreshold;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 滚动到顶部
|
||||
*/
|
||||
scrollToTop() {
|
||||
if (this.$refs.mainContent) {
|
||||
this.$refs.mainContent.scrollTo({
|
||||
top: 0,
|
||||
behavior: 'smooth' // 平滑滚动
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
@ -176,16 +213,68 @@ window.onresize = adapter()
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.main {
|
||||
flex: 1;
|
||||
overflow-y: auto;/* 为底部导航栏留出空间 */
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch; /* 为iOS添加平滑滚动 */
|
||||
}
|
||||
|
||||
/* 返回顶部按钮样式 */
|
||||
.back-to-top {
|
||||
position: fixed;
|
||||
right: 0.4rem;
|
||||
bottom: 1.5rem; /* 在底部导航栏上方 */
|
||||
z-index: 999;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 1.1rem;
|
||||
height: 1.1rem;
|
||||
background: linear-gradient(90deg, #275AFF 0%, #2EBDFA 100%);
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0.04rem 0.12rem rgba(0, 0, 0, 0.3);
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.95);
|
||||
box-shadow: 0 0.02rem 0.06rem rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(90deg, #275AFF 0%, #2EBDFA 100%);
|
||||
}
|
||||
|
||||
.back-to-top-icon {
|
||||
color: white;
|
||||
font-size: 0.4rem;
|
||||
font-weight: bold;
|
||||
// line-height: 0.5rem;
|
||||
}
|
||||
|
||||
.back-to-top-text {
|
||||
color: white;
|
||||
font-size: 0.26rem;
|
||||
line-height: 0.2rem;
|
||||
// margin-top: -0.04rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* 淡入淡出动画 */
|
||||
.fade-enter-active, .fade-leave-active {
|
||||
transition: opacity 0.3s, transform 0.3s;
|
||||
}
|
||||
.fade-enter, .fade-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(0.2rem);
|
||||
}
|
||||
|
||||
.tabBar {
|
||||
// height:1.1rem;
|
||||
padding: .12rem 0;
|
||||
padding: .2rem 0;
|
||||
background-color: #fff;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
@ -212,25 +301,25 @@ window.onresize = adapter()
|
||||
|
||||
&.active {
|
||||
.item-text {
|
||||
color: #1890ff; /* 激活状态的颜色 */
|
||||
color: #1890ff;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-img {
|
||||
margin-bottom: .05rem;
|
||||
margin-bottom: .1rem;
|
||||
|
||||
img {
|
||||
width: .3rem;
|
||||
height: .3rem;
|
||||
width: .5rem;
|
||||
height: .5rem;
|
||||
display: block;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
}
|
||||
|
||||
.item-text {
|
||||
font-size: .2rem;
|
||||
font-size: .24rem;
|
||||
color: #666;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
118
f/web-kboss/src/views/H5/less/all/index.css
Normal file
118
f/web-kboss/src/views/H5/less/all/index.css
Normal file
@ -0,0 +1,118 @@
|
||||
.top-tit {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
background: linear-gradient(90deg, #275AFF 0%, #2EBDFA 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
font-size: 0.39rem;
|
||||
/* 增大30%: .3rem * 1.3 = .39rem */
|
||||
font-weight: bold;
|
||||
margin: 0.3rem 0;
|
||||
}
|
||||
.supplier-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
/* 允许换行 */
|
||||
padding: 0.2rem 0.22rem;
|
||||
gap: 0.15rem;
|
||||
/* 使用gap控制间距 */
|
||||
}
|
||||
.supplier {
|
||||
flex-shrink: 0;
|
||||
/* 防止收缩 */
|
||||
}
|
||||
.supplier .supplier-title {
|
||||
font-size: 0.28rem;
|
||||
color: #000;
|
||||
padding: 0.12rem 0.2rem;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 0.12rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
white-space: nowrap;
|
||||
/* 防止文字换行 */
|
||||
}
|
||||
.supplier .supplier-title:hover {
|
||||
background-color: #e0e0e0;
|
||||
transform: translateY(-0.02rem);
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.supplier .supplier-title.active {
|
||||
background: linear-gradient(90deg, #275aff, #2ebdfa);
|
||||
color: #fff;
|
||||
box-shadow: 0 0.04rem 0.12rem rgba(39, 90, 255, 0.3);
|
||||
transform: translateY(-0.02rem);
|
||||
}
|
||||
.box {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
padding: 0 0.3rem;
|
||||
}
|
||||
.box .box-item {
|
||||
display: flex;
|
||||
width: 48%;
|
||||
flex-direction: column;
|
||||
align-items: self-start;
|
||||
border: 0.02rem solid #f0f0f0;
|
||||
border-radius: 0.2rem;
|
||||
padding: 0.15rem 0.2rem;
|
||||
margin: 0.34rem 0;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.box .box-item:hover {
|
||||
transform: translateY(-0.05rem);
|
||||
box-shadow: 0 0.08rem 0.2rem rgba(0, 0, 0, 0.1);
|
||||
border-color: #1f70ff;
|
||||
}
|
||||
.box .box-item .item-tit {
|
||||
font-size: 0.26rem;
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
margin-bottom: 0.1rem;
|
||||
}
|
||||
.box .box-item .item-detail {
|
||||
color: #666;
|
||||
font-size: 0.22rem;
|
||||
margin: 0.15rem 0;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.box .box-item .item-desc {
|
||||
color: #666;
|
||||
background-color: #f8f9fa;
|
||||
font-size: 0.2rem;
|
||||
padding: 0.08rem 0.12rem;
|
||||
border-radius: 0.1rem;
|
||||
margin-bottom: 0.15rem;
|
||||
border: 0.01rem solid #e9ecef;
|
||||
}
|
||||
.box .box-item .item-btn {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.box .box-item .item-btn .btn {
|
||||
background: linear-gradient(90deg, #1f70ff, #3a8cff);
|
||||
color: #fff;
|
||||
padding: 0.08rem 0.2rem;
|
||||
border-radius: 0.15rem;
|
||||
font-size: 0.24rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
border: none;
|
||||
}
|
||||
.box .box-item .item-btn .btn:hover {
|
||||
background: linear-gradient(90deg, #0d5aff, #2a7aff);
|
||||
transform: translateY(-0.02rem);
|
||||
box-shadow: 0 0.04rem 0.1rem rgba(31, 112, 255, 0.3);
|
||||
}
|
||||
.search {
|
||||
width: 100%;
|
||||
margin: 0.2rem 0;
|
||||
display: flex;
|
||||
}
|
||||
.search .search-btn {
|
||||
font-size: 0.2rem;
|
||||
}
|
||||
123
f/web-kboss/src/views/H5/less/all/index.less
Normal file
123
f/web-kboss/src/views/H5/less/all/index.less
Normal file
@ -0,0 +1,123 @@
|
||||
.top-tit {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
background: linear-gradient(90deg, #275AFF 0%, #2EBDFA 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
font-size: .39rem; /* 增大30%: .3rem * 1.3 = .39rem */
|
||||
font-weight: bold;
|
||||
margin: .3rem 0;
|
||||
}
|
||||
|
||||
.supplier-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap; /* 允许换行 */
|
||||
padding: .2rem .22rem;
|
||||
gap: .15rem; /* 使用gap控制间距 */
|
||||
}
|
||||
|
||||
.supplier {
|
||||
flex-shrink: 0; /* 防止收缩 */
|
||||
|
||||
.supplier-title {
|
||||
font-size: .28rem;
|
||||
color: #000;
|
||||
padding: .12rem .2rem;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 0.12rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
white-space: nowrap; /* 防止文字换行 */
|
||||
|
||||
&:hover {
|
||||
background-color: #e0e0e0;
|
||||
transform: translateY(-0.02rem);
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: linear-gradient(90deg, #275aff, #2ebdfa);
|
||||
color: #fff;
|
||||
box-shadow: 0 .04rem .12rem rgba(39, 90, 255, 0.3);
|
||||
transform: translateY(-0.02rem);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
padding: 0 .3rem;
|
||||
.box-item {
|
||||
display: flex;
|
||||
width: 48%;
|
||||
flex-direction: column;
|
||||
align-items: self-start;
|
||||
border: .02rem solid #f0f0f0;
|
||||
border-radius: .2rem;
|
||||
padding: .15rem .2rem;
|
||||
margin: .34rem 0;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-0.05rem);
|
||||
box-shadow: 0 .08rem .2rem rgba(0, 0, 0, 0.1);
|
||||
border-color: #1f70ff;
|
||||
}
|
||||
|
||||
.item-tit{
|
||||
font-size: .26rem;
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
margin-bottom: .1rem;
|
||||
}
|
||||
.item-detail{
|
||||
color: #666;
|
||||
font-size: .22rem;
|
||||
margin: .15rem 0;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.item-desc{
|
||||
color: #666;
|
||||
background-color: #f8f9fa;
|
||||
font-size: .2rem;
|
||||
padding: .08rem .12rem;
|
||||
border-radius: .1rem;
|
||||
margin-bottom: .15rem;
|
||||
border: .01rem solid #e9ecef;
|
||||
}
|
||||
.item-btn{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
.btn{
|
||||
background: linear-gradient(90deg, #1f70ff, #3a8cff);
|
||||
color: #fff;
|
||||
padding: .08rem .2rem;
|
||||
border-radius: .15rem;
|
||||
font-size: 0.24rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
border: none;
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(90deg, #0d5aff, #2a7aff);
|
||||
transform: translateY(-0.02rem);
|
||||
box-shadow: 0 .04rem .1rem rgba(31, 112, 255, 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.search{
|
||||
width: 100%;
|
||||
margin: .2rem 0;
|
||||
display: flex;
|
||||
.search-btn{
|
||||
font-size: .2rem;
|
||||
}
|
||||
}
|
||||
119
f/web-kboss/src/views/H5/less/cloud/cloud.css
Normal file
119
f/web-kboss/src/views/H5/less/cloud/cloud.css
Normal file
@ -0,0 +1,119 @@
|
||||
.top-tit {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
background: linear-gradient(90deg, #275AFF 0%, #2EBDFA 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
font-size: 0.39rem;
|
||||
/* 增大30%: .3rem * 1.3 = .39rem */
|
||||
font-weight: bold;
|
||||
margin: 0.3rem 0;
|
||||
}
|
||||
.supplier-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
/* 允许换行 */
|
||||
padding: 0.2rem 0.22rem;
|
||||
gap: 0.15rem;
|
||||
/* 使用gap控制间距 */
|
||||
}
|
||||
.supplier {
|
||||
flex-shrink: 0;
|
||||
/* 防止收缩 */
|
||||
}
|
||||
.supplier .supplier-title {
|
||||
font-size: 0.28rem;
|
||||
/* 修改为下方代码的字体大小 */
|
||||
color: #000;
|
||||
padding: 0.12rem 0.2rem;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 0.12rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
white-space: nowrap;
|
||||
/* 防止文字换行 */
|
||||
}
|
||||
.supplier .supplier-title:hover {
|
||||
background-color: #e0e0e0;
|
||||
transform: translateY(-0.02rem);
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.supplier .supplier-title.active {
|
||||
background: linear-gradient(90deg, #275aff, #2ebdfa);
|
||||
color: #fff;
|
||||
box-shadow: 0 0.04rem 0.12rem rgba(39, 90, 255, 0.3);
|
||||
transform: translateY(-0.02rem);
|
||||
}
|
||||
.box {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
padding: 0 0.3rem;
|
||||
}
|
||||
.box .box-item {
|
||||
display: flex;
|
||||
width: 48%;
|
||||
flex-direction: column;
|
||||
align-items: self-start;
|
||||
border: 0.02rem solid #f0f0f0;
|
||||
border-radius: 0.2rem;
|
||||
padding: 0.15rem 0.2rem;
|
||||
margin: 0.34rem 0;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.box .box-item:hover {
|
||||
transform: translateY(-0.05rem);
|
||||
box-shadow: 0 0.08rem 0.2rem rgba(0, 0, 0, 0.1);
|
||||
border-color: #1f70ff;
|
||||
}
|
||||
.box .box-item .item-tit {
|
||||
font-size: 0.26rem;
|
||||
/* 修改为下方代码的字体大小 */
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
margin-bottom: 0.1rem;
|
||||
}
|
||||
.box .box-item .item-detail {
|
||||
color: #666;
|
||||
font-size: 0.22rem;
|
||||
/* 修改为下方代码的字体大小 */
|
||||
margin: 0.15rem 0;
|
||||
line-height: 1.4;
|
||||
min-height: 0.4rem;
|
||||
}
|
||||
.box .box-item .item-desc {
|
||||
color: #666;
|
||||
background-color: #f8f9fa;
|
||||
font-size: 0.2rem;
|
||||
/* 修改为下方代码的字体大小 */
|
||||
padding: 0.08rem 0.12rem;
|
||||
border-radius: 0.1rem;
|
||||
margin-bottom: 0.15rem;
|
||||
border: 0.01rem solid #e9ecef;
|
||||
min-height: 0.32rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.box .box-item .item-btn {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.box .box-item .item-btn .btn {
|
||||
background: linear-gradient(90deg, #1f70ff, #3a8cff);
|
||||
color: #fff;
|
||||
padding: 0.08rem 0.2rem;
|
||||
border-radius: 0.15rem;
|
||||
font-size: 0.24rem;
|
||||
/* 修改为下方代码的字体大小 */
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
border: none;
|
||||
}
|
||||
.box .box-item .item-btn .btn:hover {
|
||||
background: linear-gradient(90deg, #0d5aff, #2a7aff);
|
||||
transform: translateY(-0.02rem);
|
||||
box-shadow: 0 0.04rem 0.1rem rgba(31, 112, 255, 0.3);
|
||||
}
|
||||
136
f/web-kboss/src/views/H5/less/cloud/cloud.less
Normal file
136
f/web-kboss/src/views/H5/less/cloud/cloud.less
Normal file
@ -0,0 +1,136 @@
|
||||
.top-tit {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
background: linear-gradient(90deg, #275AFF 0%, #2EBDFA 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
font-size: .39rem;
|
||||
/* 增大30%: .3rem * 1.3 = .39rem */
|
||||
font-weight: bold;
|
||||
margin: .3rem 0;
|
||||
}
|
||||
|
||||
.supplier-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
/* 允许换行 */
|
||||
padding: .2rem .22rem;
|
||||
gap: .15rem;
|
||||
/* 使用gap控制间距 */
|
||||
}
|
||||
|
||||
.supplier {
|
||||
flex-shrink: 0;
|
||||
/* 防止收缩 */
|
||||
|
||||
.supplier-title {
|
||||
font-size: .28rem;
|
||||
/* 修改为下方代码的字体大小 */
|
||||
color: #000;
|
||||
padding: .12rem .2rem;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 0.12rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
white-space: nowrap;
|
||||
/* 防止文字换行 */
|
||||
|
||||
&:hover {
|
||||
background-color: #e0e0e0;
|
||||
transform: translateY(-0.02rem);
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: linear-gradient(90deg, #275aff, #2ebdfa);
|
||||
color: #fff;
|
||||
box-shadow: 0 .04rem .12rem rgba(39, 90, 255, 0.3);
|
||||
transform: translateY(-0.02rem);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
padding: 0 .3rem;
|
||||
|
||||
.box-item {
|
||||
display: flex;
|
||||
width: 48%;
|
||||
flex-direction: column;
|
||||
align-items: self-start;
|
||||
border: .02rem solid #f0f0f0;
|
||||
border-radius: .2rem;
|
||||
padding: .15rem .2rem;
|
||||
margin: .34rem 0;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-0.05rem);
|
||||
box-shadow: 0 .08rem .2rem rgba(0, 0, 0, 0.1);
|
||||
border-color: #1f70ff;
|
||||
}
|
||||
|
||||
.item-tit {
|
||||
font-size: .26rem;
|
||||
/* 修改为下方代码的字体大小 */
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
margin-bottom: .1rem;
|
||||
}
|
||||
|
||||
.item-detail {
|
||||
color: #666;
|
||||
font-size: .22rem;
|
||||
/* 修改为下方代码的字体大小 */
|
||||
margin: .15rem 0;
|
||||
line-height: 1.4;
|
||||
min-height: .4rem;
|
||||
// 确保有最小高度
|
||||
}
|
||||
|
||||
.item-desc {
|
||||
color: #666;
|
||||
background-color: #f8f9fa;
|
||||
font-size: .2rem;
|
||||
/* 修改为下方代码的字体大小 */
|
||||
padding: .08rem .12rem;
|
||||
border-radius: .1rem;
|
||||
margin-bottom: .15rem;
|
||||
border: .01rem solid #e9ecef;
|
||||
min-height: .32rem;
|
||||
// 确保有最小高度
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.item-btn {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
.btn {
|
||||
background: linear-gradient(90deg, #1f70ff, #3a8cff);
|
||||
color: #fff;
|
||||
padding: .08rem .2rem;
|
||||
border-radius: .15rem;
|
||||
font-size: 0.24rem;
|
||||
/* 修改为下方代码的字体大小 */
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
border: none;
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(90deg, #0d5aff, #2a7aff);
|
||||
transform: translateY(-0.02rem);
|
||||
box-shadow: 0 .04rem .1rem rgba(31, 112, 255, 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
274
f/web-kboss/src/views/H5/less/dialog/index.css
Normal file
274
f/web-kboss/src/views/H5/less/dialog/index.css
Normal file
@ -0,0 +1,274 @@
|
||||
.dialog-tit {
|
||||
font-size: 0.405rem;
|
||||
/* 增大35%: .3rem * 1.35 = .405rem */
|
||||
color: #000;
|
||||
padding: 0.2rem 0;
|
||||
}
|
||||
.url_box {
|
||||
font-size: 0.24rem;
|
||||
margin-top: 0.1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.url-container {
|
||||
display: flex;
|
||||
}
|
||||
.url-container .url {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
color: #275aff;
|
||||
text-decoration: none;
|
||||
padding: 0.04rem 0.1rem;
|
||||
border-radius: 0.04rem;
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
.url-container .url:hover {
|
||||
background-color: #e8edff;
|
||||
border-color: #275aff;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 2px 8px rgba(39, 90, 255, 0.1);
|
||||
}
|
||||
.url-container .url.copied {
|
||||
background-color: #e1f3d8;
|
||||
border-color: #67c23a;
|
||||
color: #67c23a;
|
||||
}
|
||||
.url-container .url.copied:hover {
|
||||
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);
|
||||
color: white;
|
||||
font-size: 0.162rem;
|
||||
/* 增大35%: .12rem * 1.35 = .162rem */
|
||||
padding: 0.04rem 0.08rem;
|
||||
border-radius: 0.04rem;
|
||||
white-space: nowrap;
|
||||
z-index: 1000;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s, transform 0.2s;
|
||||
pointer-events: none;
|
||||
}
|
||||
.url-container .tooltip::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
border-width: 0.04rem;
|
||||
border-style: solid;
|
||||
border-color: rgba(0, 0, 0, 0.8) 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: 99999;
|
||||
}
|
||||
::v-deep .product-consult-dialog.el-dialog .el-dialog__header {
|
||||
padding: 0.2rem 0.3rem 0.1rem;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
::v-deep .product-consult-dialog.el-dialog .el-dialog__header .el-dialog__title {
|
||||
font-size: 0.243rem;
|
||||
/* 增大35%: .18rem * 1.35 = .243rem */
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
::v-deep .product-consult-dialog.el-dialog .el-dialog__body {
|
||||
padding: 0.2rem 0.3rem;
|
||||
max-height: 65vh;
|
||||
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;
|
||||
}
|
||||
::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 */
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
line-height: 1.4;
|
||||
}
|
||||
::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 */
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 0.04rem;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
::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;
|
||||
}
|
||||
::v-deep .el-form .el-form-item .el-textarea__inner {
|
||||
min-height: 0.9rem !important;
|
||||
resize: vertical;
|
||||
padding: 0.08rem 0.12rem;
|
||||
}
|
||||
::v-deep .el-form .el-form-item .el-radio {
|
||||
margin-right: 0.2rem;
|
||||
}
|
||||
::v-deep .el-form .el-form-item .el-radio .el-radio__label {
|
||||
font-size: 0.189rem;
|
||||
/* 增大35%: .14rem * 1.35 = .189rem */
|
||||
}
|
||||
.agreement-checkbox {
|
||||
margin-top: 0.15rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 0.243rem;
|
||||
/* 增大35%: .18rem * 1.35 = .243rem */
|
||||
line-height: 1.6;
|
||||
color: #666;
|
||||
}
|
||||
.agreement-checkbox ::v-deep .el-checkbox__label {
|
||||
font-size: 0.13rem;
|
||||
/* 增大35%: .12rem * 1.35 = .162rem */
|
||||
line-height: 1.6;
|
||||
color: #666;
|
||||
}
|
||||
.agreement-checkbox span {
|
||||
color: #275aff;
|
||||
font-weight: 500;
|
||||
}
|
||||
.qrcode-section {
|
||||
margin-top: 0.2rem;
|
||||
padding: 0.15rem;
|
||||
background: #f8f9fa;
|
||||
border-radius: 0.06rem;
|
||||
border: 1px solid #eee;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.qrcode-section img {
|
||||
width: 1.2rem;
|
||||
height: 1.2rem;
|
||||
object-fit: contain;
|
||||
margin-right: 0.15rem;
|
||||
}
|
||||
.qrcode-section span {
|
||||
font-size: 0.1755rem;
|
||||
/* 增大35%: .13rem * 1.35 = .1755rem */
|
||||
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;
|
||||
}
|
||||
@media screen and (max-width: 750px) {
|
||||
::v-deep .product-consult-dialog.el-dialog {
|
||||
width: 90% !important;
|
||||
margin-top: 10vh !important;
|
||||
}
|
||||
::v-deep .product-consult-dialog.el-dialog .el-dialog__header {
|
||||
padding: 0.15rem 0.2rem 0.08rem;
|
||||
}
|
||||
::v-deep .product-consult-dialog.el-dialog .el-dialog__body {
|
||||
padding: 0.15rem 0.2rem;
|
||||
max-height: 60vh;
|
||||
}
|
||||
.url-container {
|
||||
display: block;
|
||||
margin-top: 0.05rem;
|
||||
}
|
||||
.url-container .url {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 0.06rem 0.12rem;
|
||||
font-size: 0.297rem;
|
||||
/* 增大35%: .22rem * 1.35 = .297rem */
|
||||
}
|
||||
.url-container .url .copy-hint {
|
||||
font-size: 0.162rem;
|
||||
/* 增大35%: .12rem * 1.35 = .162rem */
|
||||
margin-left: 0.08rem;
|
||||
}
|
||||
.url-container .tooltip {
|
||||
font-size: 0.135rem;
|
||||
/* 增大35%: .1rem * 1.35 = .135rem */
|
||||
padding: 0.03rem 0.06rem;
|
||||
}
|
||||
.qrcode-section {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
.qrcode-section img {
|
||||
margin-right: 0;
|
||||
margin-bottom: 0.1rem;
|
||||
}
|
||||
}
|
||||
: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;
|
||||
}
|
||||
}
|
||||
321
f/web-kboss/src/views/H5/less/dialog/index.less
Normal file
321
f/web-kboss/src/views/H5/less/dialog/index.less
Normal file
@ -0,0 +1,321 @@
|
||||
.dialog-tit{
|
||||
font-size: .405rem; /* 增大35%: .3rem * 1.35 = .405rem */
|
||||
color: #000;
|
||||
padding: .2rem 0;
|
||||
}
|
||||
.url_box{
|
||||
font-size: .24rem;
|
||||
margin-top: .1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.url-container {
|
||||
display: flex;
|
||||
// position: relative;
|
||||
// cursor: pointer;
|
||||
|
||||
.url {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
color: #275aff;
|
||||
text-decoration: none;
|
||||
padding: .04rem .1rem;
|
||||
border-radius: .04rem;
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
|
||||
&:hover {
|
||||
background-color: #e8edff;
|
||||
border-color: #275aff;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 2px 8px rgba(39, 90, 255, 0.1);
|
||||
}
|
||||
|
||||
&.copied {
|
||||
background-color: #e1f3d8;
|
||||
border-color: #67c23a;
|
||||
color: #67c23a;
|
||||
|
||||
&:hover {
|
||||
background-color: #d1edc4;
|
||||
border-color: #5daf34;
|
||||
}
|
||||
}
|
||||
|
||||
.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);
|
||||
color: white;
|
||||
font-size: .162rem; /* 增大35%: .12rem * 1.35 = .162rem */
|
||||
padding: .04rem .08rem;
|
||||
border-radius: .04rem;
|
||||
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: .04rem;
|
||||
border-style: solid;
|
||||
border-color: rgba(0, 0, 0, 0.8) transparent transparent transparent;
|
||||
}
|
||||
|
||||
&.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: .08rem;
|
||||
z-index: 99999;
|
||||
|
||||
.el-dialog__header {
|
||||
padding: .2rem .3rem .1rem;
|
||||
border-bottom: 1px solid #eee;
|
||||
|
||||
.el-dialog__title {
|
||||
font-size: .243rem; /* 增大35%: .18rem * 1.35 = .243rem */
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.el-dialog__body {
|
||||
padding: .2rem .3rem;
|
||||
max-height: 65vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.el-dialog__footer {
|
||||
padding: .15rem .3rem .2rem;
|
||||
border-top: 1px solid #eee;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 表单样式优化
|
||||
::v-deep .el-form {
|
||||
.el-form-item {
|
||||
margin-bottom: .4rem;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: .1rem;
|
||||
}
|
||||
|
||||
.el-form-item__label {
|
||||
padding-bottom: .06rem;
|
||||
font-size: .27rem; /* 增大35%: .2rem * 1.35 = .27rem */
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.el-input,
|
||||
.el-textarea {
|
||||
|
||||
.el-input__inner,
|
||||
.el-textarea__inner {
|
||||
font-size: .189rem; /* 增大35%: .14rem * 1.35 = .189rem */
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: .04rem;
|
||||
transition: border-color 0.2s;
|
||||
|
||||
&:focus {
|
||||
border-color: #409eff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-textarea__inner {
|
||||
min-height: .9rem !important;
|
||||
resize: vertical;
|
||||
padding: .08rem .12rem;
|
||||
}
|
||||
|
||||
.el-radio {
|
||||
margin-right: .2rem;
|
||||
|
||||
.el-radio__label {
|
||||
font-size: .189rem; /* 增大35%: .14rem * 1.35 = .189rem */
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 协议复选框样式
|
||||
.agreement-checkbox {
|
||||
margin-top: .15rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: .243rem; /* 增大35%: .18rem * 1.35 = .243rem */
|
||||
line-height: 1.6;
|
||||
color: #666;
|
||||
|
||||
::v-deep .el-checkbox__label {
|
||||
font-size: .13rem; /* 增大35%: .12rem * 1.35 = .162rem */
|
||||
line-height: 1.6;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #275aff;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
// 二维码区域样式
|
||||
.qrcode-section {
|
||||
margin-top: .2rem;
|
||||
padding: .15rem;
|
||||
background: #f8f9fa;
|
||||
border-radius: .06rem;
|
||||
border: 1px solid #eee;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
width: 1.2rem;
|
||||
height: 1.2rem;
|
||||
object-fit: contain;
|
||||
margin-right: .15rem;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: .1755rem; /* 增大35%: .13rem * 1.35 = .1755rem */
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
// 响应式适配
|
||||
@media screen and (max-width: 750px) {
|
||||
::v-deep .product-consult-dialog {
|
||||
&.el-dialog {
|
||||
width: 90% !important;
|
||||
margin-top: 10vh !important;
|
||||
|
||||
.el-dialog__header {
|
||||
padding: .15rem .2rem .08rem;
|
||||
}
|
||||
|
||||
.el-dialog__body {
|
||||
padding: .15rem .2rem;
|
||||
max-height: 60vh;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.url-container {
|
||||
display: block;
|
||||
margin-top: .05rem;
|
||||
|
||||
.url {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: .06rem .12rem;
|
||||
font-size: .297rem; /* 增大35%: .22rem * 1.35 = .297rem */
|
||||
|
||||
.copy-hint {
|
||||
font-size: .162rem; /* 增大35%: .12rem * 1.35 = .162rem */
|
||||
margin-left: .08rem;
|
||||
}
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
font-size: .135rem; /* 增大35%: .1rem * 1.35 = .135rem */
|
||||
padding: .03rem .06rem;
|
||||
}
|
||||
}
|
||||
|
||||
.qrcode-section {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
|
||||
img {
|
||||
margin-right: 0;
|
||||
margin-bottom: .1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-message) {
|
||||
font-size: .216rem !important; /* 增大35%: .16rem * 1.35 = .216rem */
|
||||
min-width: auto !important;
|
||||
padding: .12rem .2rem !important;
|
||||
border-radius: .08rem !important;
|
||||
}
|
||||
|
||||
:deep(.el-message__content) {
|
||||
font-size: .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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -8,7 +8,7 @@
|
||||
.top-box {
|
||||
width: 100%;
|
||||
height: 50vh;
|
||||
background: url("../images/banner.png") no-repeat;
|
||||
background: url("../../images/banner.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -26,13 +26,13 @@
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
font-size: 0.55rem;
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
.title .title-top {
|
||||
font-size: 0.55rem;
|
||||
font-size: 0.6rem;
|
||||
}
|
||||
.title .title-btm {
|
||||
font-size: 0.26rem;
|
||||
font-size: 0.338rem;
|
||||
margin-top: 0.98rem;
|
||||
}
|
||||
.text {
|
||||
@ -44,11 +44,12 @@
|
||||
width: 100%;
|
||||
}
|
||||
.text .text-top {
|
||||
font-size: 0.26rem;
|
||||
font-size: 0.338rem;
|
||||
color: #000;
|
||||
font-weight: 700;
|
||||
}
|
||||
.text .text-btm {
|
||||
font-size: 0.18rem;
|
||||
font-size: 0.234rem;
|
||||
color: #707070;
|
||||
}
|
||||
.base-box,
|
||||
@ -74,7 +75,7 @@
|
||||
background-color: #fff;
|
||||
border-radius: 0.1rem;
|
||||
padding: 0.2rem;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
||||
box-shadow: 0 0.02rem 0.08rem rgba(0, 0, 0, 0.05);
|
||||
margin-bottom: 0.2rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -82,7 +83,7 @@
|
||||
.base-box .content .item-box .item-title,
|
||||
.journey-box .content .item-box .item-title,
|
||||
.latitude-box .content .item-box .item-title {
|
||||
font-size: 0.2rem;
|
||||
font-size: 0.26rem;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 0.1rem;
|
||||
@ -90,7 +91,7 @@
|
||||
.base-box .content .item-box .item-description,
|
||||
.journey-box .content .item-box .item-description,
|
||||
.latitude-box .content .item-box .item-description {
|
||||
font-size: 0.14rem;
|
||||
font-size: 0.2rem;
|
||||
color: #666;
|
||||
margin-bottom: 0.15rem;
|
||||
line-height: 1.4;
|
||||
@ -103,18 +104,15 @@
|
||||
.base-box .content .item-box .advantage-list .advantage-item,
|
||||
.journey-box .content .item-box .advantage-list .advantage-item,
|
||||
.latitude-box .content .item-box .advantage-list .advantage-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
font-size: 0.12rem;
|
||||
display: block;
|
||||
font-size: 0.156rem;
|
||||
color: #666;
|
||||
margin-bottom: 0.08rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.base-box .content .item-box .advantage-list .advantage-item .advantage-icon,
|
||||
.journey-box .content .item-box .advantage-list .advantage-item .advantage-icon,
|
||||
.latitude-box .content .item-box .advantage-list .advantage-item .advantage-icon {
|
||||
width: 0.16rem;
|
||||
height: 0.16rem;
|
||||
width: 0.18rem;
|
||||
height: 0.18rem;
|
||||
margin-right: 0.05rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
@ -122,19 +120,21 @@
|
||||
.journey-box .content .item-box .advantage-list .advantage-item .advantage-name,
|
||||
.latitude-box .content .item-box .advantage-list .advantage-item .advantage-name {
|
||||
color: #000;
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
font-size: 0.2rem;
|
||||
margin-right: 0.05rem;
|
||||
}
|
||||
.base-box .content .item-box .advantage-list .advantage-item .advantage-content,
|
||||
.journey-box .content .item-box .advantage-list .advantage-item .advantage-content,
|
||||
.latitude-box .content .item-box .advantage-list .advantage-item .advantage-content {
|
||||
flex: 1;
|
||||
font-size: 0.18rem;
|
||||
}
|
||||
.base-box .content .item-box .item-price,
|
||||
.journey-box .content .item-box .item-price,
|
||||
.latitude-box .content .item-box .item-price {
|
||||
font-size: 0.1rem;
|
||||
font-size: 0.13rem;
|
||||
font-weight: bold;
|
||||
color: #d4d6e1;
|
||||
margin: 0.15rem 0;
|
||||
@ -142,14 +142,14 @@
|
||||
.base-box .content .item-box .item-price .price,
|
||||
.journey-box .content .item-box .item-price .price,
|
||||
.latitude-box .content .item-box .item-price .price {
|
||||
font-size: 0.22rem;
|
||||
font-size: 0.38rem;
|
||||
color: #f52220;
|
||||
}
|
||||
.base-box .content .item-box .item-price .price-icon,
|
||||
.journey-box .content .item-box .item-price .price-icon,
|
||||
.latitude-box .content .item-box .item-price .price-icon {
|
||||
color: #f52220;
|
||||
font-size: 0.1rem;
|
||||
font-size: 0.18rem;
|
||||
}
|
||||
.base-box .content .item-box .tag-list,
|
||||
.journey-box .content .item-box .tag-list,
|
||||
@ -163,7 +163,7 @@
|
||||
.journey-box .content .item-box .tag-list .tag-item,
|
||||
.latitude-box .content .item-box .tag-list .tag-item {
|
||||
padding: 0.04rem 0.12rem;
|
||||
font-size: 0.12rem;
|
||||
font-size: 0.18rem;
|
||||
color: #aeb6bf;
|
||||
background-color: #fff;
|
||||
border: 0.02rem solid #c8d6e7;
|
||||
@ -184,7 +184,8 @@
|
||||
.journey-box .content .item-box .item-button .item-button-text,
|
||||
.latitude-box .content .item-box .item-button .item-button-text {
|
||||
color: #fff;
|
||||
font-size: 0.14rem;
|
||||
font-size: 0.182rem;
|
||||
/* 增大30%: 0.14rem * 1.3 = 0.182rem */
|
||||
}
|
||||
.partner {
|
||||
background-color: #f8f9fd;
|
||||
@ -293,7 +294,7 @@
|
||||
}
|
||||
.contact-info {
|
||||
flex: 1;
|
||||
font-size: 0.16rem;
|
||||
font-size: 0.24rem;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 0.24rem;
|
||||
@ -329,14 +330,14 @@
|
||||
margin-top: 0.02rem;
|
||||
color: #275AFF;
|
||||
flex-shrink: 0;
|
||||
font-size: 0.2rem;
|
||||
font-size: 0.26rem;
|
||||
}
|
||||
.contact-info .contact-item .label {
|
||||
color: #666;
|
||||
flex-shrink: 0;
|
||||
font-weight: 500;
|
||||
margin-right: 0.08rem;
|
||||
font-size: 0.14rem;
|
||||
font-size: 0.24rem;
|
||||
}
|
||||
.contact-info .contact-item .value {
|
||||
color: #444;
|
||||
@ -360,7 +361,8 @@
|
||||
text-decoration: none;
|
||||
transition: all 0.3s;
|
||||
font-weight: 500;
|
||||
font-size: 0.16rem;
|
||||
font-size: 0.208rem;
|
||||
/* 增大30%: 0.16rem * 1.3 = 0.208rem */
|
||||
}
|
||||
.contact-info .contact-item .phone-link:hover {
|
||||
color: #275AFF;
|
||||
@ -380,7 +382,8 @@
|
||||
text-decoration: none;
|
||||
word-break: break-all;
|
||||
font-weight: 500;
|
||||
font-size: 0.16rem;
|
||||
font-size: 0.208rem;
|
||||
/* 增大30%: 0.16rem * 1.3 = 0.208rem */
|
||||
}
|
||||
.contact-info .contact-item .email-link:hover {
|
||||
color: #2ebdfa;
|
||||
@ -433,7 +436,8 @@
|
||||
}
|
||||
.code-img .qr-box .qr-content {
|
||||
color: #333;
|
||||
font-size: 0.14rem;
|
||||
font-size: 0.182rem;
|
||||
/* 增大30%: 0.14rem * 1.3 = 0.182rem */
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
@ -486,16 +490,16 @@
|
||||
}
|
||||
.icp-info .icp-item .icp-text {
|
||||
color: #888;
|
||||
font-size: 0.14rem;
|
||||
font-size: 0.24rem;
|
||||
}
|
||||
.icp-info .icp-item .icp-number {
|
||||
color: #444;
|
||||
font-weight: 500;
|
||||
font-size: 0.14rem;
|
||||
font-size: 0.24rem;
|
||||
}
|
||||
.icp-info .copyright {
|
||||
color: #888;
|
||||
font-size: 0.14rem;
|
||||
font-size: 0.24rem;
|
||||
font-weight: 300;
|
||||
}
|
||||
.record-info {
|
||||
@ -535,7 +539,7 @@
|
||||
.police-record .police-link {
|
||||
color: #666;
|
||||
text-decoration: none;
|
||||
font-size: 0.14rem;
|
||||
font-size: 0.24rem;
|
||||
}
|
||||
.police-record .police-link:hover {
|
||||
color: #275AFF;
|
||||
@ -544,7 +548,7 @@
|
||||
.license-record .license-link {
|
||||
color: #666;
|
||||
text-decoration: none;
|
||||
font-size: 0.14rem;
|
||||
font-size: 0.24rem;
|
||||
padding: 0.08rem 0.16rem;
|
||||
background: #f9fafc;
|
||||
border-radius: 0.24rem;
|
||||
@ -600,7 +604,7 @@
|
||||
}
|
||||
.mobile-qr .qr-item .qr-desc {
|
||||
color: #333;
|
||||
font-size: 0.16rem;
|
||||
font-size: 0.208rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
/* PC端二维码 */
|
||||
@ -649,8 +653,8 @@
|
||||
}
|
||||
.pc-qr .qr-box .qr-content {
|
||||
color: #333;
|
||||
font-size: 0.14rem;
|
||||
font-size: 0.182rem;
|
||||
/* 增大30%: 0.14rem * 1.3 = 0.182rem */
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
/* 响应式调整 */
|
||||
@ -9,7 +9,7 @@
|
||||
.top-box {
|
||||
width: 100%;
|
||||
height: 50vh;
|
||||
background: url("../images/banner.png") no-repeat;
|
||||
background: url("../../images/banner.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -28,15 +28,16 @@
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
font-size: .55rem;
|
||||
font-size: .7rem;
|
||||
}
|
||||
|
||||
.title-top {
|
||||
font-size: .55rem;
|
||||
font-size: .6rem;
|
||||
|
||||
}
|
||||
|
||||
.title-btm {
|
||||
font-size: .26rem;
|
||||
font-size: .338rem;
|
||||
margin-top: .98rem;
|
||||
}
|
||||
}
|
||||
@ -50,12 +51,13 @@
|
||||
width: 100%;
|
||||
|
||||
.text-top {
|
||||
font-size: .26rem;
|
||||
font-size: .338rem;
|
||||
color: #000;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.text-btm {
|
||||
font-size: .18rem;
|
||||
font-size: .234rem;
|
||||
color: #707070;
|
||||
}
|
||||
}
|
||||
@ -79,20 +81,20 @@
|
||||
background-color: #fff;
|
||||
border-radius: 0.1rem;
|
||||
padding: 0.2rem;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
||||
box-shadow: 0 .02rem .08rem rgba(0, 0, 0, 0.05);
|
||||
margin-bottom: 0.2rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.item-title {
|
||||
font-size: 0.2rem;
|
||||
font-size: 0.26rem;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 0.1rem;
|
||||
}
|
||||
|
||||
.item-description {
|
||||
font-size: 0.14rem;
|
||||
font-size: 0.2rem;
|
||||
color: #666;
|
||||
margin-bottom: 0.15rem;
|
||||
line-height: 1.4;
|
||||
@ -102,47 +104,48 @@
|
||||
margin: 0.1rem 0;
|
||||
|
||||
.advantage-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
font-size: 0.12rem;
|
||||
display: block;
|
||||
font-size: 0.156rem;
|
||||
color: #666;
|
||||
margin-bottom: 0.08rem;
|
||||
line-height: 1.4;
|
||||
// margin-bottom: 0.08rem;
|
||||
// line-height: 1.4;
|
||||
|
||||
.advantage-icon {
|
||||
width: 0.16rem;
|
||||
height: 0.16rem;
|
||||
width: 0.18rem;
|
||||
height: 0.18rem;
|
||||
margin-right: 0.05rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.advantage-name {
|
||||
color: #000;
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
font-size: .2rem;
|
||||
margin-right: 0.05rem;
|
||||
}
|
||||
|
||||
.advantage-content {
|
||||
flex: 1;
|
||||
font-size: .18rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-price {
|
||||
font-size: 0.1rem;
|
||||
font-size: 0.13rem;
|
||||
font-weight: bold;
|
||||
color: #d4d6e1;
|
||||
margin: 0.15rem 0;
|
||||
|
||||
.price {
|
||||
font-size: .22rem;
|
||||
font-size: .38rem;
|
||||
color: #f52220;
|
||||
}
|
||||
|
||||
.price-icon {
|
||||
color: #f52220;
|
||||
font-size: .1rem;
|
||||
font-size: .18rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -154,7 +157,7 @@
|
||||
|
||||
.tag-item {
|
||||
padding: 0.04rem 0.12rem;
|
||||
font-size: 0.12rem;
|
||||
font-size: 0.18rem;
|
||||
color: #aeb6bf;
|
||||
background-color: #fff;
|
||||
border: .02rem solid #c8d6e7;
|
||||
@ -173,7 +176,7 @@
|
||||
|
||||
.item-button-text {
|
||||
color: #fff;
|
||||
font-size: 0.14rem;
|
||||
font-size: 0.182rem; /* 增大30%: 0.14rem * 1.3 = 0.182rem */
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -296,22 +299,16 @@
|
||||
height: .8rem;
|
||||
margin-bottom: 0.4rem;
|
||||
border-radius: 0.12rem;
|
||||
// padding: 0.2rem;
|
||||
// background: #fff;
|
||||
// box-shadow: 0 2px 12px rgba(39, 90, 255, 0.08);
|
||||
|
||||
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// object-fit: contain;
|
||||
}
|
||||
}
|
||||
|
||||
.contact-info {
|
||||
flex: 1;
|
||||
font-size: 0.16rem;
|
||||
font-size: 0.24rem;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 0.24rem;
|
||||
@ -347,7 +344,7 @@
|
||||
margin-top: 0.02rem;
|
||||
color: #275AFF;
|
||||
flex-shrink: 0;
|
||||
font-size: 0.2rem;
|
||||
font-size: 0.26rem;
|
||||
}
|
||||
|
||||
.label {
|
||||
@ -355,7 +352,7 @@
|
||||
flex-shrink: 0;
|
||||
font-weight: 500;
|
||||
margin-right: 0.08rem;
|
||||
font-size: 0.14rem;
|
||||
font-size: 0.24rem;
|
||||
}
|
||||
|
||||
.value {
|
||||
@ -381,7 +378,7 @@
|
||||
text-decoration: none;
|
||||
transition: all 0.3s;
|
||||
font-weight: 500;
|
||||
font-size: 0.16rem;
|
||||
font-size: 0.208rem; /* 增大30%: 0.16rem * 1.3 = 0.208rem */
|
||||
|
||||
&:hover {
|
||||
color: #275AFF;
|
||||
@ -403,7 +400,7 @@
|
||||
text-decoration: none;
|
||||
word-break: break-all;
|
||||
font-weight: 500;
|
||||
font-size: 0.16rem;
|
||||
font-size: 0.208rem; /* 增大30%: 0.16rem * 1.3 = 0.208rem */
|
||||
|
||||
&:hover {
|
||||
color: #2ebdfa;
|
||||
@ -462,7 +459,7 @@
|
||||
|
||||
.qr-content {
|
||||
color: #333;
|
||||
font-size: 0.14rem;
|
||||
font-size: 0.182rem; /* 增大30%: 0.14rem * 1.3 = 0.182rem */
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
@ -516,19 +513,19 @@
|
||||
|
||||
.icp-text {
|
||||
color: #888;
|
||||
font-size: 0.14rem;
|
||||
font-size: 0.24rem;
|
||||
}
|
||||
|
||||
.icp-number {
|
||||
color: #444;
|
||||
font-weight: 500;
|
||||
font-size: 0.14rem;
|
||||
font-size: 0.24rem;
|
||||
}
|
||||
}
|
||||
|
||||
.copyright {
|
||||
color: #888;
|
||||
font-size: 0.14rem;
|
||||
font-size: 0.24rem;
|
||||
font-weight: 300;
|
||||
}
|
||||
}
|
||||
@ -572,7 +569,7 @@
|
||||
.police-link {
|
||||
color: #666;
|
||||
text-decoration: none;
|
||||
font-size: 0.14rem;
|
||||
font-size: 0.24rem;
|
||||
|
||||
&:hover {
|
||||
color: #275AFF;
|
||||
@ -585,7 +582,7 @@
|
||||
.license-link {
|
||||
color: #666;
|
||||
text-decoration: none;
|
||||
font-size: 0.14rem;
|
||||
font-size: 0.24rem;
|
||||
padding: 0.08rem 0.16rem;
|
||||
background: #f9fafc;
|
||||
border-radius: 0.24rem;
|
||||
@ -645,7 +642,7 @@
|
||||
|
||||
.qr-desc {
|
||||
color: #333;
|
||||
font-size: 0.16rem;
|
||||
font-size: 0.208rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
@ -699,59 +696,9 @@
|
||||
|
||||
.qr-content {
|
||||
color: #333;
|
||||
font-size: 0.14rem;
|
||||
font-size: 0.182rem; /* 增大30%: 0.14rem * 1.3 = 0.182rem */
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 响应式调整 */
|
||||
// @media (max-width: 768px) {
|
||||
// .footer {
|
||||
// padding: 0.4rem 0.2rem 0.3rem;
|
||||
// }
|
||||
|
||||
// .footer-top {
|
||||
// padding-bottom: 0.3rem;
|
||||
// margin-bottom: 0.3rem;
|
||||
// }
|
||||
|
||||
// // .logo-footer {
|
||||
// // width: 2rem;
|
||||
// // height: 0.5rem;
|
||||
// // }
|
||||
|
||||
// .contact-info {
|
||||
// .contact-item {
|
||||
// font-size: 0.14rem;
|
||||
// padding: 0.14rem 0.16rem;
|
||||
// }
|
||||
// }
|
||||
|
||||
// .footer-bottom {
|
||||
// padding: 0.24rem 0.16rem;
|
||||
// font-size: 0.13rem;
|
||||
// }
|
||||
// }
|
||||
|
||||
// @media (max-width: 480px) {
|
||||
// .footer {
|
||||
// padding: 0.3rem 0.15rem 0.2rem;
|
||||
// }
|
||||
|
||||
// .contact-info {
|
||||
// grid-template-columns: 1fr;
|
||||
// gap: 0.16rem;
|
||||
|
||||
// .contact-item {
|
||||
// font-size: 0.13rem;
|
||||
// padding: 0.12rem 0.14rem;
|
||||
// }
|
||||
// }
|
||||
|
||||
// .record-info {
|
||||
// flex-direction: column;
|
||||
// gap: 0.12rem;
|
||||
// }
|
||||
// }
|
||||
@ -73,10 +73,10 @@
|
||||
import { reqNavList } from '@/api/H5/index'
|
||||
import ProductConsultDialog from '../H5_dialog/index.vue'
|
||||
import { reqProductConsult } from '@/api/H5/index'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
ProductConsultDialog
|
||||
ProductConsultDialog,
|
||||
|
||||
},
|
||||
|
||||
data() {
|
||||
@ -185,119 +185,5 @@ export default {
|
||||
}
|
||||
</style>
|
||||
<style lang="less" scoped>
|
||||
.top-tit {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
background: linear-gradient(90deg, #275AFF 0%, #2EBDFA 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
font-size: .3rem;
|
||||
font-weight: bold;
|
||||
margin-bottom: .3rem;
|
||||
}
|
||||
|
||||
.supplier-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap; /* 允许换行 */
|
||||
padding: .2rem .22rem;
|
||||
gap: .15rem; /* 使用gap控制间距 */
|
||||
}
|
||||
|
||||
.supplier {
|
||||
flex-shrink: 0; /* 防止收缩 */
|
||||
|
||||
.supplier-title {
|
||||
font-size: .2rem;
|
||||
color: #000;
|
||||
padding: .12rem .2rem;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 0.12rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
white-space: nowrap; /* 防止文字换行 */
|
||||
|
||||
&:hover {
|
||||
background-color: #e0e0e0;
|
||||
transform: translateY(-0.02rem);
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: linear-gradient(90deg, #275aff, #2ebdfa);
|
||||
color: #fff;
|
||||
box-shadow: 0 .04rem .12rem rgba(39, 90, 255, 0.3);
|
||||
transform: translateY(-0.02rem);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
padding: 0 .3rem;
|
||||
.box-item {
|
||||
display: flex;
|
||||
width: 48%;
|
||||
flex-direction: column;
|
||||
align-items: self-start;
|
||||
border: .02rem solid #f0f0f0;
|
||||
border-radius: .2rem;
|
||||
padding: .15rem .2rem;
|
||||
margin: .34rem 0;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-0.05rem);
|
||||
box-shadow: 0 .08rem .2rem rgba(0, 0, 0, 0.1);
|
||||
border-color: #1f70ff;
|
||||
}
|
||||
|
||||
.item-tit{
|
||||
font-size: .16rem;
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
margin-bottom: .1rem;
|
||||
}
|
||||
.item-detail{
|
||||
color: #666;
|
||||
font-size: .13rem;
|
||||
margin: .15rem 0;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.item-desc{
|
||||
color: #666;
|
||||
background-color: #f8f9fa;
|
||||
font-size: .12rem;
|
||||
padding: .08rem .12rem;
|
||||
border-radius: .1rem;
|
||||
margin-bottom: .15rem;
|
||||
border: .01rem solid #e9ecef;
|
||||
}
|
||||
.item-btn{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
.btn{
|
||||
background: linear-gradient(90deg, #1f70ff, #3a8cff);
|
||||
color: #fff;
|
||||
padding: .08rem .2rem;
|
||||
border-radius: .15rem;
|
||||
font-size: 0.14rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
border: none;
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(90deg, #0d5aff, #2a7aff);
|
||||
transform: translateY(-0.02rem);
|
||||
box-shadow: 0 .04rem .1rem rgba(31, 112, 255, 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@import url('../less/all/index.less');
|
||||
</style>
|
||||
|
||||
@ -15,8 +15,8 @@
|
||||
<!-- 云筑企业基座 -->
|
||||
<div class="base-box">
|
||||
<div class="text">
|
||||
<p class="text-top">云筑企业基座</p>
|
||||
<p class="text-btm">多云结合 让上云更简单</p>
|
||||
<div class="text-top">云筑企业基座</div>
|
||||
<div class="text-btm">多云结合 让上云更简单</div>
|
||||
</div>
|
||||
<!-- 内容 -->
|
||||
<div class="content">
|
||||
@ -27,9 +27,11 @@
|
||||
<!-- 优势列表 -->
|
||||
<div class="advantage-list" v-if="item.list && item.list.length">
|
||||
<div class="advantage-item" v-for="listItem in item.list" :key="listItem.id">
|
||||
<p>
|
||||
<img v-if="listItem.icon" :src="getIconPath(listItem.icon)" alt="" class="advantage-icon" />
|
||||
<span v-if="listItem.name" class="advantage-name">{{ listItem.name }} : </span>
|
||||
<span class="advantage-content">{{ listItem.content }}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -47,8 +49,8 @@
|
||||
<!-- 智算未来征程 -->
|
||||
<div class="journey-box">
|
||||
<div class="text">
|
||||
<p class="text-top">智算未来征程</p>
|
||||
<p class="text-btm">多元异构 灵活短租</p>
|
||||
<div class="text-top">智算未来征程</div>
|
||||
<div class="text-btm">多元异构 灵活短租</div>
|
||||
</div>
|
||||
<!-- 内容 -->
|
||||
<div class="content">
|
||||
@ -59,9 +61,11 @@
|
||||
<!-- 优势列表 -->
|
||||
<div class="advantage-list" v-if="item.list && item.list.length">
|
||||
<div class="advantage-item" v-for="listItem in item.list" :key="listItem.id">
|
||||
<p>
|
||||
<img v-if="listItem.icon" :src="getIconPath(listItem.icon)" alt="" class="advantage-icon" />
|
||||
<span v-if="listItem.name" class="advantage-name">{{ listItem.name }}：</span>
|
||||
<span v-if="listItem.name" class="advantage-name">{{ listItem.name }} : </span>
|
||||
<span class="advantage-content">{{ listItem.content }}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -79,8 +83,8 @@
|
||||
<!-- 网织智能经纬 -->
|
||||
<div class="latitude-box">
|
||||
<div class="text">
|
||||
<p class="text-top">网织智能经纬</p>
|
||||
<p class="text-btm">云算网结合 让连接更简单</p>
|
||||
<div class="text-top">网织智能经纬</div>
|
||||
<div class="text-btm">云算网结合 让连接更简单</div>
|
||||
</div>
|
||||
<!-- 内容 -->
|
||||
<div class="content">
|
||||
@ -91,9 +95,11 @@
|
||||
<!-- 优势列表 -->
|
||||
<div class="advantage-list" v-if="item.advantageList && item.advantageList.length">
|
||||
<div class="advantage-item" v-for="advantage in item.advantageList" :key="advantage.id">
|
||||
<p>
|
||||
<img v-if="advantage.icon" :src="getIconPath(advantage.icon)" alt="" class="advantage-icon" />
|
||||
<span class="advantage-name">{{ advantage.name }}：</span>
|
||||
<span class="advantage-content">{{ advantage.content }}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -114,8 +120,8 @@
|
||||
<!-- 合作伙伴 -->
|
||||
<div class="partner">
|
||||
<div class="text">
|
||||
<p class="text-top">合作伙伴</p>
|
||||
<p class="text-btm">Partners</p>
|
||||
<div class="text-top">合作伙伴</div>
|
||||
<div class="text-btm">Partners</div>
|
||||
</div>
|
||||
<!-- 滚动合作伙伴内容 -->
|
||||
<div class="partner-scroll">
|
||||
@ -136,7 +142,7 @@
|
||||
<div class="footer-top">
|
||||
<div class="logo-footer">
|
||||
<img :src="logoImg" alt="公司logo" v-if="logoImg">
|
||||
<img src="@/assets/kyy/LOGO.png" alt="公司logo" class="img" v-else>
|
||||
<!-- <img src="@/assets/kyy/LOGO.png" alt="公司logo" class="img"> -->
|
||||
</div>
|
||||
<div class="contact-info">
|
||||
<div class="contact-item">
|
||||
@ -453,5 +459,5 @@ body {
|
||||
</style>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import url('../all_less/index.less');
|
||||
@import url('../less/official/index.less');
|
||||
</style>
|
||||
|
||||
@ -4,19 +4,19 @@
|
||||
<div class="top-tit">
|
||||
开元云
|
||||
</div>
|
||||
|
||||
<!-- 搜索 -->
|
||||
<div class="search">
|
||||
<div class="input">
|
||||
<input type="text" placeholder="请输入产品名称" v-model="searchValue"></input>
|
||||
</div>
|
||||
<div class="search-btn">
|
||||
搜索
|
||||
</div>
|
||||
</div>
|
||||
<!-- 供应商 -->
|
||||
<div v-if="cloudData.secMenu && cloudData.secMenu.length > 0" class="supplier-container">
|
||||
<div
|
||||
v-for="(value, index) in cloudData.secMenu"
|
||||
:key="index"
|
||||
class="supplier"
|
||||
@click="selectSupplier(index)"
|
||||
>
|
||||
<div
|
||||
class="supplier-title"
|
||||
:class="{ 'active': activeSupplierIndex === index }"
|
||||
>
|
||||
<div v-for="(value, index) in cloudData.secMenu" :key="index" class="supplier" @click="selectSupplier(index)">
|
||||
<div class="supplier-title" :class="{ 'active': activeSupplierIndex === index }">
|
||||
{{ value.secTitle }}
|
||||
</div>
|
||||
</div>
|
||||
@ -28,11 +28,7 @@
|
||||
<template v-if="cloudData.secMenu && cloudData.secMenu.length > 0 && activeSupplierIndex >= 0">
|
||||
<template v-for="thrMenu in cloudData.secMenu[activeSupplierIndex].thrMenu">
|
||||
<!-- 循环每个分类下的产品 -->
|
||||
<div
|
||||
v-for="product in thrMenu.value"
|
||||
:key="product.id"
|
||||
class="box-item"
|
||||
>
|
||||
<div v-for="product in thrMenu.value" :key="product.id" class="box-item">
|
||||
<!-- 标题 -->
|
||||
<div class="item-tit">
|
||||
{{ product.name }}
|
||||
@ -57,15 +53,9 @@
|
||||
</div>
|
||||
|
||||
<!-- 产品咨询弹窗 -->
|
||||
<ProductConsultDialog
|
||||
:visible.sync="showConsultDialog"
|
||||
:platform-name="platformName"
|
||||
:qr-code="qrCode"
|
||||
:default-form-data="consultFormData"
|
||||
:submit-api="submitConsultApi"
|
||||
@success="handleConsultSuccess"
|
||||
@close="handleDialogClose"
|
||||
/>
|
||||
<ProductConsultDialog :visible.sync="showConsultDialog" :platform-name="platformName" :qr-code="qrCode"
|
||||
:default-form-data="consultFormData" :submit-api="submitConsultApi" @success="handleConsultSuccess"
|
||||
@close="handleDialogClose" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -184,119 +174,5 @@ export default {
|
||||
}
|
||||
</style>
|
||||
<style lang="less" scoped>
|
||||
.top-tit {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
background: linear-gradient(90deg, #275AFF 0%, #2EBDFA 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
font-size: .3rem;
|
||||
font-weight: bold;
|
||||
margin-bottom: .3rem;
|
||||
}
|
||||
|
||||
.supplier-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap; /* 允许换行 */
|
||||
padding: .2rem .22rem;
|
||||
gap: .15rem; /* 使用gap控制间距 */
|
||||
}
|
||||
|
||||
.supplier {
|
||||
flex-shrink: 0; /* 防止收缩 */
|
||||
|
||||
.supplier-title {
|
||||
font-size: .2rem;
|
||||
color: #000;
|
||||
padding: .12rem .2rem;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 0.12rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
white-space: nowrap; /* 防止文字换行 */
|
||||
|
||||
&:hover {
|
||||
background-color: #e0e0e0;
|
||||
transform: translateY(-0.02rem);
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: linear-gradient(90deg, #275aff, #2ebdfa);
|
||||
color: #fff;
|
||||
box-shadow: 0 .04rem .12rem rgba(39, 90, 255, 0.3);
|
||||
transform: translateY(-0.02rem);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
padding: 0 .3rem;
|
||||
.box-item {
|
||||
display: flex;
|
||||
width: 48%;
|
||||
flex-direction: column;
|
||||
align-items: self-start;
|
||||
border: .02rem solid #f0f0f0;
|
||||
border-radius: .2rem;
|
||||
padding: .15rem .2rem;
|
||||
margin: .34rem 0;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-0.05rem);
|
||||
box-shadow: 0 .08rem .2rem rgba(0, 0, 0, 0.1);
|
||||
border-color: #1f70ff;
|
||||
}
|
||||
|
||||
.item-tit{
|
||||
font-size: .16rem;
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
margin-bottom: .1rem;
|
||||
}
|
||||
.item-detail{
|
||||
color: #666;
|
||||
font-size: .13rem;
|
||||
margin: .15rem 0;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.item-desc{
|
||||
color: #666;
|
||||
background-color: #f8f9fa;
|
||||
font-size: .12rem;
|
||||
padding: .08rem .12rem;
|
||||
border-radius: .1rem;
|
||||
margin-bottom: .15rem;
|
||||
border: .01rem solid #e9ecef;
|
||||
}
|
||||
.item-btn{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
.btn{
|
||||
background: linear-gradient(90deg, #1f70ff, #3a8cff);
|
||||
color: #fff;
|
||||
padding: .08rem .2rem;
|
||||
border-radius: .15rem;
|
||||
font-size: 0.14rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
border: none;
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(90deg, #0d5aff, #2a7aff);
|
||||
transform: translateY(-0.02rem);
|
||||
box-shadow: 0 .04rem .1rem rgba(31, 112, 255, 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@import url('../less/all/index.less');
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user