520特辑———旋转爱

├── README.md    // 项目说明
├── babel.config    // babel配置
├── package.json    // 包配置
├── public
│   ├── favicon.ico    // 放在title前的页面logo
│   └── index.html    // 主页面
├── src
│   ├── assets
│   │   ├── css    // 自定义配置css
│   │   └── love    // 图片资源
│   ├── love
│   │   └── love.vue    // 520主题组件
│   ├── App.vue
│   ├── router.js    // 路由
│   └── main.js    // 主配置
└── vue.config.js    // vue自定义配置

// template 部分
<div class="leafs">
    <div v-for="(item, index) in menuList"
         :key="item.name"
         class="leaf"
         @click="runCircle(item.name, index)"
         :class="`leaf${index+1}`">
        <img :src="item.url" alt="">
        <span class="nameSpain"><i :class="item.icon"></i> {{ item.name }}</span>
    </div>
    <!-- 小心心 -->
    <div class="heart"
         :class="{heartScale: heartScaleSign}"
         @click="heartScale">
        <img src="../assets/love/heart.png" alt="">
    </div>
</div>


// script部分
data() {
    return {
        show: false,
        runCircleSign: false,   // 旋转变小
        heartScaleSign: false,  // 心 变大缩小
        cardMiss: false,    // 卡片动画消失
        showCard: false,    // 卡片显示状态
        cardName: '',   // 卡片title
        cardChange: -1, //切换卡片
        cardGround: '', // 卡片背景色
        menuList: [
            {
                url: require('../assets/love/leaf1.png'),
                icon: 'el-icon-picture-outline',
                name: '相册'
            },
            {
                url: require('../assets/love/leaf2.png'),
                icon: 'el-icon-location',
                name: '足迹'
            },
            {
                url: require('../assets/love/leaf3.png'),
                icon: 'el-icon-edit',
                name: '说说'
            },
            {
                url: require('../assets/love/leaf4.png'),
                icon: 'el-icon-date',
                name: '时刻'
            },
            {
                url: require('../assets/love/leaf5.png'),
                icon: 'el-icon-news',
                name: '留言'
            },
            {
                url: require('../assets/love/leaf6.png'),
                icon: 'el-icon-printer',
                name: '影集'
            }
        ],
        cardType: 0,
        menuIndex: -1,
        activeName: 'first',   // 当前标签
    }
},
methods: {
    // 菜单缩放
    runCircle (name, index) {
        let _this = this;
        // 缩放
        this.runCircleSign = ! this.runCircleSign;
        this.menuIndex = index;
        // 赋值名称
        this.cardName = name;
        // 显示卡片
        this.showCard = true;
        // 卡片颜色
        switch (index) {
            case 0:
                _this.cardGround = 'rgba(129,15,175,0.4)';
                _this.cardType = 0;
                break;
            case 1:
                _this.cardGround = 'rgba(12,136,145,0.6)';
                _this.cardType = 1;
                break;
            case 2:
                _this.cardGround = 'rgba(255,235,45,0.6)';
                _this.cardType = 2;
                break;
            case 3:
                _this.cardGround = 'rgba(196,0,83,0.6)';
                _this.cardType = 3;
                break;
            case 4:
                _this.cardGround = 'rgba(87,174,157,0.6)';
                _this.cardType = 4;
                break;
            case 5:
                _this.cardGround = 'rgba(255,125,0,0.6)';
                _this.cardType = 5;
                break;
        }
    },
    // 心 缩放
    heartScale () {
        this.heartScaleSign = ! this.heartScaleSign;
    },
    // 消失卡片 && 菜单复原
    backSign () {
        let _this = this;
        _this.cardMiss = true;
        _this.runCircleSign = ! _this.runCircleSign;
        setTimeout(() => {
            _this.showCard = false;
            _this.cardMiss = false;
        }, 3000)
    },
},

// template
<div class="haveWords">
    <!-- 展示内容 -->
    <div class="cont">
        <el-tag v-for="el in ku"
                :key="el.id"
                class="fly"
                :type="el.type"
                :style="{top:el.top + 'px'}"
        >
            {{ el.msg }}
        </el-tag>
    </div>
    <!-- 输入内容 -->
    <div class="dealBox">
        <el-input
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 5}"
                placeholder="请输入留言"
                v-model.trim="msg"
                size="small">
        </el-input>
        <el-button type="primary" size="small" @click="sendData">Biu~</el-button>
    </div>
</div>


// script
data() {
    return {
        msg: null, //缓存
        ku: JSON.parse(localStorage.kuArr), //存取数据
        msgKu: []
    }
},
methods: {
    // 弹幕
    sendData () {
        // 5中标签模式
        let typeArr = ['','success','info','warning','danger'];
        let localArr = this.ku;
        //判空 不为空则继续 为空则提示输入
        if(this.msg !== '' && this.msg !== null) {
            let num1 = Math.random() * 500;
            let num2 = Math.random() * 5;
            let arrMark = Math.floor(num2);
            let top = Math.floor(num1);
            let obj = {msg:this.msg,top:top,type:typeArr[arrMark]};
            localArr.push(obj);
            localStorage.kuArr = JSON.stringify(localArr);
            this.msg = "";
        } else {
            this.$message.warning('要先输入哦~');
        }
    },
},