KeCheng/miniprogram/ai-camera/src/pages/home/home.vue

<template>
  <view class="home-container">
    <view class="home-content">
      <view class="banner"></view>
      <view class="content">
        <view class="part-row border-radius"></view>
        <view class="part-col border-radius"></view>
        <view class="part-col border-radius"></view>
        <view class="part-col border-radius"></view>
        <view class="part-col border-radius"></view>
        <view class="part-row large border-radius">
          <view class="title">其他应用</view>
          <view class="other-content">
            <view class="app-item">
              <view class="app-item-img border-radius"></view>
              <view class="app-item-title">AI写作</view>
            </view>
            <view class="app-item">
              <view class="app-item-img border-radius"></view>
              <view class="app-item-title">AI音乐</view>
            </view>
            <view class="app-item">
              <view class="app-item-img border-radius"></view>
              <view class="app-item-title">AI视频</view>
            </view>
          </view>
        </view>
        <view class="part-row large border-radius">
          <view class="title">
            热门推荐
            <view class="change-list" @click="changeList"
              >换一批<uni-icons type="refreshempty"
            /></view>
          </view>
          <view class="hot-list">
            <view
              class="hot-model border-radius"
              v-for="item in data.hotList"
              @click="changeModelId(item.model_id)"
              :key="item.model_id"
              >{{ item.model_name }}</view
            >
          </view>
          <view class="img-content">
            <view class="first-img border-radius" @click="toMake(0)">
              <image
                style="width: 100%; height: 100%"
                :src="data.imgList[0]"
                mode="scaleToFill"
              />
            </view>
            <view class="other-imgs">
              <view class="other-img border-radius" @click="toMake(1)"
                ><image
                  style="width: 100%; height: 100%"
                  lazy-load
                  :src="data.imgList[1]"
                  mode="scaleToFill"
              /></view>
              <view class="other-img border-radius" @click="toMake(2)"
                ><image
                  style="width: 100%; height: 100%"
                  lazy-load
                  :src="data.imgList[2]"
                  mode="scaleToFill"
              /></view>
              <view class="other-img border-radius" @click="toMake(3)"
                ><image
                  style="width: 100%; height: 100%"
                  lazy-load
                  :src="data.imgList[3]"
                  mode="scaleToFill"
              /></view>
              <view class="other-img border-radius" @click="toMake(4)"
                ><image
                  style="width: 100%; height: 100%"
                  lazy-load
                  :src="data.imgList[4]"
                  mode="scaleToFill"
              /></view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
import getData from "./home";
const { data, changeList, changeModelId, toMake } = getData();
</script>
<style scoped lang="scss">
.home-container {
  width: 100%;
  height: 100%;
  background-color: #707070;
  position: relative;
  .home-content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: scroll;
    .content {
      width: 100%;
      height: auto;
      padding: 0 $uni-spacing-col-base;
      box-sizing: border-box;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .part-row {
        width: 100%;
        height: 220rpx;
        background-color: white;
        margin-bottom: $uni-spacing-col-base;
      }
      .large {
        height: auto;
        min-height: 280rpx;
        .title {
          width: 100%;
          display: flex;
          align-items: center;
          height: 80rpx;
          padding: 0 $uni-spacing-row-base;
          margin-bottom: $uni-spacing-col-base;
          justify-content: space-between;
          box-sizing: border-box;
          .change-list {
            font-size: $uni-font-size-sm;
            color: $uni-text-color-grey;
          }
        }
        .hot-list {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-evenly;
          padding: 0 $uni-spacing-col-base;
          .hot-model {
            background-color: $uni-border-color;
            padding: 10rpx 30rpx;
            font-size: $uni-font-size-sm;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: $uni-spacing-col-base;
            margin-right: 2px;
          }
        }
        .img-content {
          width: 100%;
          height: auto;
          display: flex;
          padding: $uni-spacing-row-base;
          box-sizing: border-box;
          justify-content: space-between;
          .first-img {
            width: calc(50% - 10rpx);
            height: 500rpx;
            border: 1px solid $uni-border-color;
          }
          .other-imgs {
            width: calc(50% - 10rpx);
            height: 500rpx;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-content: space-between;
            .other-img {
              width: calc(50% - 10rpx);
              height: 240rpx;
              border: 1px solid $uni-border-color;
            }
          }
        }
        .other-content {
          width: 100%;
          height: auto;
          display: flex;
          justify-content: space-evenly;
          .app-item {
            width: 100rpx;
            height: 150rpx;
            .app-item-img {
              width: 100rpx;
              height: 100rpx;
              border: 1px solid $uni-border-color;
            }
            .app-item-title {
              width: 100rpx;
              height: 50rpx;
              line-height: 50rpx;
              text-align: center;
              font-size: $uni-font-size-sm;
            }
          }
        }
      }
      .part-col {
        width: calc(50% - 10rpx);
        height: 260rpx;
        background-color: white;
        margin-bottom: $uni-spacing-col-base;
      }
    }
  }
}
</style>