|
|
@@ -12,7 +12,7 @@
|
|
|
<banner :banners="banners" :height="375" :radius="0" :autoplay="false"></banner>
|
|
|
<div class="main" id="main">
|
|
|
<div class="info">
|
|
|
- <div class="ad" @click="goLocation">
|
|
|
+ <div class="ad" @click="goLocation" v-if="productInfo.offlineExperience">
|
|
|
<span>可在IMT展厅线下体验,点击查看地址</span>
|
|
|
<img src="../static/imgs/iocn_dingwei.png" alt="" />
|
|
|
</div>
|
|
|
@@ -28,14 +28,14 @@
|
|
|
@click="collection"
|
|
|
:custom-class="animate ? 'my-icon iconAnimate' : 'my-icon'"
|
|
|
:name="isCollection ? 'icon-aixin' : 'icon-icon_collect'"
|
|
|
- :size="32"
|
|
|
+ :size="36"
|
|
|
:color="isCollection ? $colors.warn : '#BCC1CC'"
|
|
|
class-prefix="iconfont"
|
|
|
/>
|
|
|
<van-icon
|
|
|
custom-class="my-icon"
|
|
|
name="icon-icon_share"
|
|
|
- :size="32"
|
|
|
+ :size="36"
|
|
|
color="#BCC1CC"
|
|
|
class-prefix="iconfont"
|
|
|
/>
|
|
|
@@ -47,21 +47,36 @@
|
|
|
<van-cell :title="$t('chan-pin-pin-pai')" :border="false" :value="productInfo.brand" />
|
|
|
<van-cell :title="$t('ying-wen-pin-ming')" :border="false" :value="productInfo.enName" />
|
|
|
<van-cell :title="$t('chan-pin-lei-bie')" :border="false" :value="productCategoryName" />
|
|
|
- <van-cell title="平均交货周期" :border="false" :value="productInfo.averageLeadTime" />
|
|
|
- <van-cell title="产地" :border="false" :value="productInfo.origin" />
|
|
|
+ <van-cell
|
|
|
+ title="交货周期"
|
|
|
+ :border="false"
|
|
|
+ v-if="productInfo.averageLeadTime"
|
|
|
+ :value="productInfo.averageLeadTime"
|
|
|
+ />
|
|
|
+ <van-cell title="产品产地" v-if="productInfo.origin" :border="false" :value="productInfo.origin" />
|
|
|
<van-cell title="应用领域" :border="false" :value="applicationField" />
|
|
|
<van-cell title="产品标签" :border="false">
|
|
|
<div>
|
|
|
- <van-tag plain v-for="(item, index) in tags" :key="index">{{ item }}</van-tag>
|
|
|
+ <van-tag color="#000" plain v-for="(item, index) in tags" :key="index">{{ item }}</van-tag>
|
|
|
</div>
|
|
|
</van-cell>
|
|
|
</van-cell-group>
|
|
|
</div>
|
|
|
|
|
|
<div class="vendor" @click="navigateTo('/pagesVendor/Detail?id=' + vendorInfo.id)">
|
|
|
- <van-icon :name="vendorInfo.logo" :size="60" />
|
|
|
+ <van-image class="logo" :radius="4" :src="vendorInfo.logo" :width="60" :height="60" />
|
|
|
<div class="vendor-info">
|
|
|
- <h3>{{ getName(vendorInfo, ['chCompanyName', 'enCompanyName']) }}</h3>
|
|
|
+ <div class="vendor-title">
|
|
|
+ <h3>
|
|
|
+ {{ getName(vendorInfo, ['chCompanyName', 'enCompanyName']) }}
|
|
|
+ </h3>
|
|
|
+ <van-image
|
|
|
+ :width="17"
|
|
|
+ :height="19"
|
|
|
+ src="http://imttech.oss-cn-hangzhou.aliyuncs.com/micro/icon_qiyerenzheng.png"
|
|
|
+ fit="contain"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
|
|
|
<div class="vendor-btn">
|
|
|
<van-button :color="$colors.warn" size="small">进入展商</van-button>
|
|
|
@@ -80,17 +95,16 @@
|
|
|
>
|
|
|
<van-tab title="图文详情">
|
|
|
<div class="detail-content first">
|
|
|
- <van-button
|
|
|
- class="imgList-btn"
|
|
|
- size="small"
|
|
|
- :color="$colors.warn"
|
|
|
- round
|
|
|
- icon="photo"
|
|
|
- plain
|
|
|
- v-if="showBtn && detailImgList.length > 0"
|
|
|
- @click="showImgs"
|
|
|
- ></van-button>
|
|
|
+ <div class="imgList-btn" v-if="showBtn && detailImgList.length > 0" @click="showImgs">
|
|
|
+ <van-image
|
|
|
+ :width="20"
|
|
|
+ :height="16"
|
|
|
+ src="http://imttech.oss-cn-hangzhou.aliyuncs.com/micro/icon_chakantupian.png"
|
|
|
+ fit="contain"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
<div class="tips" v-html="introduction"></div>
|
|
|
+ <van-divider />
|
|
|
<!-- <rich-text v-if="detailImg" :nodes="detailImg"></rich-text> -->
|
|
|
<div class="detailhtml">
|
|
|
<div v-html="detailImg" v-if="detailImg"></div>
|
|
|
@@ -113,15 +127,18 @@
|
|
|
<div class="fixed-bottom">
|
|
|
<div class="fixed-bottom-content">
|
|
|
<div class="btn-icon" @click="navigateTo('/pagesProduct/Contrast?productId=' + productId)">
|
|
|
- <van-icon name="icon-xiangqingye_iocn_vs" :size="24" class-prefix="iconfont" />
|
|
|
+ <van-image
|
|
|
+ src="https://imttech.oss-cn-hangzhou.aliyuncs.com/micro/xiangqingye_iocn_vs.png"
|
|
|
+ :width="24"
|
|
|
+ :height="24"
|
|
|
+ />
|
|
|
<div class="text">对比</div>
|
|
|
</div>
|
|
|
<div class="btn-icon" @click="navigateTo('/pagesProduct/IntentionList')">
|
|
|
<van-icon
|
|
|
- name="icon-xiangqingye_iocn_yixiangdan"
|
|
|
+ name="https://imttech.oss-cn-hangzhou.aliyuncs.com/micro/xiangqingye_iocn_yixiangdan.png"
|
|
|
:info="intentionList.length > 0 ? intentionList.length : ''"
|
|
|
:size="24"
|
|
|
- class-prefix="iconfont"
|
|
|
/>
|
|
|
<div class="text">意向单</div>
|
|
|
</div>
|
|
|
@@ -368,11 +385,21 @@ export default {
|
|
|
return item.split('"')[0];
|
|
|
})
|
|
|
.filter(item => {
|
|
|
- return item;
|
|
|
+ return item && this.checkImg(item);
|
|
|
});
|
|
|
} else {
|
|
|
this.detailImgList = [];
|
|
|
}
|
|
|
+ console.log(this.detailImgList);
|
|
|
+ },
|
|
|
+ checkImg(file) {
|
|
|
+ const imglist = ['png', 'PNG', 'jpg', 'JPG', 'jpeg', 'JPEG', 'bmp', 'BMP', 'gif', 'GIF'];
|
|
|
+ const _info = file.split('.');
|
|
|
+ if (imglist.indexOf(_info[_info.length - 1]) !== -1) {
|
|
|
+ return true;
|
|
|
+ } else {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
},
|
|
|
showImgs() {
|
|
|
if (this.detailImgList.length > 0) {
|
|
|
@@ -386,12 +413,14 @@ export default {
|
|
|
};
|
|
|
</script>
|
|
|
<style lang="less">
|
|
|
+.van-cell {
|
|
|
+}
|
|
|
.main {
|
|
|
.tips {
|
|
|
font-size: 14px;
|
|
|
- color: #292c33;
|
|
|
+ color: #3d424d;
|
|
|
line-height: 24px;
|
|
|
- padding: 20px 16px;
|
|
|
+ // padding: 20px 16px;
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
}
|
|
|
@@ -403,7 +432,7 @@ export default {
|
|
|
position: relative;
|
|
|
|
|
|
.title {
|
|
|
- font-size: 18px;
|
|
|
+ font-size: 20px;
|
|
|
font-weight: bold;
|
|
|
color: #292c33;
|
|
|
line-height: 25px;
|
|
|
@@ -419,11 +448,11 @@ export default {
|
|
|
|
|
|
.btn {
|
|
|
position: absolute;
|
|
|
- right: 0;
|
|
|
- bottom: 12px;
|
|
|
+ right: 0px;
|
|
|
+ bottom: 0px;
|
|
|
|
|
|
._van-icon {
|
|
|
- margin-left: 5px;
|
|
|
+ margin-left: 10px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -431,15 +460,26 @@ export default {
|
|
|
--divider-margin: 10px 0px;
|
|
|
--cell-vertical-padding: 8px;
|
|
|
--cell-horizontal-padding: 0px;
|
|
|
- --cell-text-color: #292c33;
|
|
|
--cell-font-size: 13px;
|
|
|
- --cell-value-color: #444444;
|
|
|
+ --cell-text-color: #292c33;
|
|
|
+ --cell-value-color: #000;
|
|
|
.van-cell__title {
|
|
|
font-weight: bold;
|
|
|
+ min-width: 52px;
|
|
|
+ margin-right: 46px;
|
|
|
+ flex-grow: 0;
|
|
|
}
|
|
|
|
|
|
.van-cell__value {
|
|
|
flex-grow: 2;
|
|
|
+ text-align: left;
|
|
|
+ .van-tag {
|
|
|
+ font-size: 13px;
|
|
|
+ line-height: 22px;
|
|
|
+ &::before {
|
|
|
+ border: 1px solid #dcdfe6;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
.ad {
|
|
|
@@ -449,6 +489,7 @@ export default {
|
|
|
align-items: center;
|
|
|
padding: 0 10px;
|
|
|
justify-content: space-between;
|
|
|
+ height: 30px;
|
|
|
span {
|
|
|
font-size: 12px;
|
|
|
color: @warn;
|
|
|
@@ -462,7 +503,7 @@ export default {
|
|
|
}
|
|
|
|
|
|
.van-tag {
|
|
|
- margin-left: 5px;
|
|
|
+ margin-right: 5px;
|
|
|
}
|
|
|
|
|
|
.vendor {
|
|
|
@@ -476,12 +517,30 @@ export default {
|
|
|
flex-direction: column;
|
|
|
justify-content: space-between;
|
|
|
margin-left: 8px;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ .vendor-title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ overflow: hidden;
|
|
|
+ .van-image {
|
|
|
+ margin-left: 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
.vendor-btn {
|
|
|
--button-small-height: 26px;
|
|
|
--button-small-min-width: 70px;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ ._van-image.logo {
|
|
|
+ flex-shrink: 0;
|
|
|
+
|
|
|
+ .van-image {
|
|
|
+ border: 1px solid #dcdfe6;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.van-tabs {
|
|
|
@@ -505,15 +564,15 @@ export default {
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
&.first {
|
|
|
- background-color: @bg;
|
|
|
- padding: 0 0;
|
|
|
+ // background-color: @bg;
|
|
|
+ // padding: 0 0;
|
|
|
.tips {
|
|
|
background-color: @bgw;
|
|
|
- margin-bottom: 16px;
|
|
|
+ // padding: 20px 0;
|
|
|
}
|
|
|
.detailhtml {
|
|
|
background-color: @bgw;
|
|
|
- padding: 20px 16px;
|
|
|
+ // padding: 20px 16px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -540,9 +599,15 @@ export default {
|
|
|
|
|
|
.fixed-bottom {
|
|
|
height: 60px;
|
|
|
+ padding-bottom: calc(8px + constant(safe-area-inset-bottom));
|
|
|
+ padding-bottom: calc(8px + env(safe-area-inset-bottom));
|
|
|
+
|
|
|
.fixed-bottom-content {
|
|
|
background-color: @bgw;
|
|
|
padding: 8px 16px;
|
|
|
+ padding-bottom: calc(8px + constant(safe-area-inset-bottom));
|
|
|
+ padding-bottom: calc(8px + env(safe-area-inset-bottom));
|
|
|
+
|
|
|
position: fixed;
|
|
|
left: 0;
|
|
|
right: 0;
|
|
|
@@ -550,7 +615,7 @@ export default {
|
|
|
height: 60px;
|
|
|
display: flex;
|
|
|
z-index: 200;
|
|
|
- box-sizing: border-box;
|
|
|
+ // box-sizing: border-box;
|
|
|
box-shadow: 0px -1px 2px 0px rgba(0, 0, 0, 0.04);
|
|
|
align-items: center;
|
|
|
.btn-icon {
|
|
|
@@ -590,12 +655,14 @@ export default {
|
|
|
position: fixed;
|
|
|
right: 10px;
|
|
|
bottom: 15vh;
|
|
|
- .van-button {
|
|
|
- background-color: @bgw;
|
|
|
- z-index: 200;
|
|
|
- --button-small-min-width: 30px;
|
|
|
- --button-border-width: 0px;
|
|
|
- box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.1);
|
|
|
- }
|
|
|
+ background-color: @bgw;
|
|
|
+ z-index: 200;
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ border-radius: 100%;
|
|
|
+ box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
}
|
|
|
</style>
|