aiot-app/src/components/pannel/index.vue

<template>
  <view class="panel-wrap">
    <view class="panel-title">
      <slot name="header"></slot>
    </view>
    <up-line></up-line>
    <view class="panel-content">
      <slot name="content"></slot>
    </view>
  </view>
</template>

<script>
export default {
  name: "Panel",
  options: {styleIsolation: 'shared'},
  data() {
    return {}
  },

  methods: {}
};
</script>

<style lang="scss">
.panel-wrap {
  width: 100%;
  font-size: 28rpx;
  border-radius: 20rpx;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  .panel-title {
    width: 100%;
    padding: 25rpx;
    margin: 10rpx 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: #333333;
    font-weight: 700;

    > view {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      width: 100%;
    }

    :deep(.u-icon) {
      margin-right: 20rpx;
    }
  }

  .panel-content {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 0 20rpx 20rpx 20rpx;
    box-sizing: border-box;

    > view {
      width: 100%;
    }

    .grid-list {
      width: 100%;
    }
  }
}

</style>