资源页面

Author: 吴博

src/assets/styles/header.less

@@ -1,14 +1,32 @@
+//.site-header {
+//  position: fixed;
+//  top: 0;
+//  left: 0;
+//  right: 0;
+//  background-color: #f5faff;
+//  padding: 0 0 0 200px;
+//  height: 60px;
+//  z-index: 99;
+//}
+
 .site-header {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
-  background-color: #f5faff;
-  padding: 0 0 0 200px;
-  height: 60px;
   z-index: 99;
+  height: 60px;
+  padding: 0 0 0 200px;
+  background-color: #fff;
+  .cd-box-shadow();
 }
 
+.site-header.none {
+  box-shadow: none;
+  background-color: #f5faff;
+}
+
+
 .site-header__logo {
   position: absolute;
   top: 0;
@@ -47,4 +65,4 @@
       }
     }
   }
-}
+}

src/assets/styles/main.less

@@ -6,3 +6,4 @@
 @import './sidebar.less';
 @import './homepage.less';
 @import './element-layout.less';
+@import './resources-list.less';

src/assets/styles/resources-list.less

@@ -0,0 +1,70 @@
+
+.resources {
+  position: fixed;
+  top: 60px;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  .title {
+    padding-top: 40px;
+    font-family: PingFangSC-Medium;
+    font-size: 24px;
+    color: #313131;
+    text-align: center;
+    line-height: 32px;
+  }
+  .desc {
+    margin-top: 16px;
+    margin-bottom: 40px;
+    font-family: PingFangSC-Regular;
+    font-size: 14px;
+    color: #999;
+    text-align: center;
+    line-height: 20px;
+  }
+  .resources-list {
+    width: 1200px;
+    padding: 0 15px;
+    margin: 0 auto;
+    &:after {
+      content: '';
+      display: block;
+      clear: both;
+    }
+    .resources-item {
+      float: left;
+      width: 360px;
+      height: 366px;
+      margin: 0 15px;
+      background-color: #fff;
+      box-shadow: 0 2px 20px 0 rgba(0,0,0,0.08);
+      border-radius: 4px;
+      .img {
+        width: 288px;
+        height: 184px;
+        padding: 36px 36px 30px;
+        box-sizing: content-box;
+        img {
+          width: 288px;
+          height: 184px;
+        }
+      }
+      .name {
+        margin-bottom: 12px;
+        font-family: PingFangSC-Medium;
+        font-size: 20px;
+        color: #313131;
+        text-align: center;
+      }
+      .description {
+        padding: 0 20px;
+        font-family: PingFangSC-Regular;
+        font-size: 14px;
+        line-height: 20px;
+        color: #999;
+        text-align: center;
+      }
+    }
+  }
+}
+

src/data/index.ts

@@ -237,7 +237,7 @@ const navMenu:any[] = [
   },
   {
     'text': '资源',
-    'name': 'resource'
+    'name': 'resources'
   }
 ];
 

src/router/index.js

@@ -29,6 +29,11 @@ const routes = [
     name: 'element-layout',
     component: (resolve) => require(['@/views/element-layout.vue'], resolve),
   },
+  {
+    path: '/resources',
+    name: 'resources',
+    component: (resolve) => require(['@/views/resources.vue'], resolve),
+  },
   {
     path: '/',
     name: 'homepage',

src/views/resources.vue

@@ -0,0 +1,67 @@
+<template>
+  <div id="app" class="site-wrap resources" :class="{ 'hide-sidebar': isHideSidebar }">
+    <x-header></x-header>
+    <div class="title">资源</div>
+    <div class="desc">这里是全栈式可复用资源库供大家下载</div>
+    <div class="resources-list">
+      <div class="resources-item">
+        <div class="img">
+          <img src="" alt="" />
+        </div>
+        <div class="name">模块设计资源</div>
+        <div class="description">
+          从 Element Template 快速调用常用组件，在提升设计效率的同时，保证统一的视觉风格
+        </div>
+      </div>
+      <div class="resources-item">
+        <div class="img">
+          <img src="" alt="" />
+        </div>
+        <div class="name">原型Axure组件资源</div>
+        <div class="description">
+          通过在 Axure 中导入 Element 组件库，可以在交互设计阶段方便地调用常用的组件
+        </div>
+      </div>
+      <div class="resources-item">
+        <div class="img">
+          <img src="" alt="" />
+        </div>
+        <div class="name">设计稿sketch资源</div>
+        <div class="description">
+          从 Element Template 快速调用常用组件，在提升设计效率的同时，保证统一的视觉风格
+        </div>
+      </div>
+    </div>
+    <x-pager></x-pager>
+    <div id="cd-modal" class="cd-modal cd-fade" v-html="code.modal_base"></div>
+  </div>
+</template>
+
+<script lang="ts">
+    import Vue from 'vue';
+    import { Component } from 'vue-property-decorator';
+
+    import XHeader from '@/views/header.vue';
+    import XPager from '@/views/pager.vue';
+    import menus from '@/data/principle.js';
+
+    import * as code from './component/modal';
+
+    @Component({
+        name: 'principle',
+        components: {
+            XHeader,
+            XPager
+        }
+    })
+
+    export default class extends Vue {
+        code: any = code;
+        isHideSidebar: boolean = false;
+        menus: any = menus;
+
+        sidebarToggle() {
+            return this.isHideSidebar = !this.isHideSidebar;
+        }
+    };
+</script>