Skip to content

phsl / client

Go to a project
Commit 4b53d612 by 赵月辉
Options

完成首页；行业应用；活动资讯的接口对接

parent b72e438a
Showing with 256 additions and 169 deletions
.env.development
...@@ -5,4 +5,4 @@ VITE_APP_TITLE = 先进计算公共服务平台 ...@@ -5,4 +5,4 @@ VITE_APP_TITLE = 先进计算公共服务平台
VITE_APP_ENV = 'development' VITE_APP_ENV = 'development'
# 若依管理系统/开发环境 # 若依管理系统/开发环境
VITE_APP_BASE_API = '/dev-api' VITE_APP_BASE_API = 'http://47.106.72.238:8086'
src/api/home.js 0 → 100644
import request from '@/utils/request'
// 获取组件服务列表数据
export function assemblyList (query) {
return request({
url: '/api/v1/assemblyList',
method: 'get',
params: query
})
}
// 获取活动资讯列表数据
export function informationList (query) {
return request({
url: '/api/v1/information',
method: 'get',
params: query
})
}
// 获取活动资讯详情
export function informationDetail (query) {
return request({
url: '/api/v1/informationDetail',
method: 'get',
params: query
})
}
src/components/ImageUpload/index.vue
...@@ -94,6 +94,7 @@ const showTip = computed( ...@@ -94,6 +94,7 @@ const showTip = computed(
) )
watch(() => props.modelValue, val => { watch(() => props.modelValue, val => {
console.log(val)
if (val) { if (val) {
// 首先将值转为数组 // 首先将值转为数组
const list = Array.isArray(val) ? val : props.modelValue.split(',') const list = Array.isArray(val) ? val : props.modelValue.split(',')
...@@ -155,7 +156,7 @@ function handleExceed () { ...@@ -155,7 +156,7 @@ function handleExceed () {
// 上传成功回调 // 上传成功回调
function handleUploadSuccess (res, file) { function handleUploadSuccess (res, file) {
if (res.code === 200) { if (res.code === 200) {
uploadList.value.push({name: res.fileName, url: res.fileName}) uploadList.value.push({name: res.fileName, url: baseUrl + res.fileName})
uploadedSuccessfully() uploadedSuccessfully()
} else { } else {
number.value-- number.value--
......
src/permission.js
...@@ -11,7 +11,13 @@ import usePermissionStore from '@/store/modules/permission' ...@@ -11,7 +11,13 @@ import usePermissionStore from '@/store/modules/permission'
NProgress.configure({showSpinner: false}) NProgress.configure({showSpinner: false})
const whiteList = ['/login', '/register', '/index', '/computingResource/resourceList'] const whiteList = [
'/login',
'/register',
'/index',
'/computingResource/resourceList',
'/industryApplications/detail',
'/componentServices/componentServicesList','/partnership/partnershipList']
router.beforeEach((to, from, next) => { router.beforeEach((to, from, next) => {
NProgress.start() NProgress.start()
......
src/views/index.vue
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
<div class=block-sub-title>强劲、稳定、安全的云计算能力，助力企业上云</div> <div class=block-sub-title>强劲、稳定、安全的云计算能力，助力企业上云</div>
<el-row :gutter="24"> <el-row :gutter="24">
<el-col :span="12"> <el-col :span="12">
<div class="resource-item resource-item-1"> <div class="resource-item resource-item-1" @click="$router.push('/computingResource/resourceList?type=0')">
<div class="title">天河一号</div> <div class="title">天河一号</div>
<div class="desc"> <div class="desc">
天河一号拥有2048个计算节点，128个云服务阵列，64个可视化节点，4个胖节点。基于超级计算平台可提供科学研究、工程仿真等计算服务，开展并行算法研究与大规模并行应用软件开发。 天河一号拥有2048个计算节点，128个云服务阵列，64个可视化节点，4个胖节点。基于超级计算平台可提供科学研究、工程仿真等计算服务，开展并行算法研究与大规模并行应用软件开发。
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
</div> </div>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<div class="resource-item resource-item-2"> <div class="resource-item resource-item-2" @click="$router.push('/computingResource/resourceList?type=0')">
<div class="title">天河新一代</div> <div class="title">天河新一代</div>
<div class="desc">“天河”新一代超级计算机拥有通用算力200P Flops(FP64)人工智能算力800P <div class="desc">“天河”新一代超级计算机拥有通用算力200P Flops(FP64)人工智能算力800P
Flops(FP16)磁盘总容量超20PB。整体性能处于世界先进水平。 Flops(FP16)磁盘总容量超20PB。整体性能处于世界先进水平。
...@@ -38,7 +38,7 @@ ...@@ -38,7 +38,7 @@
</div> </div>
</el-col> </el-col>
<el-col :span="24"> <el-col :span="24">
<div class="resource-item resource-item-3"> <div class="resource-item resource-item-3" @click="$router.push('/computingResource/resourceList?type=0')">
<div class="title">CPU云</div> <div class="title">CPU云</div>
<div class="desc"> <div class="desc">
云计算服务为您提供安全稳定及灵活扩展的云计算服务，可实现按需扩展CPU、内存、存储和网络资源，帮助企业大幅削减IT开支，优化运维流程，专注于核心业务的创新与发展。 云计算服务为您提供安全稳定及灵活扩展的云计算服务，可实现按需扩展CPU、内存、存储和网络资源，帮助企业大幅削减IT开支，优化运维流程，专注于核心业务的创新与发展。
...@@ -62,32 +62,11 @@ ...@@ -62,32 +62,11 @@
通过ECI+ASK的弹性伸缩和快速启动特性，大大缩短扩容时间，轻松支撑突发流量并保障业务稳定性。 通过ECI+ASK的弹性伸缩和快速启动特性，大大缩短扩容时间，轻松支撑突发流量并保障业务稳定性。
</div> </div>
<el-row :gutter="24"> <el-row :gutter="24">
<el-col :span="8"> <el-col v-for="item in assemblyData" :key="item.id" :span="8">
<div class="application-item application-item-1"> <div class="application-item application-item-1" @click="openAssembly(item)"
<div class="title">摄影行业</div> :style="{'background-image': `url(${baseUrl + item.homeImage})`}">
<div class="desc">通过ECI+ASK的弹性伸缩和快速启动特性，大大缩短扩容时间。</div> <div class="title">{{ item.title }}</div>
<div class="link">查看详情 <div class="desc">{{ item.description }}</div>
<el-icon>
<ArrowRight/>
</el-icon>
</div>
</div>
</el-col>
<el-col :span="8">
<div class="application-item application-item-2">
<div class="title">土木工程</div>
<div class="desc">通过ECI+ASK的弹性伸缩和快速启动特性，大大缩短扩容时间。</div>
<div class="link">查看详情
<el-icon>
<ArrowRight/>
</el-icon>
</div>
</div>
</el-col>
<el-col :span="8">
<div class="application-item application-item-3">
<div class="title">材料工程</div>
<div class="desc">通过ECI+ASK的弹性伸缩和快速启动特性，大大缩短扩容时间。</div>
<div class="link">查看详情 <div class="link">查看详情
<el-icon> <el-icon>
<ArrowRight/> <ArrowRight/>
...@@ -97,12 +76,12 @@ ...@@ -97,12 +76,12 @@
</el-col> </el-col>
</el-row> </el-row>
<div class="flex-justify-center" style="margin-top: 28px;margin-bottom: 76px"> <div class="flex-justify-center" style="margin-top: 28px;margin-bottom: 100px">
<el-button class="view-more-btn">更多行业 <!-- <el-button class="view-more-btn">更多行业-->
<el-icon> <!-- <el-icon>-->
<ArrowRight/> <!-- <ArrowRight/>-->
</el-icon> <!-- </el-icon>-->
</el-button> <!-- </el-button>-->
</div> </div>
</div> </div>
...@@ -123,62 +102,36 @@ ...@@ -123,62 +102,36 @@
<div class="bg-text">INFORMATION</div> <div class="bg-text">INFORMATION</div>
活动资讯 活动资讯
</div> </div>
<div class=block-sub-title>活动时间待定，活动内容待定，活动礼品自带</div> <!--<div class=block-sub-title>活动时间待定，活动内容待定，活动礼品自带</div>-->
<div class="flex flex-justify-center"> <div class="flex flex-justify-center">
<div class="information" style="margin-right: 182px"> <div class="information" style="margin-right: 182px">
<div class="information-item"> <div class="information-item"
@click="$router.push('/information/informationDetail?id='+informationMainData.id)">
<div class="flex"> <div class="flex">
<div class="date"> <div class="date">
<div class="month-day">4/04</div> <div class="month-day">{{ informationMainData.month }}/{{ informationMainData.month }}</div>
<div class="year">2024</div> <div class="year">{{ informationMainData.year }}</div>
</div> </div>
<div class=""> <div class="right">
<div class="title">广东横琴万象世界启动区景观设计</div> <div class="title">{{ informationMainData.title }}</div>
<div class="content"> <div class="content" v-html="informationMainData.description">
2023西安设计周以“设计面向未来”为主题，展览面积4万平方米，由“城市设计”“新锐设计”“设计之帆”“潮流潮玩”4个主题展组成
</div> </div>
</div> </div>
</div> </div>
<img src="@/assets/images/info-img.png" alt=""> <img :src="baseUrl + informationMainData.image" alt="">
</div> </div>
</div> </div>
<div> <div>
<div class="information-item flex"> <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="date">
<div class="month-day">4/04</div> <div class="month-day">{{ item.month }}/{{ item.month }}</div>
<div class="year">2024</div> <div class="year">{{ item.year }}</div>
</div> </div>
<div class=""> <div class="right">
<div class="title">广东横琴万象世界启动区景观设计</div> <div class="title">{{ item.title }}</div>
<div class="content"> <div class="content" v-html="item.description">
2023西安设计周以“设计面向未来”为主题，展览面积4万平方米，由“城市设计”“新锐设计”“设计之帆”“潮流潮玩”4个主题展组成
</div>
</div>
</div>
<div class="information-item flex">
<div class="date">
<div class="month-day">4/04</div>
<div class="year">2024</div>
</div>
<div class="">
<div class="title">广东横琴万象世界启动区景观设计</div>
<div class="content">
2023西安设计周以“设计面向未来”为主题，展览面积4万平方米，由“城市设计”“新锐设计”“设计之帆”“潮流潮玩”4个主题展组成
</div>
</div>
</div>
<div class="information-item flex">
<div class="date">
<div class="month-day">4/04</div>
<div class="year">2024</div>
</div>
<div class="">
<div class="title">广东横琴万象世界启动区景观设计</div>
<div class="content">
2023西安设计周以“设计面向未来”为主题，展览面积4万平方米，由“城市设计”“新锐设计”“设计之帆”“潮流潮玩”4个主题展组成
</div> </div>
</div> </div>
</div> </div>
...@@ -186,7 +139,7 @@ ...@@ -186,7 +139,7 @@
</div> </div>
<div class="flex-justify-center" style="margin-top: 40px;margin-bottom: 100px"> <div class="flex-justify-center" style="margin-top: 40px;margin-bottom: 100px">
<el-button class="view-more-btn">更多资讯 <el-button class="view-more-btn" @click="$router.push('/information/informationList')">更多资讯
<el-icon> <el-icon>
<ArrowRight/> <ArrowRight/>
</el-icon> </el-icon>
...@@ -199,7 +152,44 @@ ...@@ -199,7 +152,44 @@
</template> </template>
<script setup name="Index"> <script setup name="Index">
import { assemblyList, informationList } from '@/api/home.js'
import { ref } from 'vue'
const baseUrl = import.meta.env.VITE_APP_BASE_API
const assemblyData = ref([])
function getAassemblyList () {
assemblyList().then(res => {
assemblyData.value = 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> </script>
<style scoped lang="scss"> <style scoped lang="scss">
...@@ -263,6 +253,7 @@ ...@@ -263,6 +253,7 @@
height: 434px; height: 434px;
padding: 60px 60px 0 60px; padding: 60px 60px 0 60px;
margin-bottom: 24px; margin-bottom: 24px;
cursor: pointer;
&.resource-item-1 { &.resource-item-1 {
background: url("@/assets/images/resource-1.png") no-repeat center center / cover; background: url("@/assets/images/resource-1.png") no-repeat center center / cover;
...@@ -282,6 +273,11 @@ ...@@ -282,6 +273,11 @@
} }
.resource-item, .application-item { .resource-item, .application-item {
&:hover {
cursor: pointer;
box-shadow: 0 0 10px 0 #eeeeee;
}
.title { .title {
font-weight: bold; font-weight: bold;
font-size: 34px; font-size: 34px;
...@@ -307,10 +303,24 @@ ...@@ -307,10 +303,24 @@
.application-item { .application-item {
height: 436px; height: 436px;
padding: 64px; padding: 50px 60px;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
.title {
margin-bottom: 10px;
}
.desc { .desc {
color: #444444; 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 { .link {
...@@ -318,17 +328,17 @@ ...@@ -318,17 +328,17 @@
justify-content: center; justify-content: center;
} }
&.application-item-1 { //&.application-item-1 {
background: url("@/assets/images/application-1.png") no-repeat center center / cover; // background: url("@/assets/images/application-1.png") no-repeat center center / cover;
} //}
//
&.application-item-2 { //&.application-item-2 {
background: url("@/assets/images/application-2.png") no-repeat center center / cover; // background: url("@/assets/images/application-2.png") no-repeat center center / cover;
} //}
//
&.application-item-3 { //&.application-item-3 {
background: url("@/assets/images/application-3.png") no-repeat center center / cover; // background: url("@/assets/images/application-3.png") no-repeat center center / cover;
} //}
.title { .title {
text-align: center; text-align: center;
...@@ -363,11 +373,6 @@ ...@@ -363,11 +373,6 @@
margin-bottom: 40px; margin-bottom: 40px;
line-height: 1.8; line-height: 1.8;
} }
.view-more-btn {
border: none;
color: #ffffff;
}
} }
.information-item { .information-item {
...@@ -375,9 +380,12 @@ ...@@ -375,9 +380,12 @@
&:hover { &:hover {
cursor: pointer; cursor: pointer;
box-shadow: 0 0 10px 0 #eeeeee;
.date { .date {
color: #2E77E3; color: #2E77E3;
} }
.title { .title {
color: #2E77E3; color: #2E77E3;
} }
...@@ -395,16 +403,18 @@ ...@@ -395,16 +403,18 @@
img { img {
margin-top: 25px; margin-top: 25px;
width: 469px;
height: 286px;
} }
.date { .date {
font-family: DIN, system-ui; font-family: DIN, system-ui;
color: #949899; color: #949899;
margin-right: 15px;
} }
.month-day { .month-day {
margin-bottom: 14px; margin-bottom: 14px;
margin-right: 15px;
font-size: 24px; font-size: 24px;
} }
...@@ -412,6 +422,10 @@ ...@@ -412,6 +422,10 @@
font-size: 20px; font-size: 20px;
} }
.right {
min-width: 0;
}
.title { .title {
font-weight: bold; font-weight: bold;
font-size: 24px; font-size: 24px;
...@@ -430,6 +444,14 @@ ...@@ -430,6 +444,14 @@
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 3; -webkit-line-clamp: 3;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
:deep(*) {
color: #626566 !important;
}
:deep(img) {
display: block;
}
} }
} }
......
src/views/information/detail.vue
...@@ -11,17 +11,35 @@ ...@@ -11,17 +11,35 @@
</div> </div>
<div class="main"> <div class="main">
<div class="title">让算力更好地服务您！超聚变国际2024技术峰会暨伙伴大会成功举行</div> <div class="title">{{ detailInfo.title }}</div>
<div class="time">2024/3/24</div> <div class="time">{{ detailInfo.day }}/{{ detailInfo.month }}/{{ detailInfo.year }}</div>
<el-divider/> <el-divider/>
<div class="content"></div> <div class="content" v-html="detailInfo.description"></div>
</div> </div>
</div> </div>
</template> </template>
<script setup name="InformationDetail"> <script setup name="InformationDetail">
import { informationDetail } from '@/api/home.js'
import { useRoute } from 'vue-router'
const route = useRoute()
const detailInfo = ref({})
function getInformationDetail () {
informationDetail({id: route.query.id}).then(res => {
res.data.year = new Date(res.data.createTime).getFullYear()
res.data.month = new Date(res.data.createTime).getMonth() + 1
res.data.month = res.data.month < 10 ? '0' + res.data.month : res.data.month
res.data.day = new Date(res.data.createTime).getDate()
res.data.day = res.data.day < 10 ? '0' + res.data.day : res.data.day
detailInfo.value = res.data
})
}
getInformationDetail()
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
...@@ -67,4 +85,11 @@ ...@@ -67,4 +85,11 @@
font-size: 14px; font-size: 14px;
color: #C8CBCC; color: #C8CBCC;
} }
.content {
:deep(img) {
height: auto;
max-width: 100%;
}
}
</style> </style>
src/views/information/list.vue
...@@ -12,29 +12,39 @@ ...@@ -12,29 +12,39 @@
<div class="form"> <div class="form">
<el-form inline> <el-form inline>
<el-form-item label="资讯类型"> <el-form-item label="资讯类型">
<el-select> <el-select v-model="queryParams.category" clearable @change="getInformation">
<el-option>测试</el-option> <el-option
v-for="dict in information_status"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label=""> <el-form-item label="行业类别">
<el-select> <el-select v-model="queryParams.industryCategory" clearable @change="getInformation">
<el-option>测试</el-option> <el-option
v-for="dict in industry_category"
:key="dict.value"
:label="dict.label"
: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 :gutter="24"> <el-row v-if="informationData.length" :gutter="24">
<el-col :span="8"> <el-col :span="8" v-for="item in informationData" :key="item.id">
<div class="item"> <div class="item" @click="$router.push('/information/informationDetail?id='+item.id)">
<img src="@/assets/images/WX20240424-100824.png" alt=""> <img :src="baseUrl + item.image" alt="">
<div class="title">PAX航空集团携手民航局，助力适航审定人才培养</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">
<span class="date">3/24</span> <span class="date">{{ item.day }}/{{ item.month }}</span>
<span class="year">2024</span> <span class="year">{{ item.year }}</span>
</div> </div>
<el-button link type="primary"> <el-button link type="primary">
详情 详情
...@@ -45,67 +55,41 @@ ...@@ -45,67 +55,41 @@
</div> </div>
</div> </div>
</el-col> </el-col>
<el-col :span="8">
<div class="item">
<img src="@/assets/images/WX20240424-100824.png" alt="">
<div class="title">PAX航空集团携手民航局，助力适航审定人才培养</div>
<div class="flex-align-center flex-space-between">
<div class="time">
<span class="date">3/24</span>
<span class="year">2024</span>
</div>
<el-button link type="primary">
详情
<el-icon>
<ArrowRight/>
</el-icon>
</el-button>
</div>
</div>
</el-col>
<el-col :span="8">
<div class="item">
<img src="@/assets/images/WX20240424-100824.png" alt="">
<div class="title">PAX航空集团携手民航局，助力适航审定人才培养</div>
<div class="flex-align-center flex-space-between">
<div class="time">
<span class="date">3/24</span>
<span class="year">2024</span>
</div>
<el-button link type="primary">
详情
<el-icon>
<ArrowRight/>
</el-icon>
</el-button>
</div>
</div>
</el-col>
<el-col :span="8">
<div class="item">
<img src="@/assets/images/WX20240424-100824.png" alt="">
<div class="title">PAX航空集团携手民航局，助力适航审定人才培养</div>
<div class="flex-align-center flex-space-between">
<div class="time">
<span class="date">3/24</span>
<span class="year">2024</span>
</div>
<el-button link type="primary">
详情
<el-icon>
<ArrowRight/>
</el-icon>
</el-button>
</div>
</div>
</el-col>
</el-row> </el-row>
<el-empty v-else/>
</div> </div>
</div> </div>
</template> </template>
<script setup name="InformationList"> <script setup name="InformationList">
import { informationList } from '@/api/home.js'
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 informationData = ref([])
function getInformation () {
informationList(queryParams.value).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>', '')
})
informationData.value = res.data
})
}
getInformation()
</script> </script>
...@@ -152,6 +136,14 @@ ...@@ -152,6 +136,14 @@
.item { .item {
margin-bottom: 24px; margin-bottom: 24px;
&:hover {
cursor: pointer;
.title {
color: #2E77E3;
}
}
img { img {
background: #FFFFFF; background: #FFFFFF;
border-radius: 4px 4px 4px 4px; border-radius: 4px 4px 4px 4px;
...@@ -167,6 +159,13 @@ ...@@ -167,6 +159,13 @@
font-size: 24px; font-size: 24px;
color: #303233; color: #303233;
margin-bottom: 16px; margin-bottom: 16px;
height: 66px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
max-height: 100px;
-webkit-box-orient: vertical;
} }
.date { .date {
......
vite.config.js
...@@ -35,6 +35,11 @@ export default defineConfig(({ mode, command }) => { ...@@ -35,6 +35,11 @@ export default defineConfig(({ mode, command }) => {
changeOrigin: true, changeOrigin: true,
rewrite: (p) => p.replace(/^\/dev-api/, '') rewrite: (p) => p.replace(/^\/dev-api/, '')
} }
,'http://47.106.72.238:8086': {
target: 'http://47.106.72.238:8086',
changeOrigin: true,
rewrite: (p) => p.replace(/^\/dev-api/, '')
}
} }
}, },
//fix:error:stdin>:7356:1: warning: "@charset" must be the first rule in the file //fix:error:stdin>:7356:1: warning: "@charset" must be the first rule in the file
......
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