Merge branch 'master' of https://192.168.0.10:8443/r/pcalife/PAM

HelenHuang

2021-11-05 cf6803cd4f2c535afb1eaa935fd9e9735279656b

 PAMapp/components/QuickFilter/QuickFilterConsultantList.vue

File was renamed from PAMapp/components/QuickFilter/QuickFilterConsultantCarousel.vue
@@ -17,8 +17,13 @@
                @touchstart="touchStart"
                @touchend="moveCard"
            >
                <img class="avator cursor--pointer" @click="$router.push('/agentInfo')" src="" />
                <div class="mdTxt mt-30 mb-10">蔡美莓(伯樂保險經紀人)</div>
                <el-avatar
                    :size="200"
                    class="mx-auto cursor--pointer"
                    @click="$router.push('/agentInfo')"
                    src=""
                />
                <div class="mdTxt mt-30 mb-10 text--center">蔡美莓(伯樂保險經紀人)</div>
                <el-row>
                    <el-col :span="12">
                        <div class="smTxt_bold mb-10 text--prudential_grey">服務資歷</div>
@@ -35,7 +40,7 @@
                <div class="p bold">#財務規劃</div>
            </div>
            <div class="parallelBtns">
                <el-button @click="isVisibleDrawer = true">
                <el-button @click="addConsultant">
                    <i class="icon-add smTxt"></i>
                    <span>顧問清單</span>
                </el-button>
@@ -59,20 +64,33 @@
    >
        <div class="text--center mdTxt">
            <p class="mb-50">成功加入顧問清單</p>
            <p class="text--primary" @click="isVisibleDrawer = false">我知道了</p>
            <p class="text--primary cursor--pointer"
                @click="isVisibleDrawer = false">我知道了</p>
        </div>
    </Ui-Drawer>

    <Ui-Dialog
        :isVisible.sync="isVisibleDialog"
    >
        <div class="text--center mdTxt">
            <p class="mb-50">成功加入顧問清單</p>
            <p class="text--primary cursor--pointer"
                @click="isVisibleDialog = false">我知道了</p>
        </div>
    </Ui-Dialog>

</div>
</template>

<script lang="ts">
import { ElCarousel } from 'element-ui/types/carousel';
import { Vue, Component, Prop } from 'vue-property-decorator';
import { Vue, Component } from 'vue-property-decorator';
import { isMobileDevice } from '~/assets/ts/device';

@Component
export default class UiCardCarousel extends Vue {
export default class QuickFilterConsultantList extends Vue {
    isVisibleDrawer = false;
    isVisibleDialog = false;
    startPosition = 0;
    endPosition = 0;

@@ -101,6 +119,12 @@
        (this.$refs.carouselRef as ElCarousel).prev();
    }

    addConsultant() {
        isMobileDevice()
            ? this.isVisibleDrawer = true
            : this.isVisibleDialog = true;
    }

}
</script>

@@ -113,11 +137,7 @@
        padding: 20px 30px 30px 30px;
    }

    .avator {
        width: 200px;
        height: 200px;
        border-radius: 50%;
        background-color: $MID_GREY;
    .mx-auto {
        margin: 0 auto;
    }

@@ -180,8 +200,22 @@
        position: relative;
    }

        .absolute {
    .absolute {
        position: absolute;
    }

    @media (min-width: 768px) {
        .relative {
            overflow: hidden;
        }

        .arrow-right-position {
            right: -20px;
        }

        .arrow-left-position {
            left: -20px;
        }
    }

</style>