ycwh/miniapp/pages/yuecai/home/index.vue

<template>
  <view class="width-100 height-100 view-page">
    <view class="p-10 dis-flex flex-y-center flex-x-between">
      <view class="icon-circle search-left-btn"></view>
      <view class="width-100">
        <u-search :clearabled="true" placeholder="请输入搜索关键字" v-model="keyword" :shape="square" search="doSearch"
          @custom="doSearch" :showAction="false"></u-search>
      </view>
    </view>
    <u-swiper height="185" :list="bannerList" @click="clickInfo" keyName="cover"></u-swiper>
    <view class="p-l-r-30 p-t-30 dis-flex flex-x-around nav-btns">
      <view class="nav-btn">
        <view class="nav-btn-icon icon-circle"></view>
        <view class="nav-btn-text">专业风采</view>
      </view>
      <view class="nav-btn">
        <view class="nav-btn-icon icon-circle"></view>
        <view class="nav-btn-text">名菜</view>
      </view>
      <view class="nav-btn">
        <view class="nav-btn-icon icon-circle"></view>
        <view class="nav-btn-text">名点</view>
      </view>
      <view class="nav-btn">
        <view class="nav-btn-icon icon-circle"></view>
        <view class="nav-btn-text">名店</view>
      </view>
    </view>
    <view class="info-list">
      <view class="dis-flex flex-x-between info-item" v-for="item in 10">
        <view class="info-pic"></view>
        <view class="info-view">
          <view class="info-title">
            标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题
          </view>
          <view class="dis-flex info-bottom">
            <view>10月07日</view>
            <view>点赞</view>
            <view>阅读量</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import themeMixins from '@/pages/yuecai/mixins/themeMixins.js';
  export default {
    mixins: [themeMixins],
    data() {
      return {
        chartOption: {

        },
        keyword: '',
        bannerList: [],
        page: {},
        keyword: '',
        list: []
      }
    },
    onLoad(options) {},
    onShow() {
      this.getBanners()
    },
    methods: {
      getBanners() {
        this.$u.api.getInformationList(0, 6, {}).then(res => {
          this.bannerList = res.data.records || []
        })
      },
      clickInfo(index) {
        if (index < 0) {
          return;
        }
        uni.navigateTo({
          url: "/pages/yuecai/information/detail/index?id=" + this.bannerList[index].id,
        })
      },
      doSearch() {

      }
    },
  }
</script>

<style scoped lang="scss">
  .search-left-btn {
    min-width: 28px;
    height: 28px;
    margin-right: 5px;
    box-sizing: border-box;
  }

  .icon-circle {
    border-radius: 50%;
    border: 1rpx solid #787878;
  }

  .nav-btns {
    border-bottom: 1rpx solid #787878;
    margin-bottom: 20rpx;
    padding-bottom: 50rpx;

    .nav-btn {
      width: 150rpx;

      .nav-btn-icon {
        margin: auto;
        width: 110rpx;
        height: 110rpx;
      }

      .nav-btn-text {
        width: 100%;
        text-align: center;
      }
    }
  }

  .info-list {
    .info-item {
      padding: 20rpx;

      .info-pic {
        width: 160rpx;
        height: 160rpx;
        background: bisque;
      }

      .info-view {
        width: calc(100% - 180rpx);

        .info-title {
          overflow: hidden;
          text-overflow: -o-ellipsis-lastline;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 3;
          line-clamp: 3;
          -webkit-box-orient: vertical;
        }

        .info-bottom {
          color: #787878;
          margin-top: 10rpx;
        }
      }
    }
  }
</style>