freight-ts-dy-web/src/pagesHome/index.vue

<template>
  <Layout>
    <!-- 轮播图 -->
    <!-- <button
      open-type="im"
      :data-im-id="'13918346152'"
      @im="imCallback"
      @error="onimError"
      class="animate-button"
    >
      点击咨询
    </button> -->

    <CustomSwiper> </CustomSwiper>
    <!-- 入口 -->
    <view class="entry-card">
      <uni-card
        :shadow="'0rpx 0rpx 10rpx 0rpx rgba(5,68,37,0.12)'"
        :padding="'20px 10px'"
        :border="false"
      >
        <uni-grid :column="3" :showBorder="false" :square="false">
          <uni-grid-item v-for="(item, index) in entryItemList" :key="index">
            <view class="item">
              <view @click="handleClick(item)">
                <view>
                  <image :src="`${url}/static/img/${item.path}`"></image>
                </view>
                <view>
                  <text class="text">{{ item.name }}</text>
                </view>
              </view>
            </view>
          </uni-grid-item>
        </uni-grid>
      </uni-card>
    </view>

    <!-- 介绍 -->
    <view class="avatar-card">
      <uni-card
        :shadow="'0rpx 0rpx 10rpx 0rpx rgba(5,68,37,0.12)'"
        :padding="'10px 10px'"
        :border="false"
      >
        <view class="title">爱梵达</view>
        <image
          :src="`/static/avatar/1.jpg`"
          :mode="'widthFix'"
          style="width: 100%"
        />
        <image
          :src="`/static/avatar/2.jpg`"
          :mode="'widthFix'"
          style="width: 100%"
        />
        <image
          :src="`/static/avatar/3.jpg`"
          :mode="'widthFix'"
          style="width: 100%"
        />
        <image
          :src="`/static/avatar/4.jpg`"
          :mode="'widthFix'"
          style="width: 100%"
        />
        <image
          :src="`/static/avatar/5.jpg`"
          :mode="'widthFix'"
          style="width: 100%"
        />
      </uni-card>
    </view>
  </Layout>
</template>

<script setup lang="ts">
import CustomSwiper from "@/components/CustomSwiper/index.vue";
import Layout from "@/components/Layout/index.vue";
import { url } from "@/utils/data";
const bannerList = [
  {
    imgUrl: "v-a1.png",
  },
];

const entryItemList = ref([
  {
    path: "1.png",
    name: "报废车辆回收",
    url: "/pagesVehicle/index",
  },
  {
    path: "2.png",
    name: "电池回收",
    url: "/pagesBattery/index",
  },
  {
    path: "3.png",
    name: "废钢回收",
    url: "/pagesScrapSteel/index",
  },
]);

const handleClick = (item: any) => {
  uni.navigateTo({
    url: item.url, // 要跳转到的页面路径
  });
};

const imCallback = (e: any) => {
  console.log("跳转IM客服成功", e.detail);
};

const onimError = (e: any) => {
  console.log("拉起IM客服失败", e.detail);
};
</script>

<style lang="scss" scoped>
.entry-card {
  .item {
    text-align: center;
    image {
      width: 74rpx;
      height: 76rpx;
    }
    .text {
      font-size: 28rpx;
      font-weight: 400;
      line-height: 42rpx;
    }
  }
}

.avatar-card {
  .title {
    font-weight: 500;
    font-size: 34rpx;
    color: #282728;
    line-height: 80rpx;
    padding-left: 30rpx;
    &::before {
      content: " ";
      width: 6rpx;
      background: #ff782b;
      border-radius: 3rpx;
      position: absolute;
      height: 32rpx;
      top: 46rpx;
      left: 20rpx;
    }
  }
  ::v-deep .uni-card--shadow {
    padding: 0px !important;
  }
  image + image {
    margin-top: -14rpx;
  }
}
</style>