动效按钮

.eslintrc.js

@@ -12,6 +12,7 @@ module.exports = {
   },
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    // 'vue/multi-word-component-names':'off',
   }
 }

node_modules/.cache/eslint/7dc60d80.json

@@ -1 +0,0 @@
-[{"D:\\我的桌面\\恋爱森林\\dazuoye\\src\\main.js":"1","D:\\我的桌面\\恋爱森林\\dazuoye\\src\\App.vue":"2","D:\\我的桌面\\恋爱森林\\dazuoye\\src\\router\\index.js":"3","D:\\我的桌面\\恋爱森林\\dazuoye\\src\\views\\Main.vue":"4","D:\\我的桌面\\恋爱森林\\dazuoye\\src\\components\\header.vue":"5","D:\\我的桌面\\恋爱森林\\dazuoye\\src\\components\\background.vue":"6","D:\\我的桌面\\恋爱森林\\dazuoye\\src\\views\\recommend\\index.vue":"7","D:\\我的桌面\\恋爱森林\\dazuoye\\src\\views\\chat\\chat.vue":"8","D:\\我的桌面\\恋爱森林\\dazuoye\\src\\views\\community\\trends.vue":"9","D:\\我的桌面\\恋爱森林\\dazuoye\\src\\views\\space\\space.vue":"10","D:\\我的桌面\\恋爱森林\\dazuoye\\src\\views\\login\\login.vue":"11"},{"size":261,"mtime":1731506523733,"results":"12","hashOfConfig":"13"},{"size":97,"mtime":1731506523731,"results":"14","hashOfConfig":"13"},{"size":1052,"mtime":1731513557777,"results":"15","hashOfConfig":"13"},{"size":359,"mtime":1731741182777,"results":"16","hashOfConfig":"13"},{"size":2643,"mtime":1731566073424,"results":"17","hashOfConfig":"13"},{"size":919,"mtime":1731566064122,"results":"18","hashOfConfig":"13"},{"size":161,"mtime":1731508571798,"results":"19","hashOfConfig":"13"},{"size":156,"mtime":1731511731213,"results":"20","hashOfConfig":"13"},{"size":155,"mtime":1731512433247,"results":"21","hashOfConfig":"13"},{"size":157,"mtime":1731512507547,"results":"22","hashOfConfig":"13"},{"size":14422,"mtime":1731741182778,"results":"23","hashOfConfig":"13"},{"filePath":"24","messages":"25","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"26"},"10795if",{"filePath":"27","messages":"28","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"29"},{"filePath":"30","messages":"31","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"26"},{"filePath":"32","messages":"33","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"34","messages":"35","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"36","messages":"37","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"38","messages":"39","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"29"},{"filePath":"40","messages":"41","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"29"},{"filePath":"42","messages":"43","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"29"},{"filePath":"44","messages":"45","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"29"},{"filePath":"46","messages":"47","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"D:\\我的桌面\\恋爱森林\\dazuoye\\src\\main.js",[],[],"D:\\我的桌面\\恋爱森林\\dazuoye\\src\\App.vue",[],[],"D:\\我的桌面\\恋爱森林\\dazuoye\\src\\router\\index.js",[],"D:\\我的桌面\\恋爱森林\\dazuoye\\src\\views\\Main.vue",[],"D:\\我的桌面\\恋爱森林\\dazuoye\\src\\components\\header.vue",[],"D:\\我的桌面\\恋爱森林\\dazuoye\\src\\components\\background.vue",[],"D:\\我的桌面\\恋爱森林\\dazuoye\\src\\views\\recommend\\index.vue",[],"D:\\我的桌面\\恋爱森林\\dazuoye\\src\\views\\chat\\chat.vue",[],"D:\\我的桌面\\恋爱森林\\dazuoye\\src\\views\\community\\trends.vue",[],"D:\\我的桌面\\恋爱森林\\dazuoye\\src\\views\\space\\space.vue",[],"D:\\我的桌面\\恋爱森林\\dazuoye\\src\\views\\login\\login.vue",[]]

src/assets/css/chat/honneyBtn.css

@@ -0,0 +1,63 @@
+input{
+    display: none;
+}
+label{
+    /* 圆角矩形组件 */
+    display: block;
+    position: relative;
+    background-color:#979797;
+    width: 200px;
+    height: 100px;
+    border-radius: 100px;
+    padding: 0px;
+    margin: 0px;
+    transition: all 0.37s ease-in;
+}
+label::before{
+    /* 圆角矩形里面的按钮 */
+    content: '';
+    position: absolute;
+    width: 82px;
+    height: 82px;
+    border-radius: 50%;
+    border: 2px solid #b0b0b0;
+    background-color: white;
+    top: 7px;
+    left: 5px;
+    transition: all 1s ease-in;
+    animation: reverse_switch 0.35s forwards;
+}
+input:checked + label{
+    background-color: #FE4E96;
+}
+input:checked +label::before{
+    border:2px solid #fc5ea0;
+    animation: switch 0.35s forwards;
+}
+
+/* 给圆形定义关键帧 */
+@keyframes switch {
+    0% {
+        left: 4px;
+    }
+    60% {
+        left:4px;
+        width: 112px;
+    }
+    100%{
+        left: 104px;
+    }
+}
+@keyframes reverse_switch {
+    0% {
+        left: 104px;
+    }
+    60%{
+        left: 74px;
+        width: 112px;
+    }
+    100%{
+        left: 4px;
+    }
+}
+

src/views/Main.vue

@@ -1,6 +1,9 @@
 <template>
+
   <heade/>
- <div></div>      
+ <div>
+  <RouterView />
+ </div>      
           
     
     

src/views/chat/HonneyBtn.vue

@@ -0,0 +1,23 @@
+<template>
+    <h4>我是动效滚动</h4>
+    <input type="checkbox" id="honneyBtn" v-model="status">
+    <label for="honneyBtn">{{ status }}</label>
+</template>
+
+<script>
+export default{
+    data(){
+        return{
+            status: false
+        }
+    },
+    mounted(){
+        // 后端接口获取好友状态
+        this.status = true
+    }
+}
+</script>
+
+<style scoped>
+@import url('../../assets/css/chat/honneyBtn.css');
+</style>

src/views/chat/chat.vue

@@ -1,9 +1,23 @@
 <template>
-    私信聊天
+    <div>
+        <h4>私信聊天</h4> <hr>
+        <HonneyBtn />
+    </div>
 </template>
 <script>
+import HonneyBtn from './HonneyBtn.vue'
 export default {
     name: 'chatIndex', // 添加组件名称
-    // 其他组件选项
+    data(){
+        return{
+            
         }
+    },
+    components:{
+        HonneyBtn,
+    }
+}
+</script>
+
+<script setup>
 </script>

src/views/login/login.vue

@@ -177,7 +177,8 @@
 // eslint-disable-next-line no-unused-vars
 import {Axios as request} from "axios";
 import axios from '@/utils/axiosConfig';
-import {setToken} from '@/token/auth'
+import {setToken} from '@/token/auth';
+
 export default {
     name:'loginIndex',
     data(){
@@ -225,6 +226,7 @@ export default {
             this.isShow = !this.isShow
         },
         async UserLogin() {
+            this.$router.push('/chat');
             if(this.loginUser.code === 'Yj98') {
                 try {
                     const response = await axios.post('', null, {
@@ -280,6 +282,6 @@ export default {
 
 </script>
 
-<style>
+<style scoped>
 @import url('../../assets/css/login/login.css');
 </style>