myminiprogram

最新推荐文章于 2024-10-09 23:31:03 发布

yiqi186

最新推荐文章于 2024-10-09 23:31:03 发布

阅读量88

点赞数 1

文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/yiqinuliba/article/details/133345932

版权

Page({
  data: {},
  handleTap1: function() {
    // 按钮1的点击事件处理
    console.log('按钮1被点击了');
  },
  handleTap2: function() {
    // 按钮2的点击事件处理
    console.log('按钮2被点击了');
  }
});

.kf{
  background-color: #fff;
  border-radius: 30rpx;
  width: 100%;
  margin: 10 rpx;
  margin-top: 20rpx;
  display:flex;
  
}
.kf image{
  width: 120rpx;
  height: 120rpx;
  margin-left: 25rpx;
  padding: 10rpx;
  
}
.kf .userName{
  margin-top: 20rpx;
}

.version{
  width: 85%;
  margin: 0 auto;
  height: 300rpx;
  background-color: #fff;
}





/* new */
.button-wrapper {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 20rpx;
  
}

.custom-button {
  display: flex;
  align-items: center;
  border: none;
  background-color: #fff;
  padding: 10rpx 20rpx;
  border-radius: 50rpx;
  width: calc(50% - 10rpx); /* 保持这行不变，确保两个按钮加上间隔仍然各占一半宽度 */
}

.button-image {
  width: 160rpx;  
  height: 160rpx; 
  margin-right: 10rpx;
}

.custom-button text {
  color: #333;
}

/* 为第一个按钮添加间隔 */
.custom-button:nth-child(1) {
  margin-right: 20rpx; /* 调整这个值以改变间隔大小 */
}

/* ----new */

<!-- <button open-type="contact" bindcontact="handleContact" style="width: 95%;">

  

<view class="kf">
  <image src="../../images/index-icon/title.png"></image>
  <view class="userName">
    <view>纺服小区客服</view>
    <view style="font-size: 24rpx; color: gray;margin-top: 10rpx;">请</view>
  </view>

<view style="margin: 10rpx;">
  <text></text>
</view>
    
 
  <image src="../../images/index-icon/title.png"></image>
  <view class="userName">
    <view>纺服小区客服</view>
    <view style="font-size: 24rpx; color: gray;margin-top: 10rpx;">请</view>
  </view>
</view>






</button> -->



<!-- new -->


<view class="button-wrapper">
    <button class="custom-button" bindtap="handleTap1">
        <image src="/images/img/noContent.png" class="button-image"/>
        <text>志愿活动</text>
    </button>
    <button class="custom-button" bindtap="handleTap2">
        <image src="/images/img/noContent.png" class="button-image"/>
        <text>多彩活动</text>
    </button>
</view>

<view class="button-wrapper">
    <button class="custom-button" bindtap="handleTap1">
        <image src="/images/img/noContent.png" class="button-image"/>
        <text>企商活动</text>
    </button>
    <button class="custom-button" bindtap="handleTap2">
        <image src="/images/img/noContent.png" class="button-image"/>
        <text>社区风采</text>
    </button>
</view>


<view class="button-wrapper">
    <button class="custom-button" bindtap="handleTap1">
        <image src="/images/img/noContent.png" class="button-image"/>
        <text>便民通知</text>
    </button>
    <button class="custom-button" bindtap="handleTap2">
        <image src="/images/img/noContent.png" class="button-image"/>
        <text>警社联合</text>
    </button>
</view>
<view class="button-wrapper">
    <button class="custom-button" bindtap="handleTap1">
        <image src="/images/img/noContent.png" class="button-image"/>
        <text>买卖租赁</text>
    </button>
    <button class="custom-button" bindtap="handleTap2">
        <image src="/images/img/noContent.png" class="button-image"/>
        <text>招聘求职</text>
    </button>
</view>
<view class="button-wrapper">
    <button class="custom-button" bindtap="handleTap1">
        <image src="/images/img/noContent.png" class="button-image"/>
        <text>好书共读</text>
    </button>
    <button class="custom-button" bindtap="handleTap2">
        <image src="/images/img/noContent.png" class="button-image"/>
        <text>生活妙招</text>
    </button>
</view>
<!-- new -->