Skip to content

phsl / client

Go to a project
Commit 01a1e093 by 孙美琪
Options

首页相关样式修改

parent 1bbcc2fa
Showing with 696 additions and 6 deletions
src/router/index.js
......@@ -67,7 +67,7 @@ export const constantRoutes = [
children: [
{
path: '/index',
component: () => import('@/views/index'),
component: () => import('@/views/index-copy.vue'),
name: 'Index',
meta: {title: '首页', icon: 'dashboard', affix: true}
}
......
src/views/index-copy.vue 0 → 100644
<template>
<div class="app-container home">
<div class="banner">
<el-carousel height="600px" :indicator-position="bannerImgList.length <= 1 ? 'none':'' ">
<el-carousel-item v-for="item in bannerImgList" :key="item">
<img :src="baseUrl + item.image" alt="">
</el-carousel-item>
</el-carousel>
<div class="banner-text">
<div class="banner-left">
<div>开启先进计算<span>新时代</span></div>
<div>安全 / 便携 / 弹性 / 丰富 / 节约 / 高效</div>
</div>
<div class="banner-right">
<div class="text-right">
<div class="text-right-del">
<div>OPENING</div>
<div>UP BRILLIANCE</div>
</div>
<div class="exclamation-point">!</div>
</div>
<div class="text-bottom">THE <span>NEW ERA</span></div>
</div>
</div>
</div>
<div class="new-model">
<div class="model-box" v-for="(i,index) in list" :key="i">
<div class="new-block">
<img v-if="index=== 0" class="resourceLogo" src="@/assets/images/indexImg/resource0-1.png" alt="">
<img v-if="index=== 1" class="resourceLogo" src="@/assets/images/indexImg/resource0-2.png" alt="">
<div class="new-block-details">
<div class="details-introduce">
<span>{{ i.title }}</span>
<span>{{ i.titleEH }}</span>
</div>
<div class="present">{{ i.present }}</div>
</div>
</div>
<div class="particulars">
<el-row :gutter="24">
<el-col class="resource-col" :span="8" v-for="x in i.assemblyData" :key="i"
@click="i.id === 1? $router.push(x.router):openAssembly(x)"
>
<div class="resource-box">
<div class="title">{{ x.title }}</div>
<div class="introduce">{{ x.description }}</div>
</div>
</el-col>
</el-row>
</div>
<img class="light" src="@/assets/images/indexImg/glow.png" alt=""/>
</div>
</div>
<div class="partners">
<div class="title">
生态合作伙伴
</div>
<div class="desc">助力各类“AI+”创新应用，推进企业算力生态建设，促进科创产业集聚发展</div>
<el-button class="view-more-btn" @click="$router.push('/partnership/partnershipList')">查看更多
<el-icon>
<ArrowRight/>
</el-icon>
</el-button>
</div>
<div class="block">
<div class="block-title" style="margin-bottom: 50px">
<div class="bg-text">INFORMATION</div>
活动资讯
</div>
<div class="flex flex-justify-center">
<el-row :gutter="24">
<el-col :span="12">
<!--<div class="block-sub-title">活动时间待定，活动内容待定，活动礼品自带</div>-->
<div class="information" style="margin-right: 182px">
<div class="information-item"
@click="$router.push('/information/informationDetail?id='+informationMainData.id)">
<div class="flex">
<div class="date">
<div class="month-day">{{ informationMainData.month }}/{{ informationMainData.month }}</div>
<div class="year">{{ informationMainData.year }}</div>
</div>
<div class="right">
<div class="title">{{ informationMainData.title }}</div>
<div class="content" v-html="informationMainData.description">
</div>
</div>
</div>
<img :src="baseUrl + informationMainData.image" alt="">
</div>
</div>
</el-col>
<el-col :span="12">
<div>
<div v-for="item in informationData" :key="item.id" class="information-item flex"
@click="$router.push('/information/informationDetail?id='+item.id)">
<div class="date">
<div class="month-day">{{ item.month }}/{{ item.month }}</div>
<div class="year">{{ item.year }}</div>
</div>
<div class="right">
<div class="title">{{ item.title }}</div>
<div class="content" v-html="item.description">
</div>
</div>
</div>
</div>
</el-col>
</el-row>
</div>
<div class="flex-justify-center" style="margin-top: 40px;margin-bottom: 100px">
<el-button class="view-more-btn" @click="$router.push('/information/informationList')">更多资讯
<el-icon>
<ArrowRight/>
</el-icon>
</el-button>
</div>
</div>
<div class="footer">先进计算科技有限公司 沪ICP备18000749号-2</div>
</div>
</template>
<script setup name="Index">
import {banner, assemblyList, informationList} from '@/api/home.js'
import {ref} from 'vue'
const baseUrl = import.meta.env.VITE_APP_BASE_API
const assemblyData = ref([])
const bannerImgList = ref([])
const list = ref([
{
id: 1,
title: '计算资源',
titleEH: '/RESOURCE',
present: '强劲 · 稳定 · 安全的云计算能力 · 助力企业上云',
assemblyData: [
{
title: '天河一号',
description: '天河一号拥有2048个计算节点，128个云服务阵列，64个可视化节点，4个胖节点。基于超级计算平台可提供科学研究、工程仿真等计算服务，开展并行算法研究与大规模并行应用软件开发。',
router: '/computingResource/resourceList?type=0'
},
{
title: '天河新一代',
description: '“天河”新一代超级计算机拥有通用算力200P Flops(FP64)人工智能算力800P Flops(FP16)磁盘总容量超20PB。整体性能处于世界先进水平。',
router: '/computingResource/resourceList?type=0'
},
{
title: '云计算',
description: '云计算服务为您提供安全稳定及灵活扩展的云计算服务，可实现按需扩展CPU、内存、存储和网络资源，帮助企业大幅削减IT开支，优化运维流程，专注于核心业务的创新与发展。',
router: '/computingResource/resourceList?type=0'
}
]
},
{
id: 2,
title: '行业应用',
titleEH: '/APPLICATION',
present: '集成机器学习、深度学习、自然语言处理、图像识别等先进技术，为金融、医疗、教育、零售、制造业等多个领域提供智能化解决方案。',
assemblyData: []
}
])
function getBanner() {
banner().then(res => {
bannerImgList.value = res.data
})
}
getBanner()
function getAassemblyList() {
assemblyList().then(res => {
assemblyData.value = res.data.length > 3 ? res.data.slice(0, 3) : res.data
list.value[1].assemblyData = res.data.length > 3 ? res.data.slice(0, 3) : res.data
})
}
getAassemblyList()
const informationData = ref([])
const informationMainData = ref({})
function getInformation() {
informationList().then(res => {
res.data.forEach(item => {
item.year = new Date(item.createTime).getFullYear()
item.month = new Date(item.createTime).getMonth() + 1
item.month = item.month < 10 ? '0' + item.month : item.month
item.day = new Date(item.createTime).getDate()
item.day = item.day < 10 ? '0' + item.day : item.day
item.description = item.description.replace('<p><br></p>', '')
})
informationMainData.value = res.data.length ? res.data[0] : {}
const arr = res.data.length ? res.data.slice(1, res.data.length) : []
informationData.value = arr.length > 3 ? arr.slice(0, 3) : arr
})
}
getInformation()
function openAssembly(data) {
window.open(data.url)
}
</script>
<style scoped lang="scss">
.new-model {
background: url("@/assets/images/indexImg/bg-1.png") no-repeat;
//background-color: rgba(153, 155, 163);
padding-bottom: 100px;
}
.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: 99999 !important;
}
.resourceLogo {
width: 123px;
height: 123px;
margin-bottom: 32px;
z-index: 99999 !important;
}
.details-introduce {
text-align: center;
span:first-child {
font-family: Microsoft YaHei;
font-weight: 400;
font-size: 35px;
color: #000000;
}
span:last-child {
font-family: YouSheBiaoTiHei;
font-weight: 300;
font-size: 42px;
color: #5E6988;
}
.present {
font-family: Microsoft YaHei;
font-weight: 400;
font-size: 17px;
color: #010101;
line-height: 27px;
}
}
}
.model-box {
position: relative;
.light {
position: absolute;
z-index: 1 !important;
width: 100%;
left: 0;
top: 12%;
}
}
.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: 32px;
color: #F0A227;
padding-bottom: 22px;
z-index: 99999 !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: 99999 !important;
}
.resource-col:first-of-type .resource-box {
background: url("@/assets/images/indexImg/resource1.png");
}
.resource-col:nth-of-type(2) .resource-box {
background: url("@/assets/images/indexImg/resource2.png");
}
.resource-col:nth-of-type(3) .resource-box {
background: url("@/assets/images/indexImg/resource3.png");
}
.app-container {
padding: 0;
}
.home {
}
.banner {
position: relative;
//margin-bottom: 64px;
img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
}
.block {
//width: 1280px;
width: calc(100% - 214px);
margin: 0 auto;
}
.block-title {
font-weight: bold;
font-size: 40px;
color: #303233;
line-height: 60px;
text-align: center;
position: relative;
.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;
}
.resource-item {
height: 434px;
padding: 60px 60px 0 60px;
margin-bottom: 24px;
cursor: pointer;
&.resource-item-1 {
background: url("@/assets/images/resource-1.png") no-repeat center center / cover;
}
&.resource-item-2 {
background: url("@/assets/images/resource-2.png") no-repeat center center / cover;
}
&.resource-item-3 {
.desc {
width: 35%;
}
background: url("@/assets/images/resource-3.png") no-repeat center center / cover;
}
}
.resource-item, .application-item {
&:hover {
cursor: pointer;
box-shadow: 0 0 10px 0 #dbdada;
}
.title {
font-weight: bold;
font-size: 34px;
color: #303233;
margin-bottom: 28px;
}
.desc {
font-weight: 400;
font-size: 14px;
color: #7e8080;
margin-bottom: 20px;
line-height: 1.8;
}
.link {
display: flex;
align-items: center;
color: #7e8080;
font-size: 14px;
}
}
.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;
}
//&.application-item-1 {
// background: url("@/assets/images/application-1.png") no-repeat center center / cover;
//}
//
//&.application-item-2 {
// background: url("@/assets/images/application-2.png") no-repeat center center / cover;
//}
//
//&.application-item-3 {
// background: url("@/assets/images/application-3.png") no-repeat center center / cover;
//}
.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/partners.png") no-repeat center center / cover;
.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-right {
// //flex: 1;
// padding-right: 210px;
//}
//.information {
// width: 100%;
// padding: 0 214px;
//}
.information-item {
width: 570px;
&:hover {
cursor: pointer;
.date {
color: #2E77E3;
}
.title {
color: #2E77E3;
}
.content {
color: #2E77E3;
}
}
&: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 {
position: absolute;
top: 33%;
left: 26%;
display: flex;
}
.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;
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;
}
}
</style>
src/views/index.vue
......@@ -106,8 +106,10 @@
<div class="bg-text">INFORMATION</div>
活动资讯
</div>
<!--<div class="block-sub-title">活动时间待定，活动内容待定，活动礼品自带</div>-->
<div class="flex flex-justify-center">
<el-row :gutter="24">
<el-col :span="12">
<!--<div class="block-sub-title">活动时间待定，活动内容待定，活动礼品自带</div>-->
<div class="information" style="margin-right: 182px">
<div class="information-item"
@click="$router.push('/information/informationDetail?id='+informationMainData.id)">
......@@ -125,7 +127,8 @@
<img :src="baseUrl + informationMainData.image" alt="">
</div>
</div>
</el-col>
<el-col :span="12">
<div>
<div v-for="item in informationData" :key="item.id" class="information-item flex"
@click="$router.push('/information/informationDetail?id='+item.id)">
......@@ -140,8 +143,9 @@
</div>
</div>
</div>
</el-col>
</el-row>
</div>
<div class="flex-justify-center" style="margin-top: 40px;margin-bottom: 100px">
<el-button class="view-more-btn" @click="$router.push('/information/informationList')">更多资讯
<el-icon>
......@@ -216,6 +220,7 @@ function openAssembly(data) {
}
.banner {
position: relative;
margin-bottom: 64px;
img {
......
src/views/partnership/list.vue
......@@ -49,7 +49,7 @@ function openPage (data) {
.item {
height: 354px;
background: #FBFCFE;
border-radius: 4px;
border-radius: 15px;
border: 1px solid #D8D9DB;
padding: 24px;
margin-bottom: 24px;
......@@ -81,7 +81,7 @@ function openPage (data) {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
}
}
......
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