Skip to content

phsl / client

Go to a project
Commit f8389862 by lijinqi
Options

登录修改

parent 0ecae0aa
Showing with 695 additions and 768 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 = 'http://localhost:8086' VITE_APP_BASE_API = 'http://localhost:48080/app-api/'
src/api/login.js
import request from '@/utils/request' import request from '@/utils/request'
// 登录方法 // 登录方法
export function login(username, password, code, uuid) { export function login(mobile, password, code, uuid) {
const data = { const data = {
username, mobile,
password, password,
code, code,
uuid uuid
} }
return request({ return request({
url: '/login', url: '/member/auth/login',
headers: { headers: {
isToken: false, isToken: false,
repeatSubmit: false repeatSubmit: false
...@@ -42,19 +42,7 @@ export function getInfo() { ...@@ -42,19 +42,7 @@ export function getInfo() {
// 退出方法 // 退出方法
export function logout() { export function logout() {
return request({ return request({
url: '/logout', url: '/member/auth/logout',
method: 'post' method: 'post'
}) })
} }
// 获取验证码
export function getCodeImg() {
return request({
url: '/captchaImage',
headers: {
isToken: false
},
method: 'get',
timeout: 20000
})
}
\ No newline at end of file
src/router/index.js
...@@ -67,7 +67,7 @@ export const constantRoutes = [ ...@@ -67,7 +67,7 @@ export const constantRoutes = [
children: [ children: [
{ {
path: '/index', path: '/index',
component: () => import('@/views/index-copy.vue'), component: () => import('@/views/index.vue'),
name: 'Index', name: 'Index',
meta: {title: '首页', icon: 'dashboard', affix: true} meta: {title: '首页', icon: 'dashboard', affix: true}
} }
......
src/store/modules/user.js
...@@ -16,14 +16,16 @@ const useUserStore = defineStore( ...@@ -16,14 +16,16 @@ const useUserStore = defineStore(
actions: { actions: {
// 登录 // 登录
login(userInfo) { login(userInfo) {
const username = userInfo.username.trim() const mobile = userInfo.mobile.trim()
const password = userInfo.password const password = userInfo.password
const code = userInfo.code const code = userInfo.code
const uuid = userInfo.uuid const uuid = userInfo.uuid
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
login(username, password, code, uuid).then(res => { login(mobile, password, code, uuid).then(res => {
setToken(res.token) setToken(res.data.accessToken)
this.token = res.token this.token = res.data.token
resolve() resolve()
}).catch(error => { }).catch(error => {
reject(error) reject(error)
...@@ -44,7 +46,7 @@ const useUserStore = defineStore( ...@@ -44,7 +46,7 @@ const useUserStore = defineStore(
this.roles = ['ROLE_DEFAULT'] this.roles = ['ROLE_DEFAULT']
} }
this.id = user.userId this.id = user.userId
this.name = user.userName this.name = user.mobile
this.avatar = avatar this.avatar = avatar
resolve(res) resolve(res)
}).catch(error => { }).catch(error => {
......
src/utils/request.js
...@@ -10,8 +10,9 @@ import useUserStore from '@/store/modules/user' ...@@ -10,8 +10,9 @@ import useUserStore from '@/store/modules/user'
let downloadLoadingInstance; let downloadLoadingInstance;
// 是否显示重新登录 // 是否显示重新登录
export let isRelogin = { show: false }; export let isRelogin = { show: false };
axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8' axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
axios.defaults.headers['tenant-id'] = '1';
// 创建axios实例 // 创建axios实例
const service = axios.create({ const service = axios.create({
// axios中请求配置有baseURL选项，表示请求URL公共部分 // axios中请求配置有baseURL选项，表示请求URL公共部分
...@@ -127,7 +128,7 @@ export function download(url, params, filename, config) { ...@@ -127,7 +128,7 @@ export function download(url, params, filename, config) {
downloadLoadingInstance = ElLoading.service({ text: "正在下载数据，请稍候", background: "rgba(0, 0, 0, 0.7)", }) downloadLoadingInstance = ElLoading.service({ text: "正在下载数据，请稍候", background: "rgba(0, 0, 0, 0.7)", })
return service.post(url, params, { return service.post(url, params, {
transformRequest: [(params) => { return tansParams(params) }], transformRequest: [(params) => { return tansParams(params) }],
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, headers: { 'Content-Type': 'application/x-www-form-urlencoded'},
responseType: 'blob', responseType: 'blob',
...config ...config
}).then(async (data) => { }).then(async (data) => {
......
src/views/index.vue
...@@ -2,187 +2,221 @@ ...@@ -2,187 +2,221 @@
<div class="app-container home"> <div class="app-container home">
<div class="banner"> <div class="banner">
<el-carousel height="600px" :indicator-position="bannerImgList.length <= 1 ? 'none':'' "> <el-carousel height="600px" :indicator-position="bannerImgList.length <= 1 ? 'none':'' ">
<el-carousel-item v-for="item in bannerImgList" :key="item"> <el-carousel-item v-for="item in bannerImgList" :key="item" @click="handleCarousel(item.url)">
<img :src="baseUrl + item.image" alt=""> <img :src="baseUrl + item.image" alt="">
</el-carousel-item> </el-carousel-item>
</el-carousel> </el-carousel>
</div> </div>
<div class="new-model">
<div class="block" style="margin-bottom: 76px"> <div style="padding-top: 32px;">
<div class="block-title"> <div class="model-box" v-for="(i,index) in list" :key="i">
<div class="bg-text">RESOURCE</div> <div class="new-block">
计算资源 <img v-if="index=== 0" class="resourceLogo" src="@/assets/images/indexImg/resource0-1.png" alt="">
</div> <img v-if="index=== 1" class="resourceLogo" src="@/assets/images/indexImg/resource0-2.png" alt="">
<div class="block-sub-title">强劲、稳定、安全的云计算能力，助力企业上云</div> <img v-if="index=== 2" class="resourceLogo" src="@/assets/images/indexImg/resource0-3.png" alt="">
<el-row :gutter="24"> <div class="new-block-details">
<el-col :span="12"> <div class="details-introduce">
<div class="resource-item resource-item-1" @click="$router.push('/computingResource/resourceList?type=0')"> <span>{{ i.title }}</span>
<div class="title">天河一号</div> <span>{{ i.titleEH }}</span>
<div class="desc"> </div>
天河一号拥有2048个计算节点，128个云服务阵列，64个可视化节点，4个胖节点。基于超级计算平台可提供科学研究、工程仿真等计算服务，开展并行算法研究与大规模并行应用软件开发。 <div class="present">{{ i.present }}</div>
</div>
<div class="link">查看详情
<el-icon>
<ArrowRight/>
</el-icon>
</div>
</div>
</el-col>
<el-col :span="12">
<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。整体性能处于世界先进水平。
</div>
<div class="link">查看详情
<el-icon>
<ArrowRight/>
</el-icon>
</div> </div>
</div> </div>
</el-col> <div v-if="index === 2" class="view-more-text"
<el-col :span="24"> @click="$router.push('/partnership/partnershipList')">
<div class="resource-item resource-item-3" @click="$router.push('/computingResource/resourceList?type=0')"> 查看更多
<div class="title">云计算</div>
<div class="desc">
云计算服务为您提供安全稳定及灵活扩展的云计算服务，可实现按需扩展CPU、内存、存储和网络资源，帮助企业大幅削减IT开支，优化运维流程，专注于核心业务的创新与发展。
</div>
<div class="link">查看详情
<el-icon>
<ArrowRight/>
</el-icon>
</div>
</div> </div>
</el-col> <div class="particulars" v-if="index !== 2">
</el-row> <el-row :gutter="24">
</div> <el-col class="resource-col" :span="8" v-for="x in i.assemblyData" :key="i"
@click="i.id === 1? $router.push('/computingResource/resourceList?type=' + x.category):openAssembly(x)"
<div class="block"> >
<div class="block-title"> <!-- style="background: url("@/assets/images/indexImg/resource1.png") no-repeat center center / 100%;"-->
<div class="bg-text">APPLICATION</div> <div class="resource-box" :style="{background: `url(${index === 0 ?baseUrl+x.image:baseUrl+x.homeImage}) no-repeat center center / 100%`}">
行业应用 <div class="title">{{ x.title }}</div>
</div> <div class="introduce">{{ index === 0 ? x.information : x.description }}</div>
<div class="block-sub-title"> </div>
集成机器学习、深度学习、自然语言处理、图像识别等先进技术，为金融、医疗、教育、零售、制造业等多个领域提供智能化解决方案。 </el-col>
</div> </el-row>
<el-row :gutter="24"> <div v-if="index === 1" class="view-more-text" style="margin-top: 40px;"
<el-col v-for="item in assemblyData" :key="item.id" :span="8"> @click="$router.push('/componentServices/componentServicesList')">
<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/>
</el-icon>
</div> </div>
</div> </div>
</el-col> <img class="light" src="@/assets/images/indexImg/glow.png" alt=""/>
</el-row> </div>
<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>
<div class="partners">
<div class="title">
生态合作伙伴
</div> </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>
<div class="block"> <div class="block" style="padding-top: 70px;position: relative;">
<div class="block-title" style="margin-bottom: 50px"> <div style="width: calc(100% - 214px);margin: 0 auto;padding-bottom: 10px;">
<div class="bg-text">INFORMATION</div> <div class="block-title" style="margin-bottom: 50px;z-index: 3 !important;">
活动资讯 <div class="bg-text">INFORMATION</div>
</div> 活动资讯
<div class="flex flex-justify-center"> </div>
<el-row :gutter="24"> <div class="flex flex-justify-center">
<el-col :span="12"> <el-row :gutter="24" style="z-index: 2;">
<!--<div class="block-sub-title">活动时间待定，活动内容待定，活动礼品自带</div>--> <el-col :span="12">
<div class="information" style="margin-right: 182px"> <!--<div class="block-sub-title">活动时间待定，活动内容待定，活动礼品自带</div>-->
<div class="information-item" <div class="information" style="margin-right: 182px">
@click="$router.push('/information/informationDetail?id='+informationMainData.id)"> <div class="information-item"
<div class="flex"> @click="$router.push('/information/informationDetail?id='+informationMainData.id)">
<div class="date"> <div class="flex">
<div class="month-day">{{ informationMainData.month }}/{{ informationMainData.month }}</div> <div class="date">
<div class="year">{{ informationMainData.year }}</div> <div class="month-day">{{ informationMainData.month }}/{{ informationMainData.month }}</div>
</div> <div class="year">{{ informationMainData.year }}</div>
<div class="right"> </div>
<div class="title">{{ informationMainData.title }}</div> <div class="right">
<div class="content" v-html="informationMainData.description"> <div class="title">{{ informationMainData.title }}</div>
<div class="content" v-html="informationMainData.remark"></div>
</div> </div>
</div> </div>
<img :src="baseUrl + informationMainData.image" alt="">
</div> </div>
<img :src="baseUrl + informationMainData.image" alt="">
</div> </div>
</div> </el-col>
</el-col> <el-col :span="12">
<el-col :span="12"> <div>
<div> <div v-for="item in informationData" :key="item.id" 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)">
@click="$router.push('/information/informationDetail?id='+item.id)"> <div class="date">
<div class="date"> <div class="month-day">{{ item.month }}/{{ item.month }}</div>
<div class="month-day">{{ item.month }}/{{ item.month }}</div> <div class="year">{{ item.year }}</div>
<div class="year">{{ item.year }}</div> </div>
</div> <div class="right">
<div class="right"> <div class="title">{{ item.title }}</div>
<div class="title">{{ item.title }}</div> <div class="content" v-html="item.remark">
<div class="content" v-html="item.description"> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </el-col>
</el-col> </el-row>
</el-row> </div>
<div class="view-more-text" style="padding-top: 40px;" @click="$router.push('/information/informationList')">
更多资讯
</div>
</div>
<img class="block-light" src="@/assets/images/indexImg/glow5.png" alt=""/>
</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>
<div class="flex-justify-center" style="margin-top: 40px;margin-bottom: 100px"> <div class="content-detail">
<el-button class="view-more-btn" @click="$router.push('/information/informationList')">更多资讯 <img src="@/assets/images/indexImg/content3.png" alt=""/>
<el-icon> <div class="name">如何购买</div>
<ArrowRight/> <div class="more">了解更多 ></div>
</el-icon>
</el-button>
</div> </div>
</div> </div>
<div class="footer">先进计算科技有限公司 沪ICP备18000749号-2</div> <div class="footer">先进计算科技有限公司 沪ICP备18000749号-2</div>
<el-dialog
v-model="dialogTableVisible"
style="width: 80% !important;"
:title="dialogTitle"
@close="handleDialogClose"
>
<div>
<iframe v-show="iframeShow" ref="iframe" :src="iframeSrc" width="100%" height="700px"></iframe>
</div>
</el-dialog>
</div> </div>
</template> </template>
<script setup name="Index"> <script setup name="Index">
import {banner, assemblyList, informationList} from '@/api/home.js' import {banner, assemblyList, informationResourceList, informationList} from '@/api/home.js'
import {ref} from 'vue' import {ref} from 'vue'
const baseUrl = import.meta.env.VITE_APP_BASE_API const baseUrl = import.meta.env.VITE_APP_BASE_API
// const baseImgUrl = window.location.origin
const assemblyData = ref([]) const assemblyData = ref([])
const bannerImgList = ref([]) const bannerImgList = 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 dialogTitle = ref('')
const iframeSrc = ref('')
const iframeShow = ref(false)
function getBanner() { function getBanner() {
banner().then(res => { banner().then(res => {
bannerImgList.value = res.data bannerImgList.value = res.data.sort(function (a, b) {
return a.orderNum - b.orderNum
})
}) })
} }
getBanner() getBanner()
function getAassemblyList() { function getAassemblyList() {
assemblyList({type: 0 }).then(res => { assemblyList({type: 0}).then(res => {
assemblyData.value = res.data.length > 3 ? res.data.slice(0, 3) : res.data const data = res.data.sort(function (a, b) {
return a.orderNum - b.orderNum
})
assemblyData.value = data.length > 3 ? data.slice(0, 3) : data
list.value[1].assemblyData = data.length > 3 ? data.slice(0, 3) : data
})
}
// 计算自选
function getResource() {
informationResourceList().then(res => {
list.value[0].assemblyData = res.data.length > 3 ? res.data.slice(0, 3) : res.data
console.log(list.value[0].assemblyData, 'list.value[0].assemblyData')
}) })
} }
getAassemblyList() getAassemblyList()
getResource()
const informationData = ref([]) const informationData = ref([])
const informationMainData = ref({}) const informationMainData = ref({})
...@@ -206,13 +240,176 @@ function getInformation() { ...@@ -206,13 +240,176 @@ function getInformation() {
getInformation() getInformation()
function openAssembly(data) { function openAssembly(data) {
window.open(data.url) dialogTitle.value = data.title
iframeSrc.value = data.url
dialogTableVisible.value = true
iframeShow.value = true
}
function cancel() {
dialogTableVisible.value = false
iframeShow.value = false
}
// 关闭弹窗
function handleDialogClose() {
iframeSrc.value = null
}
function handleCarousel(url) {
if (url) {
window.open(url)
}
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.new-model {
background-image: url("@/assets/images/indexImg/bg-1.png");
background-size: cover; /* 背景图片覆盖整个元素区域 */
background-position: center; /* 背景图片居中 */
background-repeat: no-repeat; /* 背景图片不重复 */
background-color: #b6b8bf;
padding-bottom: 90px;
margin-bottom: 0;
}
.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;
}
//.resource-col:first-of-type .resource-box {
// background: url("@/assets/images/indexImg/resource1.png") no-repeat center center / 100%;
//}
//
//.resource-col:nth-of-type(2) .resource-box {
// background: url("@/assets/images/indexImg/resource2.png") no-repeat center center / 100%;
//}
//
//.resource-col:nth-of-type(3) .resource-box {
// background: url("@/assets/images/indexImg/resource3.png") no-repeat center center / 100%;
//}
.app-container { .app-container {
padding: 0; padding: 0;
flex-grow: 1;
flex-shrink: 1;
position: relative;
} }
.home { .home {
...@@ -221,7 +418,8 @@ function openAssembly(data) { ...@@ -221,7 +418,8 @@ function openAssembly(data) {
.banner { .banner {
position: relative; position: relative;
margin-bottom: 64px; cursor: pointer;
//margin-bottom: 64px;
img { img {
display: block; display: block;
...@@ -233,8 +431,13 @@ function openAssembly(data) { ...@@ -233,8 +431,13 @@ function openAssembly(data) {
.block { .block {
//width: 1280px; //width: 1280px;
width: calc(100% - 214px); background-image: url("@/assets/images/indexImg/bg-1.png");
background-size: cover; /* 背景图片覆盖整个元素区域 */
background-position: center; /* 背景图片居中 */
background-repeat: no-repeat; /* 背景图片不重复 */
margin: 0 auto; margin: 0 auto;
z-index: 4 !important;
padding-bottom: 60px;
} }
.block-title { .block-title {
...@@ -244,6 +447,7 @@ function openAssembly(data) { ...@@ -244,6 +447,7 @@ function openAssembly(data) {
line-height: 60px; line-height: 60px;
text-align: center; text-align: center;
position: relative; position: relative;
z-index: 3 !important;
.bg-text { .bg-text {
position: absolute; position: absolute;
...@@ -270,6 +474,7 @@ function openAssembly(data) { ...@@ -270,6 +474,7 @@ function openAssembly(data) {
border-radius: 2px; border-radius: 2px;
height: 40px; height: 40px;
color: #303233; color: #303233;
z-index: 2 !important;
} }
.resource-item { .resource-item {
...@@ -380,7 +585,7 @@ function openAssembly(data) { ...@@ -380,7 +585,7 @@ function openAssembly(data) {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background: url("@/assets/images/partners.png") no-repeat center center / cover; background: url("@/assets/images/indexImg/bg-1.png") no-repeat;
.title { .title {
font-weight: bold; font-weight: bold;
...@@ -398,6 +603,31 @@ function openAssembly(data) { ...@@ -398,6 +603,31 @@ function openAssembly(data) {
} }
} }
//.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 { //.information-right {
// //flex: 1; // //flex: 1;
// padding-right: 210px; // padding-right: 210px;
...@@ -411,6 +641,10 @@ function openAssembly(data) { ...@@ -411,6 +641,10 @@ function openAssembly(data) {
.information-item { .information-item {
width: 570px; width: 570px;
.content {
font-size: 16px !important;
}
&:hover { &:hover {
cursor: pointer; cursor: pointer;
...@@ -495,5 +729,166 @@ function openAssembly(data) { ...@@ -495,5 +729,166 @@ function openAssembly(data) {
font-size: 14px; font-size: 14px;
background-color: #303233; 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;
}
}
}
</style> </style>
src/views/index-copy.vue → src/views/index_old.vue
...@@ -2,221 +2,187 @@ ...@@ -2,221 +2,187 @@
<div class="app-container home"> <div class="app-container home">
<div class="banner"> <div class="banner">
<el-carousel height="600px" :indicator-position="bannerImgList.length <= 1 ? 'none':'' "> <el-carousel height="600px" :indicator-position="bannerImgList.length <= 1 ? 'none':'' ">
<el-carousel-item v-for="item in bannerImgList" :key="item" @click="handleCarousel(item.url)"> <el-carousel-item v-for="item in bannerImgList" :key="item">
<img :src="baseUrl + item.image" alt=""> <img :src="baseUrl + item.image" alt="">
</el-carousel-item> </el-carousel-item>
</el-carousel> </el-carousel>
</div> </div>
<div class="new-model">
<div style="padding-top: 32px;"> <div class="block" style="margin-bottom: 76px">
<div class="model-box" v-for="(i,index) in list" :key="i"> <div class="block-title">
<div class="new-block"> <div class="bg-text">RESOURCE</div>
<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>
<img v-if="index=== 2" class="resourceLogo" src="@/assets/images/indexImg/resource0-3.png" alt=""> <div class="block-sub-title">强劲、稳定、安全的云计算能力，助力企业上云</div>
<div class="new-block-details"> <el-row :gutter="24">
<div class="details-introduce"> <el-col :span="12">
<span>{{ i.title }}</span> <div class="resource-item resource-item-1" @click="$router.push('/computingResource/resourceList?type=0')">
<span>{{ i.titleEH }}</span> <div class="title">天河一号</div>
</div> <div class="desc">
<div class="present">{{ i.present }}</div> 天河一号拥有2048个计算节点，128个云服务阵列，64个可视化节点，4个胖节点。基于超级计算平台可提供科学研究、工程仿真等计算服务，开展并行算法研究与大规模并行应用软件开发。
</div>
<div class="link">查看详情
<el-icon>
<ArrowRight/>
</el-icon>
</div> </div>
</div> </div>
<div v-if="index === 2" class="view-more-text" </el-col>
@click="$router.push('/partnership/partnershipList')"> <el-col :span="12">
查看更多 <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。整体性能处于世界先进水平。
</div>
<div class="link">查看详情
<el-icon>
<ArrowRight/>
</el-icon>
</div>
</div> </div>
<div class="particulars" v-if="index !== 2"> </el-col>
<el-row :gutter="24"> <el-col :span="24">
<el-col class="resource-col" :span="8" v-for="x in i.assemblyData" :key="i" <div class="resource-item resource-item-3" @click="$router.push('/computingResource/resourceList?type=0')">
@click="i.id === 1? $router.push('/computingResource/resourceList?type=' + x.category):openAssembly(x)" <div class="title">云计算</div>
> <div class="desc">
<!-- style="background: url("@/assets/images/indexImg/resource1.png") no-repeat center center / 100%;"--> 云计算服务为您提供安全稳定及灵活扩展的云计算服务，可实现按需扩展CPU、内存、存储和网络资源，帮助企业大幅削减IT开支，优化运维流程，专注于核心业务的创新与发展。
<div class="resource-box" :style="{background: `url(${index === 0 ?baseUrl+x.image:baseUrl+x.homeImage}) no-repeat center center / 100%`}"> </div>
<div class="title">{{ x.title }}</div> <div class="link">查看详情
<div class="introduce">{{ index === 0 ? x.information : x.description }}</div> <el-icon>
</div> <ArrowRight/>
</el-col> </el-icon>
</el-row>
<div v-if="index === 1" class="view-more-text" style="margin-top: 40px;"
@click="$router.push('/componentServices/componentServicesList')">
查看更多
</div> </div>
</div> </div>
<img class="light" src="@/assets/images/indexImg/glow.png" alt=""/> </el-col>
</div> </el-row>
</div>
<div class="block">
<div class="block-title">
<div class="bg-text">APPLICATION</div>
行业应用
</div>
<div class="block-sub-title">
集成机器学习、深度学习、自然语言处理、图像识别等先进技术，为金融、医疗、教育、零售、制造业等多个领域提供智能化解决方案。
</div>
<el-row :gutter="24">
<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/>
</el-icon>
</div>
</div>
</el-col>
</el-row>
<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>
</div> </div>
<div class="block" style="padding-top: 70px;position: relative;"> <div class="partners">
<div style="width: calc(100% - 214px);margin: 0 auto;padding-bottom: 10px;"> <div class="title">
<div class="block-title" style="margin-bottom: 50px;z-index: 3 !important;"> 生态合作伙伴
<div class="bg-text">INFORMATION</div> </div>
活动资讯 <div class="desc">助力各类“AI+”创新应用，推进企业算力生态建设，促进科创产业集聚发展</div>
</div> <el-button class="view-more-btn" @click="$router.push('/partnership/partnershipList')">查看更多
<div class="flex flex-justify-center"> <el-icon>
<el-row :gutter="24" style="z-index: 2;"> <ArrowRight/>
<el-col :span="12"> </el-icon>
<!--<div class="block-sub-title">活动时间待定，活动内容待定，活动礼品自带</div>--> </el-button>
<div class="information" style="margin-right: 182px"> </div>
<div class="information-item"
@click="$router.push('/information/informationDetail?id='+informationMainData.id)"> <div class="block">
<div class="flex"> <div class="block-title" style="margin-bottom: 50px">
<div class="date"> <div class="bg-text">INFORMATION</div>
<div class="month-day">{{ informationMainData.month }}/{{ informationMainData.month }}</div> 活动资讯
<div class="year">{{ informationMainData.year }}</div> </div>
</div> <div class="flex flex-justify-center">
<div class="right"> <el-row :gutter="24">
<div class="title">{{ informationMainData.title }}</div> <el-col :span="12">
<div class="content" v-html="informationMainData.remark"></div> <!--<div class="block-sub-title">活动时间待定，活动内容待定，活动礼品自带</div>-->
</div> <div class="information" style="margin-right: 182px">
</div> <div class="information-item"
<img :src="baseUrl + informationMainData.image" alt=""> @click="$router.push('/information/informationDetail?id='+informationMainData.id)">
</div> <div class="flex">
</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="date">
<div class="month-day">{{ item.month }}/{{ item.month }}</div> <div class="month-day">{{ informationMainData.month }}/{{ informationMainData.month }}</div>
<div class="year">{{ item.year }}</div> <div class="year">{{ informationMainData.year }}</div>
</div> </div>
<div class="right"> <div class="right">
<div class="title">{{ item.title }}</div> <div class="title">{{ informationMainData.title }}</div>
<div class="content" v-html="item.remark"> <div class="content" v-html="informationMainData.description">
</div> </div>
</div> </div>
</div> </div>
<img :src="baseUrl + informationMainData.image" alt="">
</div> </div>
</el-col> </div>
</el-row> </el-col>
</div> <el-col :span="12">
<div>
<div class="view-more-text" style="padding-top: 40px;" @click="$router.push('/information/informationList')"> <div v-for="item in informationData" :key="item.id" class="information-item flex"
更多资讯 @click="$router.push('/information/informationDetail?id='+item.id)">
</div> <div class="date">
</div> <div class="month-day">{{ item.month }}/{{ item.month }}</div>
<img class="block-light" src="@/assets/images/indexImg/glow5.png" alt=""/> <div class="year">{{ item.year }}</div>
</div> </div>
<div class="right">
<div class="content-footer"> <div class="title">{{ item.title }}</div>
<div class="content-detail"> <div class="content" v-html="item.description">
<img src="@/assets/images/indexImg/content1.png" alt=""/> </div>
<div class="name">服务支持</div> </div>
<div class="more">了解更多 ></div> </div>
</div> </div>
<div class="content-detail"> </el-col>
<img src="@/assets/images/indexImg/content2.png" alt=""/> </el-row>
<div class="name">联系我们</div>
<div class="more">了解更多 ></div>
</div> </div>
<div class="content-detail"> <div class="flex-justify-center" style="margin-top: 40px;margin-bottom: 100px">
<img src="@/assets/images/indexImg/content3.png" alt=""/> <el-button class="view-more-btn" @click="$router.push('/information/informationList')">更多资讯
<div class="name">如何购买</div> <el-icon>
<div class="more">了解更多 ></div> <ArrowRight/>
</el-icon>
</el-button>
</div> </div>
</div> </div>
<div class="footer">先进计算科技有限公司 沪ICP备18000749号-2</div> <div class="footer">先进计算科技有限公司 沪ICP备18000749号-2</div>
<el-dialog
v-model="dialogTableVisible"
style="width: 80% !important;"
:title="dialogTitle"
@close="handleDialogClose"
>
<div>
<iframe v-show="iframeShow" ref="iframe" :src="iframeSrc" width="100%" height="700px"></iframe>
</div>
</el-dialog>
</div> </div>
</template> </template>
<script setup name="Index"> <script setup name="Index">
import {banner, assemblyList, informationResourceList, informationList} from '@/api/home.js' import {banner, assemblyList, informationList} from '@/api/home.js'
import {ref} from 'vue' import {ref} from 'vue'
const baseUrl = import.meta.env.VITE_APP_BASE_API const baseUrl = import.meta.env.VITE_APP_BASE_API
// const baseImgUrl = window.location.origin
const assemblyData = ref([]) const assemblyData = ref([])
const bannerImgList = ref([]) const bannerImgList = 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 dialogTitle = ref('')
const iframeSrc = ref('')
const iframeShow = ref(false)
function getBanner() { function getBanner() {
banner().then(res => { banner().then(res => {
bannerImgList.value = res.data.sort(function (a, b) { bannerImgList.value = res.data
return a.orderNum - b.orderNum
})
}) })
} }
getBanner() getBanner()
function getAassemblyList() { function getAassemblyList() {
assemblyList({type: 0}).then(res => { assemblyList({type: 0 }).then(res => {
const data = res.data.sort(function (a, b) { assemblyData.value = res.data.length > 3 ? res.data.slice(0, 3) : res.data
return a.orderNum - b.orderNum
})
assemblyData.value = data.length > 3 ? data.slice(0, 3) : data
list.value[1].assemblyData = data.length > 3 ? data.slice(0, 3) : data
})
}
// 计算自选
function getResource() {
informationResourceList().then(res => {
list.value[0].assemblyData = res.data.length > 3 ? res.data.slice(0, 3) : res.data
console.log(list.value[0].assemblyData, 'list.value[0].assemblyData')
}) })
} }
getAassemblyList() getAassemblyList()
getResource()
const informationData = ref([]) const informationData = ref([])
const informationMainData = ref({}) const informationMainData = ref({})
...@@ -240,176 +206,13 @@ function getInformation() { ...@@ -240,176 +206,13 @@ function getInformation() {
getInformation() getInformation()
function openAssembly(data) { function openAssembly(data) {
dialogTitle.value = data.title window.open(data.url)
iframeSrc.value = data.url
dialogTableVisible.value = true
iframeShow.value = true
}
function cancel() {
dialogTableVisible.value = false
iframeShow.value = false
}
// 关闭弹窗
function handleDialogClose() {
iframeSrc.value = null
}
function handleCarousel(url) {
if (url) {
window.open(url)
}
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.new-model {
background-image: url("@/assets/images/indexImg/bg-1.png");
background-size: cover; /* 背景图片覆盖整个元素区域 */
background-position: center; /* 背景图片居中 */
background-repeat: no-repeat; /* 背景图片不重复 */
background-color: #b6b8bf;
padding-bottom: 90px;
margin-bottom: 0;
}
.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;
}
//.resource-col:first-of-type .resource-box {
// background: url("@/assets/images/indexImg/resource1.png") no-repeat center center / 100%;
//}
//
//.resource-col:nth-of-type(2) .resource-box {
// background: url("@/assets/images/indexImg/resource2.png") no-repeat center center / 100%;
//}
//
//.resource-col:nth-of-type(3) .resource-box {
// background: url("@/assets/images/indexImg/resource3.png") no-repeat center center / 100%;
//}
.app-container { .app-container {
padding: 0; padding: 0;
flex-grow: 1;
flex-shrink: 1;
position: relative;
} }
.home { .home {
...@@ -418,8 +221,7 @@ function handleCarousel(url) { ...@@ -418,8 +221,7 @@ function handleCarousel(url) {
.banner { .banner {
position: relative; position: relative;
cursor: pointer; margin-bottom: 64px;
//margin-bottom: 64px;
img { img {
display: block; display: block;
...@@ -431,13 +233,8 @@ function handleCarousel(url) { ...@@ -431,13 +233,8 @@ function handleCarousel(url) {
.block { .block {
//width: 1280px; //width: 1280px;
background-image: url("@/assets/images/indexImg/bg-1.png"); width: calc(100% - 214px);
background-size: cover; /* 背景图片覆盖整个元素区域 */
background-position: center; /* 背景图片居中 */
background-repeat: no-repeat; /* 背景图片不重复 */
margin: 0 auto; margin: 0 auto;
z-index: 4 !important;
padding-bottom: 60px;
} }
.block-title { .block-title {
...@@ -447,7 +244,6 @@ function handleCarousel(url) { ...@@ -447,7 +244,6 @@ function handleCarousel(url) {
line-height: 60px; line-height: 60px;
text-align: center; text-align: center;
position: relative; position: relative;
z-index: 3 !important;
.bg-text { .bg-text {
position: absolute; position: absolute;
...@@ -474,7 +270,6 @@ function handleCarousel(url) { ...@@ -474,7 +270,6 @@ function handleCarousel(url) {
border-radius: 2px; border-radius: 2px;
height: 40px; height: 40px;
color: #303233; color: #303233;
z-index: 2 !important;
} }
.resource-item { .resource-item {
...@@ -585,7 +380,7 @@ function handleCarousel(url) { ...@@ -585,7 +380,7 @@ function handleCarousel(url) {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background: url("@/assets/images/indexImg/bg-1.png") no-repeat; background: url("@/assets/images/partners.png") no-repeat center center / cover;
.title { .title {
font-weight: bold; font-weight: bold;
...@@ -603,31 +398,6 @@ function handleCarousel(url) { ...@@ -603,31 +398,6 @@ function handleCarousel(url) {
} }
} }
//.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 { //.information-right {
// //flex: 1; // //flex: 1;
// padding-right: 210px; // padding-right: 210px;
...@@ -641,10 +411,6 @@ function handleCarousel(url) { ...@@ -641,10 +411,6 @@ function handleCarousel(url) {
.information-item { .information-item {
width: 570px; width: 570px;
.content {
font-size: 16px !important;
}
&:hover { &:hover {
cursor: pointer; cursor: pointer;
...@@ -729,166 +495,5 @@ function handleCarousel(url) { ...@@ -729,166 +495,5 @@ function handleCarousel(url) {
font-size: 14px; font-size: 14px;
background-color: #303233; 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;
}
}
}
</style> </style>
src/views/login.vue
...@@ -2,9 +2,9 @@ ...@@ -2,9 +2,9 @@
<div class="login"> <div class="login">
<el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form"> <el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form">
<h3 class="title">先进计算普惠算力公共服务平台</h3> <h3 class="title">先进计算普惠算力公共服务平台</h3>
<el-form-item prop="username"> <el-form-item prop="mobile">
<el-input <el-input
v-model="loginForm.username" v-model="loginForm.mobile"
type="text" type="text"
size="large" size="large"
auto-complete="off" auto-complete="off"
...@@ -27,22 +27,6 @@ ...@@ -27,22 +27,6 @@
</template> </template>
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item prop="code" v-if="captchaEnabled">
<el-input
v-model="loginForm.code"
size="large"
auto-complete="off"
placeholder="验证码"
style="width: 64%"
@keyup.enter="handleLogin">
<template #prefix>
<svg-icon icon-class="validCode" class="el-input__icon input-icon"/>
</template>
</el-input>
<div class="login-code">
<img :src="codeUrl" @click="getCode" class="login-code-img"/>
</div>
</el-form-item>
<div class="flex-align-center flex-space-between mb20"> <div class="flex-align-center flex-space-between mb20">
<el-checkbox v-model="loginForm.rememberMe">记住密码</el-checkbox> <el-checkbox v-model="loginForm.rememberMe">记住密码</el-checkbox>
...@@ -72,7 +56,6 @@ ...@@ -72,7 +56,6 @@
</template> </template>
<script setup> <script setup>
import { getCodeImg } from '@/api/login'
import Cookies from 'js-cookie' import Cookies from 'js-cookie'
import { encrypt, decrypt } from '@/utils/jsencrypt' import { encrypt, decrypt } from '@/utils/jsencrypt'
import useUserStore from '@/store/modules/user' import useUserStore from '@/store/modules/user'
...@@ -84,7 +67,7 @@ const router = useRouter() ...@@ -84,7 +67,7 @@ const router = useRouter()
const {proxy} = getCurrentInstance() const {proxy} = getCurrentInstance()
const loginForm = ref({ const loginForm = ref({
username: '', mobile: '',
password: '', password: '',
rememberMe: false, rememberMe: false,
code: '', code: '',
...@@ -92,7 +75,7 @@ const loginForm = ref({ ...@@ -92,7 +75,7 @@ const loginForm = ref({
}) })
const loginRules = { const loginRules = {
username: [{required: true, trigger: 'blur', message: '请输入您的账号'}], mobile: [{required: true, trigger: 'blur', message: '请输入您的手机号'}],
password: [{required: true, trigger: 'blur', message: '请输入您的密码'}], password: [{required: true, trigger: 'blur', message: '请输入您的密码'}],
code: [{required: true, trigger: 'change', message: '请输入验证码'}] code: [{required: true, trigger: 'change', message: '请输入验证码'}]
} }
...@@ -115,12 +98,12 @@ function handleLogin () { ...@@ -115,12 +98,12 @@ function handleLogin () {
loading.value = true loading.value = true
// 勾选了需要记住密码设置在 cookie 中设置记住用户名和密码 // 勾选了需要记住密码设置在 cookie 中设置记住用户名和密码
if (loginForm.value.rememberMe) { if (loginForm.value.rememberMe) {
Cookies.set('username', loginForm.value.username, {expires: 30}) Cookies.set('mobile', loginForm.value.mobile, {expires: 30})
Cookies.set('password', encrypt(loginForm.value.password), {expires: 30}) Cookies.set('password', encrypt(loginForm.value.password), {expires: 30})
Cookies.set('rememberMe', loginForm.value.rememberMe, {expires: 30}) Cookies.set('rememberMe', loginForm.value.rememberMe, {expires: 30})
} else { } else {
// 否则移除 // 否则移除
Cookies.remove('username') Cookies.remove('mobile')
Cookies.remove('password') Cookies.remove('password')
Cookies.remove('rememberMe') Cookies.remove('rememberMe')
} }
...@@ -136,37 +119,23 @@ function handleLogin () { ...@@ -136,37 +119,23 @@ function handleLogin () {
router.push({path: redirect.value || '/', query: otherQueryParams}) router.push({path: redirect.value || '/', query: otherQueryParams})
}).catch(() => { }).catch(() => {
loading.value = false loading.value = false
// 重新获取验证码
if (captchaEnabled.value) {
getCode()
}
}) })
} }
}) })
} }
function getCode () {
getCodeImg().then(res => {
captchaEnabled.value = res.captchaEnabled === undefined ? true : res.captchaEnabled
if (captchaEnabled.value) {
codeUrl.value = 'data:image/gif;base64,' + res.img
loginForm.value.uuid = res.uuid
}
})
}
function getCookie () { function getCookie () {
const username = Cookies.get('username') const mobile = Cookies.get('mobile')
const password = Cookies.get('password') const password = Cookies.get('password')
const rememberMe = Cookies.get('rememberMe') const rememberMe = Cookies.get('rememberMe')
loginForm.value = { loginForm.value = {
username: username === undefined ? loginForm.value.username : username, mobile: mobile === undefined ? loginForm.value.mobile : mobile,
password: password === undefined ? loginForm.value.password : decrypt(password), password: password === undefined ? loginForm.value.password : decrypt(password),
rememberMe: rememberMe === undefined ? false : Boolean(rememberMe) rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
} }
} }
getCode()
getCookie() getCookie()
</script> </script>
......
src/views/register.vue
...@@ -40,22 +40,6 @@ ...@@ -40,22 +40,6 @@
</template> </template>
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item prop="code" v-if="captchaEnabled">
<el-input
size="large"
v-model="registerForm.code"
auto-complete="off"
placeholder="验证码"
style="width: 64%"
@keyup.enter="handleRegister">
<template #prefix>
<svg-icon icon-class="validCode" class="el-input__icon input-icon"/>
</template>
</el-input>
<div class="register-code">
<img :src="codeUrl" @click="getCode" class="register-code-img"/>
</div>
</el-form-item>
<div class="flex-justify-end mb20"> <div class="flex-justify-end mb20">
<router-link class="link-type" :to="'/login'">使用已有账户登录</router-link> <router-link class="link-type" :to="'/login'">使用已有账户登录</router-link>
</div> </div>
...@@ -82,7 +66,6 @@ ...@@ -82,7 +66,6 @@
<script setup> <script setup>
import { ElMessageBox } from 'element-plus' import { ElMessageBox } from 'element-plus'
import { getCodeImg, register } from '@/api/login'
const router = useRouter() const router = useRouter()
const {proxy} = getCurrentInstance() const {proxy} = getCurrentInstance()
...@@ -122,7 +105,6 @@ const registerRules = { ...@@ -122,7 +105,6 @@ const registerRules = {
const codeUrl = ref('') const codeUrl = ref('')
const loading = ref(false) const loading = ref(false)
const captchaEnabled = ref(true)
function handleRegister () { function handleRegister () {
proxy.$refs.registerRef.validate(valid => { proxy.$refs.registerRef.validate(valid => {
...@@ -139,25 +121,11 @@ function handleRegister () { ...@@ -139,25 +121,11 @@ function handleRegister () {
}) })
}).catch(() => { }).catch(() => {
loading.value = false loading.value = false
if (captchaEnabled) {
getCode()
}
}) })
} }
}) })
} }
function getCode () {
getCodeImg().then(res => {
captchaEnabled.value = res.captchaEnabled === undefined ? true : res.captchaEnabled
if (captchaEnabled.value) {
codeUrl.value = 'data:image/gif;base64,' + res.img
registerForm.value.uuid = res.uuid
}
})
}
getCode()
</script> </script>
<style lang='scss' scoped> <style lang='scss' scoped>
......
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