263 lines
7.4 KiB
Vue
263 lines
7.4 KiB
Vue
<template>
|
||
<div class="mainBox">
|
||
<div class="header">
|
||
<div class="logowx"><img src="../../assets/kyy/simple_logonew.png" alt=""></div>
|
||
<div class="btnStyle" @click="openLoginDialog"> 登录/注册</div>
|
||
</div>
|
||
<div class="banner" style="margin-top: 60px">
|
||
{{ $route.query.productType === '0' ? "供给详情" : "需求详情" }}
|
||
</div>
|
||
<div class="detailInfo">
|
||
<!-- {{ JSON.stringify($route.query) }}-->
|
||
<div class="title">{{ $route.query.productType === '0' ? dataObj.supplytitle : dataObj.demandtitle }}
|
||
<span class="tagS">{{
|
||
computedWord($route.query.productType === '0' ? dataObj.supplytype : dataObj.demandtype)
|
||
}}</span>
|
||
</div>
|
||
<div class="tag">发布时间: {{ $route.query.productType === '0' ? dataObj.supplybegin : dataObj.demandbegin }}
|
||
|
||
<!-- {{ (!dataObj.supplybegin && !dataObj.demandbegin) ? : '-':'' }}-->
|
||
{{ (!dataObj.supplybegin && !dataObj.demandbegin) ? '-' : '' }}
|
||
|
||
</div>
|
||
<div class="tag">发布地点：
|
||
{{ dataObj.provincename }}
|
||
</div>
|
||
<!-- <div class="tag">公司名：{{ dataObj.supplybegin }} {{ $route.query.productType === '0' ? dataObj.supplytitle : dataObj.demandtitle }}<</div>-->
|
||
<!-- <div class="tag">节点名字：{{ dataObj.createby }} {{ $route.query.productType === '0' ? dataObj.supplytitle : dataObj.demandtitle }}<</div>-->
|
||
<div style="margin-top: 35px;font-size: 18px;font-weight: 500">资源信息</div>
|
||
<ul v-if="$route.query.productType=='0'" class="detail-ul">
|
||
|
||
<li><span style="margin-right: 15px" class="tag">资源描述:</span>{{ dataObj.supplydesc }}</li>
|
||
<li v-if="dataObj.framepowerway"><span style="margin-right: 15px"
|
||
class="tag">供电方式:</span>{{ dataObj.framepowerway }}
|
||
</li>
|
||
<li v-if="dataObj.framepower"><span style="margin-right: 15px"
|
||
class="tag">供电功率:</span>{{ dataObj.framepower }}KW
|
||
</li>
|
||
<li v-if="dataObj.frameheight"><span style="margin-right: 15px"
|
||
class="tag">机柜高度:</span>{{ dataObj.frameheight }}
|
||
</li>
|
||
<li v-if="dataObj.supplynum"><span style="margin-right: 15px" class="tag">可租数量:</span>{{
|
||
dataObj.supplynum
|
||
}}
|
||
</li>
|
||
<!-- 资源-->
|
||
<li v-if="dataObj.gpuresource"><span style="margin-right: 15px" class="tag">计算资源:</span>{{
|
||
dataObj.gpuresource
|
||
}}
|
||
</li>
|
||
<li v-if="dataObj.gpunet"><span style="margin-right: 15px" class="tag">网络架构:</span>{{
|
||
dataObj.gpunet
|
||
}}
|
||
</li>
|
||
<li v-if="dataObj.priceunit"><span style="margin-right: 15px" class="tag">计费模式:</span>{{
|
||
dataObj.priceunit
|
||
}}
|
||
</li>
|
||
<li v-if="dataObj.gpuapplypflops"><span style="margin-right: 15px" class="tag">可租算力:</span>{{
|
||
dataObj.gpuapplypflops
|
||
}}
|
||
</li>
|
||
<li v-if="dataObj.gpuoccasion"><span style="margin-right: 15px" class="tag">试用场景:</span>{{
|
||
dataObj.gpuoccasion
|
||
}}
|
||
</li>
|
||
<!-- 硬件-->
|
||
|
||
<!-- <li v-if="dataObj.supplydesc"><span style="margin-right: 15px" class="tag">试用1场景:</span>{{-->
|
||
<!-- dataObj.supplydesc-->
|
||
<!-- }}-->
|
||
<!-- </li>-->
|
||
<li v-if="dataObj.goodsaddress"><span style="margin-right: 15px" class="tag">交易地址:</span>{{
|
||
dataObj.goodsaddress
|
||
}}
|
||
</li>
|
||
<li v-if="dataObj.expiretime"><span style="margin-right: 15px" class="tag">信息过期时间:</span>{{
|
||
dataObj.expiretime
|
||
}}
|
||
</li>
|
||
|
||
<li v-if="dataObj.contactuser"><span style="margin-right: 15px" class="tag">联系人:</span>{{
|
||
dataObj.contactuser
|
||
}}
|
||
</li>
|
||
<li v-if="dataObj.infopicurl">
|
||
<img style="width: 150px;height: 150px;" :src="dataObj.infopicurl" alt="">
|
||
</li>
|
||
<li>
|
||
<span style="margin-right: 15px" class="tag">产品单价:</span>
|
||
<span style="font-weight: 700;color: blue" @click="openLoginDialog">登录后查看</span></li>
|
||
</ul>
|
||
<ul v-else-if="$route.query.productType=='1'" class="detail-ul">
|
||
<li><span style="margin-right: 15px" class="tag">需求说明:</span>{{ dataObj.demanddesc }}</li>
|
||
<li><span style="margin-right: 15px" class="tag">联系人员:</span>{{ dataObj.contactuser }}</li>
|
||
<li><span style="margin-right: 15px" class="tag">联系方式:</span>{{ dataObj.contactusermobile }}</li>
|
||
<li><span style="margin-right: 15px" class="tag">需求时间:</span>{{ dataObj.demandbegin }}</li>
|
||
<li><span style="margin-right: 15px" class="tag">需求预算:</span>{{ dataObj.budgetprice }}</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="footerBox">
|
||
<!-- <div>-->
|
||
<!-- <div class="logowx"><img src="../../assets/kyy/simple_logonew.png" alt=""></div>-->
|
||
<!-- </div>-->
|
||
<span>版权所有 © 2023开元云（北京）科技有限公司 </span>
|
||
</div>
|
||
</div>
|
||
|
||
</template>
|
||
|
||
|
||
<script>
|
||
export default {
|
||
name: "wxDetailPage",
|
||
data() {
|
||
return {
|
||
detailData: {
|
||
name: 'asdfsadf',
|
||
time: 'asdf',
|
||
address: 'asdf',
|
||
description: 'asdasdasd',
|
||
type: 'asdf',
|
||
dian: "sadfdsa",
|
||
num: 19,
|
||
price: 'asdf'
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
openLoginDialog() {
|
||
window.dispatchEvent(new Event('kboss-open-login-dialog'))
|
||
},
|
||
computedWord(type) {
|
||
if (type === '1') {
|
||
return '机柜'
|
||
} else if (type === '2') {
|
||
return '带宽'
|
||
} else if (type === '4') {
|
||
return '算力'
|
||
} else if (type === '5') {
|
||
return '硬件'
|
||
}
|
||
}
|
||
},
|
||
computed: {
|
||
dataObj() {
|
||
return this.$route.query.dataObj
|
||
},
|
||
// productType() {
|
||
// return this.$route.query.productType
|
||
// },
|
||
}
|
||
}
|
||
</script>
|
||
|
||
|
||
<style scoped lang="scss">
|
||
.mainBox {
|
||
width: 100%;
|
||
height: 100vh;
|
||
overflow-y: auto;
|
||
|
||
}
|
||
|
||
.header {
|
||
position: fixed;
|
||
top: 0;
|
||
z-index: 1002;
|
||
background: #fff;
|
||
width: 100%;
|
||
height: 60px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.banner {
|
||
height: 150px;
|
||
background: url("./img/bg.png") no-repeat center;
|
||
background-size: cover;
|
||
color: white;
|
||
font-size: 30px;
|
||
font-weight: 700;
|
||
padding-top: 50px;
|
||
padding-left: 15px;
|
||
}
|
||
|
||
.detailInfo {
|
||
width: 100%;
|
||
padding: 32px;
|
||
|
||
}
|
||
|
||
.detailInfo {
|
||
min-height: calc(100vh - 300px);
|
||
|
||
.title {
|
||
font-size: 24px;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
|
||
.tag {
|
||
font-size: 14px;
|
||
color: #8a8c8f !important;
|
||
margin: 10px 0;
|
||
margin-right: 5px;
|
||
|
||
}
|
||
|
||
.detail-ul {
|
||
padding: 0;
|
||
margin: 0;
|
||
margin-top: 20px;
|
||
|
||
li {
|
||
margin: 10px 0;
|
||
}
|
||
|
||
* {
|
||
list-style: none;
|
||
padding: 0;
|
||
margin: 0;
|
||
}
|
||
}
|
||
|
||
.logowx {
|
||
width: 100px;
|
||
height: 100%;
|
||
|
||
}
|
||
|
||
.btnStyle {
|
||
height: calc(100% + 2px);
|
||
padding: 0 10px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
color: #fff;
|
||
background: #0749f2;
|
||
}
|
||
|
||
.footerBox {
|
||
margin-top: 15px;
|
||
width: 100%;
|
||
height: 70px;
|
||
background: #18202f;
|
||
color: white;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.tagS {
|
||
font-size: 14px;
|
||
margin-left: 15px;
|
||
background: rgb(0, 180, 42);
|
||
color: white;
|
||
padding: 3px 5px;
|
||
border-radius: 2px;
|
||
}
|
||
</style>
|