项目中遇到一个手风琴效果下面与大家共享：

技术：vue2进行实现-未依赖任何插件

一： 需求：

1：可根据划入进行高亮展示当前划入项

2：划入项当前对应数据展示

二：源码：

<template>
   <div class="about-index">
      <div class="container">
         <div class="fine-grained">
            <div class="content">
               <!-- 左边 -->
               <div class="left">
                  <div class="or-container">
                     <div class="box" :class="eleindex == i ? 'eleactive' : ''" v-for="(ele, i) in piclist" :key="i"
                        @mouseenter="enter(i, ele)" @mouseleave="out(i)" @click="ounds(ele)">
                        <img :src="ele.img">
                        <div class="wenb">
                           <div>{
    
    { ele.title }}</div>
                           <div>{
    
    { ele.name }}</div>
                        </div>
                     </div>
                  </div>
               </div>

               <!-- 右边 -->
               <div class="right">
                  <p>{
    
    { lisData.title }}：</p>
                  <div>
                     {
    
    { lisData.name }}，{
    
    { lisData.address }}，{
    
    { lisData.date }}，{
    
    { lisData.details }}
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</template>
<script>


export default {
   name: "index",
   data() {
      return {
         eleindex: 0,
         piclist: [
            { title: '创始人1', name: "喜羊羊", address: "羊村", details: "喜羊羊聪明", date: "出生在地球", img: 'https://img0.baidu.com/it/u=4223252517,509636157&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1676134800&t=92767f77b8b0ae33efb11befbc9f83b5' },
            { title: '董事长2', name: "灰太狼", address: "羊村", details: "灰太狼住在城堡", date: "出生在地球", img: 'https://img1.baidu.com/it/u=1055005767,1066201629&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1676134800&t=e6836377ebd4c08d912ed6bff6fd5164' },
            { title: '总经理3', name: "美羊羊", address: "羊村", details: "美羊羊好看", date: "出生在地球", img: 'https://img1.baidu.com/it/u=2826435412,1956663784&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1676134800&t=97e55613c6b19b92eb118c14a721a7c6' },
            { title: '总编辑4', name: "懒洋洋", address: "羊村", details: "懒洋洋爱吃", date: "出生在地球", img: 'https://img1.baidu.com/it/u=1170926766,2659060464&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1676134800&t=6ee84dd3ab808eb67238951d9b2fbc07' }
         ],

         lisData: { title: '创始人1', name: "喜羊羊", address: "羊村", details: "喜羊羊聪明", date: "出生在地球", img: 'https://img0.baidu.com/it/u=4223252517,509636157&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1676134800&t=92767f77b8b0ae33efb11befbc9f83b5' },
      }
   },
   methods: {
      enter: function (i, ele) {
         this.eleindex = i;
         this.lisData = ele;
      },
      out: function (i) {
         this.imgindex = -1
      },
      ounds(ele) {
         // console.log(ele);
         this.lisData = ele;
      }
   },
   created() {

   },
};
</script>

<style scoped>
.container{
   width: 1200px;
   height: auto;
   margin: 0 auto;
}
/*手风琴样式*/
.or-container {
   display: flex;
   width: 100%;
   /* padding: 4% 2%; */
   box-sizing: border-box;
   height: 100%;
}

.or-container:before {
   background-color: rgba(0, 0, 0, 0.4);
}

.box {
   flex: 1;
   overflow: hidden;
   transition: .5s;
   box-shadow: 0 20px 30px rgba(0, 0, 0, 0.1);
   line-height: 0;
   border-radius: 5px;
   margin: 0px 2px;
   position: relative;
}

.box>img {
   width: 100%;
   height: calc(100%);
   -o-object-fit: cover;
   object-fit: cover;
   transition: .5s;
   border-radius: 5px;
   margin: 0px 2px;
   position: relative;
   cursor: pointer;
   background: linear-gradient(180deg, rgba(25, 23, 19, 0) 0%, #613321 100%);
}

.wenb {
   position: absolute;
   left: 0px;
   bottom: 0px;
   color: #fff;
   padding: 5px 15px;
   border-radius: 10px;
}

.wenb div:nth-child(1) {
   width: 54px;
   height: 25px;
   font-size: 18px;
   font-family: PingFangSC-Semibold, PingFang SC;
   font-weight: 600;
   color: #FFFFFF;
   line-height: 25px;
}

.wenb div:nth-child(2) {
   width: 48px;
   height: 25px;
   font-size: 16px;
   font-family: PingFangSC-Semibold, PingFang SC;
   /* font-weight: 600; */
   color: #FFFFFF;
   line-height: 25px;
}

.eleactive {
   flex: 1 1 22%;
}

.eleactive>img {
   width: 100%;
   height: 100%;
   border-radius: 10px;
}

/*end*/



.about-index .content {
   padding: 24px 0px 10px 0px;
   font-size: 16px;
   font-family: SourceHanSerifSC-Regular, SourceHanSerifSC;
   font-weight: 400;
   color: #333333;
   line-height: 30px;
   display: flex;
}

.about-index .content .leftd {
   width: 500px;
   height: 298px;
   /* background-color: pink; */
   overflow: hidden;
}


.about-index .fine-grained .content {
   /* background: #f2e6d1; */
   display: flex;
   justify-content: space-between;
}


.fine-grained .content .left {
   width: 44%;
   /* height: 189px; */
   /* background-color: pink; */
}

.fine-grained .content .right {
   width: 760px;
   height: 380px;
   background: #F2E5D1;
   border-radius: 10px;
   padding: 20px;
}

.fine-grained .content .right p {
   margin: 0px 0px 10px 0px;
   width: 69px;
   height: 22px;
   font-size: 16px;
   font-family: PingFangSC-Semibold, PingFang SC;
   font-weight: 600;
   color: #333333;
   line-height: 22px;
}

.fine-grained .content .right div {
   width: 700px;
   height: 256px;
   font-size: 16px;
   font-family: PingFangSC-Semibold, PingFang SC;
   /* font-weight: 600; */
   color: #333333;
   line-height: 32px;
   text-indent: 28px;
}


/* .about-index .introduction .content {
  background: #f2e6d1;
} */
</style>

三：效果展示：

扫描二维码关注公众号，回复： 16470489 查看本文章