cgaii_official_en/src/components/m-expert/index.vue

<template>
<div class="m-expert">
  <div class="expert-l">
    <div class="e-title">{{experts.title}}</div>
    <p class="banquan">Photo @graphicsmedia.net</p>
    <div>{{activeTxt.name}}</div>
    <p v-for="(item, i) in activeTxt.introduce" :key="i">{{item}}</p>
  </div>
  <div class="expert-r">
    <ul>
      <li @click="clickHandle(item,i)" v-for="(item, i) in experts.expert" :key="i">
        <img :class="{active:activeIdx===i}" :src="item.img">
      </li>
    </ul>
  </div>
</div>
</template>

<script>
export default {
  props: ['experts'],
  data () {
    return {
      activeTxt: {
        name: this.experts.expert[0].name,
        introduce: this.experts.expert[0].detail
      },
      activeIdx: 0
    }
  },
  methods: {
    clickHandle (item, idx) {
      this.activeIdx = idx
      this.activeTxt = {
        name: item.name,
        introduce: item.detail
      }
    }
  }
}
</script>

<style scoped>
.m-expert{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0 5%;
}
.expert-l{
  color: #fff;
  text-align: left;
  line-height: 1.4;
  font-weight: bold;
}
.banquan{
  font-size: 10px;
  font-weight: 100;
  color: #8a8a8a;
}

.expert-l>div:first-child{
  font-size: 18px;
  margin: 0;
}
.expert-l>div{
  margin: 20px auto;
  font-size: 14px;
}

.expert-l>p{
  font-size: 14px;
}

.expert-r ul li img{
  width: 20vw;
  margin-top: 1vw;
  border: 2px solid #fff;
}

.expert-r ul li .active{
  border: 2px solid #e6373c;
}
</style>