CBMLS

README.md

@@ -0,0 +1,23 @@
+# nuxt-demo
+
+> Nuxt.js project
+
+## Build Setup
+
+``` bash
+# install dependencies
+$ npm install # Or yarn install
+
+# serve with hot reload at localhost:3000
+$ npm run dev
+
+# build for production and launch server
+$ npm run build
+$ npm start
+
+# generate static project
+$ npm run generate
+```
+
+For detailed explanation on how things work, checkout the [Nuxt.js docs](https://github.com/nuxt/nuxt.js).
+

api/axios.js

@@ -0,0 +1,16 @@
+import axios from 'axios'
+
+export default axios.create({
+  timeout: 120000,
+  transformResponse: [function (data) {
+    if (typeof data === 'string') {
+      data = data.replace(/\+/g, '%20')
+      try {
+        data = JSON.parse(decodeURIComponent(data))
+      } catch (e) {
+        // donothing
+      }
+    }
+    return data
+  }]
+})

api/jc.content.sdk.js

@@ -0,0 +1,485 @@
+import axios from 'axios'
+
+
+export default class ContentSdk {
+  constructor(contentDomain, timeout) {
+    this.axiosInstance = axios.create({
+      // baseURL: contentDomain || 'http://api.youpuglobal.com',
+      baseURL: 'http://api.youpuglobal.com',
+      timeout: timeout || 15000,
+      transformResponse:[function(data){
+        if (typeof data === 'string') {
+          data = data.replace(/\+/g, '%20')
+          try {
+            data = JSON.parse(decodeURIComponent(data))
+          } catch (e) {
+            // donothing
+          }
+        }
+        return data
+      }]
+    })
+  }
+
+  // 根据分类获取内容列表
+  getContentListByType ({type1Code, type2Code, productCode, pageNum, pageSize, onlyType1, userId, channelId, sort, sortType}) {
+    return new Promise((resolve, reject) => {
+      this.axiosInstance({
+        url: 'content_list_by_type_query',
+        method: 'post',
+        data: {
+          type1Code,
+          type2Code,
+          productCode,
+          pageNum,
+          pageSize,
+          onlyType1,
+          sort,
+          sortType,
+          userId,
+          channelId
+        }
+      })
+        .then(response => {
+          resolve(response)
+        })
+        .catch(error => {
+          reject(error)
+        })
+    })
+  }
+
+  // 获取分类1列表及分类1内容
+  getType1ListAndContentList ({pageNum, pageSize, productCode, channelId}) {
+    return new Promise((resolve, reject) => {
+      this.axiosInstance({
+        url: 'type1_with_content_query',
+        method: 'post',
+        data: {
+          pageNum,
+          pageSize,
+          productCode,
+          channelId
+        }
+      })
+        .then(response => {
+          resolve(response)
+        })
+        .catch(error => {
+          reject(error)
+        })
+    })
+  }
+
+  // 获取分类2列表及分类2内容
+  getType2ListAndContentList ({pageNum, pageSize, productCode, channelId}) {
+    return new Promise((resolve, reject) => {
+      this.axiosInstance({
+        url: 'type2_with_content_query',
+        method: 'post',
+        data: {
+          pageNum,
+          pageSize,
+          productCode,
+          channelId
+        }
+      })
+        .then(response => {
+          resolve(response)
+        })
+        .catch(error => {
+          reject(error)
+        })
+    })
+  }
+
+  // 获取分类1列表
+  getType1List ({pageNum, pageSize, productCode, channelId}) {
+    return new Promise((resolve, reject) => {
+      this.axiosInstance({
+        url: 'type1_query',
+        method: 'post',
+        data: {
+          pageNum,
+          pageSize,
+          productCode,
+          channelId
+        }
+      })
+        .then(response => {
+          resolve(response)
+        })
+        .catch(error => {
+          reject(error)
+        })
+    })
+  }
+
+  // 获取分类2列表
+  getType2List ({pageNum, pageSize, productCode, channelId}) {
+    return new Promise((resolve, reject) => {
+      this.axiosInstance({
+        url: 'type2_query',
+        method: 'post',
+        data: {
+          pageNum,
+          pageSize,
+          productCode,
+          channelId
+        }
+      })
+        .then(response => {
+          resolve(response)
+        })
+        .catch(error => {
+          reject(error)
+        })
+    })
+  }
+
+  // 获取内容资源
+  getSource ({productCode, channelId, isMain, contentId}) {
+    return new Promise((resolve, reject) => {
+      this.axiosInstance({
+        url: 'content_source_query',
+        method: 'post',
+        data: {
+          productCode,
+          channelId,
+          isMain,
+          contentId
+        }
+      })
+        .then(response => {
+          resolve(response)
+        })
+        .catch(error => {
+          reject(error)
+        })
+    })
+  }
+
+  // 获取内容（带是否关注等信息）
+  getSourceWithUserAct ({productCode, channelId, isMain, contentId, userId}) {
+    return new Promise((resolve, reject) => {
+      this.axiosInstance({
+        url: 'content_user_action',
+        method: 'post',
+        data: {
+          productCode,
+          channelId,
+          isMain,
+          contentId,
+          userId
+        }
+      })
+        .then(response => {
+          resolve(response)
+        })
+        .catch(error => {
+          reject(error)
+        })
+    })
+  }
+
+  // 内容使用状态上报
+  reportPlayState ({productCode, channelId, isMain, contentId, userId, status}) {
+    return new Promise((resolve, reject) => {
+      this.axiosInstance({
+        url: 'content_report',
+        method: 'post',
+        data: {
+          channelId,
+          productCode,
+          ip: '123',
+          isMain,
+          userId,
+          status,
+          contentId
+        }
+      })
+        .then(response => {
+          resolve(response)
+        })
+        .catch(error => {
+          reject(error)
+        })
+    })
+  }
+
+  // 模糊搜索
+  vagueQuery ({productCode, channelId, isMain, contentNameLike, pageNum, pageSize}) {
+    return new Promise((resolve, reject) => {
+      this.axiosInstance({
+        url: 'content_vague_query',
+        method: 'post',
+        data: {
+          channelId,
+          productCode,
+          isMain,
+          contentNameLike,
+          pageNum,
+          pageSize
+        }
+      })
+        .then(response => {
+          resolve(response)
+        })
+        .catch(error => {
+          reject(error)
+        })
+    })
+  }
+
+  // 付费查询
+  paidQuery ({productCode, channelId, contentId}) {
+    return new Promise((resolve, reject) => {
+      this.axiosInstance({
+        url: 'paid_content_query',
+        method: 'post',
+        data: {
+          productCode,
+          channelId,
+          contentId
+        }
+      })
+        .then(response => {
+          resolve(response)
+        })
+        .catch(error => {
+          reject(error)
+        })
+    })
+  }
+
+  // 页面数据查询
+  pageDataQuery ({productCode, channelId, pageNum, pageSize, pageCode}) {
+    return new Promise((resolve, reject) => {
+      this.axiosInstance({
+        url: 'page_data_by_section_query',
+        method: 'post',
+        data: {
+          productCode,
+          channelId,
+          pageNum,
+          pageSize,
+          pageCode
+        }
+      })
+        .then(response => {
+          resolve(response)
+        })
+        .catch(error => {
+          reject(error)
+        })
+    })
+  }
+
+  // 专区内容查询
+  sectionDataQuery ({productCode}) {
+    console.log(productCode + "哈哈");
+    return new Promise((resolve, reject) => {
+      this.axiosInstance({
+        url: '/show/showInfo',
+        method: 'post',
+        params: {
+            "cityId": productCode,
+        }
+      })
+        .then(response => {
+          resolve(response)
+          console.log(response);
+        })
+        .catch(error => {
+          reject(error)
+        })
+    })
+  }
+
+  // 专区内容查询
+  // sectionDataQuery ({productCode, channelId, pageNum, pageSize, sectionId}) {
+  //   console.log(sectionId + "哈哈");
+  //   return new Promise((resolve, reject) => {
+  //     this.axiosInstance({
+  //       url: 'content_list_of_section_query',
+  //       method: 'post',
+  //       data: {
+  //         productCode,
+  //         channelId,
+  //         pageNum,
+  //         pageSize,
+  //         sectionId
+  //       }
+  //     })
+  //       .then(response => {
+  //         resolve(response)
+  //         console.log(response);
+  //       })
+  //       .catch(error => {
+  //         reject(error)
+  //       })
+  //   })
+  // }
+
+  // 内容使用次数查询
+  contentPlayQuery ({productCode, channelId, contentId}) {
+    return new Promise((resolve, reject) => {
+      this.axiosInstance({
+        url: 'content_play_query',
+        method: 'post',
+        data: {
+          productCode,
+          channelId,
+          contentId
+        }
+      })
+        .then(response => {
+          resolve(response)
+        })
+        .catch(error => {
+          reject(error)
+        })
+    })
+  }
+
+  // 查询用户收藏列表
+  collectListQueryById ({productCode, pageNum, pagesize, objectType, userId}) {
+    return new Promise((resolve, reject) => {
+      this.axiosInstance({
+        baseURL: 'http://content.biedese.cn/data.webapi/',
+        url: 'collect_list_query',
+        method: 'post',
+        data: {
+          productCode,
+          pageNum,
+          pagesize,
+          objectType,
+          userId
+        }
+      })
+        .then(response => {
+          resolve(response)
+        })
+        .catch(error => {
+          reject(error)
+        })
+    })
+  }
+
+  // 根据内容actor查询内容
+  getContentListByActor ({productCode, pageNum, pagesize, channelId, actor}) {
+    return new Promise((resolve, reject) => {
+      this.axiosInstance({
+        url: 'content_list_of_actor_query',
+        method: 'post',
+        data: {
+          productCode,
+          channelId,
+          pageNum,
+          pagesize,
+          actor
+        }
+      })
+        .then(response => {
+          resolve(response)
+        })
+        .catch(error => {
+          reject(error)
+        })
+    })
+  }
+
+  // 查询自内容列表（不带detail）
+  getSubContentsWithoutDetail ({productCode, pageNum, pageSize, channelId, mainId}) {
+    return new Promise((resolve, reject) => {
+      this.axiosInstance({
+        url: 'subId_query',
+        method: 'post',
+        data: {
+          productCode,
+          channelId,
+          pageNum,
+          pageSize,
+          mainId
+        }
+      })
+        .then(response => {
+          resolve(response)
+        })
+        .catch(error => {
+          reject(error)
+        })
+    })
+  }
+
+  // 查看上一集或下一集
+  getSubContentPrevOrNext ({productCode, channelId, mainId, subId, currSubSeq, addSubSeq}) {
+    return new Promise((resolve, reject) => {
+      this.axiosInstance({
+        url: 'content_sub_lastornext',
+        method: 'post',
+        data: {
+          productCode,
+          channelId,
+          mainId,
+          subId,
+          currSubSeq,
+          addSubSeq
+        }
+      })
+        .then(response => {
+          resolve(response)
+        })
+        .catch(error => {
+          reject(error)
+        })
+    })
+  }
+
+  // 根据内容创建者查询内容
+  getContentListByCreator ({productCode, pageNum, pagesize, channelId, creatorAccount}) {
+    return new Promise((resolve, reject) => {
+      this.axiosInstance({
+        url: 'content_list_of_creator_query',
+        method: 'post',
+        data: {
+          productCode,
+          channelId,
+          pageNum,
+          pagesize,
+          creatorAccount
+        }
+      })
+        .then(response => {
+          resolve(response)
+        })
+        .catch(error => {
+          reject(error)
+        })
+    })
+  }
+
+  // 根据多个ID查询多条内容
+  getContentListWithPrecise ({productCode, channelId, contentId, isMian}) {
+    return new Promise((resolve, reject) => {
+      this.axiosInstance({
+        url: 'content_list_precise_query',
+        method: 'post',
+        data: {
+          requestList:[{
+            productCode,
+            channelId,
+            contentId,
+            isMian
+          }]
+        }
+      })
+        .then(response => {
+          resolve(response)
+        })
+        .catch(error => {
+          reject(error)
+        })
+    })
+  }
+}

api/movie.js

@@ -0,0 +1,29 @@
+import ContentSdk from './jc.content.sdk.js'
+
+const contentSdk = new ContentSdk()
+
+export const getHomeData = ({productCode}) => {
+  return contentSdk.sectionDataQuery({productCode})
+}
+
+export const getType1List = ({pageNum, pageSize, productCode, channelId}) => {
+  return contentSdk.getType1List({pageNum, pageSize, productCode, channelId})
+}
+export const getType2List = ({pageNum, pageSize, productCode, channelId}) => {
+  return contentSdk.getType2List({pageNum, pageSize, productCode, channelId})
+}
+export const getContentListByType = ({type1Code, type2Code, productCode, pageNum, pageSize, onlyType1, userId, channelId, sort, sortType}) => {
+  return contentSdk.getContentListByType({type1Code, type2Code, productCode, pageNum, pageSize, onlyType1, userId, channelId, sort, sortType})
+}
+export const getContent = ({productCode, channelId, isMain, contentId}) => {
+  return contentSdk.getSource({productCode, channelId, isMain, contentId})
+}
+export const searchContent = ({productCode, channelId, isMain, contentNameLike, pageNum, pageSize}) => {
+  return contentSdk.vagueQuery({productCode, channelId, isMain, contentNameLike, pageNum, pageSize})
+}
+export const getSubContentsWithoutDetail = ({productCode, pageNum, pageSize, channelId, mainId}) => {
+  return contentSdk.getSubContentsWithoutDetail({productCode, pageNum, pageSize, channelId, mainId})
+}
+export const reportPlayState = ({productCode, channelId, isMain, contentId, userId, status}) => {
+  return contentSdk.reportPlayState({productCode, channelId, isMain, contentId, userId, status})
+}

assets/README.md

@@ -0,0 +1,9 @@
+# ASSETS
+
+This directory contains your un-compiled assets such as LESS, SASS, or JavaScript.
+
+More information about the usage of this directory in the documentation:
+https://nuxtjs.org/guide/assets#webpacked
+
+**This directory is not required, you can delete it if you don't want to use it.**
+

assets/css/base.css

@@ -0,0 +1,98 @@
+@charset "UTF-8";
+/*css 初始化 */
+html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img { margin:0; padding:0; }
+fieldset, img,input,button { border:none; padding:0;margin:0;outline-style:none; }
+ul, ol { list-style:none; }
+input { padding-top:0; padding-bottom:0; font-family: "SimSun","宋体";}
+select, input { vertical-align:middle;}
+select, input, textarea { font-size:12px; margin:0; }
+textarea { resize:none; } /*防止拖动*/
+img {border:0;	vertical-align:middle; }  /*  去掉图片低测默认的3像素空白缝隙*/
+table { border-collapse:collapse; }
+body {
+  font: 14px/150% "Hiragino Sans GB","Microsoft Yahei UI";
+  /*font:14px/150% "Microsoft YaHei","\5b8b\4f53";*/
+  /*font: 14px/150% "MicrosoftYaHei";*/
+  color:#898989;
+  background: #fff;
+}
+.clearfix:before,.clearfix:after {
+  content:"";
+  display:table;
+}
+.clearfix:after{clear:both;}
+.clearfix{
+  *zoom:1;/*IE/7/6*/
+}
+p{
+  font-size: 14px;
+  color: #333;
+}
+a {color:#898989; text-decoration:none; user-select:none;outline: none}
+h1,h2,h3,h4,h5,h6 {text-decoration:none;font-weight:normal;font-size:100%;}
+s,i,em,b{font-style:normal;text-decoration:none;font-weight: normal}
+
+/*公共类*/
+.fl {
+  float:left
+}
+.fr {
+  float:right
+}
+.al {
+  text-align:left
+}
+.ac {
+  text-align:center
+}
+.ar {
+  text-align:right
+}
+.hide {
+  display:none
+}
+.w1200{
+  width: 1200px;
+  margin: 0 auto;
+}
+.left{
+  float: left;
+}
+.right{
+  float: right;
+}
+.m0{
+  margin: 0!important;
+}
+.p0{
+  padding: 0!important;
+}
+.b0{
+  border: none!important;
+}
+.red{
+  color: #D30006;
+  font-weight: bold;
+}
+.blue{
+  color: #537AC5;
+  font-weight: bold;
+}
+.tr{
+  text-align: right!important;
+}
+a[title="站长统计"]{
+  visibility: hidden;
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+
+
+
+
+
+
+
+
+

assets/css/listBox.less

@@ -0,0 +1,245 @@
+/*列表*/
+.listWrap{
+    width: 1200px;
+    margin: 0 auto;
+    h2{
+        color: #393f47;
+        font-size: 20px;
+        font-family: PingFangSC-Medium;
+        font-weight: 500;
+        margin: 30px 0;
+        span{
+            color: #2f7af7;
+            margin: 0 10px;
+        }
+    }
+}
+
+/*左侧列表*/
+.listBoxL{
+    float: left;
+    width: 960px;
+    border-top: 2px solid #2f7af7;
+    .listBox{
+        height: 214px;
+        padding: 20px 0;
+        border-bottom: 1px solid #e5e5e5;
+        cursor: pointer;
+        .listImg{
+            width: 232px;
+            height: 174px;
+            border-radius: 4px;
+            float: left;
+        }
+        dl{
+            width: 688px;
+            height: 174px;
+            float: right;
+            position: relative;
+            h3{
+                line-height: 33px;
+                margin-bottom: 20px;
+                .span1{
+                    font-size: 24px;
+                    color: #393f47;
+                    font-weight: 500;
+                    font-family: PingFangSC-Medium;
+                    cursor: pointer;
+                    &:hover{
+                        color: #2f7af7;
+                    }
+                }
+                .span2{
+                    color: #393F47;
+                    font-size: 14px;
+                    font-family: PingFangSC-Regular;
+                    font-weight: 400;
+                    position: relative;
+                    top: -3px;
+                    left: 10px;
+                }
+            }
+            dt{
+                width: 450px;
+                float: left;
+                ul{
+                    width: 450px;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                    li{
+                        font-size: 14px;
+                        font-family: PingFangSC-Regular;
+                        font-weight: 400;
+                        color: #585F6B;
+                        line-height: 22px;
+                        margin-bottom: 17px;
+                        span{
+                            margin-right: 10px;
+                            font-size: 14px;
+                        }
+                    }
+                }
+            }
+            dd{
+                width: 238px;
+                height: 78px;
+                float: right;
+                text-align: right;
+                .p1{
+                    font-size: 32px;
+                    color: #f16752;
+                    font-family: PingFangSC-Semibold;
+                    font-weight: 600;
+                    margin: 5px 0px 10px 0px;
+                    span{
+                        font-size: 16px;
+                        margin-left: 10px;
+                        font-family: PingFangSC-Medium;
+                        font-weight: 500;
+                        position: relative;
+                        top: -4px;
+                        left: 0px;
+                    }
+                }
+                .p2{
+                    font-size: 14px;
+                    font-family: PingFangSC-Regular;
+                    font-weight: 400;
+                    color: #9f9fa8;
+                    span{
+                        margin-left: 8px;
+                    }
+                }
+                .onlyTxt{
+                    font-size: 32px;
+                    color: #f16752;
+                    font-family: PingFangSC-Semibold;
+                    font-weight: 600;
+                    margin-top: 26px;
+                    span{
+                        font-size: 16px;
+                        margin-left: 10px;
+                        font-family: PingFangSC-Medium;
+                        font-weight: 500;
+                        position: relative;
+                        top: -4px;
+                        left: 0px;
+                    }
+                }
+            }
+            .listBoxBottom{
+                width: 688px;
+                position: absolute;
+                bottom: 0px;
+                left: 0px;
+                ul{
+                    width: 688px;
+                    li{
+                        float: left;
+                        width: 70px;
+                        height: 28px;
+                        text-align: center;
+                        line-height: 28px;
+                        color: #96a3bb;
+                        font-size: 12px;
+                        background: #f4f6fb;
+                        margin-right: 10px;
+                    }
+                }
+                div{
+                    padding: 2px 12px;
+                    border: 1px solid #e5e5e5;
+                    line-height: 20px;
+                    border-radius: 15px;
+                    float: right;
+                    box-sizing: border-box;
+                    p{
+                        float: left;
+                        font-size: 14px;
+                        font-family: PingFangSC-Regular;
+                        font-weight: 400;
+                        color: #585f6b;
+                    }
+                    .p3{
+                        margin-right: 16px;
+                        span{
+                            color: #f16752;
+                            font-family: PingFangSC-Regular;
+                            font-weight: 400;
+                        }
+                    }
+
+                }
+            }
+        }
+    }
+}
+
+/*右侧推荐*/
+.listBoxR{
+    float: right;
+    width: 184px;
+    h3{
+        font-size: 18px;
+        font-family: PingFangSC-Medium;
+        font-weight: 500;
+        color: #393F47;
+        margin-bottom: 20px;
+    }
+    dl{
+        width: 184px;
+        margin-bottom: 24px;
+        dt{
+            width: 184px;
+            height: 138px;
+            position: relative;
+            cursor: pointer;
+            img{
+                width: 184px;
+                height: 138px;
+                border-radius: 4px;
+            }
+            p{
+                position: absolute;
+                right: 0px;
+                top: 0px;
+                color: #fff;
+                font-size:12px;
+                font-family:PingFangSC-Regular;
+                font-weight:400;
+                border-radius:0px 4px 0px 4px;
+                background: rgba(0,0,0,0.5);
+                padding: 1px 4px;
+            }
+        }
+        dd{
+            h5{
+                width: 184px;
+                height: 22px;
+                font-size: 14px;
+                font-family: PingFangSC-Regular;
+                font-weight: 400;
+                color: #393f47;
+                line-height: 22px;
+                cursor: pointer;
+                margin: 6px 0px;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+            }
+            p{
+                font-size:14px;
+                font-family:PingFangSC-Medium;
+                font-weight:500;
+                color: #585f6b;
+                line-height: 20px;
+                span{
+                    color: #f16752;
+                    margin-right: 10px;
+                }
+            }
+        }
+    }
+}
+

assets/css/shopDetails.less

@@ -0,0 +1,609 @@
+.shopSellDel{
+    width: 100%;
+}
+.detailTop{
+    width: 100%;
+    height: 260px;
+    background: #f7f8f8;
+    .detailTopMain{
+        width: 1200px;
+        height: 270px;
+        margin: 0 auto;
+        .ul1{
+            height: 90px;
+            padding-top: 30px;
+            li{
+                float: left;
+                color: #9f9fa8;
+                font-size: 12px;
+                font-family: MicrosoftYaHei;
+                a{
+                    color: #9f9fa8;
+                    font-size: 12px;
+                    font-family: MicrosoftYaHei;
+                }
+                span{
+                    margin: 0px 6px;
+                    position: relative;
+                    top: -1px;
+                    left: 0px;
+                }
+            }
+        }
+        h2{
+            color: #393f47;
+            font-size: 30px;
+            font-family: PingFangSC-Medium;
+            font-weight: 500;
+        }
+        div{
+            margin: 20px 0px 30px;
+            p{
+                float: left;
+                margin-right: 60px;
+                font-size:16px;
+                font-family:PingFangSC-Medium;
+                font-weight:500;
+                color:rgba(88,95,107,1);
+                line-height:22px;
+                span{
+                    color: #f16752;
+                    font-size: 24px;
+                    font-family: PingFangSC-Medium;
+                    font-weight: 500;
+                    color: #f16752;
+                    line-height: 33px; 
+                    margin-right: 10px;
+                    position: relative;
+                    top: 1px;
+                    left: 0px;
+                }
+            }
+        }
+        .ul2{
+            li{
+                background: #e7edf3;
+                float: left;
+                color: #96a3bb;
+                font-size: 12px;
+                font-family: PingFangSC-Regular;
+                font-weight: 400;
+                text-align: center;
+                line-height: 18px;
+                padding: 5px 10px;
+                margin-right: 10px;
+            }
+        }
+    }
+}
+.detailBox{
+    width: 1200px;
+    margin: 30px auto 80px;
+}
+.detailBoxL{
+    width: 700px;
+    height: 200px;
+    float: left;
+    .detailNav{
+        width: 700px;
+        height: 56px;
+        background: #f7f8f8; 
+        &.fixed-top {
+            position: fixed;
+            top: 0;
+            left: auto;
+            z-index: 999;
+        }
+        ul{
+            width: 700px;
+            height: 56px;
+            li{
+                width: 116px;
+                height: 56px;
+                text-align: center;
+                line-height: 56px;
+                font-size: 16px;
+                font-family: PingFangSC-Medium;
+                font-weight: 500;
+                float: left;
+                cursor: pointer;
+            }
+            .cur{
+                background: #2f7af7;
+                color: #fff;
+            }
+        }
+    }
+    .titleH3{
+        font-size: 24px;
+        font-family: PingFangSC-Semibold;
+        font-weight: 600;
+        color: #393f47;
+        margin: 50px 0 30px;
+    }
+    /* 基本信息 */
+    .info{
+        width: 700px;
+        dl{
+            width: 350px;
+            line-height: 22px;
+            margin-top: 20px;
+            float: left;
+            dt{
+                width: 110px;
+                float: left;
+                color: #9f9fa8;
+                font-size: 16px;
+                font-family: PingFangSC-Regular;
+                font-weight: 400;
+            }
+            dd{
+                color: #393f47;
+                font-size: 16px;
+                font-family: PingFangSC-Regular;
+                font-weight: 400;
+                float: left;
+            }
+        }
+        .dlTop{
+            margin-top: 0px;
+        }
+    }
+    /* 商铺描述 */
+    .shop{
+        width: 700px;
+        dl{
+            dt{
+                background: #9199a1;
+                float: left;
+                margin-right: 58px;
+                text-align: center;
+                padding: 6px 10px;
+                p{
+                    color: #fff;
+                    font-size: 16px;
+                    font-family: PingFangSC-Medium;
+                    font-weight: 500;
+                }
+            }
+            dd{
+                width: 590px;
+                float: left;
+                padding-bottom: 20px;
+                border-bottom: 1px solid #e5e5e5;
+                font-size: 14px;
+                font-family: PingFangSC-Regular;
+                font-weight: 400;
+                color: #393f47;
+                text-align: justify;
+            }
+        }
+    }
+    /* 地理位置 */
+    .seat{
+        width: 700px;
+        .mapWrap{
+            width: 700px;
+            height: 350px;
+        } 
+    }
+    .pic{
+        width: 700px;
+        ul{
+            width: 720px;
+            overflow: hidden;
+            li{
+                width: 340px;
+                height: 255px;
+                float: left;
+                margin-right: 20px;
+                margin-bottom: 20px;
+                img{
+                    width: 340px;
+                    height: 255px;
+                    border-radius: 4px;
+                }
+            }
+        }
+    }
+}
+.detailBoxR{
+    width: 450px;
+    float: right;
+    .card{
+        width: 450px;
+        height: 525px;
+        border: 1px solid #e5e5e5;
+        border-radius: 6px;
+        padding: 30px 36px;
+        .cardTop{
+            dl{
+                height: 90px;
+                float: left;
+                dt{
+                    font-size: 18px;
+                    font-family: PingFangSC-Medium;
+                    font-weight: 500;
+                    color: #585f6b;
+                    line-height: 40px;
+                    margin-bottom: 6px;
+                    span{
+                        font-size: 32px;
+                        font-family: PingFangSC-Semibold;
+                        font-weight: 600;
+                        color: #393f47;
+                    }
+                }
+                dd{
+                    font-size: 14px;
+                    font-family: PingFangSC-Regular;
+                    font-weight: 400;
+                    color: #585f6b;
+                    line-height: 20px;
+                }
+            }
+            .dl1{
+                width: 225px;
+                
+            }
+            .dl2{
+               
+            }
+        }
+        .cardBar{
+            width: 378px;
+            height: 36px;
+            border-radius: 18px;
+            box-sizing: border-box;
+            background: #f7f7f8;
+            position: relative;
+            i{
+                display: block;
+                width:0;
+                height:0;
+                border-left: 6px solid transparent;
+                border-right: 6px solid transparent;
+                border-bottom: 10px solid #f16752;
+                position: absolute;
+                left: 22px;
+                top: -10px;
+            }
+            p{
+                float: left;
+            }
+            .p1{
+                width: 148px;
+                height: 36px;
+                background: #f16752;
+                border-radius: 16px 0 0 16px;
+                text-align: center;
+                line-height: 36px;
+                color: #fff;
+                font-size: 16px;
+                font-family: PingFangSC-Medium;
+                font-weight: 500;
+            }
+            .p2{
+                color: #f16752;
+                padding-left: 18px;
+                font-size: 18px;
+                font-family: PingFangSC-Medium;
+                font-weight: 500;
+                line-height: 36px;
+            }
+        }
+        .cardUl{
+            width: 378px;
+            height: 188px;
+            margin-top: 30px;
+            border-bottom: 1px solid #e5e5e5;
+            li{
+                height: 38px;
+                .span1{
+                    display: block;
+                    float: left;
+                    width: 96px;
+                    font-size:14px;
+                    font-family: PingFangSC-Regular;
+                    font-weight: 400;
+                    color: #9f9fa8;
+                    line-height: 22px;
+                }
+                .span2{
+                    display: block;
+                    float: left;
+                    width: 275px;
+                    font-size: 14px;
+                    font-family: PingFangSC-Regular;
+                    font-weight: 400;
+                    color: #393f47;
+                    line-height: 22px;
+                }
+            }
+        }
+        .cardFoot{
+            margin-top: 28px;
+            dt{
+                width: 88px;
+                height: 100px;
+                background: #eee;
+                float: left;
+            }
+            dd{
+                float: left;
+                margin-left: 26px;
+                h3{
+                    font-size: 22px;
+                    font-family: PingFangSC-Medium;
+                    font-weight: 500;
+                    color: #393f47;
+                    line-height: 30px;
+                    margin: 16px 0;
+                }
+                p{
+                    font-size: 16px;
+                    font-family: PingFangSC-Medium;
+                    font-weight: 500;
+                    color: #2f7af7;
+                    line-height: 22px;
+                    cursor: pointer;
+                    span{
+                        font-size: 14px;
+                        margin-right: 8px;
+                        position: relative;
+                    }
+                }
+            }
+        } 
+    }
+    .record{
+        width: 450px;
+        height: 548px;
+        border: 1px solid #e5e5e5;
+        border-radius: 6px;
+        padding: 30px 36px 0px;
+        margin-top: 30px;
+        .recordTop{
+            dt{
+                font-size:22px;
+                font-family:PingFangSC-Medium;
+                font-weight:500;
+                color: #393f47;
+                float: left;
+                line-height: 30px;
+            }
+            dd{
+                float: right;
+                p{
+                    width: 116px;
+                    height: 32px;
+                    background: #2f7af7;
+                    line-height: 32px;
+                    text-align: center;
+                    border-radius: 16px;
+                    color: #fff;
+                    font-size: 14px;
+                    font-family: PingFangSC-Regular;
+                    font-weight: 400;
+                    cursor: pointer;
+                    float: left;
+                    margin-left: 10px;
+                }
+                .hoverBg{
+                    &:hover{
+                        background: #2a6ddd;
+                    }
+                }
+                .p1{
+                    height: 32px;
+                    font-size: 14px;
+                    font-family: PingFangSC-Regular;
+                    font-weight: 400;
+                    color: #585f6b;
+                    line-height: 30px;
+                    background: #fff;
+                    border: 1px solid #e5e5e5;
+                    border-radius: 16px;
+                    &:hover{
+                        color: #2a6ddd;
+                    }
+                }
+                span{
+                    color: #bbc1cc;
+                    font-size: 14px;
+                    font-family: PingFangSC-Medium;
+                    font-weight: 500;
+                    line-height: 30px;
+                }
+            }
+        }
+        .recordNav{
+            width: 378px;
+            padding: 30px 0px 14px; 
+            border-bottom: 1px solid #e5e5e5;
+            overflow: hidden;
+            ul{
+                width: 430px;
+                li{
+                    float: left;
+                    margin-right: 30px;
+                    font-size: 16px;
+                    font-family: PingFangSC-Medium;
+                    font-weight: 500;
+                    color: #585f6b;
+                    line-height: 22px;
+                    cursor: pointer;
+                }
+                .navCur{
+                    color: #2f7af7;
+                }
+            }
+        }
+        .recordMain{
+            width: 378px;
+            height: 416px;
+            overflow-y: auto;
+            .recordBox{
+                width: 378px;
+                overflow: hidden;
+                margin-top: 30px;
+                dl{
+                    width: 378px;
+                    padding-left: 34px;
+                    border-left: 3px solid #e5e5e5;
+                    position: relative;
+                    margin-left: 6px;
+                    padding-bottom: 20px;
+                    i{
+                        display: block;
+                        width: 15px;
+                        height: 15px;
+                        background: #fff;
+                        border: 3px solid #ddd;
+                        border-radius: 50%;
+                        position: absolute;
+                        left: -9px;
+                        top: 0px;
+                    }
+                    dt{
+                        h5{
+                            width: 330px;
+                            font-size: 14px;
+                            font-family: PingFangSC-Regular;
+                            font-weight: 400;
+                            color: #585f6b;
+                            line-height: 20px;
+                            position: relative;
+                            top: -2px;
+                            left: 0px;
+                            text-align: justify;
+                        }
+                        p{
+                            font-size: 12px;
+                            font-family: PingFangSC-Regular;
+                            font-weight: 400;
+                            color: #9f9fa8;
+                            line-height: 17px;
+                            margin: 6px 0px 12px;
+                        }
+                    }
+                    dd{
+                        width: 388px;
+                        span{
+                            display: inline-block;
+                            width: 102px;
+                            height: 78px;
+                            background: #eee;
+                            margin-right: 8px;
+                            img{
+                                width: 100%;
+                                height: 100%;
+                            }
+                        }
+                    }
+
+
+                }
+            }
+        }
+    }
+}
+
+/* 轮播图 */
+.lbt{
+    width: 700px;
+    height: 525px;
+    margin-bottom: 20px;
+}
+.shop-lbt {
+    width: 700px;
+    height: 525px;
+    margin: 0 auto;
+    position: relative;
+    .shop-left{
+        width: 700px;
+        .big{
+            width: 700px;
+            height: 525px;
+            position: relative;
+            ul{
+                width: 700px;
+                height: 525px;
+                /*position: relative;*/
+                li{
+                    /*position: absolute;
+                    left: 0;
+                    top: 0;*/
+                    img{
+                        width: 700px;
+                        height: 525px;
+                    }
+                }
+            }
+        }
+        .small {
+            width: 700px;  margin: 0 auto;background: rgba(0,0,0,0.6); 
+            position: absolute;
+            bottom: 0px;
+            left: 0px;
+            .activity{
+                width: 637px;
+                height: 115px;
+                overflow:hidden;
+                position:relative;
+                margin-left: 30px;
+                ol{
+                    height: 115px;
+                    overflow: hidden;
+                    li{
+                        float: left;
+                        width: 113px;
+                        height: 78px;
+                        overflow: hidden;
+                        margin: 18px 7px;
+                        opacity: 0.6;
+                        img{
+                            width: 100%;
+                            height: 100%;
+                        }
+                    }
+                    .isOpacity{
+                        opacity: 1;
+                    }
+                }
+            }
+            .pg_left {
+                width: 30px;
+                height: 124px;
+                position: absolute;
+                left: 0px;
+                top: 0px;
+                color: #fff;
+                img{
+                    position: absolute;
+                    top: 44px;
+                    left: 10px;
+                }
+            }
+            .pg_right {
+                width: 30px;
+                height: 124px;
+                position: absolute;
+                right: 0px;
+                top: 0px;
+                color: #fff;
+                img{
+                    position: absolute;
+                    top: 44px;
+                    left: 2px;
+                }
+            }
+            .ps_pre{
+                cursor: pointer;
+            }
+            .ps_next{
+                cursor: pointer;
+            }
+        }
+    }
+}

assets/css/shopNav.less

@@ -0,0 +1,221 @@
+input::-webkit-input-placeholder{
+    color: #9f9fa8;
+}
+input::-moz-placeholder{   /* Mozilla Firefox 19+ */
+    color: #9f9fa8;
+}
+input:-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
+    color: #9f9fa8;
+}
+input:-ms-input-placeholder{  /* Internet Explorer 10-11 */
+    color: #9f9fa8;
+}
+/* 头部导航 */
+.shopNavWrap{
+    width: 100%;
+    height: 144px;
+    background: #fff;
+    .shopNavDl{
+        width: 1200px;
+        height: 102px;
+        margin: 0 auto;
+        dt{
+            float: left;
+            font-size: 34px;
+            font-family: PingFangSC-Semibold;
+            font-weight: 600;
+            line-height: 100px;
+            span{
+                color: #2F7af7;
+            }
+        }
+        dd{
+            width: 590px;
+            float: right;
+            margin-top: 30px;
+            .searchInput{
+                width: 498px;
+                height: 42px;
+                border: 2px solid #2f7af7;
+                float: left;
+                border-radius:2px 0px 0px 2px;
+                color: #393f47;
+                font-size: 14px;
+                font-family: PingFangSC-Regular;
+                padding-left: 20px;
+            }
+            .searchBtn{
+                float: left;
+                width: 92px;
+                height: 42px;
+                background: #2f7af7;
+                color: #fff;
+                font-size: 14px;
+                line-height: 42px;
+                text-align: center;
+                border-radius: 0px 2px 2px 0px;
+                cursor: pointer;
+                font-family: PingFangSC-Regular;
+                span{
+                    font-size: 16px;
+                    position: relative;
+                    right: 5px;
+                    top: 1px;
+                }
+            }
+        }
+    }
+    .shopNavList{
+        width: 100%;
+        height: 42px;
+        background: #2f7af7;
+        .shopNavListUl{
+            width: 1200px;
+            margin: 0 auto;
+            li{
+                float: left;
+                padding: 0 24px;
+                color: #fff;
+                font-family: PingFangSC-Regular;
+                line-height: 42px;
+                cursor: pointer;
+                position: relative;
+                a{
+                    color: #fff;
+                    font-size: 16px;
+                    font-family: PingFangSC-Regular;
+                    font-weight: 400; 
+                }
+                div{
+                    background: #fff;
+                    border-left: 1px solid #e5e5e5;
+                    border-right: 1px solid #e5e5e5;
+                    position: absolute;
+                    left: 0px;
+                    top: 42px;
+                    p{
+                        line-height: 42px;
+                        text-align: center;
+                        color: #393f47;
+                        border-bottom: 1px solid #e5e5e5;
+                        a{
+                            color: #393f47;
+                            font-size: 16px;
+                            font-family: PingFangSC-Regular;
+                            font-weight: 400;
+                            &:hover{
+                                color: #2F7AF7;
+                            }
+                        }
+                    }
+                }
+                &:hover{
+                    background: rgba(0,0,0,0.1);
+                }
+            }
+            .li1{
+                position: relative;
+                div{
+                    width: 112px;
+                    display: none;
+                    p{
+                        width: 111px;
+                    }
+                }
+                &:hover{
+                    div{
+                        display: block;
+                    }    
+                }
+            }
+            .li2{
+                position: relative;
+                div{
+                    width: 128px;
+                    display: none;
+                    p{
+                        width: 127px;
+                    }
+                }
+                &:hover{
+                    div{
+                        display: block;
+                    }    
+                }
+            }
+            .changeBg{
+                background: rgba(0,0,0,0.1);
+            }
+        }
+    }
+}
+
+/* 筛选条件 */
+.shopBox{
+    width: 1200px;
+    margin: 0 auto;
+    border-bottom: 1px solid #e5e5e5;
+    ul{
+        margin: 20px 0 30px;
+        li{
+            color: #9f9fa8;
+            font-size: 12px;
+            float: left;
+            cursor: pointer;
+            span{
+                font-size: 8px;
+                margin: 0 6px;
+            }
+        }
+    }
+    dl{
+        width: 1200px;
+        dt{
+            float: left;
+            width: 68px;
+            font-size: 14px;
+            font-family: PingFangSC-Medium;
+            font-weight: 500;
+            color: #393f47;
+        }
+        dd{
+            float: left;
+            width: 1132px;
+            span{
+                float: left;
+                display: inline-block;
+                margin-right: 30px;
+                cursor: pointer;
+                color: #393f47;
+                font-size: 14px;
+                margin-bottom: 20px;
+            }
+        }
+        div{
+            width: 1132px;
+            border: 1px solid #e5e5e5;
+            background: #f7f8f8;
+            float: right;
+            padding: 16px 10px 6px 20px;
+            box-sizing: border-box;
+            margin-bottom: 20px;
+            border-radius: 2px;
+            span{
+                display: inline-block;
+                float: left;
+                margin-right: 30px;
+                margin-bottom: 10px;
+                cursor: pointer;
+            }
+        }
+    }
+}
+
+/*分页*/
+.page{
+    width: 100%;
+    margin: 0 auto;
+    text-align: center;
+    padding: 40px 0;
+}
+

components/Nav/Nav.vue

@@ -0,0 +1,363 @@
+<template>
+<div class="navWrap">
+    <div class="nav">
+        <ul>
+            <li>首页</li>
+            <li><a href="/shopsOffices/shopSell" :class="{active: isActive1}">商铺写字楼</a></li>
+            <li>客源列表</li>
+            <li>房源发布</li>
+            <li>客源发布</li>
+            <li>个人委托</li>
+            <li><a href="/brand" :class="{active: isActive6}">加盟品牌</a></li>
+            <li>商办评估</li>
+            <li>个人管理</li>
+        </ul>
+        <div class="login">
+            <p class="p1" @click="showLoginFun()">登录</p>
+            <p @click="showLoginFun()">注册</p>
+        </div>
+    </div>
+    <div class="loginWrap" v-if="showLogin">
+        <div class="loginBox">
+            <ul class="loginBoxTop clearfix">
+                <li>登录</li>
+                <li>注册</li>
+                <span class="iconfont" @click="closeBtn()">&#xe60a;</span>
+            </ul>
+            <!-- 登录 -->
+            <ul class="loginList">
+                <li>
+                    <input type="tel" placeholder="请输入您的手机号" v-model="phoneVal" maxlength="11" onkeyup="this.value=this.value.replace(/\D/g,'')">
+                    <!-- <span>您输入的手机号有误</span> -->
+                </li>
+
+                <li>
+                    <input type="text" placeholder="请输入密码" v-model="passwordVal">
+                    <!-- <i class="iconfont passwordIcon">&#xe60f;</i> -->
+                    <!-- <i class="iconfont passwordIcon">&#xe610;</i> -->
+
+                    <i class="iconfont passwordIcon">&#xe61a;</i>
+
+                   
+                    <!-- <span>密码最短6个字符，最长25个字符</span> -->
+                </li>
+
+                <dl class="loginListDl">
+                    <dt>没有账号，<span>去注册</span></dt>
+                    <dd>忘记密码</dd>
+                </dl>
+
+                <div class="loginBtn">登&nbsp;录</div>
+
+            </ul>
+            <!-- 注册 -->
+<!--             <ul class="registration">
+                <li>
+                    <input type="tel" placeholder="请输入您的手机号" v-model="phoneVal" maxlength="11" onkeyup="this.value=this.value.replace(/\D/g,'')">
+                    <span>您输入的手机号有误</span>
+                </li>
+
+                <li>
+                    <dl>
+                        <dt><input type="tel" placeholder="请输入验证码" v-model="phoneVal" maxlength="11" onkeyup="this.value=this.value.replace(/\D/g,'')"></dt>
+                        <dd>获取验证码</dd>
+                    </dl>
+                    <span>您输入的手机号有误</span>
+                </li>
+                
+                <li>
+                    <input type="text" placeholder="请输入密码" v-model="passwordVal">
+                    <i class="iconfont">&#xe60e;</i>
+                    <span>密码最短6个字符，最长25个字符</span>
+                </li>
+
+                <p><i class="iconfont">&#xe60d;</i><span></span></p>
+
+                <div class="loginBtn">注&nbsp;册</div>
+
+                <h5>已有账号，<span>直接登录</span></h5>
+
+            </ul> -->
+                
+            </div>
+            <!-- 修改 -->
+            <div class="changePassword">
+                
+            </div>
+        </div>
+    </div>
+</div>
+
+</template>
+<script>
+import axios from '~/plugins/axios.js';
+export default {
+  data(){
+    return{
+        isActive1: false, //商铺写字楼
+        isActive6: false, //加盟品牌
+
+        showLogin: false, //登录弹窗
+
+        phoneVal: "", //电话号码
+        passwordVal: "", //密码
+        
+    }
+  },
+  watch:{
+   
+  },
+  components: {
+
+  },
+  methods:{
+    // 出现登录页
+    showLoginFun(){
+        this.showLogin = true;
+    },
+    // 关闭弹窗
+    closeBtn(){
+        this.showLogin = false;
+    },
+
+    // 获取页面路径
+    achieveUrl(){
+        var filename = window.location.href;
+        if(filename.indexOf("shopsOffices") != -1){
+            this.isActive1 = true;
+        }else if(filename.indexOf("brand") != -1){
+            this.isActive6 = true;
+        }
+    },
+
+  },
+  mounted() {
+    this.achieveUrl();
+
+  },
+  updated() {
+
+  },
+}
+</script>
+<style lang="less" type="text/less" scoped>
+input::-webkit-input-placeholder{
+    color: #9f9fa8;
+}
+input::-moz-placeholder{ 
+    color: #9f9fa8;
+}
+input:-moz-placeholder{
+    color: #9f9fa8;
+}
+input:-ms-input-placeholder{
+    color: #9f9fa8;
+}
+.navWrap{
+    width: 100%;
+    height: 36px;
+    background: #fff;
+    border-bottom: 1px solid #e5e5e5;
+    box-sizing: border-box;
+    .nav{
+        width: 1200px;
+        margin: 0 auto;
+        height: 36px;
+        ul{
+            li{
+                float: left;
+                font-size:12px;
+                margin-right: 30px;
+                line-height: 36px;
+                color: #585f6b;
+                cursor: pointer;
+                font-family: MicrosoftYaHei;
+                a{
+                    font-size:12px;
+                    color: #585f6b;
+                    &.active{
+                        color: #2f7af7;
+                    }
+                }
+            }
+        }
+        .login{
+            float: right;
+            p{
+                float: left;
+                line-height: 36px;
+                font-size: 12px;
+                font-family: MicrosoftYaHei;
+                color: #585f6b;
+                cursor: pointer;
+                &:hover{
+                    color: #2f7af7;
+                }
+            }
+            .p1{
+                 margin-right: 30px;
+
+            }
+        }
+    }
+}
+/* 登录注册弹窗 */
+.loginWrap{
+    width: 100%;
+    height: 100%;
+    background: rgba(0,0,0,0.4);
+    position: fixed;
+    left: 0px;
+    top: 0px;
+    z-index: 1000;
+    .loginBox{
+        width: 384px;
+        padding: 20px 40px 40px;
+        background: #fff;
+        border-radius:10px;
+        position: absolute;
+        left: 50%;
+        top: 20%;
+        margin-left: -192px;
+        .loginBoxTop{
+            margin-bottom: 30px;
+            li{
+                float: left;
+                color: #393f47;
+                margin-right: 50px;
+                cursor: pointer;
+            }
+            span{
+                color: #d8d8d8;
+                font-size: 18px;
+                position: absolute;
+                right: 20px;
+                top: 20px;
+                cursor: pointer;
+                &:hover{
+                    color: #2f7af7;
+                }
+            }
+        }
+    }
+    /*登录*/
+    .loginList{
+        width: 304px;
+        li{
+            width: 304px;
+            height: 68px;
+            position: relative;
+            input{
+                width: 304px;
+                height: 48px;
+                background: #f7f8f8;
+                border-radius: 4px;
+                font-size: 14px;
+                color: #393f47;
+                padding-left: 10px;
+            }
+            span{
+                font-size: 12px;
+                font-family: PingFangSC-Regular;
+                font-weight: 400;
+                color: #f16752;
+                line-height: 20px;
+            }
+            .passwordIcon{
+                position: absolute;
+                right: 10px;
+                top: 17px;
+                color: #9f9fa8;
+                cursor: pointer;
+                &:hover{
+                    color: #585F6b;
+                }
+
+            }
+        }
+        .loginListDl{
+            width: 304px;
+            height: 38px;
+            dt{
+                float: left;
+                span{
+                    color: #2f7af7;
+                    cursor: pointer;
+                }
+            }
+            dd{
+                float: right;
+                cursor: pointer;
+            }
+        }
+        .loginBtn{
+            width: 304px;
+            height: 48px;
+            text-align: 304px;
+            line-height: 48px;
+            border-radius: 4px;
+            background: #2f7af7;
+            color: #fff;
+            font-size: 16px;
+            font-family: PingFangSC-Medium;
+            font-weight: 500;
+            text-align: center;
+            cursor: pointer;
+        }
+    }
+    /*注册*/
+    .registration{
+        width: 304px;
+        li{
+            width: 304px;
+            height: 68px;
+            input{
+                width: 304px;
+                height: 48px;
+                background: #f7f8f8;
+                border-radius: 4px;
+                font-size: 14px;
+                color: #393f47;
+                padding-left: 10px;
+            }
+            span{
+                font-size: 12px;
+                font-family: PingFangSC-Regular;
+                font-weight: 400;
+                color: #f16752;
+                line-height: 20px;
+            }
+        }
+        dl{
+            width: 304px;
+            height: 38px;
+            dt{
+                float: left;
+                span{
+                    color: #2f7af7;
+                    cursor: pointer;
+                }
+            }
+            dd{
+                float: right;
+                cursor: pointer;
+            }
+        }
+        .loginBtn{
+            width: 304px;
+            height: 48px;
+            text-align: 304px;
+            line-height: 48px;
+            border-radius: 4px;
+            background: #2f7af7;
+            color: #fff;
+            font-size: 16px;
+            font-family: PingFangSC-Medium;
+            font-weight: 500;
+            text-align: center;
+            cursor: pointer;
+        }
+    }
+}
+</style>
+

components/README.md

@@ -0,0 +1,7 @@
+# COMPONENTS
+
+The components directory contains your Vue.js Components.
+Nuxt.js doesn't supercharge these components.
+
+**This directory is not required, you can delete it if you don't want to use it.**
+

layouts/README.md

@@ -0,0 +1,9 @@
+# LAYOUTS
+
+This directory contains your Application Layouts.
+
+More information about the usage of this directory in the documentation:
+https://nuxtjs.org/guide/views#layouts
+
+**This directory is not required, you can delete it if you don't want to use it.**
+

layouts/default.vue

@@ -0,0 +1,53 @@
+<template>
+  <div>
+    <nuxt/>
+  </div>
+</template>
+
+<style>
+html {
+  font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-size: 16px;
+  word-spacing: 1px;
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  box-sizing: border-box;
+}
+
+*, *:before, *:after {
+  box-sizing: border-box;
+  margin: 0;
+}
+
+.button--green {
+  display: inline-block;
+  border-radius: 4px;
+  border: 1px solid #3b8070;
+  color: #3b8070;
+  text-decoration: none;
+  padding: 10px 30px;
+}
+
+.button--green:hover {
+  color: #fff;
+  background-color: #3b8070;
+}
+
+.button--grey {
+  display: inline-block;
+  border-radius: 4px;
+  border: 1px solid #35495e;
+  color: #35495e;
+  text-decoration: none;
+  padding: 10px 30px;
+  margin-left: 15px;
+}
+
+.button--grey:hover {
+  color: #fff;
+  background-color: #35495e;
+}
+</style>
+

middleware/README.md

@@ -0,0 +1,10 @@
+# MIDDLEWARE
+
+This directory contains your Application Middleware.
+The middleware lets you define custom function to be ran before rendering a page or a group of pages (layouts).
+
+More information about the usage of this directory in the documentation:
+https://nuxtjs.org/guide/routing#middleware
+
+**This directory is not required, you can delete it if you don't want to use it.**
+

nuxt.config.js

@@ -0,0 +1,70 @@
+const webpack = require('webpack')
+module.exports = {
+  /*
+  ** Headers of the page
+  */
+  head: {
+    title: 'nuxt-demo',
+    meta: [
+      { charset: 'utf-8' },
+      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+      { hid: 'description', name: 'description', content: 'Nuxt.js project' }
+    ],
+    link: [
+      { rel: 'icon', type: 'image/x-icon', href: '/icon.png' },
+      // { rel: 'stylesheet', type: 'text/css', href: 'https://t.focus-res.cn/front-end/icon2018/iconfont.css' }
+    ],
+    script: [
+      {src: 'https://api.map.baidu.com/api?v=2.0&ak=OxAEbfrVXXqWUSC4nP8mYi3bTKRBcP6u&s=1'},
+      {src: "https://s23.cnzz.com/z_stat.php?id=1275598476&web_id=1275598476"},
+      {src: "https://hm.baidu.com/hm.js?386f99c9fffaef40eb761d464a025698"}
+    ]
+  },
+  /*
+  ** Customize the progress bar color
+  */
+  loading: { color: '#3B8070' },
+  plugins: [
+    '~/plugins/element-ui',
+    '~/plugins/youmeng'
+  ],
+  //全局css
+  css:[
+    '~assets/css/base.css',
+    '~assets/css/iconfont.css',
+    'element-ui/lib/theme-chalk/index.css'
+  ],
+  /*
+  ** Build configuration
+  */
+  build: {
+    /*关闭ESLint
+    ** Run ESLint on save
+    */
+    // extend (config, { isDev, isClient }) {
+    //   if (isDev && isClient) {
+    //     config.module.rules.push({
+    //       enforce: 'pre',
+    //       test: /\.(js|vue)$/,
+    //       loader: 'eslint-loader',
+    //       exclude: /(node_modules)/
+    //     })
+    //   }
+    // }
+    vendor: [
+      'axios',
+      'element-ui'
+    ],
+    postcss: [
+      require('autoprefixer')({
+        browsers: ['last 3 versions']
+      })
+    ],
+    plugins: [
+      new webpack.ProvidePlugin({
+        '$': 'jquery'
+      })
+    ]
+  }
+}
+

package.json

@@ -0,0 +1,37 @@
+{
+  "name": "upml-pc",
+  "version": "1.0.0",
+  "description": "Nuxt.js project",
+  "author": "yanby <18735790101@163.com>",
+  "private": true,
+  "scripts": {
+    "dev": "nuxt",
+    "build": "nuxt build",
+    "start": "nuxt start",
+    "generate": "nuxt generate",
+    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
+    "precommit": "npm run lint"
+  },
+  "dependencies": {
+    "axios": "^0.18.0",
+    "element-ui": "^2.4.5",
+    "jquery": "^3.3.1",
+    "less": "^3.8.1",
+    "less-loader": "^4.1.0",
+    "nuxt": "^2.0.0"
+  },
+  "devDependencies": {
+    "babel-eslint": "^10.0.1",
+    "eslint": "^4.19.1",
+    "eslint-friendly-formatter": "^4.0.1",
+    "eslint-loader": "^2.1.1",
+    "eslint-plugin-vue": "^4.0.0",
+    "qrcode": "^1.3.3"
+  },
+  "config": {
+    "nuxt": {
+      "host": "0.0.0.0",
+      "port": "3000"
+    }
+  }
+}

pages/README.md

@@ -0,0 +1,8 @@
+# PAGES
+
+This directory contains your Application Views and Routes.
+The framework reads all the .vue files inside this directory and creates the router of your application.
+
+More information about the usage of this directory in the documentation:
+https://nuxtjs.org/guide/routing
+

pages/brand/_brand.vue

@@ -0,0 +1,440 @@
+<template>
+<div class="brandWrap">
+    <Nav></Nav>
+    <div class="brandNavWrap">
+        <dl class="clearfix">
+            <dt>
+                <h3><span>优铺</span>CBMLS·加盟品牌</h3>
+            </dt>
+            <dd>
+                <input type="text" name="" placeholder="请输入品牌相关信息搜索" class="searchInput">
+                <p class="searchBtn"><span class="iconfont">&#xe613;</span>搜索</p>
+            </dd>
+        </dl>
+    </div>
+    <!-- 筛选 -->
+    <div class="brandBox">
+        <ul class="clearfix">
+            <li>首页<span class="iconfont">&#xe614;</span></li>
+            <li>加盟品牌</li>
+        </ul>
+        <dl class="clearfix">
+            <dt>需求面积</dt>
+            <dd class="clearfix">
+                <span>全部</span>
+                <span>50m²以上</span>
+                <span>50-200m²</span>
+                <span>200-500m²</span>
+                <span>500-1000m²</span>
+                <span>1000m²以上</span>
+            </dd>
+        </dl>
+        <dl class="clearfix">
+            <dt>拓展区域</dt>
+            <dd class="clearfix">
+                <span>全部</span>
+                <span>华北</span>
+                <span>东北</span>
+                <span>华东</span>
+                <span>华中</span>
+                <span>华南</span>
+                <span>西南</span>
+                <span>西北</span>
+            </dd>
+        </dl>
+
+        <dl class="clearfix">
+            <dt>区域</dt>
+            <dd class="clearfix">
+                <span>全部</span>
+                <span>餐饮</span>
+                <span>服装饰品</span>
+                <span>生活服务</span>
+                <span>百货/超市</span>
+                <span>休闲娱乐</span>
+                <span>儿童亲子</span>
+                <span>文化艺术</span>
+                <span>家具家电</span>
+                <span>折扣专卖</span>
+                <span>酒店公寓</span>
+                <span>其他</span>
+            </dd>
+            <div>
+                <span>全部</span>
+                <span>影院</span>
+                <span>剧院剧场</span>
+                <span>KTV</span>
+                <span>游戏游乐</span>
+                <span>溜冰场</span>
+                <span>健身房</span>
+                <span>游泳馆</span>
+                <span>广渠门</span>
+                <span>和平里</span>
+                <span>交通口</span>
+            </div>
+        </dl>
+    </div>
+    <!-- 列表 -->
+    <div class="listWrap">
+        <h2>共找到<span>2284</span>个加盟品牌</h2>
+        <div class="listBoxL">
+            <dl>
+                <dt>
+                    <img src="http://up-sell.oss-cn-beijing.aliyuncs.com/upload/image/20171121/1511235870997095152.jpg">
+                </dt>
+                <dd>
+                    <h3>品牌名称：<span>迪卡侬（Decathlon)</span></h3>
+                    <p>品牌业态：<span>快餐</span></p>
+                    <p>拓展区域：<span>华北</span></p>
+                    <p>品牌定位：<span>全国连锁</span></p>
+                </dd>
+            </dl>
+
+            <!-- 分页 -->
+            <div class="page">
+                <el-pagination
+                    background
+                    layout="prev, pager, next"
+                    @current-change="handleCurrentChange"
+                    :page-size=this.pageSize
+                    :total="total1">
+                </el-pagination>
+            </div>
+
+        </div>
+        <!-- 推荐商铺 -->
+        <div class="listBoxR">
+            <h3>推荐品牌</h3>
+            <dl>
+                <dt>
+                    <img src="http://up-img.oss-cn-beijing.aliyuncs.com/new/2019/05/25/CiJtYE6FwswCGStan8dbfpH52PrNAzrk.jpg?x-oss-process=style/thumbnail">
+                </dt>
+                <dd>
+                    <h5>品牌名称：巴比馒头Bab建国路幼儿园出租</h5>
+                    <p>美食广场</p>
+                </dd>
+            </dl>
+        </div>
+    </div>
+</div>
+</template>
+
+<script>
+  import axios from '~/plugins/axios.js';
+  import Nav from '~/components/Nav/Nav';
+  export default {
+    head () {
+      return {
+        title: 'CBMLS',
+        meta: [
+          { hid: 'description', name: 'description', content: 'CBMLS' },
+          { hid: 'keywords', name: 'keywords', content: 'CBMLS'}
+        ]
+      }
+    },
+    data(){
+      return{
+        pageSize: 10, // 每页的数量
+        pageNum: 1, // 页码
+        total1: 100,  //接收渲染数据总数的参数
+      }
+    },
+    mounted(){
+
+    },
+    updated(){
+
+    },
+    components: {
+        Nav
+    },
+    methods: {
+        //分页
+        handleCurrentChange(val) {
+            this.pageNum = val;
+            $('html , body').animate({scrollTop: 100},1200);
+        },
+    }
+  }
+</script>
+
+<style lang="less" type="text/less" scoped>
+input::-webkit-input-placeholder{
+    color: #9f9fa8;
+}
+input::-moz-placeholder{ 
+    color: #9f9fa8;
+}
+input:-moz-placeholder{
+    color: #9f9fa8;
+}
+input:-ms-input-placeholder{
+    color: #9f9fa8;
+}
+/* 头部导航 */
+.brandNavWrap{
+    width: 100%;
+    background: #fff;
+    dl{
+        width: 1200px;
+        margin: 30px auto;
+        dt{
+            float: left;
+            font-size: 34px;
+            line-height: 40px;
+            font-family: PingFangSC-Semibold;
+            font-weight: 600;
+            span{
+                color: #2F7af7;
+            }
+        }
+        dd{
+            width: 590px;
+            float: right;
+            .searchInput{
+                width: 498px;
+                height: 42px;
+                border: 2px solid #2f7af7;
+                float: left;
+                border-radius:2px 0px 0px 2px;
+                color: #333;
+                font-size: 14px;
+                font-family: PingFangSC-Regular;
+                padding-left: 20px;
+            }
+            .searchBtn{
+                float: left;
+                width: 92px;
+                height: 42px;
+                background: #2f7af7;
+                color: #fff;
+                font-size: 14px;
+                line-height: 42px;
+                text-align: center;
+                border-radius: 0px 2px 2px 0px;
+                cursor: pointer;
+                font-family: PingFangSC-Regular;
+                span{
+                    font-size: 16px;
+                    position: relative;
+                    right: 5px;
+                    top: 1px;
+                }
+            }
+        }
+    }
+}
+
+/* 筛选条件 */
+.brandBox{
+    width: 1200px;
+    margin: 0 auto;
+    border-bottom: 1px solid #e5e5e5;
+    ul{
+        margin: 20px 0 30px;
+        li{
+            color: #9f9fa8;
+            font-size: 12px;
+            float: left;
+            cursor: pointer;
+            span{
+                font-size: 8px;
+                margin: 0 6px;
+            }
+        }
+    }
+    dl{
+        width: 1200px;
+        dt{
+            float: left;
+            width: 96px;
+            font-size: 14px;
+            font-family: PingFangSC-Medium;
+            font-weight: 500;
+            color: #393f47;
+        }
+        dd{
+            float: left;
+            width: 1104px;
+            span{
+                float: left;
+                display: inline-block;
+                margin-right: 30px;
+                cursor: pointer;
+                color: #393f47;
+                font-size: 14px;
+                margin-bottom: 20px;
+            }
+        }
+        div{
+            width: 1104px;
+            border: 1px solid #e5e5e5;
+            background: #f7f8f8;
+            float: right;
+            padding: 16px 10px 6px 20px;
+            box-sizing: border-box;
+            margin-bottom: 20px;
+            border-radius: 2px;
+            span{
+                display: inline-block;
+                float: left;
+                margin-right: 30px;
+                margin-bottom: 10px;
+                cursor: pointer;
+            }
+        }
+    }
+}
+
+/*列表*/
+.listWrap{
+    width: 1200px;
+    margin: 0 auto;
+    h2{
+        color: #393f47;
+        font-size: 20px;
+        font-family: PingFangSC-Medium;
+        font-weight: 500;
+        margin: 30px 0;
+        span{
+            color: #2f7af7;
+            margin: 0 10px;
+        }
+    }
+}
+
+/*左侧列表*/
+.listBoxL{
+    float: left;
+    width: 960px;
+    border-top: 2px solid #2f7af7;
+    dl{
+        width: 960px;
+        height: 212px;
+        padding: 20px 0px;
+        border-bottom: 1px solid #e5e5e5;
+        cursor: pointer;
+        dt{
+            width: 232px;
+            height: 174px;
+            float: left;
+            margin-right: 40px;
+            img{
+                width: 232px;
+                height: 174px;
+                border-radius: 4px;
+            }
+        }
+        dd{
+            float: left;
+            width: 680px;
+            height: 174px;
+            h3{
+                font-size: 24px;
+                font-family: PingFangSC-Medium;
+                font-weight: 500;
+                color: #393f47;
+                line-height: 32px;
+                margin-top: 6px;
+                margin-bottom: 20px;
+                cursor: pointer;
+                &:hover{
+                    color: #2f7af7;
+                }
+                span{
+                    margin-left: 2px;
+                }
+            }
+            p{
+                font-size: 14px;
+                font-family: PingFangSC-Regular;
+                font-weight: 400;
+                color: #585f6b;
+                line-height: 22px;
+                margin-bottom: 16px;
+                span{
+                    margin-left: 2px;
+                }
+            }
+        }
+    }
+    
+}
+
+/*右侧推荐*/
+.listBoxR{
+    float: right;
+    width: 184px;
+    h3{
+        font-size: 18px;
+        font-family: PingFangSC-Medium;
+        font-weight: 500;
+        color: #393F47;
+        margin-bottom: 20px;
+    }
+    dl{
+        width: 184px;
+        margin-bottom: 24px;
+        dt{
+            width: 184px;
+            height: 138px;
+            position: relative;
+            cursor: pointer;
+            img{
+                width: 184px;
+                height: 138px;
+                border-radius: 4px;
+            }
+        }
+        dd{
+            h5{
+                width: 184px;
+                height: 22px;
+                font-size: 14px;
+                font-family: PingFangSC-Regular;
+                font-weight: 400;
+                color: #393f47;
+                line-height: 22px;
+                cursor: pointer;
+                margin: 6px 0px;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+            }
+            p{
+                font-size: 14px;
+                font-family: PingFangSC-Regular;
+                font-weight: 400;
+                color: #9f9fa8;
+                line-height: 20px;
+            }
+        }
+    }
+}
+
+/*分页*/
+.page{
+    width: 100%;
+    margin: 0 auto;
+    text-align: center;
+    padding: 40px 0;
+}
+
+</style>
+
+<style>
+.page .el-pagination {
+    font-weight: normal;
+}
+.page .el-pagination .btn-prev, .page .el-pagination .btn-next, .page .el-pagination .el-pager li {
+    height: 30px;
+    width: 30px;
+    line-height: 30px;
+    border: 1px solid #e5e5e5;
+}
+.page .el-pagination .el-pager li.active {
+    background: #195def !important;
+    border: 1px solid #e5e5e5;
+}   
+</style>
+

pages/index.vue

@@ -0,0 +1,49 @@
+<template>
+<section class="container">
+<div class="home">
+    <Nav></Nav>
+    首页
+</div>
+
+</section>
+</template>
+
+<script>
+import axios from '~/plugins/axios.js';
+import Nav from '~/components/Nav/Nav';
+export default {
+  head () {
+    return {
+      title: 'CBMLS',
+      meta: [
+        { hid: 'description', name: 'description', content: 'CBMLS' },
+        { hid: 'title', name: 'title', content: 'CBMLS' },
+        { hid: 'keywords', name: 'keywords', content: 'CBMLS' }
+      ]
+    }
+  },
+  data(){
+    return{
+    }
+  },
+  components: {
+    Nav
+
+  },
+  methods:{
+
+  },
+  mounted() {
+
+  },
+  created () {
+
+  },
+}
+</script>
+
+
+<style lang="less" type="text/less" scoped>
+
+</style>
+

pages/shopsOffices/officesFlatsLease.vue

@@ -0,0 +1,237 @@
+<template>
+<div class="officesFlatsLeaseWrap">
+    <Nav></Nav>
+    <div class="shopNavWrap">
+        <dl class="shopNavDl">
+            <dt>
+                <h3><span>优铺</span>CBMLS·商铺写字楼</h3>
+            </dt>
+            <dd>
+                <input type="text" name="" placeholder="请输入写字楼相关信息搜索" class="searchInput">
+                <p class="searchBtn"><span class="iconfont">&#xe613;</span>搜索</p>
+            </dd>
+        </dl>
+        <div class="shopNavList">
+            <ul class="shopNavListUl">
+                <li><a href="/shopsOffices/shopSell">商铺出售</a></li>
+                <li><a href="/shopsOffices/shopLease">商铺出租</a></li>
+                <li class="li1">
+                    <a href="javascript:void(0);">商铺新盘</a>
+                    <div>
+                        <p><a href="/shopsOffices/shopFlatsSell">出售</a></p>
+                        <p><a href="/shopsOffices/shopFlatsLease">出租</a></p>
+                    </div>
+                </li>
+                <li><a href="/shopsOffices/officesSell">写字楼出售</a></li>
+                <li><a href="/shopsOffices/officesLease">写字楼出租</a></li>
+                <li class="shopNavBox changeBg li2">
+                    <a href="javascript:void(0);">写字楼新盘</a>
+                    <div>
+                        <p><a href="/shopsOffices/officesFlatsSell">出售</a></p>
+                        <p><a href="/shopsOffices/officesFlatsLease">出租</a></p>
+                    </div>
+                </li>
+            </ul>
+        </div>
+    </div>
+    <!-- 筛选 -->
+    <div class="shopBox">
+        <ul class="clearfix">
+            <li>首页<span class="iconfont">&#xe614;</span></li>
+            <li>写字楼新盘出租</li>
+        </ul>
+        <dl class="clearfix">
+            <dt>区域</dt>
+            <dd class="clearfix">
+                <span>全部</span>
+                <span>东城</span>
+                <span>西城</span>
+                <span>朝阳</span>
+                <span>东城</span>
+                <span>西城</span>
+                <span>朝阳</span>
+                <span>东城</span>
+                <span>西城</span>
+                <span>朝阳</span>
+                <span>东城</span>
+                <span>西城</span>
+                <span>朝阳</span>
+                <span>东城</span>
+                <span>东城</span>
+                <span>密云县</span>
+                <span>北京周边</span>
+            </dd>
+            <div>
+                <span>全部</span>
+                <span>东城</span>
+                <span>西城</span>
+                <span>朝阳</span>
+                <span>东城</span>
+                <span>西城</span>
+                <span>朝阳</span>
+                <span>东城</span>
+                <span>西城</span>
+                <span>朝阳</span>
+                <span>东城</span>
+                <span>西城</span>
+                <span>朝阳</span>
+                <span>东城</span>
+                <span>西城</span>
+                <span>朝阳</span>
+                <span>东城</span>
+                <span>东城</span>
+                <span>密云县</span>
+                <span>北京周边</span>
+            </div>
+        </dl>
+        <dl class="clearfix">
+            <dt>日租</dt>
+            <dd class="clearfix">
+                <span>全部</span>
+                <span>3元/m²/天以下</span>
+                <span>3-4元/天/m²</span>
+                <span>4-5元/天/m²</span>
+                <span>5-6元/天/m²</span>
+                <span>6-8元/天/m²</span>
+                <span>8-10元/天/m²</span>
+                <span>10元/天/m²以上</span>
+            </dd>
+        </dl>
+        <dl class="clearfix">
+            <dt>类型</dt>
+            <dd class="clearfix">
+                <span>全部</span>
+                <span>纯城市综合体楼</span>
+                <span>购物中心</span>
+                <span>商场</span>
+                <span>商业街</span>
+                <span>商业裙楼</span>
+                <span>社区商业</span>
+                <span>专业市场</span>
+                <span>主题商业</span>
+                <span>其他</span>
+            </dd>
+        </dl>
+    </div>
+    <!-- 列表 -->
+    <div class="listWrap">
+        <h2>共找到<span>3627</span>套北京在售写字楼新盘</h2>
+        <div class="listBoxL">
+            <div class="listBox">
+                <img src="http://up-sell.oss-cn-beijing.aliyuncs.com/upload/2019/07/05/y7wJrcQNnsCDnjQ3ntEpkR6C1pXzmTEM" class="listImg">
+                <dl class="clearfix">
+                    <h3><span class="span1">华贸大厦</span><span class="span2">(开盘时间：2019-12-12)</span></h3>
+                    <dt class="clearfix">
+                        <ul>
+                           <li><span class="iconfont">&#xe616;</span>东城，安定门，鼓楼大街凡尔赛</li>
+                           <li><span class="iconfont">&#xe615;</span>城市综合体</li>
+                        </ul>
+                    </dt>
+                    <dd class="clearfix">
+                        <p class="onlyTxt">4.21<span>元/天/m²&nbsp;[日租]</span></p>
+                    </dd>
+                    <div class="listBoxBottom">
+                        <ul>
+                            <li>地铁上盖</li>
+                            <li>随时看铺</li>
+                            <li>繁华地段</li>
+                            <li>品牌地产</li>
+                        </ul>
+                        <div>
+                            <p class="p3">合作佣金：<span>4000&nbsp;元</span></p>
+                            <p class="p4">结佣时间：<span>合同签署30天内</span></p>
+                        </div>
+                    </div>
+                </dl>
+            </div>
+
+            <!-- 分页 -->
+            <div class="page">
+                <el-pagination
+                    background
+                    layout="prev, pager, next"
+                    @current-change="handleCurrentChange"
+                    :page-size=this.pageSize
+                    :total="total1">
+                </el-pagination>
+            </div>
+
+        </div>
+
+        <!-- 推荐商铺 -->
+        <div class="listBoxR">
+            <h3>推荐写字楼新盘</h3>
+            <dl>
+                <dt>
+                    <img src="http://up-img.oss-cn-beijing.aliyuncs.com/new/2019/05/25/CiJtYE6FwswCGStan8dbfpH52PrNAzrk.jpg?x-oss-process=style/thumbnail">
+                </dt>
+                <dd>
+                    <h5>长安太和1号楼商铺</h5>
+                    <p>朝阳-大悦城</p>
+                </dd>
+            </dl>
+        </div>
+    </div>
+</div>
+</template>
+
+<script>
+  import axios from '~/plugins/axios.js';
+  import Nav from '~/components/Nav/Nav';
+  export default {
+    head () {
+      return {
+        title: 'CBMLS',
+        meta: [
+          { hid: 'description', name: 'description', content: 'CBMLS' },
+          { hid: 'keywords', name: 'keywords', content: 'CBMLS'}
+        ]
+      }
+    },
+    data(){
+      return{
+        pageSize: 10, // 每页的数量
+        pageNum: 1, // 页码
+        total1: 100,  //接收渲染数据总数的参数
+      }
+    },
+    mounted(){
+
+    },
+    updated(){
+
+    },
+    components: {
+        Nav
+    },
+    methods: {
+        //分页
+        handleCurrentChange(val) {
+            this.pageNum = val;
+            $('html , body').animate({scrollTop: 100},1200);
+        },
+    }
+  }
+</script>
+
+<style lang="less" type="text/less" scoped>
+@import '../../assets/css/shopNav.less';
+@import '../../assets/css/listBox.less';
+</style>
+
+<style>
+.page .el-pagination {
+    font-weight: normal;
+}
+.page .el-pagination .btn-prev, .page .el-pagination .btn-next, .page .el-pagination .el-pager li {
+    height: 30px;
+    width: 30px;
+    line-height: 30px;
+    border: 1px solid #e5e5e5;
+}
+.page .el-pagination .el-pager li.active {
+    background: #195def !important;
+    border: 1px solid #e5e5e5;
+}   
+</style>
+

pages/shopsOffices/officesFlatsSell.vue

@@ -0,0 +1,240 @@
+<template>
+<div class="shopNewFlatsWrap">
+    <Nav></Nav>
+    <div class="shopNavWrap">
+        <dl class="shopNavDl">
+            <dt>
+                <h3><span>优铺</span>CBMLS·商铺写字楼</h3>
+            </dt>
+            <dd>
+                <input type="text" name="" placeholder="请输入写字楼相关信息搜索" class="searchInput">
+                <p class="searchBtn"><span class="iconfont">&#xe613;</span>搜索</p>
+            </dd>
+        </dl>
+        <div class="shopNavList">
+            <ul class="shopNavListUl">
+                <li><a href="/shopsOffices/shopSell">商铺出售</a></li>
+                <li><a href="/shopsOffices/shopLease">商铺出租</a></li>
+                <li class="li1">
+                    <a href="javascript:void(0);">商铺新盘</a>
+                    <div>
+                        <p><a href="/shopsOffices/shopFlatsSell">出售</a></p>
+                        <p><a href="/shopsOffices/shopFlatsLease">出租</a></p>
+                    </div>
+                </li>
+                <li><a href="/shopsOffices/officesSell">写字楼出售</a></li>
+                <li><a href="/shopsOffices/officesLease">写字楼出租</a></li>
+                <li class="shopNavBox changeBg li2">
+                    <a href="javascript:void(0);">写字楼新盘</a>
+                    <div>
+                        <p><a href="/shopsOffices/officesFlatsSell">出售</a></p>
+                        <p><a href="/shopsOffices/officesFlatsLease">出租</a></p>
+                    </div>
+                </li>
+            </ul>
+        </div>
+    </div>
+    <!-- 筛选 -->
+    <div class="shopBox">
+        <ul class="clearfix">
+            <li>首页<span class="iconfont">&#xe614;</span></li>
+            <li>写字楼新盘出售</li>
+        </ul>
+        <dl class="clearfix">
+            <dt>区域</dt>
+            <dd class="clearfix">
+                <span>全部</span>
+                <span>东城</span>
+                <span>西城</span>
+                <span>朝阳</span>
+                <span>东城</span>
+                <span>西城</span>
+                <span>朝阳</span>
+                <span>东城</span>
+                <span>西城</span>
+                <span>朝阳</span>
+                <span>东城</span>
+                <span>西城</span>
+                <span>朝阳</span>
+                <span>东城</span>
+                <span>东城</span>
+                <span>密云县</span>
+                <span>北京周边</span>
+            </dd>
+            <div>
+                <span>全部</span>
+                <span>东城</span>
+                <span>西城</span>
+                <span>朝阳</span>
+                <span>东城</span>
+                <span>西城</span>
+                <span>朝阳</span>
+                <span>东城</span>
+                <span>西城</span>
+                <span>朝阳</span>
+                <span>东城</span>
+                <span>西城</span>
+                <span>朝阳</span>
+                <span>东城</span>
+                <span>西城</span>
+                <span>朝阳</span>
+                <span>东城</span>
+                <span>东城</span>
+                <span>密云县</span>
+                <span>北京周边</span>
+            </div>
+        </dl>
+        <dl class="clearfix">
+            <dt>均价</dt>
+            <dd class="clearfix">
+                <span>全部</span>
+                <span>1万元以下</span>
+                <span>1-2万元</span>
+                <span>2-3万元</span>
+                <span>3-4万元</span>
+                <span>4-6万元</span>
+                <span>6-8万元</span>
+                <span>8-10万元</span>
+                <span>10万元以上</span>
+            </dd>
+        </dl>
+        <dl class="clearfix">
+            <dt>类型</dt>
+            <dd class="clearfix">
+                <span>全部</span>
+                <span>纯城市综合体楼</span>
+                <span>购物中心</span>
+                <span>商场</span>
+                <span>商业街</span>
+                <span>商业裙楼</span>
+                <span>社区商业</span>
+                <span>专业市场</span>
+                <span>主题商业</span>
+                <span>其他</span>
+            </dd>
+        </dl>
+    </div>
+    <!-- 列表 -->
+    <div class="listWrap">
+        <h2>共找到<span>3627</span>套北京在租商铺新盘</h2>
+        <div class="listBoxL">
+            <div class="listBox" @click="goDetails('345')">
+                <img src="http://up-sell.oss-cn-beijing.aliyuncs.com/upload/2019/07/05/y7wJrcQNnsCDnjQ3ntEpkR6C1pXzmTEM" class="listImg">
+                <dl class="clearfix">
+                    <h3><span class="span1">朝阳大悦城中心一期·商铺Swag大厦</span><span class="span2">(开盘时间：2019-12-12)</span></h3>
+                    <dt class="clearfix">
+                        <ul>
+                           <li><span class="iconfont">&#xe616;</span>东城，安定门，鼓楼大街凡尔赛</li>
+                           <li><span class="iconfont">&#xe615;</span>城市综合体</li>
+                        </ul>
+                    </dt>
+                    <dd class="clearfix">
+                        <p class="onlyTxt">2004.21<span>元/m²&nbsp;[均价]</span></p>
+                    </dd>
+                    <div class="listBoxBottom">
+                        <ul>
+                            <li>地铁上盖</li>
+                            <li>随时看铺</li>
+                            <li>繁华地段</li>
+                            <li>品牌地产</li>
+                        </ul>
+                        <div>
+                            <p class="p3">合作佣金：<span>4000&nbsp;元</span></p>
+                            <p class="p4">结佣时间：<span>合同签署30天内</span></p>
+                        </div>
+                    </div>
+                </dl>
+            </div>
+
+            <!-- 分页 -->
+            <div class="page">
+                <el-pagination
+                    background
+                    layout="prev, pager, next"
+                    @current-change="handleCurrentChange"
+                    :page-size=this.pageSize
+                    :total="total1">
+                </el-pagination>
+            </div>
+
+        </div>
+        <!-- 推荐商铺 -->
+        <div class="listBoxR">
+            <h3>推荐写字楼新盘</h3>
+            <dl>
+                <dt>
+                    <img src="http://up-img.oss-cn-beijing.aliyuncs.com/new/2019/05/25/CiJtYE6FwswCGStan8dbfpH52PrNAzrk.jpg?x-oss-process=style/thumbnail">
+                </dt>
+                <dd>
+                    <h5>长安太和1号楼商铺</h5>
+                    <p>朝阳-大悦城</p>
+                </dd>
+            </dl>
+        </div>
+    </div>
+</div>
+</template>
+
+<script>
+  import axios from '~/plugins/axios.js';
+  import Nav from '~/components/Nav/Nav';
+  export default {
+    head () {
+      return {
+        title: 'CBMLS',
+        meta: [
+          { hid: 'description', name: 'description', content: 'CBMLS' },
+          { hid: 'keywords', name: 'keywords', content: 'CBMLS'}
+        ]
+      }
+    },
+    data(){
+      return{
+        pageSize: 10, // 每页的数量
+        pageNum: 1, // 页码
+        total1: 100,  //接收渲染数据总数的参数
+      }
+    },
+    mounted(){
+
+    },
+    updated(){
+
+    },
+    components: {
+        Nav
+    },
+    methods: {
+        //分页
+        handleCurrentChange(val) {
+            this.pageNum = val;
+            $('html , body').animate({scrollTop: 100},1200);
+        },
+        goDetails(id){
+            window.open('/shopsOffices/officesFlatsSellDtl/'+id);
+        }
+    }
+  }
+</script>
+
+<style lang="less" type="text/less" scoped>
+@import '../../assets/css/shopNav.less';
+@import '../../assets/css/listBox.less';
+</style>
+
+<style>
+.page .el-pagination {
+    font-weight: normal;
+}
+.page .el-pagination .btn-prev, .page .el-pagination .btn-next, .page .el-pagination .el-pager li {
+    height: 30px;
+    width: 30px;
+    line-height: 30px;
+    border: 1px solid #e5e5e5;
+}
+.page .el-pagination .el-pager li.active {
+    background: #195def !important;
+    border: 1px solid #e5e5e5;
+}   
+</style>
+

pages/shopsOffices/officesFlatsSellDtl/_id.vue

@@ -0,0 +1,501 @@
+<template>
+<div class="shopSellDelWrap">
+    <Nav></Nav>
+    <div class="detail">
+        <div class="detailTop">
+            <div class="detailTopMain">
+                <ul class="ul1 clearfix">
+                    <li>首页<span>></span></li>
+                    <li>写字楼新盘出售<span>></span></li>
+                    <li>商铺详情</li>
+                </ul>
+                <h2>朝阳大悦城中心一期·商铺Swag大厦</h2>
+                <div class="clearfix">
+                    <p><span>2.68</span>万元/m²[均价]</p>
+                    <p><span>30.98</span>m²[面积]</p>
+                </div>
+                <ul class="ul2 clearfix">
+                    <li>地铁上盖</li>
+                    <li>随时看铺</li>
+                    <li>繁华地段</li>
+                    <li>临近写字楼</li>
+                    <li>临近地铁</li>
+                </ul>
+            </div>
+        </div>
+
+        <div class="detailBox clearfix">
+            <div class="detailBoxL">
+                <div class="lbt">
+                    <div class="shop-lbt">
+                        <div class="shop-left left">
+                            <div class="big">
+                                <ul class="imgLength">
+                                    <li v-for = "(item,index) in projectPic">
+                                        <img :src="item.pic_path">
+                                    </li>
+                                </ul>
+                            </div>
+
+                            <div class="small">
+                                <div class="pg_left ps_pre">   
+                                    <img src="~/assets/images/common/leftWhite.png">
+                                </div>
+                                <div class="pg_left ps_pre1">
+                                    <img src="~/assets/images/common/leftGray.png">
+                                </div>
+                                <div class="pg_right ps_next">
+                                    <img src="~/assets/images/common/rightWhite.png">
+                                </div>
+                                <div class="pg_right ps_next1">
+                                   <img src="~/assets/images/common/rightGray.png">
+                                </div>
+                                <div class="activity" id="activity-slide">
+                                    <ol class="clearfix ulNum">
+
+                                        <li v-for = "(item,index) in projectPic">
+                                            <img :src="item.pic_path">
+                                        </li>
+
+                                    </ol>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="detailNav">
+                    <ul>
+                        <li class="cur">基本信息</li>
+                        <li>房源描述</li>
+                        <li>地理位置</li>
+                        <li>房源图片</li>
+                        <li style="width: 118px;">位置图</li>
+                        <li style="width: 118px;">平面图</li>
+                    </ul>
+                </div>
+                <div class="info clearfix" id="info">
+                    <h3 class="titleH3">基本信息</h3>
+                    <dl class="dlTop">
+                        <dt>写字楼类型</dt>
+                        <dd>纯写字楼</dd>
+                    </dl>
+                    <dl class="dlTop">
+                        <dt>面&emsp;&emsp;积</dt>
+                        <dd>60.22m²</dd>
+                    </dl>
+                    <dl>
+                        <dt>均&emsp;&emsp;价</dt>
+                        <dd>20000.22元/m²</dd>
+                    </dl>
+                    <dl>
+                        <dt>可否注册</dt>
+                        <dd>是</dd>
+                    </dl>
+                    <dl>
+                        <dt>层&emsp;&emsp;高</dt>
+                        <dd>3.2米</dd>
+                    </dl>
+                    <dl>
+                        <dt>装修情况</dt>
+                        <dd>毛坯</dd>
+                    </dl>
+                    <dl>
+                        <dt>开&nbsp;发&nbsp;商</dt>
+                        <dd>毛坯</dd>
+                    </dl>
+                    <dl>
+                        <dt>开盘时间</dt>
+                        <dd>2010-05-24</dd>
+                    </dl>
+                    <dl>
+                        <dt>物业费用</dt>
+                        <dd>暂无</dd>
+                    </dl>                   
+                </div>
+                <div class="shop" id="shop">
+                    <h3 class="titleH3">商铺描述</h3>
+                    <dl class="clearfix">
+                        <dt>
+                            <p>房源</p>
+                            <p>简介</p>
+                        </dt>
+                        <dd>中粮广场项目由A座、B座两幢5A智能甲级写字楼和高级购物商场组成，是一座集甲级写字楼和 高档购物中心为一体的大型建筑群体。总建筑面积约12万平米，其中包括约6万平米的高级中粮 广场购物中心及车位充足的中粮广场停车场，两幢分别为13层和14层总面积达车位充足的中粮 广场停车场，两幢分别为13层和14层6万平方米的写字楼。</dd>
+                    </dl>
+                    <dl class="clearfix" style="margin-top: 20px;">
+                        <dt>
+                            <p>周边</p>
+                            <p>配套</p>
+                        </dt>
+                        <dd>中粮广场项目由A座、B座两幢5A智能甲级写字楼和高级购物商场组成，是一座集甲级写字楼和 高档购物中心为一体的大型建筑群体。</dd>
+                    </dl>
+                </div>
+                <div class="seat" id="seat">
+                    <h3 class="titleH3">地理位置</h3>
+                    <!-- <div class="mapWrap"> -->
+                        <div id="allmap" style="width: 700px; height: 350px;"></div>
+                    <!-- </div> -->
+                </div>
+
+                <div class="pic" id="pic">
+                    <h3 class="titleH3">房源图片</h3>
+                    <ul>
+                        <li><img src="http://cdn.youpuchina.com/new/2019/07/27/47eYFFWX6BrckcYshYf8AJ6AQyMGszSp.jpg?x-oss-process=style/watermark"></li>
+                        <li><img src="http://cdn.youpuchina.com/new/2019/07/27/47eYFFWX6BrckcYshYf8AJ6AQyMGszSp.jpg?x-oss-process=style/watermark"></li>
+                        <li><img src="http://cdn.youpuchina.com/new/2019/07/27/47eYFFWX6BrckcYshYf8AJ6AQyMGszSp.jpg?x-oss-process=style/watermark"></li>
+                        <li><img src="http://cdn.youpuchina.com/new/2019/07/27/47eYFFWX6BrckcYshYf8AJ6AQyMGszSp.jpg?x-oss-process=style/watermark"></li>
+                    </ul>
+                </div>
+
+                <div class="pic" id="seatPic">
+                    <h3 class="titleH3">位置图</h3>
+                    <ul>
+                        <li><img src="http://cdn.youpuchina.com/new/2019/07/27/47eYFFWX6BrckcYshYf8AJ6AQyMGszSp.jpg?x-oss-process=style/watermark"></li>
+                        <li><img src="http://cdn.youpuchina.com/new/2019/07/27/47eYFFWX6BrckcYshYf8AJ6AQyMGszSp.jpg?x-oss-process=style/watermark"></li>
+                    </ul>
+                </div>
+
+                <div class="pic" id="planePic">
+                    <h3 class="titleH3">平面图</h3>
+                    <ul>
+                        <li><img src="http://up-sell.oss-cn-beijing.aliyuncs.com/upload/2019/07/11/ktDtYRjhZDEzJ2dp4826sp8Z84FNWybw"></li>
+                        <li><img src="http://up-sell.oss-cn-beijing.aliyuncs.com/upload/2019/07/11/cW7BF5syKiRKW3iRpWR8seca2hFNB8Zw"></li>
+                        <li><img src="http://up-sell.oss-cn-beijing.aliyuncs.com/upload/2019/07/11/ktDtYRjhZDEzJ2dp4826sp8Z84FNWybw"></li>
+                        <li><img src="http://up-sell.oss-cn-beijing.aliyuncs.com/upload/2019/07/11/cW7BF5syKiRKW3iRpWR8seca2hFNB8Zw"></li>
+                    </ul>
+                </div>
+
+            </div>
+            <div class="detailBoxR">
+                <div class="card">
+                    <div class="cardTop clearfix">
+                        <dl class="dl1">
+                            <dt><span>36.8</span>万元</dt>
+                            <dd>[均价]</dd>
+                        </dl>
+                        <dl class="dl2">
+                            <dt><span>236.8</span>m²</dt>
+                            <dd>[面积]</dd>
+                        </dl>
+                    </div>
+                    <div class="cardBar">
+                        <i></i>
+                        <p class="p1">此商铺合作佣金</p>
+                        <p class="p2">6000<span>元</span></p>
+                    </div>
+                    <ul class="cardUl">
+                        <li>
+                            <span class="span1">结佣时间</span>
+                            <span class="span2">签署合同30天之内</span>
+                        </li>
+                        <li>
+                            <span class="span1">楼盘名称</span>
+                            <span class="span2">朝阳大悦城中心一期·商铺Swag大厦</span>
+                        </li>
+                        <li>
+                            <span class="span1">类&emsp;&emsp;型</span>
+                            <span class="span2">商业街商铺</span>
+                        </li>
+                        <li>
+                            <span class="span1">商业综合楼</span>
+                            <span class="span2">北京市东城区建国门内大街8号北京市东城区 建国门内大街8号</span>
+                        </li>
+                    </ul>
+                    <dl class="cardFoot">
+                        <dt></dt>
+                        <dd>
+                            <h3>王一博儿</h3>
+                            <!-- <p>点击查看经纪人电话</p> -->
+                            <p><span class="iconfont">&#xe61f;</span>130-1109-2864</p>
+                        </dd>
+                    </dl>
+                </div>
+                <div class="record">
+                    <dl class="recordTop clearfix">
+                        <dt>跟进记录</dt>
+                        <dd>
+                            <!-- <p class="p1">终止流程</p> -->
+                            <p class="hoverBg">新增到访</p>
+                            <!-- <p class="hoverBg">签约</p> -->
+                            <!-- <p class="hoverBg">提醒结佣</p> -->
+                            <!-- <p class="hoverBg">结佣</p> -->
+                            <!-- <span>交易已完成</span> -->
+                        </dd>
+                    </dl>
+                    <div class="recordNav clearfix">
+                        <ul>
+                            <li class="navCur">查看信息</li>
+                            <li>到访</li>
+                            <li>认购</li>
+                            <li>签约</li>
+                            <li>结佣</li>
+                            <li>终止</li>
+                        </ul>
+                    </div>
+                    <div class="recordMain">
+                        <div class="recordBox">
+                            <dl class="clearfix">
+                                <i></i>
+                                <dt>
+                                    <h5>留不足写字楼位置差，配套不好，自身资金预留，自身资金预留</h5>
+                                    <p>2019-07-24</p>
+                                </dt>
+                                <dd class="clearfix">
+                                    <span></span>
+                                    <span></span>
+                                    <span></span>
+                                </dd>
+                            </dl>
+                            <dl class="clearfix">
+                                <i></i>
+                                <dt>
+                                    <h5>王耶啵啵，到访成功</h5>
+                                    <p>2019-07-24</p>
+                                </dt>
+                                <dd class="clearfix"></dd>
+                            </dl>
+                            <dl class="clearfix">
+                                <i></i>
+                                <dt>
+                                    <h5>王耶啵啵，到访成功</h5>
+                                    <p>2019-07-24</p>
+                                </dt>
+                                <dd class="clearfix">
+                                    <span></span>
+                                    <span></span>
+                                    <span></span>
+                                </dd>
+                            </dl>
+                            <dl class="clearfix">
+                                <i></i>
+                                <dt>
+                                    <h5>王耶啵啵，到访成功</h5>
+                                    <p>2019-07-24</p>
+                                </dt>
+                                <dd class="clearfix">
+                                    <span></span>
+                                    <span></span>
+                                    <span></span>
+                                </dd>
+                            </dl>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+    </div>
+</div>
+</template>
+
+<script>
+  import axios from '~/plugins/axios.js';
+  import Nav from '~/components/Nav/Nav';
+  export default {
+    head () {
+      return {
+        title: 'CBMLS',
+        meta: [
+          { hid: 'description', name: 'description', content: 'CBMLS' },
+          { hid: 'keywords', name: 'keywords', content: 'CBMLS'}
+        ]
+      }
+    },
+    data(){
+      return{
+        imgLeng: "",
+        projectPic: []
+       
+      }
+    },
+    components: {
+        Nav
+    },
+    updated(){
+        // let _this = this;
+        // this.init();
+        // console.log("com-updated");
+        
+    },
+    methods: {
+        mapFun(){
+            // 百度地图API功能
+            var map = new BMap.Map("allmap");
+            // var point = new BMap.Point(this.projectDetail.lng,this.projectDetail.lat);//经度、维度
+            var point = new BMap.Point(116.49467187206017,39.925286410424285);
+            var marker = new BMap.Marker(point);  // 创建标注
+            map.addOverlay(marker);              // 将标注添加到地图中
+            map.centerAndZoom(point, 15);
+            var opts = {
+                width : 100,     // 信息窗口宽度
+                height: 30,     // 信息窗口高度
+                title : "", // 信息窗口标题
+                enableMessage:true,//设置允许信息窗发送短息
+                message:""
+            }
+            var project_address = "朝阳-永安里";
+            var infoWindow = new BMap.InfoWindow(project_address, opts);  // 次数还没用完
+            map.openInfoWindow(infoWindow,point); //开启信息窗口
+        }, 
+        init(){
+            axios({
+                url: '/project/detail',
+                method: "post",
+                params: {
+                    cityId: sessionStorage.cityId || 110100,
+                    projectId: 306,
+                    projectType: 1,
+                    houseType: 1
+                }
+            }).then(function(res){
+                console.log(res)
+                this.imgLeng = res.data.projectPic.length;
+                this.projectPic = res.data.projectPic;
+                // this.
+            }.bind(this)).catch(function(err){
+                console.log("商店列表页面错误：",err)
+            })
+        },
+        
+        lbtFun(){
+            // 轮播
+            var index = 0;
+
+            $('.small ol li').eq(index).addClass('isOpacity').siblings().removeClass('isOpacity');
+
+            $('.big ul li').eq(0).show().siblings().hide();
+
+            $('.small ol li').on('click', function () {
+                index = $(this).index();
+                $(this).addClass('isOpacity').siblings().removeClass('isOpacity');
+                $('.big ul li').eq(index).show().siblings().hide();
+            })
+
+            var w_li = 113;
+            var h_li = 78;
+            var margin_li = 7;
+            var now = 0;
+            var addli = 0;
+            var lisize = this.imgLeng;
+            var num = 5;
+
+            // 判断需要添加的li节点数量
+            var reminder = lisize % num;
+            if (lisize % num != 0) { addli = num - reminder; } else { addli = 0; }
+
+            $('.ps_pre').on('click', function () { // console.log(num);
+                now--;
+                if (now >= 0) {
+                    $('.ulNum').animate({'margin-left':-now * num * (w_li + margin_li * 2)});
+                    btnshow(now, parseInt((lisize + addli) / num), lisize, num);
+                }
+            });
+
+            $('.ps_next').on('click', function () {
+                now++;
+                if (now < (lisize + addli) / num) {
+                    $('.ulNum').animate({'margin-left':-now * num * (w_li + margin_li * 2)});
+                    btnshow(now, parseInt((lisize + addli) / num), lisize, num);
+                }
+            });
+
+            btnshow(now, parseInt((lisize + addli) / num), lisize, num);
+            
+            // 参数说明：
+            // now:当前是第几组，默认是0
+            // c:总共有几组
+            // d:初始化时li的个数
+            // e:每组显示li个数
+        
+            function btnshow(now, c, d, e) {
+                if (d <= e) { // 如果初始化时li的个数小于一组要显示的数，则不显示pre和next按钮
+                    $('.ps_next').hide();
+                    $('.ps_pre').hide();
+
+                    $('.ps_next1').show();
+                    $('.ps_pre1').show();
+                } else if (now == 0) { // 初始化now=0，显示第一组，只显示next
+                    $('.ps_next').show();
+                    $('.ps_next1').hide();
+                    $('.ps_pre').hide();
+                    $('.ps_pre1').show();
+                } else if (now == c - 1) { // 显示到最后一组，只显示pre
+                    $('.ps_next').hide();
+                    $('.ps_next1').show();
+
+                    $('.ps_pre').show();
+                    $('.ps_pre1').hide();
+                } else { // 显示中间组，pre和next都需要显示
+                    $('.ps_next').show();
+                    $('.ps_pre').show();
+
+                    $('.ps_next1').hide();
+                    $('.ps_pre1').hide();
+                }
+            }
+
+            // 锚点
+            var navTop = $('.detailNav').offset().top;
+            var allTop = [
+                $('#info').offset().top - 56,
+                $('#shop').offset().top - 150,
+                $('#seat').offset().top - 150,
+                $('#pic').offset().top - 150,
+                $('#seatPic').offset().top - 150,
+                $('#planePic').offset().top - 150
+            ]
+            $(window).scroll(function () {
+                var winTop = $(window).scrollTop();
+
+                if (winTop >= navTop) {
+                    $('.detailNav').addClass('fixed-top');
+                } else {
+                    $('.detailNav').removeClass('fixed-top');
+                }
+
+                if (winTop < allTop[1]) {
+                    $('.detailNav li').eq(0).addClass('cur').siblings().removeClass('cur')
+                } else if (winTop < allTop[2]) {
+                    $('.detailNav li').eq(1).addClass('cur').siblings().removeClass('cur')
+                } else if (winTop < allTop[3]) {
+                    $('.detailNav li').eq(2).addClass('cur').siblings().removeClass('cur')
+                } else if(winTop < allTop[4]) {
+                    $('.detailNav li').eq(3).addClass('cur').siblings().removeClass('cur')
+                } else if(winTop < allTop[5]) {
+                    $('.detailNav li').eq(4).addClass('cur').siblings().removeClass('cur')
+                } else {
+                    $('.detailNav li').eq(5).addClass('cur').siblings().removeClass('cur')
+                }
+            })
+
+            $('.detailNav li').on('click', function () {
+                var index = $(this).index();
+                $('html,body').animate({scrollTop:allTop[index]}, 100);
+            })
+        }
+
+    },
+    created(){
+
+        let id = this.$route.params.id;
+        // console.log(id);
+
+    },
+    mounted(){
+
+        this.init();
+
+        let _this = this;
+            setTimeout(function () {
+            _this.lbtFun();
+            _this.mapFun();//百度地图
+        },500);
+
+    }
+  }
+</script>
+
+<style lang="less" type="text/less" scoped>
+@import '../../../assets/css/shopDetails.less';
+</style>
+

pages/shopsOffices/officesLease.vue

@@ -0,0 +1,253 @@
+<template>
+<div class="officesLeaseWrap">
+    <Nav></Nav>
+    <div class="shopNavWrap">
+        <dl class="shopNavDl">
+            <dt>
+                <h3><span>优铺</span>CBMLS·商铺写字楼</h3>
+            </dt>
+            <dd>
+                <input type="text" name="" placeholder="请输入写字楼相关信息搜索" class="searchInput">
+                <p class="searchBtn"><span class="iconfont">&#xe613;</span>搜索</p>
+            </dd>
+        </dl>
+        <div class="shopNavList">
+            <ul class="shopNavListUl">
+                <li><a href="/shopsOffices/shopSell">商铺出售</a></li>
+                <li><a href="/shopsOffices/shopLease">商铺出租</a></li>
+                <li class="li1">
+                    <a href="javascript:void(0);">商铺新盘</a>
+                    <div>
+                        <p><a href="/shopsOffices/shopFlatsSell">出售</a></p>
+                        <p><a href="/shopsOffices/shopFlatsLease">出租</a></p>
+                    </div>
+                </li>
+                <li><a href="/shopsOffices/officesSell">写字楼出售</a></li>
+                <li class="changeBg"><a href="/shopsOffices/officesLease">写字楼出租</a></li>
+                <li class="shopNavBox li2">
+                    <a href="javascript:void(0);">写字楼新盘</a>
+                    <div>
+                        <p><a href="/shopsOffices/officesFlatsSell">出售</a></p>
+                        <p><a href="/shopsOffices/officesFlatsLease">出租</a></p>
+                    </div>
+                </li>
+            </ul>
+        </div>
+    </div>
+    <!-- 筛选 -->
+    <div class="shopBox">
+        <ul class="clearfix">
+            <li>首页<span class="iconfont">&#xe614;</span></li>
+            <li>写字楼出租</li>
+        </ul>
+        <dl class="clearfix">
+            <dt>区域</dt>
+            <dd class="clearfix">
+                <span>全部</span>
+                <span>东城</span>
+                <span>西城</span>
+                <span>朝阳</span>
+                <span>东城</span>
+                <span>西城</span>
+                <span>朝阳</span>
+                <span>东城</span>
+                <span>西城</span>
+                <span>朝阳</span>
+                <span>东城</span>
+                <span>西城</span>
+                <span>朝阳</span>
+                <span>东城</span>
+                <span>东城</span>
+                <span>密云县</span>
+                <span>北京周边</span>
+            </dd>
+            <div>
+                <span>全部</span>
+                <span>东城</span>
+                <span>西城</span>
+                <span>朝阳</span>
+                <span>东城</span>
+                <span>西城</span>
+                <span>朝阳</span>
+                <span>东城</span>
+                <span>西城</span>
+                <span>朝阳</span>
+                <span>东城</span>
+                <span>西城</span>
+                <span>朝阳</span>
+                <span>东城</span>
+                <span>西城</span>
+                <span>朝阳</span>
+                <span>东城</span>
+                <span>东城</span>
+                <span>密云县</span>
+                <span>北京周边</span>
+            </div>
+        </dl>
+
+        <dl class="clearfix">
+            <dt>面积</dt>
+            <dd class="clearfix">
+                <span>全部</span>
+                <span>100m²以下</span>
+                <span>100-150m²</span>
+                <span>150-200m²</span>
+                <span>200-300m²</span>
+                <span>300-500m²</span>
+                <span>500-1000m²</span>
+                <span>1000m²以上</span>
+            </dd>
+        </dl>
+        <dl class="clearfix">
+            <dt>日租</dt>
+            <dd class="clearfix">
+                <span>全部</span>
+                <span>3元/m²/天以下</span>
+                <span>2-5千元</span>
+                <span>3-4元/m²/天以下</span>
+                <span>4-5元/m²/天以下</span>
+                <span>5-6元/m²/天以下</span>
+                <span>6-8元/m²/天以下</span>
+                <span>8-10元/m²/天以下</span>
+                <span>10元/m²/天以上</span>
+            </dd>
+        </dl>
+        <dl class="clearfix">
+            <dt>类型</dt>
+            <dd class="clearfix">
+                <span>全部</span>
+                <span>商业街商铺</span>
+                <span>购物中心</span>
+                <span>商场</span>
+                <span>商业街</span>
+                <span>商业裙楼</span>
+                <span>社区商业</span>
+                <span>专业市场</span>
+                <span>主题商业</span>
+                <span>其他</span>
+            </dd>
+        </dl>
+    </div>
+    <!-- 列表 -->
+    <div class="listWrap">
+        <h2>共找到<span>3627</span>套北京在租写字楼</h2>
+        <div class="listBoxL">
+            <div class="listBox">
+                <img src="http://up-img.oss-cn-beijing.aliyuncs.com/new/2019/07/25/bKjyBQKkZK7PmPrd63phfHmr2SFhwQXn.jpg?x-oss-process=style/thumbnail" class="listImg">
+                <dl class="clearfix">
+                    <h3><span class="span1">东城 安定门 / 294.26m²</span></h3>
+                    <dt class="clearfix">
+                        <ul>
+                           <li><span class="iconfont">&#xe616;</span>东城，安定门，鼓楼大街凡尔赛</li>
+                           <li><span class="iconfont">&#xe615;</span>酒店写字楼</li>
+                        </ul>
+                    </dt>
+                    <dd class="clearfix">
+                        <p class="p1">3.26<span>元/天/m²&nbsp;[日租]</span></p>
+                        <p class="p2">6000<span>元/月&nbsp;[月租]</span></p>
+                    </dd>
+                    <div class="listBoxBottom">
+                        <ul>
+                            <li>地铁上盖</li>
+                            <li>随时看铺</li>
+                            <li>繁华地段</li>
+                            <li>品牌地产</li>
+                        </ul>
+                        <div>
+                            <p class="p3">合作佣金：<span>4000&nbsp;元</span></p>
+                            <p class="p4">结佣时间：<span>合同签署30天内</span></p>
+                        </div>
+                    </div>
+                </dl>
+            </div>
+
+            <!-- 分页 -->
+            <div class="page">
+                <el-pagination
+                    background
+                    layout="prev, pager, next"
+                    @current-change="handleCurrentChange"
+                    :page-size=this.pageSize
+                    :total="total1">
+                </el-pagination>
+            </div>
+
+        </div>
+        <!-- 推荐商铺 -->
+        <div class="listBoxR">
+            <h3>推荐写字楼</h3>
+            <dl>
+                <dt>
+                    <img src="http://up-img.oss-cn-beijing.aliyuncs.com/new/2019/05/25/CiJtYE6FwswCGStan8dbfpH52PrNAzrk.jpg?x-oss-process=style/thumbnail">
+                    <p>朝阳-永安里</p>
+                </dt>
+                <dd>
+                    <h5>建国路幼儿园出租通州区安定商场摊位档口</h5>
+                    <p><span>4.26</span>元/天/m²&nbsp;[日租]</p>
+                </dd>
+            </dl>
+        </div>
+    </div>
+</div>
+</template>
+
+<script>
+  import axios from '~/plugins/axios.js';
+  import Nav from '~/components/Nav/Nav';
+  export default {
+    head () {
+      return {
+        title: 'CBMLS',
+        meta: [
+          { hid: 'description', name: 'description', content: 'CBMLS' },
+          { hid: 'keywords', name: 'keywords', content: 'CBMLS'}
+        ]
+      }
+    },
+    data(){
+      return{
+        pageSize: 10, // 每页的数量
+        pageNum: 1, // 页码
+        total1: 100,  //接收渲染数据总数的参数
+      }
+    },
+    mounted(){
+
+    },
+    updated(){
+
+    },
+    components: {
+        Nav
+    },
+    methods: {
+        //分页
+        handleCurrentChange(val) {
+            this.pageNum = val;
+            $('html , body').animate({scrollTop: 100},1200);
+        },
+    }
+  }
+</script>
+
+<style lang="less" type="text/less" scoped>
+@import '../../assets/css/shopNav.less';
+@import '../../assets/css/listBox.less';
+</style>
+
+<style>
+.page .el-pagination {
+    font-weight: normal;
+}
+.page .el-pagination .btn-prev, .page .el-pagination .btn-next, .page .el-pagination .el-pager li {
+    height: 30px;
+    width: 30px;
+    line-height: 30px;
+    border: 1px solid #e5e5e5;
+}
+.page .el-pagination .el-pager li.active {
+    background: #195def !important;
+    border: 1px solid #e5e5e5;
+}   
+</style>
+

pages/shopsOffices/officesSell.vue

@@ -0,0 +1,253 @@
+<template>
+<div class="officesSellWrap">
+    <Nav></Nav>
+    <div class="shopNavWrap">
+        <dl class="shopNavDl">
+            <dt>
+                <h3><span>优铺</span>CBMLS·商铺写字楼</h3>
+            </dt>
+            <dd>
+                <input type="text" name="" placeholder="请输入写字楼相关信息搜索" class="searchInput">
+                <p class="searchBtn"><span class="iconfont">&#xe613;</span>搜索</p>
+            </dd>
+        </dl>
+        <div class="shopNavList">
+            <ul class="shopNavListUl">
+                <li><a href="/shopsOffices/shopSell">商铺出售</a></li>
+                <li><a href="/shopsOffices/shopLease">商铺出租</a></li>
+                <li class="li1">
+                    <a href="javascript:void(0);">商铺新盘</a>
+                    <div>
+                        <p><a href="/shopsOffices/shopFlatsSell">出售</a></p>
+                        <p><a href="/shopsOffices/shopFlatsLease">出租</a></p>
+                    </div>
+                </li>
+                <li class="changeBg"><a href="/shopsOffices/officesSell">写字楼出售</a></li>
+                <li><a href="/shopsOffices/officesLease">写字楼出租</a></li>
+                <li class="shopNavBox li2">
+                    <a href="javascript:void(0);">写字楼新盘</a>
+                    <div>
+                        <p><a href="/shopsOffices/officesFlatsSell">出售</a></p>
+                        <p><a href="/shopsOffices/officesFlatsLease">出租</a></p>
+                    </div>
+                </li>
+            </ul>
+        </div>
+    </div>
+    <!-- 筛选 -->
+    <div class="shopBox">
+        <ul class="clearfix">
+            <li>首页<span class="iconfont">&#xe614;</span></li>
+            <li>写字楼出售</li>
+        </ul>
+        <dl class="clearfix">
+            <dt>区域</dt>
+            <dd class="clearfix">
+                <span>全部</span>
+                <span>东城</span>
+                <span>西城</span>
+                <span>朝阳</span>
+                <span>东城</span>
+                <span>西城</span>
+                <span>朝阳</span>
+                <span>东城</span>
+                <span>西城</span>
+                <span>朝阳</span>
+                <span>东城</span>
+                <span>西城</span>
+                <span>朝阳</span>
+                <span>东城</span>
+                <span>东城</span>
+                <span>密云县</span>
+                <span>北京周边</span>
+            </dd>
+            <div>
+                <span>全部</span>
+                <span>东城</span>
+                <span>西城</span>
+                <span>朝阳</span>
+                <span>东城</span>
+                <span>西城</span>
+                <span>朝阳</span>
+                <span>东城</span>
+                <span>西城</span>
+                <span>朝阳</span>
+                <span>东城</span>
+                <span>西城</span>
+                <span>朝阳</span>
+                <span>东城</span>
+                <span>西城</span>
+                <span>朝阳</span>
+                <span>东城</span>
+                <span>东城</span>
+                <span>密云县</span>
+                <span>北京周边</span>
+            </div>
+        </dl>
+        <dl class="clearfix">
+            <dt>面积</dt>
+            <dd class="clearfix">
+                <span>全部</span>
+                <span>20m²以下</span>
+                <span>20-50m²</span>
+                <span>50-100m²</span>
+                <span>100-200m²</span>
+                <span>200-500m²</span>
+                <span>500m²以上</span>
+            </dd>
+        </dl>
+        <dl class="clearfix">
+            <dt>总价</dt>
+            <dd class="clearfix">
+                <span>全部</span>
+                <span>50万元以下</span>
+                <span>50-100万</span>
+                <span>100-200万</span>
+                <span>200-300万</span>
+                <span>300-500万</span>
+                <span>500-800万</span>
+                <span>800-1000万</span>
+                <span>1000万以上</span>
+            </dd>
+        </dl>
+        <dl class="clearfix">
+            <dt>类型</dt>
+            <dd class="clearfix">
+                <span>全部</span>
+                <span>纯城市综合体楼</span>
+                <span>购物中心</span>
+                <span>商场</span>
+                <span>商业街</span>
+                <span>商业裙楼</span>
+                <span>社区商业</span>
+                <span>专业市场</span>
+                <span>主题商业</span>
+                <span>其他</span>
+            </dd>
+        </dl>
+    </div>
+    <!-- 列表 -->
+    <div class="listWrap">
+        <h2>共找到<span>2284</span>套北京在售写字楼</h2>
+        <div class="listBoxL">
+            <div class="listBox">
+                <img src="http://up-img.oss-cn-beijing.aliyuncs.com/new/2019/07/25/bKjyBQKkZK7PmPrd63phfHmr2SFhwQXn.jpg?x-oss-process=style/thumbnail" class="listImg">
+                <dl class="clearfix">
+                    <h3><span class="span1">金融街（长安）中心·金熙汇 / 294.26m² / 可注册 / 可分割</span></h3>
+                    <dt class="clearfix">
+                        <ul>
+                           <li><span class="iconfont">&#xe616;</span>东城，安定门，鼓楼大街凡尔赛</li>
+                           <li><span class="iconfont">&#xe615;</span>半地下室，纯城市综合体楼</li>
+                        </ul>
+                    </dt>
+                    <dd class="clearfix">
+                        <p class="p1">676.86<span>万元&nbsp;[总价]</span></p>
+                        <p class="p2">20000.24<span>元/m²&nbsp;[单价]</span></p>
+                    </dd>
+                    <div class="listBoxBottom">
+                        <ul>
+                            <li>地铁上盖</li>
+                            <li>随时看铺</li>
+                            <li>繁华地段</li>
+                            <li>品牌地产</li>
+                        </ul>
+                        <div>
+                            <p class="p3">合作佣金：<span>4000&nbsp;元</span></p>
+                            <p class="p4">结佣时间：<span>合同签署30天内</span></p>
+                        </div>
+                    </div>
+                </dl>
+            </div>
+
+            <!-- 分页 -->
+            <div class="page">
+                <el-pagination
+                    background
+                    layout="prev, pager, next"
+                    @current-change="handleCurrentChange"
+                    :page-size=this.pageSize
+                    :total="total1">
+                </el-pagination>
+            </div>
+
+        </div>
+        <!-- 推荐商铺 -->
+        <div class="listBoxR">
+            <h3>推荐商铺</h3>
+            <dl>
+                <dt>
+                    <img src="http://up-img.oss-cn-beijing.aliyuncs.com/new/2019/05/25/CiJtYE6FwswCGStan8dbfpH52PrNAzrk.jpg?x-oss-process=style/thumbnail">
+                    <p>朝阳-奥林匹克公园</p>
+                </dt>
+                <dd>
+                    <h5>建国路幼儿园出租</h5>
+                    <p><span>24600</span>元/m²&nbsp;[单价]</p>
+                </dd>
+            </dl>
+        </div>
+    </div>
+
+
+</div>
+</template>
+
+<script>
+  import axios from '~/plugins/axios.js';
+  import Nav from '~/components/Nav/Nav';
+  export default {
+    head () {
+      return {
+        title: 'CBMLS',
+        meta: [
+          { hid: 'description', name: 'description', content: 'CBMLS' },
+          { hid: 'keywords', name: 'keywords', content: 'CBMLS'}
+        ]
+      }
+    },
+    data(){
+      return{
+        pageSize: 10, // 每页的数量
+        pageNum: 1, // 页码
+        total1: 100,  //接收渲染数据总数的参数
+      }
+    },
+    mounted(){
+
+    },
+    updated(){
+
+    },
+    components: {
+        Nav
+    },
+    methods: {
+        //分页
+        handleCurrentChange(val) {
+            this.pageNum = val;
+            $('html , body').animate({scrollTop: 100},1200);
+        },
+    }
+  }
+</script>
+
+<style lang="less" type="text/less" scoped>
+@import '../../assets/css/shopNav.less';
+@import '../../assets/css/listBox.less';
+</style>
+
+<style>
+.page .el-pagination {
+    font-weight: normal;
+}
+.page .el-pagination .btn-prev, .page .el-pagination .btn-next, .page .el-pagination .el-pager li {
+    height: 30px;
+    width: 30px;
+    line-height: 30px;
+    border: 1px solid #e5e5e5;
+}
+.page .el-pagination .el-pager li.active {
+    background: #195def !important;
+    border: 1px solid #e5e5e5;
+}   
+</style>
+

pages/shopsOffices/shopFlatsLease.vue

@@ -0,0 +1,241 @@
+<template>
+<div class="shopNewFlatsWrap">
+    <Nav></Nav>
+    <div class="shopNavWrap">
+        <dl class="shopNavDl">
+            <dt>
+                <h3><span>优铺</span>CBMLS·商铺写字楼</h3>
+            </dt>
+            <dd>
+                <input type="text" name="" placeholder="请输入商铺相关信息搜索" class="searchInput">
+                <p class="searchBtn"><span class="iconfont">&#xe613;</span>搜索</p>
+            </dd>
+        </dl>
+        <div class="shopNavList">
+            <ul class="shopNavListUl">
+                <li><a href="/shopsOffices/shopSell">商铺出售</a></li>
+                <li><a href="/shopsOffices/shopLease">商铺出租</a></li>
+                <li class="changeBg li1">
+                    <a href="javascript:void(0);">商铺新盘</a>
+                    <div>
+                        <p><a href="/shopsOffices/shopFlatsSell">出售</a></p>
+                        <p><a href="/shopsOffices/shopFlatsLease">出租</a></p>
+                    </div>
+                </li>
+                <li><a href="/shopsOffices/officesSell">写字楼出售</a></li>
+                <li><a href="/shopsOffices/officesLease">写字楼出租</a></li>
+                <li class="shopNavBox li2">
+                    <a href="javascript:void(0);">写字楼新盘</a>
+                    <div>
+                        <p><a href="/shopsOffices/officesFlatsSell">出售</a></p>
+                        <p><a href="/shopsOffices/officesFlatsLease">出租</a></p>
+                    </div>
+                </li>
+            </ul>
+        </div>
+    </div>
+    <!-- 筛选 -->
+    <div class="shopBox">
+        <ul class="clearfix">
+            <li>首页<span class="iconfont">&#xe614;</span></li>
+            <li>商铺新盘出租</li>
+        </ul>
+        <dl class="clearfix">
+            <dt>区域</dt>
+            <dd class="clearfix">
+                <span>全部</span>
+                <span>东城</span>
+                <span>西城</span>
+                <span>朝阳</span>
+                <span>东城</span>
+                <span>西城</span>
+                <span>朝阳</span>
+                <span>东城</span>
+                <span>西城</span>
+                <span>朝阳</span>
+                <span>东城</span>
+                <span>西城</span>
+                <span>朝阳</span>
+                <span>东城</span>
+                <span>东城</span>
+                <span>密云县</span>
+                <span>北京周边</span>
+            </dd>
+            <div>
+                <span>全部</span>
+                <span>东城</span>
+                <span>西城</span>
+                <span>朝阳</span>
+                <span>东城</span>
+                <span>西城</span>
+                <span>朝阳</span>
+                <span>东城</span>
+                <span>西城</span>
+                <span>朝阳</span>
+                <span>东城</span>
+                <span>西城</span>
+                <span>朝阳</span>
+                <span>东城</span>
+                <span>西城</span>
+                <span>朝阳</span>
+                <span>东城</span>
+                <span>东城</span>
+                <span>密云县</span>
+                <span>北京周边</span>
+            </div>
+        </dl>
+        <dl class="clearfix">
+            <dt>日租</dt>
+            <dd class="clearfix">
+                <span>全部</span>
+                <span>0-3元/天/m²</span>
+                <span>3-4元/天/m²</span>
+                <span>4-5元/天/m²</span>
+                <span>5-7元/天/m²</span>
+                <span>7-9元/天/m²</span>
+                <span>9-12元/天/m²</span>
+                <span>12元/天/m²以上</span>
+            </dd>
+        </dl>
+        <dl class="clearfix">
+            <dt>类型</dt>
+            <dd class="clearfix">
+                <span>全部</span>
+                <span>纯城市综合体楼</span>
+                <span>购物中心</span>
+                <span>商场</span>
+                <span>商业街</span>
+                <span>商业裙楼</span>
+                <span>社区商业</span>
+                <span>专业市场</span>
+                <span>主题商业</span>
+                <span>其他</span>
+            </dd>
+        </dl>
+    </div>
+    <!-- 列表 -->
+    <div class="listWrap">
+        <h2>共找到<span>3627</span>套北京在租商铺新盘</h2>
+        <div class="listBoxL">
+            <div class="listBox" @click="goDetails('2')">
+                <img src="http://up-sell.oss-cn-beijing.aliyuncs.com/upload/2019/07/05/y7wJrcQNnsCDnjQ3ntEpkR6C1pXzmTEM" class="listImg">
+                <dl class="clearfix">
+                    <h3><span class="span1">朝阳大悦城中心</span><span class="span2">(开盘时间：2019-12-12)</span></h3>
+                    <dt class="clearfix">
+                        <ul>
+                           <li><span class="iconfont">&#xe616;</span>东城，安定门，鼓楼大街凡尔赛</li>
+                           <li><span class="iconfont">&#xe615;</span>城市综合体</li>
+                        </ul>
+                    </dt>
+                    <dd class="clearfix">
+                        <p class="onlyTxt">3.21<span>元/天/m²&nbsp;[日租]</span></p>
+                    </dd>
+                    <div class="listBoxBottom">
+                        <ul>
+                            <li>地铁上盖</li>
+                            <li>随时看铺</li>
+                            <li>繁华地段</li>
+                            <li>品牌地产</li>
+                        </ul>
+                        <div>
+                            <p class="p3">合作佣金：<span>4000&nbsp;元</span></p>
+                            <p class="p4">结佣时间：<span>合同签署30天内</span></p>
+                        </div>
+                    </div>
+                </dl>
+            </div>
+
+            <!-- 分页 -->
+            <div class="page">
+                <el-pagination
+                    background
+                    layout="prev, pager, next"
+                    @current-change="handleCurrentChange"
+                    :page-size=this.pageSize
+                    :total="total1">
+                </el-pagination>
+            </div>
+
+        </div>
+        <!-- 推荐商铺 -->
+        <div class="listBoxR">
+            <h3>推荐商铺</h3>
+            <dl>
+                <dt>
+                    <img src="http://up-img.oss-cn-beijing.aliyuncs.com/new/2019/05/25/CiJtYE6FwswCGStan8dbfpH52PrNAzrk.jpg?x-oss-process=style/thumbnail">
+                </dt>
+                <dd>
+                    <h5>长安太和1号楼商铺</h5>
+                    <p>朝阳-大悦城</p>
+                </dd>
+            </dl>
+        </div>
+    </div>
+
+
+</div>
+</template>
+
+<script>
+  import axios from '~/plugins/axios.js';
+  import Nav from '~/components/Nav/Nav';
+  export default {
+    head () {
+      return {
+        title: 'CBMLS',
+        meta: [
+          { hid: 'description', name: 'description', content: 'CBMLS' },
+          { hid: 'keywords', name: 'keywords', content: 'CBMLS'}
+        ]
+      }
+    },
+    data(){
+      return{
+        pageSize: 10, // 每页的数量
+        pageNum: 1, // 页码
+        total1: 100,  //接收渲染数据总数的参数
+      }
+    },
+    mounted(){
+
+    },
+    updated(){
+
+    },
+    components: {
+        Nav
+    },
+    methods: {
+        //分页
+        handleCurrentChange(val) {
+            this.pageNum = val;
+            $('html , body').animate({scrollTop: 100},1200);
+        },
+        goDetails(id){
+            window.open('/shopsOffices/shopFlatsLeaseDtl/'+id);
+        }
+    }
+  }
+</script>
+
+<style lang="less" type="text/less" scoped>
+@import '../../assets/css/shopNav.less';
+@import '../../assets/css/listBox.less';
+</style>
+
+<style>
+.page .el-pagination {
+    font-weight: normal;
+}
+.page .el-pagination .btn-prev, .page .el-pagination .btn-next, .page .el-pagination .el-pager li {
+    height: 30px;
+    width: 30px;
+    line-height: 30px;
+    border: 1px solid #e5e5e5;
+}
+.page .el-pagination .el-pager li.active {
+    background: #195def !important;
+    border: 1px solid #e5e5e5;
+}   
+</style>
+

pages/shopsOffices/shopFlatsLeaseDtl/_id.vue

@@ -0,0 +1,511 @@
+<template>
+<div class="shopSellDelWrap">
+    <Nav></Nav>
+    <div class="detail">
+        <div class="detailTop">
+            <div class="detailTopMain">
+                <ul class="ul1 clearfix">
+                    <li>首页<span>></span></li>
+                    <li>商铺新盘出租<span>></span></li>
+                    <li>商铺详情</li>
+                </ul>
+                <h2>泰禾北京院子二期</h2>
+                <div class="clearfix">
+                    <p><span>2.68</span>元/天/m²[日租]</p>
+                    <p><span>30.98</span>m²[面积]</p>
+                </div>
+                <ul class="ul2 clearfix">
+                    <li>地铁上盖</li>
+                    <li>随时看铺</li>
+                    <li>繁华地段</li>
+                    <li>临近写字楼</li>
+                    <li>临近地铁</li>
+                </ul>
+            </div>
+        </div>
+
+        <div class="detailBox clearfix">
+            <div class="detailBoxL">
+                <div class="lbt">
+                    <div class="shop-lbt">
+                        <div class="shop-left left">
+                            <div class="big">
+                                <ul class="imgLength">
+                                    <li>
+                                        <img src="http://cdn.youpuchina.com/new/2019-07-24/O3q2WoRQekU5OGL2stzdHXnL1uiSsoc7?x-oss-process=style/watermark">
+                                    </li>
+                                    <li>
+                                        <img src="http://cdn.youpuchina.com/new/2019-07-25/fDSt5gohSPCRSkGfzpGY7E83NptiKNh0?x-oss-process=style/watermark">
+                                    </li>
+                                    <li>
+                                        <img src="http://cdn.youpuchina.com/new/2019-07-24/ZuIdBM7j0LAYlBBrt0oKicw4YJnXNGuR?x-oss-process=style/watermark">
+                                    </li>
+                                    <li>
+                                        <img src="http://cdn.youpuchina.com/new/2019-07-24/O3q2WoRQekU5OGL2stzdHXnL1uiSsoc7?x-oss-process=style/watermark">
+                                    </li>
+                                    <li>
+                                        <img src="http://cdn.youpuchina.com/new/2019-07-24/ZuIdBM7j0LAYlBBrt0oKicw4YJnXNGuR?x-oss-process=style/watermark">
+                                    </li>
+                                    <li>
+                                        <img src="http://cdn.youpuchina.com/new/2019-07-24/ZuIdBM7j0LAYlBBrt0oKicw4YJnXNGuR?x-oss-process=style/watermark">
+                                    </li>
+                                    <li>
+                                        <img src="http://cdn.youpuchina.com/new/2019-07-24/ZuIdBM7j0LAYlBBrt0oKicw4YJnXNGuR?x-oss-process=style/watermark">
+                                    </li>
+                                    <li>
+                                        <img src="http://cdn.youpuchina.com/new/2019-07-25/fDSt5gohSPCRSkGfzpGY7E83NptiKNh0?x-oss-process=style/watermark">
+                                    </li>
+                                </ul>
+                            </div>
+
+                            <div class="small">
+                                <div class="pg_left ps_pre">   
+                                    <img src="~/assets/images/common/leftWhite.png">
+                                </div>
+                                <div class="pg_left ps_pre1">
+                                    <img src="~/assets/images/common/leftGray.png">
+                                </div>
+                                <div class="pg_right ps_next">
+                                    <img src="~/assets/images/common/rightWhite.png">
+                                </div>
+                                <div class="pg_right ps_next1">
+                                   <img src="~/assets/images/common/rightGray.png">
+                                </div>
+                                <div class="activity" id="activity-slide">
+                                    <ol class="clearfix ulNum">
+                                        <li>
+                                            <img src="http://cdn.youpuchina.com/new/2019-07-24/O3q2WoRQekU5OGL2stzdHXnL1uiSsoc7?x-oss-process=style/watermark">
+                                        </li>
+                                        <li>
+                                            <img src="http://cdn.youpuchina.com/new/2019-07-25/fDSt5gohSPCRSkGfzpGY7E83NptiKNh0?x-oss-process=style/watermark">
+                                        </li>
+                                        <li>
+                                            <img src="http://cdn.youpuchina.com/new/2019-07-24/ZuIdBM7j0LAYlBBrt0oKicw4YJnXNGuR?x-oss-process=style/watermark">
+                                        </li>
+                                        <li>
+                                            <img src="http://cdn.youpuchina.com/new/2019-07-24/O3q2WoRQekU5OGL2stzdHXnL1uiSsoc7?x-oss-process=style/watermark">
+                                        </li>
+                                        <li>
+                                            <img src="http://cdn.youpuchina.com/new/2019-07-24/ZuIdBM7j0LAYlBBrt0oKicw4YJnXNGuR?x-oss-process=style/watermark">
+                                        </li>
+                                        <li>
+                                            <img src="http://cdn.youpuchina.com/new/2019-07-24/ZuIdBM7j0LAYlBBrt0oKicw4YJnXNGuR?x-oss-process=style/watermark">
+                                        </li>
+                                        <li>
+                                            <img src="http://cdn.youpuchina.com/new/2019-07-24/ZuIdBM7j0LAYlBBrt0oKicw4YJnXNGuR?x-oss-process=style/watermark">
+                                        </li>
+                                        <li>
+                                            <img src="http://cdn.youpuchina.com/new/2019-07-25/fDSt5gohSPCRSkGfzpGY7E83NptiKNh0?x-oss-process=style/watermark">
+                                        </li>
+                                    </ol>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="detailNav">
+                    <ul>
+                        <li class="cur">基本信息</li>
+                        <li>商铺描述</li>
+                        <li>地理位置</li>
+                        <li>商铺图片</li>
+                        <li style="width: 118px;">位置图</li>
+                        <li style="width: 118px;">平面图</li>
+                    </ul>
+                </div>
+                <div class="info clearfix" id="info">
+                    <h3 class="titleH3">基本信息</h3>
+                    <dl class="dlTop">
+                        <dt>商铺类型</dt>
+                        <dd>档口摊位</dd>
+                    </dl>
+                    <dl class="dlTop">
+                        <dt>面&emsp;&emsp;积</dt>
+                        <dd>60.22m²</dd>
+                    </dl>
+                    <dl>
+                        <dt>日&nbsp;租&nbsp;金</dt>
+                        <dd>2.66元/天/m²</dd>
+                    </dl>
+                    <dl>
+                        <dt>付款方式</dt>
+                        <dd>半年付</dd>
+                    </dl>
+                    <dl>
+                        <dt>开&nbsp;发&nbsp;商</dt>
+                        <dd>solo中国</dd>
+                    </dl>
+                    <dl>
+                        <dt>开盘时间</dt>
+                        <dd>2019-12-02</dd>
+                    </dl>
+                    <dl>
+                        <dt>商铺面积</dt>
+                        <dd>0-100 m²，100-200 m²，200-300 m²，300-400 m²，400-1000 m²</dd>
+                    </dl>
+                </div>
+                <div class="shop" id="shop">
+                    <h3 class="titleH3">商铺描述</h3>
+                    <dl class="clearfix">
+                        <dt>
+                            <p>商铺</p>
+                            <p>简介</p>
+                        </dt>
+                        <dd>中粮广场项目由A座、B座两幢5A智能甲级写字楼和高级购物商场组成，是一座集甲级写字楼和 高档购物中心为一体的大型建筑群体。总建筑面积约12万平米，其中包括约6万平米的高级中粮 广场购物中心及车位充足的中粮广场停车场，两幢分别为13层和14层总面积达车位充足的中粮 广场停车场，两幢分别为13层和14层6万平方米的写字楼。</dd>
+                    </dl>
+                    <dl class="clearfix" style="margin-top: 20px;">
+                        <dt>
+                            <p>周边</p>
+                            <p>配套</p>
+                        </dt>
+                        <dd>中粮广场项目由A座、B座两幢5A智能甲级写字楼和高级购物商场组成，是一座集甲级写字楼和 高档购物中心为一体的大型建筑群体。</dd>
+                    </dl>
+                </div>
+                <div class="seat" id="seat">
+                    <h3 class="titleH3">地理位置</h3>
+                    <!-- <div class="mapWrap"> -->
+                        <div id="allmap" style="width: 700px; height: 350px;"></div>
+                    <!-- </div> -->
+                </div>
+
+                <div class="pic" id="pic">
+                    <h3 class="titleH3">商铺图片</h3>
+                    <ul>
+                        <li><img src="http://cdn.youpuchina.com/new/2019/07/27/47eYFFWX6BrckcYshYf8AJ6AQyMGszSp.jpg?x-oss-process=style/watermark"></li>
+                        <li><img src="http://cdn.youpuchina.com/new/2019/07/27/47eYFFWX6BrckcYshYf8AJ6AQyMGszSp.jpg?x-oss-process=style/watermark"></li>
+                        <li><img src="http://cdn.youpuchina.com/new/2019/07/27/47eYFFWX6BrckcYshYf8AJ6AQyMGszSp.jpg?x-oss-process=style/watermark"></li>
+                        <li><img src="http://cdn.youpuchina.com/new/2019/07/27/47eYFFWX6BrckcYshYf8AJ6AQyMGszSp.jpg?x-oss-process=style/watermark"></li>
+                    </ul>
+                </div>
+
+                <div class="pic" id="seatPic">
+                    <h3 class="titleH3">位置图</h3>
+                    <ul>
+                        <li><img src="http://cdn.youpuchina.com/new/2019/07/27/47eYFFWX6BrckcYshYf8AJ6AQyMGszSp.jpg?x-oss-process=style/watermark"></li>
+                        <li><img src="http://cdn.youpuchina.com/new/2019/07/27/47eYFFWX6BrckcYshYf8AJ6AQyMGszSp.jpg?x-oss-process=style/watermark"></li>
+                    </ul>
+                </div>
+
+                <div class="pic" id="planePic">
+                    <h3 class="titleH3">平面图</h3>
+                    <ul>
+                        <li><img src="http://up-sell.oss-cn-beijing.aliyuncs.com/upload/2019/07/11/ktDtYRjhZDEzJ2dp4826sp8Z84FNWybw"></li>
+                        <li><img src="http://up-sell.oss-cn-beijing.aliyuncs.com/upload/2019/07/11/cW7BF5syKiRKW3iRpWR8seca2hFNB8Zw"></li>
+                        <li><img src="http://up-sell.oss-cn-beijing.aliyuncs.com/upload/2019/07/11/ktDtYRjhZDEzJ2dp4826sp8Z84FNWybw"></li>
+                        <li><img src="http://up-sell.oss-cn-beijing.aliyuncs.com/upload/2019/07/11/cW7BF5syKiRKW3iRpWR8seca2hFNB8Zw"></li>
+                    </ul>
+                </div>
+
+
+            </div>
+            <div class="detailBoxR">
+                <div class="card">
+                    <div class="cardTop clearfix">
+                        <dl class="dl1">
+                            <dt><span>36.8</span>万元</dt>
+                            <dd>[均价]</dd>
+                        </dl>
+                        <dl class="dl2">
+                            <dt><span>236.8</span>m²</dt>
+                            <dd>[面积]</dd>
+                        </dl>
+                    </div>
+                    <div class="cardBar">
+                        <i></i>
+                        <p class="p1">此商铺合作佣金</p>
+                        <p class="p2">6000<span>元</span></p>
+                    </div>
+                    <ul class="cardUl">
+                        <li>
+                            <span class="span1">结佣时间</span>
+                            <span class="span2">签署合同30天之内</span>
+                        </li>
+                        <li>
+                            <span class="span1">适合业态</span>
+                            <span class="span2">文创，其他</span>
+                        </li>
+                        <li>
+                            <span class="span1">商铺类型</span>
+                            <span class="span2">商业街商铺</span>
+                        </li>
+                        <li>
+                            <span class="span1">详细地址</span>
+                            <span class="span2">北京市东城区建国门内大街8号北京市东城区 建国门内大街8号</span>
+                        </li>
+                    </ul>
+                    <dl class="cardFoot">
+                        <dt></dt>
+                        <dd>
+                            <h3>王一博儿</h3>
+                            <!-- <p>点击查看经纪人电话</p> -->
+                            <p><span class="iconfont">&#xe61f;</span>130-1109-2864</p>
+                        </dd>
+                    </dl>
+                </div>
+                <div class="record">
+                    <dl class="recordTop clearfix">
+                        <dt>跟进记录</dt>
+                        <dd>
+                            <!-- <p class="p1">终止流程</p> -->
+                            <p class="hoverBg">新增到访</p>
+                            <!-- <p class="hoverBg">签约</p> -->
+                            <!-- <p class="hoverBg">提醒结佣</p> -->
+                            <!-- <p class="hoverBg">结佣</p> -->
+                            <!-- <span>交易已完成</span> -->
+                        </dd>
+                    </dl>
+                    <div class="recordNav clearfix">
+                        <ul>
+                            <li class="navCur">查看信息</li>
+                            <li>到访</li>
+                            <li>认购</li>
+                            <li>签约</li>
+                            <li>结佣</li>
+                            <li>终止</li>
+                        </ul>
+                    </div>
+                    <div class="recordMain">
+                        <div class="recordBox">
+                            <dl class="clearfix">
+                                <i></i>
+                                <dt>
+                                    <h5>留不足写字楼位置差，配套不好，自身资金预留，自身资金预留</h5>
+                                    <p>2019-07-24</p>
+                                </dt>
+                                <dd class="clearfix">
+                                    <span></span>
+                                    <span></span>
+                                    <span></span>
+                                </dd>
+                            </dl>
+                            <dl class="clearfix">
+                                <i></i>
+                                <dt>
+                                    <h5>王耶啵啵，到访成功</h5>
+                                    <p>2019-07-24</p>
+                                </dt>
+                                <dd class="clearfix"></dd>
+                            </dl>
+                            <dl class="clearfix">
+                                <i></i>
+                                <dt>
+                                    <h5>王耶啵啵，到访成功</h5>
+                                    <p>2019-07-24</p>
+                                </dt>
+                                <dd class="clearfix">
+                                    <span></span>
+                                    <span></span>
+                                    <span></span>
+                                </dd>
+                            </dl>
+                            <dl class="clearfix">
+                                <i></i>
+                                <dt>
+                                    <h5>王耶啵啵，到访成功</h5>
+                                    <p>2019-07-24</p>
+                                </dt>
+                                <dd class="clearfix">
+                                    <span></span>
+                                    <span></span>
+                                    <span></span>
+                                </dd>
+                            </dl>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+    </div>
+</div>
+</template>
+
+<script>
+  import axios from '~/plugins/axios.js';
+  import Nav from '~/components/Nav/Nav';
+  export default {
+    head () {
+      return {
+        title: 'CBMLS',
+        meta: [
+          { hid: 'description', name: 'description', content: 'CBMLS' },
+          { hid: 'keywords', name: 'keywords', content: 'CBMLS'}
+        ]
+      }
+    },
+    data(){
+      return{
+        imgLeng: 8,
+       
+      }
+    },
+    components: {
+        Nav
+    },
+    updated(){
+      
+    },
+    methods: {
+        mapFun(){
+            // 百度地图API功能
+            var map = new BMap.Map("allmap");
+            // var point = new BMap.Point(this.projectDetail.lng,this.projectDetail.lat);//经度、维度
+            var point = new BMap.Point(116.49467187206017,39.925286410424285);
+            var marker = new BMap.Marker(point);  // 创建标注
+            map.addOverlay(marker);              // 将标注添加到地图中
+            map.centerAndZoom(point, 15);
+            var opts = {
+                width : 100,     // 信息窗口宽度
+                height: 30,     // 信息窗口高度
+                title : "", // 信息窗口标题
+                enableMessage:true,//设置允许信息窗发送短息
+                message:""
+            }
+            var project_address = "朝阳-永安里";
+            var infoWindow = new BMap.InfoWindow(project_address, opts);  // 次数还没用完
+            map.openInfoWindow(infoWindow,point); //开启信息窗口
+        }, 
+
+        lbtFun(){
+            // 轮播
+            var index = 0;
+
+            $('.small ol li').eq(index).addClass('isOpacity').siblings().removeClass('isOpacity');
+
+            $('.big ul li').eq(0).show().siblings().hide();
+
+            $('.small ol li').on('click', function () {
+                index = $(this).index();
+                $(this).addClass('isOpacity').siblings().removeClass('isOpacity');
+                $('.big ul li').eq(index).show().siblings().hide();
+            })
+
+            var w_li = 113;
+            var h_li = 78;
+            var margin_li = 7;
+            var now = 0;
+            var addli = 0;
+            var lisize = this.imgLeng;
+            var num = 5;
+
+            // 判断需要添加的li节点数量
+            var reminder = lisize % num;
+            if (lisize % num != 0) { addli = num - reminder; } else { addli = 0; }
+
+            $('.ps_pre').on('click', function () { // console.log(num);
+                now--;
+                if (now >= 0) {
+                    $('.ulNum').animate({'margin-left':-now * num * (w_li + margin_li * 2)});
+                    btnshow(now, parseInt((lisize + addli) / num), lisize, num);
+                }
+            });
+
+            $('.ps_next').on('click', function () {
+                now++;
+                if (now < (lisize + addli) / num) {
+                    $('.ulNum').animate({'margin-left':-now * num * (w_li + margin_li * 2)});
+                    btnshow(now, parseInt((lisize + addli) / num), lisize, num);
+                }
+            });
+
+            btnshow(now, parseInt((lisize + addli) / num), lisize, num);
+            
+            // 参数说明：
+            // now:当前是第几组，默认是0
+            // c:总共有几组
+            // d:初始化时li的个数
+            // e:每组显示li个数
+        
+            function btnshow(now, c, d, e) {
+                if (d <= e) { // 如果初始化时li的个数小于一组要显示的数，则不显示pre和next按钮
+                    $('.ps_next').hide();
+                    $('.ps_pre').hide();
+
+                    $('.ps_next1').show();
+                    $('.ps_pre1').show();
+                } else if (now == 0) { // 初始化now=0，显示第一组，只显示next
+                    $('.ps_next').show();
+                    $('.ps_next1').hide();
+                    $('.ps_pre').hide();
+                    $('.ps_pre1').show();
+                } else if (now == c - 1) { // 显示到最后一组，只显示pre
+                    $('.ps_next').hide();
+                    $('.ps_next1').show();
+
+                    $('.ps_pre').show();
+                    $('.ps_pre1').hide();
+                } else { // 显示中间组，pre和next都需要显示
+                    $('.ps_next').show();
+                    $('.ps_pre').show();
+
+                    $('.ps_next1').hide();
+                    $('.ps_pre1').hide();
+                }
+            }
+
+            // 锚点
+            var navTop = $('.detailNav').offset().top;
+            var allTop = [
+                $('#info').offset().top - 56,
+                $('#shop').offset().top - 150,
+                $('#seat').offset().top - 150,
+                $('#pic').offset().top - 150,
+                $('#seatPic').offset().top - 150,
+                $('#planePic').offset().top - 150
+            ]
+            $(window).scroll(function () {
+                var winTop = $(window).scrollTop();
+
+                if (winTop >= navTop) {
+                    $('.detailNav').addClass('fixed-top');
+                } else {
+                    $('.detailNav').removeClass('fixed-top');
+                }
+
+                if (winTop < allTop[1]) {
+                    $('.detailNav li').eq(0).addClass('cur').siblings().removeClass('cur')
+                } else if (winTop < allTop[2]) {
+                    $('.detailNav li').eq(1).addClass('cur').siblings().removeClass('cur')
+                } else if (winTop < allTop[3]) {
+                    $('.detailNav li').eq(2).addClass('cur').siblings().removeClass('cur')
+                } else if(winTop < allTop[4]) {
+                    $('.detailNav li').eq(3).addClass('cur').siblings().removeClass('cur')
+                } else if(winTop < allTop[5]) {
+                    $('.detailNav li').eq(4).addClass('cur').siblings().removeClass('cur')
+                } else {
+                    $('.detailNav li').eq(5).addClass('cur').siblings().removeClass('cur')
+                }
+            })
+
+            $('.detailNav li').on('click', function () {
+                var index = $(this).index();
+                $('html,body').animate({scrollTop:allTop[index]}, 100);
+            })
+        }
+
+    },
+    created(){
+
+        let id = this.$route.params.id;
+        console.log(id);
+
+    },
+    mounted(){
+
+        this.mapFun();//百度地图
+
+        let _this = this;
+            setTimeout(function () {
+            _this.lbtFun();
+            _this.mapFun();//百度地图
+        },500);
+
+    }
+}
+</script>
+
+<style lang="less" type="text/less" scoped>
+@import '../../../assets/css/shopDetails.less';
+</style>
+

pages/shopsOffices/shopFlatsSell.vue

@@ -0,0 +1,239 @@
+<template>
+<div class="shopFlatsSellWrap">
+    <Nav></Nav>
+    <div class="shopNavWrap">
+        <dl class="shopNavDl">
+            <dt>
+                <h3><span>优铺</span>CBMLS·商铺写字楼</h3>
+            </dt>
+            <dd>
+                <input type="text" name="" placeholder="请输入商铺相关信息搜索" class="searchInput">
+                <p class="searchBtn"><span class="iconfont">&#xe613;</span>搜索</p>
+            </dd>
+        </dl>
+        <div class="shopNavList">
+            <ul class="shopNavListUl">
+                <li><a href="/shopsOffices/shopSell">商铺出售</a></li>
+                <li><a href="/shopsOffices/shopLease">商铺出租</a></li>
+                <li class="changeBg li1">
+                    <a href="javascript:void(0);">商铺新盘</a>
+                    <div>
+                        <p><a href="/shopsOffices/shopFlatsSell">出售</a></p>
+                        <p><a href="/shopsOffices/shopFlatsLease">出租</a></p>
+                    </div>
+                </li>
+                <li><a href="/shopsOffices/officesSell">写字楼出售</a></li>
+                <li><a href="/shopsOffices/officesLease">写字楼出租</a></li>
+                <li class="shopNavBox li2">
+                    <a href="javascript:void(0);">写字楼新盘</a>
+                    <div>
+                        <p><a href="/shopsOffices/officesFlatsSell">出售</a></p>
+                        <p><a href="/shopsOffices/officesFlatsLease">出租</a></p>
+                    </div>
+                </li>
+            </ul>
+        </div>
+    </div>
+    <!-- 筛选 -->
+    <div class="shopBox">
+        <ul class="clearfix">
+            <li>首页<span class="iconfont">&#xe614;</span></li>
+            <li>商铺新盘出售</li>
+        </ul>
+        <dl class="clearfix">
+            <dt>区域</dt>
+            <dd class="clearfix">
+                <span>全部</span>
+                <span>东城</span>
+                <span>西城</span>
+                <span>朝阳</span>
+                <span>东城</span>
+                <span>西城</span>
+                <span>朝阳</span>
+                <span>东城</span>
+                <span>西城</span>
+                <span>朝阳</span>
+                <span>东城</span>
+                <span>西城</span>
+                <span>朝阳</span>
+                <span>东城</span>
+                <span>东城</span>
+                <span>密云县</span>
+                <span>北京周边</span>
+            </dd>
+            <div>
+                <span>全部</span>
+                <span>东城</span>
+                <span>西城</span>
+                <span>朝阳</span>
+                <span>东城</span>
+                <span>西城</span>
+                <span>朝阳</span>
+                <span>东城</span>
+                <span>西城</span>
+                <span>朝阳</span>
+                <span>东城</span>
+                <span>西城</span>
+                <span>朝阳</span>
+                <span>东城</span>
+                <span>西城</span>
+                <span>朝阳</span>
+                <span>东城</span>
+                <span>东城</span>
+                <span>密云县</span>
+                <span>北京周边</span>
+            </div>
+        </dl>
+        <dl class="clearfix">
+            <dt>日租</dt>
+            <dd class="clearfix">
+                <span>全部</span>
+                <span>0-3元/天/m²</span>
+                <span>3-4元/天/m²</span>
+                <span>4-5元/天/m²</span>
+                <span>5-7元/天/m²</span>
+                <span>7-9元/天/m²</span>
+                <span>9-12元/天/m²</span>
+                <span>12元/天/m²以上</span>
+            </dd>
+        </dl>
+        <dl class="clearfix">
+            <dt>类型</dt>
+            <dd class="clearfix">
+                <span>全部</span>
+                <span>纯城市综合体楼</span>
+                <span>购物中心</span>
+                <span>商场</span>
+                <span>商业街</span>
+                <span>商业裙楼</span>
+                <span>社区商业</span>
+                <span>专业市场</span>
+                <span>主题商业</span>
+                <span>其他</span>
+            </dd>
+        </dl>
+    </div>
+    <!-- 列表 -->
+    <div class="listWrap">
+        <h2>共找到<span>3627</span>套北京在租商铺新盘</h2>
+        <div class="listBoxL">
+            <div class="listBox" @click="goDetails('11')">
+                <img src="http://up-sell.oss-cn-beijing.aliyuncs.com/upload/2019/07/05/y7wJrcQNnsCDnjQ3ntEpkR6C1pXzmTEM" class="listImg">
+                <dl class="clearfix">
+                    <h3><span class="span1">朝阳大悦城中心</span><span class="span2">(开盘时间：2019-12-12)</span></h3>
+                    <dt class="clearfix">
+                        <ul>
+                           <li><span class="iconfont">&#xe616;</span>东城，安定门，鼓楼大街凡尔赛</li>
+                           <li><span class="iconfont">&#xe615;</span>城市综合体</li>
+                        </ul>
+                    </dt>
+                    <dd class="clearfix">
+                        <p class="onlyTxt">3.21<span>元/天/m²&nbsp;[日租]</span></p>
+                    </dd>
+                    <div class="listBoxBottom">
+                        <ul>
+                            <li>地铁上盖</li>
+                            <li>随时看铺</li>
+                            <li>繁华地段</li>
+                            <li>品牌地产</li>
+                        </ul>
+                        <div>
+                            <p class="p3">合作佣金：<span>4000&nbsp;元</span></p>
+                            <p class="p4">结佣时间：<span>合同签署30天内</span></p>
+                        </div>
+                    </div>
+                </dl>
+            </div>
+
+            <!-- 分页 -->
+            <div class="page">
+                <el-pagination
+                    background
+                    layout="prev, pager, next"
+                    @current-change="handleCurrentChange"
+                    :page-size=this.pageSize
+                    :total="total1">
+                </el-pagination>
+            </div>
+
+        </div>
+        <!-- 推荐商铺 -->
+        <div class="listBoxR">
+            <h3>推荐商铺</h3>
+            <dl>
+                <dt>
+                    <img src="http://up-img.oss-cn-beijing.aliyuncs.com/new/2019/05/25/CiJtYE6FwswCGStan8dbfpH52PrNAzrk.jpg?x-oss-process=style/thumbnail">
+                </dt>
+                <dd>
+                    <h5>长安太和1号楼商铺</h5>
+                    <p>朝阳-大悦城</p>
+                </dd>
+            </dl>
+        </div>
+    </div>
+</div>
+</template>
+
+<script>
+  import axios from '~/plugins/axios.js';
+  import Nav from '~/components/Nav/Nav';
+  export default {
+    head () {
+      return {
+        title: 'CBMLS',
+        meta: [
+          { hid: 'description', name: 'description', content: 'CBMLS' },
+          { hid: 'keywords', name: 'keywords', content: 'CBMLS'}
+        ]
+      }
+    },
+    data(){
+      return{
+        pageSize: 10, // 每页的数量
+        pageNum: 1, // 页码
+        total1: 100,  //接收渲染数据总数的参数
+      }
+    },
+    mounted(){
+
+    },
+    updated(){
+
+    },
+    components: {
+        Nav
+    },
+    methods: {
+        //分页
+        handleCurrentChange(val) {
+            this.pageNum = val;
+            $('html , body').animate({scrollTop: 100},1200);
+        },
+        goDetails(id){
+            window.open('/shopsOffices/shopFlatsSellDtl/'+id);
+        }
+    },
+  }
+</script>
+
+<style lang="less" type="text/less" scoped>
+@import '../../assets/css/shopNav.less';
+@import '../../assets/css/listBox.less';
+</style>
+
+<style>
+.page .el-pagination {
+    font-weight: normal;
+}
+.page .el-pagination .btn-prev, .page .el-pagination .btn-next, .page .el-pagination .el-pager li {
+    height: 30px;
+    width: 30px;
+    line-height: 30px;
+    border: 1px solid #e5e5e5;
+}
+.page .el-pagination .el-pager li.active {
+    background: #195def !important;
+    border: 1px solid #e5e5e5;
+}   
+</style>
+

pages/shopsOffices/shopFlatsSellDtl/_id.vue

@@ -0,0 +1,486 @@
+<template>
+<div class="shopSellDelWrap">
+    <Nav></Nav>
+    <div class="detail">
+        <div class="detailTop">
+            <div class="detailTopMain">
+                <ul class="ul1 clearfix">
+                    <li>首页<span>></span></li>
+                    <li>商铺新盘出售<span>></span></li>
+                    <li>商铺详情</li>
+                </ul>
+                <h2>泰禾北京院子二期</h2>
+                <div class="clearfix">
+                    <p><span>2.68</span>万元/m²[均价]</p>
+                    <p><span>30.98</span>m²[面积]</p>
+                </div>
+                <ul class="ul2 clearfix">
+                    <li>地铁上盖</li>
+                    <li>随时看铺</li>
+                    <li>繁华地段</li>
+                    <li>临近写字楼</li>
+                    <li>临近地铁</li>
+                </ul>
+            </div>
+        </div>
+
+        <div class="detailBox clearfix">
+            <div class="detailBoxL">
+                <div class="lbt">
+                    <div class="shop-lbt">
+                        <div class="shop-left left">
+                            <div class="big">
+                                <ul class="imgLength">
+                                    <li v-for = "(item,index) in projectPic">
+                                        <img :src="item.pic_path">
+                                    </li>
+                                </ul>
+                            </div>
+
+                            <div class="small">
+                                <div class="pg_left ps_pre">   
+                                    <img src="~/assets/images/common/leftWhite.png">
+                                </div>
+                                <div class="pg_left ps_pre1">
+                                    <img src="~/assets/images/common/leftGray.png">
+                                </div>
+                                <div class="pg_right ps_next">
+                                    <img src="~/assets/images/common/rightWhite.png">
+                                </div>
+                                <div class="pg_right ps_next1">
+                                   <img src="~/assets/images/common/rightGray.png">
+                                </div>
+                                <div class="activity" id="activity-slide">
+                                    <ol class="clearfix ulNum">
+
+                                        <li v-for = "(item,index) in projectPic">
+                                            <img :src="item.pic_path">
+                                        </li>
+
+                                    </ol>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="detailNav">
+                    <ul>
+                        <li class="cur">基本信息</li>
+                        <li>商铺描述</li>
+                        <li>地理位置</li>
+                        <li>商铺图片</li>
+                        <li style="width: 118px;">位置图</li>
+                        <li style="width: 118px;">平面图</li>
+                    </ul>
+                </div>
+                <div class="info clearfix" id="info">
+                    <h3 class="titleH3">基本信息</h3>
+                    <dl class="dlTop">
+                        <dt>商铺类型</dt>
+                        <dd>商业街商铺</dd>
+                    </dl>
+                    <dl class="dlTop">
+                        <dt>面&emsp;&emsp;积</dt>
+                        <dd>60.22m²</dd>
+                    </dl>
+                    <dl>
+                        <dt>均&emsp;&emsp;价</dt>
+                        <dd>20000.22元/m²</dd>
+                    </dl>
+                    <dl>
+                        <dt>开盘时间</dt>
+                        <dd>暂无</dd>
+                    </dl>
+                    <dl>
+                        <dt>商铺面积</dt>
+                        <dd>100m²</dd>
+                    </dl>                    
+                </div>
+                <div class="shop" id="shop">
+                    <h3 class="titleH3">商铺描述</h3>
+                    <dl class="clearfix">
+                        <dt>
+                            <p>商铺</p>
+                            <p>简介</p>
+                        </dt>
+                        <dd>中粮广场项目由A座、B座两幢5A智能甲级写字楼和高级购物商场组成，是一座集甲级写字楼和 高档购物中心为一体的大型建筑群体。总建筑面积约12万平米，其中包括约6万平米的高级中粮 广场购物中心及车位充足的中粮广场停车场，两幢分别为13层和14层总面积达车位充足的中粮 广场停车场，两幢分别为13层和14层6万平方米的写字楼。</dd>
+                    </dl>
+                    <dl class="clearfix" style="margin-top: 20px;">
+                        <dt>
+                            <p>周边</p>
+                            <p>配套</p>
+                        </dt>
+                        <dd>中粮广场项目由A座、B座两幢5A智能甲级写字楼和高级购物商场组成，是一座集甲级写字楼和 高档购物中心为一体的大型建筑群体。</dd>
+                    </dl>
+                </div>
+                <div class="seat" id="seat">
+                    <h3 class="titleH3">地理位置</h3>
+                    <!-- <div class="mapWrap"> -->
+                        <div id="allmap" style="width: 700px; height: 350px;"></div>
+                    <!-- </div> -->
+                </div>
+
+                <div class="pic" id="pic">
+                    <h3 class="titleH3">商铺图片</h3>
+                    <ul>
+                        <li><img src="http://cdn.youpuchina.com/new/2019/07/27/47eYFFWX6BrckcYshYf8AJ6AQyMGszSp.jpg?x-oss-process=style/watermark"></li>
+                        <li><img src="http://cdn.youpuchina.com/new/2019/07/27/47eYFFWX6BrckcYshYf8AJ6AQyMGszSp.jpg?x-oss-process=style/watermark"></li>
+                        <li><img src="http://cdn.youpuchina.com/new/2019/07/27/47eYFFWX6BrckcYshYf8AJ6AQyMGszSp.jpg?x-oss-process=style/watermark"></li>
+                        <li><img src="http://cdn.youpuchina.com/new/2019/07/27/47eYFFWX6BrckcYshYf8AJ6AQyMGszSp.jpg?x-oss-process=style/watermark"></li>
+                    </ul>
+                </div>
+
+                <div class="pic" id="seatPic">
+                    <h3 class="titleH3">位置图</h3>
+                    <ul>
+                        <li><img src="http://cdn.youpuchina.com/new/2019/07/27/47eYFFWX6BrckcYshYf8AJ6AQyMGszSp.jpg?x-oss-process=style/watermark"></li>
+                        <li><img src="http://cdn.youpuchina.com/new/2019/07/27/47eYFFWX6BrckcYshYf8AJ6AQyMGszSp.jpg?x-oss-process=style/watermark"></li>
+                    </ul>
+                </div>
+
+                <div class="pic" id="planePic">
+                    <h3 class="titleH3">平面图</h3>
+                    <ul>
+                        <li><img src="http://up-sell.oss-cn-beijing.aliyuncs.com/upload/2019/07/11/ktDtYRjhZDEzJ2dp4826sp8Z84FNWybw"></li>
+                        <li><img src="http://up-sell.oss-cn-beijing.aliyuncs.com/upload/2019/07/11/cW7BF5syKiRKW3iRpWR8seca2hFNB8Zw"></li>
+                        <li><img src="http://up-sell.oss-cn-beijing.aliyuncs.com/upload/2019/07/11/ktDtYRjhZDEzJ2dp4826sp8Z84FNWybw"></li>
+                        <li><img src="http://up-sell.oss-cn-beijing.aliyuncs.com/upload/2019/07/11/cW7BF5syKiRKW3iRpWR8seca2hFNB8Zw"></li>
+                    </ul>
+                </div>
+
+            </div>
+            <div class="detailBoxR">
+                <div class="card">
+                    <div class="cardTop clearfix">
+                        <dl class="dl1">
+                            <dt><span>36.8</span>万元</dt>
+                            <dd>[均价]</dd>
+                        </dl>
+                        <dl class="dl2">
+                            <dt><span>236.8</span>m²</dt>
+                            <dd>[面积]</dd>
+                        </dl>
+                    </div>
+                    <div class="cardBar">
+                        <i></i>
+                        <p class="p1">此商铺合作佣金</p>
+                        <p class="p2">6000<span>元</span></p>
+                    </div>
+                    <ul class="cardUl">
+                        <li>
+                            <span class="span1">结佣时间</span>
+                            <span class="span2">签署合同30天之内</span>
+                        </li>
+                        <li>
+                            <span class="span1">适合业态</span>
+                            <span class="span2">文创，其他</span>
+                        </li>
+                        <li>
+                            <span class="span1">商铺类型</span>
+                            <span class="span2">商业街商铺</span>
+                        </li>
+                        <li>
+                            <span class="span1">详细地址</span>
+                            <span class="span2">北京市东城区建国门内大街8号北京市东城区 建国门内大街8号</span>
+                        </li>
+                    </ul>
+                    <dl class="cardFoot">
+                        <dt></dt>
+                        <dd>
+                            <h3>王一博儿</h3>
+                            <!-- <p>点击查看经纪人电话</p> -->
+                            <p><span class="iconfont">&#xe61f;</span>130-1109-2864</p>
+                        </dd>
+                    </dl>
+                </div>
+                <div class="record">
+                    <dl class="recordTop clearfix">
+                        <dt>跟进记录</dt>
+                        <dd>
+                            <!-- <p class="p1">终止流程</p> -->
+                            <p class="hoverBg">新增到访</p>
+                            <!-- <p class="hoverBg">签约</p> -->
+                            <!-- <p class="hoverBg">提醒结佣</p> -->
+                            <!-- <p class="hoverBg">结佣</p> -->
+                            <!-- <span>交易已完成</span> -->
+                        </dd>
+                    </dl>
+                    <div class="recordNav clearfix">
+                        <ul>
+                            <li class="navCur">查看信息</li>
+                            <li>到访</li>
+                            <li>认购</li>
+                            <li>签约</li>
+                            <li>结佣</li>
+                            <li>终止</li>
+                        </ul>
+                    </div>
+                    <div class="recordMain">
+                        <div class="recordBox">
+                            <dl class="clearfix">
+                                <i></i>
+                                <dt>
+                                    <h5>留不足写字楼位置差，配套不好，自身资金预留，自身资金预留</h5>
+                                    <p>2019-07-24</p>
+                                </dt>
+                                <dd class="clearfix">
+                                    <span></span>
+                                    <span></span>
+                                    <span></span>
+                                </dd>
+                            </dl>
+                            <dl class="clearfix">
+                                <i></i>
+                                <dt>
+                                    <h5>王耶啵啵，到访成功</h5>
+                                    <p>2019-07-24</p>
+                                </dt>
+                                <dd class="clearfix"></dd>
+                            </dl>
+                            <dl class="clearfix">
+                                <i></i>
+                                <dt>
+                                    <h5>王耶啵啵，到访成功</h5>
+                                    <p>2019-07-24</p>
+                                </dt>
+                                <dd class="clearfix">
+                                    <span></span>
+                                    <span></span>
+                                    <span></span>
+                                </dd>
+                            </dl>
+                            <dl class="clearfix">
+                                <i></i>
+                                <dt>
+                                    <h5>王耶啵啵，到访成功</h5>
+                                    <p>2019-07-24</p>
+                                </dt>
+                                <dd class="clearfix">
+                                    <span></span>
+                                    <span></span>
+                                    <span></span>
+                                </dd>
+                            </dl>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+    </div>
+</div>
+</template>
+
+<script>
+  import axios from '~/plugins/axios.js';
+  import Nav from '~/components/Nav/Nav';
+  export default {
+    head () {
+      return {
+        title: 'CBMLS',
+        meta: [
+          { hid: 'description', name: 'description', content: 'CBMLS' },
+          { hid: 'keywords', name: 'keywords', content: 'CBMLS'}
+        ]
+      }
+    },
+    data(){
+      return{
+        imgLeng: "",
+        projectPic: []
+       
+      }
+    },
+    components: {
+        Nav
+    },
+    updated(){
+        // let _this = this;
+        // this.init();
+        // console.log("com-updated");
+        
+    },
+    methods: {
+        mapFun(){
+            // 百度地图API功能
+            var map = new BMap.Map("allmap");
+            // var point = new BMap.Point(this.projectDetail.lng,this.projectDetail.lat);//经度、维度
+            var point = new BMap.Point(116.49467187206017,39.925286410424285);
+            var marker = new BMap.Marker(point);  // 创建标注
+            map.addOverlay(marker);              // 将标注添加到地图中
+            map.centerAndZoom(point, 15);
+            var opts = {
+                width : 100,     // 信息窗口宽度
+                height: 30,     // 信息窗口高度
+                title : "", // 信息窗口标题
+                enableMessage:true,//设置允许信息窗发送短息
+                message:""
+            }
+            var project_address = "朝阳-永安里";
+            var infoWindow = new BMap.InfoWindow(project_address, opts);  // 次数还没用完
+            map.openInfoWindow(infoWindow,point); //开启信息窗口
+        }, 
+        init(){
+            axios({
+                url: '/project/detail',
+                method: "post",
+                params: {
+                    cityId: sessionStorage.cityId || 110100,
+                    projectId: 306,
+                    projectType: 1,
+                    houseType: 1
+                }
+            }).then(function(res){
+                console.log(res)
+                this.imgLeng = res.data.projectPic.length;
+                this.projectPic = res.data.projectPic;
+                // this.
+            }.bind(this)).catch(function(err){
+                console.log("商店列表页面错误：",err)
+            })
+        },
+
+        lbtFun(){
+            // 轮播
+            var index = 0;
+
+            $('.small ol li').eq(index).addClass('isOpacity').siblings().removeClass('isOpacity');
+
+            $('.big ul li').eq(0).show().siblings().hide();
+
+            $('.small ol li').on('click', function () {
+                index = $(this).index();
+                $(this).addClass('isOpacity').siblings().removeClass('isOpacity');
+                $('.big ul li').eq(index).show().siblings().hide();
+            })
+
+            var w_li = 113;
+            var h_li = 78;
+            var margin_li = 7;
+            var now = 0;
+            var addli = 0;
+            var lisize = this.imgLeng;
+            var num = 5;
+
+            // 判断需要添加的li节点数量
+            var reminder = lisize % num;
+            if (lisize % num != 0) { addli = num - reminder; } else { addli = 0; }
+
+            $('.ps_pre').on('click', function () { // console.log(num);
+                now--;
+                if (now >= 0) {
+                    $('.ulNum').animate({'margin-left':-now * num * (w_li + margin_li * 2)});
+                    btnshow(now, parseInt((lisize + addli) / num), lisize, num);
+                }
+            });
+
+            $('.ps_next').on('click', function () {
+                now++;
+                if (now < (lisize + addli) / num) {
+                    $('.ulNum').animate({'margin-left':-now * num * (w_li + margin_li * 2)});
+                    btnshow(now, parseInt((lisize + addli) / num), lisize, num);
+                }
+            });
+
+            btnshow(now, parseInt((lisize + addli) / num), lisize, num);
+            
+            // 参数说明：
+            // now:当前是第几组，默认是0
+            // c:总共有几组
+            // d:初始化时li的个数
+            // e:每组显示li个数
+        
+            function btnshow(now, c, d, e) {
+                if (d <= e) { // 如果初始化时li的个数小于一组要显示的数，则不显示pre和next按钮
+                    $('.ps_next').hide();
+                    $('.ps_pre').hide();
+
+                    $('.ps_next1').show();
+                    $('.ps_pre1').show();
+                } else if (now == 0) { // 初始化now=0，显示第一组，只显示next
+                    $('.ps_next').show();
+                    $('.ps_next1').hide();
+                    $('.ps_pre').hide();
+                    $('.ps_pre1').show();
+                } else if (now == c - 1) { // 显示到最后一组，只显示pre
+                    $('.ps_next').hide();
+                    $('.ps_next1').show();
+
+                    $('.ps_pre').show();
+                    $('.ps_pre1').hide();
+                } else { // 显示中间组，pre和next都需要显示
+                    $('.ps_next').show();
+                    $('.ps_pre').show();
+
+                    $('.ps_next1').hide();
+                    $('.ps_pre1').hide();
+                }
+            }
+
+            // 锚点
+            var navTop = $('.detailNav').offset().top;
+            var allTop = [
+                $('#info').offset().top - 56,
+                $('#shop').offset().top - 150,
+                $('#seat').offset().top - 150,
+                $('#pic').offset().top - 150,
+                $('#seatPic').offset().top - 150,
+                $('#planePic').offset().top - 150
+            ]
+            $(window).scroll(function () {
+                var winTop = $(window).scrollTop();
+
+                if (winTop >= navTop) {
+                    $('.detailNav').addClass('fixed-top');
+                } else {
+                    $('.detailNav').removeClass('fixed-top');
+                }
+
+                if (winTop < allTop[1]) {
+                    $('.detailNav li').eq(0).addClass('cur').siblings().removeClass('cur')
+                } else if (winTop < allTop[2]) {
+                    $('.detailNav li').eq(1).addClass('cur').siblings().removeClass('cur')
+                } else if (winTop < allTop[3]) {
+                    $('.detailNav li').eq(2).addClass('cur').siblings().removeClass('cur')
+                } else if(winTop < allTop[4]) {
+                    $('.detailNav li').eq(3).addClass('cur').siblings().removeClass('cur')
+                } else if(winTop < allTop[5]) {
+                    $('.detailNav li').eq(4).addClass('cur').siblings().removeClass('cur')
+                } else {
+                    $('.detailNav li').eq(5).addClass('cur').siblings().removeClass('cur')
+                }
+            })
+
+            $('.detailNav li').on('click', function () {
+                var index = $(this).index();
+                $('html,body').animate({scrollTop:allTop[index]}, 100);
+            })
+        },
+
+
+    },
+    created(){
+
+        let id = this.$route.params.id;
+        // console.log(id);
+
+    },
+    mounted(){
+
+        this.init();
+
+        let _this = this;
+            setTimeout(function () {
+            _this.lbtFun();
+            _this.mapFun();//百度地图
+        },500)
+
+    }
+  }
+</script>
+
+<style lang="less" type="text/less" scoped>
+@import '../../../assets/css/shopDetails.less';
+</style>
+

pages/shopsOffices/shopLease.vue

@@ -0,0 +1,296 @@
+<template>
+<div class="shopLeaseWrap">
+    <Nav></Nav>
+    <div class="shopNavWrap">
+        <dl class="shopNavDl">
+            <dt>
+                <h3><span>优铺</span>CBMLS·商铺写字楼</h3>
+            </dt>
+            <dd>
+                <input type="text" name="" placeholder="请输入商铺相关信息搜索" class="searchInput">
+                <p class="searchBtn"><span class="iconfont">&#xe613;</span>搜索</p>
+            </dd>
+        </dl>
+        <div class="shopNavList">
+            <ul class="shopNavListUl">
+                <li><a href="/shopsOffices/shopSell">商铺出售</a></li>
+                <li class="changeBg"><a href="/shopsOffices/shopLease">商铺出租</a></li>
+                <li class="li1">
+                    <a href="javascript:void(0);">商铺新盘</a>
+                    <div>
+                        <p><a href="/shopsOffices/shopFlatsSell">出售</a></p>
+                        <p><a href="/shopsOffices/shopFlatsLease">出租</a></p>
+                    </div>
+                </li>
+                <li><a href="/shopsOffices/officesSell">写字楼出售</a></li>
+                <li><a href="/shopsOffices/officesLease">写字楼出租</a></li>
+                <li class="shopNavBox li2">
+                    <a href="javascript:void(0);">写字楼新盘</a>
+                    <div>
+                        <p><a href="/shopsOffices/officesFlatsSell">出售</a></p>
+                        <p><a href="/shopsOffices/officesFlatsLease">出租</a></p>
+                    </div>
+                </li>
+            </ul>
+        </div>
+    </div>
+    <!-- 筛选 -->
+    <div class="shopBox">
+        <ul class="clearfix">
+            <li>首页<span class="iconfont">&#xe614;</span></li>
+            <li>商铺出租</li>
+        </ul>
+        <dl class="clearfix">
+            <dt>区域</dt>
+            <dd class="clearfix">
+                <span>全部</span>
+                <span>东城</span>
+                <span>西城</span>
+                <span>朝阳</span>
+                <span>东城</span>
+                <span>西城</span>
+                <span>朝阳</span>
+                <span>东城</span>
+                <span>西城</span>
+                <span>朝阳</span>
+                <span>东城</span>
+                <span>西城</span>
+                <span>朝阳</span>
+                <span>东城</span>
+                <span>东城</span>
+                <span>密云县</span>
+                <span>北京周边</span>
+            </dd>
+            <div>
+                <span>全部</span>
+                <span>东城</span>
+                <span>西城</span>
+                <span>朝阳</span>
+                <span>东城</span>
+                <span>西城</span>
+                <span>朝阳</span>
+                <span>东城</span>
+                <span>西城</span>
+                <span>朝阳</span>
+                <span>东城</span>
+                <span>西城</span>
+                <span>朝阳</span>
+                <span>东城</span>
+                <span>西城</span>
+                <span>朝阳</span>
+                <span>东城</span>
+                <span>东城</span>
+                <span>密云县</span>
+                <span>北京周边</span>
+            </div>
+        </dl>
+
+        <dl class="clearfix">
+            <dt>行业</dt>
+            <dd class="clearfix">
+                <span>全部</span>
+                <span>酒店餐饮</span>
+                <span>美容美发</span>
+                <span>服饰鞋包</span>
+                <span>休闲娱乐</span>
+                <span>生活服务</span>
+                <span>汽修美容</span>
+                <span>旅馆宾馆</span>
+                <span>百货超市</span>
+                <span>家居建材</span>
+                <span>电器通讯</span>
+                <span>教育培训</span>
+            </dd>
+            <div>
+                <span>全部</span>
+                <span>酒店餐饮</span>
+                <span>美容美发</span>
+                <span>服饰鞋包</span>
+                <span>休闲娱乐</span>
+                <span>生活服务</span>
+                <span>汽修美容</span>
+                <span>旅馆宾馆</span>
+                <span>百货超市</span>
+                <span>家居建材</span>
+                <span>电器通讯</span>
+                <span>教育培训</span>
+            </div>
+        </dl>
+
+        <dl class="clearfix">
+            <dt>面积</dt>
+            <dd class="clearfix">
+                <span>全部</span>
+                <span>20m²以下</span>
+                <span>20-50m²</span>
+                <span>50-100m²</span>
+                <span>100-200m²</span>
+                <span>200-500m²</span>
+                <span>500m²以上</span>
+            </dd>
+        </dl>
+        <dl class="clearfix">
+            <dt>月租</dt>
+            <dd class="clearfix">
+                <span>全部</span>
+                <span>2千元以下</span>
+                <span>2-5千元</span>
+                <span>5千-1万元</span>
+                <span>1-2万元</span>
+                <span>2-5万元</span>
+                <span>5万元以上</span>
+            </dd>
+        </dl>
+        <dl class="clearfix">
+            <dt>转让费</dt>
+            <dd class="clearfix">
+                <span>全部</span>
+                <span>无转让费</span>
+                <span>5万元以下</span>
+                <span>5-15万元</span>
+                <span>15-30万元</span>
+                <span>30万元以上</span>
+            </dd>
+        </dl>
+        <dl class="clearfix">
+            <dt>类型</dt>
+            <dd class="clearfix">
+                <span>全部</span>
+                <span>商业街商铺</span>
+                <span>购物中心</span>
+                <span>商场</span>
+                <span>商业街</span>
+                <span>商业裙楼</span>
+                <span>社区商业</span>
+                <span>专业市场</span>
+                <span>主题商业</span>
+                <span>其他</span>
+            </dd>
+        </dl>
+    </div>
+    <!-- 列表 -->
+    <div class="listWrap">
+        <h2>共找到<span>3627</span>套北京在租商铺</h2>
+        <div class="listBoxL">
+            <div class="listBox" @click="goDetails('123')">
+                <img src="http://up-img.oss-cn-beijing.aliyuncs.com/new/2019/07/25/bKjyBQKkZK7PmPrd63phfHmr2SFhwQXn.jpg?x-oss-process=style/thumbnail" class="listImg">
+                <dl class="clearfix">
+                    <h3><span class="span1">东城 安定门 / 294.26m²</span></h3>
+                    <dt class="clearfix">
+                        <ul>
+                           <li>经营中</li>
+                           <li>半地下室 一层，百货购物中心，不可办照</li>
+                        </ul>
+                    </dt>
+                    <dd class="clearfix">
+                        <p class="p1">3.26<span>万元&nbsp;[月租]</span></p>
+                        <p class="p2">15<span>万元&nbsp;[转让费]</span></p>
+                    </dd>
+                    <div class="listBoxBottom">
+                        <ul>
+                            <li>地铁上盖</li>
+                            <li>随时看铺</li>
+                            <li>繁华地段</li>
+                            <li>品牌地产</li>
+                        </ul>
+                        <div>
+                            <p class="p3">合作佣金：<span>4000&nbsp;元</span></p>
+                            <p class="p4">结佣时间：<span>合同签署30天内</span></p>
+                        </div>
+                    </div>
+                </dl>
+            </div>
+
+            <!-- 分页 -->
+            <div class="page">
+                <el-pagination
+                    background
+                    layout="prev, pager, next"
+                    @current-change="handleCurrentChange"
+                    :page-size=this.pageSize
+                    :total="total1">
+                </el-pagination>
+            </div>
+        </div>
+        <!-- 推荐商铺 -->
+        <div class="listBoxR">
+            <h3>推荐商铺</h3>
+            <dl>
+                <dt>
+                    <img src="http://up-img.oss-cn-beijing.aliyuncs.com/new/2019/05/25/CiJtYE6FwswCGStan8dbfpH52PrNAzrk.jpg?x-oss-process=style/thumbnail">
+                    <p>朝阳-永安里</p>
+                </dt>
+                <dd>
+                    <h5>建国路幼儿园出租通州区安定商场摊位档口出…</h5>
+                    <p><span>15.6</span>万元/月&nbsp;[月租]</p>
+                </dd>
+            </dl>
+        </div>
+    </div>
+
+</div>
+</template>
+
+<script>
+  import axios from '~/plugins/axios.js';
+  import Nav from '~/components/Nav/Nav';
+  export default {
+    head () {
+      return {
+        title: 'CBMLS',
+        meta: [
+          { hid: 'description', name: 'description', content: 'CBMLS' },
+          { hid: 'keywords', name: 'keywords', content: 'CBMLS'}
+        ]
+      }
+    },
+    data(){
+      return{
+        pageSize: 10, // 每页的数量
+        pageNum: 1, // 页码
+        total1: 100,  //接收渲染数据总数的参数
+      }
+    },
+    mounted(){
+
+    },
+    updated(){
+
+    },
+    components: {
+        Nav
+    },
+    methods: {
+        //分页
+        handleCurrentChange(val) {
+            this.pageNum = val;
+            $('html , body').animate({scrollTop: 100},1200);
+        },
+        goDetails(id){
+            window.open('/shopsOffices/shopLeaseDtl/'+id);
+        }
+    }
+  }
+</script>
+
+<style lang="less" type="text/less" scoped>
+@import '../../assets/css/shopNav.less';
+@import '../../assets/css/listBox.less';
+</style>
+
+<style>
+.page .el-pagination {
+    font-weight: normal;
+}
+.page .el-pagination .btn-prev, .page .el-pagination .btn-next, .page .el-pagination .el-pager li {
+    height: 30px;
+    width: 30px;
+    line-height: 30px;
+    border: 1px solid #e5e5e5;
+}
+.page .el-pagination .el-pager li.active {
+    background: #195def !important;
+    border: 1px solid #e5e5e5;
+}   
+</style>
+

pages/shopsOffices/shopLeaseDtl/_id.vue

@@ -0,0 +1,492 @@
+<template>
+<div class="shopSellDelWrap">
+    <Nav></Nav>
+    <div class="detail">
+        <div class="detailTop">
+            <div class="detailTopMain">
+                <ul class="ul1 clearfix">
+                    <li>首页<span>></span></li>
+                    <li>商铺出售<span>></span></li>
+                    <li>商铺详情</li>
+                </ul>
+                <h2>朝阳 奥林匹克公园 / 236.87m² / 酒店餐饮 / 临街 / 空置中 出售</h2>
+                <div class="clearfix">
+                    <p><span>2.68</span>万元/m²[单价]</p>
+                    <p><span>30.98</span>万元[总价]</p>
+                    <p><span>30.98</span>m²[面积]</p>
+                </div>
+                <ul class="ul2 clearfix">
+                    <li>地铁上盖</li>
+                    <li>随时看铺</li>
+                    <li>繁华地段</li>
+                    <li>临近写字楼</li>
+                    <li>临近地铁</li>
+                </ul>
+            </div>
+        </div>
+
+        <div class="detailBox clearfix">
+            <div class="detailBoxL">
+                <div class="lbt">
+                    <div class="shop-lbt">
+                        <div class="shop-left left">
+                            <div class="big">
+                                <ul class="imgLength">
+                                    <li>
+                                        <img src="http://cdn.youpuchina.com/new/2019-07-24/O3q2WoRQekU5OGL2stzdHXnL1uiSsoc7?x-oss-process=style/watermark">
+                                    </li>
+                                    <li>
+                                        <img src="http://cdn.youpuchina.com/new/2019-07-25/fDSt5gohSPCRSkGfzpGY7E83NptiKNh0?x-oss-process=style/watermark">
+                                    </li>
+                                    <li>
+                                        <img src="http://cdn.youpuchina.com/new/2019-07-24/ZuIdBM7j0LAYlBBrt0oKicw4YJnXNGuR?x-oss-process=style/watermark">
+                                    </li>
+                                    <li>
+                                        <img src="http://cdn.youpuchina.com/new/2019-07-24/O3q2WoRQekU5OGL2stzdHXnL1uiSsoc7?x-oss-process=style/watermark">
+                                    </li>
+                                    <li>
+                                        <img src="http://cdn.youpuchina.com/new/2019-07-24/ZuIdBM7j0LAYlBBrt0oKicw4YJnXNGuR?x-oss-process=style/watermark">
+                                    </li>
+                                    <li>
+                                        <img src="http://cdn.youpuchina.com/new/2019-07-24/ZuIdBM7j0LAYlBBrt0oKicw4YJnXNGuR?x-oss-process=style/watermark">
+                                    </li>
+                                    <li>
+                                        <img src="http://cdn.youpuchina.com/new/2019-07-24/ZuIdBM7j0LAYlBBrt0oKicw4YJnXNGuR?x-oss-process=style/watermark">
+                                    </li>
+                                    <li>
+                                        <img src="http://cdn.youpuchina.com/new/2019-07-25/fDSt5gohSPCRSkGfzpGY7E83NptiKNh0?x-oss-process=style/watermark">
+                                    </li>
+                                </ul>
+                            </div>
+
+                            <div class="small">
+                                <div class="pg_left ps_pre">   
+                                    <img src="~/assets/images/common/leftWhite.png">
+                                </div>
+                                <div class="pg_left ps_pre1">
+                                    <img src="~/assets/images/common/leftGray.png">
+                                </div>
+                                <div class="pg_right ps_next">
+                                    <img src="~/assets/images/common/rightWhite.png">
+                                </div>
+                                <div class="pg_right ps_next1">
+                                   <img src="~/assets/images/common/rightGray.png">
+                                </div>
+                                <div class="activity" id="activity-slide">
+                                    <ol class="clearfix ulNum">
+                                        <li>
+                                            <img src="http://cdn.youpuchina.com/new/2019-07-24/O3q2WoRQekU5OGL2stzdHXnL1uiSsoc7?x-oss-process=style/watermark">
+                                        </li>
+                                        <li>
+                                            <img src="http://cdn.youpuchina.com/new/2019-07-25/fDSt5gohSPCRSkGfzpGY7E83NptiKNh0?x-oss-process=style/watermark">
+                                        </li>
+                                        <li>
+                                            <img src="http://cdn.youpuchina.com/new/2019-07-24/ZuIdBM7j0LAYlBBrt0oKicw4YJnXNGuR?x-oss-process=style/watermark">
+                                        </li>
+                                        <li>
+                                            <img src="http://cdn.youpuchina.com/new/2019-07-24/O3q2WoRQekU5OGL2stzdHXnL1uiSsoc7?x-oss-process=style/watermark">
+                                        </li>
+                                        <li>
+                                            <img src="http://cdn.youpuchina.com/new/2019-07-24/ZuIdBM7j0LAYlBBrt0oKicw4YJnXNGuR?x-oss-process=style/watermark">
+                                        </li>
+                                        <li>
+                                            <img src="http://cdn.youpuchina.com/new/2019-07-24/ZuIdBM7j0LAYlBBrt0oKicw4YJnXNGuR?x-oss-process=style/watermark">
+                                        </li>
+                                        <li>
+                                            <img src="http://cdn.youpuchina.com/new/2019-07-24/ZuIdBM7j0LAYlBBrt0oKicw4YJnXNGuR?x-oss-process=style/watermark">
+                                        </li>
+                                        <li>
+                                            <img src="http://cdn.youpuchina.com/new/2019-07-25/fDSt5gohSPCRSkGfzpGY7E83NptiKNh0?x-oss-process=style/watermark">
+                                        </li>
+                                    </ol>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="detailNav">
+                    <ul>
+                        <li class="cur">基本信息</li>
+                        <li>商铺描述</li>
+                        <li>地理位置</li>
+                        <li>商铺图片</li>
+                    </ul>
+                </div>
+                <div class="info clearfix" id="info">
+                    <h3 class="titleH3">基本信息</h3>
+                    <dl class="dlTop">
+                        <dt>商铺类型</dt>
+                        <dd>城市综合体</dd>
+                    </dl>
+                    <dl class="dlTop">
+                        <dt>面&emsp;&emsp;积</dt>
+                        <dd>60.22m²</dd>
+                    </dl>
+                    <dl>
+                        <dt>单&emsp;&emsp;价</dt>
+                        <dd>20000.22元/m²</dd>
+                    </dl>
+                    <dl>
+                        <dt>楼&emsp;&emsp;层</dt>
+                        <dd>一层，半地下室</dd>
+                    </dl>
+                    <dl>
+                        <dt>总&emsp;&emsp;价</dt>
+                        <dd>3.23元/m²/天</dd>
+                    </dl>
+                    <dl>
+                        <dt>物业费用</dt>
+                        <dd>3.23元/m²/天</dd>
+                    </dl>
+                    <dl>
+                        <dt>临&emsp;&emsp;街</dt>
+                        <dd>是</dd>
+                    </dl>
+                    <dl>
+                        <dt>商铺状态</dt>
+                        <dd>商铺状态</dd>
+                    </dl>
+                </div>
+                <div class="shop" id="shop">
+                    <h3 class="titleH3">商铺描述</h3>
+                    <dl class="clearfix">
+                        <dt>
+                            <p>商铺</p>
+                            <p>简介</p>
+                        </dt>
+                        <dd>中粮广场项目由A座、B座两幢5A智能甲级写字楼和高级购物商场组成，是一座集甲级写字楼和 高档购物中心为一体的大型建筑群体。总建筑面积约12万平米，其中包括约6万平米的高级中粮 广场购物中心及车位充足的中粮广场停车场，两幢分别为13层和14层总面积达车位充足的中粮 广场停车场，两幢分别为13层和14层6万平方米的写字楼。</dd>
+                    </dl>
+                    <dl class="clearfix" style="margin-top: 20px;">
+                        <dt>
+                            <p>周边</p>
+                            <p>配套</p>
+                        </dt>
+                        <dd>中粮广场项目由A座、B座两幢5A智能甲级写字楼和高级购物商场组成，是一座集甲级写字楼和 高档购物中心为一体的大型建筑群体。</dd>
+                    </dl>
+                </div>
+                <div class="seat" id="seat">
+                    <h3 class="titleH3">地理位置</h3>
+                    <!-- <div class="mapWrap"> -->
+                        <div id="allmap" style="width: 700px; height: 350px;"></div>
+                    <!-- </div> -->
+                </div>
+                <div class="pic" id="pic">
+                    <h3 class="titleH3">商铺图片</h3>
+                    <ul>
+                        <li><img src="http://cdn.youpuchina.com/new/2019/07/27/47eYFFWX6BrckcYshYf8AJ6AQyMGszSp.jpg?x-oss-process=style/watermark"></li>
+                        <li><img src="http://cdn.youpuchina.com/new/2019/07/27/47eYFFWX6BrckcYshYf8AJ6AQyMGszSp.jpg?x-oss-process=style/watermark"></li>
+                        <li><img src="http://cdn.youpuchina.com/new/2019/07/27/47eYFFWX6BrckcYshYf8AJ6AQyMGszSp.jpg?x-oss-process=style/watermark"></li>
+                        <li><img src="http://cdn.youpuchina.com/new/2019/07/27/47eYFFWX6BrckcYshYf8AJ6AQyMGszSp.jpg?x-oss-process=style/watermark"></li>
+                    </ul>
+                </div>
+            </div>
+            <div class="detailBoxR">
+                <div class="card">
+                    <div class="cardTop clearfix">
+                        <dl class="dl1">
+                            <dt><span>36.8</span>万元</dt>
+                            <dd>[总价]</dd>
+                        </dl>
+                        <dl class="dl2">
+                            <dt><span>236.8</span>m²</dt>
+                            <dd>[面积]</dd>
+                        </dl>
+                    </div>
+                    <div class="cardBar">
+                        <i></i>
+                        <p class="p1">此商铺合作佣金</p>
+                        <p class="p2">6000<span>元</span></p>
+                    </div>
+                    <ul class="cardUl">
+                        <li>
+                            <span class="span1">结佣时间</span>
+                            <span class="span2">签署合同30天之内</span>
+                        </li>
+                        <li>
+                            <span class="span1">商铺状态</span>
+                            <span class="span2">空置中</span>
+                        </li>
+                        <li>
+                            <span class="span1">商铺类型</span>
+                            <span class="span2">酒店餐饮</span>
+                        </li>
+                        <li>
+                            <span class="span1">详细地址</span>
+                            <span class="span2">北京市东城区建国门内大街8号北京市东城区 建国门内大街8号</span>
+                        </li>
+                    </ul>
+                    <dl class="cardFoot">
+                        <dt></dt>
+                        <dd>
+                            <h3>王一博儿</h3>
+                            <!-- <p>点击查看经纪人电话</p> -->
+                            <p><span class="iconfont">&#xe61f;</span>130-1109-2864</p>
+                        </dd>
+                    </dl>
+                </div>
+                <div class="record">
+                    <dl class="recordTop clearfix">
+                        <dt>跟进记录</dt>
+                        <dd>
+                            <!-- <p class="p1">终止流程</p> -->
+                            <p class="hoverBg">新增到访</p>
+                            <!-- <p class="hoverBg">签约</p> -->
+                            <!-- <p class="hoverBg">提醒结佣</p> -->
+                            <!-- <p class="hoverBg">结佣</p> -->
+                            <!-- <span>交易已完成</span> -->
+                        </dd>
+                    </dl>
+                    <div class="recordNav clearfix">
+                        <ul>
+                            <li class="navCur">查看信息</li>
+                            <li>到访</li>
+                            <li>认购</li>
+                            <li>签约</li>
+                            <li>结佣</li>
+                            <li>终止</li>
+                        </ul>
+                    </div>
+                    <div class="recordMain">
+                        <div class="recordBox">
+                            <dl class="clearfix">
+                                <i></i>
+                                <dt>
+                                    <h5>留不足写字楼位置差，配套不好，自身资金预留，自身资金预留</h5>
+                                    <p>2019-07-24</p>
+                                </dt>
+                                <dd class="clearfix">
+                                    <span></span>
+                                    <span></span>
+                                    <span></span>
+                                </dd>
+                            </dl>
+                            <dl class="clearfix">
+                                <i></i>
+                                <dt>
+                                    <h5>王耶啵啵，到访成功</h5>
+                                    <p>2019-07-24</p>
+                                </dt>
+                                <dd class="clearfix"></dd>
+                            </dl>
+                            <dl class="clearfix">
+                                <i></i>
+                                <dt>
+                                    <h5>王耶啵啵，到访成功</h5>
+                                    <p>2019-07-24</p>
+                                </dt>
+                                <dd class="clearfix">
+                                    <span></span>
+                                    <span></span>
+                                    <span></span>
+                                </dd>
+                            </dl>
+                            <dl class="clearfix">
+                                <i></i>
+                                <dt>
+                                    <h5>王耶啵啵，到访成功</h5>
+                                    <p>2019-07-24</p>
+                                </dt>
+                                <dd class="clearfix">
+                                    <span></span>
+                                    <span></span>
+                                    <span></span>
+                                </dd>
+                            </dl>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+    </div>
+</div>
+</template>
+
+<script>
+  import axios from '~/plugins/axios.js';
+  import Nav from '~/components/Nav/Nav';
+  export default {
+    head () {
+      return {
+        title: 'CBMLS',
+        meta: [
+          { hid: 'description', name: 'description', content: 'CBMLS' },
+          { hid: 'keywords', name: 'keywords', content: 'CBMLS'}
+        ]
+      }
+    },
+    data(){
+      return{
+        imgLeng: 8,
+       
+      }
+    },
+    components: {
+        Nav
+    },
+    updated(){
+      
+    },
+    methods: {
+        mapFun(){
+            // 百度地图API功能
+            var map = new BMap.Map("allmap");
+            // var point = new BMap.Point(this.projectDetail.lng,this.projectDetail.lat);//经度、维度
+            var point = new BMap.Point(116.49467187206017,39.925286410424285);
+            var marker = new BMap.Marker(point);  // 创建标注
+            map.addOverlay(marker);              // 将标注添加到地图中
+            map.centerAndZoom(point, 15);
+            var opts = {
+                width : 100,     // 信息窗口宽度
+                height: 30,     // 信息窗口高度
+                title : "", // 信息窗口标题
+                enableMessage:true,//设置允许信息窗发送短息
+                message:""
+            }
+            var project_address = "朝阳-永安里";
+            var infoWindow = new BMap.InfoWindow(project_address, opts);  // 次数还没用完
+            map.openInfoWindow(infoWindow,point); //开启信息窗口
+        },  
+
+        lbtFun(){
+            // 轮播
+            var index = 0;
+
+            $('.small ol li').eq(index).addClass('isOpacity').siblings().removeClass('isOpacity');
+
+            $('.big ul li').eq(0).show().siblings().hide();
+
+            $('.small ol li').on('click', function () {
+                index = $(this).index();
+                $(this).addClass('isOpacity').siblings().removeClass('isOpacity');
+                $('.big ul li').eq(index).show().siblings().hide();
+            })
+
+            var w_li = 113;
+            var h_li = 78;
+            var margin_li = 7;
+            var now = 0;
+            var addli = 0;
+            var lisize = this.imgLeng;
+            var num = 5;
+
+            // 判断需要添加的li节点数量
+            var reminder = lisize % num;
+            if (lisize % num != 0) { addli = num - reminder; } else { addli = 0; }
+
+            $('.ps_pre').on('click', function () { // console.log(num);
+                now--;
+                if (now >= 0) {
+                    $('.ulNum').animate({'margin-left':-now * num * (w_li + margin_li * 2)});
+                    btnshow(now, parseInt((lisize + addli) / num), lisize, num);
+                }
+            });
+
+            $('.ps_next').on('click', function () {
+                now++;
+                if (now < (lisize + addli) / num) {
+                    $('.ulNum').animate({'margin-left':-now * num * (w_li + margin_li * 2)});
+                    btnshow(now, parseInt((lisize + addli) / num), lisize, num);
+                }
+            });
+
+            btnshow(now, parseInt((lisize + addli) / num), lisize, num);
+            
+            // 参数说明：
+            // now:当前是第几组，默认是0
+            // c:总共有几组
+            // d:初始化时li的个数
+            // e:每组显示li个数
+        
+            function btnshow(now, c, d, e) {
+                if (d <= e) { // 如果初始化时li的个数小于一组要显示的数，则不显示pre和next按钮
+                    $('.ps_next').hide();
+                    $('.ps_pre').hide();
+
+                    $('.ps_next1').show();
+                    $('.ps_pre1').show();
+                } else if (now == 0) { // 初始化now=0，显示第一组，只显示next
+                    $('.ps_next').show();
+                    $('.ps_next1').hide();
+                    $('.ps_pre').hide();
+                    $('.ps_pre1').show();
+                } else if (now == c - 1) { // 显示到最后一组，只显示pre
+                    $('.ps_next').hide();
+                    $('.ps_next1').show();
+
+                    $('.ps_pre').show();
+                    $('.ps_pre1').hide();
+                } else { // 显示中间组，pre和next都需要显示
+                    $('.ps_next').show();
+                    $('.ps_pre').show();
+
+                    $('.ps_next1').hide();
+                    $('.ps_pre1').hide();
+                }
+            }
+
+            // 锚点
+            var navTop = $('.detailNav').offset().top;
+            var allTop = [
+                $('#info').offset().top - 56,
+                $('#shop').offset().top - 150,
+                $('#seat').offset().top - 150,
+                $('#pic').offset().top - 150,
+                $('#seatPic').offset().top - 150,
+                $('#planePic').offset().top - 150
+            ]
+            $(window).scroll(function () {
+                var winTop = $(window).scrollTop();
+
+                if (winTop >= navTop) {
+                    $('.detailNav').addClass('fixed-top');
+                } else {
+                    $('.detailNav').removeClass('fixed-top');
+                }
+
+                if (winTop < allTop[1]) {
+                    $('.detailNav li').eq(0).addClass('cur').siblings().removeClass('cur')
+                } else if (winTop < allTop[2]) {
+                    $('.detailNav li').eq(1).addClass('cur').siblings().removeClass('cur')
+                } else if (winTop < allTop[3]) {
+                    $('.detailNav li').eq(2).addClass('cur').siblings().removeClass('cur')
+                } else if(winTop < allTop[4]) {
+                    $('.detailNav li').eq(3).addClass('cur').siblings().removeClass('cur')
+                } else if(winTop < allTop[5]) {
+                    $('.detailNav li').eq(4).addClass('cur').siblings().removeClass('cur')
+                } else {
+                    $('.detailNav li').eq(5).addClass('cur').siblings().removeClass('cur')
+                }
+            })
+
+            $('.detailNav li').on('click', function () {
+                var index = $(this).index();
+                $('html,body').animate({scrollTop:allTop[index]}, 100);
+            })
+        } 
+
+    },
+    created(){
+
+        let id = this.$route.params.id;
+
+    },
+    mounted(){
+
+        this.mapFun();//百度地图
+        
+        let _this = this;
+            setTimeout(function () {
+            _this.lbtFun();
+            _this.mapFun();//百度地图
+        },500);
+
+    }
+}
+</script>
+
+<style lang="less" type="text/less" scoped>
+@import '../../../assets/css/shopDetails.less';
+</style>
+

pages/shopsOffices/shopSell.vue

@@ -0,0 +1,262 @@
+<template>
+<div class="shopSellWrap">
+    <Nav></Nav>
+    <div class="shopNavWrap">
+        <dl class="shopNavDl">
+            <dt>
+                <h3><span>优铺</span>CBMLS·商铺写字楼</h3>
+            </dt>
+            <dd>
+                <input type="text" name="" placeholder="请输入商铺相关信息搜索" class="searchInput">
+                <p class="searchBtn"><span class="iconfont">&#xe613;</span>搜索</p>
+            </dd>
+        </dl>
+        <div class="shopNavList">
+            <ul class="shopNavListUl">
+                <li class="changeBg"><a href="/shopsOffices/shopSell">商铺出售</a></li>
+                <li><a href="/shopsOffices/shopLease">商铺出租</a></li>
+                <li class="li1">
+                    <a href="javascript:void(0);">商铺新盘</a>
+                    <div>
+                        <p><a href="/shopsOffices/shopFlatsSell">出售</a></p>
+                        <p><a href="/shopsOffices/shopFlatsLease">出租</a></p>
+                    </div>
+                </li>
+                <li><a href="/shopsOffices/officesSell">写字楼出售</a></li>
+                <li><a href="/shopsOffices/officesLease">写字楼出租</a></li>
+                <li class="shopNavBox li2">
+                    <a href="javascript:void(0);">写字楼新盘</a>
+                    <div>
+                        <p><a href="/shopsOffices/officesFlatsSell">出售</a></p>
+                        <p><a href="/shopsOffices/officesFlatsLease">出租</a></p>
+                    </div>
+                </li>
+            </ul>
+        </div>
+    </div>
+    <!-- 筛选 -->
+    <div class="shopBox">
+        <ul class="clearfix">
+            <li>首页<span class="iconfont">&#xe614;</span></li>
+            <li>商铺出售</li>
+        </ul>
+        <dl class="clearfix">
+            <dt>区域</dt>
+            <dd class="clearfix">
+                <span>全部</span>
+                <span>东城</span>
+                <span>西城</span>
+                <span>朝阳</span>
+                <span>东城</span>
+                <span>西城</span>
+                <span>朝阳</span>
+                <span>东城</span>
+                <span>西城</span>
+                <span>朝阳</span>
+                <span>东城</span>
+                <span>西城</span>
+                <span>朝阳</span>
+                <span>东城</span>
+                <span>东城</span>
+                <span>密云县</span>
+                <span>北京周边</span>
+            </dd>
+            <div>
+                <span>全部</span>
+                <span>东城</span>
+                <span>西城</span>
+                <span>朝阳</span>
+                <span>东城</span>
+                <span>西城</span>
+                <span>朝阳</span>
+                <span>东城</span>
+                <span>西城</span>
+                <span>朝阳</span>
+                <span>东城</span>
+                <span>西城</span>
+                <span>朝阳</span>
+                <span>东城</span>
+                <span>西城</span>
+                <span>朝阳</span>
+                <span>东城</span>
+                <span>东城</span>
+                <span>密云县</span>
+                <span>北京周边</span>
+            </div>
+        </dl>
+        <dl class="clearfix">
+            <dt>面积</dt>
+            <dd class="clearfix">
+                <span>全部</span>
+                <span>20m²以下</span>
+                <span>20-50m²</span>
+                <span>50-100m²</span>
+                <span>100-200m²</span>
+                <span>200-500m²</span>
+                <span>500m²以上</span>
+            </dd>
+        </dl>
+        <dl class="clearfix">
+            <dt>总价</dt>
+            <dd class="clearfix">
+                <span>全部</span>
+                <span>50万元以下</span>
+                <span>50-100万</span>
+                <span>100-200万</span>
+                <span>200-300万</span>
+                <span>300-500万</span>
+                <span>500-800万</span>
+                <span>800-1000万</span>
+                <span>1000万以上</span>
+            </dd>
+        </dl>
+        <dl class="clearfix">
+            <dt>类型</dt>
+            <dd class="clearfix">
+                <span>全部</span>
+                <span>纯城市综合体楼</span>
+                <span>购物中心</span>
+                <span>商场</span>
+                <span>商业街</span>
+                <span>商业裙楼</span>
+                <span>社区商业</span>
+                <span>专业市场</span>
+                <span>主题商业</span>
+                <span>其他</span>
+            </dd>
+        </dl>
+    </div>
+    <!-- 列表 -->
+    <div class="listWrap">
+        <h2>共找到<span>2284</span>套北京在售商铺</h2>
+        <div class="listBoxL">
+            <div class="listBox" @click="goDetails('1')">
+                <img src="http://up-img.oss-cn-beijing.aliyuncs.com/new/2019/07/25/bKjyBQKkZK7PmPrd63phfHmr2SFhwQXn.jpg?x-oss-process=style/thumbnail" class="listImg">
+                <dl class="clearfix">
+                    <h3><span class="span1">金融街（长安）中心·金熙汇 / 294.26m² / 可注册 / 可分割</span></h3>
+                    <dt class="clearfix">
+                        <ul>
+                           <li><span class="iconfont">&#xe616;</span>东城，安定门，鼓楼大街凡尔赛</li>
+                           <li><span class="iconfont">&#xe615;</span>半地下室，纯城市综合体楼</li>
+                        </ul>
+                    </dt>
+                    <dd class="clearfix">
+                        <p class="p1">676.86<span>万元&nbsp;[总价]</span></p>
+                        <p class="p2">20000.24<span>元/m²&nbsp;[单价]</span></p>
+                    </dd>
+                    <div class="listBoxBottom">
+                        <ul>
+                            <li>地铁上盖</li>
+                            <li>随时看铺</li>
+                            <li>繁华地段</li>
+                            <li>品牌地产</li>
+                        </ul>
+                        <div>
+                            <p class="p3">合作佣金：<span>4000&nbsp;元</span></p>
+                            <p class="p4">结佣时间：<span>合同签署30天内</span></p>
+                        </div>
+                    </div>
+                </dl>
+            </div>
+
+            <!-- 分页 -->
+            <div class="page">
+                <el-pagination
+                    background
+                    layout="prev, pager, next"
+                    @current-change="handleCurrentChange"
+                    :page-size=this.pageSize
+                    :total="total1">
+                </el-pagination>
+            </div>
+
+        </div>
+        <!-- 推荐商铺 -->
+        <div class="listBoxR">
+            <h3>推荐商铺</h3>
+            <dl>
+                <dt>
+                    <img src="http://up-img.oss-cn-beijing.aliyuncs.com/new/2019/05/25/CiJtYE6FwswCGStan8dbfpH52PrNAzrk.jpg?x-oss-process=style/thumbnail">
+                    <p>朝阳-奥林匹克公园</p>
+                </dt>
+                <dd>
+                    <h5>建国路幼儿园出租</h5>
+                    <p><span>24600</span>元/m²&nbsp;[单价]</p>
+                </dd>
+            </dl>
+        </div>
+    </div>
+
+</div>
+</template>
+
+<script>
+  import axios from '~/plugins/axios.js';
+  import Nav from '~/components/Nav/Nav';
+  export default {
+    head () {
+      return {
+        title: this.city,
+        meta: [
+          { hid: 'description', name: 'description', content: 'CBMLS' },
+          { hid: 'keywords', name: 'keywords', content: 'CBMLS'}
+        ]
+      }
+    },
+    data(){
+      return{
+        pageSize: 10, // 每页的数量
+        pageNum: 1, // 页码
+        total1: 100,  //接收渲染数据总数的参数
+        city: "北京商铺出售_北京商铺出租_北京商铺转让_北京商铺新盘_北京商铺网-{城市}中国商办联卖联租平台（CBMLS）"
+      }
+    },
+    mounted(){
+
+       
+    },
+    updated(){
+
+
+    },
+    components: {
+        Nav
+    },
+    computed: {
+
+    },
+    methods: {
+        //分页
+        handleCurrentChange(val) {
+            this.pageNum = val;
+            $('html , body').animate({scrollTop: 100},1200);
+        },
+        goDetails(id){
+            window.open('/shopsOffices/shopSellDtl/'+id);
+        }
+    },
+
+  }
+</script>
+
+<style lang="less" type="text/less" scoped>
+@import '../../assets/css/shopNav.less';
+@import '../../assets/css/listBox.less';
+</style>
+
+<style>
+.page .el-pagination {
+    font-weight: normal;
+}
+.page .el-pagination .btn-prev, .page .el-pagination .btn-next, .page .el-pagination .el-pager li {
+    height: 30px;
+    width: 30px;
+    line-height: 30px;
+    border: 1px solid #e5e5e5;
+}
+.page .el-pagination .el-pager li.active {
+    background: #195def !important;
+    border: 1px solid #e5e5e5;
+}   
+</style>
+

pages/shopsOffices/shopSellDtl/_id.vue

@@ -0,0 +1,610 @@
+<template>
+<div class="shopSellDelWrap">
+    <Nav></Nav>
+    <div class="detail">
+        <div class="detailTop">
+            <div class="detailTopMain">
+                <ul class="ul1 clearfix">
+                    <li>首页<span>></span></li>
+                    <li>商铺出售<span>></span></li>
+                    <li>商铺详情</li>
+                </ul>
+                <h2>朝阳 奥林匹克公园 / 236.87m² / 酒店餐饮 / 临街 / 空置中 出售</h2>
+                <div class="clearfix">
+                    <p><span>2.68</span>万元/m²[单价]</p>
+                    <p><span>30.98</span>万元[总价]</p>
+                    <p><span>30.98</span>m²[面积]</p>
+                </div>
+                <ul class="ul2 clearfix">
+                    <li>地铁上盖</li>
+                    <li>随时看铺</li>
+                    <li>繁华地段</li>
+                    <li>临近写字楼</li>
+                    <li>临近地铁</li>
+                </ul>
+            </div>
+        </div>
+
+        <div class="detailBox clearfix">
+            <div class="detailBoxL">
+                <div class="lbt">
+                    <div class="shop-lbt">
+                        <div class="shop-left left">
+                            <div class="big">
+                                <ul class="imgLength">
+                                    <li>
+                                        <img src="http://cdn.youpuchina.com/new/2019-07-24/O3q2WoRQekU5OGL2stzdHXnL1uiSsoc7?x-oss-process=style/watermark">
+                                    </li>
+                                    <li>
+                                        <img src="http://cdn.youpuchina.com/new/2019-07-25/fDSt5gohSPCRSkGfzpGY7E83NptiKNh0?x-oss-process=style/watermark">
+                                    </li>
+                                    <li>
+                                        <img src="http://cdn.youpuchina.com/new/2019-07-24/ZuIdBM7j0LAYlBBrt0oKicw4YJnXNGuR?x-oss-process=style/watermark">
+                                    </li>
+                                    <li>
+                                        <img src="http://cdn.youpuchina.com/new/2019-07-24/O3q2WoRQekU5OGL2stzdHXnL1uiSsoc7?x-oss-process=style/watermark">
+                                    </li>
+                                    <li>
+                                        <img src="http://cdn.youpuchina.com/new/2019-07-24/ZuIdBM7j0LAYlBBrt0oKicw4YJnXNGuR?x-oss-process=style/watermark">
+                                    </li>
+                                    <li>
+                                        <img src="http://cdn.youpuchina.com/new/2019-07-24/ZuIdBM7j0LAYlBBrt0oKicw4YJnXNGuR?x-oss-process=style/watermark">
+                                    </li>
+                                    <li>
+                                        <img src="http://cdn.youpuchina.com/new/2019-07-24/ZuIdBM7j0LAYlBBrt0oKicw4YJnXNGuR?x-oss-process=style/watermark">
+                                    </li>
+                                    <li>
+                                        <img src="http://cdn.youpuchina.com/new/2019-07-25/fDSt5gohSPCRSkGfzpGY7E83NptiKNh0?x-oss-process=style/watermark">
+                                    </li>
+                                </ul>
+                            </div>
+
+                            <div class="small">
+                                <div class="pg_left ps_pre">   
+                                    <img src="~/assets/images/common/leftWhite.png">
+                                </div>
+                                <div class="pg_left ps_pre1">
+                                    <img src="~/assets/images/common/leftGray.png">
+                                </div>
+                                <div class="pg_right ps_next">
+                                    <img src="~/assets/images/common/rightWhite.png">
+                                </div>
+                                <div class="pg_right ps_next1">
+                                   <img src="~/assets/images/common/rightGray.png">
+                                </div>
+                                <div class="activity" id="activity-slide">
+                                    <ol class="clearfix ulNum">
+                                        <li>
+                                            <img src="http://cdn.youpuchina.com/new/2019-07-24/O3q2WoRQekU5OGL2stzdHXnL1uiSsoc7?x-oss-process=style/watermark">
+                                        </li>
+                                        <li>
+                                            <img src="http://cdn.youpuchina.com/new/2019-07-25/fDSt5gohSPCRSkGfzpGY7E83NptiKNh0?x-oss-process=style/watermark">
+                                        </li>
+                                        <li>
+                                            <img src="http://cdn.youpuchina.com/new/2019-07-24/ZuIdBM7j0LAYlBBrt0oKicw4YJnXNGuR?x-oss-process=style/watermark">
+                                        </li>
+                                        <li>
+                                            <img src="http://cdn.youpuchina.com/new/2019-07-24/O3q2WoRQekU5OGL2stzdHXnL1uiSsoc7?x-oss-process=style/watermark">
+                                        </li>
+                                        <li>
+                                            <img src="http://cdn.youpuchina.com/new/2019-07-24/ZuIdBM7j0LAYlBBrt0oKicw4YJnXNGuR?x-oss-process=style/watermark">
+                                        </li>
+                                        <li>
+                                            <img src="http://cdn.youpuchina.com/new/2019-07-24/ZuIdBM7j0LAYlBBrt0oKicw4YJnXNGuR?x-oss-process=style/watermark">
+                                        </li>
+                                        <li>
+                                            <img src="http://cdn.youpuchina.com/new/2019-07-24/ZuIdBM7j0LAYlBBrt0oKicw4YJnXNGuR?x-oss-process=style/watermark">
+                                        </li>
+                                        <li>
+                                            <img src="http://cdn.youpuchina.com/new/2019-07-25/fDSt5gohSPCRSkGfzpGY7E83NptiKNh0?x-oss-process=style/watermark">
+                                        </li>
+                                    </ol>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="detailNav">
+                    <ul>
+                        <li class="cur">基本信息</li>
+                        <li>商铺描述</li>
+                        <li>地理位置</li>
+                        <li>商铺图片</li>
+                    </ul>
+                </div>
+                <div class="info clearfix" id="info">
+                    <h3 class="titleH3">基本信息</h3>
+                    <dl class="dlTop">
+                        <dt>商铺类型</dt>
+                        <dd>城市综合体</dd>
+                    </dl>
+                    <dl class="dlTop">
+                        <dt>面&emsp;&emsp;积</dt>
+                        <dd>60.22m²</dd>
+                    </dl>
+                    <dl>
+                        <dt>单&emsp;&emsp;价</dt>
+                        <dd>20000.22元/m²</dd>
+                    </dl>
+                    <dl>
+                        <dt>楼&emsp;&emsp;层</dt>
+                        <dd>一层，半地下室</dd>
+                    </dl>
+                    <dl>
+                        <dt>总&emsp;&emsp;价</dt>
+                        <dd>3.23元/m²/天</dd>
+                    </dl>
+                    <dl>
+                        <dt>物业费用</dt>
+                        <dd>3.23元/m²/天</dd>
+                    </dl>
+                    <dl>
+                        <dt>临&emsp;&emsp;街</dt>
+                        <dd>是</dd>
+                    </dl>
+                    <dl>
+                        <dt>商铺状态</dt>
+                        <dd>商铺状态</dd>
+                    </dl>
+                </div>
+                <div class="shop" id="shop">
+                    <h3 class="titleH3">商铺描述</h3>
+                    <dl class="clearfix">
+                        <dt>
+                            <p>商铺</p>
+                            <p>简介</p>
+                        </dt>
+                        <dd>中粮广场项目由A座、B座两幢5A智能甲级写字楼和高级购物商场组成，是一座集甲级写字楼和 高档购物中心为一体的大型建筑群体。总建筑面积约12万平米，其中包括约6万平米的高级中粮 广场购物中心及车位充足的中粮广场停车场，两幢分别为13层和14层总面积达车位充足的中粮 广场停车场，两幢分别为13层和14层6万平方米的写字楼。</dd>
+                    </dl>
+                    <dl class="clearfix" style="margin-top: 20px;">
+                        <dt>
+                            <p>周边</p>
+                            <p>配套</p>
+                        </dt>
+                        <dd>中粮广场项目由A座、B座两幢5A智能甲级写字楼和高级购物商场组成，是一座集甲级写字楼和 高档购物中心为一体的大型建筑群体。</dd>
+                    </dl>
+                </div>
+                <div class="seat" id="seat">
+                    <h3 class="titleH3">地理位置</h3>
+                    <!-- <div class="mapWrap"> -->
+                        <div id="allmap" style="width: 700px; height: 350px;"></div>
+                    <!-- </div> -->
+                </div>
+                <div class="pic" id="pic">
+                    <h3 class="titleH3">商铺图片</h3>
+                    <ul>
+                        <li><img src="http://cdn.youpuchina.com/new/2019/07/27/47eYFFWX6BrckcYshYf8AJ6AQyMGszSp.jpg?x-oss-process=style/watermark"></li>
+                        <li><img src="http://cdn.youpuchina.com/new/2019/07/27/47eYFFWX6BrckcYshYf8AJ6AQyMGszSp.jpg?x-oss-process=style/watermark"></li>
+                        <li><img src="http://cdn.youpuchina.com/new/2019/07/27/47eYFFWX6BrckcYshYf8AJ6AQyMGszSp.jpg?x-oss-process=style/watermark"></li>
+                        <li><img src="http://cdn.youpuchina.com/new/2019/07/27/47eYFFWX6BrckcYshYf8AJ6AQyMGszSp.jpg?x-oss-process=style/watermark"></li>
+                    </ul>
+                </div>
+            </div>
+            <div class="detailBoxR">
+                <div class="card">
+                    <div class="cardTop clearfix">
+                        <dl class="dl1">
+                            <dt><span>36.8</span>万元</dt>
+                            <dd>[总价]</dd>
+                        </dl>
+                        <dl class="dl2">
+                            <dt><span>236.8</span>m²</dt>
+                            <dd>[面积]</dd>
+                        </dl>
+                    </div>
+                    <div class="cardBar">
+                        <i></i>
+                        <p class="p1">此商铺合作佣金</p>
+                        <p class="p2">6000<span>元</span></p>
+                    </div>
+                    <ul class="cardUl">
+                        <li>
+                            <span class="span1">结佣时间</span>
+                            <span class="span2">签署合同30天之内</span>
+                        </li>
+                        <li>
+                            <span class="span1">商铺状态</span>
+                            <span class="span2">空置中</span>
+                        </li>
+                        <li>
+                            <span class="span1">商铺类型</span>
+                            <span class="span2">酒店餐饮</span>
+                        </li>
+                        <li>
+                            <span class="span1">详细地址</span>
+                            <span class="span2">北京市东城区建国门内大街8号北京市东城区 建国门内大街8号</span>
+                        </li>
+                    </ul>
+                    <dl class="cardFoot">
+                        <dt></dt>
+                        <dd>
+                            <h3>王一博儿</h3>
+                            <!-- <p>点击查看经纪人电话</p> -->
+                            <p><span class="iconfont">&#xe61f;</span>130-1109-2864</p>
+                        </dd>
+                    </dl>
+                </div>
+                <div class="record">
+                    <dl class="recordTop clearfix">
+                        <dt>跟进记录</dt>
+                        <dd>
+                            <!-- <p class="p1">终止流程</p> -->
+                            <p class="hoverBg">新增到访</p>
+                            <!-- <p class="hoverBg">签约</p> -->
+                            <!-- <p class="hoverBg">提醒结佣</p> -->
+                            <!-- <p class="hoverBg">结佣</p> -->
+                            <!-- <span>交易已完成</span> -->
+                        </dd>
+                    </dl>
+                    <div class="recordNav clearfix">
+                        <ul>
+                            <li class="navCur">查看信息</li>
+                            <li>到访</li>
+                            <li>认购</li>
+                            <li>签约</li>
+                            <li>结佣</li>
+                            <li>终止</li>
+                        </ul>
+                    </div>
+                    <div class="recordMain">
+                        <div class="recordBox">
+                            <dl class="clearfix">
+                                <i></i>
+                                <dt>
+                                    <h5>留不足写字楼位置差，配套不好，自身资金预留，自身资金预留</h5>
+                                    <p>2019-07-24</p>
+                                </dt>
+                                <dd class="clearfix">
+                                    <span></span>
+                                    <span></span>
+                                    <span></span>
+                                </dd>
+                            </dl>
+                            <dl class="clearfix">
+                                <i></i>
+                                <dt>
+                                    <h5>王耶啵啵，到访成功</h5>
+                                    <p>2019-07-24</p>
+                                </dt>
+                                <dd class="clearfix"></dd>
+                            </dl>
+                            <dl class="clearfix">
+                                <i></i>
+                                <dt>
+                                    <h5>王耶啵啵，到访成功</h5>
+                                    <p>2019-07-24</p>
+                                </dt>
+                                <dd class="clearfix">
+                                    <span></span>
+                                    <span></span>
+                                    <span></span>
+                                </dd>
+                            </dl>
+                            <dl class="clearfix">
+                                <i></i>
+                                <dt>
+                                    <h5>王耶啵啵，到访成功</h5>
+                                    <p>2019-07-24</p>
+                                </dt>
+                                <dd class="clearfix">
+                                    <span></span>
+                                    <span></span>
+                                    <span></span>
+                                </dd>
+                            </dl>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+    </div>
+</div>
+</template>
+
+<script>
+  import axios from '~/plugins/axios.js';
+  import Nav from '~/components/Nav/Nav';
+  export default {
+    head () {
+      return {
+        title: 'CBMLS',
+        meta: [
+          { hid: 'description', name: 'description', content: 'CBMLS' },
+          { hid: 'keywords', name: 'keywords', content: 'CBMLS'}
+        ]
+      }
+    },
+    data(){
+      return{
+        imgLeng: 8,
+       
+      }
+    },
+    components: {
+        Nav
+    },
+    updated(){
+      
+    },
+    methods: {
+        mapFun(){
+            // 百度地图API功能
+            var map = new BMap.Map("allmap");
+            // var point = new BMap.Point(this.projectDetail.lng,this.projectDetail.lat);//经度、维度
+            var point = new BMap.Point(116.49467187206017,39.925286410424285);
+            var marker = new BMap.Marker(point);  // 创建标注
+            map.addOverlay(marker);              // 将标注添加到地图中
+            map.centerAndZoom(point, 15);
+            var opts = {
+                width : 100,     // 信息窗口宽度
+                height: 30,     // 信息窗口高度
+                title : "", // 信息窗口标题
+                enableMessage:true,//设置允许信息窗发送短息
+                message:""
+            }
+            var project_address = "朝阳-永安里";
+            var infoWindow = new BMap.InfoWindow(project_address, opts);  // 次数还没用完
+            map.openInfoWindow(infoWindow,point); //开启信息窗口
+        }, 
+
+        lbtFun(){
+            // 轮播
+            var index = 0;
+
+            $('.small ol li').eq(index).addClass('isOpacity').siblings().removeClass('isOpacity');
+
+            $('.big ul li').eq(0).show().siblings().hide();
+
+            $('.small ol li').on('click', function () {
+                index = $(this).index();
+                $(this).addClass('isOpacity').siblings().removeClass('isOpacity');
+                $('.big ul li').eq(index).show().siblings().hide();
+            })
+
+            var w_li = 113;
+            var h_li = 78;
+            var margin_li = 7;
+            var now = 0;
+            var addli = 0;
+            var lisize = this.imgLeng;
+            var num = 5;
+
+            // 判断需要添加的li节点数量
+            var reminder = lisize % num;
+            if (lisize % num != 0) { addli = num - reminder; } else { addli = 0; }
+
+            $('.ps_pre').on('click', function () { // console.log(num);
+                now--;
+                if (now >= 0) {
+                    $('.ulNum').animate({'margin-left':-now * num * (w_li + margin_li * 2)});
+                    btnshow(now, parseInt((lisize + addli) / num), lisize, num);
+                }
+            });
+
+            $('.ps_next').on('click', function () {
+                now++;
+                if (now < (lisize + addli) / num) {
+                    $('.ulNum').animate({'margin-left':-now * num * (w_li + margin_li * 2)});
+                    btnshow(now, parseInt((lisize + addli) / num), lisize, num);
+                }
+            });
+
+            btnshow(now, parseInt((lisize + addli) / num), lisize, num);
+            
+            // 参数说明：
+            // now:当前是第几组，默认是0
+            // c:总共有几组
+            // d:初始化时li的个数
+            // e:每组显示li个数
+        
+            function btnshow(now, c, d, e) {
+                if (d <= e) { // 如果初始化时li的个数小于一组要显示的数，则不显示pre和next按钮
+                    $('.ps_next').hide();
+                    $('.ps_pre').hide();
+
+                    $('.ps_next1').show();
+                    $('.ps_pre1').show();
+                } else if (now == 0) { // 初始化now=0，显示第一组，只显示next
+                    $('.ps_next').show();
+                    $('.ps_next1').hide();
+                    $('.ps_pre').hide();
+                    $('.ps_pre1').show();
+                } else if (now == c - 1) { // 显示到最后一组，只显示pre
+                    $('.ps_next').hide();
+                    $('.ps_next1').show();
+
+                    $('.ps_pre').show();
+                    $('.ps_pre1').hide();
+                } else { // 显示中间组，pre和next都需要显示
+                    $('.ps_next').show();
+                    $('.ps_pre').show();
+
+                    $('.ps_next1').hide();
+                    $('.ps_pre1').hide();
+                }
+            }
+
+            // 锚点
+            var navTop = $('.detailNav').offset().top;
+            var allTop = [
+                $('#info').offset().top - 56,
+                $('#shop').offset().top - 150,
+                $('#seat').offset().top - 150,
+                $('#pic').offset().top - 150,
+                $('#seatPic').offset().top - 150,
+                $('#planePic').offset().top - 150
+            ]
+            $(window).scroll(function () {
+                var winTop = $(window).scrollTop();
+
+                if (winTop >= navTop) {
+                    $('.detailNav').addClass('fixed-top');
+                } else {
+                    $('.detailNav').removeClass('fixed-top');
+                }
+
+                if (winTop < allTop[1]) {
+                    $('.detailNav li').eq(0).addClass('cur').siblings().removeClass('cur')
+                } else if (winTop < allTop[2]) {
+                    $('.detailNav li').eq(1).addClass('cur').siblings().removeClass('cur')
+                } else if (winTop < allTop[3]) {
+                    $('.detailNav li').eq(2).addClass('cur').siblings().removeClass('cur')
+                } else if(winTop < allTop[4]) {
+                    $('.detailNav li').eq(3).addClass('cur').siblings().removeClass('cur')
+                } else if(winTop < allTop[5]) {
+                    $('.detailNav li').eq(4).addClass('cur').siblings().removeClass('cur')
+                } else {
+                    $('.detailNav li').eq(5).addClass('cur').siblings().removeClass('cur')
+                }
+            })
+
+            $('.detailNav li').on('click', function () {
+                var index = $(this).index();
+                $('html,body').animate({scrollTop:allTop[index]}, 100);
+            })
+        },
+
+        lbtFun(){
+            // 轮播
+            var index = 0;
+
+            $('.small ol li').eq(index).addClass('isOpacity').siblings().removeClass('isOpacity');
+
+            $('.big ul li').eq(0).show().siblings().hide();
+
+            $('.small ol li').on('click', function () {
+                index = $(this).index();
+                $(this).addClass('isOpacity').siblings().removeClass('isOpacity');
+                $('.big ul li').eq(index).show().siblings().hide();
+            })
+
+            var w_li = 113;
+            var h_li = 78;
+            var margin_li = 7;
+            var now = 0;
+            var addli = 0;
+            var lisize = this.imgLeng;
+            var num = 5;
+
+            // 判断需要添加的li节点数量
+            var reminder = lisize % num;
+            if (lisize % num != 0) { addli = num - reminder; } else { addli = 0; }
+
+            $('.ps_pre').on('click', function () { // console.log(num);
+                now--;
+                if (now >= 0) {
+                    $('.ulNum').animate({'margin-left':-now * num * (w_li + margin_li * 2)});
+                    btnshow(now, parseInt((lisize + addli) / num), lisize, num);
+                }
+            });
+
+            $('.ps_next').on('click', function () {
+                now++;
+                if (now < (lisize + addli) / num) {
+                    $('.ulNum').animate({'margin-left':-now * num * (w_li + margin_li * 2)});
+                    btnshow(now, parseInt((lisize + addli) / num), lisize, num);
+                }
+            });
+
+            btnshow(now, parseInt((lisize + addli) / num), lisize, num);
+            
+            // 参数说明：
+            // now:当前是第几组，默认是0
+            // c:总共有几组
+            // d:初始化时li的个数
+            // e:每组显示li个数
+        
+            function btnshow(now, c, d, e) {
+                if (d <= e) { // 如果初始化时li的个数小于一组要显示的数，则不显示pre和next按钮
+                    $('.ps_next').hide();
+                    $('.ps_pre').hide();
+
+                    $('.ps_next1').show();
+                    $('.ps_pre1').show();
+                } else if (now == 0) { // 初始化now=0，显示第一组，只显示next
+                    $('.ps_next').show();
+                    $('.ps_next1').hide();
+                    $('.ps_pre').hide();
+                    $('.ps_pre1').show();
+                } else if (now == c - 1) { // 显示到最后一组，只显示pre
+                    $('.ps_next').hide();
+                    $('.ps_next1').show();
+
+                    $('.ps_pre').show();
+                    $('.ps_pre1').hide();
+                } else { // 显示中间组，pre和next都需要显示
+                    $('.ps_next').show();
+                    $('.ps_pre').show();
+
+                    $('.ps_next1').hide();
+                    $('.ps_pre1').hide();
+                }
+            }
+
+            // 锚点
+            var navTop = $('.detailNav').offset().top;
+            var allTop = [
+                $('#info').offset().top - 56,
+                $('#shop').offset().top - 150,
+                $('#seat').offset().top - 150,
+                $('#pic').offset().top - 150,
+                $('#seatPic').offset().top - 150,
+                $('#planePic').offset().top - 150
+            ]
+            $(window).scroll(function () {
+                var winTop = $(window).scrollTop();
+
+                if (winTop >= navTop) {
+                    $('.detailNav').addClass('fixed-top');
+                } else {
+                    $('.detailNav').removeClass('fixed-top');
+                }
+
+                if (winTop < allTop[1]) {
+                    $('.detailNav li').eq(0).addClass('cur').siblings().removeClass('cur')
+                } else if (winTop < allTop[2]) {
+                    $('.detailNav li').eq(1).addClass('cur').siblings().removeClass('cur')
+                } else if (winTop < allTop[3]) {
+                    $('.detailNav li').eq(2).addClass('cur').siblings().removeClass('cur')
+                } else if(winTop < allTop[4]) {
+                    $('.detailNav li').eq(3).addClass('cur').siblings().removeClass('cur')
+                } else if(winTop < allTop[5]) {
+                    $('.detailNav li').eq(4).addClass('cur').siblings().removeClass('cur')
+                } else {
+                    $('.detailNav li').eq(5).addClass('cur').siblings().removeClass('cur')
+                }
+            })
+
+            $('.detailNav li').on('click', function () {
+                var index = $(this).index();
+                $('html,body').animate({scrollTop:allTop[index]}, 100);
+            })
+        } 
+
+
+    },
+    created(){
+
+        let id = this.$route.params.id;
+        console.log(id);
+
+    },
+    mounted(){
+
+        this.mapFun();//百度地图
+        let _this = this;
+            setTimeout(function () {
+            _this.lbtFun();
+            _this.mapFun();//百度地图
+        },500);
+            
+    }
+  }
+</script>
+
+<style lang="less" type="text/less" scoped>
+@import '../../../assets/css/shopDetails.less';
+</style>
+

plugins/README.md

@@ -0,0 +1,9 @@
+# PLUGINS
+
+This directory contains your Javascript plugins that you want to run before instantiating the root vue.js application.
+
+More information about the usage of this directory in the documentation:
+https://nuxtjs.org/guide/plugins
+
+**This directory is not required, you can delete it if you don't want to use it.**
+

plugins/axios.js

@@ -0,0 +1,67 @@
+import axios from 'axios' //引入axios模块
+import {Message,Loading} from 'element-ui'
+
+// axios 配置
+axios.defaults.timeout = 5000;
+axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
+axios.defaults.baseURL = 'http://api.youpuglobal.com';
+// axios.defaults.baseURL = 'http://test-api-mpb.yingshangchina.com';
+// axios.defaults.baseURL = 'http://192.168.1.136:8080';
+
+
+if(typeof window !== "undefined"){
+  var url ="http://" +  window.location.host;
+  axios({
+    url: '/show/getOpenedCitiesList',
+    method: "post",
+  }).then(res => {
+    console.log(res)
+    res.data.data.forEach(function (item,index) {
+      if(item.web_url == url){
+        sessionStorage.provinceId = item.province_id;
+        sessionStorage.cityId =  item.city_id;
+        sessionStorage.cityName = item.city_name;
+      }
+    })
+  }).catch(err => {
+    console.log(err)
+  });
+  // /http request 拦截器
+  axios.interceptors.request.use(
+    config => {
+      if (localStorage.token) {  // 判断是否存在token，如果存在的话，则每个http header都加上token
+        config.headers["access-token"]  = localStorage.token;
+      }
+      return config;
+    },
+    err => {
+      return Promise.reject(err);
+    });
+
+//http response 拦截器
+  axios.interceptors.response.use(
+    response => {
+      if(response.data.code == 201){
+        // localStorage.clear();
+        this.$message("请先登录")
+        router.replace({
+          path:"login",
+          query: {redirect: router.currentRoute.fullPath}
+        })
+      }else if(response.data.code == 202){
+        // localStorage.clear();
+        this.$message("登录超时，请重新登录")
+        router.replace({
+          path: 'login',
+          query: {redirect: router.currentRoute.fullPath}
+        })
+      }
+      return response;
+    },
+    error => {
+      return Promise.reject(error)   // 返回接口返回的错误信息
+    });
+}
+
+
+export default axios;

plugins/common.js

@@ -0,0 +1,19 @@
+
+//检测是什么设配打开
+function IsPC() {
+  var userAgentInfo = navigator.userAgent;
+  var Agents = ["Android", "iPhone",
+    "SymbianOS", "Windows Phone",
+    "iPad", "iPod"
+  ];
+  var flag = true;
+  for (var v = 0; v < Agents.length; v++) {
+    if (userAgentInfo.indexOf(Agents[v]) > 0) {
+      flag = false;
+      break;
+    }
+  }
+  return flag;
+}
+
+export {IsPC};

plugins/element-ui.js

@@ -0,0 +1,6 @@
+import Vue from 'vue'
+import Element from 'element-ui'
+
+Vue.use(Element)
+
+

plugins/youmeng.js

@@ -0,0 +1,13 @@
+export default ({ app: { router }, store }) => {
+  router.afterEach((to, from) => {
+    /* 告诉增加一个PV */
+    try {
+      if (window._czc) {
+        let location = window.location
+        let contentUrl = location.pathname + location.hash
+        let refererUrl = '/'
+        window._czc.push(['_trackPageview', contentUrl, refererUrl])
+      }
+    } catch (e) {}
+  })
+}

static/README.md

@@ -0,0 +1,12 @@
+# STATIC
+
+This directory contains your static files.
+Each file inside this directory is mapped to /.
+
+Example: /static/robots.txt is mapped as /robots.txt.
+
+More information about the usage of this directory in the documentation:
+https://nuxtjs.org/guide/assets#static
+
+**This directory is not required, you can delete it if you don't want to use it.**
+

store/README.md

@@ -0,0 +1,11 @@
+# STORE
+
+This directory contains your Vuex Store files.
+Vuex Store option is implemented in the Nuxt.js framework.
+Creating a index.js file in this directory activate the option in the framework automatically.
+
+More information about the usage of this directory in the documentation:
+https://nuxtjs.org/guide/vuex-store
+
+**This directory is not required, you can delete it if you don't want to use it.**
+