467 lines
11 KiB
Vue
467 lines
11 KiB
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>
|