动效按钮

pull/1/head
xuan 2 months ago
parent 821a126fe0
commit 9d008c7d85

@ -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',
}
}

@ -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",[]]

@ -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;
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 829 B

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

@ -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>

@ -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>

@ -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>
Loading…
Cancel
Save