Compare commits
3 Commits
f6941b1994
...
f0e20310f7
| Author | SHA1 | Date | |
|---|---|---|---|
| f0e20310f7 | |||
| dc3543b80f | |||
| b4c56acfe2 |
@ -37,4 +37,14 @@ export function reqPublishProductSearchFirstPage(data) {
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
data
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
//算力供需广场 获取列表
|
||||
export function reqGetSupplyAndDemandSquareList(data) {
|
||||
return request({
|
||||
url: '/product/get_supply_and_demand_square_list.dspy',
|
||||
method: 'post',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
BIN
f/web-kboss/src/views/homePage/ncmatch/mainPage/img/cloud.png
Normal file
BIN
f/web-kboss/src/views/homePage/ncmatch/mainPage/img/cloud.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
BIN
f/web-kboss/src/views/homePage/ncmatch/mainPage/img/computer.png
Normal file
BIN
f/web-kboss/src/views/homePage/ncmatch/mainPage/img/computer.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1014 B |
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1753942817241" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1738" xmlns:xlink="http://www.w3.org/1999/xlink" width="14" height="14"><path d="M783.53 240.47C641.08 98.02 413.8 91.41 263.09 220.03V167.1c0-17.67-14.33-32-32-32s-32 14.33-32 32v128c0 17.67 14.33 32 32 32h128c17.67 0 32-14.33 32-32s-14.33-32-32-32h-48.15c125.55-101.54 310.66-94.06 427.34 22.62 124.75 124.77 124.75 327.8 0 452.56-124.78 124.75-327.78 124.75-452.56 0C225.28 677.84 192 597.48 192 512c0-17.67-14.33-32-32-32s-32 14.33-32 32c0 102.58 39.94 199.02 112.47 271.53 74.86 74.86 173.19 112.3 271.53 112.3 98.33 0 196.67-37.44 271.53-112.3 149.7-149.72 149.7-393.34 0-543.06z" fill="#333333" p-id="1739"></path><path d="M512 288c-17.67 0-32 14.33-32 32v185.38c0 12.81 5 24.88 14.06 33.94l123.31 123.31c6.25 6.25 14.44 9.38 22.62 9.38s16.38-3.12 22.62-9.38c12.5-12.5 12.5-32.75 0-45.25L544 498.75V320c0-17.67-14.33-32-32-32z" fill="#333333" p-id="1740"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
BIN
f/web-kboss/src/views/homePage/ncmatch/mainPage/img/logo.png
Normal file
BIN
f/web-kboss/src/views/homePage/ncmatch/mainPage/img/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 132 KiB |
BIN
f/web-kboss/src/views/homePage/ncmatch/mainPage/img/net.png
Normal file
BIN
f/web-kboss/src/views/homePage/ncmatch/mainPage/img/net.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
BIN
f/web-kboss/src/views/homePage/ncmatch/mainPage/img/nvidia.png
Normal file
BIN
f/web-kboss/src/views/homePage/ncmatch/mainPage/img/nvidia.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1753942811442" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1574" xmlns:xlink="http://www.w3.org/1999/xlink" width="14" height="14"><path d="M544.32 107.91h0.16-0.16M512 173.39l83.56 169.3 14.89 30.17 33.3 4.84 186.84 27.15-135.2 131.78-24.09 23.49 5.69 33.16 31.92 186.08L541.8 691.5 512 675.85l-29.78 15.66-167.11 87.85 31.92-186.08 5.69-33.16-24.09-23.49-135.2-131.78 186.84-27.15 33.3-4.84 14.89-30.17L512 173.39M512 64c-9.97 0-19.95 5.2-25.07 15.59L371.05 314.37l-259.1 37.65c-22.93 3.33-32.09 31.52-15.5 47.69l187.49 182.75-44.26 258.05c-3.1 18.07 11.26 32.75 27.55 32.75 4.3 0 8.73-1.02 13.02-3.27L512 748.16 743.75 870c4.28 2.25 8.72 3.27 13.02 3.27 16.29 0 30.65-14.68 27.55-32.75l-44.26-258.05 187.49-182.75c16.6-16.18 7.44-44.36-15.5-47.69l-259.1-37.65L537.07 79.59C531.95 69.2 521.97 64 512 64z" fill="#333333" p-id="1575"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
BIN
f/web-kboss/src/views/homePage/ncmatch/mainPage/img/ying.png
Normal file
BIN
f/web-kboss/src/views/homePage/ncmatch/mainPage/img/ying.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 939 B |
@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1753942853047" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1907" xmlns:xlink="http://www.w3.org/1999/xlink" width="14" height="14"><path d="M840.88 330H631.67c-11.17 0-19.3-10.6-16.41-21.38l23.16-86.43c14.45-53.93-17.55-109.36-71.48-123.81A98.616 98.616 0 0 0 541.36 95c-43.88 0-84.3 29.38-96.17 73.66l-19.8 73.88C411.57 294.12 364.82 330 311.41 330H150c-17.67 0-32 14.33-32 32v448c0 17.67 14.33 32 32 32h618.88c30.8 0 57.23-21.94 62.9-52.21l72-384c7.39-39.38-22.82-75.79-62.9-75.79zM182 394h93.63L248.2 778H182V394z m586.88 384H312.37l27.6-386.39c69.97-11.15 128.47-62.44 147.25-132.51l19.8-73.88c4.07-15.2 18.52-26.22 34.35-26.22 3.01 0 6.04 0.4 9.01 1.2 19.76 5.29 31.52 25.68 26.23 45.43l-23.16 86.43c-6.57 24.52-1.47 50.13 13.98 70.26 15.45 20.14 38.87 31.69 64.25 31.69h209.21L768.88 778z" fill="#333333" p-id="1908"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
@ -104,12 +104,12 @@ export default Vue.extend({
|
||||
{ name: '全部频道', icon: '📱', color: 'rainbow' }
|
||||
],
|
||||
categories: [
|
||||
{ name: '云', icon: '🏠', product_list: ['百度云'] },
|
||||
{ name: '国产算力', icon: '📱', product_list: ['昇腾910B', 'P800', '其他'] },
|
||||
{ name: 'NVIDIA', icon: '💻', product_list: ['3090', '4090', '5080', '5090'] },
|
||||
{ name: '网', icon: '🪑', product_list: ['AI专线', 'SDWAN', '互联网专线', 'DCI'] },
|
||||
{ name: '一体机', icon: '👕', product_list: ['昆仑芯', '天数智芯'] },
|
||||
{ name: '硬件', icon: '💄', product_list: ['机器人', 'AR眼镜'] },
|
||||
{ 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眼镜'] },
|
||||
]
|
||||
}
|
||||
},
|
||||
@ -147,6 +147,7 @@ export default Vue.extend({
|
||||
<div class="logo-section">
|
||||
<div class="logo">
|
||||
<!-- <span class="logo-text">京东</span> -->
|
||||
<img src="./img/logo.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -175,13 +176,12 @@ export default Vue.extend({
|
||||
<aside class="category-sidebar">
|
||||
<ul class="category-list">
|
||||
<li v-for="category in categories" :key="category.name" class="category-item">
|
||||
<span class="category-icon">{{ category.icon }}</span>
|
||||
<span class="category-icon"> <img style="width: 24px;height: 24px;" :src=" category.icon" alt=""> </span>
|
||||
<span class="category-name">{{ category.name }}</span>
|
||||
<span style="display: flex;border: 1px solid red;margin-left: 0px;padding-left: 0px;">|</span>
|
||||
<span style="display: flex;margin-left: 0px;padding-left: 0px;">|</span>
|
||||
<div class="menu-item">
|
||||
<span v-for="(product, index) in category.product_list" :key="product">
|
||||
{{ product }}{{ index < category.product_list.length - 1 ? ' / ' : '' }}
|
||||
</span>
|
||||
{{ product }}{{ index < category.product_list.length - 1 ? ' / ' : '' }} </span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
@ -207,10 +207,16 @@ export default Vue.extend({
|
||||
</section>
|
||||
|
||||
<!-- 右侧用户信息栏 -->
|
||||
<aside class="user-sidebar">
|
||||
<span class="publish-goods"> <img src="./img/gc.svg" alt=""> 算力供需广场</span>
|
||||
<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">发布需求</span>
|
||||
<span class="publish-goods" @click="sendProductVisible = true">发布商品</span>
|
||||
|
||||
<ul class="userBtn">
|
||||
<li><img src="./img/history.svg" alt="">浏览记录</li>
|
||||
<li><img src="./img/star.svg" alt="">收藏商品</li>
|
||||
<li><img src="./img/zan.svg" alt="">关注需求</li>
|
||||
</ul>
|
||||
</aside>
|
||||
</div>
|
||||
</main>
|
||||
@ -233,20 +239,38 @@ export default Vue.extend({
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
.userBtn {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
li {
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
img {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
flex: 1;
|
||||
border: 1px solid red;
|
||||
font-size: 13px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
min-width: 0; /* 确保flex子项可以收缩 */
|
||||
min-width: 0;
|
||||
/* 确保flex子项可以收缩 */
|
||||
}
|
||||
|
||||
.productList {
|
||||
width: 1400px;
|
||||
margin: 0 auto;
|
||||
border: 1px solid red;
|
||||
}
|
||||
|
||||
.publish-goods {
|
||||
@ -315,7 +339,6 @@ export default Vue.extend({
|
||||
font-size: 24px;
|
||||
height: 75px;
|
||||
line-height: 1.6;
|
||||
border: 1px solid red;
|
||||
}
|
||||
|
||||
.tagUl {
|
||||
@ -389,23 +412,25 @@ export default Vue.extend({
|
||||
padding: 10px 0;
|
||||
|
||||
.header-content {
|
||||
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
margin-top: 15px;
|
||||
margin-left: 200px;
|
||||
margin-right: 200px;
|
||||
border: 1px solid red;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
// gap: 20px;
|
||||
|
||||
}
|
||||
|
||||
.logo-section {
|
||||
margin: 0 50px;
|
||||
img{
|
||||
height: 70px;
|
||||
width: 80px;
|
||||
}
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
height: 100%;
|
||||
|
||||
.logo-text {
|
||||
font-size: 24px;
|
||||
@ -506,7 +531,6 @@ export default Vue.extend({
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
background-color: white;
|
||||
border: 1px solid red;
|
||||
|
||||
.content-wrapper {
|
||||
box-sizing: border-box;
|
||||
@ -530,7 +554,6 @@ export default Vue.extend({
|
||||
|
||||
|
||||
.category-item {
|
||||
border: 1px solid red;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
@ -549,9 +572,12 @@ export default Vue.extend({
|
||||
}
|
||||
|
||||
.category-icon {
|
||||
font-size: 16px;
|
||||
|
||||
width: 20px;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.category-name {
|
||||
@ -648,7 +674,9 @@ export default Vue.extend({
|
||||
|
||||
}
|
||||
|
||||
|
||||
.user-sidebar{
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
// 响应式设计
|
||||
@media (max-width: 1200px) {
|
||||
|
||||
@ -1,13 +1,18 @@
|
||||
<template>
|
||||
<!-- 产品列表 -->
|
||||
<ul class="productListContent" style="padding: 16px;">
|
||||
<li v-if="type === 'homePage'" class="product-item" v-for="item in productList" :key="item.id">
|
||||
<div>
|
||||
<ul v-if="type === 'homePage'" class="productListContent" style="padding: 16px;">
|
||||
<li class="product-item" v-for="item in productList" :key="item.id">
|
||||
<div class="product-image">
|
||||
<img :src="item.img" style="min-width: 278px;min-height: 185px;" :alt="item.name">
|
||||
</div>
|
||||
<div class="product-info">
|
||||
<h3 class="product-name">{{ item.name }}</h3>
|
||||
<div class="product-specs">
|
||||
<div class="spec-item" v-if="type === 'homePage'">
|
||||
<span class="spec-label">企业名称:</span>
|
||||
<span class="spec-value">{{ item.company_name }}</span>
|
||||
</div>
|
||||
<div class="spec-item">
|
||||
<span class="spec-label">CPU:</span>
|
||||
<span class="spec-value">{{ item.cpu }}</span>
|
||||
@ -37,17 +42,55 @@
|
||||
<span class="price">¥{{ item.price }}</span>
|
||||
<span class="price-unit">/台/月 (可短租)</span>
|
||||
</div>
|
||||
<button class="consult-btn">立即咨询</button>
|
||||
<button class="consult-btn" @click="openTalk">立即咨询</button>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
</ul>
|
||||
<ul v-else-if="type === 'supplyAndDemandSquare'" class="productListContent" style="padding: 16px;">
|
||||
<li class="product-item" v-for="item in productList" :key="item.id">
|
||||
<div class="product-image">
|
||||
<img :src="item.img" style="min-width: 278px;min-height: 185px;" :alt="item.name">
|
||||
</div>
|
||||
<div class="product-info">
|
||||
<h3 class="product-name">{{ item.name }}</h3>
|
||||
<div class="product-specs">
|
||||
<div class="spec-item" >
|
||||
<span class="spec-label">企业名称:</span>
|
||||
<span class="spec-value">{{ item.company_name }}</span>
|
||||
</div>
|
||||
<div class="spec-item">
|
||||
<span class="spec-label">所属类别:</span>
|
||||
<span class="spec-value">{{ item.company_type }}</span>
|
||||
</div>
|
||||
<div class="spec-item">
|
||||
<span class="spec-label">更新日期:</span>
|
||||
<span class="spec-value">{{ item.update_time }}</span>
|
||||
</div>
|
||||
<div class="spec-item">
|
||||
<span class="spec-label">需求描述:</span>
|
||||
<span class="spec-value">{{ item.requirement_summary }}</span>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<div style="display: flex;justify-content: space-between;align-items: center;">
|
||||
|
||||
<button class="consult-btn" @click="openTalk">立即咨询</button> <span class="detail-btn">详情>></span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<Talk></Talk>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Talk from '@/views/homePage/dialog/talk/index.vue'
|
||||
export default {
|
||||
name: 'productCard',
|
||||
components: {
|
||||
Talk
|
||||
},
|
||||
props: {
|
||||
productList: {
|
||||
type: Array,
|
||||
@ -57,7 +100,12 @@ export default {
|
||||
type: String,
|
||||
default: 'homePage'
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
openTalk() {
|
||||
this.$store.commit('setShowTalk', true);
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
@ -69,7 +117,6 @@ export default {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
background-color: white;
|
||||
border: 1px solid red;
|
||||
|
||||
.product-item {
|
||||
|
||||
@ -176,6 +223,13 @@ export default {
|
||||
box-shadow: 0 4px 12px rgba(39, 90, 255, 0.3);
|
||||
}
|
||||
}
|
||||
.detail-btn{
|
||||
font-size: 14px;
|
||||
color: #275AFF;
|
||||
cursor: pointer;
|
||||
min-width: 50px;
|
||||
margin-left: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,15 +1,44 @@
|
||||
<template>
|
||||
<div class="main-box">
|
||||
<div style="width: 1400px;border: 1px solid red;">
|
||||
|
||||
<div style="margin-top: 25px;">
|
||||
<span style="margin-top: 100px;" class="title">
|
||||
|
||||
<span class="leftText">
|
||||
算力供需
|
||||
</span>
|
||||
|
||||
|
||||
|
||||
<span class="rightText"> 广场</span></span>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div style="width: 1400px;">
|
||||
<div class="category-filter">
|
||||
<!-- 新增的需求和商品radio按钮组 -->
|
||||
<div class="radio-group-container">
|
||||
<div class="radio-group">
|
||||
<label class="radio-item" :class="{ active: selectedType === 'product' }">
|
||||
<input type="radio" v-model="selectedType" value="product" @change="handleTypeChange">
|
||||
<span class="radio-text">企业商品</span>
|
||||
</label>
|
||||
<label class="radio-item" :class="{ active: selectedType === 'demand' }">
|
||||
<input type="radio" v-model="selectedType" value="demand" @change="handleTypeChange">
|
||||
<span class="radio-text">企业需求</span>
|
||||
</label>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- 所属类别 -->
|
||||
<div class="category-section">
|
||||
<div class="category-title">所属类别</div>
|
||||
<div class="category-tags">
|
||||
<span v-for="category in categories" :key="category.id"
|
||||
:class="['category-tag', { active: selectedCategory === category.id }]"
|
||||
@click="selectCategory(category.id)">
|
||||
{{ category.name }}
|
||||
<span v-for="category in typeList" :key="category.id"
|
||||
:class="['category-tag', { active: selectedCategory === category.value }]"
|
||||
@click="selectCategory(category.value)">
|
||||
{{ category.label }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -25,17 +54,20 @@
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 产品 -->
|
||||
<div class="product-card-container">
|
||||
<productCard v-if="productList.length > 0" :productList="productList"></productCard>
|
||||
<div v-else class="no-data">暂无数据</div>
|
||||
</div>
|
||||
<!-- 产品 -->
|
||||
|
||||
<div class="product-card-container">
|
||||
<productCard v-if="productList.length > 0" type="supplyAndDemandSquare" :productList="productList">
|
||||
</productCard>
|
||||
<div v-else class="no-data">暂无数据</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { reqGetProductCategorySearch, reqGetSupplyAndDemandSquareList } from '@/api/ncmatch'
|
||||
export default {
|
||||
name: 'supplyAndDemandSquare',
|
||||
components: {
|
||||
@ -43,7 +75,9 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
selectedCategory: 'category2', // 默认选中项
|
||||
typeList:[],
|
||||
selectedType: 'product', // 默认选中需求
|
||||
selectedCategory: '', // 默认选中项
|
||||
selectedCompany: 'company1', // 默认选中项
|
||||
categories: [
|
||||
{ id: 'category1', name: '云' },
|
||||
@ -67,65 +101,104 @@ export default {
|
||||
productList: []
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.init_product_category()
|
||||
},
|
||||
methods: {
|
||||
selectCategory(categoryId) {
|
||||
if(categoryId===this.selectedCategory) return;
|
||||
this.selectedCategory = categoryId
|
||||
this.initData(this.selectedCategory)
|
||||
},
|
||||
init_product_category(product_category) {
|
||||
reqGetProductCategorySearch({ userid: '9KVhsVCJsW_29q3hRhMAr' }).then(res => {
|
||||
if (res.status) {
|
||||
let list = []
|
||||
for(let item of res.data){
|
||||
if(item.parentid === null){
|
||||
list.push({
|
||||
label:item.product_category,
|
||||
value:item.id
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
this.selectedCategory = list[0].value
|
||||
this.typeList = list
|
||||
this.initData(this.selectedCategory)
|
||||
console.log("2@@", this.typeList);
|
||||
|
||||
}
|
||||
})
|
||||
},
|
||||
handleTypeChange() {
|
||||
// 处理类型切换逻辑
|
||||
console.log('切换到:', this.selectedType)
|
||||
// 这里可以根据类型重新加载数据
|
||||
},
|
||||
initData(product_category) {
|
||||
reqGetSupplyAndDemandSquareList({product_category}).then(res => {
|
||||
if (res.status) {
|
||||
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
selectCompany(companyId) {
|
||||
this.selectedCompany = companyId
|
||||
},
|
||||
getProductList() {
|
||||
this.productList = [
|
||||
{
|
||||
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-A100',
|
||||
image: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjE1MCIgdmlld0JveD0iMCAwIDIwMCAxNTAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIyMDAiIGhlaWdodD0iMTUwIiBmaWxsPSIjMjIyMjIyIi8+Cjx0ZXh0IHg9IjEwMCIgeT0iNzUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxNCIgZmlsbD0id2hpdGUiIHRleHQtYW5jaG9yPSJtaWRkbGUiPk5WSUQpQSBSVFggNDA5MDwvdGV4dD4KPC9zdmc+Cg==',
|
||||
price: 8000,
|
||||
cpu: 'AMD EPYC 7542 32 C * 2',
|
||||
memory: '128G DDR4-3200 * 8',
|
||||
gpu: 'NVIDIA-A100-80GB * 8',
|
||||
sys_disk: '1.92T SATA SSD * 2 (Raid)',
|
||||
data_disk: '7.68T U.2 NVMe SSD * 1',
|
||||
net_card: 'Mellanox Connect4 25G SFP28 2-port * 1'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '昇腾910B',
|
||||
image: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjE1MCIgdmlld0JveD0iMCAwIDIwMCAxNTAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIyMDAiIGhlaWdodD0iMTUwIiBmaWxsPSIjMjIyMjIyIi8+Cjx0ZXh0IHg9IjEwMCIgeT0iNzUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxNCIgZmlsbD0id2hpdGUiIHRleHQtYW5jaG9yPSJtaWRkbGUiPk5WSUQpQSBSVFggNDA5MDwvdGV4dD4KPC9zdmc+Cg==',
|
||||
price: 5000,
|
||||
cpu: 'Kunpeng 920 64 C * 2',
|
||||
memory: '64G DDR4-3200 * 8',
|
||||
gpu: '昇腾910B-32GB * 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: 4,
|
||||
name: '昆仑芯P800',
|
||||
image: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjE1MCIgdmlld0JveD0iMCAwIDIwMCAxNTAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIyMDAiIGhlaWdodD0iMTUwIiBmaWxsPSIjMjIyMjIyIi8+Cjx0ZXh0IHg9IjEwMCIgeT0iNzUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxNCIgZmlsbD0id2hpdGUiIHRleHQtYW5jaG9yPSJtaWRkbGUiPk5WSUQpQSBSVFggNDA5MDwvdGV4dD4KPC9zdmc+Cg==',
|
||||
price: 4000,
|
||||
cpu: 'Kunpeng 920 64 C * 2',
|
||||
memory: '64G DDR4-3200 * 8',
|
||||
gpu: '昆仑芯P800-16GB * 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'
|
||||
}
|
||||
]
|
||||
}
|
||||
getProductList() {
|
||||
this.productList = [
|
||||
{
|
||||
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-A100',
|
||||
image: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjE1MCIgdmlld0JveD0iMCAwIDIwMCAxNTAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIyMDAiIGhlaWdodD0iMTUwIiBmaWxsPSIjMjIyMjIyIi8+Cjx0ZXh0IHg9IjEwMCIgeT0iNzUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxNCIgZmlsbD0id2hpdGUiIHRleHQtYW5jaG9yPSJtaWRkbGUiPk5WSUQpQSBSVFggNDA5MDwvdGV4dD4KPC9zdmc+Cg==',
|
||||
price: 8000,
|
||||
cpu: 'AMD EPYC 7542 32 C * 2',
|
||||
memory: '128G DDR4-3200 * 8',
|
||||
gpu: 'NVIDIA-A100-80GB * 8',
|
||||
sys_disk: '1.92T SATA SSD * 2 (Raid)',
|
||||
data_disk: '7.68T U.2 NVMe SSD * 1',
|
||||
net_card: 'Mellanox Connect4 25G SFP28 2-port * 1'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '昇腾910B',
|
||||
image: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjE1MCIgdmlld0JveD0iMCAwIDIwMCAxNTAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIyMDAiIGhlaWdodD0iMTUwIiBmaWxsPSIjMjIyMjIyIi8+Cjx0ZXh0IHg9IjEwMCIgeT0iNzUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxNCIgZmlsbD0id2hpdGUiIHRleHQtYW5jaG9yPSJtaWRkbGUiPk5WSUQpQSBSVFggNDA5MDwvdGV4dD4KPC9zdmc+Cg==',
|
||||
price: 5000,
|
||||
cpu: 'Kunpeng 920 64 C * 2',
|
||||
memory: '64G DDR4-3200 * 8',
|
||||
gpu: '昇腾910B-32GB * 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: 4,
|
||||
name: '昆仑芯P800',
|
||||
image: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjE1MCIgdmlld0JveD0iMCAwIDIwMCAxNTAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIyMDAiIGhlaWdodD0iMTUwIiBmaWxsPSIjMjIyMjIyIi8+Cjx0ZXh0IHg9IjEwMCIgeT0iNzUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxNCIgZmlsbD0id2hpdGUiIHRleHQtYW5jaG9yPSJtaWRkbGUiPk5WSUQpQSBSVFggNDA5MDwvdGV4dD4KPC9zdmc+Cg==',
|
||||
price: 4000,
|
||||
cpu: 'Kunpeng 920 64 C * 2',
|
||||
memory: '64G DDR4-3200 * 8',
|
||||
gpu: '昆仑芯P800-16GB * 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'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getProductList()
|
||||
@ -134,13 +207,115 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.product-list{
|
||||
/* 新增的radio按钮组样式 */
|
||||
.radio-group-container {
|
||||
width: 100%!important;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
// margin: 20px 0;
|
||||
align-items: center;
|
||||
max-width: 1400px;
|
||||
}
|
||||
|
||||
.radio-group {
|
||||
display: flex;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 15px;
|
||||
// box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.radio-item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 8px 16px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
background: #fff;
|
||||
border: 1px solid #e8e8e8;
|
||||
margin-right: 4px;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
input[type="radio"] {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.radio-text {
|
||||
font-size: 14px;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
color: #222F60;
|
||||
font-size: 36px;
|
||||
margin: 25px;
|
||||
|
||||
.leftText {
|
||||
background: linear-gradient(to right, #275AFF, #2EBDFA);
|
||||
/* 渐变方向颜色 */
|
||||
-webkit-background-clip: text;
|
||||
/* 关键属性：裁剪背景到文字 */
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
/* 文字颜色透明 */
|
||||
display: inline-block;
|
||||
/* 确保渐变生效 */
|
||||
}
|
||||
}
|
||||
|
||||
.itemTitle {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
|
||||
.topText {
|
||||
color: #222F60;
|
||||
font-size: 48px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.bottomText {
|
||||
font-size: 24px;
|
||||
color: #7A82A0;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.product-list {
|
||||
width: 100%;
|
||||
border: 1px solid red;
|
||||
|
||||
// display: grid;
|
||||
// grid-template-columns: repeat(4, 1fr);
|
||||
// gap: 20px;
|
||||
.no-data{
|
||||
.no-data {
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
}
|
||||
@ -151,9 +326,9 @@ export default {
|
||||
margin-top: 20px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.main-box {
|
||||
width: 100%;
|
||||
border: 1px solid red;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
@ -175,7 +350,6 @@ export default {
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
border: 1px solid red;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
@ -189,7 +363,6 @@ export default {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
border: 1px solid red;
|
||||
height: 100%;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user