招标列表

assets/a.scss

@@ -1,12 +1,16 @@
 @charset "utf-8";
 //font 
-$table:120px*0.5;
+$table:150px*0.5;
 $a    :0.5;
+$z1   :10;
+$z2   :50;
+$z3   :100;
 
 body {
     // background    : yellow;
     padding-bottom   : $table;
-    padding          : 0 $a*20px;
+    font-size        : 1.5rem;
+    height           : 100%;
 
     .table {
         position        : fixed;
@@ -16,12 +20,14 @@ body {
         height          : $table;
         margin          : 0;
         background-color: #fff;
+        padding-top     : 15px;
 
         ul {
             width : 100%;
             height: 100%;
+
             li:nth-child(1) {
-                background-image: url(../static/img/ztb.png)  ;
+                background-image: url(../static/img/ztb.png);
             }
 
             li:nth-child(2) {
@@ -37,27 +43,32 @@ body {
             }
 
             li {
-                width     : 24%;
-                height    : 100%;
-                display   : inline-block;
-                text-align: center;
-                background-size:30px !important;
-                background:no-repeat center top;
+                width          : 24%;
+                height         : 100%;
+                display        : inline-block;
+                text-align     : center;
+                background-size: 30px !important;
+                background     : no-repeat center top;
+
                 span {
                     margin-top: 33px;
                     display   : inline-block;
                 }
             }
 
-            
+
         }
 
     }
 
+    div {
+        height: 100%;
+    }
+
     .search {
         width  : 100%;
         height : 44px;
-        padding: 7px;
+        padding: 7px 17px;
 
         input {
             width        : 75%;
@@ -76,6 +87,57 @@ body {
         }
 
     }
+
+    .bidlist {
+        overflow-y      : auto;
+        padding-bottom  : 75px;
+        background-color: #f8f9fa;
+        height          : 90%;
+
+        li {
+            height          : 302px*$a;
+            margin-bottom   : 18px*$a;
+            background-color: #fff;
+            padding         : 35px*$a;
+
+            h2 {
+                height     : 31px*$a;
+                font-size  : 32px*$a;
+                font-family: PingFang-SC-Bold;
+                font-weight: bold;
+                color      : rgba(32, 32, 32, 1);
+                line-height: 31px*$a;
+            }
+
+            .p1 {
+                margin     : 20px*$a 0;
+                font-size  : 26px*$a;
+                font-family: PingFang-SC-Medium;
+                font-weight: 500;
+                color      : rgba(122, 122, 122, 1);
+            }
+        }
+
+
+
+    }
+
+    .label {
+
+        background   : rgba(242, 242, 250, 1);
+        border-radius: 4px;
+        font-size    : 22px*$a;
+        font-family  : PingFang-SC-Regular;
+        font-weight  : 400;
+        color        : rgba(108, 116, 122, 1);
+        padding      : 5px;
+    }
+
+    .time {
+        float: right;
+        color: rgba(122, 122, 122, 1);
+    }
+
     * {
         margin : 0;
         padding: 0;

assets/select.scss

@@ -1,9 +1,82 @@
-.select{
-    height : 44px;
-    .region{
-        height: 100%;
-        width: 49%;
-        display:inline-block;
+$h:88px;
+
+.select {
+    height       : 44px;
+    border-bottom: 1px solid #EFEFEF;
+    line-height: 44px;
+    .region {
+        height    : 100%;
+        width     : 49%;
+        display   : inline-block;
         text-align: center;
+
+        img {
+            width      : 14px*0.8;
+            height     : 8px*0.8;
+            margin-left: 3px;
+        }
+    }
+
+    .bg {
+        position  : fixed;
+        height    : 100%;
+        width     : 100%;
+        background: rgba(0, 0, 0, 0.6);
+        left      : 0;
+        z-index   : 10;
+        top       : $h;
+    }
+
+    #region {
+        position   : fixed;
+        height     : 60%;
+        line-height: 44px;
+        width      : 100%;
+        left       : 0;
+        top        : $h;
+        z-index    : 50;
+        overflow   : hidden;
+
+        ul {
+            height    : 100%;
+            padding   : 15px 0;
+            overflow-y: auto;
+
+            li {
+                width      : 100%;
+                text-align : center;
+                height     : 100%*0.145;
+                line-height: 380%;
+            }
+        }
+
+        .left {
+            float     : left;
+            width     : 35%;
+            background: rgba(246, 246, 246, 1);
+            box-shadow: 0px -1px 0px 0px rgba(239, 239, 239, 1);
+        }
+
+        .right {
+            float           : right;
+            width           : 65%;
+            background-color: #fff;
+        }
+    }
+
+    #category {
+        position: fixed;
+        top             : $h;
+        left            : 0;
+        height          : 250px;
+        width: 100%;
+        background-color: #fff;
+        z-index         : 50;
+
+        li {
+            height     : 50px;
+            line-height: 50px;
+            text-align : center;
+        }
     }
 }

components/select.vue

@@ -2,12 +2,41 @@
   <div class="select">
     <div class="region">
       地区
-      <img src="../static/img/ztb.png" alt>
+      <img src="../static/img/open.png" alt>
     </div>
     <div class="region">
       类别
-      <img src="../static/img/ztb.png" alt>
+      <img src="../static/img/open.png" alt>
     </div>
+    <div id="region" v-if="region">
+      <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 id="category" v-if="category">
+      <li>535656</li>
+      <li>535656</li>
+      <li>535656</li>
+      <li>535656</li>
+      <li>535656</li>
+    </ul>
+    <div class="bg" v-if="region||category"></div>
   </div>
 </template>
 <script>
@@ -15,7 +44,8 @@ import '~/assets/select.scss'
 export default {
   data() {
     return {
-      author: '微信公众号 jinkey-love'
+      region: false,
+      category: false
     }
   },
   created: function() {},

layouts/default.vue

@@ -27,5 +27,6 @@ export default {
 <style>
 html{
   font-size: 10px;
+  height: 100%;
 }
 </style>

pages/index.vue

@@ -1,10 +1,72 @@
 <template>
-  <section>
+  <section class="bid">
     <div class="search">
-     <input type="text" >
+      <input type="text">
       <span>我的订阅</span>
     </div>
-    <sel />
+    <sel/>
+    <ul class="bidlist">
+      <li>
+        <h2>喷口内径测量规招标公告</h2>
+        <p class="p1">
+          喷口内径测量规招标公告。信息来源：中国招标投标公共服务
+          平台。招标信息概览占位占位占位占位，占位占位。招标信息
+          概览占位占位占位占位，占位占位。
+        </p>
+        <p class="p2">
+          <span class="label">2000万</span>
+          <span class="time">2019-05-20</span>
+        </p>
+      </li>
+      <li>
+        <h2>喷口内径测量规招标公告</h2>
+        <p class="p1">
+          喷口内径测量规招标公告。信息来源：中国招标投标公共服务
+          平台。招标信息概览占位占位占位占位，占位占位。招标信息
+          概览占位占位占位占位，占位占位。
+        </p>
+        <p class="p2">
+          <span class="label">2000万</span>
+          <span class="time">2019-05-20</span>
+        </p>
+      </li>
+      <li>
+        <h2>喷口内径测量规招标公告</h2>
+        <p class="p1">
+          喷口内径测量规招标公告。信息来源：中国招标投标公共服务
+          平台。招标信息概览占位占位占位占位，占位占位。招标信息
+          概览占位占位占位占位，占位占位。
+        </p>
+        <p class="p2">
+          <span class="label">2000万</span>
+          <span class="time">2019-05-20</span>
+        </p>
+      </li>
+      <li>
+        <h2>喷口内径测量规招标公告</h2>
+        <p class="p1">
+          喷口内径测量规招标公告。信息来源：中国招标投标公共服务
+          平台。招标信息概览占位占位占位占位，占位占位。招标信息
+          概览占位占位占位占位，占位占位。
+        </p>
+        <p class="p2">
+          <span class="label">2000万</span>
+          <span class="time">2019-05-20</span>
+        </p>
+      </li>
+      <li>
+        <h2>喷口内径测量规招标公告</h2>
+        <p class="p1">
+          喷口内径测量规招标公告。信息来源：中国招标投标公共服务
+          平台。招标信息概览占位占位占位占位，占位占位。招标信息
+          概览占位占位占位占位，占位占位。
+        </p>
+        <p class="p2">
+          <span class="label">2000万</span>
+          <span class="time">2019-05-20</span>
+        </p>
+      </li>
+    </ul>
   </section>
 </template>
 
@@ -14,9 +76,22 @@ 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%;
+}
 </style>