解决方案查看更多

src/assets/styles/index.scss

@@ -139,6 +139,14 @@ aside {
   text-align: center
 }
 
+.text-left {
+  text-align: left
+}
+
+.text-right {
+  text-align: right
+}
+
 .sub-navbar {
   height: 50px;
   line-height: 50px;
@@ -196,6 +204,10 @@ aside {
   width: 1000px;
   margin: 0 auto;
 }
+.conter1400 {
+  width: 1400px;
+  margin: 0 auto;
+}
 // 2行文本省略号
 .text_hidden {
   overflow: hidden;

src/router/index.js

@@ -42,41 +42,41 @@ export const constantRoutes = [
       {
         path: 'solution',
         name: 'solution',
-        component: () => import('../views/website/solution.vue'),
+        component: () => import('../views/website/solution/solution.vue'),
         children:[
           {
             path:'small',
             name:'small',
-            component: () => import('../views/website/small.vue'),
+            component: () => import('../views/website/solution/small.vue'),
           },{
             path:'large',
             name:'large',
-            component: () => import('../views/website/large.vue'),
+            component: () => import('../views/website/solution/large.vue'),
           },{
             path:'government',
             name:'government',
-            component: () => import('../views/website/government.vue'),
+            component: () => import('../views/website/solution/government.vue'),
           },{
             path:'scientific',
             name:'scientific',
-            component: () => import('../views/website/scientific.vue'),
+            component: () => import('../views/website/solution/scientific.vue'),
           },
         ]
       },
       {
         path: 'innovate',
         name: 'innovate',
-        component: () => import('../views/website/innovate.vue'),
+        component: () => import('../views/website/innovate/innovate.vue'),
       },
       {
         path: 'activity',
         name: 'activity',
-        component: () => import('../views/website/activity.vue'),
+        component: () => import('../views/website/activity/activity.vue'),
       },
       {
         path: 'about',
         name: 'about',
-        component: () => import('../views/website/about.vue'),
+        component: () => import('../views/website/about/about.vue'),
       },
     ]
   },

src/views/website/about/about.vue

@@ -4,12 +4,13 @@
     <div class="box conter1000">
       <div class="_l">
         <div
-          class="_item"
+          class="_item pointer"
-          :class="item == 1 ? 'x_fff x_bg_blue' : ''"
+          :class="item.id == kindId ? 'x_fff x_bg_blue' : ''"
-          v-for="item in 3"
+          v-for="item in kindList"
-          :key="item"
+          :key="item.id"
+          @click="handleActive(item.id)"
         >
-          {{ item }}
+          {{ item.title }}
         </div>
       </div>
       <div class="_r">
@@ -44,6 +45,12 @@ const queryParams = reactive({
   pageNum: 1,
   pageSize: 10,
 });
+const kindId = ref(1);
+const kindList = reactive([
+  { id: 1, title: "公司简介" },
+  { id: 2, title: "发展历程" },
+  { id: 3, title: "联系我们" },
+]);
 /** 查询 */
 function getList() {
   loading.value = true;
@@ -51,6 +58,9 @@ function getList() {
     loading.value = false;
   }, 1000);
 }
+function handleActive(id) {
+  kindId.value = id;
+}
 getList();
 </script>
 

src/views/website/activity/activity.vue

@@ -18,7 +18,7 @@
         <el-col :span="14">
           <el-input v-model="queryParams.value3" placeholder="请输入关键词">
             <template #append>
-              <el-button class="x_btns">搜索</el-button>
+              <el-button>搜索</el-button>
             </template>
           </el-input>
         </el-col>
@@ -51,7 +51,12 @@
                 style="border-radius: 0"
                 >报名</el-button
               >
-              <el-button v-else class="fr x16" type="info" disabled
+              <el-button
+                v-else
+                class="fr x16"
+                style="border-radius: 0"
+                type="info"
+                disabled
                 >已结束</el-button
               >
             </div>
@@ -93,6 +98,20 @@ getList();
   .box {
     position: relative;
     padding-top: 20px;
+    .el-input {
+      ::v-deep(.el-input__inner) {
+        border-right: 0;
+      }
+      ::v-deep(.el-input-group__append) {
+        overflow: hidden;
+        font-size: 16px;
+        color: #fff;
+        border-top-color: #0054ff;
+        border-right-color: #0054ff;
+        border-bottom-color: #0054ff;
+        background-color: #0054ff;
+      }
+    }
   }
   ._item {
     display: flex;

src/views/website/innovate/innovate.vue

@@ -19,7 +19,7 @@
             placeholder="请输入关键词"
           >
             <template #append>
-              <el-button class="x_btns" @click="handleQuery">搜索</el-button>
+              <el-button @click="handleQuery">搜索</el-button>
             </template>
           </el-input>
         </div>
@@ -101,6 +101,20 @@ getList();
     ._r {
       position: relative;
       flex: 1;
+      .el-input {
+        ::v-deep(.el-input__inner) {
+          border-right: 0;
+        }
+        ::v-deep(.el-input-group__append) {
+          overflow: hidden;
+          font-size: 16px;
+          color: #fff;
+          border-top-color: #0054ff;
+          border-right-color: #0054ff;
+          border-bottom-color: #0054ff;
+          background-color: #0054ff;
+        }
+      }
       ._list {
         display: flex;
         flex-wrap: wrap;

src/views/website/small.vue

@@ -1,12 +0,0 @@
-<template>
-  <div class="small">small</div>
-</template>
-
-<script setup>
-</script>
-
-<style lang="scss" scoped>
-.small {
-  background-color: #ccc;
-}
-</style>

src/views/website/solution/components/seeMore.vue

@@ -0,0 +1,88 @@
+<template>
+  <div class="more conter1400">
+    <el-breadcrumb separator="/">
+      <el-breadcrumb-item>
+        <span class="_one">{{ oneLevelTitle.title }}</span>
+      </el-breadcrumb-item>
+      <el-breadcrumb-item>
+        <span class="_two">{{ twoLevelTitle }}</span>
+      </el-breadcrumb-item>
+    </el-breadcrumb>
+    <ul class="_list">
+      <li v-for="item in 36" :key="item">
+        <el-image
+          style="width: 100%; height: 135px"
+          src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg"
+          fit="cover"
+        ></el-image>
+        <div class="_head text_hidden">
+          盘活本地技术供需对接，某企业引盘活本地技术供需对接，某企业引
+        </div>
+        <div class="_detail text_hidden">
+          江启明电子有限公司自成立以来始终专注于LED显示屏。
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>
+<script setup>
+const props = defineProps({
+  isShowMore: {
+    type: Boolean,
+    default: true,
+  },
+  oneLevelTitle: {
+    required: true,
+    type: Object,
+  },
+  twoLevelTitle: {
+    type: String,
+    default: "查看更多",
+  },
+});
+const emit = defineEmits();
+// function handleShow() {
+//   emit("update:isShowMore", false);
+// }
+</script>
+<style lang="scss" scoped>
+.more {
+  padding-top: 30px;
+  .el-breadcrumb {
+    padding-bottom: 22px;
+    ._one {
+      font-size: 16px;
+      font-weight: 400;
+      color: #666666;
+    }
+    ._two {
+      font-size: 16px;
+      font-weight: 600 !important;
+      color: #333333;
+    }
+  }
+  ._list {
+    display: flex;
+    flex-wrap: wrap;
+    li {
+      width: calc(100% / 6);
+      padding: 0 11px 44px;
+      ._head {
+        margin: 5px 0;
+        font-size: 17px;
+        font-family: Source Han Sans CN;
+        font-weight: 500;
+        color: #333333;
+        line-height: 19px;
+      }
+      ._detail {
+        font-size: 15px;
+        font-family: Source Han Sans CN;
+        font-weight: 400;
+        color: #666666;
+        line-height: 19px;
+      }
+    }
+  }
+}
+</style>

src/views/website/solution/small.vue

@@ -0,0 +1,264 @@
+<template>
+  <div class="small">
+    <div class="_title">
+      <div style="height: 394px; background-color: #108de9"></div>
+      <div class="_li" :class="isFixed ? '_fixed' : ''">
+        <ul class="conter1000">
+          <li
+            :class="activeId == item.id ? '_active' : ''"
+            v-for="(item, index) in caseList"
+            :key="item.id"
+            @click="setScrollTop(item.id, index)"
+          >
+            {{ item.title }}
+          </li>
+        </ul>
+      </div>
+    </div>
+    <div class="box" v-show="!isShowMore">
+      <div
+        class="_item"
+        :ref="setItemRef"
+        v-once
+        v-for="(item, index) in caseList"
+        :key="index"
+        :data-id="item.id"
+      >
+        <h3 class="_tit text-center" style="font-size: 24px; color: #333333">
+          {{ item.title }}
+        </h3>
+        <div class="_info conter1000">
+          <div class="_r" v-if="isOddEvenNumber(index)">img</div>
+          <div
+            class="_l"
+            :class="isOddEvenNumber(index) ? '_paddingl' : '_paddingr'"
+          >
+            <h3 :class="isOddEvenNumber(index) ? 'text-right' : ''">
+              {{ item.title }}
+            </h3>
+            <!-- <p>{{ item.description }}</p> -->
+            <p>
+              本项目将生产废水分质处理后，提升进入曝气微电解反应器内，通过铁、碳原料在酸性情况下形成微电池，首先对铜氨络合物破络；其次对油墨等有机物质开环断链，提高废水的可生化性。更突出的是，利用金属离子的活性：铁置换其他金属离子，从而从废水中除去，然后经生化系统处理后，出水各污染物指标稳定达标排放。本项目具有处理效率高、以废治废能耗低、管理简单、出水稳定达标等优点。本项目将生产废水分质处理后，提升进入曝气微电解反应器内，通过铁、碳原料在酸性情况下形成微电池，首先对铜氨络合物破络；其次对油墨等有机物质开环断链，提高废水的可生化性。更突出的是，利用金属离子的活性：铁置换其他金属离子，从而从废水中除去，然后经生化系统处理后，出水各污染物指标稳定达标排放。本项目具有处理效率高、以废治废能耗低、管理简单、出水稳定达标等优点。
+            </p>
+          </div>
+          <div class="_r" v-if="!isOddEvenNumber(index)">img</div>
+        </div>
+        <div class="_list conter1400">
+          <ul>
+            <li v-for="item in 6" :key="item">
+              <el-image
+                style="width: 100%; height: 135px"
+                src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg"
+                fit="cover"
+              ></el-image>
+              <div class="_head text_hidden">
+                盘活本地技术供需对接，某企业引盘活本地技术供需对接，某企业引
+              </div>
+              <div class="_detail text_hidden">
+                江启明电子有限公司自成立以来始终专注于LED显示屏。
+              </div>
+            </li>
+          </ul>
+          <div class="_liBtn text-right">
+            <el-button class="x_btns" @click="handleShowMore(item)"
+              >查看更多</el-button
+            >
+          </div>
+        </div>
+      </div>
+    </div>
+    <seeMore
+      v-show="isShowMore"
+      v-model:isShowMore="isShowMore"
+      v-model:oneLevelTitle="oneLevelTitle"
+    ></seeMore>
+  </div>
+</template>
+<script setup>
+import { nextTick, onMounted } from "vue";
+import seeMore from "./components/seeMore.vue";
+
+const oneLevelTitle = ref({});
+const isShowMore = ref(false);
+const activeId = ref("");
+const itemRefs = [];
+const setItemRef = (el) => {
+  if (el) {
+    itemRefs.push(el);
+  }
+};
+const caseList = reactive([
+  {
+    id: "1",
+    title: "宣传介绍1",
+    description: "方案详细描述",
+    image: "",
+  },
+  {
+    id: "2",
+    title: "宣传介绍2",
+    description: "方案详细描述",
+    image: "",
+  },
+  {
+    id: "3",
+    title: "宣传介绍3",
+    description: "方案详细描述",
+    image: "",
+  },
+]);
+const scrollTop = ref(0);
+const isFixed = ref(false);
+onMounted(() => {
+  activeId.value = caseList[0].id;
+  document.addEventListener("scroll", () => {
+    scrollTop.value = getScroll().top;
+    if (scrollTop.value >= 394) {
+      isFixed.value = true;
+    } else {
+      isFixed.value = false;
+    }
+    itemRefs.map((item) => {
+      if (isShowMore.value) return false;
+      if (scrollTop.value >= item.offsetTop - 80) {
+        activeId.value = item.getAttribute("data-id");
+      }
+    });
+  });
+});
+function getScroll() {
+  return {
+    left:
+      window.pageXOffset ||
+      document.documentElement.scrollLeft ||
+      document.body.scrollLeft ||
+      0,
+    top:
+      window.pageYOffset ||
+      document.documentElement.scrollTop ||
+      document.body.scrollTop ||
+      0,
+  };
+}
+function setScrollTop(id, index) {
+  // if (isShowMore.value) return false;
+  isShowMore.value = false;
+  nextTick(() => {
+    window.scrollTo({
+      // - 80
+      top: itemRefs[index].offsetTop,
+    });
+  });
+  activeId.value = id;
+}
+function isOddEvenNumber(num) {
+  return num % 2 == 0 ? false : true;
+}
+function handleShowMore(item) {
+  oneLevelTitle.value = item;
+  window.scrollTo({
+    top: 0,
+  });
+  isShowMore.value = true;
+}
+</script>
+<style lang="scss" scoped>
+.small {
+  background-color: #fff;
+  ._title {
+    position: relative;
+    ._li {
+      position: absolute;
+      bottom: 0;
+      width: 100%;
+      height: 48px;
+      background: rgba(0, 0, 0, 0.2);
+      > ul {
+        display: flex;
+        height: 48px;
+        line-height: 48px;
+        li {
+          flex: 1;
+          text-align: center;
+          font-size: 18px;
+          color: #ffffff;
+          display: inline-block;
+          cursor: pointer;
+        }
+        ._active {
+          background: #000000;
+        }
+      }
+    }
+    ._fixed {
+      position: fixed;
+      top: 80px;
+      z-index: 1;
+      background-color: #ccc;
+    }
+  }
+  .box {
+    ._item {
+      ._tit {
+        margin: 0;
+        padding: 100px 0 60px;
+      }
+      ._info {
+        display: flex;
+        ._paddingr {
+          padding-right: 63px;
+        }
+        ._paddingl {
+          padding-left: 63px;
+        }
+        ._l {
+          flex: 1;
+          h3 {
+            font-size: 18px;
+            font-weight: 500;
+            color: #333333;
+          }
+          p {
+            font-size: 14px;
+            font-weight: 400;
+            color: #666666;
+            line-height: 24px;
+          }
+        }
+        ._r {
+          width: 520px;
+          background: #f2f6ff;
+        }
+      }
+    }
+    ._list {
+      margin-top: 86px;
+      > ul {
+        display: flex;
+        li {
+          width: calc(100% / 6);
+          padding: 0 11px;
+          ._head {
+            margin: 5px 0;
+            font-size: 17px;
+            font-family: Source Han Sans CN;
+            font-weight: 500;
+            color: #333333;
+            line-height: 19px;
+          }
+          ._detail {
+            font-size: 15px;
+            font-family: Source Han Sans CN;
+            font-weight: 400;
+            color: #666666;
+            line-height: 19px;
+          }
+        }
+      }
+      ._liBtn {
+        margin-top: 36px;
+      }
+    }
+  }
+}
+</style>

src/views/websiteLayout.vue

@@ -4,6 +4,7 @@
     <div class="content">
       <router-view />
     </div>
+    <el-backtop />
   </div>
 </template>