工程项目

assets/a.scss

@@ -97,7 +97,7 @@ body {
         background: #fff;
         
         input {
-            width              : 75%;
+            width              : 73%;
             height             : $a*60px;
             background-color   : rgba(240, 243, 245, 1);
             border-radius      : $a*30px;

assets/details.scss

@@ -119,7 +119,6 @@
             }
 
             .img {
-                //background     : url(../static/img/tag.png) no-repeat left;
                 border-radius    : 0px 0px 10px 0px;
                 background       : rgba(255, 186, 186, 1);
                 width            : 118px*0.5+10px;

assets/select.scss

@@ -3,8 +3,9 @@ $h:88px;
 .select {
     height       : 44px;
     border-bottom: 1px solid #EFEFEF;
-    line-height: 44px;
-    background: #fff;
+    line-height  : 44px;
+    background   : #fff;
+
     .region {
         height    : 100%;
         width     : 49%;
@@ -66,11 +67,11 @@ $h:88px;
     }
 
     #category {
-        position: fixed;
+        position        : fixed;
         top             : $h;
         left            : 0;
         height          : 250px;
-        width: 100%;
+        width           : 100%;
         background-color: #fff;
         z-index         : 50;
 
@@ -80,4 +81,39 @@ $h:88px;
             text-align : center;
         }
     }
+}
+
+.select2 {
+    @extend .select;
+
+    .region {
+        width: 32%;
+
+    }
+
+    .categorys {
+        @extend #category;
+        display                : -webkit-flex;
+        justify-content        : space-between;
+        -webkit-justify-content: space-between;
+        flex-wrap              : wrap;
+        justify-content        : inherit;
+        padding                : 10px;
+        height                 : auto;
+
+        li {
+            display    : table-cell;
+            border     : 1px solid rgba(223, 223, 223, 1);
+            width      : calc(100% / 3 - 5px);
+            font-size  : 14px;
+            font-family: PingFang-SC-Medium;
+            font-weight: 500;
+            margin     : 0 7px 7px 0;
+        }
+
+        li:nth-child(3n) {
+            margin: 0;
+        }
+
+    }
 }

components/select2.vue

@@ -0,0 +1,76 @@
+<template>
+  <div class="select2">
+    <div class="region" @click="regions(0)">
+      地区
+      <img src="../static/img/open.png" v-if="!region[0]" alt>
+      <img src="../static/img/hide.png" v-else alt>
+    </div>
+    <div class="region" @click="regions(1)">
+      行业
+      <img src="../static/img/open.png" v-if="!region[1]" alt>
+      <img src="../static/img/hide.png" v-else alt>
+    </div>
+    <div class="region" @click="regions(2)">
+      阶段
+      <img src="../static/img/open.png" v-if="!region[2]" alt>
+      <img src="../static/img/hide.png" v-else alt>
+    </div>
+    <div id="region" v-if="region[0]">
+      <ul class="left">
+        <li>全国</li>
+        <li>华北</li>
+        <li>华北</li>
+        <li>华北</li>
+        <li>华北</li>
+        <li>华北</li>
+        <li>东北</li>
+      </ul>
+      <ul class="right">
+        <li>全部</li>
+        <li>辽宁省</li>
+        <li>辽宁省</li>
+        <li>辽宁省</li>
+        <li>辽宁省</li>
+        <li>辽宁省</li>
+        <li>辽宁省</li>
+        <li>辽宁省</li>
+      </ul>
+    </div>
+    <ul  class="categorys" v-if="region[1]">
+      <li>办公展览停车场</li>
+      <li>办公展览停车场</li>
+      <li>办公展览停车场</li>
+      <li>办公展览停车场</li>
+      <li>办公展览停车场</li>
+      <li>办公展览停车场</li>
+    </ul>
+    <ul  class="categorys" v-if="region[2]">
+      <li>工程筹备</li>
+      <li>工程筹备</li>
+      <li>工程筹备</li>
+      <li>工程筹备</li>
+      <li>工程筹备</li>
+      <li>工程筹备</li>
+    </ul>
+    <div class="bg" v-if="region[0]||region[1]||region[2]"></div>
+  </div>
+</template>
+<script>
+import '~/assets/select.scss'
+export default {
+  data() {
+    return {
+      region: [false, false,false],
+     
+    }
+  },
+  created: function() {},
+  methods: {
+    regions(e) {
+      const region = [false, false,false]
+      region[e] = true
+      this.region = region
+    }
+  }
+}
+</script>

pages/project.vue

@@ -1,18 +0,0 @@
-<template>
-  <section class="container">
-    <div>
-      dddsdsd 
-      
-    </div>
-  </section>
-</template>
-
-<script>
-export default {
- 
-}
-</script>
-
-<style>
-
-</style>

pages/project/details.vue

@@ -0,0 +1,204 @@
+<template>
+  <section class="detaile">
+    <div class="head">
+      <img src="~/static/img/back.png" alt>
+      <span>项目详情</span>
+      <img src="~/static/img/NotCollection.png" alt>
+      <img src="~/static/img/share.png" alt>
+    </div>
+    <div class="name">
+      <div class="title">
+        <p>
+          沈阳联通2019-2021年消防设备设施维护维
+          修采购项目招标公告
+        </p>
+        <span class="time">2019-03-02</span>
+        <span class="address">
+          深圳市南山区深南大道腾讯大厦188室。溢出字符占
+          位占位占位。
+        </span>
+      </div>
+    </div>
+    <div class="content">
+      <div class="title">
+        <img src="~/static/img/title.png" alt>
+        <span class="con">招标内容</span>
+        <span class="time">隐藏</span>
+      </div>
+      <table class="list">
+        <tbody>
+          <tr>
+            <td class="t">设备名称:</td>
+            <td class="con">电风扇</td>
+          </tr>
+          <tr>
+            <td class="t">设备名称:</td>
+            <td class="con">电风扇</td>
+          </tr>
+          <tr>
+            <td class="t">设备名称:</td>
+            <td class="con">电风扇</td>
+          </tr>
+          <tr>
+            <td class="t">设备名称:</td>
+            <td
+              class="con"
+            >56465465565656撒打算das6dasd56asdas56dasaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaas5dasdasdsa</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <div class="content">
+      <div class="title">
+        <img src="~/static/img/title.png" alt>
+        <span class="con">项目联系人</span>
+        <span class="time">隐藏</span>
+      </div>
+      <table class="list">
+        <tbody class="mt40">
+          <tr>
+            <td colspan="2">
+              <p class="img">甲方</p>
+            </td>
+          </tr>
+          <tr>
+            <td class="t">单位:</td>
+            <td class="con">电风扇</td>
+          </tr>
+          <tr>
+            <td class="t">设备名称:</td>
+            <td class="con">电风扇</td>
+          </tr>
+          <tr>
+            <td class="t">设备名称:</td>
+            <td class="con">电风扇</td>
+          </tr>
+        </tbody>
+        <tbody class="mt40">
+          <tr>
+            <td class="t">单位:</td>
+            <td class="con">电风扇</td>
+          </tr>
+          <tr>
+            <td class="t">设备名称:</td>
+            <td class="con">电风扇</td>
+          </tr>
+          <tr>
+            <td class="t">设备名称:</td>
+            <td class="con">电风扇</td>
+          </tr>
+        </tbody>
+
+        <tbody class="mt40">
+          <tr>
+            <td colspan="2">
+              <p class="img">甲方</p>
+            </td>
+          </tr>
+          <tr>
+            <td class="t">单位:</td>
+            <td class="con">电风扇</td>
+          </tr>
+          <tr>
+            <td class="t">设备名称:</td>
+            <td class="con">电风扇</td>
+          </tr>
+          <tr>
+            <td class="t">设备名称:</td>
+            <td class="con">电风扇</td>
+          </tr>
+        </tbody>
+        <tbody class="mt40">
+          <tr>
+            <td class="t">单位:</td>
+            <td class="con">电风扇</td>
+          </tr>
+          <tr>
+            <td class="t">设备名称:</td>
+            <td class="con">电风扇</td>
+          </tr>
+          <tr>
+            <td class="t">设备名称:</td>
+            <td class="con">电风扇</td>
+          </tr>
+        </tbody>
+
+        <tbody class="mt40">
+          <tr>
+            <td colspan="2">
+              <p class="img">甲方</p>
+            </td>
+          </tr>
+          <tr>
+            <td class="t">单位:</td>
+            <td class="con">电风扇</td>
+          </tr>
+          <tr>
+            <td class="t">设备名称:</td>
+            <td class="con">电风扇</td>
+          </tr>
+          <tr>
+            <td class="t">设备名称:</td>
+            <td class="con">电风扇</td>
+          </tr>
+        </tbody>
+        <tbody class="mt40">
+          <tr>
+            <td class="t">单位:</td>
+            <td class="con">电风扇</td>
+          </tr>
+          <tr>
+            <td class="t">设备名称:</td>
+            <td class="con">电风扇</td>
+          </tr>
+          <tr>
+            <td class="t">设备名称:</td>
+            <td class="con">电风扇</td>
+          </tr>
+        </tbody>
+        <tbody class="mt40">
+          <tr>
+            <td colspan="2">
+              <p class="img">设计院</p>
+            </td>
+          </tr>
+          <tr>
+            <td class="t">单位:</td>
+            <td class="con">电风扇</td>
+          </tr>
+          <tr>
+            <td class="t">设备名称:</td>
+            <td class="con">电风扇</td>
+          </tr>
+          <tr>
+            <td class="t">设备名称:</td>
+            <td class="con">电风扇</td>
+          </tr>
+        </tbody>
+        <tbody class="mt40">
+          <tr>
+            <td class="t">单位:</td>
+            <td class="con">电风扇</td>
+          </tr>
+          <tr>
+            <td class="t">设备名称:</td>
+            <td class="con">电风扇</td>
+          </tr>
+          <tr>
+            <td class="t">设备名称:</td>
+            <td class="con">电风扇</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <div class="money">查看详情</div>
+  </section>
+</template>
+
+<script>
+import '~/assets/details.scss'
+export default {}
+</script>
+
+<style>
+</style>

pages/project/index.vue

@@ -0,0 +1,118 @@
+<template>
+  <section class="bid">
+    <div class="search">
+      <input type="text" placeholder="请输入搜索内容">
+      <span>我的订阅</span>
+    </div>
+    <sel/>
+    <ul class="bidlist">
+      <nuxt-link to="/project/details">
+        <li>
+          <h2>喷口内径测量规招标公告</h2>
+          <p class="p1">
+            喷口内径测量规招标公告。信息来源：中国招标投标公共服务
+            平台。招标信息概览占位占位占位占位，占位占位。招标信息
+            概览占位占位占位占位，占位占位。
+          </p>
+          <p class="p2">
+            <span class="label">2000万</span>
+            <span class="time">2019-05-20</span>
+          </p>
+        </li>
+      </nuxt-link>
+      <nuxt-link to="/project/details">
+        <li>
+          <h2>喷口内径测量规招标公告</h2>
+          <p class="p1">
+            喷口内径测量规招标公告。信息来源：中国招标投标公共服务
+            平台。招标信息概览占位占位占位占位，占位占位。招标信息
+            概览占位占位占位占位，占位占位。
+          </p>
+          <p class="p2">
+            <span class="label">2000万</span>
+            <span class="time">2019-05-20</span>
+          </p>
+        </li>
+      </nuxt-link>
+      <nuxt-link to="/project/details">
+        <li>
+          <h2>喷口内径测量规招标公告</h2>
+          <p class="p1">
+            喷口内径测量规招标公告。信息来源：中国招标投标公共服务
+            平台。招标信息概览占位占位占位占位，占位占位。招标信息
+            概览占位占位占位占位，占位占位。
+          </p>
+          <p class="p2">
+            <span class="label">2000万</span>
+            <span class="time">2019-05-20</span>
+          </p>
+        </li>
+      </nuxt-link>
+      <nuxt-link to="/project/details">
+        <li>
+          <h2>喷口内径测量规招标公告</h2>
+          <p class="p1">
+            喷口内径测量规招标公告。信息来源：中国招标投标公共服务
+            平台。招标信息概览占位占位占位占位，占位占位。招标信息
+            概览占位占位占位占位，占位占位。
+          </p>
+          <p class="p2">
+            <span class="label">2000万</span>
+            <span class="time">2019-05-20</span>
+          </p>
+        </li>
+      </nuxt-link>
+      <nuxt-link to="/project/details">
+        <li>
+          <h2>喷口内径测量规招标公告</h2>
+          <p class="p1">
+            喷口内径测量规招标公告。信息来源：中国招标投标公共服务
+            平台。招标信息概览占位占位占位占位，占位占位。招标信息
+            概览占位占位占位占位，占位占位。
+          </p>
+          <p class="p2">
+            <span class="label">2000万</span>
+            <span class="time">2019-05-20</span>
+          </p>
+        </li>
+      </nuxt-link>
+    </ul>
+  </section>
+</template>
+
+<script>
+import sel from '~/components/select2.vue'
+export default {
+  components: {
+    sel
+  },
+  data() {
+    return {
+      author: '微信公众号 jinkey-love'
+    }
+  },
+  methods: {
+    addTodo(e) {
+      this.$store.commit('todos/add', e.target.value)
+      e.target.value = ''
+    }
+  }
+}
+</script>
+
+<style>
+.bid {
+  height: 100%;
+}
+body div {
+  height: 100%;
+}
+.p1 {
+  display: -webkit-box;
+  /* -webkit-box-orient: vertical; */
+  /*! autoprefixer: ignore next */
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  overflow: hidden;
+}
+</style>