zhangsiye/mini/pages/index/index.vue

<template>
  <view class="container">
    <!--search-->
    <view class="search-box main-center cross-center">
      <u-input
        v-model="keywords"
        placeholder="请输入剧名 /演员"
        color="#fff"
        border="none"
        prefix-icon="search"
        :prefix-icon-style="{
          color: $colors.primaryColor,
          fontSize: '50rpx',
          fontWeight: 500,
          lineHeight: '50rpx'
        }"
        :custom-style="{
          backgroundColor: '#1B203C',
          padding: '14rpx 30rpx',
          width: '700rpx',
          borderRadius: '36rpx',
          color: '#fff'
        }"
      />
    </view>
    <!--swpier-->
    <swiper-box />
    <!--栏目分类-->
    <nav-bar />
    <!--分类-->
    <episode-box title="短剧推荐" type="recommend" />
    <episode-box title="最新热剧" type="news" />
    <episode-box title="排行榜" type="rank" />
    <!--tab bar-->
    <tab-bar />
    <!--最近播放-->
    <recent />
  </view>
</template>

<script>
import SwiperBox from '../../components/SwiperBox/index'
import EpisodeBox from './components/EpisodeBox'
import TabBar from '../../components/TabBar/index'
import NavBar from '../../components/NavBar/index'
import Recent from './components/Recent'
export default {
  components: { Recent, NavBar, TabBar, EpisodeBox, SwiperBox },
  data() {
    return {
      keywords: ''
    }
  },
  computed: {
  },
  onLoad(options) {
  },
  methods: {

  }
}
</script>

<style lang="scss" scoped>
  .container{
    padding: 0 20rpx 160px;
    .search-box{
      margin-top: 30rpx;
    }
    .category-box{
      .category-item{
        flex: 1;
        font-size: 32rpx;
        .icon{
          image{
            width: 100rpx;
            height: 100rpx;
          }
        }
        text{
          color: #fff;
        }
      }
    }
  }
</style>