update: TODO#132097 [快速篩選] 滑動切換顧問清單

Mila

2021-12-08 c7fdbdc4523e16970626abebbc6d21367b0b476b

update: TODO#132097 [快速篩選] 滑動切換顧問清單

 PAMapp/assets/scss/vendors/elementUI/_carousel.scss

@@ -23,15 +23,26 @@
}

.pam-quickFilter-carousel {
    border-radius: 10px;
    box-shadow: 0 0 6px 0 #00000029;
    .el-carousel__container {
        .el-carousel__item {
            width: 100%;
            box-shadow: 0 0 6px #00000029;
            border-radius: 10px;
            background-color: $PRIMARY_WHITE;
        }
    }

    @include desktop {
        border-radius: 0;
        box-shadow: 0;
        .el-carousel__container {
            .el-carousel__item {
                box-shadow: 0 0 6px #00000029;
            }
        }
    }

    @media (min-width: 768px) {
        .el-carousel__container {
            transform: translateX(30%);

 PAMapp/components/QuickFilter/QuickFilterConsultantList.vue

@@ -14,6 +14,8 @@
        >
            <div
                class="fill"
                @touchstart="moveStart"
                @touchend="moveEnd"
            >
                <UiAvatar
                    :size="200"
@@ -87,6 +89,24 @@
    @Prop() consultantList!: Consultant[];
    isVisiblePopUp = false;
    popUpTxt = '成功加入顧問清單';
    startPosition = 0;
    endPosition = 0;

    moveStart(event: TouchEvent) {
        this.startPosition = event.changedTouches[0].clientX;
    }

    moveEnd(event: TouchEvent) {
        this.endPosition = event.changedTouches[0].clientX;
        if (this.endPosition < this.startPosition) {
            this.nextCard();
            return;
        }

        if (this.endPosition > this.startPosition) {
            this.prevCard();
        }
    }

    nextCard() {
        (this.$refs.carouselRef as ElCarousel).next();
@@ -100,6 +120,7 @@
        this.popUpTxt = txt;
        this.isVisiblePopUp = true;
    }

    showAgentDetail(agentNo: string): void {
        this.$router.push(`/agentInfo/${agentNo}`);
    }