提交

src/router/index.ts

@@ -134,6 +134,16 @@ const router = new VueRouter({
           component: () => import("../views/info/add.vue"),
           meta: { title: "infoAdd" }
         },
+        {
+          path: "/info/supplyDetail",
+          component: () => import("../views/info/details/supplyDetail.vue"),
+          meta: { title: "supplyDetail" }
+        },
+        {
+          path: "/info/buyDetail",
+          component: () => import("../views/info/details/buyDetail.vue"),
+          meta: { title: "buyDetail" }
+        },
         {
           path: "/news",
           component: () => import("../views/news/index.vue"),

src/views/info/details/buy.vue

@@ -1,10 +1,96 @@
+<!--我要买-->
 <template>
-  <div>
-    需求详情
+  <div class="bg-F5">
+    <div class="container">
+      <div class="partTitle"><span class="orangeLine"></span>服务能力</div>
+      <div class="formDiv">
+        <el-form class="form" ref="form" :model="form" label-width="110px">
+          <el-form-item label="商品类别：">
+            <el-select v-model="form.type" placeholder="请选择商品类别">
+              <el-option label="区域一" value="shanghai"></el-option>
+              <el-option label="区域二" value="beijing"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="需求概要：">
+            <el-input v-model="form.xqgy"></el-input>
+          </el-form-item>
+          <el-form-item label="需求详情：">
+            <el-input v-model="form.xqxq" type="textarea"></el-input>
+          </el-form-item>
+          <el-form-item label="联系人：">
+            <el-input v-model="form.name"></el-input>
+          </el-form-item>
+          <el-form-item label="联系电话：">
+            <el-input v-model="form.tel"></el-input>
+          </el-form-item>
+        </el-form>
+        <div class="line"></div>
+        <div class="tc">
+          <el-button class="submitBtn" type="primary" @click="onSubmit"
+            >提交</el-button
+          >
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 <script lang="ts">
 import { Component, Vue, Watch } from "vue-property-decorator";
-@Component
-export default class extends Vue {}
+export default {
+  name: "app",
+  components: {},
+  data() {
+    return {
+      form: {
+        name: "",
+        tel: "",
+        type: "",
+        xqxq: "",
+        xqgy: ""
+      }
+    };
+  },
+  methods: {}
+};
 </script>
+<style lang="scss" scoped>
+.partTitle {
+  padding: 3rem 0 2rem 0;
+  font-size: 1.8rem;
+  color: #333;
+  .orangeLine {
+    display: inline-block;
+    height: 1.8rem;
+    width: 0.3rem;
+    background: #fd5522;
+    vertical-align: middle;
+    border-radius: 0.15rem;
+    margin-right: 1rem;
+  }
+}
+.formDiv {
+  background: #fff;
+  text-align: center;
+  padding: 4rem 0 3rem 0;
+  .form {
+    width: 70%;
+    box-sizing: border-box;
+    display: inline-block;
+    text-align: left;
+    .line {
+      width: 100%;
+      height: 0.1rem;
+      background: #e5e5e5;
+      margin-top: 4rem;
+      margin-bottom: 3rem;
+    }
+    .submitBtn {
+      background: #fd5522;
+      color: #fff;
+    }
+  }
+}
+.tc {
+  text-align: center;
+}
+</style>

src/views/info/details/supplyDetail.vue

@@ -0,0 +1,141 @@
+<!-- 供应信息详情 -->
+<template>
+  <div class="bg-F5">
+    <div class="container">
+      <el-row class="xqDiv" :gutter="20">
+        <el-col :span="10">
+          <div class="bigImgDiv">
+            <img src="@assets/productDetails.jpg" alt="" />
+          </div>
+          <div class="imgDetailDiv">
+            <el-carousel height="80px" :autoplay="false">
+              <el-carousel-item v-for="item in 3" :key="item">
+                <div class="imgDetail">
+                  <div class="imgDiv">
+                    <img src="@assets/productDetails.jpg" alt="" />
+                  </div>
+                  <div class="imgDiv">
+                    <img src="@assets/productDetails.jpg" alt="" />
+                  </div>
+                  <div class="imgDiv">
+                    <img src="@assets/productDetails.jpg" alt="" />
+                  </div>
+                  <div class="imgDiv">
+                    <img src="@assets/productDetails.jpg" alt="" />
+                  </div>
+                </div>
+              </el-carousel-item>
+            </el-carousel>
+          </div>
+        </el-col>
+        <el-col :span="14">
+          <div class="title">
+            <span class="type">供应</span>
+            <span class="name">钢制储物柜现货</span>
+          </div>
+          <div class="info">生产厂家：洛阳科飞亚钢制家具有限公司</div>
+          <div class="info">联&nbsp;系&nbsp;人：任先生</div>
+          <div class="info">发布时间：2020-01-20</div>
+          <div class="info">联系电话：12345612312</div>
+        </el-col>
+      </el-row>
+      <div class="infoDiv">
+        <div class="info">
+          <div class="tit">供应概要:</div>
+          <div class="con">钢制储物柜现货</div>
+        </div>
+        <div class="info">
+          <div class="tit">供应详情:</div>
+          <div class="con">
+            钢制储物柜现货钢制储物柜现货钢制储物柜现货钢制储物柜现货钢制储物柜现货钢制储物柜现货钢制储物柜现货钢制储物柜现货钢制储物柜现货钢制储物柜现货钢制储物柜现货钢制储物柜现货钢制储物柜现货钢制储物柜现货钢制储物柜现货钢制储物柜现货钢制储物柜现货
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { Component, Vue, Watch } from "vue-property-decorator";
+@Component
+export default class extends Vue {}
+</script>
+<style lang="scss" scoped>
+.container {
+  background: #fff;
+  margin-top: 2rem;
+  margin-bottom: 4rem;
+  .xqDiv {
+    border-bottom: 0.1rem solid #e5e5e5;
+    padding: 3rem 3rem 2rem 2rem;
+    box-sizing: border-box;
+    .bigImgDiv {
+      img {
+        width: 100%;
+        border-radius: 0.5rem;
+      }
+    }
+    .imgDetailDiv {
+      .imgDetail {
+        width: 100%;
+        overflow: hidden;
+        .imgDiv {
+          width: 22.7%;
+          float: left;
+          margin-right: 3%;
+          &:last-child {
+            margin-right: 0;
+          }
+          img {
+            width: 100%;
+          }
+        }
+      }
+    }
+    .title {
+      height: 4rem;
+      line-height: 4rem;
+      .type {
+        display: inline-block;
+        height: 2.2rem;
+        line-height: 2.2rem;
+        font-size: 1.4rem;
+        color: #fff;
+        border-radius: 0.4rem;
+        padding: 0 0.6rem;
+        background: #fd5522;
+      }
+      .name {
+        font-size: 1.8rem;
+        color: #333;
+        margin-left: 1.6rem;
+      }
+    }
+    .info {
+      height: 4rem;
+      line-height: 4rem;
+      font-size: 1.4rem;
+      color: #666;
+    }
+  }
+  .infoDiv {
+    padding: 3rem 3rem 4rem 3rem;
+    box-sizing: border-box;
+    .info {
+      font-size: 1.4rem;
+      overflow: hidden;
+      .tit {
+        width: 7%;
+        float: left;
+        line-height: 2.4rem;
+        color: #333;
+      }
+      .con {
+        width: 93%;
+        float: left;
+        line-height: 2.4rem;
+        color: #666;
+      }
+    }
+  }
+}
+</style>

src/views/info/index.vue

@@ -11,7 +11,7 @@
               <el-tab-pane label="求购信息" name="first">
                 <ul class="listUl">
                   <li v-for="item in 10" :key="item">
-                    <router-link to="/">
+                    <router-link to="/info/buyDetail">
                       <span class="name">信息信息信信息信息信息息11111</span
                       ><span class="date">2010-01-01发布</span></router-link
                     >
@@ -21,17 +21,18 @@
               <el-tab-pane label="供应信息" name="second">
                 <ul class="listUl">
                   <li v-for="item in 10" :key="item">
-                    <router-link to="/"
-                      >信息信息信信息信息信息息333333<span class="date"
-                        >2010-01-01发布</span
-                      ></router-link
+                    <router-link to="/info/supplyDetail">
+                      <span class="name">信息信息信信息信息信息息11111</span
+                      ><span class="date">2010-01-01发布</span></router-link
                     >
                   </li>
                 </ul>
               </el-tab-pane>
             </el-tabs>
             <div class="btnDiv">
-              <el-button class="buyBtn" size="mini">我要买</el-button>
+              <router-link to="/info/buy">
+                <el-button class="buyBtn" size="mini">我要买</el-button>
+              </router-link>
               <el-button class="buyBtn" size="mini">我要卖</el-button>
             </div>
           </div>