From 4ef3d1053d37de62ed7c097fb4b74434f6e67f23 Mon Sep 17 00:00:00 2001
From: zuozhengqing <a13193816592@163.com>
Date: 星期六, 23 九月 2023 15:46:17 +0800
Subject: [PATCH] “样式优化,组件拆分”
---
src/components/carouselImg/carouselImg.vue | 144 ++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 144 insertions(+), 0 deletions(-)
diff --git a/src/components/carouselImg/carouselImg.vue b/src/components/carouselImg/carouselImg.vue
new file mode 100644
index 0000000..15ca809
--- /dev/null
+++ b/src/components/carouselImg/carouselImg.vue
@@ -0,0 +1,144 @@
+<!-- 杞挱鍥� -->
+<template>
+ <div>
+ <div class="banner">
+ <div class="block" style="width: 100%">
+ <el-carousel trigger="click" height="650px">
+ <el-carousel-item v-for="(item, index) in bannerImgs" :key="index">
+ <div
+ class="banner_img"
+ :style="item.style"
+ style="width: 100%; height: 650px"
+ >
+ <div class="banner_center">
+ <h2>{{ item.title1 }}</h2>
+ <h3 :style="{ color: item.style.color }">
+ {{ item.title2 }}
+ </h3>
+ <div class="button">
+ <span class="go">绔嬪嵆璐拱</span>
+ <span>> ></span>
+ <!-- <span class="cry">鐢宠浣跨敤</span> -->
+ </div>
+ </div>
+ </div>
+ </el-carousel-item>
+ </el-carousel>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+export default {
+ props: {},
+ data() {
+ return {
+ bannerImgs: [
+ {
+ style: {
+ backgroundImage:
+ "url(" +
+ require("../../../public/image/home/bannerImg/banner1.png") +
+ ")",
+ backgroundRepeat: "no-repeat",
+ color: "#000000",
+ },
+ title1: "SmartAI鏅烘収宸ュ巶绯荤粺",
+ title2:
+ "瀹炵幇鐢熶骇娴佺▼鐨勮嚜鍔ㄤ紭鍖栵紝璧嬭兘浼佷笟蹇�熷疄鐜版櫤鑳藉寲鏀归�狅紝鏁板瓧璧嬭兘浼佷笟鐢熶骇鑷姩鍖栧彧鑳藉寲鏀归�犲崌绾э紝鎶㈡姄鏂版棫鍔ㄨ兘杞崲閲嶅ぇ宸ョ▼鏈洪亣锛屽姞蹇敓浜у埗閫犵殑鑷姩鍖栥�佹櫤鑳藉寲寤鸿",
+ info: "绔嬪嵆鎶㈣喘",
+ },
+ {
+ style: {
+ backgroundImage:
+ "url(" +
+ require("../../../public/image/home/bannerImg/banner2.png") +
+ ")",
+ backgroundRepeat: "no-repeat",
+ color: "#ffffff",
+ },
+ title1: "WMS鏅鸿兘浠撳偍绠＄悊绯荤粺",
+ title2: "婊¤冻涓嶅悓琛屼笟涓嶅悓缁忚惀妯″紡鐨勬櫤鑳戒粨鍌ㄧ鐞嗙郴缁�",
+ info: "绔嬪嵆鎶㈣喘",
+ },
+ {
+ style: {
+ backgroundImage:
+ "url(" +
+ require("../../../public/image/home/bannerImg/banner3.png") +
+ ")",
+ backgroundRepeat: "no-repeat",
+ color: "#000000",
+ },
+ title1: "涓�绔欏紡鍏ㄨ涓氭暟鏅哄瀷CRM",
+ title2: "璧嬭兘鍚勮涓氬疄鐜颁竴浣撳寲鏁板瓧鍖栬浆鍨�",
+ info: "绔嬪嵆浣撻獙",
+ },
+ ],
+ };
+ },
+ computed: {},
+ created() {},
+ mounted() {},
+ watch: {},
+ methods: {},
+ components: {},
+};
+</script>
+
+<style scoped lang="scss">
+::v-deep .el-carousel__button {
+ background: #ccc;
+ height: 5px;
+}
+::v-deep .is-active .el-carousel__button{
+ background: #ff680d;
+}
+::v-deep .el-carousel{
+ position: relative;
+}
+::v-deep .el-carousel__indicators {
+ position: absolute;
+ left: 13%;
+ top: 500px;
+ margin-left: 50px;
+}
+.banner {
+ position: relative;
+ width: 100%;
+ height: 650px;
+ .block {
+ width: 100%;
+ .banner_img {
+ width: 100%;
+ height: 650px;
+ background-size: cover;
+ background-position: center center;
+ background-repeat: no-repeat;
+ .banner_center {
+ width: 600px;
+ padding-top: 200px;
+ padding-left: 13%;
+ h2 {
+ font-size: 40px;
+ font-weight: normal;
+ margin: 0;
+ }
+ h3 {
+ width: 630px;
+ font-size: 14px;
+ line-height: 23px;
+ color: rgba(0, 0, 0, 0.9);
+ font-weight: 500;
+ overflow: hidden;
+ }
+ .button {
+ color: #ff680d;
+ cursor: pointer;
+ }
+ }
+ }
+ }
+}
+</style>
--
Gitblit v1.8.0