|
|
@@ -1,26 +1,67 @@
|
|
|
<template>
|
|
|
- <div class="box">
|
|
|
- <banner></banner>
|
|
|
- <p class="list_title">{{ $t("nav.Overview") }}</p>
|
|
|
- <div class="list_box">
|
|
|
- <div class="list" v-for="(item, index) in overView" :key="index" :class="index % 2 == 0 ? '' : 'list_active'">
|
|
|
- <div class="format-box" v-for="(one, i) in item" :key="i" @click="gotoproduct(one)">
|
|
|
- <div class="images_box">
|
|
|
- <p class="images_title">{{one.catalog}}</p>
|
|
|
- <img class="icons-item-imgbox" :src="one.coverUrl">
|
|
|
- <p class="images_weight">{{ one.name }}</p>
|
|
|
- <p class="images_text">{{one.moa}} </p>
|
|
|
- <p class="images_text">{{one.proteinWeight}}</p>
|
|
|
- <p class="images_text">({{one.company}})</p>
|
|
|
- <p class="images_footer">{{one.country}}{{one.stage? ',':''}} {{ one.stage }}{{ one.year? "("+one.year+")" : '' }}</p>
|
|
|
- </div>
|
|
|
+ <div class="box">
|
|
|
+ <banner></banner>
|
|
|
+ <div class="content_box">
|
|
|
+ <div class="list_title">
|
|
|
+ <div class="title">{{ $t("nav.Overview") }}</div>
|
|
|
+ <div class="keyword_box">
|
|
|
+ <el-input placeholder="请输入内容" v-model="keyword" class="input-with-select">
|
|
|
+ <el-button class="but_search" slot="append" icon="el-icon-search" @click="search"></el-button>
|
|
|
+ </el-input>
|
|
|
+ <el-button class="buttom_box" @click="reset">{{ $t("nav.reset") }}</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="list_box">
|
|
|
+ <div class="list">
|
|
|
+ <el-row :gutter="20" style="width: 100%;">
|
|
|
+ <el-col :span="4" v-for="(one, i) in keywordList" :ref="'bt' + one.id" :key="one.id">
|
|
|
+ <div class="format-box animate__animated"
|
|
|
+ :class="{ 'slide-up': one.isSliding, 'list_active': row(i) }"
|
|
|
+ v-if="!one.show"
|
|
|
+ @click="gotoproduct(one)" @transitionend="onTransitionEnd(one)">
|
|
|
+ <div class="images_box">
|
|
|
+ <p class="images_title">{{ one.catalog }}</p>
|
|
|
+ <img class="icons-item-imgbox" :src="one.coverUrl">
|
|
|
+ <p class="images_weight">{{ one.name }}</p>
|
|
|
+ <p class="images_text">{{ one.moa }} </p>
|
|
|
+ <p class="images_text">{{ one.proteinWeight }}</p>
|
|
|
+ <p class="images_text">({{ one.company }})</p>
|
|
|
+ <p class="images_footer">{{ one.country }}{{ one.stage ? ',' : '' }} {{ one.stage }}{{ one.year ? "(" + one.year + ")"
|
|
|
+ : '' }}</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ <div class="title_box" v-if="issshow">{{ $t("nav.other") }}{{ $t("nav.Overview") }}</div>
|
|
|
+ <div class="list">
|
|
|
+ <el-row :gutter="20" style="width: 100%;">
|
|
|
+ <el-col :span="4" v-for="(one, i) in otherList" :ref="'bt' + one.id" :key="one.id">
|
|
|
+ <div class="format-box animate__animated"
|
|
|
+ :class="{ 'slide-up': one.isSliding, 'list_active': row(i) }"
|
|
|
+ v-if="!one.show"
|
|
|
+ @click="gotoproduct(one)" @transitionend="onTransitionEnd(one)">
|
|
|
+ <div class="images_box">
|
|
|
+ <p class="images_title">{{ one.catalog }}</p>
|
|
|
+ <img class="icons-item-imgbox" :src="one.coverUrl">
|
|
|
+ <p class="images_weight">{{ one.name }}</p>
|
|
|
+ <p class="images_text">{{ one.moa }} </p>
|
|
|
+ <p class="images_text">{{ one.proteinWeight }}</p>
|
|
|
+ <p class="images_text">({{ one.company }})</p>
|
|
|
+ <p class="images_footer">{{ one.country }}{{ one.stage ? ',' : '' }} {{ one.stage }}{{ one.year ? "(" + one.year + ")"
|
|
|
+ : '' }}</p>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </template>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
<script>
|
|
|
import banner from "@/components/banner";
|
|
|
+import "animate.css";
|
|
|
export default {
|
|
|
name: "overView",
|
|
|
components: {
|
|
|
@@ -28,27 +69,71 @@ export default {
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- overView: []
|
|
|
+ keyword: "",
|
|
|
+ overView: [], // 原数组
|
|
|
+ keywordList: [], // 搜索数组
|
|
|
+ otherList: [], //
|
|
|
+ // 是否搜索
|
|
|
+ issshow: false
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
|
- // 重组数据,没6条数据一组
|
|
|
- recombination(list) {
|
|
|
- let arr = []
|
|
|
- if (list && list.length > 0) {
|
|
|
- for (let i = 0; i < list.length; i += 6) {
|
|
|
- arr.push(list.slice(i, i + 6))
|
|
|
+ // 过度是否结束
|
|
|
+ onTransitionEnd(block) {
|
|
|
+ if (block.isSliding) {
|
|
|
+ block.isSliding = false;
|
|
|
+ if (this.isBlockInArray(block, this.otherList)) {
|
|
|
+ this.otherList = this.otherList.filter(b => b.catalog !== block.catalog || b.name !== block.name);
|
|
|
+ this.keywordList.push(block);
|
|
|
+ block.styleOpacity = "0"
|
|
|
+ setTimeout(() => {
|
|
|
+ block.styleOpacity = "1"
|
|
|
+ }, 50);
|
|
|
}
|
|
|
- this.overView = arr
|
|
|
}
|
|
|
},
|
|
|
+ // 重置
|
|
|
+ reset() {
|
|
|
+ this.keywordList = []
|
|
|
+ this.keyword = ""
|
|
|
+ this.issshow = false
|
|
|
+ this.changeSearchAll()
|
|
|
+ },
|
|
|
+ // 搜索
|
|
|
+ isBlockInArray(block, array) {
|
|
|
+ return array.some(b => b.catalog === block.catalog || b.name === block.name);
|
|
|
+ },
|
|
|
+ search() {
|
|
|
+ const keyword = this.keyword.trim().toLowerCase();
|
|
|
+ this.keywordList = []
|
|
|
+ this.issshow = true
|
|
|
+ if (keyword === "") return;
|
|
|
+ let matchCount = 0;
|
|
|
+ this.overView.forEach(block => {
|
|
|
+ if (block.name.toLowerCase().includes(keyword.toLowerCase()) || block.catalog.toLowerCase().includes(keyword.toLowerCase())) {
|
|
|
+ if (block.isSliding) return;
|
|
|
+ setTimeout(() => {
|
|
|
+ block.isSliding = true;
|
|
|
+ }, matchCount * 300);
|
|
|
+ matchCount++;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 判断是第几列数据
|
|
|
+ row(i) {
|
|
|
+ let num = Math.floor(i / 6) % 2
|
|
|
+ return num == 1 ? false : true
|
|
|
+ },
|
|
|
changeSearchAll() {
|
|
|
this.$api.post("/basb/searchAll", {
|
|
|
articleFlag: 0
|
|
|
}).then(res => {
|
|
|
- console.log(res)
|
|
|
- this.recombination(res.data)
|
|
|
- // this.overView = res.data
|
|
|
+ let list = res.data
|
|
|
+ for (let i = 0; i < list.length; i++) {
|
|
|
+ list[i].isSliding = false
|
|
|
+ }
|
|
|
+ this.overView = list
|
|
|
+ this.otherList = list
|
|
|
})
|
|
|
},
|
|
|
// 调整详情
|
|
|
@@ -60,101 +145,156 @@ export default {
|
|
|
});
|
|
|
}
|
|
|
},
|
|
|
- mounted() {},
|
|
|
+ mounted() { },
|
|
|
created() {
|
|
|
this.changeSearchAll()
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
- <style lang="scss">
|
|
|
- .site-header-suggestion-select {
|
|
|
- .el-autocomplete-suggestion__wrap {
|
|
|
- max-height: 380px;
|
|
|
+<style lang="scss" scoped>
|
|
|
+@media screen and (min-width: 751px) and (max-width: 9999px) {
|
|
|
+ .box {
|
|
|
+ .content_box {
|
|
|
+ width: 1200px;
|
|
|
+ margin: 30px auto 0;
|
|
|
}
|
|
|
- }
|
|
|
- </style>
|
|
|
- <style lang="scss" scoped>
|
|
|
- @media screen and (min-width: 751px) and (max-width: 9999px) {
|
|
|
- .box {
|
|
|
- .list_title{
|
|
|
- width: 1200px;
|
|
|
- margin: 30px auto 0;
|
|
|
- font-size: 18px;
|
|
|
- font-weight: 600;
|
|
|
- }
|
|
|
- .list_box{
|
|
|
- width: 1200px;
|
|
|
- margin: 30px auto 90px;
|
|
|
+
|
|
|
+ .list_title {
|
|
|
+ // width: 1200px;
|
|
|
+ // margin: 30px auto 0;
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 600;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .keyword_box {
|
|
|
+ width: 50%;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- flex-wrap: wrap;
|
|
|
- }
|
|
|
- .list{
|
|
|
- width: 100%;
|
|
|
- // width: 1200px;
|
|
|
- // margin: 30px auto 90px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- flex-wrap: wrap;
|
|
|
- // margin: 10px 0.5%;
|
|
|
- background-color: #fff;
|
|
|
- .format-box{
|
|
|
- width: 16.5%;
|
|
|
- border: 1px solid #DDDDDD;
|
|
|
- transition: transform 0.3s ease;
|
|
|
- .images_box{
|
|
|
- padding: 8px;
|
|
|
- box-sizing: border-box;
|
|
|
- text-align: center;
|
|
|
- .images_title{
|
|
|
- font-size: 12px;
|
|
|
- font-weight: 600;
|
|
|
- text-align: left;
|
|
|
- }
|
|
|
- .images_weight{
|
|
|
- font-size: 14px;
|
|
|
- font-weight: 600;
|
|
|
- margin-bottom: 10px;
|
|
|
- // height: 40px;
|
|
|
- }
|
|
|
- .images_text{
|
|
|
- font-size: 12px;
|
|
|
- height: 20rpx;
|
|
|
- }
|
|
|
- .images_footer{
|
|
|
- font-size: 12px;
|
|
|
- margin-top: 10px;
|
|
|
- height: 20rpx;
|
|
|
- }
|
|
|
- .icons-item-imgbox{
|
|
|
- width: 100%;
|
|
|
- height: 160px;
|
|
|
- }
|
|
|
- }
|
|
|
+ margin-left: 40px;
|
|
|
+
|
|
|
+ .input-with-select /deep/ {
|
|
|
+ margin-right: 20px;
|
|
|
+
|
|
|
+ .el-input__inner {
|
|
|
+ border-color: #007BC4 !important;
|
|
|
+ border-right: none !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-input-group__append {
|
|
|
+ border-color: #007BC4 !important;
|
|
|
+ border-left: none !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .but_search {
|
|
|
+ background-color: #007BC4;
|
|
|
+ border: #007BC4;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
}
|
|
|
- .bg-color{
|
|
|
+
|
|
|
+ .buttom_box {
|
|
|
background-color: #007BC4;
|
|
|
- }
|
|
|
- .format-box:hover{
|
|
|
- transform-origin: 0% 0;
|
|
|
- transform: scale(1.2);
|
|
|
- border: 1px solid #007BC4;
|
|
|
- background: #fff;
|
|
|
- z-index: 999;
|
|
|
+ border: #007BC4;
|
|
|
+ color: #fff;
|
|
|
}
|
|
|
}
|
|
|
- .list_active{
|
|
|
- .format-box{
|
|
|
- background-color: #F0FAFE;
|
|
|
- &:hover{
|
|
|
- transform-origin: 0% 0;
|
|
|
- transform: scale(1.2);
|
|
|
- border: 1px solid #007BC4;
|
|
|
- background: #F0FAFE;
|
|
|
- z-index: 999;
|
|
|
+ }
|
|
|
+
|
|
|
+ .list_box {
|
|
|
+ width: 1200px;
|
|
|
+ margin: 30px auto 90px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ }
|
|
|
+
|
|
|
+ .title_box {
|
|
|
+ line-height: 40px;
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .list {
|
|
|
+ width: 100%;
|
|
|
+ // display: flex;
|
|
|
+ // align-items: center;
|
|
|
+ // flex-wrap: wrap;
|
|
|
+ background-color: #fff;
|
|
|
+
|
|
|
+ .format-box {
|
|
|
+ // width: 16.5%;
|
|
|
+ border: 1px solid #DDDDDD;
|
|
|
+ transition: transform 0.3s ease;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ .images_box {
|
|
|
+ padding: 8px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ .images_title {
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 600;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+
|
|
|
+ .images_weight {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 600;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ // height: 40px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .images_text {
|
|
|
+ font-size: 12px;
|
|
|
+ height: 20rpx;
|
|
|
+ white-space: nowrap; /* 防止文本换行 */
|
|
|
+ overflow: hidden; /* 隐藏溢出的内容 */
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+
|
|
|
+ .images_footer {
|
|
|
+ font-size: 12px;
|
|
|
+ margin-top: 10px;
|
|
|
+ height: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .icons-item-imgbox {
|
|
|
+ width: 100%;
|
|
|
+ height: 160px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ .bg-color {
|
|
|
+ background-color: #007BC4;
|
|
|
+ }
|
|
|
+
|
|
|
+ .format-box:hover {
|
|
|
+ transform-origin: 0% 0;
|
|
|
+ transform: scale(1.2);
|
|
|
+ border: 1px solid #007BC4;
|
|
|
+ background: #fff;
|
|
|
+ z-index: 999;
|
|
|
+ }
|
|
|
}
|
|
|
+
|
|
|
+ .list_active {
|
|
|
+ background-color: #F0FAFE;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ transform-origin: 0% 0;
|
|
|
+ transform: scale(1.2);
|
|
|
+ border: 1px solid #007BC4;
|
|
|
+ background: #F0FAFE !important;
|
|
|
+ z-index: 999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .slide-up {
|
|
|
+ // transform: translateY(-100%);
|
|
|
+ // opacity: 0;
|
|
|
+ transform: translateY(-100px) rotate(360deg) scale(1.1);
|
|
|
+ opacity: 0.8;
|
|
|
}
|
|
|
- </style>
|
|
|
+}
|
|
|
+</style>
|
