提交

1

package-lock.json

@@ -32,6 +32,7 @@
         "print-js": "^1.6.0",
         "qrcode.vue": "^3.3.3",
         "query-string": "^7.1.1",
+        "rgbaster": "^2.1.1",
         "swiper": "^8.2.4",
         "umi-request": "^1.4.0",
         "vant": "^3.5.2",
@@ -8884,6 +8885,11 @@
       "integrity": "sha512-V2hovdzFbOi77/WajaSMXk2OLm+xNIeQdMMuB7icj7bk6zi2F8GGAxigcnDFpJHbNyNcgyJDiP+8nOrY5cZGrA==",
       "dev": true
     },
+    "node_modules/rgbaster": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmmirror.com/rgbaster/-/rgbaster-2.1.1.tgz",
+      "integrity": "sha512-vUQI+ldMMSGXEbWtqb/6aqLY1LHc33OtXg2Q9S0TCxzt2KxGncRJB6dk860KzhWTjms+Fz4wkxrJu8MlCrFpYg=="
+    },
     "node_modules/rimraf": {
       "version": "3.0.2",
       "resolved": "https://registry.npmmirror.com/rimraf/-/rimraf-3.0.2.tgz",
@@ -17251,6 +17257,11 @@
       "integrity": "sha512-V2hovdzFbOi77/WajaSMXk2OLm+xNIeQdMMuB7icj7bk6zi2F8GGAxigcnDFpJHbNyNcgyJDiP+8nOrY5cZGrA==",
       "dev": true
     },
+    "rgbaster": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmmirror.com/rgbaster/-/rgbaster-2.1.1.tgz",
+      "integrity": "sha512-vUQI+ldMMSGXEbWtqb/6aqLY1LHc33OtXg2Q9S0TCxzt2KxGncRJB6dk860KzhWTjms+Fz4wkxrJu8MlCrFpYg=="
+    },
     "rimraf": {
       "version": "3.0.2",
       "resolved": "https://registry.npmmirror.com/rimraf/-/rimraf-3.0.2.tgz",

package.json

@@ -44,6 +44,7 @@
     "print-js": "^1.6.0",
     "qrcode.vue": "^3.3.3",
     "query-string": "^7.1.1",
+    "rgbaster": "^2.1.1",
     "swiper": "^8.2.4",
     "umi-request": "^1.4.0",
     "vant": "^3.5.2",

src/components/banner/index.module.less

@@ -1,14 +1,21 @@
 .mySwiper {
   cursor: pointer;
 }
-.bannerImg {
-  object-fit: cover;
-  height: 400px;
+.bannerWrap {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  .bannerImg {
+    max-width: 1920px;
+    object-fit: cover;
+    height: 400px;
+    margin: 0 auto;
+  }
 }
 
 :global {
   .bannerSwiper {
-
     .mySwiper {
       overflow: hidden;
       height: 400px;

src/components/banner/index.tsx

@@ -21,7 +21,7 @@ export default defineComponent({
   setup(props, conent) {
     const state = reactive({
       title: props.title,
-      modules: [Navigation, Pagination, Scrollbar, Autoplay,A11y ],
+      modules: [Navigation, Pagination, Scrollbar, Autoplay, A11y],
       bannerList: [],
       leftHover: false,
       rightHover: false
@@ -62,7 +62,7 @@ export default defineComponent({
             class={[classes.mySwiper, 'mySwiper']}
             slides-per-view={1}
             space-between={0}
-            pagination={{  clickable: true }}
+            pagination={{ clickable: true }}
             autoplay={{
               delay: 3000,
               disableOnInteraction: false,
@@ -70,7 +70,6 @@ export default defineComponent({
               pauseOnMouseEnter: true,
               reverseDirection: true
             }}
-
             navigation={{
               nextEl: '.myprev',
               prevEl: '.mynext'
@@ -83,14 +82,16 @@ export default defineComponent({
               return (
                 <>
                   <swiper-slide>
-                    <img
-                      src={item.coverImage}
-                      alt=""
-                      class={classes.bannerImg}
-                      onClick={() => {
-                        gotoBannerInfo(item)
-                      }}
-                    />
+                    <div class={classes.bannerWrap} style={{'background':item.background}}>
+                      <img
+                        src={item.coverImage}
+                        alt=""
+                        class={classes.bannerImg}
+                        onClick={() => {
+                          gotoBannerInfo(item)
+                        }}
+                      />
+                    </div>
                   </swiper-slide>
                 </>
               )

yarn.lock

@@ -2893,10 +2893,6 @@
   "resolved" "https://registry.npmmirror.com/es-module-lexer/-/es-module-lexer-0.9.3.tgz"
   "version" "0.9.3"
 
-"esbuild-darwin-64@0.13.15":
-  "integrity" "sha512-ihOQRGs2yyp7t5bArCwnvn2Atr6X4axqPpEdCFPVp7iUj4cVSdisgvEKdNR7yH3JDjW6aQDw40iQFoTqejqxvQ=="
-  "version" "0.13.15"
-
 "esbuild@^0.13.12":
   "integrity" "sha512-raCxt02HBKv8RJxE8vkTSCXGIyKHdEdGfUmiYb8wnabnaEmHzyW7DCHb5tEN0xU8ryqg5xw54mcwnYkC4x3AIw=="
   "version" "0.13.15"
@@ -3275,11 +3271,6 @@
   "resolved" "https://registry.npmmirror.com/fs.realpath/-/fs.realpath-1.0.0.tgz"
   "version" "1.0.0"
 
-"fsevents@~2.3.2":
-  "integrity" "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA=="
-  "resolved" "https://registry.npmmirror.com/fsevents/-/fsevents-2.3.2.tgz"
-  "version" "2.3.2"
-
 "function-bind@^1.1.1":
   "integrity" "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
   "resolved" "https://registry.npmmirror.com/function-bind/-/function-bind-1.1.1.tgz"
@@ -4989,6 +4980,11 @@
   "resolved" "https://registry.npmmirror.com/rfdc/-/rfdc-1.3.0.tgz"
   "version" "1.3.0"
 
+"rgbaster@^2.1.1":
+  "integrity" "sha512-vUQI+ldMMSGXEbWtqb/6aqLY1LHc33OtXg2Q9S0TCxzt2KxGncRJB6dk860KzhWTjms+Fz4wkxrJu8MlCrFpYg=="
+  "resolved" "https://registry.npmmirror.com/rgbaster/-/rgbaster-2.1.1.tgz"
+  "version" "2.1.1"
+
 "rimraf@^3.0.2":
   "integrity" "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA=="
   "resolved" "https://registry.npmmirror.com/rimraf/-/rimraf-3.0.2.tgz"