<template>
<view class="content">
<view class="content-top">
<view :class="value1 == 1 ? 'content-btn' : 'content-btn1' " @click="onclick(1)">登录</view>
<view :class="value1 == 2 ? 'content-btn' : 'content-btn1' " @click="onclick(2)">注册</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
value1 : 1,
value: '',
};
},
methods: {
onclick (data) {
this.value1 = data;
},
onChange(event) {
// event.detail 为当前输入的值
console.log(event.detail);
},
}
}
</script>
<style lang="scss">
page{
width: 100%;
height: 100%;
background-image: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.huabanimg.com%2F8b5af0fc9fd2c7585ce06d239d1280b3c99c40422f4af0-YnFw0y_fw658&refer=http%3A%2F%2Fhbimg.huabanimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1670237883&t=7cf6fc583bf8795fcc116cbca3c4a3f7');
}
.content {
margin: 0 40rpx;
.content-top {
color: #ffffff;
background-color: #c2b9be82;
margin: 60% 15% 20% 15%;
border-radius: 50rpx;
display: flex;
justify-content: space-between;
align-items: center;
height: 80rpx;
position: relative;
.content-btn {
width: 48%;
display: flex;
justify-content: center;
align-items: center;
background-color: #ff555d;
height: 100%;
border-radius: 50rpx;
font-weight: 600;
animation:myfirst 0.3s;
@keyframes myfirst
{
0% {margin: 0rpx -10rpx;}
50% {margin: 0rpx 10rpx;}
100% {margin: 0rpx;}
}
}
.content-btn1 {
width: 48%;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
border-radius: 50rpx;
}
}
}
</style>
通过css动画属性:
animation:myfirst 0.3s;
@keyframes myfirst
{
0% {margin: 0rpx -10rpx;}
50% {margin: 0rpx 10rpx;}
100% {margin: 0rpx;}
}