Skip to content

phsl / client

Go to a project
Commit 4a223e1a by 孙美琪
Options

首页相关对接

parent 67b151ff
Showing with 1209 additions and 420 deletions
src/api/home.js
...@@ -19,7 +19,7 @@ export function banner() { ...@@ -19,7 +19,7 @@ export function banner() {
// 获取组件服务列表数据 // 获取组件服务列表数据
export function assemblyList (query) { export function assemblyList (query) {
return request({ return request({
url: '/biz/assembly/assemblyList', url: '/biz/industry-application/list',
method: 'get', method: 'get',
params: query params: query
}) })
...@@ -33,38 +33,46 @@ export function assemblyType (query) { ...@@ -33,38 +33,46 @@ export function assemblyType (query) {
}) })
} }
// 获取活动资讯列表数据 // 获取合作伙伴列表
export function informationList (query) { export function partnerList (query) {
return request({ return request({
url: '/biz/information/informationList', url: '/api/v1/partnerList',
method: 'get', method: 'get',
params: query params: query
}) })
} }
// 获取计算资源相关
export function informationResourceList(query){
return request({
url:'/biz/computility-information/computilityList',
method: 'get'
})
}
// 获取活动资讯详情 // 获取解决方案
export function informationDetail (query) { export function getHomepageList (query) {
return request({ return request({
url: '/api/v1/informationDetail', url: '/biz/industry-application/homepageList',
method: 'get', method: 'get',
params: query params: query
}) })
} }
// 获取合作伙伴列表 // 获取活动资讯列表数据
export function partnerList (query) { export function informationList (query) {
return request({ return request({
url: '/api/v1/partnerList', url: '/biz/information/informationList',
method: 'get', method: 'get',
params: query params: query
}) })
} }
// 获取计算资源相关 // 获取活动资讯列表数据
export function informationResourceList(query){ export function informationDetail (query) {
return request({ return request({
url:'/biz/computility-information/computilityList', url: '/biz/information/detail',
method: 'get' method: 'get',
params: query
}) })
} }
src/api/industry.js
...@@ -12,7 +12,25 @@ export function industryMenu (query) { ...@@ -12,7 +12,25 @@ export function industryMenu (query) {
// 获取行业应用详情 // 获取行业应用详情
export function solutionDetail (query) { export function solutionDetail (query) {
return request({ return request({
url: '/api/v1/solutionDetail', url: '/biz/solution/detail',
method: 'get',
params: query
})
}
// 获取解决方案
export function getSolution (query) {
return request({
url: '/biz/solution/all',
method: 'get',
params: query
})
}
// 获取合作伙伴
export function getPartner (query) {
return request({
url: '/biz/partner/all',
method: 'get', method: 'get',
params: query params: query
}) })
......
src/assets/styles/index-CMeKdScn.scss
...@@ -17401,6 +17401,11 @@ aside a:hover { ...@@ -17401,6 +17401,11 @@ aside a:hover {
justify-content: flex-end justify-content: flex-end
} }
.flex-justify-start {
display: flex;
justify-content: flex-start;
}
.joinus-box { .joinus-box {
width: 100%; width: 100%;
background-color: #2c53ad; background-color: #2c53ad;
...@@ -18117,7 +18122,7 @@ aside a:hover { ...@@ -18117,7 +18122,7 @@ aside a:hover {
.nav-bar .logo .logo-text { .nav-bar .logo .logo-text {
font-family: YouSheBiaoTiHei, system-ui; font-family: YouSheBiaoTiHei, system-ui;
font-weight: 400; font-weight: 400;
font-size: 20px; font-size: 24px;
line-height: 22px; line-height: 22px;
color: #2e77e3; color: #2e77e3;
cursor: pointer cursor: pointer
......
src/layout/user-layout.vue
...@@ -24,22 +24,7 @@ ...@@ -24,22 +24,7 @@
{{ item.name }} {{ item.name }}
</el-menu-item> </el-menu-item>
</el-sub-menu> </el-sub-menu>
<el-sub-menu index="industryApplications"> <el-menu-item index="/industryApplications/index">解决方案</el-menu-item>
<template #title>解决方案</template>
<el-sub-menu v-for="item in industryMenuData" :index="'one'+item.value">
<template #title>{{ item.name }}</template>
<el-sub-menu v-for="twoLevel in item.child" :index="item.name+'twoLevel'+twoLevel.value">
<template #title>{{ twoLevel.name }}</template>
<el-menu-item
v-for="threeLevel in twoLevel.child"
:index="'/industryApplications/detail?id=' + threeLevel.id">
<div style="width: 160px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
{{ threeLevel.titleIndustry }}
</div>
</el-menu-item>
</el-sub-menu>
</el-sub-menu>
</el-sub-menu>
<el-menu-item index="/componentServices/componentServicesList">行业应用</el-menu-item> <el-menu-item index="/componentServices/componentServicesList">行业应用</el-menu-item>
<el-menu-item index="/partnership/partnershipList">合作伙伴</el-menu-item> <el-menu-item index="/partnership/partnershipList">合作伙伴</el-menu-item>
</el-menu> </el-menu>
...@@ -99,7 +84,8 @@ function menuSelect(val, indexPath, item) { ...@@ -99,7 +84,8 @@ function menuSelect(val, indexPath, item) {
} }
const computilityMenuData = ref([]) const computilityMenuData = ref([])
const industryMenuData = ref([])
// const industryMenuData = ref([])
function getComputilityMenu() { function getComputilityMenu() {
categoryMenuNew().then(res => { categoryMenuNew().then(res => {
...@@ -108,14 +94,15 @@ function getComputilityMenu() { ...@@ -108,14 +94,15 @@ function getComputilityMenu() {
}) })
} }
function getIndustryMenu() { // function getIndustryMenu() {
industryMenu().then(res => { // industryMenu().then(res => {
industryMenuData.value = res.data // industryMenuData.value = res.data
}) // })
} // }
getComputilityMenu() getComputilityMenu()
getIndustryMenu()
// getIndustryMenu()
function handleCommand(command) { function handleCommand(command) {
switch (command) { switch (command) {
...@@ -189,7 +176,7 @@ function logout() { ...@@ -189,7 +176,7 @@ function logout() {
.logo-text { .logo-text {
font-family: YouSheBiaoTiHei, system-ui; font-family: YouSheBiaoTiHei, system-ui;
font-weight: 400; font-weight: 400;
font-size: 20px; font-size: 24px;
line-height: 22px; line-height: 22px;
color: #2e77e3; color: #2e77e3;
cursor: pointer; cursor: pointer;
......
src/router/index.js
import { createWebHistory, createRouter } from 'vue-router' import {createWebHistory, createRouter} from 'vue-router'
/* Layout */ /* Layout */
import Layout from '@/layout' import Layout from '@/layout'
import UserLayout from '@/layout/user-layout.vue' import UserLayout from '@/layout/user-layout.vue'
...@@ -109,10 +109,16 @@ export const constantRoutes = [ ...@@ -109,10 +109,16 @@ export const constantRoutes = [
component: UserLayout, component: UserLayout,
children: [ children: [
{ {
path: 'index',
component: () => import('@/views/industryApplications/index.vue'),
name: 'industryApplicationsIndex',
meta: {title: '解决方案'}
},
{
path: 'detail', path: 'detail',
component: () => import('@/views/industryApplications/detail.vue'), component: () => import('@/views/industryApplications/detail.vue'),
name: 'Detail', name: 'Detail',
meta: {title: '解决方案'} meta: {title: '解决方案详情'}
} }
] ]
}, },
...@@ -301,7 +307,7 @@ export const dynamicRoutes = [ ...@@ -301,7 +307,7 @@ export const dynamicRoutes = [
const router = createRouter({ const router = createRouter({
history: createWebHistory(), history: createWebHistory(),
routes: constantRoutes, routes: constantRoutes,
scrollBehavior (to, from, savedPosition) { scrollBehavior(to, from, savedPosition) {
if (savedPosition) { if (savedPosition) {
return savedPosition return savedPosition
} else { } else {
......
src/views/componentServices/list.vue
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
<img :src="item.image" alt=""/> <img :src="item.image" alt=""/>
<div> <div>
<div class="title">{{ item.title }}</div> <div class="title">{{ item.title }}</div>
<p>{{ item.description }}</p> <p v-html="item.description"></p>
<el-button round @click="openPage(item,index)">点击试用</el-button> <el-button round @click="openPage(item,index)">点击试用</el-button>
</div> </div>
...@@ -53,22 +53,10 @@ const indexNum = ref(0) ...@@ -53,22 +53,10 @@ const indexNum = ref(0)
const assemblyTypes = ref([]) const assemblyTypes = ref([])
const tabActive = ref("0") const tabActive = ref("0")
onMounted(() => {
// getAssemblyType()
getAassemblyList()
})
function getAassemblyList() { function getAassemblyList() {
assemblyList({type: Number(tabActive.value)}).then(res => { assemblyList().then(res => {
// assemblyData.value = res.data const validData = res.data;
const validData = res.data.filter(item => item.showStatus === true);
validData.forEach(item => { validData.forEach(item => {
// 处理description字段，去除<p>标签
if (item.description) {
item.description = item.description.replace(/<p>/g, '').replace(/<\/p>/g, '')
}
// 处理images数组，只取第一张图片 // 处理images数组，只取第一张图片
if (Array.isArray(item.images) && item.images.length > 0) { if (Array.isArray(item.images) && item.images.length > 0) {
item.image = item.images[0]; item.image = item.images[0];
...@@ -76,24 +64,10 @@ function getAassemblyList() { ...@@ -76,24 +64,10 @@ function getAassemblyList() {
item.image = ''; // 如果没有图片，设置为空字符串 item.image = ''; // 如果没有图片，设置为空字符串
} }
}); });
assemblyData.value = validData.sort(function (a, b) { assemblyData.value = validData;
return a.orderNum - b.orderNum
});
}) })
} }
// function getAssemblyType() {
// assemblyType().then(res => {
// assemblyTypes.value = res.data
// getAassemblyList()
// })
// }
function tabChange() {
getAassemblyList()
}
function openPage(data, index) { function openPage(data, index) {
indexNum.value = index indexNum.value = index
dialogTitle.value = data.title dialogTitle.value = data.title
...@@ -112,6 +86,8 @@ function cancel() { ...@@ -112,6 +86,8 @@ function cancel() {
function handleDialogClose() { function handleDialogClose() {
iframeSrc.value = null iframeSrc.value = null
} }
getAassemblyList()
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.app-container { .app-container {
......
src/views/index.vue
...@@ -20,56 +20,23 @@ ...@@ -20,56 +20,23 @@
<h5>我们为您提供高性能的算力服务 </h5> <h5>我们为您提供高性能的算力服务 </h5>
<p>专业造就品质， 携手共赢，助力企业发展</p></div> <p>专业造就品质， 携手共赢，助力企业发展</p></div>
<div class="resource-list"> <div class="resource-list">
<div class="el-row" style="margin-left: -15px; margin-right: -15px;"> <el-row :gutter="15">
<div class="el-col el-col-8 is-guttered" style="padding-right: 15px; padding-left: 15px;"> <el-col :span="8" v-for="(i,index) in list" :key="index">
<div class="resource-item"> <div class="resource-item">
<div class="img"><img <div class="img">
src="http://ph.xjkcjd.com:18081/prod-api/profile/upload/2024/10/25/服务-超级计算@1x_20241025140658A015.png" <img :src="i.image" alt=""/>
alt=""></div>
<div class="title">超级计算</div>
<p class="info">超级计算
拥有天河一号、天河新一代超级计算机，综合算力200PF，存储超20PB，可提供大规模数值模拟计算和数据分析处理等服务</p>
<div class="btn-box">
<button aria-disabled="false" type="button"
class="el-button el-button--default is-plain">
<span class="">了解详情 </span>
</button>
</div> </div>
</div> <div class="title">{{ i.title }}</div>
</div> <p class="info">{{ i.information }}</p>
<div class="el-col el-col-8 is-guttered" style="padding-right: 15px; padding-left: 15px;">
<div class="resource-item">
<div class="img"><img
src="http://ph.xjkcjd.com:18081/prod-api/profile/upload/2024/10/25/服务-人工智能@1x_20241025140651A014.png"
alt=""></div>
<div class="title">人工智能计算</div>
<p class="info">
提供各类通用、国产CPU、GPU裸金属服务器，资源独占、性能无损、弹性扩容、安全可靠</p>
<div class="btn-box">
<button aria-disabled="false" type="button"
class="el-button el-button--default is-plain">
<span class="">了解详情 </span>
</button>
</div>
</div>
</div>
<div class="el-col el-col-8 is-guttered" style="padding-right: 15px; padding-left: 15px;">
<div class="resource-item">
<div class="img"><img
src="http://ph.xjkcjd.com:18081/prod-api/profile/upload/2024/10/25/服务-云计算@1x_20241025140605A013.png"
alt=""></div>
<div class="title">云计算</div>
<p class="info">提供安全稳定及灵活扩展的云计算服务，实现按需扩展CPU、内存、存储和网络资源，有效降低
IT 成本，提升运维效率，助力核心业务创新。</p>
<div class="btn-box"> <div class="btn-box">
<button aria-disabled="false" type="button" <button aria-disabled="false" type="button"
class="el-button el-button--default is-plain"> class="el-button el-button--default is-plain">
<span class="">了解详情 </span> <span class="">了解详情</span>
</button> </button>
</div> </div>
</div> </div>
</div> </el-col>
</div> </el-row>
</div> </div>
</div> </div>
...@@ -80,55 +47,25 @@ ...@@ -80,55 +47,25 @@
<p>适用于政务、金融、旅游、大数据、人工智能、教育、工业等多行业解决方案</p></div> <p>适用于政务、金融、旅游、大数据、人工智能、教育、工业等多行业解决方案</p></div>
<div class="tabs-container"> <div class="tabs-container">
<div class="tabs-header"> <div class="tabs-header">
<div v-for="(i,index) in tabList" :key="index" @click="handleTab(index)"> <div class="tabs-box" v-for="(i,index) in tabList" :key="index" @click="handleTab(index)">
<button :class="activeTabs === index? 'tab-active':''">{{ i }}</button> <button :class="activeTabs === index? 'tab-active':''"
<div v-if="activeTabs === index" class="indicator" style="width: 100%;"></div> :style="{borderBottom: activeTabs === index ?'1px solid #1f4aaf':''}">{{ i }}
</button>
</div> </div>
</div> </div>
</div> </div>
<el-carousel ref="myCarousel" type="card" height="400px" :autoplay="false" @change="handleCarouselCard"> <el-carousel ref="myCarousel" type="card" height="400px" :autoplay="false" @change="handleCarouselCard">
<el-carousel-item> <el-carousel-item v-for="(i,index) in swiperBox" :key="index">
<div class="swiper-box"> <div class="swiper-box">
<div class="swiper-list"> <div class="swiper-list">
<div class="swiper-item" <div class="swiper-item"
style="background-image: url('http://ph.xjkcjd.com:18081/prod-api/profile/upload/2024/10/29/txg-02_20241029161244A040.jpg');"> :style="{ background: 'url(' + i.homeImages[0] + ')',backgroundSize: 'cover' }">
<div class="item"><h3 class="title">数字天心阁</h3> <div class="item"><h3 class="title">{{ i.title }}</h3>
<p class="desc"> <p class="desc" v-html="i.description"></p>
其展馆面积3000余平方，收藏有大量近代湖湘历史名人相关文物，结合普惠算力服务平台的最新数智科技，打造了沉浸式湖湘文化主题内容体验，是长沙新崛起的一个独具特色的“文化+科技”融合文旅创新项目。</p> <p class="info flex-justify-end" @click="openAssembly(i)"><span class="btn">{{
<p class="info flex-justify-end"><span class="btn">带你体验领略不一样的天心阁 </span> i.information
</p></div> }} </span></p></div>
</div>
</div>
</div>
</el-carousel-item>
<el-carousel-item>
<div class="swiper-box">
<div class="swiper-list">
<div class="swiper-item"
style="background-image: url('http://ph.xjkcjd.com:18081/prod-api/profile/upload/2024/07/01/resource1-Z05URL38_20240701145643A048.png');">
<div class="item">
<h3 class="title">智能审核</h3>
<p class="desc">
新一代人工智能大模型与AIGC应用高科技企业。自成立以来，始终坚持核心技术自主研发，积累数十项知识产权。通过不断深耕大数据、深度学习和自然语言处理（NLP）等人工智能核心领域技术，构建了通用型AI智能内容处理平台底座，并面向安全测评、内容安全、内容生成等领域研发出四大类产品线，包括大模型与AIGC安全评测、博特翊盾一站式智能内容审核与巡查平台、博特妙笔AI公文写作平台、博特点石智能金融服务平台等多维度、广场景、强能力的人工智能产品与服务。</p>
<p class="info flex-justify-end">
<span class="btn">智能审核</span>
</p>
</div>
</div>
</div>
</div>
</el-carousel-item>
<el-carousel-item>
<div class="swiper-box">
<div class="swiper-list">
<div class="swiper-item"
style="background-image: url('http://ph.xjkcjd.com:18081/prod-api/profile/upload/2024/07/01/resource2-jp9iLWfp_20240701145658A050.png');">
<div class="item"><h3 class="title">智能写作</h3>
<p class="desc">
集成案例参考、材料查找、A1写作、修改润色、审核校对、文件学习等功能,全方位地辅助公职人员提高创作效率,节省人工编写的时间和精力。</p>
<p class="info flex-justify-end"><span class="btn">智能写作一片未来</span>
</p></div>
</div> </div>
</div> </div>
</div> </div>
...@@ -136,7 +73,8 @@ ...@@ -136,7 +73,8 @@
</el-carousel> </el-carousel>
<div class="view-more-text"> <div class="view-more-text">
<button aria-disabled="false" type="button" class="el-button el-button--default is-plain is-round"> <button aria-disabled="false" type="button" class="el-button el-button--default is-plain is-round"
@click="handleMore">
<span class="">查看更多</span></button> <span class="">查看更多</span></button>
</div> </div>
</div> </div>
...@@ -147,77 +85,35 @@ ...@@ -147,77 +85,35 @@
<div class="custom-main-w"> <div class="custom-main-w">
<div class="custom-title"><h5>活动资讯</h5></div> <div class="custom-title"><h5>活动资讯</h5></div>
<div class="information-top"> <div class="information-top">
<div class="el-row" style="margin-left: -15px; margin-right: -15px;"> <el-row :gutter="15">
<div class="el-col el-col-8 is-guttered" <el-col :span="8" v-for="(i,index) in infoList" :key="index" @click="handleInfoDetails(i.id)">
style="padding-right: 15px; padding-left: 15px;"> <div class="info-top-item">
<div class="info-top-item"><img <img
src="http://ph.xjkcjd.com:18081/prod-api/profile/upload/2025/03/10/640_20250310195348A114.jpg" :src="i.images[0]"
alt=""> alt="">
<div class="content"> <div class="content">
<div class="title">天水文旅智算创新中心启动 | 普惠算力平台助力中小企业数字化转型 <div class="title">{{ i.title }}
</div>
<div class="date">2025-03-10</div>
</div>
</div>
</div>
<div class="el-col el-col-8 is-guttered"
style="padding-right: 15px; padding-left: 15px;">
<div class="info-top-item"><img
src="http://ph.xjkcjd.com:18081/prod-api/profile/upload/2024/06/25/封面_20240625194417A007.png"
alt="">
<div class="content">
<div class="title">媒体聚焦 |
新区崭新产业“苗圃”即将“定妆”！湘江创智园预计年底建成投运
</div>
<div class="date">2024-06-25</div>
</div>
</div>
</div>
<div class="el-col el-col-8 is-guttered"
style="padding-right: 15px; padding-left: 15px;">
<div class="info-top-item"><img
src="http://ph.xjkcjd.com:18081/prod-api/profile/upload/2024/10/29/gszx-2_20241029100921A030.jpg"
alt="">
<div class="content">
<div class="title">激活算力促转化！湖南大学大科城先进计算联合创新中心正式成立</div>
<div class="date">2024-06-25</div>
</div>
</div> </div>
<div class="date">{{ parseTime(i.createTime, '{y}-{m}-{d}') }}</div>
</div> </div>
</div> </div>
</el-col>
</el-row>
</div> </div>
<div class="information-bottom"> <div class="information-bottom">
<div class="info-bottom-item flex"> <div class="info-bottom-item flex" v-for="(i,index) in infoBottomList" :key="index"
<div class="content"> @click="handleInfoDetails(i.id)">
<div class="title">AI在金融领域的崭新应用：智能化金融服务的革新</div>
<div class="remark">
引言：随着人工智能（AI）技术的不断发展，金融领域正迎来一场智能化的革命。从智能投资到风险管理，AI正在改变传统金融服务的面貌，为用户提供更为个性化、高效的金融体验。
</div>
</div>
<div class="date">2024-04-28</div>
</div>
<div class="info-bottom-item flex">
<div class="content">
<div class="title">人工智能赋能金融领域 这场银企交流会提出这些“金点子”</div>
<div class="remark">推动大数据技术研发应用，让人工智能赋能金融领域发展，重庆在行动</div>
</div>
<div class="date">2024-04-28</div>
</div>
<div class="info-bottom-item flex">
<div class="content"> <div class="content">
<div class="title"> <div class="title">{{ i.title }}</div>
与价值“共声”，银河证券联名财联社将赴AI引领者科大讯飞，洞察新质生产力下一程 <div class="remark" v-html="i.description"></div>
</div> </div>
<div class="remark"> <div class="date">{{ parseTime(i.createTime, '{y}-{m}-{d}') }}</div>
AI若以拼音来读，即可读作爱，亦是一种对美好事物的寄托。无疑，AI是新一轮科技革命和产业变革的重要驱动力量，而上市公司则是资本市场高质量发展的重要驱动力量。
</div>
</div>
<div class="date">2024-04-28</div>
</div> </div>
</div> </div>
<div class="view-more-text"> <div class="view-more-text">
<button aria-disabled="false" type="button" <button aria-disabled="false" type="button"
class="el-button el-button--default is-plain is-round"> class="el-button el-button--default is-plain is-round"
@click="router.push('/information/informationList')">
<span class="">更多资讯 </span> <span class="">更多资讯 </span>
</button> </button>
</div> </div>
...@@ -230,17 +126,17 @@ ...@@ -230,17 +126,17 @@
<div class="custom-title"><h5>优秀的合作伙伴</h5> <div class="custom-title"><h5>优秀的合作伙伴</h5>
<p>我们将为用户提供安全、可靠、优质的应用解决方案</p></div> <p>我们将为用户提供安全、可靠、优质的应用解决方案</p></div>
<div class="partner-list"> <div class="partner-list">
<div class="el-row" style="margin-left: -15px; margin-right: -15px;"> <el-row :gutter="20">
<div class="el-col el-col-8 is-guttered" <el-col span="8" v-for="(i,index) in partnerList" :key="index" @click="handleOpen(i.url)">
style="padding-right: 15px; padding-left: 15px;">
<div class="partner-item"> <div class="partner-item">
<div class="img"><img <div class="img">
src="http://ph.xjkcjd.com:18081/prod-api/profile/upload/2024/12/25/智谱_20241225151742A098.png" <img :src="i.image.length !==0 ? i.image[0]:''"
alt=""></div> alt=""/>
<div class="title">北京智谱华章科技有限公司</div>
</div>
</div> </div>
<div class="title">{{ i.title }}</div>
</div> </div>
</el-col>
</el-row>
</div> </div>
</div> </div>
</div> </div>
...@@ -291,61 +187,38 @@ ...@@ -291,61 +187,38 @@
</template> </template>
<script setup name="Index"> <script setup name="Index">
import {banner, assemblyList, informationResourceList, informationList} from '@/api/home.js' import {
banner,
assemblyList,
informationResourceList,
informationList,
getHomepageList
} from '@/api/home.js'
import {ref} from 'vue' import {ref} from 'vue'
import {getPartner} from "@/api/industry.js";
import {useRouter} from "vue-router";
import {parseTime} from "../utils/ruoyi.js";
const baseUrl = import.meta.env.VITE_APP_BASE_API const baseUrl = import.meta.env.VITE_APP_BASE_API
// const baseImgUrl = window.location.origin // const baseImgUrl = window.location.origin
const activeTabs = ref(1) const activeTabs = ref(1)
const tabList = ref(['数字天心阁', '智能审核', '智能写作']) const tabList = ref([{}])
const swiperBox = ref([])
const assemblyData = ref([]) const assemblyData = ref([])
const bannerImgList = ref([]) const bannerImgList = ref([])
const list = ref([ const list = ref([])
{
id: 1,
title: '计算资源',
titleEH: '/RESOURCE',
present: '强劲 · 稳定 · 安全的云计算能力 · 助力企业上云',
assemblyData: [
// {
// title: '天河系列超级计算机',
// description: '拥有天河一号、天河新一代超算，综合算力200PF（64位精度），人工智能算力800PF，存储超20PB。可提供科学研究、工程仿真、并行算法及大规模并行应用软件研发。',
// router: '/computingResource/resourceList?type=0'
// },
// {
// title: '天河 天马智算集群',
// description: '提供各类通用、国产CPU、GPU裸金属服务器，资源独占、性能无损、弹性扩容、安全可靠',
// router: '/computingResource/resourceList?type=1'
// },
// {
// title: '云计算服务',
// description: '提供安全稳定及灵活扩展的云计算服务，实现按需扩展CPU、内存、存储和网络资源，有效降低 IT 成本，提升运维效率，助力核心业务创新。',
// router: '/computingResource/resourceList?type=2'
// }
]
},
{
id: 2,
title: '行业应用',
titleEH: '/APPLICATION',
present: '集成机器学习、深度学习、自然语言处理、图像识别等先进技术，为金融、医疗、教育、零售、制造业等多个领域提供智能化解决方案。',
assemblyData: []
},
{
id: 3,
title: '生态合作伙伴',
titleEH: '/PARTNER',
present: '助力各类“AI+”创新应用，推进企业算力生态建设，促进科创产业集聚发展',
assemblyData: []
}
])
const dialogTableVisible = ref(false) const dialogTableVisible = ref(false)
const dialogTitle = ref('') const dialogTitle = ref('')
const iframeSrc = ref('') const iframeSrc = ref('')
const iframeShow = ref(false) const iframeShow = ref(false)
const myCarousel = ref(null) const myCarousel = ref(null)
const carouselHeight = ref(500); // 默认高度 const carouselHeight = ref(500); // 默认高度
const partnerList = ref([])
const infoList = ref([])
const infoBottomList = ref([])
const router = useRouter()
function updateHeight() { function updateHeight() {
// 根据窗口宽度计算高度 // 根据窗口宽度计算高度
const width = window.innerWidth; const width = window.innerWidth;
...@@ -368,7 +241,7 @@ onBeforeUnmount(() => { ...@@ -368,7 +241,7 @@ onBeforeUnmount(() => {
function getBanner() { function getBanner() {
banner().then(res => { banner().then(res => {
// 筛选条件：showStatus为1的数据 // 筛选条件：showStatus为1的数据
const validData = res.data.filter(item => item.showStatus === 1); const validData = res.data.filter(item => item.showStatus === true);
// 处理图片字段，只取第一张图片 // 处理图片字段，只取第一张图片
validData.forEach(item => { validData.forEach(item => {
...@@ -398,51 +271,16 @@ function handleCarouselCard(index) { ...@@ -398,51 +271,16 @@ function handleCarouselCard(index) {
getBanner() getBanner()
function getAssemblyList() {
assemblyList({type: 0}).then(res => {
// 筛选条件：showStatus为true的数据
const filteredData = res.data.filter(item => item.showStatus === true);
const data = filteredData.sort(function (a, b) {
return a.orderNum - b.orderNum
}).map(item => {
// 处理description字段，去除<p>标签
if (item.description) {
item.description = item.description.replace(/<p>/g, '').replace(/<\/p>/g, '')
}
// 处理images数组，只取第一张图片
if (Array.isArray(item.images) && item.images.length > 0) {
item.image = item.images[0];
} else {
item.image = ''; // 如果没有图片，设置为空字符串
}
// 处理homeImages数组，只取第一张图片
if (Array.isArray(item.homeImages) && item.homeImages.length > 0) {
item.homeImage = item.homeImages[0];
} else {
item.homeImage = ''; // 如果没有图片，设置为空字符串
}
return item
})
assemblyData.value = data.length > 3 ? data.slice(0, 3) : data
list.value[1].assemblyData = data.length > 3 ? data.slice(0, 3) : data
})
}
function getResource() { function getResource() {
informationResourceList().then(res => { informationResourceList().then(res => {
// 筛选条件：showStatus为true的数据 // 筛选条件：showStatus为true的数据
const filteredData = res.data.filter(item => item.showStatus === true); const filteredData = res.data;
// 处理information字段，去除<p>标签，并处理图片数组 // 处理information字段，去除<p>标签，并处理图片数组
const processedData = filteredData.map(item => { const processedData = filteredData.map(item => {
if (item.information) { if (item.information) {
item.information = item.information.replace(/<p>/g, '').replace(/<\/p>/g, ''); item.information = item.information.replace(/<p>/g, '').replace(/<\/p>/g, '');
} }
// 处理images数组，只取第一张图片 // 处理images数组，只取第一张图片
if (Array.isArray(item.images) && item.images.length > 0) { if (Array.isArray(item.images) && item.images.length > 0) {
item.image = item.images[0]; item.image = item.images[0];
...@@ -450,16 +288,13 @@ function getResource() { ...@@ -450,16 +288,13 @@ function getResource() {
item.image = ''; // 如果没有图片，设置为空字符串 item.image = ''; // 如果没有图片，设置为空字符串
} }
return item; return item;
}); });
list.value[0].assemblyData = processedData.length > 3 ? processedData.slice(0, 3) : processedData; list.value = processedData.length > 3 ? processedData.slice(0, 3) : processedData;
console.log(list.value[0].assemblyData, 'list.value[0].assemblyData');
}); });
} }
getAssemblyList()
getResource() getResource()
const informationData = ref([]) const informationData = ref([])
...@@ -523,6 +358,49 @@ function handleCarousel(url) { ...@@ -523,6 +358,49 @@ function handleCarousel(url) {
window.open(url) window.open(url)
} }
} }
function handleOpen(url) {
if (url) {
window.open(url)
}
}
// 获取合作伙伴
function getPartnerList() {
getPartner().then((res) => {
partnerList.value = res.data
})
}
getPartnerList()
function homepageList() {
getHomepageList({count: 3}).then(res => {
tabList.value = res.data.length ? res.data.map(i => i.title) : []
swiperBox.value = res.data ? res.data : []
})
}
homepageList()
// 行业应用跳转
function handleMore() {
router.push('/componentServices/componentServicesList')
}
function getInfoList() {
informationList().then(res => {
const data = res.data
infoList.value = data.length !== 0 ? data.slice(0, 3) : []
infoBottomList.value = data.length !== 0 ? data.slice(4, 6) : []
})
}
getInfoList()
function handleInfoDetails(id) {
router.push(`/information/informationDetail?id=${id}`)
}
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
...@@ -1242,27 +1120,21 @@ function handleCarousel(url) { ...@@ -1242,27 +1120,21 @@ function handleCarousel(url) {
width: 900px; width: 900px;
margin: 0 auto; margin: 0 auto;
justify-content: space-around; justify-content: space-around;
//display: flex;
//position: relative;
//overflow-x: auto;
//white-space: nowrap
} }
//.tabs-header div { .tabs-header .tabs-box {
// display: flex; flex: 1;
// justify-content: space-around; }
//}
.tabs-header button { .tabs-header button {
display: block; display: block;
padding: 5px 0; padding: 5px 0;
background: none; background: none;
border: none;
cursor: pointer; cursor: pointer;
outline: none; outline: none;
margin: 0 auto; margin: 0 auto;
font-size: 22px; font-size: 22px;
transition: all .3s ease transition: all .3s ease;
} }
.tabs-header button :hover { .tabs-header button :hover {
...@@ -1275,8 +1147,6 @@ function handleCarousel(url) { ...@@ -1275,8 +1147,6 @@ function handleCarousel(url) {
} }
.indicator { .indicator {
//position: absolute;
//bottom: 0;
height: 2px; height: 2px;
background-color: #1f4aaf; background-color: #1f4aaf;
transition: transform .3s ease transition: transform .3s ease
...@@ -1302,9 +1172,7 @@ function handleCarousel(url) { ...@@ -1302,9 +1172,7 @@ function handleCarousel(url) {
} }
.swiper-box .swiper-list .swiper-item { .swiper-box .swiper-list .swiper-item {
//width: 900px;
height: 100%; height: 100%;
margin-right: 40px;
border-radius: 20px; border-radius: 20px;
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
......
src/views/industryApplications/detail.vue
<template> <template>
<div class="app-container"> <div class="app-container">
<div class="breadcrumb">
<div class="flex-justify-end">
<el-breadcrumb separator="/">
<el-breadcrumb-item>首页</el-breadcrumb-item>
<el-breadcrumb-item>行业应用</el-breadcrumb-item>
</el-breadcrumb>
</div>
</div>
<div class="block-title">行业概述</div> <div class="block-title">行业概述</div>
<div class="sub-title">{{ titleIndustry }}</div> <div class="sub-title">{{ titleIndustry }}</div>
<div class="content"> <div class="content">
<div class="html-content" v-html="industryInfo"></div> <div class="html-content" v-html="industryInfo"></div>
</div> </div>
<div class="block-title">解决方案</div> <div class="block-title">解决方案</div>
...@@ -42,42 +33,27 @@ ...@@ -42,42 +33,27 @@
<img class="icon" src="@/assets/images/Information-process-2.png" alt=""> <img class="icon" src="@/assets/images/Information-process-2.png" alt="">
<div class="title">初步沟通</div> <div class="title">初步沟通</div>
<div class="desc">需求答疑，对齐核心诉求，确定合作意向</div> <div class="desc">需求答疑，对齐核心诉求，确定合作意向</div>
<!-- <el-button>立即资讯-->
<!-- <el-icon>-->
<!-- <ArrowRight/>-->
<!-- </el-icon>-->
<!-- </el-button>-->
</div> </div>
<div class="item"> <div class="item">
<div class="index">3</div> <div class="index">3</div>
<img class="icon" src="@/assets/images/Information-process-3.png" alt=""> <img class="icon" src="@/assets/images/Information-process-3.png" alt="">
<div class="title">方案交流</div> <div class="title">方案交流</div>
<div class="desc">针对相关方案进行线上或线下的交流探讨</div> <div class="desc">针对相关方案进行线上或线下的交流探讨</div>
<!-- <el-button>立即资讯-->
<!-- <el-icon>-->
<!-- <ArrowRight/>-->
<!-- </el-icon>-->
<!-- </el-button>-->
</div> </div>
<div class="item"> <div class="item">
<div class="index">4</div> <div class="index">4</div>
<img class="icon" src="@/assets/images/Information-process-4.png" alt=""> <img class="icon" src="@/assets/images/Information-process-4.png" alt="">
<div class="title">商业流程</div> <div class="title">商业流程</div>
<div class="desc">方案确定后，开始执行商务流程</div> <div class="desc">方案确定后，开始执行商务流程</div>
<!-- <el-button>立即资讯-->
<!-- <el-icon>-->
<!-- <ArrowRight/>-->
<!-- </el-icon>-->
<!-- </el-button>-->
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script setup name="Detail"> <script setup name="Detail">
import { solutionDetail } from '@/api/industry.js' import {solutionDetail} from '@/api/industry.js'
import { useRoute } from 'vue-router' import {useRoute} from 'vue-router'
import { ref, watch } from 'vue' import {ref, watch} from 'vue'
const route = useRoute() const route = useRoute()
const industryInfo = ref('') const industryInfo = ref('')
...@@ -92,8 +68,9 @@ watch(() => route.query.id, val => { ...@@ -92,8 +68,9 @@ watch(() => route.query.id, val => {
} }
}) })
function getDetail () { function getDetail() {
solutionDetail({id: route.query.id}).then(res => { solutionDetail({id: route.query.id}).then(res => {
console.log(res, 'res')
industryInfo.value = res.data.industryInfo industryInfo.value = res.data.industryInfo
titleIndustry.value = res.data.titleIndustry titleIndustry.value = res.data.titleIndustry
solutionInfo.value = res.data.solutionInfo solutionInfo.value = res.data.solutionInfo
......
src/views/industryApplications/index.vue 0 → 100644
<template>
<div class="app-container home">
<div class="custom-main-w">
<div class="resource-list">
<el-row :gutter="40">
<el-col :span="8" v-for="(i,index) in solutionList" :key="index" style="margin-bottom: 40px;cursor: pointer;"
@click="handleSolution(i.id)">
<div class="resource-item">
<div class="img">
<div class="img-title">行业解决方案</div>
</div>
<div class="text-content">
<div class="title">{{ i.title }}</div>
<div class="subtitle">{{ parseTime(i.createTime, "{y}-{m}-{d}") }}</div>
<el-divider style="width: 50px;border-top: 1px #1c84c6 solid;"/>
<p class="info">{{ i.introduction }}</p>
</div>
</div>
</el-col>
</el-row>
</div>
</div>
<div class="content-footer">
<div class="content-detail">
<img src="@/assets/images/indexImg/content1.png" alt=""/>
<div class="name">服务支持</div>
<div class="more">了解更多 ></div>
</div>
<div class="content-detail">
<img src="@/assets/images/indexImg/content2.png" alt=""/>
<div class="name">联系我们</div>
<div class="more">了解更多 ></div>
</div>
<div class="content-detail">
<img src="@/assets/images/indexImg/content3.png" alt=""/>
<div class="name">如何购买</div>
<div class="more">了解更多 ></div>
</div>
</div>
<div class="footer">先进计算科技有限公司 沪ICP备18000749号-2</div>
</div>
</template>
<script setup name="industryApplicationsIndex">
import {ref} from 'vue'
import {getSolution} from "@/api/industry.js";
import {parseTime} from "@/utils/ruoyi.js";
import {useRouter} from "vue-router";
const solutionList = ref([])
const router = useRouter();
function getData() {
getSolution().then(res => {
solutionList.value = res.code === 0 ? res.data : []
})
}
getData()
function handleSolution(id) {
router.push(`/industryApplications/detail?id=${id}`)
}
</script>
<style scoped lang="scss">
.carousel-image {
width: 100%;
height: 100%;
object-fit: cover;
}
.view-more-text {
position: sticky;
text-align: center;
font-size: 20px;
color: #000000;
cursor: pointer;
padding-bottom: 60px;
z-index: 2 !important;
}
.new-block {
margin: 0 auto;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
padding-top: 74px;
padding-bottom: 41px;
.new-block-details {
z-index: 2 !important;
padding-top: 32px;
}
.resourceLogo {
width: 123px;
height: 123px;
margin-bottom: 32px;
z-index: 2 !important;
}
.details-introduce {
display: flex;
justify-content: center;
text-align: center;
span:first-child {
font-family: Microsoft YaHei;
font-weight: bolder;
font-size: 35px;
color: #000000;
}
span:last-child {
font-family: YouSheBiaoTiHei;
font-weight: 400;
font-size: 42px;
color: #5E6988;
}
}
.present {
font-family: Microsoft YaHei;
font-weight: bolder;
font-size: 17px;
color: #010101;
line-height: 27px;
text-align: center;
}
}
.model-box {
position: relative;
.light {
position: absolute;
z-index: 1;
width: 100%;
left: 0;
top: 12%;
}
}
.block-light {
position: absolute;
z-index: 1 !important;
width: 1700px;
height: 900px;
left: 10px;
top: 40px;
}
.particulars {
width: calc(100% - 240px);
margin: 0 auto;
cursor: pointer;
}
.resource-box {
padding: 44px 66px 0 58px;
height: 248px;
.title {
font-family: Microsoft YaHei;
font-weight: 400;
font-size: 27px;
color: #F0A227;
padding-bottom: 22px;
z-index: 2 !important;
}
.introduce {
font-family: Microsoft YaHei;
font-weight: 400;
font-size: 14px;
color: #FAFBFD;
line-height: 27px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
}
.resource-col {
z-index: 2 !important;
}
.app-container {
padding: 0;
flex-grow: 1;
flex-shrink: 1;
position: relative;
}
.home {
}
.banner {
position: relative;
cursor: pointer;
//margin-bottom: 64px;
img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
}
.block {
margin: 0 auto;
z-index: 4 !important;
padding-bottom: 60px;
}
.block-title {
font-weight: bold;
font-size: 40px;
color: #303233;
line-height: 60px;
text-align: center;
position: relative;
z-index: 3 !important;
.bg-text {
position: absolute;
left: 50%;
transform: translateX(-50%);
font-family: DIN, system-ui;
font-weight: bold;
font-size: 90px;
color: rgba(0, 0, 0, 0.02);
}
}
.block-sub-title {
font-weight: 400;
font-size: 14px;
color: #949899;
line-height: 22px;
text-align: center;
margin-bottom: 48px;
}
.view-more-btn {
border: 1px solid #C8CBCC;
border-radius: 2px;
height: 40px;
color: #303233;
z-index: 2 !important;
}
.application-item {
height: 436px;
padding: 50px 60px;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
.title {
margin-bottom: 10px;
}
.desc {
color: #444444;
margin-bottom: 10px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 4;
max-height: 100px;
-webkit-box-orient: vertical;
}
.link {
color: #444444;
justify-content: center;
}
.title {
text-align: center;
}
.desc {
text-align: center;
width: 300px;
}
}
.partners {
height: 434px;
margin-bottom: 65px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: url("@/assets/images/indexImg/bg-1.png") no-repeat;
.title {
font-weight: bold;
font-size: 34px;
color: #303233;
margin-bottom: 20px;
}
.desc {
font-weight: 400;
font-size: 14px;
color: #7e8080;
margin-bottom: 40px;
line-height: 1.8;
}
}
.information-item {
width: 570px;
.content {
font-size: 16px !important;
}
&:not(:last-child) {
padding-bottom: 26px;
margin-bottom: 26px;
border-bottom: 2px solid #D6D7D8;
}
img {
margin-top: 25px;
width: 569px;
}
.date {
font-family: DIN, system-ui;
color: #949899;
margin-right: 15px;
}
.month-day {
margin-bottom: 14px;
font-size: 24px;
}
.year {
font-size: 20px;
}
.right {
min-width: 0;
}
.title {
font-weight: bold;
font-size: 24px;
color: #303233;
margin-bottom: 10px;
padding-right: 45px;
}
.content {
font-weight: 400;
font-size: 14px;
color: #626566;
padding-right: 45px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
:deep(*) {
color: #626566 !important;
}
:deep(img) {
display: block;
}
}
}
.footer {
text-align: center;
padding: 12px 0;
color: #7C7D7E;
font-weight: 400;
font-size: 14px;
background-color: #303233;
}
.banner-text {
width: 913px;
position: absolute;
top: 50%;
left: 50%;
display: flex;
transform: translate(-50%, -50%);
}
.banner-text .banner-left div:first-child {
font-family: Microsoft YaHei;
font-weight: 300;
font-size: 75px;
color: #F8F9FD;
//line-height: 56px;
text-indent: 20px;
//padding-bottom: 16px;
span {
//font-family: DIN;
font-weight: bolder;
}
}
.banner-text .banner-left div:last-child {
font-family: Microsoft YaHei;
font-weight: bold;
font-size: 20px;
color: #ECAA1C;
line-height: 27px;
text-align: right;
}
.banner-right {
display: flex;
flex-direction: column;
justify-content: flex-end;
font-family: Microsoft YaHei;
color: #ECAA1C;
padding-left: 34px;
}
.text-right {
display: flex;
flex-direction: row;
align-items: center;
font-family: Microsoft YaHei;
font-weight: bold;
font-size: 15px;
color: #ECAA1C;
//line-height: 20px;
//padding-bottom: 8px;
.text-right-del {
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-start;
}
.exclamation-point {
font-family: Microsoft YaHei;
font-weight: bold;
font-size: 42px;
font-style: italic;
padding-left: 9px;
}
}
.text-bottom {
font-family: Copperplate Gothic Light;
font-weight: 400;
font-size: 24px;
color: #ECAA1C;
span {
font-weight: bolder;
}
}
.content-footer {
width: 100%;
height: 218px;
background: #fafafa;
display: flex;
justify-content: center;
align-items: center;
padding: 0 190px;
.content-detail {
display: flex;
flex-direction: column;
align-content: center;
align-items: center;
width: 100%;
max-width: 1520px;
cursor: pointer;
.name {
line-height: 32px;
font-size: 24px;
color: #333333;
text-align: center;
}
.more {
line-height: 22px;
font-size: 16px;
color: #333333;
margin-top: 16px;
text-align: center;
}
}
img {
width: 48px;
height: 48px;
margin-bottom: 20px;
}
}
.iframe-container {
position: absolute;
top: 10%;
left: 6%;
}
.iframe-container iframe {
position: absolute;
top: 0;
left: 0;
}
:deep(.el-dialog__body) {
padding-top: unset !important;
}
.el-tabs {
--el-border-color-light: #2E77E3;
--el-tabs-header-height: 48px;
:deep(.el-tabs__content) {
overflow: visible
}
:deep(.el-tabs__active-bar) {
display: none;
}
:deep(.el-tabs__item) {
--el-font-size-base: 16px;
padding-left: 24px !important;
padding-right: 24px !important;
&.is-active {
color: #ffffff;
background-color: #2E77E3;
}
}
}
.custom-title {
padding: 80px 0 50px;
text-align: center
}
.custom-title h5 {
font-size: 30px;
font-weight: 700;
line-height: 2
}
.custom-title p {
color: #9a9a9a;
font-size: 20px;
line-height: 2
}
.view-more-text {
position: sticky;
text-align: center;
font-size: 20px;
color: #000;
cursor: pointer;
padding-bottom: 100px;
z-index: 2 !important
}
.view-more-text .el-button {
padding: 20px 30px
}
.resource-list {
margin: 40px 45px;
}
.resource-item {
background-color: #fff;
border: 1px solid #CECECE;
position: relative;
}
.resource-item .img {
width: 100%;
height: 150px;
background: url("@/assets/images/scheme.jpg") no-repeat;
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
}
.img-title {
font-family: YouSheBiaoTiHei, system-ui;
font-size: 36px;
color: #fff;
line-height: 30px;
padding: 0 20px;
}
.resource-item .img img {
width: auto;
max-height: 100%;
max-width: 100%;
display: inline-block
}
.resource-item .title {
font-weight: 700;
font-size: 22px;
text-align: left;
//height: 80px;
//line-height: 80px
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
color: #333
}
.resource-item .text-content {
padding: 20px 20px 20px 20px;
.subtitle {
font-size: 14px;
color: #bbb8bf;
padding-top: 5px;
}
}
.resource-item .info {
font-weight: 400;
font-size: 16px;
color: #666;
line-height: 28px;
margin-top: 9px;
margin-bottom: 20px;
height: 112px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical
}
.service-card {
background-color: #fff;
margin-bottom: 30px
}
.tabs-container {
display: flex;
flex-direction: column
}
.tabs-header {
display: flex;
width: 900px;
margin: 0 auto;
justify-content: space-around;
//display: flex;
//position: relative;
//overflow-x: auto;
//white-space: nowrap
}
//.tabs-header div {
// display: flex;
// justify-content: space-around;
//}
.tabs-header button {
display: block;
padding: 5px 0;
background: none;
border: none;
cursor: pointer;
outline: none;
margin: 0 auto;
font-size: 22px;
transition: all .3s ease
}
.tabs-header button :hover {
color: #1f4aaf
}
.tabs-header .tab-active {
color: #1f4aaf;
position: relative
}
.indicator {
//position: absolute;
//bottom: 0;
height: 2px;
background-color: #1f4aaf;
transition: transform .3s ease
}
.swiper-box {
//width: 900px;
height: 400px;
//position: relative;
//overflow: hidden;
margin: 40px 0
}
.swiper-box .swiper-list {
//display: flex;
//width: 99999px;
//height: 100%;
//overflow-x: auto;
//position: absolute;
//top: 0;
//left: -300px;
//transition: all .3s
}
.swiper-box .swiper-list .swiper-item {
height: 100%;
border-radius: 20px;
background-position: center;
background-repeat: no-repeat;
background-size: cover
}
.swiper-box .swiper-list .swiper-item :last-child {
margin-right: 0
}
.swiper-box .swiper-list .swiper-item .item {
width: 100%;
height: 100%;
border-radius: 20px;
padding: 30px 20px 60px 20px;
color: #fff;
background-color: #00000026
}
.swiper-box .swiper-list .swiper-item .title {
font-size: 22px;
font-weight: 600;
height: 40px;
line-height: 40px;
padding-bottom: 20px;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis
}
.swiper-box .swiper-list .swiper-item .desc {
font-size: 16px;
line-height: 28px;
height: 112px;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical
}
.swiper-box .swiper-list .swiper-item .info {
margin: 20px 0 0
}
.swiper-box .swiper-list .swiper-item .btn {
border: 1px solid #fff;
padding: 5px 20px;
border-radius: 20px;
cursor: pointer;
margin-top: 20px;
}
.iframe-container {
position: absolute;
top: 10%;
left: 6%
}
.iframe-container iframe {
position: absolute;
top: 0;
left: 0
}
.el-dialog__body {
padding-top: unset !important
}
.partner-card {
background: #fff
}
.partner-list {
margin: 0 45px;
padding-bottom: 80px
}
.partner-item {
margin: 30px 40px;
cursor: pointer
}
.partner-item .img {
width: 160px;
height: 70px;
margin: 0 auto;
text-align: center;
display: flex;
justify-content: center;
align-items: center
}
.partner-item .img img {
width: auto;
max-height: 100%;
max-width: 100%;
display: inline-block
}
.partner-item .title {
font-weight: 700;
font-size: 18px;
text-align: center;
margin: 10px auto 0;
height: 36px;
line-height: 36px;
overflow: hidden;
color: #333
}
.information-bottom {
padding: 80px 0 40px
}
.info-top-item {
position: relative;
height: 400px;
overflow: hidden
}
.info-top-item :hover {
cursor: pointer
}
.info-top-item .content {
position: absolute;
left: 0;
right: 0;
bottom: 0;
border-radius: 0 0 10px 10px;
background-color: #10101080;
color: #fff;
padding: 14px 20px;
text-overflow: ellipsis
}
.info-top-item .title {
height: 40px;
line-height: 20px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical
}
.info-top-item img {
border-radius: 10px;
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
object-fit: cover
}
.info-bottom-item {
margin-bottom: 40px
}
.info-bottom-item :hover {
cursor: pointer
}
.info-bottom-item:hover .title, .info-bottom-item:hover .remark, .info-bottom-item:hover .date {
color: #2c53ad
}
.info-bottom-item .content {
flex: 1;
width: 75%;
padding-right: 200px
}
.info-bottom-item .title {
font-size: 20px;
color: #333;
margin-bottom: 5px;
line-height: 30px;
height: 30px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis
}
.info-bottom-item .remark {
font-size: 16px;
color: #9a9a9a;
overflow: hidden;
line-height: 24px;
max-height: 48px;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical
}
.info-bottom-item .date {
font-family: DIN, system-ui;
margin: 0 15px 0 30px;
line-height: 40px;
height: 40px;
font-size: 16px
}
</style>
src/views/information/detail.vue
<template> <template>
<div class="app-container"> <div class="app-container">
<div class="breadcrumb">
<div class="flex-justify-end">
<el-breadcrumb separator="/">
<el-breadcrumb-item>首页</el-breadcrumb-item>
<el-breadcrumb-item>活动资讯</el-breadcrumb-item>
<el-breadcrumb-item>活动资讯详情</el-breadcrumb-item>
</el-breadcrumb>
</div>
</div>
<div class="main"> <div class="main">
<div class="title">{{ detailInfo.title }}</div> <div class="title">{{ detailInfo.title }}</div>
<div class="time">{{ detailInfo.day }}/{{ detailInfo.month }}/{{ detailInfo.year }}</div> <div class="time">{{ detailInfo.day }}/{{ detailInfo.month }}/{{ detailInfo.year }}</div>
......
src/views/information/list.vue
<template> <template>
<div class="app-container"> <div class="app-container">
<div class="breadcrumb"> <!-- <div class="breadcrumb">-->
<div class="flex-justify-end"> <!-- <div class="flex-justify-end">-->
<el-breadcrumb separator="/"> <!-- <el-breadcrumb separator="/">-->
<el-breadcrumb-item>首页</el-breadcrumb-item> <!-- <el-breadcrumb-item>首页</el-breadcrumb-item>-->
<el-breadcrumb-item>活动资讯</el-breadcrumb-item> <!-- <el-breadcrumb-item>活动资讯</el-breadcrumb-item>-->
</el-breadcrumb> <!-- </el-breadcrumb>-->
</div> <!-- </div>-->
</div> <!-- </div>-->
<!-- <div class="form">-->
<div class="form"> <!-- <el-form inline>-->
<el-form inline> <!-- <el-form-item label="资讯类型">-->
<el-form-item label="资讯类型"> <!-- <el-select v-model="queryParams.category" clearable @change="getInformation">-->
<el-select v-model="queryParams.category" clearable @change="getInformation"> <!-- <el-option-->
<el-option <!-- v-for="dict in information_status"-->
v-for="dict in information_status" <!-- :key="dict.value"-->
:key="dict.value" <!-- :label="dict.label"-->
:label="dict.label" <!-- :value="dict.value"-->
:value="dict.value" <!-- />-->
/> <!-- </el-select>-->
</el-select> <!-- </el-form-item>-->
</el-form-item>
<!-- <el-form-item label="行业类别">-->
<el-form-item label="行业类别"> <!-- <el-select v-model="queryParams.industryCategory" clearable @change="getInformation">-->
<el-select v-model="queryParams.industryCategory" clearable @change="getInformation"> <!-- <el-option-->
<el-option <!-- v-for="dict in industry_category"-->
v-for="dict in industry_category" <!-- :key="dict.value"-->
:key="dict.value" <!-- :label="dict.label"-->
:label="dict.label" <!-- :value="dict.value"-->
:value="dict.value" <!-- />-->
/> <!-- </el-select>-->
</el-select> <!-- </el-form-item>-->
</el-form-item> <!-- </el-form>-->
</el-form> <!-- </div>-->
</div>
<div class="list-box"> <div class="list-box">
<el-row v-if="informationData.length" :gutter="24"> <el-row v-if="informationData.length" :gutter="24">
<el-col :span="8" v-for="item in informationData" :key="item.id"> <el-col :span="8" v-for="item in informationData" :key="item.id">
<div class="item" @click="$router.push('/information/informationDetail?id='+item.id)"> <div class="item" @click="$router.push('/information/informationDetail?id='+item.id)">
<img :src="baseUrl + item.image" alt=""> <img :src="item.image" alt="">
<div class="title">{{ item.title }}</div> <div class="title">{{ item.title }}</div>
<div class="flex-align-center flex-space-between"> <div class="flex-align-center flex-space-between">
<div class="time"> <div class="time" style="display: flex; align-items: center;flex: 1;">
<span class="date">{{ item.day }}/{{ item.month }}</span> <span class="date">{{ item.day }}/{{ item.month }}</span>
<span class="year">{{ item.year }}</span> <span class="year">{{ item.year }}</span>
</div> </div>
...@@ -62,21 +61,14 @@ ...@@ -62,21 +61,14 @@
</template> </template>
<script setup name="InformationList"> <script setup name="InformationList">
import { informationList } from '@/api/home.js' import {informationList} from '@/api/home.js'
import { ref } from 'vue' import {ref} from 'vue'
const {proxy} = getCurrentInstance()
const {
information_status,
industry_category
} = proxy.useDict('information_status', 'industry_category')
const queryParams = ref({})
const baseUrl = import.meta.env.VITE_APP_BASE_API const baseUrl = import.meta.env.VITE_APP_BASE_API
const informationData = ref([]) const informationData = ref([])
function getInformation () { function getInformation() {
informationList(queryParams.value).then(res => { informationList().then(res => {
res.data.forEach(item => { res.data.forEach(item => {
item.year = new Date(item.createTime).getFullYear() item.year = new Date(item.createTime).getFullYear()
item.month = new Date(item.createTime).getMonth() + 1 item.month = new Date(item.createTime).getMonth() + 1
...@@ -84,6 +76,7 @@ function getInformation () { ...@@ -84,6 +76,7 @@ function getInformation () {
item.day = new Date(item.createTime).getDate() item.day = new Date(item.createTime).getDate()
item.day = item.day < 10 ? '0' + item.day : item.day item.day = item.day < 10 ? '0' + item.day : item.day
item.description = item.description.replace('<p><br></p>', '') item.description = item.description.replace('<p><br></p>', '')
item.images = item.images.length !== 0 ? item.images[0] : ''
}) })
informationData.value = res.data informationData.value = res.data
}) })
...@@ -132,6 +125,7 @@ getInformation() ...@@ -132,6 +125,7 @@ getInformation()
.list-box { .list-box {
width: 1280px; width: 1280px;
margin: 0 auto; margin: 0 auto;
padding-top: 70px;
.item { .item {
margin-bottom: 24px; margin-bottom: 24px;
...@@ -140,6 +134,7 @@ getInformation() ...@@ -140,6 +134,7 @@ getInformation()
cursor: pointer; cursor: pointer;
.title { .title {
font-size: 16px !important;
color: #2E77E3; color: #2E77E3;
} }
} }
...@@ -155,11 +150,11 @@ getInformation() ...@@ -155,11 +150,11 @@ getInformation()
} }
.title { .title {
font-weight: bold; font-weight: 700;
font-size: 24px; font-size: 16px;
color: #303233; color: #303233;
margin-bottom: 16px; margin-bottom: 16px;
height: 66px; height: 26px;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
display: -webkit-box; display: -webkit-box;
...@@ -170,8 +165,8 @@ getInformation() ...@@ -170,8 +165,8 @@ getInformation()
.date { .date {
font-family: DIN, system-ui; font-family: DIN, system-ui;
font-weight: bold; font-weight: 700;
font-size: 32px; font-size: 16px;
color: #2E77E3; color: #2E77E3;
margin-right: 16px; margin-right: 16px;
} }
...@@ -179,7 +174,7 @@ getInformation() ...@@ -179,7 +174,7 @@ getInformation()
.year { .year {
font-family: DIN, system-ui; font-family: DIN, system-ui;
font-weight: 400; font-weight: 400;
font-size: 20px; font-size: 16px;
color: #2E77E3; color: #2E77E3;
} }
} }
......
src/views/partnership/listAlter.vue
...@@ -17,18 +17,17 @@ ...@@ -17,18 +17,17 @@
<p>OUR PARTNER</p></div> <p>OUR PARTNER</p></div>
<div class="partner-list"> <div class="partner-list">
<el-row :gutter="15"> <el-row :gutter="15">
<el-col :span="8" class="is-guttered"> <el-col :span="8" class="is-guttered" v-for="(i,index) in partnerList" :key="index">
<div class="partner-item"> <div class="partner-item">
<div class="img"><img <div class="img">
src="http://ph.xjkcjd.com:18081/prod-api/profile/upload/2024/12/25/智谱_20241225151742A098.png" <img
alt=""></div> :src="i.image.length !==0 ?i.image[0]:''"
<div class="title">北京智谱华章科技有限公司</div> alt=""/>
<p class="desc"> </div>
北京智谱华章科技有限公司（简称“智谱”）致力于打造新一代认知智能大模型，专注于做大模型的中国创新。公司合作研发了中英双语千亿级超大规模预训练模型GLM-130B，并基于此推出对话模型ChatGLM，开源单卡版模型ChatGLM-6B。同时，团队还打造了AIGC模型及产品矩阵，包括AI提效助手智谱清言（chatglm.cn）、高效率代码模型CodeGeeX、多模态理解模型CogVLM和文生图模型CogView等。公司践行Model <div class="title">{{ i.title }}</div>
as a <p class="desc" v-html="i.description"></p>
Service（MaaS）的市场理念，推出大模型MaaS开放平台（https://open.bigmodel.cn/），打造高效率、通用化的“模型即服务”AI开发新范式。通过认知大模型链接物理世界的亿级用户，智谱基于完整的模型生态和全流程技术支持，为千行百业带来持续创新与变革，加速迈向通用人工智能的时代。</p>
<div class="btn-box"> <div class="btn-box">
<button aria-disabled="false" type="button" <button @click="handleOpen(i.url)" aria-disabled="false" type="button"
class="el-button el-button--default is-plain"> class="el-button el-button--default is-plain">
<span class="">查看官网 </span> <span class="">查看官网 </span>
</button> </button>
...@@ -57,6 +56,23 @@ ...@@ -57,6 +56,23 @@
<script setup> <script setup>
import {getPartner} from "@/api/industry.js";
const partnerList = ref([])
function getPartnerList() {
getPartner().then((res) => {
partnerList.value = res.data
})
}
function handleOpen(url) {
if (url) {
window.open(url);
}
}
getPartnerList()
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment