风采轮播优化

Hui Yu

2021-03-20 c51b80c22d2c88a553069dfb38b1185e799221cd

风采轮播优化

 package.json

@@ -13,8 +13,7 @@
    "vue": "^2.6.11",
    "element-ui": "^2.15.1",
    "vue-router": "^3.5.1",
    "swiper": "^6.3.5",
    "vue-awesome-swiper": "^3.1.3"
    "swiper": "^6.3.5"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",

 src/main.js

@@ -3,7 +3,6 @@
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import VueAwesomeSwiper from 'vue-awesome-swiper'

// 全局样式
import '@/styles/index.scss'
@@ -14,7 +13,6 @@
import './icons'

Vue.use(ElementUI)
Vue.use(VueAwesomeSwiper)

Vue.config.productionTip = false


 src/views/home/components/ArtMien.vue

@@ -13,7 +13,7 @@
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" v-for="(item,index) in list" :key="index">
                        <img :src="item.imgSrc" />
                        <img :src="item" />
                    </div>
                </div>
                <div class="swiper-pagination"></div>
@@ -25,39 +25,24 @@
</template>

<script>
    import '../../../utils/swiper.min.js';
    // import '../../../utils/swiper.min.js';
    import Swiper from  'swiper/swiper-bundle.js'
    import 'swiper/swiper-bundle.css'

    export default {
        name: "ArtMien",
        data() {
            return {
                list: [{
                        imgSrc: require("@/assets/home/art_mien/1.png")
                    },
                    {
                        imgSrc: require("@/assets/home/art_mien/2.png")
                    },
                    {
                        imgSrc: require("@/assets/home/art_mien/3.png")
                    },

                    {
                        imgSrc: require("@/assets/home/art_mien/4.png")
                    },
                    {
                        imgSrc: require("@/assets/home/art_mien/5.png")
                    },
                    {
                        imgSrc: require("@/assets/home/art_mien/6.png")
                    },
                    {
                        imgSrc: require("@/assets/home/art_mien/7.png")
                    },
                    {
                        imgSrc: require("@/assets/home/art_mien/8.png")
                    }
                ],
                certifySwiper: null
                list: [
                    require("@/assets/home/art_mien/1.png"),
                    require("@/assets/home/art_mien/2.png"),
                    require("@/assets/home/art_mien/3.png"),
                    require("@/assets/home/art_mien/4.png"),
                    require("@/assets/home/art_mien/5.png"),
                    require("@/assets/home/art_mien/6.png"),
                    require("@/assets/home/art_mien/7.png"),
                    require("@/assets/home/art_mien/8.png")
                ]
            }
        },
        mounted() {
@@ -115,7 +100,7 @@

<style lang="scss" scoped>
    @import "~@/styles/variables.scss";
    @import "../../../styles/swiper.min.css";
    // @import "../../../styles/swiper.min.css";

    .art-mien {
        width: $appWidth;