1202 lines
33 KiB
Vue
1202 lines
33 KiB
Vue
<template>
|
||
<div style="height: 100vh;overflow-y: auto">
|
||
<!-- 头部-->
|
||
<header class="header-top">
|
||
<div class="left-style">
|
||
<div class="logo">
|
||
<img :src="logoImg" alt="" v-if="logoImg">
|
||
<img src="../../assets/kyy/temporaryPic/img_3.png" alt="" class="img" v-else>
|
||
</div>
|
||
|
||
<ul class="titleWord">
|
||
<li>{{ translations[language].home }}</li>
|
||
<li @click="goOtherPage('product')">{{ translations[language].products }}</li>
|
||
<li @click="goOtherPage('solve')">{{ translations[language].solutions }}</li>
|
||
<li @click="goOtherPage('service')">{{ translations[language].serviceCenter }}</li>
|
||
<li @click="goOtherPage('news')">{{ translations[language].news }}</li>
|
||
<li @click="goOtherPage('aboutUs')">{{ translations[language].aboutUs }}</li>
|
||
</ul>
|
||
</div>
|
||
<div class="right-style">
|
||
<el-button @click="login" class="loginBtn-style" style="color: white">{{ translations[language].login }}</el-button>
|
||
<el-button @click="register" class="register-style">{{ translations[language].register }}</el-button>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- 轮播图-->
|
||
<div class="banner" style="height: 50vh!important;">
|
||
<el-carousel :interval="5000" arrow="always" style="height:50vh;">
|
||
<el-carousel-item style="height: 50vh;" class="banner-item">
|
||
<img src="../../assets/kyy/banner01.png">
|
||
</el-carousel-item>
|
||
<el-carousel-item style="height: 50vh;" class="banner-item">
|
||
<img src="../../assets/kyy/temporaryPic/bann2.png">
|
||
</el-carousel-item>
|
||
<el-carousel-item style="height: 50vh;" class="banner-item">
|
||
<img src="../../assets/kyy/temporaryPic/banner5.jpg">
|
||
</el-carousel-item>
|
||
</el-carousel>
|
||
</div>
|
||
<div class="clearFloat"></div>
|
||
<div>
|
||
<ul style="display: flex;justify-content: space-between;margin-top: 1.25rem">
|
||
<li class="content-footer-item" style="display: flex;flex-direction:row;justify-content: center;align-items: center">
|
||
<img class="icon-footer" src="../../assets/kyy/Icon-kexuejishu-.svg" alt="">
|
||
<div style="display: flex;flex-direction: column;justify-content: center;align-items: center">
|
||
<span class="footer-title" style="cursor: pointer" @click="goProduct('http://tmpweb.opencomputing.cn/col.jsp?id=146')">{{ translations[language].publicCloud }}</span>
|
||
</div>
|
||
</li>
|
||
<li class="content-footer-item" style="display: flex;flex-direction:row;justify-content: center;align-items: center">
|
||
<img class="icon-footer" src="../../assets/kyy/Icon-_khgx.svg" alt="">
|
||
<div style="display: flex;flex-direction: column;justify-content: center;align-items: center">
|
||
<span class="footer-title" style="cursor: pointer" @click="goProduct('http://tmpweb.opencomputing.cn/col.jsp?id=138')">{{ translations[language].superComputing }}</span>
|
||
</div>
|
||
</li>
|
||
<li class="content-footer-item" style="display: flex;flex-direction:row;justify-content: center;align-items: center">
|
||
<img class="icon-footer" src="../../assets/kyy/Icon-a-01changjing.svg" alt="">
|
||
<div style="display: flex;flex-direction: column;justify-content: center;align-items: center">
|
||
<span class="footer-title" style="cursor: pointer" @click="goProduct('http://tmpweb.opencomputing.cn/col.jsp?id=139')">{{ translations[language].intelligentComputing }}</span>
|
||
</div>
|
||
</li>
|
||
<li class="content-footer-item" style="display: flex;flex-direction:row;justify-content: center;align-items: center">
|
||
<img class="icon-footer" src="../../assets/kyy/Icon-yunyingzhongxin.svg" alt="">
|
||
<div style="display: flex;flex-direction: column;justify-content: center;align-items: center">
|
||
<span class="footer-title" style="cursor: pointer" @click="goProduct('http://tmpweb.opencomputing.cn/col.jsp?id=140')">{{ translations[language].network }}</span>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<!-- 核心业务-->
|
||
<div class="business">
|
||
<span class="business-title" style="margin-bottom: 15px;margin-top: 85px">{{ translations[language].coreBusiness }}</span>
|
||
<span class="business-content" style="margin-bottom: 15px">{{ translations[language].coreBusinessDesc }}</span>
|
||
<!-- 四个li-->
|
||
<ul style="display: flex;justify-content: center">
|
||
<li class="content-footer-item">
|
||
<img style="width: 200px;height: 200px;" src="../../assets/kyy/temporaryPic/w1.png" alt="">
|
||
<span class="footer-title">{{ translations[language].business1Title }}</span>
|
||
<span class="footer-content">{{ translations[language].business1Desc }}</span>
|
||
</li>
|
||
<li class="content-footer-item">
|
||
<img style="width: 200px;height: 200px;" src="../../assets/kyy/temporaryPic/w2.png" alt="">
|
||
<span class="footer-title">{{ translations[language].business2Title }}</span>
|
||
<span class="footer-content">{{ translations[language].business2Desc }}</span>
|
||
</li>
|
||
<li class="content-footer-item">
|
||
<img style="width: 200px;height: 200px;" src="../../assets/kyy/temporaryPic/w3.png" alt="">
|
||
<span class="footer-title">{{ translations[language].business3Title }}</span>
|
||
<span class="footer-content">{{ translations[language].business3Desc }}</span>
|
||
</li>
|
||
<li class="content-footer-item">
|
||
<img style="width: 200px;height: 200px;" src="../../assets/kyy/temporaryPic/w4.png" alt="">
|
||
<span class="footer-title">{{ translations[language].business4Title }}</span>
|
||
<span class="footer-content">{{ translations[language].business4Desc }}</span>
|
||
</li>
|
||
</ul>
|
||
<span class="business-title" style="margin-top: 50px;margin-bottom: 15px">{{ translations[language].solutionTitle }}</span>
|
||
<span class="business-content" style="margin-bottom: 25px">{{ translations[language].solutionDesc }}</span>
|
||
<!-- 图片-->
|
||
<div>
|
||
<img class="business-pic" style="width: 100%;height: 300px;" src="../../assets/kyy/深入方案bg.png">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 企业资讯-->
|
||
<div class="business" style="margin-top: 100px">
|
||
<span class="business-title" style="margin-top: 50px;margin-bottom: 15px">{{ translations[language].enterpriseNews }}</span>
|
||
<div>
|
||
<img @click="goNewsPage" style="height: 800px;cursor: pointer" class="business-pic" src="../../assets/kyy/temporaryPic/ff.png">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 核心业务-->
|
||
<div class="business" style="height: 550px;">
|
||
<span class="business-title" style="margin-bottom: 15px;margin-top: 35px">{{ translations[language].forumTitle }}</span>
|
||
<span class="business-content" style="width: 1200px;margin-bottom: 25px">{{ translations[language].forumDesc }}</span>
|
||
<!-- 图片-->
|
||
<div style="display: flex;justify-content: center;align-items: space-between;padding-top: 15px" class="ckl">
|
||
<div style="width: 350px;height: 300px;">
|
||
<img src="../../assets/kyy/temporaryPic/640.jpg" alt="" />
|
||
</div>
|
||
<div style="width: 350px;height: 300px;">
|
||
<img src="../../assets/kyy/temporaryPic/640(1).jpg" alt="" />
|
||
</div>
|
||
<div style="width: 350px;height: 300px;">
|
||
<img src="../../assets/kyy/temporaryPic/643.png" alt="" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 合作伙伴-->
|
||
<div class="friends">
|
||
<span class="business-title" style="margin-top: 50px;margin-bottom: 15px">{{ translations[language].partners }}</span>
|
||
<div class="logo-item-s">
|
||
<img src="../../assets/kyy/temporaryPic/logo1.jpg" style="width: 100px;height: 65px;" alt="">
|
||
<img src="../../assets/kyy/temporaryPic/logo8.png" style="width: 100px;height: 65px;" alt="">
|
||
<img src="../../assets/kyy/temporaryPic/logo5.png" style="width: 100px;height: 65px;" alt="">
|
||
<img src="../../assets/kyy/temporaryPic/logo2.jpg" alt="">
|
||
<img src="../../assets/kyy/temporaryPic/lofo3.jpg" alt="">
|
||
<img src="../../assets/kyy/temporaryPic/logo4.jpg" alt="">
|
||
<img src="../../assets/kyy/temporaryPic/logo6.png" alt="">
|
||
<img src="../../assets/kyy/temporaryPic/logo7.jpg" alt="">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 欢迎使用-->
|
||
<div class="like">
|
||
<img src="../../assets/kyy/编组_10.png" alt="">
|
||
<div class="pic-word">
|
||
<span class="hiTitle">{{ translations[language].welcome }}</span>
|
||
<span class="goLogin-style" @click="login">{{ translations[language].experienceNow }}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="footer-top-style">
|
||
<div class="item-footer-top">
|
||
<div>
|
||
<img src="../../assets/kyy/temporaryPic/Icon-1.png" alt="">
|
||
</div>
|
||
<span class="resource">{{ translations[language].feature1 }}</span>
|
||
</div>
|
||
|
||
<div class="item-footer-top">
|
||
<div>
|
||
<img src="../../assets/kyy/temporaryPic/Icon-2.png" alt="">
|
||
</div>
|
||
<span class="resource">{{ translations[language].feature2 }}</span>
|
||
</div>
|
||
<div class="item-footer-top">
|
||
<div>
|
||
<img src="../../assets/kyy/temporaryPic/Icon-3.png" alt="">
|
||
</div>
|
||
<span class="resource">{{ translations[language].feature3 }}</span>
|
||
</div>
|
||
<div class="item-footer-top">
|
||
<div>
|
||
<img src="../../assets/kyy/temporaryPic/Icon-4.png" alt="">
|
||
</div>
|
||
<span class="resource">{{ translations[language].feature4 }}</span>
|
||
</div>
|
||
</div>
|
||
<!-- footer-->
|
||
<div class="footer">
|
||
<div class="left-box">
|
||
<div class="logo-footer">
|
||
<img :src="logoImg" alt="" v-if="logoImg">
|
||
<img src="../../assets/kyy/LOGO.png" alt="" class="img" v-else>
|
||
</div>
|
||
<div class="content-main">
|
||
<ul>
|
||
<li>{{ translations[language].address }}:{{address}}</li>
|
||
<li>{{ translations[language].phone }}：400-6150805 <span style="margin-left: 20px">010-65917875 </span></li>
|
||
<li>{{ translations[language].email }}：Open-computing@kaiyuancloud.cn</li>
|
||
<li>{{ translations[language].icp }}:{{ICP}} <span style="margin-left: 20px">{{ translations[language].copyright }}</span></li>
|
||
<li>
|
||
<img src="../../image/login/policeInsignia/policeInsignia.png" alt="" style="width:17px;height:17px;margin-right: 2px;">
|
||
<a href="https://beian.mps.gov.cn/#/query/webSearch?code=11010502054007" rel="noreferrer" target="_blank" style="margin-right:30px;">京公网安备11010502054007</a>
|
||
<span>
|
||
<router-link tag="a" target="_blank" :to="{ name: 'homePageImage' }">{{ translations[language].license }}</router-link>
|
||
</span>
|
||
</li>
|
||
<li>
|
||
<!-- <a href="" rel="noreferrer" target="_blank"></a> -->
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="right-box">
|
||
<div class="qr-box">
|
||
<div class="qr-code">
|
||
<img src="../../assets/kyy/客服wechat.png" style="padding: 6px" alt="">
|
||
</div>
|
||
<span class="qr-content">{{ translations[language].wechatService }}</span>
|
||
</div>
|
||
<div class="qr-box" style="margin-left: 50px">
|
||
<div class="qr-code">
|
||
<img src="../../assets/kyy/kyy公众号.jpg" alt="">
|
||
</div>
|
||
<span class="qr-content">{{ translations[language].scanQRCode }}</span>
|
||
</div>
|
||
</div>
|
||
<div class="intrudceMessage">
|
||
<span style="margin-left: 2em">{{ translations[language].companyDesc1 }}</span>
|
||
<span>{{ translations[language].companyDesc2 }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script type="text/javascript">
|
||
window._MICHAT = window._MICHAT || function () { (_MICHAT.a = _MICHAT.a || []).push(arguments) };
|
||
_MICHAT("cptid", "3d1ac49f26c5");
|
||
_MICHAT("domain", "emdchk.xianshangkefu.net");
|
||
(function (m, d, q, j, s) {
|
||
j = d.createElement(q), s = d.getElementsByTagName(q)[0];
|
||
j.async = true;
|
||
j.charset = "UTF-8";
|
||
j.src = ("https:" == document.location.protocol ? "https://" : "http://") + "emdchk.xianshangkefu.net/Web/JS/mivisit.js?_=t";
|
||
s.parentNode.insertBefore(j, s);
|
||
})(window, document, "script");
|
||
</script>
|
||
|
||
<script>
|
||
import { getLogoAPI } from "@/api/login";
|
||
import echarts from "echarts";
|
||
import china from 'echarts/map/json/china.json'
|
||
import "../../../node_modules/echarts/map/js/china.js"; // 引入中国地图数据
|
||
// 导入语言管理
|
||
import { languageStore, languageBus } from '@/utils/language'
|
||
|
||
export default {
|
||
name: "indexNew",
|
||
data() {
|
||
return {
|
||
myChart: null,
|
||
logoImg: require("../../assets/logo/colorLogo.png"),
|
||
logoText: "开元云(北京)科技有限公司",
|
||
url: window.location.href,
|
||
photos: [],
|
||
photosUrl: [],
|
||
ICP: "京ICP备2022001945号-1",
|
||
address: "农业展览馆13号瑞辰国际中心518B(团结湖地铁站c东南口步行420米)",
|
||
// 从共享状态获取语言
|
||
language: 'zh',
|
||
translations: {
|
||
zh: {
|
||
home: '首页',
|
||
products: '产品服务',
|
||
solutions: '解决方案',
|
||
serviceCenter: '服务中心',
|
||
news: '新闻资讯',
|
||
aboutUs: '关于我们',
|
||
login: '登录',
|
||
register: '注册',
|
||
publicCloud: '公有云',
|
||
superComputing: '超算',
|
||
intelligentComputing: '智算',
|
||
network: '网络',
|
||
coreBusiness: '核心业务',
|
||
coreBusinessDesc: '提供领先、可靠、多场景的应用解决方案安全、稳定、确定',
|
||
business1Title: '智算中心',
|
||
business1Desc: '智算中心咨询/规划/建设/运营/运维',
|
||
business2Title: '算力网络',
|
||
business2Desc: '云互联、超算互联、智算互联',
|
||
business3Title: '算力服务',
|
||
business3Desc: '融合云、HPC、AI算力、信创',
|
||
business4Title: '应用解决方案',
|
||
business4Desc: '企业多场景云服务、高校科学计算、大模型架构及应用',
|
||
solutionTitle: '深入业务场景的算网解决方案',
|
||
solutionDesc: '以高水平算网调度解决方案助力各行业高质量发展',
|
||
enterpriseNews: '企业资讯',
|
||
forumTitle: '全国高校算力网络创新论坛',
|
||
forumDesc: '由江苏未来网络集团主办、中国高等教育学会教育信息化分会指导、开元云（北京）科技有限公司协办的全国高校算力网络创新论坛成功举办，该论坛聚焦高校数字化转型背景下，针对高校科研领域的新要求，分享算力网络最新的前沿技术，共话算力网络技术与服务企业产业布局，研讨高校科研需求与算力技术的供应。',
|
||
partners: '合作伙伴',
|
||
welcome: '欢迎体验开元云',
|
||
experienceNow: '立即体验',
|
||
feature1: '资源全覆盖',
|
||
feature2: '体验极速',
|
||
feature3: '用户满意',
|
||
feature4: '省心计算',
|
||
address: '地址',
|
||
phone: '电话',
|
||
email: '邮箱',
|
||
icp: 'IPC备案号',
|
||
copyright: '版权所有 @kaiyuanyun 2023',
|
||
license: '经营许可证:京B2-20232313',
|
||
wechatService: '微信客服',
|
||
scanQRCode: '扫描关注二维码',
|
||
companyDesc1: '开元云科技（北京）公司是一家注册于2020年的高科技企业，在上海、南京、深圳、济南设有分支机构。公司通过自主研发的开元算力应用服务平台，将算力资源和算力应用进行整合，利用算力调度和确定性',
|
||
companyDesc2: '网络技术，为科研、XR、数字孪生和AI等行业提供专业算力服务，形成"算力服务+算力网络+算力应用"的一体化解决方案。'
|
||
},
|
||
en: {
|
||
home: 'Home',
|
||
products: 'Products & Services',
|
||
solutions: 'Solutions',
|
||
serviceCenter: 'Service Center',
|
||
news: 'News & Information',
|
||
aboutUs: 'About Us',
|
||
login: 'Login',
|
||
register: 'Register',
|
||
publicCloud: 'Public Cloud',
|
||
superComputing: 'Super Computing',
|
||
intelligentComputing: 'Intelligent Computing',
|
||
network: 'Network',
|
||
coreBusiness: 'Core Business',
|
||
coreBusinessDesc: 'Providing leading, reliable, multi-scenario application solutions that are safe, stable, and deterministic',
|
||
business1Title: 'Intelligent Computing Center',
|
||
business1Desc: 'Intelligent computing center consulting/planning/construction/operation/maintenance',
|
||
business2Title: 'Computing Power Network',
|
||
business2Desc: 'Cloud interconnection, supercomputing interconnection, intelligent computing interconnection',
|
||
business3Title: 'Computing Power Service',
|
||
business3Desc: 'Converged cloud, HPC, AI computing power, information innovation',
|
||
business4Title: 'Application Solutions',
|
||
business4Desc: 'Enterprise multi-scenario cloud services, university scientific computing, large model architecture and applications',
|
||
solutionTitle: 'In-depth Business Scenario Computing Network Solutions',
|
||
solutionDesc: 'Helping various industries achieve high-quality development with high-level computing network scheduling solutions',
|
||
enterpriseNews: 'Enterprise News',
|
||
forumTitle: 'National University Computing Power Network Innovation Forum',
|
||
forumDesc: 'The National University Computing Power Network Innovation Forum, hosted by Jiangsu Future Network Group, guided by the China Higher Education Association Education Informatization Branch, and co-organized by Kaiyuan Cloud (Beijing) Technology Co., Ltd., was successfully held. The forum focuses on new requirements in the university scientific research field under the background of university digital transformation, shares the latest cutting-edge technologies in computing power networks, discusses the industrial layout of computing power network technology and service enterprises, and researches the supply of university scientific research needs and computing power technology.',
|
||
partners: 'Partners',
|
||
welcome: 'Welcome to Experience Kaiyuan Cloud',
|
||
experienceNow: 'Experience Now',
|
||
feature1: 'Full Resource Coverage',
|
||
feature2: 'Ultra-Fast Experience',
|
||
feature3: 'User Satisfaction',
|
||
feature4: 'Worry-Free Computing',
|
||
address: 'Address',
|
||
phone: 'Phone',
|
||
email: 'Email',
|
||
icp: 'IPC Filing Number',
|
||
copyright: 'Copyright @kaiyuanyun 2023',
|
||
license: 'Business License: Jing B2-20232313',
|
||
wechatService: 'WeChat Customer Service',
|
||
scanQRCode: 'Scan to Follow QR Code',
|
||
companyDesc1: 'Kaiyuan Cloud Technology (Beijing) Company is a high-tech enterprise registered in 2020, with branches in Shanghai, Nanjing, Shenzhen, and Jinan. Through its self-developed Kaiyuan Computing Power Application Service Platform, the company integrates computing power resources and computing power applications, using computing power scheduling and deterministic',
|
||
companyDesc2: 'network technology to provide professional computing power services for scientific research, XR, digital twins, AI and other industries, forming an integrated solution of "computing power service + computing power network + computing power application".'
|
||
}
|
||
}
|
||
}
|
||
},
|
||
created() {
|
||
this.init()
|
||
// 从共享状态获取当前语言
|
||
this.language = languageStore.getLanguage()
|
||
console.log('indexNew页面初始化语言:', this.language)
|
||
|
||
// 监听语言变化事件
|
||
languageBus.$on('language-changed', (lang) => {
|
||
console.log('indexNew页面接收到语言变化:', lang)
|
||
this.language = lang
|
||
})
|
||
},
|
||
beforeDestroy() {
|
||
// 移除事件监听
|
||
languageBus.$off('language-changed')
|
||
},
|
||
mounted() {
|
||
this.$nextTick(() => {
|
||
// 原有的地图初始化代码...
|
||
})
|
||
},
|
||
methods: {
|
||
init() {
|
||
let params = {
|
||
url_link: this.GetQueryString(this.url)
|
||
}
|
||
getLogoAPI(params).then((res) => {
|
||
if (res.status == true && res.data && res.data.length) {
|
||
this.photosUrl = res.data[0];
|
||
if (this.photosUrl.orgname != '业主机构') {
|
||
this.logoImg = this.photosUrl.logo;
|
||
this.logoText = this.photosUrl.orgname;
|
||
this.ICP = this.photosUrl.license_number;
|
||
this.address = this.photosUrl.address;
|
||
}
|
||
} else {
|
||
this.$message({
|
||
message: res.msg,
|
||
type: "error",
|
||
});
|
||
}
|
||
});
|
||
},
|
||
goProduct(path) {
|
||
window.open(path)
|
||
},
|
||
goNewsPage() {
|
||
window.open('http://tmpweb.opencomputing.cn/col.jsp?id=136')
|
||
},
|
||
login() {
|
||
this.$router.push('/login')
|
||
},
|
||
register() {
|
||
this.$router.push('/registrationPage')
|
||
},
|
||
goOtherPage(value) {
|
||
if (value === 'product') {
|
||
window.open('http://tmpweb.opencomputing.cn/col.jsp?id=146')
|
||
} else if (value === 'aboutUs') {
|
||
window.open('http://tmpweb.opencomputing.cn/col.jsp?id=134')
|
||
} else if (value === 'news') {
|
||
window.open('http://tmpweb.opencomputing.cn/col.jsp?id=136')
|
||
} else if (value === 'service') {
|
||
window.open('http://tmpweb.opencomputing.cn/col.jsp?id=137')
|
||
} else if (value === 'solve') {
|
||
window.open('http://tmpweb.opencomputing.cn/col.jsp?id=104')
|
||
}
|
||
},
|
||
dealWithData() {
|
||
let geoCoordMap = {
|
||
北京: [116.46, 39.92, 100],
|
||
上海: [121.48, 31.22, 200],
|
||
};
|
||
let data = [];
|
||
for (let key in geoCoordMap) {
|
||
data.push({ name: key, value: geoCoordMap[key] });
|
||
}
|
||
return data;
|
||
},
|
||
initMapOne() {
|
||
// 原有的地图初始化代码...
|
||
},
|
||
initMapTwo() {
|
||
// 原有的地图初始化代码...
|
||
},
|
||
GetQueryString(name) {
|
||
if (name.indexOf("#") != -1) {
|
||
const params = name.split("#")[0];
|
||
return params;
|
||
}
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.left-style {
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
border:0.1rem solid red;
|
||
}
|
||
|
||
.header-top {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
width: 100%;
|
||
height: 56px;
|
||
}
|
||
|
||
ul {
|
||
list-style: none;
|
||
}
|
||
|
||
.logo {
|
||
background-color: #32abfc;
|
||
margin-left: 35px;
|
||
width: 45px;
|
||
height: 45px;
|
||
.img {
|
||
width: 50px;
|
||
height: 50px;
|
||
}
|
||
img {
|
||
padding: 0;
|
||
margin: 0;
|
||
}
|
||
}
|
||
|
||
.titleWord {
|
||
font-weight: 550;
|
||
mix-blend-mode: normal;
|
||
text-align: center;
|
||
color: rgba(0, 0, 0, 1);
|
||
font-family: "Microsoft YaHei", serif;
|
||
font-size: 14px;
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
|
||
li {
|
||
cursor: pointer;
|
||
margin-right: 15px;
|
||
}
|
||
}
|
||
|
||
.right-style {
|
||
}
|
||
|
||
.loginBtn-style {
|
||
color: black;
|
||
mix-blend-mode: normal;
|
||
border-radius: 24px;
|
||
background: linear-gradient(
|
||
132.63deg,
|
||
rgba(17, 93, 245, 1) 2.35%,
|
||
rgba(0, 117, 252, 1) 94.2%
|
||
);
|
||
}
|
||
|
||
.register-style {
|
||
mix-blend-mode: normal;
|
||
color: rgba(144, 144, 144, 1);
|
||
font-family: PingFang SC, serif;
|
||
font-weight: 600;
|
||
font-size: 12px;
|
||
margin-right: 5px;
|
||
}
|
||
|
||
//轮播图
|
||
.banner {
|
||
position: relative;
|
||
width: 1.25rem;
|
||
height: 4.5rem;
|
||
border:1px solid red;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.el-carousel__item h3 {
|
||
color: #475669;
|
||
font-size: 18px;
|
||
opacity: 0.75;
|
||
line-height: 300px;
|
||
margin: 0;
|
||
}
|
||
|
||
.el-carousel__item:nth-child(2n) {
|
||
background-color: #99a9bf;
|
||
}
|
||
|
||
.el-carousel__item:nth-child(2n + 1) {
|
||
background-color: #d3dce6;
|
||
}
|
||
|
||
.banner-item {
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.title-word-style {
|
||
mix-blend-mode: normal;
|
||
color: rgba(0, 0, 0, 1);
|
||
font-family: PingFang SC, serif;
|
||
font-weight: 600;
|
||
font-size: 32px;
|
||
}
|
||
|
||
.content-style {
|
||
mix-blend-mode: normal;
|
||
color: rgba(98, 98, 98, 1);
|
||
font-family: PingFang SC, serif;
|
||
font-weight: 600;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.banner-all {
|
||
z-index: 9;
|
||
position: absolute;
|
||
top: 25%;
|
||
left: 10%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
width: 300px;
|
||
}
|
||
|
||
.action {
|
||
position: relative;
|
||
height: 868px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 100%;
|
||
|
||
img {
|
||
width: 80%;
|
||
height: 50%;
|
||
}
|
||
}
|
||
|
||
.clearFloat {
|
||
clear: both;
|
||
}
|
||
|
||
.top-right {
|
||
position: absolute;
|
||
right: 0;
|
||
top: 0;
|
||
}
|
||
|
||
.top-left {
|
||
position: absolute;
|
||
left: 0;
|
||
bottom: 0;
|
||
}
|
||
|
||
.action-content {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
position: absolute;
|
||
margin: 0 auto;
|
||
width: 80%;
|
||
height: 100%;
|
||
}
|
||
|
||
.content-title-before {
|
||
mix-blend-mode: normal;
|
||
border: 3px solid rgba(255, 255, 255, 1);
|
||
text-align: center;
|
||
color: rgba(0, 0, 0, 1);
|
||
font-family: PingFang SC, serif;
|
||
font-weight: 600;
|
||
font-size: 30px;
|
||
}
|
||
|
||
.content-title-last {
|
||
mix-blend-mode: normal;
|
||
border: 3px solid rgba(255, 255, 255, 1);
|
||
text-align: center;
|
||
font-family: PingFang SC, serif;
|
||
font-weight: 600;
|
||
font-size: 30px;
|
||
color: rgba(17, 93, 245, 1);
|
||
}
|
||
|
||
.num {
|
||
width: 35%;
|
||
height: 500px;
|
||
}
|
||
|
||
.pic-right {
|
||
width: 40%;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
img {
|
||
margin: 15px 0;
|
||
margin-left: 150px;
|
||
width: 200px;
|
||
height: 200px;
|
||
}
|
||
}
|
||
|
||
.content-main {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
ul {
|
||
li {
|
||
margin-bottom: 15px;
|
||
cursor: default;
|
||
}
|
||
}
|
||
}
|
||
|
||
.content-item {
|
||
margin-bottom: 15px;
|
||
width: 344px;
|
||
height: 94px;
|
||
mix-blend-mode: normal;
|
||
border-radius: 0px 8px 8px 8px;
|
||
border: 1px solid rgba(239, 239, 239, 1);
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
}
|
||
|
||
.little-item {
|
||
width: 344px;
|
||
height: 94px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: flex-start;
|
||
flex-direction: column;
|
||
padding-left: 20px;
|
||
}
|
||
|
||
.h-word {
|
||
mix-blend-mode: normal;
|
||
color: rgba(0, 0, 0, 1);
|
||
font-family: PingFang SC;
|
||
font-weight: 600;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.c-word {
|
||
mix-blend-mode: normal;
|
||
color: rgba(138, 138, 138, 1);
|
||
font-family: PingFang SC;
|
||
font-weight: 600;
|
||
font-size: 12px;
|
||
margin-top: 5px;
|
||
}
|
||
|
||
.num-icon {
|
||
position: absolute;
|
||
top: 3px;
|
||
left: -18px;
|
||
width: 30%;
|
||
height: 80px;
|
||
}
|
||
|
||
.icon-footer {
|
||
width: 48px;
|
||
height: 48px;
|
||
}
|
||
|
||
.content-footer-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin: 0 55px;
|
||
|
||
img {
|
||
width: 84px;
|
||
height: 48px;
|
||
margin: 15px 0;
|
||
}
|
||
}
|
||
|
||
.footer-title {
|
||
mix-blend-mode: normal;
|
||
color: rgba(0, 0, 0, 1);
|
||
font-family: PingFang SC;
|
||
font-weight: 600;
|
||
font-size: 21px;
|
||
}
|
||
|
||
.footer-content {
|
||
margin-top: 5px;
|
||
mix-blend-mode: normal;
|
||
text-align: center;
|
||
color: rgba(138, 138, 138, 1);
|
||
font-family: PingFang SC;
|
||
font-weight: 600;
|
||
font-size: 14px;
|
||
width: 135px;
|
||
}
|
||
|
||
//核心业务
|
||
.business {
|
||
width: 100%;
|
||
height: 817px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.business-title {
|
||
mix-blend-mode: normal;
|
||
text-align: center;
|
||
color: rgba(0, 0, 0, 1);
|
||
font-family: PingFang SC;
|
||
font-weight: 600;
|
||
font-size: 30px;
|
||
}
|
||
|
||
.business-content {
|
||
mix-blend-mode: normal;
|
||
text-align: center;
|
||
color: rgba(138, 138, 138, 1);
|
||
font-family: PingFang SC;
|
||
font-weight: 600;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.business-icon-footer {
|
||
}
|
||
|
||
.business-pic {
|
||
width: 1040px;
|
||
height: 360px;
|
||
}
|
||
|
||
//高校网络
|
||
.shcool {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.shcool-main {
|
||
position: relative;
|
||
width: 1212px;
|
||
height: 616px;
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.left-content {
|
||
position: absolute;
|
||
top: 50px;
|
||
left: 25px;
|
||
width: 500px;
|
||
height: 500px;
|
||
}
|
||
|
||
.c-one {
|
||
position: absolute;
|
||
top: 50px;
|
||
left: 0;
|
||
width: 153px;
|
||
height: 153px;
|
||
border-radius: 50%;
|
||
background: rgba(255, 169, 0, 0.74);
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.school-title {
|
||
mix-blend-mode: normal;
|
||
text-align: center;
|
||
color: rgba(161, 67, 0, 1);
|
||
font-family: PingFang SC;
|
||
font-weight: 600;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.school-school {
|
||
mix-blend-mode: normal;
|
||
text-align: center;
|
||
color: rgba(161, 67, 0, 1);
|
||
font-family: PingFang SC;
|
||
font-weight: 600;
|
||
font-size: 36px;
|
||
}
|
||
|
||
.c-two {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 120px;
|
||
width: 117px;
|
||
height: 117px;
|
||
border-radius: 50%;
|
||
background: rgba(0, 119, 255, 0.74);
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.school-title-two {
|
||
font-size: 16px;
|
||
}
|
||
|
||
.c-thr {
|
||
position: absolute;
|
||
top: 93px;
|
||
left: 139px;
|
||
width: 88px;
|
||
height: 88px;
|
||
border-radius: 50%;
|
||
background: rgba(0, 155, 24, 0.5);
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.top-school {
|
||
position: relative;
|
||
}
|
||
|
||
.tip-word {
|
||
mix-blend-mode: normal;
|
||
color: rgba(65, 70, 79, 1);
|
||
font-family: PingFang SC;
|
||
font-weight: 600;
|
||
font-size: 18px;
|
||
}
|
||
|
||
.shcool-dscribtion {
|
||
mix-blend-mode: normal;
|
||
color: rgba(0, 0, 0, 1);
|
||
font-family: PingFang SC;
|
||
font-weight: 600;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.main-content {
|
||
position: absolute;
|
||
top: 250px;
|
||
}
|
||
|
||
.main-title {
|
||
mix-blend-mode: normal;
|
||
color: rgba(65, 70, 79, 1);
|
||
font-family: PingFang SC;
|
||
font-weight: 600;
|
||
font-size: 18px;
|
||
}
|
||
|
||
//欢迎体验
|
||
.like {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 240px;
|
||
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.footer {
|
||
width: 100%;
|
||
height: 250px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.left-box {
|
||
width: 50%;
|
||
height: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.right-box {
|
||
width: 50%;
|
||
height: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.content-main {
|
||
mix-blend-mode: normal;
|
||
color: rgba(0, 0, 0, 1);
|
||
font-family: PingFang SC;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.logo-footer {
|
||
width: 200px;
|
||
height: 50px;
|
||
.img {
|
||
width: 80px;
|
||
height: 80px;
|
||
}
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.qr-code {
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
width: 139px;
|
||
height: 139px;
|
||
}
|
||
|
||
.qr-content {
|
||
mix-blend-mode: normal;
|
||
color: rgba(24, 24, 24, 1);
|
||
font-family: PingFang SC, serif;
|
||
font-weight: 600;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.qr-box {
|
||
display: flex;
|
||
justify-content: center;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
.logo {
|
||
background-color: #32abfc;
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
//ecahrt
|
||
.leftCard {
|
||
width: 100%;
|
||
height: 100%;
|
||
|
||
#chinaMap {
|
||
width: 100%;
|
||
height: 100vh;
|
||
}
|
||
}
|
||
|
||
.wrapper {
|
||
width: 100%;
|
||
border: 1px solid red;
|
||
height: 500px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.map-container {
|
||
width: 1200px;
|
||
height: 500px;
|
||
border: 1px solid red;
|
||
}
|
||
|
||
.highlight {
|
||
font-size: 125px;
|
||
}
|
||
|
||
.custom-tooltip {
|
||
width: 500px;
|
||
height: 500px;
|
||
}
|
||
|
||
.pic-word {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
.hiTitle {
|
||
font-size: 28px;
|
||
padding: 12px;
|
||
opacity: 0.8;
|
||
mix-blend-mode: normal;
|
||
color: #f35626;
|
||
font-weight: 700;
|
||
background: coral;
|
||
background-image: -webkit-linear-gradient(
|
||
45deg,
|
||
rgba(17, 239, 222, 1),
|
||
rgba(2, 117, 250, 1)
|
||
);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
-webkit-animation: hue 6s infinite linear;
|
||
}
|
||
|
||
.goLogin-style {
|
||
&:hover {
|
||
background-color: #aad1fd;
|
||
color: white;
|
||
}
|
||
|
||
cursor: pointer;
|
||
color: #32abfc;
|
||
width: 200px;
|
||
height: 42px;
|
||
opacity: 0.8;
|
||
mix-blend-mode: normal;
|
||
border-radius: 3px;
|
||
border: 1px solid rgba(54, 147, 251, 1);
|
||
box-sizing: border-box;
|
||
margin-top: 15px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.news-block {
|
||
padding: 2px;
|
||
width: 350px;
|
||
height: 320px;
|
||
border: 1px solid #4191e0;
|
||
position: absolute;
|
||
top: 280px;
|
||
right: 0;
|
||
}
|
||
|
||
.pic-news {
|
||
width: 200px;
|
||
height: 200px;
|
||
}
|
||
|
||
.title-news {
|
||
mix-blend-mode: normal;
|
||
color: rgba(1, 119, 248, 1);
|
||
font-family: PingFang SC;
|
||
font-weight: 600;
|
||
font-size: 21px;
|
||
}
|
||
|
||
.news-content {
|
||
mix-blend-mode: normal;
|
||
text-align: justify;
|
||
color: rgba(0, 0, 0, 1);
|
||
font-family: PingFang SC;
|
||
font-weight: 600;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.ckl {
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
div {
|
||
margin-right: 15px;
|
||
}
|
||
}
|
||
|
||
.footer-top-style {
|
||
width: 1200px;
|
||
height: 100px;
|
||
margin: 0 auto;
|
||
margin-top: 10px;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
}
|
||
|
||
.item-footer-top {
|
||
img {
|
||
width: 32px;
|
||
height: 32px;
|
||
}
|
||
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.resource {
|
||
mix-blend-mode: normal;
|
||
color: rgba(0, 0, 0, 1);
|
||
font-family: PingFang SC;
|
||
font-size: 20px;
|
||
margin-left: 10px;
|
||
}
|
||
|
||
.friends {
|
||
width: 1200px;
|
||
height: 200px;
|
||
margin: 0 auto;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.logo-item-s {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
|
||
img {
|
||
margin-right: 20px;
|
||
width: 100px;
|
||
}
|
||
|
||
width: 100%;
|
||
height: 450px;
|
||
}
|
||
|
||
.intrudceMessage {
|
||
width: 1200px;
|
||
height: 50px;
|
||
margin: 0 auto;
|
||
margin-top: -25px;
|
||
font-size: 13px;
|
||
margin-bottom: 15px;
|
||
}
|
||
</style>
|