sso-ssr/components/default/EmailLinkPage.vue

<template>
  <div class="email">
    <div class="header">
      <p>您好，<span>真烦</span></p>
    </div>
    <div class="body">
      <p class="first">您正在使用优软账户中心密码重置功能，您可以<a href="">点击这里</a>，或者复制以下链接通过浏览器打开：
        <a href=""> https://account.ubtob.com/sso/register?token=${token}#/valid </a>来完成重置密码。
        重置链接有效期24小时。
      </p>
      <p class="second">祝您使用愉快！</p>
      <p class="second">优软云团队</p>
    </div>
    <div class="footer">
      如果您有任何的疑问，请咨询 <a href="">客服中心</a>，联系电话：<a href="">400-830-1818</a>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'EmailLinkPage'
  }
</script>
<style lang="scss" scoped>
  .email{
    margin: 0 auto;
    width: 980px;
  }
  .email .header{
    padding-left: 5px;
    margin-top: 40px;
    width: 100%;
    height: 30px;
    line-height: 30px;
    background: #eee;
  }
  .email .header p{
    font-size:14px;
    font-weight: bold;
    color: #000;
  }
  .email .header p span{
    font-size: 14px;
    color: red;
  }
  .email .body{
    padding: 50px 0 30px 5px;
    width: 100%;
    background: #fff;
  }
  .email .body p{
    line-height: 25px;
    font-size: 14px;
    color: #333;
  }
  .email .body p a{
    font-size: 14px;
    color: #007ebf;
  }

  .email .body p.first{
    text-align: left;
  }
  .email .body p.second{
    margin-bottom: 0;
    text-align: right;
  }
  .email .footer{
      padding: 20px 0 60px 5px;
      font-size: 14px;
      color: #8c8c8c;
      border-top: 2px solid #989898;
  }
  .email .footer a{
        font-size: 14px;
        color: #007ebf;
  }
</style>