Merge branch 'feature-typography' into feature-editor

src/prototype/typography.vue

@@ -0,0 +1,377 @@
+<template>
+  <section class="slides" contenteditable>
+    <section class="page">
+      <h1>界面布局排版原型</h1>
+      <div>本组件用来演示幻灯片放映界面的布局排版</div>
+    </section>
+    <section class="page">
+      <h3>无序列表</h3>
+      <ul>
+        <li>豆腐花：费时间快点发哈数据库恢复的空间</li>
+        <li>{{ chineseLorem }}</li>
+        <li>{{ englishLorem }}</li>
+        <li>{{ chineseLongLorem }}</li>
+      </ul>
+    </section>
+    <section class="page">
+      <h3>有序列表</h3>
+      <ol>
+        <li>豆腐花：费时间快点发哈数据库恢复的空间</li>
+        <li>{{ chineseLorem }}</li>
+        <li>{{ englishLorem }}</li>
+        <li>{{ chineseLongLorem }}</li>
+      </ol>
+    </section>
+    <section class="page">
+      <h3>图片</h3>
+      <img src="./example.png" alt="" />
+    </section>
+  </section>
+</template>
+
+<script>
+export default {
+  data: function() {
+    return {
+      chineseLorem: '豆腐花：费时间快点发哈数据库恢复的空间',
+      chineseLongLorem:
+        '地方会计史蒂夫好困睡觉啊回复科技示范户史蒂夫史蒂夫，史蒂夫说史蒂夫史蒂夫收费的爱上，是否是否打算史蒂夫史蒂夫史蒂夫说当时的发史蒂夫撒东方是否大。是的发送发送到发史蒂夫撒的发送到发撒东方史蒂夫撒东方四大发史蒂夫，史蒂夫撒东方撒大发史蒂夫。',
+      englishLorem:
+        'Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus mollitia itaque vel consectetur beatae vero porro rerum ea blanditiis deserunt nisi voluptatibus amet quasi id praesentium, dolores enim! Mollitia, alias.'
+    }
+  }
+}
+</script>
+
+<style>
+</style>
+
+<style lang="scss" scoped>
+.page {
+  display: flex;
+  flex-direction: column;
+
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+
+  box-sizing: border-box;
+  border-bottom: 1px solid gray; //dev
+  font-weight: 500;
+
+  & h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  div,
+  p,
+  li {
+    width: 100%;
+  }
+}
+
+.slides {
+  box-sizing: border-box;
+  padding: 0 12vw;
+  text-align: justify;
+  margin: 0 auto;
+  outline: none;
+
+  line-height: 1.8;
+  word-break: break-word;
+  word-wrap: break-word;
+
+  font-size: 26px;
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-weight: 600;
+    text-align: left;
+  }
+
+  h1 {
+    font-size: 1.88em;
+    margin: 1.25em 0 1.25em 0;
+  }
+
+  h2 {
+    font-size: 1.56em;
+    margin: 2.5em 0 1.56em 0;
+  }
+
+  h3 {
+    font-size: 1.38em;
+    margin: 2.19em 0 1.25em 0;
+  }
+
+  h4 {
+    font-size: 1.25em;
+    margin: 1.56em 0 0.94em 0;
+  }
+
+  h5 {
+    font-size: 1em;
+    margin: 1.25em 0 0.63em 0;
+  }
+
+  h6 {
+    font-size: 1em;
+    margin: 1.25em 0 0.63em 0;
+  }
+
+  p {
+    margin: 0.44em 0;
+  }
+
+  li {
+    margin: 0.19em;
+  }
+
+  ul,
+  ol {
+    list-style: none;
+    padding-left: 1em;
+    margin-top: 0.3em;
+    margin-bottom: 0.8em;
+  }
+
+  ul > li::before {
+    content: '\02022';
+    display: inline-block;
+    color: #1976d2;
+    width: 1em;
+    margin-left: -1em;
+  }
+
+  ol {
+    counter-reset: li;
+    margin: 0 0 0 0.5em;
+
+    li {
+      text-align: left;
+    }
+  }
+
+  ol > li::before {
+    font-family: 'Courier', 'Courier New', monospace !important;
+    overflow: hidden;
+    font-size: 1em;
+    line-height: 0;
+    content: counter(li) '.';
+    color: #1976d2;
+    display: inline;
+    margin-left: -1.6em;
+    margin-right: 0.4em;
+    text-align: right;
+    counter-increment: li;
+  }
+
+  blockquote {
+    margin: 0.63em 0;
+    padding: 0.31em 0.94em;
+    border-left: #fbc02d 0.25em solid;
+    background: #fffad3;
+    position: relative;
+
+    &::before {
+      content: '!';
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 0.75em;
+      font-family: monospace;
+      color: white;
+      position: absolute;
+      left: -0.69em;
+      top: 1em;
+      width: 0.88em;
+      height: 0.88em;
+      background: #fbc02d;
+      border: 0.13em #fbc02d solid;
+      border-radius: 50%;
+    }
+  }
+
+  a {
+    text-decoration: underline solid transparent;
+    transition: 0.2s all ease-out;
+
+    &:hover {
+      text-decoration: underline solid #ccc;
+    }
+  }
+
+  li > a,
+  p > a {
+    color: #1976d2;
+  }
+
+  img {
+    max-width: 100%;
+    max-height: 100vh;
+    margin: 0.94em auto 1.88em auto;
+    display: block;
+    box-shadow: 0 0.13em 0.63em 0 #e5e5e5;
+  }
+
+  pre {
+    padding: 0.63em 0.94em;
+    border: gray 0.06em solid;
+  }
+
+  code {
+    overflow: auto;
+    word-break: normal;
+    padding: 0 0.19em;
+    font-family: 'Menlo', 'Courier New', monospace;
+    color: #1899ba;
+    font-size: 0.88em;
+  }
+}
+</style>
+
+<style lang="scss" scoped>
+// 重置所有默认样式
+body {
+  font-family: sans-serif;
+}
+
+html,
+body,
+div,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+input,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+textarea,
+article,
+aside,
+audio,
+canvas,
+figure,
+footer,
+header,
+mark,
+menu,
+nav,
+section,
+time,
+video {
+  margin: 0;
+  padding: 0;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: 100%;
+  font-weight: normal;
+}
+
+article,
+aside,
+dialog,
+figure,
+footer,
+header,
+hgroup,
+nav,
+section,
+blockquote {
+  display: block;
+}
+
+ul,
+ol {
+  list-style: none;
+}
+
+img {
+  border: 0 none;
+  vertical-align: top;
+}
+
+blockquote,
+q {
+  quotes: none;
+}
+
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+  content: none;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+strong,
+em,
+i {
+  font-style: normal;
+  font-weight: normal;
+}
+
+ins {
+  text-decoration: underline;
+}
+
+del {
+  text-decoration: line-through;
+}
+
+mark {
+  background: none;
+}
+
+input::-ms-clear {
+  display: none !important;
+}
+
+body {
+  background: #fff;
+}
+
+a {
+  text-decoration: none;
+  color: #333;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+</style>

src/router/index.js

@@ -12,6 +12,10 @@ const routes = [{
   path: '/editor',
   name: 'editor',
   component: () => import('../views/editor/EditorView.vue')
+}, {
+  path: '/typography',
+  name: 'typography',
+  component: () => import('../prototype/typography.vue')
 }]
 
 const router = new VueRouter({

src/views/Home.vue

@@ -1,7 +1,8 @@
 <template>
   <div>
     调试链接：<br />
-    1. <router-link to="/editor">编辑器</router-link>
+    1. <router-link to="/editor">编辑器</router-link> 2.
+    <router-link to="/typography">排版布局原型</router-link>
   </div>
 </template>
 
@@ -9,5 +10,5 @@
 export default {}
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 </style>