feat: update_team_ui

DreamStacks · Sep 24, 2019 · 85e56fc · 85e56fc
1 parent 5bc3734
commit 85e56fc
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 27 deletions.
diff --git a/src/views/about/index.vue b/src/views/about/index.vue
@@ -1,5 +1,27 @@
 <template>
-  <div>About</div>
+  <div class="block">
+    <el-timeline>
+      <el-timeline-item timestamp="2019/9/24-至今" placement="top">
+        <el-card class="ds-card">
+          <h2>version 0.2.0 → 0.2.3</h2>
+          <p>· puppetsheep 设计并制作about页面</p>
+          <p>· Ihoey 优化代码及相关图片</p>
+          <p>· puppetsheep 设计并制作团队介绍页</p>
+          <p>· puppetsheep 重新设计界面，并调整相关代码</p>
+        </el-card>
+      </el-timeline-item>
+      <el-timeline-item timestamp="2019/5/10-2019/9/23" placement="top">
+        <el-card class="ds-card1">
+          <h2>version 0.1.0 → 0.1.4</h2>
+          <p>· puppetsheep 补充TDK，由Ihony加入</p>
+          <p>· Ihoey 搭建项目框架</p>
+          <p>· Plus Lin 设计logo并加入项目</p>
+          <p>· DreamStacks成员参与并加入组织</p>
+          <p>· puppetsheep 发起项目</p>
+        </el-card>
+      </el-timeline-item>
+    </el-timeline>
+  </div>
 </template>
 <script>
 export default {
@@ -10,4 +32,21 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
+p{
+  color: rgb(221, 221, 221);
+}
+.block {
+  text-align: left;
+  margin: 60px auto;
+}
+.ds-card {
+  border: 0;
+  background-color: rgba(104, 123, 209, 0.4);
+  color: rgb(255, 255, 255);
+}
+.ds-card1 {
+  border: 0;
+  background-color: rgba(204, 113, 77, 0.4);
+  color: rgb(255, 255, 255);
+}
 </style>
diff --git a/src/views/team/index.vue b/src/views/team/index.vue
@@ -1,21 +1,22 @@
 <template>
   <div class="ds-team">
     <el-card
-      v-for="(item, index) in teamList"
+      v-for=" item in teamList"
       :key="item.name"
-      :class="['ds-team-card', index%2 ? 'ds-team-right' : 'ds-team-left']">
+      class="ds-team-card ds-team-left">
       <img :src="item.avatar" alt="头像" class="ds-team-avatar">
       <div class="ds-team-des">
         <tr>{{ item.name }}</tr>
-        <tr>{{ item.github }}</tr>
+        <tr><a :href="item.github" target="_block">{{ item.github }}</a> </tr>
         <tr>{{ item.des }}</tr>
-        <tr>{{ item.website }}</tr>
+        <tr><a :href="item.website" target="_block">{{ item.website }}</a> </tr>
       </div>
     </el-card>
   </div>
 </template>
 
 <script>
+
 export default {
   data() {
     return {
@@ -26,14 +27,16 @@ export default {
           name: 'puppetsheep',
           github: 'https://github.com/puppetsheep',
           des: '项目发起人，UI设计，部分技术开发支持，文案',
-          website: 'https://puppetsheep.github.io'
+          website: 'https://puppetsheep.github.io',
+          bgcolor: 'rgba(84, 207, 238, 0.3)'
         },
         {
           avatar: 'https://avatars3.githubusercontent.com/u/14155573?s=460&v=4',
           name: 'Ihoey',
           github: 'https://github.com/ihoey',
           des: '项目负责人、技术支持、架构、项目指导',
-          website: 'https://blog.ihoey.com/'
+          website: 'https://blog.ihoey.com',
+          bgcolor: 'rgba(238, 94, 84, 0.3)'
         }
       ]
     }
@@ -42,6 +45,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+$ds-color1 : rgba(84, 207, 238, 0.3);
+$ds-color2 : rgba(238, 94, 84, 0.3);
 .ds-team {
   // display: flex;
   &-avatar {
@@ -50,8 +55,9 @@ export default {
     margin: 0px 18px 18px 0px;
   }
   &-card {
+    border: 0;
     margin: 3% 0;
-    width: 75%;
+    width: 100%;
   }
   &-des {
     color: white;
@@ -63,31 +69,30 @@ export default {
         float: left;
       }
       &-des {
-        margin: 0 60px;
         line-height: 24px;
       }
     }
     &.ds-team-card {
       text-align: left;
-      background-color: rgba(84, 207, 238, 0.3);
-    }
-  }
-  &-right {
-    .ds-team {
-      &-avatar,
-      &-des {
-        float: right;
-      }
-      &-des {
-        margin-right: 30px;
-        text-align: right;
-        line-height: 24px;
-      }
-    }
-    &.ds-team-card {
-      text-align: right;
-      background-color: rgba(238, 94, 84, 0.3);
+      background-color: $ds-color1;
     }
   }
+  // &-right {
+  //   .ds-team {
+  //     &-avatar,
+  //     &-des {
+  //       float: right;
+  //     }
+  //     &-des {
+  //       margin-right: 30px;
+  //       text-align: right;
+  //       line-height: 24px;
+  //     }
+  //   }
+  //   &.ds-team-card {
+  //     text-align: right;
+  //     background-color: $ds-color2;
+  //   }
+  // }
 }
 </style>