yxk-electronic-archives/src/views/system/archivesCategory/archiveSealSetting/index.vue

<template>
  <div class="setting-contanier">
    <div class="chapter-tip">
      <p>注意</p>
      <span>档号章一般盖在归档文件首页上端居中的空白位置，如果位置被占用，可将盖在首页上端其他空白处（居左或居右）。</span>
    </div>
    <div class="chapter-setting">
      <div class="chapter-format">
        <div class="chapter-item">
          <p class="item-title">归档章版式</p>
          <span class="item-selected">默认版式</span>
        </div>
        <div class="chapter-item">
          <p class="item-title">预览</p>
          <div class="format-style">
            <span>全宗号</span>
            <span>年度</span>
            <span>件号</span>
            <span>机构(问题)</span>
            <span>保管期限</span>
            <span>页数</span>
          </div>
        </div>
      </div>
      <div class="chapter-position">
        <div class="chapter-item">
          <p class="item-title">归档章位置</p>
          <span class="item-selected">顶部居中</span>
        </div>
        <div class="position-style">
          <!-- top-left / top-middle / top-right / middle-left / center / middle-right / bottom-left / bottom-middle / bottom-right -->
          <span class="top-middle" />
        </div>
      </div>
      <div class="chapter-enable">
        <div class="chapter-item">
          <p class="item-title">是否启用</p>
          <el-switch v-model="enable" class="isEnable-chapter" />
        </div>
        <div class="chapter-edit">
          <el-button size="mini" @click="toEdit()">
            <i class="iconfont icon-bianji" />
            编辑
          </el-button>
        </div>
      </div>
    </div>
    <eForm ref="cuform" @refresh="initData" />
  </div>
</template>

<script>
import eForm from './module/form'

export default {
  name: 'ArchiveSealSetting',
  components: { eForm },
  data() {
    return {
      enable: true
    }
  },
  watch: {
  },
  created() {
  },
  methods: {
    toEdit() {
      this.$refs.cuform.cuDialogVisible = true
    }
  }
}
</script>

<style lang="scss" scoped>
@mixin setting-box-style{
  [data-theme="dark"] & {
    padding: 0 20px 20px 20px;
    margin-top: -10px;
  }
  [data-theme="light"] & {
    margin-top: 20px;
  }
}

@mixin setting-item-font{
  [data-theme="dark"] & {
    color: #fff;
  }
  [data-theme="light"] & {
    color: #0C0E1E;
  }
}

@mixin setting-item-selected{
  [data-theme="dark"] & {
    color: #fff;
    background-color: #02255f;
  }
  [data-theme="light"] & {
    color: #545B65;
    background-color: #F5F7FA;
  }
}

.setting-contanier{
  @include setting-box-style;
}
.chapter-tip{
  padding: 10px 20px 10px 40px;
  margin-bottom: 30px;
  font-size: 12px;
  color: #545B65;
  line-height: 26px;
  background-color: #EEF5FE;
  border: 1px solid #CBDAFF;
  border-left: 2px solid #0348F3;
  p{
    font-size: 14px;
    color: #0C0E1E;
    font-family: "iconfont" !important;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    &::before{
      content: '\e61e';
      color: #215EF4;
      margin-left: -24px;
      margin-right: 10px;
    }
  }
}
.chapter-setting{
  display: flex;
  justify-content: space-between;
}
.chapter-format{
  padding-left: 42px;
}
.chapter-item{
  display: flex;
  justify-content: flex-start;
  font-size: 14px;
  height: 32px;
  line-height: 32px;
  margin-bottom: 20px;
  p.item-title{
    width: 70px;
    @include setting-item-font;
    text-align: right;
    margin-right: 10px;
  }
  span.item-selected{
    display: block;
    width: 297px;
    padding: 0 13px;
    @include setting-item-selected;
  }
}

.position-style{
  position: relative;
  width: 380px;
  height: 538px;
  background: url('~@/assets/images/system/xt-gdz.png') no-repeat;
  background-size: contain;
  span{
    position: absolute;
    width: 118px;
    height: 32px;
    background: url('~@/assets/images/system/xt-gdx.png') no-repeat;
    background-size: contain;
    &.top-left{
      top: 35px;
      left: 25px;
    }
    &.top-middle{
      top: 35px;
      left: 50%;
      margin-left: -49px;
    }
    &.top-right{
      top: 35px;
      right: 15px;
    }
    &.middle-left{
      left: 25px;
      top: 50%;
      margin-top: -16px;
    }
    &.center{
      left: 50%;
      top: 50%;
      margin-left: -49px;
      margin-top: -16px;
    }
    &.middle-right{
      top: 50%;
      right: 15px;
      margin-top: -16px;
    }
    &.bottom-left{
      bottom: 35px;
      left: 25px;
    }
    &.bottom-middle{
      bottom: 35px;
      left: 50%;
      margin-left: -49px;
    }
    &.bottom-right{
      bottom: 35px;
      right: 15px;
    }
  }
}
.chapter-enable{
  display: flex;
  justify-content: flex-start;
  .chapter-edit{
    margin-left: 36px;
  }

}
</style>