第二次尝试

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,26 @@
+/* 给圆形定义关键帧 */
+@keyframes switch {
+    0% {
+        left: calc(4px * 0.5);
+    }
+    60% {
+        left:calc(4px * 0.5);
+        width: calc(112px * 0.5);
+    }
+    100%{
+        left: calc(104px * 0.5);
+    }
+}
+@keyframes reverse_switch {
+    0% {
+        left: calc(104px * 0.5);
+    }
+    60%{
+        left: calc(74px * 0.5);
+        width: calc(112px * 0.5);
+    }
+    100%{
+        left: calc(4px * 0.5);
+    }
+}
+

src/assets/css/community/community.css

@@ -1,80 +0,0 @@
-
-.base
-{
-  height: 100vh;
-  background-image: url("../../pictures/communityback.png");
-  background-size: 90%;
-  background-attachment: fixed;  /* 背景固定 */
-  background-position: -600px; /* 向左移动背景图像 50px */
-  background-position: center;  /* 可以选择让背景居中 */
-  z-index: -1; 
-}
-.touxiang
-{
-  position: absolute;
-  top:50%;
-  left:5%;
-  border-radius: 10px;
-  width: 50px;
-  height:50px;
-  transform: translateY(-50%)
-}
-.leftinfo
-{
-      background-color: rgba(255,255,255,0.8);
-      width: 15%;
-      position: fixed;
-      left:0%;
-      border: 3px solid  orchid;
-      height:100%;
-        
-}
-.rightheat
-{
-
-    background-color: rgba(255,255,255,0.8);
-    position: fixed;
-    right:0%;
-    width: 15%;
-    border: 3px solid  orchid;
-    height:100%;
-    
-}
-.familytitle
-{
-  position: absolute;
-  top:8%;
-  left:35%;
-  font-size: 14px;
-  font-weight: bold; 
-
-}
-.familycontent
-{
-  position: absolute;
-  bottom:12%;
-  left:35%;
-  font-size: 13px;
-
-}
-.Hotsearchnum{
-    border-radius: 50%;
-    width: 25px;
-    height: 25px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-.middle
-{
-  position: absolute;
-  left:50%;
-  transform: translateX(-50%);
-  width: 65%;
-  border: 3px solid  orchid;
-  height:100%;
-  z-index:1;
-}
-.post-list {
-   
-  }

src/views/chat/HonneyBtn.vue

@@ -0,0 +1,67 @@
+<template>
+    <!-- <h4>我是动效滚动</h4> -->
+     <div>
+        <input type="checkbox" id="honneyBtn" v-model="status">
+        <label for="honneyBtn" class="test">{{ status }}</label>
+     </div>
+
+</template>
+
+<script>
+export default{
+    data(){
+        return{
+            status: false
+        }
+    },
+    mounted(){
+        // 后端接口获取好友状态
+        this.status = true
+    }
+}
+</script>
+
+<style scoped>
+:root{
+    --prpotion: 0.5;
+}
+input{
+    display: none;
+}
+label{
+    /* 圆角矩形组件 */
+    display: block;
+    position: relative;
+    background-color:#979797;
+    width: calc(200px * 0.5);
+    height: calc(100px * 0.5);
+    border-radius: 200px;
+    padding: 0px;
+    margin: 0px;
+    transition: all 0.37s ease-in;
+}
+label::before{
+    /* 圆角矩形里面的按钮 */
+    content: '';
+    position: absolute;
+    width: calc(82px * 0.5);
+    height: calc(82px * 0.5);
+    border-radius: 50%;
+    border: calc(2px * 0.5) solid #b0b0b0;
+    background-color: white;
+    top: calc(7px * 0.5);
+    left: calc(5px * 0.5);
+    transition: all 1s ease-in;
+    animation: reverse_switch 0.35s forwards;
+}
+input:checked + label{
+    background-color: #FE4E96;
+}
+input:checked +label::before{
+    border:calc(2px * 0.5) solid #fc5ea0;
+    animation: switch 0.35s forwards;
+}
+
+@import url('../../assets/css/chat/honneyBtn.css');
+
+</style>