xinkeaboard/xinkeaboard-web/components/HomeSlider.vue

<template>
  <div class="home-slider">
    <div class="s1">
      <CategorySort />
    </div>
    <div class="s2">
      <el-carousel height="459px" arrow="hover">
        <el-carousel-item
          v-for="(item_banner, index_banner) in demoData"
          :key="index_banner"
        >
          <a href="javascript:void(0)" @click="diyNavTo(item_banner)">
            <!-- <img :src="item_banner.imgUrl" /> -->
            <div :style="`background-image:url(${item_banner.imgUrl})`"></div>
          </a>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="s3">
      <p class="title">Sign up to enjoy exciting Buyers Club benefits</p>
      <p class="link" v-if="!filtersStore.getLoginFlag">
            <nuxt-link to="/login">
              <span>{{L['登录']}}</span>
            </nuxt-link>
          </p>

          <p class="link" v-if="!filtersStore.getLoginFlag">
            <nuxt-link to="/register">
              <span>{{L['注册']}}</span>
            </nuxt-link>
          </p>

          <p class="link" v-if="filtersStore.getLoginFlag">
            <nuxt-link to="/">
              <span>{{L['退出']}}</span>
            </nuxt-link>
          </p>

          <p class="link">
            <nuxt-link to="/home/contact">
              <span>{{L['发布需求']}}</span>
            </nuxt-link>
          </p>

      <p class="desc">
        this is demo,this is demothis is demothis is demothis is demothis is demothis is demo,this is demo,this is demothis is demothis is demo,this is demo
      </p>

    </div>
  </div>
</template>

<script setup>
import { ElCarousel, ElCarouselItem } from "element-plus";
import { useFiltersStore } from "@/store/filter.js";
const filtersStore = useFiltersStore();

const L = getCurLanguage();

const demoData = [
  {
    imgUrl:
      "/images/admin/deco/lchSfBcyKhyiycXXzVE.jpg",
  },
  {
    imgUrl:
      "/images/admin/deco/lchSfBcyKhyiycXXzVE.jpg",
  },
];
</script>

<style lang="scss" scoped>
.home-slider {
  width: 1210px;
  margin: 0 auto;
  position: relative;
  height: 459px;
  background: #fff;
  margin-bottom: 30px;
  box-shadow: -1px 5px 10px 0px #ddd;
  .s1{
    width: 187px;
    float: left;
  }
  .s2{
    width: calc(100% - 437px);
    float: left;
  }
  .s3{
    width: 250px;
    float: left;
    padding: 10px 30px;
    .title{
        font-size: 16px;
    }
    .link{
        display: block;
        width: 100%;
        background: $colorMain;
        font-size: 15px;
        text-align: center;
        padding: 5px 0px;
        border-radius: 10px;
        margin: 10px auto;
        &:hover{
            opacity: .7;
        }
        a{
            color: #fff;
        }
    }
    .desc{
        font-size: 14px;
        line-height: 2;
    }
  }
  .el-carousel {
    width: 100%;
    margin: 0 auto;
  }

  background: #f8f8f8;

  .el-carousel__item {



    div {
      background-position: center center;
      width: 100%;
      height: 459px;

      background-repeat: no-repeat;
      background-size: cover;
    }
  }
}
</style>