feats

src/components/Footer/index.vue

               label: '商务手机：13770684354（曹）'
             },
             {
-              label: '公司地址：南京市秦淮区水西门大街2号银都·锦创广场5楼）'
+              label: '公司地址：南京市秦淮区水西门大街2号银都·锦创广场5楼'
             }
           ]
         }

src/components/Modal/index.vue

+<template>
+  <transition name="fade">
+    <div class="modal-box" v-if="show">
+      <div class="overlay">
+        <div class="modal" :style="mStyle">
+          <div class="modal-head">
+            <h2 class="modal-title" v-if="title">{{title}}</h2>
+            <span class="modal-close" @click="handleClose">✖</span>
+          </div>
+          <div class="modal-body">
+            <slot></slot>
+          </div>
+        </div>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script>
+export default {
+  props: {
+    visible: {
+      type: Boolean,
+      required: false
+    },
+    title: String,
+    width: Number
+  },
+  data () {
+    return {
+      show: false
+    }
+  },
+  computed: {
+    mStyle () {
+      return this.width ? `width: ${this.width}px` : ''
+    }
+  },
+  watch: {
+    visible (nw) {
+      this.show = nw
+    }
+  },
+  methods: {
+    handleClose () {
+      this.show = false
+      this.$emit('update:visible', false)
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.fade-enter-active, .fade-leave-active {
+  transition: opacity 0.2s;
+}
+.fade-enter, .fade-leave-to {
+  opacity: 0;
+}
+
+.modal-box {
+  position:fixed;
+  display:table;
+  height:100%;
+  width:100%;
+  top:0;
+  left:0;
+  z-index:9999;
+  background: transparent;
+
+  .overlay {
+    display:table-cell;
+    text-align:center;
+    vertical-align:middle;
+    overflow: hidden;
+    background:rgba(0,0,0,0.8);
+
+    .modal {
+      background:white;
+      padding: 0.4rem;
+      display:inline-block;
+      border-radius:3px;
+      position:relative;
+      color: #333;
+      width: 3.6rem;
+
+      .modal-head {
+        margin-top: -0.3rem;
+        margin-bottom: 0.1rem;
+        display: flex;
+        align-items: center;
+
+        .modal-title {
+          text-align: left;
+          font-weight: 500;
+          font-size: 0.24rem;
+          line-height: 0.4rem;
+          margin: 0;
+          padding: 0;
+          flex: 1;
+        }
+
+        .modal-close {
+          display: inline-block;
+          width: 0.4rem;
+          height: 0.4rem;
+          font-size: 0.24rem;
+          line-height: 0.4rem;
+          text-align: center;
+          flex: none;
+
+          &:hover {
+            cursor: pointer;
+          }
+        }
+      }
+
+      .modal-body {
+        max-height: 100vh;
+        overflow-y: auto;
+        width: 100%;
+      }
+    }
+  }
+}
+</style>

src/components/Nav/index.vue

         {
           label: '关于橙蕉',
           path: '/about'
-        },
-        {
-          label: '咨询热线 025-',
-          path: '/'
         }
       ]
     }

src/components/PageWrapper/TrialForm/FormItem.vue

+<template>
+  <div class="form-item">
+    <div class="control">
+      <div class="require">
+        <span v-if="required">*</span>
+      </div>
+      <div class="component">
+        <slot></slot>
+      </div>
+    </div>
+    <div class="helper">
+      <div class="error" v-if="error">{{errorMsg}}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    required: Boolean,
+    value: String,
+    placeholder: String,
+    error: Boolean,
+    errorMsg: String
+  },
+  methods: {
+    handleChange (e) {
+      this.$emit('input', e)
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.form-item {
+  width: 100%;
+
+  .control {
+    display: flex;
+    align-items: center;
+    text-align: left;
+  }
+
+  .helper {
+    text-align: left;
+
+    .error {
+      padding: 0.1rem 0.2rem;
+      font-size: 0.12rem;
+      color: red;
+    }
+  }
+
+  .require {
+    color: red;
+    margin-right: 0.1rem;
+    text-align: center;
+    min-width: 0.08rem;
+  }
+
+  .component {
+    box-shadow:0 0.02rem 0 0 rgba(250,198,112,1);
+    border-radius:0.04rem;
+    border:0.01rem solid rgba(250,198,112,0.4);
+    flex: 1;
+    line-height: 0.16rem;
+    padding: 0.1rem;
+  }
+
+  & + .form-item {
+    margin-top: 0.15rem;
+  }
+
+  input, textarea {
+    width: 100%;
+    outline: none;
+    border: none;
+  }
+}
+</style>

src/components/PageWrapper/TrialForm/index.vue

+<template>
+  <div class="trial-form">
+    <FormItem :required="true" errorMsg="请输入公司名称" :error="error.compnay" >
+      <input placeholder="请输入公司名称" v-model="formData.compnay" />
+    </FormItem>
+    <FormItem :required="true" errorMsg="请输入正确的手机号码" :error="error.phone">
+      <input placeholder="请输入手机号码" v-model="formData.phone" />
+    </FormItem>
+    <FormItem :required="true" errorMsg="请输入姓名" :error="error.name">
+      <input placeholder="请输入姓名" v-model="formData.name" />
+    </FormItem>
+    <FormItem>
+      <input placeholder="请输入邮箱" v-model="formData.email" />
+    </FormItem>
+    <FormItem>
+      <textarea placeholder="请输入需求" v-model="formData.demand" />
+    </FormItem>
+    <button class="submit-btn" @click="submit">
+      立即提交
+    </button>
+  </div>
+</template>
+
+<script>
+export default {
+  components: {
+    FormItem: () => import('./FormItem')
+  },
+  data () {
+    return {
+      formData: {
+        compnay: null,
+        phone: null,
+        name: null,
+        email: null,
+        demand: null
+      },
+      error: {
+        compnay: false,
+        phone: false,
+        name: false,
+        email: false,
+        demand: false
+      }
+    }
+  },
+  methods: {
+    submit () {
+      this.error = {
+        compnay: false,
+        phone: false,
+        name: false,
+        email: false,
+        demand: false
+      }
+
+      let hasError = false
+
+      if (!this.formData.compnay) {
+        this.error.compnay = true
+        hasError = true;
+      }
+      if (!this.formData.phone || this.formData.phone.length !== 11) {
+        this.error.phone = true
+        hasError = true;
+      }
+      if (!this.formData.name) {
+        this.error.name = true
+        hasError = true;
+      }
+
+      if (hasError) {
+        return;
+      }
+
+      console.log(this.formData)
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.trial-form {
+  width: 100%;
+  font-size: 0.14rem;
+
+  .submit-btn {
+    width:2.08rem;
+    height:0.4rem;
+    background:rgba(250,198,112,1);
+    border-radius:0.2rem;
+    font-size:0.2rem;
+    font-weight:600;
+    color:rgba(255,255,255,1);
+    line-height:0.28rem;
+    border: none;
+    outline: none;
+    margin-top: 0.26rem;
+  }
+}
+</style>

src/components/PageWrapper/index.vue

 <template>
   <div class="page">
-    <Header :galleries="galleries" :nav="nav" />
+    <Header :galleries="galleries" />
     <div class="page-container">
       <slot />
     </div>
     <Footer />
-    <SuspenseBtns />
+    <SuspenseBtns @click="handleSuspenseBtnClick" />
+    <Modal :title="modalTitle" :visible.sync="showModal" :width="400">
+      <div v-if="showTrial">
+        <TrialForm />
+      </div>
+      <div v-else-if="showMiniapp">
+        <div class="concat-miniapp">
+          <div class="mini-qrcode">
+            <img src="https://njcjweb.oss-cn-beijing.aliyuncs.com/office/images/qr-gao.png" alt="">
+            <img src="https://njcjweb.oss-cn-beijing.aliyuncs.com/office/images/qr-cao.png" alt="">
+          </div>
+          <div class="tip">扫一扫上面的二维码图案, 加我微信</div>
+        </div>
+      </div>
+      <div v-else>
+        <P class="concator">
+          <span><img src="~@/assets/telephone.png" alt=""></span>
+          <span> - 18621600456（高先生）</span>
+        </P>
+        <P class="concator">
+          <span><img src="~@/assets/telephone.png" alt=""></span>
+          <span>- 13770684354（曹先生）</span>
+        </P>
+      </div>
+    </Modal>
   </div>
 </template>
 
   components: {
     Header: () => import('@/components/Header'),
     Footer: () => import('@/components/Footer'),
-    SuspenseBtns: () => import('@/components/SuspenseBtns')
+    SuspenseBtns: () => import('@/components/SuspenseBtns'),
+    Modal: () => import('@/components/Modal'),
+    TrialForm: () => import('./TrialForm')
   },
   props: {
     title: String,
       required: true
     }
   },
+  data () {
+    return {
+      modalTitle: '',
+      showModal: false,
+      showTrial: false,
+      showMiniapp: false
+    }
+  },
+  watch: {
+    showModal (nw) {
+      if (!nw) {
+        this.showTrial = false
+        this.showMiniapp = false
+        this.modalTitle = ''
+      }
+    }
+  },
   created () {
     let title = '橙蕉互动'
     if (this.$route.meta && this.$route.meta.title) {
     }
 
     document.title = title
+  },
+  methods: {
+    handleSuspenseBtnClick ({ id }) {
+      if (id === 'trial') {
+        this.showTrial = true
+        this.modalTitle = '预约体验'
+      } else if (id === 'miniapp') {
+        this.showMiniapp = true
+        this.modalTitle = '微信咨询'
+      } else {
+        this.modalTitle = '电话咨询'
+      }
+      this.showModal = true
+    }
   }
 }
 </script>
+
+<style lang="less" scoped>
+.page {
+  .concator {
+    font-size: 0.18rem;
+    vertical-align: middle;
+
+    img {
+      width: 0.36rem;
+      vertical-align: middle;
+      margin-right: 0.05rem;
+    }
+  }
+
+  .concat-miniapp {
+    .mini-qrcode {
+      display: flex;
+      justify-content: space-between;
+
+      img {
+        max-width: 2rem;
+      }
+    }
+
+    .tip {
+      color: #666;
+      font-size: 0.12rem;
+      text-align: center;
+    }
+  }
+}
+</style>

src/components/SuspenseBtns/IconButton/index.vue

   border-radius:0.06rem;
   border: 0.01rem solid #FAC670;
 
+  &:hover {
+    cursor: pointer;
+  }
+
   img {
     display: block;
     border: 0;

src/components/SuspenseBtns/index.vue

 <template>
   <div class="suspense-btns">
-    <IconButton icon="">预约体验</IconButton>
-    <IconButton icon="">微信咨询</IconButton>
-    <IconButton icon="">电话咨询</IconButton>
+    <IconButton
+      v-for="(item, index) in btnList"
+      :key="index"
+      :icon="item.icon"
+      @click="handleClick(item)"
+    >{{item.label}}</IconButton>
   </div>
 </template>
 
     IconButton: () => import('./IconButton')
   },
   data () {
-    return {}
+    return {
+      btnList: [
+        {
+          id: 'trial',
+          icon: require('@/assets/appointment experience.png'),
+          label: '预约体验'
+        },
+        {
+          id: 'miniapp',
+          icon: require('@/assets/wechat consulting.png'),
+          label: '微信咨询'
+        },
+        {
+          id: 'concat',
+          icon: require('@/assets/telephone consultation.png'),
+          label: '电话咨询'
+        }
+      ]
+    }
+  },
+  methods: {
+    handleClick (item) {
+      this.$emit('click', item)
+    }
   }
 }
 </script>

src/layout/WithNav.vue

   position: fixed;
   top: 0;
   width: 100%;
-  z-index: 9999;
+  z-index: 100;
   padding: 0.3rem 0;
   color: #fff;
   display: flex;

src/pages/About/index.vue

         </p>
       </Section>
       <Section title="城市代理">
-        <id class="proxy">
+        <div class="proxy">
           <img src="https://njcjweb.oss-cn-beijing.aliyuncs.com/office/images/urban%20distribution.png" alt="">
           <p>
             橙蕉互动立足南京，发展至今，已有近30家城市代理、逾百家深度合作的集团项目，业务分布以长三角为辐射区，遍布南京、上海、苏州、杭州、郑州、广州、贵阳、绍兴、海口、乌鲁木齐等全国三十多个城市。
           </p>
-        </id>
+        </div>
       </Section>
 
       <div class="concat">
         }
       ],
       concatList: [
-        {icon: require('@/assets/telephone.png'), label: '025-12345-678'},
-        {icon: require('@/assets/cell-phone number.png'), label: '181-12345-678'},
+        {icon: require('@/assets/telephone.png'), label: '18621600456（高）'},
+        {icon: require('@/assets/cell-phone number.png'), label: '13770684354（曹）'},
         {icon: require('@/assets/location.png'), label: '南京市秦淮区水西门大街2号'}
       ]
     }

src/pages/News/index.vue

     return {
       galleryList: [{image: 'https://njcjweb.oss-cn-beijing.aliyuncs.com/office/images/banner6.png'}],
       newsList: [
-        {
-          poster: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1593769116440&di=2f763a86f4fc71d4be6dfe6e766a3c45&imgtype=0&src=http%3A%2F%2Fspider.nosdn.127.net%2F74f56248d6ebe9670d3e0a361572a62b.jpeg',
-          title: '看橙蕉如何开拓5G时代地产营销新赛道！',
-          desc: '2020开年，一场来势汹汹的疫情让地产行业陷入僵局，巨大的困境背后避让有机遇相伴相生。 如何破困境，抓机遇？橙蕉小程序赋能社交裂变价值，代理房地产营销新契机。',
-          date: '2020-06-09'
-        },
-        {
-          poster: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1593769116438&di=ceaa358e5a285afe0eb20b51e05fce15&imgtype=0&src=http%3A%2F%2Fimg.article.pchome.net%2F00%2F26%2F65%2F06%2Fpic_lib%2Fwm%2Fssj_37.jpg',
-          title: '看橙蕉如何开拓5G时代地产营销新赛道！',
-          desc: '2020开年，一场来势汹汹的疫情让地产行业陷入僵局，巨大的困境背后避让有机遇相伴相生。 如何破困境，抓机遇？橙蕉小程序赋能社交裂变价值，代理房地产营销新契机。',
-          date: '2020-06-09'
-        }
+        // {
+        //   poster: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1593769116440&di=2f763a86f4fc71d4be6dfe6e766a3c45&imgtype=0&src=http%3A%2F%2Fspider.nosdn.127.net%2F74f56248d6ebe9670d3e0a361572a62b.jpeg',
+        //   title: '看橙蕉如何开拓5G时代地产营销新赛道！',
+        //   desc: '2020开年，一场来势汹汹的疫情让地产行业陷入僵局，巨大的困境背后避让有机遇相伴相生。 如何破困境，抓机遇？橙蕉小程序赋能社交裂变价值，代理房地产营销新契机。',
+        //   date: '2020-06-09'
+        // },
+        // {
+        //   poster: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1593769116438&di=ceaa358e5a285afe0eb20b51e05fce15&imgtype=0&src=http%3A%2F%2Fimg.article.pchome.net%2F00%2F26%2F65%2F06%2Fpic_lib%2Fwm%2Fssj_37.jpg',
+        //   title: '看橙蕉如何开拓5G时代地产营销新赛道！',
+        //   desc: '2020开年，一场来势汹汹的疫情让地产行业陷入僵局，巨大的困境背后避让有机遇相伴相生。 如何破困境，抓机遇？橙蕉小程序赋能社交裂变价值，代理房地产营销新契机。',
+        //   date: '2020-06-09'
+        // }
       ]
     }
   }

src/pages/Prod/components/Card/index.vue

   padding: 0.3rem;
   max-width: 6rem;
   border: 0.01rem solid rgba(255,126,72,0.12);
+  align-items: center;
 
   &:hover {
     cursor: pointer;
 
   .thumb {
     width: 1.7rem;
+    height: 1.7rem;
     margin-right: 0.2rem;
+    line-height: 1.7rem;
 
     img {
       width: 100%;
+      vertical-align: middle;
     }
   }
 

src/pages/Prod/index.vue

       ],
       chengjiao: [
         {
-          icon: '',
+          thumb: 'https://njcjweb.oss-cn-beijing.aliyuncs.com/office/images/prod/1.png',
           title: '精准获客',
           subtitle: '让每一个流量都不浪费',
           items: [
           ]
         },
         {
-          icon: '',
+          thumb: 'https://njcjweb.oss-cn-beijing.aliyuncs.com/office/images/prod/3.png',
+          ratio: 1.2,
           title: '精准传播',
           subtitle: '定制化互动及H5精准传播',
           items: [
           ]
         },
         {
-          icon: '',
+          thumb: 'https://njcjweb.oss-cn-beijing.aliyuncs.com/office/images/prod/4.png',
           title: '精准管控',
           subtitle: '实时跟进管控多方数据',
           items: [
           ]
         },
         {
-          icon: '',
+          thumb: 'https://njcjweb.oss-cn-beijing.aliyuncs.com/office/images/prod/2.png',
           title: '精准展示',
           subtitle: '项目资料全方位生动展示',
           items: [
           ]
         },
         {
-          icon: '',
+          thumb: 'https://njcjweb.oss-cn-beijing.aliyuncs.com/office/images/prod/7.png',
           title: '精准倒流',
           subtitle: '让每一个流量都不浪费',
           items: [
           ]
         },
         {
-          icon: '',
+          thumb: 'https://njcjweb.oss-cn-beijing.aliyuncs.com/office/images/prod/5.png',
           title: '精准触达',
           subtitle: '信息精准触达最需要的客群',
           items: [
           ]
         },
         {
-          icon: '',
+          thumb: 'https://njcjweb.oss-cn-beijing.aliyuncs.com/office/images/prod/6.png',
           title: '精准转化',
           subtitle: '大数据演绎用户精准画像',
           items: [
       ],
       report: [
         {
-          icon: '',
+          thumb: 'https://njcjweb.oss-cn-beijing.aliyuncs.com/office/images/prod/%E7%BC%96%E7%BB%84%2021%402x.png',
           title: '经纪人注册',
           desc: '每个用户都可以注册成为经纪人 强力拓宽营销渠道'
         },
         {
-          icon: '',
+          thumb: 'https://njcjweb.oss-cn-beijing.aliyuncs.com/office/images/prod/%E7%BC%96%E7%BB%84%2022%402x.png',
           title: '客户报备',
           desc: '楼盘页报备：一个客户信息一次只能报备到一个楼盘 客户页报备：一个客户信息一次可以报备到多个楼盘'
         },
         {
-          icon: '',
+          thumb: 'https://njcjweb.oss-cn-beijing.aliyuncs.com/office/images/prod/%E7%BC%96%E7%BB%84%2023%402x.png',
           title: '报备管理',
           desc: '平台认报备型 平台认到访型 跟进记录管理 客户意向度管理'
         },
         {
-          icon: '',
+          thumb: 'https://njcjweb.oss-cn-beijing.aliyuncs.com/office/images/prod/%E7%BC%96%E7%BB%84%2024%402x.png',
           title: '案场管理',
           desc: '案场管理人员对报备的处理'
         },
         {
-          icon: '',
+          thumb: 'https://njcjweb.oss-cn-beijing.aliyuncs.com/office/images/prod/%E7%BC%96%E7%BB%84%2025%402x.png',
           title: '楼盘查看',
           desc: '所有可报备的楼盘基本信息 报备及收益信息'
         },
         {
-          icon: '',
+          thumb: 'https://njcjweb.oss-cn-beijing.aliyuncs.com/office/images/prod/%E7%BC%96%E7%BB%84%2026%402x.png',
           title: '客户管理',
           desc: '客户查询、筛选 客户基本详情查看和冲突说明 客户报备信息和跟进记录 重复报备提醒'
         },
         {
-          icon: '',
+          thumb: 'https://njcjweb.oss-cn-beijing.aliyuncs.com/office/images/prod/%E7%BC%96%E7%BB%84%2027%402x.png',
           title: '跟踪管理',
           desc: '新增跟进记录'
         },
         {
-          icon: '',
+          thumb: 'https://njcjweb.oss-cn-beijing.aliyuncs.com/office/images/prod/%E7%BC%96%E7%BB%84%2028%402x.png',
           title: '个人信息',
           desc: '经纪人个人信息 数据查看佣金结算 建议和反馈'
         }