u

code/link56/link56-frontend-new/src/views/home/components/recommend.vue

@@ -0,0 +1,110 @@
+<script lang="ts" setup>
+const tableData = [
+  {
+    date: '2016-05-03',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles',
+  },
+  {
+    date: '2016-05-02',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles',
+  },
+  {
+    date: '2016-05-04',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles',
+  },
+  {
+    date: '2016-05-01',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles',
+  },
+]
+</script>
+
+<template>
+  <div class="recommend">
+    <div class="left">
+      <div class="recommend-title">
+        企业名录
+      </div>
+
+      <el-table :data="tableData" border stripe style="width: 100%">
+        <el-table-column prop="date" label="地区" width="180" />
+        <el-table-column prop="name" label="公司" />
+      </el-table>
+    </div>
+
+    <div class="right">
+      <div class="hot-card">
+        <div class="hot-card-title">
+          热门推荐
+        </div>
+        <div class="hot-card-list">
+          <div v-for="i in 10" :key="i" class="hot-card-item">
+            <span class="number">{{ i }}</span>
+            <span class="name">xxxxxxxxxx公司公司</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.recommend {
+  width: 100%;
+  padding: 0 128px;
+  margin-top: 24px;
+  display: flex;
+  .left {
+    flex: 1;
+  }
+
+  .right {
+    width: 20%;
+    margin-left: 32px;
+    .hot-card {
+      width: 100%;
+
+      .hot-card-list {
+        display: flex;
+        flex-direction: column;
+        background-color: #fff;
+        .hot-card-item {
+          display: flex;
+          align-items: center;
+          padding: 8px 12px;
+          border-bottom: 1px solid #eee;
+          cursor: pointer;
+          .number {
+            font-weight: bold;
+            color: #666666;
+            font-size: 22px;
+          }
+
+          .name {
+            margin-left: 12px;
+            font-size: 18px;
+            color: #333;
+          }
+
+          &:last-child {
+            border-bottom: none;
+          }
+        }
+      }
+    }
+  }
+
+  .recommend-title,
+  .hot-card-title {
+    font-size: 22px;
+    font-weight: 600;
+    color: #333;
+    position: relative;
+    margin-bottom: 12px;
+  }
+}
+</style>

code/link56/link56-frontend-new/src/views/home/index.vue

@@ -0,0 +1,98 @@
+<script lang="ts" setup>
+import QueryCompany from '@/components/QueryCompany.vue'
+import { useCommonOptions } from '@/store/commonOptions'
+import Recommend from './components/recommend.vue'
+
+const commonOptions = useCommonOptions()
+
+const carouselList = [
+  { img: '/ship-8263464_1920.jpg', href: '' },
+  { img: '/ship-8263464_1920.jpg', href: '' },
+  { img: '/ship-8263464_1920.jpg', href: '' },
+]
+</script>
+
+<template>
+  <div class="wrapper">
+    <!-- 轮播图 -->
+    <el-carousel class="carousel">
+      <el-carousel-item v-for="item in carouselList" :key="item.href">
+        <img :src="item.img">
+      </el-carousel-item>
+    </el-carousel>
+
+    <!-- 内容浮在轮播图上 -->
+    <div class="content">
+      <div class="intro">
+        <span class="intro-heading">连接优质企业伙伴</span>
+      </div>
+
+      <div class="query">
+        <QueryCompany :properties="commonOptions.propertyOptions" :areas="commonOptions.areaOptions" />
+      </div>
+    </div>
+
+    <Recommend />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.wrapper {
+  width: 100%;
+}
+
+/* 轮播图 */
+.carousel {
+  width: 100%;
+  height: 600px;
+  position: relative;
+  :deep(.el-carousel__container) {
+    height: 100%;
+  }
+  :deep(.el-carousel__item) {
+    cursor: pointer;
+  }
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    cursor: pointer;
+  }
+}
+
+/* 内容浮在轮播图上 */
+.content {
+  position: absolute;
+  top: 260px;
+  left: 0;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  z-index: 2;
+  color: #fff;
+
+  .intro {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-bottom: 28px;
+
+    .intro-heading {
+      font-size: 28px;
+      font-weight: 600;
+    }
+
+    .intro-detail {
+      font-size: 18px;
+      margin-top: 8px;
+    }
+  }
+
+  .query {
+    width: 1240px;
+  }
+}
+</style>