|
- <template>
- <div>
- <el-carousel >
- <el-carousel-item v-for="(item, index) in carouselList" :key="index" :style="{ backgroundImage: `url(${item.src})` }">
- <div id="txt">
- <a class="title">{{ item.title }}</a>
- <a class="subtitle">{{ item.subtitle }}</a>
- </div>
- </el-carousel-item>
- </el-carousel>
- <div id="hot">
- <div class="content">
- <div class="list">
- <h2>强不强?吉利银河E8全景智慧座舱揭秘</h2>
- <div class="date">发布日期:2023/01/02</div>
- <p>同样引人注目。近日,2024款福特电马激情上市,共推出5款车型,官方指导价23.98万元-35.98万元得不提帝豪家族竞争力长</p>
- <img src="/jl.png">
- <p>在这块大屏内部,吉利银河还专门针对不少App进行了适配,本次我们体验了狂野飙车、雷石KTV以及爱奇艺视频。前两者可以占据整个屏</p>
- </div>
- <div class="right">
- <div class="rtop">
- <div class="title">
- <a>热点新闻</a>
- </div>
- <div class="nav" v-for="(item,index) in news" :key="index">
- <img :src="item.img">
- <a>{{ item.txt }}</a>
- </div>
- </div>
- <div class="rbottom">
- <div class="title">
- <a>相关视频</a>
- </div>
- <div class="nav rtmnav" v-for="(item,index) in videos" :key="index">
- <img :src="item.img">
- <a>{{ item.txt }}</a>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </template>
- <script>
- export default {
- name: 'home',
- data () {
- return {
- carouselList: [
- { src: '/car1.png', title: '吉利11月销量再刷新纪录,新能源转型成效凸显', subtitle: '国际汽车企业如果现在一旦脱离了中国市场,再想回来就不可能了。必须了解这个发展的趋势,只有参与才有机会。' },
- { src: '/car2.png', title: '吉利11月销量再刷新纪录,新能源转型成效凸显', subtitle: '国际汽车企业如果现在一旦脱离了中国市场,再想回来就不可能了。必须了解这个发展的趋势,只有参与才有机会。' }
- ],
- articleList: [
- {
- img: '/airtlc.png',
- title: '强不强?吉利银河E8全景智慧座舱揭秘',
- content: '同样引人注目。近日,2024款福特电马激情上市,共推出5款车型,官方指导价23.98万元-35.98万元得不提帝豪家族竞争力长',
- date: '2023/01/02'
- },
- {
- img: '/airtlc.png',
- title: '强不强?吉利银河E8全景智慧座舱揭秘',
- content: '同样引人注目。近日,2024款福特电马激情上市,共推出5款车型,官方指导价23.98万元-35.98万元得不提帝豪家族竞争力长',
- date: '2023/01/02'
- },
- {
- img: '/airtlc.png',
- title: '强不强?吉利银河E8全景智慧座舱揭秘',
- content: '同样引人注目。近日,2024款福特电马激情上市,共推出5款车型,官方指导价23.98万元-35.98万元得不提帝豪家族竞争力长',
- date: '2023/01/02'
- }
- ],
- news: [
- {
- img: '/car.png',
- txt: '银河E8全景智慧座舱揭秘银河E8'
- },
- {
- img: '/car.png',
- txt: '银河E8全景智慧座舱揭秘银河E8'
- },
- {
- img: '/car.png',
- txt: '银河E8全景智慧座舱揭秘银河E8'
- }
- ],
- videos: [
- {
- img: '/car.png',
- txt: '银河E8全景智慧座舱揭秘银河E8'
- },
- {
- img: '/car.png',
- txt: '银河E8全景智慧座舱揭秘银河E8'
- },
- {
- img: '/car.png',
- txt: '银河E8全景智慧座舱揭秘银河E8'
- }
- ]
- }
- },
- components: {
- }
- }
- </script>
- <style lang="scss" scoped>
- .el-carousel__item{
- background-size: 100%;
- background-repeat: no-repeat;
- display: flex;
- justify-content: center;
- align-items: flex-end;
- #txt {
- display: flex;
- flex-direction: column;
- margin-bottom: 50px;
- color: #FFFFFF;
- .title {
- font-size: 36px;
- font-weight: bold;
- text-align: center;
- margin-bottom: 15px;
-
- }
- .subtitle {
- font-size: 16px;
- font-weight: 400;
- opacity: 0.5;
- text-align: center;
- }
- }
- }
- #hot {
- width: 100%;
- background: #F2F4F8;
- display: flex;
- justify-content: center;
- .content {
- width: 1200px;
- margin: 50px 0 50px 0;
- display: flex;
- justify-content: space-between;
- .list {
- padding: 30px;
- width: 820px;
- background-color: #FFFFFF;
- .article {
- display: flex;
- img {
- width: 200px;
- height: 150px;
- }
- .acontent {
- height: 150px;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- padding: 0 10px;
- margin-bottom: 20px;
- .txt {
- a {
- display: block;
- text-align: left;
- }
- }
- .title {
- font-size: 18px;
- font-weight: bold;
- color: #000000;
- line-height: 48px;
- }
- .content {
- font-size: 14px;
- font-weight: 400;
- color: #000000;
- line-height: 24px;
- }
- .date {
- font-size: 14px;
- font-weight: 400;
- color: #7D8392;
- line-height: 30px;
- text-align: left;
- }
- }
- .acontent:not(:last-child) {
- margin-bottom: 0px;
- }
- }
- }
- .right {
- width: 300px;
- display: flex;
- justify-content: space-between;
- flex-direction: column;
- .rtop, .rbottom {
- background-color: #FFFFFF;
- width: 100%;
- margin-bottom: 20px;
- .title {
- background-image: url('../../assets/airtlctl.png');
- background-position: 0 0; /* 调整这些值来改变显示的部分 */
- background-size: 30% 100%; /* 使用 'cover' 或 'contain',或者设置具体尺寸 */
- background-repeat: no-repeat;
- a {
- font-size: 20px;
- font-weight: bold;
- color: #000000;
- line-height: 48px;
- width: 100%;
- text-align: left;
- display: inline-block;
- margin-left: 40px;
- }
- }
- .nav {
- display: flex;
- flex-direction: column;
- align-items: center;
- margin: 10px 0 10px 0;
- img {
- width: 240px;
- height: 180px;
- position: relative;
- }
- a {
- font-size: 16px;
- font-weight: 400;
- color: #000000;
- line-height: 48px;
- }
- }
- .rtmnav {
- img::after {
- content: '';
- z-index: 99;
- width: 67px;
- height: 67px;
- position: absolute;
- background-image: url('../../assets/play.png');
- // background-position: 101% 0; /* 调整这些值来改变显示的部分 */
- // background-size: 12% 50%; /* 使用 'cover' 或 'contain',或者设置具体尺寸 */
- background-repeat: no-repeat;
- }
- }
- }
- }
- }
- }
-
- .el-pagination.is-background .el-pager li:not(.disabled).active {
- background-color: #07CAAF;
- }
- </style>
|