Hooke / hager

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
0f1f9f49 1 parent db9b654c

联调荣誉展示列表

Inline Side-by-side
Showing 4 changed files with 72 additions and 46 deletions
......@@ -2,7 +2,7 @@
VITE_PORT = 8106
# 反向代理服务器地址
VITE_PROXY_TARGET = https://oa-dev.onwall.cn
VITE_PROXY_TARGET = http://www.hager-electric.com/
# VITE_PROXY_TARGET = https://oa.onwall.cn
# API请求前缀
......
/*
* @Date: 2024-09-26 13:36:06
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-10-23 10:13:25
* @FilePath: /hager/src/api/hager.js
* @Description: 文件描述
*/
import { fn, fetch } from '@/api/fn';
const Api = {
MAP: '/srv/?a=map',
HONOR: '/srv/?a=cate&type=honor',
};
export const mapAPI = (params) => fn(fetch.get(Api.MAP, params));
export const honorAPI = (params) => fn(fetch.get(Api.HONOR, params));
......
......@@ -2,8 +2,8 @@
* @Author: hookehuyr hookehuyr@gmail.com
* @Date: 2022-05-28 10:17:40
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-09-03 16:01:59
* @FilePath: /vue2_vite_web/src/utils/axios.js
* @LastEditTime: 2024-10-23 10:11:14
* @FilePath: /hager/src/utils/axios.js
* @Description:
*/
import axios from 'axios';
......@@ -13,7 +13,7 @@ import { strExist } from '@/utils/tools'
// import { parseQueryString } from '@/utils/tools'
axios.defaults.params = {
f: 'tools',
m: 'srv',
};
/**
......
<!--
* @Date: 2024-10-17 11:13:44
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-10-22 13:45:54
* @LastEditTime: 2024-10-23 10:43:05
* @FilePath: /hager/src/views/about/honors.vue
* @Description: 文件描述
* @Description: 关于海格-荣誉展示
-->
<template>
<div class="hager-about-honors-page">
......@@ -18,40 +18,37 @@
<div :class="['top-img', is_xs ? 'xs' : '']"></div>
<hager-box v-if="!is_xs">
<div class="select-btn-box">
<div @click="onClickBtn(0)" :class="['btn', active_idx === 0 ? 'active' : 'normal']">行业荣誉</div>
<div @click="onClickBtn(1)":class="['btn', active_idx === 1 ? 'active' : 'normal']">美学设计</div>
<div @click="onClickBtn(2)":class="['btn', active_idx === 2 ? 'active' : 'normal']">卓越发展</div>
<div
v-for="(item, index) in button_list" :key="index"
:class="['btn', active_idx === index ? 'active' : 'normal']"
@click="onClickBtn(index)">
{{ item.category_name }}
</div>
</div>
</hager-box>
<div v-else class="select-btn-box" style="padding: 1rem;">
<el-row :gutter="10">
<el-col :span="8">
<div @click="onClickBtn(0)" :class="['btn xs', active_idx === 0 ? 'active' : 'normal']">行业荣誉</div>
</el-col>
<el-col :span="8">
<div @click="onClickBtn(1)" :class="['btn xs', active_idx === 1 ? 'active' : 'normal']">美学设计</div>
</el-col>
<el-col :span="8">
<div @click="onClickBtn(2)" :class="['btn xs', active_idx === 2 ? 'active' : 'normal']">卓越发展</div>
<el-col :span="8" v-for="(item, index) in button_list" :key="index">
<div @click="onClickBtn(index)" :class="['btn xs', active_idx === index ? 'active' : 'normal']">{{ item.category_name }}</div>
</el-col>
</el-row>
</div>
<hager-box v-if="!is_xs" v-for="(item, index) in years_list" :key="index">
<p class="list-title">{{ item.year }}年</p>
<hager-box v-if="!is_xs" v-for="(item, index) in honors_cate_list" :key="index">
<p class="list-title">{{ item.category_name }}</p>
<div class="list-wrapper">
<div class="card" v-for="(x, idx) in item.list" :key="idx">
<div class="card-image-box">
<div class="card-image" :style="{ backgroundImage: `url(${x.img})` }"></div>
<div class="card-image" :style="{ backgroundImage: `url(${x.cover})` }"></div>
</div>
<div class="card-content">
<h3>{{ x.title }}</h3>
<p>{{ x.content }}</p>
<h3>{{ x.post_title }}</h3>
<p v-html="x.post_content"></p>
</div>
</div>
</div>
</hager-box>
<div v-if="is_xs" v-for="(item, index) in years_list" :key="index" style="padding: 1rem;">
<p class="list-title">{{ item.year }}年</p>
<div v-if="is_xs" v-for="(item, index) in honors_cate_list" :key="index" style="padding: 1rem;">
<p class="list-title">{{ item.category_name }}</p>
<swiper class="swiper"
:ref="'mySwiper' + item.id"
:options="swiperOption"
......@@ -61,11 +58,11 @@
<div class="list-wrapper-mini">
<div class="card">
<div class="card-image-box">
<div class="card-image" :style="{ backgroundImage: `url(${x.img})` }"></div>
<div class="card-image xs" :style="{ backgroundImage: `url(${x.cover})` }"></div>
</div>
<div class="card-content">
<h3>{{ x.title }}</h3>
<p>{{ x.content }}</p>
<div class="card-content xs">
<h3>{{ x.post_title }}</h3>
<p v-html="x.post_content"></p>
</div>
</div>
</div>
......@@ -73,14 +70,14 @@
</swiper>
<div v-if="item.list.length > item.slidesPerView || is_xs" class="xs-control">
<div>
<i :class="['el-icon-arrow-left', item.activeIndex === 0 ? 'disabled' : '']" @click="prevBtn(item)"></i>
<i :class="['el-icon-arrow-left', item.activeIndex === 0 ? 'disabled' : '']" @click="prevBtn(item)"></i>&nbsp;
<i :class="['el-icon-arrow-right', item.reach_end ? 'disabled' : '']" @click="nextBtn(item)"></i>
</div>
</div>
</div>
<hager-box>
<!-- <hager-box>
<hager-load-more></hager-load-more>
</hager-box>
</hager-box> -->
</div>
</template>
......@@ -88,6 +85,7 @@
import mixin from 'common/mixin';
import hagerBox from '@/components/common/hagerBox';
import hagerLoadMore from '@/components/hagerLoadMore.vue';
import { honorAPI } from "@/api/hager.js";
export default {
components: { hagerBox, hagerLoadMore },
......@@ -95,7 +93,9 @@ export default {
data () {
return {
active_idx: 0,
years_list: [{
button_list: [],
all_honors_list: [],
honors_cate_list: [{
id: '1',
year: '2022',
list: [{
......@@ -169,22 +169,35 @@ export default {
},
}
},
mounted () {
this.years_list.forEach((item) => {
this.$nextTick(() => {
const swiperRef = this.$refs[`mySwiper${item.id}`];
if (swiperRef && swiperRef[0].$swiper) {
swiperRef[0].$swiper.on('breakpoint', (swiper) => {
// breakpoint时 显示的条数
item.slidesPerView = swiper.slidesPerView;
});
async mounted () {
const { code, data } = await honorAPI();
if (code) {
this.all_honors_list = data; // 所有荣誉集合
// 荣誉分类列表
this.button_list = data.map(item => {
return {
id: item.id,
category_name: item.category_name
}
});
});
this.honors_cate_list = this.all_honors_list[0]['children']; // 默认第一个
this.honors_cate_list.forEach((item) => {
this.$nextTick(() => {
const swiperRef = this.$refs[`mySwiper${item.id}`];
if (swiperRef && swiperRef[0].$swiper) {
swiperRef[0].$swiper.on('breakpoint', (swiper) => {
// breakpoint时 显示的条数
item.slidesPerView = swiper.slidesPerView;
});
}
});
});
}
},
methods: {
onClickBtn (idx) {
this.active_idx = idx;
this.honors_cate_list = this.all_honors_list[idx]['children'];
},
prevBtn (item) {
this.$nextTick(() => {
......@@ -272,13 +285,13 @@ export default {
.list-wrapper {
margin-bottom: 1rem;
.card-image-box {
padding: 1rem;
padding: 0.5rem;
background-color: #E3F1F7;
}
.card-image {
width: 100%;
height: 17rem;
background-size: cover;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
......@@ -348,12 +361,18 @@ export default {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
&.xs {
height: 15rem;
}
}
.card-content {
background-color: #F7F7F7;
padding: 2rem 1.5rem;
height: 12rem;
overflow: scroll;
&.xs {
height: 7rem;
}
h3 {
color: @secondary-color;
font-size: 1rem;
......