<template>
<view class="body">
<view :class="styleShow==='xuanze' ? 'yi_xuanze' : 'wei_xuanze'" @click="cunminSele">村民</view>
<view :class="styleShow==='weixuanze' ? 'yi_xuanze' : 'wei_xuanze'" @click="shangjiaSele">商家</view>
</view>
</template>
<script>
export default {
data() {
return {
styleShow: "xuanze",
}
},
methods: {
cunminSele() {
this.styleShow = 'xuanze';
},
shangjiaSele() {
this.styleShow = 'weixuanze';
}
}
}
</script>
<style lang="scss" scoped>
.body {
padding-top: 151rpx;
width: 100%;
height: calc(100vh - 200rpx);
background: url('https://ossdcd.nyncjxx.com/static/bg@2x.png') no-repeat;
background-size: 753rpx 516rpx;
background-color: #FFFFFF;
.wei_xuanze {
width: 450rpx;
height: 251rpx;
border: 1rpx solid #FE8C1F;
color: #FE8C1F;
margin: 0 auto;
margin-top: 40rpx;
border-radius: 20rpx;
line-height: 251rpx;
text-align: center;
font-size: 35rpx;
}
.yi_xuanze {
width: 450rpx;
height: 251rpx;
background-color: #FE8C1F;
color: #FFFFFF;
margin: 0 auto;
margin-top: 40rpx;
border-radius: 20rpx;
line-height: 251rpx;
text-align: center;
font-size: 35rpx;
}
}
</style>
vue 切换标签
最新推荐文章于 2024-08-25 09:57:22 发布