2017-07-07 • 前端开发

Web 简历一定要设计的美美的

继续之前的项目, 之前我们通过最基本的HTML和CSS将Home模块的基本布局给搭建了一下, 整体的流程比较简单, 没有什么技术含量, 作为前端的入门篇看看也是个不错的选择, 可是说真的, 除了算法, 设计模式, 数据结构这些, 平时码代码真的有技术含量吗? 会写几个网页, 几个App, 几个后台就能上天吗? 好吧, 是我太奋青~

参考链接:

以下内容在上述文章基础上进行, 请事先查阅.

其实我做开发也没有多少时日, 也主要是兴趣为主, 当然从事开发工作也让我这毕业不久的孩子脱了贫, 从小我就不是一个爱学习的孩子, 从小英语就没有及格过, 印象很深的是中考那年满分150, 90分及格的卷子, 我居然考了89分, 四级考了多次都是以几分不过收场… 呵呵, 自证预言真是从小灵验, 导致我进入了中专之后进入了大专, 整天浑浑噩噩的无所事事, 篮球在我空虚的校园生活中无疑是打了一剂春药, 找到了一群志同道合的朋友, 良好的人际关系也成为了我唯一幸福的源泉.

话说穷则思变, 说的是一点也不错, 但如何改变这应该是我们这一代共同的迷茫, 这种迷茫经过不断的转变成为了现在的丧文化, 不知是从何开始, 我觉得这种状态不能继续下去了, 我开始寻找我真正喜欢的事情, 逐步的寻找不同的兴趣, 中专的时候我是计算机应用专业, 教的是一些最为基础的Photoshop / Flash / Dreamware / Database, 现在想想这可能是我现在作为开发的基础吧, 14年的WWDC中Swift的发布直接让我辞去了现有的工作, 正式进入了iOS开发, 想想这也是一个契机吧, 正所谓潜意识即是命运, 虽不能完全证伪, 但就像马云说的有时候”信”很重要, 也和我最近的思考相同 — “每个人都活在自己的想象之中, 在外人看来不过是自欺欺人罢了”.

闲扯了那么久, 我们进入今天的开发中来, 今天我们着重要讲的一个概念是Vue的组件封装以及父子组件间的传参, 组件封装我们在自定义nav中已经有了浅显的涉及, 传参方面我们先来看下官方的用法:

vue 传递参数

先留个印象就好, 我们将home模块先进行封装, 这是iOS开发时的习惯, 归因驱动下前端应该也是相同的道理吧, 我们先来看下home.vue:

class user

  <div class="user">
    <div class="user-block">
      <div class="icon">
        ![](../assets/icon.jpg)
      </div>
      <div class="row name">
        Shuangquan Zhu
      </div>
      <div class="row career">
        Designer / Developer
      </div>
      <div class="row location">
        Location: Shanghai
      </div>
      <div class="row social">
        <div class="indent"></div>
        <div class="github">
          ![](../assets/github.png)
        </div>
        <div class="jianshu">
          ![](../assets/blog.png)
        </div>
        <div class="wechat">
          ![](../assets/wechat.png)
        </div>
        <div class="home">
          ![](../assets/home.png)
        </div>
      </div>
    </div>
  </div>

...
.user .user-block .icon,
.user .user-block .icon img {
  margin: 0 auto;
  width: 280px;
  height: 280px;
  border-radius: 12px;
}

.user .user-block .icon {
  padding-bottom: 10px;
}
...
.user .user-block .name {
  color: #444;
  font-size: 22px;
  font-weight: bold;
}

.user .user-block .career {
  color: #666;
  font-size: 18px;
}

.user .user-block .location {
  color: #666;
  font-size: 18px;
}

.user .user-block .social div {
  width: 40px;
  height: 40px;
  float: left;
  position: relative;
  margin-left: 5px;
}

.user .user-block .social div img {
  position: absolute;
  width: 24px;
  height: 24px;
  left: calc(50% - 12px);
  top: calc(50% - 12px);
}

.user .user-block .social .indent {
  width: 44px;
  background-color: #f8f8f8;
}

没什么特别的地方, 用的都是最基本的div+css的方式, 没有任何的技巧, 在布局碰到瓶颈的时候使用空div进行排版真的是个不错的选择, 由于是虚拟dom的原因也没有性能方面的顾虑. 在设计方面, 字体颜色一般不会出现全黑色这种色调, 所以我们使用#333来代替最黑色, 看下效果:

在职业这一栏我将设计师放在了开发者前面, 原因是我在穷则思变的时间段, 不仅有开发这一个选择, 还有诸如3D建模, 室内设计, 平面设计, 原画设计, 之类的艺术考量, 可能和之前中专的时候学过Ps和Flash有关吧, 那是Flash这门课我记得是免考的, 原来那时的天赋就已经显现, 哈哈! 人总是能够在发生过的事情之后找到合理的解释, 真是人性的弱点啊, 顿时想到了卡耐基…

在这次的简历制作中, 设计方面是我比较头疼的部分, 我对的审美观比较自信, 但我并没有设计的基础, 什么光影设计, 扁平化之类的也没有概念, 仅凭我浅显的认知, 使用了最近很火的卡片式设计, 至少我觉得凭我的水平做成这样还是能够拿的出手, 以及计划之后去系统的学一下设计了…

完成了左边的部分, 我们继续来实现右边的部分:

class introduction

<div class="introduction">
    <div class="main">
      <div class="main-block">
        <h1>Summary</h1>
        <p>Shuangquan Zhu is a professional developer who focuses on iOS now. He has strong knowledge of Objective-C, Swift and Javascript. With these skills, he created quite a few quickly developer tools. He also leads the J1 iOS team to promote the project
          process.
        </p>
        <p>He crazy loves playing basketball with friends in spare time, He also loves traveling, writing and listening music. He is always willing to try new things, and keeping to learn from them.</p>
      </div>
    </div>
    <div class="left">
      <div class="left-block">
        <h2>Interest</h2>
        <ul>
          <li># Learn about high tech</li>
          <li># Play basketball</li>
          <li># Listen to music</li>
          <li># Apple products</li>
        </ul>
      </div>
    </div>
    <div class="right">
      <div class="right-block">
        <h2>Education</h2>
        <dl>
          <dd>Business Management - 2016</dd>
          <dt>East China University of Science and Technology</dt>
        </dl>
        <dl>
          <dd>Customs and International Freight - 2013</dd>
          <dt>Shanghai Maritime Academy</dt>
        </dl>
      </div>
    </div>
  </div>

这里有两个新的知识点, 通过ul / li 标签可以进行列表排列, 犹如UITableView. 通过dl / dd / dt 标签可以进行定义, 这个不是很好描述, 但是很有用, 当然你也可以用一个div全部都给打发了, 因为这都不重要!

...
.introduction .left .left-block ul li {
  color: #555;
  height: 30px;
  padding-left: 20px;
  list-style-type: none;
}
...
.introduction .right .right-block dl dd {
  padding-left: 20px;
  padding-right: 20px;
  color: #555;
}

.introduction .right .right-block dl dt {
  padding-left: 20px;
  padding-right: 20px;
  color: #999;
  font-size: 14px;
  padding-bottom: 10px;
}

简要的贴下css部分, li 标签的使用过程中请设置 list-style-type: none; 这是W3C的建议.

这个设计平平在我这里能打个60分吧, 不算难看, 但绝对算不上好看…

这里有个关键的东西漏了说了, 那就是字体, 我们在app.vue中设置全局字体:

#app {
  font-family: 'Chalkboard'
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

我们将全局字体设置为 Chalkboard.

接下来我我们继续projects模块的制作, 这个模块就用到了之前所说的vue父子控件传参的问题, 由于上篇有讲到怎么进行布局, 这篇就布局和设计一起来咯, 我们先将布局如下:

看这个设计, 我们就能够了解, 四个布局相同的控件可以抽出来作为一个子控件, 将其命名为project.vue.

<template>
<div class="project">
  <div class="project-block">
    <div class="icon">
      <a :href="href">![](src)</a>
    </div>
    <div class="download">
      <a :href="href">Download</a>
    </div>
    <div class="title">
      <h2>{name}</h2>
      <p>{description}</p>
    </div>
    <div class="desc">
      <ul>
        <li>{text1}</li>
        <li>{text2}</li>
        <li>{text3}</li>
      </ul>
    </div>
  </div>
</div>
</template>

在vue的html中, 通过:进行对标签的绑定, 通过{}进行对字符的绑定.

vue 绑定插值

...
download {
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 330px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  background-color: #3385ff;
  color: #fff;
  font-size: 20px;
}

.download a,
.download a:link,
.download a:visited,
.download a:hover {
  text-decoration: none;
  color: #fff;
}
...

其他之前说过的我就不多赘述了, 这次主要来看a标签的使用, a标签是用来做超链接的, 所以我们将css的伪类中设置text-decoration: none;并将字体颜色全部设置为白色, 关于伪类的更多用法, 可以在W3C中查看.

<script>
export default {
  data() {
    return {

    }
  },
  props: {
    src: String,
    href: String,
    name: String,
    description: String,
    text1: String,
    text2: String,
    text3: String
  }
}
</script>

进行控件接口参数的设置, 这是封装子控件的一个关键点, 在props中添加参数即可.

完成了子控件, 我们来进行父控件的实现, projects.vue.

<template>
<div>
  <div class="subtitle">
    <h1>Projects</h1>
  </div>
  <div class="projects">
    <div class="projects-block">
      <project src="http://upload-images.jianshu.io/upload_images/1229762-e41470fb14d50dd0.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" href="https://itunes.apple.com/us/app/%E5%81%A5%E4%B8%80%E7%BD%91-%E5%8D%8E%E6%B6%A6%E6%97%97%E4%B8%8B%E7%BD%91%E4%B8%8A%E8%8D%AF%E5%BA%97/id910027998?mt=8"
        name="J1 Mall" description="China Resources's online pharmacy" text1="Developed by J1 iOS team" text2="Developing version 3.8.5" text3="Enterprise main project"></project>
      <project src="http://upload-images.jianshu.io/upload_images/1229762-895d58180c1893e9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" href="https://itunes.apple.com/us/app/%E5%81%A5%E4%B8%80%E5%81%A5%E5%BA%B7/id994784918?mt=8" name="J1 Health"
        description="Professional patient consultation platform" text1="Developed by J1 iOS team" text2="Developing version 3.1.0" text3="Enterprise self-operated project"></project>
      <project src="http://upload-images.jianshu.io/upload_images/1229762-2aa0ac79354150f4.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" href="https://itunes.apple.com/cn/app/hua-run-tong/id1175972491?mt=8" name="HuaRun Tong" description="China Resources Integrated business platform"
        text1="Developed by J1 & CR Network" text2="Developing version 1.6.1" text3="Cooperation project with CR Network"></project>
      <project src="http://upload-images.jianshu.io/upload_images/1229762-f819fb27af63f404.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" href="https://itunes.apple.com/us/app/%E6%B9%96%E5%B7%9E%E4%B8%AD%E5%BF%83%E5%8C%BB%E9%99%A2-%E4%B8%93%E4%B8%9A%E7%89%88/id1098112284?mt=8"
        name="HuZhou Hospital" description="Simplify patient treatment and time" text1="Developed by J1 iOS team" text2="Developing version 1.0.0" text3="Outsourcing project"></project>
    </div>
  </div>
</div>
</div>
</template>

这样在使用上就很简单了, 就和一般的html标签一样, 进行传参即可, 当然也可以使用v-for来进行循环, 都是可以的, 我这边先写死, 这都不重要.

最后将projects模块引入index.vue中, 这部分就完成了, 来看一下效果: