dengjie commit : 轮播图修改样式

2022-10-03 17:28:30 +08:00
parent 6f398077e5
commit b8e3653069
3 changed files with 218 additions and 120 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -1786,12 +1786,50 @@
          "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
          "dev": true
        },
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
        "big.js": {
          "version": "3.2.0",
          "resolved": "https://registry.npmjs.org/big.js/-/big.js-3.2.0.tgz",
          "integrity": "sha512-+hN/Zh2D08Mx65pZ/4g5bsmNiZUuChDiQfTUQ7qJr4/kuopCr88xZsAXv6mBoZEsUI4OuGHlX59qE94K2mMW8Q==",
          "dev": true
        },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true,
+          "optional": true
+        },
        "css-select": {
          "version": "4.2.1",
          "resolved": "https://registry.npmjs.org/css-select/-/css-select-4.2.1.tgz",
@@ -1845,6 +1883,13 @@
          "integrity": "sha1-TapNnbAPmBmIDHn6RXrlsJof04k=",
          "dev": true
        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true,
+          "optional": true
+        },
        "html-webpack-plugin": {
          "version": "3.2.0",
          "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-3.2.0.tgz",
@@ -1928,6 +1973,16 @@
            "ansi-regex": "^2.0.0"
          }
        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        },
        "util.promisify": {
          "version": "1.0.0",
          "resolved": "https://registry.npmjs.org/util.promisify/-/util.promisify-1.0.0.tgz",
@@ -1937,6 +1992,53 @@
            "define-properties": "^1.1.2",
            "object.getownpropertydescriptors": "^2.0.3"
          }
+        },
+        "vue-loader-v16": {
+          "version": "npm:vue-loader@16.8.3",
+          "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.8.3.tgz",
+          "integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "chalk": "^4.1.0",
+            "hash-sum": "^2.0.0",
+            "loader-utils": "^2.0.0"
+          },
+          "dependencies": {
+            "big.js": {
+              "version": "5.2.2",
+              "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
+              "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
+              "dev": true,
+              "optional": true
+            },
+            "emojis-list": {
+              "version": "3.0.0",
+              "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
+              "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
+              "dev": true,
+              "optional": true
+            },
+            "json5": {
+              "version": "2.2.1",
+              "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.1.tgz",
+              "integrity": "sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==",
+              "dev": true,
+              "optional": true
+            },
+            "loader-utils": {
+              "version": "2.0.2",
+              "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.2.tgz",
+              "integrity": "sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==",
+              "dev": true,
+              "optional": true,
+              "requires": {
+                "big.js": "^5.2.2",
+                "emojis-list": "^3.0.0",
+                "json5": "^2.1.2"
+              }
+            }
+          }
        }
      }
    },
@@ -12262,87 +12364,6 @@
        }
      }
    },
-    "vue-loader-v16": {
-      "version": "npm:vue-loader@16.8.3",
-      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.8.3.tgz",
-      "integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "chalk": "^4.1.0",
-        "hash-sum": "^2.0.0",
-        "loader-utils": "^2.0.0"
-      },
-      "dependencies": {
-        "ansi-styles": {
-          "version": "4.3.0",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
-        "chalk": {
-          "version": "4.1.2",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "color-convert": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "color-name": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-          "dev": true,
-          "optional": true
-        },
-        "has-flag": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-          "dev": true,
-          "optional": true
-        },
-        "loader-utils": {
-          "version": "2.0.2",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.2.tgz",
-          "integrity": "sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^3.0.0",
-            "json5": "^2.1.2"
-          }
-        },
-        "supports-color": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        }
-      }
-    },
    "vue-router": {
      "version": "3.5.3",
      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.5.3.tgz",
--- a/src/views/index/components/carousel.vue
+++ b/src/views/index/components/carousel.vue
@@ -1,15 +1,93 @@
 <template>
-  <div style="width: 1000px; height: 1000px; background-color:red; font-size: 100px; color: white">
-    轮播
-  </div>
+  <el-row>
+    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
+      <div class="slideshow">
+        <el-carousel trigger="click" height="38vw">
+          <el-carousel-item v-for="(item,index) in bannerDate" :key="index">
+            <div v-show="$i18n.locale  === 'cn'" @click="clickTo(item.link)">
+              <img :src="item.imgurl" alt="">
+<!--              <div class="bottom_title">-->
+<!--                <el-row>-->
+<!--                  <el-col :offset="2" :span="18">-->
+<!--                    {{ item.title }}-->
+<!--                  </el-col>-->
+<!--                </el-row>-->
+<!--              </div>-->
+            </div>
+            <div v-show="$i18n.locale  === 'en'" @click="clickTo(item.enLink)">
+              <img :src="item.imgurl" alt="">
+<!--              <div class="bottom_title">-->
+<!--                <el-row>-->
+<!--                  <el-col :offset="2" :span="18">-->
+<!--                    {{ item.enTitle }}-->
+<!--                  </el-col>-->
+<!--                </el-row>-->
+<!--              </div>-->
+            </div>
+          </el-carousel-item>
+        </el-carousel>
+      </div>
+    </el-col>
+  </el-row>
 </template>

 <script>
+import {banner} from "@/api";
+
 export default {
-  name: "shuffling"
+  name: "carousel",
+  data() {
+    return {
+      bannerDate: [],
+    }
+  },
+  created() {
+    this.getBanner()
+  },
+  methods: {
+    clickTo(link) {
+      //console.log(link)
+      window.location.href = link;//当前标签页
+    },
+    getBanner() {
+      banner("NEd5n92EMIpyyBslaNqsRgE").then(res => {
+        this.bannerDate = res.data
+      })
+    }
+  }
 }
 </script>

-<style scoped>
+<style scoped lang="scss">
+@import '../css/comment.css';
+
+.slideshow {
+  width: 100%;
+
+  .el-carousel__arrow {
+    top: 93%;
+    display: block;
+  }
+
+  .bottom_title {
+    z-index: 99;
+    width: 100%;
+    height: 3.6vw;
+    background: #1956BC;
+    opacity: 0.89;
+    position: absolute;
+    bottom: 0;
+    line-height: 3.6vw;
+    font-size: 2rem;
+    font-family: "微软雅黑";
+    font-weight: 400;
+    color: #FFFFFF;
+  }
+
+  img {
+    width: 100%;
+
+  }
+}

 </style>
--- a/src/views/index/components/news_center.vue
+++ b/src/views/index/components/news_center.vue
@@ -19,41 +19,40 @@
      </div>
    </div>

-
    <!--录播图-->
-    <el-row>
-      <el-col :xs="1" :sm="2" :md="2" :lg="3" :xl="5">
-        <div class="grid-content"></div>
-      </el-col>
-      <el-col :xs="22" :sm="20" :md="20" :lg="18" :xl="14">
-        <div class="slideshow">
-          <el-carousel trigger="click" height="23.3vw">
-            <el-carousel-item v-for="(item,index) in bannerDate" :key="index">
-              <div v-show="$i18n.locale  === 'cn'" @click="clickTo(item.link)">
-                <img :src="item.imgurl" alt="">
-                <div class="bottom_title">
-                  <el-row>
-                    <el-col :offset="2" :span="18">
-                      {{ item.title }}
-                    </el-col>
-                  </el-row>
-                </div>
-              </div>
-              <div v-show="$i18n.locale  === 'en'" @click="clickTo(item.enLink)">
-                <img :src="item.imgurl" alt="">
-                <div class="bottom_title">
-                  <el-row>
-                    <el-col :offset="2" :span="18">
-                      {{ item.enTitle }}
-                    </el-col>
-                  </el-row>
-                </div>
-              </div>
-            </el-carousel-item>
-          </el-carousel>
-        </div>
-      </el-col>
-    </el-row>
+<!--    <el-row>-->
+<!--      <el-col :xs="1" :sm="2" :md="2" :lg="3" :xl="5">-->
+<!--        <div class="grid-content"></div>-->
+<!--      </el-col>-->
+<!--      <el-col :xs="22" :sm="20" :md="20" :lg="18" :xl="14">-->
+<!--        <div class="slideshow">-->
+<!--          <el-carousel trigger="click" height="23.3vw">-->
+<!--            <el-carousel-item v-for="(item,index) in bannerDate" :key="index">-->
+<!--              <div v-show="$i18n.locale  === 'cn'" @click="clickTo(item.link)">-->
+<!--                <img :src="item.imgurl" alt="">-->
+<!--                <div class="bottom_title">-->
+<!--                  <el-row>-->
+<!--                    <el-col :offset="2" :span="18">-->
+<!--                      {{ item.title }}-->
+<!--                    </el-col>-->
+<!--                  </el-row>-->
+<!--                </div>-->
+<!--              </div>-->
+<!--              <div v-show="$i18n.locale  === 'en'" @click="clickTo(item.enLink)">-->
+<!--                <img :src="item.imgurl" alt="">-->
+<!--                <div class="bottom_title">-->
+<!--                  <el-row>-->
+<!--                    <el-col :offset="2" :span="18">-->
+<!--                      {{ item.enTitle }}-->
+<!--                    </el-col>-->
+<!--                  </el-row>-->
+<!--                </div>-->
+<!--              </div>-->
+<!--            </el-carousel-item>-->
+<!--          </el-carousel>-->
+<!--        </div>-->
+<!--      </el-col>-->
+<!--    </el-row>-->
    <!--轮播图下的新闻-->

    <el-row>