Compare commits
2 Commits
a90113851f
...
f1a7dcc0e2
| Author | SHA1 | Date | |
|---|---|---|---|
| f1a7dcc0e2 | |||
| f9e3edfc8c |
@ -4,7 +4,7 @@
|
||||
<div id="topContainer" class="container">
|
||||
<!-- 统一显示logo和导航 -->
|
||||
<div class="logo">
|
||||
<!-- Logo图片，点击跳转首页 -->
|
||||
<!-- Logo图片，点击跳转首页 - 使用与goHome相同的逻辑 -->
|
||||
<img v-if="JSON.stringify(logoInfoNew) !== '{}'" @click="goHome" style="cursor:pointer;"
|
||||
class="logoImg" :src="logoInfoNew.home.logoImg || ''" alt="">
|
||||
|
||||
@ -12,7 +12,7 @@
|
||||
<nav class="main-nav">
|
||||
<div class="nav-list">
|
||||
<!-- 首页 -->
|
||||
<p :class="{ active: $route.path.includes('/index') }">
|
||||
<p :class="{ active: isActiveHome }">
|
||||
<!-- 动态判断域名跳转首页 -->
|
||||
<a @click="goHome">{{ translations[language].home }}</a>
|
||||
</p>
|
||||
@ -488,6 +488,14 @@ export default Vue.extend({
|
||||
// 判断当前是否为ncmatch.cn域名
|
||||
isNcmatchDomain() {
|
||||
return window.location.hostname.includes('ncmatch.cn');
|
||||
},
|
||||
// 首页激活状态计算
|
||||
isActiveHome() {
|
||||
if (this.isNcmatchDomain) {
|
||||
return this.$route.path.includes('/ncmatchHome/index');
|
||||
} else {
|
||||
return this.$route.path.includes('/homePage/index');
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
@ -904,7 +912,7 @@ export default Vue.extend({
|
||||
}
|
||||
},
|
||||
|
||||
// 首页跳转方法
|
||||
// 首页跳转方法 - 根据域名判断跳转到不同的首页
|
||||
goHome() {
|
||||
if (this.isNcmatchDomain) {
|
||||
this.$router.push('/ncmatchHome/index');
|
||||
@ -949,6 +957,12 @@ export default Vue.extend({
|
||||
|
||||
.logoImg {
|
||||
width: 148px;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -972,6 +986,7 @@ export default Vue.extend({
|
||||
font-size: 18px !important;
|
||||
padding: 5px 0;
|
||||
transition: all 0.3s;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: #1E6FFF;
|
||||
@ -1032,6 +1047,7 @@ export default Vue.extend({
|
||||
font-size: 14px;
|
||||
text-decoration: none;
|
||||
transition: all 0.3s;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
|
||||
@ -1,57 +1,87 @@
|
||||
<template>
|
||||
<div class="followBox">
|
||||
<div class="followBox-title">
|
||||
<span>我的</span>
|
||||
<span class="hightText">关注</span>
|
||||
<!-- 页面标题区域 -->
|
||||
<div class="follow-header">
|
||||
<div class="followBox-title">
|
||||
<span>我的</span>
|
||||
<span class="hightText">关注</span>
|
||||
</div>
|
||||
<div class="follow-subtitle">管理您关注的企业商品和需求</div>
|
||||
</div>
|
||||
<div class="radio-group">
|
||||
<label class="radio-item" style="margin-right: 25px;" :class="{ active: publish_type === '1' }">
|
||||
<input type="radio" v-model="publish_type" value="1" @change="handleTypeChange">
|
||||
<span class="radio-text">企业商品</span>
|
||||
</label>
|
||||
<label class="radio-item" :class="{ active: publish_type === '2' }">
|
||||
<input type="radio" v-model="publish_type" value="2" @change="handleTypeChange">
|
||||
<span class="radio-text">企业需求</span>
|
||||
</label>
|
||||
|
||||
<!-- 筛选区域 -->
|
||||
<div class="filter-section">
|
||||
<div class="radio-group">
|
||||
<label class="radio-item" :class="{ active: publish_type === '1' }">
|
||||
<input type="radio" v-model="publish_type" value="1" @change="handleTypeChange">
|
||||
<span class="radio-text">企业商品</span>
|
||||
</label>
|
||||
<label class="radio-item" :class="{ active: publish_type === '2' }">
|
||||
<input type="radio" v-model="publish_type" value="2" @change="handleTypeChange">
|
||||
<span class="radio-text">企业需求</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- 统计信息 -->
|
||||
<div class="stats-info" v-if="productList.length > 0">
|
||||
共 {{ getTotalItems() }} 个关注
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 关注列表 -->
|
||||
<div v-loading="loadingBox" class="follow-list" v-if="productList.length > 0">
|
||||
<div class="follow-item" v-for="item in productList" :key="item.id">
|
||||
<div class="follow-header-info">
|
||||
<div class="follow-date">
|
||||
<span class="date-text">{{ formatBrowseDate(item.browse_date) }}</span>
|
||||
<span class="relative-time">{{ getRelativeTime(item.browse_date) }}</span>
|
||||
</div>
|
||||
<div class="follow-count" v-if="item.products && item.products.length > 0">
|
||||
关注了 {{ item.products.length }} 个项目
|
||||
</div>
|
||||
</div>
|
||||
<div class="follow-content">
|
||||
<productCard
|
||||
contentType="favorite"
|
||||
:productList="item.products"
|
||||
:type="publish_type == '1' ? 'homePage' : 'supplyAndDemandSquare'"
|
||||
@delete-item="handleDeleteItem">
|
||||
</productCard>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<div class="empty-state" v-else>
|
||||
<div class="empty-content">
|
||||
<div class="empty-icon">⭐</div>
|
||||
<div class="empty-text">暂无关注记录</div>
|
||||
<div class="empty-desc">您还没有关注任何{{ publish_type === '1' ? '商品' : '需求' }}，快去发现精彩内容吧</div>
|
||||
<div class="empty-action">
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="$router.push('/ncmatchHome')"
|
||||
class="explore-btn">
|
||||
去首页探索
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-loading="loadingBox" class="history-list" v-if="productList.length > 0">
|
||||
<div class="history-item" v-for="item in productList" :key="item.id">
|
||||
<div class="history-date">
|
||||
<span class="date-text">{{ formatBrowseDate(item.browse_date) }}</span>
|
||||
<span class="relative-time">{{ getRelativeTime(item.browse_date) }}</span>
|
||||
</div>
|
||||
<div class="history-content">
|
||||
<productCard
|
||||
contentType="favorite"
|
||||
:productList="item.products"
|
||||
:type="publish_type == '1' ? 'homePage' : 'supplyAndDemandSquare'"
|
||||
@delete-item="handleDeleteItem">
|
||||
</productCard>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="empty-state" v-else>
|
||||
<div class="empty-icon">📋</div>
|
||||
<div class="empty-text">暂无关注记录</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { reqFavoriteSearch } from '@/api/ncmatch';
|
||||
import productCard from '../mainPage/productCard/index.vue';
|
||||
import { formatBrowseDate, getRelativeTime } from './tool.js';
|
||||
|
||||
export default {
|
||||
name: 'followBox',
|
||||
data() {
|
||||
return {
|
||||
loadingBox:false,
|
||||
loadingBox: false,
|
||||
productList: [],
|
||||
value1: null,
|
||||
publish_type: '1', // 默认选择企业商品
|
||||
|
||||
myProductList: [
|
||||
|
||||
]
|
||||
}
|
||||
},
|
||||
created() {
|
||||
@ -71,55 +101,49 @@ export default {
|
||||
this.loadingBox = true;
|
||||
reqFavoriteSearch({
|
||||
url_list: window.location.href,
|
||||
publish_type: this.publish_type // 传递发布类型参数
|
||||
publish_type: this.publish_type
|
||||
}).then(res => {
|
||||
this.loadingBox = false;
|
||||
if (res.status) {
|
||||
// 处理数据结构，将product_info的子项提升到上一级
|
||||
this.productList = this.flattenProductInfo(res.data.favorites);
|
||||
|
||||
} else {
|
||||
this.$message.error(res.msg);
|
||||
this.$message.error(res.msg || '获取关注记录失败');
|
||||
}
|
||||
})
|
||||
}).catch(error => {
|
||||
this.loadingBox = false;
|
||||
this.$message.error('网络错误，请稍后重试');
|
||||
console.error('获取关注记录失败:', error);
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 将product_info的所有子项提升到products中每个产品的上一级，去掉product_info字段
|
||||
* @param {Array} historyList - 原始的历史记录列表
|
||||
* @returns {Array} 处理后的历史记录列表
|
||||
*/
|
||||
flattenProductInfo(historyList) {
|
||||
if (!Array.isArray(historyList)) {
|
||||
return [];
|
||||
}
|
||||
|
||||
|
||||
return historyList.map(historyItem => {
|
||||
if (historyItem.products && Array.isArray(historyItem.products)) {
|
||||
// 处理每个历史记录中的products数组
|
||||
const flattenedProducts = historyItem.products.map(product => {
|
||||
if (product.product_info) {
|
||||
// 将product_info的所有属性合并到product的上一级
|
||||
const flattenedProduct = { ...product };
|
||||
|
||||
// 遍历product_info的所有属性
|
||||
|
||||
Object.keys(product.product_info).forEach(key => {
|
||||
if(key == 'id'){
|
||||
if (key == 'id') {
|
||||
flattenedProduct.productid = product.product_info.id;
|
||||
}
|
||||
// 如果上一级已经有同名属性，则跳过（避免覆盖）
|
||||
if (!(key in flattenedProduct)) {
|
||||
flattenedProduct[key] = product.product_info[key];
|
||||
}
|
||||
});
|
||||
|
||||
// 删除product_info字段
|
||||
|
||||
delete flattenedProduct.product_info;
|
||||
|
||||
return flattenedProduct;
|
||||
}
|
||||
return product;
|
||||
});
|
||||
|
||||
|
||||
return {
|
||||
...historyItem,
|
||||
products: flattenedProducts
|
||||
@ -130,64 +154,93 @@ export default {
|
||||
},
|
||||
/**
|
||||
* 处理删除事件，从列表中移除被删除的项目
|
||||
* @param {string} deletedId - 被删除项目的ID
|
||||
*/
|
||||
handleDeleteItem(deletedId) {
|
||||
// 遍历productList，找到包含被删除产品的历史记录
|
||||
for (let i = 0; i < this.productList.length; i++) {
|
||||
const historyItem = this.productList[i];
|
||||
if (historyItem.products && Array.isArray(historyItem.products)) {
|
||||
// 在products数组中查找并删除指定ID的产品
|
||||
const productIndex = historyItem.products.findIndex(product => product.id === deletedId);
|
||||
if (productIndex !== -1) {
|
||||
// 删除该产品
|
||||
historyItem.products.splice(productIndex, 1);
|
||||
|
||||
// 如果该历史记录下没有产品了，删除整个历史记录
|
||||
|
||||
if (historyItem.products.length === 0) {
|
||||
this.productList.splice(i, 1);
|
||||
}
|
||||
|
||||
// 更新视图
|
||||
|
||||
this.$forceUpdate();
|
||||
this.$message.success('取消关注成功');
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 获取总关注数
|
||||
*/
|
||||
getTotalItems() {
|
||||
return this.productList.reduce((total, item) => {
|
||||
return total + (item.products ? item.products.length : 0);
|
||||
}, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.followBox-title {
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
color: #363a46;
|
||||
margin-bottom: 15px;
|
||||
|
||||
.hightText {
|
||||
background: linear-gradient(90deg, #275aff, #2ebdfa);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
display: inline-block;
|
||||
font-weight: 700;
|
||||
}
|
||||
<style scoped>
|
||||
.followBox {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 30px 20px;
|
||||
min-height: calc(100vh - 100px);
|
||||
}
|
||||
|
||||
.radio-group-container {
|
||||
width: 100% !important;
|
||||
/* 页面标题区域 */
|
||||
.follow-header {
|
||||
text-align: center;
|
||||
margin-bottom: 40px;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.followBox-title {
|
||||
font-size: 36px;
|
||||
font-weight: bold;
|
||||
color: #363a46;
|
||||
margin-bottom: 12px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.followBox-title .hightText {
|
||||
background: linear-gradient(135deg, #275aff, #2ebdfa);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.follow-subtitle {
|
||||
font-size: 16px;
|
||||
color: #666;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* 筛选区域 */
|
||||
.filter-section {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
max-width: 1400px;
|
||||
margin-bottom: 30px;
|
||||
padding: 0 20px;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.radio-group {
|
||||
display: flex;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 15px;
|
||||
border-radius: 12px;
|
||||
padding: 4px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
border: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.radio-item {
|
||||
@ -195,110 +248,317 @@ export default {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 8px 16px;
|
||||
border-radius: 6px;
|
||||
padding: 12px 24px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
background: #fff;
|
||||
border: 1px solid #e8e8e8;
|
||||
margin-right: 4px;
|
||||
font-size: 16px !important;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
input[type="radio"] {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.radio-text {
|
||||
font-size: 16px;
|
||||
color: #275AFF;
|
||||
font-weight: 500;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: #275AFF;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: linear-gradient(to right, #275AFF, #2EBDFA);
|
||||
border-color: #275AFF;
|
||||
box-shadow: 0 2px 8px rgba(39, 90, 255, 0.3);
|
||||
|
||||
.radio-text {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
background: transparent;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* 关注记录列表样式 */
|
||||
.history-list {
|
||||
.radio-item:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.radio-item input[type="radio"] {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.radio-text {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
font-weight: 500;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.radio-item:hover {
|
||||
background: rgba(255, 107, 107, 0.05);
|
||||
}
|
||||
|
||||
.radio-item.active {
|
||||
background: linear-gradient(135deg, #275aff, #2ebdfa);
|
||||
box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3);
|
||||
}
|
||||
|
||||
.radio-item.active .radio-text {
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.stats-info {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
background: #f8f9fa;
|
||||
padding: 8px 16px;
|
||||
border-radius: 20px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 关注列表样式 */
|
||||
.follow-list {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.history-item {
|
||||
.follow-item {
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
margin-bottom: 16px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
border-radius: 16px;
|
||||
padding: 24px;
|
||||
margin-bottom: 20px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
|
||||
border: 1px solid #f0f0f0;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.history-item:hover {
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
|
||||
/* transform: translateY(-2px); */
|
||||
.follow-item::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 4px;
|
||||
background: linear-gradient(135deg, #275aff, #2ebdfa);
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.history-date {
|
||||
.follow-item:hover {
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.follow-item:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.follow-header-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 16px;
|
||||
border-bottom: 1px solid #f5f5f5;
|
||||
flex-wrap: wrap;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.follow-date {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 1px solid #f5f5f5;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.date-icon {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.date-text {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #275AFF;
|
||||
margin-right: 12px;
|
||||
color: #ff6b6b;
|
||||
}
|
||||
|
||||
.relative-time {
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
background: #f8f9fa;
|
||||
padding: 4px 8px;
|
||||
border-radius: 12px;
|
||||
padding: 6px 12px;
|
||||
border-radius: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.history-content {
|
||||
.follow-count {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
background: linear-gradient(135deg, #275aff, #2ebdfa);
|
||||
color: white;
|
||||
padding: 6px 12px;
|
||||
border-radius: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.follow-content {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
/* 空状态样式 */
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 60px 20px;
|
||||
color: #999;
|
||||
padding: 80px 20px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.empty-content {
|
||||
max-width: 400px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 48px;
|
||||
margin-bottom: 16px;
|
||||
font-size: 80px;
|
||||
margin-bottom: 24px;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 16px;
|
||||
color: #999;
|
||||
font-size: 20px;
|
||||
color: #333;
|
||||
margin-bottom: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
</style>
|
||||
|
||||
.empty-desc {
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
margin-bottom: 30px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.explore-btn {
|
||||
padding: 12px 32px;
|
||||
border-radius: 8px;
|
||||
font-weight: 500;
|
||||
background: linear-gradient(135deg, #275aff, #2ebdfa);
|
||||
border: none;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.explore-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 20px rgba(255, 107, 107, 0.3);
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.followBox {
|
||||
padding: 20px 15px;
|
||||
}
|
||||
|
||||
.follow-header {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.followBox-title {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.filter-section {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.radio-group {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.radio-item {
|
||||
flex: 1;
|
||||
padding: 10px 16px;
|
||||
}
|
||||
|
||||
.stats-info {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.follow-item {
|
||||
padding: 20px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.follow-header-info {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.follow-date {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
padding: 60px 15px;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 60px;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.followBox {
|
||||
padding: 15px 10px;
|
||||
}
|
||||
|
||||
.followBox-title {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.follow-item {
|
||||
padding: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.date-text {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.radio-item {
|
||||
padding: 8px 12px;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 加载状态优化 */
|
||||
::v-deep .el-loading-mask {
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
::v-deep .el-loading-spinner .circular {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
}
|
||||
|
||||
::v-deep .el-loading-spinner .path {
|
||||
stroke: #ff6b6b;
|
||||
}
|
||||
|
||||
/* 特殊样式 - 关注页面的独特视觉效果 */
|
||||
.follow-item .heart-pulse {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ff6b6b'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E");
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.1);
|
||||
opacity: 0.7;
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,57 +1,84 @@
|
||||
<template>
|
||||
<div class="historyBox">
|
||||
<div class="historyBox-title">
|
||||
<span>浏览</span>
|
||||
<span class="hightText">记录</span>
|
||||
<!-- 页面标题 -->
|
||||
<div class="history-header">
|
||||
<div class="historyBox-title">
|
||||
<span>浏览</span>
|
||||
<span class="hightText">记录</span>
|
||||
</div>
|
||||
<div class="history-subtitle">查看您的商品和需求浏览历史</div>
|
||||
</div>
|
||||
<div class="radio-group">
|
||||
<label class="radio-item" style="margin-right: 25px;" :class="{ active: publish_type === '1' }">
|
||||
<input type="radio" v-model="publish_type" value="1" @change="handleTypeChange">
|
||||
<span class="radio-text">企业商品</span>
|
||||
</label>
|
||||
<label class="radio-item" :class="{ active: publish_type === '2' }">
|
||||
<input type="radio" v-model="publish_type" value="2" @change="handleTypeChange">
|
||||
<span class="radio-text">企业需求</span>
|
||||
</label>
|
||||
|
||||
<!-- 筛选标签 -->
|
||||
<div class="filter-section">
|
||||
<div class="radio-group">
|
||||
<label class="radio-item" :class="{ active: publish_type === '1' }">
|
||||
<input type="radio" v-model="publish_type" value="1" @change="handleTypeChange">
|
||||
<span class="radio-text">企业商品</span>
|
||||
</label>
|
||||
<label class="radio-item" :class="{ active: publish_type === '2' }">
|
||||
<input type="radio" v-model="publish_type" value="2" @change="handleTypeChange">
|
||||
<span class="radio-text">企业需求</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- 统计信息 -->
|
||||
<div class="stats-info" v-if="productList.length > 0">
|
||||
共 {{ getTotalItems() }} 条记录
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 历史记录列表 -->
|
||||
<div v-loading="loadingBox" class="history-list" v-if="productList.length > 0">
|
||||
<div class="history-item" v-for="item in productList" :key="item.id">
|
||||
<div class="history-date">
|
||||
<div class="date-content">
|
||||
<span class="date-text">{{ formatBrowseDate(item.browse_date) }}</span>
|
||||
<span class="relative-time">{{ getRelativeTime(item.browse_date) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="history-content">
|
||||
<productCard
|
||||
contentType="history"
|
||||
:productList="item.products"
|
||||
:type="publish_type == '1' ? 'homePage' : 'supplyAndDemandSquare'"
|
||||
@delete-item="handleDeleteItem">
|
||||
</productCard>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<div class="empty-state" v-else>
|
||||
<div class="empty-content">
|
||||
<div class="empty-icon">📋</div>
|
||||
<div class="empty-text">暂无浏览记录</div>
|
||||
<div class="empty-desc">您还没有浏览过任何{{ publish_type === '1' ? '商品' : '需求' }}，快去探索吧</div>
|
||||
<div class="empty-action">
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="$router.push('/ncmatchHome')"
|
||||
class="explore-btn">
|
||||
去首页逛逛
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-loading="loadingBox" class="history-list" v-if="productList.length > 0">
|
||||
<div class="history-item" v-for="item in productList" :key="item.id">
|
||||
<div class="history-date">
|
||||
<span class="date-text">{{ formatBrowseDate(item.browse_date) }}</span>
|
||||
<span class="relative-time">{{ getRelativeTime(item.browse_date) }}</span>
|
||||
</div>
|
||||
<div class="history-content">
|
||||
<productCard
|
||||
contentType="history"
|
||||
:productList="item.products"
|
||||
:type="publish_type == '1' ? 'homePage' : 'supplyAndDemandSquare'"
|
||||
@delete-item="handleDeleteItem">
|
||||
</productCard>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="empty-state" v-else>
|
||||
<div class="empty-icon">📋</div>
|
||||
<div class="empty-text">暂无浏览记录</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { reqUserBrowseHistorySearch } from '@/api/ncmatch';
|
||||
import productCard from '../mainPage/productCard/index.vue';
|
||||
import { formatBrowseDate, getRelativeTime } from './tool.js';
|
||||
|
||||
export default {
|
||||
name: 'historyBox',
|
||||
data() {
|
||||
return {
|
||||
loadingBox:false,
|
||||
loadingBox: false,
|
||||
productList: [],
|
||||
value1: null,
|
||||
publish_type: '1', // 默认选择企业商品
|
||||
|
||||
myProductList: [
|
||||
|
||||
]
|
||||
}
|
||||
},
|
||||
created() {
|
||||
@ -71,55 +98,49 @@ export default {
|
||||
this.loadingBox = true;
|
||||
reqUserBrowseHistorySearch({
|
||||
url_list: window.location.href,
|
||||
publish_type: this.publish_type // 传递发布类型参数
|
||||
publish_type: this.publish_type
|
||||
}).then(res => {
|
||||
this.loadingBox = false;
|
||||
if (res.status) {
|
||||
// 处理数据结构，将product_info的子项提升到上一级
|
||||
this.productList = this.flattenProductInfo(res.data.history_list);
|
||||
|
||||
} else {
|
||||
this.$message.error(res.msg);
|
||||
this.$message.error(res.msg || '获取浏览记录失败');
|
||||
}
|
||||
})
|
||||
}).catch(error => {
|
||||
this.loadingBox = false;
|
||||
this.$message.error('网络错误，请稍后重试');
|
||||
console.error('获取浏览记录失败:', error);
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 将product_info的所有子项提升到products中每个产品的上一级，去掉product_info字段
|
||||
* @param {Array} historyList - 原始的历史记录列表
|
||||
* @returns {Array} 处理后的历史记录列表
|
||||
*/
|
||||
flattenProductInfo(historyList) {
|
||||
if (!Array.isArray(historyList)) {
|
||||
return [];
|
||||
}
|
||||
|
||||
|
||||
return historyList.map(historyItem => {
|
||||
if (historyItem.products && Array.isArray(historyItem.products)) {
|
||||
// 处理每个历史记录中的products数组
|
||||
const flattenedProducts = historyItem.products.map(product => {
|
||||
if (product.product_info) {
|
||||
// 将product_info的所有属性合并到product的上一级
|
||||
const flattenedProduct = { ...product };
|
||||
|
||||
// 遍历product_info的所有属性
|
||||
|
||||
Object.keys(product.product_info).forEach(key => {
|
||||
if(key == 'id'){
|
||||
if (key == 'id') {
|
||||
flattenedProduct.productid = product.product_info.id;
|
||||
}
|
||||
// 如果上一级已经有同名属性，则跳过（避免覆盖）
|
||||
if (!(key in flattenedProduct)) {
|
||||
flattenedProduct[key] = product.product_info[key];
|
||||
}
|
||||
});
|
||||
|
||||
// 删除product_info字段
|
||||
|
||||
delete flattenedProduct.product_info;
|
||||
|
||||
return flattenedProduct;
|
||||
}
|
||||
return product;
|
||||
});
|
||||
|
||||
|
||||
return {
|
||||
...historyItem,
|
||||
products: flattenedProducts
|
||||
@ -130,64 +151,93 @@ export default {
|
||||
},
|
||||
/**
|
||||
* 处理删除事件，从列表中移除被删除的项目
|
||||
* @param {string} deletedId - 被删除项目的ID
|
||||
*/
|
||||
handleDeleteItem(deletedId) {
|
||||
// 遍历productList，找到包含被删除产品的历史记录
|
||||
for (let i = 0; i < this.productList.length; i++) {
|
||||
const historyItem = this.productList[i];
|
||||
if (historyItem.products && Array.isArray(historyItem.products)) {
|
||||
// 在products数组中查找并删除指定ID的产品
|
||||
const productIndex = historyItem.products.findIndex(product => product.id === deletedId);
|
||||
if (productIndex !== -1) {
|
||||
// 删除该产品
|
||||
historyItem.products.splice(productIndex, 1);
|
||||
|
||||
// 如果该历史记录下没有产品了，删除整个历史记录
|
||||
|
||||
if (historyItem.products.length === 0) {
|
||||
this.productList.splice(i, 1);
|
||||
}
|
||||
|
||||
// 更新视图
|
||||
|
||||
this.$forceUpdate();
|
||||
this.$message.success('删除成功');
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 获取总记录数
|
||||
*/
|
||||
getTotalItems() {
|
||||
return this.productList.reduce((total, item) => {
|
||||
return total + (item.products ? item.products.length : 0);
|
||||
}, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.historyBox-title {
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
color: #363a46;
|
||||
margin-bottom: 15px;
|
||||
|
||||
.hightText {
|
||||
background: linear-gradient(90deg, #275aff, #2ebdfa);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
display: inline-block;
|
||||
font-weight: 700;
|
||||
}
|
||||
<style scoped>
|
||||
.historyBox {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 30px 20px;
|
||||
min-height: calc(100vh - 100px);
|
||||
}
|
||||
|
||||
.radio-group-container {
|
||||
width: 100% !important;
|
||||
/* 页面标题区域 */
|
||||
.history-header {
|
||||
text-align: center;
|
||||
margin-bottom: 40px;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.historyBox-title {
|
||||
font-size: 36px;
|
||||
font-weight: bold;
|
||||
color: #363a46;
|
||||
margin-bottom: 12px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.historyBox-title .hightText {
|
||||
background: linear-gradient(135deg, #275aff, #2ebdfa);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.history-subtitle {
|
||||
font-size: 16px;
|
||||
color: #666;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* 筛选区域 */
|
||||
.filter-section {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
max-width: 1400px;
|
||||
margin-bottom: 30px;
|
||||
padding: 0 20px;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.radio-group {
|
||||
display: flex;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 15px;
|
||||
border-radius: 12px;
|
||||
padding: 4px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
border: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.radio-item {
|
||||
@ -195,46 +245,53 @@ export default {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 8px 16px;
|
||||
border-radius: 6px;
|
||||
padding: 12px 24px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
background: #fff;
|
||||
border: 1px solid #e8e8e8;
|
||||
margin-right: 4px;
|
||||
font-size: 16px !important;
|
||||
background: transparent;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
.radio-item:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
input[type="radio"] {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
.radio-item input[type="radio"] {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.radio-text {
|
||||
font-size: 16px;
|
||||
color: #275AFF;
|
||||
font-weight: 500;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.radio-text {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
font-weight: 500;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: #275AFF;
|
||||
}
|
||||
.radio-item:hover {
|
||||
background: rgba(39, 90, 255, 0.05);
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: linear-gradient(to right, #275AFF, #2EBDFA);
|
||||
border-color: #275AFF;
|
||||
box-shadow: 0 2px 8px rgba(39, 90, 255, 0.3);
|
||||
.radio-item.active {
|
||||
background: linear-gradient(135deg, #275AFF, #2EBDFA);
|
||||
box-shadow: 0 4px 12px rgba(39, 90, 255, 0.3);
|
||||
}
|
||||
|
||||
.radio-text {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.radio-item.active .radio-text {
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.stats-info {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
background: #f8f9fa;
|
||||
padding: 8px 16px;
|
||||
border-radius: 20px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 历史记录列表样式 */
|
||||
@ -244,40 +301,66 @@ export default {
|
||||
|
||||
.history-item {
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
margin-bottom: 16px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
border-radius: 16px;
|
||||
padding: 24px;
|
||||
margin-bottom: 20px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
|
||||
border: 1px solid #f0f0f0;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.history-item::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 4px;
|
||||
background: linear-gradient(to bottom, #275AFF, #2EBDFA);
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.history-item:hover {
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
|
||||
/* transform: translateY(-2px); */
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.history-item:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.history-date {
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 16px;
|
||||
border-bottom: 1px solid #f5f5f5;
|
||||
}
|
||||
|
||||
.date-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 1px solid #f5f5f5;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.date-icon {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.date-text {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #275AFF;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.relative-time {
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
background: #f8f9fa;
|
||||
padding: 4px 8px;
|
||||
border-radius: 12px;
|
||||
padding: 6px 12px;
|
||||
border-radius: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.history-content {
|
||||
@ -287,18 +370,145 @@ export default {
|
||||
/* 空状态样式 */
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 60px 20px;
|
||||
color: #999;
|
||||
padding: 80px 20px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.empty-content {
|
||||
max-width: 400px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 48px;
|
||||
margin-bottom: 16px;
|
||||
font-size: 80px;
|
||||
margin-bottom: 24px;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 16px;
|
||||
color: #999;
|
||||
font-size: 20px;
|
||||
color: #333;
|
||||
margin-bottom: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
</style>
|
||||
|
||||
.empty-desc {
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
margin-bottom: 30px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.explore-btn {
|
||||
padding: 12px 32px;
|
||||
border-radius: 8px;
|
||||
font-weight: 500;
|
||||
background: linear-gradient(135deg, #275AFF, #2EBDFA);
|
||||
border: none;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.explore-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 20px rgba(39, 90, 255, 0.3);
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.historyBox {
|
||||
padding: 20px 15px;
|
||||
}
|
||||
|
||||
.history-header {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.historyBox-title {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.filter-section {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.radio-group {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.radio-item {
|
||||
flex: 1;
|
||||
padding: 10px 16px;
|
||||
}
|
||||
|
||||
.stats-info {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.history-item {
|
||||
padding: 20px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.date-content {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
padding: 60px 15px;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 60px;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.historyBox {
|
||||
padding: 15px 10px;
|
||||
}
|
||||
|
||||
.historyBox-title {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.history-item {
|
||||
padding: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.date-text {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.radio-item {
|
||||
padding: 8px 12px;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 加载状态优化 */
|
||||
::v-deep .el-loading-mask {
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
::v-deep .el-loading-spinner .circular {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
}
|
||||
|
||||
::v-deep .el-loading-spinner .path {
|
||||
stroke: #275AFF;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,24 +1,11 @@
|
||||
<template>
|
||||
<div id="homeOut" class="homeOut">
|
||||
<TopBox id="topBox"></TopBox>
|
||||
<div class="banner-box">
|
||||
<div class="conter">
|
||||
<div class="title">
|
||||
供需广场
|
||||
</div>
|
||||
<div class="banner-title">
|
||||
开元云供需对接广场，是企业级云服务合作核心阵地。围绕云资源、算力、网络服务、模型及应用，企业可灵活发布资源供给或业务需求，通过精准匹配打破信息壁垒。这里既能盘活企业闲置算力与云资源，又能快速对接所需技术服务与合作机会，助力企业降本增效，加速数字化与智能化转型。
|
||||
</div>
|
||||
<div class="btn">
|
||||
<div class="btn-box" @click="sendInfo('2')">发布需求</div>
|
||||
<div class="btn-box" @click="sendInfo('1')">发布商品</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div class="search-box">
|
||||
<search></search>
|
||||
</div> -->
|
||||
<div style="width: 90%;max-width: 1600px;">
|
||||
<div style="width: 100%;">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
|
||||
@ -92,7 +79,6 @@ import { mapGetters, mapState } from "vuex";
|
||||
import search from "./search/index.vue";
|
||||
import { reqEnterpriseAuditInfoSearch } from '@/api/ncmatch'
|
||||
import productDetail from "./proDetail/index.vue";
|
||||
|
||||
export default Vue.extend({
|
||||
name: "indexLast",
|
||||
components: {
|
||||
@ -228,54 +214,7 @@ export default Vue.extend({
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
/deep/.banner-box {
|
||||
height: 700px!important;
|
||||
background: url('./img/tt-banner.png') no-repeat ;
|
||||
width: 100%;
|
||||
padding-bottom: 200px;
|
||||
|
||||
.conter {
|
||||
width: 700px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
margin: 140px 240px 0px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 30px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.banner-title {
|
||||
width: 700px;
|
||||
font-size: 16px;
|
||||
color: #8890ab;
|
||||
line-height: 2 !important;
|
||||
}
|
||||
|
||||
.btn{
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.btn-box{
|
||||
padding: 10px 20px;
|
||||
background: linear-gradient(90deg, rgb(39, 90, 255), rgb(46, 189, 250));
|
||||
border-radius: 14px;
|
||||
color: #fff;
|
||||
margin-right: 20px;
|
||||
margin-top: 20px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(39, 90, 255, 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-box {
|
||||
width: 100%;
|
||||
|
||||
@ -1,7 +1,97 @@
|
||||
<template>
|
||||
<div class="jd-homepage">
|
||||
<!-- 搜索区域 -->
|
||||
<div class="search-box">
|
||||
<search></search>
|
||||
</div>
|
||||
|
||||
<!-- 主内容区域 -->
|
||||
<main class="main-content">
|
||||
<div class="content-wrapper">
|
||||
<!-- 左侧菜单 -->
|
||||
<menuAside></menuAside>
|
||||
|
||||
<!-- 中间主内容 -->
|
||||
<section class="main-section">
|
||||
<!-- 顶部促销横幅 -->
|
||||
<div id="banner" class="banner">
|
||||
<div class="centerBox">
|
||||
<div class="title">
|
||||
<span class="leftText">NCMatch</span>
|
||||
<span class="rightText">算力供需对接平台</span>
|
||||
</div>
|
||||
<ul class="tagUl">
|
||||
<li>匠造臻品 <span class="separator"></span> 精奢惠选</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 右侧用户信息栏 -->
|
||||
<aside class="user-sidebar">
|
||||
<div class="sidebar-content">
|
||||
<span class="publish-goods" @click="$router.push('/ncmatchHome/supplyAndDemandSquare')">
|
||||
算力供需广场
|
||||
</span>
|
||||
<span class="publish-goods" @click="sendInfo('2')">发布需求</span>
|
||||
<span class="publish-goods" @click="sendInfo('1')">发布商品</span>
|
||||
|
||||
<ul class="userBtn">
|
||||
<li @click="goHistory">
|
||||
<img src="./img/eye.png" alt="浏览记录">
|
||||
浏览记录
|
||||
</li>
|
||||
<li @click="goFavorite">
|
||||
<img src="./img/collect.png" alt="我的收藏">
|
||||
我的收藏
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- 产品列表区域 -->
|
||||
<div class="productList">
|
||||
<ul class="myTab">
|
||||
<li v-for="menu in product" :class="currentHotMenu === menu.id ? 'activeMenu' : ''" @click="clickNetMenu(menu)"
|
||||
:key="menu.name">
|
||||
<span class="tab-text">{{ menu.product_category }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<productCard v-loading="boxLoading" :productList="hotProductList"></productCard>
|
||||
|
||||
<el-pagination @current-change="handleCurrentChange" :page-size="page_size" layout="total, prev, pager, next"
|
||||
:total="total">
|
||||
</el-pagination>
|
||||
</div>
|
||||
|
||||
<!-- 发布商品/需求对话框 -->
|
||||
<el-dialog :title="publish_type === '2' ? '发布需求' : '发布商品'" width="60vw" top="5vh"
|
||||
:visible.sync="sendProductVisible">
|
||||
<sendProduct :isEdit="false" v-if="publish_type" @success="sendProductSuccess" :publish_type="publish_type">
|
||||
</sendProduct>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 提示对话框 -->
|
||||
<el-dialog title="温馨提示" :visible.sync="showTip" width="30%">
|
||||
<span>您还没有完善企业信息，完善企业信息审核通过后您可以发布需求与商品。</span>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<span>
|
||||
<span style="margin-right: 10px;">跳转到</span>
|
||||
<el-button size="small" type="primary" @click="goInfo">信息完善</el-button>
|
||||
</span>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Vue from 'vue'
|
||||
import { reqPublishProductSearchFirstPage, reqEnterpriseAuditInfoSearch, reqHomepageProductCategory, reqGetSupplyAndDemandSquareList } from '@/api/ncmatch'
|
||||
import { mapGetters, mapState } from "vuex";
|
||||
|
||||
export default Vue.extend({
|
||||
name: "mainPage",
|
||||
components: {
|
||||
@ -12,7 +102,6 @@ export default Vue.extend({
|
||||
},
|
||||
created() {
|
||||
this.getHomepageProductCategory()
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -24,110 +113,12 @@ export default Vue.extend({
|
||||
sendProductVisible: false,
|
||||
currentHotMenu: "",
|
||||
product: [],
|
||||
hotProductList: [
|
||||
// {
|
||||
// id: 1,
|
||||
// name: 'NVIDIA-4090',
|
||||
// image: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjE1MCIgdmlld0JveD0iMCAwIDIwMCAxNTAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIyMDAiIGhlaWdodD0iMTUwIiBmaWxsPSIjMjIyMjIyIi8+Cjx0ZXh0IHg9IjEwMCIgeT0iNzUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxNCIgZmlsbD0id2hpdGUiIHRleHQtYW5jaG9yPSJtaWRkbGUiPk5WSUQpQSBSVFggNDA5MDwvdGV4dD4KPC9zdmc+Cg==',
|
||||
// price: 6000,
|
||||
// cpu: 'AMD EPYC 7542 32 C * 2',
|
||||
// memory: '64G DDR4-3200 * 8',
|
||||
// gpu: 'NVIDIA-4090-24GB * 8',
|
||||
// sys_disk: '960G SATA SSD * 2 (Raid)',
|
||||
// data_disk: '3.84T U.2 NVMe SSD * 1',
|
||||
// net_card: 'Mellanox Connect4 25G SFP28 2-port * 1'
|
||||
// },
|
||||
// {
|
||||
// id: 2,
|
||||
// name: 'NVIDIA-4090',
|
||||
// image: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjE1MCIgdmlld0JveD0iMCAwIDIwMCAxNTAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIyMDAiIGhlaWdodD0iMTUwIiBmaWxsPSIjMjIyMjIyIi8+Cjx0ZXh0IHg9IjEwMCIgeT0iNzUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxNCIgZmlsbD0id2hpdGUiIHRleHQtYW5jaG9yPSJtaWRkbGUiPk5WSUQpQSBSVFggNDA5MDwvdGV4dD4KPC9zdmc+Cg==',
|
||||
// price: 6000,
|
||||
// cpu: 'AMD EPYC 7542 32 C * 2',
|
||||
// memory: '64G DDR4-3200 * 8',
|
||||
// gpu: 'NVIDIA-4090-24GB * 8',
|
||||
// sys_disk: '960G SATA SSD * 2 (Raid)',
|
||||
// data_disk: '3.84T U.2 NVMe SSD * 1',
|
||||
// net_card: 'Mellanox Connect4 25G SFP28 2-port * 1'
|
||||
// }
|
||||
],
|
||||
hotMenuList: [
|
||||
{
|
||||
id: "hot",
|
||||
name: "热门推荐",
|
||||
icon: require("../../newImg/niu.png"),
|
||||
activeIcon: require("../../newImg/niuActive.png")
|
||||
},
|
||||
{
|
||||
id: "hlzx",
|
||||
name: "互联网专线",
|
||||
icon: require("../../newImg/niu.png"),
|
||||
activeIcon: require("../../newImg/niuActive.png"),
|
||||
},
|
||||
{
|
||||
id: "SDWAN",
|
||||
name: "SDWAN",
|
||||
icon: require("../../newImg/niu.png"),
|
||||
activeIcon: require("../../newImg/niuActive.png"),
|
||||
},
|
||||
{
|
||||
id: "DCI",
|
||||
name: "DCI",
|
||||
icon: require("../../newImg/niu.png"),
|
||||
activeIcon: require("../../newImg/niuActive.png"),
|
||||
},
|
||||
{
|
||||
id: "AI",
|
||||
name: "AI专线",
|
||||
icon: require("../../newImg/niu.png"),
|
||||
activeIcon: require("../../newImg/niuActive.png"),
|
||||
}
|
||||
],
|
||||
searchKeyword: '',
|
||||
hotSearchKeywords: [
|
||||
'昆仑芯-P800',
|
||||
'天垓-150',
|
||||
'4090',
|
||||
'云服务器-GPU',
|
||||
'人脸识别',
|
||||
'SDWAN',
|
||||
'互联网专线',
|
||||
'DCI',
|
||||
'AI专线',
|
||||
'对象存储',
|
||||
'智慧医疗',
|
||||
'智慧客服',
|
||||
'A800',
|
||||
'A100',
|
||||
'910B'
|
||||
],
|
||||
topNavItems: [
|
||||
{ name: '早十好价', icon: '10', color: 'red' },
|
||||
{ name: '司法拍卖', icon: '⚖️', color: 'red' },
|
||||
{ name: '企业购', icon: '🏢', color: 'blue' },
|
||||
{ name: '京东新品', icon: '🎁', color: 'blue' },
|
||||
{ name: '男装馆', icon: '👔', color: 'blue' },
|
||||
{ name: '黑色星期五', icon: '🍃', color: 'green' },
|
||||
{ name: '服饰美妆', icon: '👗', color: 'purple' },
|
||||
{ name: '清洁馆', icon: '💧', color: 'blue' },
|
||||
{ name: '五金城', icon: '⚙️', color: 'red' },
|
||||
{ name: '全部频道', icon: '📱', color: 'rainbow' }
|
||||
],
|
||||
categories: [
|
||||
{ name: '云', icon: require('./img/cloud.png'), product_list: ['百度云'] },
|
||||
{ name: '国产算力', icon: require('./img/computing.png'), product_list: ['昇腾910B', 'P800', '其他'] },
|
||||
{ name: 'NVIDIA', icon: require('./img/nvidia.png'), product_list: ['3090', '4090', '5080', '5090'] },
|
||||
{ name: '网', icon: require('./img/net.png'), product_list: ['AI专线', 'SDWAN', '互联网专线', 'DCI'] },
|
||||
{ name: '一体机', icon: require('./img/computer.png'), product_list: ['昆仑芯', '天数智芯'] },
|
||||
{ name: '硬件', icon: require('./img/ying.png'), product_list: ['机器人', 'AR眼镜'] },
|
||||
{ name: 'AI应用', icon: require('./img/aiApp.png'), product_list: ['数字人', '智慧医疗', '智能客服'] },
|
||||
],
|
||||
hotProductList: [],
|
||||
current_page: 1,
|
||||
page_size: 8,
|
||||
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
...mapGetters(["sidebar", "avatar", "device"]),
|
||||
...mapState({
|
||||
isShowPanel: (state) => state.product.showHomeNav,
|
||||
@ -161,12 +152,10 @@ export default Vue.extend({
|
||||
goInfo() {
|
||||
this.showTip = false
|
||||
this.$router.push('/customer/approve')
|
||||
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
this.current_page = val
|
||||
this.initData()
|
||||
// this.init_product_list()
|
||||
},
|
||||
sendInfo(type) {
|
||||
if (this.loginState) {
|
||||
@ -200,8 +189,6 @@ export default Vue.extend({
|
||||
this.showTip = true
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
} else {
|
||||
this.$router.push('/login')
|
||||
}
|
||||
@ -226,13 +213,18 @@ export default Vue.extend({
|
||||
this.hotProductList = res.data[0].product_list
|
||||
this.total = res.data[0].total_count
|
||||
}
|
||||
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
init_product_list() {
|
||||
reqPublishProductSearchFirstPage({ publish_type: "1", url_link: window.location.href, to_page: 'first_page', page_size: this.page_size, current_page: this.current_page, product_type: this.currentHotMenu }).then(res => {
|
||||
reqPublishProductSearchFirstPage({
|
||||
publish_type: "1",
|
||||
url_link: window.location.href,
|
||||
to_page: 'first_page',
|
||||
page_size: this.page_size,
|
||||
current_page: this.current_page,
|
||||
product_type: this.currentHotMenu
|
||||
}).then(res => {
|
||||
if (res.status) {
|
||||
if (res.data.length > 0) {
|
||||
this.currentHotMenu = res.data[0].id
|
||||
@ -240,7 +232,6 @@ export default Vue.extend({
|
||||
this.product = res.data
|
||||
this.total = res.data[0].total_count
|
||||
}
|
||||
|
||||
}
|
||||
})
|
||||
},
|
||||
@ -253,11 +244,6 @@ export default Vue.extend({
|
||||
this.currentHotMenu = menu.id;
|
||||
this.selectedCategory = menu.id
|
||||
this.initData()
|
||||
// this.hotProductList = menu.product_list || [];
|
||||
},
|
||||
handleSearch() {
|
||||
console.log('搜索:1', this.searchKeyword)
|
||||
|
||||
},
|
||||
goFavorite() {
|
||||
if (this.loginState) {
|
||||
@ -277,155 +263,55 @@ export default Vue.extend({
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="jd-homepage">
|
||||
<!-- 顶部Header -->
|
||||
<!-- <header class="header">
|
||||
<div class="header-content">
|
||||
|
||||
|
||||
</div>
|
||||
</header> -->
|
||||
<!-- 主内容区域 -->
|
||||
<main class="main-content">
|
||||
<div class="content-wrapper">
|
||||
|
||||
<menuAside></menuAside>
|
||||
<!-- 中间主内容 -->
|
||||
<section class="main-section">
|
||||
<!-- 顶部促销横幅 -->
|
||||
<div id="banner" class="banner">
|
||||
<div class="centerBox">
|
||||
<span style="margin-top: 100px" class="title">
|
||||
<span class="leftText">
|
||||
NCMatch
|
||||
</span>
|
||||
<span class="rightText" style="margin-left: 10px;"> 算力供需对接平台</span>
|
||||
</span>
|
||||
<!-- <span class="description">支持模型训练、推理和数据处理，灵活配置，助您高效释放AI潜能</span>-->
|
||||
<ul style="margin-top: 50px" class="tagUl">
|
||||
<li>匠造臻品 <span style="display: inline-block;margin: 0 15px;"></span> 精奢惠选</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 右侧用户信息栏 -->
|
||||
<aside class="user-sidebar" style="background-color: #f8fbfe;padding: 10px;padding-top: 20px;">
|
||||
<span class="publish-goods" @click="$router.push('/ncmatchHome/supplyAndDemandSquare')"> 算力供需广场</span>
|
||||
<span class="publish-goods" @click="sendInfo('2')">发布需求</span>
|
||||
<span class="publish-goods" @click="sendInfo('1')">发布商品</span>
|
||||
|
||||
<ul class="userBtn">
|
||||
<li @click="goHistory"><img style="width: 26px;height: 26px;" src="./img/eye.png" alt="">浏览记录</li>
|
||||
<li @click="goFavorite"><img style="width: 26px;height: 26px;" src="./img/collect.png" alt="">我的收藏</li>
|
||||
<!-- <li><img src="./img/like.png" alt="">关注需求</li> -->
|
||||
</ul>
|
||||
</aside>
|
||||
</div>
|
||||
</main>
|
||||
<div class="productList">
|
||||
<ul class="myTab">
|
||||
<li v-for="menu in product" :class="currentHotMenu === menu.id ? 'activeMenu' : ''" @click="clickNetMenu(menu)"
|
||||
:key="menu.name">
|
||||
<!-- <img :src="currentHotMenu === menu.id ? menu.activeIcon : menu.icon" alt="" /> -->
|
||||
<span class="tab-text">{{ menu.product_category }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<productCard v-loading="boxLoading" :productList="hotProductList"></productCard>
|
||||
<el-pagination style="background-color: white;" @current-change="handleCurrentChange" :page-size="page_size"
|
||||
layout="total, prev, pager, next" :total="total">
|
||||
</el-pagination>
|
||||
<el-dialog :title="publish_type === '2' ? '发布需求' : '发布商品'" width="60vw" top="5vh"
|
||||
:visible.sync="sendProductVisible">
|
||||
<sendProduct :isEdit="false" v-if="publish_type" @success="sendProductSuccess" :publish_type="publish_type">
|
||||
</sendProduct>
|
||||
</el-dialog>
|
||||
<el-dialog title="温馨提示" :visible.sync="showTip" width="30%">
|
||||
<span>您还没有完善企业信息，完善企业信息审核通过后您可以发布需求与商品。</span>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
|
||||
<span> <span style="margin-right: 10px;"> 跳转到</span> <el-button size="small" type="primary"
|
||||
@click="goInfo">信息完善</el-button></span>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.userBtn {
|
||||
margin-top: 40px !important;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
|
||||
li {
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.3s;
|
||||
|
||||
* {
|
||||
img {
|
||||
width: 20px !important;
|
||||
height: 20px !important;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transition: all 0.3s;
|
||||
cursor: pointer;
|
||||
color: #2c96fc;
|
||||
|
||||
svg {
|
||||
|
||||
path {
|
||||
fill: #2c96fc !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
.jd-homepage {
|
||||
margin: 30px;
|
||||
margin-top: 100px;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.productList {
|
||||
width: 100%;
|
||||
max-width: 1600px;
|
||||
margin: 0 auto;
|
||||
// padding-bottom: 45px;
|
||||
.search-box {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.publish-goods {
|
||||
margin-bottom: 25px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
/* 主内容区域 */
|
||||
.main-content {
|
||||
padding: 40px;
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
margin-top: 50px;
|
||||
border-radius: 10px;
|
||||
background: url('./img//btnBg.png');
|
||||
background-size: cover;
|
||||
background-position: top;
|
||||
color: #222F60 !important;
|
||||
font-size: 18px;
|
||||
font-weight: 900;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
// background: #2EBDFA;
|
||||
.content-wrapper {
|
||||
box-sizing: border-box;
|
||||
display: grid;
|
||||
grid-template-columns: 300px 1fr 300px;
|
||||
gap: 20px;
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
grid-template-columns: 250px 1fr 250px;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
grid-template-columns: 200px 1fr;
|
||||
|
||||
.user-sidebar {
|
||||
grid-column: 1 / -1;
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
grid-template-columns: 1fr;
|
||||
|
||||
.user-sidebar {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 横幅样式 */
|
||||
.banner {
|
||||
border-radius: 10px;
|
||||
background: url("../../newImg/banner.png");
|
||||
@ -433,7 +319,11 @@ export default Vue.extend({
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
height: 500px;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.centerBox {
|
||||
display: flex;
|
||||
@ -441,7 +331,7 @@ export default Vue.extend({
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
top: 35%;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 100%;
|
||||
transform: translate(-50%, -50%);
|
||||
@ -450,27 +340,35 @@ export default Vue.extend({
|
||||
color: #222F60;
|
||||
font-size: 42px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
|
||||
@media (max-width: 992px) {
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
font-size: 28px;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.leftText {
|
||||
background: linear-gradient(to right, #275AFF, #2EBDFA);
|
||||
/* 渐变方向颜色 */
|
||||
-webkit-background-clip: text;
|
||||
/* 关键属性：裁剪背景到文字 */
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
/* 文字颜色透明 */
|
||||
display: inline-block;
|
||||
/* 确保渐变生效 */
|
||||
}
|
||||
}
|
||||
|
||||
.rightText {
|
||||
margin-left: 10px;
|
||||
|
||||
.description {
|
||||
margin: 15px 0;
|
||||
color: #7A82A0;
|
||||
font-size: 24px;
|
||||
height: 75px;
|
||||
line-height: 1.6;
|
||||
@media (max-width: 768px) {
|
||||
margin-left: 0;
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tagUl {
|
||||
@ -479,22 +377,112 @@ export default Vue.extend({
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 24px;
|
||||
margin-top: 30px;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
font-size: 18px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
li {
|
||||
padding: 0 30px;
|
||||
margin-top: 25px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
border-right: 2px solid #D2D7E6;
|
||||
}
|
||||
.separator {
|
||||
display: inline-block;
|
||||
margin: 0 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 用户侧边栏 */
|
||||
.user-sidebar {
|
||||
background-color: #f8fbfe;
|
||||
border-radius: 10px;
|
||||
padding: 20px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
|
||||
.sidebar-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.publish-goods {
|
||||
margin-bottom: 15px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
border-radius: 10px;
|
||||
background: url('./img/btnBg.png');
|
||||
background-size: cover;
|
||||
background-position: top;
|
||||
color: #222F60 !important;
|
||||
font-size: 18px;
|
||||
font-weight: 900;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
height: 50px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.userBtn {
|
||||
margin-top: 40px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
|
||||
li {
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px 15px;
|
||||
border-radius: 8px;
|
||||
transition: all 0.3s;
|
||||
cursor: pointer;
|
||||
background-color: white;
|
||||
|
||||
&:hover {
|
||||
background-color: #e6f7ff;
|
||||
color: #2c96fc;
|
||||
transform: translateX(5px);
|
||||
}
|
||||
|
||||
img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 产品列表区域 */
|
||||
.productList {
|
||||
width: 100%;
|
||||
max-width: 1600px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px 40px;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
padding: 0 10px 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.myTab {
|
||||
width: 100%;
|
||||
font-size: 18px;
|
||||
@ -505,6 +493,13 @@ export default Vue.extend({
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 50px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
margin-top: 30px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.activeMenu {
|
||||
background: linear-gradient(90deg, #275AFF 0%, #2EBDFA 100%);
|
||||
color: white;
|
||||
@ -513,243 +508,69 @@ export default Vue.extend({
|
||||
li {
|
||||
transition: all .2s ease-in-out;
|
||||
z-index: 2;
|
||||
padding: 10px 20px;
|
||||
margin-right: 45px;
|
||||
padding: 10px 100px;
|
||||
margin: 5px;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer !important;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.jd-homepage {
|
||||
min-height: 100vh;
|
||||
background-color: #f8fbfe;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
}
|
||||
|
||||
// Header样式
|
||||
.header {
|
||||
padding: 10px 0;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
.header-content {
|
||||
width: 100%;
|
||||
max-width: 950px;
|
||||
// margin: 0 auto;
|
||||
margin-top: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// gap: 20px;
|
||||
position: absolute;
|
||||
left: 420px;
|
||||
}
|
||||
|
||||
.logo-section {
|
||||
|
||||
margin: 0 50px;
|
||||
|
||||
img {
|
||||
height: 70px;
|
||||
width: 70px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
|
||||
.logo-text {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
color: #e1251b;
|
||||
}
|
||||
|
||||
.logo-mascot {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.signin-section {
|
||||
.signin-btn {
|
||||
background: linear-gradient(45deg, #ffd700, #ff6b35);
|
||||
color: white;
|
||||
border: none;
|
||||
@media (max-width: 768px) {
|
||||
padding: 8px 15px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
|
||||
.signin-icon {
|
||||
font-weight: bold;
|
||||
}
|
||||
margin: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 分页样式 */
|
||||
.el-pagination {
|
||||
padding: 20px 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
// 主内容区域
|
||||
.main-content {
|
||||
// padding: 16px;
|
||||
@media (max-width: 768px) {
|
||||
|
||||
width: 100%;
|
||||
max-width: 1600px;
|
||||
margin: 20px auto;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 0;
|
||||
border-radius: 10px;
|
||||
overflow: visible;
|
||||
background-color: white;
|
||||
height: 320px;
|
||||
|
||||
.content-wrapper {
|
||||
box-sizing: border-box;
|
||||
display: grid;
|
||||
grid-template-columns: 300px 1fr 250px;
|
||||
gap: 20px;
|
||||
::v-deep .el-pagination__total,
|
||||
::v-deep .el-pagination__jump {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 576px) {
|
||||
.jd-homepage {
|
||||
margin: 15px;
|
||||
margin-top: 80px;
|
||||
}
|
||||
|
||||
// 中间主内容区域
|
||||
.main-section {
|
||||
.promo-banner {
|
||||
background: linear-gradient(45deg, #52c41a, #73d13d);
|
||||
border-radius: 8px;
|
||||
.main-content {
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
|
||||
.banner-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.banner-text {
|
||||
color: white;
|
||||
|
||||
h3 {
|
||||
margin: 0 0 10px 0;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 5px 0;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.banner-image {
|
||||
position: relative;
|
||||
|
||||
.fridge-img {
|
||||
width: 120px;
|
||||
height: 90px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.flower-decoration {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.subsidy-section,
|
||||
.live-section,
|
||||
.seckill-section {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
.banner {
|
||||
height: 150px;
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 15px;
|
||||
.centerBox .title {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.official-tag,
|
||||
.live-tag,
|
||||
.seckill-tag {
|
||||
background: #e1251b;
|
||||
color: white;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.centerBox .tagUl {
|
||||
font-size: 16px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
.user-sidebar {
|
||||
height: 100%;
|
||||
|
||||
* {
|
||||
font-size: 20px !important;
|
||||
}
|
||||
}
|
||||
|
||||
// 响应式设计
|
||||
@media (max-width: 1200px) {
|
||||
.main-content .content-wrapper {
|
||||
grid-template-columns: 180px 1fr 220px;
|
||||
gap: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.main-content .content-wrapper {
|
||||
grid-template-columns: 1fr;
|
||||
.user-sidebar .publish-goods {
|
||||
height: 45px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.category-sidebar,
|
||||
.user-sidebar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.header .header-content {
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.search-section {
|
||||
width: 100%;
|
||||
.myTab {
|
||||
font-size: 14px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
|
Before Width: | Height: | Size: 873 KiB After Width: | Height: | Size: 873 KiB |
File diff suppressed because it is too large
Load Diff
Loading…
x
Reference in New Issue
Block a user