百度AI

src/project/baiduAI/AppMy/AppMy.vue

@@ -0,0 +1,145 @@
+<template>
+  <div class="AppMy">
+    <u-navbar title-color="#000" title-width="300" title-size="32" :title-bold="true" :background="backgroundNavbar"></u-navbar>
+      <div class="my-bg"></div>
+      <div class="my-content">
+        <div class="user-info">
+          <div class="user-left">
+            <img src="./img/header-bg.png" alt="" class="user-img">
+          </div>
+          <div class="user-right">
+            <p>张总</p>
+            <div>党委书记</div>
+          </div>
+        </div>
+        <div class="app-list">
+          <div class="item">
+            <div class="item-left">
+              <img src="./img/icon1.png" alt="" class="icon-img">应用1
+            </div>
+            <div class="item-right">
+              <img src="./img/right-icon.png" alt="" class="right-img">
+            </div>
+          </div>
+          <div class="item">
+            <div class="item-left">
+              <img src="./img/icon2.png" alt="" class="icon-img">应用2
+            </div>
+            <div class="item-right">
+              <img src="./img/right-icon.png" alt="" class="right-img">
+            </div>
+          </div>
+        </div>
+      </div>
+  </div>
+</template>
+<script>
+  import {mapActions, mapState} from 'vuex'
+
+  export default {
+    name: 'AppDialogue',
+    appName: 'Copilot小助理（个人中心）',
+    customNavigation: true,
+
+    data() {
+      return {
+        backgroundNavbar: {
+          background: 'url(https://cdn.cunwuyun.cn/wechat/biaopin/residentAssistant/header-bg.jpeg) no-repeat',
+          backgroundSize: 'cover',
+        },
+      }
+    },
+
+    computed: {
+      ...mapState(['user', 'token']),
+    },
+
+    onLoad() {
+
+    },
+
+    methods: {
+      ...mapActions(['autoLogin']),
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  .AppMy {
+    .my-bg {
+      width: 100%;
+      height: 420px;
+      background-image: url("https://cdn.cunwuyun.cn/wechat/biaopin/residentAssistant/content-top-bg.png");
+      position: fixed;
+      top: 184px;
+      left: 0;
+      z-index: 1;
+      background-size: 100vw;
+      background-repeat: no-repeat;
+    }
+    .my-content {
+      .user-info {
+        display: flex;
+        padding: 76px 0 56px 48px;
+        .user-left {
+          .user-img {
+            display: inline-block;
+            width: 96px;
+            height: 96px;
+            border: 4px solid #FFF;
+            border-radius: 50%;
+            margin-right: 26px;
+          } 
+        }
+        .user-right {
+          padding-top: 4px;
+          p {
+            height: 48px;
+            font-family: PingFangSC-SNaNpxibold;
+            font-weight: 600;
+            font-size: 34px;
+            color: #333;
+            margin-bottom: 4px;
+          }
+          div {
+            height: 36px;
+            font-family: PingFangSC-Regular;
+            font-size: 26px;
+            color: #8A929F;
+          }
+        }
+      }
+      .app-list {
+        width: calc(100% - 64px);
+        margin: 0 0 0 32px;
+        padding: 20px 32px;
+        box-sizing: border-box;
+        background-color: #fff;
+        border-radius: 16px;
+        .item {
+          display: flex;
+          justify-content: space-between;
+          padding: 26px 0 28px 0;
+          .item-left {
+            line-height: 40px;
+            font-family: PingFangSC-Regular;
+            font-size: 30px;
+            color: #222;
+            .icon-img {
+              width: 40px;
+              height: 40px;
+              margin-right: 24px;
+              vertical-align: bottom;
+            }
+          }
+          .item-right {
+            .right-img {
+              width: 28px;
+              height: 28px;
+            }
+          }
+        }
+      }
+    }
+  }
+</style>