TBtools-个人中心

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

@@ -1,5 +1,23 @@
 <template>
-  <div>user-index</div>
+  <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>
@@ -9,5 +27,75 @@ export default {
 </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>