pbl-teacher-table/src/components/pages/task/commpont/englishRight.vue

<template>
  <div class="englishBox">
    <div class="themeTitle">
      <div>作文题目*</div>
      <div>
        <el-input
          v-model="engList.engTitle"
          placeholder="请填写作文题目"
          @change="setEngList"
        ></el-input>
      </div>
    </div>
    <div class="themeText">
      <div>作文要求*</div>
      <div>
        <editor-bar
          placeholder="请填写作文要求"
          v-model="engList.englishText"
          @change="setEngList"
        ></editor-bar>
      </div>
    </div>
  </div>
</template>

<script>
import EditorBar from "../../../../components/tools/wangEnduit";
export default {
  components: {
    EditorBar,
  },
  props: ["englishList"],
  data() {
    return {
      engList: {
        engTitle: "",
        englishText: "",
      },
    };
  },
  methods: {
    setEngList() {
      this.$emit("setEnglish", this.engList);
    },
  },
  created() {
    this.engList = this.englishList;
  },
};
</script>

<style scoped>
.englishBox {
  width: 50%;
  margin: 50px auto 0;
}
.themeTitle {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
}
.themeTitle > div:first-child {
  min-width: 65px;
  font-weight: bold;
}
.themeTitle > div:last-child {
  width: calc(100% - 75px);
  margin-left: 10px;
}
.themeText {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  margin-top: 20px;
}
.themeText > div:first-child {
  min-width: 65px;
  margin-top: 10px;
  font-weight: bold;
}
.themeText > div:last-child {
  width: calc(100% - 75px);
  margin-left: 10px;
}
.themeText > div:last-child >>> .text {
  min-height: 400px !important;
}
</style>