ruoyi-miniapp/uni_modules/s-components/s-header/index.vue

<template>
  <view class="container">
    <view class="fit-content"></view>
    <view class="operation" v-if="isCustom">
      <slot></slot>
    </view>
    <view v-else>
      <view class="operation" v-if="isTab">
        <view class="wd-flex wd-items-center" style="gap: 10px">
          <u--image src="/static/favicon.png" width="20px" height="20px" mode="aspectFit"></u--image>
          <text class="title">{{ title }}</text>
        </view>
      </view>
      <view class="operation wd-flex wd-flex-row wd-items-center" style="gap: 10px" v-else @tap="goback">
        <view class="icon-box">
          <u-icon name="arrow-left" size="12"></u-icon>
        </view>
        <text class="title wd-text-16 wd-font-800">{{ title }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 's-header',
  data() {
    return {}
  },
  props: {
    title: String,
    isTab: {
      type: Boolean,
      default: false
    },
    isCustom: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    goback() {
      this.$emit('goback')
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  background-color: #fff;
  box-shadow: 0 1px 2px 1px $cs-shadow-color;
  z-index: 1;
  margin-bottom: 2px;
  .fit-content {
    height: 6vh;
  }
  .operation {
    padding: 10px;
    .title {
      color: #000;
      font-size: 18px;
      font-weight: bold;
    }
    .icon-box {
      padding: 5px;
      border-radius: 50%;
      box-shadow: 0 0 4px 2px $cs-shadow-color;
    }
  }
}
</style>