Skip to content

B
bjgee
Commit 74e3fc0b authored by shangbj's avatar shangbj
Browse files
Options

完善产品展示

parent ca1ff9a7
Expand all Show whitespace changes
Inline Side-by-side
Showing with 566 additions and 106 deletions
assets/css/common.scss
View file @ 74e3fc0b
...@@ -33,6 +33,39 @@ ul, li, form, dd, dt, dl { ...@@ -33,6 +33,39 @@ ul, li, form, dd, dt, dl {
float: left; float: left;
padding-left: 15px; padding-left: 15px;
border-right: 1px solid #E1E1E1; border-right: 1px solid #E1E1E1;
.column-list{
width: 210px;
padding-top: 15px;
text-align: left;
dt{
height: 18px;
background: url(~assets/images/11019921.gif) no-repeat left top;
font-size: 14px;
font-weight: bold;
color: #004483;
padding: 3px 0px 0px 12px;
}
dd{
border: 1px solid #E1E1E1;
font-size: 14px;
text-align: center;
padding: 8px;
div{
height: 20px;
border-bottom: 1px solid #EEEEEE;
font-weight: bold;
padding-top: 4px;
text-align: left;
padding-left: 20px;
a{
color:#004483;
&.nuxt-link-exact-active{
color:#0982B9;
}
}
}
}
}
} }
.right-con-wrap{ .right-con-wrap{
width: 736px; width: 736px;
...@@ -44,10 +77,18 @@ ul, li, form, dd, dt, dl { ...@@ -44,10 +77,18 @@ ul, li, form, dd, dt, dl {
height: 25px; height: 25px;
text-align: left; text-align: left;
background: url(~assets/images/11019918.gif) no-repeat 5px top; background: url(~assets/images/11019918.gif) no-repeat 5px top;
padding: 2px 0px 0px 20px; line-height:22px;
padding: 0 0 0 20px;
font-size: 14px; font-size: 14px;
font-weight: bold; font-weight: bold;
color: #004483; color: #004483;
div{
background: #fff;
float:left;
height: 25px;
padding-right:10px;
background: #fff url(~assets/images/line.png) repeat-x left bottom;
}
} }
.currently-title{ .currently-title{
height: 25px; height: 25px;
......
components/ProductImgList.vue
View file @ 74e3fc0b
...@@ -3,9 +3,15 @@ ...@@ -3,9 +3,15 @@
<dt>产品列表</dt> <dt>产品列表</dt>
<dd class="con"> <dd class="con">
<div><img src="~assets/images/1101993.jpg"></div> <div><img src="~assets/images/1101993.jpg"></div>
<div style="margin-top:3px;"><a href="/html/category/2208290-1.htm"><img src="~assets/images/1101997.jpg"></a></div> <div style="margin-top:3px;">
<div style="margin-top:3px;"><a href="/html/Home/category/14010083-1.htm"><img src="~assets/images/choyang.jpg"></a></div> <nuxt-link to="/product/equipment"><img src="~assets/images/1101997.jpg"></nuxt-link>
<div style="margin-top:3px;"><a href="/html/category/2208291-1.htm"><img src="~assets/images/1101998.jpg"></a></div> </div>
<div style="margin-top:3px;">
<nuxt-link to="/product/ozonizer"><img src="~assets/images/choyang.jpg"></nuxt-link>
</div>
<div style="margin-top:3px;">
<nuxt-link to="/product/disinfectant"><img src="~assets/images/1101998.jpg"></nuxt-link>
</div>
</dd> </dd>
</dl> </dl>
</template> </template>
......
pages/engineering/drinkingWater/_id.vue
View file @ 74e3fc0b
<template> <template>
<div class="currently-wrap"> <div class="currently-wrap">
<div class="currently-node">饮用水消毒</div> <div class="currently-node"><div>饮用水消毒</div></div>
<div class="currently-title">{{title}}</div> <div class="currently-title">{{title}}</div>
<div class="currently-time">发布时间：{{time}}</div> <div class="currently-time">发布时间：{{time}}</div>
<div class="currently-text" v-html="con"></div> <div class="currently-text" v-html="con"></div>
...@@ -11,7 +11,7 @@ export default { ...@@ -11,7 +11,7 @@ export default {
asyncData({ params, store, error }) { asyncData({ params, store, error }) {
const item = store.state.engineering.data.drinkingWater.data.find((item) => String(item.id) === params.id) const item = store.state.engineering.data.drinkingWater.data.find((item) => String(item.id) === params.id)
if (!item) { if (!item) {
return error({ message: 'User not found', statusCode: 404 }) return error({ message: '页面不存在', statusCode: 404 })
} }
return item return item
}, },
......
pages/engineering/drinkingWater/index.vue
View file @ 74e3fc0b
<template> <template>
<div class="currently-wrap"> <div class="currently-wrap">
<div class="currently-node">饮用水消毒</div> <div class="currently-node"><div>饮用水消毒</div></div>
<div class="currently-list"> <div class="currently-list">
<ul> <ul>
<li class="listItem" v-for="(item, index) in data" :key="index"> <li class="listItem" v-for="(item, index) in data" :key="index">
......
pages/engineering/hospitalSewage/_id.vue
View file @ 74e3fc0b
<template> <template>
<div class="currently-wrap"> <div class="currently-wrap">
<div class="currently-node">医院污水消毒</div> <div class="currently-node"><div>医院污水消毒</div></div>
<div class="currently-title">{{title}}</div> <div class="currently-title">{{title}}</div>
<div class="currently-time">发布时间：{{time}}</div> <div class="currently-time">发布时间：{{time}}</div>
<div class="currently-text" v-html="con"></div> <div class="currently-text" v-html="con"></div>
...@@ -11,7 +11,7 @@ export default { ...@@ -11,7 +11,7 @@ export default {
asyncData({ params, store, error }) { asyncData({ params, store, error }) {
const item = store.state.engineering.data.hospitalSewage.data.find((item) => String(item.id) === params.id) const item = store.state.engineering.data.hospitalSewage.data.find((item) => String(item.id) === params.id)
if (!item) { if (!item) {
return error({ message: 'User not found', statusCode: 404 }) return error({ message: '页面不存在', statusCode: 404 })
} }
return item return item
}, },
......
pages/engineering/hospitalSewage/index.vue
View file @ 74e3fc0b
<template> <template>
<div class="currently-wrap"> <div class="currently-wrap">
<div class="currently-node">医院污水消毒</div> <div class="currently-node"><div>医院污水消毒</div></div>
<div class="currently-list"> <div class="currently-list">
<ul> <ul>
<li class="listItem" v-for="(item, index) in data" :key="index"> <li class="listItem" v-for="(item, index) in data" :key="index">
......
pages/engineering/mediumWater/_id.vue
View file @ 74e3fc0b
...@@ -11,7 +11,7 @@ export default { ...@@ -11,7 +11,7 @@ export default {
asyncData({ params, store, error }) { asyncData({ params, store, error }) {
const item = store.state.engineering.data.mediumWater.data.find((item) => String(item.id) === params.id) const item = store.state.engineering.data.mediumWater.data.find((item) => String(item.id) === params.id)
if (!item) { if (!item) {
return error({ message: 'User not found', statusCode: 404 }) return error({ message: '页面不存在', statusCode: 404 })
} }
return item return item
}, },
......
pages/index.vue
View file @ 74e3fc0b
...@@ -37,7 +37,7 @@ ...@@ -37,7 +37,7 @@
<ul class="item"> <ul class="item">
<li v-for="(item,index) in productData" :key="index"> <li v-for="(item,index) in productData" :key="index">
<nuxt-link :to="item.url"> <nuxt-link :to="item.url">
<img :src="item.img" /><br/> <img :src="item.thumbnail" /><br/>
{{item.title}} {{item.title}}
</nuxt-link> </nuxt-link>
</li> </li>
...@@ -107,7 +107,11 @@ export default { ...@@ -107,7 +107,11 @@ export default {
}, },
data:function(){ data:function(){
return { return {
productData:this.$store.state.productData, productData:[
...this.$store.state.product.data.ozonizer.data,
...this.$store.state.product.data.disinfectant.data,
...this.$store.state.product.data.equipment.data,
],
qualificationsData:this.$store.state.qualificationsData, qualificationsData:this.$store.state.qualificationsData,
newsData:this.$store.state.news.newsData, newsData:this.$store.state.news.newsData,
engineeringData:this.$store.state.engineeringData, engineeringData:this.$store.state.engineeringData,
...@@ -131,7 +135,7 @@ export default { ...@@ -131,7 +135,7 @@ export default {
limitMoveNum: 4 limitMoveNum: 4
} }
} }
} },
} }
</script> </script>
...@@ -237,6 +241,7 @@ export default { ...@@ -237,6 +241,7 @@ export default {
text-align: center; text-align: center;
font-size: 12px; font-size: 12px;
width: 140px; width: 140px;
height:130px;
img{ img{
width:132px; width:132px;
height:88px; height:88px;
......
pages/industryNews/_id.vue
View file @ 74e3fc0b
...@@ -12,7 +12,7 @@ export default { ...@@ -12,7 +12,7 @@ export default {
const item = [].find((item) => String(item.id) === params.id) const item = [].find((item) => String(item.id) === params.id)
console.log(item) console.log(item)
if (!item) { if (!item) {
return error({ message: 'User not found', statusCode: 404 }) return error({ message: '页面不存在', statusCode: 404 })
} }
return item return item
}, },
......
pages/news/_id.vue
View file @ 74e3fc0b
...@@ -12,7 +12,7 @@ export default { ...@@ -12,7 +12,7 @@ export default {
const item = store.state.news.newsData.find((item) => String(item.id) === params.id) const item = store.state.news.newsData.find((item) => String(item.id) === params.id)
console.log(item) console.log(item)
if (!item) { if (!item) {
return error({ message: 'User not found', statusCode: 404 }) return error({ message: '页面不存在', statusCode: 404 })
} }
return item return item
}, },
......
pages/product.vue deleted 100644 → 0
View file @ ca1ff9a7
<template>
<div>
产品展示1asdfasdfafsd
</div>
</template>
pages/product/disinfectant.vue
View file @ 74e3fc0b
<template> <template>
<div> <div class="clearfix content">
水木兰二氧化氯消毒粉 <div class="left-con-wrap">
<ProductImgList />
<ContactUs />
</div>
<div class="right-con-wrap">
<nuxt-child :key="$route.params.id"/>
</div>
</div> </div>
</template> </template>
<script>
import ProductImgList from '~/components/ProductImgList.vue'
import ContactUs from '~/components/ContactUs.vue'
export default {
components:{
ProductImgList,
ContactUs,
}
}
</script>
<style lang="scss">
</style>
pages/product/disinfectant/_id.vue 0 → 100644
View file @ 74e3fc0b
<template>
<div class="currently-wrap">
<div class="currently-node"><div>水木兰二氧化氯消毒粉</div></div>
<div class="currently-title">{{title}}</div>
<div class="currently-time">发布时间：{{time}}</div>
<div class="currently-text" v-html="con"></div>
</div>
</template>
<script>
export default {
asyncData({ params, store, error }) {
const item = store.state.product.data.disinfectant.data.find((item) => String(item.id) === params.id)
if (!item) {
return error({ message: '页面不存在', statusCode: 404 })
}
return item
},
head() {
return {
}
}
}
</script>
pages/product/disinfectant/index.vue 0 → 100644
View file @ 74e3fc0b
<template>
<div class="currently-wrap">
<div class="currently-node"><div>水木兰二氧化氯消毒粉</div></div>
<div class="currently-list">
<ul>
<li class="listItem" v-for="(item, index) in data" :key="index">
<nuxt-link :to="'/product/disinfectant/' + item.id" class="itemTitle">{{item.title}}</nuxt-link>
<span class="contentTime">&nbsp;&nbsp;{{item.time}}</span>
</li>
</ul>
</div>
<el-pagination
class="elPage"
background
layout="prev, pager, next"
prev-text="上一页"
next-text="下一页"
@current-change="handleCurrentChange"
:total="data.length">
</el-pagination>
</div>
</template>
<script>
export default {
data(){
return{
data:this.$store.state.product.data.disinfectant.data,
currentPage:1
}
},
methods:{
handleCurrentChange(val){
console.log(`当前页：${val}`)
}
}
}
</script>
<style lang="scss" scoped>
</style>
\ No newline at end of file
pages/product/equipment.vue
View file @ 74e3fc0b
<template> <template>
<div> <div class="clearfix content">
绿恒二氧化氯消毒设备 <div class="left-con-wrap">
<ProductImgList />
<ContactUs />
</div>
<div class="right-con-wrap">
<nuxt-child :key="$route.params.id"/>
</div>
</div> </div>
</template> </template>
<script>
import ProductImgList from '~/components/ProductImgList.vue'
import ContactUs from '~/components/ContactUs.vue'
export default {
components:{
ProductImgList,
ContactUs,
}
}
</script>
<style lang="scss">
</style>
pages/product/equipment/_id.vue 0 → 100644
View file @ 74e3fc0b
<template>
<div class="currently-wrap">
<div class="currently-node"><div>绿恒二氧化氯消毒设备</div></div>
<div class="currently-title">{{title}}</div>
<div class="currently-time">发布时间：{{time}}</div>
<div class="currently-text" v-html="con"></div>
</div>
</template>
<script>
export default {
asyncData({ params, store, error }) {
const item = store.state.product.data.equipment.data.find((item) => String(item.id) === params.id)
if (!item) {
return error({ message: '页面不存在', statusCode: 404 })
}
return item
},
head() {
return {
}
}
}
</script>
pages/product/equipment/index.vue 0 → 100644
View file @ 74e3fc0b
<template>
<div class="currently-wrap">
<div class="currently-node"><div>绿恒二氧化氯消毒设备</div></div>
<div class="currently-list">
<ul>
<li class="listItem" v-for="(item, index) in data" :key="index">
<nuxt-link :to="'/product/equipment/' + item.id" class="itemTitle">{{item.title}}</nuxt-link>
<span class="contentTime">&nbsp;&nbsp;{{item.time}}</span>
</li>
</ul>
</div>
<el-pagination
class="elPage"
background
layout="prev, pager, next"
prev-text="上一页"
next-text="下一页"
@current-change="handleCurrentChange"
:total="data.length">
</el-pagination>
</div>
</template>
<script>
export default {
data(){
return{
data:this.$store.state.product.data.equipment.data,
currentPage:1
}
},
methods:{
handleCurrentChange(val){
console.log(`当前页：${val}`)
}
}
}
</script>
<style lang="scss" scoped>
</style>
\ No newline at end of file
pages/product/index.vue 0 → 100644
View file @ 74e3fc0b
<template>
<div class="clearfix content">
<div class="left-con-wrap">
<dl class="column-list">
<dt>产品展示</dt>
<dd>
<div v-for="(item,key) in columnData" :key="key">
<nuxt-link :to="'/product/'+key">{{ item.name }}</nuxt-link>
</div>
</dd>
</dl>
<ProductImgList />
<ContactUs />
</div>
<div class="right-con-wrap">
<div class="currently-node">产品展示</div>
</div>
</div>
</template>
<script>
import ProductImgList from '~/components/ProductImgList.vue'
import ContactUs from '~/components/ContactUs.vue'
export default {
data(){
return {
columnData: this.$store.state.product.data
}
},
components:{
ProductImgList,
ContactUs,
},
}
</script>
<style lang="scss">
.engineering-column{
padding:20px;
}
</style>
pages/product/ozonizer.vue
View file @ 74e3fc0b
<template> <template>
<div> <div class="clearfix content">
臭氧发生器 <div class="left-con-wrap">
<ProductImgList />
<ContactUs />
</div>
<div class="right-con-wrap">
<nuxt-child :key="$route.params.id"/>
</div>
</div> </div>
</template> </template>
<script>
import ProductImgList from '~/components/ProductImgList.vue'
import ContactUs from '~/components/ContactUs.vue'
export default {
components:{
ProductImgList,
ContactUs,
}
}
</script>
<style lang="scss">
</style>
pages/product/ozonizer/_id.vue 0 → 100644
View file @ 74e3fc0b
<template>
<div class="currently-wrap">
<div class="currently-node"><div>臭氧发生器</div></div>
<div class="currently-title">{{title}}</div>
<div class="currently-time">发布时间：{{time}}</div>
<div class="currently-text" v-html="con"></div>
</div>
</template>
<script>
export default {
asyncData({ params, store, error }) {
const item = store.state.product.data.ozonizer.data.find((item) => String(item.id) === params.id)
if (!item) {
return error({ message: '页面不存在', statusCode: 404 })
}
return item
},
head() {
return {
}
}
}
</script>
pages/product/ozonizer/index.vue 0 → 100644
View file @ 74e3fc0b
<template>
<div class="currently-wrap">
<div class="currently-node"><div>臭氧发生器</div></div>
<div class="currently-list">
<ul>
<li class="listItem" v-for="(item, index) in data" :key="index">
<nuxt-link :to="'/product/ozonizer/' + item.id" class="itemTitle">{{item.title}}</nuxt-link>
<span class="contentTime">&nbsp;&nbsp;{{item.time}}</span>
</li>
</ul>
</div>
<el-pagination
class="elPage"
background
layout="prev, pager, next"
prev-text="上一页"
next-text="下一页"
@current-change="handleCurrentChange"
:total="data.length">
</el-pagination>
</div>
</template>
<script>
export default {
data(){
return{
data:this.$store.state.product.data.ozonizer.data,
currentPage:1
}
},
methods:{
handleCurrentChange(val){
console.log(`当前页：${val}`)
}
}
}
</script>
<style lang="scss" scoped>
</style>
\ No newline at end of file
pages/profile.vue
View file @ 74e3fc0b
...@@ -35,39 +35,5 @@ export default { ...@@ -35,39 +35,5 @@ export default {
} }
</script> </script>
<style lang="scss"> <style lang="scss">
.left-con-wrap{
.column-list{
width: 210px;
padding-top: 15px;
text-align: left;
dt{
height: 18px;
background: url(~assets/images/11019921.gif) no-repeat left top;
font-size: 14px;
font-weight: bold;
color: #004483;
padding: 3px 0px 0px 12px;
}
dd{
border: 1px solid #E1E1E1;
font-size: 14px;
text-align: center;
padding: 8px;
div{
height: 20px;
border-bottom: 1px solid #EEEEEE;
font-weight: bold;
padding-top: 4px;
text-align: left;
padding-left: 20px;
a{
color:#004483;
&.nuxt-link-exact-active{
color:#0982B9;
}
}
}
}
}
}
</style> </style>
pages/profile/_id.vue
View file @ 74e3fc0b
...@@ -9,7 +9,7 @@ export default { ...@@ -9,7 +9,7 @@ export default {
asyncData({ params, store, error }) { asyncData({ params, store, error }) {
const item = store.state.profileData.find((item) => String(item.id) === params.id) const item = store.state.profileData.find((item) => String(item.id) === params.id)
if (!item) { if (!item) {
return error({ message: 'User not found', statusCode: 404 }) return error({ message: '页面不存在', statusCode: 404 })
} }
return item return item
}, },
......
static/images/product/00301.jpg 0 → 100644
View file @ 74e3fc0b
This diff is collapsed.
static/images/product/00501.jpg 0 → 100644
View file @ 74e3fc0b
This diff is collapsed.
store/index.js
View file @ 74e3fc0b
...@@ -123,48 +123,6 @@ export const state = () => ({ ...@@ -123,48 +123,6 @@ export const state = () => ({
url:'#', url:'#',
}, },
], ],
productData:[
{
title:'绿恒TLS-C-20臭氧发生器',
img:'http://www.bjgee.net/res/Home/report/蓝底大img_08362.jpg',
url:'#',
},
{
title:'绿恒TLS纯二氧化氯发生器壁挂机',
img:'http://www.bjgee.net/res/Home/report/设备说明图（农村）1(4).jpg',
url:'#',
},
{
title:'水木兰二氧化氯消毒粉',
img:'http://www.bjgee.net/res/Home/report/8/未命名.jpg',
url:'#',
},
{
title:'绿恒TLS纯二氧化氯发生器一体机',
img:'http://www.bjgee.net/res/Home/report/图片1_副本.jpg',
url:'#',
},
{
title:'电解法二氧化氯发生器',
img:'http://www.bjgee.net/res/Home/report/电解蓝底小.jpg',
url:'#',
},
{
title:'二氧化氯消毒粉专用投加装置',
img:'http://www.bjgee.net/res/Home/report/加药器说明小.jpg',
url:'#',
},
{
title:'便携式二氧化氯检测仪',
img:'http://www.bjgee.net/res/Home/report/便携式检测仪2.jpg',
url:'#',
},
{
title:'二氧化氯在线检测仪',
img:'http://www.bjgee.net/res/Home/report/检测仪1.jpg',
url:'#',
},
],
profileData:[ profileData:[
{ {
id:'applicationArea', id:'applicationArea',
......
store/product.js 0 → 100644
View file @ 74e3fc0b
This diff is collapsed.
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