124 lines
2.8 KiB
Vue
124 lines
2.8 KiB
Vue
<template>
|
|
<div class="news-container">
|
|
<div class="news-header">
|
|
<img
|
|
src="@/assets/img/about/gameWeb_aboutP4_title.png"
|
|
alt="Logo"
|
|
class="news-logo"
|
|
/>
|
|
</div>
|
|
|
|
<div class="news-content">
|
|
<div class="news-item left">
|
|
<div class="news-left-img">
|
|
<img src="@/assets/img/about/gameWeb_aboutP4_news1.png" />
|
|
</div>
|
|
<div class="news-footer">
|
|
<a href="https://twitter.com/_CounterFire" target="_blank">More news follow our twitter>></a>
|
|
</div>
|
|
</div>
|
|
<div class="news-item right">
|
|
<div class="news-right-img-top">
|
|
<img class="gameWeb_aboutP4_deco" src="@/assets/img/about/gameWeb_aboutP4_deco.png" />
|
|
|
|
<img class="gameWeb_aboutP4_news2" src="@/assets/img/about/gameWeb_aboutP4_news2.png" />
|
|
</div>
|
|
<img class="gameWeb_aboutP4_news3" src="@/assets/img/about/gameWeb_aboutP4_news3.png" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
// Your Vue3 logic here.
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.news-container {
|
|
width: 100%;
|
|
height: 100%;
|
|
padding-top: 84px;
|
|
padding-left: 215px;
|
|
padding-right: 221px;
|
|
background-image: url("@/assets/img/about/gameWeb_aboutP4_bg1.png");
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
|
|
.news-header {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 11px;
|
|
margin-bottom: 20px;
|
|
|
|
.news-logo {
|
|
width: 569px; // Adjust as needed
|
|
height: 94px; // Adjust as needed
|
|
// margin-right: 10px;
|
|
}
|
|
}
|
|
|
|
.news-content {
|
|
display: flex;
|
|
gap: 45px;
|
|
|
|
.news-item {
|
|
// flex: 1;
|
|
|
|
&.left {
|
|
margin-left: 75px;
|
|
margin-top: 50px;
|
|
.news-left-img {
|
|
width: 636px;
|
|
height: 421px;
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.right {
|
|
// Additional styles specific to the right news item
|
|
.news-right-img-top{
|
|
display: flex;
|
|
gap: 14px;
|
|
margin-bottom: 14px;
|
|
|
|
}
|
|
.gameWeb_aboutP4_deco{
|
|
width: 106px;
|
|
height: 352px;
|
|
}
|
|
.gameWeb_aboutP4_news2{
|
|
width: 621px;
|
|
height: 400px;
|
|
}
|
|
.gameWeb_aboutP4_news3{
|
|
width: 622px;
|
|
height: 349px;
|
|
margin-top: -40px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.news-footer {
|
|
width: 603px;
|
|
height: 52px;
|
|
line-height: 52px;
|
|
margin-top: 80px;
|
|
text-align: left;
|
|
background-color: #ffc35b;
|
|
border-radius: 26px;
|
|
padding-left: 20px;
|
|
a {
|
|
font-size: 26px;
|
|
// font-family: "Poppins";
|
|
font-weight: 400;
|
|
color: #000;
|
|
// text-decoration: underline;
|
|
}
|
|
}
|
|
}
|
|
</style>
|