sss

package.json

@@ -15,11 +15,11 @@
   },
   "dependencies": {
     "axios": "^0.24.0",
+    "element-ui": "^2.15.6",
     "node-sass": "^6.0.1",
     "sass-loader": "^12.3.0",
     "v-viewer": "^1.6.4",
     "vue": "^2.5.2",
-    "vue-awesome-swiper": "^4.1.1",
     "vue-meta": "^2.4.0",
     "vue-photo-preview": "^1.1.3",
     "vue-preview": "^1.1.3",
@@ -73,7 +73,6 @@
     "selenium-server": "^3.0.1",
     "semver": "^5.3.0",
     "shelljs": "^0.7.6",
-    "swiper": "^3.4.2",
     "uglifyjs-webpack-plugin": "^1.1.1",
     "url-loader": "^0.5.8",
     "vue-jest": "^1.0.2",

src/main.js

@@ -3,16 +3,16 @@
 import Vue from 'vue'
 import App from './App'
 import router from './router'
+import ElementUI from 'element-ui';
+import 'element-ui/lib/theme-chalk/index.css';
 import './units/rem';
-import 'swiper/dist/css/swiper.min.css'
-import 'swiper/dist/js/swiper.min'
 
 import axios from 'axios'
 import 'viewerjs/dist/viewer.css'
   import Viewer from 'v-viewer'
 
 
-
+Vue.use(ElementUI);
 import Meta from 'vue-meta'
 Vue.use(Meta,Viewer)
 Vue.use(Viewer)

src/pages/home.vue

@@ -23,7 +23,10 @@
     <!-- 头部导航栏 -->
     <!-- 轮播 -->
     <div class="about">
-			<div class="swiper-container" style="height: 40.625rem;
+
+      <el-carousel height="40.625rem">
+        <el-carousel-item v-for="(item,index) in bannerList" :key="index">
+          <div id="swiper1" class="swiper-container" style="height: 40.625rem;
             width:120rem;
             margin-top: 4.375rem;">
             <div class="swiper-wrapper" id="1">
@@ -62,6 +65,9 @@
             <!-- 如果需要滚动条 -->
             <!--   <div class="swiper-scrollbar"></div> -->
           </div>
+        </el-carousel-item>
+      </el-carousel>
+
     </div>
     <!-- 我们的服务 -->
     <div style="width:74rem;margin: auto;margin-top:6.625rem;" id='3'>
@@ -89,8 +95,8 @@
     </div>
     <!-- fuwu-->
     <div class="khfw" id='3'>
-			<div class="khfw-list" v-for="(item,index) in solve"
-				:style="{ backgroundImage:`url(${getImgUrl(item.image)})`}" :key="index">
+      <div class="khfw-list" v-for="(item,index) in solve" :style="{ backgroundImage:`url(${getImgUrl(item.image)})`}"
+        :key="index">
         <img class="khfw-icon" :src="getImgUrl(item.background)" />
         <div class="line-khfw"></div>
         <div class="khfw-title">{{item.title}}</div>
@@ -102,8 +108,8 @@
       <div class="line-fwal"></div>
       <p class="fwmw-text">{{contentInfo.ServiceCase?contentInfo.ServiceCase.introduce:''}}</p>
       <div class="ywfw-ul">
-				<div class="ywfw-tag" :class="fwfwIndex==index?'ywfw-tag-act':'ywfw-tag'"
-					@click="checkTag(index,item.id)" v-for="(item,index) in ywfwList" :key="index">{{item.title}}</div>
+        <div class="ywfw-tag" :class="fwfwIndex==index?'ywfw-tag-act':'ywfw-tag'" @click="checkTag(index,item.id)"
+          v-for="(item,index) in ywfwList" :key="index">{{item.title}}</div>
       </div>
 
       <!-- <div class="case-ul">
@@ -125,8 +131,7 @@
           <transition name="fade" mode="out-in">
             <div v-if="caseIds==item.id" class="case-list-act">
               <div class="center-text">
-								<img v-if="item.imgShow" @click="preImgBtn(item.id)" class="see-img"
-									src="../assets/jia.png" />
+                <img v-if="item.imgShow" @click="preImgBtn(item.id)" class="see-img" src="../assets/jia.png" />
                 <div class="case-name">{{item.name}}</div>
                 <p class="case-indrouce">{{item.introduce}}</p>
               </div>
@@ -183,8 +188,8 @@
       <p class="fwmw-text">{{team.introduce}}</p>
       <div v-if="team.content">
         <div class="s-content2">
-					<div class="member-list" @mouseover="teamMove(index)" @mouseout="teamOut"
-						style="position: relative;" v-for="(item,index) in team.content" :key="index">
+          <div class="member-list" @mouseover="teamMove(index)" @mouseout="teamOut" style="position: relative;"
+            v-for="(item,index) in team.content" :key="index">
             <img class="member-img" :src="getImgUrl(item.avatar)" />
             <div class="member-name">{{item.name}}</div>
             <div class="member-zhiwei">{{item.position}}</div>
@@ -221,11 +226,16 @@
           {{honor.introduce}}
         </div>
       </div>
-				<div class="swiper-container" style=" width:43rem;height:22.5rem;">
+      <div id="swiper2" class="swiper-container" style=" width:43rem;height:22.5rem;">
         <div class="swiper-wrapper" style=" width:100%;">
-						<div class="swiper-slide" style="width:100%;height: 100%;" v-for="(item,index) in honor.content" :key="index">
+
+          <el-carousel height="22.5rem">
+            <el-carousel-item  v-for="(item,index) in honor.content" :key="index">
+              <div class="swiper-slide" style="width:100%;height: 100%;">
                 <img class="yyzz-img" @click="checkRyzz()" :src="getImgUrl(item.image)" />
               </div>
+            </el-carousel-item>
+          </el-carousel>
         </div>
       </div>
       <!-- <div class="yyzz-ul" v-if="honor.content">
@@ -268,8 +278,8 @@
         <div class="foot-line"></div>
         <div class="foot-dow">
           <div class="foot-dow-ul">
-						<div class="foot-dow-list" v-for="(item,index) in menuList" :key="index"><a
-								style="color: white;" :href="'#'+item.id">
+            <div class="foot-dow-list" v-for="(item,index) in menuList" :key="index"><a style="color: white;"
+                :href="'#'+item.id">
                 {{item.title}}
               </a></div>
             <!-- <div class="foot-dow-list">联系我们</div> -->
@@ -304,6 +314,7 @@
     <div class="image" style="display: none;" v-viewer="{movable: false}">
       <img v-for="src in ryzzImg" :src="getImgUrl(src)" :key="src">
     </div>
+
   </div>
 
 </template>
@@ -311,33 +322,21 @@
 <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.min.js"></script>
 
 <script>
-	import {
-		swiper,
-		swiperSlide
-	} from "vue-awesome-swiper";
-	import "swiper/dist/css/swiper.css";
   import 'viewerjs/dist/viewer.css'
-
   import Viewer from 'v-viewer'
-
   import Vue from 'vue';
-
-
   Vue.use(Viewer)
 
   export default {
+    components: {
+
+    },
     props: {
       images: {
         type: Array,
         default: () => []
       }
     },
-		name: "home",
-
-		components: {
-			swiper,
-			swiperSlide,
-		},
     created: function() {
       var vueObj = this;
       this.$on('show-dialog', function(dataList, afterSelect) {
@@ -422,22 +421,8 @@
       this.getSeo();
 
       /* 获取滚动条 */
-			window.addEventListener('scroll', this.windowScroll)
-			new Swiper('.swiper-container', {
-					loop: true,
-					// 如果需要分页器
-					pagination: '.swiper-pagination',
-					// 如果需要前进后退按钮
-					nextButton: '.swiper-button-next',
-					prevButton: '.swiper-button-prev',
-					// 如果需要滚动条
-					// scrollbar: '.swiper-scrollbar',
-					//如果需要自动切换海报
-					// autoplay: {
-					//   delay: 1000,//时间 毫秒
-					//   disableOnInteraction: false,//用户操作之后是否停止自动轮播默认true
-					// },
-				}),
+      window.addEventListener('scroll', this.windowScroll);
+
       this.getMenu();
       this.getContent();
       this.getCompanyInfo()