c8 切換三種色板

by BDeer

HTML

<div id="app">
 <div :class="{sunnyMorning:a,dustyGrass:b, happyFisher:c }">
  <div>
   <span class="box" @click="changeBox1"></span>
   <span class="box" @click="changeBox2"></span>
   <span class="box" @click="changeBox3"></span>
  </div>
 </div>
</div>

CSS

body {
            display: flex;
            justify-content: center;
            margin: 0;
        }

        #app {
            margin-top: 5rem;
            width: 70%;
        }

        #app>div {
            position: relative;
            height: 50vw;
        }

        #app>div>div {
            position: absolute;
            left: 2%;
            top: 2%;
        }

        #app>div>div span {
            width: 50px;
            height: 25px;
            border: 3px solid #FFF;
            display: inline-block;
        }

        #app>div>div>span:nth-of-type(1) {
            background-image: linear-gradient(120deg, #f6d365 0%, #fda085 100%);
        }

        #app>div>div>span:nth-of-type(2) {
            background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
        }

        #app>div>div>span:nth-of-type(3) {
            background-image: linear-gradient(120deg, #89f7fe 0%, #66a6ff 100%);
        }

        .sunnyMorning {
            background-image: linear-gradient(120deg, #f6d365 0%, #fda085 100%);
        }

        .dustyGrass {
            background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
        }

        .happyFisher {
            background-image: linear-gradient(120deg, #89f7fe 0%, #66a6ff 100%);
        }

Vue

let BindeOn = new Vue({
 el: '#app',
 data: {
  a: true,
  b: false,
  c: false
 },
 methods: {
  changeBox1() {
   this.a = true
   this.b = false
   this.c = false
  },
  changeBox2() {
   this.a = false
   this.b = true
   this.c = false
  },
  changeBox3() {
   this.a = false
   this.b = false
   this.c = true
  }
 }
})