gaoyixia-pc/src/views/index.vue

<template>
  <div class="index-wrap">
    <div class="banner">
      <img
        v-if="!bannerList.length"
        src="@/assets/img/index-banner.png"
        alt=""
      />
      <el-carousel class="banner-container">
        <el-carousel-item v-for="item in bannerList" :key="item.id">
          <img :src="item.cover" @click="toDetail(item)" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="content">
      <div class="search" @click="toSearch">
        <div class="search-content">
          <div class="hot">
            <img src="@/assets/icon/resoubang.png" />
            <span>热搜榜</span>
          </div>
          <div class="search-btn">搜索</div>
        </div>
      </div>
      <div class="card-box">
        <div
          v-for="item in card_list"
          :class="'card card-' + item.span"
          :style="
            item.backgroundImage
              ? {
                  backgroundImage: `url(${item.backgroundImage})`,
                }
              : { background: item.background }
          "
        >
          <div v-if="item.title == 'app介绍'" class="card-app">
            <div class="card-app-info">
              <div class="card-title">APP介绍</div>
              <div class="card-app-info-app">
                搞一下汽车电子APP集视频、图文、资料、问答、新闻、供应商、需求、活动、招聘、商品和热搜为一体。随时随地掌握前沿技术、解决问题需求、获取信息热点，让您更轻松地找到所需内容。
              </div>
            </div>
            <div class="card-app-qrcode">
              <div class="card-app-qrcode-title">APP下载</div>
              <img
                src="@/assets/img/index-qrcode.png"
                class="card-app-qrcode-img"
                alt=""
              />
            </div>
          </div>
          <div v-else-if="item.title == '搞一下问答'" class="card-wenda">
            <div class="card-wenda-search">
              <div class="card-wenda-search-title">搞一下问答</div>
              <div class="card-wenda-search-tips">搜索你想要的答案</div>
              <div class="card-wenda-search-ipt">
                <GradientBorder
                  borderWidth="1px"
                  borderRadius="50px"
                  :backgroundColor="item.background"
                >
                  <div class="card-wenda-search-ipt-content">
                    <input type="text" placeholder="输入你想搜索的内容" />
                    <button @click="forumSearch">搜索</button>
                  </div>
                </GradientBorder>
              </div>
            </div>
          </div>
          <div v-else class="card-content" @click="toModule(item)">
            <img class="card-content-icon" :src="item.icon" alt="" />
            <img class="card-line" :src="item.line" alt="" />
            <div class="card-title">{{ item.title }}</div>
            <div class="card-content-jumpBtn">
              <GradientBorder borderWidth="1px" borderRadius="30px">
                <div class="card-content-jumpBtn-content">
                  <span>GO</span>
                  <img src="@/assets/icon/jump.png" alt="" />
                </div>
              </GradientBorder>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import GradientBorder from "@/components/module/gradient-border.vue";
import { ExpediteService } from "@/common/service";
export default {
  components: { GradientBorder },
  data() {
    return {
      card: [
        {
          title: "app介绍",
          background: "#f1f4fc",
          span: 3,
          href: "",
        },
        {
          title: "视频",
          name: "shipin",
          span: 1,
          href: "/video",
        },
        {
          title: "图文",
          name: "tuwen",
          span: 1,
          href: "/image-text",
        },
        {
          title: "资料",
          name: "ziliao",
          span: 1,
          href: "/information",
        },
        {
          title: "搞一下问答",
          name: "wenda",
          span: 3,
          href: "",
        },
        {
          title: "新闻",
          name: "xinwen",
          span: 1,
          href: "",
        },
        {
          title: "供应商",
          name: "gongyingshang",
          span: 1,
          href: "",
        },
        {
          title: "活动",
          name: "huodong",
          span: 1,
          href: "",
        },
        {
          title: "招聘",
          name: "zhaopin",
          span: 1,
          href: "",
        },
        {
          title: "项目需求",
          name: "xiangmuxuqiu",
          span: 1,
          href: "",
        },
        {
          title: "商品",
          name: "shangpin",
          span: 1,
          href: "",
        },
      ],
      bannerList: [],
    };
  },
  computed: {
    card_list() {
      return this.card.map((item) => {
        return item.name
          ? {
              ...item,
              backgroundImage: require(`@/assets/img/home/${item.name}.png`),

              icon:
                item.name == "wenda"
                  ? ""
                  : require(`@/assets/img/home/${item.name}_icon.png`),
              line:
                item.name == "wenda"
                  ? ""
                  : require(`@/assets/img/home/${item.name}_line.png`),
            }
          : item;
      });
    },
  },
  mounted() {
    this.getBannerList();
  },
  methods: {
    // 获取轮播图
    getBannerList() {
      ExpediteService.getBanner({ is_pc: 1, num: 5 }).then(({ data }) => {
        this.bannerList = data.list;
        this.bannerList = data.list;
      });
    },
    // 轮播图跳转详情
    toDetail(item) {
      let detailDict = {
        video: {
          link: "/video-detail",
          first_id: "id",
          second_id: "videoArrId",
        },
        article: {
          link: "/image-text-detail",
          first_id: "article_id",
          second_id: "id",
        },
        datum: {
          link: "/information-detail",
          first_id: "datum_id",
          second_id: "id",
        },
      };
      let place = detailDict[item.place],
        query = {};
      if (!place) return;
      query[place.first_id] = item.first_id;
      query[place.second_id] = item.second_id;
      this.$router.push({
        path: place.link,
        query,
      });
    },
    // 跳转搜索
    toSearch() {
      this.$router.push("/search");
    },
    // 跳转模块
    toModule(item) {
      if (item.href) {
        this.$router.push(item.href);
      } else {
        this.$message.info("敬请期待");
      }
    },
    // 问答搜索
    forumSearch() {
      this.$message.info("敬请期待");
    },
  },
};
</script>

<style lang="scss">
$width: $body-width-100;
.index-wrap {
  user-select: none;
  .banner {
    width: $width;
    min-width: $body-width-min;
    height: calc(#{$width} * 0.3);
    .banner-container {
      height: 100%;
      .el-carousel__container {
        height: 100%;
      }
    }
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .content {
    $content-width-min: 900px;
    width: calc(#{$width} * 0.8);
    min-width: $content-width-min;
    margin: 100px auto 0;

    .search {
      width: 100%;
      height: 72px;
      background: linear-gradient(
        270deg,
        rgba(50, 226, 226, 1),
        rgba(59, 89, 248, 1),
        rgba(255, 153, 145, 1)
      );
      border-radius: 72px;
      display: flex;
      justify-content: center;
      align-items: center;

      .search-content {
        width: calc(100% - 4px);
        height: 68px;
        background-color: white;
        border-radius: 68px;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        position: relative;

        .search-btn {
          background: linear-gradient(to right, #38bbe8, #32e2e2);
          height: 60px;
          width: 120px;
          text-align: center;
          line-height: 60px;
          color: white;
          font-size: 18px;
          border-radius: 60px;
          margin: 4px;
        }
        .hot {
          position: absolute;
          right: 150px;
          font-size: 14px;
          font-weight: 400;
          color: #ff7b15;
          display: flex;
          align-items: center;
          user-select: none;
          img {
            width: 18px;
            height: 18px;
          }
        }
      }
    }

    .card-box {
      width: calc(#{$width} * 0.8);
      min-width: $content-width-min;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .card {
        margin: 10px 0;
        border-radius: 15px;
        background-size: 100% 100%;
        .card-title {
          font-size: 32px;
          display: inline;
        }
      }

      .card-3 {
        min-width: $content-width-min;
        width: calc(#{$width} * 0.8);
        min-height: 400px;
        height: calc(#{$width} * 0.3);
        display: flex;
        justify-content: center;
        align-items: center;
        .card-app {
          width: calc(#{$width} * 0.8 * 0.7);
          min-width: 750px;
          height: calc(#{$width} * 0.8 * 0.3);
          min-height: 300px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .card-app-info {
            min-width: 400px;
            height: 100%;
            width: 55%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            .card-app-info-app {
              font-size: 16px;
              font-weight: 400;
              color: #666666;
              line-height: 20px;
              margin-top: 30px;
            }
          }
          .card-app-qrcode {
            height: 100%;
            min-height: 300px;
            width: 35%;
            min-width: 240px;
            border-radius: 15px;
            background-color: white;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            .card-app-qrcode-title {
              font-size: 30px;
              margin-bottom: 20px;
            }
            .card-app-qrcode-img {
              min-height: 200px;
              height: calc(#{$width} * 0.8 * 0.3 * 0.6);
              min-width: 200px;
              width: calc(#{$width} * 0.8 * 0.3 * 0.6);
            }
          }
        }
        .card-wenda {
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          position: relative;
          .card-wenda-search {
            width: calc(#{$width} * 0.8 * 0.8 * 0.6);
            min-width: 500px;
            height: calc(#{$width} * 0.8 * 0.8 * 0.3);
            min-height: 300px;
            position: absolute;
            right: 5%;
            top: 15%;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: space-around;

            .card-wenda-search-title {
              font-size: 40px;
            }
            .card-wenda-search-tips {
              font-size: 20px;
              font-weight: 400;
              color: #666666;
            }
            .card-wenda-search-ipt {
              width: 100%;
              height: 20%;
              .card-wenda-search-ipt-content {
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: flex-end;
                input {
                  border: none;
                  outline: none;
                  height: calc(100% - 2px);
                  width: 65%;
                  background: transparent;
                  font-size: 24px;
                }
                input::-webkit-input-placeholder {
                  font-size: 24px;
                }
                button {
                  border: none;
                  outline: none;
                  height: calc(100% + 2px);
                  width: 27%;
                  background: linear-gradient(to right, #38bbe8, #32e2e2);
                  color: white;
                  border-top-right-radius: 50px;
                  border-bottom-right-radius: 50px;
                  font-size: 24px;
                }
              }
            }
          }
        }
      }

      .card-1 {
        min-width: 280px;
        width: calc(#{$width} * 0.8 * 0.3);
        min-height: 400px;
        height: calc(#{$width} * 0.3);
        position: relative;
        .card-content {
          padding-top: 15%;
          height: 75%;
          width: 100%;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          align-items: center;
          .card-content-icon {
            min-width: 100px;
            width: calc(#{$width} * 0.8 * 0.3 * 0.3);
            min-height: 100px;
            width: calc(#{$width} * 0.8 * 0.3 * 0.3);
          }
          .card-content-line {
            min-width: 120px;
            width: calc(#{$width} * 0.8 * 0.3 * 0.4);
            min-height: 18px;
            width: calc(#{$width} * 0.8 * 0.3 * 0.06);
          }
          .card-content-jumpBtn {
            min-width: 120px;
            width: calc(#{$width} * 0.8 * 0.3 * 0.4);
            min-height: 30px;
            height: calc(#{$width} * 0.8 * 0.3 * 0.1);
            .card-content-jumpBtn-content {
              width: 60%;
              height: 100%;
              margin: 0 auto;
              display: flex;
              justify-content: space-around;
              align-items: center;
              font-size: 18px;
              span {
                transform: translate(0, 2px);
              }
              img {
                height: 12px;
                width: 12px;
                transform: translate(0, 1px);
              }
            }
          }
        }
      }
    }
  }
}
@media (min-width: 2560px) {
  .card-3 {
    width: 30%;
    height: 20vw;
  }
  .card-1 {
    width: 30%;
    height: 20vw;
  }
  .banner {
    img {
      height: 30vw;
    }
  }
}
</style>