643 lines
16 KiB
Vue
643 lines
16 KiB
Vue
<script >
|
||
import Vue from 'vue'
|
||
import { reqPublishProductSearchFirstPage } from '@/api/ncmatch'
|
||
import { mapGetters, mapState } from "vuex";
|
||
export default Vue.extend({
|
||
name: "mainPage",
|
||
components: {
|
||
sendProduct: () => import('./sendProduct/index.vue'),
|
||
productCard: () => import('./productCard/index.vue'),
|
||
search: () => import('../search/index.vue'),
|
||
menuAside: () => import('./menuAside/index.vue')
|
||
},
|
||
created() {
|
||
this.init_product_list()
|
||
},
|
||
data() {
|
||
return {
|
||
total: 0,
|
||
publish_type: null,
|
||
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: ['数字人', '智慧医疗', '智能客服'] },
|
||
],
|
||
current_page: 1,
|
||
page_size: 8,
|
||
|
||
}
|
||
},
|
||
computed: {
|
||
|
||
...mapGetters(["sidebar", "avatar", "device"]),
|
||
...mapState({
|
||
isShowPanel: (state) => state.product.showHomeNav,
|
||
navIndex: (state) => state.product.navIndex,
|
||
gridObj: state => state.operationAnalysis.gridObj,
|
||
mybalance: state => state.user.mybalance,
|
||
logoutUrl: state => state.login.logoutUrl,
|
||
loginStateVuex: state => state.login.loginState,
|
||
logoInfoNew: state => state.product.logoInfoNew,
|
||
}),
|
||
loginState() {
|
||
const userId = sessionStorage.getItem('userId');
|
||
return this.loginStateVuex || (userId !== null && userId !== 'null' && userId !== '');
|
||
},
|
||
|
||
|
||
|
||
},
|
||
methods: {
|
||
handleCurrentChange(val) {
|
||
this.current_page = val
|
||
this.init_product_list()
|
||
},
|
||
sendInfo(type) {
|
||
if (this.loginState) {
|
||
this.publish_type = type
|
||
this.sendProductVisible = true
|
||
} else {
|
||
this.$router.push('/login')
|
||
}
|
||
},
|
||
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 => {
|
||
if (res.status) {
|
||
if (res.data.length > 0) {
|
||
this.currentHotMenu = res.data[0].id
|
||
this.hotProductList = res.data[0].product_list
|
||
this.product = res.data
|
||
this.total = res.data[0].total_count
|
||
}
|
||
|
||
}
|
||
})
|
||
},
|
||
sendProductSuccess() {
|
||
this.sendProductVisible = false; // 关闭弹窗
|
||
this.init_product_list()
|
||
},
|
||
clickNetMenu(menu) {
|
||
this.current_page = 1
|
||
this.currentHotMenu = menu.id;
|
||
this.hotProductList = menu.product_list || [];
|
||
},
|
||
handleSearch() {
|
||
console.log('搜索:1', this.searchKeyword)
|
||
|
||
}
|
||
}
|
||
})
|
||
</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;"> 您身边的AI管家</span>
|
||
</span>
|
||
<!-- <span class="description">支持模型训练、推理和数据处理，灵活配置，助您高效释放AI潜能</span>-->
|
||
<ul style="margin-top: 50px" class="tagUl">
|
||
<li>全 球 领 先 的 AI 服 务 运 营 商</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><img src="./img/eye.png" alt="">浏览记录</li>
|
||
<li><img 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.name }}</span>
|
||
</li>
|
||
</ul>
|
||
|
||
|
||
<productCard :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>
|
||
</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;
|
||
|
||
&:hover {
|
||
transition: all 0.3s;
|
||
cursor: pointer;
|
||
color: #2c96fc;
|
||
|
||
svg {
|
||
path {
|
||
fill: #2c96fc !important;
|
||
}
|
||
}
|
||
}
|
||
|
||
img {
|
||
width: 16px;
|
||
height: 16px;
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
|
||
.productList {
|
||
width: 100%;
|
||
max-width: 1600px;
|
||
margin: 0 auto;
|
||
// padding-bottom: 45px;
|
||
}
|
||
|
||
.publish-goods {
|
||
margin-bottom: 25px;
|
||
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;
|
||
|
||
&:hover {
|
||
cursor: pointer;
|
||
// background: #2EBDFA;
|
||
}
|
||
}
|
||
|
||
.banner {
|
||
border-radius: 10px;
|
||
background: url("../../newImg/banner.png");
|
||
width: 100%;
|
||
background-size: cover;
|
||
background-position: center;
|
||
position: relative;
|
||
height: 100%;
|
||
|
||
.centerBox {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
position: absolute;
|
||
top: 35%;
|
||
left: 50%;
|
||
width: 100%;
|
||
transform: translate(-50%, -50%);
|
||
|
||
.title {
|
||
color: #222F60;
|
||
font-size: 42px;
|
||
display: flex;
|
||
|
||
.leftText {
|
||
background: linear-gradient(to right, #275AFF, #2EBDFA);
|
||
/* 渐变方向颜色 */
|
||
-webkit-background-clip: text;
|
||
/* 关键属性：裁剪背景到文字 */
|
||
background-clip: text;
|
||
color: transparent;
|
||
/* 文字颜色透明 */
|
||
display: inline-block;
|
||
/* 确保渐变生效 */
|
||
}
|
||
}
|
||
|
||
|
||
.description {
|
||
margin: 15px 0;
|
||
color: #7A82A0;
|
||
font-size: 24px;
|
||
height: 75px;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.tagUl {
|
||
color: #222F60;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-size: 24px;
|
||
|
||
li {
|
||
padding: 0 30px;
|
||
margin-top: 25px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
&:not(:last-child) {
|
||
border-right: 2px solid #D2D7E6;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.myTab {
|
||
width: 100%;
|
||
font-size: 18px;
|
||
border-radius: 16px;
|
||
background: #f7f8fc;
|
||
padding: 10px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
.activeMenu {
|
||
background: linear-gradient(90deg, #275AFF 0%, #2EBDFA 100%);
|
||
color: white;
|
||
}
|
||
|
||
li {
|
||
transition: all .2s ease-in-out;
|
||
z-index: 2;
|
||
padding: 10px 20px;
|
||
margin-right: 45px;
|
||
border-radius: 8px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
&: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;
|
||
padding: 8px 15px;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
font-size: 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 5px;
|
||
|
||
.signin-icon {
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
// 主内容区域
|
||
.main-content {
|
||
padding: 16px;
|
||
|
||
width: 100%;
|
||
max-width: 1600px;
|
||
margin: 20px auto;
|
||
margin-top: 10px;
|
||
border-radius: 10px;
|
||
overflow: visible;
|
||
background-color: white;
|
||
height: 360px;
|
||
|
||
.content-wrapper {
|
||
box-sizing: border-box;
|
||
display: grid;
|
||
grid-template-columns: 300px 1fr 250px;
|
||
gap: 20px;
|
||
}
|
||
}
|
||
|
||
|
||
// 中间主内容区域
|
||
.main-section {
|
||
.promo-banner {
|
||
background: linear-gradient(45deg, #52c41a, #73d13d);
|
||
border-radius: 8px;
|
||
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;
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.subsidy-section,
|
||
.live-section,
|
||
.seckill-section {
|
||
background: white;
|
||
border-radius: 8px;
|
||
padding: 20px;
|
||
margin-bottom: 20px;
|
||
|
||
.section-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 15px;
|
||
|
||
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;
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
}
|
||
|
||
.user-sidebar {
|
||
height: 100%;
|
||
}
|
||
|
||
// 响应式设计
|
||
@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;
|
||
}
|
||
|
||
.category-sidebar,
|
||
.user-sidebar {
|
||
display: none;
|
||
}
|
||
|
||
.header .header-content {
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
}
|
||
|
||
.search-section {
|
||
width: 100%;
|
||
}
|
||
}
|
||
</style>
|