fix: update account page demo (#92)

chen-xt · GitHub
1 parent 7a000366
Showing 8 changed files with 51 additions and 22 deletions
src/assets/images/demo.png
src/views/demo/page/account/center/Application.vue
src/views/demo/page/account/center/Article.vue
src/views/demo/page/account/center/Project.vue
src/views/demo/page/account/center/data.tsx
src/views/demo/page/account/center/index.vue
src/views/demo/page/account/setting/BaseSetting.vue
src/views/demo/page/account/setting/index.vue
@@ -29,7 +29,7 @@
 </template>
 <script lang="ts">
   import { defineComponent } from 'vue';
-  import { List, Card, Row, Col } from 'ant-design-vue';
+  import { List, Card } from 'ant-design-vue';
   import Icon from '/@/components/Icon/index';
   import { applicationList } from './data';
  
@@ -38,8 +38,6 @@
       List,
       ListItem: List.Item,
       Card,
-      Row,
-      Col,
       Icon,
     },
     setup() {
@@ -72,7 +72,8 @@
       padding: 0 16px;
       color: rgba(0, 0, 0, 0.45);
  
-      &:not(:last-child) {
+      &:nth-child(1),
+      &:nth-child(2) {
         border-right: 1px solid rgba(206, 206, 206, 0.4);
       }
  
@@ -19,7 +19,7 @@
 </template>
 <script lang="ts">
   import { defineComponent } from 'vue';
-  import { List, Card, Row, Col } from 'ant-design-vue';
+  import { List, Card } from 'ant-design-vue';
   import demoImg from '/@/assets/images/demo.png';
   import { projectList } from './data';
  
@@ -28,8 +28,6 @@
       List,
       ListItem: List.Item,
       Card,
-      Row,
-      Col,
     },
     setup() {
       return {
@@ -51,6 +49,7 @@
  
       img {
         width: 100%;
+        height: 130px;
       }
  
       &-title {
@@ -42,14 +42,14 @@ export const teams: ListItem[] = [
     color: '#00adf7',
   },
   {
-    icon: 'ant-design:dribbble-circle-filled',
+    icon: 'ant-design:behance-square-filled',
     title: '科学搬砖组',
-    color: '#ff4000',
+    color: '#7c51b8',
   },
   {
-    icon: 'ant-design:behance-square-filled',
+    icon: 'ant-design:dribbble-circle-filled',
     title: '程序员日常',
-    color: '#7c51b8',
+    color: '#ff4000',
   },
 ];
  
@@ -124,8 +124,8 @@ export const projectList = (() =&gt; {
   const result: any[] = [];
   for (let i = 0; i < 8; i++) {
     result.push({
-      title: 'Angular',
-      content: '那是一种内在的东西， 他们到达不了，',
+      title: 'Vben Admin',
+      content: '基于Vue Next, TypeScript, Ant Design实现的一套完整的企业级后台管理系统。',
     });
   }
   return result;
@@ -51,7 +51,7 @@
 </template>
  
 <script lang="ts">
-  import { Row, Col, Tag, Tabs } from 'ant-design-vue';
+  import { Tag, Tabs } from 'ant-design-vue';
   import { defineComponent } from 'vue';
   import { CollapseContainer } from '/@/components/Container/index';
   import Icon from '/@/components/Icon/index';
@@ -66,8 +66,6 @@
     components: {
       CollapseContainer,
       Icon,
-      Row,
-      Col,
       Tag,
       Tabs,
       TabPane: Tabs.TabPane,
@@ -130,7 +128,7 @@
       &__team {
         &-item {
           display: inline-block;
-          padding: 4px 18px;
+          padding: 4px 24px;
         }
  
         span {
 <template>
   <CollapseContainer title="基本设置" :canExpan="false">
-    <BasicForm @register="register" />
+    <a-row :gutter="24">
+      <a-col :span="14">
+        <BasicForm @register="register" />
+      </a-col>
+      <a-col :span="10">
+        <div class="change-avatar">
+          <div class="mb-2">头像</div>
+          <img width="140" :src="headerImg" />
+          <Upload :showUploadList="false">
+            <Button type="ghost" class="ml-5">
+              <Icon icon="ant-design:upload-outlined" />更换头像
+            </Button>
+          </Upload>
+        </div>
+      </a-col>
+    </a-row>
     <Button type="primary" @click="handleSubmit">更新基本信息</Button>
   </CollapseContainer>
 </template>
 <script lang="ts">
-  import { Button } from 'ant-design-vue';
+  import { Button, Upload } from 'ant-design-vue';
   import { defineComponent, onMounted } from 'vue';
   import { BasicForm, useForm } from '/@/components/Form/index';
   import { CollapseContainer } from '/@/components/Container/index';
+  import Icon from '/@/components/Icon/index';
  
   import { useMessage } from '/@/hooks/web/useMessage';
  
+  import headerImg from '/@/assets/images/header.jpg';
   import { accountInfoApi } from '/@/api/demo/account';
   import { baseSetschemas } from './data';
  
   export default defineComponent({
-    components: { BasicForm, CollapseContainer, Button },
+    components: { BasicForm, CollapseContainer, Button, Upload, Icon },
     setup() {
       const { createMessage } = useMessage();
  
@@ -32,6 +49,7 @@
       });
  
       return {
+        headerImg,
         register,
         handleSubmit: () => {
           createMessage.success('更新成功！');
@@ -40,3 +58,13 @@
     },
   });
 </script>
+
+<style lang="less" scoped>
+  .change-avatar {
+    img {
+      display: block;
+      margin-bottom: 15px;
+      border-radius: 50%;
+    }
+  }
+</style>
 <template>
   <ScrollContainer>
     <div ref="wrapperRef" class="m-4 account">
-      <Tabs tab-position="left">
+      <Tabs tab-position="left" :tabBarStyle="tabBarStyle">
         <template v-for="item in settingList" :key="item.key">
           <TabPane :tab="item.name">
             <component :is="item.component" />
@@ -35,7 +35,12 @@
       MsgNotify,
     },
     setup() {
-      return { settingList };
+      return {
+        settingList,
+        tabBarStyle: {
+          width: '220px',
+        },
+      };
     },
   });
 </script>