后期修改完善,上线版本
This commit is contained in:
@ -7,8 +7,8 @@
|
||||
<div class="views-header flex-between-center">
|
||||
<div class="description">Keep up-to-date with the latest AI industry developments. This section provides daily news coverage, focusing on global breakthroughs, frontier research, market movements, and emerging trends across AI sectors.</div>
|
||||
</div>
|
||||
<div class="container flex justify-between">
|
||||
<div class="left-content flex flex-col">
|
||||
<div class="container">
|
||||
<div class="left-content flex flex-col" ref="leftContent">
|
||||
<div class="card preview-wrapper">
|
||||
<img :src="newConfig.imageUrl || ''" alt="" />
|
||||
</div>
|
||||
@ -16,26 +16,26 @@
|
||||
<NewsList />
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-content">
|
||||
<div class="right-content" ref="rightContent">
|
||||
<!--轮播图-->
|
||||
<div class="card swiper-box">
|
||||
<el-carousel :autoplay="false" height="140px">
|
||||
<el-carousel :autoplay="false">
|
||||
<el-carousel-item v-for="(item, i) in banner" :key="i">
|
||||
<img :src="item.imageUrl || ''" alt="" style="height: 140px; width: 100%;" />
|
||||
<img :src="item.imageUrl || ''" alt="" class="h-100" />
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
</div>
|
||||
<!--网站导航-->
|
||||
<div class="card pop-list">
|
||||
<div style="padding: 24px 4px">
|
||||
<div class="pad-24">
|
||||
<PopularToolList />
|
||||
</div>
|
||||
</div>
|
||||
<!--文章列表-->
|
||||
<div class="card">
|
||||
<div style="padding: 24px 4px">
|
||||
<div class="card flex-1">
|
||||
<div class="h-100 flex flex-col pad-24">
|
||||
<div class="clearfix">
|
||||
<img src="/logo/hot.png" :style="{marginRight: '6px'}" alt=""/>
|
||||
<img src="/logo/hot.png" alt=""/>
|
||||
Latest Article
|
||||
</div>
|
||||
<div class="list-scroll">
|
||||
@ -115,15 +115,24 @@ export default {
|
||||
await this.getModuleConfig();
|
||||
await this.getLatestArticleListData();
|
||||
this.fullscreenLoading = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.onLoad();
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.img-140 {
|
||||
height: 140px; width: 100%;
|
||||
}
|
||||
.pad-24 {
|
||||
padding: 24px 4px;
|
||||
}
|
||||
.h-100 {
|
||||
height: 100%;
|
||||
}
|
||||
.card {
|
||||
padding: 16px;
|
||||
background-color: #FFFFFF;
|
||||
@ -136,44 +145,58 @@ export default {
|
||||
overflow-y: auto;
|
||||
position: relative;
|
||||
.content {
|
||||
padding-top: 87px;
|
||||
padding-bottom: 120px;
|
||||
padding-top: 25px;
|
||||
padding-bottom: 100px;
|
||||
.gradient-title {
|
||||
font-family: 'Poppins-SemiBold', serif;
|
||||
font-family: 'Poppins-SemiBold';
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.views-title {
|
||||
font-family: 'Poppins-Bold', serif;
|
||||
font-family: 'Poppins-Bold';
|
||||
font-size: 40px;
|
||||
font-weight: 700;
|
||||
margin-top: 78px;
|
||||
margin-top: 25px;
|
||||
}
|
||||
.views-header {
|
||||
margin-top: 10px;
|
||||
.description {
|
||||
margin-right: 350px;
|
||||
font-family: 'Poppins-Medium', serif;
|
||||
font-family: 'Poppins-Medium';
|
||||
font-size: 18px;
|
||||
color: #64748B;
|
||||
}
|
||||
}
|
||||
.container {
|
||||
gap: 20px;
|
||||
margin-top: 114px;
|
||||
margin-top: 50px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 372px;
|
||||
align-items: start;
|
||||
grid-gap: 20px;
|
||||
|
||||
.right-content {
|
||||
width: 372px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
.list-scroll {
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
height: 1350px;
|
||||
|
||||
.card:last-child {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0;
|
||||
|
||||
.list-scroll {
|
||||
height: 1500px;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
}
|
||||
.swiper-box {
|
||||
height: 174px;
|
||||
::v-deep .el-carousel {
|
||||
.el-carousel__container {
|
||||
height: 142px;
|
||||
}
|
||||
.el-carousel__arrow {
|
||||
opacity: 0 !important;
|
||||
transition: none !important;
|
||||
@ -212,7 +235,10 @@ export default {
|
||||
align-items: center;
|
||||
font-size: $larg-font-size;
|
||||
font-weight: bold;
|
||||
font-family: 'Poppins-SemiBold', serif;
|
||||
font-family: 'Poppins-SemiBold';
|
||||
img {
|
||||
margin-right: 6px;
|
||||
}
|
||||
}
|
||||
.pop-list {
|
||||
.pop-item {
|
||||
@ -245,7 +271,7 @@ export default {
|
||||
}
|
||||
|
||||
.tool-name {
|
||||
font-family: 'Poppins-Medium', serif;
|
||||
font-family: 'Poppins-Medium';
|
||||
color: #64748B;
|
||||
}
|
||||
}
|
||||
@ -256,8 +282,7 @@ export default {
|
||||
}
|
||||
}
|
||||
.left-content {
|
||||
flex: 1;
|
||||
gap: 20px;
|
||||
height: 100%;
|
||||
.preview-wrapper {
|
||||
height: 320px;
|
||||
img {
|
||||
@ -270,7 +295,7 @@ export default {
|
||||
font-size: 30px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 30px;
|
||||
font-family: 'Poppins-SemiBold', serif;
|
||||
font-family: 'Poppins-SemiBold';
|
||||
color: #1E293B;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
Reference in New Issue
Block a user