From f20a554bdb24e9dfde9dc6a69d78595944f61d15 Mon Sep 17 00:00:00 2001
From: mark <mark18340872469@163.com>
Date: 星期二, 25 十月 2022 14:53:57 +0800
Subject: [PATCH] 设备管理 样式调整
---
src/views/index/components/banner.vue | 43 +++++++++++++++++++++++++++++++------------
1 files changed, 31 insertions(+), 12 deletions(-)
diff --git a/src/views/index/components/banner.vue b/src/views/index/components/banner.vue
index 6641f50..b2c8337 100644
--- a/src/views/index/components/banner.vue
+++ b/src/views/index/components/banner.vue
@@ -1,23 +1,17 @@
<template>
<div class="banner">
- <el-carousel
- trigger="click"
- height="546px"
- :autoplay="false"
- arrow="never"
- ref="banner"
- >
+ <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(' + (item.pic ? item.pic : baseImg) + ')',
+ backgroundImage: 'url(' + getUrl(item.pic) + ')',
backgroundSize: '100% 100%',
backgroundRepeat: 'no-repeat',
}"
>
- <div class="banner_text" v-html="item.name"></div>
+ <!-- <div class="banner_text" v-html="item.name"></div> -->
</div>
<div class="link"></div>
</el-carousel-item>
@@ -40,6 +34,21 @@
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;
+ },
},
};
</script>
@@ -47,17 +56,27 @@
<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%;
- padding: 183px 0 0 0;
-
+ overflow: hidden;
.banner_text {
margin: 0 auto;
+ margin-top: 183px;
width: 1280px;
color: #fff;
}
--
Gitblit v1.8.0