[ Update ] 修正預約顧問按鈕 mac 上跑版問題

劉鈞霖

2021-11-18 9340195f07d4143affdd5e6c071ad012baaa4297

[ Update ] 修正預約顧問按鈕 mac 上跑版問題

 PAMapp/pages/index.vue

@@ -2,38 +2,42 @@
    <div>
        <Ui-Carousel></Ui-Carousel>
        <div class="page-container">
            <h5 class="mdTxt mb-30">預約保險顧問</h5>
            <el-button
                class="reserveBtn recommendConsultant"
                @click="routerPush('/recommendConsultant')"
            >
      <div class="mb-30">
        <h5 class="mdTxt">預約保險顧問</h5>
        <div class="mt-10 pam-reserveBtn--block">
          <el-button class="reserveBtn recommendConsultant"
            @click="routerPush('/recommendConsultant')">
                <p>嚴選配對</p>
            </el-button>
            <el-button
                class="reserveBtn quickFilter"
                @click="routerPush('/quickFilter')"
            >
          <el-button class="reserveBtn quickFilter"
            @click="routerPush('/quickFilter')">
                <p>快速篩選</p>
            </el-button>
            <el-row class="mb-30 rowStyle">
        </div>
      </div>
      <div class="pam-paragraph">
        <el-row class="rowStyle">
                <el-col :span="16">
                    <span class="mdTxt">我的顧問清單</span>
                    <span class="smTxt_bold amount">共 {{consultantList.length}} 筆</span>
                </el-col>
                <el-col
                    :span="8"
          <el-col :span="8"
                    class="mdTxt readMore fix-chrome-click--issue"
                    v-if="consultantList.length > 3"
                    @click.native="routerPush('/myConsultantList/consultantList')">查看更多</el-col>
            </el-row>
            <ConsultantList
                :agents="consultantList.slice(0, 3)"
            ></ConsultantList>
            <div class='pam-recommend pb-30 pt-30'>
        <ConsultantList class="mt-10"
          :agents="consultantList.slice(0, 3)"></ConsultantList>
      </div>
      <div class='pam-paragraph'>
        <div class="pam-recommend">
                <h5 class="mdTxt">推薦保險顧問</h5>
                <img class="absulate img" src="~/assets/images/index_recommend.svg" alt="">
          <img class="img"
            src="~/assets/images/index_recommend.svg"
            alt="">
            </div>
            <ConsultantSwiper :agents="recommendList"></ConsultantSwiper>
      </div>
        </div>
    </div>
</template>
@@ -78,16 +82,15 @@
</script>

<style lang="scss" scoped>

    .page-container {
        padding: 0px 20px 30px 20px;
    margin: 0px 20px 30px 20px;
    }

    .reserveBtn.el-button--default {
        width: 100%;
        height: 110px;
        border-radius: 10px;
        margin: 0 auto 17px auto;
    margin-bottom: 15px;
        font-size: 32px;
        font-weight: 700;
        background-position: right;
@@ -101,14 +104,9 @@
        p {
            text-shadow: 1px 1px 5px $PRIMARY_WHITE;
        }

        &:nth-child(3) {
            margin-bottom: 42px;
        }

    }

    .reserveBtn+.reserveBtn {
  .el-button+.el-button {
        margin-left: 0px;
    }

@@ -118,6 +116,22 @@

    .recommendConsultant {
        background-image: url('~/assets/images/recommendConsultant/banner_mob.svg');
  }
  .rowStyle {
    .amount {
      color: $PRUDENTIAL_GREY;
    }
    .readMore {
      color: $PRIMARY_RED;
      cursor: pointer;
      text-align: right;
    }
  }

  .pam-recommend {
    display: flex;
    justify-content: space-between;
    align-items: center;
    }

    @media (min-width: 576px) and (max-width: 768px) {
@@ -130,39 +144,19 @@
        }
    }

    .rowStyle {
        .amount {
            color: $PRUDENTIAL_GREY;
        }
        .readMore {
            color: $PRIMARY_RED;
            cursor: pointer;
            text-align: right;
        }
    }

    @include desktop {
        .page-container {
            width: 700px;
            margin: 0 auto;
        }

    .pam-reserveBtn--block {
      display: flex;
      justify-content: space-between;
    }

        .reserveBtn {
            max-width: 340px;

            &:nth-child(2) {
                margin-right: 15px;
            }
        }
    }

    .pam-recommend {
        position: relative;

        .img {
            position: absolute;
            right: 20px;
            bottom: 0px;
      max-width: 335px;
        }
    }