zjyzt_gis_master_web_ui/src/components/DataQualityInspection/Rules/LayerQualityInspectionRules.vue

<template>
  <el-container>
    <el-row class="first_level_title">字段限制</el-row>
    <el-row class="main_body" v-for="(str, index) in textArr" :key="index">
      {{ index + 1 }}. {{ str }}
    </el-row>
    <!-- <el-row class="first_level_title">示例截图</el-row> -->
    <el-image :src="showImg" :preview-src-list="srcList"></el-image>
  </el-container>
</template>

<script>
import showImg from "@/assets/images/layerZJImage/layer.jpg";
export default {
  data() {
    return {
      showImg: showImg,
      srcList: [showImg],
      textArr: [
        "第三方表名（TABLE_NAME）不能为空，长度100字符。",
        "标题（TITLE）不能为空，长度20字符。",
        "描述（CONTENT）不能为空，长度100字符。",
        "内容描述（JSON_STR）可以为空，长度64字符。",
        "几何类型不能为空。",
      ],
    };
  },
  components: {},
  methods: {},
};
</script>

<style lang="less" scoped>
.el-container {
  display: block;
  width: 100%;
  padding: 10px 20px;
  box-sizing: border-box;
  background: #ffffff;
  overflow: hidden;
  overflow-y: auto;
  .el-row {
    // margin-bottom: 10px;
    line-height: 40px;
    &:last-child {
      // margin-bottom: 10px;
    }
    &::before {
      display: unset;
    }
  }
  .first_level_title {
    font-size: 18px;
    font-weight: bold;
  }
  .main_body {
    display: block;
    font-size: 16px;
    text-indent: 25px;
  }
  .el-image {
    width: 62.5%;
    // height: 100%;
    margin: 0 auto;
    display: block;
  }
}
</style>