This commit is contained in:
木瓜一块八 2025-07-31 14:40:27 +08:00
parent 69d7fb2540
commit b4c56acfe2
6 changed files with 103 additions and 16 deletions

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -177,11 +177,10 @@ export default Vue.extend({
<li v-for="category in categories" :key="category.name" class="category-item"> <li v-for="category in categories" :key="category.name" class="category-item">
<span class="category-icon">{{ category.icon }}</span> <span class="category-icon">{{ category.icon }}</span>
<span class="category-name">{{ category.name }}</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"> <div class="menu-item">
<span v-for="(product, index) in category.product_list" :key="product"> <span v-for="(product, index) in category.product_list" :key="product">
{{ product }}{{ index < category.product_list.length - 1 ? ' / ' : '' }} {{ product }}{{ index < category.product_list.length - 1 ? ' / ' : '' }} </span>
</span>
</div> </div>
</li> </li>
</ul> </ul>
@ -207,10 +206,16 @@ export default Vue.extend({
</section> </section>
<!-- 右侧用户信息栏 --> <!-- 右侧用户信息栏 -->
<aside class="user-sidebar"> <aside class="user-sidebar" style="background-color: #f8fbfe;padding: 10px;padding-top: 20px;">
<span class="publish-goods"> <img src="./img/gc.svg" alt=""> 算力供需广场</span> <span class="publish-goods"> <img src="./img/gc.svg" alt=""> 算力供需广场</span>
<span class="publish-goods">发布需求</span> <span class="publish-goods">发布需求</span>
<span class="publish-goods" @click="sendProductVisible = true">发布商品</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> </aside>
</div> </div>
</main> </main>
@ -233,20 +238,37 @@ export default Vue.extend({
</template> </template>
<style scoped lang="scss"> <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 { .menu-item {
flex: 1; flex: 1;
border: 1px solid red;
font-size: 13px; font-size: 13px;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
min-width: 0; /* 确保flex子项可以收缩 */ min-width: 0;
/* 确保flex子项可以收缩 */
} }
.productList { .productList {
width: 1400px; width: 1400px;
margin: 0 auto; margin: 0 auto;
border: 1px solid red;
} }
.publish-goods { .publish-goods {
@ -315,7 +337,6 @@ export default Vue.extend({
font-size: 24px; font-size: 24px;
height: 75px; height: 75px;
line-height: 1.6; line-height: 1.6;
border: 1px solid red;
} }
.tagUl { .tagUl {
@ -395,7 +416,6 @@ export default Vue.extend({
margin-top: 15px; margin-top: 15px;
margin-left: 200px; margin-left: 200px;
margin-right: 200px; margin-right: 200px;
border: 1px solid red;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 20px; gap: 20px;
@ -506,7 +526,6 @@ export default Vue.extend({
border-radius: 10px; border-radius: 10px;
overflow: hidden; overflow: hidden;
background-color: white; background-color: white;
border: 1px solid red;
.content-wrapper { .content-wrapper {
box-sizing: border-box; box-sizing: border-box;
@ -530,7 +549,6 @@ export default Vue.extend({
.category-item { .category-item {
border: 1px solid red;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 10px; gap: 10px;

View File

@ -1,13 +1,19 @@
<template> <template>
<!-- 产品列表 --> <!-- 产品列表 -->
<ul class="productListContent" style="padding: 16px;"> <div>
<li v-if="type === 'homePage'" class="product-item" v-for="item in productList" :key="item.id"> type:{{ type }}
<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"> <div class="product-image">
<img :src="item.img" style="min-width: 278px;min-height: 185px;" :alt="item.name"> <img :src="item.img" style="min-width: 278px;min-height: 185px;" :alt="item.name">
</div> </div>
<div class="product-info"> <div class="product-info">
<h3 class="product-name">{{ item.name }}</h3> <h3 class="product-name">{{ item.name }}</h3>
<div class="product-specs"> <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"> <div class="spec-item">
<span class="spec-label">CPU:</span> <span class="spec-label">CPU:</span>
<span class="spec-value">{{ item.cpu }}</span> <span class="spec-value">{{ item.cpu }}</span>
@ -37,17 +43,71 @@
<span class="price">¥{{ item.price }}</span> <span class="price">¥{{ item.price }}</span>
<span class="price-unit">// (可短租)</span> <span class="price-unit">// (可短租)</span>
</div> </div>
<button class="consult-btn">立即咨询</button> <button class="consult-btn" @click="openTalk">立即咨询</button>
</div> </div>
</li> </li>
<li> <li>
</li> </li>
</ul> </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" 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>
</div>
<div class="spec-item">
<span class="spec-label">内存:</span>
<span class="spec-value">{{ item.memory }}</span>
</div>
<div class="spec-item">
<span class="spec-label">GPU:</span>
<span class="spec-value">{{ item.gpu }}</span>
</div>
<div class="spec-item">
<span class="spec-label">系统盘:</span>
<span class="spec-value">{{ item.sys_disk }}</span>
</div>
<div class="spec-item">
<span class="spec-label">数据盘:</span>
<span class="spec-value">{{ item.data_disk }}</span>
</div>
<div class="spec-item">
<span class="spec-label">网卡:</span>
<span class="spec-value">{{ item.net_card }}</span>
</div>
</div>
<div class="product-price">
<span class="price">¥{{ item.price }}</span>
<span class="price-unit">// (可短租)</span>
</div>
<button class="consult-btn" @click="openTalk">立即咨询</button>
</div>
</li>
<li>
</li>
</ul>
<Talk></Talk>
</div>
</template> </template>
<script> <script>
import Talk from '@/views/homePage/dialog/talk/index.vue'
export default { export default {
name: 'productCard', name: 'productCard',
components: {
Talk
},
props: { props: {
productList: { productList: {
type: Array, type: Array,
@ -57,7 +117,12 @@ export default {
type: String, type: String,
default: 'homePage' default: 'homePage'
} }
} },
methods: {
openTalk() {
this.$store.commit('setShowTalk', true);
},
}
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">

View File

@ -26,8 +26,9 @@
</div> </div>
</div> </div>
<!-- 产品 --> <!-- 产品 -->
{{ productList.length > 0}}
<div class="product-card-container"> <div class="product-card-container">
<productCard v-if="productList.length > 0" :productList="productList"></productCard> <productCard v-if="productList.length > 0" type="supplyAndDemandSquare" :productList="productList"></productCard>
<div v-else class="no-data">暂无数据</div> <div v-else class="no-data">暂无数据</div>
</div> </div>
</div> </div>