From f7f0e44c4be8eb0e77fd310296c3b43bde21e4f9 Mon Sep 17 00:00:00 2001
From: ZZJ <10913410+zzj2100@user.noreply.gitee.com>
Date: 星期四, 23 六月 2022 14:17:01 +0800
Subject: [PATCH] 新增联动场景
---
src/views/index/components/banner.vue | 59 +++++++++++++++++++++++++++++++++++------------------------
1 files changed, 35 insertions(+), 24 deletions(-)
diff --git a/src/views/index/components/banner.vue b/src/views/index/components/banner.vue
index b42ef3a..2262857 100644
--- a/src/views/index/components/banner.vue
+++ b/src/views/index/components/banner.vue
@@ -7,14 +7,19 @@
arrow="never"
ref="banner"
>
- <el-carousel-item v-for="item in 4" :key="item">
- <div class="banner_content">
- <div class="banner_text">
- <div class="banner_title_en">SmartAI</div>
- <div class="banner_title_zh">浜哄伐鏅鸿兘鎿嶄綔绯荤粺</div>
- <div class="banner_des">涓鸿涓氬鎴烽噺韬墦閫犵殑浼佷笟绾I鎿嶄綔绯荤粺</div>
- </div>
+ <el-carousel-item v-for="(item, index) in bannerList" :key="index">
+ <div
+ class="banner_content"
+ :style="{
+ // backgroundImage: 'url(' + baseImg + ')',
+ backgroundImage: 'url(' + getUrl(item.pic) + ')',
+ backgroundSize: '100% 100%',
+ backgroundRepeat: 'no-repeat',
+ }"
+ >
+ <div class="banner_text" v-html="item.name"></div>
</div>
+ <div class="link"></div>
</el-carousel-item>
</el-carousel>
</div>
@@ -23,9 +28,32 @@
<script>
export default {
name: "Banner",
+ props: {
+ bannerList: {},
+ },
+ data() {
+ return {
+ baseImg: "/images/index/banner.png",
+ };
+ },
methods: {
toggleBanner(i) {
this.$refs["banner"].setActiveItem(i);
+ },
+ getUrl(url) {
+ let result = "";
+
+ if (!url) {
+ result = this.baseImg;
+ return result;
+ }
+ var reg = /^[0-9]/;
+ if (reg.test(url)) {
+ result = "http://" + url;
+ return result;
+ }
+
+ return url;
},
},
};
@@ -41,29 +69,12 @@
top: -62px;
.banner_content {
height: 100%;
- background-image: url("/images/index/banner.png");
padding: 183px 0 0 0;
.banner_text {
margin: 0 auto;
width: 1280px;
color: #fff;
-
- .banner_title_en {
- font-size: 24px;
- line-height: 60px;
- }
-
- .banner_title_zh {
- font-size: 36px;
- font-weight: 700;
- line-height: 48px;
- }
-
- .banner_des {
- font-size: 14px;
- line-height: 60px;
- }
}
}
--
Gitblit v1.8.0