beishu

src/components/buildingdetailheader.vue

@@ -1,26 +0,0 @@
-<template>
-    <div class="headerbigimg">
-    <img class="bigimg" src=""/>
-    </div>
-</template>
-
-<script>
-export default {
-  name:'BuildingHeader',
-  data () {
-
-  }
-}
-</script>
-
-<style lang="postcss" scoped>
-.headerbigimg{
-  width: 100%;
-  height: 211px;
-  & .bigimg{
-    width: 100%;
-  }
-}
-</style>
-
-

src/main.js

@@ -5,7 +5,6 @@ import App from './App.vue'
 import router from './router'
 import store from './store'
 import './theme'
-import './assets/styles/iconfont.css'
 // import './public/style/common.scss'
 // import AMap  from 'vue-amap'
 

src/pages/building/buildingdetail.vue

@@ -1,159 +1,159 @@
-<template>
-  <div class="context" >
-    <vue-headful title="楼盘详情页"  />
-    <city-area></city-area>
-    <building-header></building-header>
-    <van-cell-group class="clickbutton">
-        <div class="gotopageimg" @click="gotopageimg"><van-cell  class="clickcharacters" title="查看更多图片"/><span class="iconfont icon-youfan right"></span></div>
-        <span class="iconline"></span>
-        <div class="gotopagetype" @click="gotopagetype"><van-cell  class="clickcharacters" title="查看户型图"/><span class="iconfont icon-youfan right" ></span></div>
-        <span class="iconline"></span>
-        <div class="gotopagecollect"><span class="iconfont icon-Star collect"></span><van-cell class="clickcharacters"  title="已收藏"/></div>
-    </van-cell-group>
-    <div class="housecenter">
-      <house-name></house-name>
-      <hr class="line" />
-      <building-data></building-data>
-    </div>
-    <building-conduction></building-conduction>
-    <building-perimeter></building-perimeter>
-    <correlation-dynamics></correlation-dynamics>
-    <div class="btn">
-      <van-button @click="gotoLookHouse" size="large" >预约看房</van-button>
-  </div>
-</div>
-</template>
-
-<script>
-import BuildingHeader from './components/buildingdetailheader.vue'
-import HouseName from './components/housename.vue'
-import BuildingData from './components/buildingdata.vue'
-import BuildingConduction from './components/buildingconduction.vue'
-import BuildingPerimeter from './components/buildingperimeter.vue'
-import CorrelationDynamics from './components/correlationdynamics.vue'
-import CityArea from './components/cityarea.vue'
-// import ToaseBox from './components/toasebox.vue'
-
-export default {
-    name:'BuildingDetail',
-    components: {
-    'vue-headful': () => import('vue-headful'),
-    'BuildingHeader':BuildingHeader,
-    'HouseName':HouseName,
-    'BuildingData':BuildingData,
-    'BuildingConduction':BuildingConduction,
-    'BuildingPerimeter':BuildingPerimeter,
-    'CorrelationDynamics':CorrelationDynamics,
-    'CityArea':CityArea,
-    // 'ToaseBox':ToaseBox,
-  },
-  //  mounted() {
-  //   this.$dialog.alert({
-  //     message: '弹窗内容'
-  //   });
-  // },
-  methods: {
-    gotoLookHouse() {
-      this.$router.push({ name: 'lookhouse' })
-    },
-    gotopageimg () {
-      this.$router.push({ name: 'buildingimage' })
-    },
-    gotopagetype () {
-      this.$router.push({ name: 'buildingtype' })
-    }
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style lang="postcss" scoped>
-.context{
-  width: 100%;
-  height: 610px;
-  overflow-y: auto;
-
-  .clickbutton{
-    width: 100%;
-    height: 52px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    .iconline{
-      height:16px;
-      border:1px solid #EAEAEA;
-    }
-
-    .gotopageimg{
-      height: 100%;
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      margin-left: 20px;
-    }
-
-    .gotopagetype{
-          height: 100%;
-          display: flex;
-          flex-direction: row;
-          align-items: center;
-        }
-
-    .gotopagecollect{
-          height: 100%;
-          display: flex;
-          flex-direction: row;
-          align-items: center;
-          margin-right: 30px;
-        }
-
-
-    .right{
-      color: #A1A1A1!important;
-      font-size: 10px !important;
-      padding-left: 5px;
-    }
-
-    .collect{
-      font-size: 20px !important;
-      color:rgba(252,198,74,1) !important;
-      padding-right: 5px;
-    }
-
-    .clickcharacters{
-    padding: 0 !important;
-    font-size:14px;
-    font-family:PingFangSC-Regular;
-    font-weight:400;
-    color:rgba(102,102,102,1);
-    line-height:20px;
-    text-align: center;
-    }
-
-    .right{
-      color:A1A1A1;
-      font-size: 10px;
-    }
-    }
-
-  .housecenter{
-    width: 100%;
-    height: 353px;
-    background-color:rgba(255,255,255,1);
-    margin-bottom: 10px;
-
-    .line{
-      width:90%;
-      border: 0.5px solid #EFEFEF;
-    }
-  }
-
-  .van-button{
-    position: fixed;
-    top:617px;
-    left:0;
-  }
-}
-
+<template>
+  <div class="context" >
+    <vue-headful title="楼盘详情页"  />
+    <city-area></city-area>
+    <building-header></building-header>
+    <van-cell-group class="clickbutton">
+        <div class="gotopageimg" @click="gotopageimg"><van-cell  class="clickcharacters" title="查看更多图片"/><span class="iconfont icon-youfan right"></span></div>
+        <span class="iconline"></span>
+        <div class="gotopagetype" @click="gotopagetype"><van-cell  class="clickcharacters" title="查看户型图"/><span class="iconfont icon-youfan right" ></span></div>
+        <span class="iconline"></span>
+        <div class="gotopagecollect"><span class="iconfont icon-Star collect"></span><van-cell class="clickcharacters"  title="已收藏"/></div>
+    </van-cell-group>
+    <div class="housecenter">
+      <house-name></house-name>
+      <hr class="line" />
+      <building-data></building-data>
+    </div>
+    <building-conduction></building-conduction>
+    <building-perimeter></building-perimeter>
+    <correlation-dynamics></correlation-dynamics>
+    <div class="btn">
+      <van-button @click="gotoLookHouse" size="large" >预约看房</van-button>
+  </div>
+</div>
+</template>
+
+<script>
+import BuildingHeader from './components/buildingdetailheader.vue'
+import HouseName from './components/housename.vue'
+import BuildingData from './components/buildingdata.vue'
+import BuildingConduction from './components/buildingconduction.vue'
+import BuildingPerimeter from './components/buildingperimeter.vue'
+import CorrelationDynamics from './components/correlationdynamics.vue'
+import CityArea from './components/cityarea.vue'
+// import ToaseBox from './components/toasebox.vue'
+
+export default {
+    name:'BuildingDetail',
+    components: {
+    'vue-headful': () => import('vue-headful'),
+    'BuildingHeader':BuildingHeader,
+    'HouseName':HouseName,
+    'BuildingData':BuildingData,
+    'BuildingConduction':BuildingConduction,
+    'BuildingPerimeter':BuildingPerimeter,
+    'CorrelationDynamics':CorrelationDynamics,
+    'CityArea':CityArea,
+    // 'ToaseBox':ToaseBox,
+  },
+  //  mounted() {
+  //   this.$dialog.alert({
+  //     message: '弹窗内容'
+  //   });
+  // },
+  methods: {
+    gotoLookHouse() {
+      this.$router.push({ name: 'lookhouse' })
+    },
+    gotopageimg () {
+      this.$router.push({ name: 'buildingimage' })
+    },
+    gotopagetype () {
+      this.$router.push({ name: 'buildingtype' })
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="postcss" scoped>
+.context{
+  width: 100%;
+  height: 610px;
+  overflow-y: auto;
+
+  .clickbutton{
+    width: 100%;
+    height: 52px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .iconline{
+      height:16px;
+      border:1px solid #EAEAEA;
+    }
+
+    .gotopageimg{
+      height: 100%;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      margin-left: 20px;
+    }
+
+    .gotopagetype{
+          height: 100%;
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+        }
+
+    .gotopagecollect{
+          height: 100%;
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          margin-right: 30px;
+        }
+
+
+    .right{
+      color: #A1A1A1!important;
+      font-size: 10px !important;
+      padding-left: 5px;
+    }
+
+    .collect{
+      font-size: 20px !important;
+      color:rgba(252,198,74,1) !important;
+      padding-right: 5px;
+    }
+
+    .clickcharacters{
+    padding: 0 !important;
+    font-size:14px;
+    font-family:PingFangSC-Regular;
+    font-weight:400;
+    color:rgba(102,102,102,1);
+    line-height:20px;
+    text-align: center;
+    }
+
+    .right{
+      color:A1A1A1;
+      font-size: 10px;
+    }
+    }
+
+  .housecenter{
+    width: 100%;
+    height: 353px;
+    background-color:rgba(255,255,255,1);
+    margin-bottom: 10px;
+
+    .line{
+      width:90%;
+      border: 0.5px solid #EFEFEF;
+    }
+  }
+
+  .van-button{
+    position: fixed;
+    top:617px;
+    left:0;
+  }
+}
+
 </style>

src/pages/building/components/housename.vue

@@ -1,91 +1,102 @@
-<template>
-    <div class="housename">
-        <div class="housenameheader">
-            <span class="housenametitle">帝景天誉</span>
-            <div class="housenameprice">
-                <span class="price">24000元</span>
-                <span class="pricestart">/ 起</span>
-            </div>
-        </div>
-        <div class="housenamefooter">
-            <span class="housetype">挑高双层</span>
-            <span class="housetel"><i class="iconfont  icon-dianhua2 phone"> </i><span >400-7689-9756</span></span>
-        </div>
-    </div>
-</template>
-
-<script>
-
-export default {
-    name:'HouseName',
-}
-</script>
-<style lang="postcss" scoped>
-.housename{
-    margin-top: 10px;
-    width: 100%;
-    height: 95px;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-
-    .housenameheader{
-      display: flex;
-      flex-direction:row;
-      justify-content: space-between;
-      width: 90%;
-      margin-bottom:5px;
-    }
-
-    .price{
-        font-size:18px;
-        font-family:PingFangSC-Medium;
-        font-weight:500;
-        color:rgba(255,84,84,1);
-        line-height:22px;
-        padding-right: 8px;
-    }
-
-    .pricestart{
-        font-size:16px;
-        font-family:PingFangSC-Medium;
-        font-weight:500;
-        color:rgba(0,0,0,1);
-        line-height:22px;
-    }
-
-    .housenamefooter{
-        display: flex;
-        flex-direction:row;
-        justify-content: space-between;
-        width: 90%;
-    }
-    .phone{
-        font-size: 12px !important;
-        color:rgba(119,165,240,1)!important;
-        padding-right: 5px;
-    }
-
-    .housetype{
-        background:rgba(247,250,255,1);
-        border-radius:2px;
-        padding: 4px 5px;
-        font-size:12px;
-        font-family:PingFangSC-Regular;
-        font-weight:400;
-        color:rgba(119,165,240,1);
-        line-height:17px;
-    }
-
-    .housetel{
-        font-size:14px;
-        font-family:PingFangSC-Regular;
-        font-weight:400;
-        color:rgba(119,165,240,1);
-        line-height:20px;
-        display: flex;
-        flex-direction: row;
-    }
-}
-</style>
+<template>
+    <div class="housename">
+        <div class="housenameheader">
+            <span class="housenametitle">帝景天誉</span>
+            <div class="housenameprice">
+                <span class="price">24000元</span>
+                <span class="pricestart">/ 起</span>
+            </div>
+        </div>
+        <div class="housenamefooter">
+            <span class="housetype">挑高双层</span>
+            <span class="housetel" @click="altfun()"><i class="iconfont  icon-dianhua2 phone"> </i><span >400-7689-9756</span></span>
+        </div>
+    </div>
+</template>
+
+<script>
+
+export default {
+    name:'HouseName',
+    methods:{
+        altfun(){
+            console.log(this)
+            this.$dialog.alert({
+            title: '标题',
+            message: '弹窗内容'
+            }).then(() => {
+            // on close
+            })
+        }
+    }
+}
+</script>
+<style lang="postcss" scoped>
+.housename{
+    margin-top: 10px;
+    width: 100%;
+    height: 95px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    .housenameheader{
+      display: flex;
+      flex-direction:row;
+      justify-content: space-between;
+      width: 90%;
+      margin-bottom:5px;
+    }
+
+    .price{
+        font-size:18px;
+        font-family:PingFangSC-Medium;
+        font-weight:500;
+        color:rgba(255,84,84,1);
+        line-height:22px;
+        padding-right: 8px;
+    }
+
+    .pricestart{
+        font-size:16px;
+        font-family:PingFangSC-Medium;
+        font-weight:500;
+        color:rgba(0,0,0,1);
+        line-height:22px;
+    }
+
+    .housenamefooter{
+        display: flex;
+        flex-direction:row;
+        justify-content: space-between;
+        width: 90%;
+    }
+    .phone{
+        font-size: 12px !important;
+        color:rgba(119,165,240,1)!important;
+        padding-right: 5px;
+    }
+
+    .housetype{
+        background:rgba(247,250,255,1);
+        border-radius:2px;
+        padding: 4px 5px;
+        font-size:12px;
+        font-family:PingFangSC-Regular;
+        font-weight:400;
+        color:rgba(119,165,240,1);
+        line-height:17px;
+    }
+
+    .housetel{
+        font-size:14px;
+        font-family:PingFangSC-Regular;
+        font-weight:400;
+        color:rgba(119,165,240,1);
+        line-height:20px;
+        display: flex;
+        flex-direction: row;
+    }
+}
+</style>

src/pages/reservation/lookhouse.vue

@@ -1,120 +1,138 @@
-<template>
-  <div class="appoint-form">
-    <vue-headful title="预约看房信息填写"  />
-    <div class="title"><h1>预约看房</h1>
-      <van-cell-group>
-        <van-cell class="field_name" is-link arrow-direction="down">楼盘名称：</van-cell>
-        <van-cell class="field_name">楼盘地址：</van-cell>
-        <van-switch-cell v-model="checked" title="马上去" />
-        <van-cell class="field_name">预约时间：<van-datetime-picker v-model="currentDate" type="datetime" :min-date="minDate" :max-date="maxDate"/></van-cell>
-        <van-field class="field_name"  label="手机号码：" />
-        <van-field class="field_name"  label="预约看房人数："/> 
-      </van-cell-group>
-      <div class="information">
-        <span class="remarks">备注信息：</span>
-        <div class="input_content">
-            <textarea  id="textArea" class="content_txt" maxlength="100" placeholder="例如:偏好、预算、要求等" onfocus="this.placeholder=''" onblur="this.placeholder='例如:偏好、预算、要求等'"></textarea>
-            <span class="number"><span  id="textNum" style="color:#FB6B2F">0</span><span>/100</span></span>
-        </div>
-      </div>
-    </div>
-    <div>
-      <van-button size="large">提交</van-button>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  components: {
-    'vue-headful': () => import('vue-headful'),
-  },
-  data() {
-    return {
-      checked: true,
-      show: false,
-       minHour: 10,
-      maxHour: 20,
-      minDate: new Date(),
-      maxDate: new Date(2019, 10, 1),
-      currentDate: new Date()
-    
-    }
-  },
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style lang="postcss" scoped>
-.appoint-form {
-  padding: 26px;
-  
-  .title {
-    background-color: #fff;
-    margin-bottom:22px;
-    height: 490px;
-    
-    .information{
-      margin-top: 15px;
-
-      .remarks{
-      font-size:14px;
-      font-weight:400;
-      color:rgba(62,62,62,1);
-      line-height:20px;
-      padding: 0 0 8px 15px;
-      }
-      .input_content{
-          width: 90%;
-          height: 110px;
-          position: relative;
-          margin-left: 15px;
-
-          .content_txt{
-            width:100%;
-            height: 100%;
-            border: none;
-            font-size:12px;
-            font-weight:400;
-            color:rgba(170,170,170,1);
-            line-height:17px;
-            border: 1px solid rgba(235,235,235,1);
-          }
-          .number{
-            position: absolute;
-            bottom: 0.4rem;
-            right: 0.4rem;
-          }
-      }
-
-    }
-  }
-
-  & h1 {
-    text-align: center;
-    font-size:18px;
-    font-weight:400;
-    color:rgba(0,0,0,1);
-    line-height:25px;
-    padding:20px 0 15px 0;
-  }
-
-  .field_name{
-    font-size:14px;
-    font-family:PingFangSC-Regular;
-    font-weight:400;
-    color:rgba(0,0,0,1);
-    line-height:20px;
-
-    .van-field{
-
-      .van-cell__title{
-        max-width: 100px !important;
-      }
-    }
-    
-    
-  }
-
-}
+<template>
+  <div class="appoint-form">
+    <vue-headful title="预约看房信息填写"  />
+    <div class="title"><h1>预约看房</h1>
+      <van-cell-group>
+        <van-cell class="field_name" is-link arrow-direction="down" @click="showName()">楼盘名称：
+            <van-popup v-model="show" position="bottom" :overlay="false">
+              <ul>
+                <li></li>
+              </ul>
+            </van-popup>
+        </van-cell>
+        <van-cell class="field_name">楼盘地址：</van-cell>
+        <van-switch-cell v-model="checked" title="马上去" />
+        <van-cell class="field_name" @click="showDatePicker()">预约时间：
+          <van-popup v-model="show" position="bottom" :overlay="false">
+            <van-datetime-picker v-model="currentDate" type="datetime" :min-date="minDate" :max-date="maxDate"/>
+          </van-popup>
+        </van-cell>
+        <van-field class="field_name"  label="手机号码：" />
+        <van-field class="field_name"  label="预约看房人数："/> 
+      </van-cell-group>
+      <div class="information">
+        <span class="remarks">备注信息：</span>
+        <div class="input_content">
+            <textarea  id="textArea" class="content_txt" maxlength="100" placeholder="例如:偏好、预算、要求等" onfocus="this.placeholder=''" onblur="this.placeholder='例如:偏好、预算、要求等'"></textarea>
+            <span class="number"><span  id="textNum" style="color:#FB6B2F">0</span><span>/100</span></span>
+        </div>
+      </div>
+    </div>
+    <div>
+      <van-button size="large">提交</van-button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  components: {
+    "vue-headful": () => import("vue-headful")
+  },
+  data() {
+    return {
+      checked: true,
+      show: false,
+      minHour: 10,
+      maxHour: 20,
+      minDate: new Date(),
+      maxDate: new Date(2080, 10, 1),
+      currentDate: new Date()
+    };
+  },
+  methods: {
+    showDatePicker() {
+      this.show = true;
+    },
+    showName (){
+      this.show = true;
+    }
+  }
+};
+</script>
+
+<style>
+.van-picker__frame{
+  display: none;
+}
+</style>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="postcss" scoped>
+.appoint-form {
+  padding: 26px;
+
+  .title {
+    background-color: #fff;
+    margin-bottom: 22px;
+    height: 510px;
+
+    .information {
+      margin-top: 15px;
+
+      .remarks {
+        font-size: 14px;
+        font-weight: 400;
+        color: rgba(62, 62, 62, 1);
+        line-height: 20px;
+        padding: 0 0 8px 15px;
+      }
+      .input_content {
+        width: 90%;
+        height: 110px;
+        position: relative;
+        margin-left: 15px;
+
+        .content_txt {
+          width: 100%;
+          height: 100%;
+          border: none;
+          font-size: 12px;
+          font-weight: 400;
+          color: rgba(170, 170, 170, 1);
+          line-height: 17px;
+          border: 1px solid rgba(235, 235, 235, 1);
+        }
+        .number {
+          position: absolute;
+          bottom: 0.4rem;
+          right: 0.4rem;
+        }
+      }
+    }
+  }
+
+  & h1 {
+    text-align: center;
+    font-size: 18px;
+    font-weight: 400;
+    color: rgba(0, 0, 0, 1);
+    line-height: 25px;
+    padding: 20px 0 15px 0;
+  }
+
+  .field_name {
+    font-size: 14px;
+    font-family: PingFangSC-Regular;
+    font-weight: 400;
+    color: rgba(0, 0, 0, 1);
+    line-height: 20px;
+
+    .van-field {
+      .van-cell__title {
+        max-width: 100px !important;
+      }
+    }
+  }
+}
 </style>