Skip to content

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

增加store

parent e8fa5a37
Show whitespace changes
Inline Side-by-side
Showing with 519 additions and 90 deletions
assets/css/common.scss
View file @ b5d67039
......@@ -25,3 +25,7 @@ ul, li, form, dd, dt, dl {
.clearfix {
zoom: 1;
}
.content{
background: url(~assets/images/11019912.jpg) repeat-x left top;
min-height: 615px;
}
\ No newline at end of file
components/NewsScrollList.vue 0 → 100644
View file @ b5d67039
<template>
<dl class="scroll-news">
<dt>新闻动态</dt>
<dd>
<no-ssr>
<vue-seamless-scroll :data="newsData" :class-option="optionTop" class="product-seamless-warp">
<ul class="item">
<li v-for="(item,index) in newsData" :key="index">
<nuxt-link :to="item.url">
{{item.title}}
</nuxt-link>
</li>
</ul>
</vue-seamless-scroll>
</no-ssr>
</dd>
</dl>
</template>
<script>
export default {
data(){
return {
newsData:this.$store.state.newsListData,
}
},
computed:{
optionTop(){
return {
step:0.4
}
}
}
}
</script>
<style lang="scss" scoped>
.scroll-news{
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{
font-size: 12px;
line-height: 150%;
height: 190px;
overflow-y: hidden;
margin-top: 5px;
border: 1px solid #E1E1E1;
padding: 5px;
li{
background: url(~assets/images/1101992.gif) no-repeat left 8px;
padding-left: 10px;
}
}
}
</style>
components/ProductImgList.vue 0 → 100644
View file @ b5d67039
<template>
<dl class="product-img-list">
<dt>产品列表</dt>
<dd class="con">
<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;"><a href="/html/Home/category/14010083-1.htm"><img src="~assets/images/choyang.jpg"></a></div>
<div style="margin-top:3px;"><a href="/html/category/2208291-1.htm"><img src="~assets/images/1101998.jpg"></a></div>
</dd>
</dl>
</template>
<script>
export default {
}
</script>
<style lang="scss" scoped>
.product-img-list{
text-align:left;
width: 210px;
padding-top: 15px;
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{
margin-top: 5px;
border: 1px solid #E1E1E1;
padding-top: 2px;
text-align: center;
line-height: 200%;
color: #585858;
font-size: 12px;
padding-bottom: 2px;
img{
display:block;
margin:0 auto;
}
}
}
</style>
components/index/News.vue
View file @ b5d67039
......@@ -12,8 +12,8 @@
</dt>
<dd>
<ul>
<li v-for="(item, index) in dataSource" :key="index">
<a :href="item.url">
<li v-for="(item, index) in dataSource" v-if="index<10" :key="index">
<a :href="item.url" :title="item.title">
{{item.title}}
</a>
{{item.time}}
......@@ -62,8 +62,15 @@ export default {
background: url(~assets/images/11019911.gif) no-repeat 10px 2px;
padding-left: 30px;
color:#666;
clear:both;
a{
margin-right:10px;
display:block;
float: left;
max-width:350px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
}
}
......
pages/Profile.vue
View file @ b5d67039
<template>
<div>公司简介</div>
<div class="clearfix content">
<div class="left-wrap">
<NewsScrollList />
<ProductImgList />
</div>
</div>
</template>
<script>
import NewsScrollList from '~/components/NewsScrollList.vue'
import ProductImgList from '~/components/ProductImgList.vue'
export default {
components:{
NewsScrollList,
ProductImgList,
}
}
</script>
<style lang="scss" scoped>
.left-wrap{
width: 225px;
float: left;
padding-left: 15px;
border-right: 1px solid #E1E1E1;
}
</style>
pages/engineering/DrinkingWater.vue 0 → 100644
View file @ b5d67039
<template>
<div>
饮用水
</div>
</template>
pages/engineering/HospitalSewage.vue 0 → 100644
View file @ b5d67039
<template>
<div>
医院污水
</div>
</template>
pages/engineering/MediumWater.vue 0 → 100644
View file @ b5d67039
<template>
<div>
中水
</div>
</template>
pages/index.vue
View file @ b5d67039
......@@ -17,18 +17,42 @@
<nuxt-link to="/product/equipment"><img src="~assets/images/1101997.jpg"></nuxt-link>
</li>
<li style="margin-top:3px;">
<nuxt-link to="/product/disinfectantm"><img src="~assets/images/1101998.jpg"></nuxt-link>
<nuxt-link to="/product/disinfectant"><img src="~assets/images/1101998.jpg"></nuxt-link>
</li>
</ul>
<ContactUs/>
<dl class="proxy-wrap">
<dt>诚招代理</dt>
<dd>
<nuxt-link to="/proxy"><img src="~assets/images/11039950.jpg"></nuxt-link>
</dd>
</dl>
</div>
<div class="floor-wrapper-right">
<dl class="product-list">
<dt>产品展示</dt>
<dd>
<vue-seamless-scroll :data="productDataSource" :class-option="optionLeft" class="product-seamless-warp">
<no-ssr>
<vue-seamless-scroll :data="productData" :class-option="optionLeft" class="product-seamless-warp">
<ul class="item">
<li v-for="(item,index) in productData" :key="index">
<nuxt-link :to="item.url">
<img :src="item.img" /><br/>
{{item.title}}
</nuxt-link>
</li>
</ul>
</vue-seamless-scroll>
</no-ssr>
</dd>
</dl>
<dl class="product-list" style="margin-top:6px;">
<dt>资质展示</dt>
<dd>
<no-ssr>
<vue-seamless-scroll :data="qualificationsData" :class-option="optionRight" class="product-seamless-warp">
<ul class="item">
<li v-for="(item,index) in productDataSource" :key="index">
<li v-for="(item,index) in qualificationsData" :key="index">
<nuxt-link :to="item.url">
<img :src="item.img" /><br/>
{{item.title}}
......@@ -36,6 +60,35 @@
</li>
</ul>
</vue-seamless-scroll>
</no-ssr>
</dd>
</dl>
<dl class="engineering-list">
<dt>工程业绩</dt>
<dd>
<el-row style="width: 722px;margin: 0 auto;height: 162px;padding-top: 10px;">
<el-col class="engineering-item" :span="6" v-for="(item,index) in engineeringData" :key="index">
<span v-if="item.url" >
<a :href="item.url">
{{item.title}}
</a>
</span>
<span v-else>
{{item.title}}
</span>
</el-col>
</el-row>
<el-row class="engineering-column">
<el-col :span="8">
<nuxt-link to="/engineering/DrinkingWater"><img src="~assets/images/11029917.jpg"></nuxt-link>
</el-col>
<el-col :span="8">
<nuxt-link to="/engineering/HospitalSewage"><img src="~assets/images/11029920.jpg"></nuxt-link>
</el-col>
<el-col :span="8">
<nuxt-link to="/engineering/MediumWater"><img src="~assets/images/11029919.jpg"></nuxt-link>
</el-col>
</el-row>
</dd>
</dl>
</div>
......@@ -54,75 +107,10 @@ export default {
},
data:function(){
return {
productDataSource:[
{
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:'#',
},
],
newsData:[
{
title:'公司通过《职业健康安全管理体系》认证',
url:'/html/report/18060087-1.htm',
time:'2018-06-04',
},
{
title:'八达岭长城景区用水消毒工程顺利完工',
url:'/html/report/18060087-1.htm',
time:'2018-06-04',
},
{
title:'天绿科技造福人类的旗帜恒久飘扬',
url:'/html/report/18060087-1.htm',
time:'2018-06-04',
},
{
title:'农村供水消毒技术及设备的选择与应用',
url:'/html/report/18060087-1.htm',
time:'2018-06-04',
},
{
title:'智能型柜式纯二氧化氯发生器参展水博会受好评',
url:'/html/report/18060087-1.htm',
time:'2018-06-04',
}
]
productData:this.$store.state.productData,
qualificationsData:this.$store.state.qualificationsData,
newsData:this.$store.state.newsListData,
engineeringData:this.$store.state.engineeringData,
}
},
components: {
......@@ -136,16 +124,18 @@ export default {
direction: 2,
limitMoveNum: 4
}
},
optionRight(){
return {
direction: 3,
limitMoveNum: 4
}
}
},
}
</script>
<style lang="scss" scoped>
.floor-one{
background: url(~assets/images/11019912.jpg) repeat-x left top;
}
.floor-wrapper-left{
float:left;
width: 218px;
......@@ -156,17 +146,77 @@ export default {
text-align: center;
padding: 3px 0px;
}
.proxy-wrap{
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{
margin-top: 5px;
text-align: center;
padding: 3px 0px;
border: 1px solid #C8C8C8;
}
}
}
.floor-wrapper-right{
float: left;
width: 752px;
.product-list{
text-align: left;
.engineering-list{
width: 750px;
border: 1px solid #c8c8c8;
text-align: center;
margin-top: 6px;
text-align: left;
box-sizing: border-box;
dt{
padding-left: 30px;
width: 740px;
margin: 0 auto;
text-align: left;
height: 25px;
display: block;
background: url(~assets/images/11019918.gif) no-repeat 5px top;
padding: 2px 0px 0px 20px;
font-size: 14px;
font-weight: bold;
color: #004483;
margin-top: 15px;
}
dd{
.engineering-item{
font-size: 12px;
background: url(~assets/images/11019911.gif) no-repeat 12px 9px;
padding-top: 9px;
color: #000;
span{
padding-left: 35px;
height: 20px;
display:block;
background: url(~assets/images/11019922.gif) repeat-x left bottom;
text-align: left;
}
}
.engineering-column{
width:720px;
margin:15px auto;
text-align:center;
}
}
}
.product-list{
width: 750px;
border: 1px solid #c8c8c8;
box-sizing: border-box;
dt{
padding-left: 20px;
padding-top: 8px;
height: 20px;
font-size: 16px;
......@@ -178,7 +228,7 @@ export default {
.product-seamless-warp {
overflow: hidden;
height: 130px;
width: 700px;
width: 710px;
ul.item {
width: 1200px;
li {
......
static/favicon.ico
View replaced file @ e8fa5a37 View file @ b5d67039
static/favicon.ico

1.12 KB | W: | H:

static/favicon.ico

1.12 KB | W: | H:

static/favicon.ico
static/favicon.ico
static/favicon.ico
static/favicon.ico
  • 2-up
  • Swipe
  • Onion skin
store/index.js 0 → 100644
View file @ b5d67039
export const state = () => ({
newsListData: [
{
title:'公司通过《职业健康安全管理体系》认证',
url:'/html/report/18060087-1.htm',
time:'2018-06-04',
},
{
title:'八达岭长城景区用水消毒工程顺利完工',
url:'/html/report/18060087-1.htm',
time:'2018-06-04',
},
{
title:'天绿科技造福人类的旗帜恒久飘扬',
url:'/html/report/18060087-1.htm',
time:'2018-06-04',
},
{
title:'农村供水消毒技术及设备的选择与应用',
url:'/html/report/18060087-1.htm',
time:'2018-06-04',
},
{
title:'智能型柜式纯二氧化氯发生器参展水博会受好评',
url:'/html/report/18060087-1.htm',
time:'2018-06-04',
},
{
title:'喜报：中标大兴区村镇供水消毒设备采购及运行维护项目',
url:'/html/report/16080002-1.htm',
time:'2018-06-04',
},
{
title:'喜报：中标唐山市2016年度地下水治理设备采购标',
url:'/html/report/16080002-1.htm',
time:'2018-06-04',
},
{
title:'进军“农村饮水健康行动项目消毒设备工程”',
url:'/html/report/16080002-1.htm',
time:'2018-06-04',
},
{
title:'喜报：祝贺我公司成功中标“深州市2015年第一批农村饮水安全工程”项目',
url:'/html/report/16080002-1.htm',
time:'2018-06-04',
}
],
engineeringData:[
{
title:'北京朝阳区农村改水',
url:'#'
},
{
title:'北京市海淀区农村改水',
url:''
},
{
title:'北京市顺义区农村改水',
url:''
},
{
title:'北京市平谷区农村改水',
url:''
},
{
title:'门头沟区消毒设备养护管理',
url:''
},
{
title:'北京市延庆县农村改水',
url:''
},
{
title:'北京市大兴区农村改水',
url:''
},
{
title:'北京八达岭长城自备井',
url:''
},
{
title:'北京首都机场自备井',
url:''
},
{
title:'北京豆各庄水厂',
url:'#'
},
{
title:'北京航天城供水站',
url:'#'
},
{
title:'北京楼梓庄水厂',
url:'#'
},
{
title:'珠海三灶国际机场',
url:''
},
{
title:'山西阳城自来水公司',
url:''
},
{
title:'中石化工程建设公司',
url:''
},
{
title:'内蒙兴和水厂',
url:''
},
{
title:'安徽省涡阳县农村改水',
url:''
},
{
title:'湖南省桃园县水厂',
url:''
},
{
title:'吉林东光集团',
url:''
},
{
title:'廊坊市广阳区水务局',
url:''
},
],
qualificationsData:[
{
title:'营业执照',
img:'http://www.bjgee.net/res/Home/report/2013营业执照_副本_副本.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:'ISO9001质量体系认证证书',
img:'http://www.bjgee.net/res/Home/report/质量体系认证证书_副本.jpg',
url:'#',
},
{
title:'ISO14001环境管理体系认证证书',
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/100型1_副本.jpg',
url:'#',
},
{
title:'绿恒臭氧发生器卫生许可批件',
img:'http://www.bjgee.net/res/Home/report/臭氧1_副本.jpg',
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:'#',
},
]
})
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