Skip to content

S
sensorConsult
Commit daa51738 authored by zhanglw's avatar zhanglw
Browse files
Options

优质产品

parent e1563054
Hide whitespace changes
Inline Side-by-side
Showing with 435 additions and 11 deletions
src/views/homepage/index.vue
View file @ daa51738
......@@ -12,8 +12,8 @@
<search-panel ref="searchPanel" style="margin-top: 64px;" />
</div>
<div class="line-btn" style="padding-top: 42px;">
<div class="btn-o">我要供应</div>
<div class="btn-o">我要采购</div>
<div class="btn-o" style="padding: 10px">我要供应</div>
<div class="btn-o" style="padding: 10px">我要采购</div>
</div>
<div class="line-btn" style="padding-top: 30px">
<div v-for="(item,index) in dict.product_type" :key="index" class="btn-b" :class="currentProductTypeObj===item?'active':''" @mouseenter="changeProductPush(item)">{{ item.label }}</div>
......@@ -101,8 +101,8 @@
<div class="date">{{ item.date }}</div>
</el-col>
</el-row>
<div class="line-btn" style="margin-top: 4px">
<div class="btn-o" style="width: 150px;border-radius: 10px;box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2);font-size:20px;" @click="inquiry(item, 'supplier')">询 价</div>
<div class="line-btn" style="margin-top: 4px;display: none">
<div class="btn-o" style="width: 150px;border-radius: 10px;box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2);font-size:20px;" @click="inquiry(item, 'supplier')">咨 询</div>
</div>
</div>
<div style="padding: 15px 50px;text-align: right"><span class="more touch" title="点击查看更多..." @click="moreTo('supplier')">更多供应商>></span></div>
......@@ -131,8 +131,8 @@
</div></el-col>
</el-row>
<div class="line-btn" style="padding-top: 64px;">
<div class="btn-o">我要供应</div>
<div class="btn-o">我要采购</div>
<div class="btn-o" style="padding: 10px">我要供应</div>
<div class="btn-o" style="padding: 10px">我要采购</div>
</div>
<div class="line-btn" style="padding: 30px 0;">
<div class="btn-l">没有我需要的，我要留言</div>
......@@ -513,10 +513,12 @@ export default {
}
.more {
font-size: 18px;
font-weight: 600;
color: #0457C7;
opacity: 0.7;
}
.more:hover {
font-weight: 600;
opacity: 1;
}
.line-title {
padding: 6px 0;
......@@ -533,6 +535,7 @@ export default {
}
.title-text {
padding-left: 14px;
font-weight: 600;
}
.title-line{
width: 100%;
......@@ -612,7 +615,7 @@ export default {
.btn-o {
margin: 0 25px;
width: 360px;
padding: 10px;
padding: 6px 10px;
background: #F7601A;
box-shadow: 0 3px 6px 0 rgba(0,0,0,0.2);
text-align: center;
......
src/views/homepage/product/index.vue
View file @ daa51738
......@@ -12,6 +12,7 @@
<div class="content-box">
<div style="width: 88%;padding-left: 9%;">
<breadcrumb />
<!--查询面板-->
<div class="search-box">
<div class="search-tools">
<el-row :gutter="18">
......@@ -78,13 +79,107 @@
</el-col>
</el-row>
</div>
<!--硬件产品展柜-->
<div style="padding-top: 6px">
<div v-for="(item,index) in hardwareList" :key="'p_'+index" class="box-card">
<img v-if="item.isGood" src="@/assets/home_images/recommend.png" class="stamp" title="推荐" style="top: 10px;right: 8px">
<img v-if="item.isHot" src="@/assets/home_images/hot.png" class="stamp" title="热门" style="top: 0;left: 0">
<el-image
:src="item.imgSrc?imgSrcStart+'/img'+item.imgSrc:defaultImgProduct"
:preview-src-list="item.imgSrcList.length?item.imgSrcList:[defaultImgProduct]"
style="width:284px;height: 284px;margin: 0 32px 4px"
>
<div slot="placeholder" class="image-slot">加载中<span class="dot">...</span></div>
</el-image>
<el-row>
<el-col :span="21">
<div class="title touch" :title="item.title" @click="goToDetails(item, 'product')">{{ item.title }}</div>
</el-col>
<el-col :span="3">
<img v-if="item.isStore" class="touch" src="@/assets/home_images/to_like_h.png" @click="storeShowcase(item, 'product')">
<img v-else class="touch" src="@/assets/home_images/to_like.png" @click="storeShowcase(item, 'product')">
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<div class="subTitle" :title="item.subTitle">{{ item.subTitle }}</div>
</el-col>
</el-row>
<el-row style="margin-top: 6px">
<el-col :span="3" style="padding-left: 20px">
<img src="@/assets/home_images/locate.png">
</el-col>
<el-col :span="13">
<div class="area">{{ item.area }}</div>
</el-col>
<el-col :span="8">
<div class="date">{{ item.date }}</div>
</el-col>
</el-row>
<div class="line-btn" style="margin-top: 4px">
<div class="btn-o" style="width: 150px;border-radius: 10px;box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2);font-size:20px;" @click="inquiry(item, 'product')">询 价</div>
</div>
</div>
<div style="padding: 15px 50px;text-align: center"><span class="more touch" title="点击查看更多..." @click="moreTo('product')">更多展开<i class="el-icon-arrow-down" /></span></div>
</div>
<!--解决方案展柜-->
<div class="line-title"><div class="title-point" /><span class="title-text">方案概述</span></div>
<div v-for="(item,index) in projectList" :key="'pj_'+index" class="box-block">
<el-row :gutter="20">
<el-col :span="12">
<div style="display: flex">
<el-image :src="item.imgSrc?imgSrcStart+'/img'+item.imgSrc:defaultImgProject" style="width:100%;height: 300px;margin: 1px;border-radius: 10px;" />
</div>
</el-col>
<el-col :span="12">
<div class="content ellipsis"><span style="font-size: 22px;font-weight: bolder">方案概述</span><br>{{ item.content }}</div>
<div class="line-btn" style="margin-top: 4px;justify-content: flex-end;">
<div class="btn-o" style="width: 140px;border-radius: 10px;box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2);font-size:20px;" @click="inquiry(item, 'project')">咨 询</div>
</div>
</el-col>
</el-row>
</div>
<div style="padding: 15px 50px;text-align: right"><span class="more touch" title="点击查看更多..." @click="moreTo('project')">更多详情>></span></div>
<!--系统软件-->
<div class="line-title"><div class="title-point" /><span class="title-text">系统软件</span></div>
<div style="padding-top: 6px">
<div v-for="(item,index) in systemList" :key="'p_'+index" class="box-card" style="padding: 0 0 10px 0">
<el-image
:src="item.imgSrc?imgSrcStart+'/img'+item.imgSrc:defaultImgSystem"
style="width:358px;height: 240px;left: -4px;top: -3px"
/>
<div class="float-title touch">{{ item.title }}</div>
<div class="line-btn" style="margin-top: 4px">
<div class="btn-o" style="width: 150px;border-radius: 10px;box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2);font-size:20px;" @click="inquiry(item, 'system')">免费获取方案</div>
</div>
</div>
<div style="padding: 15px 50px;text-align: right"><span class="more touch" title="点击查看更多..." @click="moreTo('system')">更多详情>></span></div>
</div>
<!--专业培训-->
<div class="line-title"><div class="title-point" /><span class="title-text">专业培训</span></div>
<div style="padding-top: 6px">
<div v-for="(item,index) in courseList" :key="'p_'+index" class="box-card" style="padding: 0 0 10px 0">
<el-image
:src="item.imgSrc?imgSrcStart+'/img'+item.imgSrc:defaultImgSystem"
style="width:358px;height: 240px;left: -4px;top: -3px"
/>
<div class="line-text touch">{{ item.title }}</div>
<div style="width: 100%;text-align: center;padding: 2px;color: #333">{{ item.subTitle }}</div>
<div class="line-btn" style="margin-top: 14px">
<div class="btn-o" style="width: 150px;border-radius: 10px;box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2);font-size:20px;" @click="inquiry(item, 'system')">课程定制</div>
</div>
</div>
<div style="margin-bottom: 20px;padding: 15px 50px;text-align: right"><span class="more touch" title="点击查看更多..." @click="moreTo('system')">更多详情>></span></div>
</div>
</div>
</div>
<div style="width:100vw;height: 100vh" />
<home-footer ref="homeFooter" />
</div>
</template>
<script>
import default_product from '@/assets/home_images/default_product.png'
import default_project from '@/assets/home_images/default_project.png'
import default_system from '@/assets/home_images/default_system.png'
import titleMenus from '../components/titleMenusV2'
import userLogin from '../components/userLoginV2'
import languageSetting from '../components/languageSettingV2'
......@@ -96,6 +191,9 @@ export default {
dicts: ['product_type', 'area_province'],
data() {
return {
defaultImgProduct: default_product,
defaultImgProject: default_project,
defaultImgSystem: default_system,
imgSrcStart: process.env.VUE_APP_BASE_API,
query: {
area: undefined,
......@@ -104,7 +202,138 @@ export default {
},
areaOpts: [],
keywords: ['曲线记录仪', '液位控制器', '双金属温度计', '位移传感器'],
currentProductTypeObj: null,
hardwareList: [
{
isGood: true,
isHot: false,
isStore: false,
title: 'wiwo1002热能工程压力变送器',
subTitle: '乐清市柳市艾普乐传感器厂',
area: '北京',
date: '2023-06-12',
imgSrc: '',
imgSrcList: []
}, {
isGood: true,
isHot: true,
isStore: true,
title: 'wiwo1002热能工程压力变送器',
subTitle: '乐清市柳市艾普乐传感器厂',
area: '北京',
date: '2023-06-12',
imgSrc: '',
imgSrcList: []
}, {
isGood: false,
isHot: true,
isStore: false,
title: 'wiwo1002热能工程压力变送器',
subTitle: '乐清市柳市艾普乐传感器厂',
area: '北京',
date: '2023-06-12',
imgSrc: '',
imgSrcList: []
}, {
isGood: false,
isHot: false,
isStore: true,
title: 'wiwo1002热能工程压力变送器',
subTitle: '乐清市柳市艾普乐传感器厂',
area: '北京',
date: '2023-06-12',
imgSrc: '',
imgSrcList: []
}, {
isGood: false,
isHot: true,
isStore: false,
title: 'wiwo1002热能工程压力变送器',
subTitle: '乐清市柳市艾普乐传感器厂',
area: '北京',
date: '2023-06-12',
imgSrc: '',
imgSrcList: []
}, {
isGood: false,
isHot: false,
isStore: false,
title: 'wiwo1002热能工程压力变送器',
subTitle: '乐清市柳市艾普乐传感器厂',
area: '北京',
date: '2023-06-12',
imgSrc: '',
imgSrcList: []
}, {
isGood: true,
isHot: false,
isStore: false,
title: 'wiwo1002热能工程压力变送器',
subTitle: '乐清市柳市艾普乐传感器厂',
area: '北京',
date: '2023-06-12',
imgSrc: '',
imgSrcList: []
}, {
isGood: false,
isHot: false,
isStore: false,
title: 'wiwo1002热能工程压力变送器',
subTitle: '乐清市柳市艾普乐传感器厂',
area: '北京',
date: '2023-06-12',
imgSrc: '',
imgSrcList: []
}
],
projectList: [
{
content: '状态监测已存在多年，如今，随着物耿网(loT) 的发展，它也有了新发展观看此网络研讨会，了解loT如何演化，状态监测状态监测已存在多年，如今，随着物耿网(loT) 的发展，它也有了新发展观看此网络研讨会，了解loT如何演化，状态监测状态监测已存在多年，如今，随着物耿网(loT) 的发展，它也有了新发展观看此网络研讨会，了解loT如何演化，状态监测状态监测已存在多年，如今，随着物耿网(loT) 的发展，它也有了新发展观看此网络研讨会，了解loT如何演化，状态监测状态监测已存在多年，如今，随着物耿网(loT) 的发展，它也有了新发展观看此网络研讨会，了解loT如何演化，状态监测状态监测已存在多年，如今，随着物耿网(loT) 的发展，它也有了新发展观看此网络研讨会，了解loT如何演化，状态监测状态监测已存在多年，如今，随着物耿网(loT) 的发展，它也有了新发展观看此网络研讨会，了解loT如何演化，状态监测状态监测已存在多年，如今，随着物耿网(loT) 的发展，它也有了新发展观看此网络研讨会，了解loT如何演化，状态监测',
date: '2023-06-12',
imgSrc: ''
}, {
content: '状态监测已存在多年，如今，随着物耿网(loT) 的发展，它也有了新发展观看此网络研讨会，了解loT如何演化，状态监测',
date: '2023-06-12',
imgSrc: ''
}
],
systemList: [
{
title: '尾矿库在线监测系统',
date: '2023-06-12',
imgSrc: ''
}, {
title: '尾矿库在线监测系统',
date: '2023-06-12',
imgSrc: ''
}, {
title: '尾矿库在线监测系统',
date: '2023-06-12',
imgSrc: ''
}, {
title: '尾矿库在线监测系统',
date: '2023-06-12',
imgSrc: ''
}
],
courseList: [
{
title: '自然灾害应急避险',
subTitle: '由xxxxxxx单位提供培训',
imgSrc: ''
}, {
title: '自然灾害应急避险',
subTitle: '由xxxxxxx单位提供培训',
imgSrc: ''
}, {
title: '自然灾害应急避险',
subTitle: '由xxxxxxxx单位提供培训',
imgSrc: ''
}, {
title: '自然灾害应急避险',
subTitle: '由xxxxxxxxx单位提供培训',
imgSrc: ''
}
],
throttle: null, // 节流器
throttleTime: 300
}
......@@ -163,12 +392,20 @@ export default {
.clear {
clear: both
}
.ellipsis {
// 多行溢出省略号
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
-webkit-line-clamp: 7;
text-overflow: ellipsis;
}
.head-box {
width: 100vw;
top: 0;
position: fixed;
background: none repeat scroll 0 0 white;
z-index: 99;
z-index: 999;
box-shadow: 0px 3px 7px 0px rgba(0,0,0,0.2);
.head-box-top {
display: flex;
......@@ -183,6 +420,129 @@ export default {
.content-box {
margin-top: 94px;
user-select: none;
.box-block {
width: 100%;
margin: 12px 0;
border: 1px solid rgba(0,0,0,0.12);
box-shadow: 1px 2px 8px 0 rgba(0,0,0,0.12);
border-radius: 10px;
.content {
height: 240px;
padding: 20px 30px 20px 10px;
font-size: 16px;
font-weight: 600;
line-height: 32px;
}
}
.box-card {
display: inline-block;
position: relative;
margin: 12px;
padding: 10px 0;
width: 350px;
background: #FFFFFF;
border: 1px solid rgba(0,0,0,0.12);
box-shadow: 1px 2px 8px 0 rgba(0,0,0,0.12);
border-radius: 10px;
.line-text {
width: 100%;
text-align: center;
padding: 5px;
font-size: 18px;
font-weight: bolder;
opacity: 0.85;
}
.line-text:hover {
opacity: 1;
}
.float-title {
width: 344px;
position: absolute;
padding: 5px;
top: 200px;
left: 2px;
text-align: center;
font-weight: 600;
color: #fff;
background: rgba(0,0,0,0.6);
opacity: 0.9;
}
.float-title:hover {
opacity: 1;
}
.title {
width: 305px;
padding: 2px 20px;
font-size: 18px;
color: #333333;
overflow:hidden;
white-space: nowrap;
text-overflow: ellipsis;
-o-text-overflow:ellipsis;
}
.title:hover {
font-weight: 600;
}
.subTitle {
width: 260px;
padding: 2px 20px;
font-size: 15px;
color: #1961C5;
overflow:hidden;
white-space: nowrap;
text-overflow: ellipsis;
-o-text-overflow:ellipsis;
}
.area {
padding: 2px 0;
font-size: 17px;
color: #666666;
}
.date {
padding: 2px 10px;
font-size: 17px;
color: #999999;
}
.stamp {
border-style: none;
position: absolute;
z-index: 99;
}
}
.more {
font-size: 18px;
font-weight: 600;
color: #0457C7;
opacity: 0.7;
}
.more:hover {
opacity: 1;
}
.line-title {
padding: 6px 0;
position: relative;
border-bottom: 3px solid #0457C7;
font-size: 24px;
color: #333333;
.title-point {
width: 8px;
height: 21px;
position: absolute;
top: 9px;
background: #0457c7;
}
.title-text {
padding-left: 14px;
font-weight: 600;
}
.title-line{
width: 100%;
position: absolute;
bottom: -7px;
border-bottom: 2px solid #1961C5;
opacity: 0.35
}
}
}
.search-box {
padding-top: 12px;
......@@ -286,4 +646,65 @@ export default {
}
}
}
.line-btn {
display: flex;
justify-content: center;
font-family: Source Han Sans CN;
font-weight: 400;
.btn-o {
margin: 0 25px;
width: 360px;
padding: 6px 10px;
background: #F7601A;
box-shadow: 0 3px 6px 0 rgba(0,0,0,0.2);
text-align: center;
border: 1px solid transparent;
font-size: 22px;
color: #FFFFFF;
cursor:pointer;
user-select: none;
}
.btn-o:hover {
border: 1px solid rgba(30, 144, 255, 0.8);
color: #1482f0;
}
.btn-l {
margin: 0 25px;
width: 360px;
padding: 10px;
background: #1961C5;
box-shadow: 0 3px 6px 0 rgba(0,0,0,0.2);
text-align: center;
border: 1px solid transparent;
font-size: 22px;
color: #FFFFFF;
cursor:pointer;
user-select: none;
}
.btn-l:hover {
border: 1px solid rgba(0,0,0,0.3);
color: #F7601A;
}
.btn-b {
margin: 0 10px;
width: 168px;
padding: 6px;
background: #EFF6FF;
border: 1px solid transparent;
box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2);
text-align: center;
font-size: 20px;
color: #1961C5;
cursor:pointer;
user-select: none;
}
.btn-b:hover {
border: 1px solid rgba(30, 144, 255, 0.9);
}
.active {
color: #FFFFFF;
font-weight: 400;
background: #1961C5;
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment