From cab6a9cfa8ab0770c810a5cdfe7b4abc142a8cee Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=86=8A=E4=B8=BD=E5=90=9B?= <664953382@qq.com>
Date: Thu, 30 Dec 2021 16:48:43 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B7=AF=E7=94=B1=E4=BF=AE=E6=94=B9=EF=BC=8C?=
 =?UTF-8?q?=E6=96=87=E4=BB=B6=E7=A7=BB=E5=8A=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/styles/index.scss        |  34 +++++++
 src/components/Pagination/index.vue |  61 ++++++------
 src/components/webHead/index.vue    |   5 +-
 src/router/index.js                 |  39 ++++++++
 src/views/website/about.vue         |  93 +++++++++++++++++
 src/views/website/activity.vue      | 130 ++++++++++++++++++++++++
 src/views/website/government.vue    |  12 +++
 src/views/website/innovate.vue      | 149 ++++++++++++++++++++++++++++
 src/views/website/large.vue         |  12 +++
 src/views/website/scientific.vue    |  12 +++
 src/views/website/small.vue         |  12 +++
 src/views/website/solution.vue      |   9 ++
 src/views/websiteLayout.vue         |   3 +-
 13 files changed, 537 insertions(+), 34 deletions(-)
 create mode 100644 src/views/website/about.vue
 create mode 100644 src/views/website/activity.vue
 create mode 100644 src/views/website/government.vue
 create mode 100644 src/views/website/innovate.vue
 create mode 100644 src/views/website/large.vue
 create mode 100644 src/views/website/scientific.vue
 create mode 100644 src/views/website/small.vue
 create mode 100644 src/views/website/solution.vue

diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss
index 29dd2b9..6145b6e 100644
--- a/src/assets/styles/index.scss
+++ b/src/assets/styles/index.scss
@@ -191,3 +191,37 @@ aside {
 .multiselect--active {
   z-index: 1000 !important;
 }
+// 自定义全局样式
+.conter1000 {
+  width: 1000px;
+  margin: 0 auto;
+}
+// 2行文本省略号
+.text_hidden {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  word-break: break-all;
+}
+.x_btns {
+  font-size: 16px !important;
+  color: #fff !important;
+  border-radius: 0 !important;
+  background-color: #0054ff !important;
+}
+.x16{
+  font-size: 16px !important;
+}
+.x_fff{
+  color: #fff !important;
+}
+.x_blue{
+  color: #0054ff !important;
+}
+.x_border_blue{
+  border: 1px solid #0054ff !important;
+}
+.x_bg_blue{
+  background-color: #0054ff !important;
+}
diff --git a/src/components/Pagination/index.vue b/src/components/Pagination/index.vue
index 1f96271..25fbb13 100644
--- a/src/components/Pagination/index.vue
+++ b/src/components/Pagination/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="{ 'hidden': hidden }" class="pagination-container">
+  <div :class="{ hidden: hidden }" class="pagination-container">
     <el-pagination
       :background="background"
       v-model:current-page="currentPage"
@@ -15,86 +15,87 @@
 </template>
 
 <script setup>
-import { scrollTo } from '@/utils/scroll-to'
+import { scrollTo } from "@/utils/scroll-to";
 
 const props = defineProps({
   total: {
     required: true,
-    type: Number
+    type: Number,
   },
   page: {
     type: Number,
-    default: 1
+    default: 1,
   },
   limit: {
     type: Number,
-    default: 20
+    default: 20,
   },
   pageSizes: {
     type: Array,
     default() {
-      return [10, 20, 30, 50]
-    }
+      return [10, 20, 30, 50];
+    },
   },
   // 移动端页码按钮的数量端默认值5
   pagerCount: {
     type: Number,
-    default: document.body.clientWidth < 992 ? 5 : 7
+    default: document.body.clientWidth < 992 ? 5 : 7,
   },
   layout: {
     type: String,
-    default: 'total, sizes, prev, pager, next, jumper'
+    default: "total, sizes, prev, pager, next, jumper",
   },
   background: {
     type: Boolean,
-    default: true
+    default: true,
   },
   autoScroll: {
     type: Boolean,
-    default: true
+    default: true,
   },
   hidden: {
     type: Boolean,
-    default: false
-  }
-})
+    default: false,
+  },
+});
 
 const emit = defineEmits();
 const currentPage = computed({
   get() {
-    return props.page
+    return props.page;
   },
   set(val) {
-    emit('update:page', val)
-  }
-})
+    emit("update:page", val);
+  },
+});
 const pageSize = computed({
   get() {
-    return props.limit
+    return props.limit;
   },
-  set(val){
-    emit('update:limit', val)
-  }
-})
+  set(val) {
+    emit("update:limit", val);
+  },
+});
 function handleSizeChange(val) {
-  emit('pagination', { page: currentPage.value, limit: val })
+  emit("pagination", { page: currentPage.value, limit: val });
   if (props.autoScroll) {
-    scrollTo(0, 800)
+    scrollTo(0, 800);
   }
 }
 function handleCurrentChange(val) {
-  emit('pagination', { page: val, limit: pageSize.value })
+  emit("pagination", { page: val, limit: pageSize.value });
   if (props.autoScroll) {
-    scrollTo(0, 800)
+    scrollTo(0, 800);
   }
 }
-
 </script>
 
 <style scoped>
 .pagination-container {
-  background: #fff;
-  padding: 32px 16px;
+  /* background: #fff; */
+  /* padding: 32px 16px; */
+  margin: 0;
+  height: 50px;
 }
 .pagination-container.hidden {
   display: none;
diff --git a/src/components/webHead/index.vue b/src/components/webHead/index.vue
index 6142b65..679a37f 100644
--- a/src/components/webHead/index.vue
+++ b/src/components/webHead/index.vue
@@ -137,7 +137,7 @@ dt {
 }
 .webHead {
   position: absolute;
-  z-index: 1;
+  z-index: 2001;
   top: 0;
   left: 0;
   width: 100%;
@@ -157,7 +157,6 @@ dt {
       .show_box {
         display: none;
         position: absolute;
-        z-index: 2001;
         bottom: -170px;
         width: 100%;
         text-align: center;
@@ -165,6 +164,8 @@ dt {
         div {
           height: 42px;
           line-height: 42px;
+          font-size: 14px;
+          color: #666666;
           background-color: #f2f6ff;
         }
         ._active {
diff --git a/src/router/index.js b/src/router/index.js
index bcac054..8e2b147 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -40,6 +40,45 @@ export const constantRoutes = [
         name: 'index',
         component: () => import('../views/website/index.vue'),
       },
+      {
+        path: 'solution',
+        name: 'solution',
+        component: () => import('../views/website/solution.vue'),
+        children:[
+          {
+            path:'small',
+            name:'small',
+            component: () => import('../views/website/small.vue'),
+          },{
+            path:'large',
+            name:'large',
+            component: () => import('../views/website/large.vue'),
+          },{
+            path:'government',
+            name:'government',
+            component: () => import('../views/website/government.vue'),
+          },{
+            path:'scientific',
+            name:'scientific',
+            component: () => import('../views/website/scientific.vue'),
+          },
+        ]
+      },
+      {
+        path: 'innovate',
+        name: 'innovate',
+        component: () => import('../views/website/innovate.vue'),
+      },
+      {
+        path: 'activity',
+        name: 'activity',
+        component: () => import('../views/website/activity.vue'),
+      },
+      {
+        path: 'about',
+        name: 'about',
+        component: () => import('../views/website/about.vue'),
+      },
     ]
   },
   {
diff --git a/src/views/website/about.vue b/src/views/website/about.vue
new file mode 100644
index 0000000..8a79b91
--- /dev/null
+++ b/src/views/website/about.vue
@@ -0,0 +1,93 @@
+<template>
+  <div class="about">
+    <div style="height: 394px; background-color: #ccc"></div>
+    <div class="box conter1000">
+      <div class="_l">
+        <div
+          class="_item"
+          :class="item == 1 ? 'x_fff x_bg_blue' : ''"
+          v-for="item in 3"
+          :key="item"
+        >
+          {{ item }}
+        </div>
+      </div>
+      <div class="_r">
+        <!-- 公司简介---后期可能是接收富文本内容 -->
+        <h3>公司简介</h3>
+        <p>
+          中国科学院重庆绿色智能技术研究院合肥分院（以下简称“合肥分院”）是在响应中科院号召支持合肥国家科学中心建设的前提下，中国科学院重庆绿色智能技术研究院与合肥市共建的直属事业法人科研机构。2018年2月20号在中科院与安徽省共建领导小组会议上正式签约筹建，2018年12月20日，正式获得事业法人登记证书合肥分院设立科技咨询委员会和产业咨询委员会设人工智能、精准医疗、5G物联、绿色环保等研究单元。主要从事绿色智能科技研发与科技成果转化。合肥分院秉持重庆研究院“市场为魂，创新为本的理念。按照“院企共建、源头创新、科技共享、产业集聚”模式建设。以服务好科技工作者，服务好合作企业为宗旨。开展形式多样的成果转移转化加快科研成果落地。
+        </p>
+        <el-image
+          src="https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg"
+          fit="fill"
+        ></el-image>
+        <p>
+          中国科学院重庆绿色智能技术研究院合肥分院（以下简称“合肥分院”）是在响应中科院号召支持合肥国家科学中心建设的前提下，中国科学院重庆绿色智能技术研究院与合肥市共建的直属事业法人科研机构。2018年2月20号在中科院与安徽省共建领导小组会议上正式签约筹建，2018年12月20日，正式获得事业法人登记证书合肥分院设立科技咨询委员会和产业咨询委员会设人工智能、精准医疗、5G物联、绿色环保等研究单元。主要从事绿色智能科技研发与科技成果转化。合肥分院秉持重庆研究院“市场为魂，创新为本的理念。按照“院企共建、源头创新、科技共享、产业集聚”模式建设。以服务好科技工作者，服务好合作企业为宗旨。开展形式多样的成果转移转化加快科研成果落地。
+        </p>
+        <p>
+          中国科学院重庆绿色智能技术研究院合肥分院（以下简称“合肥分院”）是在响应中科院号召支持合肥国家科学中心建设的前提下，中国科学院重庆绿色智能技术研究院与合肥市共建的直属事业法人科研机构。2018年2月20号在中科院与安徽省共建领导小组会议上正式签约筹建，2018年12月20日，正式获得事业法人登记证书合肥分院设立科技咨询委员会和产业咨询委员会设人工智能、精准医疗、5G物联、绿色环保等研究单元。主要从事绿色智能科技研发与科技成果转化。合肥分院秉持重庆研究院“市场为魂，创新为本的理念。按照“院企共建、源头创新、科技共享、产业集聚”模式建设。以服务好科技工作者，服务好合作企业为宗旨。开展形式多样的成果转移转化加快科研成果落地。
+        </p>
+        <p>
+          中国科学院重庆绿色智能技术研究院合肥分院（以下简称“合肥分院”）是在响应中科院号召支持合肥国家科学中心建设的前提下，中国科学院重庆绿色智能技术研究院与合肥市共建的直属事业法人科研机构。2018年2月20号在中科院与安徽省共建领导小组会议上正式签约筹建，2018年12月20日，正式获得事业法人登记证书合肥分院设立科技咨询委员会和产业咨询委员会设人工智能、精准医疗、5G物联、绿色环保等研究单元。主要从事绿色智能科技研发与科技成果转化。合肥分院秉持重庆研究院“市场为魂，创新为本的理念。按照“院企共建、源头创新、科技共享、产业集聚”模式建设。以服务好科技工作者，服务好合作企业为宗旨。开展形式多样的成果转移转化加快科研成果落地。主要从事绿色智能科技研发与科技成果转化。合肥分院秉持重庆研究院“市场为魂，创新为本的理念。按照“院企共建、源头创新、科技共享、产业集聚”模式建设。以服务好科技工作者，服务好合作企业为宗旨。开展形式多样的成果转移转化加快科研成果落地。
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const input3 = ref("");
+const loading = ref(true);
+const total = ref(1);
+const queryParams = reactive({
+  pageNum: 1,
+  pageSize: 10,
+});
+/** 查询 */
+function getList() {
+  loading.value = true;
+  setTimeout(() => {
+    loading.value = false;
+  }, 1000);
+}
+getList();
+</script>
+
+<style lang="scss" scoped>
+.about {
+  background-color: #f2f6ff;
+  .box {
+    padding-top: 20px;
+    display: flex;
+    ._l {
+      width: 230px;
+      margin-right: 14px;
+      ._item {
+        text-align: center;
+        height: 53px;
+        line-height: 53px;
+        font-size: 16px;
+        color: #333;
+        background-color: #fff;
+      }
+    }
+    ._r {
+      flex: 1;
+      background: #fff;
+      padding: 20px 40px;
+      h3 {
+        font-weight: 600;
+        text-align: center;
+        font-size: 18px;
+        color: #333333;
+      }
+      p {
+        font-size: 14px;
+        color: #333333;
+        line-height: 36px;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/website/activity.vue b/src/views/website/activity.vue
new file mode 100644
index 0000000..b3ae186
--- /dev/null
+++ b/src/views/website/activity.vue
@@ -0,0 +1,130 @@
+<template>
+  <div class="activity">
+    <div style="height: 394px; background-color: #ccc"></div>
+    <div class="box conter1000">
+      <el-row :gutter="10">
+        <el-col :span="5">
+          <el-select
+            v-model="queryParams.value"
+            placeholder="活动分类"
+          ></el-select>
+        </el-col>
+        <el-col :span="5">
+          <el-select
+            v-model="queryParams.value2"
+            placeholder="活动状态"
+          ></el-select>
+        </el-col>
+        <el-col :span="14">
+          <el-input v-model="queryParams.value3" placeholder="请输入关键词">
+            <template #append>
+              <el-button class="x_btns">搜索</el-button>
+            </template>
+          </el-input>
+        </el-col>
+      </el-row>
+      <div v-loading="loading">
+        <div class="_item" v-for="(item, index) in 3" :key="index">
+          <div class="_l">
+            <el-image
+              style="width: 358px; height: 200px; vertical-align: middle"
+              src="https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg"
+              fit="fill"
+            ></el-image>
+          </div>
+          <div class="_r">
+            <p class="text_hidden">
+              订单利润模型——构建企业利润机器人智能感知与控制专场 |
+              合肥高新区科技成果供需对接活动
+            </p>
+            <div class="_time">
+              活动时间：2021-10-14 13:30:00 ~ 2021-10-16 16:30:00
+            </div>
+            <div class="_info">
+              <span class="fl"><span class="x_blue">16</span> 人报名</span>
+              <el-button class="fr x_btns" v-if="index == 0" disabled
+                >已报名</el-button
+              >
+              <el-button
+                v-else-if="index == 1"
+                class="fr x16 x_blue x_border_blue"
+                style="border-radius: 0"
+                >报名</el-button
+              >
+              <el-button v-else class="fr x16" type="info" disabled
+                >已结束</el-button
+              >
+            </div>
+          </div>
+        </div>
+      </div>
+      <pagination
+        v-show="total > 0"
+        :total="total"
+        v-model:page="queryParams.pageNum"
+        v-model:limit="queryParams.pageSize"
+        @pagination="getList"
+      />
+    </div>
+  </div>
+</template>
+<script setup>
+const loading = ref(true);
+const total = ref(1);
+const queryParams = reactive({
+  pageNum: 1,
+  pageSize: 10,
+  value: "",
+  value2: "",
+  value3: "",
+});
+/** 查询 */
+function getList() {
+  loading.value = true;
+  setTimeout(() => {
+    loading.value = false;
+  }, 1000);
+}
+getList();
+</script>
+<style lang="scss" scoped>
+.activity {
+  background-color: #f2f6ff;
+  .box {
+    position: relative;
+    padding-top: 20px;
+  }
+  ._item {
+    display: flex;
+    margin-top: 16px;
+    ._r {
+      flex: 1;
+      padding: 36px 20px 0 16px;
+      background-color: #fff;
+      p {
+        margin-top: 0;
+        font-size: 16px;
+        font-weight: 600;
+        color: #333333;
+        line-height: 30px;
+      }
+      ._time {
+        margin-bottom: 7px;
+        font-size: 16px;
+        font-weight: 400;
+        color: #666666;
+      }
+      ._info {
+        .fl {
+          font-size: 16px;
+          font-weight: 400;
+          color: #666666;
+          span {
+            font-size: 30px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/website/government.vue b/src/views/website/government.vue
new file mode 100644
index 0000000..039b986
--- /dev/null
+++ b/src/views/website/government.vue
@@ -0,0 +1,12 @@
+<template>
+  <div class="government">government</div>
+</template>
+
+<script setup>
+</script>
+
+<style lang="scss" scoped>
+.government {
+  background-color: #ccc;
+}
+</style>
diff --git a/src/views/website/innovate.vue b/src/views/website/innovate.vue
new file mode 100644
index 0000000..2b7ba31
--- /dev/null
+++ b/src/views/website/innovate.vue
@@ -0,0 +1,149 @@
+<template>
+  <div class="innovate">
+    <div class="box conter1000">
+      <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)"
+        >
+          {{ item.title }}
+        </div>
+      </div>
+      <div class="_r">
+        <div style="width: 70%">
+          <el-input
+            v-model.trim="queryParams.input3"
+            placeholder="请输入关键词"
+          >
+            <template #append>
+              <el-button class="x_btns" @click="handleQuery">搜索</el-button>
+            </template>
+          </el-input>
+        </div>
+        <div class="_list" v-loading="loading">
+          <div class="item" v-for="item in 5" :key="item">
+            <div class="_info">
+              <p class="text_hidden">服务标题服务标题服务标题服务标题</p>
+              <div class="_tags">
+                <el-tag class="x_fff x_bg_blue">服务描述标签</el-tag>
+              </div>
+            </div>
+            <div class="_detail">查看详情</div>
+          </div>
+        </div>
+        <pagination
+          v-show="total > 0"
+          :total="total"
+          v-model:page="queryParams.pageNum"
+          v-model:limit="queryParams.pageSize"
+          @pagination="getList"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const loading = ref(true);
+const queryParams = reactive({
+  pageNum: 1,
+  pageSize: 10,
+  input3: "",
+});
+const total = ref(1);
+const kindId = ref(1);
+const kindList = reactive([
+  { id: 1, title: "情报服务" },
+  { id: 2, title: "高技术服务" },
+  { id: 3, title: "情报服务" },
+]);
+/** 查询 */
+function getList() {
+  loading.value = true;
+  setTimeout(() => {
+    loading.value = false;
+  }, 1000);
+}
+function handleActive(id) {
+  kindId.value = id;
+  queryParams.pageNum = 1;
+  queryParams.input3 = "";
+  getList();
+}
+function handleQuery() {
+  queryParams.pageNum = 1;
+  getList();
+}
+getList();
+</script>
+
+<style lang="scss" scoped>
+.innovate {
+  background-color: #f2f6ff;
+  .box {
+    padding-top: 30px;
+    display: flex;
+    ._l {
+      width: 230px;
+      margin-right: 14px;
+      ._item {
+        text-align: center;
+        height: 53px;
+        line-height: 53px;
+        font-size: 16px;
+        color: #333;
+        background-color: #fff;
+      }
+    }
+    ._r {
+      position: relative;
+      flex: 1;
+      ._list {
+        display: flex;
+        flex-wrap: wrap;
+        .item {
+          width: 31%;
+          margin-top: 14px;
+          margin-right: 14px;
+          background-color: #fff;
+          &:nth-child(-n + 3) {
+            margin-top: 10px;
+          }
+          ._info {
+            padding: 30px 14px 0;
+            p {
+              margin: 0;
+              font-size: 16px;
+              font-weight: 400;
+              color: #333333;
+              line-height: 24px;
+            }
+            ._tags {
+              margin: 10px 0 0;
+              .el-tag {
+                font-size: 14px;
+              }
+            }
+          }
+          ._detail {
+            height: 54px;
+            line-height: 54px;
+            margin-top: 30px;
+            text-align: center;
+            color: #333;
+            font-weight: bold;
+            font-size: 14px;
+            &:hover {
+              color: #fff;
+              background: #9bbcff;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/website/large.vue b/src/views/website/large.vue
new file mode 100644
index 0000000..dbf6d36
--- /dev/null
+++ b/src/views/website/large.vue
@@ -0,0 +1,12 @@
+<template>
+  <div class="large">large</div>
+</template>
+
+<script setup>
+</script>
+
+<style lang="scss" scoped>
+.large {
+  background-color: #ccc;
+}
+</style>
diff --git a/src/views/website/scientific.vue b/src/views/website/scientific.vue
new file mode 100644
index 0000000..b7c3735
--- /dev/null
+++ b/src/views/website/scientific.vue
@@ -0,0 +1,12 @@
+<template>
+  <div class="scientific">scientific</div>
+</template>
+
+<script setup>
+</script>
+
+<style lang="scss" scoped>
+.scientific {
+  background-color: #ccc;
+}
+</style>
diff --git a/src/views/website/small.vue b/src/views/website/small.vue
new file mode 100644
index 0000000..39bd5bd
--- /dev/null
+++ b/src/views/website/small.vue
@@ -0,0 +1,12 @@
+<template>
+  <div class="small">small</div>
+</template>
+
+<script setup>
+</script>
+
+<style lang="scss" scoped>
+.small {
+  background-color: #ccc;
+}
+</style>
diff --git a/src/views/website/solution.vue b/src/views/website/solution.vue
new file mode 100644
index 0000000..837d64b
--- /dev/null
+++ b/src/views/website/solution.vue
@@ -0,0 +1,9 @@
+<template>
+  <router-view></router-view>
+</template>
+
+<script setup>
+</script>
+
+<style lang="scss" scoped>
+</style>
diff --git a/src/views/websiteLayout.vue b/src/views/websiteLayout.vue
index 2585d78..29ceb25 100644
--- a/src/views/websiteLayout.vue
+++ b/src/views/websiteLayout.vue
@@ -1,13 +1,12 @@
 <template>
   <div class="index">
     <webHead></webHead>
-    <router-view class="content"/>
+    <router-view class="content" />
   </div>
 </template>
 
 <script setup>
 import webHead from "../components/webHead/index.vue";
-
 </script>
 
 <style lang="scss" scoped>