my_loan/htmldev/TBTools/src/views/modules/mine/user.vue

<template>
  <el-row class="TT-user">
    <el-col class="nav">
      <router-link :to="{name: 'register'}">
        <img src="../../../../static/img/mine/icon_0.png" alt="">
        <p>免费用户可以使用所有收费方式是免费的功能，包括淘宝词库、指数转换等功能。虽然免费，但是功能非常多哦！</p>
        <button class="default">免费注册</button>
      </router-link>
      <a href="javascript:;">
        <img src="../../../../static/img/mine/icon_1.png" alt="">
        <p>会员用户可以使用所有收费方式是会员的功能，主要用于浏览器插件。</p>
        <button class="primary">立即购买</button>
      </a>
      <a href="javascript:;">
        <img src="../../../../static/img/mine/icon_2.png" alt="">
        <p>积分用户可以使用所有收费方式是积分的功能，主要用于官网的积分消耗的功能！</p>
        <button class="primary">立即购买</button>
      </a>
    </el-col>
  </el-row>
</template>

<script>
export default {
  name: 'user'
}
</script>

<style lang="scss" scoped>
.TT-user {
  width: 100%;
  padding-top: 118px;
  background: url("../../../../static/img/mine/bg.png") center 0/1060px 231px no-repeat;

  .nav {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  a {
    position: relative;
    left: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 180px;
    height: 301px;
    margin-left: 12px;
    border-radius: 13px;
    text-decoration: none;
    box-shadow: 0 2px 17px 0 rgba(0, 0, 0, 0.2);
    background: #FFFFFF;

    &:nth-of-type(1) {
      margin-left: 0;
    }

    img {
      display: block;
      width: 180px;
      height: 114px;
    }

    p {
      width: 141px;
      margin-top: 20px;
      line-height: 17px;
      font-size: 12px;
      color: #666666;
    }

    button {
      position: absolute;
      left: 50%;
      bottom: 20px;
      width: 136px;
      height: 33px;
      margin-top: 31px;
      margin-left: -68px;
      border-radius: 3px;
      outline: none;
      line-height: 31px;
      font-size: 13px;
      cursor: pointer;
      background: transparent;

      &.default {
        color: #999999;
        border: 1px solid #999999;
      }

      &.primary {
        color: #332C2B;
        border: 1px solid #332C2B;
      }
    }
  }
}
</style>