konggang-city-miniprogram/pages/service/index.vue

<template>
  <view class="content">
    <view class="banner">
      <image :src="bannerSrc" alt="banner" />
    </view>
    <div class="menus">
      <div class="menu">
        <image :src="menu1" />
      </div>
      <div class="menu">
        <image :src="menu2" />
      </div>
    </div>
  </view>
</template>

<script>
export default {
  data() {
    return {
      bannerSrc: "/static/service/banner.png",
      menu1: "/static/service/1.png",
      menu2: "/static/service/2.png",
    };
  },
  onLoad() {},
  methods: {
    // toDetail(index) {
    //   uni.navigateTo({
    //     url: "/pages/appeal/appeal_detail?id=" + index,
    //   });
    // },
  },
};
</script>

<style lang="scss" scoped>
.flex {
  display: flex;
}
.content {
  width: 92%;
  height: 92vh;
  padding: 4%;
  .banner {
    height: 25%;
    image {
      width: 100%;
      height: 100%;
    }
  }
  .menus {
    height: 15%;
    .menu {
      margin: 3%;
      height: 100%;
      border-radius: 20rpx;
      // box-shadow: 0rpx 10rpx 5rpx rgb(212, 212, 212);
      image {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>