From 8b4a828a625c15ff2259d4b5e4fb05c3ce38ac86 Mon Sep 17 00:00:00 2001
From: song <srf428110@163.com>
Date: Tue, 1 Mar 2022 18:56:24 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9B=BE=E7=89=87=E6=96=B0=E9=97=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                  |  59 ++++++++++
 package.json                       |   1 +
 src/components/Banner/Banner+.vue  | 169 +++++++++++++++++++++++++++++
 src/components/Banner/Banner.vue   | 103 ++++++++++++++++++
 src/views/FirstPages/FirstPage.vue |   5 +-
 yarn.lock                          |  20 ++++
 6 files changed, 356 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Banner/Banner+.vue
 create mode 100644 src/components/Banner/Banner.vue

diff --git a/package-lock.json b/package-lock.json
index d85a10c..f77c198 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,6 +17,7 @@
         "quill": "^1.3.7",
         "register-service-worker": "^1.7.1",
         "stylus": "^0.54.8",
+        "swiper": "^8.0.6",
         "vue": "^2.6.11",
         "vue-baidu-map": "^0.21.22",
         "vue-dompurify-html": "^2.5.0",
@@ -6254,6 +6255,14 @@
         }
       ]
     },
+    "node_modules/dom7": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/dom7/-/dom7-4.0.4.tgz",
+      "integrity": "sha512-DSSgBzQ4rJWQp1u6o+3FVwMNnT5bzQbMb+o31TjYYeRi05uAcpF8koxdfzeoe5ElzPmua7W7N28YJhF7iEKqIw==",
+      "dependencies": {
+        "ssr-window": "^4.0.0"
+      }
+    },
     "node_modules/domain-browser": {
       "version": "1.2.0",
       "resolved": "https://registry.npm.taobao.org/domain-browser/download/domain-browser-1.2.0.tgz",
@@ -13650,6 +13659,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/ssr-window": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-4.0.2.tgz",
+      "integrity": "sha512-ISv/Ch+ig7SOtw7G2+qkwfVASzazUnvlDTwypdLoPoySv+6MqlOV10VwPSE6EWkGjhW50lUmghPmpYZXMu/+AQ=="
+    },
     "node_modules/ssri": {
       "version": "6.0.1",
       "resolved": "https://registry.npm.taobao.org/ssri/download/ssri-6.0.1.tgz",
@@ -14388,6 +14402,29 @@
         "node": ">=4.0.0"
       }
     },
+    "node_modules/swiper": {
+      "version": "8.0.6",
+      "resolved": "https://registry.npmjs.org/swiper/-/swiper-8.0.6.tgz",
+      "integrity": "sha512-Ssyu1+FeNATF/G8e84QG+ZUNtUOAZ5vngdgxzczh0oWZPhGUVgkdv+BoePUuaCXLAFXnwVpNjgLIcGnxMdmWPA==",
+      "funding": [
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/swiperjs"
+        },
+        {
+          "type": "open_collective",
+          "url": "http://opencollective.com/swiper"
+        }
+      ],
+      "hasInstallScript": true,
+      "dependencies": {
+        "dom7": "^4.0.4",
+        "ssr-window": "^4.0.2"
+      },
+      "engines": {
+        "node": ">= 4.7.0"
+      }
+    },
     "node_modules/table": {
       "version": "5.4.6",
       "resolved": "https://registry.npm.taobao.org/table/download/table-5.4.6.tgz?cache=0&sync_timestamp=1599191046284&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ftable%2Fdownload%2Ftable-5.4.6.tgz",
@@ -21806,6 +21843,14 @@
         }
       }
     },
+    "dom7": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/dom7/-/dom7-4.0.4.tgz",
+      "integrity": "sha512-DSSgBzQ4rJWQp1u6o+3FVwMNnT5bzQbMb+o31TjYYeRi05uAcpF8koxdfzeoe5ElzPmua7W7N28YJhF7iEKqIw==",
+      "requires": {
+        "ssr-window": "^4.0.0"
+      }
+    },
     "domain-browser": {
       "version": "1.2.0",
       "resolved": "https://registry.npm.taobao.org/domain-browser/download/domain-browser-1.2.0.tgz",
@@ -27813,6 +27858,11 @@
         "tweetnacl": "~0.14.0"
       }
     },
+    "ssr-window": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-4.0.2.tgz",
+      "integrity": "sha512-ISv/Ch+ig7SOtw7G2+qkwfVASzazUnvlDTwypdLoPoySv+6MqlOV10VwPSE6EWkGjhW50lUmghPmpYZXMu/+AQ=="
+    },
     "ssri": {
       "version": "6.0.1",
       "resolved": "https://registry.npm.taobao.org/ssri/download/ssri-6.0.1.tgz",
@@ -28414,6 +28464,15 @@
         "util.promisify": "~1.0.0"
       }
     },
+    "swiper": {
+      "version": "8.0.6",
+      "resolved": "https://registry.npmjs.org/swiper/-/swiper-8.0.6.tgz",
+      "integrity": "sha512-Ssyu1+FeNATF/G8e84QG+ZUNtUOAZ5vngdgxzczh0oWZPhGUVgkdv+BoePUuaCXLAFXnwVpNjgLIcGnxMdmWPA==",
+      "requires": {
+        "dom7": "^4.0.4",
+        "ssr-window": "^4.0.2"
+      }
+    },
     "table": {
       "version": "5.4.6",
       "resolved": "https://registry.npm.taobao.org/table/download/table-5.4.6.tgz?cache=0&sync_timestamp=1599191046284&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ftable%2Fdownload%2Ftable-5.4.6.tgz",
diff --git a/package.json b/package.json
index d659861..d126144 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
     "quill": "^1.3.7",
     "register-service-worker": "^1.7.1",
     "stylus": "^0.54.8",
+    "swiper": "^8.0.6",
     "vue": "^2.6.11",
     "vue-baidu-map": "^0.21.22",
     "vue-dompurify-html": "^2.5.0",
diff --git a/src/components/Banner/Banner+.vue b/src/components/Banner/Banner+.vue
new file mode 100644
index 0000000..13ecbc7
--- /dev/null
+++ b/src/components/Banner/Banner+.vue
@@ -0,0 +1,169 @@
+<template>
+  <div class="box">
+    <div class="examples">
+      <div class="bannerBox">
+        <div class="swiper-container">
+          <div class="swiper-wrapper">
+            <div class="swiper-slide" v-for="(item,index) in ImgNews" :key="index">
+              <img :src="item.titleUrl" alt="">
+              <!-- <div class="rotation-div one-text">
+                {{ item.title }}
+              </div> -->
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="bannerIndex">
+        <span>{{bannerIndex}}</span>/4
+      </div>
+      <div class="tips">
+        <!-- <img src="./imgs/icon_tz.png" alt="" class="tipsImg"> -->
+        <p>请尽量保证上传的处方文字清晰可见，并保证红框内的信息完整不缺失</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Swiper from 'swiper';
+import 'swiper/swiper.min.css';
+export default {
+  props: {
+    ImgNews: {
+      type: Array,
+      default: []
+    }
+  },
+  data() {
+    return {
+      bannerIndex: 0,
+      banner: [
+        {
+          picture_txt: '手写的处方',
+          picture_path: 'https://kmyhl.oss-cn-shenzhen.aliyuncs.com/e-medicine/NEXw6KmWH5.png',
+        },
+        {
+          picture_txt: '机打的处方',
+          picture_path: 'https://kmyhl.oss-cn-shenzhen.aliyuncs.com/e-medicine/ZdXbcS77SK.png',
+        },
+        {
+          picture_txt: '机打的处方',
+          picture_path: 'https://kmyhl.oss-cn-shenzhen.aliyuncs.com/e-medicine/BKfxNfcHpH.png',
+        },
+        {
+          picture_txt: '机打的处方',
+          picture_path: 'https://kmyhl.oss-cn-shenzhen.aliyuncs.com/e-medicine/d3TNrsh75a.png'
+        },
+        {
+          picture_txt: '机打的处方',
+          picture_path: 'https://kmyhl.oss-cn-shenzhen.aliyuncs.com/e-medicine/d3TNrsh75a.png'
+        }
+      ]
+    };
+  },
+  mounted() {
+    let that = this;
+    /* eslint-disable */
+    let mySwiper = new Swiper('.swiper-container', {
+      direction: 'horizontal', //滑动方向，可设置水平(horizontal)或垂直(vertical)。
+      loop: true, // 设置为true 则开启loop模式
+      autoplay: 3000, // 自动切换时间
+      slidesPerView: 'auto', // 设置slider容器能够同时显示的slides数量(carousel模式)。类型：number or auto
+      centeredSlides: true, // 设定为true时，active slide会居中，而不是默认状态下的居左。
+      spaceBetween: 10, // 在slide之间设置距离（单位px）。
+      loopAdditionaSlider: 0, // loop模式下会在slides前后复制若干个slide,，前后复制的个数不会大于原总个数。
+      on: {
+        slideChangeTransitionEnd: function(){
+          if(this.activeIndex === 8 || this.activeIndex === 4 ) {
+            that.bannerIndex = 1;
+          } else {
+            that.bannerIndex = this.activeIndex-3;
+          }
+        },
+      },
+    });
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.box{
+    position: relative;
+    width: 100%;
+    height: 500px;
+
+}
+.examples{
+  position: absolute;
+  top: 44px;
+  left: 0px;
+  right: 0px;
+  bottom: 0px;
+  overflow: auto;
+  // background-color: #f5f0f0;
+  font-size: 14px;
+  .tips{
+    position: absolute;
+    bottom: 0px;
+    width: 100%;
+    height: 46px;
+    background-color: #b5654d;
+    text-align: center;
+    img{
+      width: 12px;
+      height: 14px;
+      position: absolute;
+      top: 7.5px;
+      left: 12vw;
+      color: #fff;
+    }
+    p{
+      width: 240px;
+      text-align: left;
+      color: #fff;
+      font-size: 12px;
+      position: absolute;
+      left: 18vw;
+      top: 7px;
+      line-height: 16px;
+    }
+  }
+}
+.bannerIndex{
+  line-height: 40px;
+  text-align: center;
+  color: #666666;
+  font-size: 15px;
+  text-align: center;
+  span{
+    color: #b5654d;
+  }
+}
+.bannerBox{
+  position: relative;
+  height: 380px;
+}
+.swiper-container {
+  width: 100%;
+  height: 100%;
+}
+.swiper-container .swiper-wrapper .swiper-slide {
+  width: 80% !important;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+}
+.swiper-container .swiper-wrapper .swiper-slide img {
+  width: 100%;
+  height: 380px;
+  border-radius: 5px;
+}
+.swiper-container .swiper-wrapper .swiper-slide-prev,.swiper-container .swiper-wrapper .swiper-slide-next{
+  height: 340px !important;
+  margin-top: 20px;
+}
+.swiper-container .swiper-wrapper .swiper-slide-prev img,.swiper-container .swiper-wrapper .swiper-slide-next img{
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/components/Banner/Banner.vue b/src/components/Banner/Banner.vue
new file mode 100644
index 0000000..53dae1c
--- /dev/null
+++ b/src/components/Banner/Banner.vue
@@ -0,0 +1,103 @@
+<template>
+  <div class="swiper-container">
+    <div class="swiper-wrapper">
+      <div class="swiper-slide" v-for="(item,index) in ImgNews" :key="index">
+        <div class="rotation-box">
+          <img :src="item.titleUrl" style="height: 340px;width: 100%" alt="" />
+          <div class="rotation-div one-text">
+            {{ item.title }}
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- Add Pagination -->
+    <div class="swiper-pagination"></div>
+  </div>
+</template>
+
+<script>
+import Swiper from 'swiper';
+import 'swiper/swiper.min.css';
+export default {
+  props: {
+    ImgNews: {
+      type: Array,
+      default: []
+    }
+  },
+  data() {
+    return {
+      bannerIndex: 2,
+    };
+  },
+  mounted() {
+    let that = this;
+    /* eslint-disable */
+    let mySwiper = new Swiper('.swiper-container', {
+      slidesPerView: 5,
+      spaceBetween: -100,
+      centeredSlides: true,
+      loop: true,
+      pagination: {
+        el: '.swiper-pagination',
+        clickable: true,
+      },
+      autoplay: {
+          stopOnLastSlide: true,
+          delay: 1000
+      },
+    });
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.swiper-container {
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+    }
+    .swiper-slide {
+      text-align: center;
+      font-size: 18px;
+      background: #fff;
+
+      /* Center slide text vertically */
+      display: -webkit-box;
+      display: -ms-flexbox;
+      display: -webkit-flex;
+      display: flex;
+      -webkit-box-pack: center;
+      -ms-flex-pack: center;
+      -webkit-justify-content: center;
+      justify-content: center;
+      -webkit-box-align: center;
+      -ms-flex-align: center;
+      -webkit-align-items: center;
+      align-items: center;
+	  transition: 300ms;
+	  transform: scale(0.8);
+    }
+	.swiper-slide-active,.swiper-slide-duplicate-active{
+      transform: scale(1);
+	}
+
+.rotation-box {
+  position: relative;
+  width: 520px;
+  height: 340px;
+}
+
+.rotation-div {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: 42px;
+  line-height: 42px;
+  background-color: #b61412;
+  color: #fff;
+  font-size: 1.1em;
+  padding: 0 16px;
+  z-index: 10;
+}
+</style>
diff --git a/src/views/FirstPages/FirstPage.vue b/src/views/FirstPages/FirstPage.vue
index 45201e7..ed9d260 100644
--- a/src/views/FirstPages/FirstPage.vue
+++ b/src/views/FirstPages/FirstPage.vue
@@ -82,6 +82,8 @@
           <div class="d-flex align-center" style="height: 100%;cursor: pointer;" @click="openPage('news', '0204', '')">更多></div>
         </div>
         <!-- 轮播图 -->
+        <banner class="banner" :ImgNews="ImgNews1" />
+
         <el-carousel :interval="4000" type="card" class="banner" indicator-position="none">
           <el-carousel-item v-for="newContent in ImgNews1" :key="newContent.introId">
             <div class="rotation-box">
@@ -279,10 +281,11 @@
 <script>
 import { mapActions } from 'vuex';
 import BayWindow from '@/components/BayWindow/BayWindow.vue';
+import Banner from '@/components/Banner/Banner.vue';
 import { getBay } from 'config/api';
 
 export default {
-  components: { BayWindow },
+  components: { BayWindow, Banner },
   data() {
     return {
       groupNews: [],
diff --git a/yarn.lock b/yarn.lock
index beda188..8fabe34 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3598,6 +3598,13 @@
     "domelementtype" "^2.0.1"
     "entities" "^2.0.0"
 
+"dom7@^4.0.4":
+  "integrity" "sha512-DSSgBzQ4rJWQp1u6o+3FVwMNnT5bzQbMb+o31TjYYeRi05uAcpF8koxdfzeoe5ElzPmua7W7N28YJhF7iEKqIw=="
+  "resolved" "https://registry.npmjs.org/dom7/-/dom7-4.0.4.tgz"
+  "version" "4.0.4"
+  dependencies:
+    "ssr-window" "^4.0.0"
+
 "domain-browser@^1.1.1":
   "integrity" "sha1-PTH1AZGmdJ3RN1p/Ui6CPULlTto="
   "resolved" "https://registry.npm.taobao.org/domain-browser/download/domain-browser-1.2.0.tgz"
@@ -8565,6 +8572,11 @@
     "safer-buffer" "^2.0.2"
     "tweetnacl" "~0.14.0"
 
+"ssr-window@^4.0.0", "ssr-window@^4.0.2":
+  "integrity" "sha512-ISv/Ch+ig7SOtw7G2+qkwfVASzazUnvlDTwypdLoPoySv+6MqlOV10VwPSE6EWkGjhW50lUmghPmpYZXMu/+AQ=="
+  "resolved" "https://registry.npmjs.org/ssr-window/-/ssr-window-4.0.2.tgz"
+  "version" "4.0.2"
+
 "ssri@^6.0.1":
   "integrity" "sha1-KjxBso3UW2K2Nnbst0ABJlrp7dg="
   "resolved" "https://registry.npm.taobao.org/ssri/download/ssri-6.0.1.tgz"
@@ -8931,6 +8943,14 @@
     "unquote" "~1.1.1"
     "util.promisify" "~1.0.0"
 
+"swiper@^8.0.6":
+  "integrity" "sha512-Ssyu1+FeNATF/G8e84QG+ZUNtUOAZ5vngdgxzczh0oWZPhGUVgkdv+BoePUuaCXLAFXnwVpNjgLIcGnxMdmWPA=="
+  "resolved" "https://registry.npmjs.org/swiper/-/swiper-8.0.6.tgz"
+  "version" "8.0.6"
+  dependencies:
+    "dom7" "^4.0.4"
+    "ssr-window" "^4.0.2"
+
 "table@^5.2.3":
   "integrity" "sha1-EpLRlQDOP4YFOwXw6Ofko7shB54="
   "resolved" "https://registry.npm.taobao.org/table/download/table-5.4.6.tgz?cache=0&sync_timestamp=1599191046284&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ftable%2Fdownload%2Ftable-5.4.6.tgz"