// html
// <!-- 滾動(dòng) -->
? ? <div class="rolling">
? ? ? <div class="rolling-container">
? ? ? ? <div
? ? ? ? ? class="rolling-wraper"
? ? ? ? ? v-for="(v, i) in imgList"
? ? ? ? ? :key="i"
? ? ? ? ? @click="handleImg(v)"
? ? ? ? >
? ? ? ? ? <img
? ? ? ? ? ? :src="require(`@/assets/images/home/company/${v.img}.jpg`)"
? ? ? ? ? ? class="img"
? ? ? ? ? />
? ? ? ? </div>
? ? ? ? <!-- 左側(cè)漸變陰影 -->
? ? ? ? <div class="gradient-left"></div>
? ? ? ? <div class="rolling-shadow"></div>
? ? ? ? <!-- 右側(cè)漸變陰影 -->
? ? ? ? <div class="gradient-right"></div>
? ? ? </div>
? ? ? <!-- 中間放大層 -->
? ? ? <div class="photo-bg"></div>
? ? ? <img
? ? ? ? :src="
? ? ? ? ? require(`@/assets/images/home/company/${this.imgList[1].img}.jpg`)
? ? ? ? "
? ? ? ? class="img-large"
? ? ? />
? ? ? <img
? ? ? ? :src="require(`@/assets/images/home/company/photo-bg.png`)"
? ? ? ? class="trapezoidal"
? ? ? />
? ? ? <!-- 底部切換 -->
? ? ? <div class="top-botton">
? ? ? ? <div class="btn-left" @click="previous"></div>
? ? ? ? <div class="center-text">{{ this.imgList[1].text }}</div>
? ? ? ? <div class="btn-right" @click="next"></div>
? ?</div>
</div>

// js
data () {
?? ?return {
?? ??? ?imgList: [
?? ? ? ? ? ?{
?? ? ? ? ? ? ?img: 'activity-01',
?? ? ? ? ? ? ?text: '2020年職稱(chēng)宣傳活動(dòng)',
?? ? ? ? ? ?},
?? ? ? ? ? ?{
?? ? ? ? ? ? ?img: 'activity-02',
?? ? ? ? ? ? ?text: '2020年職稱(chēng)宣傳活動(dòng)1',
?? ? ? ? ? ?},
?? ? ? ? ? ?{
?? ? ? ? ? ? ?img: 'activity-03',
?? ? ? ? ? ? ?text: '2020年職稱(chēng)宣傳活動(dòng)2',
?? ? ? ? ? ?},
?? ? ? ? ?],
?? ?}
}

methdos: {
?? ?// 點(diǎn)擊左側(cè)
?? ?previous() {
? ? ? const direction = 'left';
? ? ? this.scrollImg(direction);
? ? },
? ? // 點(diǎn)擊右側(cè)
? ? next() {
? ? ? const direction = 'right';
? ? ? this.scrollImg(direction);
? ? },

? ? // 處理滾動(dòng)列表圖片
? ? scrollImg(direction) {
? ? ? if (direction === 'left') {
? ? ? ? const first = this.imgList.shift();
? ? ? ? this.imgList.push(first);
? ? ? } else {
? ? ? ? const last = this.imgList.pop();
? ? ? ? this.imgList.unshift(last);
? ? ? }
? ? ? console.log();
? ? },
}

// css重點(diǎn)代碼
// 繪制多邊形
// 這幾個(gè)屬性為逆時(shí)針旋轉(zhuǎn)
?clip-path: polygon(4% 4%, 1% 90%, 95% 90%, 92% 4%);