准备 Header, Main, 和 Modal 三个组件。

1、reset.css 样式

编写 reset.css 样式：

/* /src/assets/styles/reset.css */

html, body {
  height: 100%;
}

body {
  font: caption;
  margin: 0;
  display: flex;
  flex-flow: column;
}

2、App 根组件

编辑 /renderer/src/App.vue：

<template>
  <div>
    <Header></Header>
    <Main></Main>
    <Modal></Modal>
  </div>
</template>

<script>
import Header from './components/Header'
import Main from './components/Main'
import Modal from './components/Modal'

export default {
  components: {
    Header,
    Main,
    Modal
  }
}
</script>

<style lang='stylus' scoped>
div
  height 100%
  position relative
</style>

3、Header 组件

在 components 文件夹下创建 Header.vue 组件： /src/components/Header.vue

<template>
  <header>
    <button id="show-modal">+</button>
    <input type="text" id="search" placeholder="Search">
  </header>
</template>

<script>
export default {

}
</script>

<style lang='stylus' scoped>
button {
  background: dodgerblue;
  color: white;
  border-radius: 5px;
  border: none;
  font-size: 20px;
  outline: none;
}

input {
  font-size: 20px;
  border-radius: 5px;
  border: 1px solid silver;
  padding: 0 10px;
}

input::placeholder {
  color: lightgray;
}

header {
  background: lightgray;
  display: flex;
  padding: 10px;
  font-weight: bold;
  border-bottom: 1px solid silver;
  box-shadow: 0px 10px 10px rgba(0,0,0,0.1);
}

#show-modal {
  padding: 0px 12px 5px;
  margin-right: 10px;
  font-size: 30px;
}

#search {
  flex-grow: 1;
}
</style>

4、Main 组件

在 components 文件夹下创建 Main.vue 组件： /src/components/Main.vue

<template>
  <main>
    <p id="no-items">No Items</p>
    <div id="items"></div>
  </main>
</template>

<script>
export default {

}
</script>

<style lang='stylus' scoped>
#items {
  flex-grow: 1;
}

#no-items {
  font-weight: bold;
  color: silver;
  text-align: center;
  width: 100%;
  position: absolute;
  top: 100px;
  z-index: -1;
}
</style>

5、modal 组件

在 components 文件夹下创建 Modal.vue 组件： /src/components/Modal.vue

<template>
  <div id="modal">
    <input type="text" id="url" placeholder="Enter URL">
    <button id="add-item">Add Item</button>
    <button id="close-modal">Cancel</button>
  </div>
</template>

<script>
export default {

}
</script>

<style lang='stylus' scoped>
#modal {
  position: absolute;
  top 0;
  left 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.85);
  display: flex;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
  display: none;
}

#url {
  flex-grow: 1;
  width: 100%;
  margin: 0 25px 15px;
  padding: 10px;
}

#modal button {
  padding: 10px;
}

#close-modal {
  background: white;
  color: black;
  margin-left: 15px;
}

#add-item {
  margin-left: 25px;
}

.read-item {
  display: flex;
  align-items: center;
  align-content: center;
  border-bottom: lightgray 2px solid;
  background: #FAFAFA;
  padding: 10px;
}

.read-item img {
  width: 20%;
  margin-right: 25px;
}
</style>