feature:调整仪器详情页样式，完成技术服务模块前端开发

src/router.js

@@ -45,12 +45,18 @@ let router = new Router({
         },
       ],
     },
-    // 技术服务
+    // 技术服务详情
     {
       path: "/technical/service",
       name: "service",
       component: () => import("./views/technical/service.vue"),
     },
+    // 技术服务
+    {
+      path: "/technical/service-detail",
+      name: "service-detail",
+      component: () => import("./views/technical/service-detail.vue"),
+    },
     // 中心平台
     {
       path: "/technical-plat/index",

src/views/equipment/components/eqpt-details.vue

@@ -224,6 +224,7 @@
         width: 0;
         height: 100%;
         padding: 10px 10px 10px 20px;
+        box-shadow: none;
         .mod-title {
           margin-top: 15px;
           padding-left: 17px;

src/views/equipment/details.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="container" style="background: #f8f9fd">
+  <div class="details-container">
     <section class="section-container">
       <div class="detail-intro">
         <div class="img-wrap">
@@ -142,7 +142,7 @@
         </div>
       </div>
       <div class="tab-container def-tabs-wrap mb20">
-        <el-tabs class="mt10 mb10" v-model="activeName" type="card">
+        <el-tabs class="mb10" v-model="activeName" type="card">
           <el-tab-pane label="仪器信息" name="info">
             <EqptDetails
               ref="eqptRef"
@@ -245,12 +245,17 @@
 </script>
 
 <style lang="scss" scoped>
+  .details-container {
+    background: #f8f9fd;
+    padding: 40px 0 20px;
+  }
   .section-container {
     width: 1200px;
     margin: 0 auto;
-    background: #fff;
     .detail-intro {
       display: flex;
+      background: #fff;
+      padding: 16px;
       .img-wrap {
         width: 420px;
         height: 420px;
@@ -359,6 +364,10 @@
         }
       }
     }
+    .tab-container {
+      margin-top: 40px;
+      background: #fff;
+    }
   }
   div {
     color: #333;

src/views/technical-plat/components/disclaimer.vue

@@ -0,0 +1,124 @@
+<template>
+  <div>
+    <el-dialog
+      title="免责声明"
+      :visible.sync="state.isShowDialog"
+      :close-on-click-modal="false"
+      @close="onCancel"
+      width="1200px"
+    >
+      <el-card
+        shadow="hover"
+        :body-style="{ padding: '20px', height: '500px' }"
+      >
+        <div
+          v-if="state.isShowDialog"
+          @scroll="handleScroll"
+          style="width: 100%; height: 100%; overflow: auto"
+        >
+          <p>免责声明免责声明免责声明免责声明免责声明</p>
+          <p>免责声明免责声明免责声明免责声明免责声明</p>
+          <p>免责声明免责声明免责声明免责声明免责声明</p>
+          <p>免责声明免责声明免责声明免责声明免责声明</p>
+          <p>免责声明免责声明免责声明免责声明免责声明</p>
+          <p>免责声明免责声明免责声明免责声明免责声明</p>
+          <p>免责声明免责声明免责声明免责声明免责声明</p>
+          <p>免责声明免责声明免责声明免责声明免责声明</p>
+          <p>免责声明免责声明免责声明免责声明免责声明</p>
+          <p>免责声明免责声明免责声明免责声明免责声明</p>
+          <p>免责声明免责声明免责声明免责声明免责声明</p>
+          <p>免责声明免责声明免责声明免责声明免责声明</p>
+          <p>免责声明免责声明免责声明免责声明免责声明</p>
+          <p>免责声明免责声明免责声明免责声明免责声明</p>
+          <p>免责声明免责声明免责声明免责声明免责声明</p>
+          <p>免责声明免责声明免责声明免责声明免责声明</p>
+          <p>免责声明免责声明免责声明免责声明免责声明</p>
+          <p>免责声明免责声明免责声明免责声明免责声明</p>
+          <p>免责声明免责声明免责声明免责声明免责声明</p>
+          <p>免责声明免责声明免责声明免责声明免责声明</p>
+          <p>免责声明免责声明免责声明免责声明免责声明</p>
+          <p>免责声明免责声明免责声明免责声明免责声明</p>
+          <p>免责声明免责声明免责声明免责声明免责声明</p>
+          <p>免责声明免责声明免责声明免责声明免责声明</p>
+          <p>免责声明免责声明免责声明免责声明免责声明</p>
+          <p>免责声明免责声明免责声明免责声明免责声明</p>
+          <p>免责声明免责声明免责声明免责声明免责声明</p>
+          <p>免责声明免责声明免责声明免责声明免责声明</p>
+        </div>
+      </el-card>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button
+            :disabled="disabledBtn"
+            type="primary"
+            @click="subAdd"
+            size="small"
+          >
+            我已完成阅读并同意上述内容
+          </el-button>
+        </span>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script lang="ts">
+  export default {
+    name: "disclaimer",
+
+    data() {
+      return {
+        disabledBtn: true,
+        state: {
+          isShowDialog: false,
+        },
+      };
+    },
+    methods: {
+      async openDialog() {
+        this.state.isShowDialog = true;
+      },
+      handleScroll(e) {
+        console.log(e);
+        // 判断是否滚动到底部
+        if (
+          e.target.scrollTop + e.target.clientHeight >=
+          e.target.scrollHeight
+        ) {
+          console.log("已经滚动到底部");
+          this.disabledBtn = false;
+        }
+      },
+      subAdd() {
+        this.$emit("agreeDisclaimer");
+        this.onCancel();
+      },
+      onCancel() {
+        this.state.isShowDialog = false;
+        this.disabledBtn = true;
+      },
+    },
+  };
+</script>
+
+<style lang="scss" scoped>
+  :deep(.el-dialog__body) {
+    padding-top: 10px;
+  }
+  .appoint-section {
+    min-height: 450px;
+  }
+  .exper-info-list {
+    h3 {
+      color: #2c405e;
+      font-weight: bold;
+    }
+    .label {
+      width: 100px;
+    }
+  }
+  .step-tit {
+    color: #2c405e;
+    font-weight: bold;
+  }
+</style>

src/views/technical-plat/components/edit.vue

@@ -0,0 +1,230 @@
+<template>
+  <div>
+    <el-dialog
+      :title="title"
+      :visible.sync="state.isShowDialog"
+      :close-on-click-modal="false"
+      width="1200px"
+    >
+      <el-form
+        ref="editFormRef"
+        :model="form"
+        label-width="100px"
+        size="mini"
+        label-position="top"
+        :rules="rules"
+        closeable
+      >
+        <div class="form-group">
+          <el-row :gutter="20" class="form-row-wrap">
+            <el-col :span="12">
+              <el-form-item label="预约项目" prop="userContact">
+                <div class="flex">
+                  <!-- <el-input
+                        placeholder="请输入"
+                        class="w100"
+                        maxlength="11"
+                        v-model="form.field1"
+                      />
+                      <el-button type="primary">选择</el-button> -->
+                  <el-select
+                    style="width: 100%"
+                    placeholder="请选择"
+                    v-model="form.field1"
+                    value-key=""
+                    clearable
+                    filterable
+                  >
+                    <el-option
+                      label="肿瘤研究课题"
+                      value="肿瘤研究课题"
+                    ></el-option>
+                  </el-select>
+                </div>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="预约费用" prop="userContact">
+                <div class="flex">
+                  <el-input
+                    placeholder="请输入"
+                    class="w100"
+                    maxlength="11"
+                    v-model="form.field2"
+                  />
+                </div>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="人员姓名" prop="userContact">
+                <div class="flex">
+                  <el-select
+                    style="width: 100%"
+                    placeholder="请选择"
+                    v-model="form.field3"
+                    value-key=""
+                    clearable
+                    filterable
+                    @change=""
+                  >
+                    <el-option label="省自然" value="省自然"></el-option>
+                    <el-option label="国自然" value="国自然"></el-option>
+                  </el-select>
+                </div>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="联系方式" prop="userContact">
+                <div class="flex">
+                  <el-input
+                    placeholder="请输入"
+                    class="w100"
+                    maxlength="11"
+                    v-model="form.field4"
+                  />
+                </div>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="预约时间" prop="userContact">
+                <div class="flex">
+                  <el-input
+                    placeholder="请输入"
+                    class="w100"
+                    maxlength="11"
+                    v-model="form.field5"
+                  />
+                </div>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="所属课题组" prop="userContact">
+                <div class="flex">
+                  <el-input
+                    placeholder="请输入"
+                    class="w100"
+                    maxlength="11"
+                    v-model="form.field6"
+                  />
+                </div>
+              </el-form-item>
+            </el-col>
+            <el-col :span="24">
+              <el-form-item label="预约说明" prop="userContact">
+                <div class="flex">
+                  <el-input
+                    type="textarea"
+                    :rows="3"
+                    placeholder="请输入"
+                    class="w100"
+                    maxlength="11"
+                    v-model="form.field14"
+                  />
+                </div>
+              </el-form-item>
+            </el-col>
+            <!-- END -->
+          </el-row>
+        </div>
+        <div>
+          <el-checkbox v-model="checked3">
+            <el-button type="text">
+              我已完整阅读并同意 《预约须知》的内容
+            </el-button>
+          </el-checkbox>
+        </div>
+        <!-- END -->
+      </el-form>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="onCancel" size="small">取 消</el-button>
+          <el-button type="primary" @click="subAdd" size="small">
+            提 交
+          </el-button>
+        </span>
+      </template>
+    </el-dialog>
+    <disclaimer
+      ref="disclaimerRef"
+      @agreeDisclaimer="handleAgreeDisclaimer"
+    ></disclaimer>
+  </div>
+</template>
+
+<script lang="ts">
+  import disclaimer from "./disclaimer.vue";
+  export default {
+    name: "FrontendWebTest",
+    components: {
+      disclaimer,
+    },
+    data() {
+      return {
+        title: "技术平台-预约申请",
+        form: {
+          field1: "",
+          field2: "",
+          field3: "",
+          field4: "",
+          field5: "",
+          field6: "",
+          field7: "",
+          field8: "",
+          field9: "",
+          field10: "",
+          field11: "",
+          field12: "",
+          field13: "",
+          field14: "",
+        },
+        checked3: false,
+        state: {
+          isShowDialog: false,
+          loading: false,
+        },
+        rules: {
+          startTime: [{ required: true, message: "不能为空", trigger: "blur" }],
+        },
+      };
+    },
+    methods: {
+      async openDialog() {
+        this.state.isShowDialog = true;
+      },
+      onCancel() {
+        this.$refs.editFormRef.clearValidate();
+        this.$refs.editFormRef.resetFields();
+        this.state.isShowDialog = false;
+      },
+      subAdd() {
+        this.$refs.disclaimerRef.openDialog();
+      },
+      handleAgreeDisclaimer() {
+        this.$message.success("提交成功");
+        this.state.isShowDialog = false;
+      },
+    },
+  };
+</script>
+
+<style lang="scss" scoped>
+  :deep(.el-dialog__body) {
+    padding-top: 10px;
+  }
+  .appoint-section {
+    min-height: 450px;
+  }
+  .exper-info-list {
+    h3 {
+      color: #2c405e;
+      font-weight: bold;
+    }
+    .label {
+      width: 100px;
+    }
+  }
+  .step-tit {
+    color: #2c405e;
+    font-weight: bold;
+  }
+</style>

src/views/technical-plat/index.vue

@@ -61,35 +61,11 @@
                   <div class="info-txt">
                     <div class="btns flex">
                       <div class="btn btn1">详情</div>
-                      <div class="btn btn2" @click="joinNeedList(v.id)">
-                        预约
-                      </div>
+                      <div class="btn btn2" @click="handleAppoint(v)">预约</div>
                     </div>
                   </div>
                 </div>
               </div>
-              <!-- <div class="appoint-item">
-                <div class="mb20">
-                  <el-button
-                    type="primary"
-                    size="default"
-                    v-if="v.instStatus == '10' && v.isAppointment == '10'"
-                    @click="handleAppoint(v)"
-                  >
-                    使用预约
-                  </el-button>
-                </div>
-                <div>
-                  <el-button
-                    type="primary"
-                    plain
-                    size="default"
-                    @click="linkToDetails(v)"
-                  >
-                    查看详情
-                  </el-button>
-                </div>
-              </div> -->
             </div>
           </div>
           <div class="pagination">
@@ -106,6 +82,7 @@
           </div>
         </div>
       </section>
+      <appointEdit ref="appointRef"></appointEdit>
     </div>
   </div>
 </template>
@@ -115,8 +92,10 @@
   import { getToken } from "@/utils/auth";
   import { Loading } from "element-ui";
   import { getInstrList, getInstNameEnCount } from "@/api/instr/index";
+  import appointEdit from "./components/edit.vue";
   export default {
     name: "equipment",
+    components: { appointEdit },
     data() {
       return {
         platFilterExpand: false,
@@ -180,17 +159,8 @@
     },
 
     methods: {
-      joinNeedList(id) {
-        this.needList.push(id);
-        this.needList = [...new Set(this.needList)];
-      },
       handleAppoint() {
         this.$refs.appointRef.openDialog();
-        // const token = getToken();
-        // if (!token) {
-        //   return this.$router.push("/login?redirect=/appointment/equipment");
-        // }
-        // this.$refs.appointRef.openDialog(row);
       },
       // 获取型号数量
       async getInstNameEnCountData() {

src/views/technical/components/disclaimer.vue

@@ -0,0 +1,124 @@
+<template>
+  <div>
+    <el-dialog
+      title="免责声明"
+      :visible.sync="state.isShowDialog"
+      :close-on-click-modal="false"
+      @close="onCancel"
+      width="1200px"
+    >
+      <el-card
+        shadow="hover"
+        :body-style="{ padding: '20px', height: '500px' }"
+      >
+        <div
+          v-if="state.isShowDialog"
+          @scroll="handleScroll"
+          style="width: 100%; height: 100%; overflow: auto"
+        >
+          <p>免责声明免责声明免责声明免责声明免责声明</p>
+          <p>免责声明免责声明免责声明免责声明免责声明</p>
+          <p>免责声明免责声明免责声明免责声明免责声明</p>
+          <p>免责声明免责声明免责声明免责声明免责声明</p>
+          <p>免责声明免责声明免责声明免责声明免责声明</p>
+          <p>免责声明免责声明免责声明免责声明免责声明</p>
+          <p>免责声明免责声明免责声明免责声明免责声明</p>
+          <p>免责声明免责声明免责声明免责声明免责声明</p>
+          <p>免责声明免责声明免责声明免责声明免责声明</p>
+          <p>免责声明免责声明免责声明免责声明免责声明</p>
+          <p>免责声明免责声明免责声明免责声明免责声明</p>
+          <p>免责声明免责声明免责声明免责声明免责声明</p>
+          <p>免责声明免责声明免责声明免责声明免责声明</p>
+          <p>免责声明免责声明免责声明免责声明免责声明</p>
+          <p>免责声明免责声明免责声明免责声明免责声明</p>
+          <p>免责声明免责声明免责声明免责声明免责声明</p>
+          <p>免责声明免责声明免责声明免责声明免责声明</p>
+          <p>免责声明免责声明免责声明免责声明免责声明</p>
+          <p>免责声明免责声明免责声明免责声明免责声明</p>
+          <p>免责声明免责声明免责声明免责声明免责声明</p>
+          <p>免责声明免责声明免责声明免责声明免责声明</p>
+          <p>免责声明免责声明免责声明免责声明免责声明</p>
+          <p>免责声明免责声明免责声明免责声明免责声明</p>
+          <p>免责声明免责声明免责声明免责声明免责声明</p>
+          <p>免责声明免责声明免责声明免责声明免责声明</p>
+          <p>免责声明免责声明免责声明免责声明免责声明</p>
+          <p>免责声明免责声明免责声明免责声明免责声明</p>
+          <p>免责声明免责声明免责声明免责声明免责声明</p>
+        </div>
+      </el-card>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button
+            :disabled="disabledBtn"
+            type="primary"
+            @click="subAdd"
+            size="small"
+          >
+            我已完成阅读并同意上述内容
+          </el-button>
+        </span>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script lang="ts">
+  export default {
+    name: "disclaimer",
+
+    data() {
+      return {
+        disabledBtn: true,
+        state: {
+          isShowDialog: false,
+        },
+      };
+    },
+    methods: {
+      async openDialog() {
+        this.state.isShowDialog = true;
+      },
+      handleScroll(e) {
+        console.log(e);
+        // 判断是否滚动到底部
+        if (
+          e.target.scrollTop + e.target.clientHeight >=
+          e.target.scrollHeight
+        ) {
+          console.log("已经滚动到底部");
+          this.disabledBtn = false;
+        }
+      },
+      subAdd() {
+        this.$emit("agreeDisclaimer");
+        this.onCancel();
+      },
+      onCancel() {
+        this.state.isShowDialog = false;
+        this.disabledBtn = true;
+      },
+    },
+  };
+</script>
+
+<style lang="scss" scoped>
+  :deep(.el-dialog__body) {
+    padding-top: 10px;
+  }
+  .appoint-section {
+    min-height: 450px;
+  }
+  .exper-info-list {
+    h3 {
+      color: #2c405e;
+      font-weight: bold;
+    }
+    .label {
+      width: 100px;
+    }
+  }
+  .step-tit {
+    color: #2c405e;
+    font-weight: bold;
+  }
+</style>

src/views/technical/components/edit.vue

@@ -375,6 +375,10 @@
         </span>
       </template>
     </el-dialog>
+    <disclaimer
+      ref="disclaimerRef"
+      @agreeDisclaimer="handleAgreeDisclaimer"
+    ></disclaimer>
   </div>
 </template>
 
@@ -383,6 +387,7 @@
   import form2 from "./form2.vue";
   import form3 from "./form3.vue";
   import form4 from "./form4.vue";
+  import disclaimer from "./disclaimer.vue";
   export default {
     name: "FrontendWebTest",
     components: {
@@ -390,6 +395,7 @@
       form2,
       form3,
       form4,
+      disclaimer,
     },
     data() {
       return {
@@ -485,6 +491,9 @@
         this.state.isShowDialog = false;
       },
       subAdd() {
+        this.$refs.disclaimerRef.openDialog();
+      },
+      handleAgreeDisclaimer() {
         this.$message.success("提交成功");
         this.step = 1;
         this.state.isShowDialog = false;

src/views/technical/service-detail.vue

@@ -0,0 +1,327 @@
+<template>
+  <div class="details-container">
+    <section class="section-container">
+      <div class="detail-intro">
+        <div class="img-wrap">
+          <img :src="instrDetails.instPicture" alt="" style="width: 100%" />
+        </div>
+        <div class="detail-info">
+          <h3 class="instr-name">{{ instrDetails.instName }}</h3>
+          <div class="info-wrap">
+            <ul>
+              <li>
+                <div class="msg">
+                  <span class="num">
+                    {{ instrDetails.focusPeopleNum }}
+                  </span>
+                  次
+                </div>
+                <em>预约次数</em>
+              </li>
+              <li>
+                <div class="msg">
+                  <span class="num">
+                    {{ instrDetails.usePeopleNum }}
+                  </span>
+                  h
+                </div>
+                <em>预约时长</em>
+              </li>
+              <li>
+                <div class="msg">
+                  <span class="num">
+                    {{ instrDetails.useTimesNum }}
+                  </span>
+                  人
+                </div>
+                <em>当前预约</em>
+              </li>
+              <li>
+                <div class="msg">
+                  <span class="num">
+                    {{ instrDetails.useDuration }}
+                  </span>
+                  人
+                </div>
+                <em>可用预约</em>
+              </li>
+            </ul>
+          </div>
+          <div class="text-item">
+            <div class="info-item">
+              <div class="title">平台状态</div>
+              <div class="txt">
+                <el-tag type="primary" size="normal">可预约</el-tag>
+                <!-- <el-tag type="danger" size="normal">已约满</el-tag> -->
+              </div>
+            </div>
+            <div class="info-item">
+              <div class="title">平台状态</div>
+              <div class="txt">
+                <div class="sf-box">
+                  <div class="d1">机时</div>
+                  <div class="d2">
+                    {{ chargeConfig.appointTimePrice }}元/{{
+                      chargeConfig.appointTimePriceMinute
+                    }}分钟
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="info-item">
+              <div class="title">放置地点</div>
+              <div class="txt">
+                <span :title="instrDetails.placeAddress">
+                  {{ instrDetails.placeAddress || "-" }}
+                  <span v-if="instrDetails.laboratoryName">
+                    ({{ instrDetails.laboratoryName }})
+                  </span>
+                </span>
+              </div>
+            </div>
+            <div class="info-item">
+              <div class="title">预约类型</div>
+              <div class="txt">
+                <el-radio-group v-model="radio1">
+                  <el-radio-button class="mr10" label="10天"></el-radio-button>
+                  <el-radio-button class="mr10" label="15天"></el-radio-button>
+                  <el-radio-button class="mr10" label="30天"></el-radio-button>
+                  <el-radio-button class="mr10" label="60天"></el-radio-button>
+                </el-radio-group>
+              </div>
+            </div>
+          </div>
+          <div class="appoint-btn-wrap">
+            <el-button
+              type="primary"
+              size="default"
+              v-if="
+                instrDetails.instStatus == '10' &&
+                instrDetails.isAppointment == '10'
+              "
+              @click="handleAppoint"
+            >
+              使用预约
+            </el-button>
+            <!-- <el-button
+              type="success"
+              size="default"
+              v-if="
+                instrDetails.instStatus == '10' &&
+                instrDetails.isSampleDelivery == '10'
+              "
+              @click=""
+            >
+              送样预约
+            </el-button> -->
+          </div>
+        </div>
+      </div>
+      <div class="tab-container def-tabs-wrap mb20">
+        <el-tabs class="mb10" v-model="activeName" type="card">
+          <el-tab-pane label="基本介绍" name="info"></el-tab-pane>
+          <el-tab-pane label="仪器列表" name="appoint"></el-tab-pane>
+          <el-tab-pane label="检测项目" name="file"></el-tab-pane>
+          <el-tab-pane label="附件下载" name="notice"></el-tab-pane>
+          <el-tab-pane label="使用说明" name="notice"></el-tab-pane>
+        </el-tabs>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script>
+  import to from "await-to-js";
+  import { getToken } from "@/utils/auth";
+  import { getInstrDetails, getChargeCfg } from "@/api/instr/index";
+  export default {
+    name: "equipmentDetails",
+    components: {},
+    data() {
+      return {
+        radio1: "",
+        activeName: "info",
+        instrDetails: {},
+        chargeConfig: {},
+      };
+    },
+    created() {},
+
+    mounted() {
+      this.getInstrDetails();
+    },
+
+    methods: {
+      handleAppoint() {
+        const token = getToken();
+        if (!token) {
+          return this.$router.push(
+            "/login?redirect=/appointment/equipment-details?id=" +
+              this.instrDetails.id
+          );
+        }
+        this.$refs.appointRef.openDialog(this.instrDetails);
+      },
+      async getInstrDetails() {
+        const id = this.$route.query.id * 1;
+        if (!id)
+          return this.$message({
+            message: "缺少必要查询参数",
+            type: "warning",
+          });
+        const [err, res] = await to(getInstrDetails({ id }));
+        if (err) return;
+        if (res.code == 200) {
+          this.instrDetails = res.data;
+          this.getChargeCfg(id);
+        }
+      },
+      async getChargeCfg(id) {
+        const [err, res] = await to(getChargeCfg({ id }));
+        if (err) return;
+        if (res.code == 200) {
+          this.chargeConfig = res.data;
+        }
+      },
+    },
+  };
+</script>
+
+<style lang="scss" scoped>
+  .details-container {
+    background: #f8f9fd;
+    padding: 40px 0 20px;
+  }
+  .section-container {
+    width: 1200px;
+    margin: 0 auto;
+    .detail-intro {
+      background: #fff;
+      display: flex;
+      padding: 16px;
+      .img-wrap {
+        width: 420px;
+        height: 420px;
+        background: #f3f6fb;
+        border: 1px solid #e1e4ee;
+        -webkit-box-sizing: border-box;
+        box-sizing: border-box;
+        float: left;
+        position: relative;
+        overflow: hidden;
+      }
+      .detail-info {
+        margin-left: 28px;
+        .instr-name {
+          font-size: 20px;
+          font-weight: 700;
+          line-height: 26px;
+          padding: 10px 0 16px;
+        }
+        .info-wrap {
+          width: 483px;
+          height: 72px;
+          background: #f8f9fb;
+          border: 1px solid #e8ecf2;
+          border-radius: 4px;
+          margin-bottom: 16px;
+          color: #666;
+          li {
+            position: relative;
+            float: left;
+            width: 25%;
+            text-align: center;
+            font-size: 12px;
+            line-height: 16px;
+            position: relative;
+            .msg {
+              line-height: 18px;
+              font-weight: 700;
+              font-size: 14px;
+              padding: 16px 0 5px;
+              .num {
+                font-size: 20px;
+              }
+            }
+            &:nth-of-type(2)::before,
+            &:nth-of-type(3)::before,
+            &:nth-of-type(4)::before {
+              display: block;
+              content: "";
+              position: absolute;
+              top: 19px;
+              left: 0;
+              width: 1px;
+              height: 36px;
+              background: #e4e9f2;
+            }
+          }
+        }
+        .text-item {
+          min-height: 218px;
+          height: auto;
+          box-sizing: border-box;
+          // padding-bottom: 47px;
+          .info-item {
+            width: 100%;
+            min-height: 28px;
+            font-size: 14px;
+            line-height: 28px;
+            margin-bottom: 16px;
+          }
+          .title {
+            width: 74px;
+            float: left;
+            font-weight: 700;
+            color: #666;
+          }
+          .txt {
+            margin-left: 74px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            // max-width: 410px;
+            padding-right: 40px;
+            .sf-box {
+              display: inline-block;
+              border: 1px solid blue;
+              width: 150px;
+              .d1 {
+                display: inline-block;
+                background-color: dodgerblue;
+                padding: 0 8px 0 8px;
+                color: white;
+                border-right: 1px solid blue;
+              }
+              .d2 {
+                display: inline-block;
+                color: blue;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                vertical-align: bottom;
+                width: 100px;
+                padding-left: 6px;
+              }
+            }
+          }
+        }
+      }
+    }
+    .tab-container {
+      margin-top: 40px;
+      background: #fff;
+    }
+  }
+  div {
+    color: #333;
+  }
+  :deep(.el-tabs__content) {
+    padding: 10px;
+  }
+  :deep(.el-radio-button__inner) {
+    padding: 12px 40px;
+    border-radius: 0 !important;
+    border-left: 1px solid #dcdfe6;
+  }
+</style>

src/views/technical/service.vue

@@ -9,7 +9,7 @@
           </div>
           <el-empty
             v-if="serviceDataList.length == 0"
-            description="很抱歉，没有找到相关的仪器~"
+            description="很抱歉，没有找到相关的技术服务~"
           ></el-empty>
           <div v-else>
             <div class="flex list-header">
@@ -36,7 +36,7 @@
                   <div class="info-txt">
                     <div>{{ v.plat }} - {{ v.user }}</div>
                     <div class="btns flex">
-                      <div class="btn btn1">详情</div>
+                      <div class="btn btn1" @click="openDetail(v)">详情</div>
                       <div class="btn btn2" @click="joinNeedList(v.id)">
                         加入需求
                       </div>
@@ -83,19 +83,19 @@
         </div>
       </section>
     </div>
-    <appoint ref="appointRef"></appoint>
+    <appointEdit ref="appointRef" ></appointEdit>
   </div>
 </template>
 
-<script name="service">
+<script name="service-detail">
   import to from "await-to-js";
   import { getToken } from "@/utils/auth";
   import { Loading } from "element-ui";
   import { getInstrList, getInstNameEnCount } from "@/api/instr/index";
-  import appoint from "./components/edit.vue";
+  import appointEdit from "./components/edit.vue";
   export default {
     name: "equipment",
-    components: { appoint },
+    components: { appointEdit },
     data() {
       return {
         platFilterExpand: false,
@@ -160,6 +160,10 @@
     },
 
     methods: {
+      openDetail(row) {
+        console.log(row);
+        this.$router.push("/technical/service-detail");
+      },
       joinNeedList(id) {
         this.needList.push(id);
         this.needList = [...new Set(this.needList)];