'主页静态页面'

src/pages/home/home-page.vue

 <!--
-   * @Descrip""/>User Settings Edit
+   * @Descrip: 主页
  * @Author: your name
  * @Date: 2019-10-10 14:25:15
- * @LastEditTime: 2019-10-10 17:30:37
+ * @LastEditTime: 2019-10-11 14:45:17
  * @LastEditors: Please set LastEditors
    -->
 <template>
@@ -10,7 +10,8 @@
     <h-header class="bar-custom">
       <div slot="left" class="h-header-btn">
         <!-- <i class="ion-ios-arrow-back" /> -->
-        <span>徐州</span>
+        <img class="locations" src="@/assets/homePage/location.png" alt="">
+        <span @click="location">徐州</span>
       </div>
       <div slot="center">徐工租赁</div>
     </h-header>
@@ -48,9 +49,9 @@
           </div>
           <div slot="content" class="item-content">
             <div class="top">***起重机 <span class="hot">热门</span></div>
-            <div class="center">经销商 <span class="seconds">xxx代理商</span></div>
-            <div class="center">参数项 <span class="seconds">GTZ226</span></div>
-            <div class="center">地址 <span class="seconds">江苏省徐州市云龙区</span></div>
+            <div class="center"> <span class="firsts">经销商</span> <span class="seconds">xxx代理商</span></div>
+            <div class="center"> <span class="firsts">参数项</span> <span class="seconds">GTZ226</span></div>
+            <div class="center"> <span class="firsts">地址</span> <span class="seconds">江苏省徐州市云龙区</span></div>
           </div>
         </item>
         <item>
@@ -59,12 +60,13 @@
           </div>
           <div slot="content" class="item-content">
             <div class="top">***起重机 <span class="hot">热门</span></div>
-            <div class="center">经销商 <span class="seconds">xxx代理商</span></div>
-            <div class="center">参数项 <span class="seconds">GTZ226</span></div>
-            <div class="center">地址 <span class="seconds">江苏省徐州市云龙区</span></div>
+            <div class="center"> <span class="firsts">经销商</span> <span class="seconds">xxx代理商</span></div>
+            <div class="center"> <span class="firsts">参数项</span> <span class="seconds">GTZ226</span></div>
+            <div class="center"> <span class="firsts">地址</span> <span class="seconds">江苏省徐州市云龙区</span></div>
           </div>
         </item>
       </list-item>
+      <div class="bank" style="height: 60px;width: 100%"/>
     </h-content>
   </h-view>
 </template>
@@ -75,30 +77,25 @@ export default {
     return {
       functionList: [
         {
-          functionIcon: require('@/assets/userBind/np.png'),
-          functionName: '用户绑定',
+          functionIcon: require('@/assets/homePage/product-select.png'),
+          functionName: '产品查询',
           functionState: 'UserBind',
         },
         {
-          functionIcon: require('@/assets/intoApproval/introduce.png'),
-          functionName: '绑定查询',
+          functionIcon: require('@/assets/homePage/product-trial.png'),
+          functionName: '产品试算',
           functionState: 'NaturePersonReadOnly',
         },
         {
-          functionIcon: require('@/assets/intoApproval/introduce.png'),
-          functionName: '进件审批',
+          functionIcon: require('@/assets/homePage/contract-query.png'),
+          functionName: '合同查询',
           functionState: 'IntoList',
         },
         {
-          functionIcon: require('@/assets/intoApproval/introduce.png'),
-          functionName: '经销商签约',
+          functionIcon: require('@/assets/homePage/replay.png'),
+          functionName: '还款计划',
           functionState: 'ContractList',
         },
-        {
-          functionIcon: require('@/assets/intoApproval/introduce.png'),
-          functionName: '合同签约',
-          functionState: 'ContractSigning',
-        },
       ],
     }
   },
@@ -106,43 +103,55 @@ export default {
   watch: {},
   methods:
  {
-   goFunctionHome (data) {
-     if (data.functionState === 'NaturePersonReadOnly') {
-       if (this.user_bp_status === 'APPROVED' && this.user_bp_class === 'NP') {
-         this.$router.push({
-           name: 'NaturePersonReadOnly',
-           params: {
-             'bp_id': this.bp_id,
-           },
-         })
-       } else if (this.user_bp_status === 'APPROVED' && this.user_bp_class === 'ORG') {
-         this.$router.push({
-           name: 'EnterpriseReadOnly',
-           params: {
-             'bp_id': this.bp_id,
-           },
-         })
-       } else {
-         this.hlsPopup.showLongCenter('您的绑定申请还在流程中')
-       }
-     } else {
-       this.$router.push({
-         name: data.functionState,
-       })
-     }
+   //    goFunctionHome (data) {
+   //      if (data.functionState === 'NaturePersonReadOnly') {
+   //        if (this.user_bp_status === 'APPROVED' && this.user_bp_class === 'NP') {
+   //          this.$router.push({
+   //            name: 'NaturePersonReadOnly',
+   //            params: {
+   //              'bp_id': this.bp_id,
+   //            },
+   //          })
+   //        } else if (this.user_bp_status === 'APPROVED' && this.user_bp_class === 'ORG') {
+   //          this.$router.push({
+   //            name: 'EnterpriseReadOnly',
+   //            params: {
+   //              'bp_id': this.bp_id,
+   //            },
+   //          })
+   //        } else {
+   //          this.hlsPopup.showLongCenter('您的绑定申请还在流程中')
+   //        }
+   //      } else {
+   //        this.$router.push({
+   //          name: data.functionState,
+   //        })
+   //      }
+   //    },
+   location () {
+     this.$router.push({
+       name: 'location',
+     })
    },
  },
 }
 </script>
 <style lang='less' scoped>
 #homePage {
+    .h-header .h-header-left .h-header-btn:first-of-type {
+    padding-left: 0.2rem;
+}
+    .locations {
+        height: 24px;
+        width: 24px;
+    }
     .hls-swipe {
-        height: 208px;
+        // height: 208px;
         width: 100vw;
         // overflow: hidden;
         img {
             width: 100vw;
-            height: 100%;
+            // height: 100%;
         }
       }
     .function{
@@ -170,15 +179,18 @@ export default {
         }
       }
       .center-pic {
+        //   position: relative;
           width: 100%;
-          height: 228px;
+        //   height: 228px;
+        //   overflow: hidden;
           display: flex;
           flex-direction: row;
           .left-pic {
               width: 41.6%;
               margin-left: 4px;
               img {
-                  width: 100%;
+                   max-width: 100%;
+                   height: auto;
               }
           }
           .right-pic {
@@ -187,7 +199,8 @@ export default {
               flex-direction: column;
               margin-left: 4px;
               img {
-                  width: 100%;
+                  max-width: 100%;
+                   height: auto;
               }
               img:nth-of-type(2) {
                   margin-top: 4px;
@@ -226,12 +239,17 @@ export default {
             font-weight: 600;
             margin-top: 10px;
             .hot {
+                display: inline-block;
+                height: 14px;
+                line-height: 14px;
+                // width: 32px;
                 border: 1px solid #FF8214;
                 border-radius: 2px;
                 font-family: PingFangSC-Semibold;
                 font-size: 11px;
                 color: #FF8214;
                 letter-spacing: 0.46px;
+                margin-left: 6px;
             }
           }
           .center {
@@ -240,6 +258,10 @@ export default {
               font-size: 13px;
               color: rgba(56,63,69,0.60);
               letter-spacing: 0.5px;
+              .firsts {
+                  display: inline-block;
+                  width: 44px;
+              }
               .seconds {
                   margin-left: 16px;
                   font-weight: 600;
@@ -248,9 +270,6 @@ export default {
                   color: #383F45;
                   letter-spacing: 0.5px;
               }
-            //   .seconds:nth-of-type(3) {
-            //       margin-left: 24px;
-            //   }
           }
       }
 }

src/pages/home/location.vue

+<!--
+   * @Descrip""/>User Settings Edit
+ * @Author: your name
+ * @Date: 2019-10-11 09:39:51
+ * @LastEditTime: 2019-10-11 14:02:18
+ * @LastEditors: Please set LastEditors
+   -->
+<template>
+  <h-view id="location" class="public-style" title="定位">
+    <h-header :proportion="[5,1,1]" class="bar-custom">
+      <div slot="left" class="h-header-btn">
+        <img src="@/assets/userBind/arrow.png" @click="$routeGo()">
+        <span>选择地区</span>
+      </div>
+    </h-header>
+    <h-content>
+      <div class="current-location">
+        <div class="img-box">
+          <img src="@/assets/homePage/location.png" alt="">
+
+        </div>
+        <p>当前位置</p>
+      </div>
+
+      <list-item>
+        <item>
+          <section slot="name" class="place">{{ places }}</section>
+          <section slot="content" class="relocation">
+            <div>
+              <img src="@/assets/homePage/relocation.png" alt="">
+              <p>重新定位</p>
+            </div>
+
+          </section>
+        </item>
+      </list-item>
+
+      <div class="current-location">
+        <p class="select-location" @click="switchCity">选择位置</p>
+      </div>
+      <div class="provinces">
+        <p :class="{styles:!flag}" @click="changeStyle(1)">{{ province }}</p>
+        <p :class="{styles:flag}" @click="changeStyle(2)">请选择市</p>
+      </div>
+      <list-item v-if="province_flag" :item-height="40">
+        <item v-for="(item,index) in lists" :key="index">
+          <section slot="name" @click="selectProvince(item)">{{ item }}</section>
+        </item>
+      </list-item>
+
+      <list-item v-if="!province_flag" :item-height="40">
+        <item v-for="(item,index) in cityList" :key="index">
+          <section slot="name" @click="selectCity(item)">{{ item }}</section>
+        </item>
+      </list-item>
+    </h-content>
+  </h-view>
+</template>
+<script>
+export default {
+  name: 'Location',
+  data () {
+    return {
+      flag: false,
+      province_flag: true,
+      province: '请选择省',
+      places: '江苏省-徐州市',
+      lists: ['北京省', '浙江省', '四川省'],
+      cityList: ['北京', '成都', '上海', '广州'],
+    }
+  },
+  computed: {},
+  watch: {},
+  methods:
+ {
+   switchCity () {
+
+   },
+   changeStyle (val) {
+     console.log(val)
+     if (val === 1) {
+       this.flag = false
+     } else {
+       this.flag = true
+     }
+   },
+   selectProvince (val) {
+     this.province = val
+     this.flag = !this.flag
+     this.province_flag = false
+   },
+   selectCity (val) {
+     this.hlsPopup.showConfirm({
+       title: '提示',
+       content: `是否切换到${val}城市？`,
+       onConfirm: (data) => {
+         console.log(data)
+         if (data) {
+           this.places = this.province + '-' + val
+         }
+       },
+     })
+   },
+ },
+}
+</script>
+<style lang='less' scoped>
+#location {
+    .h-header-btn {
+      img {
+        width: 16px;
+        height: 16px;
+        margin-left: 4px;
+      }
+
+      span {
+        font-family: PingFangSC-Semibold;
+        margin-left: 16px;
+        font-size: 17px;
+        letter-spacing: 0.61px;
+        line-height: 24px;
+      }
+    }
+    .current-location {
+        height: 34px;
+        width: 100%;
+        display: flex;
+        flex-direction: rwo;
+        align-items: center;
+        background: rgba(0, 70, 156, 0.1);
+        .img-box {
+            width: 16px;
+            height: 16px;
+            margin-left: 17px;
+            background: rgba(0, 70, 156, 0.1);
+            img {
+                width: 100%;
+                height: 100%;
+            }
+
+        }
+        .select-location {
+            margin-left: 17px
+        }
+        p {
+            // width: 56px;
+            font-family: PingFangSC-Semibold;
+            font-size: 14px;
+            color: #00469C;
+            letter-spacing: 0;
+            margin-left: 6px;
+            font-weight: 700
+            }
+    }
+    .place {
+            font-family: PingFangSC-Semibold;
+            font-weight: 600;
+            font-size: 14px;
+            color: #383F45;
+            letter-spacing: 0;
+    }
+    .relocation {
+            font-family: PingFangSC-Regular;
+            font-size: 13px;
+            color: #00469C;
+            letter-spacing: 0;
+            div {
+                display: flex;
+                flex-direction: row;
+                align-items: center;
+                img {
+                width: 16px;
+                height: 16px;
+                margin-right: 6px
+            }
+            }
+
+    }
+    .hls-list-item {
+        margin-bottom: 0
+    }
+    .provinces {
+        background: #fff;
+        width: 100%;
+        height: 40px;
+        display: flex;
+        flex-direction: row;
+        border-bottom: 1px solid #fafafa;
+        p {
+            height: 40px;
+            line-height: 40px;
+            margin-left: 15px;
+            font-family: PingFangSC-Semibold;
+            font-size: 14px;
+            color: rgba(56,63,69,0.60);
+            letter-spacing: 0.5px;
+
+        }
+        .styles {
+            font-family: PingFangSC-Semibold;
+            border-bottom: 2px solid blue;
+            color: #383F45;
+            font-weight: 600;
+        }
+    }
+}
+</style>

src/router/index.js

@@ -2,7 +2,7 @@
  * @Description: In User Settings Edit
  * @Author: your name
  * @Date: 2019-09-24 12:34:06
- * @LastEditTime: 2019-10-10 14:35:58
+ * @LastEditTime: 2019-10-11 09:47:23
  * @LastEditors: Please set LastEditors
  */
 import Vue from 'vue'
@@ -16,6 +16,8 @@ import FingerLogin from '@/pages/finger-login'
 import Home from '@/pages/home'
 import Tab from '@/pages/tab'
 import HomePage from '@/pages/home/home-page'
+// 定位
+import Location from '@/pages/home/location'
 
 // 我的
 import MyInfo from '@/pages/myInfo/my-info'
@@ -86,6 +88,12 @@ export default new Router({
       name: 'HomePage',
       meta: {keepAlive: true},
     },
+    {
+      path: '/location',
+      component: Location,
+      name: 'Location',
+      meta: {keepAlive: false},
+    },
 
     {
       path: '/guide',