优化组件
This commit is contained in:
		@@ -41,12 +41,11 @@
 | 
			
		||||
 | 
			
		||||
<script>
 | 
			
		||||
import AiSearchPopup from './AiSearchPopup'
 | 
			
		||||
import AiCell from './AiCell.vue'
 | 
			
		||||
import {mapState} from 'vuex'
 | 
			
		||||
 | 
			
		||||
export default {
 | 
			
		||||
  name: 'AiAreaPicker',
 | 
			
		||||
  components: {AiCell, AiSearchPopup},
 | 
			
		||||
  components: {AiSearchPopup},
 | 
			
		||||
  props: {
 | 
			
		||||
    areaId: {default: ''},
 | 
			
		||||
    name: {default: ''},
 | 
			
		||||
@@ -57,7 +56,7 @@ export default {
 | 
			
		||||
      type: Boolean,
 | 
			
		||||
      default: false
 | 
			
		||||
    },
 | 
			
		||||
    isForm:Boolean
 | 
			
		||||
    isForm: Boolean
 | 
			
		||||
  },
 | 
			
		||||
  computed: {
 | 
			
		||||
    ...mapState(['user']),
 | 
			
		||||
 
 | 
			
		||||
@@ -1,76 +0,0 @@
 | 
			
		||||
<template>
 | 
			
		||||
  <section class="AiCell" :class="{bottomBorder,alignCenter,topLabel}">
 | 
			
		||||
    <div class="label" :class="{title}">
 | 
			
		||||
      <slot v-if="$slots.label" name="label"/>
 | 
			
		||||
      <span v-else>{{ label }}</span>
 | 
			
		||||
    </div>
 | 
			
		||||
    <div class="content" :class="{topLabel}">
 | 
			
		||||
      <slot/>
 | 
			
		||||
    </div>
 | 
			
		||||
  </section>
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script>
 | 
			
		||||
export default {
 | 
			
		||||
  name: "AiCell",
 | 
			
		||||
  props: {
 | 
			
		||||
    label: {default: ""},
 | 
			
		||||
    bottomBorder: Boolean,
 | 
			
		||||
    topLabel: Boolean,
 | 
			
		||||
    title: Boolean,
 | 
			
		||||
    alignCenter: Boolean
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<style lang="scss" scoped>
 | 
			
		||||
.AiCell {
 | 
			
		||||
  display: flex;
 | 
			
		||||
  min-height: 72px;
 | 
			
		||||
  font-size: 30px;
 | 
			
		||||
  color: #333;
 | 
			
		||||
  padding: 14px 0;
 | 
			
		||||
  box-sizing: border-box;
 | 
			
		||||
  justify-content: space-between;
 | 
			
		||||
 | 
			
		||||
  &.bottomBorder {
 | 
			
		||||
    border-bottom: 1px solid #eee;
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  &.alignCenter {
 | 
			
		||||
    align-items: center;
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  &.topLabel {
 | 
			
		||||
    flex-direction: column;
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  .label {
 | 
			
		||||
    min-width: 60px;
 | 
			
		||||
    flex-shrink: 0;
 | 
			
		||||
    width: auto;
 | 
			
		||||
    color: #999;
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
    &.title {
 | 
			
		||||
      color: #333;
 | 
			
		||||
      font-weight: bold;
 | 
			
		||||
      font-size: 34px;
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  .content {
 | 
			
		||||
    flex: 1;
 | 
			
		||||
    min-width: 100px;
 | 
			
		||||
    min-height: 40px;
 | 
			
		||||
    max-width: 500px;
 | 
			
		||||
    text-align: right;
 | 
			
		||||
 | 
			
		||||
    &.topLabel {
 | 
			
		||||
      text-align: start;
 | 
			
		||||
      margin-top: 16px;
 | 
			
		||||
      max-width: 100%;
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
</style>
 | 
			
		||||
		Reference in New Issue
	
	Block a user