uk_front/components/ResetPasswordMail.vue

<template>
  <div>
    <div style="width: 100%; background-color: #f7f7f7; color: #4a596c; position: relative;">
      <div
        style="
          width: 960px;
          box-sizing: border-box;
          padding: 20px 80px;
          margin: 0 auto;
          background-color: #fff;
        "
      >
        <div style="background-color: #fff; margin: 0 auto">
          <p style="text-align: center">
            <img
              src="https://promocollection.s3.ap-southeast-2.amazonaws.com/uploads/goodsfolder/logo.png"
            />
          </p>
          <hr />
          <div
            style="
              padding-top: 18px;
              margin-bottom: 38px;
              font-size: 18px;
            "
          >
            <table>
              <tr>
                <td style="position: relative; width: 200px; color: #02bde3; font-weight: bold;">
                  <div style="width: 100%; text-align: left">
                  Home&lifestyle
                  </div>
                </td>
                <td style="position: relative; width: 200px; color: #02bde3; font-weight: bold;">
                  <div style="width: 100%; text-align: center">
                  Antibacterial range
                  </div>
                </td>
                <td style="position: relative; width: 200px; color: #02bde3; font-weight: bold;">
                  <div style="width: 100%; text-align: center">
                  Technology
                  </div>
                </td>
                <td style="position: relative; width: 200px; color: #02bde3; font-weight: bold;">
                  <div style="width: 100%; text-align: right">
                  Outdoor & leisure
                  </div>
                </td>
              </tr>
            </table>
          </div>
          <p>Hello! {{ mailData.name }}</p>
          <p style="width: 620px; margin: 40px 0px 20px">
            Please click the link below or copy and paste it into your browser
            to create a new password on the PromoCollection website.
          </p>
          <p>
            <a
              :href="mailData.Url + '?email=' + mailData.email"
              target="_blank"
              style="color: #5c7dd4"
            >
              {{ mailData.Url + "?email=" + mailData.email }}
            </a>
          </p>
          <p style="margin: 20px auto 30px">
            This link is valid for 3 hours after receiving this email.
          </p>
        </div>
      </div>
      <div style="height: 24px; width: 960px; background-color: #f7f7f7;"></div>
      <div
        style="
          width: 960px;
          box-sizing: border-box;
          padding: 20px 80px;
          margin: 0 auto;
          background-color: #fff;
        "
      >
        <div style="height: 180px; background-color: #fff; margin: 0 auto">
          <p style="color: #02bde3; font-size: 22px">
            Have more questions? contact us!
          </p>
          <p style="margin: 20px 0">Phone: 1300 369 252</p>
          <p>
            Email:
            <span style="color: #5c7dd4; text-decoration: underline">
              Info@promocollection.uk
            </span>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    mailData: {},
  },
};
</script>

<style lang="scss" scoped></style>