update:战士价值观

landjj321

2021-03-20 e630823b0d0664269647eabb420421a46250a5cd

update:战士价值观

 src/views/home/components/ArtMien.vue

@@ -1,16 +1,16 @@
<template>

    <div class="art-mien">

        <div class="bg">

            <span class="title font-bold">文艺·风采</span>

        </div>

        <div class="content">

            <el-carousel type="card" indicator-position="none" loop="true" interval="2000" height="360px" :autoplay="true">

                <el-carousel-item v-for="(item, index) in list" :key="index">

					
                        <img :src="item.imgSrc" />

                </el-carousel-item>

            </el-carousel>
            <!-- <div class="swiper-container">
<template>
  <div class="art-mien">
    <div class="bg">
      <span class="title font-bold">文艺·风采</span>
    </div>
    <div class="content">
      <el-carousel type="card" indicator-position="none" :loop="true" :interval="2000" height="360px" :autoplay="true">
        <el-carousel-item v-for="(item, index) in list" :key="index">
					
          <img :src="item.imgSrc">
        </el-carousel-item>
      </el-carousel>
      <!-- <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" v-for="(item,index) in list" :key="index">
                        <img :src="item.imgSrc" />
@@ -19,135 +19,134 @@
                <div class="swiper-pagination"></div>
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
            </div> -->

        </div>

    </div>

</template>



            </div> -->
    </div>
  </div>
</template>

<script>
    // import '../../../utils/swiper.min.js';
	
    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

            }

        },
        // beforeMount() {
        //     var certifySwiper = new Swiper('.content .swiper-container', {
        //         watchSlidesProgress: true,
        //         slidesPerView: 'auto',
        //         centeredSlides: true,
        //         loop: true,
        //         loopedSlides: 5,
        //         autoplay: 3000,
        //         prevButton: '.swiper-button-prev',
        //         nextButton: '.swiper-button-next',
        //         pagination: '.swiper-pagination',
        //         //paginationClickable :true,
        //         onProgress: function(swiper, progress) {
        //             for (i = 0; i < swiper.slides.length; i++) {
        //                 var slide = swiper.slides.eq(i);
        //                 var slideProgress = swiper.slides[i].progress;
        //                 modify = 1;
        //                 if (Math.abs(slideProgress) > 1) {
        //                     modify = (Math.abs(slideProgress) - 1) * 0.3 + 1;
        //                 }
        //                 translate = slideProgress * modify * 260 + 'px';
        //                 scale = 1 - Math.abs(slideProgress) / 5;
        //                 zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
        //                 slide.transform('translateX(' + translate + ') scale(' + scale + ')');
        //                 slide.css('zIndex', zIndex);
        //                 slide.css('opacity', 1);
        //                 if (Math.abs(slideProgress) > 3) {
        //                     slide.css('opacity', 0);
        //                 }
        //             }
        //         },
        //         onSetTransition: function(swiper, transition) {
        //             for (var i = 0; i < swiper.slides.length; i++) {
        //                 var slide = swiper.slides.eq(i)
        //                 slide.transition(transition);
        //             }
// import '../../../utils/swiper.min.js';
	
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
    }
  }
  // beforeMount() {
  //     var certifySwiper = new Swiper('.content .swiper-container', {
  //         watchSlidesProgress: true,
  //         slidesPerView: 'auto',
  //         centeredSlides: true,
  //         loop: true,
  //         loopedSlides: 5,
  //         autoplay: 3000,
  //         prevButton: '.swiper-button-prev',
  //         nextButton: '.swiper-button-next',
  //         pagination: '.swiper-pagination',
  //         //paginationClickable :true,
  //         onProgress: function(swiper, progress) {
  //             for (i = 0; i < swiper.slides.length; i++) {
  //                 var slide = swiper.slides.eq(i);
  //                 var slideProgress = swiper.slides[i].progress;
  //                 modify = 1;
  //                 if (Math.abs(slideProgress) > 1) {
  //                     modify = (Math.abs(slideProgress) - 1) * 0.3 + 1;
  //                 }
  //                 translate = slideProgress * modify * 260 + 'px';
  //                 scale = 1 - Math.abs(slideProgress) / 5;
  //                 zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
  //                 slide.transform('translateX(' + translate + ') scale(' + scale + ')');
  //                 slide.css('zIndex', zIndex);
  //                 slide.css('opacity', 1);
  //                 if (Math.abs(slideProgress) > 3) {
  //                     slide.css('opacity', 0);
  //                 }
  //             }
  //         },
  //         onSetTransition: function(swiper, transition) {
  //             for (var i = 0; i < swiper.slides.length; i++) {
  //                 var slide = swiper.slides.eq(i)
  //                 slide.transition(transition);
  //             }
            
        //         },
        //         //处理分页器bug
        //         onSlideChangeStart: function(swiper) {
        //             if (swiper.activeIndex == 4) {
        //                 swiper.bullets.eq(9).addClass('swiper-pagination-bullet-active');
        //                 console.log(swiper.bullets.length);
        //             }
        //         }
        //     });
        // }
		
    }

</script>





<style lang="scss" scoped>

  //         },
  //         //处理分页器bug
  //         onSlideChangeStart: function(swiper) {
  //             if (swiper.activeIndex == 4) {
  //                 swiper.bullets.eq(9).addClass('swiper-pagination-bullet-active');
  //                 console.log(swiper.bullets.length);
  //             }
  //         }
  //     });
  // }
		
}
</script>

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



    .art-mien {

        width: $appWidth;

        height: 36rem;



        .bg {

            height: 8rem;

            overflow: hidden;

            position: relative;

            background-image: url("../../../assets/home/art_mien/bg.png");

            background-size: cover;

            text-align: center;

            line-height: 8rem;



            .title {

                // 文件渐变 TODO

                background: linear-gradient(to bottom, #ffffff, #949494);

                font-size: 60px;

                letter-spacing: 4.2rem;

                margin-left: 3.1rem; // 加上使文字居中

                background-clip: text;

                -webkit-background-clip: text;

                color: #fff;

                // color: transparent;

                text-shadow: 0.3rem 0.2rem 0.2rem #4a1308;

            }

        }



        .content {

            margin-top: 1rem;

            height: 27rem;

            position: relative;

            background-image: url("../../../assets/home/art_subject/bg.png");

    // @import  "../../../styles/swiper.min.css";

    .art-mien {
        width: $appWidth;
        height: 36rem;

        .bg {
            height: 8rem;
            overflow: hidden;
            position: relative;
            background-image: url("../../../assets/home/art_mien/bg.png");
            background-size: cover;
            text-align: center;
            line-height: 8rem;

            .title {
                // 文件渐变 TODO
                background: linear-gradient(to bottom, #ffffff, #949494);
                font-size: 60px;
                letter-spacing: 4.2rem;
                margin-left: 3.1rem; // 加上使文字居中
                background-clip: text;
                -webkit-background-clip: text;
                color: #fff;
                // color: transparent;
                text-shadow: 0.3rem 0.2rem 0.2rem #4a1308;
            }
        }

        .content {
            margin-top: 1rem;
            height: 27rem;
            position: relative;
            background-image: url("../../../assets/home/art_subject/bg.png");
            background-size: 100% 100%;
            
            // position: relative;
@@ -221,54 +220,54 @@
            // .swiper-button-next:hover {
            //     background-position: 0 -139px;
            //     background-size: 100%
            // }



            /deep/ .el-carousel__indicators--outside {

                margin-top: 23px;

            }



            img {

                position: absolute;

                width: 18.5rem;

                height: 30rem;

            }



            img:nth-child(1) {

                left: 0;

            }



            img:nth-child(2) {

                left: 11.2rem;

            }



            img:nth-child(3) {

                left: 18.7rem;

            }



            img:nth-child(4) {

                left: 26.1rem;

            }



            img:nth-child(5) {

                left: 37rem;

                z-index: 5;

            }



            img:nth-child(6) {

                left: 47.6rem;

                z-index: 4;

            }



            img:nth-child(7) {

                left: 55.5rem;

                width: 17.5rem;

                z-index: 3;

            }



            img:nth-child(8) {

                right: 0;

                z-index: 2;

            }

        }

    }

            // }

            /deep/ .el-carousel__indicators--outside {
                margin-top: 23px;
            }

            img {
                position: absolute;
                width: 18.5rem;
                height: 30rem;
            }

            img:nth-child(1) {
                left: 0;
            }

            img:nth-child(2) {
                left: 11.2rem;
            }

            img:nth-child(3) {
                left: 18.7rem;
            }

            img:nth-child(4) {
                left: 26.1rem;
            }

            img:nth-child(5) {
                left: 37rem;
                z-index: 5;
            }

            img:nth-child(6) {
                left: 47.6rem;
                z-index: 4;
            }

            img:nth-child(7) {
                left: 55.5rem;
                width: 17.5rem;
                z-index: 3;
            }

            img:nth-child(8) {
                right: 0;
                z-index: 2;
            }
        }
    }
</style>

 src/views/home/components/CoreValue.vue

@@ -4,52 +4,117 @@
      <img class="copper-man" src="@/assets/home/core_value/copper_man.gif">
    </div>
    <div class="content">
      <img src="@/assets/home/core_value/content_img.png">
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="(item,idx) in banners" :key="idx">
            <img :src="item">
          </div>
        </div>
   
      </div>
    </div>
  </div>
</template>

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

export default {
  name: 'CoreValue'
  name: 'CoreValue',
  data() {
    return {
      banners: [
        require('@/assets/home/art_subject/1.jpg'),
        require('@/assets/home/art_subject/2.jpg'),
        require('@/assets/home/art_subject/3.jpg'),
        require('@/assets/home/art_subject/4.jpg'),
        require('@/assets/home/art_subject/5.jpg'),
        require('@/assets/home/art_subject/6.jpg')

      ]
    }
  },
  mounted() {
    var swiper = new Swiper('.swiper-container', {
      autoplay: {
        delay: 1000
      },
      loop:true,
      effect: 'coverflow',
      grabCursor: true,
      centeredSlides: true,
      slidesPerView: 'auto',
      coverflowEffect: {
        rotate: 80,
        stretch: 0,
        depth: 200,
        modifier: 1,
        slideShadows: true
      },
      pagination: {
        el: '.swiper-pagination'
      }
    });
  }
}
</script>


<style lang="scss" scoped>
  @import "~@/styles/variables.scss";
  .core-value {
    width: $appWidth;
@import "~@/styles/variables.scss";

.core-value {
  width: $appWidth;
  height: 40.6rem;
  position: relative;

  .bg {
    height: 40.6rem;
    background-image: url("../../../assets/home/core_value/bg.png");
    background-size: 1222px 100%;
    background-position: -22px;
    position: relative;
    .bg {
      height: 40.6rem;
      background-image: url("../../../assets/home/core_value/bg.png");
      background-size: 1222px 100%;
      background-position: -22px;
      position: relative;
      overflow: hidden;
      img.copper-man {
          position: absolute;
        height: 100%;
          top: 0rem;
          left: -27rem;
    overflow: hidden;

    img.copper-man {
      position: absolute;
      height: 100%;
      top: 0rem;
      left: -27rem;
      z-index: 100;
    }
  }

  .content {
    position: absolute;
    right: 40px;
    bottom: 80px;
    width: 900px;
    height:300px ;

    .swiper-container {
      width: 100%;
      padding-top: 50px;
      padding-bottom: 50px;
      height: 350px;
      .swiper-slide {
        background-position: center;
        background-size: cover;
        width: 300px;
        height: 300px;
        display: flex;
        justify-content: center;
        align-items:center;
        border-radius: 5px;



        img{
          width: 100%;
          height: 100%;
        }
      }
    }
    .content {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;      
      img {
        position: absolute;
        width: 55rem;
        height: 22rem;
        right: 0;
        bottom: 0;
      }
    }    
  }
</style>
}
</style>

 vue.config.js

@@ -27,7 +27,7 @@
  outputDir: 'dist',
  assetsDir: 'static',
  lintOnSave: process.env.NODE_ENV === 'development',
  productionSourceMap: false,
  productionSourceMap: true,
  devServer: {
    proxy: {
      '/api/*': {
@@ -52,7 +52,8 @@
      alias: {
        '@': resolve('src')
      }
    }
    },
    devtool: 'source-map'
  },
  chainWebpack(config) {
    config.plugins.delete('preload') // TODO: need test