topics update

components/breadcrumb.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="breadcrumb">
+    <el-breadcrumb separator-class="el-icon-arrow-right">
+      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+      <el-breadcrumb-item
+        v-for="location of locations"
+        :key="location.url"
+        :to="{path: location.url}"
+      >{{location.title}}</el-breadcrumb-item>
+    </el-breadcrumb>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ['locations'],
+  computed: {
+  },
+  mounted() {
+  },
+  methods: {
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.breadcrumb {
+  padding-bottom: 10px;
+}
+</style>

components/editor-aside.vue

@@ -0,0 +1,79 @@
+<template>
+  <div class="aside">
+    <h6>文字内容标准</h6>
+    <el-timeline class="list">
+      <el-timeline-item v-for="(activity, index) in activities" :key="index">{{activity.content}}</el-timeline-item>
+    </el-timeline>
+  </div>
+</template>
+
+<script>
+export default {
+  // props: ['locations'],
+  data() {
+    return {
+      activities: [
+        {
+          content: '1. 唤起系统自带的图片选择器'
+        },
+        {
+          content: '2. 只允许选择单张图片'
+        },
+        {
+          content: '3. 如果选择的不是图片文件'
+        },
+        {
+          content: '5. 图片区显示转菊花图标'
+        },
+        {
+          content: '6. 即时显示在图片区'
+        },
+        {
+          content: '7. 如果已有图片保留原图'
+        }
+      ]
+    };
+  },
+  computed: {
+  },
+  mounted() {
+  },
+  methods: {
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.aside {
+  position: relative;
+  float: right;
+  width: 250px;
+  background: #fff;
+  h6 {
+    position: relative;
+    padding: 14px 0;
+    text-align: center;
+    font-size: 14px;
+    font-family: PingFangSC-Semibold;
+    font-weight: 600;
+    color: rgba(51, 51, 51, 1);
+    line-height: 21px;
+    &::after {
+      content: "";
+      position: absolute;
+      left: 50%;
+      bottom: 0;
+      transform: translateX(-50%);
+      width: 230px;
+      height: 0px;
+      border-bottom: 2px dashed rgba(240, 240, 240, 1);
+    }
+  }
+  .list {
+    padding: 25px 16px;
+    .el-timeline-item__wrapper {
+      top: 0;
+    }
+  }
+}
+</style>

components/editor.vue

@@ -0,0 +1,159 @@
+<template>
+  <div class="editor">
+    <el-input v-model="title" class="title" placeholder="请输入标题"></el-input>
+    <el-input v-model="subTitle" class="sub-title" placeholder="请输入导语（选填）"></el-input>
+    <el-input v-model="content" class="content" placeholder="请输入正文…"></el-input>
+    <h5 class="label">封面图</h5>
+    <el-upload action="#" list-type="picture-card" :auto-upload="false">
+      <i slot="default" class="el-icon-plus"></i>
+      <div slot="file" slot-scope="{file}">
+        <img class="el-upload-list__item-thumbnail" :src="file.url" alt />
+        <span class="el-upload-list__item-actions">
+          <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
+            <i class="el-icon-zoom-in"></i>
+          </span>
+          <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
+            <i class="el-icon-download"></i>
+          </span>
+          <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
+            <i class="el-icon-delete"></i>
+          </span>
+        </span>
+      </div>
+    </el-upload>
+    <el-dialog :visible.sync="dialogVisible">
+      <img width="100%" :src="dialogImageUrl" alt />
+    </el-dialog>
+    <h5 class="label">选择分类</h5>
+    <el-select v-model="value" placeholder="请选择">
+      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
+    </el-select>
+    <h5 class="label">标签</h5>
+    <el-select
+      v-model="tags"
+      multiple
+      filterable
+      allow-create
+      default-first-option
+      placeholder="请选择文章标签"
+    >
+      <el-option
+        v-for="item in tagOptions"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value"
+      ></el-option>
+    </el-select>
+    <footer>
+      <el-button type="primary">发布</el-button>
+      <el-button>取消</el-button>
+    </footer>
+  </div>
+</template>
+
+<script>
+export default {
+  // props: ['locations'],
+  data() {
+    return {
+      title: '',
+      subTitle: '',
+      content: '',
+      dialogImageUrl: '',
+      dialogVisible: false,
+      disabled: false,
+      options: [{
+        value: '选项1',
+        label: '黄金糕'
+      }, {
+        value: '选项2',
+        label: '双皮奶'
+      }, {
+        value: '选项3',
+        label: '蚵仔煎'
+      }, {
+        value: '选项4',
+        label: '龙须面'
+      }, {
+        value: '选项5',
+        label: '北京烤鸭'
+      }],
+      value: '',
+      tagOptions: [{
+        value: 'HTML',
+        label: 'HTML'
+      }, {
+        value: 'CSS',
+        label: 'CSS'
+      }, {
+        value: 'JavaScript',
+        label: 'JavaScript'
+      }],
+      tags: []
+    };
+  },
+  computed: {
+  },
+  mounted() {
+  },
+  methods: {
+    handleRemove(file) {
+      console.log(file);
+    },
+    handlePictureCardPreview(file) {
+      this.dialogImageUrl = file.url;
+      this.dialogVisible = true;
+    },
+    handleDownload(file) {
+      console.log(file);
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.editor {
+  position: relative;
+  padding: 20px;
+  width: 740px;
+  background: #fff;
+  .title,
+  .sub-title {
+    .el-input__inner {
+      padding: 0;
+      border: 0;
+      border-radius: 0;
+    }
+  }
+  .title {
+    margin: 10px auto 20px;
+    font-size: 28px;
+    font-family: PingFangSC-Medium;
+    font-weight: 500;
+    color: rgba(29, 42, 58, 1);
+    line-height: 40px;
+  }
+  .sub-title {
+    margin-bottom: 28px;
+    height: 18px;
+    font-size: 13px;
+    font-family: PingFangSC-Regular;
+    font-weight: 400;
+    color: rgba(145, 154, 167, 1);
+    line-height: 18px;
+    border-left: 2px solid #0093fd;
+    .el-input__inner {
+      height: 18px;
+      line-height: 18px;
+    }
+  }
+  .label {
+    margin: 20px auto 10px;
+    font-size: 13px;
+    font-family: PingFangSC-Medium;
+    font-weight: 500;
+    color: rgba(25, 34, 46, 1);
+    line-height: 18px;
+  }
+}
+</style>

package.json

@@ -16,8 +16,10 @@
     "@nuxtjs/proxy": "^1.3.1",
     "cross-env": "^5.2.0",
     "element-ui": "^2.4.11",
+    "node-sass": "^4.12.0",
     "nuxt": "^2.6.3",
-    "qs": "^6.7.0"
+    "qs": "^6.7.0",
+    "sass-loader": "^7.1.0"
   },
   "devDependencies": {
     "less": "^3.9.0",

pages/topics/create.vue

@@ -1,13 +1,17 @@
 <template>
-  <pc v-if="isPC" :com="com" :dev="dev"></pc>
-  <mobile v-else :com="com" :dev="dev"></mobile>
+  <div>
+    <breadcrumb :locations="locations"></breadcrumb>
+    <editor-aside></editor-aside>
+    <editor></editor>
+  </div>
 </template>
 
 <script>
 import { mapState } from 'vuex'
 // import http from '@/plugins/http'
-import pc from '@/components/type/vip/pc'
-import mobile from '@/components/type/vip/mobile'
+import breadcrumb from '@/components/breadcrumb'
+import editorAside from '@/components/editor-aside'
+import editor from '@/components/editor'
 import getDeviceType from '@/mixins/getDeviceType'
 import qs from 'qs';
 
@@ -20,13 +24,24 @@ export default {
     title: '发布文章-技术圈',
   },
   components: {
-    pc,
-    mobile,
+    breadcrumb,
+    editor,
+    editorAside,
   },
   mixins: [getDeviceType],
   data() {
     return {
-      vipList: []
+      locations: [
+        {
+          url: 'https://jishuin.proginn.com/',
+          title: '技术圈'
+        },
+        {
+          url: '/topics/create',
+          title: '发布'
+        }
+      ],
+      vipList: [],
     }
   },
   computed: {