From c85634d97b8a84807c6b8700e5b61b27071561da 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, 5 Aug 2021 09:35:02 +0800
Subject: [PATCH] =?UTF-8?q?=E7=A7=91=E6=8A=80=E6=88=90=E6=9E=9C=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E6=90=AD=E5=BB=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                     |   7 +
 src/views/home/achievements.vue | 343 +++++++++++++++++++++++++++++++-
 2 files changed, 348 insertions(+), 2 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 8235043..5c29926 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -22,6 +22,13 @@ export default {
   white-space: nowrap;
   text-overflow: ellipsis;
 }
+.text_hidden_four {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 4;
+  -webkit-box-orient: vertical;
+  word-break: break-all;
+}
 .text_18_333 {
   font-size: 18px;
   color: #333;
diff --git a/src/views/home/achievements.vue b/src/views/home/achievements.vue
index a338659..e3b0937 100644
--- a/src/views/home/achievements.vue
+++ b/src/views/home/achievements.vue
@@ -1,5 +1,344 @@
 <template>
-  <div>
-    achievements
+  <div class="notice_page p0-100">
+    <!-- 搜索部分 -->
+    <div class="search">
+      <div class="search_input" style="display:flex">
+        <span>科技成果检索</span>
+        <el-input v-model="input" placeholder="请输入搜索关键字"></el-input>
+        <el-button type="warning">搜索</el-button>
+      </div>
+    </div>
+    <!-- 筛选部分 -->
+    <div class="screen">
+      <div class="screen_l">
+        <!-- 检索条件 -->
+        <div class="screen_l_t">
+          <div class="screen_l_t_item">
+            <span class="text_col">技术领域：</span>
+            <el-radio-group v-model="queryParams.radio1" size="medium">
+              <el-radio-button
+                :label="item.label"
+                v-for="item in levelList"
+                :key="item.label"
+              >
+                {{ item.name }}
+              </el-radio-button>
+            </el-radio-group>
+          </div>
+          <div class="screen_l_t_item">
+            <span class="text_col">成熟度：</span>
+            <el-radio-group v-model="queryParams.radio2" size="medium">
+              <el-radio-button label="">不限</el-radio-button>
+              <el-radio-button :label="item" v-for="item in 3" :key="item">
+                {{ item }}
+              </el-radio-button>
+            </el-radio-group>
+          </div>
+          <div class="screen_l_t_item">
+            <span class="text_col">合作标签：</span>
+            <el-radio-group v-model="queryParams.radio2" size="medium">
+              <el-radio-button label="">不限</el-radio-button>
+              <el-radio-button :label="item" v-for="item in 3" :key="item">
+                {{ item }}
+              </el-radio-button>
+            </el-radio-group>
+          </div>
+        </div>
+        <!-- 检索列表 -->
+        <div class="screen_l_b">
+          <div class="screen_item" v-for="item in 6" :key="item">
+            <div class="title text_hidden_one">
+              <span class="txt">【￥100万】</span
+              ><span>寻求电梯导轨更高效的方法寻求电梯导轨更高效的方法</span>
+            </div>
+            <div class="tags">
+              <el-tag effect="dark">装备制造</el-tag>
+              <el-tag effect="dark">技术需求</el-tag>
+            </div>
+            <p class="text_hidden_four">
+              企业主要做电梯配件中的电梯导轨，2020年产值2亿元左右，属于重金属加工企业主要做电梯配件中的电梯导轨，2020年产值2亿元左右，属于重金属加工企业主要做电梯配件中的电梯导轨，2020年产值2亿元左右，属于重金属加工企业主要做电梯配件中的电梯导轨，2020年产值2亿元左右，属于重金属加工
+            </p>
+            <div class="time">2021-07-23发布</div>
+          </div>
+        </div>
+        <!-- 分页 -->
+        <el-pagination
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page="queryParams.pageNum"
+          :page-sizes="[6, 12, 18, 24]"
+          :page-size="queryParams.pageSize"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="36"
+        >
+        </el-pagination>
+        <!-- <pagination
+          v-show="10 > 0"
+          :total="24"
+          :page.sync="queryParams.pageNum"
+          :limit.sync="queryParams.pageSize"
+          @pagination="getList"
+        /> -->
+      </div>
+    </div>
   </div>
 </template>
+<script>
+import { mapGetters } from 'vuex';
+export default {
+  data() {
+    return {
+      activeName: '1',
+      input: '',
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        radio1: '',
+        radio2: ''
+      },
+      levelList: [
+        {
+          label: '1',
+          name: '信息技术'
+        },
+        {
+          label: '2',
+          name: '装备制造'
+        },
+        {
+          label: '3',
+          name: '新材料'
+        },
+        {
+          label: '4',
+          name: '新能源'
+        },
+        {
+          label: '5',
+          name: '生物医药'
+        },
+        {
+          label: '6',
+          name: '节能环保'
+        },
+        {
+          label: '7',
+          name: '数字创意'
+        },
+        {
+          label: '8',
+          name: '检验检测'
+        },
+        {
+          label: '9',
+          name: '教育教学'
+        },
+        {
+          label: '10',
+          name: '检验检测'
+        }
+      ]
+    };
+  },
+  computed: {
+    ...mapGetters(['token'])
+  },
+  methods: {
+    getList() {},
+    handleClick() {},
+    handleSizeChange() {},
+    handleCurrentChange() {}
+  },
+  created() {
+    this.levelList.unshift({
+      label: '',
+      name: '不限'
+    });
+  }
+};
+</script>
+<style lang="scss" scoped>
+.notice_page {
+  .search {
+    padding-top: 52px;
+    padding-bottom: 52px;
+    text-align: center;
+    .search_input {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      /deep/.el-input--medium .el-input__inner {
+        height: 40px;
+        line-height: 40px;
+        border-radius: 6px 0 0 6px;
+        border: 1px solid #ffa32c;
+        border-right: 0;
+      }
+      span:nth-child(1) {
+        color: #333;
+        font-size: 24px;
+        margin-right: 21px;
+      }
+      .el-input {
+        width: 304px;
+      }
+      .el-button {
+        border-radius: 0 6px 6px 0;
+        background-color: #ffa32c;
+        font-size: 18px;
+      }
+    }
+    .tags {
+      margin-top: 26px;
+      .txt {
+        font-size: 18px;
+        color: #999;
+      }
+      .el-tag {
+        border-radius: 20px;
+        margin-right: 18px;
+      }
+    }
+  }
+  .screen {
+    display: flex;
+    .screen_l {
+      flex: 2;
+      .screen_l_t {
+        border-radius: 6px;
+        background-color: #f8f8f8;
+        .screen_l_t_item {
+          // height: 50px;
+          // line-height: 50px;
+          display: flex;
+          align-items: center;
+          padding: 0 20px;
+          .text_col {
+            min-width: 100px;
+            color: #333;
+            font-size: 18px;
+          }
+          .el-radio-group {
+            display: flex;
+            flex-wrap: wrap;
+            align-items: center;
+            .el-radio-button {
+              margin: 10px 0;
+            }
+          }
+        }
+      }
+      .screen_l_b {
+        margin-top: 10px;
+        padding: 10px 0;
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: flex-start;
+        .screen_item {
+          display: flex;
+          flex-direction: column;
+          justify-content: space-between;
+          width: calc((100% - 24px) / 3);
+          height: 292px;
+          margin-right: 12px;
+          box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.08);
+          margin-bottom: 14px;
+          cursor: pointer;
+          border-radius: 6px;
+          overflow: hidden;
+          padding: 30px 20px;
+          .title {
+            font-size: 18px;
+            color: #333;
+            .txt {
+              color: #ffa32c;
+            }
+          }
+          .tags {
+            margin-top: 22px;
+            .el-tag {
+              margin-right: 10px;
+            }
+          }
+          p {
+            font-size: 16px;
+            color: #666;
+            line-height: 27px;
+          }
+          .time {
+            text-align: right;
+            font-size: 16px;
+            color: #999;
+          }
+        }
+        .screen_item:nth-of-type(3n + 0) {
+          margin-right: 0;
+        }
+      }
+      .el-pagination {
+        text-align: right;
+      }
+    }
+    .screen_r {
+      flex: 1;
+      margin-left: 10px;
+      max-width: 310px;
+      .title {
+        color: #ffffff;
+        height: 60px;
+        line-height: 60px;
+        font-size: 20px;
+        text-align: center;
+        background: #3394ff;
+        border-radius: 6px 6px 0px 0px;
+      }
+      .tabs {
+        height: 551px;
+        background: #f8f8f8;
+        padding: 0px 14px;
+        .tabs_row {
+          display: flex;
+          align-items: center;
+          .span {
+            width: 30%;
+            min-width: 84px;
+          }
+          .el-tabs {
+            // width: 240px;
+            width: 70%;
+            /deep/.el-tabs__nav-wrap::after {
+              height: 0;
+            }
+            /deep/.el-tabs__item.is-active {
+              font-weight: bold;
+              color: #1890ff;
+            }
+          }
+        }
+        .tabs_item {
+          height: 110px;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          border-bottom: 1px solid #e3e3e3;
+          div:nth-child(1) {
+            font-size: 18px;
+            color: #333333;
+          }
+          div:nth-child(2) {
+            margin-top: 16px;
+            font-size: 16px;
+            color: #999999;
+          }
+        }
+        .more {
+          text-align: center;
+          .el-button {
+            margin-top: 12px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>