Skip to content

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

首页

parent ace830dd
Hide whitespace changes
Inline Side-by-side
Showing with 436 additions and 37 deletions
src/views/homepage/components/homeFooter.vue 0 → 100644
View file @ 793b35c6
<template>
<div class="footer">
<div class="footer-content">
<el-row :gutter="30">
<el-col v-for="(item,index) in dataList" :key="index" :span="4">
<div class="title">{{ item.name }}</div>
<div v-for="(t,i) in item.list" :key="'lb_'+i" class="label" :title="t.name">
<a :href="t.url||'http://www.minestar.cn'" target="_blank">
{{ t.name }}
</a>
</div>
</el-col>
</el-row>
</div>
<div v-if="$store.state.settings.showFooter" class="footer-bottom">
<span v-html="$store.state.settings.footerTxt" />
<span v-if="$store.state.settings.caseNumber"> ⋅ </span>
<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">{{ $store.state.settings.caseNumber }}</a>
</div>
</div>
</template>
<script>
export default {
data() {
return {
dataList: [
{
name: '用户指南',
list: [
{ name: '注册登录流程', url: '' },
{ name: '采购商指南', url: '' }
]
},
{
name: '关于我们',
list: [
{ name: '平台介绍 ', url: '' }
]
},
{
name: '联系我们',
list: [
{ name: '提供建议', url: '' },
{ name: '我要合作', url: '' },
{ name: '联系方式', url: '' }
]
},
{
name: '常见问题',
list: [
{ name: '采购商常见问题', url: '' },
{ name: '供应商常见问题', url: '' }
]
},
{
name: '友情链接',
list: [
{ name: '佛山英沃传感科技有限公司佛山英沃传感科技有限公司', url: '' },
{ name: '佛山英沃传感科技有限公司', url: '' },
{ name: '佛山英沃传感科技有限公司', url: '' }
]
}
]
}
},
mounted() {
this.$nextTick(() => {
})
},
methods: {
click() {}
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.footer-content {
width: 100%;
height: 267px;
bottom: 33px;
padding-top: 20px;
padding-left: 210px;
background: none repeat scroll 0 0 #1C1E25;
font-family: Source Han Sans CN;
font-weight: 400;
color: #E8E6E6;
user-select: none;
z-index: 99;
.title {
margin: 30px 0;
font-size: 26px;
}
.label {
width: 300px;
margin: 15px 0;
cursor:pointer;
font-size: 18px;
overflow:hidden;
white-space: nowrap;
text-overflow: ellipsis;
-o-text-overflow:ellipsis;
}
.label:hover {
font-weight: 600;
}
}
.footer-bottom {
width: 100%;
height: 33px;
bottom: 0;
padding: 10px 6px 0 6px;
text-align: center;
background: none repeat scroll 0 0 black;
overflow: hidden;
font-size: 0.7rem !important;
letter-spacing: 0.8px;
font-family: Arial, sans-serif !important;
color: #E8E6E6;
z-index: 99;
}
</style>
src/views/homepage/index.vue
View file @ 793b35c6
......@@ -18,13 +18,12 @@
<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>
</div>
<div class="content-box" style="padding-top: 20px;">
<div class="content-box">
<div class="showcase">
<div v-for="(item,index) in showcaseProducts" :key="index" class="box-card">
<!--产品展柜-->
<div v-for="(item,index) in showcaseProducts" :key="'p_'+index" class="box-card" style="padding-top: 20px;">
<img v-if="item.isGood" src="@/assets/home_images/recommend.png" class="stamp" title="推荐" style="top: 10px;right: 8px">
<div v-if="item.isHot" class="stamp" title="热门">
<svg-icon icon-class="z_hot" style="color: red;width: 50px;height: 50px;" />
</div>
<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]"
......@@ -34,7 +33,7 @@
</el-image>
<el-row>
<el-col :span="21">
<div class="title" :title="item.title">{{ item.title }}</div>
<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')">
......@@ -62,39 +61,110 @@
</div>
</div>
<div style="padding: 15px 50px;text-align: right"><span class="more touch" title="点击查看更多..." @click="moreTo('product')">更多产品>></span></div>
<!--供应商展柜-->
<div class="line-title"><div class="title-point" /><span class="title-text">供应商</span><div class="title-line" /></div>
<div v-for="(item,index) in showcaseSuppliers" :key="'s_'+index" class="box-card" style="padding-top: 20px;">
<img v-if="item.isGood" src="@/assets/home_images/diamond.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, 'supplier')">{{ 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, 'supplier')">
<img v-else class="touch" src="@/assets/home_images/to_like.png" @click="storeShowcase(item, 'supplier')">
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<div class="subTitle" :title="item.subTitle">TEL：{{ 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, 'supplier')">询 价</div>
</div>
</div>
<div style="padding: 15px 50px;text-align: right"><span class="more touch" title="点击查看更多..." @click="moreTo('supplier')">更多供应商>></span></div>
<!--热门排行榜-->
<div class="line-title"><div class="title-point" /><span class="title-text">热门排行榜</span></div>
<el-row :gutter="20" style="padding-top: 20px">
<el-col :span="8"><div class="top_area" /></el-col>
<el-col :span="8"><div class="box-toplist">
<div class="title">供应商TOP</div>
<ul class="contact-list">
<li v-for="(item, index) in topSuppliers" :key="'ts_'+index" class="contact-item">
<img src="@/assets/home_images/to_like_b.png">
<span class="touch" @click="goToDetails(item, 'supplier')">{{ item.name }}</span>
</li>
</ul>
</div></el-col>
<el-col :span="8"><div class="box-toplist">
<div class="title">产品TOP</div>
<ul class="contact-list">
<li v-for="(item, index) in topProducts" :key="'tp_'+index" class="contact-item">
<img src="@/assets/home_images/to_like_a.png">
<span class="touch" @click="goToDetails(item, 'product')">{{ item.name }}</span>
</li>
</ul>
</div></el-col>
</el-row>
<div class="line-btn" style="padding-top: 64px;">
<div class="btn-o">我要供应</div>
<div class="btn-o">我要采购</div>
</div>
<div class="line-btn" style="padding: 30px 0;">
<div class="btn-l">没有我需要的，我要留言</div>
</div>
<!--合作伙伴 -->
<div class="line-title"><div class="title-point" /><span class="title-text">合作伙伴 </span></div>
<div style="padding: 20px 30px">
<div v-for="(item,index) in partners" :key="'pt_'+index" class="partners-card" :title="item.name">
<a :href="item.url||'http://www.minestar.cn'" target="_blank">
<el-image :src="item.imgSrc?imgSrcStart+'/img'+item.imgSrc:defaultImgLogo" fit="contain" style="width: 100%;height: 100%" />
</a>
</div>
</div>
</div>
</div>
<hr>
<div class="xxx">首页内容</div>
<hr>
<div class="xxx">首页内容</div>
<hr>
<div class="xxx">首页内容</div>
<hr>
<div class="xxx">首页内容</div>
<hr>
<div v-if="$store.state.settings.showFooter" class="home-footer">
<span v-html="$store.state.settings.footerTxt" />
<span v-if="$store.state.settings.caseNumber"> ⋅ </span>
<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">{{ $store.state.settings.caseNumber }}</a>
</div>
<home-footer ref="homeFooter" />
<float-btn ref="floatBtn" />
</div>
</template>
<script>
import default_product from '@/assets/home_images/default_product.png'
import default_p_logo from '@/assets/home_images/p_logo.png'
import floatBtn from './components/floatBtn'
import titleMenus from './components/titleMenus'
import userLogin from './components/userLogin'
import languageSetting from './components/languageSetting'
import searchPanel from './components/searchPanel'
import homeFooter from './components/homeFooter'
export default {
components: { floatBtn, titleMenus, userLogin, languageSetting, searchPanel },
components: { floatBtn, titleMenus, userLogin, languageSetting, searchPanel, homeFooter },
dicts: ['product_type', 'area_province'],
data() {
return {
defaultImgProduct: default_product,
defaultImgLogo: default_p_logo,
imgSrcStart: process.env.VUE_APP_BASE_API,
query: {},
currentProductTypeObj: null,
......@@ -188,6 +258,129 @@ export default {
imgSrcList: []
}
],
showcaseSuppliers: [
{
isGood: true,
isHot: false,
isStore: false,
title: '中山市三角镇凌创传感器厂',
subTitle: '021-12568***',
area: '天津',
date: '2023-06-12',
imgSrc: '',
imgSrcList: []
},
{
isGood: true,
isHot: true,
isStore: true,
title: '中山市三角镇凌创传感器厂',
subTitle: '021-12568***',
area: '天津',
date: '2023-06-12',
imgSrc: '',
imgSrcList: []
},
{
isGood: false,
isHot: true,
isStore: false,
title: '中山市三角镇凌创传感器厂',
subTitle: '021-12568***',
area: '天津',
date: '2023-06-12',
imgSrc: '',
imgSrcList: []
},
{
isGood: false,
isHot: false,
isStore: true,
title: '中山市三角镇凌创传感器厂',
subTitle: '021-12568***',
area: '天津',
date: '2023-06-12',
imgSrc: '',
imgSrcList: []
},
{
isGood: false,
isHot: true,
isStore: false,
title: '中山市三角镇凌创传感器厂',
subTitle: '021-12568***',
area: '天津',
date: '2023-06-12',
imgSrc: '',
imgSrcList: []
},
{
isGood: false,
isHot: false,
isStore: false,
title: '中山市三角镇凌创传感器厂',
subTitle: '021-12568***',
area: '天津',
date: '2023-06-12',
imgSrc: '',
imgSrcList: []
},
{
isGood: true,
isHot: false,
isStore: false,
title: '中山市三角镇凌创传感器厂',
subTitle: '021-12568***',
area: '天津',
date: '2023-06-12',
imgSrc: '',
imgSrcList: []
},
{
isGood: false,
isHot: false,
isStore: false,
title: '中山市三角镇凌创传感器厂',
subTitle: '021-12568***',
area: '天津',
date: '2023-06-12',
imgSrc: '',
imgSrcList: []
}
],
topSuppliers: [
{ name: '中山市三角镇凌创传感器厂', id: 123 },
{ name: '中山市三角镇凌创传感器厂', id: 123 },
{ name: '中山市三角镇凌创传感器厂', id: 123 },
{ name: '中山市三角镇凌创传感器厂', id: 123 },
{ name: '中山市三角镇凌创传感器厂', id: 123 },
{ name: '中山市三角镇凌创传感器厂', id: 123 },
{ name: '中山市三角镇凌创传感器厂', id: 123 },
{ name: '中山市三角镇凌创传感器厂', id: 123 },
{ name: '中山市三角镇凌创传感器厂', id: 123 },
{ name: '中山市三角镇凌创传感器厂', id: 123 }
],
topProducts: [
{ name: 'wiwo1002热能工程压力变送器', id: 123 },
{ name: 'wiwo1002热能工程压力变送器', id: 123 },
{ name: 'wiwo1002热能工程压力变送器', id: 123 },
{ name: 'wiwo1002热能工程压力变送器', id: 123 },
{ name: 'wiwo1002热能工程压力变送器', id: 123 },
{ name: 'wiwo1002热能工程压力变送器', id: 123 },
{ name: 'wiwo1002热能工程压力变送器', id: 123 },
{ name: 'wiwo1002热能工程压力变送器', id: 123 },
{ name: 'wiwo1002热能工程压力变送器', id: 123 },
{ name: 'wiwo1002热能工程压力变送器', id: 123 }
],
partners: [
{ name: 'xxxxxxxx', imgSrc: '', url: '' },
{ name: 'xxxxxxxx', imgSrc: '', url: '' },
{ name: 'xxxxxxxx', imgSrc: '', url: '' },
{ name: 'xxxxxxxx', imgSrc: '', url: '' },
{ name: 'xxxxxxxx', imgSrc: '', url: '' },
{ name: 'xxxxxxxx', imgSrc: '', url: '' },
{ name: 'xxxxxxxx', imgSrc: '', url: '' }
],
throttle: null, // 节流器
throttleTime: 300
}
......@@ -221,6 +414,10 @@ export default {
item.isStore = !item.isStore
console.log(item, type)
},
// 跳转到详情
goToDetails(item, type) {
console.log(item, type)
},
// 点击更多
moreTo(type) {
console.log(type)
......@@ -248,6 +445,19 @@ export default {
.showcase {
width: 80%;
}
.partners-card {
width: 240px;
height: 135px;
display: inline-block;
position: relative;
margin: 15px 25px;
background: #fafafa;
border: 1px solid transparent;
box-shadow: 1px 1px 0 0 rgba(0,0,0,0.12);
}
.partners-card:hover {
border: 1px solid rgba(0,0,0,0.12);
}
.box-card {
display: inline-block;
position: relative;
......@@ -268,6 +478,9 @@ export default {
text-overflow: ellipsis;
-o-text-overflow:ellipsis;
}
.title:hover {
font-weight: 600;
}
.subTitle {
width: 260px;
padding: 2px 20px;
......@@ -291,8 +504,6 @@ export default {
.stamp {
border-style: none;
position: absolute;
top: 0;
right: 0;
z-index: 99;
}
}
......@@ -303,6 +514,71 @@ export default {
.more:hover {
font-weight: 600;
}
.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;
}
.title-line{
width: 100%;
position: absolute;
bottom: -7px;
border-bottom: 2px solid #1961C5;
opacity: 0.35
}
}
.top_area {
width: 100%;
height: 552px;
background: url("../../assets/home_images/top_area.png") no-repeat;
background-size:100% 100%;
}
.box-toplist{
background: #FFFFFF;
border: 1px solid rgba(0,0,0,0.12);
box-shadow: 1px 2px 8px 0px rgba(0,0,0,0.12);
border-radius: 10px;
font-size: 22px;
letter-spacing: 2px;
.title {
width: 100%;
padding: 10px 15px;
background: #0457C7;
color: #FFFFFF;
font-weight: 600;
}
.contact-list {
padding: 0 0 20px;
margin: 0;
height: 500px;
overflow: hidden;
.contact-item {
display: inherit;
padding: 10px 20px;
overflow:hidden;
white-space: nowrap;
text-overflow: ellipsis;
-o-text-overflow:ellipsis;
span {
padding: 0 15px;
}
span:hover {
font-weight: 600;
}
}
}
}
}
.xxx {
height: 300px;
......@@ -349,6 +625,23 @@ export default {
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;
......@@ -371,18 +664,4 @@ export default {
background: #1961C5;
}
}
.home-footer {
width: 100%;
height: 33px;
bottom: 0;
padding: 10px 6px 0 6px;
text-align: center;
background: none repeat scroll 0 0 black;
overflow: hidden;
font-size: 0.7rem !important;
letter-spacing: 0.8px;
font-family: Arial, sans-serif !important;
color: #E8E6E6;
z-index: 99;
}
</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