You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1182 lines
28 KiB
1182 lines
28 KiB
<template> |
|
<div |
|
:class="{ |
|
'container-1420': |
|
useThemeStore.currentTheme.name !== '白蓝主题' && |
|
useThemeStore.currentTheme.name !== '白紫主题', |
|
'container-100': |
|
useThemeStore.currentTheme.name === '白蓝主题' || |
|
useThemeStore.currentTheme.name === '白紫主题', |
|
}" |
|
v-if="isLoading" |
|
> |
|
<div |
|
class="banner" |
|
:class="{ |
|
'dark-layout': useThemeStore.isDark, |
|
'light-blue-layout': useThemeStore.currentTheme.name === '白蓝主题', |
|
'light-purple-layout': useThemeStore.currentTheme.name === '白紫主题', |
|
'light-green-layout': useThemeStore.currentTheme.name === '暗夜绿主题', |
|
}" |
|
> |
|
<div class="banner-left"> |
|
<div class="href" v-if="useThemeStore.isDark"> |
|
<a href="https://www.baidu.com">https://www.baidu.com</a> |
|
<div>网址</div> |
|
</div> |
|
<div class="title"> |
|
{{ reacProjectList[0].compName }} |
|
<br v-if="useThemeStore.isDark" /> |
|
火热报名中 |
|
</div> |
|
<div class="description"> |
|
<div v-html="reacProjectList[0].compInfo"></div> |
|
</div> |
|
<div |
|
class="application gradient" |
|
@click="toDetail(reacProjectList[0].id)" |
|
> |
|
立即报名 |
|
</div> |
|
</div> |
|
<div class="banner-right"> |
|
<img |
|
src="../../assets/images/pk.png" |
|
alt="Banner Image" |
|
v-if="useThemeStore.currentTheme.name === '暗夜主题'" |
|
/> |
|
<img |
|
src="../../assets/images/hl.png" |
|
alt="Banner Image" |
|
v-else-if="useThemeStore.currentTheme.name === '暗夜绿主题'" |
|
/> |
|
<img src="../../assets/images/bl.png" alt="Banner Image" v-else /> |
|
</div> |
|
</div> |
|
<!-- 比赛列表 --> |
|
<div class="content" v-if="useThemeStore.currentTheme.name === '白蓝主题'"> |
|
<ul> |
|
<li> |
|
<div class="title">1830+</div> |
|
<div class="description">已报名人数</div> |
|
</li> |
|
<li> |
|
<div class="title">220</div> |
|
<div class="description">比赛数</div> |
|
</li> |
|
<li> |
|
<div class="title">390</div> |
|
<div class="description">项目数</div> |
|
</li> |
|
<li> |
|
<div class="title">830+</div> |
|
<div class="description">获奖数</div> |
|
</li> |
|
</ul> |
|
</div> |
|
<!-- 新闻列表 --> |
|
<!-- 新闻列表 --> |
|
<div |
|
class="news-list" |
|
:class="{ |
|
'light-blue-news': useThemeStore.currentTheme.name === '白蓝主题', |
|
'light-purple-news': useThemeStore.currentTheme.name === '白紫主题', |
|
}" |
|
> |
|
<div class="news-title"> |
|
<div class="top"> |
|
<div>新闻资讯</div> |
|
<div @click="router.push('/news')"> |
|
<el-icon><ArrowRightBold /></el-icon> |
|
</div> |
|
</div> |
|
<!-- <div class="bottom">30+项目登陆后报名</div> --> |
|
</div> |
|
<div class="newa-panel"> |
|
<div class="newa-main"> |
|
<div |
|
class="right" |
|
:class="{ |
|
'full-width': useThemeStore.currentTheme.name === '暗夜绿主题', |
|
}" |
|
> |
|
<div class="title">{{ newInfo.name }}</div> |
|
<div class="description"> |
|
<!-- 我是新闻描述,我是新闻描述,我是新闻描述 --> |
|
</div> |
|
<div class="newa-main-list"> |
|
<ul> |
|
<li |
|
v-for="item in childrenNewList" |
|
:key="item.id" |
|
@click="toNewsDetail(item.id)" |
|
> |
|
<div |
|
class="img" |
|
v-if=" |
|
useThemeStore.currentTheme.name === '白蓝主题' || |
|
useThemeStore.currentTheme.name === '白紫主题' |
|
" |
|
> |
|
<img src="../../assets/images/orange.png" alt="" /> |
|
</div> |
|
<div class="info"> |
|
{{ item.title }} |
|
</div> |
|
<div class="time">{{ item.createTime }}</div> |
|
</li> |
|
</ul> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<!-- 报名板块 --> |
|
</div> |
|
</template> |
|
|
|
<script lang="ts" setup> |
|
import { ref } from 'vue' |
|
import { getRaceList } from '@/api/race' |
|
import { useRouter } from 'vue-router' |
|
import { ElLoading } from 'element-plus' |
|
import { getColumnListApi, queryEssayListApi } from '@/api/news' |
|
import themeStore from '@/store/module/theme' |
|
|
|
// 动态导入图片 |
|
const pkImage = new URL('@/assets/images/pk.png', import.meta.url).href |
|
const newsImage = new URL('@/assets/images/news.png', import.meta.url).href |
|
|
|
const router = useRouter() |
|
const useThemeStore = themeStore() |
|
const reacProjectList = ref<any>([]) |
|
const isLoading = ref(false) |
|
|
|
const News = ref<any>(['全部', '通知公告', '赛事资讯', '活动速递', '政策文件']) |
|
const getRaceProjectListEvent = async () => { |
|
let page = { |
|
column: 'createTime', |
|
order: 'desc', |
|
pageNo: 1, |
|
pageSize: 8, |
|
} |
|
const loading = ElLoading.service({ |
|
lock: true, |
|
text: 'Loading', |
|
background: 'rgba(255, 255, 255, 0.7)', |
|
}) |
|
const res: any = await getRaceList(page) |
|
console.log(res) |
|
reacProjectList.value = res.result.slice(0, 8) |
|
console.log(reacProjectList.value, 'reacProjectList.value ') |
|
|
|
isLoading.value = true |
|
loading.close() |
|
} |
|
getRaceProjectListEvent() |
|
const active = ref(0) |
|
const setImageUrl = (url: string) => { |
|
return import.meta.env.VITE_APP_BASE_API + '/sys/common/static/' + url |
|
} |
|
|
|
// 前往比赛综述 |
|
const toDetail = (id: number) => { |
|
// router.push({ |
|
// path: '/race-info', |
|
// query: { |
|
// id, |
|
// }, |
|
// }) |
|
router.push({ |
|
path: '/raceProject', |
|
query: { |
|
id, |
|
}, |
|
}) |
|
} |
|
const toNewsDetail = (id: number) => { |
|
router.push({ |
|
path: '/detail/' + id, |
|
}) |
|
} |
|
// 获取新闻栏目 |
|
const newList = ref<any>([]) |
|
const getNewsList = async () => { |
|
const res: any = await getColumnListApi() |
|
// console.log(res) |
|
newList.value = res.result.slice(0, 4) |
|
// console.log(newList.value, 'newList.value') |
|
newInfo.value = newList.value[0] |
|
getNewInfo(newList.value[0].id) |
|
} |
|
getNewsList() |
|
|
|
// 新闻详情 |
|
const newInfo = ref<any>({}) |
|
// 栏目下的新闻 |
|
const childrenNewList = ref<any>([]) |
|
const getNewInfo = async (id: any) => { |
|
const res: any = await queryEssayListApi(id) |
|
childrenNewList.value = res.result.records |
|
// console.log(childrenNewList, 'childrenNewList') |
|
} |
|
|
|
// 切换tab |
|
const toggleTab = (item: any, index: number) => { |
|
active.value = index |
|
newInfo.value = item |
|
getNewInfo(newInfo.value.id) |
|
} |
|
</script> |
|
<script lang="ts"> |
|
export default { |
|
name: 'Home', // 必须显式设置 |
|
} |
|
</script> |
|
<style lang="scss" scoped> |
|
.banner { |
|
position: relative; |
|
width: 100%; |
|
height: 692px; |
|
display: flex; |
|
flex-direction: column; |
|
align-items: center; |
|
justify-content: center; |
|
// padding: 0 100px; |
|
background-image: url('../../assets/images/banner1.png') ; |
|
background-size: cover; |
|
background-position: center; |
|
background-repeat: no-repeat; |
|
padding: 0 20px; |
|
|
|
&:not(.dark-layout):not(.light-blue-layout):not(.light-purple-layout) { |
|
.banner-left { |
|
position: relative; |
|
z-index: 2; |
|
width: 100%; |
|
text-align: center; |
|
.title { |
|
font-size: 32px; |
|
font-weight: 600; |
|
color: var(--text-color); |
|
margin-bottom: 37px; |
|
line-height: 40px; |
|
margin-top: 20px; |
|
} |
|
|
|
.description { |
|
// width: 1074px; |
|
text-align: center; |
|
font-size: 14px; |
|
color: var(--text-color); |
|
opacity: 0.65; |
|
line-height: 28px; |
|
margin-bottom: 50px; |
|
overflow: hidden; |
|
text-overflow: ellipsis; |
|
display: -webkit-box; |
|
-webkit-line-clamp: 2; |
|
-webkit-box-orient: vertical; |
|
} |
|
.href { |
|
display: flex; |
|
align-items: center; |
|
a { |
|
background: linear-gradient(90deg, #61f7ee, #2ce2af, #2370e6); |
|
-webkit-background-clip: text; |
|
-webkit-text-fill-color: transparent; |
|
font-size: 40px; |
|
font-weight: 600; |
|
} |
|
div { |
|
background: linear-gradient(90deg, #fcf69c, #fdca43, #fcf69c); |
|
color: #3d1100; |
|
width: 74px; |
|
height: 37px; |
|
border-radius: 5px; |
|
margin-left: 20px; |
|
font-size: 18px; |
|
text-align: center; |
|
line-height: 37px; |
|
} |
|
} |
|
.application { |
|
width: 160px; |
|
height: 50px; |
|
text-align: center; |
|
line-height: 50px; |
|
border-radius: 10px; |
|
font-size: 20px; |
|
cursor: pointer; |
|
color: #fff; |
|
background: var(--gradient-color); |
|
transition: all 0.3s; |
|
margin: 0 auto; |
|
|
|
&:hover { |
|
transform: translateY(-2px); |
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); |
|
} |
|
} |
|
} |
|
|
|
.banner-right { |
|
display: none; |
|
} |
|
} |
|
|
|
&.dark-layout { |
|
flex-direction: row; |
|
justify-content: space-between; |
|
align-items: center; |
|
|
|
background: var(--background-color); |
|
background-image: none !important; |
|
|
|
.banner-left { |
|
flex: 1; |
|
text-align: left; |
|
padding-right: 60px; |
|
|
|
.title { |
|
font-size: 50px; |
|
font-weight: 600; |
|
color: var(--text-color); |
|
margin-bottom: 37px; |
|
line-height: 65px; |
|
margin-top: 20px; |
|
} |
|
|
|
.description { |
|
width: 100%; |
|
text-align: left; |
|
font-size: 20px; |
|
color: var(--text-color); |
|
opacity: 0.65; |
|
line-height: 32px; |
|
margin-bottom: 50px; |
|
overflow: visible; |
|
-webkit-line-clamp: unset; |
|
-webkit-box-orient: unset; |
|
overflow: hidden; |
|
text-overflow: ellipsis; |
|
display: -webkit-box; |
|
-webkit-line-clamp: 2; |
|
-webkit-box-orient: vertical; |
|
} |
|
|
|
.application { |
|
width: 160px; |
|
height: 50px; |
|
text-align: center; |
|
line-height: 50px; |
|
border-radius: 10px; |
|
font-size: 20px; |
|
cursor: pointer; |
|
color: #fff; |
|
background: var(--gradient-color); |
|
transition: all 0.3s; |
|
margin: 0 auto; |
|
|
|
&:hover { |
|
transform: translateY(-2px); |
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); |
|
} |
|
} |
|
|
|
.href { |
|
display: flex; |
|
align-items: center; |
|
margin-bottom: 20px; |
|
a { |
|
background: linear-gradient(90deg, #61f7ee, #2ce2af, #2370e6); |
|
-webkit-background-clip: text; |
|
-webkit-text-fill-color: transparent; |
|
font-size: 40px; |
|
font-weight: 600; |
|
} |
|
div { |
|
background: linear-gradient(90deg, #fcf69c, #fdca43, #fcf69c); |
|
color: #3d1100; |
|
width: 74px; |
|
height: 37px; |
|
border-radius: 5px; |
|
margin-left: 20px; |
|
font-size: 18px; |
|
text-align: center; |
|
line-height: 37px; |
|
} |
|
} |
|
} |
|
|
|
.banner-right { |
|
display: flex; |
|
flex: 1; |
|
height: 65%; |
|
align-items: center; |
|
justify-content: center; |
|
|
|
img { |
|
max-width: 100%; |
|
max-height: 100%; |
|
object-fit: contain; |
|
border-radius: 12px; |
|
// box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); |
|
} |
|
} |
|
} |
|
|
|
&.light-blue-layout { |
|
flex-direction: row; |
|
justify-content: space-between; |
|
align-items: center; |
|
|
|
background: var(--background-color); |
|
background-image: none !important; |
|
|
|
.banner-left { |
|
flex: 1; |
|
text-align: left; |
|
padding-right: 60px; |
|
margin-left: 180px; |
|
|
|
.title { |
|
font-size: 50px; |
|
font-weight: 600; |
|
color: var(--text-color); |
|
margin-bottom: 37px; |
|
line-height: 65px; |
|
margin-top: 20px; |
|
} |
|
|
|
.description { |
|
width: 100%; |
|
text-align: left; |
|
font-size: 20px; |
|
color: var(--text-color); |
|
opacity: 0.65; |
|
line-height: 32px; |
|
margin-bottom: 50px; |
|
overflow: visible; |
|
-webkit-line-clamp: unset; |
|
-webkit-box-orient: unset; |
|
overflow: hidden; |
|
text-overflow: ellipsis; |
|
display: -webkit-box; |
|
-webkit-line-clamp: 2; |
|
-webkit-box-orient: vertical; |
|
} |
|
|
|
.application { |
|
width: 160px; |
|
height: 50px; |
|
text-align: center; |
|
line-height: 50px; |
|
border-radius: 10px; |
|
font-size: 20px; |
|
cursor: pointer; |
|
color: #fff; |
|
background: var(--gradient-color); |
|
transition: all 0.3s; |
|
margin: 0 auto; |
|
|
|
&:hover { |
|
transform: translateY(-2px); |
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); |
|
} |
|
} |
|
|
|
.href { |
|
display: flex; |
|
align-items: center; |
|
margin-bottom: 20px; |
|
a { |
|
background: linear-gradient(90deg, #61f7ee, #2ce2af, #2370e6); |
|
-webkit-background-clip: text; |
|
-webkit-text-fill-color: transparent; |
|
font-size: 40px; |
|
font-weight: 600; |
|
} |
|
div { |
|
background: linear-gradient(90deg, #fcf69c, #fdca43, #fcf69c); |
|
color: #3d1100; |
|
width: 74px; |
|
height: 37px; |
|
border-radius: 5px; |
|
margin-left: 20px; |
|
font-size: 18px; |
|
text-align: center; |
|
line-height: 37px; |
|
} |
|
} |
|
} |
|
|
|
.banner-right { |
|
display: flex; |
|
width: 845px; |
|
height: 65%; |
|
align-items: center; |
|
justify-content: center; |
|
|
|
img { |
|
max-width: 100%; |
|
max-height: 100%; |
|
object-fit: contain; |
|
border-radius: 12px; |
|
// box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); |
|
} |
|
} |
|
.news-list { |
|
width: 1200px; |
|
} |
|
} |
|
|
|
&.light-purple-layout { |
|
flex-direction: row; |
|
justify-content: space-between; |
|
align-items: center; |
|
|
|
background: var(--background-color); |
|
background-image: url(../../assets/images/bzbanner.png); |
|
|
|
.banner-left { |
|
flex: 1; |
|
text-align: left; |
|
padding-right: 60px; |
|
margin-left: 180px; |
|
|
|
.title { |
|
font-size: 50px; |
|
font-weight: 600; |
|
color: var(--text-color); |
|
margin-bottom: 37px; |
|
line-height: 65px; |
|
margin-top: 20px; |
|
} |
|
|
|
.description { |
|
width: 100%; |
|
text-align: left; |
|
font-size: 20px; |
|
color: var(--text-color); |
|
opacity: 0.65; |
|
line-height: 32px; |
|
margin-bottom: 50px; |
|
overflow: visible; |
|
-webkit-line-clamp: unset; |
|
-webkit-box-orient: unset; |
|
overflow: hidden; |
|
text-overflow: ellipsis; |
|
display: -webkit-box; |
|
-webkit-line-clamp: 2; |
|
-webkit-box-orient: vertical; |
|
} |
|
|
|
.application { |
|
width: 160px; |
|
height: 64px; |
|
text-align: center; |
|
line-height: 64px; |
|
border-radius: 10px; |
|
font-size: 24px; |
|
color: #fff; |
|
cursor: pointer; |
|
background: linear-gradient(90deg, #b46efd, #684fff); |
|
transition: all 0.3s; |
|
margin: 0; |
|
|
|
&:hover { |
|
transform: translateY(-2px); |
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); |
|
} |
|
} |
|
} |
|
|
|
.banner-right { |
|
display: flex; |
|
width: 845px; |
|
height: 65%; |
|
align-items: center; |
|
justify-content: center; |
|
|
|
img { |
|
max-width: 100%; |
|
max-height: 100%; |
|
object-fit: contain; |
|
border-radius: 12px; |
|
} |
|
} |
|
.news-list { |
|
width: 1200px; |
|
} |
|
} |
|
} |
|
|
|
// 白蓝主题特殊样式 |
|
:deep(.light) { |
|
.banner { |
|
width: 100vw; |
|
background-color: #ffffff; |
|
margin-left: calc(-50vw + 50%); |
|
margin-right: calc(-50vw + 50%); |
|
background-image: none; |
|
} |
|
} |
|
.race-list { |
|
position: relative; |
|
width: 100%; |
|
display: grid; |
|
grid-template-columns: repeat(4, 1fr); |
|
grid-template-rows: repeat(2, 1fr); |
|
margin-top: 40px; |
|
.item { |
|
width: 340px; |
|
height: 360px; |
|
background-color: var(--card-bg-color); |
|
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15); |
|
cursor: pointer; |
|
border-radius: 10px; |
|
border: 1px solid var(--border-color); |
|
transition: all 0.2s; |
|
.image { |
|
width: 100%; |
|
height: 194px; |
|
img { |
|
width: 100%; |
|
height: 100%; |
|
} |
|
} |
|
.reac-info { |
|
padding: 0 8px; |
|
.reac-title { |
|
margin-top: 19px; |
|
color: var(--text-color); |
|
opacity: 0.45; |
|
font-size: 12px; |
|
} |
|
.reac-project { |
|
font-size: 16px; |
|
font-weight: 600; |
|
color: var(--text-color); |
|
margin-top: 10px; |
|
} |
|
.time { |
|
font-size: 14px; |
|
color: var(--text-color); |
|
opacity: 0.65; |
|
margin-top: 40px; |
|
} |
|
} |
|
} |
|
.item:hover { |
|
transform: translateY(-5px); |
|
border-color: var(--primary-color); |
|
} |
|
.item:nth-child(n) { |
|
margin-top: 20px; |
|
} |
|
.more { |
|
position: absolute; |
|
right: 20px; |
|
top: -20px; |
|
color: var(--primary-color); |
|
cursor: pointer; |
|
font-size: 14px; |
|
} |
|
} |
|
.news-list { |
|
// margin-top: 170px; |
|
background: var(--background-color); |
|
.news-title { |
|
.top { |
|
font-size: 40px; |
|
font-weight: 600; |
|
text-align: center; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
color: var(--text-color); |
|
div { |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
margin: 0 10px; |
|
} |
|
div:last-child { |
|
cursor: pointer; |
|
transition: all 0.2s; |
|
&:hover { |
|
color: var(--primary-color); |
|
transform: scale(1.2); |
|
} |
|
} |
|
} |
|
.bottom { |
|
font-size: 16px; |
|
text-align: center; |
|
margin-top: 10px; |
|
color: var(--text-color); |
|
opacity: 0.65; |
|
} |
|
} |
|
.newa-panel { |
|
width: 100%; |
|
// height: 630px; |
|
background: var(--card-bg-color); |
|
backdrop-filter: blur(10px); |
|
box-shadow: 2px 6px 14px rgba(0, 0, 0, 0.25); |
|
border: 1px solid var(--border-color); |
|
margin-top: 20px; |
|
display: flex; |
|
flex-direction: column; |
|
align-items: center; |
|
border-radius: 20px; |
|
overflow: hidden; |
|
|
|
.tab { |
|
display: flex; |
|
justify-content: space-between; |
|
align-items: center; |
|
width: 90%; |
|
.item { |
|
width: 152px; |
|
height: 70px; |
|
border-radius: 10px; |
|
text-align: center; |
|
line-height: 70px; |
|
color: var(--text-color); |
|
font-size: 18px; |
|
background: var(--card-bg-color); |
|
border: 1px solid var(--border-color); |
|
cursor: pointer; |
|
transition: all 0.2s; |
|
margin-right: 48px; |
|
} |
|
.item:hover { |
|
transform: scale(1.1); |
|
background: var(--gradient-color); |
|
} |
|
.item:last-child { |
|
margin: 0; |
|
} |
|
.active { |
|
color: #fff; |
|
background: var(--primary-color); |
|
background: var(--gradient-color); |
|
} |
|
} |
|
.newa-main { |
|
width: 90%; |
|
// height: 465px; |
|
// padding: 58px 54px 19px 25px; |
|
display: flex; |
|
align-items: center; |
|
justify-content: space-between; |
|
.left { |
|
width: 546px; |
|
height: 388px; |
|
background-color: #1f1f1f; |
|
border-radius: 15px; |
|
overflow: hidden; |
|
img { |
|
border-radius: 10px; |
|
} |
|
} |
|
.right { |
|
flex: 1; |
|
height: 388px; |
|
// margin-left: 89px; |
|
padding: 15px 0; |
|
|
|
&.full-width { |
|
margin-left: 0; |
|
width: 100%; |
|
} |
|
|
|
.title { |
|
font-size: 24px; |
|
font-weight: 600; |
|
color: var(--text-color); |
|
} |
|
.description { |
|
font-size: 14px; |
|
margin-top: 10px; |
|
color: var(--text-color); |
|
opacity: 0.65; |
|
} |
|
.newa-main-list { |
|
width: 100%; |
|
height: 270px; |
|
margin-top: 38px; |
|
ul { |
|
width: 100%; |
|
height: 100%; |
|
li { |
|
width: 100%; |
|
height: 65px; |
|
cursor: pointer; |
|
display: flex; |
|
align-items: center; |
|
justify-content: space-between; |
|
padding: 0 20px; |
|
border-bottom: 1px solid var(--border-color); |
|
border-radius: 8px; |
|
|
|
&:last-child { |
|
border-bottom: none; |
|
} |
|
|
|
&:hover { |
|
background-color: rgba(97, 247, 238, 0.1); |
|
} |
|
|
|
.time { |
|
font-size: 14px; |
|
color: var(--text-color); |
|
opacity: 0.45; |
|
} |
|
.info { |
|
position: relative; |
|
font-size: 14px; |
|
color: var(--text-color); |
|
flex: 1; |
|
margin-right: 20px; |
|
overflow: visible; |
|
-webkit-line-clamp: unset; |
|
-webkit-box-orient: unset; |
|
overflow: hidden; |
|
text-overflow: ellipsis; |
|
display: -webkit-box; |
|
-webkit-line-clamp: 1; |
|
-webkit-box-orient: vertical; |
|
|
|
&:hover { |
|
color: var(--primary-color); |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
.light-blue-news { |
|
display: flex; |
|
justify-content: center; |
|
flex-direction: column; |
|
align-items: center; |
|
.newa-panel { |
|
width: 1110px; |
|
height: auto !important; |
|
border: none; |
|
box-shadow: none; |
|
.newa-main { |
|
width: 100% !important; |
|
height: auto !important; |
|
} |
|
} |
|
.tab { |
|
.item { |
|
width: 152px; |
|
height: 70px; |
|
border-radius: 8px; |
|
margin-right: 48px; |
|
border: none; |
|
box-shadow: 0.01042rem 0.03125rem 0.07292rem rgba(0, 0, 0, 0.25); |
|
} |
|
} |
|
.newa-main { |
|
padding: 0 !important; |
|
.right { |
|
height: auto !important; |
|
|
|
.title { |
|
display: none !important; |
|
} |
|
margin-left: 0 !important; |
|
.newa-main-list { |
|
height: auto !important; |
|
|
|
// overflow: hidden !important; |
|
ul { |
|
display: flex; |
|
flex-wrap: wrap; |
|
li { |
|
padding: 0 !important; |
|
flex-direction: column !important; |
|
align-items: start !important; |
|
// box-shadow: 0.01042rem 0.03125rem 0.07292rem rgba(0, 0, 0, 0.25); |
|
border: none !important; |
|
justify-content: start !important; |
|
width: 350px !important; |
|
height: 358px !important; |
|
transition: all 0.2s !important; |
|
.img { |
|
width: 100%; |
|
height: 200px; |
|
// height: 100%; |
|
img { |
|
width: 100%; |
|
height: 100%; |
|
} |
|
} |
|
.info { |
|
width: 50%; |
|
margin-top: 10px; |
|
color: #292d33; |
|
height: 50px; |
|
font-size: 18px !important; |
|
font-weight: 600 !important; |
|
// height: 30px !important; |
|
flex: none !important; |
|
padding: 0 10px; |
|
overflow: visible; |
|
-webkit-line-clamp: unset; |
|
-webkit-box-orient: unset; |
|
overflow: hidden; |
|
text-overflow: ellipsis; |
|
display: -webkit-box; |
|
-webkit-line-clamp: 1; |
|
-webkit-box-orient: vertical; |
|
line-height: 25px; |
|
} |
|
.time { |
|
margin-top: 10px; |
|
padding: 0 10px; |
|
} |
|
&:not(:nth-child(3n)) { |
|
margin-right: 30px; |
|
} |
|
&:hover { |
|
background: #fff !important; |
|
transform: translateY(-5px) !important; |
|
box-shadow: 0px -4px 18px 1px rgba(0, 0, 0, 0.15); |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
.light-purple-news { |
|
display: flex; |
|
justify-content: center; |
|
flex-direction: column; |
|
align-items: center; |
|
.newa-panel { |
|
width: 1110px; |
|
height: auto !important; |
|
border: none; |
|
box-shadow: none; |
|
.newa-main { |
|
width: 100% !important; |
|
height: auto !important; |
|
} |
|
} |
|
.tab { |
|
.item { |
|
width: 152px; |
|
height: 70px; |
|
border-radius: 8px; |
|
margin-right: 48px; |
|
border: none; |
|
box-shadow: 0.01042rem 0.03125rem 0.07292rem rgba(0, 0, 0, 0.25); |
|
} |
|
} |
|
.newa-main { |
|
padding: 0 !important; |
|
.right { |
|
height: auto !important; |
|
.title { |
|
display: none !important; |
|
} |
|
margin-left: 0 !important; |
|
.newa-main-list { |
|
height: auto !important; |
|
ul { |
|
display: flex; |
|
flex-wrap: wrap; |
|
li { |
|
padding: 0 !important; |
|
flex-direction: column !important; |
|
align-items: start !important; |
|
border: none !important; |
|
justify-content: start !important; |
|
width: 350px !important; |
|
height: 358px !important; |
|
transition: all 0.2s !important; |
|
.img { |
|
width: 100%; |
|
height: 200px; |
|
img { |
|
width: 100%; |
|
height: 100%; |
|
} |
|
} |
|
.info { |
|
margin-top: 10px; |
|
color: #292d33; |
|
height: 50px; |
|
font-size: 18px !important; |
|
font-weight: 600 !important; |
|
flex: none !important; |
|
padding: 0 10px; |
|
overflow: hidden; |
|
text-overflow: ellipsis; |
|
display: -webkit-box; |
|
-webkit-line-clamp: 2; |
|
-webkit-box-orient: vertical; |
|
line-height: 25px; |
|
} |
|
.time { |
|
margin-top: 10px; |
|
padding: 0 10px; |
|
} |
|
&:not(:nth-child(3n)) { |
|
margin-right: 30px; |
|
} |
|
&:hover { |
|
background: #fff !important; |
|
transform: translateY(-5px) !important; |
|
box-shadow: 0px -4px 18px 1px rgba(0, 0, 0, 0.15); |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
.signup-section { |
|
padding: 40px 0; |
|
background-color: var(--card-bg-color); |
|
border-radius: 12px; |
|
margin: 20px 0; |
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); |
|
transition: all 0.3s; |
|
|
|
.signup-content { |
|
display: flex; |
|
align-items: center; |
|
justify-content: space-between; |
|
padding: 0 40px; |
|
gap: 40px; |
|
|
|
.signup-text { |
|
flex: 1; |
|
text-align: left; |
|
|
|
h2 { |
|
font-size: 28px; |
|
color: var(--text-color); |
|
margin-bottom: 16px; |
|
font-weight: 600; |
|
} |
|
|
|
p { |
|
font-size: 16px; |
|
color: var(--text-color); |
|
opacity: 0.8; |
|
margin-bottom: 24px; |
|
line-height: 1.6; |
|
} |
|
|
|
.signup-button { |
|
display: inline-block; |
|
padding: 12px 32px; |
|
background: var(--gradient-color); |
|
color: white; |
|
border-radius: 25px; |
|
font-size: 16px; |
|
font-weight: 500; |
|
text-decoration: none; |
|
transition: all 0.3s; |
|
border: none; |
|
cursor: pointer; |
|
|
|
&:hover { |
|
transform: translateY(-2px); |
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); |
|
} |
|
} |
|
} |
|
|
|
.signup-image { |
|
flex: 1; |
|
max-width: 500px; |
|
height: 300px; |
|
border-radius: 8px; |
|
overflow: hidden; |
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); |
|
|
|
img { |
|
width: 100%; |
|
height: 100%; |
|
object-fit: cover; |
|
transition: transform 0.3s; |
|
|
|
&:hover { |
|
transform: scale(1.05); |
|
} |
|
} |
|
} |
|
} |
|
|
|
&:hover { |
|
transform: translateY(-5px); |
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); |
|
} |
|
} |
|
|
|
// 在暗黑主题下调整样式 |
|
:deep(.dark) { |
|
.signup-section { |
|
background-color: var(--card-bg-color); |
|
border: 1px solid var(--border-color); |
|
|
|
.signup-content { |
|
.signup-text { |
|
h2 { |
|
color: var(--text-color); |
|
} |
|
p { |
|
color: var(--text-color); |
|
} |
|
} |
|
} |
|
} |
|
} |
|
.content { |
|
width: 100%; |
|
// left: -240px; |
|
position: relative; |
|
height: 244px; |
|
background-color: #185cff; |
|
display: flex; |
|
justify-content: center; |
|
ul { |
|
width: 1420px; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
li { |
|
width: 25%; |
|
color: #fff; |
|
display: flex; |
|
flex-direction: column; |
|
align-items: center; |
|
.title { |
|
font-size: 40px; |
|
font-weight: 600; |
|
} |
|
.description { |
|
font-size: 16px; |
|
margin-top: 20px; |
|
} |
|
&:not(:last-child) { |
|
border-right: 1px solid #ffffff44; |
|
} |
|
} |
|
} |
|
} |
|
</style>
|
|
|