vue 随机颜色，书本css

更改需求，扔了可惜，做个笔记

<template>

  <div class="medu-div">
    <div class="hh"><strong>招聘岗位</strong></div>
    <hr/>
    <div class="tLabel">
      <div  v-for="(item,index) in list" :key="index" @click="chiose(index,item.id)">

        <div   v-html="rgbs(item.title )">

        </div>

      </div>

    </div>
    <div class="condiv"  @click="viewShow()">
      <transition name="slide-fade">
               <talenArt v-if="isShow"  ref='talenArt' ></talenArt>
        </transition>
    </div>
  </div>

</template>

<script>
const talenArt = resolve => {
  resolve(require('./talen-a-content.vue'))
}
export default{
  name: 'medu-div',

  data () {
    return {
      isShow: false,
      id: '',
      status: this.GLOBAL.statusRecordGet(3),
      list: []
    }
  },
  created () {
    this.getData()
  },
  components: {talenArt},
  methods: {
    getData () {
      let data = new FormData()
      data.append('cid', this.$route.params.tId)
      this.$post('label', data).then(res => {
        if (this.GLOBAL.isCode(res.data.code)) {
          this.list = res.data.data
          this.id = this.list[0].id
        //   this.$refs.talenArt.getContent(this.id)
        }
      }).catch(err => {
        console.log(err)
      })
    },
    chiose (index, id) {
      this.status = index
      this.isShow = true
      this.GLOBAL.statusRecordSet(3, this.status)
      if (this.isShow) {
        this.$nextTick(() => {
          this.$refs.talenArt.getContent(id)
        })
      }
    },
    viewShow () {
      this.isShow = false
    },

    rgbs (title) {
      const r = Math.round(Math.random() * 255)
      const g = Math.round(Math.random() * 255)
      const b = Math.round(Math.random() * 255)
      const a = ((Math.random() * 5 + 5) / 10).toFixed(2)
      const bc = Math.round(((Math.random() / 5) * 71).toFixed(2))
      // 随机颜色返回的是一个0.5到1 的两位小数;如果生成的0-1就直接是const a =Math.random()
      const color = `rgba(${r},${g},${b},${a})`
      return '<div  class="itemty"  style=" background: linear-gradient(' + bc + 'deg, #ddd 30%, ' + color + ' 30%); transform:rotate(' + bc + 'deg);">' + title + ' <br/> <span class ="tilDate">航天北斗  ——  2019年9月20号</span></div>'
    }
  }
}
</script>

<style>
.tLabel{
  display: flex;
  width: 98%;
  flex-flow: wrap;
}

  .itemty{
    -webkit-transform:scale(0.9);
    -moz-transform:scale(0.9);
    -o-transform:scale(0.9);
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
     opacity: 0.9;

  }

 .itemty:hover{
  -webkit-transform:scale(1.5);
  -moz-transform:scale(1.5);
  -o-transform:scale(1.5);
  border-right: ghostwhite 8px double;
  }
.itemty {
  width: 220px;
  height: 260px;
  box-shadow: 10px 10px 5px gray;
  margin: 15px;
  text-align: center;
  line-height: 150px;
  font-size: 25px;
  filter: drop-shadow(0px 0px 15px #bbb);
  border: ghostwhite 2px solid;
  color: var(--font_color_hover);
}
.itemty:before{
  content: '';
  display: block;
  position: absolute;
  right:-60px;
  top:0;
  width: 60px;
  height: 50px;
}

.tilDate{
  font-size: 12px;
}

.hh{
  text-align: center;
  border-bottom: darkred 0.625rem solid;
  width: 200px;
  margin: 0px auto;
  padding-bottom: 20px;
  font-size:25px
}
.condiv{
  display: inline;
  height: 800px;
  position: absolute;
  left: 0;
  top: 0;
}

</style>

遮罩层

  <!-- 放大图片  -过渡动画 -->

<div class="tConDiv">
  <!-- 遮罩层 -->
  <div class="img-layer"></div>
      <div id="contentDig">
         <br />
        <div class="hh"><strong>具体要求</strong></div>
        <hr/>
         <div class="pAtrAD">
               <p v-html='pText'></p>
         </div>
      </div>
</div>

</template>

<script>

export default{

  data () {
    return {

      index: 0,
      pText: ''

    }
  },

  methods: {

    getContent (id) {
      let data = new FormData()
      data.append('cid', id)

      this.$post('artCon', data).then(res => {
        if (this.GLOBAL.isCode(res.data.code)) {
          this.pText = res.data.data[0].content
        }
      })
    }
  }
}

</script>

<style scoped>

.tConDiv {
    position: relative;
    width: 100%;
    height: 800px;
}
/*遮罩层样式*/
.tConDiv .img-layer {
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.7);
    width: 100%;
    height: 800px;
    overflow: hidden;
}
#contentDig{
  width: 800px;
  height: 800px;
  display: block;
  position: absolute;
  margin: auto;
  z-index: 1000;
  background: white;
  left: 300px;
  top: 300px;
  border-right: gray  8px double;
  border-top: gray 5px solid;
  padding: 50px;
}
.pAtrAD{
  font-size: 17px;
  text-align: left;
  letter-spacing: 4px;
  margin-top: 50px;
}

</style>