factoryDirector/src/view/Home/index.vue

<template>
  <Banne :banneImageList="imgList.banneImageList" />
  <div class="video-information">
    <div class="conetnt">
      <div class="video-1">视频</div>
      <div>
        <p class="brief-introduction">云厂长视频简介</p>
        <p class="information">
          Hi，各位厂长们，这是我们的第一次会面，我想您一定会对我感到好奇，请花一分钟了解一下我吧～
        </p>
        <div class="btn-list">
          <button class="explanation btn">十分钟详解</button
          ><button class="btn">开始试用</button
          ><button class="btn">插件介绍</button>
        </div>
      </div>
    </div>
  </div>
  <SolveQuestion />
  <FunctionIntroduction />
  <Project />
  <WhyFactoryDirector />
  <UserSound />
  <Increase />
  <div class="start">
    <p class="start-title">免费试用云厂长的核心功能，开启您的智能制造之旅！</p>
    <button class="free">免费体验</button>
  </div>
  <Bottom />
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted, nextTick } from "vue";
import { getBanneList } from "../../api/home";
import Banne from "../../components/Banne/index.vue";
import SolveQuestion from "./component/solveQuestion.vue";
import Project from "./component/project.vue";
import Bottom from "../../components/Layout/bottom.vue";
import FunctionIntroduction from "./component/functionIntroduction.vue";
import WhyFactoryDirector from "./component/whyFactoryDirector.vue";
import UserSound from "./component/userSound.vue";
import Increase from "./component/increase.vue";
import { useRouter, useRoute } from "vue-router";
import { ElMessage } from "element-plus";

const imgList = reactive({
  //banne图需要的数据
  banneImageList: [],
});

//获取数据
const getInfo = () => {
  getBanneList().then((res) => {
    let arr: any = [];
    res.data.map((item: any) => {
      console.log(item.is_jump);
      const obj = {
        imgUrl: item.image,
        isBtn: item.is_jump == 1 ? true : false,
        jump_url: item.jump_url,
        btnList: [
          {
            text: item.title,
            backgroundColor: "#0D0FFF",
            color: "#fff",
          },
        ],
      };
      arr.push(obj);
    });

    imgList.banneImageList = arr;
    console.log(imgList.banneImageList);
  });
};

onMounted(() => {
  getInfo();
});
</script>
<style lang="less" scoped>
.video-information {
  display: flex;
  justify-content: center;
  padding: 60px 0;
  .conetnt {
    display: flex;
    align-items: center;
    width: 60%;
    .video-1 {
      width: 480px;
      height: 270px;
      background-color: #ccc;
      margin-right: 60px;
      text-align: center;
    }
    .brief-introduction {
      font-size: 26px;
      margin-bottom: 16px;
      color: #222;
    }
    .information {
      font-size: 16px;
      color: #444;
      margin-bottom: 44px;
    }
    .btn {
      margin-right: 16px;
      width: 126px;
      height: 48px;
      color: #0d0fff;
      background-color: #e3e9ff;
      border: none;
      cursor: pointer;
    }
    .explanation {
      background-color: #0d0fff;
      color: #fff;
    }
  }
}

.start {
  height: 360px;
  width: 100%;
  background-image: url("../../assets/image/mianfeibg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  .start-title {
    text-align: center;
    font-size: 50px;
    font-weight: 600;
    padding-top: 100px;
  }
  .free {
    width: 152px;
    height: 52px;
    border: none;
    background-color: #0d0fff;
    color: #fff;
    display: block;
    margin: 70px auto;
    font-size: 16px;
  }
}
</style>