|
- <template>
- <div>
- <el-carousel height="590px">
- <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="top">
- <div id="videocar">
- <el-carousel :interval="5000" arrow="always" height="500px">
- <el-carousel-item v-for="item in 4" :key="item">
- <h3>{{ item }}</h3>
- </el-carousel-item>
- </el-carousel>
- </div>
- <div id="hottxt">
- <el-carousel :interval="5000" height="500px">
- <el-carousel-item v-for="item in hotList.right" :key="item.title">
- <div class="txtcontent">
- <div class="title">
- <img src="@/assets/tt.png">
- {{ item.title }}
- </div>
- <p class="content">{{ item.content }}</p>
- </div>
- <div class="btn">
- <el-button plain class="more" size="small">MORE</el-button>
- </div>
- </el-carousel-item>
- </el-carousel>
- </div>
- </div>
- <div class="bottom"/>
- </div>
- </div>
- <div id="daliay">
- <div class="content">
- <div class="top">
- <div class="yyzrbtxt">
- <div class="txtcontent">
- <img src="@/assets/rblogo.png" class="logo">
- <div class="title">
- {{ daliay.title }}
- </div>
- <p class="content">{{ daliay.content }}</p>
- </div>
- <div class="btn">
- <el-button plain class="more" size="small">MORE</el-button>
- </div>
- </div>
- <div class="yyzrbimg" />
- </div>
- <div class="bottom"/>
- </div>
- </div>
- <div id="wk">
- <el-button type="primary" class="wkbtn" size="medium">点击进入</el-button>
- </div>
- </div>
- </template>
- <script>
- export default {
- name: 'home',
- data () {
- return {
- carouselList: [
- { src: '/car1.png', title: '吉利11月销量再刷新纪录,新能源转型成效凸显', subtitle: '国际汽车企业如果现在一旦脱离了中国市场,再想回来就不可能了。必须了解这个发展的趋势,只有参与才有机会。' },
- { src: '/car2.png', title: '吉利11月销量再刷新纪录,新能源转型成效凸显', subtitle: '国际汽车企业如果现在一旦脱离了中国市场,再想回来就不可能了。必须了解这个发展的趋势,只有参与才有机会。' }
- ],
- hotList: {
- left: [],
- right: [
- {
- title: '蔚来汽车:不断扩张的换电“帝国”',
- content: '同样引人注目。近日,2024款福特电马激情上市,共推出5款车型,官方指导价23.98万元-35.98万元得不提帝豪家族竞争力长'
- },
- {
- title: '蔚来汽车:不断扩张的换电“帝国”11',
- content: '同样引人注目。近日,2024款福特电马激情上市,共推出5款车型,官方指导价23.98万元-35.98万元得不提帝豪家族竞争力长'
- }
- ]
- },
- daliay: {
- title: '不造车的华为,想成为车企离 不开的企业',
- content: '据外媒报道,三位知情人士透露,华为已向奥迪(Audi)和梅赛德斯-奔驰(Mercedes-Benz)询问是否有兴趣购买其智能汽'
- }
- }
- },
- 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, #daliay {
- width: 100%;
- height: 700px;
- background: #E3E5EA;
- display: flex;
- align-items: center;
- justify-content: center;
- .content {
- width: 60%;
- height: 90%;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- .top, .bottom {
- width: 100%;
- }
- .top {
- min-height: 470px;
- // background: black;
- display: flex;
- div {
- width: 50%;
- height: 100%;
- }
- .el-carousel {
- width: 100% !important;
- }
- #hottxt {
- background-image: url('../../assets/footer_left.png');
- background-position: 140% -165px; /* 调整这些值来改变显示的部分 */
- background-size: 140% 130%; /* 使用 'cover' 或 'contain',或者设置具体尺寸 */
- background-repeat: no-repeat;
- :deep .el-carousel__indicators--horizontal {
- left: 95%;
- }
- :deep .el-carousel__button {
- width: 5px;
- border-radius: 50%;
- height: 5px;
- }
- .el-carousel__item {
- display: flex;
- align-items: center;
- flex-direction: column;
- width: 100%;
- padding: 0 40px;
- .txtcontent {
- height: 50% !important;
- width:100%;
-
- .title {
- height: 26px;
- font-size: 26px;
- font-weight: bold;
- color: #FFFFFF;
- width: 100%;
- display: flex;
- align-items: center;
- img {
- margin-right: 10px;
- }
- }
- p {
- text-align: left;
- width: 85%;
- font-size: 16px;
- font-weight: 400;
- line-height: 30px;
- color: #ffffff83;
- }
- }
- .btn {
- height: 20%;
- width:100%;
- position: relative;
- .more {
- position: absolute;
- left: 0px;
- background: none !important;
- border: 1px solid #00F6BD;
- opacity: 0.8;
- border-radius: 4px;
- color: #00F6BD;
- }
- }
- }
- }
- }
- .bottom {
- min-height: 120px;
- background-image: url('../../assets/bottom.png');
- background-size: 100% 100%;
- }
- }
- }
- #daliay {
- background: #F2F4F8;
- .top {
- justify-content: space-between;
- .yyzrbtxt, .yyzrbimg{
- height: 100%;
- width: 47%;
- .txtcontent {
- width: 100%;
- height: 80% !important;
- text-align: left;
- .logo {
- margin-bottom: 30px;
- }
- .title {
- border-left: 7px solid #07CAAF;
- font-size: 36px;
- font-weight: bold;
- color: #0D1114;
- width: 90%;
- height: 79px;
- text-align: left;
- padding-left:30px;
-
- }
- .content {
- font-size: 16px;
- font-weight: 400;
- color: #0D1114;
- line-height: 30px;
- width: 100%;
- text-align: left;
- }
- }
- .btn {
- height: 20%;
- width:100%;
- position: relative;
- .more {
- position: absolute;
- left: 0px;
- background: none !important;
- border: 1px solid #000000;
- color: #0D1114;
- opacity: 0.8;
- border-radius: 4px;
- width: 80px;
- }
- }
- }
- .yyzrbimg {
- background-image: url('../../assets/yyzrb.png');
- background-size: 100% 100%;
- width: 50% !important;
- }
- }
- }
- #wk {
- background-image: url('../../assets/wk.png');
- width: 100%;
- height: 830px;
- background-size: 100% 100%;
- position: relative;
- .el-button--primary {
- width: 200px;
- height: 60px;
- background: #07CAAF;
- border-radius: 12px;
- border: none;
- font-size: 18px;
- font-weight: 400;
- color: #FFFFFF;
- position: absolute;
- top: 70%;
- left: 45%;
- }
- }
- </style>
|