From 6ef2ac92c0d3f79b59b8698274918df830b58b29 Mon Sep 17 00:00:00 2001 From: ZZJ <10913410+zzj2100@user.noreply.gitee.com> Date: 星期四, 28 七月 2022 10:20:24 +0800 Subject: [PATCH] 禅道bug --- src/views/index/components/banner.vue | 83 ++++++++++++++++++++++++----------------- 1 files changed, 49 insertions(+), 34 deletions(-) diff --git a/src/views/index/components/banner.vue b/src/views/index/components/banner.vue index b42ef3a..b2c8337 100644 --- a/src/views/index/components/banner.vue +++ b/src/views/index/components/banner.vue @@ -1,20 +1,19 @@ <template> <div class="banner"> - <el-carousel - trigger="click" - height="546px" - :autoplay="false" - 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 trigger="click" :autoplay="false" arrow="never" ref="banner"> + <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 +22,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 = "/httpImage/" + url; + return result; + } + + return url; }, }, }; @@ -34,36 +56,29 @@ <style lang="scss" scoped> .banner { position: relative; - height: 546px; + height: 28.18vw; + min-height: 369px; width: 100%; min-width: 1280px; z-index: -1; top: -62px; + + .el-carousel ::v-deep { + height: 100%; + + .el-carousel__container { + height: 100%; + } + } + .banner_content { height: 100%; - background-image: url("/images/index/banner.png"); - padding: 183px 0 0 0; - + overflow: hidden; .banner_text { margin: 0 auto; + margin-top: 183px; 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