Vue组件样式模板

记录一下做过一些组件，因某些原因没能用在项目中。丢了又可惜，写篇博客存起来，以后用的时候直接copy

样式

<template>
  <div class="grid-content">
    <div class="grid-con-icon" :style="{'background': options.color}">{{options.title}}</div>
    <div class="grid-cont-right">
      <div :style="{'color': options.color}" class="count">
        <div class="big-num">
          {{options.newCount}}
        </div>
        /{{options.totalCount}}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    options: {
      type: Object,
      default: function() {
        return {};
      }
    },
  }
}
</script>
<style lang='css' scoped>
.grid-content {
  height:100%;
  width: 100%;
  display: table;
  background: #fff;
  border: 1px solid #bbb;
}

.big-num {
  font-weight: bold;
  font-size: 40px;
  display: inline-block;
}

.grid-con-icon {
  padding: 0 2px;
  font-size: 15px;
  font-weight: 600;
  width: 30%;
  height: 100%;
  text-align: center;
  justify-content: center;
  color: #fff;
  display: table-cell;
  align-items: center;
  vertical-align: middle;
}

.grid-cont-right {
  width: 50%;
  font-size: 20px;
  display: table-cell;
  vertical-align: middle;
}

.count {
  align-items: baseline;
  text-align: center;
  margin: 0px 10px;
  font-size: 20px;
  font-weight: bold;
}

</style>

样式

<template>
    <div class="container">
      <div class="first">
        <div class="left">Schdule Job</div>
        <div class="right">Status</div>
      </div>
      <el-divider></el-divider>
      <div class="second">
        <div class="left number-align">
          <span class="number-pending">3</span>
          <span>Pending</span>
        </div>
        <div class="right number-align">
           <span class="number-failed">10</span>
           <span>Failed</span>
        </div>
      </div>
      <el-divider></el-divider>
      <div class="third">
        <div class="left">housekeep job</div>
        <div class="right"><span class="pending">Pending</span></div>
      </div>
      <el-divider></el-divider>
      <div class="fourth">
        <div class="left">SyncZabbixAlertToItoCenter</div>
        <div class="right"><span class="pending">Pending</span></div>
      </div>
    </div>
</template>

<script>
export default {
    name: "",
    data () {
        return {};
  },

    components: {},

    computed: {},

    methods: {}
}
</script>
<style lang='css' scoped>
.container {
  width: 100%;
  height: 220px;
  background: white;
}

.first {
  height: 20%;
  display: flex;
  width: 100%;
  align-items: center;
}

.second {
  display: flex;
  height: 35%;
  width: 100%;
  align-items: center;
}

.third {
  display: flex;
  height: 20%;
  width: 100%;
  align-items: center;
}

.fourth {
  width: 100%;
  display: flex;
  height: 20%;
  align-items: center;
}

.left {
  width: 50%;
  padding-left: 10px;
}

.right {
  width: 50%;
  text-align: center;
}

.pending {
  background: #E6A23C;
  color: white;
  padding: 2px 5px;
}

.number-pending {
  font-size: 50px;
  color:#E6A23C;
}

.number-failed {
  font-size: 50px;
  color:#db3630;
}

.number-align {
  text-align: center;
  align-items: baseline;
}

.el-divider--horizontal {
    display: block;
    height: 1px;
    width: 100%;
    margin: 1px;
}

</style>