创新服务详情

src/components/webBreadcrumb/index.vue

@@ -0,0 +1,45 @@
+<template>
+  <el-breadcrumb separator="/">
+    <el-breadcrumb-item>
+      <span class="_one pointer" @click="handleShow">{{
+        breadcrumbTitle.title
+      }}</span>
+    </el-breadcrumb-item>
+    <el-breadcrumb-item>
+      <span class="_two">{{ breadcrumbTitle.twoTitle }}</span>
+    </el-breadcrumb-item>
+  </el-breadcrumb>
+</template>
+
+<script setup>
+const props = defineProps({
+  isShow: {
+    required: true,
+    type: Boolean,
+  },
+  breadcrumbTitle: {
+    required: true,
+    type: Object,
+  },
+});
+const emit = defineEmits();
+function handleShow() {
+  emit("update:isShow", !props.isShow);
+}
+</script>
+
+<style lang="scss" scoped>
+.el-breadcrumb {
+  padding: 20px 0;
+  ._two {
+    font-size: 16px;
+    font-weight: 400;
+    color: #666666;
+  }
+  ._one {
+    font-size: 16px;
+    font-weight: 600 !important;
+    color: #333333;
+  }
+}
+</style>

src/views/website/innovate/innovate.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="innovate">
-    <div class="box conter1000">
+    <div class="box conter1000" v-show="!isShow">
       <div class="_l">
         <div
           class="_item pointer"
           :class="item.id == kindId ? 'x_fff x_bg_blue' : ''"
           v-for="item in kindList"
           :key="item.id"
-          @click="handleActive(item.id)"
+          @click="handleActive(item.id, item.title)"
         >
           {{ item.title }}
         </div>
@@ -24,14 +24,16 @@
           </el-input>
         </div>
         <div class="_list" v-loading="loading">
-          <div class="item" v-for="item in 5" :key="item">
+          <div class="item" v-for="item in dataList" :key="item.id">
             <div class="_info">
-              <p class="text_hidden">服务标题服务标题服务标题服务标题</p>
+              <p class="text_hidden">{{ item.title }}</p>
               <div class="_tags">
-                <el-tag class="x_fff x_bg_blue">服务描述标签</el-tag>
+                <el-tag class="x_fff x_bg_blue">{{ item.tag }}</el-tag>
               </div>
             </div>
-            <div class="_detail">查看详情</div>
+            <div class="_detail pointer" @click="handleDetail(item)">
+              查看详情
+            </div>
           </div>
         </div>
         <pagination
@@ -39,16 +41,50 @@
           :total="total"
           v-model:page="queryParams.pageNum"
           v-model:limit="queryParams.pageSize"
-          @pagination="getList"
+          @pagination="getDataList"
         />
       </div>
     </div>
+    <div class="box2 conter1000" v-show="isShow">
+      <webBreadcrumb
+        v-model:isShow="isShow"
+        v-model:breadcrumbTitle="breadcrumbTitle"
+      ></webBreadcrumb>
+      <div class="_head">
+        <p class="text_hidden">
+          服务标题/固体废物处理与资源化系列技术与产品固体废物处理与资源化系列技术处理与资源化系列技术固体废物处理与资源化系列技术与产品固体废物处理与资源化系列技术处理与资源化系列技术
+        </p>
+        <div class="_tags">
+          <el-tag class="x_fff x_bg_blue" size="mini">服务描述标签</el-tag>
+        </div>
+        <div class="text-right">
+          <el-button class="x_btns">购买服务</el-button>
+        </div>
+      </div>
+      <div class="_info">
+        <div class="_l">
+          <p class="_tit">服务介绍</p>
+          <div class="_txt">
+            <div>现有基础：</div>
+            本项目将生产废水分质处理后，提升进入曝气微电解反应器内，通过铁、碳原料在酸性情况下形成微电池，首先对铜氨络合物破络；其次对油墨等有机物质开环断链，提高废水的可生化性。更突出的是，利用金属离子的活性：铁置换其他金属离子，从而从废水中除去，然后经生化系统处理后，出水各污染物指标稳定达标排放。本项目具有处理效率高、以废治废能耗低、管理简单、出水稳定达标等优点。
+            出水各污染物指标稳定达标排放。本项目具有处理效率高、以废治废能耗低、管理简单出水稳定达标等优点。
+          </div>
+          <div class="_txt">
+            <div>现有基础：</div>
+            本项目将生产废水分质处理后，提升进入曝气微电解反应器内，通过铁、碳原料在酸性情况下形成微电池，首先对铜氨络合物破络；其次对油墨等有机物质开环断链，提高废水的可生化性。更突出的是，利用金属离子的活性：铁置换其他金属离子，从而从废水中除去，然后经生化系统处理后，出水各污染物指标稳定达标排放。本项目具有处理效率高、以废治废能耗低、管理简单、出水稳定达标等优点。
+            出水各污染物指标稳定达标排放。本项目具有处理效率高、以废治废能耗低、管理简单出水稳定达标等优点。
+          </div>
+        </div>
+        <div class="_r">联系我</div>
+      </div>
+    </div>
     <webFooter></webFooter>
   </div>
 </template>
 
 <script setup>
 import webFooter from "@/components/webFooter/index.vue";
+import webBreadcrumb from "@/components/webBreadcrumb/index.vue";
 
 const loading = ref(true);
 const queryParams = reactive({
@@ -58,29 +94,59 @@ const queryParams = reactive({
 });
 const total = ref(1);
 const kindId = ref(1);
-const kindList = reactive([
+let kindTitle = ref("情报服务");
-  { id: 1, title: "情报服务" },
+const isShow = ref(false);
-  { id: 2, title: "高技术服务" },
+let breadcrumbTitle = reactive({
-  { id: 3, title: "情报服务" },
+  id: null,
-]);
+  title: "",
-/** 查询 */
+  twoTitle: "",
-function getList() {
+});
+let kindList = ref([]);
+let dataList = ref([]);
+
+function getKindList() {
+  kindList.value = [
+    { id: 1, title: "情报服务" },
+    { id: 2, title: "高技术服务" },
+    { id: 3, title: "情报2服务" },
+  ];
+  if (kindList.value.length) {
+    breadcrumbTitle.id = kindList.value[0].id;
+    breadcrumbTitle.title = kindList.value[0].title;
+    breadcrumbTitle.twoTitle = kindList.value[0].title + "详情";
+  }
+}
+function getDataList() {
   loading.value = true;
   setTimeout(() => {
+    dataList.value = [
+      { id: 1, title: "服务标题", tag: "标签1" },
+      { id: 2, title: "服务标题2", tag: "标签2" },
+      { id: 3, title: "服务标题3", tag: "标签3" },
+    ];
     loading.value = false;
-  }, 1000);
+  }, 500);
 }
-function handleActive(id) {
+
+function handleActive(id, title) {
+  breadcrumbTitle.id = id;
+  breadcrumbTitle.title = title;
+  breadcrumbTitle.twoTitle = title + "详情";
   kindId.value = id;
+  kindTitle.value = title;
   queryParams.pageNum = 1;
   queryParams.input3 = "";
-  getList();
+  getDataList();
 }
 function handleQuery() {
   queryParams.pageNum = 1;
-  getList();
+  getDataList();
 }
-getList();
+function handleDetail(item) {
+  isShow.value = !isShow.value;
+}
+getKindList();
+getDataList();
 </script>
 
 <style lang="scss" scoped>
@@ -162,5 +228,57 @@ getList();
       }
     }
   }
+  .box2 {
+    ._head {
+      padding: 20px;
+      background-color: #fff;
+      p {
+        margin: 0;
+        font-size: 18px;
+        font-weight: 500;
+        color: #333333;
+        line-height: 30px;
+      }
+      ._tags {
+        margin: 9px 0;
+      }
+    }
+    ._info {
+      display: flex;
+      margin-top: 16px;
+      margin-bottom: 35px;
+      ._l {
+        width: 662px;
+        margin-right: 14px;
+        padding: 14px 40px 0 20px;
+        background-color: #fff;
+        ._tit {
+          &::before {
+            content: "";
+            display: inline-block;
+            margin-right: 5px;
+            width: 5px;
+            height: 5px;
+            background-color: #0054ff;
+            vertical-align: middle;
+          }
+        }
+        ._txt {
+          margin-bottom: 45px;
+          font-size: 14px;
+          font-weight: 400;
+          color: #666666;
+          line-height: 24px;
+          div {
+            color: #333333;
+          }
+        }
+      }
+      ._r {
+        flex: 1;
+        background-color: #fff;
+      }
+    }
+  }
 }
 </style>