lcoco/pages/my/set/push-set.vue

<template>
  <view class="push-set-box">
    <en-nav title="推送通知管理" :title-color="'#333'"  ></en-nav>

    <view class="set-list">

      <view class="set-item">
        <view class="item-data">
          <view class="describe-title sys-color-black">免打扰模式</view>
          <view class="describe-text sys-color-gray-9">开启后，在设定时间段内不接受任何通知</view>
        </view>
        <view class="item-switch" >
          <switch color="#4BC285" style="transform:scale(0.9)" />
        </view>
      </view>

    </view>

    <view class="set-list">
      <view class="set-item">
        <view class="item-data">
          <view class="describe-title sys-color-black">消息详情</view>
          <view class="describe-text sys-color-gray-9">关闭后，新消息将不显示发送人和内容</view>
        </view>
        <view class="item-switch" >
          <switch color="#4BC285" style="transform:scale(0.9)" />
        </view>
      </view>
    </view>

    <view class="set-list">
      <view class="set-item">
        <view class="item-text sys-height-44 sys-color-black">新消息关注通知</view>
        <view class="item-switch" >
          <switch color="#4BC285" style="transform:scale(0.9)" />
        </view>
      </view>
      <view class="set-item">
        <view class="item-text sys-height-44 sys-color-black">评论通知</view>
        <view class="item-switch" >
          <switch color="#4BC285" style="transform:scale(0.9)" />
        </view>
      </view>
      <view class="set-item">
        <view class="item-text sys-height-44 sys-color-black">谁喜欢我通知</view>
        <view class="item-switch" >
          <switch color="#4BC285" style="transform:scale(0.9)" />
        </view>
      </view>

    </view>

  </view>
</template>

<script>
import EnNav from "@/components/en-utils/en-nav/en-nav";
export default {
  components: {EnNav},
  data() {
    return {

    }
  },
  methods: {

  }
}
</script>

<style scoped lang="scss">
.push-set-box{
  background-color: #F9F9F9;
  min-height: 100vh;
  padding-bottom: 50rpx;
  .set-list{
    margin: 20rpx 32rpx 0 32rpx;
    background-color: #fff;
    border-radius: 20rpx;
    padding:  0 32rpx;
    .set-item{
      padding: 32rpx 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1rpx solid #F2F2F2;
      .item-data{
        .describe-title{
          font-size: 30rpx;
        }
        .describe-text{
          margin-top: 4rpx;
          font-size: 24rpx;
        }
      }
      .item-text{
        font-size: 28rpx;
      }
      .item-icon{
        .iconfont{
          font-size: 28rpx;
        }
      }
    }
    .set-item:last-child{
      border-bottom: none;
    }
  }
}

</style>