education-front/pages/index/serve.vue

<template>
  <view class="page__view">
    <view class="bg">
      <image class="img" :src="configList.page_index_bg" mode="widthFix"></image>
      <image class="bg-logo" src="@/static/image/bg-icon.png" mode="widthFix"></image>
    </view>

    <view class="main">

      <view class="flex section header" :style="style">
        <view>
          <view class="title">{{ configList.page_serve_title }}</view>
          <view class="desc">{{ configList.page_serve_desc }}</view>
        </view>
      </view>

      <!-- 搜索栏 -->
      <view class="section search">
        <uv-search v-model="keyword" :showAction="false" placeholder="输入关键词搜索" placeholderColor="#B2B2B2" bgColor="#FFFFFF" @custom="search" @search="search">
          <template #prefix>
            <view class="flex search-icon">
              <image class="img" src="@/static/image/icon-search.png" mode="widthFix"></image>
            </view>
          </template>
        </uv-search>
      </view>

      <view class="list">
        <view class="list-item" v-for="item in list" :key="item.id" >
          <serveModuleCard :data="item"></serveModuleCard>
        </view>
      </view>

      <tabber select="serve" />
    </view>
  </view>
</template>

<script>
  import utils from '@/utils/utils'
	import mixinsList from '@/mixins/list.js'

	import tabber from '@/components/base/tabbar.vue'
  import serveModuleCard from '@/components/serve/serveModuleCard.vue'

  export default {
		mixins: [mixinsList],
		components: {
      serveModuleCard,
      tabber,
    },
    data() {
      return {
				keyword: '',
				queryParams: {
					pageNo: 1,
					pageSize: 10,
					pid: '0',
				},
        mixinsListApi: 'queryCategoryServiceModuleList',
        firstCategoryList: [],
        style: '',
      }
    },
    onLoad() {
      this.style = `padding-top: calc(${utils.getNavHeight()}px - 16rpx)`

      this.getData()
    },
    methods: {
			search() {
        uni.navigateTo({
					url: `/pages_order/serve/search?search=${this.keyword}`
				})
			},
    },
  }
</script>

<style scoped lang="scss">

  .page__view {
    /deep/ .tabbar-box {
      height: 0;
      padding: 0;
    }
  }

  .header {
    padding-top: calc(var(--status-bar-height) + 120rpx);
    justify-content: space-between;
    align-items: flex-start;

    .title {
      font-size: 44rpx;
      font-weight: 700;
      color: #6851A7;
    }

    .desc {
      font-size: 22rpx;
      font-weight: 600;
      color: #808080;
    }

    .icon {
      margin-top: 16rpx;
      width: 62rpx;
      height: 62rpx;
      border: 2rpx solid #A3A2C5;
      border-radius: 50%;
      overflow: hidden;
      box-sizing: border-box;
      
      .img {
        width: 50rpx;
        height: auto;
      }
    }
  }

  .bg {
    width: 100vw;
    height: auto;

    .img {
      width: 100%;
      height: auto;
    }

    &-logo {
      position: absolute;
      top: 0;
      right: 0;
      width: 342rpx;
      height: auto;
      opacity: 0.3;
    }
  }

  .main {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    padding-bottom: 182rpx;
    box-sizing: border-box;
  }

  .section {
    margin: 0 38rpx 24rpx 38rpx;
  }

	.search {
    width: calc(100% - 38rpx * 2);
    height: 48rpx;
		background-color: #FFFFFF;
		border-radius: 37rpx;
    box-sizing: border-box;
		display: flex;
		align-items: center;
    overflow: hidden;
    box-shadow: 2rpx 2rpx 9rpx 0 rgba($color: #C5C5C5, $alpha: 0.75);

		/deep/ .uv-search__content {
      padding: 0;
      border: none;
    }

    /deep/ .uv-search__content__input {
      margin-left: 18rpx;
    }

    &-icon {
      padding: 18rpx 10rpx 18rpx 18rpx;
      background: rgba($color: #E8DBF3, $alpha: 0.8);

      .img {
        width: 30rpx;
        height: auto;
      }
    }
	}

  .swiper {
    border-radius: 10rpx;
    overflow: hidden;
    
    /deep/ .uv-swiper-indicator__wrapper__dot {
      width: 25rpx;
      height: 5rpx;
      border-radius: 4rpx;
      margin: 0 4rpx;
    }

    /deep/ .uv-swiper-indicator__wrapper__dot--active {
      width: 25rpx;
    }
  }

  .list {
    padding: 0 38rpx;
    
    &-item {
      & + & {
        margin-top: 26rpx;
      }
    }
  }

</style>