项目详情

assets/a.scss

@@ -95,7 +95,7 @@ body {
         height    : 44px;
         padding   : 7px 17px;
         background: #fff;
-
+        
         input {
             width              : 75%;
             height             : $a*60px;
@@ -108,6 +108,7 @@ body {
             background-size    : 20px;
             padding-left       : 40px;
             color              : rgba(153, 153, 153, 1);
+            outline:none;
         }
 
         span {
@@ -125,7 +126,7 @@ body {
         padding-bottom  : 75px;
         background-color: #f8f9fa;
         height          : 90%;
-      
+
 
         li {
             height          : 302px*$a;
@@ -149,6 +150,10 @@ body {
                 font-weight: 500;
                 color      : rgba(122, 122, 122, 1);
             }
+
+            .time {
+                float: right;
+            }
         }
 
 
@@ -167,7 +172,6 @@ body {
     }
 
     .time {
-        float: right;
         color: rgba(122, 122, 122, 1);
     }
 
@@ -183,4 +187,9 @@ body {
     box-sizing     : border-box;
 }
 
+table {
+    table-layout: fixed;
+    word-break  : break-all;
+}
+
 $colour :#009688 #5FB878 #393D49 #1E9FFF #F7B824 #FF5722

assets/details.scss

@@ -0,0 +1,156 @@
+.detaile {
+    background    : #fff;
+    padding-bottom: 75px;
+
+    .bor {
+        border-bottom: 1px solid rgba(240, 240, 240, 1);
+    }
+
+    .head {
+        padding   : 10px 10px;
+        text-align: center;
+
+        img {
+            height: 20px;
+        }
+
+        img:last-child {
+            margin-left: 5px;
+        }
+
+        span {
+            display     : inline-block;
+            width       : calc(100% - 76px);
+            padding-left: 40px;
+            font-size   : 18px;
+            font-family : PingFang-SC-Bold;
+            font-weight : bold;
+            color       : rgba(32, 32, 32, 1);
+        }
+    }
+
+    .name {
+        margin       : 20px 15px 13px;
+        height       : 347px*0.5;
+        background   : rgba(255, 255, 255, 1);
+        box-shadow   : 0px 4px 16px 0px rgba(0, 0, 0, 0.05);
+        border-radius: 4px;
+        padding      : 20px;
+
+        .title {
+            p {
+                font-size  : 16px;
+                font-family: PingFang-SC-Bold;
+                font-weight: bold;
+                color      : rgba(32, 32, 32, 1);
+            }
+
+            span {
+                padding-left   : 20px;
+                background     : no-repeat left center;
+                background-size: 12px;
+            }
+
+
+
+            .time {
+                background-image: url(../static/img/time.png);
+                display         : block;
+                height          : 30px;
+                line-height     : 30px;
+                @extend .bor;
+                margin-bottom: 10px;
+            }
+
+            .address {
+                color                : #7A7A7A;
+                background-position-y: 4px;
+                background-image     : url(../static/img/address.png);
+                display              : block;
+            }
+        }
+    }
+
+    .content {
+        margin: 20px;
+        @extend .bor;
+
+
+
+        .title {
+            height     : 50px;
+            line-height: 50px;
+
+            img {
+                width         : 15px;
+                margin-right  : 5px;
+                vertical-align: inherit;
+                margin-bottom : -2px;
+            }
+
+            .con {
+                font-size  : 16px;
+                font-family: PingFang-SC-Medium;
+                font-weight: 500;
+                color      : rgba(32, 32, 32, 1);
+            }
+
+            .time {
+                float: right;
+            }
+        }
+
+        .list {
+            width: 100%;
+
+            tr {
+                margin-bottom: 10px;
+                display      : block
+            }
+
+            .t {
+                color         : #7A7A7A;
+                min-width     : 70px;
+                vertical-align: text-top;
+            }
+
+            .con {
+                padding-left: 20px;
+            }
+
+            .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;
+                height           : 24px;
+                line-height      : 26px;
+                color            : rgba(255, 92, 92, 1);
+                font-size        : 14px;
+                margin-left      : -20px;
+                margin-bottom    : 10px;
+                text-align       : center;
+            }
+
+            .mt40 {
+                margin-bottom: 40px;
+                display      : block;
+            }
+        }
+    }
+
+    .money {
+        width      : 100%;
+        height     : 50px;
+        line-height: 50px;
+        background : rgba(255, 92, 92, 1);
+        font-size  : 18px;
+        font-family: PingFang-SC-Medium;
+        font-weight: 500;
+        color: #fff;
+        text-align: center;
+        position: fixed;
+        bottom: 0;
+        left: 0;
+    }
+}

components/table.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="table">
+  <div class="table" v-if="selected.length>0">
     <ul @click="addTodo">
       <nuxt-link to="/">
         <li :class="selected[0]">

layouts/default.vue

@@ -29,5 +29,4 @@ html {
   font-size: 10px;
   height: 100%;
 }
-
 </style>

pages/bidding.vue

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

pages/bidding/index.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/index.vue

@@ -6,66 +6,76 @@
     </div>
     <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>
+      <nuxt-link to="/bidding">
+        <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="/bidding">
+        <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="/bidding">
+        <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="/bidding">
+        <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="/bidding">
+        <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>
@@ -100,8 +110,8 @@ body div {
 .p1 {
   display: -webkit-box;
   /* -webkit-box-orient: vertical; */
- /*! autoprefixer: ignore next */
--webkit-box-orient: vertical;
+  /*! autoprefixer: ignore next */
+  -webkit-box-orient: vertical;
   -webkit-line-clamp: 3;
   overflow: hidden;
 }