dl-sale-platform/ruoyi-ui/src/views/system/userFront/index.vue

<template>
  <div id="app">
    <!-- 顶部导航栏 -->
    <el-header class="navbar">
      <div class="user-actions">
        <el-menu mode="horizontal" background-color="#333" text-color="#fff" active-text-color="#ffd04b">
          <el-menu-item>
            <router-link to="/note" style="display: block;">注意事项</router-link>
          </el-menu-item>
          <el-menu-item>
            <router-link to="/userOrder" style="display: block;">订单查询</router-link>
          </el-menu-item>


        </el-menu>
      </div>
    </el-header>

    <!-- 搜索区域 -->
    <el-main class="search-section">
      <h1>毕设网</h1>
      <p>优质的设计资源共享平台</p>
      <el-input placeholder="搜索设计"
                v-model="queryParams.name"
                clearable
                @keyup.enter.native="handleQuery"
                class="search-box">
        <el-button slot="append" icon="el-icon-search" @click="handleQuery"></el-button>
      </el-input>
    </el-main>

    <!-- 分类导航 -->
<!--    <el-main>-->
<!--      <el-menu mode="horizontal" class="categories">-->
<!--        <el-menu-item index="1">设计导航</el-menu-item>-->
<!--        <el-menu-item index="2">PHP设计</el-menu-item>-->
<!--        <el-menu-item index="3">Java设计</el-menu-item>-->
<!--        <el-menu-item index="4">微信小程序</el-menu-item>-->
<!--      </el-menu>-->
<!--    </el-main>-->

    <el-main>
      <el-menu mode="horizontal"
               class="categories"
               @select="handleQueryByTType">
        <el-menu-item index="" @click="getList()">全部</el-menu-item>
        <el-menu-item
          v-for="item in typeList"
          :key="item.number"
          :index="String(item.id)"
          @click="handleQueryByTType(item.number)">
          {{ item.name }}
        </el-menu-item>
      </el-menu>
    </el-main>

    <!-- 最新设计展示 -->
    <el-main>
      <h2 style="display: flex;justify-content: center;align-items: center;margin-bottom: 30px;margin-top: 0px">设计展示</h2>
      <div class="zhong-div">
        <!-- 标签部分 -->
        <div class="tags-container">
          <el-button
            v-for="(tag, index) in designTypeList"
            :key="tag.type"
            :label="tag.name"
            @click="handleQueryByTagType(tag.type)"
            style="margin: 5px;"
            class="tag">
            {{ tag.name }}
          </el-button>
        </div>
      <div class="wai">
      <el-row :gutter="20" class="card-row">
        <template v-if="goodsList.length > 0">
        <el-col :span="6" v-for="(item, index) in goodsList" :key="index" style="margin-bottom: 30px">
<!--          <router-link :to="{ path: `/cusDetails/${item.id}` }">-->
            <router-link :to="{ path: '/cusDetails', query: { id: item.id } }">
          <el-card :body-style="{ padding: '5px' }">
            <el-image :src="`http://127.0.0.1:8080${item.cover}`" class="image" />
            <div style="padding: 8px;">
              <span>{{ item.name }}</span>
              <div class="bottom clearfix" style="display: flex;justify-content: center;align-items: center">

              </div>
              <div style="font-size: 12px">
                <span style="display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;">
                  {{item.introduction}}</span>
              </div>
            </div>
            <div class="tag-div">
              <div>
              <el-tag type="primary" style="margin-right: 5px;">{{ item.technicalName }}</el-tag>
              <el-tag type="primary" style="margin-right: 5px;">{{ item.designName }}</el-tag></div>
              <div>
                <span class="price" > ￥{{ item.price }}</span>
              </div>
            </div>
          </el-card>
          </router-link>
        </el-col>
        </template>
        <template v-else>
          <div class="no-data" style="text-align: center; margin-top: 150px;">
            <p>暂无数据</p>
          </div>
        </template>
      </el-row>
      </div>
      </div>

      <el-pagination
        background
        layout="prev, pager, next"
        v-show="total>0"
        :total="total"
        :current-page.sync="queryParams.pageNum"
        :page-size.sync="queryParams.pageSize"
        @current-change="getList">
      </el-pagination>
    </el-main>

    <!--页脚部分-->
    <footer class="footer">
      <div class="footer-content">
        <p>© 2024 Company Name. All Rights Reserved.</p>
        <p>联系我们: contact@example.com | 电话: 123-456-7890</p>
        <nav>
          <a href="/about">关于我们</a> |
          <a href="/privacy">隐私政策</a> |
          <a href="/terms">使用条款</a>
        </nav>
      </div>
    </footer>
  </div>

</template>

<script>
import {listAllGoods} from "@/api/system/goods";
import {listType} from "@/api/system/type";
import {listDesignType} from "@/api/system/designType";

export default {
  data() {
    return {
      searchQuery: '',
      // 总条数
      total: 0,
      // 商品表格数据
      goodsList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 12,
        name: null,
        cover: null,
        technicalTypeId: null,
        designTypeId: null,
        price: null,
        introduction: null,
        details: null,
        resource: null,
        technicalName: null,
        designName: null,
        createTime: null,
      },

      // 技术类型表格数据
      typeList: [],
      queryParamsTn: {
        pageNum: 1,
        pageSize: 10,
        name: null,
        number: null,
      },

      // 设计类型表格数据
      designTypeList: [],
      queryParamsDn: {
        pageNum: 1,
        pageSize: 10,
        name: null,
        type: null,
      },
      technicalType: null
    };
  },
  mounted() {
    this.getList();
  },
  created() {
    this.getList();
    console.log('aaa',this.goodsList)
    this.getTnList()
    this.getDnList()
  },
  methods: {
    /** 查询商品列表 */
    getList() {

        this.queryParams.pageSize = 12
      listAllGoods(this.queryParams).then(response => {
        this.goodsList = response.rows;
        this.total = response.total;
      });
    },
    /** 查询技术类型列表 */
    getTnList() {
      listType(this.queryParamsTn).then(response => {
        this.typeList = response.rows;
      });
    },
    /** 查询设计类型列表 */
    getDnList() {
      listDesignType(this.queryParamsDn).then(response => {
        this.designTypeList = response.rows;
        this.total = response.total;
      });
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 根据技术type查询商品列表 */
    handleQueryByTType(type) {
      this.reset()
      this.technicalType = type
      this.queryParams.technicalTypeId = type;
      listAllGoods(this.queryParams).then(response => {
        this.goodsList = response.rows;
        this.total = response.total;
      });
    },
    /** 根据设计type查询商品列表 */
    handleQueryByTagType(type) {
      this.queryParams.technicalTypeId = this.technicalType
      this.queryParams.designTypeId = type;
      listAllGoods(this.queryParams).then(response => {
        this.goodsList = response.rows;
        this.total = response.total;
      });
    },
    reset() {
      this.queryParams = {
        name: null,
        cover: null,
        technicalTypeId: null,
        designTypeId: null,
        price: null,
        introduction: null,
        details: null,
        resource: null,
        technicalName: null,
        designName: null,
        createTime: null,
      };
    },
  }
};
</script>

<style scoped lang="scss">

.container {
  width: 60%; /* 调整宽度，留出两边空白 */
  margin: 0 auto; /* 自动左右边距居中 */
}
/* 卡片的布局样式 */
.card-container {
  display: flex; /* 使用 flex 布局来水平排列卡片 */
  justify-content: space-around; /* 在卡片之间留出空隙 */
}

.el-card {
  width: 260px; /* 卡片宽度调整 */
  height: 300px;
  text-align: center;
  padding: 3px; /* 给卡片增加一些内边距 */
  background-color:#f4f4f4; /* 设置背景颜色 */
  border-radius: 8px; /* 圆角样式 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
}

.card img {
  width: 100%; /* 图片占满卡片宽度 */
  border-radius: 8px; /* 图片圆角和卡片保持一致 */
}
/* 样式和之前相同 */
.navbar {
  background-color: #333;
  color: #fff;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 10px;
}

.search-section {
  text-align: center;
  background-color: #333;
  color: white;
  padding: 30px 10px;
}

.search-box {
  margin-top: 20px;
  width: 400px;
}

.project-grid {
  margin-top: 20px;
}


.image {
  width: 100%;
  height: 150px;
}

.price {
  front-size: 16px;
  color: #ff9900;
  font-weight: bold;
}

.bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.button {
  color: #409EFF;
  cursor: pointer;
}


/*.tags-container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: 20px;
}*/

.tags-container {
  display: flex;
  justify-content: flex-start;
  align-content: flex-start;
  flex-wrap: wrap;
  margin: 20px;
  width: 180px;
}
.tags-container .el-button.tag {
  front-size: 18px;
  margin: 10px; /* 每个按钮之间的间距 */
  padding: 2px 3px 2px 3px;
  border: 1px solid #ccc;
  border-radius: 5px;
  text-align: center;
  height: 40px;
  width: 60px;
}

.tags-container span {
  margin: 10px;
  padding: 8px 15px;
  border: 1px solid #ccc;
  border-radius: 5px;
  cursor: pointer;
  background-color: #fff;
  transition: background-color 0.3s;
}

.tags-container span:hover {
  background-color: #eee;
}

/* 页脚样式 */
.footer {
  background-color: #333;
  color: white;
  padding: 20px 0;
  text-align: center;
  margin-top: 20px;
}

.footer a {
  color: #ddd;
  margin: 0 10px;
  text-decoration: none;
}

.footer a:hover {
  color: white;
}

.footer-content p {
  margin: 5px 0;
}
.wai{
  margin: 0 auto;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 1200px;
  height: 100%;
}

.el-menu {
  border-bottom: none; /* 去掉底部的线条 */
}
.intro-div {
  height: 40px;
  background-color: red;
}

.tag-div {
  margin-bottom: 1px;
  display: flex;
  justify-content: space-between;

}
.el-card__body {
  height: 310px;
  flex: 1; /* 让el-card__body充满剩余空间 */
}
.zhong-div {
  min-height: 800px; /* 设置最小高度 */
  display: flex; /* 设置为 Flex 容器 */
  flex-direction: row; /* 子元素从左到右排列 */
  height: 100%; /* 使 el-main 高度占满容器 */
  padding: 0; /* 可选：移除默认内边距 */
}

.no-data {
  display: flex;

  min-height: 600px; /* 设置最小高度，根据实际需求调整 */
  min-width: 1200px; /* 设置最小高度，根据实际需求调整 */
  justify-content: center; /* 使卡片在行内均匀分布 */
  font-size: 30px;
  color: #999;
}

.el-pagination {
  display: flex;
  justify-content: center;
  align-items: center;


}


.card-row {
  display: flex;
  flex-wrap: wrap;
  min-height: 600px; /* 设置最小高度，根据实际需求调整 */
  min-width: 1200px; /* 设置最小高度，根据实际需求调整 */
  justify-content: flex-start; /* 使卡片在行内均匀分布 */
}


</style>