Skip to content

phsl / client

Go to a project
Commit b888b723 by 孙美琪
Options

首页修改

parent 7b102035
Showing with 675 additions and 247 deletions
src/assets/styles/index-CMeKdScn.scss 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
src/layout/user-layout.vue
<template> <template>
<div class="app-wrapper"> <div class="app-wrapper">
<div class="nav-bar"> <div class="nav-bar">
<div class="nav-bar-content"> <div class="nav-bar-content custom-main-w">
<div class="logo flex-align-center" @click="$router.push('/index')"> <div class="logo flex-align-center" @click="$router.push('/index')">
<!-- <img class="nscc" src="@/assets/logo/nscc-logo.jpg" alt="">--> <!-- <img class="nscc" src="@/assets/logo/nscc-logo.jpg" alt="">-->
<img class="nscc" src="@/assets/logo/nscc-logo-copy.png" alt=""> <img class="nscc" src="@/assets/logo/nscc-logo-copy.png" alt="">
...@@ -163,9 +163,10 @@ function logout() { ...@@ -163,9 +163,10 @@ function logout() {
.nav-bar-content { .nav-bar-content {
//width: 1280px; //width: 1280px;
width: calc(100% - 226px); //width: calc(100% - 226px);
height: 90px;
margin: 0 auto; margin: 0 auto;
height: 64px; //height: 64px;
display: flex; display: flex;
align-items: center; align-items: center;
} }
......
src/main.js
...@@ -7,6 +7,7 @@ import locale from 'element-plus/es/locale/lang/zh-cn' ...@@ -7,6 +7,7 @@ import locale from 'element-plus/es/locale/lang/zh-cn'
import '@/assets/font/index.scss' import '@/assets/font/index.scss'
import '@/assets/styles/index.scss' // global css import '@/assets/styles/index.scss' // global css
import '@/assets/styles/index-CMeKdScn.scss'
import App from './App' import App from './App'
import store from './store' import store from './store'
......
src/views/index.vue
<template> <template>
<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="1064px" :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" @click="handleCarousel(item.url)">
<!-- <img :src="baseUrl + item.image" alt="">--> <!-- <img :src="baseUrl + item.image" alt="">-->
<img :src="item.image" alt=""> <img :src="item.image" alt=""/>
</el-carousel-item> </el-carousel-item>
</el-carousel> </el-carousel>
</div> </div>
<div class="new-model"> <div class="custom-main-w">
<div style="padding-top: 32px;"> <div class="custom-title">
<div class="model-box" v-for="(i,index) in list" :key="i"> <h5>我们为您提供高性能的算力服务 </h5>
<div class="new-block"> <p>专业造就品质， 携手共赢，助力企业发展</p></div>
<img v-if="index=== 0" class="resourceLogo" src="@/assets/images/indexImg/resource0-1.png" alt=""> <div class="resource-list">
<img v-if="index=== 1" class="resourceLogo" src="@/assets/images/indexImg/resource0-2.png" alt=""> <div class="el-row" style="margin-left: -15px; margin-right: -15px;">
<img v-if="index=== 2" class="resourceLogo" src="@/assets/images/indexImg/resource0-3.png" alt=""> <div class="el-col el-col-8 is-guttered" style="padding-right: 15px; padding-left: 15px;">
<div class="new-block-details"> <div class="resource-item">
<div class="details-introduce"> <div class="img"><img
<span>{{ i.title }}</span> src="http://ph.xjkcjd.com:18081/prod-api/profile/upload/2024/10/25/服务-超级计算@1x_20241025140658A015.png"
<span>{{ i.titleEH }}</span> alt=""></div>
<div class="title">超级计算</div>
<p class="info">超级计算
拥有天河一号、天河新一代超级计算机，综合算力200PF，存储超20PB，可提供大规模数值模拟计算和数据分析处理等服务</p>
<div class="btn-box">
<button aria-disabled="false" type="button"
class="el-button el-button--default is-plain">
<span class="">了解详情 </span>
</button>
</div> </div>
<div class="present">{{ i.present }}</div>
</div> </div>
</div> </div>
<div v-if="index === 2" class="view-more-text" <div class="el-col el-col-8 is-guttered" style="padding-right: 15px; padding-left: 15px;">
@click="$router.push('/partnership/partnershipList')"> <div class="resource-item">
查看更多 <div class="img"><img
src="http://ph.xjkcjd.com:18081/prod-api/profile/upload/2024/10/25/服务-人工智能@1x_20241025140651A014.png"
alt=""></div>
<div class="title">人工智能计算</div>
<p class="info">
提供各类通用、国产CPU、GPU裸金属服务器，资源独占、性能无损、弹性扩容、安全可靠</p>
<div class="btn-box">
<button aria-disabled="false" type="button"
class="el-button el-button--default is-plain">
<span class="">了解详情 </span>
</button>
</div>
</div>
</div>
<div class="el-col el-col-8 is-guttered" style="padding-right: 15px; padding-left: 15px;">
<div class="resource-item">
<div class="img"><img
src="http://ph.xjkcjd.com:18081/prod-api/profile/upload/2024/10/25/服务-云计算@1x_20241025140605A013.png"
alt=""></div>
<div class="title">云计算</div>
<p class="info">提供安全稳定及灵活扩展的云计算服务，实现按需扩展CPU、内存、存储和网络资源，有效降低
IT 成本，提升运维效率，助力核心业务创新。</p>
<div class="btn-box">
<button aria-disabled="false" type="button"
class="el-button el-button--default is-plain">
<span class="">了解详情 </span>
</button>
</div>
</div> </div>
<div class="particulars" v-if="index !== 2">
<el-row :gutter="24">
<el-col class="resource-col" :span="8" v-for="x in i.assemblyData" :key="i"
@click="i.id === 1? $router.push('/computingResource/resourceList?type=' + x.category):openAssembly(x)"
>
<!-- style="background: url("@/assets/images/indexImg/resource1.png") no-repeat center center / 100%;"-->
<div class="resource-box" :style="{background: `url(${index === 0 ?x.image:x.homeImage}) no-repeat center center / 100%`}">
<div class="title">{{ x.title }}</div>
<div class="introduce">{{ index === 0 ? x.information : x.description }}</div>
</div> </div>
</el-col>
</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=""/> </div>
<div>
<div class="service-card" style="background-color: rgb(255, 255, 255);">
<div class="custom-main-w">
<div class="custom-title"><h5> 为各行业提供智能化解决方案 </h5>
<p>适用于政务、金融、旅游、大数据、人工智能、教育、工业等多行业解决方案</p></div>
<div class="tabs-container">
<div class="tabs-header">
<div v-for="(i,index) in tabList" :key="index" @click="handleTab(index)">
<button :class="activeTabs === index? 'tab-active':''">{{ i }}</button>
<div v-if="activeTabs === index" class="indicator" style="width: 100%;"></div>
</div> </div>
</div> </div>
</div> </div>
<div class="block" style="padding-top: 70px;position: relative;"> <el-carousel ref="myCarousel" type="card" height="400px" :autoplay="false" @change="handleCarouselCard">
<div style="width: calc(100% - 214px);margin: 0 auto;padding-bottom: 10px;"> <el-carousel-item>
<div class="block-title" style="margin-bottom: 50px;z-index: 3 !important;"> <div class="swiper-box">
<div class="bg-text">INFORMATION</div> <div class="swiper-list">
活动资讯 <div class="swiper-item"
style="background-image: url('http://ph.xjkcjd.com:18081/prod-api/profile/upload/2024/10/29/txg-02_20241029161244A040.jpg');">
<div class="item"><h3 class="title">数字天心阁</h3>
<p class="desc">
其展馆面积3000余平方，收藏有大量近代湖湘历史名人相关文物，结合普惠算力服务平台的最新数智科技，打造了沉浸式湖湘文化主题内容体验，是长沙新崛起的一个独具特色的“文化+科技”融合文旅创新项目。</p>
<p class="info flex-justify-end"><span class="btn">带你体验领略不一样的天心阁 </span>
</p></div>
</div> </div>
<div class="flex flex-justify-center">
<el-row :gutter="24" style="z-index: 2;">
<el-col :span="12">
<!--<div class="block-sub-title">活动时间待定，活动内容待定，活动礼品自带</div>-->
<div class="information" style="margin-right: 182px">
<div class="information-item"
@click="$router.push('/information/informationDetail?id='+informationMainData.id)">
<div class="flex">
<div class="date">
<div class="month-day">{{ informationMainData.month }}/{{ informationMainData.month }}</div>
<div class="year">{{ informationMainData.year }}</div>
</div> </div>
<div class="right">
<div class="title">{{ informationMainData.title }}</div>
<div class="content" v-html="informationMainData.remark"></div>
</div> </div>
</el-carousel-item>
<el-carousel-item>
<div class="swiper-box">
<div class="swiper-list">
<div class="swiper-item"
style="background-image: url('http://ph.xjkcjd.com:18081/prod-api/profile/upload/2024/07/01/resource1-Z05URL38_20240701145643A048.png');">
<div class="item">
<h3 class="title">智能审核</h3>
<p class="desc">
新一代人工智能大模型与AIGC应用高科技企业。自成立以来，始终坚持核心技术自主研发，积累数十项知识产权。通过不断深耕大数据、深度学习和自然语言处理（NLP）等人工智能核心领域技术，构建了通用型AI智能内容处理平台底座，并面向安全测评、内容安全、内容生成等领域研发出四大类产品线，包括大模型与AIGC安全评测、博特翊盾一站式智能内容审核与巡查平台、博特妙笔AI公文写作平台、博特点石智能金融服务平台等多维度、广场景、强能力的人工智能产品与服务。</p>
<p class="info flex-justify-end">
<span class="btn">智能审核</span>
</p>
</div> </div>
<img :src="informationMainData.image" alt="">
</div> </div>
</div> </div>
</el-col>
<el-col :span="12">
<div>
<div v-for="item in informationData" :key="item.id" class="information-item flex"
@click="$router.push('/information/informationDetail?id='+item.id)">
<div class="date">
<div class="month-day">{{ item.month }}/{{ item.month }}</div>
<div class="year">{{ item.year }}</div>
</div> </div>
<div class="right"> </el-carousel-item>
<div class="title">{{ item.title }}</div> <el-carousel-item>
<div class="content" v-html="item.remark"> <div class="swiper-box">
<div class="swiper-list">
<div class="swiper-item"
style="background-image: url('http://ph.xjkcjd.com:18081/prod-api/profile/upload/2024/07/01/resource2-jp9iLWfp_20240701145658A050.png');">
<div class="item"><h3 class="title">智能写作</h3>
<p class="desc">
集成案例参考、材料查找、A1写作、修改润色、审核校对、文件学习等功能,全方位地辅助公职人员提高创作效率,节省人工编写的时间和精力。</p>
<p class="info flex-justify-end"><span class="btn">智能写作一片未来</span>
</p></div>
</div>
</div>
</div>
</el-carousel-item>
</el-carousel>
<div class="view-more-text">
<button aria-disabled="false" type="button" class="el-button el-button--default is-plain is-round">
<span class="">查看更多</span></button>
</div>
</div>
</div>
</div>
<div class="service-card" style="background-color: rgb(255, 255, 255);">
<div class="custom-main-w">
<div class="custom-title"><h5>活动资讯</h5></div>
<div class="information-top">
<div class="el-row" style="margin-left: -15px; margin-right: -15px;">
<div class="el-col el-col-8 is-guttered"
style="padding-right: 15px; padding-left: 15px;">
<div class="info-top-item"><img
src="http://ph.xjkcjd.com:18081/prod-api/profile/upload/2025/03/10/640_20250310195348A114.jpg"
alt="">
<div class="content">
<div class="title">天水文旅智算创新中心启动 | 普惠算力平台助力中小企业数字化转型
</div>
<div class="date">2025-03-10</div>
</div>
</div>
</div>
<div class="el-col el-col-8 is-guttered"
style="padding-right: 15px; padding-left: 15px;">
<div class="info-top-item"><img
src="http://ph.xjkcjd.com:18081/prod-api/profile/upload/2024/06/25/封面_20240625194417A007.png"
alt="">
<div class="content">
<div class="title">媒体聚焦 |
新区崭新产业“苗圃”即将“定妆”！湘江创智园预计年底建成投运
</div>
<div class="date">2024-06-25</div>
</div>
</div>
</div>
<div class="el-col el-col-8 is-guttered"
style="padding-right: 15px; padding-left: 15px;">
<div class="info-top-item"><img
src="http://ph.xjkcjd.com:18081/prod-api/profile/upload/2024/10/29/gszx-2_20241029100921A030.jpg"
alt="">
<div class="content">
<div class="title">激活算力促转化！湖南大学大科城先进计算联合创新中心正式成立</div>
<div class="date">2024-06-25</div>
</div>
</div>
</div>
</div>
</div>
<div class="information-bottom">
<div class="info-bottom-item flex">
<div class="content">
<div class="title">AI在金融领域的崭新应用：智能化金融服务的革新</div>
<div class="remark">
引言：随着人工智能（AI）技术的不断发展，金融领域正迎来一场智能化的革命。从智能投资到风险管理，AI正在改变传统金融服务的面貌，为用户提供更为个性化、高效的金融体验。
</div>
</div>
<div class="date">2024-04-28</div>
</div> </div>
<div class="info-bottom-item flex">
<div class="content">
<div class="title">人工智能赋能金融领域 这场银企交流会提出这些“金点子”</div>
<div class="remark">推动大数据技术研发应用，让人工智能赋能金融领域发展，重庆在行动</div>
</div> </div>
<div class="date">2024-04-28</div>
</div>
<div class="info-bottom-item flex">
<div class="content">
<div class="title">
与价值“共声”，银河证券联名财联社将赴AI引领者科大讯飞，洞察新质生产力下一程
</div>
<div class="remark">
AI若以拼音来读，即可读作爱，亦是一种对美好事物的寄托。无疑，AI是新一轮科技革命和产业变革的重要驱动力量，而上市公司则是资本市场高质量发展的重要驱动力量。
</div>
</div>
<div class="date">2024-04-28</div>
</div>
</div>
<div class="view-more-text">
<button aria-disabled="false" type="button"
class="el-button el-button--default is-plain is-round">
<span class="">更多资讯 </span>
</button>
</div> </div>
</div> </div>
</el-col>
</el-row>
</div> </div>
<div class="view-more-text" style="padding-top: 40px;" @click="$router.push('/information/informationList')"> <div>
更多资讯 <div class="partner-card">
<div class="custom-main-w">
<div class="custom-title"><h5>优秀的合作伙伴</h5>
<p>我们将为用户提供安全、可靠、优质的应用解决方案</p></div>
<div class="partner-list">
<div class="el-row" style="margin-left: -15px; margin-right: -15px;">
<div class="el-col el-col-8 is-guttered"
style="padding-right: 15px; padding-left: 15px;">
<div class="partner-item">
<div class="img"><img
src="http://ph.xjkcjd.com:18081/prod-api/profile/upload/2024/12/25/智谱_20241225151742A098.png"
alt=""></div>
<div class="title">北京智谱华章科技有限公司</div>
</div>
</div>
</div>
</div>
</div> </div>
</div> </div>
<img class="block-light" src="@/assets/images/indexImg/glow5.png" alt=""/> </div>
<div class="joinus-box">
<div class="custom-main-w joinus-inner-box">
<div class="cell-1 left">
<h5 class="title">
普惠算力公共服务平台，期待您的加入</h5>
<p class="desc">
让我们共同引领行业创新浪潮，共绘算力时代蓝图，成为超算互联网服务领域的佼佼者</p></div>
<div class="right"><span class="a-btn"> 加入我们</span></div>
</div>
</div> </div>
<div class="content-footer"> <div class="content-footer">
...@@ -143,6 +291,8 @@ import {ref} from 'vue' ...@@ -143,6 +291,8 @@ 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 baseImgUrl = window.location.origin
const activeTabs = ref(1)
const tabList = ref(['数字天心阁', '智能审核', '智能写作'])
const assemblyData = ref([]) const assemblyData = ref([])
const bannerImgList = ref([]) const bannerImgList = ref([])
...@@ -189,23 +339,8 @@ const dialogTableVisible = ref(false) ...@@ -189,23 +339,8 @@ const dialogTableVisible = ref(false)
const dialogTitle = ref('') const dialogTitle = ref('')
const iframeSrc = ref('') const iframeSrc = ref('')
const iframeShow = ref(false) const iframeShow = ref(false)
const myCarousel = ref(null)
// function getBanner() {
// banner().then(res => {
// // 筛选条件：showStatus为1且image字段存在且不为空
// const validData = res.data.filter(item =>
// item.showStatus === 1 &&
// item.image &&
// item.image.trim() !== ''
// );
//
// // 对筛选后的数据进行排序
// bannerImgList.value = validData.sort(function (a, b) {
// return a.orderNum - b.orderNum
// })
// })
// }
function getBanner() { function getBanner() {
banner().then(res => { banner().then(res => {
// 筛选条件：showStatus为1的数据 // 筛选条件：showStatus为1的数据
...@@ -228,30 +363,17 @@ function getBanner() { ...@@ -228,30 +363,17 @@ function getBanner() {
}) })
} }
getBanner() function handleTab(val) {
activeTabs.value = val
myCarousel.value.setActiveItem(val);
}
function handleCarouselCard(index) {
activeTabs.value = index
}
getBanner()
// function getAssemblyList() {
// assemblyList({type: 0}).then(res => {
// // 筛选条件：showStatus为1且description字段存在
// const filteredData = res.data.filter(item =>
// item.showStatus === true &&
// item.description
// );
//
// const data = filteredData.sort(function (a, b) {
// return a.orderNum - b.orderNum
// }).map(item => {
// // 处理description字段，去除<p>标签
// if (item.description) {
// item.description = item.description.replace(/<p>/g, '').replace(/<\/p>/g, '')
// }
// return item
// })
// assemblyData.value = data.length > 3 ? data.slice(0, 3) : data
// list.value[1].assemblyData = data.length > 3 ? data.slice(0, 3) : data
// })
// }
function getAssemblyList() { function getAssemblyList() {
assemblyList({type: 0}).then(res => { assemblyList({type: 0}).then(res => {
// 筛选条件：showStatus为true的数据 // 筛选条件：showStatus为true的数据
...@@ -286,24 +408,6 @@ function getAssemblyList() { ...@@ -286,24 +408,6 @@ function getAssemblyList() {
}) })
} }
// function getResource() {
// informationResourceList().then(res => {
// // 筛选条件：showStatus为true的数据
// const filteredData = res.data.filter(item => item.showStatus === true);
//
// // 可选：同时处理information字段，去除<p>标签
// const processedData = filteredData.map(item => {
// if (item.information) {
// item.information = item.information.replace(/<p>/g, '').replace(/<\/p>/g, '');
// }
// return item;
// });
//
// list.value[0].assemblyData = processedData.length > 3 ? processedData.slice(0, 3) : processedData;
// console.log(list.value[0].assemblyData, 'list.value[0].assemblyData');
// });
// }
function getResource() { function getResource() {
informationResourceList().then(res => { informationResourceList().then(res => {
// 筛选条件：showStatus为true的数据 // 筛选条件：showStatus为true的数据
...@@ -337,33 +441,6 @@ getResource() ...@@ -337,33 +441,6 @@ getResource()
const informationData = ref([]) const informationData = ref([])
const informationMainData = ref({}) const informationMainData = ref({})
// function getInformation() {
// informationList().then(res => {
// // 筛选条件：showStatus为true的数据
// const filteredData = res.data.filter(item => item.showStatus === true);
//
// // 按创建时间降序排序（最新的在前）
// const sortedData = filteredData.sort((a, b) => {
// return new Date(b.createTime) - new Date(a.createTime);
// });
//
// sortedData.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
// // 使用正则表达式去除所有<p>和</p>标签
// if (item.description) {
// item.description = item.description.replace(/<p>/g, '').replace(/<\/p>/g, '')
// }
// })
// informationMainData.value = sortedData.length ? sortedData[0] : {}
// const arr = sortedData.length ? sortedData.slice(1, sortedData.length) : []
// informationData.value = arr.length > 3 ? arr.slice(0, 3) : arr
// })
// }
function getInformation() { function getInformation() {
informationList().then(res => { informationList().then(res => {
// 筛选条件：showStatus为true的数据 // 筛选条件：showStatus为true的数据
...@@ -425,16 +502,6 @@ function handleCarousel(url) { ...@@ -425,16 +502,6 @@ function handleCarousel(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 { .view-more-text {
position: sticky; position: sticky;
text-align: center; text-align: center;
...@@ -554,18 +621,6 @@ function handleCarousel(url) { ...@@ -554,18 +621,6 @@ function handleCarousel(url) {
z-index: 2 !important; 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-grow: 1;
...@@ -591,11 +646,6 @@ function handleCarousel(url) { ...@@ -591,11 +646,6 @@ function handleCarousel(url) {
} }
.block { .block {
//width: 1280px;
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; z-index: 4 !important;
padding-bottom: 60px; padding-bottom: 60px;
...@@ -661,11 +711,12 @@ function handleCarousel(url) { ...@@ -661,11 +711,12 @@ function handleCarousel(url) {
} }
} }
.resource-item, .application-item { .resource-item:hover {
&:hover {
cursor: pointer; cursor: pointer;
box-shadow: 0 0 10px 0 #dbdada; box-shadow: 0 0 10px 0 #dbdada;
} }
.resource-item, .application-item {
.title { .title {
font-weight: bold; font-weight: bold;
...@@ -717,18 +768,6 @@ function handleCarousel(url) { ...@@ -717,18 +768,6 @@ function handleCarousel(url) {
justify-content: center; 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-bg-5.png") no-repeat center center / cover;
//}
.title { .title {
text-align: center; text-align: center;
} }
...@@ -764,41 +803,6 @@ function handleCarousel(url) { ...@@ -764,41 +803,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 {
// //flex: 1;
// padding-right: 210px;
//}
//.information {
// width: 100%;
// padding: 0 214px;
//}
.information-item { .information-item {
width: 570px; width: 570px;
...@@ -806,21 +810,22 @@ function handleCarousel(url) { ...@@ -806,21 +810,22 @@ function handleCarousel(url) {
font-size: 16px !important; font-size: 16px !important;
} }
&:hover { //
cursor: pointer; //&:hover {
// cursor: pointer;
.date { //
color: #2E77E3; // .date {
} // color: #2E77E3;
// }
.title { //
color: #2E77E3; // .title {
} // color: #2E77E3;
// }
.content { //
color: #2E77E3; // .content {
} // color: #2E77E3;
} // }
//}
&:not(:last-child) { &:not(:last-child) {
padding-bottom: 26px; padding-bottom: 26px;
...@@ -1051,5 +1056,426 @@ function handleCarousel(url) { ...@@ -1051,5 +1056,426 @@ function handleCarousel(url) {
} }
} }
} }
.custom-title {
padding: 80px 0 50px;
text-align: center
}
.custom-title h5 {
font-size: 30px;
font-weight: 700;
line-height: 2
}
.custom-title p {
color: #9a9a9a;
font-size: 20px;
line-height: 2
}
.view-more-text {
position: sticky;
text-align: center;
font-size: 20px;
color: #000;
cursor: pointer;
padding-bottom: 100px;
z-index: 2 !important
}
.view-more-text .el-button {
padding: 20px 30px
}
.banner-container {
position: relative;
cursor: pointer
}
.banner-container img {
display: block;
width: 100%;
height: 100%
}
.banner-container .img-div {
width: 100%;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
min-height: 800px;
height: 100%
}
.banner-container .el-carousel__button {
height: 8px;
width: 60px;
border-radius: 4px
}
.banner-container .el-carousel__arrow {
width: 46px;
height: 46px;
font-size: 30px;
font-weight: 700;
background-color: #b5aeae96;
opacity: .5
}
.resource-list {
margin: 0 45px;
padding-bottom: 150px
}
.resource-item {
padding: 50px 40px;
background-color: #fff;
border: 1px solid #CECECE;
border-radius: 15px
}
//.resource-item :hover {
// box-shadow: 0 0 10px #dbdada
//}
.resource-item .img {
width: 70px;
height: 70px;
margin: 0 auto;
text-align: center;
display: flex;
justify-content: center;
align-items: center
}
.resource-item .img img {
width: auto;
max-height: 100%;
max-width: 100%;
display: inline-block
}
.resource-item .title {
font-weight: 700;
font-size: 22px;
text-align: center;
height: 80px;
line-height: 80px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
color: #333
}
.resource-item .info {
font-weight: 400;
font-size: 16px;
color: #666;
line-height: 28px;
margin-top: 9px;
margin-bottom: 20px;
height: 112px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical
}
.resource-item .btn-box {
text-align: center
}
.resource-item .btn-box .el-button {
height: 45px;
width: 120px;
background-color: #1f4aae;
border-radius: 10px;
color: #fff;
cursor: pointer
}
.service-card {
background-color: #fff;
margin-bottom: 30px
}
.tabs-container {
display: flex;
flex-direction: column
}
.tabs-header {
display: flex;
width: 900px;
margin: 0 auto;
justify-content: space-around;
//display: flex;
//position: relative;
//overflow-x: auto;
//white-space: nowrap
}
//.tabs-header div {
// display: flex;
// justify-content: space-around;
//}
.tabs-header button {
display: block;
padding: 5px 0;
background: none;
border: none;
cursor: pointer;
outline: none;
margin: 0 auto;
font-size: 22px;
transition: all .3s ease
}
.tabs-header button :hover {
color: #1f4aaf
}
.tabs-header .tab-active {
color: #1f4aaf;
position: relative
}
.indicator {
//position: absolute;
//bottom: 0;
height: 2px;
background-color: #1f4aaf;
transition: transform .3s ease
}
.swiper-box {
//width: 900px;
height: 400px;
//position: relative;
//overflow: hidden;
margin: 40px 0
}
.swiper-box .swiper-list {
//display: flex;
//width: 99999px;
//height: 100%;
//overflow-x: auto;
//position: absolute;
//top: 0;
//left: -300px;
//transition: all .3s
}
.swiper-box .swiper-list .swiper-item {
//width: 900px;
height: 100%;
margin-right: 40px;
border-radius: 20px;
background-position: center;
background-repeat: no-repeat;
background-size: cover
}
.swiper-box .swiper-list .swiper-item :last-child {
margin-right: 0
}
.swiper-box .swiper-list .swiper-item .item {
width: 100%;
height: 100%;
border-radius: 20px;
padding: 30px 20px 60px 20px;
color: #fff;
background-color: #00000026
}
.swiper-box .swiper-list .swiper-item .title {
font-size: 22px;
font-weight: 600;
height: 40px;
line-height: 40px;
padding-bottom: 20px;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis
}
.swiper-box .swiper-list .swiper-item .desc {
font-size: 16px;
line-height: 28px;
height: 112px;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical
}
.swiper-box .swiper-list .swiper-item .info {
margin: 20px 0 0
}
.swiper-box .swiper-list .swiper-item .btn {
border: 1px solid #fff;
padding: 5px 20px;
border-radius: 20px;
cursor: pointer;
margin-top: 20px;
}
.iframe-container {
position: absolute;
top: 10%;
left: 6%
}
.iframe-container iframe {
position: absolute;
top: 0;
left: 0
}
.el-dialog__body {
padding-top: unset !important
}
.partner-card {
background: #fff
}
.partner-list {
margin: 0 45px;
padding-bottom: 80px
}
.partner-item {
margin: 30px 40px;
cursor: pointer
}
.partner-item .img {
width: 160px;
height: 70px;
margin: 0 auto;
text-align: center;
display: flex;
justify-content: center;
align-items: center
}
.partner-item .img img {
width: auto;
max-height: 100%;
max-width: 100%;
display: inline-block
}
.partner-item .title {
font-weight: 700;
font-size: 18px;
text-align: center;
margin: 10px auto 0;
height: 36px;
line-height: 36px;
overflow: hidden;
color: #333
}
.information-bottom {
padding: 80px 0 40px
}
.info-top-item {
position: relative;
height: 400px;
overflow: hidden
}
.info-top-item :hover {
cursor: pointer
}
.info-top-item .content {
position: absolute;
left: 0;
right: 0;
bottom: 0;
border-radius: 0 0 10px 10px;
background-color: #10101080;
color: #fff;
padding: 14px 20px;
text-overflow: ellipsis
}
.info-top-item .title {
height: 40px;
line-height: 20px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical
}
.info-top-item img {
border-radius: 10px;
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
object-fit: cover
}
.info-bottom-item {
margin-bottom: 40px
}
.info-bottom-item :hover {
cursor: pointer
}
.info-bottom-item:hover .title, .info-bottom-item:hover .remark, .info-bottom-item:hover .date {
color: #2c53ad
}
.info-bottom-item .content {
flex: 1;
width: 75%;
padding-right: 200px
}
.info-bottom-item .title {
font-size: 20px;
color: #333;
margin-bottom: 5px;
line-height: 30px;
height: 30px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis
}
.info-bottom-item .remark {
font-size: 16px;
color: #9a9a9a;
overflow: hidden;
line-height: 24px;
max-height: 48px;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical
}
.info-bottom-item .date {
font-family: DIN, system-ui;
margin: 0 15px 0 30px;
line-height: 40px;
height: 40px;
font-size: 16px
}
</style> </style>
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