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