组件

components/areaSelect.vue

@@ -0,0 +1,272 @@
+<template>
+  <div class="me_search">
+    <!-- 选择大区 -->
+    <ul class="area_sel big_area">
+      <li
+        v-for="(item,index) in areaone"
+        :key="index"
+        @click="addClass(index)"
+        :class="{active:index==current}"
+      >{{ item.text }}</li>
+    </ul>
+    <!-- end：选择大区 -->
+
+    <!-- 选择省份 -->
+    <ul class="area_sel area_province">
+      <li
+        v-for="(item,index) in areatwo"
+        :key="index"
+        @click="choose(index)"
+        :class="current2[index]"
+      >{{ item.text }}</li>
+    </ul>
+    <!-- end：选择省份 -->
+
+    <button>确定</button>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      current: '0',
+      current2: [],
+      areaone: [
+        {
+          text: '全国',
+          province: [
+            { text: '全部' },
+            { text: '北京' },
+            { text: 'assa' },
+            { text: '上海' },
+            { text: '湖北' },
+            { text: '河南' },
+            { text: '山西' },
+            { text: '新疆' },
+            { text: '各小区' }
+          ]
+        },
+        {
+          text: '西北',
+          province: [
+            { text: '全部' },
+            { text: '北京' },
+            { text: '2' },
+            { text: '上海' },
+            { text: '湖北' },
+            { text: '河南' },
+            { text: '山西' },
+            { text: '新疆' },
+            { text: '各小区' }
+          ]
+        },
+        {
+          text: '西南',
+          province: [
+            { text: '全部' },
+            { text: '北京' },
+            { text: '3' },
+            { text: '上海' },
+            { text: '湖北' },
+            { text: '河南' },
+            { text: '山西' },
+            { text: '新疆' },
+            { text: '各小区' }
+          ]
+        },
+        {
+          text: '东北',
+          province: [
+            { text: '全部' },
+            { text: '北京' },
+            { text: '4' },
+            { text: '上海' },
+            { text: '湖北' },
+            { text: '河南' },
+            { text: '山西' },
+            { text: '新疆' },
+            { text: '各小区' }
+          ]
+        },
+        {
+          text: '东南',
+          province: [
+            { text: '全部' },
+            { text: '北京' },
+            { text: '5' },
+            { text: '上海' },
+            { text: '湖北' },
+            { text: '河南' },
+            { text: '山西' },
+            { text: '新疆' },
+            { text: '各小区' }
+          ]
+        },
+        {
+          text: '华中',
+          province: [
+            { text: '全部' },
+            { text: '北京' },
+            { text: '6' },
+            { text: '上海' },
+            { text: '湖北' },
+            { text: '河南' },
+            { text: '山西' },
+            { text: '新疆' },
+            { text: '各小区' }
+          ]
+        },
+        {
+          text: '华北',
+          province: [
+            { text: '全部' },
+            { text: '北京' },
+            { text: '天津' },
+            { text: '7' },
+            { text: '湖北' },
+            { text: '河南' },
+            { text: '山西' },
+            { text: '新疆' },
+            { text: '各小区' }
+          ]
+        },
+        {
+          text: '华南',
+          province: [
+            { text: '全部' },
+            { text: '北京' },
+            { text: '天津' },
+            { text: '8' },
+            { text: '湖北' },
+            { text: '河南' },
+            { text: '山西' },
+            { text: '新疆' },
+            { text: '各小区' }
+          ]
+        }
+      ],
+      areatwo: [],
+      a: true //true为为全部选中
+    }
+  },
+  created() {
+    this.areatwo = this.areaone[0].province
+  },
+  methods: {
+    addClass: function(index) {
+      this.areatwo = this.areaone[index].province
+      this.current = index
+    },
+    choose: function(index) {
+      var current = this.current2
+      //判断点击的是否为全选
+      if (index == 0) {
+        //判断是否以及全选
+        console.log(this.a)
+        if (this.a) {
+          //如果未全部选中则全部选中
+          for (var i = 0; i < this.areatwo.length; i++) {
+            current[i] = ['active']
+          }
+          this.a = false
+        } else {
+          //如果已经全部选中则初始化
+          current = []
+          this.a = true
+        }
+      } else {      
+        if (current[index] == 'active') {
+          //如果当前数组的这个值为已选中
+          current[index] = ['']
+        } else {
+          //如果未选中
+          current[index] = ['active']
+        }
+        var k = 1;//设置初始值
+        for (var i = 0; i < current.length; i++) {
+          //循环整个数组看看有多少已选中
+          if (current[i] == 'active') {
+            //赋值k的值为已选中的数量
+            k++
+          }
+        }
+        if (k == current.length) {
+          //如果k（已选中的数量）等于数组全部的数量
+          this.a = false
+          //设置当前已经全部选中
+        }
+      }
+      if(current.length>0){
+         this.$set(this.current2, current)
+      }else{
+         this.current2=current
+      }
+    }
+  }
+}
+</script>
+  
+<style>
+.me_search {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  padding-bottom: 50px;
+}
+.me_search button {
+  width: 100%;
+  height: 50px;
+  line-height: 50px;
+  position: absolute;
+  background-color: #ff5c5c;
+  text-align: center;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  color: #fff;
+  font-size: 18px;
+  border: 0;
+  outline: none;
+}
+.big_area {
+  width: 30%;
+  background-color: #efefef;
+  text-align: center;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+}
+.big_area li {
+  color: #7a7a7a;
+}
+.area_province {
+  width: 100%;
+  background-color: #fff;
+  text-align: left;
+  padding-left: 30%;
+  height: 100%;
+  padding-right: 1.5rem;
+}
+.area_province li {
+  padding-left: 30px;
+  background-image: url('../static/img/icon_select.png');
+  background-position: right center;
+  background-size: 20px;
+  background-repeat: no-repeat;
+}
+.area_sel li {
+  line-height: 60px;
+  transition: 0.2s;
+}
+.big_area li.active {
+  background-color: #fff;
+  color: #ff5c5c;
+  transition: 0.2s;
+}
+.area_province li.active {
+  color: #ff5c5c;
+  background-image: url('../static/img/icon_selected.png');
+  transition: 0.2s;
+}
+</style>

components/btnSubmit.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="btn_sub">
+    <button> 提交</button>
+  </div>
+</template>
+<script>
+export default{
+  data(){
+    return {
+      msg:''
+    }
+  },
+  methods:{
+    addClass: function(index){
+      this.current=index;   // 不能要引号
+    }
+  },
+}
+</script>
+  
+<style>
+.btn_sub{
+  width: 100%;
+  padding: 0 1.5rem;
+}
+.btn_sub button{
+  border-radius: 0.4rem;
+  height: 4rem;
+  line-height: 4rem;
+  text-align: center;
+  width: 100%;
+  background-color: #ff5c5c;
+  outline: none;
+  border: 0;
+  color: #fff;
+  font-size: 1.6rem;
+}
+</style>

components/gcxm.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="item-gcxm">
+    <h3 class="title-item">{{ title }}</h3>
+    <p class="content-item">{{ description }}</p>
+    <div>
+    <ul class="info-tag">
+      <li v-for="(tag,index) of tags" :key='index'>
+        {{ tag.text }}
+      </li> 
+    </ul>
+    <span class="time"> {{ updateTime }} </span>
+    </div>
+  </div>
+</template>
+<script>
+export default{
+  data(){
+    return {
+      title: 'title---项目名称占位，项目名称占位占位占位占位。',
+      description: 'content---项目概况，项目详情，1~3行预览。项目概况，项目详情，1~3行预览。项目概况，项目详情，1~3行预览。项目概况，项目详情，1~3行预览。',
+      updateTime:'2312132',
+      tags: [
+        { text: '2000万' },
+        { text: '行业分类' }
+      ]
+    }
+  }
+}
+</script>
+  
+<style>
+  .item-gcxm{
+    margin-bottom: 10px;
+  }
+  .title-item{
+    font-size: 18px;
+    color: #202020;
+    font-weight: bold;
+    margin-bottom: 15px;
+  }
+  .content-item{
+    margin-bottom: 10px;
+  }
+  .info-tag li{
+    font-size: 12px;
+    display: inline-block;
+    padding: 0 8px;
+    margin-right: 10px;
+    background-color: #f2f2fa;
+    height: 20px;
+    line-height: 20px;
+    border-radius: 4px;
+  }
+  .content-item{
+    overflow: hidden;
+  }
+</style>

components/industrySelect.vue

@@ -0,0 +1,102 @@
+<template>
+  <div class="all_industry">
+    <!-- 选择大区 -->
+    <ul class="industry_sel">
+      <li
+        v-for="(item,index) in industry"
+        :key="index"
+        @click="addClass(index)"
+        :class="{active:index==current}"
+      >{{ item.text }}</li>
+    </ul>
+    <!-- end：选择大区 -->
+
+    <button>确定</button>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      industry: [
+        { text: '全部' },
+        { text: '电力' },
+        { text: '石油石化天然气' },
+        { text: '市政交通运输' },
+        { text: '五金建材机械' },
+        { text: '农林水利环保' },
+        { text: '冶金矿产重工' },
+        { text: '医药化工' },
+        { text: '电子电器通信' },
+        { text: '轻工食品日用品' },
+        { text: '办公展览停车场建筑' },
+        { text: '商业酒店住宅建筑' },
+        { text: '医疗文教娱乐建筑' },
+        { text: '工业仓储行政建筑' },
+        { text: '绿化生态旅游' },
+        { text: '其他' },
+      ],
+    }
+  },
+ methods:{
+   addClass: function(index){
+     this.current=index;
+   }
+ }
+}
+</script>
+  
+<style>
+
+.all_industry button {
+  width: 100%;
+  height: 50px;
+  line-height: 50px;
+  position: fixed;
+  background-color: #ff5c5c;
+  text-align: center;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  color: #fff;
+  font-size: 18px;
+  border: 0;
+  outline: none;
+}
+.industry_sel {
+  width: 100%;
+  background-color: #fff;
+  text-align: left;
+  height: 100%;
+  padding: 0 1.5rem;
+  padding-bottom: 50px;
+}
+.industry_sel li {
+  color: #202020;
+  line-height: 60px;
+  transition: 0.2s;
+  position: relative;
+  background-image: url('../static/img/icon_select.png');
+  background-position: right center;
+  background-size: 20px;
+  background-repeat: no-repeat;
+}
+.industry_sel li.active {
+  color: #ff5c5c;
+  background-image: url('../static/img/icon_selected.png');
+  transition: 0.2s;
+}
+.industry_sel li::after{
+ position: absolute;
+ content: '';
+ display: block;
+ height: 1px;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ background-color: #f0f0f0;
+ margin-right: -1.5rem;
+}
+
+
+</style>

components/meSearch.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="me_search">
+    <input type="text" placeholder="请输入搜索内容">
+  </div>
+</template>
+<script>
+export default{
+ 
+}
+</script>
+  
+<style>
+.me_search{
+  width: 100%;
+  height: 4rem;
+  line-height: 4rem;
+  padding: 0 1.5rem;
+  background-color: #F8F9FA;
+  
+}
+.me_search input{
+  width: 100%;
+  height: 3rem;
+  border-radius: 50px;
+  border: none;
+  padding: 0 16px;
+  background-image: url(/_nuxt/static/img/search.png);
+  background-repeat: no-repeat;
+  background-position: 15px center;
+  background-size: 16px;
+  padding-left: 40px;
+  color: #202020; 
+  outline: none;
+}
+</style>

components/title.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="title_diy">
+    <h3>{{ heads }}</h3>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      head: ''
+    }
+  },
+  props: {
+    //第二种方式
+    heads: {
+      type: String,
+      default: function() {
+        return ''
+      }
+    }
+  },
+  created() {
+  
+  },
+  watch: {}
+}
+</script>
+  
+<style>
+.title_diy {
+  width: 100%;
+  height: 6rem;
+  line-height: 6rem;
+  position: relative;
+}
+.title_diy::after {
+  position: absolute;
+  height: 1px;
+  background-color: #f0f0f0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin-left: -1.5rem;
+  margin-right: -1.5rem;
+}
+</style>

components/titles.vue

@@ -0,0 +1,31 @@
+<template>
+  <section class="head">
+    <img src="~/static/img/back.png" alt @click="go">
+    <span>{{tname}}</span>
+  </section>
+</template>
+<script>
+export default {
+  props: {
+    tname: String, //定义传值的类型<br>
+    required: true
+  },
+  methods: {
+    go(e) {
+      this.$router.go(-1)
+    }
+  },
+  watch: {}
+}
+</script>
+<style>
+.head img {
+  float: left;
+  padding-left: 6px;
+}
+.head span {
+  width: auto;
+  padding: 0;
+  padding-right: 20px;
+}
+</style>

components/toBuy.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="to_buy">
+    <p>1月</p>
+    <p><span>￥</span>399</p>
+    <del>666</del>
+  </div>
+</template>
+<script>
+export default{
+  data(){
+    return {
+      msg:''
+    }
+  }
+}
+</script>
+  
+<style>
+
+</style>