Skip to content

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

供应商黄页浮窗

parent 059087f1
Hide whitespace changes
Inline Side-by-side
Showing with 882 additions and 11 deletions
src/router/routers.js
View file @ 7ebe70c9
...@@ -60,6 +60,14 @@ export const constantRouterMap = [ ...@@ -60,6 +60,14 @@ export const constantRouterMap = [
}, },
hidden: true hidden: true
}, },
{
path: '/supplier/details/:id',
meta: { title: '供应商黄页', noCache: true },
component: (resolve) => {
return require(['@/views/homepage/supplier/details'], resolve)
},
hidden: true
},
{ {
path: '/project', path: '/project',
meta: { title: '解决方案与服务', noCache: true }, meta: { title: '解决方案与服务', noCache: true },
......
src/views/homepage/components/floatInquiryView.vue 0 → 100644
View file @ 7ebe70c9
<template>
<div ref="dragArea" class="fixed-View" :class="isMousedown?'grabbing':'grab'">
<div class="fixed-View-title">{{ title }}</div>
<div class="fixed-View-location">
<img src="@/assets/home_images/locate.png">
<div>{{ location }}</div>
</div>
<div style="width: 100%;border-bottom: 1px solid rgba(0,0,0,0.12);" />
<div class="fixed-View-subTitle">{{ subTitle }}</div>
<el-input v-model="formData.name" size="medium" placeholder="联系人" class="cell-input" />
<el-input v-model="formData.phone" size="medium" placeholder="联系电话" class="cell-input" />
<el-input v-model="formData.content" size="medium" type="textarea" placeholder="需求简述（300字以内）" maxlength="300" :autosize="{ minRows: 7, maxRows: 7}" show-word-limit resize="none" class="cell-input" />
<div class="fixed-View-btn">
<div class="btn touch" @click="submitForm()">提交</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
isMousedown: false,
title: '佛山英沃传感科技有限公司',
location: '上海',
subTitle: '我要咨询',
formData: {
name: '',
phone: '',
content: '',
id: null
}
}
},
mounted() {
this.$nextTick(() => {
// 获取DOM元素
const dragArea = this.$refs.dragArea
// 缓存 clientX clientY 的对象: 用于判断是点击事件还是移动事件
const clientOffset = {}
dragArea.addEventListener('mousedown', (event) => {
this.isMousedown = true
// const offsetX = dragArea.getBoundingClientRect().left // 获取当前的x轴距离
const offsetY = dragArea.getBoundingClientRect().top // 获取当前的y轴距离
// const innerX = event.clientX - offsetX // 获取鼠标在方块内的x轴距
const innerY = event.clientY - offsetY // 获取鼠标在方块内的y轴距
// 缓存 clientX clientY
clientOffset.clientX = event.clientX
clientOffset.clientY = event.clientY
document.onmousemove = (event) => {
// dragArea.style.left = event.clientX - innerX + 'px'
dragArea.style.top = event.clientY - innerY + 'px'
const dragAreaTop = window.innerHeight - dragArea.getBoundingClientRect().height
// const dragAreaLeft = window.innerWidth - dragArea.getBoundingClientRect().width - 160
// if (dragArea.getBoundingClientRect().left <= 0) {
// dragArea.style.left = '0px'
// }
// if (dragArea.getBoundingClientRect().left >= dragAreaLeft) {
// dragArea.style.left = dragAreaLeft + 'px'
// }
if (dragArea.getBoundingClientRect().top <= 100) {
dragArea.style.top = '100px'
}
if (dragArea.getBoundingClientRect().top >= dragAreaTop) {
dragArea.style.top = dragAreaTop + 'px'
}
}
document.onmouseup = () => {
document.onmousemove = null
document.onmouseup = null
this.isMousedown = false
}
}, false)
// 绑定鼠标松开事件
dragArea.addEventListener('mouseup', (event) => {
const clientX = event.clientX
const clientY = event.clientY
if (clientX === clientOffset.clientX && clientY === clientOffset.clientY) {
console.log('click 事件')
} else {
console.log('drag 事件')
}
})
})
},
methods: {
submitForm() {
console.log('提交')
},
callback() {
this.$router.go(-1)
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.touch {
cursor:pointer;
}
.grab {
cursor: grab;
}
.grabbing {
cursor: grabbing;
}
.fixed-View {
position: fixed;
margin-left: 0;
padding: 20px;
width: 348px;
height: 442px;
right: 6vw;
bottom: 230px;
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;
font-family: Source Han Sans CN;
font-weight: 400;
user-select: none;
z-index: 99;
.cell-input {
margin: 5px 0;
}
.fixed-View-subTitle {
color: #333;
font-size: 18px;
padding-top: 10px;
padding-bottom: 5px;
}
.fixed-View-btn {
padding: 10px;
width: 100%;
text-align: center;
.btn {
margin: auto;
width: 140px;
padding: 6px;
background: #0156E5;
border: 1px solid rgba(0,0,0,0.12);
border-radius: 5px;
color: white;
font-size: 16px;
opacity: 0.8;
}
.btn:hover {
opacity: 1;
}
}
.fixed-View-title {
text-align: center;
color: #0342AB;
font-size: 20px;
}
.fixed-View-location {
height: 38px;
position: relative;
color: #666;
font-size: 16px;
img {
position: absolute;
top: 9px;
left: 236px;
}
div {
position: absolute;
top: 12px;
left: 260px;
}
}
}
</style>
src/views/homepage/components/inquiryView.vue
View file @ 7ebe70c9
...@@ -92,7 +92,7 @@ export default { ...@@ -92,7 +92,7 @@ export default {
}) })
}, },
initView(id, type) { initView(id, type) {
if (type) { if (this.typeDict[type]) {
this.title = this.typeDict[type] this.title = this.typeDict[type]
} else { } else {
this.title = '咨 询' this.title = '咨 询'
......
src/views/homepage/index.vue
View file @ 7ebe70c9
...@@ -78,7 +78,7 @@ ...@@ -78,7 +78,7 @@
</el-image> </el-image>
<el-row> <el-row>
<el-col :span="21"> <el-col :span="21">
<div class="title touch" :title="item.title" @click="goToDetails(item, 'supplier')">{{ item.title }}</div> <div class="title touch" :title="item.title" @click="goToDetails(item, '/supplier/details')">{{ item.title }}</div>
</el-col> </el-col>
<el-col :span="3"> <el-col :span="3">
<img v-if="item.isStore" class="touch" src="@/assets/home_images/to_like_h.png" title="点击取消收藏" @click="storeShowcase(item, 'supplier')"> <img v-if="item.isStore" class="touch" src="@/assets/home_images/to_like_h.png" title="点击取消收藏" @click="storeShowcase(item, 'supplier')">
...@@ -443,7 +443,6 @@ export default { ...@@ -443,7 +443,6 @@ export default {
}, },
// 跳转到详情 // 跳转到详情
goToDetails(item, path) { goToDetails(item, path) {
console.log(item, path)
if (item) { if (item) {
this.$router.push({ path: `${path}/${item.id || 123}` }) this.$router.push({ path: `${path}/${item.id || 123}` })
} else { } else {
......
src/views/homepage/information/details.vue
View file @ 7ebe70c9
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
<div class="showcase"> <div class="showcase">
<el-breadcrumb separator-class="el-icon-arrow-right"> <el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item> <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
<el-breadcrumb-item :to="{ path: '/information' }">行业资讯</el-breadcrumb-item> <el-breadcrumb-item :to="{ path: this.$store.state.app.currentMenu.url }">{{ this.$store.state.app.currentMenu.name||'' }}</el-breadcrumb-item>
<el-breadcrumb-item>资讯详情</el-breadcrumb-item> <el-breadcrumb-item>资讯详情</el-breadcrumb-item>
</el-breadcrumb> </el-breadcrumb>
</div> </div>
......
src/views/homepage/publish/buyInfo.vue
View file @ 7ebe70c9
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
<div class="showcase"> <div class="showcase">
<el-breadcrumb separator-class="el-icon-arrow-right"> <el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item> <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
<el-breadcrumb-item :to="{ path: '/publish' }">信息发布</el-breadcrumb-item> <el-breadcrumb-item :to="{ path: this.$store.state.app.currentMenu.url }">{{ this.$store.state.app.currentMenu.name||'' }}</el-breadcrumb-item>
<el-breadcrumb-item>我要求购{{ title }}产品</el-breadcrumb-item> <el-breadcrumb-item>我要求购{{ title }}产品</el-breadcrumb-item>
</el-breadcrumb> </el-breadcrumb>
</div> </div>
......
src/views/homepage/publish/supplyInfo.vue
View file @ 7ebe70c9
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
<div class="showcase"> <div class="showcase">
<el-breadcrumb separator-class="el-icon-arrow-right"> <el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item> <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
<el-breadcrumb-item :to="{ path: '/publish' }">信息发布</el-breadcrumb-item> <el-breadcrumb-item :to="{ path: this.$store.state.app.currentMenu.url }">{{ this.$store.state.app.currentMenu.name||'' }}</el-breadcrumb-item>
<el-breadcrumb-item>我要供应{{ title }}产品</el-breadcrumb-item> <el-breadcrumb-item>我要供应{{ title }}产品</el-breadcrumb-item>
</el-breadcrumb> </el-breadcrumb>
</div> </div>
......
src/views/homepage/supplier/details.vue 0 → 100644
View file @ 7ebe70c9
<template>
<div class="page-body">
<div class="head-box">
<div class="head-box-top">
<div class="top-call" />
<div class="top-call"><img src="@/assets/home_images/gemho_logo_b.png"></div>
<div class="top-call"><title-menus ref="titleMenus" menu-index="2" style="padding-top: 15px" /></div>
<div class="top-call"><user-login ref="userLogin" /></div>
<div class="top-call"><language-setting ref="languageSetting" /></div>
</div>
</div>
<div class="content-box">
<div style="width: 88%;padding-left: 9%;">
<div class="showcase">
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
<el-breadcrumb-item :to="{ path: this.$store.state.app.currentMenu.url }">{{ this.$store.state.app.currentMenu.name||'' }}</el-breadcrumb-item>
<el-breadcrumb-item>供应商黄页</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="tab-box">
<div class="tab-item touch" :class="tabIndex==='1'?'active':''" @click="tabChange('1')"><i class="el-icon-house el-icon--left" />首页</div>
<div class="tab-item touch" :class="tabIndex==='2'?'active':''" @click="tabChange('2')"><i class="el-icon-shopping-bag-2 el-icon--left" />企业信息</div>
<div class="tab-item touch" :class="tabIndex==='3'?'active':''" @click="tabChange('3')"><i class="el-icon-message el-icon--left" />供应产品</div>
</div>
<div v-show="tabIndex==='1'">
<div class="page-title">产品</div>
<!--产品展柜-->
<div style="padding-top: 8px;width: 90%">
<div v-for="(item,index) in productList" :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" title="点击取消收藏" @click="storeShowcase(item, 'product')">
<img v-else class="touch" src="@/assets/home_images/to_like.png" title="点击收藏" @click="storeShowcase(item, 'product')">
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<div class="price">¥{{ item.minPrice }} - ¥{{ item.maxPrice }}</div>
</el-col>
</el-row>
</div>
<div style="padding: 15px 50px;text-align: right"><span class="more touch" title="点击查看更多..." @click="moreTo('product')">更多产品>></span></div>
</div>
<!--企业介绍-->
<div class="line-title"><div class="title-point" /><span class="title-text">企业介绍</span></div>
<div class="textarea-box">
<p>&#12288;&#12288;{{ supplierObj.enterpriseIntroduction }}</p>
</div>
<div class="line-btn" style="padding-top: 42px;">
<div class="btn-o" style="padding: 15px" @click="inquiry(supplierObj, 'supplier')">马上沟通</div>
</div>
</div>
<div class="pagination">
<el-pagination
:hide-on-single-page="true"
:background="true"
:current-page.sync="page"
:page-size="pageSize"
:total="total"
layout=" prev, pager, next"
@current-change="pageChange"
/>
</div>
</div>
</div>
<home-footer ref="homeFooter" />
<inquiry-view ref="inquiryView" />
<float-inquiry-view ref="floatInquiryView" />
<el-backtop />
</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'
import homeFooter from '../components/homeFooter'
import inquiryView from '../components/inquiryView'
import floatInquiryView from '../components/floatInquiryView'
export default {
components: { titleMenus, userLogin, languageSetting, homeFooter, inquiryView, floatInquiryView },
dicts: [],
data() {
return {
defaultImgProduct: default_product,
defaultImgProject: default_project,
defaultImgSystem: default_system,
imgSrcStart: process.env.VUE_APP_BASE_API,
page: 1,
pageSize: 10,
total: 0,
query: {
keyword: '',
area: undefined,
type: undefined,
sort: false
},
tabIndex: '1',
productList: [
{
isGood: true,
isHot: false,
isStore: false,
title: 'wiwo1002热能工程压力变送器',
subTitle: '乐清市柳市艾普乐传感器厂',
area: '北京',
date: '2023-06-12',
minPrice: '0.35',
maxPrice: '300',
imgSrc: '',
imgSrcList: []
}, {
isGood: true,
isHot: true,
isStore: true,
title: 'wiwo1002热能工程压力变送器',
subTitle: '乐清市柳市艾普乐传感器厂',
area: '北京',
date: '2023-06-12',
minPrice: '0.35',
maxPrice: '300',
imgSrc: '',
imgSrcList: []
}, {
isGood: false,
isHot: true,
isStore: false,
title: 'wiwo1002热能工程压力变送器',
subTitle: '乐清市柳市艾普乐传感器厂',
area: '北京',
date: '2023-06-12',
minPrice: '0.35',
maxPrice: '300',
imgSrc: '',
imgSrcList: []
}, {
isGood: false,
isHot: false,
isStore: true,
title: 'wiwo1002热能工程压力变送器',
subTitle: '乐清市柳市艾普乐传感器厂',
area: '北京',
date: '2023-06-12',
minPrice: '0.35',
maxPrice: '300',
imgSrc: '',
imgSrcList: []
}, {
isGood: false,
isHot: true,
isStore: false,
title: 'wiwo1002热能工程压力变送器',
subTitle: '乐清市柳市艾普乐传感器厂',
area: '北京',
date: '2023-06-12',
minPrice: '0.35',
maxPrice: '300',
imgSrc: '',
imgSrcList: []
}, {
isGood: false,
isHot: false,
isStore: false,
title: 'wiwo1002热能工程压力变送器',
subTitle: '乐清市柳市艾普乐传感器厂',
area: '北京',
date: '2023-06-12',
minPrice: '0.35',
maxPrice: '300',
imgSrc: '',
imgSrcList: []
}, {
isGood: true,
isHot: false,
isStore: false,
title: 'wiwo1002热能工程压力变送器',
subTitle: '乐清市柳市艾普乐传感器厂',
area: '北京',
date: '2023-06-12',
minPrice: '0.35',
maxPrice: '300',
imgSrc: '',
imgSrcList: []
}, {
isGood: false,
isHot: false,
isStore: false,
title: 'wiwo1002热能工程压力变送器',
subTitle: '乐清市柳市艾普乐传感器厂',
area: '北京',
date: '2023-06-12',
minPrice: '0.35',
maxPrice: '300',
imgSrc: '',
imgSrcList: []
}
],
supplierObj: {
annualInspectionDate: '', // 审核日期
businessLicense: '', // 营业执照的照片名称
businessScope: '温度传感器 热电偶传感器 流量计 报做仪 pt100热电阳 压力变送器 气体检测仪 氟化氢检测仪', // 经营范围
businessScopeIntroduction: '', // 业务范围介绍
businessStatus: '', // 经营状态
enterpriseAddress: '', // 企业地址
enterpriseContactPerson: '', // 企业联系人
enterpriseContactPersonPhone: '', // 企业联系人手机号
enterpriseEmail: '', // 企业邮箱
enterpriseIntroduction: '威海品合数字矿山技术有限公司(以下简称晶合) ，成立于2012年，位于美丽的海滨城市山东威海。经过多年的专业深耕与创新发展晶合被评为高新技术企业双软企业、入库于帆企业，现已成为国内优秀的智悬矿山及应急管理等领域的解决方案提供商。\n' +
' 晶合重视技术开发与创新，研发人员占公司总人数35%以上，中高级工程师占比15%以上。公司多次承担、参与国家及省部级科技项目，建立了都发工厂山) 安全监测工程技术研究中心。先后荣获中国岩石力学与工程学会科学技术奖一等奖、山东省科学技术奖、山东省地质勘查资源开发科学技术奖、中国煤M工业学会科学技术奖等多个科技笑项，多项产品获很具有国际领先水平的科技成果鉴定。作为专法致力于知矿山、地灾监测及应急管理领域的行业，最合拥有完整的研发、生产、销售、售后体系，建立了S0901、ISO45001、S014001等管理体系，严格把控产品质量，与中国织业、中国有、中矿集团、山东黄金集团、魏桥集团等建立了长期的业务合作关系。在国际市场方面，产品远销澳大利亚、俄罗斯南非、印尼等十多个国家地区，已形成稳定的国际销售网络，晶合的“矿山之是”品牌受到了国内外客户的广泛认可。\n' +
' 面向未来，晶合格继练重承“以技术为核心，以质量为保证”的理念，空记“为矿山安全保驾护航” 的使命，有该明务，精益求，追或卓越，打造品所先讲的科技创新型企业。', // 企业介绍
enterpriseName: '佛山英沃传感器科技有限公司', // 企业名称
enterpriseType: '', // 企业类型
establishmentDate: '2023 01-01', // 成立日期
industry: '', // 所属行业
legalRepresentative: '', // 法定代表人
mainProductsIntroduction: '', // 主营产品介绍
operatingPeriod: '', // 经营期限
registeredAddressArea: '', // 注册地址-区
registeredAddressCity: '', // 注册地址-市
registeredAddressProvince: '', // 注册地址-省
registeredAddressStreet: '江苏省淮安市', // 注册地址-街道
registeredCapital: '', // 注册资本
registrationAuthority: '', // 登记机关
supplierLevel: '1', // 供应商级别
taxpayerIdentificationNumber: '', // 纳税人识别号
unifiedSocialCreditCode: '', // 统一社会信用代码
isGood: true
},
throttle: null, // 节流器
throttleTime: 300
}
},
mounted() {
this.$nextTick(() => {})
},
methods: {
onDictReady(dict) {},
tabChange(tabIndex) {
this.tabIndex = tabIndex
},
setQuertType(type) {
if (type === this.query.type) {
this.query.sort = !this.query.sort
} else {
this.query.type = type
this.query.sort = false
}
},
// 点击询价
inquiry(item, type) {
console.log(item, type)
this.$refs.inquiryView.initView(item.id, type)
},
// 跳转到详情
goToDetails(item, type) {
console.log(item, type)
},
pageChange(e) {
this.page = e
this.loadData()
},
// 点击更多
moreTo(type) {
console.log(type)
},
loadData() {
},
goTop() {
document.body.scrollTop = 0
document.documentElement.scrollTop = 0
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.touch {
cursor:pointer;
}
.clear {
clear: both
}
.inline-block {
display: inline-block;
}
.ellipsis {
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
-webkit-line-clamp: 2;
text-overflow: ellipsis;
}
.showcase {
padding: 1px 0;
font-size: 20px;
font-family: Source Han Sans CN;
font-weight: 400;
}
.pagination {
margin-top: 23px;
text-align: center;
padding: 10px;
display: flex;
justify-content: center;
align-items: center;
>>>.el-pagination.is-background .el-pager li {
font-style: normal;
font-weight: 400;
font-size: 14px;
text-align: center;
background-color: #fff;
color: #000000;
border: 1px solid #e5e5ea;
}
/* 激活后的样式 */
>>>.el-pagination.is-background .el-pager li:not(.disabled).active {
background-color: #ffffff;
color: #0366ed;
border: 1px solid #0366ed;
text-align: center;
}
/* 修改左右箭头样式 */
>>>.el-pagination .btn-next .el-icon, >>>.el-pagination .btn-prev .el-icon {
font-style: normal;
font-weight: 400;
font-size: 14px;
text-align: center;
background-color: #fff;
color: #e5e5ea;
border: 1px solid #e5e5ea;
}
>>>.el-pager {
height: 35.5px !important;
}
>>>.number, >>>.el-icon {
height: 35.5px !important;
line-height: 35.5px !important;
}
}
.head-box {
width: 100vw;
top: 0;
position: fixed;
background: none repeat scroll 0 0 white;
z-index: 999;
box-shadow: 0px 3px 7px 0px rgba(0,0,0,0.2);
.head-box-top {
display: flex;
justify-content: space-evenly;
align-items: center;
.top-call {
height: 80px;
padding-top: 15px;
}
}
}
.page-title {
margin-top: 20px;
padding: 0 20px;
font-size: 28px;
font-weight: bolder;
color: #333333;
}
.tab-box {
margin: 20px 0;
width: 100%;
display: flex;
justify-content: flex-start;
border-bottom: 2px solid rgba(3,66,171,0.2);
.tab-item {
width: 120px;
padding-top: 10px;
padding-bottom: 8px;
text-align: center;
font-size: 14px;
color: #666;
}
.active {
background: rgba(183,210,248,0.25);
color: #1961C5;
border-bottom: 3px solid rgba(3,66,171,0.8);
}
}
.content-box {
min-height: 70vh;
margin-top: 94px;
font-family: Source Han Sans CN;
user-select: none;
.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;
}
.price {
padding: 10px;
text-align: center;
color: #F60B0B;
font-size: 26px;
}
}
.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
}
}
.textarea-box {
color: #333;
font-size: 16px;
line-height: 28px;
}
}
.search-box {
padding-top: 12px;
width: 100%;
font-family: Source Han Sans CN;
font-weight: 400;
color: #666666;
user-select: none;
.search-item {
width: 100%;
height: 38px;
display: inline-block;
padding: 8px 20px;
background: #F7F7F7;
border: 1px solid rgba(0,0,0,0.12);
overflow:hidden;
white-space: nowrap;
text-overflow: ellipsis;
-o-text-overflow:ellipsis;
.label:hover {
font-weight: 600;
}
.btn {
width: 74px;
padding: 3px;
margin-left: 12px;
display: inline-block;
background: #1961C5;
border-radius: 6px;
color: white;
text-align: center;
opacity: 0.7;
}
.btn:hover {
opacity: 1;
}
}
.area-title {
height: 62px;
background: #F7F7F7;
border: 1px solid rgba(0,0,0,0.12);
text-align: center;
line-height: 60px;
}
.area_item {
height: 30px;
padding: 6px 12px;
display: inline-block;
}
.area_item:hover {
font-weight: 600;
}
.active {
color: #1961C5;
}
.search-tools {
width: 100%;
.btn{
width: 76%;
height: 38px;
border: 2px solid #1961C5;
border-radius: 8px;
background: #1961C5;
font-family: Source Han Sans CN;
font-weight: 400;
font-size: 21px;
color: #ffffff;
opacity: 0.7;
}
.btn:hover {
opacity: 1;
}
>>>.el-input__inner {
height: 38px;
border: 2px solid #1961C5;
border-radius: 8px;
font-family: Source Han Sans CN;
font-weight: 400;
font-size: 18px;
color: #333333;
opacity: 0.7;
}
>>>.el-input__inner:hover {
opacity: 1;
}
}
.search-keyword {
padding: 5px 0;
font-family: Source Han Sans CN;
font-weight: 400;
font-size: 14px;
text-align: left;
.label {
padding: 1px 15px 1px;
color: #333333;
cursor:pointer;
user-select: none;
}
.label:hover {
color: #1961C5;
}
}
}
.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>
src/views/homepage/supplier/index.vue
View file @ 7ebe70c9
...@@ -64,9 +64,9 @@ ...@@ -64,9 +64,9 @@
<!--供应商展柜--> <!--供应商展柜-->
<div v-for="(item,index) in supplierList" :key="'s_'+index" class="showcase-line"> <div v-for="(item,index) in supplierList" :key="'s_'+index" class="showcase-line">
<div class="supplier_card" style="position: relative;"> <div class="supplier_card" style="position: relative;">
<div class="sup_btn touch" style="position: absolute;top: 15px;right: 30px" @click="goToDetails(item, 'supplier')">查看产品</div> <div class="sup_btn touch" style="position: absolute;top: 15px;right: 30px" @click="goToDetails(item, '/supplier/details')">查看产品</div>
<div class="sup_btn touch" style="position: absolute;top: 60px;right: 30px;background: transparent;color: #FB7B09" @click="inquiry(item, null)">留言咨询</div> <div class="sup_btn touch" style="position: absolute;top: 60px;right: 30px;background: transparent;color: #FB7B09" @click="inquiry(item, 'supplier')">留言咨询</div>
<div class="sup_title touch"> <div class="sup_title touch" @click="goToDetails(item, '/supplier/details')">
{{ item.name }} {{ item.name }}
<img v-if="item.isGood" src="@/assets/home_images/diamond.png" title="推荐" style="position:relative;top:4px;"> <img v-if="item.isGood" src="@/assets/home_images/diamond.png" title="推荐" style="position:relative;top:4px;">
</div> </div>
...@@ -220,8 +220,12 @@ export default { ...@@ -220,8 +220,12 @@ export default {
this.$refs.inquiryView.initView(item.id, type) this.$refs.inquiryView.initView(item.id, type)
}, },
// 跳转到详情 // 跳转到详情
goToDetails(item, type) { goToDetails(item, path) {
console.log(item, type) if (item) {
this.$router.push({ path: `${path}/${item.id || 123}` })
} else {
this.$router.push({ path: `${path}` })
}
}, },
pageChange(e) { pageChange(e) {
this.page = e this.page = e
......
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