1061 lines
26 KiB
Vue
1061 lines
26 KiB
Vue
<template>
|
||
<div style="width: 100%;">
|
||
<!-- 顶部容器，设置最小宽度和flex布局 -->
|
||
<div id="topContainer"
|
||
style="min-width: 1400px; width: 100%;display: flex;flex-direction: column;justify-content: flex-start;align-items: center">
|
||
|
||
<!-- 横幅区域 -->
|
||
<div :class="detailData.title === '裸金属产品' ? 'bannerOne' : 'banner'">
|
||
<div class="content">
|
||
<!-- 产品标题 -->
|
||
<span class="title">{{ detailData.title }}</span>
|
||
<!-- 产品描述 -->
|
||
<p style="line-height: 1.6" class="description">{{ detailData.description }}</p>
|
||
<!-- 咨询按钮 -->
|
||
<span @click="openTalk" class="btnStyle">立即咨询</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 产品规格区域 -->
|
||
<div :class="detailData.title !== '裸金属产品'?'main':'mainBox'">
|
||
<div class="proAd">
|
||
<!-- 裸金属产品显示规格标题 -->
|
||
<div v-show="detailData.title === '裸金属产品'" class="title">产品<span class="gradient-text">规格</span></div>
|
||
|
||
<!-- 新增：选择区域 -->
|
||
<!-- <div v-show="detailData.title === '裸金属产品'" class="selection-area">
|
||
<div class="selection-row">
|
||
<div class="selection-group">
|
||
<span class="selection-label">计算方式：</span>
|
||
<span class="selection-option active">包月</span>
|
||
<span class="selection-option">包年</span>
|
||
</div>
|
||
</div>
|
||
<div class="selection-row">
|
||
<div class="selection-group">
|
||
<span class="selection-label">选择地区：</span>
|
||
<span class="selection-option active">随机可用区</span>
|
||
<span class="selection-option">北京二区</span>
|
||
<span class="selection-option">新昌A区</span>
|
||
<span class="selection-option">杭州A区</span>
|
||
<span class="selection-option">深圳A区</span>
|
||
</div>
|
||
</div>
|
||
<div class="selection-row">
|
||
<div class="selection-group">
|
||
<span class="selection-label">国产算力：</span>
|
||
<span class="selection-option">A800-80GB</span>
|
||
<span class="selection-option">H800-80GB</span>
|
||
<span class="selection-option">A100-80GB</span>
|
||
<span class="selection-option">RTX3090</span>
|
||
</div>
|
||
</div>
|
||
<div class="selection-row">
|
||
<div class="selection-group">
|
||
<span class="selection-label">NVIDIA:</span>
|
||
<span class="selection-option">A800-80GB</span>
|
||
<span class="selection-option">H800-80GB</span>
|
||
<span class="selection-option">A100-80GB</span>
|
||
</div>
|
||
</div>
|
||
</div> -->
|
||
|
||
<!-- 裸金属产品的规格卡片 -->
|
||
<div v-show="detailData.title === '裸金属产品'" class="cardBox">
|
||
<div class="card">
|
||
<ul class="cardUl">
|
||
<!-- 遍历产品规格列表 -->
|
||
<li class="cardLi" v-for="(i, index) in detailData.products" :key="index">
|
||
<span class="cardTitle"> {{ i.title }}</span>
|
||
<!-- 规格参数列表 -->
|
||
<ul class="tagUl">
|
||
<li v-for="(item, index) in i.list" :key="index">
|
||
<span class="param-name">{{ item.name }}</span>
|
||
<span class="param-content">{{ item.content }}</span>
|
||
</li>
|
||
</ul>
|
||
|
||
<!-- 新增：虚线分隔 -->
|
||
<div class="dashed-divider"></div>
|
||
|
||
<!-- 价格和咨询按钮 -->
|
||
<div class="towBtn">
|
||
<div class="price-container">
|
||
<span class="basePrice">
|
||
<span style="font-weight: bold;">￥</span>
|
||
<span style="font-weight: bold;font-size: 30px">{{ i.price }}</span>
|
||
<span style="color: #7a82a0">/{{ i.price_unit }}</span>
|
||
<span style="color: #c3c6d4">（可短租）</span>
|
||
</span>
|
||
</div>
|
||
<div @click="openTalk" class="zixun">立即咨询</div>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 非裸金属产品显示优势标题 -->
|
||
<div style="padding: 50px 0" v-if="detailData.title !== '裸金属产品'" class="title">产品<span
|
||
class="gradient-text">优势</span></div>
|
||
<!-- 产品优势列表 -->
|
||
<div v-if="detailData.title !== '裸金属产品'" class="product">
|
||
<div v-for="(item, index) in detailData.adList" :key="index" class="product-box">
|
||
<div class="leftBox">
|
||
<img :src="item.img" alt="">
|
||
</div>
|
||
<div class="rightBox">
|
||
<div class="subTitle">{{ item.title }}</div>
|
||
<div class="subDescription">
|
||
{{ item.description }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 产品功能区域 -->
|
||
<div v-if="detailData.title !== '裸金属产品'" style="justify-content: flex-start!important;" class="proUse">
|
||
<div style="padding-top: 50px" class="title">产品<span class="gradient-text">功能</span></div>
|
||
<ul class="useUl">
|
||
<!-- 遍历功能列表 -->
|
||
<li v-for="(item, index) in detailData.useList" :key="index" class="useLi">
|
||
<span v-if="item.title" class="useTitle">{{ item.title }}</span>
|
||
<span v-if="item.description" class="useDescription">{{ item.description }}</span>
|
||
<!-- 功能网格布局 -->
|
||
<div class="function-grid-container">
|
||
<!-- 上排4个功能项 -->
|
||
<div class="function-top-row">
|
||
<div v-for="(i, d) in getTopRowItems(item.content)" :key="d" class="function-grid-item">
|
||
<div class="function-icon-wrapper">
|
||
<img :src="getFunctionIcon(d)" alt="" class="function-icon">
|
||
</div>
|
||
<div class="function-content">
|
||
<span class="function-title">{{ i.title }}</span>
|
||
<span class="function-desc">{{ i.description }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 下排3个功能项 -->
|
||
<div class="function-bottom-row">
|
||
<div v-for="(i, d) in getBottomRowItems(item.content)" :key="d + 4" class="function-grid-item">
|
||
<div class="function-icon-wrapper">
|
||
<img :src="getFunctionIcon(d + 4)" alt="" class="function-icon">
|
||
</div>
|
||
<div class="function-content">
|
||
<span class="function-title">{{ i.title }}</span>
|
||
<span class="function-desc">{{ i.description }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- 应用场景区域 -->
|
||
<div v-if="detailData.title !== '裸金属产品'" class="application">
|
||
<div class="title">应用 <span class="gradient-text">场景</span> </div>
|
||
<!-- 场景菜单 -->
|
||
<ul class="menu">
|
||
<li v-for="(item, index) in detailData.applicationList" :key="index" @click="clickMenu(item)"
|
||
:class="activeMenu === item.id ? 'activeLi' : ''">
|
||
{{ item.memuName }}
|
||
</li>
|
||
</ul>
|
||
<!-- 场景详情 -->
|
||
<div class="realApp">
|
||
<div style="display: none" class="leftBox">
|
||
<img :src="menuObj.img" alt="">
|
||
</div>
|
||
<div class="rightBox">
|
||
<div v-if="menuObj.title_r" class="topBox">
|
||
<span class="topTitle">{{ menuObj.title_r }}</span>
|
||
<span style="line-height: 2" class="topDEscription">{{ menuObj.description_r }}</span>
|
||
</div>
|
||
<!-- 场景提供的功能 -->
|
||
<div class="boxBox">
|
||
<div v-for="(item, index) in menuObj.provide" class="bottomBox">
|
||
<span style="margin: 15px 0; font-weight: 600; color: #111e52;">{{ item.title }}</span>
|
||
<span class="content">{{ item.content }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 咨询对话框组件 -->
|
||
<Talk></Talk>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
// 引入Vue和相关依赖
|
||
import Vue from 'vue'
|
||
import { reqHotProduct, reqNewHomeDetail } from "@/api/newHome"; // API请求
|
||
import Talk from "@/views/homePage/dialog/talk/index.vue"; // 咨询对话框组件
|
||
|
||
export default Vue.extend({
|
||
name: "detail", // 组件名称
|
||
components: { Talk }, // 注册子组件
|
||
|
||
data() {
|
||
return {
|
||
loading: null, // 加载状态
|
||
activeMenu: 0, // 当前激活的菜单项ID
|
||
detailData: {}, // 产品详情数据
|
||
menuObj: { // 默认菜单对象
|
||
id: "13",
|
||
memuName: "个人建站应用、专属空间 ",
|
||
img: "https://vstecscloud-file-manage.eos-beijing-4.cmecloud.cn/blade-oss/e7d1d90e439246d7879b1c1f8974f376@:,_y3.png",
|
||
title_r: "知识效率管理，工具垂手可得",
|
||
description_r: "选择精品镜像创建个人网站，企业官网",
|
||
provide: {
|
||
title: "支持的系统镜像",
|
||
content: "WordPress、Lamp、Joomla、Drupal"
|
||
}
|
||
},
|
||
suan: {} // 热销产品数据
|
||
}
|
||
},
|
||
|
||
mounted() {
|
||
// 组件挂载后获取详情和初始化数据
|
||
this.getDetail()
|
||
this.initData()
|
||
},
|
||
|
||
watch: {
|
||
// 监听路由变化
|
||
'$route'(to, from) {
|
||
console.log("asdsad", to.query.id === '2113')
|
||
// 如果路由ID为2113，重新初始化数据
|
||
if (to.query.id === '2113') {
|
||
this.initData()
|
||
}
|
||
// 如果路由ID发生变化，重新获取详情
|
||
if (to.query.id !== from.query.id) {
|
||
this.getDetail();
|
||
}
|
||
}
|
||
},
|
||
|
||
methods: {
|
||
// 获取功能图标
|
||
getFunctionIcon(index) {
|
||
const icons = [
|
||
require('./img/1.png'),
|
||
require('./img/2.png'),
|
||
require('./img/3.png'),
|
||
require('./img/4.png'),
|
||
require('./img/5.png'),
|
||
require('./img/6.png'),
|
||
require('./img/7.png')
|
||
];
|
||
return icons[index] || icons[0];
|
||
},
|
||
|
||
// 获取上排4个功能项
|
||
getTopRowItems(content) {
|
||
return content ? content.slice(0, 4) : [];
|
||
},
|
||
|
||
// 获取下排3个功能项
|
||
getBottomRowItems(content) {
|
||
return content ? content.slice(4, 7) : [];
|
||
},
|
||
|
||
// 初始化热销产品数据
|
||
initData() {
|
||
reqHotProduct().then(res => {
|
||
if (res.status) {
|
||
this.suan = res.data.suan
|
||
this.suanItem = this.suan.hot
|
||
}
|
||
})
|
||
},
|
||
|
||
// 打开咨询对话框
|
||
openTalk() {
|
||
this.$store.commit('setShowTalk', true)
|
||
},
|
||
|
||
// 显示全屏加载
|
||
openFullScreen2() {
|
||
this.loading = this.$loading({
|
||
lock: true,
|
||
text: 'Loading',
|
||
spinner: 'el-icon-loading',
|
||
background: 'rgba(0, 0, 0, 0.7)'
|
||
});
|
||
},
|
||
|
||
// 点击菜单项
|
||
clickMenu(item) {
|
||
this.activeMenu = item.id
|
||
this.menuObj = item
|
||
},
|
||
|
||
// 获取产品详情
|
||
getDetail() {
|
||
this.openFullScreen2() // 显示加载
|
||
reqNewHomeDetail({ id: this.$route.query.id }).then(res => {
|
||
this.loading.close() // 关闭加载
|
||
this.detailData = res.data // 设置详情数据
|
||
this.activeMenu = res.data.applicationList[0].id // 设置默认激活菜单
|
||
this.menuObj = res.data.applicationList[0] // 设置默认菜单对象
|
||
})
|
||
}
|
||
}
|
||
})
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.bannerOne {
|
||
width: 100%;
|
||
height: 500px;
|
||
background: url('./img/FrameOne.png') no-repeat center center;
|
||
background-size: 100% 100%;
|
||
/* 背景图片 */
|
||
position: relative;
|
||
|
||
.content {
|
||
margin: 0 240px;
|
||
margin-top: 80px;
|
||
width: 700px;
|
||
position: relative;
|
||
z-index: 10;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: flex-start;
|
||
|
||
.title {
|
||
font-size: 30px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.description {
|
||
font-size: 16px;
|
||
color: #8890ab;
|
||
line-height: 2 !important;
|
||
}
|
||
|
||
/* 咨询按钮样式 */
|
||
.btnStyle {
|
||
background: linear-gradient(90deg, #275AFF 0%, #2EBDFA 100%);
|
||
/* 渐变背景 */
|
||
color: white;
|
||
padding: 8px 15px;
|
||
border-radius: 8px;
|
||
margin-top: 15px;
|
||
|
||
&:hover {
|
||
cursor: pointer;
|
||
background: linear-gradient(90deg, #275AFF 0%, #1089c1 100%);
|
||
/* 悬停效果 */
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 横幅区域样式 */
|
||
.banner {
|
||
width: 100%;
|
||
height: 500px;
|
||
background: url('./img/Frame.png') no-repeat center center;
|
||
/* 背景图片 */
|
||
position: relative;
|
||
background-size: 110% 100%;
|
||
|
||
.content {
|
||
margin: 0 240px;
|
||
margin-top: 80px;
|
||
width: 700px;
|
||
position: relative;
|
||
z-index: 10;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: flex-start;
|
||
|
||
.title {
|
||
font-size: 30px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.description {
|
||
font-size: 16px;
|
||
color: #8890ab;
|
||
line-height: 2 !important;
|
||
}
|
||
|
||
/* 咨询按钮样式 */
|
||
.btnStyle {
|
||
background: linear-gradient(90deg, #275AFF 0%, #2EBDFA 100%);
|
||
/* 渐变背景 */
|
||
color: white;
|
||
padding: 8px 15px;
|
||
border-radius: 8px;
|
||
margin-top: 15px;
|
||
|
||
&:hover {
|
||
cursor: pointer;
|
||
background: linear-gradient(90deg, #275AFF 0%, #1089c1 100%);
|
||
/* 悬停效果 */
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 通用标题样式 */
|
||
.title {
|
||
margin: 15px 0;
|
||
font-size: 30px;
|
||
font-weight: 600;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
/* 产品优势区域样式 */
|
||
.proAd {
|
||
max-width: 1250px;
|
||
width: 100%;
|
||
display: flex !important;
|
||
flex-direction: column !important;
|
||
justify-content: flex-start !important;
|
||
align-items: center !important;
|
||
|
||
}
|
||
|
||
.mainBox {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
// background-color: #fff;
|
||
background: linear-gradient(to bottom,#fff, #f2f6fb, #fff);
|
||
|
||
}
|
||
.main{
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background: linear-gradient(to bottom, #f5f7fc, #f3f6fb, #e8edfa);
|
||
}
|
||
|
||
/* 产品功能区域样式 */
|
||
.proUse {
|
||
width: 100%;
|
||
min-width: 1400px;
|
||
display: flex !important;
|
||
flex-direction: column !important;
|
||
justify-content: flex-start !important;
|
||
align-items: center !important;
|
||
background: linear-gradient(to bottom, #e8edfa, #fff);
|
||
/* 灰色背景 */
|
||
|
||
.useUl {
|
||
height: fit-content;
|
||
margin-bottom: 25px;
|
||
width: 1400px;
|
||
border-bottom: 1px solid rgba(228, 231, 237, 1);
|
||
|
||
&:last-child {
|
||
border-bottom: none;
|
||
/* 最后一个无边框 */
|
||
}
|
||
|
||
.useLi {
|
||
padding-top: 0;
|
||
margin-top: 0;
|
||
display: flex !important;
|
||
flex-direction: column !important;
|
||
justify-content: flex-start !important;
|
||
align-items: flex-start !important;
|
||
|
||
.useTitle {
|
||
font-size: 18px;
|
||
margin-bottom: 14px;
|
||
}
|
||
|
||
.useDescription {
|
||
font-size: 12px;
|
||
margin-bottom: 14px;
|
||
line-height: 2 !important;
|
||
}
|
||
}
|
||
|
||
/* 功能网格布局样式 */
|
||
.function-grid-container {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 30px;
|
||
}
|
||
|
||
.function-top-row {
|
||
width: 100%;
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
/* 4列网格 */
|
||
gap: 20px;
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
|
||
.function-bottom-row {
|
||
width: 100%;
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
/* 3列网格 */
|
||
gap: 20px;
|
||
justify-items: center;
|
||
}
|
||
|
||
/* 功能项卡片样式 */
|
||
.function-grid-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
padding: 25px 20px;
|
||
min-height: 140px;
|
||
width: 300px;
|
||
border-radius: 12px;
|
||
transition: all 0.3s ease;
|
||
text-align: center;
|
||
|
||
&:hover {
|
||
transform: translateY(-5px);
|
||
/* 悬停上浮效果 */
|
||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
|
||
}
|
||
}
|
||
|
||
/* 功能项图标样式 */
|
||
.function-icon-wrapper {
|
||
border-radius: 50%;
|
||
width: 60px;
|
||
height: 60px;
|
||
background: #e7f2fd;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin-bottom: 15px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.function-icon {
|
||
width: 30px;
|
||
height: 30px;
|
||
}
|
||
|
||
.function-content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
}
|
||
|
||
.function-title {
|
||
margin-bottom: 12px;
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
color: #333;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.function-desc {
|
||
color: #666;
|
||
line-height: 1.8;
|
||
font-size: 14px;
|
||
text-align: center;
|
||
}
|
||
|
||
/* 下排功能项宽度调整 */
|
||
.function-bottom-row .function-grid-item {
|
||
max-width: 380px;
|
||
width: 100%;
|
||
}
|
||
}
|
||
}
|
||
|
||
.product {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
/* 改为两列布局 */
|
||
gap: 20px;
|
||
/* 列间距 */
|
||
width: 100%;
|
||
max-width: 1250px;
|
||
margin-bottom: 50px;
|
||
|
||
.product-box {
|
||
padding: 30px;
|
||
display: flex;
|
||
align-items: center;
|
||
background: linear-gradient(to bottom, #e8edfa, #fff);
|
||
border-radius: 12px;
|
||
transition: all 0.3s ease;
|
||
cursor: pointer;
|
||
height: 160px;
|
||
/* 固定高度确保一致性 */
|
||
box-sizing: border-box;
|
||
|
||
// 添加悬停效果 - 变为蓝色主题
|
||
&:hover {
|
||
background: linear-gradient(to bottom, #275AFF, #2EBDFA);
|
||
box-shadow: 0 8px 25px rgba(39, 90, 255, 0.3);
|
||
|
||
.leftBox {
|
||
background-color: white;
|
||
|
||
/* 修复：使用更合适的滤镜或直接改变图标颜色 */
|
||
img {
|
||
filter: brightness(0) saturate(100%) invert(21%) sepia(95%) saturate(2593%) hue-rotate(218deg) brightness(96%) contrast(101%);
|
||
/* 这个滤镜会将图标变成蓝色，与背景形成对比 */
|
||
}
|
||
}
|
||
|
||
.rightBox {
|
||
|
||
.subTitle,
|
||
.subDescription {
|
||
color: white;
|
||
}
|
||
}
|
||
}
|
||
|
||
.leftBox {
|
||
width: 70px;
|
||
height: 70px;
|
||
background-color: #fff;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
transition: all 0.3s ease;
|
||
flex-shrink: 0;
|
||
/* 防止图标容器被压缩 */
|
||
|
||
img {
|
||
width: 35px;
|
||
height: 35px;
|
||
transition: all 0.3s ease;
|
||
}
|
||
}
|
||
|
||
.rightBox {
|
||
padding-left: 25px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
flex: 1;
|
||
/* 占据剩余空间 */
|
||
|
||
.subTitle {
|
||
font-size: 18px;
|
||
color: #333;
|
||
font-weight: bold;
|
||
transition: all 0.3s ease;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.subDescription {
|
||
font-size: 14px;
|
||
color: #999;
|
||
line-height: 1.6;
|
||
transition: all 0.3s ease;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 应用场景区域样式 */
|
||
.application {
|
||
padding: 0;
|
||
width: 100%;
|
||
|
||
.menu {
|
||
display: flex !important;
|
||
justify-content: center !important;
|
||
align-items: center !important;
|
||
width: 100%;
|
||
max-width: 600px;
|
||
margin: 0 auto;
|
||
border-bottom: 1px solid rgba(228, 231, 237, 1);
|
||
|
||
/* 激活菜单项样式 */
|
||
.activeLi {
|
||
color: #1b5bff;
|
||
border-bottom: 3px solid #1b5bff;
|
||
font-size: 20px;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
li {
|
||
flex: 1;
|
||
height: 50px;
|
||
display: flex !important;
|
||
justify-content: center !important;
|
||
align-items: center !important;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
margin: 0 10px;
|
||
position: relative;
|
||
|
||
&:hover {
|
||
color: #1b5bff;
|
||
}
|
||
}
|
||
}
|
||
|
||
.realApp {
|
||
width: 100%;
|
||
display: flex !important;
|
||
justify-content: space-between !important;
|
||
align-items: center !important;
|
||
flex-wrap: nowrap !important;
|
||
background: url('./img/Group.png') no-repeat center / cover;
|
||
background-size: 100% 100%;
|
||
min-height: 400px;
|
||
transition: all 0.5s ease;
|
||
|
||
.leftBox {
|
||
display: flex !important;
|
||
justify-content: center !important;
|
||
align-items: center !important;
|
||
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
width: 0;
|
||
height: 100%;
|
||
background: #e5e5e5;
|
||
}
|
||
|
||
.rightBox {
|
||
padding: 40px;
|
||
width: 100%;
|
||
height: 100%;
|
||
|
||
.topBox {
|
||
padding-bottom: 30px;
|
||
border-bottom: 1px solid rgba(216, 216, 216, 1);
|
||
display: flex !important;
|
||
flex-direction: column !important;
|
||
justify-content: flex-start !important;
|
||
align-items: flex-start !important;
|
||
|
||
.topTitle {
|
||
margin-top: 25px;
|
||
font-size: 20px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.topDEscription {
|
||
font-size: 14px;
|
||
color: #6d7696;
|
||
margin-top: 15px;
|
||
}
|
||
}
|
||
|
||
.bottomBox {
|
||
display: flex !important;
|
||
flex-direction: column !important;
|
||
justify-content: flex-start !important;
|
||
align-items: flex-start !important;
|
||
|
||
.content {
|
||
color: #6d7696;
|
||
font-size: 14px;
|
||
padding-right: 25px;
|
||
line-height: 2;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 选择区域样式 */
|
||
.selection-area {
|
||
width: 100%;
|
||
max-width: 1400px;
|
||
padding: 20px;
|
||
margin-bottom: 30px;
|
||
background: white;
|
||
border-radius: 12px;
|
||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
|
||
}
|
||
|
||
.selection-row {
|
||
margin-bottom: 15px;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
}
|
||
|
||
.selection-group {
|
||
display: flex;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.selection-label {
|
||
font-size: 14px;
|
||
color: #333;
|
||
margin-right: 10px;
|
||
font-weight: 500;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.selection-option {
|
||
padding: 6px 15px;
|
||
margin-right: 10px;
|
||
margin-bottom: 5px;
|
||
border: 1px solid #e0e0e0;
|
||
border-radius: 6px;
|
||
font-size: 14px;
|
||
color: #666;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
|
||
&:hover {
|
||
border-color: #275AFF;
|
||
color: #275AFF;
|
||
}
|
||
|
||
&.active {
|
||
background: #275AFF;
|
||
color: white;
|
||
border-color: #275AFF;
|
||
}
|
||
}
|
||
|
||
/* 裸金属产品卡片样式 */
|
||
.cardBox {
|
||
padding-bottom: 50px;
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: flex-start;
|
||
|
||
.card {
|
||
border-radius: 12px !important;
|
||
/* 卡片背景 */
|
||
background-size: cover;
|
||
background-position: center;
|
||
padding: 20px;
|
||
box-sizing: border-box;
|
||
}
|
||
}
|
||
|
||
.cardUl {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: space-between;
|
||
align-items: stretch;
|
||
gap: 20px; /* 添加间距 */
|
||
|
||
.cardLi {
|
||
min-height: 400px; /* 降低高度 */
|
||
margin: 10px 0;
|
||
padding: 25px 20px; /* 减少内边距 */
|
||
width: calc(25% - 15px); /* 调整为4个一排 */
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
align-items: flex-start;
|
||
background: white;
|
||
border-radius: 16px;
|
||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
|
||
transition: all 0.3s ease;
|
||
position: relative;
|
||
|
||
&:hover {
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
|
||
}
|
||
|
||
.cardTitle {
|
||
font-size: 16px; /* 减小字体 */
|
||
font-weight: bold;
|
||
margin-bottom: 15px;
|
||
color: #111e52;
|
||
width: 100%;
|
||
text-align: left;
|
||
}
|
||
|
||
.tagUl {
|
||
width: 100%;
|
||
margin-bottom: 15px;
|
||
flex: 1;
|
||
|
||
li {
|
||
margin-bottom: 10px;
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
font-size: 14px; /* 减小字体 */
|
||
|
||
.param-name {
|
||
color: #000;
|
||
font-size: 13px;
|
||
min-width: 55px;
|
||
}
|
||
|
||
.param-content {
|
||
color: #7A82A0;
|
||
font-size: 12px;
|
||
flex: 1;
|
||
text-align: left;
|
||
padding-left: 8px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 虚线分隔样式 */
|
||
.dashed-divider {
|
||
width: 100%;
|
||
height: 1px;
|
||
background: transparent;
|
||
border-bottom: 1px dashed #e0e0e0;
|
||
margin: 20px 0;
|
||
}
|
||
|
||
/* 折扣标签样式 */
|
||
.discount-tag {
|
||
position: absolute;
|
||
top: 30px;
|
||
right: 30px;
|
||
background: #F62424;
|
||
color: white;
|
||
padding: 4px 12px;
|
||
border-radius: 4px;
|
||
font-size: 14px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
/* 咨询按钮样式 */
|
||
.zixun {
|
||
background: linear-gradient(90deg, #275aff, #2ebdfa);
|
||
/* 渐变背景 */
|
||
padding: 10px 20px; /* 减小内边距 */
|
||
border-radius: 6px;
|
||
color: white;
|
||
font-weight: bold;
|
||
font-size: 14px; /* 减小字体 */
|
||
transition: all 0.3s ease;
|
||
text-align: center;
|
||
width: 100%;
|
||
margin-top: 15px;
|
||
|
||
&:hover {
|
||
cursor: pointer;
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 4px 12px rgba(39, 90, 255, 0.3);
|
||
}
|
||
}
|
||
|
||
/* 价格样式 */
|
||
.basePrice {
|
||
display: inline-block;
|
||
margin-top: 10px;
|
||
font-size: 13px; /* 减小字体 */
|
||
color: #F62424;
|
||
/* 红色价格 */
|
||
|
||
* {
|
||
color: #F62424;
|
||
}
|
||
}
|
||
|
||
/* 底部按钮容器 */
|
||
.towBtn {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: flex-end;
|
||
align-items: center;
|
||
margin-top: auto;
|
||
}
|
||
|
||
.price-container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
width: 100%;
|
||
}
|
||
|
||
/* 应用场景内容容器 */
|
||
.boxBox {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
|
||
.bottomBox {
|
||
width: 50%;
|
||
/* 两列布局 */
|
||
}
|
||
}
|
||
|
||
/* 渐变文字效果 */
|
||
.gradient-text {
|
||
background: linear-gradient(to right, #0066FF, #66CCFF);
|
||
/* 蓝到浅蓝渐变 */
|
||
-webkit-background-clip: text;
|
||
background-clip: text;
|
||
color: transparent;
|
||
display: inline-block;
|
||
}
|
||
|
||
/* 响应式调整 - 在小屏幕上变为一列 */
|
||
@media (max-width: 768px) {
|
||
.product {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.cardUl .cardLi {
|
||
width: 100%;
|
||
}
|
||
|
||
.selection-area {
|
||
padding: 15px;
|
||
}
|
||
|
||
.selection-option {
|
||
padding: 5px 10px;
|
||
font-size: 12px;
|
||
}
|
||
}
|
||
|
||
/* 在中等屏幕上调整为2个一排 */
|
||
@media (max-width: 1200px) {
|
||
.cardUl .cardLi {
|
||
width: calc(50% - 10px);
|
||
}
|
||
}
|
||
|
||
/* 在大屏幕上保持4个一排 */
|
||
@media (min-width: 1201px) {
|
||
.cardUl .cardLi {
|
||
width: calc(25% - 15px);
|
||
}
|
||
}
|
||
</style>
|