{
"pages":[
"pages/index/index",
"pages/product/product",
"pages/contact/contact",
"pages/company/company",
"pages/productMore/productMore",
"pages/case/case",
"pages/dynamic/dynamic",
"pages/collaborate/collaborate",
"pages/newest/newest",
"pages/map/map"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#1aad19",
"navigationBarTitleText": "泉州大白网络科技",
"navigationBarTextStyle": "white"
},
"tabBar": {
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "images/12.png",
"selectedIconPath": "images/11.png"
},
{
"pagePath": "pages/product/product",
"text": "产品展示",
"iconPath": "images/32.png",
"selectedIconPath": "images/31.png"
},
{
"pagePath": "pages/contact/contact",
"text": "联系我们",
"iconPath": "images/22.png",
"selectedIconPath": "images/21.png"
}
]
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}
//index.js
//获取应用实例
const app = getApp()
Page({
data: {
"bnrUrl": [{
"url": "../../images/a11.jpg"
}, {
"url": "../../images/a12.jpg"
}, {
"url": "../../images/a13.jpg"
}],
list: [{
url:'../company/company',
images: '../../images/n1.png',
title: "公司简介",
}, {
url:'../productMore/productMore',
images: '../../images/n2.png',
title: "产品服务",
}, {
url:'../case/case',
images: '../../images/n3.png',
title: "典型案例",
}, {
url:'../dynamic/dynamic',
images: '../../images/n4.png',
title: "公司动态",
}, {
url:'../collaborate/collaborate',
images: '../../images/n5.png',
title: "合作共赢",
}, {
url:'../newest/newest',
images: '../../images/n6.png',
title: "最新产品",
}],
"list1": [{
"images": "../../images/b3.jpg",
"url":'../productMore/productMore'
}, {
"images": "../../images/b2.jpg",
"url":'../productMore/productMore'
}, {
"images": "../../images/b1.jpg",
"url":'../productMore/productMore'
}],
},
//事件处理函数
bindViewTap: function () {
}
})
<!--index.wxml-->
<!-- 轮播图 -->
<swiper class='u-wrp-bnr' indicator-dots='true' autoplay='true' interval='3000' duration='1000' circular='true'>
<block wx:for="{{bnrUrl}}" wx:for-index="index">
<swiper-item>
<image src='{{item.url}}' class='u-img-slide' mode='aspectFill'></image>
</swiper-item>
</block>
</swiper>
<!-- center -->
<view class="first-header">
<view wx:for='{{list}}' class="f-h-content" >
<navigator url="{{item.url}}" class="content" >
<image src="{{item.images}}" class="images"></image>
<view class="content-title">{{item.title}}</view>
</navigator>
</view>
</view>
<navigator wx:for="{{list1}}" url="{{item.url}}">
<view class="center-photo">
<image src="{{item.images}}"></image>
</view>
</navigator>
/**index.wxss**/
.u-wrp-bnr {
width: 100%;
height: 300rpx;
display: block;
position: relative;
background: #f0f0f0;
}
.u-img-slide {
width: 100%;
height: inherit;
}
.center-top {
width: 100%;
height: 300rpx;
background-color: aqua;
position: absolute;
}
.first-header {
width: 100%;
padding: 25rpx 0;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
.f-h-content {
margin: 10rpx 30rpx;
}
.content {
width: 65px;
padding: 20rpx 30rpx;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.content-title {
font-size: 28rpx;
}
.images {
width: 50px;
height: 50px;
}
.center-photo>image{
width: 100%;
height: 400rpx;
}
<!--pages/product/product.wxml-->
<view class="product">
<view wx:for='{{proList}}' class="product-detail">
<image src="{{item.url}}" class="p-d-image"></image>
<view class="p-d-bor"></view>
<view class="p-d-title">{{item.title}}</view>
<view class="p-d-bor1"></view>
<view class="p-d-detail">{{item.detail}}</view>
</view>
</view>
/* pages/product/product.wxss */
.product {
/* width: 100%; */
display: flex;
flex-direction: column;
}
.product-detail {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
.p-d-bor {
width: 100%;
height: 40rpx;
background-color: #e7e7e7;
}
.p-d-image {
width: 100%;
}
.p-d-title {
padding: 30rpx 0;
font-size: 40rpx;
color: #e7e7e7;
}
.p-d-bor1 {
width: 100%;
color: #e7e7e7;
border-bottom: 1px solid #e7e7e7;
}
.p-d-detail {
align-items: center;
padding: 30rpx ;
font-size:30rpx;
color: #8f8f8f;
}
data: {
"proList":[{
url:'../../images/f1.jpg',
title:"01商品详情",
detail:"维意风格「郁金飘香」，以纯白色、深棕色为主，整体感觉典雅、细腻。该风格的面板是“胡桃木+白牡丹吸塑”，融合了现代与中式的设计风格，在款式和色调上强调简约‘舒适、温馨。此设计去繁就简、张弛有度，体现了现代人追求简约精致的高质量生活理念。"
},
{
url:'../../images/f2.jpg',
title:"02商品详情",
detail:"维意风格「阿尔卑斯」，以奶白色、木黄色为主，整体感觉清新素雅。改风格的面板是“白蜡木+香雪意境吸塑”组合，共同营造淡雅的意境。此设计强调结构简单与功能舒适和实用，略偏简欧风格，着重在于突显出装饰主义风味的古典质感，因此简约而不失格调。"
}
]
},
<!--pages/contact/contact.wxml-->
<view class="contact">
<!-- 图片 -->
<view wx:for="{{conList}}" class="contact-detail">
<image src="{{item.url}}" class="c-d-image"></image>
</view>
<!-- 联系方式地址 -->
<view class="particular">
<view class="particular-detail">
<image src="../../images/tel.png" class="particular-image"></image>
<view bindtap="online">电话：15354880068（点击拨号）</view>
<view>{{item.particular}}</view>
</view>
<view class="particular-detail">
<image src="../../images/weixin.png" class="particular-image"></image>
<view >微信：泉州大白网络科技）</view>
<view>{{item.particular}}</view>
</view>
<view class="particular-detail">
<image src="../../images/email.png" class="particular-image"></image>
<view >邮件：[email protected]</view>
<view>{{item.particular}}</view>
</view>
<navigator class="particular-title" url="../map/map">
<image src="../../images/map.png" class="particular-image" ></image>
<view >内蒙古呼和浩特市托克托县光明路</view>
<view>{{item.particular}}</view>
</navigator>
</view>
<view class="online" bindtap="online1">在线客服</view>
<view class="explain">@2017 泉州大白网络科技 版权所有</view>
</view>
// pages/contact/contact.js
Page({
/**
* 页面的初始数据
*/
data: {
"conList":[
{
url:'../../images/lx.jpg'
}
],
"lxList":[
{
url:'../../images/tel.png',
title:'电话：15354880068（点击拨号）',
particular:''
},
{
url:'../../images/weixin.png',
title:'微信：泉州大白网络科技',
particular:''
},
{
url:'../../images/email.png',
title:'邮件：[email protected]',
particular:''
},
{
url:'../../images/map.png',
title:'内蒙古呼和浩特市托克托县光明路',
particular:''
}
]
},
online:function () {
wx.showModal({
title: '拨打 13400008888？ 【仅为模拟】',
success (res) {
if (res.confirm) {
console.log('用户点击确定')
} else if (res.cancel) {
console.log('用户点击取消')
}
}
})
},
online1:function () {
wx.showModal({
title: '模拟进入客服会话',
content: '开发者工具暂不支持打开客服会话，请使用真机调试',
success (res) {
if (res.confirm) {
console.log('用户点击确定')
} else if (res.cancel) {
console.log('用户点击取消')
}
}
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
wx.showLoading({
title: '加载中',
})
setTimeout(function () {
wx.hideLoading()
}, 150)
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
/* pages/contact/contact.wxss */
.contact {
display: flex;
flex-direction: column;
}
.contact-detail {}
.c-d-image {
width: 100%;
}
.particular {
margin: 40rpx;
}
.particular-detail {
padding: 40rpx;
display: flex;
justify-content: flex-start;
align-items: center;
border-bottom: 1px solid #eeeded;
}
.particular-image {
width: 30rpx;
height: 30rpx;
padding-right: 20rpx;
}
.particular-title{
padding: 40rpx;
display: flex;
justify-content: flex-start;
align-items: center;
border-bottom: 0px solid #eeeded;
}
.online{
width: 90%;
height: 50px;
margin: 30rpx;
background-color: rgb(0, 177, 0);
color: white;
border-radius: 10rpx;
display: flex;
justify-content: center;
align-items: center;
}
.explain{
margin: 50rpx;
display: flex;
justify-content: center;
align-items: center;
color: #cccccc;
}
<view class="product">
<view wx:for='{{proList}}' class="product-detail">
<image src="{{item.url}}" class="p-d-image"></image>
<view class="p-d-detail">{{item.detail0}}</view>
<view class="p-d-detail1">{{item.detail1}}</view>
<view class="p-d-detail1">{{item.detail2}}</view>
</view>
</view>
// pages/company/company.js
Page({
/**
* 页面的初始数据
*/
data: {
"proList":[{
url:'../../images/d1.jpg',
detail0:" 维意定制家具始创于2003年，是佛山维尚家具制造有限公司的核心品牌，公司位于广东佛山南海区大沥镇虹岭工业园博爱东路与虹岭路交界处，是一家集设计、制造、服务于一体的家具企业[1]。由国际影星李冰冰代言。",
detail1:"维意用全屋家私定制实现家居风格的统一，从设计、选材与规格、色彩，到功能、环保与配套升级，每一件家居产品都必须单独定制，但却都是全屋定制体系的构成单元。每个空间都有多种风格主题实现个性的需要，才能称为全屋家私定制。",
detail2:"致力于达到“物超所值的顾客体验”，是维意的经营哲学与愿景。让顾客亲眼看到、亲身体验到产品和服务所能给他带来的价值。让顾客弄清这些价值是怎么产生的，又有着怎样的理论依据，并以此来验证每一位顾客所看到或体验到的不是商家玩的噱头而是真正的事实。"
}
]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
wx.setNavigationBarTitle({
title: '公司简介'
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
/* pages/company/company.wxss */
.product {
/* width: 100%; */
display: flex;
flex-direction: column;
}
.product-detail {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
.p-d-image {
width: 100%;
height: 350rpx;
}
.p-d-detail {
align-items: center;
padding: 35rpx 35rpx 0 35rpx;
font-size:30rpx;
color: #8f8f8f;
text-indent: 25px;
}
.p-d-detail1 {
align-items: center;
padding:0 35rpx ;
font-size:30rpx;
color: #8f8f8f;
text-indent: 25px;
}
中间其他介绍页面参考公司简介即可。