website/src/views/index/slider.vue

<template>
  <div class="slider">
    <div class="slider-container">
    <img class="bg" src="@/assets/image/banner.jpg">
      <div class="box">
       <div class="text">
        <h2>小发同城</h2>
        <h3>店铺商家火热招募中</h3>
        <p>开店成本低 0元开店</p>
       </div>
        <div class="sub">
          <el-button :icon="Promotion" color="#ffc114" round size="large" @click="openRegisterForm">
            免费开店
          </el-button>
          <el-button :icon="Download" round size="large" @click="downAndroid">
            Android版本下载
          </el-button>
        </div>
      </div>
    </div>
  </div>

  <div class="counter_wrapper" data-aos="fade-up">
    <div class="container">
      <el-row :gutter="10">
        <el-col :span="6">
          <div class="count_box box_hover">
            <i class="iconfont icon-employee1"></i>
            <h3>
              <el-statistic
                :value="businessmanValue"
                :formatter="formatter"
                :value-style="{ fontSize: '35px' }"
              />
            </h3>
            <p>商家数量</p>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="count_box box_center">
            <i class="iconfont icon-baobei"></i>
            <h3>
              <el-statistic
                :value="productValue"
                :formatter="formatter2"
                :value-style="{ fontSize: '35px' }"
              />
            </h3>
            <p>商品数量</p>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="count_box box_hover">
            <i class="iconfont icon-vip"></i>
            <h3>
              <el-statistic
                :value="memberValue"
                :formatter="formatter"
                :value-style="{ fontSize: '35px' }"
              />
            </h3>
            <p>会员数量</p>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="count_box box_hover">
            <i class="iconfont icon-dingdan"></i>
            <h3>
              <el-statistic
                :value="orderValue"
                :formatter="formatter2"
                :value-style="{ fontSize: '35px' }"
              />
            </h3>
            <p>订单数量</p>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { useTransition } from "@vueuse/core";
import { ref, onMounted, defineEmits } from "vue";
import { Promotion, Download } from "@element-plus/icons-vue";
import { ElMessage } from 'element-plus'

const businessman = ref(0);
const product = ref(0);
const member = ref(0);
const order = ref(0);

const emits = defineEmits(["open-register-form"]);

const openRegisterForm = () => {
  console.log(1111);
  emits("open-register-form");
};

const downAndroid = ()=>{
  ElMessage.error('敬请期待~')
}

const businessmanValue = useTransition(businessman, {
  duration: 1500,
});
const productValue = useTransition(product, {
  duration: 1500,
});
const memberValue = useTransition(member, {
  duration: 1500,
});
const orderValue = useTransition(order, {
  duration: 1500,
});

businessman.value = 6274;
product.value = 62400;
member.value = 10800;
order.value = 12000;

const formatter = (value: number) => {
  return `${Math.round(value)}+`;
};
const formatter2 = (value: number) => {
  return `${Math.round(value)}k+`;
};
</script>

<style lang="scss" scoped>
.slider {
  width: 100%;
  position: relative;
}

.slider-container {
  display: flex;
  width: 100%;
  height: 800px;
  // background: url("@/assets/image/banner1.jpg") no-repeat 50% 0;
  // background-size:contain;
  margin: auto;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;

  .bg{
    left: 50%;
    object-fit: contain;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    z-index: 1;
  }

  .box {
    width: 1000px;
    margin: auto;
    height: 800px;
    position: relative;
    z-index: 2;

    .sub {
      position: absolute;
      top: 58%;
      transform: translateY(58%);
      left: 150px;
    }
  }
}

.counter_wrapper {
  position: relative;
  margin-top: -100px;
  z-index: 12;
}

.counter_wrapper .count_box {
  width: 100%;
  padding: 15px 0;
  border-radius: 10px;
  text-align: center;
  margin-bottom: 40px;
  background: #fff;
  box-shadow: 2px 2px 10px 1px rgba(0, 0, 0, 0.08);
  transition: 0.3s;
}

.counter_wrapper .count_box i::before {
  font-size: 60px;
  color: #353535;
  transition: 0.3s;
}

.counter_wrapper .count_box h3 {
  font-size: 35px;
  font-weight: 500;
  color: #353535;
  margin: 15px 0;
  transition: 0.3s;
}

.counter_wrapper .count_box p {
  font-size: 18px;
  font-weight: 500;
  color: #353535;
  transition: 0.3s;
}

.counter_wrapper .count_box:hover i::before {
  color: #ffffff;
}

.counter_wrapper .count_box:hover p {
  color: #ffffff;
}

.counter_wrapper .count_box:hover .el-statistic__content {
  color: #ffffff;
}

.counter_wrapper .count_box:hover {
  background: #f34d2c;
}

.container {
  width: 100%;
  max-width: 1200px;
  margin: auto;
}

.container .el-row {
  width: 100%;
}

.text{
  display: none;
  color: #fff;
  margin-bottom: 20px;

  h2{
    font-size: 55px;
  }
  h3{
    font-size: 32px;
    margin-top: 10px;
  }
  p{
    font-size: 32px;
    margin-bottom: 10px;
  }
  
}

@media (max-width: 768px) {
  .text{
    display: block;
  }
  
  .bg{
    display: none;
  }



  .slider-container {
    height: 360px;
    background: linear-gradient(180deg, #f85535, #f76c50);

    .box {
      width: 100%;
      margin: auto;
      height: 360px;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;

      .sub {
        position: initial;
        transform: none;
        text-align: center;
        width: 100%;

        button {
          margin-bottom: 12px;
        }
      }
    }
  }

  .counter_wrapper {
    margin-top: 20px;
    .container {
      display: flex;
      justify-content: center;
    }
  }
}
</style>