346 lines
7.9 KiB
Vue
346 lines
7.9 KiB
Vue
|
<template>
|
|||
|
|
<div id="app">
|
|||
|
|
<!-- 顶部导航栏 -->
|
|||
|
|
<el-header class="navbar">
|
|||
|
|
<el-menu mode="horizontal" background-color="#333" text-color="#fff" active-text-color="#ffd04b">
|
|||
|
|
<el-menu-item index="1">安装教程</el-menu-item>
|
|||
|
|
<el-menu-item index="2">开发服务</el-menu-item>
|
|||
|
|
<el-menu-item index="3">我的订单</el-menu-item>
|
|||
|
|
</el-menu>
|
|||
|
|
<div class="user-actions">
|
|||
|
|
<el-button type="primary">立即登录</el-button>
|
|||
|
|
<el-button type="success">快速注册</el-button>
|
|||
|
|
</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="handleQueryByType">
|
|||
|
|
<el-menu-item
|
|||
|
|
v-for="(item, index) in typeList"
|
|||
|
|
:key="item.number"
|
|||
|
|
:index="item.id"
|
|||
|
|
@click="handleQueryByType(item.number)">
|
|||
|
|
{{ item.name }}
|
|||
|
|
</el-menu-item>
|
|||
|
|
</el-menu>
|
|||
|
|
</el-main>
|
|||
|
|
|
|||
|
|
<!-- 最新设计展示 -->
|
|||
|
|
<el-main>
|
|||
|
|
<h2 style="display: flex;justify-content: center;align-items: center">最新设计</h2>
|
|||
|
|
<div class="wai">
|
|||
|
|
<el-row :gutter="20" class="project-grid">
|
|||
|
|
<el-col :span="6" v-for="(item, index) in goodsList" :key="index" style="margin-bottom: 30px">
|
|||
|
|
<router-link :to="`/cusDetails/${item.id}`">
|
|||
|
|
<el-card :body-style="{ padding: '5px' }">
|
|||
|
|
<el-image :src="`http://127.0.0.1:8080${item.cover}`" class="image" style="width:100px;height:160px"/>
|
|||
|
|
<div style="padding: 8px;">
|
|||
|
|
<span>{{ item.name }}</span>
|
|||
|
|
<div class="bottom clearfix">
|
|||
|
|
<span class="price" >价格：￥{{ item.price }}</span>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<span >项目简介：{{item.introduction}}</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</el-card>
|
|||
|
|
</router-link>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<pagination
|
|||
|
|
v-show="total>0"
|
|||
|
|
:total="total"
|
|||
|
|
:page.sync="queryParams.pageNum"
|
|||
|
|
:limit.sync="queryParams.pageSize"
|
|||
|
|
@pagination="getList"
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
</el-main>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<!-- 标签部分 -->
|
|||
|
|
<div class="tags-container">
|
|||
|
|
<el-button
|
|||
|
|
v-for="(tag, index) in designTypeList"
|
|||
|
|
:key="tag.type"
|
|||
|
|
:label="tag.name"
|
|||
|
|
@click="handleQueryByType(tag.type)"
|
|||
|
|
style="margin: 5px;">
|
|||
|
|
{{ tag.name }}
|
|||
|
|
</el-button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<!--页脚部分-->
|
|||
|
|
<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,
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
},
|
|||
|
|
created() {
|
|||
|
|
this.getList();
|
|||
|
|
this.getTnList()
|
|||
|
|
this.getDnList()
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
/** 查询商品列表 */
|
|||
|
|
getList() {
|
|||
|
|
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查询商品列表 */
|
|||
|
|
handleQueryByType(type) {
|
|||
|
|
this.queryParams.technicalTypeId = type;
|
|||
|
|
listAllGoods(this.queryParams).then(response => {
|
|||
|
|
this.goodsList = response.rows;
|
|||
|
|
this.total = response.total;
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
</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: 10px; /* 给卡片增加一些内边距 */
|
|||
|
|
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: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.search-section {
|
|||
|
|
text-align: center;
|
|||
|
|
background-color: #333;
|
|||
|
|
color: white;
|
|||
|
|
padding: 50px 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.search-box {
|
|||
|
|
margin-top: 20px;
|
|||
|
|
width: 400px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.project-grid {
|
|||
|
|
margin-top: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.image {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 150px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.price {
|
|||
|
|
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 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: center;
|
|||
|
|
align-items: center;
|
|||
|
|
width: 1200px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.el-menu {
|
|||
|
|
border-bottom: none; /* 去掉底部的线条 */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
</style>
|