首页

2022-08-08 11:55:32 +08:00
parent 91e4292b5d
commit 3de32a3db6
30 changed files with 351 additions and 5 deletions
--- a/src/project/saas/AppHome/components/My.vue
+++ b/src/project/saas/AppHome/components/My.vue
@@ -0,0 +1,128 @@
+<template>
+  <div class="My">
+    <div class="content">
+      <div class="user-info">
+        <img src="../img/my/my-bg-user.png" alt="" class="bg-img">
+        <div class="top">
+          <div>汪周文</div>
+          <img src="../img/avatva.jpg" alt="">
+        </div>
+        <div class="bottom">武汉中卫慧通</div>
+      </div>
+      <div class="link" v-for="(item, index) in linkList" :key="index">
+        <div class="left">
+          <img :src="item.img" alt="">{{ item.title }}
+        </div>
+        <img src="../img/right-icon-999.png" alt="" class="right-icon">
+      </div>
+    </div>
+    
+  </div>
+</template>
+
+<script>
+export default {
+  name: "My",
+  data() {
+    return {
+      linkList: [
+        {
+          title: '头像上传',
+          img: require('../img/my/my-txsc.png')
+        },
+        {
+          title: '意见反馈',
+          img: require('../img/my/my-yjfk.png')
+        },
+        {
+          title: '联系我们',
+          img: require('../img/my/my-lxwm.png')
+        },
+        {
+          title: '帮助文档',
+          img: require('../img/my/my-bzwd.png')
+        }
+      ]
+    }
+  },
+  methods: {
+    
+  },
+  created() {
+    
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.My {
+  .content {
+    padding: 32px 32px 0;
+    .user-info{
+      width: 686px;
+      height: 248px;
+      border-radius: 8px;
+      background-color: #fff;
+      position: relative;
+      margin-bottom: 32px;
+      .bg-img {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+      }
+      .top {
+        display: flex;
+        justify-content: space-between;
+        padding: 28px 32px 36px;
+        border-bottom: 1px solid #eee;
+        div {
+          font-size: 40px;
+          font-family: PingFangSC-Medium, PingFang SC;
+          font-weight: 500;
+          color: #333;
+          line-height: 56px;
+        }
+        img {
+          width: 96px;
+          height: 96px;
+          border: 1px solid #DDD;
+        }
+      }
+      .bottom {
+        padding: 24px 32px;
+        font-size: 28px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #999;
+        line-height: 40px;
+      }
+    }
+    .link {
+      display: flex;
+      justify-content: space-between;
+      padding: 32px;
+      background-color: #fff;
+      border-radius: 8px;
+      margin-bottom: 24px;
+      .left {
+        font-size: 30px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        color: #333;
+        line-height: 42px;
+        img {
+          width: 48px;
+          height: 48px;
+          margin-right: 16px;
+          vertical-align: middle;
+        }
+      }
+      .right-icon {
+        width: 40px;
+        height: 40px;
+      }
+    }
+  }
+}
+</style>