完成供需详情页面 调整样式

pages/supply/supply_detail.vue

@@ -1,5 +1,124 @@
 <template>
-    <div>
-        123
+  <div class="content">
+    <div class="title">
+      {{ title }}
     </div>
-</template>
+    <div class="details">
+      <div class="div">
+        <span class="label">详情：</span>
+        <span>{{ details }}</span>
+      </div>
+      <div class="div">
+        <span class="label">类型：</span>
+        <span>{{ type }}</span>
+      </div>
+      <div class="div">
+        <span class="label">图片：</span>
+        <div class="flex">
+          <img :src="img" />
+          <img :src="img" />
+          <img :src="img" />
+        </div>
+      </div>
+      <div class="div">
+        <span class="label">发布时间：</span>
+        <span>{{ time }}</span>
+      </div>
+    </div>
+    <div class="info">
+      <div class="title">企业信息</div>
+      <div class="div">
+        <span class="label">企业名称：</span>
+        <span>{{ info.name }}</span>
+      </div>
+      <div class="div">
+        <span class="label">统一社会信用代码：</span>
+        <span>{{ info.code }}</span>
+      </div>
+      <div class="div">
+        <span class="label">联系电话：</span>
+        <span>{{ info.tel }}</span>
+      </div>
+    </div>
+    <foot-tabs></foot-tabs>
+  </div>
+</template>
+
+
+<script>
+export default {
+  data() {
+    return {
+      title: "视频监控产品及解决方案",
+      details: "视频监控产品及解决方案，寻求合作企业",
+      type: "需求",
+      img: "/static/supply/u1779.png",
+      time: "2021-09-07 14:25:36",
+      info: {
+        name: "双盈电子科技有限公司",
+        code: "914403000758402311",
+        tel: "18109523468",
+      },
+    };
+  },
+};
+</script>
+<style lang="scss" scoped>
+.flex,
+.div {
+  display: flex;
+}
+.content {
+  font-size: 30rpx;
+  .title {
+    margin: 4% 5%;
+  }
+  .details {
+    font-size: 25rpx;
+    width: 90%;
+    margin: 0 2%;
+    padding: 2% 3%;
+    border-radius: 50rpx;
+    box-shadow: rgba(100, 100, 111, 0.2) 0rpx 14rpx 50rpx 14rpx;
+    img {
+      width: 180rpx;
+      height: 150rpx;
+      border-radius: 30rpx;
+      margin: 0 2%;
+    }
+    .div {
+      margin: 5% 0;
+    }
+    .label {
+      display: inline-block;
+      width: 150rpx;
+      vertical-align: middle;
+      font-weight: 100;
+    }
+  }
+  .info {
+    font-size: 25rpx;
+    width: 90%;
+    margin: 4% 2%;
+    padding: 2% 3%;
+    border-radius: 40rpx;
+    box-shadow: rgba(100, 100, 111, 0.2) 0rpx 14rpx 50rpx 14rpx;
+    .title{
+        margin: 4% 0;
+        font-size: 30rpx;
+    }
+    .div {
+      display: flex;
+      align-items: center;
+      margin: 5% 0;
+    }
+    .label {
+      display: inline-block;
+      width: 120rpx;
+      vertical-align: middle;
+      font-weight: 100;
+      margin-right: 100rpx;
+    }
+  }
+}
+</style>