|
|
@@ -41,7 +41,7 @@
|
|
|
<div class="detail-content">
|
|
|
<h3 class="product-title">{{ activeProduct.classifyName }}</h3>
|
|
|
<p class="product-description">{{ activeProduct.description || activeProduct.classifyDesc || '为您提供专业的解决方案'
|
|
|
- }}</p>
|
|
|
+ }}</p>
|
|
|
</div>
|
|
|
<div class="detail-image">
|
|
|
<img :src="imgHost + activeProduct.projectImage" :alt="activeProduct.classifyName" />
|
|
|
@@ -69,8 +69,7 @@
|
|
|
<div class="cases-container">
|
|
|
<div class="cases-wrapper"
|
|
|
:style="{ transform: `translateX(-${currentCaseIndex * (100 / visibleCases)}%)` }">
|
|
|
- <div v-for="caseItem in casesList" :key="caseItem.id" @click="goToCaseDetail(caseItem)"
|
|
|
- class="case-item">
|
|
|
+ <div v-for="caseItem in casesList" :key="caseItem.id" @click="goToCaseDetail(caseItem)" class="case-item">
|
|
|
<div class="case-image">
|
|
|
<img :src="imgHost + caseItem.projectImage" :alt="caseItem.title" />
|
|
|
</div>
|
|
|
@@ -135,8 +134,9 @@
|
|
|
</div>
|
|
|
|
|
|
<div class="partners-grid">
|
|
|
- <a v-for="partner in partnersList" :key="partner.id" :href="partner.url" target="_blank" class="partner-item">
|
|
|
- <img :src="partner.logo" :alt="partner.name" />
|
|
|
+ <a v-for="partner in partnersList" :key="partner.id" :href="partner.partnersUrl" target="_blank"
|
|
|
+ class="partner-item">
|
|
|
+ <img :src="imgHost + partner.partnersLogo" :alt="partner.partnersName" />
|
|
|
</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -149,7 +149,7 @@
|
|
|
import { ref, computed, onMounted, onUnmounted, nextTick } from 'vue'
|
|
|
import { useRouter } from 'vue-router'
|
|
|
import DefaultLayout from '@/layouts/DefaultLayout.vue'
|
|
|
-import { getHomeData, getProjectClassifyList, getProjectList, getCompanyCertList } from '@/api/modules/home'
|
|
|
+import { getHomeData, getProjectClassifyList, getProjectList, getCompanyCertList, getPartners } from '@/api/modules/home'
|
|
|
import { animateNumber, createNumberAnimationObserver } from '@/utils/numberAnimation'
|
|
|
// 导入图片资源
|
|
|
import indexAboutBg from '@/assets/index-about-img.png'
|
|
|
@@ -274,68 +274,7 @@ export default {
|
|
|
}
|
|
|
|
|
|
// 合作伙伴数据
|
|
|
- const partnersList = ref([
|
|
|
- {
|
|
|
- id: 1,
|
|
|
- name: '浪潮',
|
|
|
- logo: 'https://via.placeholder.com/180x80/f8f9fa/666666?text=浪潮',
|
|
|
- url: 'https://unsplash.it/214/84'
|
|
|
- },
|
|
|
- {
|
|
|
- id: 2,
|
|
|
- name: '新信息',
|
|
|
- logo: 'https://unsplash.it/214/84',
|
|
|
- url: '#'
|
|
|
- },
|
|
|
- {
|
|
|
- id: 3,
|
|
|
- name: 'DELL',
|
|
|
- logo: 'https://unsplash.it/214/84',
|
|
|
- url: 'https://unsplash.it/214/84'
|
|
|
- },
|
|
|
- {
|
|
|
- id: 4,
|
|
|
- name: '锐捷',
|
|
|
- logo: 'https://via.placeholder.com/180x80/f8f9fa/666666?text=锐捷',
|
|
|
- url: 'https://unsplash.it/214/84'
|
|
|
- },
|
|
|
- {
|
|
|
- id: 5,
|
|
|
- name: '河姆渡',
|
|
|
- logo: 'https://via.placeholder.com/180x80/f8f9fa/666666?text=河姆渡',
|
|
|
- url: 'https://unsplash.it/214/84'
|
|
|
- },
|
|
|
- {
|
|
|
- id: 6,
|
|
|
- name: 'SIEMENS',
|
|
|
- logo: 'https://via.placeholder.com/180x80/f8f9fa/666666?text=SIEMENS',
|
|
|
- url: 'https://unsplash.it/214/84'
|
|
|
- },
|
|
|
- {
|
|
|
- id: 7,
|
|
|
- name: 'HP',
|
|
|
- logo: 'https://via.placeholder.com/180x80/f8f9fa/666666?text=HP',
|
|
|
- url: 'https://unsplash.it/214/84'
|
|
|
- },
|
|
|
- {
|
|
|
- id: 8,
|
|
|
- name: 'Sygon',
|
|
|
- logo: 'https://via.placeholder.com/180x80/f8f9fa/666666?text=Sygon',
|
|
|
- url: '#'
|
|
|
- },
|
|
|
- {
|
|
|
- id: 9,
|
|
|
- name: 'KSTAR',
|
|
|
- logo: 'https://via.placeholder.com/180x80/f8f9fa/666666?text=KSTAR',
|
|
|
- url: 'https://unsplash.it/214/84'
|
|
|
- },
|
|
|
- {
|
|
|
- id: 10,
|
|
|
- name: 'WEIMO',
|
|
|
- logo: 'https://via.placeholder.com/180x80/f8f9fa/666666?text=WEIMO',
|
|
|
- url: '#'
|
|
|
- }
|
|
|
- ])
|
|
|
+ let partnersList = ref([])
|
|
|
|
|
|
let casesList = ref([
|
|
|
{
|
|
|
@@ -494,7 +433,7 @@ export default {
|
|
|
const goToCaseDetail = (caseItem) => {
|
|
|
router.push({
|
|
|
name: 'Casesdetails',
|
|
|
- query: { id: caseItem.id,classifyId:caseItem.classifyId }
|
|
|
+ query: { id: caseItem.id, classifyId: caseItem.classifyId }
|
|
|
})
|
|
|
}
|
|
|
|
|
|
@@ -516,11 +455,55 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- onMounted(() => {
|
|
|
- loadHomeData()
|
|
|
- loadCompanyCertList() // 获取企业资质证书
|
|
|
- handleGetProjectClassifyList1() // 获取产品分类列表
|
|
|
- handleGetProjectList() // 获取案例列表
|
|
|
+ // 获取合作伙伴列表
|
|
|
+ const loadPartnersList = async () => {
|
|
|
+ try {
|
|
|
+ const data = await getPartners()
|
|
|
+ console.log('合作伙伴数据:', data)
|
|
|
+
|
|
|
+ if (data && data.rows && Array.isArray(data.rows)) {
|
|
|
+ partnersList.value = data.rows
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.error('加载合作伙伴失败:', error)
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 优化API请求顺序
|
|
|
+ const loadCriticalData = async () => {
|
|
|
+ // 关键数据：首屏可见内容
|
|
|
+ try {
|
|
|
+ await Promise.all([
|
|
|
+ loadHomeData(), // 首页基础数据和企业简介
|
|
|
+ handleGetProjectClassifyList1() // 产品分类列表（首屏可见）
|
|
|
+ ])
|
|
|
+ } catch (error) {
|
|
|
+ console.error('加载关键数据失败:', error)
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ const loadSecondaryData = async () => {
|
|
|
+ // 次要数据：首屏下方内容，可以延迟加载
|
|
|
+ try {
|
|
|
+ await Promise.all([
|
|
|
+ handleGetProjectList(), // 案例列表
|
|
|
+ loadCompanyCertList(), // 企业资质证书
|
|
|
+ loadPartnersList() // 合作伙伴列表
|
|
|
+ ])
|
|
|
+ } catch (error) {
|
|
|
+ console.error('加载次要数据失败:', error)
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ onMounted(async () => {
|
|
|
+ // 先加载关键数据
|
|
|
+ await loadCriticalData()
|
|
|
+
|
|
|
+ // 延迟加载次要数据，避免阻塞首屏渲染
|
|
|
+ setTimeout(() => {
|
|
|
+ loadSecondaryData()
|
|
|
+ }, 100)
|
|
|
+
|
|
|
updateVisibleCases()
|
|
|
window.addEventListener('resize', updateVisibleCases)
|
|
|
|
|
|
@@ -871,7 +854,7 @@ export default {
|
|
|
overflow: hidden;
|
|
|
text-overflow: ellipsis;
|
|
|
display: -webkit-box;
|
|
|
- -webkit-line-clamp:2;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
line-clamp: 2;
|
|
|
-webkit-box-orient: vertical;
|
|
|
}
|
