ssti-CollegeManage/src/views/projectApplicationApply2.vue

<template>
      <div class="projectApplicationApply2">
        <div class="left">
          <div class="sx">
            <div class="qiu"></div>
          </div>
          <div class="leftTits">
            <span>项目创新点</span>
            <span>预期取得的效果</span>
            <span>实施计划</span>
            <span>下一步</span>
          </div>
        </div>
        <div class="right">
            <div class="pA1Header">
              <div class="pAHeader1">项目立项申请</div>
              <el-button class="pAHeader3" @click="backBtn1" type="primary" size="mini">返回</el-button>
            </div>
            <hr>
            <div>
              <p class="pTit">项目创新点</p>
              <div class="editor">
                <vue-editor  :editorToolbar="customToolbar" v-model="data.contentOne"></vue-editor>
              </div>
            </div>
            <div>
              <p class="pTit">预期取得的成果</p>
              <div>
                <p class="pTit2">一、项目预期成果、数量及形式</p>
                <div class="editor">
                  <vue-editor  :editorToolbar="customToolbar" v-model="data.contentTwo"></vue-editor>
                </div>
              </div>
              <div>
                <p class="pTit2">二、创客人才培养预期成果、数量</p>
                <div class="editor">
                  <vue-editor  v-model="data.contentThree" :editorToolbar="customToolbar"></vue-editor>
                </div>
              </div>
              <div>
                <p class="pTit2">三、项目预期孵化、转化创业项目情况</p>
                <div class="editor">
                  <vue-editor :editorToolbar="customToolbar" v-model="data.contentFour"></vue-editor>
                </div>
              </div>
            </div>
            <div>
              <p class="pTit">项目实施计划</p>
              <div class="editor">
                <vue-editor v-model="data.contentFive" :editorToolbar="customToolbar"></vue-editor>
              </div>
            </div>
            <div class="baseBtn">
              <div class="blockWidth">
                <el-button type="primary" class="backBtn" @click="backBtn1" size:small>上一步</el-button>
                <el-button type="primary" class="backBtn" @click="backBtn" size:small>下一步</el-button>
              </div>
            </div>
        </div>
      </div>
  </template>
  
  <script>
  import { VueEditor } from "vue2-editor";
      export default {
        props:["data","next",'back'],
        components:{
          VueEditor
        },
        data() {
          return {
            content:'',
            customToolbar: [
              ["bold", "italic", "underline"], [{ list: "ordered" }, { list: "bullet" }],
              [{ align: "" }, { align: "center" }, { align: "right"}, { align: "justify"}],
              [{header:[false,1,2,3,4]}]
            ],
          }
        },
        methods:{
          backBtn(){
            this.next();
          },
          backBtn1(){
            this.back();
          },
        }
      }
  </script>
  
  <style lang="less" scoped>
  .projectApplicationApply2{
    margin-top: 30px;
    width: 100%;
    display: flex;
    // background: red;
    justify-content: center;
    
    .right{
      width: 83%;
      background: #fff;
      box-sizing: border-box;
      padding: 10px 20px;
      margin-bottom: 20px;
    }
  }


    .textArea{
      display: flex;
      justify-content: flex-start;
      textarea{
        resize: none;outline: none;
        background: #f2f2f2;
        box-sizing: border-box;
        padding: 10px;
      }
    }
    .pTit{
      color: #3994ff;
      font-weight: 550;
      font-size: 18px;
    }
    .pTit2{
      margin-top: 16px;
      color: #3994ff;
      font-weight: 550;
      font-size: 16px;
    }
    .editor{
      width: 100%;
      min-width: 700px;
      background: #fbfbfb;
      box-sizing: border-box;
      padding: 25px 30px 10px 0px;
      // .VueEditor{
      //   width: 100%;
      // }
    }
  </style>